From ed3d29108431903e16c324a30efa4f6c4c20f655 Mon Sep 17 00:00:00 2001 From: Potenz Date: Fri, 12 Sep 2025 02:51:47 +0530 Subject: [PATCH 1/4] feat(optimised query) - main route setup and updated at page --- apps/Backend/src/routes/appointments.ts | 94 +++++++++++-------- apps/Backend/src/storage/index.ts | 83 +++++++++------- apps/Frontend/src/pages/appointments-page.tsx | 75 +++++++++------ 3 files changed, 150 insertions(+), 102 deletions(-) diff --git a/apps/Backend/src/routes/appointments.ts b/apps/Backend/src/routes/appointments.ts index f910f44..72e34c4 100644 --- a/apps/Backend/src/routes/appointments.ts +++ b/apps/Backend/src/routes/appointments.ts @@ -20,6 +20,62 @@ router.get("/all", async (req: Request, res: Response): Promise => { } }); +/** + * GET /api/appointments/day?date=YYYY-MM-DD + * Response: { appointments: Appointment[], patients: Patient[] } + */ +router.get("/day", async (req: Request, res: Response): Promise => { + function isValidYMD(s: string) { + return /^\d{4}-\d{2}-\d{2}$/.test(s); + } + + try { + const rawDate = req.query.date as string | undefined; + if (!rawDate || !isValidYMD(rawDate)) { + return res.status(400).json({ message: "Date query param is required." }); + } + if (!req.user) return res.status(401).json({ message: "Unauthorized" }); + + // Build literal UTC day bounds from the YYYY-MM-DD query string + const start = new Date(`${rawDate}T00:00:00.000Z`); + const end = new Date(`${rawDate}T23:59:59.999Z`); + + if (isNaN(start.getTime()) || isNaN(end.getTime())) { + return res.status(400).json({ message: "Invalid date format" }); + } + + // Call the storage method that takes a start/end range (no change to storage needed) + const appointments = await storage.getAppointmentsOnRange(start, end); + + // dedupe patient ids referenced by those appointments + const patientIds = Array.from( + new Set(appointments.map((a) => a.patientId).filter(Boolean)) + ); + + const patients = patientIds.length + ? await storage.getPatientsByIds(patientIds) + : []; + + return res.json({ appointments, patients }); + } catch (err) { + console.error("Error in /api/appointments/day:", err); + res.status(500).json({ message: "Failed to load appointments for date" }); + } +}); + +// Get recent appointments (paginated) +router.get("/recent", async (req: Request, res: Response) => { + try { + const limit = Math.max(1, parseInt(req.query.limit as string) || 10); + const offset = Math.max(0, parseInt(req.query.offset as string) || 0); + + const all = await storage.getRecentAppointments(limit, offset); + res.json({ data: all, limit, offset }); + } catch (err) { + res.status(500).json({ message: "Failed to get recent appointments" }); + } +}); + // Get a single appointment by ID router.get( "/:id", @@ -75,44 +131,6 @@ router.get( } ); -// Get appointments on a specific date -router.get( - "/appointments/on/:date", - async (req: Request, res: Response): Promise => { - try { - const rawDate = req.params.date; - if (!rawDate) { - return res.status(400).json({ message: "Date parameter is required" }); - } - - const date = new Date(rawDate); - if (isNaN(date.getTime())) { - return res.status(400).json({ message: "Invalid date format" }); - } - - const all = await storage.getAppointmentsOn(date); - const appointments = all.filter((a) => a.userId === req.user!.id); - - res.json(appointments); - } catch (err) { - res.status(500).json({ message: "Failed to get appointments on date" }); - } - } -); - -// Get recent appointments (paginated) -router.get("/appointments/recent", async (req: Request, res: Response) => { - try { - const limit = Math.max(1, parseInt(req.query.limit as string) || 10); - const offset = Math.max(0, parseInt(req.query.offset as string) || 0); - - const all = await storage.getRecentAppointments(limit, offset); - res.json({ data: all, limit, offset }); - } catch (err) { - res.status(500).json({ message: "Failed to get recent appointments" }); - } -}); - // Create a new appointment router.post( "/upsert", diff --git a/apps/Backend/src/storage/index.ts b/apps/Backend/src/storage/index.ts index d5c8670..d806ae4 100644 --- a/apps/Backend/src/storage/index.ts +++ b/apps/Backend/src/storage/index.ts @@ -41,7 +41,7 @@ export interface IStorage { getPatientByInsuranceId(insuranceId: string): Promise; getPatientsByUserId(userId: number): Promise; getRecentPatients(limit: number, offset: number): Promise; - getTotalPatientCount(): Promise; + getPatientsByIds(ids: number[]): Promise; createPatient(patient: InsertPatient): Promise; updatePatient(id: number, patient: UpdatePatient): Promise; deletePatient(id: number): Promise; @@ -62,6 +62,7 @@ export interface IStorage { status: string; }[] >; + getTotalPatientCount(): Promise; countPatients(filters: any): Promise; // optional but useful // Appointment methods @@ -70,7 +71,7 @@ export interface IStorage { getAppointmentsByUserId(userId: number): Promise; getAppointmentsByPatientId(patientId: number): Promise; getRecentAppointments(limit: number, offset: number): Promise; - getAppointmentsOn(date: Date): Promise; + getAppointmentsOnRange(start: Date, end: Date): Promise; createAppointment(appointment: InsertAppointment): Promise; updateAppointment( id: number, @@ -290,6 +291,52 @@ export const storage: IStorage = { }); }, + async getPatientsByIds(ids: number[]): Promise { + if (!ids || ids.length === 0) return []; + const uniqueIds = Array.from(new Set(ids)); + return db.patient.findMany({ + where: { id: { in: uniqueIds } }, + select: { + id: true, + firstName: true, + lastName: true, + phone: true, + email: true, + dateOfBirth: true, + gender: true, + insuranceId: true, + insuranceProvider: true, + status: true, + userId: true, + createdAt: true, + }, + }); + }, + + async createPatient(patient: InsertPatient): Promise { + return await db.patient.create({ data: patient as Patient }); + }, + + async updatePatient(id: number, updateData: UpdatePatient): Promise { + try { + return await db.patient.update({ + where: { id }, + data: updateData, + }); + } catch (err) { + throw new Error(`Patient with ID ${id} not found`); + } + }, + + async deletePatient(id: number): Promise { + try { + await db.patient.delete({ where: { id } }); + } catch (err) { + console.error("Error deleting patient:", err); + throw new Error(`Failed to delete patient: ${err}`); + } + }, + async searchPatients({ filters, limit, @@ -326,30 +373,6 @@ export const storage: IStorage = { return db.patient.count({ where: filters }); }, - async createPatient(patient: InsertPatient): Promise { - return await db.patient.create({ data: patient as Patient }); - }, - - async updatePatient(id: number, updateData: UpdatePatient): Promise { - try { - return await db.patient.update({ - where: { id }, - data: updateData, - }); - } catch (err) { - throw new Error(`Patient with ID ${id} not found`); - } - }, - - async deletePatient(id: number): Promise { - try { - await db.patient.delete({ where: { id } }); - } catch (err) { - console.error("Error deleting patient:", err); - throw new Error(`Failed to delete patient: ${err}`); - } - }, - // Appointment methods async getAppointment(id: number): Promise { const appointment = await db.appointment.findUnique({ where: { id } }); @@ -368,13 +391,7 @@ export const storage: IStorage = { return await db.appointment.findMany({ where: { patientId } }); }, - async getAppointmentsOn(date: Date): Promise { - const start = new Date(date); - start.setHours(0, 0, 0, 0); - - const end = new Date(date); - end.setHours(23, 59, 59, 999); - + async getAppointmentsOnRange(start: Date, end: Date): Promise { return db.appointment.findMany({ where: { date: { diff --git a/apps/Frontend/src/pages/appointments-page.tsx b/apps/Frontend/src/pages/appointments-page.tsx index faacf93..9fe4395 100644 --- a/apps/Frontend/src/pages/appointments-page.tsx +++ b/apps/Frontend/src/pages/appointments-page.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { useQuery, useMutation } from "@tanstack/react-query"; +import { useQuery, useMutation, keepPreviousData } from "@tanstack/react-query"; import { format, addDays, startOfToday, addMinutes } from "date-fns"; import { parseLocalDate, formatLocalDate } from "@/utils/dateUtils"; import { AddAppointmentModal } from "@/components/appointments/add-appointment-modal"; @@ -69,16 +69,10 @@ export default function AppointmentsPage() { const { toast } = useToast(); const { user } = useAuth(); const [isAddModalOpen, setIsAddModalOpen] = useState(false); - const [isClaimModalOpen, setIsClaimModalOpen] = useState(false); - const [claimAppointmentId, setClaimAppointmentId] = useState( - null - ); - const [claimPatientId, setClaimPatientId] = useState(null); const [editingAppointment, setEditingAppointment] = useState< Appointment | undefined >(undefined); const [selectedDate, setSelectedDate] = useState(startOfToday()); - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [location] = useLocation(); const [confirmDeleteState, setConfirmDeleteState] = useState<{ open: boolean; @@ -91,16 +85,15 @@ export default function AppointmentsPage() { id: APPOINTMENT_CONTEXT_MENU_ID, }); - //Fetching staff memebers - const { data: staffMembersRaw = [] as Staff[], isLoading: isLoadingStaff } = - useQuery({ - queryKey: ["/api/staffs/"], - queryFn: async () => { - const res = await apiRequest("GET", "/api/staffs/"); - return res.json(); - }, - enabled: !!user, - }); + // Staff memebers + const { data: staffMembersRaw = [] as Staff[] } = useQuery({ + queryKey: ["/api/staffs/"], + queryFn: async () => { + const res = await apiRequest("GET", "/api/staffs/"); + return res.json(); + }, + enabled: !!user, + }); const colors = [ "bg-blue-600", @@ -130,20 +123,44 @@ export default function AppointmentsPage() { } } - // Fetch appointments + // ---------------------- + // 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: appointments = [] as Appointment[], + data: dayPayload = { + appointments: [] as Appointment[], + patients: [] as Patient[], + }, isLoading: isLoadingAppointments, refetch: refetchAppointments, - } = useQuery({ - queryKey: ["/api/appointments/all"], + } = useQuery< + DayPayload, + Error, + DayPayload, + readonly [string, string, string] + >({ + queryKey, queryFn: async () => { - const res = await apiRequest("GET", "/api/appointments/all"); + 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, + 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[] @@ -344,7 +361,6 @@ export default function AppointmentsPage() { appointmentData: InsertAppointment | UpdateAppointment ) => { // Converts local date to exact UTC date with no offset issues - const rawDate = parseLocalDate(appointmentData.date); const updatedData = { @@ -399,12 +415,7 @@ export default function AppointmentsPage() { }); }; - const toggleMobileMenu = () => { - setIsMobileMenuOpen(!isMobileMenuOpen); - }; - // Get formatted date string for display - const formattedDate = format(selectedDate, "yyyy-MM-dd"); const selectedDateAppointments = appointments.filter((appointment) => { const dateObj = parseLocalDate(appointment.date); @@ -690,7 +701,9 @@ export default function AppointmentsPage() { > -

{formattedDate}

+

+ {formattedSelectedDate} +

- - - Statistics for {formattedSelectedDate} - - - -
-
- - Total appointments: - - - {selectedDateAppointments.length} - -
-
- With doctors: - - { - processedAppointments.filter( - (apt) => - staffMembers.find( - (s) => Number(s.id) === apt.staffId - )?.role === "doctor" - ).length - } - -
-
- - With hygienists: - - - { - processedAppointments.filter( - (apt) => - staffMembers.find( - (s) => Number(s.id) === apt.staffId - )?.role === "hygienist" - ).length - } - -
-
- - @@ -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)} /> ); diff --git a/apps/Frontend/src/utils/dateUtils.ts b/apps/Frontend/src/utils/dateUtils.ts index 8eb6bfa..54e8ab6 100644 --- a/apps/Frontend/src/utils/dateUtils.ts +++ b/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)}`; +} + From 7aa6f6bc6d22e328246eb6c5d59e784e01886ebf Mon Sep 17 00:00:00 2001 From: Potenz Date: Sun, 14 Sep 2025 17:42:10 +0530 Subject: [PATCH 3/4] Info added --- apps/Frontend/src/components/ui/dateInput.tsx | 3 +++ apps/Frontend/src/components/ui/dateInputField.tsx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/apps/Frontend/src/components/ui/dateInput.tsx b/apps/Frontend/src/components/ui/dateInput.tsx index 904d361..5ed2b05 100644 --- a/apps/Frontend/src/components/ui/dateInput.tsx +++ b/apps/Frontend/src/components/ui/dateInput.tsx @@ -19,6 +19,9 @@ interface DateInputProps { disablePast?: boolean; } +// THIS COMPONENT IS MADE FOR GENERAL FIELD IN PAGE. +// Here, User can input/paste date in certain format, and also select via calendar + export function DateInput({ label, value, diff --git a/apps/Frontend/src/components/ui/dateInputField.tsx b/apps/Frontend/src/components/ui/dateInputField.tsx index dcb40fa..3174ec7 100644 --- a/apps/Frontend/src/components/ui/dateInputField.tsx +++ b/apps/Frontend/src/components/ui/dateInputField.tsx @@ -16,6 +16,8 @@ interface DateInputFieldProps { disablePast?: boolean; } +// THIS COMPONENT MADE FOR USING IN FORM FIELD INSIDE ANY FORM CONTROL, NOT AS INPUT FIELD NORMALLY. +// Here, User can input/paste date in certain format, and also select via calendar export function DateInputField({ control, name, From aa3d3cac3a86843a093ee2ebe0de9043d91ba792 Mon Sep 17 00:00:00 2001 From: Potenz Date: Sun, 14 Sep 2025 18:40:35 +0530 Subject: [PATCH 4/4] feat(Calendar UI fixes) - shrink --- .../appointments/appointment-form.tsx | 23 +++-- .../src/components/claims/claim-form.tsx | 32 +++++-- .../components/patients/patient-search.tsx | 32 ++++--- apps/Frontend/src/components/ui/calendar.tsx | 41 ++++++++- apps/Frontend/src/pages/appointments-page.tsx | 85 ++++++++++--------- 5 files changed, 142 insertions(+), 71 deletions(-) diff --git a/apps/Frontend/src/components/appointments/appointment-form.tsx b/apps/Frontend/src/components/appointments/appointment-form.tsx index 4bad01f..b451731 100644 --- a/apps/Frontend/src/components/appointments/appointment-form.tsx +++ b/apps/Frontend/src/components/appointments/appointment-form.tsx @@ -2,7 +2,7 @@ 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, queryClient } from "@/lib/queryClient"; +import { apiRequest } 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, useQueryClient } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { useAuth } from "@/hooks/use-auth"; import { useDebounce } from "use-debounce"; import { @@ -39,7 +39,6 @@ import { PatientSearch, SearchCriteria, } from "@/components/patients/patient-search"; -import { QK_PATIENTS_BASE } from "../patients/patient-table"; import { toast } from "@/hooks/use-toast"; interface AppointmentFormProps { @@ -59,7 +58,6 @@ export function AppointmentForm({ }: AppointmentFormProps) { const { user } = useAuth(); const inputRef = useRef(null); - const queryClient = useQueryClient(); const [prefillPatient, setPrefillPatient] = useState(null); useEffect(() => { @@ -70,15 +68,14 @@ export function AppointmentForm({ return () => clearTimeout(timeout); }, []); - const { data: staffMembersRaw = [] as Staff[], isLoading: isLoadingStaff } = - useQuery({ - queryKey: ["/api/staffs/"], - queryFn: async () => { - const res = await apiRequest("GET", "/api/staffs/"); - return res.json(); - }, - enabled: !!user, - }); + const { data: staffMembersRaw = [] as Staff[] } = useQuery({ + queryKey: ["/api/staffs/"], + queryFn: async () => { + const res = await apiRequest("GET", "/api/staffs/"); + return res.json(); + }, + enabled: !!user, + }); const colorMap: Record = { "Dr. Kai Gao": "bg-blue-600", diff --git a/apps/Frontend/src/components/claims/claim-form.tsx b/apps/Frontend/src/components/claims/claim-form.tsx index 76e8492..c41a564 100644 --- a/apps/Frontend/src/components/claims/claim-form.tsx +++ b/apps/Frontend/src/components/claims/claim-form.tsx @@ -133,6 +133,10 @@ export function ClaimForm({ const [serviceDate, setServiceDate] = useState( formatLocalDate(new Date()) ); + const [serviceDateOpen, setServiceDateOpen] = useState(false); + const [openProcedureDateIndex, setOpenProcedureDateIndex] = useState< + number | null + >(null); // Update service date when calendar date changes const onServiceDateChange = (date: Date | undefined) => { @@ -559,7 +563,10 @@ export function ClaimForm({ {/* Service Date */}
- +
{/* Date Picker */} - + + setOpenProcedureDateIndex(open ? i : null) + } + > + + {/* Top button with popover calendar */} +
+ + + + + + + + { + if (date) setSelectedDate(date); + }} + onClose={() => setCalendarOpen(false)} + /> + + +
@@ -770,28 +799,6 @@ export default function AppointmentsPage() { - - {/* Right side - Calendar and Stats */} -
- {/* Calendar Card */} - - - Calendar - - Select a date to view or schedule appointments - - - - { - if (date) setSelectedDate(date); - }} - /> - - -