From e2a638b7350d4f25f04e1b89f55b5de4b1a581b2 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 30 Apr 2024 17:58:30 +0530
Subject: [PATCH 1/6] updated discharged patients page

---
 src/CAREUI/misc/PaginatedList.tsx             |  12 +-
 .../Facility/DischargedPatientsList.tsx       | 136 +++-
 src/Components/Patient/PatientFilter.tsx      | 691 +++++++++---------
 3 files changed, 500 insertions(+), 339 deletions(-)

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index db68c6f042..ec270bf813 100644
--- a/src/CAREUI/misc/PaginatedList.tsx
+++ b/src/CAREUI/misc/PaginatedList.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { PaginatedResponse, QueryRoute } from "../../Utils/request/types";
 import useQuery, { QueryOptions } from "../../Utils/request/useQuery";
 import ButtonV2, {
@@ -33,6 +33,9 @@ function useContextualized<TItem>() {
 interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
+  queryCB?: (
+    query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>,
+  ) => void;
   children: (
     ctx: PaginatedListContext<TItem>,
     query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>,
@@ -43,6 +46,7 @@ export default function PaginatedList<TItem extends object>({
   children,
   route,
   perPage = DEFAULT_PER_PAGE_LIMIT,
+  queryCB,
   ...queryOptions
 }: Props<TItem>) {
   const [currentPage, setPage] = useState(1);
@@ -57,6 +61,12 @@ export default function PaginatedList<TItem extends object>({
 
   const items = query.data?.results ?? [];
 
+  useEffect(() => {
+    if (queryCB) {
+      queryCB(query);
+    }
+  }, [query]);
+
   return (
     <context.Provider
       value={{ ...query, items, perPage, currentPage, setPage }}
diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index bdd0a0a649..4c36a34139 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -5,7 +5,6 @@ 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 {
   DISCHARGED_PATIENT_SORT_OPTIONS,
@@ -18,6 +17,12 @@ import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import SortDropdownMenu from "../Common/SortDropdown";
 import useFilters from "../../Common/hooks/useFilters";
+import PatientFilter from "../Patient/PatientFilter";
+import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
+import CountBlock from "../../CAREUI/display/Count";
+import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
+import { useState } from "react";
 
 const DischargedPatientsList = ({
   facility_external_id,
@@ -29,7 +34,66 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const { qParams, updateQuery, FilterBadges } = useFilters({});
+  const { qParams, updateQuery, advancedFilter, FilterBadges } = useFilters({
+    limit: 12,
+    cacheBlacklist: [
+      "name",
+      "patient_no",
+      "phone_number",
+      "emergency_phone_number",
+    ],
+  });
+
+  const queryField = <T,>(name: string, defaultValue?: T) => {
+    return {
+      name,
+      value: qParams[name] || defaultValue,
+      onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
+      className: "grow w-full mb-2",
+    };
+  };
+
+  const [phone_number, setPhoneNumber] = useState("");
+  const [phoneNumberError, setPhoneNumberError] = useState("");
+  const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
+  const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
+    useState("");
+  const [count, setCount] = useState(0);
+
+  const setPhoneNum = (phone_number: string) => {
+    setPhoneNumber(phone_number);
+    if (phone_number.length >= 13) {
+      setPhoneNumberError("");
+      updateQuery({ phone_number });
+      return;
+    }
+
+    if (phone_number === "+91" || phone_number === "") {
+      setPhoneNumberError("");
+      qParams.phone_number && updateQuery({ phone_number: null });
+      return;
+    }
+
+    setPhoneNumberError("Enter a valid number");
+  };
+
+  const setEmergencyPhoneNum = (emergency_phone_number: string) => {
+    setEmergencyPhoneNumber(emergency_phone_number);
+    if (emergency_phone_number.length >= 13) {
+      setEmergencyPhoneNumberError("");
+      updateQuery({ emergency_phone_number });
+      return;
+    }
+
+    if (emergency_phone_number === "+91" || emergency_phone_number === "") {
+      setEmergencyPhoneNumberError("");
+      qParams.emergency_phone_number &&
+        updateQuery({ emergency_phone_number: null });
+      return;
+    }
+
+    setEmergencyPhoneNumberError("Enter a valid number");
+  };
 
   return (
     <Page
@@ -39,13 +103,6 @@ const DischargedPatientsList = ({
       }}
       options={
         <>
-          <SearchInput
-            className="mr-4 w-full max-w-sm"
-            placeholder="Search by patient name"
-            name="name"
-            value={qParams.name}
-            onChange={debounce((e) => updateQuery({ name: e.value }))}
-          />
           <div className="flex flex-col gap-4 md:flex-row">
             <SwitchTabs
               tab1="Live"
@@ -54,6 +111,9 @@ const DischargedPatientsList = ({
               onClickTab1={() => navigate("/patients")}
               isTab2Active
             />
+            <AdvancedFilterButton
+              onClick={() => advancedFilter.setShow(true)}
+            />
             <SortDropdownMenu
               options={DISCHARGED_PATIENT_SORT_OPTIONS}
               selected={qParams.ordering}
@@ -63,6 +123,54 @@ const DischargedPatientsList = ({
         </>
       }
     >
+      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 px-2 sm:grid-cols-4 md:px-0">
+        <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
+          <div className="flex-1">
+            <CountBlock
+              text="Discharged Patients"
+              count={count}
+              loading={facilityQuery.loading}
+              icon="l-user-injured"
+              className="pb-12"
+            />
+          </div>
+        </div>
+        <div className="col-span-3 w-full">
+          <div className="col-span-2 mt-2">
+            <div className="mt-1 md:flex md:gap-4">
+              <SearchInput
+                label="Search by Patient"
+                placeholder="Enter patient name"
+                {...queryField("name")}
+              />
+              <SearchInput
+                label="Search by IP/OP Number"
+                placeholder="Enter IP/OP Number"
+                secondary
+                {...queryField("patient_no")}
+              />
+            </div>
+            <div className="md:flex md:gap-4">
+              <PhoneNumberFormField
+                label="Search by Primary Number"
+                {...queryField("phone_number", "+91")}
+                value={phone_number}
+                onChange={(e) => setPhoneNum(e.value)}
+                error={phoneNumberError}
+                types={["mobile", "landline"]}
+              />
+              <PhoneNumberFormField
+                label="Search by Emergency Number"
+                {...queryField("emergency_phone_number", "+91")}
+                value={emergency_phone_number}
+                onChange={(e) => setEmergencyPhoneNum(e.value)}
+                error={emergencyPhoneNumberError}
+                types={["mobile", "landline"]}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="col-span-3 mt-6 flex flex-wrap">
         <FilterBadges badges={({ ordering }) => [ordering()]} />
       </div>
@@ -70,9 +178,12 @@ const DischargedPatientsList = ({
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}
+        queryCB={(query) => {
+          setCount(query.data?.count || 0);
+        }}
       >
         {() => (
-          <div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">
+          <div className="flex flex-col gap-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>{t("discharged_patients_empty")}</span>
             </PaginatedList.WhenEmpty>
@@ -99,6 +210,11 @@ const DischargedPatientsList = ({
           </div>
         )}
       </PaginatedList>
+      <PatientFilter
+        {...advancedFilter}
+        key={window.location.search}
+        discharged
+      />
     </Page>
   );
 };
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index 79a0424217..efbdc09d0d 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -318,17 +318,23 @@ export default function PatientFilter(props: any) {
               onChange={(v) => setFilterState({ ...filterState, gender: v })}
             />
           </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Category</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={PATIENT_FILTER_CATEGORIES}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.id}
-              value={filterState.category}
-              onChange={(v) => setFilterState({ ...filterState, category: v })}
-            />
-          </div>
+          {!props.discharged && (
+            <>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">Category</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={PATIENT_FILTER_CATEGORIES}
+                  optionLabel={(o) => o.text}
+                  optionValue={(o) => o.id}
+                  value={filterState.category}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, category: v })
+                  }
+                />
+              </div>
+            </>
+          )}
           <div className="w-full flex-none">
             <FieldLabel className="text-sm">Age</FieldLabel>
             <div className="flex justify-between gap-4">
@@ -360,72 +366,81 @@ export default function PatientFilter(props: any) {
               />
             </div>
           </div>
-          <div className="w-full flex-none" id="bed-type-select">
-            <FieldLabel className="text-sm">Admitted to (Bed Types)</FieldLabel>
-            <MultiSelectMenuV2
-              id="last_consultation_admitted_bed_type_list"
-              placeholder="Select bed types"
-              options={ADMITTED_TO}
-              value={filterState.last_consultation_admitted_bed_type_list}
-              optionValue={(o) => o.id}
-              optionLabel={(o) => o.text}
-              onChange={(o) =>
-                setFilterState({
-                  ...filterState,
-                  last_consultation_admitted_bed_type_list: o,
-                })
-              }
-            />
-          </div>
-          <div className="w-full flex-none" id="discharge-reason-select">
-            <FieldLabel className="text-sm">Discharge Reason</FieldLabel>
-            <SelectMenuV2
-              id="last_consultation__new_discharge_reason"
-              placeholder="Select discharge reason"
-              options={DISCHARGE_REASONS}
-              value={filterState.last_consultation__new_discharge_reason}
-              optionValue={(o) => o.id}
-              optionLabel={(o) => o.text}
-              onChange={(o) =>
-                setFilterState({
-                  ...filterState,
-                  last_consultation__new_discharge_reason: o,
-                })
-              }
-            />
-          </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Telemedicine</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={TELEMEDICINE_FILTER}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.id}
-              value={filterState.last_consultation_is_telemedicine}
-              onChange={(v) =>
-                setFilterState({
-                  ...filterState,
-                  last_consultation_is_telemedicine: v,
-                })
-              }
-            />
-          </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Respiratory Support</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={RESPIRATORY_SUPPORT_FILTER}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.id}
-              value={filterState.ventilator_interface}
-              onChange={(v) =>
-                setFilterState({
-                  ...filterState,
-                  ventilator_interface: v,
-                })
-              }
-            />
-          </div>
+          {!props.discharged && (
+            <>
+              <div className="w-full flex-none" id="bed-type-select">
+                <FieldLabel className="text-sm">
+                  Admitted to (Bed Types)
+                </FieldLabel>
+                <MultiSelectMenuV2
+                  id="last_consultation_admitted_bed_type_list"
+                  placeholder="Select bed types"
+                  options={ADMITTED_TO}
+                  value={filterState.last_consultation_admitted_bed_type_list}
+                  optionValue={(o) => o.id}
+                  optionLabel={(o) => o.text}
+                  onChange={(o) =>
+                    setFilterState({
+                      ...filterState,
+                      last_consultation_admitted_bed_type_list: o,
+                    })
+                  }
+                />
+              </div>
+
+              <div className="w-full flex-none" id="discharge-reason-select">
+                <FieldLabel className="text-sm">Discharge Reason</FieldLabel>
+                <SelectMenuV2
+                  id="last_consultation__new_discharge_reason"
+                  placeholder="Select discharge reason"
+                  options={DISCHARGE_REASONS}
+                  value={filterState.last_consultation__new_discharge_reason}
+                  optionValue={(o) => o.id}
+                  optionLabel={(o) => o.text}
+                  onChange={(o) =>
+                    setFilterState({
+                      ...filterState,
+                      last_consultation__new_discharge_reason: o,
+                    })
+                  }
+                />
+              </div>
+
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">Telemedicine</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={TELEMEDICINE_FILTER}
+                  optionLabel={(o) => o.text}
+                  optionValue={(o) => o.id}
+                  value={filterState.last_consultation_is_telemedicine}
+                  onChange={(v) =>
+                    setFilterState({
+                      ...filterState,
+                      last_consultation_is_telemedicine: v,
+                    })
+                  }
+                />
+              </div>
+
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">Respiratory Support</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={RESPIRATORY_SUPPORT_FILTER}
+                  optionLabel={(o) => o.text}
+                  optionValue={(o) => o.id}
+                  value={filterState.ventilator_interface}
+                  onChange={(v) =>
+                    setFilterState({
+                      ...filterState,
+                      ventilator_interface: v,
+                    })
+                  }
+                />
+              </div>
+            </>
+          )}
           <div className="w-full flex-none">
             <FieldLabel className="text-sm">Is Antenatal</FieldLabel>
             <SelectMenuV2
@@ -440,55 +455,65 @@ export default function PatientFilter(props: any) {
               }
             />
           </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Review Missed</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={["true", "false"]}
-              optionLabel={(o) => (o === "true" ? "Yes" : "No")}
-              value={filterState.review_missed}
-              onChange={(v) =>
-                setFilterState({ ...filterState, review_missed: v })
-              }
-            />
-          </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Is Medico-Legal Case</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={["true", "false"]}
-              optionLabel={(o) =>
-                o === "true" ? "Medico-Legal" : "Non-Medico-Legal"
-              }
-              value={filterState.last_consultation_medico_legal_case}
-              onChange={(v) =>
-                setFilterState({
-                  ...filterState,
-                  last_consultation_medico_legal_case: v,
-                })
-              }
-            />
-          </div>
+          {!props.discharged && (
+            <>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">Review Missed</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={["true", "false"]}
+                  optionLabel={(o) => (o === "true" ? "Yes" : "No")}
+                  value={filterState.review_missed}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, review_missed: v })
+                  }
+                />
+              </div>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">
+                  Is Medico-Legal Case
+                </FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={["true", "false"]}
+                  optionLabel={(o) =>
+                    o === "true" ? "Medico-Legal" : "Non-Medico-Legal"
+                  }
+                  value={filterState.last_consultation_medico_legal_case}
+                  onChange={(v) =>
+                    setFilterState({
+                      ...filterState,
+                      last_consultation_medico_legal_case: v,
+                    })
+                  }
+                />
+              </div>
+            </>
+          )}
         </div>
       </AccordionV2>
-      <AccordionV2
-        title={
-          <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
-            ICD-11 Diagnoses based
-          </h1>
-        }
-        expanded
-        className="w-full"
-      >
-        {FILTER_BY_DIAGNOSES_KEYS.map((name) => (
-          <DiagnosesFilter
-            key={name}
-            name={name}
-            value={filterState[name]}
-            onChange={handleFormFieldChange}
-          />
-        ))}
-      </AccordionV2>
+      {!props.discharged && (
+        <>
+          <AccordionV2
+            title={
+              <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
+                ICD-11 Diagnoses based
+              </h1>
+            }
+            expanded
+            className="w-full"
+          >
+            {FILTER_BY_DIAGNOSES_KEYS.map((name) => (
+              <DiagnosesFilter
+                key={name}
+                name={name}
+                value={filterState[name]}
+                onChange={handleFormFieldChange}
+              />
+            ))}
+          </AccordionV2>
+        </>
+      )}
       <AccordionV2
         title={
           <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
@@ -564,217 +589,227 @@ export default function PatientFilter(props: any) {
           />
         </div>
       </AccordionV2>
-      <AccordionV2
-        title={
-          <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
-            Geography based
-          </h1>
-        }
-        expanded={true}
-        className="rounded-md"
-      >
-        <div className="space-y-4">
-          <div>
-            <FieldLabel className="text-sm">Facility</FieldLabel>
-            <FacilitySelect
-              multiple={false}
-              name="facility"
-              showAll={false}
-              selected={filterState.facility_ref}
-              setSelected={(obj) => setFilterWithRef("facility", obj)}
-            />
-          </div>
-          {filterState.facility && (
-            <div>
-              <FieldLabel className="text-sm">Location</FieldLabel>
-              <LocationSelect
-                name="facility"
-                errorClassName="hidden"
-                selected={filterState.last_consultation_current_bed__location}
-                multiple={false}
-                facilityId={filterState.facility}
-                setSelected={(selected) =>
-                  setFilterState({
-                    ...filterState,
-                    last_consultation_current_bed__location: selected,
-                  })
-                }
-              />
-            </div>
-          )}
-          <div>
-            <FieldLabel className="text-sm">Facility type</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={FACILITY_TYPES}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.text}
-              value={filterState.facility_type}
-              onChange={(v) =>
-                setFilterState({ ...filterState, facility_type: v })
-              }
-              optionIcon={() => (
-                <CareIcon icon="l-hospital" className="text-lg" />
+      {!props.discharged && (
+        <>
+          <AccordionV2
+            title={
+              <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
+                Geography based
+              </h1>
+            }
+            expanded={true}
+            className="rounded-md"
+          >
+            <div className="space-y-4">
+              <div>
+                <FieldLabel className="text-sm">Facility</FieldLabel>
+                <FacilitySelect
+                  multiple={false}
+                  name="facility"
+                  showAll={false}
+                  selected={filterState.facility_ref}
+                  setSelected={(obj) => setFilterWithRef("facility", obj)}
+                />
+              </div>
+              {filterState.facility && (
+                <div>
+                  <FieldLabel className="text-sm">Location</FieldLabel>
+                  <LocationSelect
+                    name="facility"
+                    errorClassName="hidden"
+                    selected={
+                      filterState.last_consultation_current_bed__location
+                    }
+                    multiple={false}
+                    facilityId={filterState.facility}
+                    setSelected={(selected) =>
+                      setFilterState({
+                        ...filterState,
+                        last_consultation_current_bed__location: selected,
+                      })
+                    }
+                  />
+                </div>
               )}
-            />
-          </div>
-          <div>
-            <FieldLabel className="text-sm">LSG Body</FieldLabel>
-            <div className="">
-              <AutoCompleteAsync
-                name="lsg_body"
-                selected={filterState.lsgBody_ref}
-                fetchData={lsgSearch}
-                onChange={(obj) => setFilterWithRef("lsgBody", obj)}
-                optionLabel={(option) => option.name}
-                compareBy="id"
-              />
-            </div>
-          </div>
+              <div>
+                <FieldLabel className="text-sm">Facility type</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={FACILITY_TYPES}
+                  optionLabel={(o) => o.text}
+                  optionValue={(o) => o.text}
+                  value={filterState.facility_type}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, facility_type: v })
+                  }
+                  optionIcon={() => (
+                    <CareIcon icon="l-hospital" className="text-lg" />
+                  )}
+                />
+              </div>
+              <div>
+                <FieldLabel className="text-sm">LSG Body</FieldLabel>
+                <div className="">
+                  <AutoCompleteAsync
+                    name="lsg_body"
+                    selected={filterState.lsgBody_ref}
+                    fetchData={lsgSearch}
+                    onChange={(obj) => setFilterWithRef("lsgBody", obj)}
+                    optionLabel={(option) => option.name}
+                    compareBy="id"
+                  />
+                </div>
+              </div>
 
-          <div>
-            <FieldLabel className="text-sm">District</FieldLabel>
-            <DistrictSelect
-              multiple={false}
-              name="district"
-              selected={filterState.district_ref}
-              setSelected={(obj) => setFilterWithRef("district", obj)}
-              errors={""}
-            />
-          </div>
-        </div>
-      </AccordionV2>
-      <AccordionV2
-        title={
-          <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
-            COVID Details based
-          </h1>
-        }
-        expanded={false}
-        className="w-full rounded-md"
-      >
-        <div className="grid w-full grid-cols-1 gap-4">
-          {kasp_enabled && (
-            <div className="w-full flex-none">
-              <FieldLabel className="text-sm">{kasp_string}</FieldLabel>
-              <SelectMenuV2
-                placeholder="Show all"
-                options={[true, false]}
-                optionLabel={(o) =>
-                  o ? `Show ${kasp_string}` : `Show Non ${kasp_string}`
-                }
-                value={filterState.is_kasp}
-                onChange={(v) => setFilterState({ ...filterState, is_kasp: v })}
-              />
+              <div>
+                <FieldLabel className="text-sm">District</FieldLabel>
+                <DistrictSelect
+                  multiple={false}
+                  name="district"
+                  selected={filterState.district_ref}
+                  setSelected={(obj) => setFilterWithRef("district", obj)}
+                  errors={""}
+                />
+              </div>
             </div>
-          )}
-
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">COVID Disease status</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={DISEASE_STATUS}
-              optionLabel={(o) => o}
-              value={filterState.disease_status}
-              onChange={(v) =>
-                setFilterState({ ...filterState, disease_status: v })
-              }
-            />
-          </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">COVID Vaccinated</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={VACCINATED_FILTER}
-              optionLabel={({ text }) => text}
-              optionValue={({ id }) => id}
-              optionIcon={({ id }) => (
-                <>
-                  <CareIcon icon="l-syringe" className="mr-2 w-5" />
-                  <span className="font-bold">{id}</span>
-                </>
+          </AccordionV2>
+          <AccordionV2
+            title={
+              <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
+                COVID Details based
+              </h1>
+            }
+            expanded={false}
+            className="w-full rounded-md"
+          >
+            <div className="grid w-full grid-cols-1 gap-4">
+              {kasp_enabled && (
+                <div className="w-full flex-none">
+                  <FieldLabel className="text-sm">{kasp_string}</FieldLabel>
+                  <SelectMenuV2
+                    placeholder="Show all"
+                    options={[true, false]}
+                    optionLabel={(o) =>
+                      o ? `Show ${kasp_string}` : `Show Non ${kasp_string}`
+                    }
+                    value={filterState.is_kasp}
+                    onChange={(v) =>
+                      setFilterState({ ...filterState, is_kasp: v })
+                    }
+                  />
+                </div>
               )}
-              value={filterState.number_of_doses}
-              onChange={(v) =>
-                setFilterState({ ...filterState, number_of_doses: v })
-              }
-            />
-          </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">
-              Declared as COVID Positive
-            </FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={DECLARED_FILTER}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.id}
-              value={filterState.is_declared_positive}
-              onChange={(v) =>
-                setFilterState({ ...filterState, is_declared_positive: v })
-              }
-            />
-          </div>
 
-          <div className="w-full flex-none">
-            <TextFormField
-              id="srf_id"
-              name="srf_id"
-              placeholder="Filter by SRF ID"
-              label={<span className="text-sm">SRF ID</span>}
-              value={filterState.srf_id}
-              onChange={handleFormFieldChange}
-              errorClassName="hidden"
-            />
-          </div>
-          <div className="w-full flex-none">
-            <TextFormField
-              id="covin_id"
-              name="covin_id"
-              placeholder="Filter by COWIN ID"
-              label={<span className="text-sm">CoWIN ID</span>}
-              value={filterState.covin_id}
-              onChange={handleFormFieldChange}
-              errorClassName="hidden"
-            />
-          </div>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">
+                  COVID Disease status
+                </FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={DISEASE_STATUS}
+                  optionLabel={(o) => o}
+                  value={filterState.disease_status}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, disease_status: v })
+                  }
+                />
+              </div>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">COVID Vaccinated</FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={VACCINATED_FILTER}
+                  optionLabel={({ text }) => text}
+                  optionValue={({ id }) => id}
+                  optionIcon={({ id }) => (
+                    <>
+                      <CareIcon icon="l-syringe" className="mr-2 w-5" />
+                      <span className="font-bold">{id}</span>
+                    </>
+                  )}
+                  value={filterState.number_of_doses}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, number_of_doses: v })
+                  }
+                />
+              </div>
+              <div className="w-full flex-none">
+                <FieldLabel className="text-sm">
+                  Declared as COVID Positive
+                </FieldLabel>
+                <SelectMenuV2
+                  placeholder="Show all"
+                  options={DECLARED_FILTER}
+                  optionLabel={(o) => o.text}
+                  optionValue={(o) => o.id}
+                  value={filterState.is_declared_positive}
+                  onChange={(v) =>
+                    setFilterState({ ...filterState, is_declared_positive: v })
+                  }
+                />
+              </div>
 
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="date_of_result"
-            label="Date of result of COVID Test"
-            value={{
-              start: getDate(filterState.date_of_result_after),
-              end: getDate(filterState.date_of_result_before),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="date_declared_positive"
-            label="Date declared COVID positive"
-            value={{
-              start: getDate(filterState.date_declared_positive_after),
-              end: getDate(filterState.date_declared_positive_before),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
+              <div className="w-full flex-none">
+                <TextFormField
+                  id="srf_id"
+                  name="srf_id"
+                  placeholder="Filter by SRF ID"
+                  label={<span className="text-sm">SRF ID</span>}
+                  value={filterState.srf_id}
+                  onChange={handleFormFieldChange}
+                  errorClassName="hidden"
+                />
+              </div>
+              <div className="w-full flex-none">
+                <TextFormField
+                  id="covin_id"
+                  name="covin_id"
+                  placeholder="Filter by COWIN ID"
+                  label={<span className="text-sm">CoWIN ID</span>}
+                  value={filterState.covin_id}
+                  onChange={handleFormFieldChange}
+                  errorClassName="hidden"
+                />
+              </div>
 
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="last_vaccinated_date"
-            label="Date of COVID Vaccination"
-            value={{
-              start: getDate(filterState.last_vaccinated_date_after),
-              end: getDate(filterState.last_vaccinated_date_before),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
-        </div>
-      </AccordionV2>
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="date_of_result"
+                label="Date of result of COVID Test"
+                value={{
+                  start: getDate(filterState.date_of_result_after),
+                  end: getDate(filterState.date_of_result_before),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="date_declared_positive"
+                label="Date declared COVID positive"
+                value={{
+                  start: getDate(filterState.date_declared_positive_after),
+                  end: getDate(filterState.date_declared_positive_before),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="last_vaccinated_date"
+                label="Date of COVID Vaccination"
+                value={{
+                  start: getDate(filterState.last_vaccinated_date_after),
+                  end: getDate(filterState.last_vaccinated_date_before),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+            </div>
+          </AccordionV2>
+        </>
+      )}
     </FiltersSlideover>
   );
 }

From 6828c5e9589f994cd21fb4567f15aa4c84f67799 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 30 Apr 2024 18:07:20 +0530
Subject: [PATCH 2/6] fixed filter badges

---
 .../Facility/DischargedPatientsList.tsx       | 45 +++++++++-
 src/Components/Patient/PatientFilter.tsx      | 90 ++++++++++---------
 2 files changed, 93 insertions(+), 42 deletions(-)

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 4c36a34139..eddd4a7b08 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -23,6 +23,7 @@ import CountBlock from "../../CAREUI/display/Count";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { useState } from "react";
+import { parseOptionId } from "../../Common/utils";
 
 const DischargedPatientsList = ({
   facility_external_id,
@@ -172,7 +173,49 @@ const DischargedPatientsList = ({
         </div>
       </div>
       <div className="col-span-3 mt-6 flex flex-wrap">
-        <FilterBadges badges={({ ordering }) => [ordering()]} />
+        <FilterBadges
+          badges={({
+            badge,
+            value,
+            kasp,
+            phoneNumber,
+            dateRange,
+            range,
+            ordering,
+          }) => [
+            phoneNumber("Primary number", "phone_number"),
+            phoneNumber("Emergency number", "emergency_phone_number"),
+            badge("Patient name", "name"),
+            badge("IP/OP number", "patient_no"),
+            ...dateRange("Modified", "modified_date"),
+            ...dateRange("Created", "created_date"),
+            badge("No. of vaccination doses", "number_of_doses"),
+            kasp(),
+            badge("COWIN ID", "covin_id"),
+            badge("Is Antenatal", "is_antenatal"),
+            badge("Review Missed", "review_missed"),
+            badge("Facility Type", "facility_type"),
+            ordering(),
+            badge("Disease Status", "disease_status"),
+            value(
+              "Respiratory Support",
+              "ventilator_interface",
+              qParams.ventilator_interface &&
+                t(`RESPIRATORY_SUPPORT_${qParams.ventilator_interface}`),
+            ),
+            value(
+              "Gender",
+              "gender",
+              parseOptionId(GENDER_TYPES, qParams.gender) || "",
+            ),
+            ...range("Age", "age"),
+            badge("SRF ID", "srf_id"),
+            badge("Declared Status", "is_declared_positive"),
+            ...dateRange("Result", "date_of_result"),
+            ...dateRange("Declared positive", "date_declared_positive"),
+            ...dateRange("Last vaccinated", "last_vaccinated_date"),
+          ]}
+        />
       </div>
       <PaginatedList
         route={routes.listFacilityDischargedPatients}
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index efbdc09d0d..756b521984 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -546,47 +546,55 @@ export default function PatientFilter(props: any) {
             onChange={handleDateRangeChange}
             errorClassName="hidden"
           />
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="last_consultation_encounter_date"
-            label="Admit Date"
-            value={{
-              start: getDate(
-                filterState.last_consultation_encounter_date_after,
-              ),
-              end: getDate(filterState.last_consultation_encounter_date_before),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="last_consultation_discharge_date"
-            label="Discharge Date"
-            value={{
-              start: getDate(
-                filterState.last_consultation_discharge_date_after,
-              ),
-              end: getDate(filterState.last_consultation_discharge_date_before),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
-          <DateRangeFormField
-            labelClassName="text-sm"
-            name="last_consultation_symptoms_onset_date"
-            label="Onset of Symptoms Date"
-            value={{
-              start: getDate(
-                filterState.last_consultation_symptoms_onset_date_after,
-              ),
-              end: getDate(
-                filterState.last_consultation_symptoms_onset_date_before,
-              ),
-            }}
-            onChange={handleDateRangeChange}
-            errorClassName="hidden"
-          />
+          {!props.discharged && (
+            <>
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="last_consultation_encounter_date"
+                label="Admit Date"
+                value={{
+                  start: getDate(
+                    filterState.last_consultation_encounter_date_after,
+                  ),
+                  end: getDate(
+                    filterState.last_consultation_encounter_date_before,
+                  ),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="last_consultation_discharge_date"
+                label="Discharge Date"
+                value={{
+                  start: getDate(
+                    filterState.last_consultation_discharge_date_after,
+                  ),
+                  end: getDate(
+                    filterState.last_consultation_discharge_date_before,
+                  ),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+              <DateRangeFormField
+                labelClassName="text-sm"
+                name="last_consultation_symptoms_onset_date"
+                label="Onset of Symptoms Date"
+                value={{
+                  start: getDate(
+                    filterState.last_consultation_symptoms_onset_date_after,
+                  ),
+                  end: getDate(
+                    filterState.last_consultation_symptoms_onset_date_before,
+                  ),
+                }}
+                onChange={handleDateRangeChange}
+                errorClassName="hidden"
+              />
+            </>
+          )}
         </div>
       </AccordionV2>
       {!props.discharged && (

From 7624a225b004b16e29ad5aba79c5023fbe54b38f Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Sat, 11 May 2024 04:09:19 +0530
Subject: [PATCH 3/6] updated filters

---
 src/Components/Patient/PatientFilter.tsx | 73 +++++++++++++-----------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index 756b521984..23fea04793 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -387,25 +387,27 @@ export default function PatientFilter(props: any) {
                   }
                 />
               </div>
-
-              <div className="w-full flex-none" id="discharge-reason-select">
-                <FieldLabel className="text-sm">Discharge Reason</FieldLabel>
-                <SelectMenuV2
-                  id="last_consultation__new_discharge_reason"
-                  placeholder="Select discharge reason"
-                  options={DISCHARGE_REASONS}
-                  value={filterState.last_consultation__new_discharge_reason}
-                  optionValue={(o) => o.id}
-                  optionLabel={(o) => o.text}
-                  onChange={(o) =>
-                    setFilterState({
-                      ...filterState,
-                      last_consultation__new_discharge_reason: o,
-                    })
-                  }
-                />
-              </div>
-
+            </>
+          )}
+          <div className="w-full flex-none" id="discharge-reason-select">
+            <FieldLabel className="text-sm">Discharge Reason</FieldLabel>
+            <SelectMenuV2
+              id="last_consultation__new_discharge_reason"
+              placeholder="Select discharge reason"
+              options={DISCHARGE_REASONS}
+              value={filterState.last_consultation__new_discharge_reason}
+              optionValue={(o) => o.id}
+              optionLabel={(o) => o.text}
+              onChange={(o) =>
+                setFilterState({
+                  ...filterState,
+                  last_consultation__new_discharge_reason: o,
+                })
+              }
+            />
+          </div>
+          {!props.discharged && (
+            <>
               <div className="w-full flex-none">
                 <FieldLabel className="text-sm">Telemedicine</FieldLabel>
                 <SelectMenuV2
@@ -563,21 +565,24 @@ export default function PatientFilter(props: any) {
                 onChange={handleDateRangeChange}
                 errorClassName="hidden"
               />
-              <DateRangeFormField
-                labelClassName="text-sm"
-                name="last_consultation_discharge_date"
-                label="Discharge Date"
-                value={{
-                  start: getDate(
-                    filterState.last_consultation_discharge_date_after,
-                  ),
-                  end: getDate(
-                    filterState.last_consultation_discharge_date_before,
-                  ),
-                }}
-                onChange={handleDateRangeChange}
-                errorClassName="hidden"
-              />
+            </>
+          )}
+
+          <DateRangeFormField
+            labelClassName="text-sm"
+            name="last_consultation_discharge_date"
+            label="Discharge Date"
+            value={{
+              start: getDate(
+                filterState.last_consultation_discharge_date_after,
+              ),
+              end: getDate(filterState.last_consultation_discharge_date_before),
+            }}
+            onChange={handleDateRangeChange}
+            errorClassName="hidden"
+          />
+          {!props.discharged && (
+            <>
               <DateRangeFormField
                 labelClassName="text-sm"
                 name="last_consultation_symptoms_onset_date"

From 334f0022d8f0fab427a70490d91bf8e37a3984e3 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 15 May 2024 11:44:12 +0530
Subject: [PATCH 4/6] fixed responsiveness and removed geo filters

---
 .../Facility/DischargedPatientsList.tsx       |  2 +-
 src/Components/Patient/PatientFilter.tsx      | 56 ++++++++++---------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 9cc90aa656..bc49989742 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -104,7 +104,7 @@ const DischargedPatientsList = ({
       }}
       options={
         <>
-          <div className="flex flex-col gap-4 md:flex-row">
+          <div className="flex flex-col gap-4 lg:flex-row">
             <SwitchTabs
               tab1="Live"
               tab2="Discharged"
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index 41ba6874df..caf47093c3 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -581,16 +581,18 @@ export default function PatientFilter(props: any) {
         className="rounded-md"
       >
         <div className="space-y-4">
-          <div>
-            <FieldLabel className="text-sm">Facility</FieldLabel>
-            <FacilitySelect
-              multiple={false}
-              name="facility"
-              showAll={false}
-              selected={filterState.facility_ref}
-              setSelected={(obj) => setFilterWithRef("facility", obj)}
-            />
-          </div>
+          {!props.dischargePage && (
+            <div>
+              <FieldLabel className="text-sm">Facility</FieldLabel>
+              <FacilitySelect
+                multiple={false}
+                name="facility"
+                showAll={false}
+                selected={filterState.facility_ref}
+                setSelected={(obj) => setFilterWithRef("facility", obj)}
+              />
+            </div>
+          )}
           {filterState.facility && (
             <div>
               <FieldLabel className="text-sm">Location</FieldLabel>
@@ -609,22 +611,24 @@ export default function PatientFilter(props: any) {
               />
             </div>
           )}
-          <div>
-            <FieldLabel className="text-sm">Facility type</FieldLabel>
-            <SelectMenuV2
-              placeholder="Show all"
-              options={FACILITY_TYPES}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.text}
-              value={filterState.facility_type}
-              onChange={(v) =>
-                setFilterState({ ...filterState, facility_type: v })
-              }
-              optionIcon={() => (
-                <CareIcon icon="l-hospital" className="text-lg" />
-              )}
-            />
-          </div>
+          {!props.dischargePage && (
+            <div>
+              <FieldLabel className="text-sm">Facility type</FieldLabel>
+              <SelectMenuV2
+                placeholder="Show all"
+                options={FACILITY_TYPES}
+                optionLabel={(o) => o.text}
+                optionValue={(o) => o.text}
+                value={filterState.facility_type}
+                onChange={(v) =>
+                  setFilterState({ ...filterState, facility_type: v })
+                }
+                optionIcon={() => (
+                  <CareIcon icon="l-hospital" className="text-lg" />
+                )}
+              />
+            </div>
+          )}
           <div>
             <FieldLabel className="text-sm">LSG Body</FieldLabel>
             <div className="">

From bccdd2426bdd7732077cbf65d2606a95b8131cda Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 15 May 2024 12:05:29 +0530
Subject: [PATCH 5/6] changed per page limit

---
 src/Components/Facility/DischargedPatientsList.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index bc49989742..1494693542 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -218,6 +218,7 @@ const DischargedPatientsList = ({
         />
       </div>
       <PaginatedList
+        perPage={18}
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}

From 894ee220f331f1b6859b2d01a90556c3a6148536 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 15 May 2024 12:13:02 +0530
Subject: [PATCH 6/6] switched to 12

---
 src/Components/Facility/DischargedPatientsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 1494693542..95a888a86c 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -218,7 +218,7 @@ const DischargedPatientsList = ({
         />
       </div>
       <PaginatedList
-        perPage={18}
+        perPage={12}
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}