Gitead/DentalManagement2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Potenz
2025-09-13 04:08:00 +05:30
parent ed3d291084
commit 8f67483fb9
5 changed files with 498 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);

321
apps/Frontend/src/components/appointments/appointment-form.tsx
View File

@@ -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
const [filteredPatients, setFilteredPatients] = useState(patients);
// -----------------------------
// PATIENT SEARCH (reuse PatientSearch)
// -----------------------------
const [selectOpen, setSelectOpen] = useState(false);
useEffect(() => {
if (!debouncedSearchTerm.trim()) {
setFilteredPatients(patients);
// search criteria state (reused from patient page)
const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
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();
setFilteredPatients(
patients.filter((p) =>
`${p.firstName} ${p.lastName} ${p.phone} ${p.dateOfBirth}`
.toLowerCase()
.includes(term)
)
);
url = `/api/patients/recent?limit=${limit}&offset=${offset}`;
}
}, [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) {
// Update form field values directly
if (parsedStoredData.startTime) {
form.setValue("startTime", parsedStoredData.startTime);
}
if (!parsedStoredData) return;
if (parsedStoredData.endTime) {
form.setValue("endTime", parsedStoredData.endTime);
}
// set times/staff/date as before
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) {
form.setValue("staffId", parsedStoredData.staff);
}
// ---- patient prefill: check main cache, else fetch once ----
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) {
const parsedDate =
typeof parsedStoredData.date === "string"
? parseLocalDate(parsedStoredData.date)
: new Date(parsedStoredData.date);
form.setValue("date", parsedDate);
// fetch single patient record (preferred)
(async () => {
try {
const res = await apiRequest("GET", `/api/patients/${pid}`);
if (res.ok) {
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");
}
})();
}
// Clean up session storage
} else {
// 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))}
value={field.value?.toString()}
defaultValue={field.value?.toString()}
onOpenChange={(open: boolean) => {
setSelectOpen(open);
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
ref={inputRef}
placeholder="Search patients..."
className="w-full"
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
}
<PatientSearch
onSearch={(criteria) => {
setSearchCriteria(criteria);
setIsSearchActive(true);
}}
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 ? (
filteredPatients.map((patient) => (
{isFetchingPatients ? (
<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>
)}

169
apps/Frontend/src/components/appointments/appointment-table.tsx
View File

@@ -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>
);
}