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

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

@@ -4,11 +4,12 @@ import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
 import { Dropdown } from '@/components/ui/common/Dropdown';
-import type { AppointmentPurpose } from '@/types/appointment';
+import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
 import type { Patient } from '@/types/patient';
 import {
   combineLocalDateAndTime,
+  compareLocalDayStart,
   formatTimeForInput,
   isSameLocalCalendarDay,
 } from '@/lib/appointmentTime';
@@ -28,6 +29,7 @@ interface AppointmentBookingModalProps {
     endAt: string;
     purpose: AppointmentPurpose;
   }) => Promise<void>;
+  editingAppointment?: AppointmentRecord | null;
   loading?: boolean;
 }
 
@@ -40,6 +42,7 @@ export function AppointmentBookingModal({
   initialHour,
   onClose,
   onSubmit,
+  editingAppointment = null,
   loading = false,
 }: AppointmentBookingModalProps) {
   const [startTime, setStartTime] = useState('09:00');
@@ -61,29 +64,37 @@ export function AppointmentBookingModal({
     if (!open) {
       return;
     }
-    const start = new Date(
-      scheduleDate.getFullYear(),
-      scheduleDate.getMonth(),
-      scheduleDate.getDate(),
-      initialHour,
-      0,
-      0,
-      0,
-    );
-    const end = new Date(
-      scheduleDate.getFullYear(),
-      scheduleDate.getMonth(),
-      scheduleDate.getDate(),
-      initialHour < 23 ? initialHour + 1 : 23,
-      initialHour < 23 ? 0 : 59,
-      0,
-      0,
-    );
-    setStartTime(formatTimeForInput(start));
-    setEndTime(formatTimeForInput(end));
-    setPurpose('consultation');
+    if (editingAppointment) {
+      const start = new Date(editingAppointment.startAt);
+      const end = new Date(editingAppointment.endAt);
+      setStartTime(formatTimeForInput(start));
+      setEndTime(formatTimeForInput(end));
+      setPurpose((editingAppointment.purpose as AppointmentPurpose) ?? 'consultation');
+    } else {
+      const start = new Date(
+        scheduleDate.getFullYear(),
+        scheduleDate.getMonth(),
+        scheduleDate.getDate(),
+        initialHour,
+        0,
+        0,
+        0,
+      );
+      const end = new Date(
+        scheduleDate.getFullYear(),
+        scheduleDate.getMonth(),
+        scheduleDate.getDate(),
+        initialHour < 23 ? initialHour + 1 : 23,
+        initialHour < 23 ? 0 : 59,
+        0,
+        0,
+      );
+      setStartTime(formatTimeForInput(start));
+      setEndTime(formatTimeForInput(end));
+      setPurpose('consultation');
+    }
     setError('');
-  }, [open, scheduleDate, initialHour]);
+  }, [open, scheduleDate, initialHour, editingAppointment]);
 
   if (!open || !providerUserId) {
     return null;
@@ -97,7 +108,7 @@ export function AppointmentBookingModal({
     if (!providerUserId) {
       return;
     }
-    if (!patient) {
+    if (!editingAppointment && !patient) {
       setError('Select a patient first.');
       return;
     }
@@ -116,9 +127,22 @@ export function AppointmentBookingModal({
       return;
     }
 
+    const today = new Date();
+    if (compareLocalDayStart(scheduleDate, today) < 0) {
+      setError('Past appointments are view-only.');
+      return;
+    }
+
+    const effectivePatientId = editingAppointment?.patientId ?? patient?.id;
+    const effectiveProviderId = editingAppointment?.providerUserId ?? providerUserId;
+    if (!effectivePatientId || !effectiveProviderId) {
+      setError('Missing appointment details.');
+      return;
+    }
+
     await onSubmit({
-      patientId: patient.id,
-      providerUserId,
+      patientId: effectivePatientId,
+      providerUserId: effectiveProviderId,
       startAt: startAt.toISOString(),
       endAt: endAt.toISOString(),
       purpose,
@@ -135,7 +159,7 @@ export function AppointmentBookingModal({
       >
         <div className="flex items-start justify-between gap-2">
           <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
-            New appointment
+            {editingAppointment ? 'Edit appointment' : 'New appointment'}
           </h2>
           <button
             type="button"
@@ -154,7 +178,11 @@ export function AppointmentBookingModal({
         <div>
           <label className="block text-sm font-medium text-text-secondary mb-1">Patient</label>
           <p className="text-sm text-text-primary rounded-[var(--radius-md)] border border-border bg-background-secondary/60 px-3 py-2">
-            {patient ? `${patient.firstName} ${patient.lastName}` : '—'}
+            {editingAppointment
+              ? `${editingAppointment.patient.firstName} ${editingAppointment.patient.lastName}`
+              : patient
+                ? `${patient.firstName} ${patient.lastName}`
+                : '—'}
           </p>
         </div>