Adds support for viewing discharged patients of a facility (#7148)

* chore: fix type errors

* Implements Discharged Patients List route

* Add discharged patients view button in facility home

* hide live/discharged switch tab for non state admins

src/Components/Common/components/Menu.tsx

@@ -14,7 +14,7 @@ interface DropdownMenuProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   icon?: JSX.Element | undefined;
-  children: JSX.Element | JSX.Element[];
+  children: ReactNode | ReactNode[];
   disabled?: boolean | undefined;
   className?: string | undefined;
   itemClassName?: string | undefined;

src/Components/Facility/DischargedPatientsList.tsx

@@ -0,0 +1,102 @@
+import { Link, useQueryParams } from "raviger";
+import routes from "../../Redux/api";
+import Page from "../Common/components/Page";
+import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import Loading from "../Common/Loading";
+import { PatientModel } from "../Patient/models";
+import useQuery from "../../Utils/request/useQuery";
+import { debounce } from "lodash-es";
+import SearchInput from "../Form/SearchInput";
+import { formatAge } from "../../Utils/utils";
+import { GENDER_TYPES } from "../../Common/constants";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
+
+const DischargedPatientsList = ({
+  facility_external_id,
+}: {
+  facility_external_id: string;
+}) => {
+  const facilityQuery = useQuery(routes.getAnyFacility, {
+    pathParams: { id: facility_external_id },
+  });
+
+  const [search, setSearch] = useQueryParams();
+
+  return (
+    <Page
+      title="Discharged Patients"
+      crumbsReplacements={{
+        [facility_external_id]: { name: facilityQuery.data?.name },
+      }}
+      options={
+        <SearchInput
+          className="mr-4 w-full max-w-md"
+          placeholder="Search by patient name"
+          name="name"
+          value={search.name}
+          onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
+        />
+      }
+    >
+      <PaginatedList
+        route={routes.listFacilityDischargedPatients}
+        pathParams={{ facility_external_id }}
+        query={search}
+      >
+        {() => (
+          <div className="flex flex-col gap-4 p-4">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+              <span>No dischaged patients present in this facility</span>
+            </PaginatedList.WhenEmpty>
+
+            <PaginatedList.WhenLoading>
+              <Loading />
+            </PaginatedList.WhenLoading>
+
+            <PaginatedList.Items<PatientModel> className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+              {(patient) => (
+                <Link
+                  key={patient.id}
+                  href={`/facility/${facility_external_id}/patient/${patient.id}`}
+                  className="text-black"
+                >
+                  <PatientListItem patient={patient} />
+                </Link>
+              )}
+            </PaginatedList.Items>
+
+            <div className="flex w-full items-center justify-center">
+              <PaginatedList.Paginator hideIfSinglePage />
+            </div>
+          </div>
+        )}
+      </PaginatedList>
+    </Page>
+  );
+};
+
+export default DischargedPatientsList;
+
+const PatientListItem = ({ patient }: { patient: PatientModel }) => {
+  return (
+    <div className="flex rounded-lg border bg-white p-5 shadow hover:ring-1 hover:ring-primary-400">
+      <div className="flex rounded border border-gray-300 bg-gray-50 p-6">
+        <CareIcon icon="l-user-injured" className="text-3xl text-gray-800" />
+      </div>
+      <div className="ml-5 flex flex-col">
+        <h2 className="text-lg font-bold text-black">{patient.name}</h2>
+        <span className="text-sm font-medium text-gray-800">
+          {GENDER_TYPES.find((g) => g.id === patient.gender)?.text} -{" "}
+          {formatAge(patient.age, patient.date_of_birth)}
+        </span>
+        <div className="flex-1" />
+        <RecordMeta
+          className="text-end text-xs text-gray-600"
+          prefix="last updated"
+          time={patient.modified_date}
+        />
+      </div>
+    </div>
+  );
+};

src/Components/Facility/FacilityHome.tsx

@@ -428,6 +428,19 @@ export const FacilityHome = (props: any) => {
                 <CareIcon className="care-l-user-injured text-lg" />
                 <span>View Patients</span>
               </ButtonV2>
+              <ButtonV2
+                id="view-patient-facility-list"
+                variant="primary"
+                ghost
+                border
+                className="mt-2 flex w-full flex-row justify-center md:w-auto"
+                onClick={() =>
+                  navigate(`/facility/${facilityId}/discharged-patients`)
+                }
+              >
+                <CareIcon className="care-l-user-injured text-lg" />
+                <span>View Discharged Patients</span>
+              </ButtonV2>
             </div>
           </div>
         </div>

src/Components/Patient/ManagePatients.tsx

@@ -751,13 +751,16 @@ export const PatientManager = () => {
             </ButtonV2>
           </div>
           <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
-            <SwitchTabs
-              tab1="Live"
-              tab2="Discharged"
-              onClickTab1={() => updateQuery({ is_active: "True" })}
-              onClickTab2={() => updateQuery({ is_active: "False" })}
-              isTab2Active={tabValue ? true : false}
-            />
+            {(authUser.user_type === "StateAdmin" ||
+              authUser.user_type === "StateReadOnlyAdmin") && (
+              <SwitchTabs
+                tab1="Live"
+                tab2="Discharged"
+                onClickTab1={() => updateQuery({ is_active: "True" })}
+                onClickTab2={() => updateQuery({ is_active: "False" })}
+                isTab2Active={tabValue ? true : false}
+              />
+            )}
             {showDoctorConnect && (
               <ButtonV2
                 id="doctor-connect-patient-button"

src/Redux/api.tsx

@@ -929,8 +929,13 @@ const routes = {
     path: "/api/v1/consultation/{id}/discharge_patient/",
     method: "POST",
   },
-  //Profile
+  listFacilityDischargedPatients: {
+    path: "/api/v1/facility/{facility_external_id}/discharged_patients/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<PatientModel>>(),
+  },
 
+  //Profile
   checkUsername: {
     path: "/api/v1/users/{username}/check_availability/",
     method: "GET",

src/Routers/routes/FacilityRoutes.tsx

@@ -8,6 +8,7 @@ import ResourceCreate from "../../Components/Resource/ResourceCreate";
 import CentralNursingStation from "../../Components/Facility/CentralNursingStation";
 import FacilityLocationRoutes from "./FacilityLocationRoutes";
 import FacilityInventoryRoutes from "./FacilityInventoryRoutes";
+import DischargedPatientsList from "../../Components/Facility/DischargedPatientsList";
 
 export default {
   "/facility": () => <HospitalList />,
@@ -24,6 +25,9 @@ export default {
   "/facility/:facilityId": ({ facilityId }: any) => (
     <FacilityHome facilityId={facilityId} />
   ),
+  "/facility/:id/discharged-patients": ({ id }: any) => (
+    <DischargedPatientsList facility_external_id={id} />
+  ),
 
   "/facility/:facilityId/users": ({ facilityId }: any) => (
     <FacilityUsers facilityId={facilityId} />