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

src/components/ProjectForm.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/Input";
 import { formatDateForInput } from "@/lib/utils";
 import { useTranslation } from "@/lib/i18n";
 
-export default function ProjectForm({ initialData = null }) {
+const ProjectForm = forwardRef(function ProjectForm({ initialData = null }, ref) {
 	const { t } = useTranslation();
 	const [form, setForm] = useState({
 		contract_id: "",
@@ -81,8 +81,7 @@ export default function ProjectForm({ initialData = null }) {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
-	async function handleSubmit(e) {
-		e.preventDefault();
+	async function saveProject() {
 		setLoading(true);
 
 		try {
@@ -112,6 +111,16 @@ export default function ProjectForm({ initialData = null }) {
 			setLoading(false);
 		}
 	}
+
+	async function handleSubmit(e) {
+		e.preventDefault();
+		await saveProject();
+	}
+
+	// Expose save function to parent component
+	useImperativeHandle(ref, () => ({
+		saveProject
+	}));
 	return (
 		<Card>
 			<CardHeader>
@@ -438,4 +447,6 @@ export default function ProjectForm({ initialData = null }) {
 			</CardContent>
 		</Card>
 	);
-}
+});
+
+export default ProjectForm;

src/lib/i18n.js

@@ -135,6 +135,8 @@ const translations = {
       newProject: "Nowy projekt",
       editProject: "Edytuj projekt",
       deleteProject: "Usuń projekt",
+      editing: "Edycja",
+      backToProjects: "Powrót do projektów",
       projectName: "Nazwa projektu",
       city: "Miasto",
       address: "Adres",
@@ -687,6 +689,8 @@ const translations = {
       newProject: "New Project",
       editProject: "Edit Project",
       deleteProject: "Delete Project",
+      editing: "Editing",
+      backToProjects: "Back to Projects",
       projectName: "Project Name",
       city: "City",
       address: "Address",