feat: implement date display utility across various pages

- Added `useDateDisplayer` hook and `dateDisplayer` function to format dates consistently based on the user's language. - Updated multiple components and pages in both backoffice and portal applications to utilize the new date display functionality, ensuring proper formatting for dates in lists, tables, and detail views. - Introduced Ethiopian date formatting for Amharic language support. - Refactored date handling in components such as ExamAppealsPage, ResultPage, SeafarerRegistryPage, and others to improve localization and user experience.
2026-08-30 08:48:12 +00:00 · 2026-08-12 10:22:39 +00:00
parent 33935419fb
commit 9897a9bf78
30 changed files with 286 additions and 168 deletions
--- a/apps/backoffice/src/app/features/exam/components/ExamIncidentsPanel.tsx
+++ b/apps/backoffice/src/app/features/exam/components/ExamIncidentsPanel.tsx
@@ -16,6 +16,7 @@ import {
 } from '@mantine/core';
 import { IconAlertTriangle, IconInfoCircle, IconPlus } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import { extractErrorMessage } from '@ema-platform/api';
 import {
  useGetExamIncidentsQuery,
@@ -51,6 +52,7 @@ const STATUS_COLOR: Record<ExamIncidentStatus, string> = {
 */
 export function ExamIncidentsPanel({ examId }: { examId: string }) {
  const { t } = useTranslation();
+  const showDate = useDateDisplayer();
  const { data: incidents, isError } = useGetExamIncidentsQuery(examId);
  const { data: registrations } = useGetExamRegistrationsQuery(examId);
  const [recordIncident, { isLoading: isFiling }] = useRecordIncidentMutation();
@@ -175,7 +177,7 @@ export function ExamIncidentsPanel({ examId }: { examId: string }) {
                  )}
                </Table.Td>
                <Table.Td>
-                  <Text fz="xs">{incident.occurredAt?.slice(0, 10)}</Text>
+                  <Text fz="xs">{showDate(incident.occurredAt)}</Text>
                </Table.Td>
                <Table.Td>
                  <Badge
--- a/apps/backoffice/src/app/features/item/components/ItemTable.tsx
+++ b/apps/backoffice/src/app/features/item/components/ItemTable.tsx
@@ -2,6 +2,7 @@ import { Table, Badge, ActionIcon, Text } from '@mantine/core';
 import { IconTrash } from '@tabler/icons-react';
 import { useGetItemsQuery, useDeleteItemMutation, type Item } from '../api/item-api';
 import { notify, useErrorHandler } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 const STATUS_COLORS: Record<Item['status'], string> = {
  DRAFT: 'gray',
@@ -13,6 +14,7 @@ export function ItemTable() {
  const { data, isLoading } = useGetItemsQuery({});
  const [deleteItem] = useDeleteItemMutation();
  const { handleError } = useErrorHandler();
+  const showDate = useDateDisplayer();

  const handleDelete = async (id: string) => {
    try {
@@ -43,7 +45,7 @@ export function ItemTable() {
            <Table.Td>
              <Badge color={STATUS_COLORS[item.status]}>{item.status}</Badge>
            </Table.Td>
-            <Table.Td>{new Date(item.createdAt).toLocaleDateString()}</Table.Td>
+            <Table.Td>{showDate(item.createdAt)}</Table.Td>
            <Table.Td>
              <ActionIcon
                color="red"
--- a/apps/backoffice/src/app/features/license-register/pages/LicenseRegisterPage.tsx
+++ b/apps/backoffice/src/app/features/license-register/pages/LicenseRegisterPage.tsx
@@ -19,6 +19,7 @@ import {
 } from '@mantine/core';
 import { IconSearch, IconShieldCog } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  extractErrorMessage,
  localized,
@@ -166,6 +167,7 @@ export function LicenseRegisterPage() {
  const [target, setTarget] = useState<IssuedLicense | null>(null);

  const items = data?.items ?? [];
+  const showDate = useDateDisplayer();

  return (
    <Container size="xl" py="md">
@@ -227,12 +229,12 @@ export function LicenseRegisterPage() {
                  </Table.Td>
                  <Table.Td>
                    <Text size="sm" c="dimmed">
-                      {license.issueDate?.slice(0, 10)}
+                      {showDate(license.issueDate)}
                    </Text>
                  </Table.Td>
                  <Table.Td>
                    <Text size="sm" c="dimmed">
-                      {license.expiryDate?.slice(0, 10)}
+                      {showDate(license.expiryDate)}
                    </Text>
                  </Table.Td>
                  <Table.Td>
--- a/apps/backoffice/src/app/features/license-review/components/ActivityRail.tsx
+++ b/apps/backoffice/src/app/features/license-review/components/ActivityRail.tsx
@@ -20,6 +20,7 @@ import {
  STATUS_LABELS,
  type ApplicationDetail,
 } from '@ema-platform/api';
+import { useDateDisplayer } from '@ema-platform/shared';

 type EntryKind = 'status' | 'remark' | 'upload' | 'assignment';

@@ -50,7 +51,8 @@ const ICONS: Record<EntryKind, typeof IconArrowRight> = {
 * notifications sent to the applicant are not among them.
 */
 export function ActivityRail({ detail }: { detail: ApplicationDetail }) {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
+  const showDate = useDateDisplayer();

  const entries = useMemo<ActivityEntry[]>(() => {
    const merged: ActivityEntry[] = [];
@@ -159,12 +161,9 @@ export function ActivityRail({ detail }: { detail: ApplicationDetail }) {
                  <Text size="xs" c="dimmed">
                    ·
                  </Text>
-                  <Tooltip
-                    label={new Date(entry.at).toLocaleString(i18n.language)}
-                    withArrow
-                  >
+                  <Tooltip label={showDate(entry.at)} withArrow>
                    <Text size="xs" c="dimmed">
-                      {new Date(entry.at).toLocaleDateString(i18n.language)}
+                      {showDate(entry.at.slice(0, 10))}
                    </Text>
                  </Tooltip>
                </Group>
--- a/apps/backoffice/src/app/features/license-review/export.ts
+++ b/apps/backoffice/src/app/features/license-review/export.ts
@@ -1,4 +1,5 @@
 import { STATUS_LABELS, type LicenseApplication } from '@ema-platform/api';
+import { dateDisplayer } from '@ema-platform/shared';
 import { computeSla } from './sla';

 /**
@@ -27,15 +28,13 @@ const COLUMNS: Array<{
  { header: 'Assigned officer', value: (a) => a.assignedOfficerId },
  {
    header: 'Submitted',
-    value: (a, locale) =>
-      a.submittedAt ? new Date(a.submittedAt).toLocaleString(locale) : '',
+    value: (a, locale) => (a.submittedAt ? dateDisplayer(a.submittedAt, locale) : ''),
  },
  {
    header: 'Decided',
-    value: (a, locale) =>
-      a.decidedAt ? new Date(a.decidedAt).toLocaleString(locale) : '',
+    value: (a, locale) => (a.decidedAt ? dateDisplayer(a.decidedAt, locale) : ''),
  },
-  { header: 'SLA', value: (a) => computeSla(a).label },
+  { header: 'SLA', value: (a, locale) => computeSla(a, undefined, locale).label },
  { header: 'Adjustment rounds', value: (a) => a.adjustmentRound },
  { header: 'Declared capital', value: (a) => a.capitalAmountDeclared },
  { header: 'Verified capital', value: (a) => a.capitalAmountVerified },
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx
@@ -56,6 +56,7 @@ import {
  AmharicDatePicker,
  type AdvancedColumn,
 } from "@ema-platform/ui";
+import { dateDisplayer } from "@ema-platform/shared";
 import { computeSla } from "../sla";
 import {
  DEFAULT_VIEW,
@@ -428,18 +429,14 @@ export function LicenseQueuePage() {
        label: t("queue.submitted", "Submitted"),
        cell: ({ row }) => (
          <Text size="sm" c="dimmed">
-            {row.original.submittedAt
-              ? new Date(row.original.submittedAt).toLocaleDateString(
-                  i18n.language,
-                )
-              : "—"}
+            {dateDisplayer(row.original.submittedAt, i18n.language)}
          </Text>
        ),
      },
      {
        header: t("queue.sla", "Age / SLA"),
        cell: ({ row }) => {
-          const sla = computeSla(row.original);
+          const sla = computeSla(row.original, undefined, i18n.language);
          return (
            // Colour is never the only signal — the label says the same thing.
            <Tooltip label={sla.tooltip} withArrow>
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage.tsx
@@ -59,6 +59,7 @@ import {
  type RemarkTargetType,
 } from '@ema-platform/api';
 import { ErrorState, ModalFooter, AmharicDatePicker } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import { usePermissions } from '@ema-platform/auth';
 import { useAppSelector } from '../../../store/hooks';
 import { DecisionBar } from '../components/DecisionBar';
@@ -109,6 +110,7 @@ function buildChecklist(
 */
 export function LicenseReviewPage() {
  const { t, i18n } = useTranslation();
+  const showDate = useDateDisplayer();
  const { id = '' } = useParams();
  const { can } = usePermissions();
  const currentUserId = useAppSelector((state) => state.auth.user?.id) ?? '';
@@ -268,7 +270,7 @@ export function LicenseReviewPage() {
  const app = data.application;
  const status = app.status;
  const presentation = presentationFor(app.licenseType?.key);
-  const sla = computeSla(app);
+  const sla = computeSla(app, undefined, i18n.language);
  const eligibility = evaluateEligibility(app, app.licenseType, i18n.language);

  const rawThreshold = app.licenseType?.capitalThreshold;
@@ -536,11 +538,7 @@ export function LicenseReviewPage() {
                <SummaryRow label={t('review.kind', 'Kind')} value={app.kind} />
                <SummaryRow
                  label={t('review.submitted', 'Submitted')}
-                  value={
-                    app.submittedAt
-                      ? new Date(app.submittedAt).toLocaleDateString(i18n.language)
-                      : undefined
-                  }
+                  value={showDate(app.submittedAt)}
                />
                <SummaryRow label={t('review.slaLabel', 'SLA')} value={sla.label} />
              </Stack>
@@ -604,7 +602,7 @@ export function LicenseReviewPage() {
                    }
                  >
                    <Text size="xs" c="dimmed">
-                      {new Date(entry.createdAt).toLocaleDateString(i18n.language)}
+                      {showDate(entry.createdAt)}
                    </Text>
                  </Timeline.Item>
                ))}
@@ -848,7 +846,7 @@ export function LicenseReviewPage() {
                        <div>
                          <Text size="sm">
                            {inspection.scheduledDate
-                              ? new Date(inspection.scheduledDate).toLocaleString(i18n.language)
+                              ? showDate(inspection.scheduledDate)
                              : t('review.unscheduled', 'Not scheduled')}
                          </Text>
                          {inspection.findings && (
--- a/apps/backoffice/src/app/features/license-review/sla.ts
+++ b/apps/backoffice/src/app/features/license-review/sla.ts
@@ -1,4 +1,5 @@
 import type { LicenseApplication } from '@ema-platform/api';
+import { dateDisplayer } from '@ema-platform/shared';

 /** Amber once this much of the window has been consumed. */
 const WARNING_RATIO = 0.7;
@@ -35,6 +36,7 @@ function formatDuration(ms: number): string {
 export function computeSla(
  application: LicenseApplication,
  now: number = Date.now(),
+  language = 'en',
 ): SlaState {
  const slaHours = application.licenseType?.slaHours;
  const submittedAt = application.submittedAt;
@@ -54,7 +56,7 @@ export function computeSla(
  const elapsed = (application.decidedAt ? new Date(application.decidedAt).getTime() : now) - submitted;
  const window = slaHours * HOUR_MS;
  const ratio = Math.min(Math.max(elapsed / window, 0), 1);
-  const targetText = `Target ${slaHours}h from submission (${new Date(target).toLocaleString()})`;
+  const targetText = `Target ${slaHours}h from submission (${dateDisplayer(target, language)})`;

  if (application.decidedAt) {
    const met = elapsed <= window;
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx
@@ -24,6 +24,7 @@ import {
  IconX,
 } from '@tabler/icons-react';
 import { AdvancedTable, notify, type AdvancedColumn } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  extractErrorMessage,
  useGetAttachmentsQuery,
@@ -216,6 +217,8 @@ export function MedicalVerificationPage() {
    title: string;
  } | null>(null);

+  const showDate = useDateDisplayer();
+
  const [medicalPage, setMedicalPage] = useState(0);
  const [seaServicePage, setSeaServicePage] = useState(0);
  const [medicalPageSize, setMedicalPageSize] = useState(PAGE_SIZE);
@@ -301,7 +304,7 @@ export function MedicalVerificationPage() {
        label: 'Validity',
        cell: ({ row }) => (
          <Text size="sm">
-            {row.original.issueDate} → {row.original.expiryDate}
+            {showDate(row.original.issueDate)} → {showDate(row.original.expiryDate)}
          </Text>
        ),
      },
@@ -367,7 +370,7 @@ export function MedicalVerificationPage() {
        ),
      },
    ],
-    [rulingMedical, rule, verifyMedical],
+    [rulingMedical, rule, verifyMedical, showDate],
  );

  const seaServiceColumns: AdvancedColumn<SeaServiceRecord>[] = useMemo(
@@ -415,7 +418,7 @@ export function MedicalVerificationPage() {
        label: 'Period',
        cell: ({ row }) => (
          <Text size="sm">
-            {row.original.engagementDate} → {row.original.dischargeDate}
+            {showDate(row.original.engagementDate)} → {showDate(row.original.dischargeDate)}
          </Text>
        ),
      },
@@ -471,7 +474,7 @@ export function MedicalVerificationPage() {
        ),
      },
    ],
-    [rulingSeaService, rule, verifySeaService],
+    [rulingSeaService, rule, verifySeaService, showDate],
  );

  return (
--- a/apps/backoffice/src/app/features/result/pages/ExamAppealsPage.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ExamAppealsPage.tsx
@@ -18,6 +18,7 @@ import {
 } from '@mantine/core';
 import { IconGavel, IconInfoCircle } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import { extractErrorMessage } from '@ema-platform/api';
 import {
  useGetPendingAppealsQuery,
@@ -35,6 +36,7 @@ import type { ExamAppeal } from '../types/result';
 export function ExamAppealsPage() {
  const { t, i18n } = useTranslation();
  const locale = i18n.language as 'en' | 'am';
+  const showDate = useDateDisplayer();
  const { data: appeals, isLoading, isError } = useGetPendingAppealsQuery();
  const [decideAppeal, { isLoading: isDeciding }] = useDecideAppealMutation();

@@ -128,7 +130,7 @@ export function ExamAppealsPage() {
                    </Text>
                  </Table.Td>
                  <Table.Td>
-                    <Text fz="xs">{appeal.createdAt?.slice(0, 10)}</Text>
+                    <Text fz="xs">{showDate(appeal.createdAt)}</Text>
                  </Table.Td>
                  <Table.Td>
                    <Button
--- a/apps/backoffice/src/app/features/result/pages/ResultPage.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage.tsx
@@ -38,6 +38,7 @@ import {
  IconSend,
 } from '@tabler/icons-react';
 import { notify, BilingualInput, useErrorHandler, AdvancedTable, useServerTable, ModalFooter, type AdvancedColumn } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import type { BilingualValue } from '@ema-platform/ui';
 import { extractErrorMessage } from '@ema-platform/api';
 import {
@@ -116,6 +117,7 @@ function InfoRow({ label, value }: { label: string; value: string }) {

 export function ResultPage() {
  const { t, i18n } = useTranslation();
+  const showDate = useDateDisplayer();
  const locale = i18n.language as 'en' | 'am';
  const { handleError } = useErrorHandler();
  const { data: examRes } = useGetExamsQuery();
@@ -344,7 +346,7 @@ export function ResultPage() {
    },
    {
      header: t('result.columns.date'),
-      cell: ({ row }) => <Text fz="sm">{new Date(row.original.createdAt).toLocaleDateString()}</Text>,
+      cell: ({ row }) => <Text fz="sm">{showDate(row.original.createdAt)}</Text>,
    },
    {
      header: '',
@@ -481,7 +483,7 @@ export function ResultPage() {
              <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="sm">
                <InfoRow label={t('result.detail.fullName')} value={detailResult.profile ? `${detailResult.profile.firstName} ${detailResult.profile.middleName ?? ''} ${detailResult.profile.lastName}` : detailResult.seafarerId} />
                <InfoRow label={t('result.detail.gender')} value={detailResult.profile?.gender ?? '—'} />
-                <InfoRow label={t('result.detail.dateOfBirth')} value={detailResult.profile?.dob ? new Date(detailResult.profile.dob).toLocaleDateString() : '—'} />
+                <InfoRow label={t('result.detail.dateOfBirth')} value={showDate(detailResult.profile?.dob)} />
                <InfoRow label={t('result.detail.maritalStatus')} value={detailResult.profile?.maritalStatus ?? '—'} />
              </SimpleGrid>
            </Paper>
@@ -499,7 +501,7 @@ export function ResultPage() {
                  <InfoRow label={t('result.detail.examTitle')} value={detailResult.exam.title?.[locale] ?? '—'} />
                  <InfoRow label={t('result.detail.type')} value={detailResult.exam.type ?? '—'} />
                  <InfoRow label={t('result.detail.venue')} value={detailResult.exam.venue ?? '—'} />
-                  <InfoRow label={t('result.detail.date')} value={detailResult.exam.date ? new Date(detailResult.exam.date).toLocaleDateString() : '—'} />
+                  <InfoRow label={t('result.detail.date')} value={showDate(detailResult.exam.date)} />
                  <InfoRow label={t('result.detail.passMark')} value={String(detailResult.exam.cuttingPoint ?? 0)} />
                </SimpleGrid>
              </Paper>
--- a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx
@@ -25,6 +25,7 @@ import {
  IconStethoscope,
 } from '@tabler/icons-react';
 import { AdvancedTable, notify, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  extractErrorMessage,
  useApiQuery,
@@ -81,6 +82,7 @@ function SeafarerDetailDrawer({
    useGetSeaServiceForProfileQuery(profileId, { skip: !profileId });
  const { data: medical, isLoading: loadingMedical } =
    useGetMedicalForProfileQuery(profileId, { skip: !profileId });
+  const showDate = useDateDisplayer();

  return (
    <Drawer
@@ -177,7 +179,7 @@ function SeafarerDetailDrawer({
                        </Table.Td>
                        <Table.Td>{record.rank}</Table.Td>
                        <Table.Td>
-                          {record.engagementDate} → {record.dischargeDate}
+                          {showDate(record.engagementDate)} → {showDate(record.dischargeDate)}
                        </Table.Td>
                        <Table.Td>
                          <Badge size="sm" color={RECORD_STATUS_COLORS[record.status]}>
@@ -213,7 +215,7 @@ function SeafarerDetailDrawer({
                      <Table.Tr key={certificate.id}>
                        <Table.Td>{certificate.issuerName}</Table.Td>
                        <Table.Td>
-                          {certificate.issueDate} → {certificate.expiryDate}
+                          {showDate(certificate.issueDate)} → {showDate(certificate.expiryDate)}
                        </Table.Td>
                        <Table.Td>{certificate.fitnessStatus}</Table.Td>
                        <Table.Td>
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage.tsx
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage.tsx
@@ -27,6 +27,7 @@ import {
  IconShieldCog,
 } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  extractErrorMessage,
  useGetVesselIncidentsQuery,
@@ -56,6 +57,7 @@ function VesselDetailDrawer({
 }) {
  const { data: incidents, isLoading: loadingIncidents } =
    useGetVesselIncidentsQuery(vessel?.id ?? '', { skip: !vessel });
+  const showDate = useDateDisplayer();

  const particulars: [string, string | number | null][] = vessel
    ? [
@@ -75,7 +77,7 @@ function VesselDetailDrawer({
        ['Engines', vessel.numberOfEngines],
        ['Hull material', vessel.hullMaterial],
        ['Owner', vessel.ownerName],
-        ['Registered', vessel.registeredAt?.slice(0, 10) ?? null],
+        ['Registered', vessel.registeredAt ? showDate(vessel.registeredAt) : null],
      ]
    : [];

@@ -127,7 +129,7 @@ function VesselDetailDrawer({
              <Card key={incident.id} withBorder radius="md" p="sm">
                <Group justify="space-between">
                  <Text size="sm" fw={600}>
-                    {incident.occurredAt}
+                    {showDate(incident.occurredAt)}
                    {incident.location ? ` — ${incident.location}` : ''}
                  </Text>
                  <Badge size="sm" variant="light">
@@ -240,6 +242,7 @@ export function VesselRegistrationQueuePage() {
  const [statusTarget, setStatusTarget] = useState<Vessel | null>(null);

  const items = data?.items ?? [];
+  const showDate = useDateDisplayer();

  return (
    <Container size="xl" py="md">
@@ -319,7 +322,7 @@ export function VesselRegistrationQueuePage() {
                  </Table.Td>
                  <Table.Td>
                    <Text size="sm" c="dimmed">
-                      {vessel.registeredAt?.slice(0, 10)}
+                      {showDate(vessel.registeredAt)}
                    </Text>
                  </Table.Td>
                  <Table.Td>
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
@@ -33,6 +33,7 @@ import {
 } from '@ema-platform/api';
 import { useCurrentProfile } from '@ema-platform/auth';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 const CERTIFICATE_TYPE_KEYS = [
  'CERTIFICATE_OF_COMPETENCY',
@@ -72,6 +73,7 @@ export function CertificatesPage() {
    useGetMyApplicationsQuery();
  const { data: licenses } = useGetMyLicensesQuery();
  const [getCertificateUrl] = useGetCertificateUrlMutation();
+  const showDate = useDateDisplayer();

  const registered =
    Boolean(profile?.seafarerNumber) && profile?.seafarerStatus === 'ACTIVE';
@@ -244,8 +246,8 @@ export function CertificatesPage() {
                      </Text>
                    </Table.Td>
                    <Table.Td>{license.licenseType?.name?.en}</Table.Td>
-                    <Table.Td>{license.issueDate?.slice(0, 10)}</Table.Td>
-                    <Table.Td>{license.expiryDate?.slice(0, 10)}</Table.Td>
+                    <Table.Td>{showDate(license.issueDate)}</Table.Td>
+                    <Table.Td>{showDate(license.expiryDate)}</Table.Td>
                    <Table.Td>
                      <Badge
                        size="sm"
--- a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
+++ b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
@@ -32,6 +32,7 @@ import {
 } from '@ema-platform/api';
 import { useCurrentProfile } from '@ema-platform/auth';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 const ENDORSEMENT_TYPE_KEYS = ['ENDORSEMENT_COC', 'ENDORSEMENT_GOC'];

@@ -66,6 +67,7 @@ export function EndorsementPage() {
  const { data: applications, isLoading: loadingApplications } =
    useGetMyApplicationsQuery();
  const { data: licenses } = useGetMyLicensesQuery();
+  const showDate = useDateDisplayer();
  const [getCertificateUrl] = useGetCertificateUrlMutation();

  const registered =
@@ -217,8 +219,8 @@ export function EndorsementPage() {
                      </Text>
                    </Table.Td>
                    <Table.Td>{localized(license.licenseType?.name)}</Table.Td>
-                    <Table.Td>{license.issueDate?.slice(0, 10)}</Table.Td>
-                    <Table.Td>{license.expiryDate?.slice(0, 10)}</Table.Td>
+                    <Table.Td>{showDate(license.issueDate)}</Table.Td>
+                    <Table.Td>{showDate(license.expiryDate)}</Table.Td>
                    <Table.Td>
                      <Badge
                        size="sm"
--- a/apps/portal/src/app/features/exams/pages/ExamsPage.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage.tsx
@@ -14,6 +14,7 @@ import {
 } from '@mantine/core';
 import { IconClipboardList, IconFileText, IconGavel } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  useApiQuery,
  useApiMutation,
@@ -81,6 +82,7 @@ const ATTENDANCE_COLOR: Record<AttendanceStatus, string> = {
 * when a mark looks wrong.
 */
 export function ExamsPage() {
+  const showDate = useDateDisplayer();
  const [appealFor, setAppealFor] = useState<MyResult | null>(null);
  const [appealReason, setAppealReason] = useState('');

@@ -198,7 +200,7 @@ export function ExamsPage() {
                  <Text fw={600}>{exam.title?.en}</Text>
                  <Text size="xs" c="dimmed">
                    {exam.certification?.name?.en ?? ''} ·{' '}
-                    {exam.date?.slice(0, 10)}
+                    {showDate(exam.date)}
                    {exam.venue ? ` · ${exam.venue}` : ''}
                  </Text>
                </div>
@@ -253,7 +255,7 @@ export function ExamsPage() {
                      </Text>
                    </Table.Td>
                    <Table.Td>{registration.exam?.title?.en ?? '—'}</Table.Td>
-                    <Table.Td>{registration.exam?.date?.slice(0, 10)}</Table.Td>
+                    <Table.Td>{showDate(registration.exam?.date)}</Table.Td>
                    <Table.Td>{registration.exam?.venue ?? '—'}</Table.Td>
                    <Table.Td>
                      <Badge
@@ -325,7 +327,7 @@ export function ExamsPage() {
                  return (
                    <Table.Tr key={result.id}>
                      <Table.Td>{result.exam?.title?.en ?? '—'}</Table.Td>
-                      <Table.Td>{result.publishedAt?.slice(0, 10) ?? '—'}</Table.Td>
+                      <Table.Td>{showDate(result.publishedAt)}</Table.Td>
                      <Table.Td>
                        <Text fw={600} size="sm">
                          {result.totalScore}
--- a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
@@ -18,6 +18,7 @@ import {
  type IssuedLicense,
 } from '@ema-platform/api';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 /**
 * Renewal reuses the ordinary application wizard — a renewal is an
@@ -56,14 +57,6 @@ function daysUntil(date: string): number {
  return Math.ceil(ms / 86_400_000);
 }

-function formatDate(value: string): string {
-  return new Date(value).toLocaleDateString('en-GB', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  });
-}
-
 export function LicenseCard({
  license,
  isDownloading,
@@ -82,6 +75,7 @@ export function LicenseCard({
  const days = license.daysUntilExpiry ?? daysUntil(license.expiryDate);
  const expired = license.status === 'EXPIRED' || days < 0;
  const renewable = license.renewable ?? false;
+  const showDate = useDateDisplayer();

  return (
    <Card withBorder radius="md" padding="md" className="ema-hover-lift">
@@ -111,7 +105,7 @@ export function LicenseCard({
            {expired ? 'Expired on' : 'Valid until'}
          </Text>
          <Text size="sm" fw={500}>
-            {formatDate(license.expiryDate)}
+            {showDate(license.expiryDate)}
          </Text>
        </Box>
        <Tooltip label="Download certificate">
--- a/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx
@@ -33,6 +33,7 @@ import {
  IconX,
 } from '@tabler/icons-react';
 import { AdvancedTable, AmharicDatePicker, EmptyState, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import { LicenseCatalogue } from '../components/LicenseCatalogue';
 import { LicenseCard, useRenewLicense } from '../components/LicenseCard';
 import { useApplicationPayment } from '../../payments/hooks/useApplicationPayment';
@@ -90,6 +91,7 @@ function tabFromHash(hash: string): Tab {
 export function MyApplicationsPage() {
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();
+  const showDate = useDateDisplayer();
  const { data, isFetching, refetch } = useGetMyApplicationsQuery();
  const { pay, isPaying } = useApplicationPayment();
  const { data: capabilities } = useGetPaymentCapabilitiesQuery();
@@ -279,7 +281,7 @@ export function MyApplicationsPage() {
      cell: ({ row }) => (
        <Text size="sm" c="dimmed">
          {row.original.submittedAt
-            ? new Date(row.original.submittedAt).toLocaleDateString()
+            ? showDate(row.original.submittedAt)
            : t('applications.card.notFiled')}
        </Text>
      ),
--- a/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
+++ b/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
@@ -20,6 +20,7 @@ import {
  useGetUnseenNotificationsQuery,
  useMarkNotificationReadMutation,
 } from '@ema-platform/api';
+import { useDateDisplayer } from '@ema-platform/shared';

 type Tab = 'all' | 'unseen' | 'seen';

@@ -37,6 +38,7 @@ const EMPTY_COPY: Record<Tab, string> = {
 */
 export function NotificationsPage() {
  const navigate = useNavigate();
+  const showDate = useDateDisplayer();
  const [tab, setTab] = useState<Tab>('all');
  const all = useGetNotificationsQuery(undefined, { skip: tab === 'unseen' });
  const unseen = useGetUnseenNotificationsQuery(undefined, { skip: tab !== 'unseen' });
@@ -117,7 +119,7 @@ export function NotificationsPage() {
                      {localized(n.content)}
                    </Text>
                    <Text size="xs" c="dimmed" mt={4}>
-                      {new Date(n.createdAt).toLocaleString()}
+                      {showDate(n.createdAt)}
                    </Text>
                  </div>
                  {!n.isSeen && (
--- a/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx
+++ b/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx
@@ -12,11 +12,13 @@ import {
 } from '@mantine/core';
 import { IconCircleCheck } from '@tabler/icons-react';
 import { useGetApplicationPaymentQuery } from '@ema-platform/api';
+import { useDateDisplayer } from '@ema-platform/shared';

 /** Confirmation that the licence fee has been received. */
 export function PaymentSuccessPage() {
  const [params] = useSearchParams();
  const navigate = useNavigate();
+  const showDate = useDateDisplayer();
  const applicationId = params.get('applicationId') ?? '';
  const { data } = useGetApplicationPaymentQuery(applicationId, {
    skip: !applicationId,
@@ -58,7 +60,7 @@ export function PaymentSuccessPage() {
                {data.paidAt && (
                  <Group justify="space-between">
                    <Text size="sm" c="dimmed">Paid</Text>
-                    <Text size="sm">{new Date(data.paidAt).toLocaleString()}</Text>
+                    <Text size="sm">{showDate(data.paidAt)}</Text>
                  </Group>
                )}
              </Stack>
--- a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
@@ -20,6 +20,7 @@ import {
  useUpdateMyOperatorTypesMutation,
 } from '@ema-platform/api';
 import { notify, ModalFooter } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 /**
 * The applicant's modes of operation — what they do, and therefore which
@@ -62,6 +63,7 @@ export function OperationsFormContent({
    [catalogue],
  );

+  const showDate = useDateDisplayer();
  const removed = declaredIds.filter((id) => !selected.includes(id));
  const dirty =
    removed.length > 0 || selected.some((id) => !declaredIds.includes(id));
@@ -151,13 +153,7 @@ export function OperationsFormContent({

      <Group justify="space-between">
        <Text size="xs" c="dimmed">
-          {lastChanged
-            ? `Last changed ${new Date(lastChanged).toLocaleDateString('en-GB', {
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric',
-              })}`
-            : 'Not set yet'}
+          {lastChanged ? `Last changed ${showDate(lastChanged)}` : 'Not set yet'}
        </Text>
        <Group gap="sm">
          {dirty && (
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx
@@ -32,6 +32,7 @@ import {
 } from '@tabler/icons-react';
 import { useState } from 'react';
 import { AdvancedTable, AmharicDatePicker, notify, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import {
  extractErrorMessage,
  uploadDocument,
@@ -156,6 +157,7 @@ const EMPTY_SEA_SERVICE = {
 };

 function SeaServiceTab() {
+  const showDate = useDateDisplayer();
  const { data: records, isLoading, refetch } = useGetMySeaServiceRecordsQuery();
  const { data: seaTime } = useGetMySeaTimeQuery();
  const [createRecord, { isLoading: creating }] =
@@ -257,8 +259,16 @@ function SeaServiceTab() {
      ),
    },
    { header: 'Rank', accessorKey: 'rank' },
-    { header: 'From', accessorKey: 'engagementDate' },
-    { header: 'To', accessorKey: 'dischargeDate' },
+    {
+      header: 'From',
+      accessorKey: 'engagementDate',
+      cell: ({ row }) => showDate(row.original.engagementDate),
+    },
+    {
+      header: 'To',
+      accessorKey: 'dischargeDate',
+      cell: ({ row }) => showDate(row.original.dischargeDate),
+    },
    {
      header: 'Status',
      cell: ({ row }) => (
@@ -463,6 +473,7 @@ const EMPTY_MEDICAL = {
 };

 function MedicalTab() {
+  const showDate = useDateDisplayer();
  const { data: certificates, isLoading, refetch } = useGetMyMedicalCertificatesQuery();
  const [createCertificate, { isLoading: creating }] =
    useCreateMedicalCertificateMutation();
@@ -557,12 +568,16 @@ function MedicalTab() {
        </>
      ),
    },
-    { header: 'Issued', accessorKey: 'issueDate' },
+    {
+      header: 'Issued',
+      accessorKey: 'issueDate',
+      cell: ({ row }) => showDate(row.original.issueDate),
+    },
    {
      header: 'Expires',
      cell: ({ row }) => (
        <Group gap={6} wrap="nowrap">
-          {row.original.expiryDate}
+          {showDate(row.original.expiryDate)}
          {row.original.expiryDate < today && <Badge color="red">Expired</Badge>}
        </Group>
      ),
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx
@@ -24,6 +24,7 @@ import {
  IconShip,
 } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
 import { MOCK_REGISTRATIONS, recordDownload, STATUS_COLOR } from '../mock';

 // ponytail: placeholder PDF blob; wire real cert endpoint when backend lands.
@@ -38,6 +39,7 @@ function downloadCertificate(filename: string) {

 export function VesselRegistrationStatusPage() {
  const navigate = useNavigate();
+  const showDate = useDateDisplayer();
  const { id } = useParams();
  const [reg] = useState(() => MOCK_REGISTRATIONS.find((r) => r.id === id) ?? null);
  const [, forceUpdate] = useState(0);
@@ -93,7 +95,7 @@ export function VesselRegistrationStatusPage() {
          >
            <Text fz="sm">
              Registration {reg.renewal === 'Overdue' ? 'is overdue for renewal' : 'is due for renewal soon'}
-              {reg.expiryDate ? ` — expires ${reg.expiryDate}` : ''}.
+              {reg.expiryDate ? ` — expires ${showDate(reg.expiryDate)}` : ''}.
            </Text>
          </Alert>
        )}
@@ -132,7 +134,7 @@ export function VesselRegistrationStatusPage() {
                <Group justify="space-between" wrap="wrap" gap="sm">
                  <div>
                    <Text fw={600} fz="sm">{cert.name}</Text>
-                    <Text fz="xs" c="dimmed">Certificate No. {cert.number} — Issued {cert.issueDate}</Text>
+                    <Text fz="xs" c="dimmed">Certificate No. {cert.number} — Issued {showDate(cert.issueDate)}</Text>
                    {cert.downloads > 0 && (
                      <Text fz="xs" c="dimmed">Downloaded {cert.downloads} time{cert.downloads === 1 ? '' : 's'}</Text>
                    )}
--- a/apps/portal/src/app/features/waiver/pages/WaiverPage.tsx
+++ b/apps/portal/src/app/features/waiver/pages/WaiverPage.tsx
@@ -27,6 +27,7 @@ import {
  useGetMyLicensesQuery,
 } from '@ema-platform/api';
 import { notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';

 const WAIVER_TYPE_KEYS = ['PRE_WAIVER', 'POST_WAIVER'];

@@ -43,6 +44,7 @@ export function WaiverPage() {
  const { data: applications, isLoading } = useGetMyApplicationsQuery();
  const { data: licenses } = useGetMyLicensesQuery();
  const [getCertificateUrl] = useGetCertificateUrlMutation();
+  const showDate = useDateDisplayer();

  const waiverApplications = (applications?.items ?? []).filter((app) =>
    WAIVER_TYPE_KEYS.includes(app.licenseType?.key ?? ''),
@@ -183,7 +185,7 @@ export function WaiverPage() {
                      </Text>
                    </Table.Td>
                    <Table.Td>{license.licenseType?.name?.en ?? '—'}</Table.Td>
-                    <Table.Td>{license.issueDate?.slice(0, 10)}</Table.Td>
+                    <Table.Td>{showDate(license.issueDate)}</Table.Td>
                    <Table.Td>
                      <Badge
                        size="sm"