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

src/components/ContractForm.js

@@ -6,8 +6,10 @@ import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { formatDateForInput } from "@/lib/utils";
+import { useTranslation } from "@/lib/i18n";
 
 export default function ContractForm() {
+	const { t } = useTranslation();
 	const [form, setForm] = useState({
 		contract_number: "",
 		contract_name: "",
@@ -42,13 +44,11 @@ export default function ContractForm() {
 				const contract = await res.json();
 				router.push(`/contracts/${contract.contract_id}`);
 			} else {
-				alert(
-					"Failed to create contract. Please check the data and try again."
-				);
+				alert(t('contracts.failedToCreateContract'));
 			}
 		} catch (error) {
 			console.error("Error creating contract:", error);
-			alert("Failed to create contract. Please try again.");
+			alert(t('contracts.failedToCreateContract'));
 		} finally {
 			setLoading(false);
 		}
@@ -58,7 +58,7 @@ export default function ContractForm() {
 		<Card>
 			<CardHeader>
 				<h2 className="text-xl font-semibold text-gray-900">
-					Contract Details
+					{t('contracts.contractDetails')}
 				</h2>
 			</CardHeader>
 			<CardContent>
@@ -67,73 +67,73 @@ export default function ContractForm() {
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Contract Number <span className="text-red-500">*</span>
+								{t('contracts.contractNumber')} <span className="text-red-500">*</span>
 							</label>
 							<Input
 								type="text"
 								name="contract_number"
 								value={form.contract_number || ""}
 								onChange={handleChange}
-								placeholder="Enter contract number"
+								placeholder={t('contracts.enterContractNumber')}
 								required
 							/>
 						</div>
 
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Contract Name
+								{t('contracts.contractName')}
 							</label>
 							<Input
 								type="text"
 								name="contract_name"
 								value={form.contract_name || ""}
 								onChange={handleChange}
-								placeholder="Enter contract name"
+								placeholder={t('contracts.enterContractName')}
 							/>
 						</div>
 
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Customer Contract Number
+								{t('contracts.customerContractNumber')}
 							</label>
 							<Input
 								type="text"
 								name="customer_contract_number"
 								value={form.customer_contract_number || ""}
 								onChange={handleChange}
-								placeholder="Enter customer contract number"
+								placeholder={t('contracts.enterCustomerContractNumber')}
 							/>
 						</div>
 
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Customer
+								{t('contracts.customer')}
 							</label>
 							<Input
 								type="text"
 								name="customer"
 								value={form.customer || ""}
 								onChange={handleChange}
-								placeholder="Enter customer name"
+								placeholder={t('contracts.enterCustomerName')}
 							/>
 						</div>
 
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Investor
+								{t('contracts.investor')}
 							</label>
 							<Input
 								type="text"
 								name="investor"
 								value={form.investor || ""}
 								onChange={handleChange}
-								placeholder="Enter investor name"
+								placeholder={t('contracts.enterInvestorName')}
 							/>
 						</div>
 
 						<div>
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Date Signed
+								{t('contracts.dateSigned')}
 							</label>{" "}
 							<Input
 								type="date"
@@ -145,7 +145,7 @@ export default function ContractForm() {
 
 						<div className="md:col-span-2">
 							<label className="block text-sm font-medium text-gray-700 mb-2">
-								Finish Date
+								{t('contracts.finishDate')}
 							</label>{" "}
 							<Input
 								type="date"
@@ -164,7 +164,7 @@ export default function ContractForm() {
 							onClick={() => router.back()}
 							disabled={loading}
 						>
-							Cancel
+							{t('common.cancel')}
 						</Button>
 						<Button type="submit" variant="primary" disabled={loading}>
 							{loading ? (
@@ -189,7 +189,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>
-									Creating...
+									{t('common.creating')}
 								</>
 							) : (
 								<>
@@ -206,7 +206,7 @@ export default function ContractForm() {
 											d="M12 4v16m8-8H4"
 										/>
 									</svg>
-									Create Contract
+									{t('contracts.createContract')}
 								</>
 							)}
 						</Button>