patient table done, patient form done

apps/Frontend/src/components/ui/calendar.tsx

@@ -3,21 +3,24 @@ import { DayPicker } from "react-day-picker";
 import type { DateRange } from "react-day-picker";
 import "react-day-picker/style.css";
 
-type BaseProps = Omit<React.ComponentProps<typeof DayPicker>, 'mode' | 'selected' | 'onSelect'>;
+type BaseProps = Omit<
+  React.ComponentProps<typeof DayPicker>,
+  "mode" | "selected" | "onSelect"
+>;
 
 type CalendarProps =
   | (BaseProps & {
-      mode: 'single';
+      mode: "single";
       selected?: Date;
       onSelect?: (date: Date | undefined) => void;
     })
   | (BaseProps & {
-      mode: 'range';
+      mode: "range";
       selected?: DateRange;
       onSelect?: (range: DateRange | undefined) => void;
     })
   | (BaseProps & {
-      mode: 'multiple';
+      mode: "multiple";
       selected?: Date[];
       onSelect?: (dates: Date[] | undefined) => void;
     });
@@ -25,7 +28,8 @@ type CalendarProps =
 export function Calendar(props: CalendarProps) {
   const { mode, selected, onSelect, className, ...rest } = props;
 
-  const [internalSelected, setInternalSelected] = useState<typeof selected>(selected);
+  const [internalSelected, setInternalSelected] =
+    useState<typeof selected>(selected);
 
   useEffect(() => {
     setInternalSelected(selected);
@@ -38,23 +42,24 @@ export function Calendar(props: CalendarProps) {
 
   return (
     <div
-      className={`${className || ''} day-picker-small-scale`}
+      className={`${className || ""} day-picker-small-scale`}
       style={{
-        transform: 'scale(0.9)',
-        transformOrigin: 'top left',
-        width: 'fit-content',
-        height: 'fit-content',
+        transform: "scale(0.9)",
+        transformOrigin: "top left",
+        width: "fit-content",
+        height: "fit-content",
       }}
     >
-      {mode === 'single' && (
+      {mode === "single" && (
         <DayPicker
           mode="single"
           selected={internalSelected as Date | undefined}
           onSelect={handleSelect as (date: Date | undefined) => void}
+          captionLayout="dropdown" // ✅ Enables month/year dropdown
           {...rest}
         />
       )}
-      {mode === 'range' && (
+      {mode === "range" && (
         <DayPicker
           mode="range"
           selected={internalSelected as DateRange | undefined}
@@ -62,7 +67,7 @@ export function Calendar(props: CalendarProps) {
           {...rest}
         />
       )}
-      {mode === 'multiple' && (
+      {mode === "multiple" && (
         <DayPicker
           mode="multiple"
           selected={internalSelected as Date[] | undefined}