feat(appointmet-page) - Clean fetching done, removed all patiens query

apps/Frontend/src/components/appointments/add-appointment-modal.tsx

@@ -8,7 +8,6 @@ import { AppointmentForm } from "./appointment-form";
 import {
   Appointment,
   InsertAppointment,
-  Patient,
   UpdateAppointment,
 } from "@repo/db/types";
 
@@ -19,7 +18,6 @@ interface AddAppointmentModalProps {
   onDelete?: (id: number) => void;
   isLoading: boolean;
   appointment?: Appointment;
-  patients: Patient[];
 }
 
 export function AddAppointmentModal({
@@ -29,7 +27,6 @@ export function AddAppointmentModal({
   onDelete,
   isLoading,
   appointment,
-  patients,
 }: AddAppointmentModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -42,7 +39,6 @@ export function AddAppointmentModal({
         <div className="p-1">
           <AppointmentForm
             appointment={appointment}
-            patients={patients}
             onSubmit={(data) => {
               onSubmit(data);
               onOpenChange(false);

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

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
-import { apiRequest } from "@/lib/queryClient";
+import { apiRequest, queryClient } from "@/lib/queryClient";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -22,7 +22,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Clock } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAuth } from "@/hooks/use-auth";
 import { useDebounce } from "use-debounce";
 import {
@@ -34,10 +34,16 @@ import {
   UpdateAppointment,
 } from "@repo/db/types";
 import { DateInputField } from "@/components/ui/dateInputField";
+import { parseLocalDate } from "@/utils/dateUtils";
+import {
+  PatientSearch,
+  SearchCriteria,
+} from "@/components/patients/patient-search";
+import { QK_PATIENTS_BASE } from "../patients/patient-table";
+import { toast } from "@/hooks/use-toast";
 
 interface AppointmentFormProps {
   appointment?: Appointment;
-  patients: Patient[];
   onSubmit: (data: InsertAppointment | UpdateAppointment) => void;
   onDelete?: (id: number) => void;
   onOpenChange?: (open: boolean) => void;
@@ -46,7 +52,6 @@ interface AppointmentFormProps {
 
 export function AppointmentForm({
   appointment,
-  patients,
   onSubmit,
   onDelete,
   onOpenChange,
@@ -54,6 +59,9 @@ export function AppointmentForm({
 }: AppointmentFormProps) {
   const { user } = useAuth();
   const inputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
+  const [prefillPatient, setPrefillPatient] = useState<Patient | null>(null);
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       inputRef.current?.focus();
@@ -82,23 +90,6 @@ export function AppointmentForm({
     color: colorMap[staff.name] || "bg-gray-400",
   }));
 
-  function parseLocalDate(dateString: string): Date {
-    const parts = dateString.split("-");
-    if (parts.length !== 3) {
-      return new Date();
-    }
-    const year = parseInt(parts[0] ?? "", 10);
-    const month = parseInt(parts[1] ?? "", 10);
-    const day = parseInt(parts[2] ?? "", 10);
-
-    if (isNaN(year) || isNaN(month) || isNaN(day)) {
-      return new Date();
-    }
-
-    // Create date at UTC midnight instead of local midnight
-    return new Date(year, month - 1, day);
-  }
-
   // Get the stored data from session storage
   const storedDataString = sessionStorage.getItem("newAppointmentData");
   let parsedStoredData = null;
@@ -169,50 +160,159 @@ export function AppointmentForm({
     defaultValues,
   });
 
-  const [searchTerm, setSearchTerm] = useState("");
+  // -----------------------------
-  const [debouncedSearchTerm] = useDebounce(searchTerm, 200); // 1 seconds
+  // PATIENT SEARCH (reuse PatientSearch)
-  const [filteredPatients, setFilteredPatients] = useState(patients);
+  // -----------------------------
+  const [selectOpen, setSelectOpen] = useState(false);
 
-  useEffect(() => {
+  // search criteria state (reused from patient page)
-    if (!debouncedSearchTerm.trim()) {
+  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
-      setFilteredPatients(patients);
+    null
+  );
+  const [isSearchActive, setIsSearchActive] = useState(false);
+
+  // debounce search criteria so we don't hammer the backend
+  const [debouncedSearchCriteria] = useDebounce(searchCriteria, 300);
+
+  const limit = 50; // dropdown size
+  const offset = 0; // always first page for dropdown
+
+  // compute key used in patient page: recent or trimmed term
+  const searchKeyPart = useMemo(
+    () => debouncedSearchCriteria?.searchTerm?.trim() || "recent",
+    [debouncedSearchCriteria]
+  );
+
+  // Query function mirrors PatientTable logic (so backend contract is identical)
+  const queryFn = async (): Promise<Patient[]> => {
+    const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
+    const isSearch = !!trimmedTerm && trimmedTerm.length > 0;
+    const rawSearchBy = debouncedSearchCriteria?.searchBy || "name";
+    const validSearchKeys = [
+      "name",
+      "phone",
+      "insuranceId",
+      "gender",
+      "dob",
+      "all",
+    ];
+    const searchKey = validSearchKeys.includes(rawSearchBy)
+      ? rawSearchBy
+      : "name";
+
+    let url: string;
+    if (isSearch) {
+      const searchParams = new URLSearchParams({
+        limit: String(limit),
+        offset: String(offset),
+      });
+
+      if (searchKey === "all") {
+        searchParams.set("term", trimmedTerm!);
+      } else {
+        searchParams.set(searchKey, trimmedTerm!);
+      }
+
+      url = `/api/patients/search?${searchParams.toString()}`;
     } else {
-      const term = debouncedSearchTerm.toLowerCase();
+      url = `/api/patients/recent?limit=${limit}&offset=${offset}`;
-      setFilteredPatients(
-        patients.filter((p) =>
-          `${p.firstName} ${p.lastName} ${p.phone} ${p.dateOfBirth}`
-            .toLowerCase()
-            .includes(term)
-        )
-      );
     }
-  }, [debouncedSearchTerm, patients]);
+
+    const res = await apiRequest("GET", url);
+
+    if (!res.ok) {
+      const err = await res
+        .json()
+        .catch(() => ({ message: "Failed to fetch patients" }));
+      throw new Error(err.message || "Failed to fetch patients");
+    }
+
+    const payload = await res.json();
+    // Expect payload to be { patients: Patient[], totalCount: number } or just an array.
+    // Normalize: if payload.patients exists, return it; otherwise assume array of patients.
+    return Array.isArray(payload) ? payload : (payload.patients ?? []);
+  };
+
+  const {
+    data: patients = [],
+    isFetching: isFetchingPatients,
+    refetch: refetchPatients,
+  } = useQuery<Patient[], Error>({
+    queryKey: ["patients-dropdown", searchKeyPart],
+    queryFn,
+    enabled: selectOpen || !!debouncedSearchCriteria?.searchTerm,
+  });
+
+  // If select opened and no patients loaded, fetch
+  useEffect(() => {
+    if (selectOpen && (!patients || patients.length === 0)) {
+      refetchPatients();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectOpen]);
 
   // Force form field values to update and clean up storage
   useEffect(() => {
-    if (parsedStoredData) {
+    if (!parsedStoredData) return;
-      // Update form field values directly
-      if (parsedStoredData.startTime) {
-        form.setValue("startTime", parsedStoredData.startTime);
-      }
 
-      if (parsedStoredData.endTime) {
+    // set times/staff/date as before
-        form.setValue("endTime", parsedStoredData.endTime);
+    if (parsedStoredData.startTime)
-      }
+      form.setValue("startTime", parsedStoredData.startTime);
+    if (parsedStoredData.endTime)
+      form.setValue("endTime", parsedStoredData.endTime);
+    if (parsedStoredData.staff)
+      form.setValue("staffId", parsedStoredData.staff);
+    if (parsedStoredData.date) {
+      const parsedDate =
+        typeof parsedStoredData.date === "string"
+          ? parseLocalDate(parsedStoredData.date)
+          : new Date(parsedStoredData.date);
+      form.setValue("date", parsedDate);
+    }
 
-      if (parsedStoredData.staff) {
+    // ---- patient prefill: check main cache, else fetch once ----
-        form.setValue("staffId", parsedStoredData.staff);
+    if (parsedStoredData.patientId) {
-      }
+      const pid = Number(parsedStoredData.patientId);
+      if (!Number.isNaN(pid)) {
+        // ensure the form value is set
+        form.setValue("patientId", pid);
 
-      if (parsedStoredData.date) {
+        // fetch single patient record (preferred)
-        const parsedDate =
+        (async () => {
-          typeof parsedStoredData.date === "string"
+          try {
-            ? parseLocalDate(parsedStoredData.date)
+            const res = await apiRequest("GET", `/api/patients/${pid}`);
-            : new Date(parsedStoredData.date);
+            if (res.ok) {
-        form.setValue("date", parsedDate);
+              const patientRecord = await res.json();
+              setPrefillPatient(patientRecord);
+            } else {
+              // non-OK response: show toast with status / message
+              let msg = `Failed to load patient (status ${res.status})`;
+              try {
+                const body = await res.json().catch(() => null);
+                if (body && body.message) msg = body.message;
+              } catch {}
+              toast({
+                title: "Could not load patient",
+                description: msg,
+                variant: "destructive",
+              });
+            }
+          } catch (err) {
+            toast({
+              title: "Error fetching patient",
+              description:
+                (err as Error)?.message ||
+                "An unknown error occurred while fetching patient details.",
+              variant: "destructive",
+            });
+          } finally {
+            // remove the one-time transport
+            sessionStorage.removeItem("newAppointmentData");
+          }
+        })();
       }
-
+    } else {
-      // Clean up session storage
+      // no patientId in storage — still remove to avoid stale state
       sessionStorage.removeItem("newAppointmentData");
     }
   }, [form]);
@@ -224,12 +324,6 @@ export function AppointmentForm({
         ? parseInt(data.patientId, 10)
         : data.patientId;
 
-    // Get patient name for the title
-    const patient = patients.find((p) => p.id === patientId);
-    const patientName = patient
-      ? `${patient.firstName} ${patient.lastName}`
-      : "Patient";
-
     // Auto-create title if it's empty
     let title = data.title;
     if (!title || title.trim() === "") {
@@ -289,41 +383,109 @@ export function AppointmentForm({
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Patient</FormLabel>
+
                 <Select
                   disabled={isLoading}
-                  onValueChange={(val) => field.onChange(Number(val))}
+                  onOpenChange={(open: boolean) => {
-                  value={field.value?.toString()}
+                    setSelectOpen(open);
-                  defaultValue={field.value?.toString()}
+                    if (!open) {
+                      // reset transient search state when the dropdown closes
+                      setSearchCriteria(null);
+                      setIsSearchActive(false);
+
+                      // Remove transient prefill if the main cached list contains it now
+                      if (
+                        prefillPatient &&
+                        patients &&
+                        patients.some(
+                          (p) => Number(p.id) === Number(prefillPatient.id)
+                        )
+                      ) {
+                        setPrefillPatient(null);
+                      }
+                    } else {
+                      // when opened, ensure initial results
+                      if (!patients || patients.length === 0) refetchPatients();
+                    }
+                  }}
+                  value={
+                    field.value == null || // null or undefined
+                    (typeof field.value === "number" &&
+                      !Number.isFinite(field.value)) || // NaN/Infinity
+                    (typeof field.value === "string" &&
+                      field.value.trim() === "") || // empty string
+                    field.value === "NaN" // defensive check
+                      ? ""
+                      : String(field.value)
+                  }
+                  onValueChange={(val) =>
+                    field.onChange(val === "" ? undefined : Number(val))
+                  }
                 >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Select a patient" />
                     </SelectTrigger>
                   </FormControl>
+
                   <SelectContent>
+                    {/* Reuse full PatientSearch UI inside dropdown — callbacks update the query */}
                     <div className="p-2" onKeyDown={(e) => e.stopPropagation()}>
-                      <Input
+                      <PatientSearch
-                        ref={inputRef}
+                        onSearch={(criteria) => {
-                        placeholder="Search patients..."
+                          setSearchCriteria(criteria);
-                        className="w-full"
+                          setIsSearchActive(true);
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        onKeyDown={(e) => {
-                          const navKeys = ["ArrowDown", "ArrowUp", "Enter"];
-                          if (!navKeys.includes(e.key)) {
-                            e.stopPropagation(); // Only stop keys that affect select state
-                          }
                         }}
+                        onClearSearch={() => {
+                          setSearchCriteria({
+                            searchTerm: "",
+                            searchBy: "name",
+                          });
+                          setIsSearchActive(false);
+                        }}
+                        isSearchActive={isSearchActive}
                       />
                     </div>
+
+                    {/* Prefill patient only if main list does not already include them */}
+                    {prefillPatient &&
+                      !patients.some(
+                        (p) => Number(p.id) === Number(prefillPatient.id)
+                      ) && (
+                        <SelectItem
+                          key={`prefill-${prefillPatient.id}`}
+                          value={prefillPatient.id?.toString() ?? ""}
+                        >
+                          <div className="flex flex-col items-start">
+                            <span className="font-medium">
+                              {prefillPatient.firstName}{" "}
+                              {prefillPatient.lastName}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              DOB:{" "}
+                              {prefillPatient.dateOfBirth
+                                ? new Date(
+                                    prefillPatient.dateOfBirth
+                                  ).toLocaleDateString()
+                                : ""}{" "}
+                              • {prefillPatient.phone ?? ""}
+                            </span>
+                          </div>
+                        </SelectItem>
+                      )}
+
                     <div className="max-h-60 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30">
-                      {filteredPatients.length > 0 ? (
+                      {isFetchingPatients ? (
-                        filteredPatients.map((patient) => (
+                        <div className="p-2 text-sm text-muted-foreground">
+                          Loading...
+                        </div>
+                      ) : patients && patients.length > 0 ? (
+                        patients.map((patient) => (
                           <SelectItem
                             key={patient.id}
                             value={patient.id?.toString() ?? ""}
                           >
-                            <div className="flex flex-col">
+                            <div className="flex flex-col items-start">
                               <span className="font-medium">
                                 {patient.firstName} {patient.lastName}
                               </span>
@@ -345,6 +507,7 @@ export function AppointmentForm({
                     </div>
                   </SelectContent>
                 </Select>
+
                 <FormMessage />
               </FormItem>
             )}

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

@@ -1,169 +0,0 @@
-import { format } from "date-fns";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  MoreHorizontal,
-  Edit,
-  Trash2,
-  Eye,
-  Calendar,
-  Clock,
-} from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Appointment, Patient } from "@repo/db/types";
-
-interface AppointmentTableProps {
-  appointments: Appointment[];
-  patients: Patient[];
-  onEdit: (appointment: Appointment) => void;
-  onDelete: (id: number) => void;
-}
-
-export function AppointmentTable({
-  appointments,
-  patients,
-  onEdit,
-  onDelete,
-}: AppointmentTableProps) {
-  // Helper function to get patient name
-  const getPatientName = (patientId: number) => {
-    const patient = patients.find((p) => p.id === patientId);
-    return patient
-      ? `${patient.firstName} ${patient.lastName}`
-      : "Unknown Patient";
-  };
-
-  // Helper function to get status badge
-  const getStatusBadge = (status: string) => {
-    const statusConfig: Record<
-      string,
-      {
-        variant:
-          | "default"
-          | "secondary"
-          | "destructive"
-          | "outline"
-          | "success";
-        label: string;
-      }
-    > = {
-      scheduled: { variant: "default", label: "Scheduled" },
-      confirmed: { variant: "secondary", label: "Confirmed" },
-      completed: { variant: "success", label: "Completed" },
-      cancelled: { variant: "destructive", label: "Cancelled" },
-      "no-show": { variant: "outline", label: "No Show" },
-    };
-
-    const config = statusConfig[status] || {
-      variant: "default",
-      label: status,
-    };
-
-    return <Badge variant={config.variant as any}>{config.label}</Badge>;
-  };
-
-  // Sort appointments by date and time (newest first)
-  const sortedAppointments = [...appointments].sort((a, b) => {
-    const dateComparison =
-      new Date(b.date).getTime() - new Date(a.date).getTime();
-    if (dateComparison !== 0) return dateComparison;
-    return a.startTime.toString().localeCompare(b.startTime.toString());
-  });
-
-  return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Patient</TableHead>
-            <TableHead>Date</TableHead>
-            <TableHead>Time</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {sortedAppointments.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={6} className="h-24 text-center">
-                No appointments found.
-              </TableCell>
-            </TableRow>
-          ) : (
-            sortedAppointments.map((appointment) => (
-              <TableRow key={appointment.id}>
-                <TableCell className="font-medium">
-                  {getPatientName(appointment.patientId)}
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center">
-                    <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
-                    {format(new Date(appointment.date), "MMM d, yyyy")}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center">
-                    <Clock className="mr-2 h-4 w-4 text-muted-foreground" />
-                    {appointment.startTime.slice(0, 5)} -{" "}
-                    {appointment.endTime.slice(0, 5)}
-                  </div>
-                </TableCell>
-                <TableCell className="capitalize">
-                  {appointment.type.replace("-", " ")}
-                </TableCell>
-                <TableCell>{getStatusBadge(appointment.status!)}</TableCell>
-                <TableCell className="text-right">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem onClick={() => onEdit(appointment)}>
-                        <Edit className="mr-2 h-4 w-4" />
-                        Edit
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem
-                        onClick={() => {
-                          if (typeof appointment.id === "number") {
-                            onDelete(appointment.id);
-                          } else {
-                            console.error("Invalid appointment ID");
-                          }
-                        }}
-                        className="text-destructive focus:text-destructive"
-                      >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

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

@@ -1,7 +1,11 @@
 import { useState, useEffect } from "react";
 import { useQuery, useMutation, keepPreviousData } from "@tanstack/react-query";
-import { format, addDays, startOfToday, addMinutes } from "date-fns";
+import { addDays, startOfToday, addMinutes } from "date-fns";
-import { parseLocalDate, formatLocalDate } from "@/utils/dateUtils";
+import {
+  parseLocalDate,
+  formatLocalDate,
+  formatLocalTime,
+} from "@/utils/dateUtils";
 import { AddAppointmentModal } from "@/components/appointments/add-appointment-modal";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,7 +13,6 @@ import {
   Plus,
   ChevronLeft,
   ChevronRight,
-  RefreshCw,
   Move,
   Trash2,
 } from "lucide-react";
@@ -65,6 +68,12 @@ interface ScheduledAppointment {
 // Define a unique ID for the appointment context menu
 const APPOINTMENT_CONTEXT_MENU_ID = "appointment-context-menu";
 
+// 🔑 exported base key
+export const QK_APPOINTMENTS_BASE = ["appointments", "day"] as const;
+// helper (optional) – mirrors the query key structure
+export const qkAppointmentsDay = (date: string) =>
+  [...QK_APPOINTMENTS_BASE, date] as const;
+
 export default function AppointmentsPage() {
   const { toast } = useToast();
   const { user } = useAuth();
@@ -77,7 +86,6 @@ export default function AppointmentsPage() {
   const [confirmDeleteState, setConfirmDeleteState] = useState<{
     open: boolean;
     appointmentId?: number;
-    appointmentTitle?: string;
   }>({ open: false });
 
   // Create context menu hook
@@ -85,6 +93,42 @@ export default function AppointmentsPage() {
     id: APPOINTMENT_CONTEXT_MENU_ID,
   });
 
+  // ----------------------
+  // Day-level fetch: appointments + patients for selectedDate (lightweight)
+  // ----------------------
+  const formattedSelectedDate = formatLocalDate(selectedDate);
+  type DayPayload = { appointments: Appointment[]; patients: Patient[] };
+  const {
+    data: dayPayload = {
+      appointments: [] as Appointment[],
+      patients: [] as Patient[],
+    },
+    isLoading: isLoadingAppointments,
+    refetch: refetchAppointments,
+  } = useQuery<
+    DayPayload,
+    Error,
+    DayPayload,
+    readonly [string, string, string]
+  >({
+    queryKey: qkAppointmentsDay(formattedSelectedDate),
+    queryFn: async () => {
+      const res = await apiRequest(
+        "GET",
+        `/api/appointments/day?date=${formattedSelectedDate}`
+      );
+      if (!res.ok) {
+        throw new Error("Failed to load appointments for date");
+      }
+      return res.json();
+    },
+    enabled: !!user && !!formattedSelectedDate,
+    // placeholderData: keepPreviousData,
+  });
+
+  const appointments = dayPayload.appointments ?? [];
+  const patientsFromDay = dayPayload.patients ?? [];
+
   // Staff memebers
   const { data: staffMembersRaw = [] as Staff[] } = useQuery<Staff[]>({
     queryKey: ["/api/staffs/"],
@@ -123,150 +167,61 @@ export default function AppointmentsPage() {
     }
   }
 
-  // ----------------------
-  // Day-level fetch: appointments + patients for selectedDate (lightweight)
-  // ----------------------
-  const formattedSelectedDate = formatLocalDate(selectedDate);
-  type DayPayload = { appointments: Appointment[]; patients: Patient[] };
-  const queryKey = ["appointments", "day", formattedSelectedDate] as const;
-
-  const {
-    data: dayPayload = {
-      appointments: [] as Appointment[],
-      patients: [] as Patient[],
-    },
-    isLoading: isLoadingAppointments,
-    refetch: refetchAppointments,
-  } = useQuery<
-    DayPayload,
-    Error,
-    DayPayload,
-    readonly [string, string, string]
-  >({
-    queryKey,
-    queryFn: async () => {
-      const res = await apiRequest(
-        "GET",
-        `/api/appointments/day?date=${formattedSelectedDate}`
-      );
-      if (!res.ok) {
-        throw new Error("Failed to load appointments for date");
-      }
-      return res.json();
-    },
-    enabled: !!user && !!formattedSelectedDate,
-    placeholderData: keepPreviousData,
-  });
-
-  const appointments = dayPayload.appointments ?? [];
-  const patientsFromDay = dayPayload.patients ?? [];
-
-  // Fetch patients (needed for the dropdowns)
-  const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
-    Patient[]
-  >({
-    queryKey: ["/api/patients/"],
-    queryFn: async () => {
-      const res = await apiRequest("GET", "/api/patients/");
-      return res.json();
-    },
-    enabled: !!user,
-  });
-
-  // Handle creating a new appointment at a specific time slot and for a specific staff member
-  const handleCreateAppointmentAtSlot = (
-    timeSlot: TimeSlot,
-    staffId: number
-  ) => {
-    // Calculate end time (30 minutes after start time)
-    const startHour = parseInt(timeSlot.time.split(":")[0] as string);
-    const startMinute = parseInt(timeSlot.time.split(":")[1] as string);
-    const startDate = parseLocalDate(selectedDate);
-    startDate.setHours(startHour, startMinute, 0);
-
-    const endDate = addMinutes(startDate, 30);
-    const endTime = `${endDate.getHours().toString().padStart(2, "0")}:${endDate.getMinutes().toString().padStart(2, "0")}`;
-
-    // Find staff member
-    const staff = staffMembers.find((s) => Number(s.id) === Number(staffId));
-
-    // Pre-fill appointment form with default values
-    const newAppointment = {
-      date: format(selectedDate, "yyyy-MM-dd"),
-      startTime: timeSlot.time, // This is in "HH:MM" format
-      endTime: endTime,
-      type: staff?.role === "doctor" ? "checkup" : "cleaning",
-      status: "scheduled",
-      title: `Appointment with ${staff?.name}`, // Add staff name in title for easier display
-      notes: `Appointment with ${staff?.name}`, // Store staff info in notes for processing
-      staff: staffId, // This matches the 'staff' field in the appointment form schema
-    };
-
-    // For new appointments, set editingAppointment to undefined
-    // This will ensure we go to the "create" branch in handleAppointmentSubmit
-    setEditingAppointment(undefined);
-
-    // But still pass the pre-filled data to the modal
-    setIsAddModalOpen(true);
-
-    // Store the prefilled values in state or sessionStorage to access in the modal
-    // Clear any existing data first to ensure we're not using old data
-    sessionStorage.removeItem("newAppointmentData");
-    sessionStorage.setItem(
-      "newAppointmentData",
-      JSON.stringify(newAppointment)
-    );
-  };
-
   // Check for newPatient parameter in URL
   useEffect(() => {
-    if (patients.length === 0 || !user) return;
-
     // Parse URL search params to check for newPatient
     const params = new URLSearchParams(window.location.search);
     const newPatientId = params.get("newPatient");
 
     if (newPatientId) {
       const patientId = parseInt(newPatientId);
-      // Find the patient in our list
+      // Choose first available staff safely (fallback to 1 if none)
-      const patient = (patients as Patient[]).find((p) => p.id === patientId);
+      const firstStaff =
-
+        staffMembers && staffMembers.length > 0 ? staffMembers[0] : undefined;
-      if (patient) {
+      const staffId = firstStaff ? Number(firstStaff.id) : 1;
+      // Find first time slot today (9:00 AM is a common starting time)
+      const defaultTimeSlot =
+        timeSlots.find((slot) => slot.time === "09:00") || timeSlots[0];
+      if (!defaultTimeSlot) {
         toast({
-          title: "Patient Added",
+          title: "Unable to schedule",
-          description: `${patient.firstName} ${patient.lastName} was added successfully. You can now schedule an appointment.`,
+          description:
+            "No available time slots to schedule the new patient right now.",
+          variant: "destructive",
         });
-
+        return;
-        // Select first available staff member
-        const staffId = staffMembers[0]!.id;
-
-        // Find first time slot today (9:00 AM is a common starting time)
-        const defaultTimeSlot =
-          timeSlots.find((slot) => slot.time === "09:00") || timeSlots[0];
-
-        // Open appointment modal with prefilled patient
-        handleCreateAppointmentAtSlot(defaultTimeSlot!, Number(staffId));
-
-        // Pre-select the patient in the appointment form
-        const patientData = {
-          patientId: patient.id,
-        };
-
-        // Store info in session storage for the modal to pick up
-        const existingData = sessionStorage.getItem("newAppointmentData");
-        if (existingData) {
-          const parsedData = JSON.parse(existingData);
-          sessionStorage.setItem(
-            "newAppointmentData",
-            JSON.stringify({
-              ...parsedData,
-              ...patientData,
-            })
-          );
-        }
       }
+
+      // Merge any existing "newAppointmentData" with the patient info BEFORE opening modal
+      try {
+        const existingRaw = sessionStorage.getItem("newAppointmentData");
+        const existing = existingRaw ? JSON.parse(existingRaw) : {};
+        const newAppointmentData = {
+          ...existing,
+          patientId: patientId,
+        };
+        sessionStorage.setItem(
+          "newAppointmentData",
+          JSON.stringify(newAppointmentData)
+        );
+      } catch (err) {
+        // If sessionStorage parsing fails, overwrite with a fresh object
+        sessionStorage.setItem(
+          "newAppointmentData",
+          JSON.stringify({ patientId: patientId })
+        );
+      }
+
+      // Open/create the appointment modal (will read sessionStorage in the modal)
+      handleCreateAppointmentAtSlot(defaultTimeSlot, Number(staffId));
+
+      // Remove the query param from the URL so this doesn't re-run on navigation/refresh
+      params.delete("newPatient");
+      const newSearch = params.toString();
+      const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ""}${window.location.hash || ""}`;
+      window.history.replaceState({}, "", newUrl);
     }
-  }, [patients, user, location]);
+  }, [location]);
 
   // Create/upsert appointment mutation
   const createAppointmentMutation = useMutation({
@@ -284,8 +239,9 @@ export default function AppointmentsPage() {
         description: "Appointment created successfully.",
       });
       // Invalidate both appointments and patients queries
-      queryClient.invalidateQueries({ queryKey: ["/api/appointments/all"] });
+      queryClient.invalidateQueries({
-      queryClient.invalidateQueries({ queryKey: ["/api/patients/"] });
+        queryKey: qkAppointmentsDay(formattedSelectedDate),
+      });
       setIsAddModalOpen(false);
     },
     onError: (error: Error) => {
@@ -318,8 +274,9 @@ export default function AppointmentsPage() {
         title: "Success",
         description: "Appointment updated successfully.",
       });
-      queryClient.invalidateQueries({ queryKey: ["/api/appointments/all"] });
+      queryClient.invalidateQueries({
-      queryClient.invalidateQueries({ queryKey: ["/api/patients/"] });
+        queryKey: qkAppointmentsDay(formattedSelectedDate),
+      });
       setEditingAppointment(undefined);
       setIsAddModalOpen(false);
     },
@@ -343,8 +300,9 @@ export default function AppointmentsPage() {
         description: "Appointment deleted successfully.",
       });
       // Invalidate both appointments and patients queries
-      queryClient.invalidateQueries({ queryKey: ["/api/appointments/all"] });
+      queryClient.invalidateQueries({
-      queryClient.invalidateQueries({ queryKey: ["/api/patients/"] });
+        queryKey: qkAppointmentsDay(formattedSelectedDate),
+      });
       setConfirmDeleteState({ open: false });
     },
     onError: (error: Error) => {
@@ -402,75 +360,58 @@ export default function AppointmentsPage() {
   };
 
   const handleDeleteAppointment = (id: number) => {
-    const appointment = appointments.find((a) => a.id === id);
-    if (!appointment) return;
-
-    // Find patient by patientId
-    const patient = patients.find((p) => p.id === appointment.patientId);
-
     setConfirmDeleteState({
       open: true,
       appointmentId: id,
-      appointmentTitle: `${patient?.firstName ?? "Appointment"}`,
     });
   };
 
-  // Get formatted date string for display
-
-  const selectedDateAppointments = appointments.filter((appointment) => {
-    const dateObj = parseLocalDate(appointment.date);
-    return formatLocalDate(dateObj) === formatLocalDate(selectedDate);
-  });
-
   // Process appointments for the scheduler view
-  const processedAppointments: ScheduledAppointment[] =
+  const processedAppointments: ScheduledAppointment[] = (
-    selectedDateAppointments.map((apt) => {
+    appointments ?? []
-      // Find patient name
+  ).map((apt) => {
-      const patient = patients.find((p) => p.id === apt.patientId);
+    // Find patient name
-      const patientName = patient
+    const patient = patientsFromDay.find((p) => p.id === apt.patientId);
-        ? `${patient.firstName} ${patient.lastName}`
+    const patientName = patient
-        : "Unknown Patient";
+      ? `${patient.firstName} ${patient.lastName}`
+      : "Unknown Patient";
 
-      let staffId: number;
+    const staffId = Number(apt.staffId ?? 1);
 
-      if (
+    const normalizedStart =
-        staffMembers &&
+      typeof apt.startTime === "string"
-        staffMembers.length > 0 &&
+        ? apt.startTime.substring(0, 5)
-        staffMembers[0] !== undefined &&
+        : formatLocalTime(apt.startTime);
-        staffMembers[0].id !== undefined
+    const normalizedEnd =
-      ) {
+      typeof apt.endTime === "string"
-        staffId = Number(apt.staffId);
+        ? apt.endTime.substring(0, 5)
-      } else {
+        : formatLocalTime(apt.endTime);
-        staffId = 1;
-      }
 
-      const processed = {
+    const processed = {
-        ...apt,
+      ...apt,
-        patientName,
+      patientName,
-        staffId,
+      staffId,
-        status: apt.status ?? null,
+      status: apt.status ?? null,
-        date: formatLocalDate(parseLocalDate(apt.date)),
+      date: formatLocalDate(parseLocalDate(apt.date)),
-      };
+      startTime: normalizedStart,
+      endTime: normalizedEnd,
+    } as ScheduledAppointment;
 
-      return processed;
+    return processed;
-    });
+  });
 
   // Check if appointment exists at a specific time slot and staff
   const getAppointmentAtSlot = (timeSlot: TimeSlot, staffId: number) => {
-    if (processedAppointments.length === 0) {
+    if (!processedAppointments || processedAppointments.length === 0)
       return undefined;
-    }
 
     // In appointments for a given time slot, we'll just display the first one
     // In a real application, you might want to show multiple or stack them
     const appointmentsAtSlot = processedAppointments.filter((apt) => {
-      // Fix time format comparison - the database adds ":00" seconds to the time
       const dbTime =
         typeof apt.startTime === "string" ? apt.startTime.substring(0, 5) : "";
-
       const timeMatches = dbTime === timeSlot.time;
       const staffMatches = apt.staffId === staffId;
-
       return timeMatches && staffMatches;
     });
 
@@ -479,7 +420,6 @@ export default function AppointmentsPage() {
 
   const isLoading =
     isLoadingAppointments ||
-    isLoadingPatients ||
     createAppointmentMutation.isPending ||
     updateAppointmentMutation.isPending ||
     deleteAppointmentMutation.isPending;
@@ -489,6 +429,76 @@ export default function AppointmentsPage() {
     APPOINTMENT: "appointment",
   };
 
+  // Handle creating a new appointment at a specific time slot and for a specific staff member
+  const handleCreateAppointmentAtSlot = (
+    timeSlot: TimeSlot,
+    staffId: number
+  ) => {
+    // Calculate end time (30 minutes after start time)
+    const startHour = parseInt(timeSlot.time.split(":")[0] as string);
+    const startMinute = parseInt(timeSlot.time.split(":")[1] as string);
+    const startDate = parseLocalDate(selectedDate);
+    startDate.setHours(startHour, startMinute, 0);
+
+    const endDate = addMinutes(startDate, 30);
+    const endTime = `${endDate.getHours().toString().padStart(2, "0")}:${endDate.getMinutes().toString().padStart(2, "0")}`;
+
+    // Find staff member
+    const staff = staffMembers.find((s) => Number(s.id) === Number(staffId));
+
+    // Try to read any existing prefill data (may include patientId from the URL handler)
+    let existingStored: any = null;
+    try {
+      const raw = sessionStorage.getItem("newAppointmentData");
+      existingStored = raw ? JSON.parse(raw) : null;
+    } catch (e) {
+      // ignore parse errors and treat as no existing stored data
+      existingStored = null;
+    }
+
+    // Build the prefill appointment object and merge existing stored data
+    const newAppointment = {
+      // base defaults
+      date: formatLocalDate(selectedDate),
+      startTime: timeSlot.time, // This is in "HH:MM" format
+      endTime: endTime,
+      type: staff?.role === "doctor" ? "checkup" : "cleaning",
+      status: "scheduled",
+      title: `Appointment with ${staff?.name}`,
+      notes: `Appointment with ${staff?.name}`,
+      staff: Number(staffId), // consistent field name that matches update mutation
+      // if existingStored has patientId (or other fields) merge them below
+      ...(existingStored || {}),
+    };
+
+    // Ensure explicit values from this function override stale values from storage
+    // (for example, prefer current slot and staff)
+    const mergedAppointment = {
+      ...newAppointment,
+      date: newAppointment.date,
+      startTime: newAppointment.startTime,
+      endTime: newAppointment.endTime,
+      staff: Number(staffId),
+    };
+
+    // Persist merged prefill so the modal/form can read it
+    try {
+      sessionStorage.setItem(
+        "newAppointmentData",
+        JSON.stringify(mergedAppointment)
+      );
+    } catch (e) {
+      // ignore sessionStorage write failures
+      console.error("Failed to write newAppointmentData to sessionStorage", e);
+    }
+
+    // For new appointments, set editingAppointment to undefined
+    setEditingAppointment(undefined);
+
+    // Open modal
+    setIsAddModalOpen(true);
+  };
+
   // Handle moving an appointment to a new time slot and staff
   const handleMoveAppointment = (
     appointmentId: number,
@@ -781,65 +791,6 @@ export default function AppointmentsPage() {
                 />
               </CardContent>
             </Card>
-
-            {/* Statistics Card */}
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center justify-between">
-                  <span>Appointments</span>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => refetchAppointments()}
-                  >
-                    <RefreshCw className="h-4 w-4" />
-                  </Button>
-                </CardTitle>
-                <CardDescription>
-                  Statistics for {formattedSelectedDate}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-2">
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-500">
-                      Total appointments:
-                    </span>
-                    <span className="font-semibold">
-                      {selectedDateAppointments.length}
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-500">With doctors:</span>
-                    <span className="font-semibold">
-                      {
-                        processedAppointments.filter(
-                          (apt) =>
-                            staffMembers.find(
-                              (s) => Number(s.id) === apt.staffId
-                            )?.role === "doctor"
-                        ).length
-                      }
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-500">
-                      With hygienists:
-                    </span>
-                    <span className="font-semibold">
-                      {
-                        processedAppointments.filter(
-                          (apt) =>
-                            staffMembers.find(
-                              (s) => Number(s.id) === apt.staffId
-                            )?.role === "hygienist"
-                        ).length
-                      }
-                    </span>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
           </div>
         </div>
       </div>
@@ -854,7 +805,6 @@ export default function AppointmentsPage() {
           updateAppointmentMutation.isPending
         }
         appointment={editingAppointment}
-        patients={patients}
         onDelete={handleDeleteAppointment}
       />
 
@@ -862,7 +812,7 @@ export default function AppointmentsPage() {
         isOpen={confirmDeleteState.open}
         onConfirm={handleConfirmDelete}
         onCancel={() => setConfirmDeleteState({ open: false })}
-        entityName={confirmDeleteState.appointmentTitle}
+        entityName={String(confirmDeleteState.appointmentId)}
       />
     </div>
   );

apps/Frontend/src/utils/dateUtils.ts

@@ -139,3 +139,59 @@ export function convertOCRDate(input: string | number | null | undefined): Date
 
   return new Date(year, month, day);
 }
+
+
+/**
+ * Format a Date or date string into "HH:mm" (24-hour) string.
+ *
+ * Options:
+ * - By default, hours/minutes are taken in local time.
+ * - Pass { asUTC: true } to format using UTC hours/minutes.
+ *
+ * Examples:
+ *   formatLocalTime(new Date(2025, 6, 15, 9, 5))       → "09:05"
+ *   formatLocalTime("2025-07-15")                      → "00:00"
+ *   formatLocalTime("2025-07-15T14:30:00Z")            → "20:30" (in +06:00)
+ *   formatLocalTime("2025-07-15T14:30:00Z", { asUTC:true }) → "14:30"
+ */
+export function formatLocalTime(
+  d: Date | string | undefined,
+  opts: { asUTC?: boolean } = {}
+): string {
+  if (!d) return "";
+
+  const { asUTC = false } = opts;
+  const pad2 = (n: number) => n.toString().padStart(2, "0");
+
+  let dateObj: Date;
+
+  if (d instanceof Date) {
+    if (isNaN(d.getTime())) return "";
+    dateObj = d;
+  } else if (typeof d === "string") {
+    const raw = d.trim();
+    const isDateOnly = /^\d{4}-\d{2}-\d{2}$/.test(raw);
+
+    if (isDateOnly) {
+      // Parse yyyy-MM-dd safely as local midnight
+      try {
+        dateObj = parseLocalDate(raw);
+      } catch {
+        dateObj = new Date(raw); // fallback
+      }
+    } else {
+      // For full ISO/timestamp strings, let Date handle TZ
+      dateObj = new Date(raw);
+    }
+
+    if (isNaN(dateObj.getTime())) return "";
+  } else {
+    return "";
+  }
+
+  const hours = asUTC ? dateObj.getUTCHours() : dateObj.getHours();
+  const minutes = asUTC ? dateObj.getUTCMinutes() : dateObj.getMinutes();
+
+  return `${pad2(hours)}:${pad2(minutes)}`;
+}
+