From 6c117aa2c3121d0c1f0143aefa4f0c31a64d7bee Mon Sep 17 00:00:00 2001
From: Abhiuday Gupta <77210185+cp-Coder@users.noreply.github.com>
Date: Wed, 26 Oct 2022 11:26:42 +0530
Subject: [PATCH 1/4] fix (InventoryForm): Made the cancel and set buttons
 uniform (#3802)

---
 src/Components/Facility/SetInventoryForm.tsx  | 6 +++---
 src/Components/Facility/UpdateMinQuantity.tsx | 9 +++------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/Components/Facility/SetInventoryForm.tsx b/src/Components/Facility/SetInventoryForm.tsx
index fbf8efc7d86..f02dac6c68c 100644
--- a/src/Components/Facility/SetInventoryForm.tsx
+++ b/src/Components/Facility/SetInventoryForm.tsx
@@ -119,7 +119,7 @@ export const SetInventoryForm = (props: any) => {
   };
 
   const handleChange = (e: any) => {
-    let form = { ...state.form };
+    const form = { ...state.form };
     form[e.target.name] = e.target.value;
     dispatch({ type: "set_form", form });
   };
@@ -198,7 +198,7 @@ export const SetInventoryForm = (props: any) => {
                     color="default"
                     type="button"
                     onClick={() => goBack()}
-                    className="w-full sm:w-fit bg-gray-400 hover:bg-gray-500 rounded-md p-2 px-6 mt-2"
+                    className="w-full sm:w-fit rounded-md p-2 px-6 mt-2 bg-gray-400 hover:bg-gray-500"
                   >
                     Cancel
                   </button>
@@ -208,7 +208,7 @@ export const SetInventoryForm = (props: any) => {
                     color="primary"
                     type="submit"
                     style={{ marginLeft: "auto" }}
-                    className="bg-green-500 hover:bg-green-700 w-full text-white sm:w-fit mt-2 rounded-md px-6 font-bold p-2"
+                    className="w-full sm:w-fit rounded-md p-2 px-6 mt-2 bg-green-500 hover:bg-green-700 text-white"
                     onClick={(e) => handleSubmit(e)}
                   >
                     <CheckCircleOutlineIcon></CheckCircleOutlineIcon> SET
diff --git a/src/Components/Facility/UpdateMinQuantity.tsx b/src/Components/Facility/UpdateMinQuantity.tsx
index 9890d764bb2..37f4921d3ca 100644
--- a/src/Components/Facility/UpdateMinQuantity.tsx
+++ b/src/Components/Facility/UpdateMinQuantity.tsx
@@ -49,11 +49,8 @@ export const UpdateMinQuantity = (props: any) => {
   const [isLoading, setIsLoading] = useState(false);
   const [offset, setOffset] = useState(0);
   const [data, setData] = useState(" ");
-  const [currentUnit, setCurrentUnit] = useState<any>();
   const [facilityName, setFacilityName] = useState("");
 
-  const limit = 14;
-
   const fetchData = useCallback(
     async (status: statusType) => {
       setIsLoading(true);
@@ -63,7 +60,7 @@ export const UpdateMinQuantity = (props: any) => {
       if (!status.aborted) {
         if (res && res.data) {
           setData(res.data.item_object.name);
-          let form = { ...state.form, quantity: res.data.min_quantity };
+          const form = { ...state.form, quantity: res.data.min_quantity };
           dispatch({ type: "set_form", form });
         }
         setIsLoading(false);
@@ -112,7 +109,7 @@ export const UpdateMinQuantity = (props: any) => {
   };
 
   const handleChange = (e: any) => {
-    let form = { ...state.form };
+    const form = { ...state.form };
     form[e.target.name] = e.target.value;
     dispatch({ type: "set_form", form });
   };
@@ -173,7 +170,7 @@ export const UpdateMinQuantity = (props: any) => {
                   color="default"
                   variant="contained"
                   type="button"
-                  className="w-full sm:w-fit"
+                  className="w-full sm:w-fit mt-2"
                   onClick={() => goBack()}
                 >
                   Cancel

From 0c00f1dbb63f65cc3e27b982e76d243377b1cac6 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Wed, 26 Oct 2022 11:35:06 +0530
Subject: [PATCH 2/4] UI fixes on asset page (#3813)

---
 src/Components/Assets/AssetsList.tsx | 4 ++--
 src/Components/Common/SearchBox.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index a22c2c585f7..2f6739cf126 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -258,7 +258,7 @@ const AssetsList = () => {
   return (
     <div className="px-6">
       <PageTitle title="Assets" hideBack={true} breadcrumbs={false} />
-      <div className="lg:flex mt-5 space-y-2 space-x-2">
+      <div className="lg:flex mt-5 space-y-2">
         <div className="bg-white overflow-hidden shadow rounded-lg flex-1 md:mr-2">
           <div className="px-4 py-5 sm:p-6">
             <dl>
@@ -313,7 +313,7 @@ const AssetsList = () => {
         <Loading />
       ) : (
         <>
-          <div className="flex space-x-2 mt-2 flex-wrap w-full col-span-3">
+          <div className="flex mt-2 flex-wrap w-full col-span-3">
             {badge("Facility", facilityName, ["facility", "location"])}
             {badge("Asset Name", qParams.search, ["search"])}
             {badge("Location", locationName, ["location"])}
diff --git a/src/Components/Common/SearchBox.tsx b/src/Components/Common/SearchBox.tsx
index 293e6b187ba..77a6c5a0a43 100644
--- a/src/Components/Common/SearchBox.tsx
+++ b/src/Components/Common/SearchBox.tsx
@@ -43,7 +43,7 @@ export const InputSearchBox = (props: TextFieldPropsExtended) => {
           name="search"
           type="text"
           {...inputProps}
-          className="form-input block w-full pr-8 pr-3 sm:text-sm sm:leading-5"
+          className="form-input block w-full pr-8 sm:text-sm sm:leading-5 text-ellipsis"
         />
         {searchValue ? (
           <div

From d3506fb720ebef54869cfb28bd7367d52626211a Mon Sep 17 00:00:00 2001
From: Gokulram A <40627011+GokulramGHV@users.noreply.github.com>
Date: Wed, 26 Oct 2022 11:35:40 +0530
Subject: [PATCH 3/4] Added `AccordionV2`  and `CollapseV2` components to
 replace MUI's Accordion and Collapse components (#3762)

* Added  component to replace MUI's Accordion component

* minor ui fix

* Added AccordionV2 and CollapseV2

* removed comments

* patient registration fields alignment fix

* fixed accordion max height issue
---
 .../Common/components/AccordionV2.tsx         |  73 +++++++++
 .../Common/components/CollapseV2.tsx          |  54 +++++++
 .../components/ResponsiveMedicineTables.tsx   |  91 +++++------
 .../Common/components/SelectMenu.tsx          |   9 +-
 src/Components/Facility/HospitalList.tsx      | 147 +++++++++---------
 src/Components/Patient/PatientRegister.tsx    |  66 ++++----
 6 files changed, 268 insertions(+), 172 deletions(-)
 create mode 100644 src/Components/Common/components/AccordionV2.tsx
 create mode 100644 src/Components/Common/components/CollapseV2.tsx

diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
new file mode 100644
index 00000000000..e2b4ca54d93
--- /dev/null
+++ b/src/Components/Common/components/AccordionV2.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+export default function AccordionV2(props: {
+  children: JSX.Element | JSX.Element[];
+  expandIcon?: JSX.Element;
+  title: JSX.Element | JSX.Element[] | string;
+  className?: string;
+  expanded?: boolean;
+}) {
+  const [toggle, setToggle] = useState(props.expanded as boolean);
+  const contentEl = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={props.className}>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="w-full grid justify-start"
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          <>{props.title}</>
+        </button>
+        <button
+          type="button"
+          className={
+            toggle
+              ? "transition-all rotate-180 duration-300 ease-in-out"
+              : "transition"
+          }
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {props.expandIcon ? (
+            props.expandIcon
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div
+        className="transition-all ease-in-out duration-500 overflow-hidden"
+        ref={contentEl}
+        style={
+          toggle
+            ? {
+                maxHeight: contentEl.current
+                  ? contentEl.current.scrollHeight * 2
+                  : "0px",
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/CollapseV2.tsx b/src/Components/Common/components/CollapseV2.tsx
new file mode 100644
index 00000000000..6552868b6ac
--- /dev/null
+++ b/src/Components/Common/components/CollapseV2.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+
+export default function CollapseV2(props: {
+  children: JSX.Element | JSX.Element[];
+  opened: boolean;
+  className?: string;
+}) {
+  const content = React.useRef<HTMLDivElement>(null);
+  const [innerDivState, setInnerDivState] = useState(false);
+  const [outerDivState, setOuterDivState] = useState(false);
+
+  useEffect(() => {
+    if (props.opened) {
+      setOuterDivState(props.opened);
+      setTimeout(() => {
+        setInnerDivState(props.opened);
+      }, 1);
+    } else {
+      setInnerDivState(props.opened);
+      setTimeout(() => {
+        setOuterDivState(props.opened);
+      }, 300);
+    }
+  }, [props.opened]);
+
+  return (
+    <div
+      className="transition-all ease-in-out duration-300"
+      style={
+        outerDivState
+          ? {
+              display: "block",
+            }
+          : { display: "none" }
+      }
+    >
+      <div
+        className={`transition-all ease-in-out duration-300 overflow-hidden ${
+          props.className ? props.className : ""
+        }`}
+        ref={content}
+        style={
+          innerDivState
+            ? {
+                maxHeight: content.current?.scrollHeight,
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
index 7500b9f4efa..271563a4d2f 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,9 +1,5 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-} from "@material-ui/core";
 import { useEffect, useState } from "react";
+import AccordionV2 from "./AccordionV2";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -67,31 +63,11 @@ export default function ResponsiveMedicineTable(props: {
       ) : (
         <div className="rounded-md shadow-sm">
           {props.list.map((med: any, index: number) => (
-            <Accordion elevation={0} key={index}>
-              <AccordionSummary
-                className="overflow-hidden"
-                expandIcon={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={2}
-                    stroke="currentColor"
-                    className="w-5 h-5"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                    />
-                  </svg>
-                }
-                aria-controls={`panel${index + 1}a-content`}
-                id={`panel${index + 1}a-header`}
-              >
+            <AccordionV2
+              title={
                 <div className="grid">
                   <div className="flex flex-col">
-                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full">
+                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full text-left">
                       {med[props.objectKeys[0]]}
                     </h3>
                   </div>
@@ -106,35 +82,40 @@ export default function ResponsiveMedicineTable(props: {
                     ))}
                   </div>
                 </div>
-              </AccordionSummary>
-              <AccordionDetails className="border-t border-t-gray-400">
-                <div className="flex flex-col w-full">
-                  <div className="grid grid-cols-2 gap-3 w-full">
-                    {props.objectKeys.map((key, i) => {
-                      if (i !== 0 && i !== props.objectKeys.length - 1)
-                        return (
-                          <div>
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
+              }
+              className={
+                props.list.length - 1 === index
+                  ? "bg-white p-5 "
+                  : "bg-white p-5 border-b border-b-gray-400"
+              }
+              key={index}
+            >
+              <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
+                <div className="grid grid-cols-2 gap-3 w-full mt-3">
+                  {props.objectKeys.map((key, i) => {
+                    if (i !== 0 && i !== props.objectKeys.length - 1)
+                      return (
+                        <div>
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
 
-                      if (i === props.objectKeys.length - 1)
-                        return (
-                          <div className="col-span-2">
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
-                    })}
-                  </div>
+                    if (i === props.objectKeys.length - 1)
+                      return (
+                        <div className="col-span-2">
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
+                  })}
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </div>
+            </AccordionV2>
           ))}
         </div>
       )}
diff --git a/src/Components/Common/components/SelectMenu.tsx b/src/Components/Common/components/SelectMenu.tsx
index 3a2f1fa3fea..8869916cf99 100644
--- a/src/Components/Common/components/SelectMenu.tsx
+++ b/src/Components/Common/components/SelectMenu.tsx
@@ -12,6 +12,7 @@ type Props<T> = {
   selected?: T;
   label?: string;
   position?: string;
+  parentRelative?: boolean;
 };
 
 export default function SelectMenu<T>(props: Props<T>) {
@@ -34,7 +35,13 @@ export default function SelectMenu<T>(props: Props<T>) {
       {({ open }) => (
         <>
           <Listbox.Label className="sr-only">{props.label}</Listbox.Label>
-          <div className="relative">
+          <div
+            className={
+              props.parentRelative || props.parentRelative === undefined
+                ? "relative"
+                : ""
+            }
+          >
             <Listbox.Button className="w-full flex shadow-sm rounded bg-gray-50 hover:bg-gray-200 focus:ring-primary-500 border focus:ring-1 ring-gray-400 focus:border-primary-500 border-gray-400 transition-all duration-200 ease-in-out">
               <div className="relative z-0 flex w-full">
                 <div className="relative flex-1 flex items-center py-2 pl-3 pr-4 border border-transparent rounded-l focus:outline-none focus:z-10">
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index bea9146376c..97463b51d8f 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -22,6 +22,7 @@ import {
   sendNotificationMessages,
 } from "../../Redux/actions";
 import loadable from "@loadable/component";
+
 import { InputLabel, TextField } from "@material-ui/core";
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
@@ -29,11 +30,7 @@ import { InputSearchBox } from "../Common/SearchBox";
 import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
-import Accordion from "@material-ui/core/Accordion";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import { make as SlideOver } from "../Common/SlideOver.gen";
@@ -42,6 +39,7 @@ import { useTranslation } from "react-i18next";
 import * as Notification from "../../Utils/Notifications.js";
 import { Modal } from "@material-ui/core";
 import SelectMenu from "../Common/components/SelectMenu";
+import AccordionV2 from "../Common/components/AccordionV2";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -558,80 +556,74 @@ export const HospitalList = (props: any) => {
 
         <div className="flex md:justify-end w-full md:mt-4">
           <div className="w-full md:w-auto">
-            <Accordion className="lg:mt-0 md:mt-0 sm:mt-0">
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="panel1a-content"
-                id="panel1a-header"
-              >
-                <Typography className={classes.heading}>
-                  {t("downloads")}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <div>
-                  <InputLabel className="text-sm">
-                    {t("download_type")}
-                  </InputLabel>
-                  <div className="flex flex-row gap-6">
-                    <SelectMenu
-                      options={[
-                        ...downloadTypes.map((download) => ({
-                          title: download,
-                          value: download,
-                        })),
-                      ]}
-                      selected={downloadSelect}
-                      onSelect={setdownloadSelect}
-                      position="right"
-                    />
-                    {downloadLoading ? (
-                      <div className="px-2 ml-2 my-2 pt-1 rounded">
-                        <CircularProgress className="text-primary-600 w-6 h-6" />
-                      </div>
-                    ) : (
-                      <button
-                        className="bg-primary-600 hover:shadow-md px-2 rounded-full"
-                        onClick={handleDownloader}
-                        disabled={downloadLoading}
-                      >
-                        <GetAppIcon style={{ color: "white" }} />
-                      </button>
-                    )}
-                  </div>
-                </div>
-                <div className="hidden">
-                  <CSVLink
-                    data={DownloadFile}
-                    filename={`facilities-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="facilityDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={capacityDownloadFile}
-                    filename={`facility-capacity-${now}.csv`}
-                    className="hidden"
-                    id="capacityDownloader"
-                    target="_blank"
-                  ></CSVLink>
-                  <CSVLink
-                    data={doctorsDownloadFile}
-                    filename={`facility-doctors-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="doctorsDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={triageDownloadFile}
-                    filename={`facility-triage-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="triageDownloader"
-                  ></CSVLink>
+            <AccordionV2
+              title={<p className="font-medium text-lg">Downloads</p>}
+              className="lg:mt-0 md:mt-0 sm:mt-0 bg-white shadow-md rounded-lg p-3 relative"
+              expandIcon={<ExpandMoreIcon />}
+            >
+              <div className="mt-3">
+                <InputLabel className="text-sm mb-2">
+                  {t("download_type")}
+                </InputLabel>
+                <div className="flex flex-row gap-6">
+                  <SelectMenu
+                    options={[
+                      ...downloadTypes.map((download) => ({
+                        title: download,
+                        value: download,
+                      })),
+                    ]}
+                    selected={downloadSelect}
+                    onSelect={setdownloadSelect}
+                    position="left"
+                    parentRelative={false}
+                  />
+                  {downloadLoading ? (
+                    <div className="px-2 ml-2 my-2 pt-1 rounded">
+                      <CircularProgress className="text-primary-600 w-6 h-6" />
+                    </div>
+                  ) : (
+                    <button
+                      className="bg-primary-600 hover:shadow-md px-2 rounded-full"
+                      onClick={handleDownloader}
+                      disabled={downloadLoading}
+                    >
+                      <GetAppIcon style={{ color: "white" }} />
+                    </button>
+                  )}
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </div>
+              <div className="hidden">
+                <CSVLink
+                  data={DownloadFile}
+                  filename={`facilities-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="facilityDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={capacityDownloadFile}
+                  filename={`facility-capacity-${now}.csv`}
+                  className="hidden"
+                  id="capacityDownloader"
+                  target="_blank"
+                ></CSVLink>
+                <CSVLink
+                  data={doctorsDownloadFile}
+                  filename={`facility-doctors-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="doctorsDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={triageDownloadFile}
+                  filename={`facility-triage-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="triageDownloader"
+                ></CSVLink>
+              </div>
+            </AccordionV2>
           </div>
         </div>
       </div>
@@ -704,6 +696,7 @@ export const HospitalList = (props: any) => {
           </div>
         </div>
       </div>
+
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>
           <div className="bg-white min-h-screen p-4">
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index b15dbabeff5..fc47eef9fc5 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1,12 +1,8 @@
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Box,
   Card,
   CardContent,
   CircularProgress,
-  Collapse,
   FormControlLabel,
   InputLabel,
   Radio,
@@ -63,7 +59,10 @@ import { goBack } from "../../Utils/utils";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
+import AccordionV2 from "../Common/components/AccordionV2";
+import CollapseV2 from "../Common/components/CollapseV2";
 import { debounce } from "lodash";
+// const debounce = require("lodash.debounce");
 
 interface PatientRegisterProps extends PatientModel {
   facilityId: number;
@@ -1140,11 +1139,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           />
                         </div>
 
-                        <Collapse
-                          in={String(state.form.gender) === "2"}
-                          timeout="auto"
-                          unmountOnExit
-                        >
+                        <CollapseV2 opened={String(state.form.gender) === "2"}>
                           {
                             <div id="is_antenatal-div" className="col-span-2">
                               <InputLabel
@@ -1176,7 +1171,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </RadioGroup>
                             </div>
                           }
-                        </Collapse>
+                        </CollapseV2>
                         <div data-testid="current-address" id="address-div">
                           <InputLabel
                             id="address-label"
@@ -1429,18 +1424,17 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                     </CardContent>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
-                    <Accordion className="mt-2 lg:mt-0 md:mt-0">
-                      <AccordionSummary
-                        expandIcon={<ExpandMoreIcon />}
-                        aria-controls="panel1a-content"
-                        id="panel1a-header"
-                      >
-                        <h1 className="font-bold text-purple-500 text-left text-xl mb-4">
+                    <AccordionV2
+                      className="mt-2 lg:mt-0 md:mt-0 bg-white shadow-sm rounded-lg p-3 relative"
+                      expandIcon={<ExpandMoreIcon />}
+                      title={
+                        <h1 className="font-bold text-purple-500 text-left text-xl">
                           Health Details
                         </h1>
-                      </AccordionSummary>
-                      <AccordionDetails>
-                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full">
+                      }
+                    >
+                      <div>
+                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full mt-5">
                           <div id="test_type-div">
                             <InputLabel
                               id="test_type-label"
@@ -1504,13 +1498,11 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </Box>
                             </RadioGroup>
-                            <Collapse
-                              in={
+                            <CollapseV2
+                              opened={
                                 String(state.form.is_declared_positive) ===
                                 "true"
                               }
-                              timeout="auto"
-                              unmountOnExit
                               className="mt-4"
                             >
                               <div id="date_declared_positive-div">
@@ -1532,7 +1524,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   disableFuture={true}
                                 />
                               </div>
-                            </Collapse>
+                            </CollapseV2>
                           </div>
 
                           <div id="is_vaccinated-div">
@@ -1564,10 +1556,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={String(state.form.is_vaccinated) === "true"}
-                            timeout="auto"
-                            unmountOnExit
+                          <CollapseV2
+                            opened={String(state.form.is_vaccinated) === "true"}
                           >
                             {
                               <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
@@ -1604,7 +1594,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     onChange={handleChange}
                                     style={{ padding: "0px 5px" }}
                                   >
-                                    <Box display="flex" flexDirection="row">
+                                    <div className="flex flex-wrap">
                                       <FormControlLabel
                                         value="1"
                                         control={<Radio />}
@@ -1620,7 +1610,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                         control={<Radio />}
                                         label="3 (Booster/Precautionary Dose)"
                                       />
-                                    </Box>
+                                    </div>
                                   </RadioGroup>
                                 </div>
                                 <div id="vaccine_name-div">
@@ -1670,7 +1660,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 </div>
                               </div>
                             }
-                          </Collapse>
+                          </CollapseV2>
                           <div id="contact_with_confirmed_carrier-div">
                             <InputLabel htmlFor="contact_with_confirmed_carrier">
                               Contact with confirmed Covid patient?
@@ -1724,8 +1714,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={
+                          <CollapseV2
+                            opened={
                               JSON.parse(
                                 state.form.contact_with_confirmed_carrier
                               ) ||
@@ -1733,8 +1723,6 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 state.form.contact_with_suspected_carrier
                               )
                             }
-                            timeout="auto"
-                            unmountOnExit
                           >
                             <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
                               <div id="estimated_contact_date-div">
@@ -1783,7 +1771,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </div>
                             </div>
-                          </Collapse>
+                          </CollapseV2>
                           <div
                             data-testid="disease-status"
                             id="disease_status-div"
@@ -1929,8 +1917,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             />
                           </div>
                         </div>
-                      </AccordionDetails>
-                    </Accordion>
+                      </div>
+                    </AccordionV2>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
                     <CardContent>

From 2f09f6347f26c841fb6f9051b15c51007a945be0 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Wed, 26 Oct 2022 11:36:05 +0530
Subject: [PATCH 4/4] Added patient search by IP number (#3761)

* Added patient search by IP number

* Fix alignment

* Change patient search ui
---
 src/Components/Patient/ManagePatients.tsx | 667 ++++++++++++----------
 1 file changed, 363 insertions(+), 304 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 1b324a3dd8a..604aaf5a95f 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -110,6 +110,7 @@ export const PatientManager = (props: any) => {
     page: qParams.page || 1,
     limit: RESULT_LIMIT,
     name: qParams.name || undefined,
+    ip_no: qParams.ip_no || undefined,
     is_active: qParams.is_active || "True",
     disease_status: qParams.disease_status || undefined,
     phone_number: qParams.phone_number
@@ -272,6 +273,7 @@ export const PatientManager = (props: any) => {
     qParams.is_active,
     qParams.disease_status,
     qParams.name,
+    qParams.ip_no,
     qParams.page,
     qParams.phone_number,
     qParams.emergency_phone_number,
@@ -371,6 +373,10 @@ export const PatientManager = (props: any) => {
     updateQuery({ name: value, page: 1 });
   };
 
+  const searchByIpNo = (value: string) => {
+    updateQuery({ ip_no: value, page: 1 });
+  };
+
   const searchByPhone = (value: string, name: string) => {
     updateQuery({ [name]: value, page: 1 });
   };
@@ -653,7 +659,7 @@ export const PatientManager = (props: any) => {
   } else if (data && data.length) {
     managePatients = (
       <>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 mt-4">
           {patientList}
         </div>
         {totalCount > RESULT_LIMIT && (
@@ -692,333 +698,386 @@ export const PatientManager = (props: any) => {
         breadcrumbs={!!facilityId}
         crumbsReplacements={{ [facilityId]: { name: facilityCrumbName } }}
       />
-      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 relative">
-        <div className="title-text sm:flex align-center gap-2">
-          <div className="text-center">
-            <button
-              onClick={handleDownloadFiltered}
-              disabled={!isDownloadAllowed}
-              className="btn text-green-500 disabled:text-gray-500 disabled:hover:bg-gray-50 font-medium hover:bg-green-50 border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
-            >
-              <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD{" "}
-              {tabValue === 0 ? "LIVE" : "DISCHARGED"} LIST
-            </button>
-            <CSVLink
-              id="downloadlink"
-              className="hidden"
-              data={DownloadFile}
-              filename={`patients-${now}.csv`}
-              target="_blank"
-            ></CSVLink>
-          </div>
-          <div className="flex flex-col gap-2">
-            <button
-              disabled={!isDownloadAllowed}
-              onClick={handleDownloadAll}
-              className="btn text-green-500 disabled:text-gray-500 disabled:hover:bg-gray-50 hover:bg-green-50 font-medium border border-solid"
+      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 mb-[-24px]">
+        <div>
+          <div className="flex flex-col right-3 top-0 gap-2 my-3 mr-3 sm:absolute sm:flex-row">
+            <Tooltip
+              title={
+                !isDownloadAllowed ? (
+                  <p className="self-end text-sm italic ">
+                    * Select a 7 day period
+                  </p>
+                ) : (
+                  ""
+                )
+              }
+              arrow={true}
+              interactive={true}
+              enterNextDelay={100}
+              enterTouchDelay={0}
+              leaveTouchDelay={1000}
             >
-              <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD ALL
-              PATIENTS
-            </button>
-            {!isDownloadAllowed && (
-              <p className="self-end text-sm italic text-red-400">
-                * Select a 7 day period
-              </p>
-            )}
-          </div>
-        </div>
-        <div className="bg-white overflow-hidden shadow rounded-lg">
-          <div className="px-4 py-5 sm:p-6">
-            <dl>
-              <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
-                Total Patients
-              </dt>
-              {/* Show spinner until count is fetched from server */}
-              {isLoading ? (
-                <dd className="mt-4 text-5xl leading-9">
-                  <svg
-                    className="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    ></circle>
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </svg>
-                </dd>
-              ) : (
-                <dd className="mt-4 text-5xl leading-9 font-semibold text-gray-900">
-                  {totalCount}
-                </dd>
-              )}
-            </dl>
-          </div>
-        </div>
-        <div className="col-span-2 mt-2">
-          <div>
-            <div>
-              <div className="md:flex flex-wrap items-end gap-2 lg:mb-2">
-                <div className="grow">
-                  <div className="text-sm font-semibold mb-2">
-                    Search by Name
-                  </div>
-                  <InputSearchBox
-                    search={searchByName}
-                    value={qParams.name}
-                    placeholder="Search by Patient Name"
-                    errors=""
-                  />
-                </div>
+              <div className="text-center">
                 <button
-                  className="btn btn-primary-ghost w-full md:w-fit mt-2"
-                  onClick={(_) => setShowFilters((show) => !show)}
+                  onClick={handleDownloadFiltered}
+                  disabled={!isDownloadAllowed}
+                  className="btn bg-green-500 hover:bg-green-600 text-white disabled:text-gray-50 disabled:bg-gray-500 disabled:hover:bg-gray-600 font-medium border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="fill-current w-4 h-4 mr-2"
-                  >
-                    <line x1="8" y1="6" x2="21" y2="6"></line>
-                    <line x1="8" y1="12" x2="21" y2="12">
-                      {" "}
-                    </line>
-                    <line x1="8" y1="18" x2="21" y2="18">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="6" x2="3.01" y2="6">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="12" x2="3.01" y2="12">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="18" x2="3.01" y2="18">
-                      {" "}
-                    </line>
-                  </svg>
-                  <span>Advanced Filters</span>
+                  <span>
+                    <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD{" "}
+                    {tabValue === 0 ? "LIVE" : "DISCHARGED"} LIST
+                  </span>
                 </button>
-                <button
-                  className="btn-primary btn mt-2 w-full md:w-fit"
-                  onClick={() => {
-                    if (facilityId) {
-                      navigate(`/facility/${facilityId}/patient`);
-                    } else {
-                      setShowDialog(true);
-                    }
-                  }}
-                  data-testid="add-patient-button"
+                <CSVLink
+                  id="downloadlink"
+                  className="hidden"
+                  data={DownloadFile}
+                  filename={`patients-${now}.csv`}
+                  target="_blank"
+                ></CSVLink>
+              </div>
+            </Tooltip>
+            <div className="flex flex-col gap-2">
+              <Tooltip
+                title={
+                  !isDownloadAllowed ? (
+                    <p className="self-end text-sm italic ">
+                      * Select a 7 day period
+                    </p>
+                  ) : (
+                    ""
+                  )
+                }
+                arrow={true}
+                interactive={true}
+                enterNextDelay={100}
+                enterTouchDelay={0}
+                leaveTouchDelay={1000}
+              >
+                <div>
+                  <button
+                    disabled={!isDownloadAllowed}
+                    onClick={handleDownloadAll}
+                    className="btn bg-green-500 hover:bg-green-600 text-white disabled:text-gray-50 disabled:bg-gray-500 disabled:hover:bg-gray-600 font-medium border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+                  >
+                    <span>
+                      <i className="fa-solid fa-arrow-down-long mr-2"></i>
+                      DOWNLOAD ALL PATIENTS
+                    </span>
+                  </button>
+                </div>
+              </Tooltip>
+            </div>
+            <div>
+              <button
+                className="btn btn-primary w-full md:w-fit sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+                onClick={() => {
+                  if (facilityId) {
+                    navigate(`/facility/${facilityId}/patient`);
+                  } else {
+                    setShowDialog(true);
+                  }
+                }}
+                data-testid="add-patient-button"
+              >
+                <i className="fas fa-plus mr-2 text-white"></i>
+                <span className="pt-[2px]">Add Details of a Patient</span>
+              </button>
+            </div>
+            <div>
+              <button
+                className="btn btn-primary-ghost w-full md:w-fit"
+                onClick={(_) => setShowFilters((show) => !show)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="fill-current w-4 h-4 mr-2"
                 >
-                  <i className="fas fa-plus mr-2 text-white"></i>
-                  Add Details of a Patient
-                </button>
+                  <line x1="8" y1="6" x2="21" y2="6"></line>
+                  <line x1="8" y1="12" x2="21" y2="12">
+                    {" "}
+                  </line>
+                  <line x1="8" y1="18" x2="21" y2="18">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="6" x2="3.01" y2="6">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="12" x2="3.01" y2="12">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="18" x2="3.01" y2="18">
+                    {" "}
+                  </line>
+                </svg>
+                <span>Advanced Filters</span>
+              </button>
+            </div>
+          </div>
+          <div className="flex flex-col mt-2">
+            <div className="bg-white overflow-hidden shadow rounded-lg mb-2">
+              <div className="px-4 py-5 sm:p-[35px]">
+                <dl>
+                  <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
+                    Total Patients
+                  </dt>
+                  {/* Show spinner until count is fetched from server */}
+                  {isLoading ? (
+                    <dd className="mt-4 text-5xl leading-9">
+                      <svg
+                        className="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cy="12"
+                          cx="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                        ></circle>
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                      </svg>
+                    </dd>
+                  ) : (
+                    <dd className="mt-4 text-5xl leading-9 font-semibold text-gray-900">
+                      {totalCount}
+                    </dd>
+                  )}
+                </dl>
               </div>
             </div>
           </div>
-          <div className="md:flex md:gap-4">
-            <div className="grow">
-              <div className="text-sm font-semibold mt-2">
-                Search by Primary Number
+        </div>
+        <div className="w-full col-span-2">
+          <div className="col-span-2 mt-2">
+            <div>
+              <div>
+                <div className="md:flex md:gap-4 mt-1">
+                  <div className="grow lg:max-w-sm w-full mb-2">
+                    <div className="text-sm font-semibold mb-2">
+                      Search by Name
+                    </div>
+                    <InputSearchBox
+                      search={searchByName}
+                      value={qParams.name}
+                      placeholder="Search by Patient Name"
+                      errors=""
+                    />
+                  </div>
+                  <div className="grow lg:max-w-sm w-full mb-2">
+                    <div className="text-sm font-semibold mb-2">
+                      Search by IP number
+                    </div>
+                    <InputSearchBox
+                      search={searchByIpNo}
+                      value={qParams.ip_no}
+                      placeholder="Search by IP number"
+                      errors=""
+                    />
+                  </div>
+                </div>
               </div>
-              <PhoneNumberField
-                value={qParams.phone_number || "+91"}
-                onChange={(value: string) =>
-                  searchByPhone(value, "phone_number")
-                }
-                turnOffAutoFormat={false}
-                errors=""
-              />
             </div>
-            <div className="grow">
-              <div className="text-sm font-semibold mt-2">
-                Search by Emergency Number
+            <div className="md:flex md:gap-4">
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold">
+                  Search by Primary Number
+                </div>
+                <PhoneNumberField
+                  value={qParams.phone_number || "+91"}
+                  onChange={(value: string) =>
+                    searchByPhone(value, "phone_number")
+                  }
+                  turnOffAutoFormat={false}
+                  errors=""
+                />
+              </div>
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold">
+                  Search by Emergency Number
+                </div>
+                <PhoneNumberField
+                  value={qParams.emergency_phone_number || "+91"}
+                  onChange={(value: string) =>
+                    searchByPhone(value, "emergency_phone_number")
+                  }
+                  turnOffAutoFormat={false}
+                  errors=""
+                />
               </div>
-              <PhoneNumberField
-                value={qParams.emergency_phone_number || "+91"}
-                onChange={(value: string) =>
-                  searchByPhone(value, "emergency_phone_number")
-                }
-                turnOffAutoFormat={false}
-                errors=""
-              />
             </div>
           </div>
         </div>
-        <div className="flex flex-wrap w-full col-span-3">
-          {qParams.phone_number?.trim().split(" ").length - 1
-            ? badge("Primary Number", qParams.phone_number, "phone_number")
-            : null}
-          {qParams.emergency_phone_number?.trim().split(" ").length - 1
-            ? badge(
-                "Emergency Number",
-                qParams.emergency_phone_number,
-                "emergency_phone_number"
-              )
-            : null}
-          {badge("Patient Name", qParams.name, "name")}
-          {badge(
-            "Modified After",
-            qParams.modified_date_after,
-            "modified_date_after"
-          )}
-          {badge(
-            "Modified Before",
-            qParams.modified_date_before,
-            "modified_date_before"
-          )}
-          {badge(
-            "Created Before",
-            qParams.created_date_before,
-            "created_date_before"
-          )}
-          {badge(
-            "Created After",
-            qParams.created_date_after,
-            "created_date_after"
-          )}
-          {qParams.last_consultation_admission_date_before ===
-          qParams.last_consultation_admission_date_after ? (
-            badge(
-              "Admission Date",
-              qParams.last_consultation_admission_date_before,
-              [
-                "last_consultation_admission_date_before",
-                "last_consultation_admission_date_after",
-              ]
+      </div>
+      <div className="flex flex-wrap w-full col-span-3 ml-[-10px]">
+        {qParams.phone_number?.trim().split(" ").length - 1
+          ? badge("Primary Number", qParams.phone_number, "phone_number")
+          : null}
+        {qParams.emergency_phone_number?.trim().split(" ").length - 1
+          ? badge(
+              "Emergency Number",
+              qParams.emergency_phone_number,
+              "emergency_phone_number"
             )
-          ) : (
-            <>
-              {badge(
-                "Admitted Before",
-                qParams.last_consultation_admission_date_before,
-                "last_consultation_admission_date_before"
-              )}
-              {badge(
-                "Admitted After",
-                qParams.last_consultation_admission_date_after,
-                "last_consultation_admission_date_after"
-              )}
-            </>
-          )}
-          {badge(
-            "Discharged Before",
-            qParams.last_consultation_discharge_date_before,
-            "last_consultation_discharge_date_before"
-          )}
-          {badge(
-            "Discharged After",
-            qParams.last_consultation_discharge_date_after,
-            "last_consultation_discharge_date_after"
-          )}
-          {qParams.last_consultation_admitted_to_list &&
-            LastAdmittedToTypeBadges()}
-          {qParams.number_of_doses &&
-            badge(
-              "Number of Vaccination Doses",
-              qParams.number_of_doses,
-              "number_of_doses"
+          : null}
+        {badge("Patient Name", qParams.name, "name")}
+        {badge("IP number", qParams.ip_no, "ip_no")}
+        {badge(
+          "Modified After",
+          qParams.modified_date_after,
+          "modified_date_after"
+        )}
+        {badge(
+          "Modified Before",
+          qParams.modified_date_before,
+          "modified_date_before"
+        )}
+        {badge(
+          "Created Before",
+          qParams.created_date_before,
+          "created_date_before"
+        )}
+        {badge(
+          "Created After",
+          qParams.created_date_after,
+          "created_date_after"
+        )}
+        {qParams.last_consultation_admission_date_before ===
+        qParams.last_consultation_admission_date_after ? (
+          badge(
+            "Admission Date",
+            qParams.last_consultation_admission_date_before,
+            [
+              "last_consultation_admission_date_before",
+              "last_consultation_admission_date_after",
+            ]
+          )
+        ) : (
+          <>
+            {badge(
+              "Admitted Before",
+              qParams.last_consultation_admission_date_before,
+              "last_consultation_admission_date_before"
             )}
-          {qParams.is_kasp &&
-            badge(
-              KASP_STRING,
-              qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
-              "is_kasp"
+            {badge(
+              "Admitted After",
+              qParams.last_consultation_admission_date_after,
+              "last_consultation_admission_date_after"
             )}
-          {badge("COWIN ID", qParams.covin_id, "covin_id")}
-          {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
-          {badge("Facility", facilityBadgeName, "facility")}
-          {badge("Facility Type", qParams.facility_type, "facility_type")}
-          {badge("District", districtName, "district")}
-          {badge("Ordering", qParams.ordering, "ordering")}
-          {badge("Category", qParams.category, "category")}
-          {badge("Disease Status", qParams.disease_status, "disease_status")}
-          {badge(
-            "Gender",
-            parseOptionId(GENDER_TYPES, qParams.gender),
-            "gender"
-          )}
-          {badge(
-            "Admitted to",
-            ADMITTED_TO[qParams.last_consultation_admitted_to],
-            "last_consultation_admitted_to"
-          )}
-          {badge("Age min", qParams.age_min, "age_min")}
-          {badge("Age max", qParams.age_max, "age_max")}
-          {badge("SRF ID", qParams.srf_id, "srf_id")}
-          {badge("LSG Body", localbodyName, "lsgBody")}
-          {badge(
-            "Declared Status",
-            qParams.is_declared_positive,
-            "is_declared_positive"
-          )}
-          {badge(
-            "Result before",
-            qParams.date_of_result_before,
-            "date_of_result_before"
+          </>
+        )}
+        {badge(
+          "Discharged Before",
+          qParams.last_consultation_discharge_date_before,
+          "last_consultation_discharge_date_before"
+        )}
+        {badge(
+          "Discharged After",
+          qParams.last_consultation_discharge_date_after,
+          "last_consultation_discharge_date_after"
+        )}
+        {qParams.last_consultation_admitted_to_list &&
+          LastAdmittedToTypeBadges()}
+        {qParams.number_of_doses &&
+          badge(
+            "Number of Vaccination Doses",
+            qParams.number_of_doses,
+            "number_of_doses"
           )}
-          {badge(
-            "Result after",
-            qParams.date_of_result_after,
-            "date_of_result_after"
+        {qParams.is_kasp &&
+          badge(
+            KASP_STRING,
+            qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
+            "is_kasp"
           )}
+        {badge("COWIN ID", qParams.covin_id, "covin_id")}
+        {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
+        {badge("Facility", facilityBadgeName, "facility")}
+        {badge("Facility Type", qParams.facility_type, "facility_type")}
+        {badge("District", districtName, "district")}
+        {badge("Ordering", qParams.ordering, "ordering")}
+        {badge("Category", qParams.category, "category")}
+        {badge("Disease Status", qParams.disease_status, "disease_status")}
+        {badge("Gender", parseOptionId(GENDER_TYPES, qParams.gender), "gender")}
+        {badge(
+          "Admitted to",
+          ADMITTED_TO[qParams.last_consultation_admitted_to],
+          "last_consultation_admitted_to"
+        )}
+        {badge("Age min", qParams.age_min, "age_min")}
+        {badge("Age max", qParams.age_max, "age_max")}
+        {badge("SRF ID", qParams.srf_id, "srf_id")}
+        {badge("LSG Body", localbodyName, "lsgBody")}
+        {badge(
+          "Declared Status",
+          qParams.is_declared_positive,
+          "is_declared_positive"
+        )}
+        {badge(
+          "Result before",
+          qParams.date_of_result_before,
+          "date_of_result_before"
+        )}
+        {badge(
+          "Result after",
+          qParams.date_of_result_after,
+          "date_of_result_after"
+        )}
 
-          {badge(
-            "Declared positive before",
-            qParams.date_declared_positive_before,
-            "date_declared_positive_before"
-          )}
+        {badge(
+          "Declared positive before",
+          qParams.date_declared_positive_before,
+          "date_declared_positive_before"
+        )}
 
-          {badge(
-            "Declared positive after",
-            qParams.date_declared_positive_after,
-            "date_declared_positive_after"
-          )}
+        {badge(
+          "Declared positive after",
+          qParams.date_declared_positive_after,
+          "date_declared_positive_after"
+        )}
 
-          {badge(
-            "Onset of symptoms before",
-            qParams.last_consultation_symptoms_onset_date_before,
-            "last_consultation_symptoms_onset_date_before"
-          )}
+        {badge(
+          "Onset of symptoms before",
+          qParams.last_consultation_symptoms_onset_date_before,
+          "last_consultation_symptoms_onset_date_before"
+        )}
 
-          {badge(
-            "Onset of symptoms after",
-            qParams.last_consultation_symptoms_onset_date_after,
-            "last_consultation_symptoms_onset_date_after"
-          )}
-          {badge(
-            "Vaccinated Date before",
-            qParams.last_vaccinated_date_before,
-            "last_vaccinated_date_before"
-          )}
+        {badge(
+          "Onset of symptoms after",
+          qParams.last_consultation_symptoms_onset_date_after,
+          "last_consultation_symptoms_onset_date_after"
+        )}
+        {badge(
+          "Vaccinated Date before",
+          qParams.last_vaccinated_date_before,
+          "last_vaccinated_date_before"
+        )}
 
-          {badge(
-            "Vaccinated Date after",
-            qParams.last_vaccinated_date_after,
-            "last_vaccinated_date_after"
-          )}
-          {badge(
-            "Telemedicine",
-            qParams.last_consultation_is_telemedicine,
-            "last_consultation_is_telemedicine"
-          )}
-        </div>
+        {badge(
+          "Vaccinated Date after",
+          qParams.last_vaccinated_date_after,
+          "last_vaccinated_date_after"
+        )}
+        {badge(
+          "Telemedicine",
+          qParams.last_consultation_is_telemedicine,
+          "last_consultation_is_telemedicine"
+        )}
       </div>
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>