From cdec4c435bb98f9887e7c97f06aad61d85d758f5 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 28 Jul 2026 07:25:19 +0000
Subject: [PATCH] date picker

---
 .../src/app/components/AmharicDatePicker.css  | 39 +++++++++++++++++++
 .../src/app/components/AmharicDatePicker.tsx  |  7 ++++
 2 files changed, 46 insertions(+)
 create mode 100644 apps/portal/src/app/components/AmharicDatePicker.css

diff --git a/apps/portal/src/app/components/AmharicDatePicker.css b/apps/portal/src/app/components/AmharicDatePicker.css
new file mode 100644
index 000000000..4f38f1478
--- /dev/null
+++ b/apps/portal/src/app/components/AmharicDatePicker.css
@@ -0,0 +1,39 @@
+/* Restyle the react-day-picker month/year dropdown caption to match Mantine
+   inputs — the library ships it as bare text + an invisible <select>, with
+   no border/box affordance and a hardcoded blue chevron. */
+.amharic-daypicker {
+  --rdp-accent-color: var(--mantine-primary-color-filled);
+}
+
+.amharic-daypicker .rdp-dropdowns {
+  gap: 0.375rem;
+}
+
+.amharic-daypicker .rdp-dropdown_root {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background-color: var(--mantine-color-body);
+  padding: 0.25rem 0.5rem;
+}
+
+.amharic-daypicker .rdp-dropdown_root:hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.amharic-daypicker .rdp-caption_label {
+  gap: 0.25rem;
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  color: var(--mantine-color-text);
+}
+
+.amharic-daypicker .rdp-chevron {
+  width: 12px;
+  height: 12px;
+  fill: var(--mantine-color-dimmed);
+}
+
+.amharic-daypicker .rdp-month_caption {
+  font-size: inherit;
+  font-weight: 600;
+}
diff --git a/apps/portal/src/app/components/AmharicDatePicker.tsx b/apps/portal/src/app/components/AmharicDatePicker.tsx
index 7010078e5..ea2acd30f 100644
--- a/apps/portal/src/app/components/AmharicDatePicker.tsx
+++ b/apps/portal/src/app/components/AmharicDatePicker.tsx
@@ -6,6 +6,7 @@ import { DayPicker as GregorianDayPicker } from '@daypicker/react';
 import { IconCalendarEvent } from '@tabler/icons-react';
 import { EthDateTime } from 'ethiopian-calendar-date-converter';
 import '@daypicker/react/dist/style.css';
+import './AmharicDatePicker.css';
 
 const EC_MONTHS_AM = [
   'መስከረም', 'ጥቅምት', 'ኅዳር', 'ታህሳስ', 'ጥር', 'የካቲት',
@@ -59,6 +60,8 @@ export function toEthiopicDateLabel(date: Date): string {
   }
 }
 
+const YEAR_DROPDOWN_END = new Date(new Date().getFullYear() + 50, 11, 31);
+
 export interface AmharicDatePickerProps {
   label?: string;
   value?: Date | null;
@@ -129,9 +132,11 @@ export function AmharicDatePicker({
       <Popover.Dropdown p="md">
         {calendarType === 'AMH' ? (
           <EthiopicDayPicker
+            className="amharic-daypicker"
             mode="single"
             selected={value ?? undefined}
             defaultMonth={value ?? undefined}
+            endMonth={YEAR_DROPDOWN_END}
             numerals="latn"
             captionLayout="dropdown"
             formatters={ETH_FORMATTERS}
@@ -142,9 +147,11 @@ export function AmharicDatePicker({
           />
         ) : (
           <GregorianDayPicker
+            className="amharic-daypicker"
             mode="single"
             selected={value ?? undefined}
             defaultMonth={value ?? undefined}
+            endMonth={YEAR_DROPDOWN_END}
             captionLayout="dropdown"
             onSelect={(date: Date | undefined) => {
               onChange?.(date ?? null);