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

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>