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

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