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

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

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>

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') },
 	];