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

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>

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} />;
 }

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>
 	);

src/app/tasks/templates/page.js

@@ -1,24 +1,78 @@
-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={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>
+					}
+				/>
+				<div className="text-center py-12">
+					<div className="text-gray-500">{t('common.loading')}</div>
+				</div>
+			</PageContainer>
+		);
+	}
+
 	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 +89,7 @@ export default function TaskTemplatesPage() {
 									d="M12 4v16m8-8H4"
 								/>
 							</svg>
-							New Template
+							{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>