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

---
 .../src/app/components/AmharicDatePicker.css  |  9 +++++++
 .../src/app/components/AmharicDatePicker.tsx  | 25 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/components/AmharicDatePicker.css b/apps/portal/src/app/components/AmharicDatePicker.css
index 4f38f1478..36cc97bee 100644
--- a/apps/portal/src/app/components/AmharicDatePicker.css
+++ b/apps/portal/src/app/components/AmharicDatePicker.css
@@ -37,3 +37,12 @@
   font-size: inherit;
   font-weight: 600;
 }
+
+/* Day cells are already circular (--rdp-day_button-border-radius: 100%);
+   the library only outlines the selected one by default — fill it instead
+   so the selection reads as a solid, unambiguous mark. */
+.amharic-daypicker .rdp-selected .rdp-day_button {
+  background-color: var(--mantine-primary-color-filled);
+  border-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+}
diff --git a/apps/portal/src/app/components/AmharicDatePicker.tsx b/apps/portal/src/app/components/AmharicDatePicker.tsx
index ea2acd30f..13bade18f 100644
--- a/apps/portal/src/app/components/AmharicDatePicker.tsx
+++ b/apps/portal/src/app/components/AmharicDatePicker.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ActionIcon, Button, Popover, TextInput } from '@mantine/core';
+import { ActionIcon, Button, Group, Popover, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { DayPicker as EthiopicDayPicker } from '@daypicker/ethiopic';
 import { DayPicker as GregorianDayPicker } from '@daypicker/react';
@@ -159,6 +159,29 @@ export function AmharicDatePicker({
             }}
           />
         )}
+
+        <Group justify="space-between" mt="sm">
+          <Button
+            variant="subtle"
+            size="xs"
+            onClick={() => {
+              onChange?.(null);
+              close();
+            }}
+          >
+            {calendarType === 'AMH' ? 'አጽዳ' : 'Clear'}
+          </Button>
+          <Button
+            variant="light"
+            size="xs"
+            onClick={() => {
+              onChange?.(new Date());
+              close();
+            }}
+          >
+            {calendarType === 'AMH' ? 'ዛሬ' : 'Today'}
+          </Button>
+        </Group>
       </Popover.Dropdown>
     </Popover>
   );