feat: Integrate translation support for contract-related components and improve user feedback messages

src/app/contracts/[id]/page.js

@@ -12,6 +12,7 @@ import { LoadingState } from "@/components/ui/States";
 import { formatDate } from "@/lib/utils";
 import FileUploadModal from "@/components/FileUploadModal";
 import FileAttachmentsList from "@/components/FileAttachmentsList";
+import { useTranslation } from "@/lib/i18n";
 
 export default function ContractDetailsPage() {
 	const params = useParams();
@@ -21,6 +22,7 @@ export default function ContractDetailsPage() {
 	const [loading, setLoading] = useState(true);
 	const [showUploadModal, setShowUploadModal] = useState(false);
 	const [attachments, setAttachments] = useState([]);
+	const { t } = useTranslation();
 
 	useEffect(() => {
 		async function fetchContractDetails() {
@@ -67,7 +69,7 @@ export default function ContractDetailsPage() {
 	if (loading) {
 		return (
 			<PageContainer>
-				<LoadingState message="Loading contract details..." />
+				<LoadingState message={t('contracts.loadingContractDetails')} />
 			</PageContainer>
 		);
 	}
@@ -77,9 +79,9 @@ export default function ContractDetailsPage() {
 			<PageContainer>
 				<Card>
 					<CardContent className="text-center py-12">
-						<p className="text-red-600 text-lg mb-4">Contract not found.</p>
+						<p className="text-red-600 text-lg mb-4">{t('contracts.contractNotFound')}</p>
 						<Link href="/contracts">
-							<Button variant="primary">Back to Contracts</Button>
+							<Button variant="primary">{t('contracts.backToContracts')}</Button>
 						</Link>
 					</CardContent>
 				</Card>
@@ -89,8 +91,8 @@ export default function ContractDetailsPage() {
 	return (
 		<PageContainer>
 			<PageHeader
-				title={`Contract ${contract.contract_number}`}
-				description={contract.contract_name || "Contract Details"}
+				title={`${t('contracts.contract')} ${contract.contract_number}`}
+				description={contract.contract_name || t('contracts.contractInformation')}
 				action={
 					<div className="flex items-center gap-3">
 						<Link href="/contracts">
@@ -108,7 +110,7 @@ export default function ContractDetailsPage() {
 										d="M15 19l-7-7 7-7"
 									/>
 								</svg>
-								Back to Contracts
+								{t('contracts.backToContracts')}
 							</Button>
 						</Link>
 						<Link href={`/projects/new?contract_id=${contractId}`}>
@@ -126,7 +128,7 @@ export default function ContractDetailsPage() {
 										d="M12 4v16m8-8H4"
 									/>
 								</svg>
-								Add Project
+								{t('contracts.addProject')}
 							</Button>
 						</Link>
 					</div>
@@ -139,14 +141,14 @@ export default function ContractDetailsPage() {
 					<Card>
 						<CardHeader>
 							<h2 className="text-xl font-semibold text-gray-900">
-								Contract Information
+								{t('contracts.contractInformation')}
 							</h2>
 						</CardHeader>
 						<CardContent className="space-y-6">
 							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 								<div>
 									<span className="text-sm font-medium text-gray-500 block mb-1">
-										Contract Number
+										{t('contracts.contractNumber')}
 									</span>
 									<p className="text-gray-900 font-medium">
 										{contract.contract_number}
@@ -155,7 +157,7 @@ export default function ContractDetailsPage() {
 								{contract.contract_name && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Contract Name
+											{t('contracts.contractName')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{contract.contract_name}
@@ -165,7 +167,7 @@ export default function ContractDetailsPage() {
 								{contract.customer_contract_number && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Customer Contract Number
+											{t('contracts.customerContractNumber')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{contract.customer_contract_number}
@@ -175,7 +177,7 @@ export default function ContractDetailsPage() {
 								{contract.customer && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Customer
+											{t('contracts.customer')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{contract.customer}
@@ -185,7 +187,7 @@ export default function ContractDetailsPage() {
 								{contract.investor && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Investor
+											{t('contracts.investor')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{contract.investor}
@@ -195,7 +197,7 @@ export default function ContractDetailsPage() {
 								{contract.date_signed && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Date Signed
+											{t('contracts.dateSigned')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{formatDate(contract.date_signed)}
@@ -205,7 +207,7 @@ export default function ContractDetailsPage() {
 								{contract.finish_date && (
 									<div>
 										<span className="text-sm font-medium text-gray-500 block mb-1">
-											Finish Date
+											{t('contracts.finishDate')}
 										</span>
 										<p className="text-gray-900 font-medium">
 											{formatDate(contract.finish_date)}
@@ -221,22 +223,22 @@ export default function ContractDetailsPage() {
 				<div>
 					<Card>
 						<CardHeader>
-							<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
+							<h2 className="text-lg font-semibold text-gray-900">{t('contracts.summary')}</h2>
 						</CardHeader>
 						<CardContent className="space-y-4">
 							<div>
 								<span className="text-sm font-medium text-gray-500 block mb-2">
-									Projects Count
+									{t('contracts.projectsCount')}
 								</span>
 								<Badge variant="primary" size="lg">
-									{projects.length} Projects
+									{projects.length} {t('contracts.projects')}
 								</Badge>
 							</div>
 
 							{contract.finish_date && (
 								<div className="border-t pt-4">
 									<span className="text-sm font-medium text-gray-500 block mb-2">
-										Contract Status
+										{t('contracts.contractStatus')}
 									</span>
 									<Badge
 										variant={
@@ -247,8 +249,8 @@ export default function ContractDetailsPage() {
 										size="md"
 									>
 										{new Date(contract.finish_date) > new Date()
-											? "Active"
-											: "Expired"}
+											? t('contracts.active')
+											: t('contracts.expired')}
 									</Badge>
 								</div>
 							)}
@@ -262,7 +264,7 @@ export default function ContractDetailsPage() {
 				<CardHeader>
 					<div className="flex justify-between items-center">
 						<h2 className="text-xl font-semibold text-gray-900">
-							Contract Documents ({attachments.length})
+							{t('contracts.contractDocuments')} ({attachments.length})
 						</h2>
 						<Button
 							variant="primary"
@@ -282,7 +284,7 @@ export default function ContractDetailsPage() {
 									d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
 								/>
 							</svg>
-							Upload Document
+							{t('contracts.uploadDocument')}
 						</Button>
 					</div>
 				</CardHeader>
@@ -300,7 +302,7 @@ export default function ContractDetailsPage() {
 				<CardHeader>
 					<div className="flex justify-between items-center">
 						<h2 className="text-xl font-semibold text-gray-900">
-							Associated Projects ({projects.length})
+							{t('contracts.associatedProjects')} ({projects.length})
 						</h2>
 						<Link href={`/projects/new?contract_id=${contractId}`}>
 							<Button variant="outline" size="sm">
@@ -317,7 +319,7 @@ export default function ContractDetailsPage() {
 										d="M12 4v16m8-8H4"
 									/>
 								</svg>
-								Add Project
+								{t('contracts.addProject')}
 							</Button>
 						</Link>
 					</div>
@@ -339,13 +341,13 @@ export default function ContractDetailsPage() {
 								</svg>
 							</div>
 							<h3 className="text-lg font-medium text-gray-900 mb-2">
-								No projects yet
+								{t('contracts.noProjectsYet')}
 							</h3>
 							<p className="text-gray-500 mb-6">
-								Get started by creating your first project for this contract
+								{t('contracts.getStartedMessage')}
 							</p>
 							<Link href={`/projects/new?contract_id=${contractId}`}>
-								<Button variant="primary">Create First Project</Button>
+								<Button variant="primary">{t('contracts.createFirstProject')}</Button>
 							</Link>
 						</div>
 					) : (
@@ -411,22 +413,22 @@ export default function ContractDetailsPage() {
 														size="sm"
 													>
 														{project.project_status === "registered"
-															? "Registered"
+															? t('projectStatus.registered')
 															: project.project_status === "in_progress_design"
-															? "In Progress (Design)"
+															? t('projectStatus.in_progress_design')
 															: project.project_status ===
 															  "in_progress_construction"
-															? "In Progress (Construction)"
+															? t('projectStatus.in_progress_construction')
 															: project.project_status === "fulfilled"
-															? "Completed"
-															: "Unknown"}
+															? t('projectStatus.fulfilled')
+															: t('projectStatus.unknown')}
 													</Badge>
 												</div>
 											</div>
 										</div>
 										<Link href={`/projects/${project.project_id}`}>
 											<Button variant="outline" size="sm">
-												View Details
+												{t('contracts.viewDetails')}
 											</Button>
 										</Link>
 									</div>

src/app/contracts/new/page.js

@@ -1,15 +1,19 @@
+"use client";
+
 import ContractForm from "@/components/ContractForm";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 import Button from "@/components/ui/Button";
 import Link from "next/link";
+import { useTranslation } from "@/lib/i18n";
 
 export default function NewContractPage() {
+	const { t } = useTranslation();
 	return (
 		<PageContainer>
 			<PageHeader
-				title="Create New Contract"
-				description="Add a new contract to your portfolio"
+				title={t('contracts.createNewContract')}
+				description={t('contracts.addNewContractDescription')}
 				action={
 					<Link href="/contracts">
 						<Button variant="outline" size="sm">
@@ -26,7 +30,7 @@ export default function NewContractPage() {
 									d="M15 19l-7-7 7-7"
 								/>
 							</svg>
-							Back to Contracts
+							{t('contracts.backToContracts')}
 						</Button>
 					</Link>
 				}