calendar fixed, packagejson fixed

apps/Frontend/src/components/appointments/appointment-form.tsx

@@ -429,7 +429,7 @@ export function AppointmentForm({
                       </Button>
                     </FormControl>
                   </PopoverTrigger>
-                  <PopoverContent className="w-auto p-0" align="start">
+                  <PopoverContent className="w-auto p-4">
                     <Calendar
                       mode="single"
                       selected={field.value}
@@ -438,10 +438,9 @@ export function AppointmentForm({
                           field.onChange(date); 
                         }
                       }}
-                      disabled={(date) =>
+                      disabled={(date: Date) =>
                         date < new Date(new Date().setHours(0, 0, 0, 0))
                       }
-                      initialFocus
                     />
                   </PopoverContent>
                 </Popover>

apps/Frontend/src/components/claims/claim-form.tsx

@@ -507,7 +507,6 @@ export function ClaimForm({
                         mode="single"
                         selected={serviceDateValue}
                         onSelect={onServiceDateChange}
-                        initialFocus
                       />
                     </PopoverContent>
                   </Popover>

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

@@ -1,68 +1,75 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import { useState, useEffect } from "react";
+import { DayPicker } from "react-day-picker";
+import type { DateRange } from "react-day-picker";
+import "react-day-picker/style.css";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+type BaseProps = Omit<React.ComponentProps<typeof DayPicker>, 'mode' | 'selected' | 'onSelect'>;
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+type CalendarProps =
+  | (BaseProps & {
+      mode: 'single';
+      selected?: Date;
+      onSelect?: (date: Date | undefined) => void;
+    })
+  | (BaseProps & {
+      mode: 'range';
+      selected?: DateRange;
+      onSelect?: (range: DateRange | undefined) => void;
+    })
+  | (BaseProps & {
+      mode: 'multiple';
+      selected?: Date[];
+      onSelect?: (dates: Date[] | undefined) => void;
+    });
+
+export function Calendar(props: CalendarProps) {
+  const { mode, selected, onSelect, className, ...rest } = props;
+
+  const [internalSelected, setInternalSelected] = useState<typeof selected>(selected);
+
+  useEffect(() => {
+    setInternalSelected(selected);
+  }, [selected]);
+
+  const handleSelect = (value: typeof selected) => {
+    setInternalSelected(value);
+    onSelect?.(value as any); // We'll narrow this properly below
+  };
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
   return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
+    <div
+      className={`${className || ''} day-picker-small-scale`}
+      style={{
+        transform: 'scale(0.9)',
+        transformOrigin: 'top left',
+        width: 'fit-content',
+        height: 'fit-content',
       }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
-      }}
-      {...props}
-    />
-  )
+    >
+      {mode === 'single' && (
+        <DayPicker
+          mode="single"
+          selected={internalSelected as Date | undefined}
+          onSelect={handleSelect as (date: Date | undefined) => void}
+          {...rest}
+        />
+      )}
+      {mode === 'range' && (
+        <DayPicker
+          mode="range"
+          selected={internalSelected as DateRange | undefined}
+          onSelect={handleSelect as (range: DateRange | undefined) => void}
+          {...rest}
+        />
+      )}
+      {mode === 'multiple' && (
+        <DayPicker
+          mode="multiple"
+          selected={internalSelected as Date[] | undefined}
+          onSelect={handleSelect as (dates: Date[] | undefined) => void}
+          {...rest}
+        />
+      )}
+    </div>
+  );
 }
-Calendar.displayName = "Calendar"
-
-export { Calendar }

apps/Frontend/src/pages/appointments-page.tsx

@@ -872,7 +872,6 @@ export default function AppointmentsPage() {
                       onSelect={(date) => {
                         if (date) setSelectedDate(date);
                       }}
-                      className="rounded-md border"
                     />
                   </CardContent>
                 </Card>