improvement: datepicker component now let user choose past dates too.

frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx

@@ -35,6 +35,7 @@ interface AppointmentScheduleGridProps {
   canDelete?: boolean;
   onDeleteAppointment?: (id: string) => void;
   onSlotClick: (hour: number, providerUserId: string, providerName: string) => void;
+  onAppointmentClick?: (appointment: AppointmentRecord) => void;
 }
 
 export function AppointmentScheduleGrid({
@@ -45,6 +46,7 @@ export function AppointmentScheduleGrid({
   canDelete = false,
   onDeleteAppointment,
   onSlotClick,
+  onAppointmentClick,
 }: AppointmentScheduleGridProps) {
   const gridHeight = HOURS.length * HOUR_PX;
 
@@ -120,9 +122,11 @@ export function AppointmentScheduleGrid({
                       return null;
                     }
                     return (
-                      <div
+                      <button
+                        type="button"
                         key={apt.id}
-                        className={`absolute left-0.5 right-0.5 rounded-[var(--radius-sm)] border pointer-events-none z-10 flex flex-row items-center gap-1.5 px-1.5 py-1 min-h-[36px] ${purposeStyle(apt.purpose)}`}
+                        onClick={() => onAppointmentClick?.(apt)}
+                        className={`absolute left-0.5 right-0.5 rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex flex-row items-center gap-1.5 px-1.5 py-1 min-h-[36px] text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35`}
                         style={{ top: pos.top, height: pos.height, minHeight: 36 }}
                       >
                         <div className="pointer-events-none flex-1 min-w-0 overflow-hidden text-left">
@@ -147,7 +151,7 @@ export function AppointmentScheduleGrid({
                             <Trash2 className={`w-4 h-4 ${purposeDeleteIconClass(apt.purpose)}`} />
                           </button>
                         )}
-                      </div>
+                      </button>
                     );
                   })}
               </div>