search checkpoint 1

2025-07-05 23:49:35 +05:30
parent 015d677c7e
commit 8adb57eb96
5 changed files with 247 additions and 119 deletions
--- a/apps/Frontend/src/components/patients/patient-search.tsx
+++ b/apps/Frontend/src/components/patients/patient-search.tsx
@@ -21,7 +21,7 @@ import {

 export type SearchCriteria = {
  searchTerm: string;
-  searchBy: "name" | "insuranceProvider" | "phone" | "insuranceId" | "all";
+  searchBy: "name" | "insuranceId" | "phone" | "gender" | "dob" | "all";
 };

 interface PatientSearchProps {
@@ -61,7 +61,10 @@ export function PatientSearch({
    setShowAdvanced(false);
  };

-  const updateAdvancedCriteria = (field: keyof SearchCriteria, value: string) => {
+  const updateAdvancedCriteria = (
+    field: keyof SearchCriteria,
+    value: string
+  ) => {
    setAdvancedCriteria({
      ...advancedCriteria,
      [field]: value,
@@ -104,7 +107,9 @@ export function PatientSearch({

        <Select
          value={searchBy}
-          onValueChange={(value) => setSearchBy(value as SearchCriteria["searchBy"])}
+          onValueChange={(value) =>
+            setSearchBy(value as SearchCriteria["searchBy"])
+          }
        >
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Search by..." />
@@ -113,8 +118,9 @@ export function PatientSearch({
            <SelectItem value="all">All Fields</SelectItem>
            <SelectItem value="name">Name</SelectItem>
            <SelectItem value="phone">Phone</SelectItem>
-            <SelectItem value="insuranceProvider">Insurance Provider</SelectItem>
-            <SelectItem value="insuranceId">Insurance ID</SelectItem>
+            <SelectItem value="insuranceId">InsuranceId</SelectItem>
+            <SelectItem value="gender">Gender</SelectItem>
+            <SelectItem value="dob">DOB</SelectItem>
          </SelectContent>
        </Select>

@@ -132,11 +138,16 @@ export function PatientSearch({

            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
-                <label className="text-right text-sm font-medium">Search by</label>
+                <label className="text-right text-sm font-medium">
+                  Search by
+                </label>
                <Select
                  value={advancedCriteria.searchBy}
                  onValueChange={(value) =>
-                    updateAdvancedCriteria("searchBy", value as SearchCriteria["searchBy"])
+                    updateAdvancedCriteria(
+                      "searchBy",
+                      value as SearchCriteria["searchBy"]
+                    )
                  }
                >
                  <SelectTrigger className="col-span-3">
@@ -146,14 +157,17 @@ export function PatientSearch({
                    <SelectItem value="all">All Fields</SelectItem>
                    <SelectItem value="name">Name</SelectItem>
                    <SelectItem value="phone">Phone</SelectItem>
-                    <SelectItem value="insuranceProvider">Insurance Provider</SelectItem>
-                    <SelectItem value="insuranceId">Insurance ID</SelectItem>
+                    <SelectItem value="insuranceId">InsuranceId</SelectItem>
+                    <SelectItem value="gender">Gender</SelectItem>
+                    <SelectItem value="dob">DOB</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="grid grid-cols-4 items-center gap-4">
-                <label className="text-right text-sm font-medium">Search term</label>
+                <label className="text-right text-sm font-medium">
+                  Search term
+                </label>
                <Input
                  className="col-span-3"
                  value={advancedCriteria.searchTerm}
@@ -182,4 +196,4 @@ export function PatientSearch({
      </div>
    </div>
  );
-}
+}
--- a/apps/Frontend/src/components/patients/patient-table.tsx
+++ b/apps/Frontend/src/components/patients/patient-table.tsx
@@ -35,6 +35,8 @@ import {
 import { AddPatientModal } from "./add-patient-modal";
 import { DeleteConfirmationDialog } from "../ui/deleteDialog";
 import { useAuth } from "@/hooks/use-auth";
+import { PatientSearch, SearchCriteria } from "./patient-search";
+import { useDebounce } from "use-debounce";

 const PatientSchema = (
  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
@@ -43,7 +45,6 @@ const PatientSchema = (
 });
 type Patient = z.infer<typeof PatientSchema>;

-
 const updatePatientSchema = (
  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
 )
@@ -56,7 +57,6 @@ const updatePatientSchema = (

 type UpdatePatient = z.infer<typeof updatePatientSchema>;

-
 interface PatientApiResponse {
  patients: Patient[];
  totalCount: number;
@@ -76,7 +76,6 @@ export function PatientTable({
  const { toast } = useToast();
  const { user } = useAuth();

-
  const [isAddPatientOpen, setIsAddPatientOpen] = useState(false);
  const [isViewPatientOpen, setIsViewPatientOpen] = useState(false);
  const [isDeletePatientOpen, setIsDeletePatientOpen] = useState(false);
@@ -88,96 +87,111 @@ export function PatientTable({
  const patientsPerPage = 5;
  const offset = (currentPage - 1) * patientsPerPage;

+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
+    null
+  );
+  const [debouncedSearchCriteria] = useDebounce(searchCriteria, 500);
+
  const {
-    data: patientsData,
-    isLoading,
-    isError,
-  } = useQuery<PatientApiResponse>({
-    queryKey: ["patients", currentPage],
-    queryFn: async () => {
-      const res = await apiRequest(
-        "GET",
-        `/api/patients/recent?limit=${patientsPerPage}&offset=${offset}`
-      );
+  data: patientsData,
+  isLoading,
+  isError,
+} = useQuery<PatientApiResponse>({
+  queryKey: ["patients", currentPage, debouncedSearchCriteria?.searchTerm || "recent"],
+  queryFn: async () => {
+    const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
+    const isSearch = trimmedTerm && trimmedTerm.length > 0;
+
+    const baseUrl = isSearch
+      ? `/api/patients/search?term=${encodeURIComponent(trimmedTerm)}&by=${debouncedSearchCriteria!.searchBy}`
+      : `/api/patients/recent`;
+
+    const hasQueryParams = baseUrl.includes("?");
+    const url = `${baseUrl}${hasQueryParams ? "&" : "?"}limit=${patientsPerPage}&offset=${offset}`;
+
+    const res = await apiRequest("GET", url);
+    return res.json();
+  },
+  placeholderData: {
+    patients: [],
+    totalCount: 0,
+  },
+});
+
+
+
+  // Update patient mutation
+  const updatePatientMutation = useMutation({
+    mutationFn: async ({
+      id,
+      patient,
+    }: {
+      id: number;
+      patient: UpdatePatient;
+    }) => {
+      const res = await apiRequest("PUT", `/api/patients/${id}`, patient);
      return res.json();
    },
-    placeholderData: {
-      patients: [],
-      totalCount: 0,
+    onSuccess: () => {
+      setIsAddPatientOpen(false);
+      queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
+      toast({
+        title: "Success",
+        description: "Patient updated successfully!",
+        variant: "default",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Error",
+        description: `Failed to update patient: ${error.message}`,
+        variant: "destructive",
+      });
    },
  });

-    // Update patient mutation
-    const updatePatientMutation = useMutation({
-      mutationFn: async ({
-        id,
-        patient,
-      }: {
-        id: number;
-        patient: UpdatePatient;
-      }) => {
-        const res = await apiRequest("PUT", `/api/patients/${id}`, patient);
-        return res.json();
-      },
-      onSuccess: () => {
-        setIsAddPatientOpen(false);
-        queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
-        toast({
-          title: "Success",
-          description: "Patient updated successfully!",
-          variant: "default",
-        });
-      },
-      onError: (error) => {
-        toast({
-          title: "Error",
-          description: `Failed to update patient: ${error.message}`,
-          variant: "destructive",
-        });
-      },
-    });
-  
-    const deletePatientMutation = useMutation({
-      mutationFn: async (id: number) => {
-        const res = await apiRequest("DELETE", `/api/patients/${id}`);
-        return;
-      },
-      onSuccess: () => {
-        setIsDeletePatientOpen(false);
-        queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
-        toast({
-          title: "Success",
-          description: "Patient deleted successfully!",
-          variant: "default",
-        });
-      },
-      onError: (error) => {
-        console.log(error);
-        toast({
-          title: "Error",
-          description: `Failed to delete patient: ${error.message}`,
-          variant: "destructive",
-        });
-      },
-    });
-  
-    const handleUpdatePatient = (patient: UpdatePatient & { id?: number }) => {
-      if (currentPatient && user) {
-        const { id, ...sanitizedPatient } = patient;
-        updatePatientMutation.mutate({
-          id: currentPatient.id,
-          patient: sanitizedPatient,
-        });
-      } else {
-        console.error("No current patient or user found for update");
-        toast({
-          title: "Error",
-          description: "Cannot update patient: No patient or user found",
-          variant: "destructive",
-        });
-      }
-    };
-  
+  const deletePatientMutation = useMutation({
+    mutationFn: async (id: number) => {
+      const res = await apiRequest("DELETE", `/api/patients/${id}`);
+      return;
+    },
+    onSuccess: () => {
+      setIsDeletePatientOpen(false);
+      queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
+      toast({
+        title: "Success",
+        description: "Patient deleted successfully!",
+        variant: "default",
+      });
+    },
+    onError: (error) => {
+      console.log(error);
+      toast({
+        title: "Error",
+        description: `Failed to delete patient: ${error.message}`,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleUpdatePatient = (patient: UpdatePatient & { id?: number }) => {
+    if (currentPatient && user) {
+      const { id, ...sanitizedPatient } = patient;
+      updatePatientMutation.mutate({
+        id: currentPatient.id,
+        patient: sanitizedPatient,
+      });
+    } else {
+      console.error("No current patient or user found for update");
+      toast({
+        title: "Error",
+        description: "Cannot update patient: No patient or user found",
+        variant: "destructive",
+      });
+    }
+  };
+
  const handleEditPatient = (patient: Patient) => {
    setCurrentPatient(patient);
    setIsAddPatientOpen(true);
@@ -244,6 +258,19 @@ export function PatientTable({
  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="overflow-x-auto">
+        <PatientSearch
+          onSearch={(criteria) => {
+            setSearchCriteria(criteria);
+            setCurrentPage(1); // reset page on new search
+            setIsSearchActive(true);
+          }}
+          onClearSearch={() => {
+            setSearchCriteria({ searchTerm: "", searchBy: "name" }); // triggers `recent`
+            setCurrentPage(1);
+            setIsSearchActive(false);
+          }}
+          isSearchActive={isSearchActive}
+        />
        <Table>
          <TableHeader>
            <TableRow>
--- a/apps/Frontend/src/pages/patients-page.tsx
+++ b/apps/Frontend/src/pages/patients-page.tsx
@@ -4,10 +4,6 @@ import { TopAppBar } from "@/components/layout/top-app-bar";
 import { Sidebar } from "@/components/layout/sidebar";
 import { PatientTable } from "@/components/patients/patient-table";
 import { AddPatientModal } from "@/components/patients/add-patient-modal";
-import {
-  PatientSearch,
-  SearchCriteria,
-} from "@/components/patients/patient-search";
 import { FileUploadZone } from "@/components/file-upload/file-upload-zone";
 import { Button } from "@/components/ui/button";
 import { Plus, RefreshCw, File, FilePlus } from "lucide-react";
@@ -56,9 +52,6 @@ export default function PatientsPage() {
    undefined
  );
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
-    null
-  );
  const addPatientModalRef = useRef<AddPatientModalRef | null>(null);

  // File upload states
@@ -112,14 +105,6 @@ export default function PatientsPage() {

  const isLoading = addPatientMutation.isPending;

-  // Search handling
-  const handleSearch = (criteria: SearchCriteria) => {
-    setSearchCriteria(criteria);
-  };
-
-  const handleClearSearch = () => {
-    setSearchCriteria(null);
-  };

  // File upload handling
  const handleFileUpload = (file: File) => {
@@ -252,12 +237,6 @@ export default function PatientsPage() {
                </CardDescription>
              </CardHeader>
              <CardContent>
-                <PatientSearch
-                  onSearch={handleSearch}
-                  onClearSearch={handleClearSearch}
-                  isSearchActive={!!searchCriteria}
-                />
-
                <PatientTable
                  allowDelete={true}
                  allowEdit={true}