feat: Implement task template management with translation support and improved UI components

2025-09-18 12:36:03 +02:00
parent abfd174f85
commit 142b6490cc
8 changed files with 183 additions and 88 deletions
--- a/src/app/project-tasks/page.js
+++ b/src/app/project-tasks/page.js
@@ -1,13 +1,35 @@
 import ProjectTasksList from "@/components/ProjectTasksList";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
+import Button from "@/components/ui/Button";
+import Link from "next/link";

 export default function ProjectTasksPage() {
 	return (
 		<PageContainer>
 			<PageHeader
-				title="Zadania projektów"
-				description="---"
+				title="Zadania"
+				description="Zarządzaj zadaniami projektów"
+				action={
+					<Link href="/tasks/templates">
+						<Button variant="secondary" size="md">
+							<svg
+								className="w-4 h-4 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path 
+									strokeLinecap="round" 
+									strokeLinejoin="round" 
+									strokeWidth={2} 
+									d="M4 7v10c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V7M4 7c0-2.21 1.79-4 4-4h8c2.21 0 4 1.79 4 4M4 7h16M9 11v4m6-4v4" 
+								/>
+							</svg>
+							Szablony zadań
+						</Button>
+					</Link>
+				}
 			/>
 			<ProjectTasksList />
 		</PageContainer>
--- a/src/app/tasks/templates/[id]/edit/page.js
+++ b/src/app/tasks/templates/[id]/edit/page.js
@@ -1,9 +1,6 @@
 import db from "@/lib/db";
 import { notFound } from "next/navigation";
-import Link from "next/link";
-import { Card, CardHeader, CardContent } from "@/components/ui/Card";
-import Button from "@/components/ui/Button";
-import TaskTemplateForm from "@/components/TaskTemplateForm";
+import EditTaskTemplateClient from "@/components/EditTaskTemplateClient";

 export default async function EditTaskTemplatePage({ params }) {
 	const { id } = await params;
@@ -16,52 +13,5 @@ export default async function EditTaskTemplatePage({ params }) {
 		notFound();
 	}

-	return (
-		<div className="min-h-screen bg-gray-50">
-			<div className="max-w-4xl mx-auto p-6">
-				<div className="flex items-center gap-4 mb-8">
-					<Link href="/tasks/templates">
-						<Button variant="outline" size="sm">
-							<svg
-								className="w-4 h-4 mr-2"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={2}
-									d="M15 19l-7-7 7-7"
-								/>
-							</svg>
-							Back to Templates
-						</Button>
-					</Link>{" "}
-					<div>
-						<h1 className="text-3xl font-bold text-gray-900">
-							Edit Task Template
-						</h1>
-						<p className="text-gray-600 mt-1">
-							Update the details for &ldquo;{template.name}&rdquo;
-						</p>
-					</div>
-				</div>
-
-				<Card>
-					<CardHeader>
-						<h2 className="text-xl font-semibold text-gray-900">
-							Template Details
-						</h2>
-						<p className="text-gray-600">
-							Modify the template information below
-						</p>
-					</CardHeader>
-					<CardContent>
-						<TaskTemplateForm templateId={params.id} initialData={template} />
-					</CardContent>
-				</Card>
-			</div>
-		</div>
-	);
+	return <EditTaskTemplateClient template={template} />;
 }
--- a/src/app/tasks/templates/new/page.js
+++ b/src/app/tasks/templates/new/page.js
@@ -1,9 +1,13 @@
+"use client";
+
 import TaskTemplateForm from "@/components/TaskTemplateForm";
+import { useTranslation } from "@/lib/i18n";

 export default function NewTaskTemplatePage() {
+	const { t } = useTranslation();
 	return (
 		<div className="p-4 max-w-xl mx-auto">
-			<h1 className="text-xl font-bold mb-4">New Task Template</h1>
+			<h1 className="text-xl font-bold mb-4">{t('taskTemplates.newTemplate')}</h1>
 			<TaskTemplateForm />
 		</div>
 	);
--- a/src/app/tasks/templates/page.js
+++ b/src/app/tasks/templates/page.js
@@ -1,24 +1,45 @@
-import db from "@/lib/db";
+"use client";
+
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import Badge from "@/components/ui/Badge";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
+import { useTranslation } from "@/lib/i18n";

 export default function TaskTemplatesPage() {
-	const templates = db
-		.prepare(
-			`
-    SELECT * FROM tasks WHERE is_standard = 1 ORDER BY name ASC
-  `
-		)
-		.all();
+	const { t } = useTranslation();
+	const [templates, setTemplates] = useState([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		const fetchTemplates = async () => {
+			try {
+				const response = await fetch('/api/tasks/templates');
+				if (response.ok) {
+					const data = await response.json();
+					setTemplates(data);
+				} else {
+					console.error('Failed to fetch templates');
+				}
+			} catch (error) {
+				console.error('Error fetching templates:', error);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchTemplates();
+	}, []);
+
+	if (loading) {
 		return (
 			<PageContainer>
 				<PageHeader
-				title="Task Templates"
-				description="Manage reusable task templates"
+					title={t('taskTemplates.title')}
+					description={t('taskTemplates.subtitle')}
 					action={
 						<Link href="/tasks/templates/new">
 							<Button variant="primary" size="lg">
@@ -35,7 +56,40 @@ export default function TaskTemplatesPage() {
 										d="M12 4v16m8-8H4"
 									/>
 								</svg>
-							New Template
+								{t('taskTemplates.newTemplate')}
+							</Button>
+						</Link>
+					}
+				/>
+				<div className="text-center py-12">
+					<div className="text-gray-500">{t('common.loading')}</div>
+				</div>
+			</PageContainer>
+		);
+	}
+
+	return (
+		<PageContainer>
+			<PageHeader
+				title={t('taskTemplates.title')}
+				description={t('taskTemplates.subtitle')}
+				action={
+					<Link href="/tasks/templates/new">
+						<Button variant="primary" size="lg">
+							<svg
+								className="w-5 h-5 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							{t('taskTemplates.newTemplate')}
 						</Button>
 					</Link>
 				}
@@ -58,13 +112,13 @@ export default function TaskTemplatesPage() {
 							</svg>
 						</div>
 						<h3 className="text-lg font-medium text-gray-900 mb-2">
-							No task templates yet
+							{t('taskTemplates.noTemplates')}
 						</h3>
 						<p className="text-gray-500 mb-6">
-							Create reusable task templates to streamline your workflow
+							{t('taskTemplates.noTemplatesMessage')}
 						</p>
 						<Link href="/tasks/templates/new">
-							<Button variant="primary">Create First Template</Button>
+							<Button variant="primary">{t('taskTemplates.newTemplate')}</Button>
 						</Link>
 					</CardContent>
 				</Card>
@@ -81,7 +135,7 @@ export default function TaskTemplatesPage() {
 										{template.name}
 									</h3>
 									<Badge variant="primary" size="sm">
-										{template.max_wait_days} days
+										{template.max_wait_days} {t('common.days')}
 									</Badge>
 								</div>
 								{template.description && (
@@ -92,7 +146,7 @@ export default function TaskTemplatesPage() {
 								<div className="flex items-center justify-end">
 									<Link href={`/tasks/templates/${template.task_id}/edit`}>
 										<Button variant="outline" size="sm">
-											Edit
+											{t('taskTemplates.editTemplate')}
 										</Button>
 									</Link>
 								</div>
--- a/src/components/EditTaskTemplateClient.js
+++ b/src/components/EditTaskTemplateClient.js
@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import TaskTemplateForm from "@/components/TaskTemplateForm";
+import { useTranslation } from "@/lib/i18n";
+
+export default function EditTaskTemplateClient({ template }) {
+	const { t } = useTranslation();
+
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="max-w-4xl mx-auto p-6">
+				<div className="flex items-center gap-4 mb-8">
+					<Link href="/tasks/templates">
+						<Button variant="outline" size="sm">
+							<svg
+								className="w-4 h-4 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M15 19l-7-7 7-7"
+								/>
+							</svg>
+							{t('taskTemplates.title')}
+						</Button>
+					</Link>{" "}
+					<div>
+						<h1 className="text-3xl font-bold text-gray-900">
+							{t('taskTemplates.editTemplate')}
+						</h1>
+						<p className="text-gray-600 mt-1">
+							{t('taskTemplates.subtitle')} &ldquo;{template.name}&rdquo;
+						</p>
+					</div>
+				</div>
+
+				<Card>
+					<CardHeader>
+						<h2 className="text-xl font-semibold text-gray-900">
+							{t('taskTemplates.templateName')}
+						</h2>
+						<p className="text-gray-600">
+							{t('taskTemplates.subtitle')}
+						</p>
+					</CardHeader>
+					<CardContent>
+						<TaskTemplateForm templateId={template.task_id} initialData={template} />
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}
--- a/src/components/TaskTemplateForm.js
+++ b/src/components/TaskTemplateForm.js
@@ -4,11 +4,13 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Button from "./ui/Button";
 import { Input } from "./ui/Input";
+import { useTranslation } from "@/lib/i18n";

 export default function TaskTemplateForm({
 	templateId = null,
 	initialData = null,
 }) {
+	const { t } = useTranslation();
 	const [name, setName] = useState("");
 	const [max_wait_days, setRequiredWaitDays] = useState("");
 	const [description, setDescription] = useState("");
@@ -52,11 +54,11 @@ export default function TaskTemplateForm({
 				const error = await res.json();
 				alert(
 					error.error ||
-						`Failed to ${isEditing ? "update" : "create"} task template.`
+						`${t('common.error')} ${isEditing ? t('taskTemplates.editTemplate') : t('taskTemplates.newTemplate')}`
 				);
 			}
 		} catch (error) {
-			alert(`Error ${isEditing ? "updating" : "creating"} task template.`);
+			alert(`${t('common.error')} ${isEditing ? t('taskTemplates.editTemplate') : t('taskTemplates.newTemplate')}`);
 		} finally {
 			setLoading(false);
 		}
@@ -65,41 +67,41 @@ export default function TaskTemplateForm({
 		<form onSubmit={handleSubmit} className="space-y-6">
 			<div>
 				<label className="block text-sm font-medium text-gray-700 mb-2">
-					Template Name *
+					{t('taskTemplates.templateName')} *
 				</label>
 				<Input
 					type="text"
 					value={name}
 					onChange={(e) => setName(e.target.value)}
-					placeholder="Enter template name"
+					placeholder={t('taskTemplates.templateName')}
 					required
 				/>
 			</div>

 			<div>
 				<label className="block text-sm font-medium text-gray-700 mb-2">
-					Max Wait Days
+					{t('taskTemplates.estimatedDuration')}
 				</label>
 				<Input
 					type="number"
 					value={max_wait_days}
 					onChange={(e) => setRequiredWaitDays(e.target.value)}
-					placeholder="Enter maximum wait days"
+					placeholder={t('taskTemplates.estimatedDuration')}
 					min="0"
 				/>
 				<p className="text-sm text-gray-500 mt-1">
-					Maximum number of days this task can wait before it needs attention
+					{t('taskTemplates.estimatedDuration')}
 				</p>
 			</div>

 			<div>
 				<label className="block text-sm font-medium text-gray-700 mb-2">
-					Description
+					{t('taskTemplates.templateDescription')}
 				</label>
 				<textarea
 					value={description}
 					onChange={(e) => setDescription(e.target.value)}
-					placeholder="Enter template description (optional)"
+					placeholder={t('taskTemplates.templateDescription')}
 					rows={3}
 					className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
 				/>
@@ -110,12 +112,12 @@ export default function TaskTemplateForm({
 					{loading ? (
 						<>
 							<div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-							{isEditing ? "Updating..." : "Creating..."}
+							{isEditing ? t('common.updating') : t('common.creating')}
 						</>
 					) : isEditing ? (
-						"Update Template"
+						t('taskTemplates.editTemplate')
 					) : (
-						"Create Template"
+						t('taskTemplates.newTemplate')
 					)}
 				</Button>
 				<Button
@@ -124,7 +126,7 @@ export default function TaskTemplateForm({
 					onClick={() => router.push("/tasks/templates")}
 					disabled={loading}
 				>
-					Cancel
+					{t('common.cancel')}
 				</Button>
 			</div>
 		</form>
--- a/src/components/ui/Navigation.js
+++ b/src/components/ui/Navigation.js
@@ -23,8 +23,7 @@ const Navigation = () => {
 	const navItems = [
 		{ href: "/projects", label: t('navigation.projects') },
 		{ href: "/calendar", label: t('navigation.calendar') || 'Kalendarz' },
-		{ href: "/tasks/templates", label: t('navigation.taskTemplates') },
-		{ href: "/project-tasks", label: t('navigation.projectTasks') },
+		{ href: "/project-tasks", label: t('navigation.tasks') || 'Tasks' },
 		{ href: "/contracts", label: t('navigation.contracts') },
 	];

--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -15,6 +15,7 @@ const translations = {
      calendar: "Kalendarz",
      taskTemplates: "Szablony zadań",
      projectTasks: "Zadania projektów",
+      tasks: "Zadania",
      contracts: "Umowy",
      userManagement: "Zarządzanie użytkownikami",
      projectPanel: "Panel Projektów",
@@ -71,7 +72,8 @@ const translations = {
      clearSearch: "Wyczyść wyszukiwanie",
      filters:"Filtry",
      clearAllFilters: "Wyczyść wszystkie filtry",
-      sortBy: "Sortuj według"
+      sortBy: "Sortuj według",
+      days: "dni"
    },

    // Dashboard
@@ -534,6 +536,7 @@ const translations = {
      projects: "Projects",
      taskTemplates: "Task Templates", 
      projectTasks: "Project Tasks",
+      tasks: "Tasks",
      contracts: "Contracts",
      userManagement: "User Management",
      projectPanel: "Project Panel",
@@ -589,7 +592,8 @@ const translations = {
      clearSearch: "Clear search",
      filters: "Filters",
      clearAllFilters: "Clear all filters",
-      sortBy: "Sort by"
+      sortBy: "Sort by",
+      days: "days"
    },

    dashboard: {