feat: integrate AmharicDatePicker component across multiple pages and update translations

apps/portal/src/app/features/basic-safety-training/pages/BasicSafetyTrainingPage.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -202,9 +203,9 @@ function UploadModal({
           <TextInput label="Issuing Institution" placeholder="e.g. Bahirdar Maritime School" required value={issuer} onChange={(e) => setIssuer(e.currentTarget.value)} size="sm" />
           <TextInput label="Certificate Number" placeholder="e.g. PST-2024-001" required value={certNumber} onChange={(e) => setCertNumber(e.currentTarget.value)} size="sm" />
           <SimpleGrid cols={2} spacing="sm">
-            <TextInput label="Issue Date" type="date" required value={issueDate} onChange={(e) => setIssueDate(e.currentTarget.value)} size="sm" />
+            <AmharicDatePicker label="Issue Date" required value={issueDate} onChange={setIssueDate} size="sm" />
             {item.refreshYears > 0 && (
-              <TextInput label={`Expiry Date (${item.refreshYears}-yr refresh)`} type="date" value={expiryDate} onChange={(e) => setExpiryDate(e.currentTarget.value)} size="sm" />
+              <AmharicDatePicker label={`Expiry Date (${item.refreshYears}-yr refresh)`} value={expiryDate} onChange={setExpiryDate} size="sm" />
             )}
           </SimpleGrid>
           <div>

apps/portal/src/app/features/certificates/pages/CoCApplicationPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -999,11 +1000,10 @@ export function CoCApplicationPage() {
                     size="sm"
                     required
                   />
-                  <TextInput
+                  <AmharicDatePicker
                     label="Payment Date"
-                    type="date"
                     value={paymentDate}
-                    onChange={(e) => setPaymentDate(e.currentTarget.value)}
+                    onChange={setPaymentDate}
                     size="sm"
                     required
                   />

apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CountrySelect, getCountryName } from '@ema-platform/ui';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -133,8 +134,8 @@ function ApplicationWizard({ onDone }: { onDone: () => void }) {
             <CountrySelect label="Issuing Country" value={country} onChange={setCountry} required />
             <TextInput label="Issuing Authority / Administration" placeholder="e.g. Maritime Industry Authority (MARINA)" value={issuer} onChange={(e) => setIssuer(e.currentTarget.value)} required />
             <TextInput label="Certificate Type" placeholder="e.g. Officer in Charge of a Navigational Watch" value={cocType} onChange={(e) => setCocType(e.currentTarget.value)} required />
-            <TextInput label="Issue Date" type="date" value={issueDate} onChange={(e) => setIssueDate(e.currentTarget.value)} required />
-            <TextInput label="Expiry Date" type="date" value={expiryDate} onChange={(e) => setExpiryDate(e.currentTarget.value)} required />
+            <AmharicDatePicker label="Issue Date" value={issueDate} onChange={setIssueDate} required />
+            <AmharicDatePicker label="Expiry Date" value={expiryDate} onChange={setExpiryDate} required />
           </SimpleGrid>
         </Paper>
       )}

apps/portal/src/app/features/joint-investment-license/pages/JointInvestmentLicenseApplicationPage.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useApiMutation } from '@ema-platform/api';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -447,7 +448,7 @@ export function JointInvestmentLicenseApplicationPage() {
             <SectionHead title="Business License and Registration Information" />
             <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
               <TextInput label="Budget Year" required value={budgetYear} onChange={(e) => setBudgetYear(e.currentTarget.value)} />
-              <TextInput label="License Validity Date" required placeholder="YYYY-MM-DD" value={licenseValidityDate} onChange={(e) => setLicenseValidityDate(e.currentTarget.value)} />
+              <AmharicDatePicker label="License Validity Date" required value={licenseValidityDate} onChange={setLicenseValidityDate} />
             </SimpleGrid>
           </Stack>
         )}

apps/portal/src/app/features/medical/pages/MedicalCertificatePage.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -224,18 +225,16 @@ export function MedicalCertificatePage() {
               size="sm"
             />
             <SimpleGrid cols={2} spacing="sm">
-              <TextInput
+              <AmharicDatePicker
                 label="Issue Date"
-                type="date"
                 value={issuedDate}
-                onChange={(e) => setIssuedDate(e.currentTarget.value)}
+                onChange={setIssuedDate}
                 size="sm"
               />
-              <TextInput
+              <AmharicDatePicker
                 label="Expiry Date"
-                type="date"
                 value={expiryDate}
-                onChange={(e) => setExpiryDate(e.currentTarget.value)}
+                onChange={setExpiryDate}
                 size="sm"
               />
             </SimpleGrid>

apps/portal/src/app/features/mto-license/pages/MtoLicenseApplicationPage.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useApiMutation } from '@ema-platform/api';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -572,8 +573,8 @@ export function MtoLicenseApplicationPage() {
               <DocCard slot={{ key: 'customsBondDoc', label: 'Customs Bond Document', description: 'Customs bond documentation', required: true, icon: IconShieldCheck }} file={customsBondDoc} onFile={setCustomsBondDoc} />
             </SimpleGrid>
             <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="xs">
-              <TextInput label="Insurance Validity Date" required placeholder="YYYY-MM-DD" value={insuranceValidityDate} onChange={(e) => setInsuranceValidityDate(e.currentTarget.value)} />
-              <TextInput label="Bond Validity Date" required placeholder="YYYY-MM-DD" value={bondValidityDate} onChange={(e) => setBondValidityDate(e.currentTarget.value)} />
+              <AmharicDatePicker label="Insurance Validity Date" required value={insuranceValidityDate} onChange={setInsuranceValidityDate} />
+              <AmharicDatePicker label="Bond Validity Date" required value={bondValidityDate} onChange={setBondValidityDate} />
             </SimpleGrid>
           </Stack>
         )}

apps/portal/src/app/features/profile/components/ProfileFormContent.tsx

@@ -1,6 +1,7 @@
 import { Loader, Select, SimpleGrid, TextInput } from '@mantine/core';
 import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
 import { z } from 'zod';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 
 export const profileSchema = z.object({
   professionId: z.string().min(1, 'Select your profession'),
@@ -86,11 +87,13 @@ export function ProfileFormContent({
         onBlur={() => trigger('gender')}
         name="gender"
       />
-      <TextInput
+      <AmharicDatePicker
         label="Date of Birth"
-        type="date"
         required
-        {...register('dob')}
+        value={watch('dob')}
+        onChange={(val) => setValue('dob', val, { shouldValidate: true })}
+        onBlur={() => trigger('dob')}
+        name="dob"
         error={errors.dob?.message}
       />
       <TextInput

apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   ActionIcon,
   Alert,
@@ -462,6 +463,9 @@ function HistoryTab({ entries }: { entries: HistoryEntry[] }) {
 // Add Record Modal (generic)
 // ---------------------------------------------------------------------------
 function AddTrainingModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
+  const [issueDate, setIssueDate] = useState('');
+  const [expiryDate, setExpiryDate] = useState('');
+
   return (
     <Modal opened={opened} onClose={onClose} title="Add Training Record" size="lg">
       <Stack gap="sm">
@@ -471,8 +475,8 @@ function AddTrainingModal({ opened, onClose }: { opened: boolean; onClose: () =>
           <TextInput label="Certificate No." placeholder="CERT-0000" />
         </SimpleGrid>
         <SimpleGrid cols={2} spacing="sm">
-          <TextInput label="Issue Date" type="date" />
-          <TextInput label="Expiry Date" type="date" />
+          <AmharicDatePicker label="Issue Date" value={issueDate} onChange={setIssueDate} />
+          <AmharicDatePicker label="Expiry Date" value={expiryDate} onChange={setExpiryDate} />
         </SimpleGrid>
         <Select label="Status" data={['Approved', 'Pending', 'Expired']} defaultValue="Pending" />
         <Group justify="flex-end" mt="sm">
@@ -485,14 +489,17 @@ function AddTrainingModal({ opened, onClose }: { opened: boolean; onClose: () =>
 }
 
 function AddMedicalModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
+  const [issueDate, setIssueDate] = useState('');
+  const [expiryDate, setExpiryDate] = useState('');
+
   return (
     <Modal opened={opened} onClose={onClose} title="Add Medical Record" size="lg">
       <Stack gap="sm">
         <TextInput label="Exam Type" placeholder="e.g. STCW Medical Certificate" required />
         <TextInput label="Issued By" placeholder="Issuing authority" />
         <SimpleGrid cols={2} spacing="sm">
-          <TextInput label="Issue Date" type="date" />
-          <TextInput label="Expiry Date" type="date" />
+          <AmharicDatePicker label="Issue Date" value={issueDate} onChange={setIssueDate} />
+          <AmharicDatePicker label="Expiry Date" value={expiryDate} onChange={setExpiryDate} />
         </SimpleGrid>
         <Select label="Result" data={['Fit', 'Unfit', 'Conditional']} defaultValue="Fit" />
         <Textarea label="Remarks" placeholder="Any notes" autosize minRows={2} />
@@ -507,6 +514,8 @@ function AddMedicalModal({ opened, onClose }: { opened: boolean; onClose: () =>
 
 function AddSeaServiceModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
   const [flag, setFlag] = useState<string | null>(null);
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
 
   return (
     <Modal opened={opened} onClose={onClose} title="Add Sea Service Record" size="lg">
@@ -520,8 +529,8 @@ function AddSeaServiceModal({ opened, onClose }: { opened: boolean; onClose: ()
           <CountrySelect label="Flag" value={flag} onChange={setFlag} />
         </SimpleGrid>
         <SimpleGrid cols={2} spacing="sm">
-          <TextInput label="From" type="date" />
-          <TextInput label="To" type="date" />
+          <AmharicDatePicker label="From" value={fromDate} onChange={setFromDate} />
+          <AmharicDatePicker label="To" value={toDate} onChange={setToDate} />
         </SimpleGrid>
         <TextInput label="Engagement Port" placeholder="Port name" />
         <Group justify="flex-end" mt="sm">
@@ -534,6 +543,9 @@ function AddSeaServiceModal({ opened, onClose }: { opened: boolean; onClose: ()
 }
 
 function AddCertModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
+  const [issueDate, setIssueDate] = useState('');
+  const [expiryDate, setExpiryDate] = useState('');
+
   return (
     <Modal opened={opened} onClose={onClose} title="Add Certification" size="lg">
       <Stack gap="sm">
@@ -544,8 +556,8 @@ function AddCertModal({ opened, onClose }: { opened: boolean; onClose: () => voi
         </SimpleGrid>
         <TextInput label="Issued By" placeholder="Issuing authority" />
         <SimpleGrid cols={2} spacing="sm">
-          <TextInput label="Issue Date" type="date" />
-          <TextInput label="Expiry Date" type="date" />
+          <AmharicDatePicker label="Issue Date" value={issueDate} onChange={setIssueDate} />
+          <AmharicDatePicker label="Expiry Date" value={expiryDate} onChange={setExpiryDate} />
         </SimpleGrid>
         <Select label="Status" data={['Valid', 'Expired', 'Pending']} defaultValue="Valid" />
         <Group justify="flex-end" mt="sm">

apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx

@@ -264,7 +264,7 @@ export function SeafarerRegistrationPage() {
   const [middleName, setMiddleName] = useState<BilingualValue>({ en: '', am: '' });
   const [lastName, setLastName] = useState<BilingualValue>({ en: '', am: '' });
   const [gender, setGender] = useState<string | null>(null);
-  const [dob, setDob] = useState<Date | null>(null);
+  const [dob, setDob] = useState('');
   const [placeOfBirth, setPlaceOfBirth] = useState('');
   const [nationality, setNationality] = useState<string | null>('Ethiopian');
   const [maritalStatus, setMaritalStatus] = useState<string | null>(null);
@@ -307,7 +307,7 @@ export function SeafarerRegistrationPage() {
     setSubmitting(true);
     try {
       const result = await submitSeafarerRegistration({
-        personalInfo: { firstName, middleName, lastName, gender, dob: dob?.toISOString().split('T')[0] ?? '', placeOfBirth, nationality, maritalStatus, nationalIdNumber, passportNumber, passportExpiry },
+        personalInfo: { firstName, middleName, lastName, gender, dob, placeOfBirth, nationality, maritalStatus, nationalIdNumber, passportNumber, passportExpiry },
         contactDetails: { mobile, email, locationId, permanentAddress, currentAddress, emergency: { name: emergencyName, relationship: emergencyRel, phone: emergencyPhone } },
         documents: Object.fromEntries(Object.entries(files).map(([k, v]) => [k, v?.name ?? null])),
       });
@@ -365,7 +365,7 @@ export function SeafarerRegistrationPage() {
               <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
                 <TextInput label="National ID Number" placeholder="ET-000000" required value={nationalIdNumber} onChange={(e) => setNationalIdNumber(e.currentTarget.value)} />
                 <TextInput label="Passport Number" placeholder="EP000000" value={passportNumber} onChange={(e) => setPassportNumber(e.currentTarget.value)} />
-                <TextInput label="Passport Expiry Date" type="date" value={passportExpiry} onChange={(e) => setPassportExpiry(e.currentTarget.value)} />
+                <AmharicDatePicker label="Passport Expiry Date" value={passportExpiry} onChange={setPassportExpiry} />
               </SimpleGrid>
 
               <Alert variant="light" color="blue" icon={<IconInfoCircle size={17} />}>
@@ -458,7 +458,7 @@ export function SeafarerRegistrationPage() {
                   <ReviewRow label="Middle Name" value={`${middleName.en}${middleName.am ? ` / ${middleName.am}` : ''}`} />
                   <ReviewRow label="Last Name" value={`${lastName.en}${lastName.am ? ` / ${lastName.am}` : ''}`} />
                   <ReviewRow label="Gender" value={gender ?? ''} />
-                  <ReviewRow label="Date of Birth" value={`${dob?.toLocaleDateString('en-US') ?? ''}${dob ? ` (${toEthiopicDateLabel(dob)})` : ''}`} />
+                  <ReviewRow label="Date of Birth" value={`${dob}${dob ? ` (${toEthiopicDateLabel(dob)})` : ''}`} />
                   <ReviewRow label="Place of Birth" value={placeOfBirth} />
                   <ReviewRow label="Nationality" value={nationality ?? ''} />
                   <ReviewRow label="Marital Status" value={maritalStatus ?? ''} />

apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { AmharicDatePicker } from "../../../components/AmharicDatePicker";
 import {
   Alert,
   Badge,
@@ -315,20 +316,18 @@ function BSTCard({
           onChange={(e) => onIssuer(e.currentTarget.value)}
         />
         <SimpleGrid cols={slot.refreshYears > 0 ? 2 : 1} spacing="xs">
-          <TextInput
+          <AmharicDatePicker
             label="Issue Date"
-            type="date"
             size="xs"
             value={issueDate}
-            onChange={(e) => onIssueDate(e.currentTarget.value)}
+            onChange={onIssueDate}
           />
           {slot.refreshYears > 0 && (
-            <TextInput
+            <AmharicDatePicker
               label={`Expiry (${slot.refreshYears}yr)`}
-              type="date"
               size="xs"
               value={expiryDate}
-              onChange={(e) => onExpiryDate(e.currentTarget.value)}
+              onChange={onExpiryDate}
             />
           )}
         </SimpleGrid>
@@ -665,19 +664,17 @@ export function SeamanBookApplicationPage() {
               />
             </SimpleGrid>
             <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-              <TextInput
+              <AmharicDatePicker
                 label="Issue Date"
-                type="date"
                 required
                 value={medIssueDate}
-                onChange={(e) => setMedIssueDate(e.currentTarget.value)}
+                onChange={setMedIssueDate}
               />
-              <TextInput
+              <AmharicDatePicker
                 label="Expiry Date"
-                type="date"
                 required
                 value={medExpiryDate}
-                onChange={(e) => setMedExpiryDate(e.currentTarget.value)}
+                onChange={setMedExpiryDate}
               />
             </SimpleGrid>
             <SectionHead title="Upload Certificate" />
@@ -1006,12 +1003,11 @@ export function SeamanBookApplicationPage() {
                     value={paymentRef}
                     onChange={(e) => setPaymentRef(e.currentTarget.value)}
                   />
-                  <TextInput
+                  <AmharicDatePicker
                     label="Payment Date"
-                    type="date"
                     required
                     value={paymentDate}
-                    onChange={(e) => setPaymentDate(e.currentTarget.value)}
+                    onChange={setPaymentDate}
                   />
                 </SimpleGrid>
               </>

apps/portal/src/app/features/shipping-agent-license/pages/ShippingAgentLicenseApplicationPage.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useApiMutation } from '@ema-platform/api';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -324,8 +325,8 @@ export function ShippingAgentLicenseApplicationPage() {
             <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
               <TextInput label="Shipping Company Name" required value={shippingCompanyName} onChange={(e) => setShippingCompanyName(e.currentTarget.value)} />
               <TextInput label="Agreement Reference Number" required value={agreementRefNumber} onChange={(e) => setAgreementRefNumber(e.currentTarget.value)} />
-              <TextInput label="Agreement Start Date" type="date" required value={agreementStartDate} onChange={(e) => setAgreementStartDate(e.currentTarget.value)} />
-              <TextInput label="Agreement End Date" type="date" required value={agreementEndDate} onChange={(e) => setAgreementEndDate(e.currentTarget.value)} />
+              <AmharicDatePicker label="Agreement Start Date" required value={agreementStartDate} onChange={setAgreementStartDate} />
+              <AmharicDatePicker label="Agreement End Date" required value={agreementEndDate} onChange={setAgreementEndDate} />
             </SimpleGrid>
           </Stack>
         )}

apps/portal/src/app/features/waiver/pages/WaiverApplicationPage.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useApiMutation } from '@ema-platform/api';
+import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
 import {
   Alert,
   Badge,
@@ -372,7 +373,7 @@ export function WaiverApplicationPage() {
             <SectionHead title="Invoice Information" />
             <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
               <TextInput label="Invoice Number" required value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.currentTarget.value)} />
-              <TextInput type="date" label="Invoice Date" required value={invoiceDate} onChange={(e) => setInvoiceDate(e.currentTarget.value)} />
+              <AmharicDatePicker label="Invoice Date" required value={invoiceDate} onChange={setInvoiceDate} />
               <NumberInput label="Invoice Amount" required min={0} value={invoiceAmount} onChange={setInvoiceAmount} />
             </SimpleGrid>
           </Stack>
@@ -393,10 +394,10 @@ export function WaiverApplicationPage() {
               <TextInput label="Shipping Line / Carrier Name" required value={carrierName} onChange={(e) => setCarrierName(e.currentTarget.value)} />
               <TextInput label="Bill of Lading Number" value={billOfLadingNumber} onChange={(e) => setBillOfLadingNumber(e.currentTarget.value)} />
               {isPreWaiver && (
-                <TextInput type="date" label="Estimated Arrival Date" required value={estimatedArrivalDate} onChange={(e) => setEstimatedArrivalDate(e.currentTarget.value)} />
+                <AmharicDatePicker label="Estimated Arrival Date" required value={estimatedArrivalDate} onChange={setEstimatedArrivalDate} />
               )}
               {isPostWaiver && (
-                <TextInput type="date" label="Actual Arrival Date" required value={actualArrivalDate} onChange={(e) => setActualArrivalDate(e.currentTarget.value)} />
+                <AmharicDatePicker label="Actual Arrival Date" required value={actualArrivalDate} onChange={setActualArrivalDate} />
               )}
             </SimpleGrid>
           </Stack>