Refactor MySeaRecordsPage to use AmharicDatePicker and update styles for better UX

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

@@ -31,7 +31,7 @@ import {
   IconTrash,
 } from '@tabler/icons-react';
 import { useState } from 'react';
-import { AdvancedTable, notify, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
+import { AdvancedTable, AmharicDatePicker, notify, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
 import {
   extractErrorMessage,
   uploadDocument,
@@ -400,23 +400,23 @@ function SeaServiceTab() {
             onChange={(e) => setForm({ ...form, rank: e.target.value })}
           />
           <Group grow>
-            <TextInput
+            <AmharicDatePicker
-              type="date"
               label="Engagement date"
               required
               value={form.engagementDate}
-              onChange={(e) =>
+              onChange={(val) =>
-                setForm({ ...form, engagementDate: e.target.value })
+                setForm({ ...form, engagementDate: val })
               }
+              dateFormat="date"
             />
-            <TextInput
+            <AmharicDatePicker
-              type="date"
               label="Discharge date"
               required
               value={form.dischargeDate}
-              onChange={(e) =>
+              onChange={(val) =>
-                setForm({ ...form, dischargeDate: e.target.value })
+                setForm({ ...form, dischargeDate: val })
               }
+              dateFormat="date"
             />
           </Group>
           <Textarea
@@ -684,19 +684,19 @@ function MedicalTab() {
             />
           </Group>
           <Group grow>
-            <TextInput
+            <AmharicDatePicker
-              type="date"
               label="Issue date"
               required
               value={form.issueDate}
-              onChange={(e) => setForm({ ...form, issueDate: e.target.value })}
+              onChange={(val) => setForm({ ...form, issueDate: val })}
+              dateFormat="date"
             />
-            <TextInput
+            <AmharicDatePicker
-              type="date"
               label="Expiry date"
               required
               value={form.expiryDate}
-              onChange={(e) => setForm({ ...form, expiryDate: e.target.value })}
+              onChange={(val) => setForm({ ...form, expiryDate: val })}
+              dateFormat="date"
             />
           </Group>
           <Select

libs/ui/src/lib/input/AmharicDatePicker.css

@@ -3,14 +3,14 @@
    no border/box affordance and a hardcoded blue chevron. */
 .amharic-daypicker {
   --rdp-accent-color: var(--mantine-primary-color-filled);
-  --rdp-day-height: 44px;
+  --rdp-day-height: 36px;
-  --rdp-day-width: 44px;
+  --rdp-day-width: 36px;
-  --rdp-day_button-height: 42px;
+  --rdp-day_button-height: 34px;
-  --rdp-day_button-width: 42px;
+  --rdp-day_button-width: 34px;
-  --rdp-weekday-padding: 0.5rem 0;
+  --rdp-weekday-padding: 0.25rem 0;
-  --rdp-nav-height: 2.75rem;
+  --rdp-nav-height: 2.25rem;
-  --rdp-nav_button-width: 2.75rem;
+  --rdp-nav_button-width: 2rem;
-  --rdp-nav_button-height: 2.75rem;
+  --rdp-nav_button-height: 2rem;
 }
 
 /* Backoffice loads Tailwind's preflight after the package stylesheet. That
@@ -170,3 +170,16 @@
   border-color: var(--mantine-primary-color-filled);
   color: var(--mantine-color-white);
 }
+
+/* Ensure no scrollbar appears on the datepicker popover dropdown */
+.amharic-daypicker-dropdown {
+  overflow: hidden !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.amharic-daypicker-dropdown::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}

libs/ui/src/lib/input/AmharicDatePicker.tsx

@@ -208,7 +208,7 @@ export function AmharicDatePicker({
     ? calendarType === 'EN'
       ? selected.toLocaleDateString('en-US', {
           year: 'numeric',
-          month: 'long',
+          month: 'short',
           day: 'numeric',
         })
       : toAmharicDisplay(selected)
@@ -228,6 +228,8 @@ export function AmharicDatePicker({
       trapFocus
       withArrow
       withinPortal
+      shadow="md"
+      radius="md"
       // The field lives inside a Modal's scrollable body while the dropdown is
       // portaled to <body> — a different scroll container than its reference.
       // The default `absolute` strategy sums offsets across that scroll chain
@@ -255,37 +257,46 @@ export function AmharicDatePicker({
           placeholder={placeholder}
           onClick={() => !disabled && toggle()}
           onBlur={onBlur}
+          styles={{
+            input: {
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            },
+          }}
           leftSection={
             <Button
               type="button"
-              variant="light"
+              variant="subtle"
               size="compact-xs"
-              tabIndex={0}
+              tabIndex={-1}
               disabled={disabled}
               onClick={(e) => {
                 e.stopPropagation();
                 setCalendarType((prev) => (prev === 'EN' ? 'AMH' : 'EN'));
               }}
               aria-label={t('common.switchCalendar')}
+              styles={{
+                root: {
+                  paddingLeft: 6,
+                  paddingRight: 6,
+                  fontWeight: 600,
+                  fontSize: '0.75rem',
+                },
+              }}
             >
               {calendarType}
             </Button>
           }
-          leftSectionWidth="calc(4.375rem * var(--mantine-scale))"
+          leftSectionWidth="3.25rem"
           rightSection={
-            <ActionIcon size="md" variant="transparent" disabled={disabled} onClick={() => toggle()}>
+            <ActionIcon size="sm" variant="transparent" disabled={disabled} onClick={() => toggle()}>
-              <IconCalendarEvent size={20} />
+              <IconCalendarEvent size={18} />
             </ActionIcon>
           }
         />
       </Popover.Target>
 
-      {/* Inside a Modal there may not be room below the field for the full
+      {/* Inside a Modal the dropdown is portaled out of the modal body so it positions nicely. */}
-          calendar + time input + action row — scroll the dropdown itself
+      <Popover.Dropdown className="amharic-daypicker-dropdown" p="sm" style={{ overflow: 'hidden' }}>
-          rather than relying on the page (which doesn't scroll while a
-          Modal is open) or the Modal body (the dropdown is portaled out of
-          it, so its scroll never reaches this). */}
-      <Popover.Dropdown p="md" mah="70dvh" style={{ overflowY: 'auto' }}>
         {calendarType === 'AMH' ? (
           <EthiopicDayPicker
             className="amharic-daypicker"