feat: Enhance EditProjectPage with translation support and refactor ProjectForm to use forwardRef

src/app/projects/[id]/edit/page.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useParams } from "next/navigation";
 import ProjectForm from "@/components/ProjectForm";
 import PageContainer from "@/components/ui/PageContainer";
@@ -8,6 +8,7 @@ import PageHeader from "@/components/ui/PageHeader";
 import Button from "@/components/ui/Button";
 import Link from "next/link";
 import { LoadingState } from "@/components/ui/States";
+import { useTranslation } from "@/lib/i18n";
 
 export default function EditProjectPage() {
 	const params = useParams();
@@ -15,6 +16,8 @@ export default function EditProjectPage() {
 	const [project, setProject] = useState(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState(null);
+	const { t } = useTranslation();
+	const formRef = useRef();
 
 	useEffect(() => {
 		const fetchProject = async () => {
@@ -62,10 +65,30 @@ export default function EditProjectPage() {
 	return (
 		<PageContainer>
 			<PageHeader
-				title="Edit Project"
-				description={`Editing: ${project.project_name || "Untitled Project"}`}
+				title={t('projects.editProject')}
+				description={`${t('projects.editing')}: ${project.project_name || "Untitled Project"}`}
 				action={
 					<div className="flex items-center gap-3">
+						<Button 
+							variant="primary" 
+							size="sm"
+							onClick={() => formRef.current?.saveProject()}
+						>
+							<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="M5 13l4 4L19 7"
+								/>
+							</svg>
+							{t('common.save')}
+						</Button>
 						<Link href={`/projects/${id}`}>
 							<Button variant="outline" size="sm">
 								<svg
@@ -81,7 +104,7 @@ export default function EditProjectPage() {
 										d="M6 18L18 6M6 6l12 12"
 									/>
 								</svg>
-								Cancel
+								{t('common.cancel')}
 							</Button>
 						</Link>
 						<Link href="/projects">
@@ -99,14 +122,14 @@ export default function EditProjectPage() {
 										d="M15 19l-7-7 7-7"
 									/>
 								</svg>
-								Back to Projects
+								{t('projects.backToProjects')}
 							</Button>
 						</Link>
 					</div>
 				}
 			/>
 			<div className="max-w-2xl">
-				<ProjectForm initialData={project} />
+				<ProjectForm ref={formRef} initialData={project} />
 			</div>
 		</PageContainer>
 	);