feat: Add contract editing functionality with form handling and translations

src/components/ContractForm.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
@@ -8,8 +8,9 @@ import { Input } from "@/components/ui/Input";
 import { formatDateForInput } from "@/lib/utils";
 import { useTranslation } from "@/lib/i18n";
 
-export default function ContractForm() {
+export default function ContractForm({ initialData = null }) {
 	const { t } = useTranslation();
+	const isEdit = !!initialData;
 	const [form, setForm] = useState({
 		contract_number: "",
 		contract_name: "",
@@ -23,6 +24,21 @@ export default function ContractForm() {
 	const [loading, setLoading] = useState(false);
 	const router = useRouter();
 
+	// Update form when initialData changes (for edit mode)
+	useEffect(() => {
+		if (initialData) {
+			setForm({
+				contract_number: initialData.contract_number || "",
+				contract_name: initialData.contract_name || "",
+				customer_contract_number: initialData.customer_contract_number || "",
+				customer: initialData.customer || "",
+				investor: initialData.investor || "",
+				date_signed: initialData.date_signed || "",
+				finish_date: initialData.finish_date || "",
+			});
+		}
+	}, [initialData]);
+
 	function handleChange(e) {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
@@ -34,21 +50,32 @@ export default function ContractForm() {
 		try {
 			console.log("Submitting form:", form);
 
-			const res = await fetch("/api/contracts", {
-				method: "POST",
+			const url = isEdit 
+				? `/api/contracts/${initialData.contract_id}` 
+				: "/api/contracts";
+			const method = isEdit ? "PUT" : "POST";
+
+			const res = await fetch(url, {
+				method,
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify(form),
 			});
 
 			if (res.ok) {
 				const contract = await res.json();
-				router.push(`/contracts/${contract.contract_id}`);
+				router.push(`/contracts/${contract.contract_id || initialData.contract_id}`);
 			} else {
-				alert(t('contracts.failedToCreateContract'));
+				const errorMessage = isEdit 
+					? t('contracts.failedToUpdateContract') 
+					: t('contracts.failedToCreateContract');
+				alert(errorMessage);
 			}
 		} catch (error) {
-			console.error("Error creating contract:", error);
-			alert(t('contracts.failedToCreateContract'));
+			console.error(`Error ${isEdit ? 'updating' : 'creating'} contract:`, error);
+			const errorMessage = isEdit 
+				? t('contracts.failedToUpdateContract') 
+				: t('contracts.failedToCreateContract');
+			alert(errorMessage);
 		} finally {
 			setLoading(false);
 		}
@@ -189,7 +216,7 @@ export default function ContractForm() {
 											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 										></path>
 									</svg>
-									{t('common.creating')}
+									{isEdit ? t('common.updating') : t('common.creating')}
 								</>
 							) : (
 								<>
@@ -203,10 +230,10 @@ export default function ContractForm() {
 											strokeLinecap="round"
 											strokeLinejoin="round"
 											strokeWidth={2}
-											d="M12 4v16m8-8H4"
+											d={isEdit ? "M5 13l4 4L19 7" : "M12 4v16m8-8H4"}
 										/>
 									</svg>
-									{t('contracts.createContract')}
+									{isEdit ? t('contracts.updateContract') : t('contracts.createContract')}
 								</>
 							)}
 						</Button>