feat(AmharicDatePicker): implement Amharic date picker component with calendar type switching and time input

2026-08-26 19:12:50 +00:00 · 2026-08-05 10:14:03 +00:00
parent 5fb1926ac0
commit 7ba760d74b
11 changed files with 89 additions and 37 deletions
--- 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
--- 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
--- 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'))
--- 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: {
--- 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: {
--- 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'),
--- 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,
--- 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';

 // ---------------------------------------------------------------------------
--- 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";
--- a/apps/portal/src/app/components/AmharicDatePicker.css
+++ b/apps/portal/src/app/components/AmharicDatePicker.css
--- a/apps/portal/src/app/components/AmharicDatePicker.tsx
+++ b/apps/portal/src/app/components/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();
            }}
          >