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

fix: resolve appointment form validation and socket connection issues

Browse Source 
- Fix status enum in browser.ts (uppercase → lowercase values)
- Fix date validation (z.string → z.coerce.date) so form accepts Date objects
- Add missing type/userId/title fields to browser.ts appointment schema
- Replace nested PatientSearch Select with simple inline Input to fix patient selection
- Fix mutationFn to throw on non-ok responses so backend errors surface correctly
- Connect socket.io directly to backend (port 5000) instead of Vite proxy to fix AggregateError on startup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gitead
2026-04-23 23:30:08 -04:00
parent 4f8a211bf1
commit a279a3e7c1
5 changed files with 287 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
@@ -35,10 +35,6 @@ import {
} from "@repo/db/types";
import { DateInputField } from "@/components/ui/dateInputField";
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
import {
PatientSearch,
SearchCriteria,
} from "@/components/patients/patient-search";
import { toast } from "@/hooks/use-toast";
interface AppointmentFormProps {
@@ -152,75 +148,26 @@ export function AppointmentForm({
});
// -----------------------------
// PATIENT SEARCH (reuse PatientSearch)
// PATIENT SEARCH (simple inline search)
// -----------------------------
const [selectOpen, setSelectOpen] = useState(false);
const [patientSearchTerm, setPatientSearchTerm] = useState("");
const [debouncedPatientSearch] = useDebounce(patientSearchTerm, 300);
// search criteria state (reused from patient page)
const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
null
);
const [isSearchActive, setIsSearchActive] = useState(false);
const searchKeyPart = debouncedPatientSearch.trim() || "recent";
// 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 {
url = `/api/patients/recent?limit=${limit}&offset=${offset}`;
}
const trimmed = debouncedPatientSearch.trim();
const url = trimmed
? `/api/patients/search?name=${encodeURIComponent(trimmed)}&limit=50&offset=0`
: `/api/patients/recent?limit=50&offset=0`;
const res = await apiRequest("GET", url);
if (!res.ok) {
const err = await res
.json()
.catch(() => ({ message: "Failed to fetch patients" }));
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 ?? []);
};
@@ -231,12 +178,11 @@ export function AppointmentForm({
} = useQuery<Patient[], Error>({
queryKey: ["patients-dropdown", searchKeyPart],
queryFn,
enabled: selectOpen || !!debouncedSearchCriteria?.searchTerm,
enabled: selectOpen || debouncedPatientSearch.trim().length > 0,
});
// If select opened and no patients loaded, fetch
useEffect(() => {
if (selectOpen && (!patients || patients.length === 0)) {
if (selectOpen && patients.length === 0) {
refetchPatients();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -418,11 +364,7 @@ export function AppointmentForm({
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
setPatientSearchTerm("");
if (
prefillPatient &&
patients &&
@@ -433,7 +375,6 @@ export function AppointmentForm({
setPrefillPatient(null);
}
} else {
// when opened, ensure initial results
if (!patients || patients.length === 0) refetchPatients();
}
}}
@@ -458,21 +399,12 @@ export function AppointmentForm({
</FormControl>
<SelectContent>
{/* Reuse full PatientSearch UI inside dropdown — callbacks update the query */}
<div className="p-2" onKeyDown={(e) => e.stopPropagation()}>
<PatientSearch
onSearch={(criteria) => {
setSearchCriteria(criteria);
setIsSearchActive(true);
}}
onClearSearch={() => {
setSearchCriteria({
searchTerm: "",
searchBy: "name",
});
setIsSearchActive(false);
}}
isSearchActive={isSearchActive}
<Input
placeholder="Search by name..."
value={patientSearchTerm}
onChange={(e) => setPatientSearchTerm(e.target.value)}
onClick={(e) => e.stopPropagation()}
/>
</div>