amahric date picker

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);
+}

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>
   );