From 7ba760d74b5047bd6b4dd075da3cfb40fcdf053e Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 5 Aug 2026 10:14:03 +0000
Subject: [PATCH] feat(AmharicDatePicker): implement Amharic date picker
 component with calendar type switching and time input

---
 .../src/app/features/exam/pages/ExamPage.tsx  | 10 +--
 .../license-review/pages/LicenseQueuePage.tsx | 14 ++--
 .../pages/LicenseReviewPage.tsx               | 10 +--
 apps/backoffice/src/app/i18n/locales/am.ts    |  2 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  2 +
 .../profile/components/ProfileFormContent.tsx |  2 +-
 .../seafarer/pages/SeafarerProfilePage.tsx    |  2 +-
 .../pages/SeafarerRegistrationPage.tsx        | 10 ++-
 libs/ui/src/index.ts                          |  1 +
 .../ui/src/lib/input}/AmharicDatePicker.css   |  0
 .../ui/src/lib/input}/AmharicDatePicker.tsx   | 73 +++++++++++++++----
 11 files changed, 89 insertions(+), 37 deletions(-)
 rename {apps/portal/src/app/components => libs/ui/src/lib/input}/AmharicDatePicker.css (100%)
 rename {apps/portal/src/app/components => libs/ui/src/lib/input}/AmharicDatePicker.tsx (75%)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
index f49686075..ed0a50c69 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
@@ -27,11 +27,10 @@ import {
   IconTrash,
   IconPlus,
   IconInfoCircle,
-  IconCalendar,
   IconClipboardList,
   IconDetails,
 } from "@tabler/icons-react";
-import { notify, useErrorHandler, AdvancedTable, useServerTable, ModalFooter, type AdvancedColumn } from "@ema-platform/ui";
+import { notify, useErrorHandler, AdvancedTable, useServerTable, ModalFooter, AmharicDatePicker, type AdvancedColumn } from "@ema-platform/ui";
 import { useGetCertificationsQuery } from "../../certification/api/certification-api";
 import {
   useGetExamsQuery,
@@ -194,13 +193,12 @@ function ExamForm({
                 autosize
                 minRows={2}
               />
-              <TextInput
+              <AmharicDatePicker
                 label={t("exam.form.examDate")}
-                type="date"
                 value={date}
-                onChange={(e) => setDate(e.currentTarget.value)}
+                onChange={setDate}
+                dateFormat="date"
                 size="sm"
-                leftSection={<IconCalendar size={14} />}
                 required
               />
               <TextInput
diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx
index 67aa7b200..c94ddca88 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx
@@ -47,7 +47,7 @@ import {
   type LicenseStatus,
   type QueueFilter,
 } from '@ema-platform/api';
-import { AdvancedTable, EmptyState, ErrorState, type AdvancedColumn } from '@ema-platform/ui';
+import { AdvancedTable, EmptyState, ErrorState, AmharicDatePicker, type AdvancedColumn } from '@ema-platform/ui';
 import { computeSla } from '../sla';
 import {
   DEFAULT_VIEW,
@@ -496,17 +496,17 @@ export function LicenseQueuePage() {
               w={220}
             />
           )}
-          <TextInput
-            type="date"
+          <AmharicDatePicker
             label={t('queue.submittedFrom', 'Submitted from')}
             value={urlFilter.submittedFrom ?? ''}
-            onChange={(e) => setFacet({ submittedFrom: e.currentTarget.value || undefined })}
+            onChange={(v) => setFacet({ submittedFrom: v || undefined })}
+            dateFormat="date"
           />
-          <TextInput
-            type="date"
+          <AmharicDatePicker
             label={t('queue.submittedTo', 'Submitted to')}
             value={urlFilter.submittedTo ?? ''}
-            onChange={(e) => setFacet({ submittedTo: e.currentTarget.value || undefined })}
+            onChange={(v) => setFacet({ submittedTo: v || undefined })}
+            dateFormat="date"
           />
           {hasFacets && (
             <Button
diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx
index 490e6a988..cf07040e1 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx
@@ -57,7 +57,7 @@ import {
   useScheduleInspectionMutation,
   type RemarkTargetType,
 } from '@ema-platform/api';
-import { ErrorState, ModalFooter } from '@ema-platform/ui';
+import { ErrorState, ModalFooter, AmharicDatePicker } from '@ema-platform/ui';
 import { usePermissions } from '@ema-platform/auth';
 import { useAppSelector } from '../../../store/hooks';
 import { DecisionBar } from '../components/DecisionBar';
@@ -888,11 +888,11 @@ export function LicenseReviewPage() {
         title={t('review.actions.scheduleInspection', 'Schedule inspection')}
       >
         <Stack>
-          <TextInput
-            type="datetime-local"
+          <AmharicDatePicker
             label={t('review.dateTime', 'Date and time')}
             value={inspectionDate}
-            onChange={(e) => setInspectionDate(e.currentTarget.value)}
+            onChange={setInspectionDate}
+            withTime
           />
           <ModalFooter>
             <Tooltip
@@ -916,7 +916,7 @@ export function LicenseReviewPage() {
                 run(async () => {
                   await scheduleInspection({
                     applicationId: id,
-                    scheduledDate: new Date(inspectionDate).toISOString(),
+                    scheduledDate: inspectionDate,
                   }).unwrap();
                   setInspectionOpen(false);
                 }, t('review.done.scheduled', 'Inspection scheduled'))
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 0eaa66502..409f6cdc6 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -102,6 +102,8 @@ export const am: Translations = {
     view: 'ይመልከቱ',
     toggleColumns: 'አምዶችን ቀያይር',
     noResult: 'ምንም አልተገኘም',
+    switchCalendar: 'የቀን መቁጠሪያ ዓይነት ቀይር',
+    time: 'ሰዓት',
   },
 
   breadcrumbs: {
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index d928b0e42..426827f66 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -100,6 +100,8 @@ export const en = {
     view: 'View',
     toggleColumns: 'Toggle columns',
     noResult: 'No results',
+    switchCalendar: 'Switch calendar type',
+    time: 'Time',
   },
 
   breadcrumbs: {
diff --git a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
index bf9b1aee1..41323e747 100644
--- a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
@@ -1,7 +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';
+import { AmharicDatePicker } from '@ema-platform/ui';
 
 export const profileSchema = z.object({
   professionId: z.string().min(1, 'Select your profession'),
diff --git a/apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx b/apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx
index d226e6ce0..7c831afa7 100644
--- a/apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { AmharicDatePicker } from '../../../components/AmharicDatePicker';
+import { AmharicDatePicker } from '@ema-platform/ui';
 import {
   ActionIcon,
   Alert,
diff --git a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
index e32e7678c..db4705874 100644
--- a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
@@ -33,9 +33,15 @@ import {
   IconUser,
 } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
-import { notify, BilingualInput, useErrorHandler } from '@ema-platform/ui';
+import {
+  notify,
+  BilingualInput,
+  useErrorHandler,
+  AmharicDatePicker,
+  toEthiopicDateLabel,
+  toGregorianDateLabel,
+} from '@ema-platform/ui';
 import type { BilingualValue } from '@ema-platform/ui';
-import { AmharicDatePicker, toEthiopicDateLabel, toGregorianDateLabel } from '../../../components/AmharicDatePicker';
 import { LocationPicker } from '../../location/components/LocationPicker';
 
 // ---------------------------------------------------------------------------
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 73614e114..17a8d057b 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./lib/input/BilingualInput";
+export * from "./lib/input/AmharicDatePicker";
 export * from "./lib/feedback/ConfirmModal";
 export * from "./lib/feedback/ModalFooter";
 export * from "./lib/feedback/ApiErrorAlert";
diff --git a/apps/portal/src/app/components/AmharicDatePicker.css b/libs/ui/src/lib/input/AmharicDatePicker.css
similarity index 100%
rename from apps/portal/src/app/components/AmharicDatePicker.css
rename to libs/ui/src/lib/input/AmharicDatePicker.css
diff --git a/apps/portal/src/app/components/AmharicDatePicker.tsx b/libs/ui/src/lib/input/AmharicDatePicker.tsx
similarity index 75%
rename from apps/portal/src/app/components/AmharicDatePicker.tsx
rename to libs/ui/src/lib/input/AmharicDatePicker.tsx
index b8151533f..43fe79579 100644
--- a/apps/portal/src/app/components/AmharicDatePicker.tsx
+++ b/libs/ui/src/lib/input/AmharicDatePicker.tsx
@@ -60,14 +60,39 @@ const ETH_FORMATTERS = {
   formatMonthDropdown: (month: Date) => ethMonthName(month),
 };
 
-// Wire format is a full ISO-8601 instant string (e.g.
-// "2026-07-31T00:00:00.000Z"), what the backend expects for date fields.
-// The picker only selects a calendar day, so the time is pinned to UTC
-// midnight — reading back with getUTC*() (not local get*()) keeps the
-// calendar day stable regardless of the runtime's timezone, avoiding the
-// same off-by-one class of bug the UTC-noon workaround above exists for.
-function parseISO(value?: string | null, withTime = false): Date | null {
+type DateWireFormat = 'iso' | 'date';
+
+// yyyy-MM-dd, parsed/formatted as a LOCAL calendar date — no Date-object/UTC
+// round-trip at all, so it can't suffer the timezone off-by-one class of bug
+// the ISO path below works around. This is the shape filter query params and
+// plain `date: string` DTO fields expect.
+function parsePlainDate(value: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!m) return null;
+  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+}
+
+function formatPlainDate(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+// ISO wire format is a full ISO-8601 instant string (e.g.
+// "2026-07-31T00:00:00.000Z"), what most backend date fields expect. When
+// `withTime` is off, the picker only selects a calendar day, so the time is
+// pinned to UTC midnight — reading back with getUTC*() (not local get*())
+// keeps the calendar day stable regardless of the runtime's timezone,
+// avoiding the same off-by-one class of bug the UTC-noon workaround above
+// exists for.
+function parseWireValue(
+  value: string | null | undefined,
+  format: DateWireFormat,
+  withTime: boolean,
+): Date | null {
   if (!value) return null;
+  if (format === 'date') return parsePlainDate(value);
   const d = new Date(value);
   if (isNaN(d.getTime())) return null;
   return withTime
@@ -75,7 +100,12 @@ function parseISO(value?: string | null, withTime = false): Date | null {
     : new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
 }
 
-function formatISO(date: Date, withTime = false): string {
+function formatWireValue(
+  date: Date,
+  format: DateWireFormat,
+  withTime: boolean,
+): string {
+  if (format === 'date') return formatPlainDate(date);
   return withTime
     ? date.toISOString()
     : new Date(
@@ -100,8 +130,15 @@ function mergeDateTime(
   return result;
 }
 
+// Accepts either wire shape for display-only formatting — tries the plain
+// yyyy-MM-dd shape first, falls back to ISO — so these keep working
+// regardless of which `dateFormat` produced the stored string.
+function parseAnyDateString(value: string): Date | null {
+  return parsePlainDate(value) ?? parseWireValue(value, 'iso', false);
+}
+
 export function toEthiopicDateLabel(date: Date | string): string {
-  const d = typeof date === 'string' ? parseISO(date) : date;
+  const d = typeof date === 'string' ? parseAnyDateString(date) : date;
   if (!d) return '';
   try {
     const eth = toEthDateTime(d);
@@ -112,7 +149,7 @@ export function toEthiopicDateLabel(date: Date | string): string {
 }
 
 export function toGregorianDateLabel(date: Date | string): string {
-  const d = typeof date === 'string' ? parseISO(date) : date;
+  const d = typeof date === 'string' ? parseAnyDateString(date) : date;
   if (!d) return '';
   return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
 }
@@ -133,6 +170,11 @@ export interface AmharicDatePickerProps {
   /** Show a time-of-day field alongside the calendar. Off by default —
    * most callers only need a calendar day. */
   withTime?: boolean;
+  /** Wire format for `value`/`onChange`: a full ISO-8601 instant (default,
+   * what most backend date fields expect) or a bare `yyyy-mm-dd` calendar
+   * date (what filter query params and plain `date: string` DTO fields
+   * expect). */
+  dateFormat?: DateWireFormat;
 }
 
 export function AmharicDatePicker({
@@ -147,6 +189,7 @@ export function AmharicDatePicker({
   name,
   onBlur,
   withTime = false,
+  dateFormat = 'iso',
 }: AmharicDatePickerProps) {
   const { t, i18n } = useTranslation();
   const [calendarType, setCalendarType] = useState<'EN' | 'AMH'>(() =>
@@ -154,7 +197,7 @@ export function AmharicDatePicker({
   );
   const [opened, { close, toggle }] = useDisclosure(false);
 
-  const selected = parseISO(value, withTime);
+  const selected = parseWireValue(value, dateFormat, withTime);
 
   const dateLabel = selected
     ? calendarType === 'EN'
@@ -230,7 +273,7 @@ export function AmharicDatePicker({
             captionLayout="dropdown"
             formatters={ETH_FORMATTERS}
             onSelect={(date: Date | undefined) => {
-              onChange?.(date ? formatISO(mergeDateTime(selected, date), withTime) : '');
+              onChange?.(date ? formatWireValue(mergeDateTime(selected, date), dateFormat, withTime) : '');
               close();
             }}
           />
@@ -243,7 +286,7 @@ export function AmharicDatePicker({
             endMonth={YEAR_DROPDOWN_END}
             captionLayout="dropdown"
             onSelect={(date: Date | undefined) => {
-              onChange?.(date ? formatISO(mergeDateTime(selected, date), withTime) : '');
+              onChange?.(date ? formatWireValue(mergeDateTime(selected, date), dateFormat, withTime) : '');
               close();
             }}
           />
@@ -263,7 +306,7 @@ export function AmharicDatePicker({
               const [h, m] = e.currentTarget.value.split(':').map(Number);
               if (Number.isNaN(h) || Number.isNaN(m)) return;
               onChange?.(
-                formatISO(mergeDateTime(selected, undefined, { hours: h, minutes: m }), true),
+                formatWireValue(mergeDateTime(selected, undefined, { hours: h, minutes: m }), dateFormat, true),
               );
             }}
           />
@@ -284,7 +327,7 @@ export function AmharicDatePicker({
             variant="light"
             size="xs"
             onClick={() => {
-              onChange?.(formatISO(new Date(), withTime));
+              onChange?.(formatWireValue(new Date(), dateFormat, withTime));
               close();
             }}
           >