From c1c850b16f4d11e9cf70ac38b52a533ddf968536 Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Thu, 16 Nov 2023 18:25:02 +0530
Subject: [PATCH 01/45] Remove default ordering value

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

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 6a52d68130c..95abb338df7 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -181,7 +181,7 @@ export const PatientManager = () => {
     created_date_after: qParams.created_date_after || undefined,
     modified_date_before: qParams.modified_date_before || undefined,
     modified_date_after: qParams.modified_date_after || undefined,
-    ordering: qParams.ordering || "-modified_date",
+    ordering: qParams.ordering || undefined,
     category: qParams.category || undefined,
     gender: qParams.gender || undefined,
     age_min: qParams.age_min || undefined,

From 25ee0e6b1f2b7335997e76da895698625ca4cc2c Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Thu, 29 Feb 2024 18:48:40 +0530
Subject: [PATCH 02/45] rearranged facility home layout

---
 src/Components/Facility/FacilityHome.tsx | 109 ++++++++++++-----------
 1 file changed, 56 insertions(+), 53 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 4120f4a5469..72950e4aeaf 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -186,10 +186,10 @@ export const FacilityHome = (props: any) => {
       >
         <div className="justify-between gap-2 lg:flex">
           <div className="flex-col justify-between md:flex">
-            <div className="flex flex-1 flex-col gap-10">
-              <div className="flex items-center gap-4">
+            <div className="flex flex-1 flex-col">
+              <div className="flex items-start gap-4">
                 <div
-                  className={`group relative hidden h-[88px] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:flex ${
+                  className={`group relative hidden h-[20rem] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:flex lg:h-[20rem] lg:w-[20rem] ${
                     hasPermissionToEditCoverImage && "cursor-pointer"
                   }`}
                   onClick={() =>
@@ -199,7 +199,7 @@ export const FacilityHome = (props: any) => {
                   {hasCoverImage ? (
                     <CoverImage />
                   ) : (
-                    <div className="flex h-[88px] w-full items-center justify-center bg-gray-200 font-medium text-gray-700">
+                    <div className="flex h-[20rem] w-[88px] items-center justify-center bg-gray-200 font-medium text-gray-700 lg:h-[20rem] lg:w-[20rem]">
                       <svg
                         className="h-8 w-8 fill-current text-gray-500"
                         viewBox="0 0 40 32"
@@ -211,21 +211,21 @@ export const FacilityHome = (props: any) => {
                   )}
                   {editCoverImageTooltip}
                 </div>
-                <div id="facility-name">
-                  <h1 className="text-3xl font-bold">{facilityData?.name}</h1>
-                  {facilityData?.modified_date && (
-                    <RecordMeta
-                      className="mt-1 text-sm text-gray-700"
-                      prefix={t("updated")}
-                      time={facilityData?.modified_date}
-                    />
-                  )}
-                </div>
-              </div>
-              <div className="flex flex-1 items-center">
-                <div className="mb-6 grid w-full gap-4 sm:grid-cols-2 md:mb-0 lg:grid-cols-2">
+                <div className="mb-6 grid gap-4 md:mb-0">
                   <div className="flex-col justify-between md:flex lg:flex-1 ">
-                    <div className="mb-10" id="address-details-view">
+                    <div className="mb-4" id="facility-name">
+                      <h1 className="text-3xl font-bold">
+                        {facilityData?.name}
+                      </h1>
+                      {facilityData?.modified_date && (
+                        <RecordMeta
+                          className="mt-1 text-sm text-gray-700"
+                          prefix={t("updated")}
+                          time={facilityData?.modified_date}
+                        />
+                      )}
+                    </div>
+                    <div className="mb-4" id="address-details-view">
                       <h1 className="text-base font-semibold text-[#B9B9B9]">
                         Address
                       </h1>
@@ -234,47 +234,50 @@ export const FacilityHome = (props: any) => {
                       </p>
                     </div>
 
-                    <div className="flex items-center gap-3">
-                      <div id="phone-number-view">
+                    <div className="flex-col md:flex lg:flex-1">
+                      <div className="mb-4">
                         <h1 className="text-base font-semibold text-[#B9B9B9]">
-                          Phone Number
+                          Local Body
                         </h1>
-                        <ContactLink tel={String(facilityData?.phone_number)} />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex-col md:flex lg:flex-1">
-                    <div className="mb-10">
-                      <h1 className="text-base font-semibold text-[#B9B9B9]">
-                        Local Body
-                      </h1>
-                      <p className="w-2/3 text-base font-medium md:w-full">
-                        {facilityData?.local_body_object?.name}
-                      </p>
-                    </div>
-                    <div className="flex flex-col flex-wrap gap-10 md:flex-row">
-                      <div>
-                        <h1 className="text-base font-semibold text-[#B9B9B9]">
-                          Ward
-                        </h1>
-                        <p className="text-base font-medium">
-                          {facilityData?.ward_object?.number +
-                            ", " +
-                            facilityData?.ward_object?.name}
+                        <p className="w-2/3 text-base font-medium md:w-full">
+                          {facilityData?.local_body_object?.name}
                         </p>
                       </div>
-                      <div>
-                        <h1 className="text-base font-semibold text-[#B9B9B9]">
-                          District
-                        </h1>
-                        <p className="text-base font-medium">
-                          {facilityData?.district_object?.name}
-                        </p>
+                      <div className="mb-4 flex flex-col flex-wrap gap-4 md:flex-row">
+                        <div>
+                          <h1 className="text-base font-semibold text-[#B9B9B9]">
+                            Ward
+                          </h1>
+                          <p className="text-base font-medium">
+                            {facilityData?.ward_object?.number +
+                              ", " +
+                              facilityData?.ward_object?.name}
+                          </p>
+                        </div>
+                        <div>
+                          <h1 className="text-base font-semibold text-[#B9B9B9]">
+                            District
+                          </h1>
+                          <p className="text-base font-medium">
+                            {facilityData?.district_object?.name}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <div id="phone-number-view">
+                          <h1 className="text-base font-semibold text-[#B9B9B9]">
+                            Phone Number
+                          </h1>
+                          <ContactLink
+                            tel={String(facilityData?.phone_number)}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
+              <div className="flex flex-1 items-center"></div>
             </div>
             <div className="mt-10 flex items-center gap-3">
               <div>
@@ -310,7 +313,7 @@ export const FacilityHome = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="mt-4 flex flex-col justify-between">
+          <div className="mt-4 flex flex-col justify-start">
             <div className="w-full md:w-auto">
               <DropdownMenu
                 id="manage-facility-dropdown"
@@ -432,6 +435,8 @@ export const FacilityHome = (props: any) => {
           </div>
         </div>
       </div>
+      <FacilityBedCapacity facilityId={facilityId} />
+      <FacilityDoctorList facilityId={facilityId} />
 
       <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
         <h1 className="mb-6 text-xl font-bold">Oxygen Information</h1>
@@ -467,8 +472,6 @@ export const FacilityHome = (props: any) => {
         </div>
       </div>
 
-      <FacilityBedCapacity facilityId={facilityId} />
-      <FacilityDoctorList facilityId={facilityId} />
       <FacilityHomeTriage
         facilityId={facilityId}
         NonReadOnlyUsers={NonReadOnlyUsers}

From 801aa41ba224363a6fb89ebd876a58ea06218a74 Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Wed, 20 Mar 2024 22:16:35 +0530
Subject: [PATCH 03/45] fixed side margins

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

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index fb11e7a9262..113a9fa7b43 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -189,7 +189,7 @@ export const FacilityHome = (props: any) => {
             <div className="flex flex-1 flex-col">
               <div className="flex items-start gap-4">
                 <div
-                  className={`group relative hidden h-[20rem] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:flex lg:h-[20rem] lg:w-[20rem] ${
+                  className={`group relative hidden h-[20rem] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:mr-2 md:flex lg:mr-6 lg:h-[20rem] lg:w-[20rem] ${
                     hasPermissionToEditCoverImage && "cursor-pointer"
                   }`}
                   onClick={() =>

From 840d3b816086b0f6bcf8d4766cede503689bc82c Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Thu, 21 Mar 2024 18:35:56 +0530
Subject: [PATCH 04/45] changed to justify-between

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

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 113a9fa7b43..83afb11b966 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -313,7 +313,7 @@ export const FacilityHome = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="mt-4 flex flex-col justify-start">
+          <div className="mt-4 flex flex-col justify-between">
             <div className="w-full md:w-auto">
               <DropdownMenu
                 id="manage-facility-dropdown"

From 4fbb75bbc243044523413760617422926f66a2ae Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Fri, 22 Mar 2024 19:01:24 +0530
Subject: [PATCH 05/45] changed to div height

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

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 83afb11b966..1de80e23545 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -313,7 +313,7 @@ export const FacilityHome = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="mt-4 flex flex-col justify-between">
+          <div className="mt-4 flex h-[20rem] flex-col justify-between">
             <div className="w-full md:w-auto">
               <DropdownMenu
                 id="manage-facility-dropdown"

From f1a91b41b0401c310aaf45c374d761f34946d7ec Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Sat, 23 Mar 2024 12:49:51 +0530
Subject: [PATCH 06/45] cover image rounded

---
 src/Components/Facility/FacilityHome.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 1de80e23545..60f384c999b 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -106,7 +106,7 @@ export const FacilityHome = (props: any) => {
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
     <div
       id="facility-coverimage"
-      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-black text-sm text-gray-300 opacity-0 transition-[opacity] hover:opacity-60 md:h-[88px]"
+      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-gray-300 opacity-0 transition-[opacity] hover:opacity-60 md:h-[88px]"
     >
       <CareIcon icon="l-pen" className="text-lg" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
@@ -117,7 +117,7 @@ export const FacilityHome = (props: any) => {
     <img
       src={`${facilityData?.read_cover_image_url}?imgKey=${imageKey}`}
       alt={facilityData?.name}
-      className="h-full w-full object-cover"
+      className="h-full w-full rounded-lg object-cover"
     />
   );
 
@@ -199,7 +199,7 @@ export const FacilityHome = (props: any) => {
                   {hasCoverImage ? (
                     <CoverImage />
                   ) : (
-                    <div className="flex h-[20rem] w-[88px] items-center justify-center bg-gray-200 font-medium text-gray-700 lg:h-[20rem] lg:w-[20rem]">
+                    <div className="flex h-[20rem] w-[88px] items-center justify-center rounded-lg bg-gray-200 font-medium text-gray-700 lg:h-[20rem] lg:w-[20rem]">
                       <svg
                         className="h-8 w-8 fill-current text-gray-500"
                         viewBox="0 0 40 32"
@@ -313,7 +313,7 @@ export const FacilityHome = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="mt-4 flex h-[20rem] flex-col justify-between">
+          <div className="flex h-[20rem] flex-col justify-between">
             <div className="w-full md:w-auto">
               <DropdownMenu
                 id="manage-facility-dropdown"

From dfb741eabbcdb5772b1d2d5b9ebcf8fbf2d6ea76 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Thu, 4 Apr 2024 18:07:02 +0530
Subject: [PATCH 07/45] Add reactjs-qr-code-reader package

---
 package-lock.json | 48 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  3 ++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 7a0f730ba75..62e07f8d35e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,6 +54,7 @@
         "react-redux": "^8.1.1",
         "react-transition-group": "^4.4.5",
         "react-webcam": "^7.1.1",
+        "reactjs-qr-code-reader": "^1.0.3",
         "read-excel-file": "^5.6.1",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
@@ -7135,6 +7136,23 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/@zxing/browser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.4.tgz",
+      "integrity": "sha512-WYjaav7St4sj/u/Km2llE4NU2Pq3JFIWnczr0tmyCC1KUlp08rV3qpu7iiEB4kOx/CgcCzrSebNnSmFt5B3IFg==",
+      "optionalDependencies": {
+        "@zxing/text-encoding": "^0.9.0"
+      },
+      "peerDependencies": {
+        "@zxing/library": "^0.20.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -20882,6 +20900,36 @@
         "react-dom": ">=16.2.0"
       }
     },
+    "node_modules/reactjs-qr-code-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reactjs-qr-code-reader/-/reactjs-qr-code-reader-1.0.3.tgz",
+      "integrity": "sha512-7Od+TsVYO8dPRIRAA61cCmtkkn2pm1ES5dSzsrepS+yn0nKvxjkgKy4Dh6UZmv47T5VAEhejqcCqkON461H4Bg==",
+      "dependencies": {
+        "@zxing/browser": "^0.1.4",
+        "webrtc-adapter": "^8.2.3"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/reactjs-qr-code-reader/node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
+    "node_modules/reactjs-qr-code-reader/node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 205612f3ac0..a526a7c84db 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",
+    "reactjs-qr-code-reader": "^1.0.3",
     "read-excel-file": "^5.6.1",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
@@ -186,4 +187,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "npm@10.5.0"
-}
\ No newline at end of file
+}

From e0f575852be6549a441b5e989bd5c9ba3302df61 Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Sun, 7 Apr 2024 02:33:23 +0530
Subject: [PATCH 08/45] fixed unusual behaviour of dropdown

---
 src/Components/Form/MultiSelectMenuV2.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 167a62b7d2b..0ed798fffe1 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -108,7 +108,8 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                             <MultiSelectOptionChip
                               key={index}
                               label={option.selectedLabel}
-                              onRemove={() => {
+                              onRemove={(e) => {
+                                e.stopPropagation();
                                 const updatedOptions = selectedOptions.filter(
                                   (selectedOption) =>
                                     selectedOption.value !== option.value
@@ -177,7 +178,7 @@ export default MultiSelectMenuV2;
 
 interface MultiSelectOptionChipProps {
   label: ReactNode;
-  onRemove?: () => void;
+  onRemove?: (e: any) => void;
 }
 
 export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => {

From 8cbeeac9b27f9ce467ce74bfa9ae6a8dad85e31f Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Sun, 7 Apr 2024 03:14:49 +0530
Subject: [PATCH 09/45] fix country codes dropdown

---
 .../Form/FormFields/PhoneNumberFormField.tsx  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index e86076d62af..05afdd69ea3 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -1,6 +1,6 @@
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 import FormField from "./FormField";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import {
   classNames,
   parsePhoneNumber,
@@ -34,6 +34,7 @@ export default function PhoneNumberFormField(props: Props) {
     code: "91",
   });
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const componentRef = useRef<HTMLDivElement>(null);
 
   const validator = useMemo(
     () => PhoneNumberValidator(props.types),
@@ -96,6 +97,23 @@ export default function PhoneNumberFormField(props: Props) {
     setValue(field.value || "+91");
   }, []);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        componentRef.current &&
+        !componentRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <FormField
       field={{
@@ -106,7 +124,7 @@ export default function PhoneNumberFormField(props: Props) {
         ),
       }}
     >
-      <div className="relative rounded-md shadow-sm">
+      <div className="relative rounded-md shadow-sm" ref={componentRef}>
         <div
           className="absolute inset-y-0 left-0 w-[4.5rem] cursor-pointer p-0.5"
           onClick={() => setIsOpen(!isOpen)}

From 32e4cd0ada9b79ab46d7fe4aeceb0ac6b8bb9949 Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Tue, 9 Apr 2024 16:11:01 +0530
Subject: [PATCH 10/45] new hook to control component

---
 src/Common/hooks/useClickOutside.ts           | 29 +++++++++++++++++++
 .../Form/FormFields/PhoneNumberFormField.tsx  | 24 +++------------
 2 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 src/Common/hooks/useClickOutside.ts

diff --git a/src/Common/hooks/useClickOutside.ts b/src/Common/hooks/useClickOutside.ts
new file mode 100644
index 00000000000..e3b8ea9af69
--- /dev/null
+++ b/src/Common/hooks/useClickOutside.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState, RefObject, useRef } from "react";
+
+function useClickOutside<T extends HTMLElement>(
+  initialIsOpen: boolean
+): [boolean, React.Dispatch<React.SetStateAction<boolean>>, RefObject<T>] {
+  const [isOpen, setIsOpen] = useState<boolean>(initialIsOpen);
+  const componentRef = useRef<T>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        componentRef.current &&
+        !componentRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return [isOpen, setIsOpen, componentRef];
+}
+
+export default useClickOutside;
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index 05afdd69ea3..b8b36a333f7 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -1,6 +1,6 @@
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 import FormField from "./FormField";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   classNames,
   parsePhoneNumber,
@@ -15,6 +15,7 @@ import {
   PhoneNumberType,
 } from "../FieldValidators";
 import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
+import useClickOutside from "../../../Common/hooks/useClickOutside";
 
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
@@ -33,8 +34,8 @@ export default function PhoneNumberFormField(props: Props) {
     name: "India",
     code: "91",
   });
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const componentRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen, componentRef] =
+    useClickOutside<HTMLDivElement>(false);
 
   const validator = useMemo(
     () => PhoneNumberValidator(props.types),
@@ -97,23 +98,6 @@ export default function PhoneNumberFormField(props: Props) {
     setValue(field.value || "+91");
   }, []);
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        componentRef.current &&
-        !componentRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
   return (
     <FormField
       field={{

From e61220a3c0aee870b44a71416dc734c068f7ffaf Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 14 Apr 2024 13:10:54 +0530
Subject: [PATCH 11/45] removed faulty qr code scanner package

---
 package-lock.json | 48 -----------------------------------------------
 package.json      |  1 -
 2 files changed, 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62e07f8d35e..7a0f730ba75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,7 +54,6 @@
         "react-redux": "^8.1.1",
         "react-transition-group": "^4.4.5",
         "react-webcam": "^7.1.1",
-        "reactjs-qr-code-reader": "^1.0.3",
         "read-excel-file": "^5.6.1",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
@@ -7136,23 +7135,6 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
-    "node_modules/@zxing/browser": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.4.tgz",
-      "integrity": "sha512-WYjaav7St4sj/u/Km2llE4NU2Pq3JFIWnczr0tmyCC1KUlp08rV3qpu7iiEB4kOx/CgcCzrSebNnSmFt5B3IFg==",
-      "optionalDependencies": {
-        "@zxing/text-encoding": "^0.9.0"
-      },
-      "peerDependencies": {
-        "@zxing/library": "^0.20.0"
-      }
-    },
-    "node_modules/@zxing/text-encoding": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
-      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
-      "optional": true
-    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -20900,36 +20882,6 @@
         "react-dom": ">=16.2.0"
       }
     },
-    "node_modules/reactjs-qr-code-reader": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/reactjs-qr-code-reader/-/reactjs-qr-code-reader-1.0.3.tgz",
-      "integrity": "sha512-7Od+TsVYO8dPRIRAA61cCmtkkn2pm1ES5dSzsrepS+yn0nKvxjkgKy4Dh6UZmv47T5VAEhejqcCqkON461H4Bg==",
-      "dependencies": {
-        "@zxing/browser": "^0.1.4",
-        "webrtc-adapter": "^8.2.3"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/reactjs-qr-code-reader/node_modules/sdp": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
-      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
-    },
-    "node_modules/reactjs-qr-code-reader/node_modules/webrtc-adapter": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
-      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
-      "dependencies": {
-        "sdp": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=6.0.0",
-        "npm": ">=3.10.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index a526a7c84db..58e0563e398 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,6 @@
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",
-    "reactjs-qr-code-reader": "^1.0.3",
     "read-excel-file": "^5.6.1",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",

From 92463205abe5514055e5c424f51b16288af5587e Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 14 Apr 2024 15:50:44 +0530
Subject: [PATCH 12/45] Update package-lock.json and package.json to include
 "@yudiel/react-qr-scanner" package version 2.0.0-beta.3. Update
 AssetsList.tsx to import Scanner from "@yudiel/react-qr-scanner" instead of
 QrReader.

---
 package-lock.json                    | 41 ++++++++++++++++++++++++++++
 package.json                         |  1 +
 src/Components/Assets/AssetsList.tsx | 23 ++++++++--------
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a0f730ba75..0418f57397f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@rescript/react": "^0.11.0",
         "@sentry/browser": "^7.57.0",
         "@yaireo/ui-range": "^2.1.15",
+        "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
         "axios": "^1.4.0",
         "browser-image-compression": "^2.0.2",
         "cross-env": "^7.0.3",
@@ -7135,6 +7136,38 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/@yudiel/react-qr-scanner": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-2.0.0-beta.3.tgz",
+      "integrity": "sha512-3zGssNoBXpSUdVmNPGhlyQS1V9snzKPlGk5JGOjNXPNUqVYjf/m8TTrU6cskPbL3dRUOGFctAs5rLeVB1UEhXw==",
+      "dependencies": {
+        "@zxing/library": "^0.20.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@zxing/library": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz",
+      "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==",
+      "dependencies": {
+        "ts-custom-error": "^3.2.1"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -23540,6 +23573,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
diff --git a/package.json b/package.json
index 58e0563e398..8a1f6b810d3 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@rescript/react": "^0.11.0",
     "@sentry/browser": "^7.57.0",
     "@yaireo/ui-range": "^2.1.15",
+    "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
     "cross-env": "^7.0.3",
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 9e21d1bfb04..887fb1ebbed 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -1,4 +1,4 @@
-import QrReader from "react-qr-reader";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import * as Notification from "../../Utils/Notifications.js";
 import { listAssets } from "../../Redux/actions";
 import { assetClassProps, AssetData } from "./AssetTypes";
@@ -156,20 +156,21 @@ const AssetsList = () => {
           <CareIcon icon="l-times" className="mr-1 text-lg" />
           Close Scanner
         </button>
-        <QrReader
-          delay={300}
-          onScan={async (value: string | null) => {
-            if (value) {
-              const assetId = await getAssetIdFromQR(value);
-              checkValidAssetId(assetId ?? value);
+        <Scanner
+          onResult={async (text) => {
+            if (text) {
+              const assetId = await getAssetIdFromQR(text);
+              checkValidAssetId(assetId ?? text);
             }
           }}
-          onError={(e) =>
+          onError={(e) => {
             Notification.Error({
               msg: e.message,
-            })
-          }
-          style={{ width: "100%" }}
+            });
+          }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
         <h2 className="self-center text-center text-lg">Scan Asset QR!</h2>
       </div>

From 2a895b66af394252c96ae8830d5ce8d5947f874e Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 14 Apr 2024 22:41:29 +0530
Subject: [PATCH 13/45] Update QR code scanner package and replace deprecated
 QrReader with Scanner component from "@yudiel/react-qr-scanner" package.

---
 src/Components/ABDM/LinkABHANumberModal.tsx |  2 +-
 src/Components/Common/QRScanner.tsx         | 21 +++++++++++----------
 src/Components/Facility/AssetCreate.tsx     | 13 +++++++------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
index 4aed5e0ee8f..d45129f5c4e 100644
--- a/src/Components/ABDM/LinkABHANumberModal.tsx
+++ b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -183,7 +183,7 @@ const ScanABHAQRSection = ({
           }
           setQrValue(value);
         }}
-        parse={async (value: string) => {
+        parse={async (value: string | null) => {
           if (!value) return;
           setIsLoading(true);
 
diff --git a/src/Components/Common/QRScanner.tsx b/src/Components/Common/QRScanner.tsx
index 4b744ba2eeb..3154acea6de 100644
--- a/src/Components/Common/QRScanner.tsx
+++ b/src/Components/Common/QRScanner.tsx
@@ -2,14 +2,14 @@ import * as Notification from "../../Utils/Notifications.js";
 
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import DialogModal from "./Dialog";
-import QrReader from "react-qr-reader";
 import TextFormField from "../Form/FormFields/TextFormField.js";
 import { useState } from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
 
 interface IQRScannerModalProps {
   show: boolean;
   onClose: () => void;
-  onScan: (scannedValue: any) => any;
+  onScan: (scannedValue: string | null) => void;
   description?: string;
   disabled?: boolean;
 }
@@ -32,15 +32,16 @@ const QRScannerModal = ({
         <h2 className="mb-4 self-center text-center text-lg">
           {description || "Scan QR code!"}
         </h2>
-        <QrReader
-          delay={300}
-          onScan={onScan}
-          onError={(e: any) =>
+        <Scanner
+          onResult={onScan}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
       </div>
     </DialogModal>
@@ -50,7 +51,7 @@ const QRScannerModal = ({
 interface IProps {
   value: string;
   onChange: (value: string) => void;
-  parse?: (scannedValue: any) => any;
+  parse?: (scannedValue: string | null) => void;
   className?: string;
   error?: string;
   label?: string;
@@ -92,8 +93,8 @@ const QRScanner = ({
         show={showScanner}
         disabled={disabled}
         onClose={() => setShowScanner(false)}
-        onScan={async (scannedValue: any) => {
-          const parsedValue = (await parse?.(scannedValue)) ?? null;
+        onScan={async (scannedValue) => {
+          const parsedValue = parse?.(scannedValue) ?? null;
           if (parsedValue) {
             onChange(parsedValue);
             setShowScanner(false);
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index a0fa23e74c4..9ccd2e9c219 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -18,7 +18,7 @@ import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import { LocationSelect } from "../Common/LocationSelect";
 import Page from "../Common/components/Page";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import QrReader from "react-qr-reader";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import SwitchV2 from "../Common/components/Switch";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
@@ -418,15 +418,16 @@ const AssetCreate = (props: AssetProps) => {
           <CareIcon icon="l-times" className="mr-2 text-lg" />
           {t("close_scanner")}
         </button>
-        <QrReader
-          delay={300}
-          onScan={(assetId: any) => (assetId ? parseAssetId(assetId) : null)}
-          onError={(e: any) =>
+        <Scanner
+          onResult={(assetId) => (assetId ? parseAssetId(assetId) : null)}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
         <h2 className="self-center text-center text-lg">
           {t("scan_asset_qr")}

From 41de7f7c07940c8aa320155dd05c46da413c829f Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 14 Apr 2024 22:45:31 +0530
Subject: [PATCH 14/45] Replaced deprecated package react-qr-reader with
 @yudiel/react-qr-scanner

---
 package-lock.json | 50 -----------------------------------------------
 package.json      |  1 -
 2 files changed, 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0418f57397f..5799bea363f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,6 @@
         "react-markdown": "^8.0.7",
         "react-pdf": "^7.7.1",
         "react-player": "^2.13.0",
-        "react-qr-reader": "^2.2.1",
         "react-redux": "^8.1.1",
         "react-transition-group": "^4.4.5",
         "react-webcam": "^7.1.1",
@@ -15406,11 +15405,6 @@
         "verror": "1.10.0"
       }
     },
-    "node_modules/jsqr": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
-      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -20755,20 +20749,6 @@
         "react": ">=16.6.0"
       }
     },
-    "node_modules/react-qr-reader": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-2.2.1.tgz",
-      "integrity": "sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==",
-      "dependencies": {
-        "jsqr": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "webrtc-adapter": "^7.2.1"
-      },
-      "peerDependencies": {
-        "react": "~16",
-        "react-dom": "~16"
-      }
-    },
     "node_modules/react-redux": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
@@ -21981,18 +21961,6 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/rtcpeerconnection-shim": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
-      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
-      "dependencies": {
-        "sdp": "^2.6.0"
-      },
-      "engines": {
-        "node": ">=6.0.0",
-        "npm": ">=3.10.0"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -22128,11 +22096,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/sdp": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
-      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -25914,19 +25877,6 @@
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
       "dev": true
     },
-    "node_modules/webrtc-adapter": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
-      "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==",
-      "dependencies": {
-        "rtcpeerconnection-shim": "^1.2.15",
-        "sdp": "^2.12.0"
-      },
-      "engines": {
-        "node": ">=6.0.0",
-        "npm": ">=3.10.0"
-      }
-    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/package.json b/package.json
index 8a1f6b810d3..2021c0440a2 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "react-markdown": "^8.0.7",
     "react-pdf": "^7.7.1",
     "react-player": "^2.13.0",
-    "react-qr-reader": "^2.2.1",
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",

From e5a4985047a9cbf3a671ac269b89d1898d4e1f8e Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Fri, 19 Apr 2024 05:11:01 +0530
Subject: [PATCH 15/45] code review

---
 src/Components/Form/MultiSelectMenuV2.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index b4fa99a148f..5fc466090a7 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -108,8 +108,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                             <MultiSelectOptionChip
                               key={index}
                               label={option.selectedLabel}
-                              onRemove={(e) => {
-                                e.stopPropagation();
+                              onRemove={() => {
                                 const updatedOptions = selectedOptions.filter(
                                   (selectedOption) =>
                                     selectedOption.value !== option.value,
@@ -178,17 +177,23 @@ export default MultiSelectMenuV2;
 
 interface MultiSelectOptionChipProps {
   label: ReactNode;
-  onRemove?: (e: any) => void;
+  onRemove?: () => void;
 }
 
-export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => {
+export const MultiSelectOptionChip = ({
+  label,
+  onRemove,
+}: MultiSelectOptionChipProps) => {
   return (
     <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
-      <p className="py-1">{props.label}</p>
-      {props.onRemove && (
+      <p className="py-1">{label}</p>
+      {onRemove && (
         <p
           className="cursor-pointer rounded-full hover:bg-white"
-          onClick={props.onRemove}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
         >
           <CareIcon icon="l-times" className="text-base" />
         </p>

From 1aa9753e448ac6db01d8d98451a6ab2d755d9f3a Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Fri, 19 Apr 2024 06:09:43 +0530
Subject: [PATCH 16/45] code review

---
 src/Common/hooks/useClickOutside.ts           |  29 -----
 .../Form/FormFields/PhoneNumberFormField.tsx  | 102 ++++++++++--------
 2 files changed, 57 insertions(+), 74 deletions(-)
 delete mode 100644 src/Common/hooks/useClickOutside.ts

diff --git a/src/Common/hooks/useClickOutside.ts b/src/Common/hooks/useClickOutside.ts
deleted file mode 100644
index e3b8ea9af69..00000000000
--- a/src/Common/hooks/useClickOutside.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect, useState, RefObject, useRef } from "react";
-
-function useClickOutside<T extends HTMLElement>(
-  initialIsOpen: boolean
-): [boolean, React.Dispatch<React.SetStateAction<boolean>>, RefObject<T>] {
-  const [isOpen, setIsOpen] = useState<boolean>(initialIsOpen);
-  const componentRef = useRef<T>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        componentRef.current &&
-        !componentRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  return [isOpen, setIsOpen, componentRef];
-}
-
-export default useClickOutside;
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index fe27c4c463c..d342f71c169 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -15,7 +15,7 @@ import {
   PhoneNumberType,
 } from "../FieldValidators";
 import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
-import useClickOutside from "../../../Common/hooks/useClickOutside";
+import { Popover } from "@headlessui/react";
 
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
@@ -34,9 +34,7 @@ export default function PhoneNumberFormField(props: Props) {
     name: "India",
     code: "91",
   });
-  const [isOpen, setIsOpen, componentRef] =
-    useClickOutside<HTMLDivElement>(false);
-
+  const [isOpen, setIsOpen] = useState(false);
   const validator = useMemo(
     () => PhoneNumberValidator(props.types),
     [props.types],
@@ -108,47 +106,61 @@ export default function PhoneNumberFormField(props: Props) {
         ),
       }}
     >
-      <div className="relative rounded-md shadow-sm" ref={componentRef}>
-        <div
-          className="absolute inset-y-0 left-0 w-[4.5rem] cursor-pointer p-0.5"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <span className="flex h-full items-center rounded-md bg-slate-100 pl-4 ">
-            {country?.flag ?? "🇮🇳"}
-          </span>
-          {isOpen ? (
-            <CareIcon
-              icon="l-angle-up"
-              className="absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold"
-            />
-          ) : (
-            <CareIcon
-              icon="l-angle-down"
-              className="absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold"
-            />
-          )}
-        </div>
-
-        <input
-          type="tel"
-          id={field.id}
-          name={field.name}
-          autoComplete={props.autoComplete ?? "tel"}
-          className={classNames(
-            "cui-input-base h-full pl-20 tracking-widest sm:leading-6 ",
-            field.error && "border-danger-500",
-            field.className,
-          )}
-          maxLength={field.value?.startsWith("1800") ? 11 : 15}
-          placeholder={props.placeholder}
-          value={formatPhoneNumber(field.value, props.types)}
-          onChange={(e) => setValue(e.target.value)}
-          disabled={field.disabled}
-          onBlur={() => setError(validate(field.value, "blur"))}
-        />
-        {isOpen && (
-          <CountryCodesList handleCountryChange={handleCountryChange} />
-        )}
+      <div className="relative rounded-md shadow-sm">
+        <Popover>
+          {({ open }: { open: boolean }) => {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useEffect(() => {
+              setIsOpen(open);
+            }, [open]);
+            return (
+              <>
+                <Popover.Button className="absolute h-full">
+                  <div className="absolute inset-y-0 left-0 m-0.5 flex w-[4.5rem] cursor-pointer items-center justify-around bg-slate-100">
+                    <span className=" rounded-md pl-4">
+                      {country?.flag ?? "🇮🇳"}
+                    </span>
+                    {isOpen ? (
+                      <CareIcon
+                        icon="l-angle-up"
+                        className="text-2xl font-bold"
+                      />
+                    ) : (
+                      <CareIcon
+                        icon="l-angle-down"
+                        className="text-2xl font-bold"
+                      />
+                    )}
+                  </div>
+                </Popover.Button>
+                <input
+                  type="tel"
+                  id={field.id}
+                  name={field.name}
+                  autoComplete={props.autoComplete ?? "tel"}
+                  className={classNames(
+                    "cui-input-base h-full pl-20 tracking-widest sm:leading-6 ",
+                    field.error && "border-danger-500",
+                    field.className,
+                  )}
+                  maxLength={field.value?.startsWith("1800") ? 11 : 15}
+                  placeholder={props.placeholder}
+                  value={formatPhoneNumber(field.value, props.types)}
+                  onChange={(e) => setValue(e.target.value)}
+                  disabled={field.disabled}
+                  onBlur={() => setError(validate(field.value, "blur"))}
+                />
+                {isOpen && (
+                  <Popover.Panel className="w-full">
+                    <CountryCodesList
+                      handleCountryChange={handleCountryChange}
+                    />
+                  </Popover.Panel>
+                )}
+              </>
+            );
+          }}
+        </Popover>
       </div>
     </FormField>
   );

From 715557e0c6336dfc0cae8685c7e178f9a9735843 Mon Sep 17 00:00:00 2001
From: Kshitij Verma <kshitijv250@gmail.com>
Date: Fri, 19 Apr 2024 12:57:21 +0530
Subject: [PATCH 17/45] changed transition to transition-opacity

---
 src/Components/Facility/FacilityHome.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 1933546caa1..5c40063c2f8 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -106,7 +106,7 @@ export const FacilityHome = (props: any) => {
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
     <div
       id="facility-coverimage"
-      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-gray-300 opacity-0 transition-[opacity] hover:opacity-60 md:h-[88px]"
+      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-gray-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
     >
       <CareIcon icon="l-pen" className="text-lg" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
@@ -189,7 +189,7 @@ export const FacilityHome = (props: any) => {
             <div className="flex flex-1 flex-col">
               <div className="flex items-start gap-4">
                 <div
-                  className={`group relative hidden h-[20rem] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:mr-2 md:flex lg:mr-6 lg:h-[20rem] lg:w-[20rem] ${
+                  className={`group relative hidden h-80 w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:mr-2 md:flex lg:mr-6 lg:h-80 lg:w-80 ${
                     hasPermissionToEditCoverImage && "cursor-pointer"
                   }`}
                   onClick={() =>
@@ -199,7 +199,7 @@ export const FacilityHome = (props: any) => {
                   {hasCoverImage ? (
                     <CoverImage />
                   ) : (
-                    <div className="flex h-[20rem] w-[88px] items-center justify-center rounded-lg bg-gray-200 font-medium text-gray-700 lg:h-[20rem] lg:w-[20rem]">
+                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-gray-200 font-medium text-gray-700 lg:h-80 lg:w-80">
                       <svg
                         className="h-8 w-8 fill-current text-gray-500"
                         viewBox="0 0 40 32"
@@ -313,7 +313,7 @@ export const FacilityHome = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="flex h-[20rem] flex-col justify-between">
+          <div className="flex h-80 flex-col justify-between">
             <div className="w-full md:w-auto">
               <DropdownMenu
                 id="manage-facility-dropdown"

From 8e52c2c4c7427c58611ed8b020c0805600e2d14f Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Fri, 19 Apr 2024 14:25:37 +0530
Subject: [PATCH 18/45] removed use of usestate for popover control

---
 .../Form/FormFields/PhoneNumberFormField.tsx  | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index d342f71c169..a22254179f8 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -34,7 +34,6 @@ export default function PhoneNumberFormField(props: Props) {
     name: "India",
     code: "91",
   });
-  const [isOpen, setIsOpen] = useState(false);
   const validator = useMemo(
     () => PhoneNumberValidator(props.types),
     [props.types],
@@ -75,7 +74,6 @@ export default function PhoneNumberFormField(props: Props) {
   const handleCountryChange = (value: CountryData): void => {
     setCountry(value);
     setValue(conditionPhoneCode(value.code));
-    setIsOpen(false);
   };
 
   useEffect(() => {
@@ -109,28 +107,17 @@ export default function PhoneNumberFormField(props: Props) {
       <div className="relative rounded-md shadow-sm">
         <Popover>
           {({ open }: { open: boolean }) => {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useEffect(() => {
-              setIsOpen(open);
-            }, [open]);
             return (
               <>
                 <Popover.Button className="absolute h-full">
                   <div className="absolute inset-y-0 left-0 m-0.5 flex w-[4.5rem] cursor-pointer items-center justify-around bg-slate-100">
-                    <span className=" rounded-md pl-4">
+                    <span className="rounded-md pl-4">
                       {country?.flag ?? "🇮🇳"}
                     </span>
-                    {isOpen ? (
-                      <CareIcon
-                        icon="l-angle-up"
-                        className="text-2xl font-bold"
-                      />
-                    ) : (
-                      <CareIcon
-                        icon="l-angle-down"
-                        className="text-2xl font-bold"
-                      />
-                    )}
+                    <CareIcon
+                      icon="l-angle-down"
+                      className={`text-2xl font-bold ${open && "rotate-180"}`}
+                    />
                   </div>
                 </Popover.Button>
                 <input
@@ -150,13 +137,14 @@ export default function PhoneNumberFormField(props: Props) {
                   disabled={field.disabled}
                   onBlur={() => setError(validate(field.value, "blur"))}
                 />
-                {isOpen && (
-                  <Popover.Panel className="w-full">
+                <Popover.Panel className="w-full">
+                  {({ close }) => (
                     <CountryCodesList
                       handleCountryChange={handleCountryChange}
+                      onClose={close}
                     />
-                  </Popover.Panel>
-                )}
+                  )}
+                </Popover.Panel>
               </>
             );
           }}
@@ -208,7 +196,13 @@ const formatPhoneNumber = (value: string, types: PhoneNumberType[]) => {
   return phoneNumber ? formatPhoneNumberUtil(phoneNumber) : value;
 };
 
-const CountryCodesList = ({ handleCountryChange }: any) => {
+const CountryCodesList = ({
+  handleCountryChange,
+  onClose,
+}: {
+  handleCountryChange: (value: CountryData) => void;
+  onClose: () => void;
+}) => {
   const [searchValue, setSearchValue] = useState<string>("");
 
   return (
@@ -246,6 +240,7 @@ const CountryCodesList = ({ handleCountryChange }: any) => {
               className="flex cursor-pointer items-center gap-2 rounded-md p-2 hover:bg-primary-100 hover:text-primary-600"
               onClick={() => {
                 handleCountryChange({ flag, name, code });
+                onClose();
               }}
             >
               <span>{flag}</span>
@@ -261,6 +256,7 @@ const CountryCodesList = ({ handleCountryChange }: any) => {
           className="flex cursor-pointer items-center gap-2 rounded-md p-2 hover:bg-primary-100 hover:text-primary-600"
           onClick={() => {
             handleCountryChange({ flag: "📞", name: "Support", code: "1800" });
+            onClose();
           }}
         >
           <span>📞</span>
@@ -272,6 +268,7 @@ const CountryCodesList = ({ handleCountryChange }: any) => {
           className="flex cursor-pointer items-center gap-2 rounded-md p-2 hover:bg-primary-100 hover:text-primary-600"
           onClick={() => {
             handleCountryChange({ flag: "🌍", name: "Other", code: "+" });
+            onClose();
           }}
         >
           <span>🌍</span>

From 56627e6945280907ab85b80011a4b79b708406ac Mon Sep 17 00:00:00 2001
From: Aakash Singh <mail@singhaakash.dev>
Date: Fri, 19 Apr 2024 19:39:54 +0530
Subject: [PATCH 19/45] Add trailing slashes to api routes to avoid 301
 responses from care

---
 src/Redux/api.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 4dd3480ec8c..eb924f03c51 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -178,7 +178,7 @@ const routes = {
   },
 
   token_verify: {
-    path: "/api/v1/auth/token/verify",
+    path: "/api/v1/auth/token/verify/",
     method: "POST",
   },
 
@@ -283,7 +283,7 @@ const routes = {
   },
 
   updateUser: {
-    path: "/api/v1/users",
+    path: "/api/v1/users/",
     method: "PUT",
   },
 
@@ -342,7 +342,7 @@ const routes = {
   },
 
   getAllFacilities: {
-    path: "/api/v1/getallfacilities",
+    path: "/api/v1/getallfacilities/",
     TRes: Type<PaginatedResponse<FacilityModel>>(),
   },
 
@@ -707,7 +707,7 @@ const routes = {
   // Patient
 
   searchPatient: {
-    path: "/api/v1/patient/search",
+    path: "/api/v1/patient/search/",
     TRes: Type<PaginatedResponse<DupPatientModel>>(),
   },
   patientList: {
@@ -942,7 +942,7 @@ const routes = {
     TRes: Type<PaginatedResponse<InventorySummaryResponse>>(),
   },
   getItemName: {
-    path: "/api/v1/items",
+    path: "/api/v1/items/",
     method: "GET",
   },
   flagInventoryItem: {
@@ -960,7 +960,7 @@ const routes = {
     method: "POST",
   },
   dischargeSummaryPreview: {
-    path: "/api/v1/consultation/{external_id}/preview_discharge_summary",
+    path: "/api/v1/consultation/{external_id}/preview_discharge_summary/",
     method: "GET",
   },
   dischargeSummaryEmail: {
@@ -992,7 +992,7 @@ const routes = {
     TRes: Type<UserModel>(),
   },
   updateUserDetails: {
-    path: "/api/v1/users",
+    path: "/api/v1/users/",
     method: "PUT",
   },
 
@@ -1185,7 +1185,7 @@ const routes = {
     TBody: Type<Partial<IResource>>(),
   },
   deleteResourceRecord: {
-    path: "/api/v1/resource/{id}",
+    path: "/api/v1/resource/{id}/",
     method: "DELETE",
     TRes: Type<{
       detail?: string;
@@ -1274,7 +1274,7 @@ const routes = {
     TRes: Type<PaginatedResponse<AssetTransaction>>(),
   },
   getAssetTransaction: {
-    path: "/api/v1/asset_transaction/{id}",
+    path: "/api/v1/asset_transaction/{id}/",
     method: "GET",
   },
 
@@ -1286,7 +1286,7 @@ const routes = {
     TRes: Type<PaginatedResponse<AssetService>>(),
   },
   getAssetService: {
-    path: "/api/v1/asset/{asset_external_id}/service_records/{external_id}",
+    path: "/api/v1/asset/{asset_external_id}/service_records/{external_id}/",
     method: "GET",
   },
   updateAssetService: {

From 27231f54873c45511e669be224e57bbd9c671d6c Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Sun, 21 Apr 2024 23:08:10 +0530
Subject: [PATCH 20/45] part-1 discharge reason

---
 .../e2e/patient_spec/patient_discharge.cy.ts  | 83 +++++++++++++++++++
 .../pageobject/Patient/PatientDischarge.ts    | 23 +++++
 .../ConsultationUpdatesTab.tsx                | 51 ++++++------
 src/Components/Form/AutoCompleteAsync.tsx     |  6 +-
 4 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 cypress/e2e/patient_spec/patient_discharge.cy.ts
 create mode 100644 cypress/pageobject/Patient/PatientDischarge.ts

diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
new file mode 100644
index 00000000000..d53629e276c
--- /dev/null
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -0,0 +1,83 @@
+import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
+import PatientDischarge from "../../pageobject/Patient/PatientDischarge";
+import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
+
+describe("Patient Discharge based on multiple reason", () => {
+  const loginPage = new LoginPage();
+  const patientPage = new PatientPage();
+  const patientDischarge = new PatientDischarge();
+  const patientPrescription = new PatientPrescription();
+  const patientDischargeReason1 = "Recovered";
+  const patientDischargeReason2 = "Referred";
+  //const patientDischargeReason3 = "Expired";
+  //const patientDischargeReason4 = "LAMA";
+  const patientDischargeAdvice = "Discharge Advice";
+  const patientMedicine = "ZOLE";
+  const referringFacility = "Dummy Shifting Center, Ernakulam";
+  const referringFreetextFacility = "Aster Mims";
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.awaitUrl("/patients");
+  });
+
+  it("Discharge a recovered patient with all fields", () => {
+    patientPage.visitPatient("Dummy Patient 6");
+    patientDischarge.clickDischarge();
+    patientDischarge.selectDischargeReason(patientDischargeReason1);
+    patientDischarge.typeDischargeNote(patientDischargeAdvice);
+    // Prescribe a medicine for the patient
+    patientPrescription.clickAddPrescription();
+    patientPrescription.interceptMedibase();
+    patientPrescription.selectMedicinebox();
+    patientPrescription.selectMedicine(patientMedicine);
+    patientPrescription.enterDosage("4");
+    patientPrescription.selectDosageFrequency("Twice daily");
+    cy.submitButton("Submit");
+    cy.verifyNotification("Medicine prescribed");
+    // submit the discharge pop-up
+    cy.submitButton("Confirm Discharge");
+    cy.verifyNotification("Patient Discharged Successfully");
+    // Verify the dashboard and discharge information
+    cy.verifyContentPresence("#discharge-information", [
+      patientDischargeReason1,
+      patientDischargeAdvice,
+      patientMedicine,
+    ]);
+    // verify the medicine administration is blocked
+  });
+
+  it("Discharge patient with referred reason to a facility", () => {
+    patientPage.visitPatient("Dummy Patient 6");
+    patientDischarge.clickDischarge();
+    patientDischarge.selectDischargeReason(patientDischargeReason2);
+    patientDischarge.typeDischargeNote(patientDischargeAdvice);
+    // select a registrated facility from dropdown and clear
+    patientDischarge.typeReferringFacility(referringFacility);
+    patientDischarge.clickClearButton();
+    // select a non-registered facility and perform the discharge
+    patientDischarge.typeReferringFacility(referringFreetextFacility);
+    cy.wait(3000);
+    patientDischarge.typeDischargeNote(patientDischargeAdvice);
+    cy.submitButton("Confirm Discharge");
+    cy.verifyNotification("Patient Discharged Successfully");
+    // Verify the dashboard and discharge information
+    cy.verifyContentPresence("#discharge-information", [
+      patientDischargeReason2,
+      patientDischargeAdvice,
+      referringFreetextFacility,
+    ]);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});
diff --git a/cypress/pageobject/Patient/PatientDischarge.ts b/cypress/pageobject/Patient/PatientDischarge.ts
new file mode 100644
index 00000000000..102c87c29e9
--- /dev/null
+++ b/cypress/pageobject/Patient/PatientDischarge.ts
@@ -0,0 +1,23 @@
+class PatientDischarge {
+  clickDischarge() {
+    cy.clickAndSelectOption("#show-more", "Discharge from CARE");
+  }
+
+  selectDischargeReason(reason: string) {
+    cy.clickAndSelectOption("#discharge_reason", reason);
+  }
+
+  typeDischargeNote(note: string) {
+    cy.get("#discharge_notes").type(note);
+  }
+
+  typeReferringFacility(facility: string) {
+    cy.searchAndSelectOption("#input[name='referred_to']", facility);
+  }
+
+  clickClearButton() {
+    cy.get("#clear-button").click();
+  }
+}
+
+export default PatientDischarge;
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 950ae89b62e..72f2b31eb78 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -58,24 +58,24 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
         listAssetBeds({
           facility: props.consultationData.facility as any,
           bed: props.consultationData.current_bed?.bed_object.id,
-        }),
+        })
       );
       const assetBeds = assetBedRes?.data?.results as AssetBedModel[];
 
       const monitorBedData = assetBeds?.find(
-        (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR,
+        (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR
       );
 
       setMonitorBedData(monitorBedData);
       if (monitorBedData?.asset_object) {
         setHL7SocketUrl(
-          getVitalsMonitorSocketUrl(monitorBedData?.asset_object),
+          getVitalsMonitorSocketUrl(monitorBedData?.asset_object)
         );
       }
 
       const consultationBedVentilator =
         props.consultationData?.current_bed?.assets_objects?.find(
-          (i) => i.asset_class === AssetClass.VENTILATOR,
+          (i) => i.asset_class === AssetClass.VENTILATOR
         );
 
       let ventilatorBedData;
@@ -86,14 +86,14 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
         } as AssetBedModel;
       } else {
         ventilatorBedData = assetBeds?.find(
-          (i) => i.asset_object.asset_class === AssetClass.VENTILATOR,
+          (i) => i.asset_object.asset_class === AssetClass.VENTILATOR
         );
       }
 
       setVentilatorBedData(ventilatorBedData);
       if (ventilatorBedData?.asset_object) {
         setVentilatorSocketUrl(
-          getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object),
+          getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object)
         );
       }
     };
@@ -202,7 +202,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                   "lg:col-span-2"
                 }`}
               >
-                <div className="px-4 py-5 sm:p-6">
+                <div className="px-4 py-5 sm:p-6" id="discharge-information">
                   <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
                     Discharge Information
                   </h3>
@@ -212,8 +212,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       <span className="font-semibold">
                         {DISCHARGE_REASONS.find(
                           (d) =>
-                            d.id ===
-                            props.consultationData.new_discharge_reason,
+                            d.id === props.consultationData.new_discharge_reason
                         )?.text ?? "--"}
                       </span>
                     </div>
@@ -238,7 +237,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.discharge_date
                               ? formatDate(
-                                  props.consultationData.discharge_date,
+                                  props.consultationData.discharge_date
                                 )
                               : "--/--/---- --:-- --"}
                           </span>
@@ -275,7 +274,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.death_datetime
                               ? formatDateTime(
-                                  props.consultationData.death_datetime,
+                                  props.consultationData.death_datetime
                                 )
                               : "--:--"}
                           </span>
@@ -296,7 +295,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       </div>
                     )}
                     {[2, 4].includes(
-                      props.consultationData.new_discharge_reason ?? 0,
+                      props.consultationData.new_discharge_reason ?? 0
                     ) && (
                       <div className="grid gap-4">
                         <div>
@@ -304,7 +303,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.discharge_date
                               ? formatDateTime(
-                                  props.consultationData.discharge_date,
+                                  props.consultationData.discharge_date
                                 )
                               : "--/--/---- --:-- --"}
                           </span>
@@ -341,12 +340,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                                 key={index}
                                 text={
                                   SYMPTOM_CHOICES.find(
-                                    (choice) => choice.id === symptom,
+                                    (choice) => choice.id === symptom
                                   )?.text ?? "Err. Unknown"
                                 }
                                 size="small"
                               />
-                            ),
+                            )
                           )}
                         </div>
                         {props.consultationData.last_daily_round
@@ -364,7 +363,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <span className="text-xs font-semibold leading-relaxed text-gray-800">
                           from{" "}
                           {formatDate(
-                            props.consultationData.last_daily_round.taken_at,
+                            props.consultationData.last_daily_round.taken_at
                           )}
                         </span>
                       </>
@@ -380,12 +379,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             key={index}
                             text={
                               SYMPTOM_CHOICES.find(
-                                (choice) => choice.id === symptom,
+                                (choice) => choice.id === symptom
                               )?.text ?? "Err. Unknown"
                             }
                             size="small"
                           />
-                        ),
+                        )
                       )}
                     </div>
                     {props.consultationData.other_symptoms && (
@@ -541,7 +540,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                                 : formatDateTime(String(procedure.time))}
                             </td>
                           </tr>
-                        ),
+                        )
                       )}
                     </tbody>
                   </table>
@@ -559,7 +558,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     Intubation Date{" - "}
                     <span className="font-semibold">
                       {formatDateTime(
-                        props.consultationData.intubation_start_date,
+                        props.consultationData.intubation_start_date
                       )}
                     </span>
                   </div>
@@ -568,7 +567,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     <span className="font-semibold">
                       {props.consultationData.intubation_end_date &&
                         formatDateTime(
-                          props.consultationData.intubation_end_date,
+                          props.consultationData.intubation_end_date
                         )}
                     </span>
                   </div>
@@ -618,7 +617,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           </span>
                         </p>
                       </div>
-                    ),
+                    )
                   )}
                 </div>
               </div>
@@ -661,7 +660,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       {Math.sqrt(
                         (Number(props.consultationData.weight) *
                           Number(props.consultationData.height)) /
-                          3600,
+                          3600
                       ).toFixed(2)}{" "}
                       m<sup>2</sup>
                     </span>
@@ -677,7 +676,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             </div>
             {(
               props.consultationData.consent_records?.filter(
-                (record) => record.deleted !== true,
+                (record) => record.deleted !== true
               ) || []
             ).length > 0 && (
               <>
@@ -692,13 +691,13 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <div className="font-bold">
                           {
                             CONSENT_TYPE_CHOICES.find(
-                              (c) => c.id === record.type,
+                              (c) => c.id === record.type
                             )?.text
                           }{" "}
                           {record.patient_code_status &&
                             `( ${
                               CONSENT_PATIENT_CODE_STATUS_CHOICES.find(
-                                (c) => c.id === record.patient_code_status,
+                                (c) => c.id === record.patient_code_status
                               )?.text
                             } )`}
                         </div>
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index b7660b3dcb7..2102f254480 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -65,7 +65,7 @@ const AutoCompleteAsync = (props: Props) => {
         setData(data?.slice(0, showNOptions) || []);
         setLoading(false);
       }, debounceTime),
-    [fetchData, showNOptions, debounceTime],
+    [fetchData, showNOptions, debounceTime]
   );
 
   useEffect(() => {
@@ -107,7 +107,7 @@ const AutoCompleteAsync = (props: Props) => {
               <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
                   {hasSelection && !loading && !required && (
-                    <div className="tooltip">
+                    <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
                         className="mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
@@ -175,7 +175,7 @@ const AutoCompleteAsync = (props: Props) => {
                   label={optionLabel(option)}
                   onRemove={() =>
                     onChange(
-                      selected.filter((item: any) => item.id !== option.id),
+                      selected.filter((item: any) => item.id !== option.id)
                     )
                   }
                 />

From 4c1b3d4dd4a9a4128cad9073cb9d8162562a0354 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Sun, 21 Apr 2024 23:08:45 +0530
Subject: [PATCH 21/45] part-1 discharge reason

---
 cypress/e2e/patient_spec/patient_discharge.cy.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
index d53629e276c..b1a0c70c5e1 100644
--- a/cypress/e2e/patient_spec/patient_discharge.cy.ts
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -52,7 +52,6 @@ describe("Patient Discharge based on multiple reason", () => {
       patientDischargeAdvice,
       patientMedicine,
     ]);
-    // verify the medicine administration is blocked
   });
 
   it("Discharge patient with referred reason to a facility", () => {

From 04d5f7ecf1b565e1fab892a5713892c4a2af09e1 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 00:58:04 +0530
Subject: [PATCH 22/45] fix id

---
 cypress/pageobject/Patient/PatientDischarge.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/pageobject/Patient/PatientDischarge.ts b/cypress/pageobject/Patient/PatientDischarge.ts
index 102c87c29e9..2000354b944 100644
--- a/cypress/pageobject/Patient/PatientDischarge.ts
+++ b/cypress/pageobject/Patient/PatientDischarge.ts
@@ -1,6 +1,8 @@
 class PatientDischarge {
   clickDischarge() {
-    cy.clickAndSelectOption("#show-more", "Discharge from CARE");
+    cy.get("#show-more").scrollIntoView();
+    cy.verifyAndClickElement("#show-more", "Manage Patient");
+    cy.verifyAndClickElement("#show-more", "Discharge from CARE");
   }
 
   selectDischargeReason(reason: string) {

From cc0b17c8555a64eff6af50d75159614e643fae34 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 01:10:33 +0530
Subject: [PATCH 23/45] debug

---
 cypress/e2e/patient_spec/patient_discharge.cy.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
index b1a0c70c5e1..2bbc0e59557 100644
--- a/cypress/e2e/patient_spec/patient_discharge.cy.ts
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -30,7 +30,7 @@ describe("Patient Discharge based on multiple reason", () => {
   });
 
   it("Discharge a recovered patient with all fields", () => {
-    patientPage.visitPatient("Dummy Patient 6");
+    patientPage.visitPatient("Dummy Patient 16");
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason1);
     patientDischarge.typeDischargeNote(patientDischargeAdvice);
@@ -43,9 +43,13 @@ describe("Patient Discharge based on multiple reason", () => {
     patientPrescription.selectDosageFrequency("Twice daily");
     cy.submitButton("Submit");
     cy.verifyNotification("Medicine prescribed");
+    cy.wait(2000);
+    cy.closeNotification();
     // submit the discharge pop-up
     cy.submitButton("Confirm Discharge");
+    cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
+    cy.closeNotification();
     // Verify the dashboard and discharge information
     cy.verifyContentPresence("#discharge-information", [
       patientDischargeReason1,
@@ -55,7 +59,7 @@ describe("Patient Discharge based on multiple reason", () => {
   });
 
   it("Discharge patient with referred reason to a facility", () => {
-    patientPage.visitPatient("Dummy Patient 6");
+    patientPage.visitPatient("Dummy Patient 15");
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason2);
     patientDischarge.typeDischargeNote(patientDischargeAdvice);
@@ -67,7 +71,9 @@ describe("Patient Discharge based on multiple reason", () => {
     cy.wait(3000);
     patientDischarge.typeDischargeNote(patientDischargeAdvice);
     cy.submitButton("Confirm Discharge");
+    cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
+    cy.closeNotification();
     // Verify the dashboard and discharge information
     cy.verifyContentPresence("#discharge-information", [
       patientDischargeReason2,

From e7ab4d549dc54b3da8ae9613bb9a50237b4def20 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 01:29:26 +0530
Subject: [PATCH 24/45] changed the id

---
 .../pageobject/Patient/PatientDischarge.ts    |  2 +-
 src/Components/Facility/DischargeModal.tsx    | 36 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/cypress/pageobject/Patient/PatientDischarge.ts b/cypress/pageobject/Patient/PatientDischarge.ts
index 2000354b944..bcddab45902 100644
--- a/cypress/pageobject/Patient/PatientDischarge.ts
+++ b/cypress/pageobject/Patient/PatientDischarge.ts
@@ -14,7 +14,7 @@ class PatientDischarge {
   }
 
   typeReferringFacility(facility: string) {
-    cy.searchAndSelectOption("#input[name='referred_to']", facility);
+    cy.searchAndSelectOption("#facility-referredto", facility);
   }
 
   clickClearButton() {
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 7b170379066..1e8fe6d4b03 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -79,7 +79,7 @@ const DischargeModal = ({
         ordering: "-modified_date",
         use: "claim",
         consultation: consultationData.id,
-      }),
+      })
     );
 
     if (res?.data?.results?.length > 0) {
@@ -151,8 +151,8 @@ const DischargeModal = ({
           discharge: value,
           discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
         },
-        { id: consultationData.id },
-      ),
+        { id: consultationData.id }
+      )
     );
 
     setIsSendingDischargeApi(false);
@@ -211,19 +211,21 @@ const DischargeModal = ({
         {preDischargeForm.new_discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Referred")?.id && (
           <>
-            <FieldLabel>Referred to</FieldLabel>
-            <FacilitySelect
-              name="referred_to"
-              setSelected={(selected) =>
-                handleFacilitySelect(selected as FacilityModel | undefined)
-              }
-              selected={facility ?? null}
-              showAll
-              freeText
-              multiple={false}
-              errors={errors?.referred_to}
-              className="mb-4"
-            />
+            <div id="referred_to">
+              <FieldLabel>Referred to</FieldLabel>
+              <FacilitySelect
+                name="referred_to"
+                setSelected={(selected) =>
+                  handleFacilitySelect(selected as FacilityModel | undefined)
+                }
+                selected={facility ?? null}
+                showAll
+                freeText
+                multiple={false}
+                errors={errors?.referred_to}
+                className="mb-4"
+              />
+            </div>
           </>
         )}
         <TextAreaFormField
@@ -279,7 +281,7 @@ const DischargeModal = ({
           }}
           required
           min={dayjs(consultationData?.encounter_date).format(
-            "YYYY-MM-DDTHH:mm",
+            "YYYY-MM-DDTHH:mm"
           )}
           max={dayjs().format("YYYY-MM-DDTHH:mm")}
           error={

From 846250834c4c6ca20913fed307b34f18eeeb06ab Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 17:50:58 +0530
Subject: [PATCH 25/45] FINAL part

---
 .../e2e/patient_spec/patient_discharge.cy.ts  | 89 +++++++++++++------
 .../pageobject/Patient/PatientDischarge.ts    |  4 +
 src/Components/Facility/DischargeModal.tsx    |  2 +-
 3 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
index 2bbc0e59557..9c66e8c1c14 100644
--- a/cypress/e2e/patient_spec/patient_discharge.cy.ts
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -11,12 +11,14 @@ describe("Patient Discharge based on multiple reason", () => {
   const patientPrescription = new PatientPrescription();
   const patientDischargeReason1 = "Recovered";
   const patientDischargeReason2 = "Referred";
-  //const patientDischargeReason3 = "Expired";
-  //const patientDischargeReason4 = "LAMA";
+  const patientDischargeReason3 = "Expired";
+  const patientDischargeReason4 = "LAMA";
   const patientDischargeAdvice = "Discharge Advice";
   const patientMedicine = "ZOLE";
   const referringFacility = "Dummy Shifting Center, Ernakulam";
   const referringFreetextFacility = "Aster Mims";
+  const patientDeathCause = "Cause Of Death";
+  const doctorName = "Custom Doctor";
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();
@@ -29,37 +31,42 @@ describe("Patient Discharge based on multiple reason", () => {
     cy.awaitUrl("/patients");
   });
 
-  it("Discharge a recovered patient with all fields", () => {
-    patientPage.visitPatient("Dummy Patient 16");
+  it("Discharge a LAMA patient in the consultation", () => {
+    patientPage.visitPatient("Dummy Patient 18");
     patientDischarge.clickDischarge();
-    patientDischarge.selectDischargeReason(patientDischargeReason1);
-    patientDischarge.typeDischargeNote(patientDischargeAdvice);
-    // Prescribe a medicine for the patient
-    patientPrescription.clickAddPrescription();
-    patientPrescription.interceptMedibase();
-    patientPrescription.selectMedicinebox();
-    patientPrescription.selectMedicine(patientMedicine);
-    patientPrescription.enterDosage("4");
-    patientPrescription.selectDosageFrequency("Twice daily");
-    cy.submitButton("Submit");
-    cy.verifyNotification("Medicine prescribed");
-    cy.wait(2000);
+    patientDischarge.selectDischargeReason(patientDischargeReason4);
+    cy.submitButton("Confirm Discharge");
+    cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
-    // submit the discharge pop-up
+    // Verify the consultation dashboard reflection
+    cy.verifyContentPresence("#consultation-buttons", ["LAMA"]);
+    // verify the discharge information card
+    cy.verifyContentPresence("#discharge-information", [
+      patientDischargeReason4,
+    ]);
+  });
+
+  it("Discharge a expired patient in the consultation", () => {
+    patientPage.visitPatient("Dummy Patient 17");
+    patientDischarge.clickDischarge();
+    patientDischarge.selectDischargeReason(patientDischargeReason3);
+    patientDischarge.typeDischargeNote(patientDeathCause);
+    patientDischarge.typeDoctorName(doctorName);
     cy.submitButton("Confirm Discharge");
-    cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
-    // Verify the dashboard and discharge information
+    // Verify the consultation dashboard reflection
+    cy.verifyContentPresence("#consultation-buttons", ["EXPIRED"]);
+    // verify the discharge information card
     cy.verifyContentPresence("#discharge-information", [
-      patientDischargeReason1,
-      patientDischargeAdvice,
-      patientMedicine,
+      patientDischargeReason3,
+      patientDeathCause,
+      doctorName,
     ]);
   });
 
   it("Discharge patient with referred reason to a facility", () => {
-    patientPage.visitPatient("Dummy Patient 15");
+    patientPage.visitPatient("Dummy Patient 16");
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason2);
     patientDischarge.typeDischargeNote(patientDischargeAdvice);
@@ -68,12 +75,13 @@ describe("Patient Discharge based on multiple reason", () => {
     patientDischarge.clickClearButton();
     // select a non-registered facility and perform the discharge
     patientDischarge.typeReferringFacility(referringFreetextFacility);
-    cy.wait(3000);
-    patientDischarge.typeDischargeNote(patientDischargeAdvice);
+    cy.wait(2000);
     cy.submitButton("Confirm Discharge");
     cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
+    // Verify the consultation dashboard reflection
+    cy.verifyContentPresence("#consultation-buttons", ["Referred"]);
     // Verify the dashboard and discharge information
     cy.verifyContentPresence("#discharge-information", [
       patientDischargeReason2,
@@ -82,6 +90,37 @@ describe("Patient Discharge based on multiple reason", () => {
     ]);
   });
 
+  it("Discharge a recovered patient with all relevant fields", () => {
+    patientPage.visitPatient("Dummy Patient 15");
+    patientDischarge.clickDischarge();
+    patientDischarge.selectDischargeReason(patientDischargeReason1);
+    patientDischarge.typeDischargeNote(patientDischargeAdvice);
+    // Prescribe a medicine for the patient
+    patientPrescription.clickAddPrescription();
+    patientPrescription.interceptMedibase();
+    patientPrescription.selectMedicinebox();
+    patientPrescription.selectMedicine(patientMedicine);
+    patientPrescription.enterDosage("4");
+    patientPrescription.selectDosageFrequency("Twice daily");
+    cy.submitButton("Submit");
+    cy.verifyNotification("Medicine prescribed");
+    cy.wait(2000);
+    cy.closeNotification();
+    // submit the discharge pop-up
+    cy.submitButton("Confirm Discharge");
+    cy.wait(2000);
+    cy.verifyNotification("Patient Discharged Successfully");
+    cy.closeNotification();
+    // Verify the consultation dashboard reflection
+    cy.verifyContentPresence("#consultation-buttons", ["Recovered"]);
+    // Verify the dashboard and discharge information
+    cy.verifyContentPresence("#discharge-information", [
+      patientDischargeReason1,
+      patientDischargeAdvice,
+      patientMedicine,
+    ]);
+  });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/pageobject/Patient/PatientDischarge.ts b/cypress/pageobject/Patient/PatientDischarge.ts
index bcddab45902..eda6a379a3f 100644
--- a/cypress/pageobject/Patient/PatientDischarge.ts
+++ b/cypress/pageobject/Patient/PatientDischarge.ts
@@ -20,6 +20,10 @@ class PatientDischarge {
   clickClearButton() {
     cy.get("#clear-button").click();
   }
+
+  typeDoctorName(doctorName: string) {
+    cy.get("#death_confirmed_by").type(doctorName);
+  }
 }
 
 export default PatientDischarge;
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 1e8fe6d4b03..d70246522c1 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -211,7 +211,7 @@ const DischargeModal = ({
         {preDischargeForm.new_discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Referred")?.id && (
           <>
-            <div id="referred_to">
+            <div id="facility-referredto">
               <FieldLabel>Referred to</FieldLabel>
               <FacilitySelect
                 name="referred_to"

From 16a5f4fa9465892df7872e33ea6047caec51047d Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:07:11 +0530
Subject: [PATCH 26/45] fix lint error

---
 .../ConsultationUpdatesTab.tsx                | 49 ++++++++++---------
 src/Components/Facility/DischargeModal.tsx    |  8 +--
 src/Components/Form/AutoCompleteAsync.tsx     |  4 +-
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 72f2b31eb78..f4150617f1f 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -58,24 +58,24 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
         listAssetBeds({
           facility: props.consultationData.facility as any,
           bed: props.consultationData.current_bed?.bed_object.id,
-        })
+        }),
       );
       const assetBeds = assetBedRes?.data?.results as AssetBedModel[];
 
       const monitorBedData = assetBeds?.find(
-        (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR
+        (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR,
       );
 
       setMonitorBedData(monitorBedData);
       if (monitorBedData?.asset_object) {
         setHL7SocketUrl(
-          getVitalsMonitorSocketUrl(monitorBedData?.asset_object)
+          getVitalsMonitorSocketUrl(monitorBedData?.asset_object),
         );
       }
 
       const consultationBedVentilator =
         props.consultationData?.current_bed?.assets_objects?.find(
-          (i) => i.asset_class === AssetClass.VENTILATOR
+          (i) => i.asset_class === AssetClass.VENTILATOR,
         );
 
       let ventilatorBedData;
@@ -86,14 +86,14 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
         } as AssetBedModel;
       } else {
         ventilatorBedData = assetBeds?.find(
-          (i) => i.asset_object.asset_class === AssetClass.VENTILATOR
+          (i) => i.asset_object.asset_class === AssetClass.VENTILATOR,
         );
       }
 
       setVentilatorBedData(ventilatorBedData);
       if (ventilatorBedData?.asset_object) {
         setVentilatorSocketUrl(
-          getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object)
+          getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object),
         );
       }
     };
@@ -212,7 +212,8 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       <span className="font-semibold">
                         {DISCHARGE_REASONS.find(
                           (d) =>
-                            d.id === props.consultationData.new_discharge_reason
+                            d.id ===
+                            props.consultationData.new_discharge_reason,
                         )?.text ?? "--"}
                       </span>
                     </div>
@@ -237,7 +238,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.discharge_date
                               ? formatDate(
-                                  props.consultationData.discharge_date
+                                  props.consultationData.discharge_date,
                                 )
                               : "--/--/---- --:-- --"}
                           </span>
@@ -274,7 +275,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.death_datetime
                               ? formatDateTime(
-                                  props.consultationData.death_datetime
+                                  props.consultationData.death_datetime,
                                 )
                               : "--:--"}
                           </span>
@@ -295,7 +296,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       </div>
                     )}
                     {[2, 4].includes(
-                      props.consultationData.new_discharge_reason ?? 0
+                      props.consultationData.new_discharge_reason ?? 0,
                     ) && (
                       <div className="grid gap-4">
                         <div>
@@ -303,7 +304,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           <span className="font-semibold">
                             {props.consultationData.discharge_date
                               ? formatDateTime(
-                                  props.consultationData.discharge_date
+                                  props.consultationData.discharge_date,
                                 )
                               : "--/--/---- --:-- --"}
                           </span>
@@ -340,12 +341,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                                 key={index}
                                 text={
                                   SYMPTOM_CHOICES.find(
-                                    (choice) => choice.id === symptom
+                                    (choice) => choice.id === symptom,
                                   )?.text ?? "Err. Unknown"
                                 }
                                 size="small"
                               />
-                            )
+                            ),
                           )}
                         </div>
                         {props.consultationData.last_daily_round
@@ -363,7 +364,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <span className="text-xs font-semibold leading-relaxed text-gray-800">
                           from{" "}
                           {formatDate(
-                            props.consultationData.last_daily_round.taken_at
+                            props.consultationData.last_daily_round.taken_at,
                           )}
                         </span>
                       </>
@@ -379,12 +380,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             key={index}
                             text={
                               SYMPTOM_CHOICES.find(
-                                (choice) => choice.id === symptom
+                                (choice) => choice.id === symptom,
                               )?.text ?? "Err. Unknown"
                             }
                             size="small"
                           />
-                        )
+                        ),
                       )}
                     </div>
                     {props.consultationData.other_symptoms && (
@@ -540,7 +541,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                                 : formatDateTime(String(procedure.time))}
                             </td>
                           </tr>
-                        )
+                        ),
                       )}
                     </tbody>
                   </table>
@@ -558,7 +559,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     Intubation Date{" - "}
                     <span className="font-semibold">
                       {formatDateTime(
-                        props.consultationData.intubation_start_date
+                        props.consultationData.intubation_start_date,
                       )}
                     </span>
                   </div>
@@ -567,7 +568,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     <span className="font-semibold">
                       {props.consultationData.intubation_end_date &&
                         formatDateTime(
-                          props.consultationData.intubation_end_date
+                          props.consultationData.intubation_end_date,
                         )}
                     </span>
                   </div>
@@ -617,7 +618,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                           </span>
                         </p>
                       </div>
-                    )
+                    ),
                   )}
                 </div>
               </div>
@@ -660,7 +661,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                       {Math.sqrt(
                         (Number(props.consultationData.weight) *
                           Number(props.consultationData.height)) /
-                          3600
+                          3600,
                       ).toFixed(2)}{" "}
                       m<sup>2</sup>
                     </span>
@@ -676,7 +677,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             </div>
             {(
               props.consultationData.consent_records?.filter(
-                (record) => record.deleted !== true
+                (record) => record.deleted !== true,
               ) || []
             ).length > 0 && (
               <>
@@ -691,13 +692,13 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <div className="font-bold">
                           {
                             CONSENT_TYPE_CHOICES.find(
-                              (c) => c.id === record.type
+                              (c) => c.id === record.type,
                             )?.text
                           }{" "}
                           {record.patient_code_status &&
                             `( ${
                               CONSENT_PATIENT_CODE_STATUS_CHOICES.find(
-                                (c) => c.id === record.patient_code_status
+                                (c) => c.id === record.patient_code_status,
                               )?.text
                             } )`}
                         </div>
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index d70246522c1..c81ab2cf74e 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -79,7 +79,7 @@ const DischargeModal = ({
         ordering: "-modified_date",
         use: "claim",
         consultation: consultationData.id,
-      })
+      }),
     );
 
     if (res?.data?.results?.length > 0) {
@@ -151,8 +151,8 @@ const DischargeModal = ({
           discharge: value,
           discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
         },
-        { id: consultationData.id }
-      )
+        { id: consultationData.id },
+      ),
     );
 
     setIsSendingDischargeApi(false);
@@ -281,7 +281,7 @@ const DischargeModal = ({
           }}
           required
           min={dayjs(consultationData?.encounter_date).format(
-            "YYYY-MM-DDTHH:mm"
+            "YYYY-MM-DDTHH:mm",
           )}
           max={dayjs().format("YYYY-MM-DDTHH:mm")}
           error={
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 2102f254480..d4e686c41fa 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -65,7 +65,7 @@ const AutoCompleteAsync = (props: Props) => {
         setData(data?.slice(0, showNOptions) || []);
         setLoading(false);
       }, debounceTime),
-    [fetchData, showNOptions, debounceTime]
+    [fetchData, showNOptions, debounceTime],
   );
 
   useEffect(() => {
@@ -175,7 +175,7 @@ const AutoCompleteAsync = (props: Props) => {
                   label={optionLabel(option)}
                   onRemove={() =>
                     onChange(
-                      selected.filter((item: any) => item.id !== option.id)
+                      selected.filter((item: any) => item.id !== option.id),
                     )
                   }
                 />

From bed41aa3a6cc256af84bcdc064a85c4b0f7e4396 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:25:31 +0530
Subject: [PATCH 27/45] update patient name

---
 cypress/e2e/patient_spec/patient_discharge.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
index 9c66e8c1c14..34ad423d1e8 100644
--- a/cypress/e2e/patient_spec/patient_discharge.cy.ts
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -32,7 +32,7 @@ describe("Patient Discharge based on multiple reason", () => {
   });
 
   it("Discharge a LAMA patient in the consultation", () => {
-    patientPage.visitPatient("Dummy Patient 18");
+    patientPage.visitPatient("Dummy Patient 12");
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason4);
     cy.submitButton("Confirm Discharge");
@@ -47,7 +47,7 @@ describe("Patient Discharge based on multiple reason", () => {
   });
 
   it("Discharge a expired patient in the consultation", () => {
-    patientPage.visitPatient("Dummy Patient 17");
+    patientPage.visitPatient("Dummy Patient 13");
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason3);
     patientDischarge.typeDischargeNote(patientDeathCause);

From 898afbc7406ef37098642b6bdca8c51b6f110de9 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 22 Apr 2024 19:04:07 +0530
Subject: [PATCH 28/45] delete existing discharge test

---
 cypress/e2e/patient_spec/patient_manage.cy.ts |  8 ------
 .../pageobject/Patient/PatientConsultation.ts | 28 +------------------
 2 files changed, 1 insertion(+), 35 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_manage.cy.ts b/cypress/e2e/patient_spec/patient_manage.cy.ts
index 35b89aedb7f..c25677d9e8b 100644
--- a/cypress/e2e/patient_spec/patient_manage.cy.ts
+++ b/cypress/e2e/patient_spec/patient_manage.cy.ts
@@ -58,14 +58,6 @@ describe("Patient", () => {
     cy.verifyNotification("Medicine prescribed");
   });
 
-  it("Discharge a patient", () => {
-    patientPage.visitPatient("Dummy Patient 6");
-    patientConsultationPage.clickDischargePatient();
-    patientConsultationPage.selectDischargeReason("Recovered");
-    patientConsultationPage.addDischargeNotes("Discharge notes");
-    patientConsultationPage.confirmDischarge();
-  });
-
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
index 0a39a1f839a..87cead3fc1f 100644
--- a/cypress/pageobject/Patient/PatientConsultation.ts
+++ b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -100,7 +100,7 @@ export class PatientConsultationPage {
     cy.get("button").contains("Manage Patient").click();
     cy.verifyAndClickElement(
       "#consultation-buttons",
-      "Edit Consultation Details"
+      "Edit Consultation Details",
     );
     cy.wait(3000);
   }
@@ -130,30 +130,4 @@ export class PatientConsultationPage {
     cy.get("#add_doctor_note_button").click();
     cy.wait("@postDoctorNotes").its("response.statusCode").should("eq", 201);
   }
-
-  clickDischargePatient() {
-    cy.get("#show-more").scrollIntoView();
-    cy.get("#show-more").click();
-    cy.contains("p", "Discharge from CARE").click();
-  }
-
-  selectDischargeReason(reason: string) {
-    cy.get("#discharge_reason")
-      .click()
-      .then(() => {
-        cy.get("[role='option']").contains(reason).click();
-      });
-  }
-
-  addDischargeNotes(notes: string) {
-    cy.get("#discharge_notes").type(notes);
-  }
-
-  confirmDischarge() {
-    cy.intercept("POST", "**/api/v1/consultation/*/discharge_patient/").as(
-      "dischargePatient"
-    );
-    cy.get("#submit").contains("Confirm Discharge").click();
-    cy.wait("@dischargePatient").its("response.statusCode").should("eq", 200);
-  }
 }

From 30664e314053049e06510e8886e8aeab77ed447f Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Mon, 22 Apr 2024 19:26:42 +0530
Subject: [PATCH 29/45] User Filters: Adds support for filtering by home
 facility

---
 src/Components/Users/ManageUsers.tsx | 11 ++++++++++
 src/Components/Users/UserFilter.tsx  | 31 ++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index b0207fd1a77..4d7082a921d 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -75,6 +75,11 @@ export default function ManageUsers() {
   const extremeSmallScreenBreakpoint = 320;
   const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint;
 
+  const { data: homeFacilityData } = useQuery(routes.getAnyFacility, {
+    pathParams: { id: qParams.home_facility },
+    prefetch: !!qParams.home_facility,
+  });
+
   const {
     data: userListData,
     loading: userListLoading,
@@ -92,6 +97,7 @@ export default function ManageUsers() {
       alt_phone_number: qParams.alt_phone_number,
       user_type: qParams.user_type,
       district_id: qParams.district,
+      home_facility: qParams.home_facility,
     },
   });
 
@@ -546,6 +552,11 @@ export default function ManageUsers() {
               "district",
               qParams.district ? districtData?.name || "" : "",
             ),
+            value(
+              "Home Facility",
+              "home_facility",
+              qParams.home_facility ? homeFacilityData?.name || "" : "",
+            ),
           ]}
         />
       </div>
diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
index d89a79c03ee..4a070ee7cde 100644
--- a/src/Components/Users/UserFilter.tsx
+++ b/src/Components/Users/UserFilter.tsx
@@ -10,6 +10,10 @@ import DistrictAutocompleteFormField from "../Common/DistrictAutocompleteFormFie
 import StateAutocompleteFormField from "../Common/StateAutocompleteFormField";
 import { useTranslation } from "react-i18next";
 import * as Notify from "../../Utils/Notifications";
+import { FacilitySelect } from "../Common/FacilitySelect";
+import { FacilityModel } from "../Facility/models";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
   if (!phoneNumber) return "";
@@ -29,6 +33,14 @@ export default function UserFilter(props: any) {
     user_type: filter.user_type || "",
     district: filter.district || "",
     state: filter.state || "",
+    home_facility: filter.home_facility || "",
+    home_facility_ref: null,
+  });
+
+  useQuery(routes.getAnyFacility, {
+    pathParams: { id: filter.home_facility },
+    prefetch: !!filter.home_facility,
+    onResponse: ({ data }) => setFilterState({ home_facility_ref: data }),
   });
 
   const applyFilter = () => {
@@ -40,6 +52,7 @@ export default function UserFilter(props: any) {
       user_type,
       district,
       state,
+      home_facility,
     } = filterState;
     const data = {
       first_name: first_name || "",
@@ -49,6 +62,7 @@ export default function UserFilter(props: any) {
       user_type: user_type || "",
       district: district || "",
       state: district ? state || "" : "",
+      home_facility: home_facility || "",
     };
     if (state && !district) {
       Notify.Warn({
@@ -111,6 +125,23 @@ export default function UserFilter(props: any) {
         />
       </div>
 
+      <div className="w-full flex-none">
+        <FieldLabel>Home Facility</FieldLabel>
+        <FacilitySelect
+          name="home_facility"
+          setSelected={(selected) =>
+            setFilterState({
+              ...filterState,
+              home_facility: (selected as FacilityModel)?.id || "",
+              home_facility_ref: selected,
+            })
+          }
+          selected={filterState.home_facility_ref}
+          errors=""
+          multiple={false}
+        />
+      </div>
+
       <StateAutocompleteFormField {...field("state")} errorClassName="hidden" />
       <DistrictAutocompleteFormField
         errorClassName="hidden"

From e0613a6cad925054913e9180e678b414b72d5ba4 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Tue, 23 Apr 2024 17:39:12 +0530
Subject: [PATCH 30/45] Allow 'State Admin Read Only' to view Camera

---
 .../Facility/ConsultationDetails/index.tsx    |  9 ++----
 src/Components/Facility/FacilityHome.tsx      |  5 ++-
 src/Components/Users/ManageUsers.tsx          |  8 ++---
 src/Routers/routes/FacilityLocationRoutes.tsx |  3 +-
 src/Utils/permissions.ts                      | 32 +++++++++++++++++++
 src/Utils/utils.ts                            | 30 +----------------
 6 files changed, 42 insertions(+), 45 deletions(-)
 create mode 100644 src/Utils/permissions.ts

diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 56b8981c4c5..77b6268e039 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -39,6 +39,7 @@ import { AssetBedModel } from "../../Assets/AssetTypes";
 import PatientInfoCard from "../../Patient/PatientInfoCard";
 import RelativeDateUserMention from "../../Common/RelativeDateUserMention";
 import DiagnosesListAccordion from "../../Diagnosis/DiagnosesListAccordion";
+import { CameraFeedPermittedUserTypes } from "../../../Utils/permissions";
 
 const Loading = lazy(() => import("../../Common/Loading"));
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
@@ -302,9 +303,7 @@ export const ConsultationDetails = (props: any) => {
                 </button>
                 {patientData.last_consultation?.id &&
                   isCameraAttached &&
-                  ["DistrictAdmin", "StateAdmin", "Doctor"].includes(
-                    authUser.user_type,
-                  ) && (
+                  CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
                     <Link
                       href={`/facility/${patientData.facility}/patient/${patientData.id}/consultation/${patientData.last_consultation?.id}/feed`}
                       className="btn btn-primary m-1 w-full hover:text-white"
@@ -426,9 +425,7 @@ export const ConsultationDetails = (props: any) => {
                       isCameraAttached === false || // No camera attached
                       consultationData?.discharge_date || // Discharged
                       !consultationData?.current_bed?.bed_object?.id || // Not admitted to bed
-                      !["DistrictAdmin", "StateAdmin", "Doctor"].includes(
-                        authUser.user_type,
-                      ) // Not admin or doctor
+                      !CameraFeedPermittedUserTypes.includes(authUser.user_type)
                     )
                       return null; // Hide feed tab
                   }
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 056c7d37994..99416296120 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -31,6 +31,7 @@ import useSlug from "../../Common/hooks/useSlug.js";
 import { Popover, Transition } from "@headlessui/react";
 import { FieldLabel } from "../Form/FormFields/FormField.js";
 import { LocationSelect } from "../Common/LocationSelect.js";
+import { CameraFeedPermittedUserTypes } from "../../Utils/permissions.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -497,11 +498,9 @@ const LiveMonitoringButton = () => {
   const [location, setLocation] = useState<string>();
   const authUser = useAuthUser();
 
-  const permittedUserTypes = ["StateAdmin", "DistrictAdmin", "Doctor"];
-
   return (
     <Popover className="relative">
-      {permittedUserTypes.includes(authUser.user_type) && (
+      {CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
         <Popover.Button className="mt-2 w-full">
           <ButtonV2
             variant="primary"
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index b0207fd1a77..320751de02c 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -14,12 +14,7 @@ import routes from "../../Redux/api.js";
 import * as Notification from "../../Utils/Notifications.js";
 import request from "../../Utils/request/request.js";
 import useQuery from "../../Utils/request/useQuery.js";
-import {
-  classNames,
-  isUserOnline,
-  relativeTime,
-  showUserDelete,
-} from "../../Utils/utils";
+import { classNames, isUserOnline, relativeTime } from "../../Utils/utils";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import Pagination from "../Common/Pagination";
 import UserDetails from "../Common/UserDetails";
@@ -35,6 +30,7 @@ import SkillsSlideOver from "./SkillsSlideOver";
 import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import UserDeleteDialog from "./UserDeleteDialog";
 import UserFilter from "./UserFilter";
+import { showUserDelete } from "../../Utils/permissions";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
diff --git a/src/Routers/routes/FacilityLocationRoutes.tsx b/src/Routers/routes/FacilityLocationRoutes.tsx
index 81896b48c98..5d547ebd466 100644
--- a/src/Routers/routes/FacilityLocationRoutes.tsx
+++ b/src/Routers/routes/FacilityLocationRoutes.tsx
@@ -5,6 +5,7 @@ import { BedManagement } from "../../Components/Facility/BedManagement";
 import LocationManagement from "../../Components/Facility/LocationManagement";
 import CentralLiveMonitoring from "../../Components/CameraFeed/CentralLiveMonitoring";
 import { AuthorizeUserRoute } from "../../Utils/AuthorizeFor";
+import { CameraFeedPermittedUserTypes } from "../../Utils/permissions";
 
 export default {
   "/facility/:facilityId/location": ({ facilityId }: any) => (
@@ -38,7 +39,7 @@ export default {
     <AddBedForm facilityId={facilityId} locationId={locationId} bedId={bedId} />
   ),
   "/facility/:facilityId/live-monitoring": (props: any) => (
-    <AuthorizeUserRoute userTypes={["StateAdmin", "DistrictAdmin", "Doctor"]}>
+    <AuthorizeUserRoute userTypes={CameraFeedPermittedUserTypes}>
       <CentralLiveMonitoring {...props} />
     </AuthorizeUserRoute>
   ),
diff --git a/src/Utils/permissions.ts b/src/Utils/permissions.ts
new file mode 100644
index 00000000000..0310d0ad8dd
--- /dev/null
+++ b/src/Utils/permissions.ts
@@ -0,0 +1,32 @@
+import { USER_TYPES, UserRole } from "../Common/constants";
+import { UserModel } from "../Components/Users/models";
+
+export const showUserDelete = (authUser: UserModel, targetUser: UserModel) => {
+  // Auth user should be higher in hierarchy than target user
+  if (
+    USER_TYPES.indexOf(authUser.user_type) <=
+    USER_TYPES.indexOf(targetUser.user_type)
+  )
+    return false;
+
+  if (
+    authUser.user_type === "StateAdmin" &&
+    targetUser.state_object?.id === authUser.state
+  )
+    return true;
+
+  if (
+    authUser.user_type === "DistrictAdmin" &&
+    targetUser.district_object?.id === authUser.district
+  )
+    return true;
+
+  return false;
+};
+
+export const CameraFeedPermittedUserTypes: UserRole[] = [
+  "DistrictAdmin",
+  "StateAdmin",
+  "StateReadOnlyAdmin",
+  "Doctor",
+];
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 2bcf47ab134..3db714d1e99 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -1,11 +1,6 @@
-import {
-  AREACODES,
-  IN_LANDLINE_AREA_CODES,
-  USER_TYPES,
-} from "../Common/constants";
+import { AREACODES, IN_LANDLINE_AREA_CODES } from "../Common/constants";
 import phoneCodesJson from "../Common/static/countryPhoneAndFlags.json";
 import dayjs from "./dayjs";
-import { UserModel } from "../Components/Users/models";
 import { PatientModel } from "../Components/Patient/models";
 
 interface ApacheParams {
@@ -458,29 +453,6 @@ export const scrollTo = (id: string | boolean) => {
   element?.scrollIntoView({ behavior: "smooth", block: "center" });
 };
 
-export const showUserDelete = (authUser: UserModel, targetUser: UserModel) => {
-  // Auth user should be higher in hierarchy than target user
-  if (
-    USER_TYPES.indexOf(authUser.user_type) <=
-    USER_TYPES.indexOf(targetUser.user_type)
-  )
-    return false;
-
-  if (
-    authUser.user_type === "StateAdmin" &&
-    targetUser.state_object?.id === authUser.state
-  )
-    return true;
-
-  if (
-    authUser.user_type === "DistrictAdmin" &&
-    targetUser.district_object?.id === authUser.district
-  )
-    return true;
-
-  return false;
-};
-
 export const compareBy = <T extends object>(key: keyof T) => {
   return (a: T, b: T) => {
     return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0;

From 782a77d1086c73321cfb1b18629e9a4c963d131f Mon Sep 17 00:00:00 2001
From: Uday Sagar <111575806+UdaySagar-Git@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:47:42 +0530
Subject: [PATCH 31/45] Introduced Reusable JSON Parser and Validator with
 Schema, File Preview, and Selected Import Support for XLSX/CSV Files (#7367)

* added new package

* removed 2 packages

* changed route for external result import modal

* updated schemas

* custom schema parser

* modified schema parser

* added file drag and drop component

* modified assest import modal to use reusable component

* excel viewer component

* modified import name

* external result upload modal

* lazy import

* Modified templete for external results import file

* cypress fix

* updated cypress templete

* fixes incorrect date format with csv files

* cypress fix

* Added documentation

* code reviews

* Error on hover

* merges pr #7339

* fix the flaky test

* change the cypress to use Reusable component

* fix type errors

* lint fix

---------

Co-authored-by: Gigin George <mail.gigin@gmail.com>
Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Co-authored-by: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
---
 .../external_result.cy.ts                     |   6 +-
 cypress/fixtures/externalresultsample.csv     |   2 +-
 cypress/pageobject/Asset/AssetCreation.ts     |   2 +-
 package-lock.json                             | 367 ++++++------------
 package.json                                  |   5 +-
 public/External-Results-Template.csv          |   2 +-
 src/Common/constants.tsx                      | 192 ++++++---
 src/Common/schemaParser.ts                    | 197 ++++++++++
 src/Components/Assets/AssetImportModal.tsx    | 274 ++-----------
 .../Common/ExcelFIleDragAndDrop.tsx           | 272 +++++++++++++
 src/Components/Common/ExcelViewer.tsx         | 283 ++++++++++++++
 .../ExternalResultImportModal.tsx             | 113 ++++++
 .../ExternalResult/ExternalResultUpload.tsx   | 229 -----------
 src/Components/ExternalResult/ResultList.tsx  |  10 +-
 src/Routers/routes/ExternalResultRoutes.tsx   |   2 -
 src/Utils/utils.ts                            |  50 ---
 16 files changed, 1171 insertions(+), 835 deletions(-)
 create mode 100644 src/Common/schemaParser.ts
 create mode 100644 src/Components/Common/ExcelFIleDragAndDrop.tsx
 create mode 100644 src/Components/Common/ExcelViewer.tsx
 create mode 100644 src/Components/ExternalResult/ExternalResultImportModal.tsx
 delete mode 100644 src/Components/ExternalResult/ExternalResultUpload.tsx

diff --git a/cypress/e2e/external_results_spec/external_result.cy.ts b/cypress/e2e/external_results_spec/external_result.cy.ts
index deb92ae5171..2091a5f93be 100644
--- a/cypress/e2e/external_results_spec/external_result.cy.ts
+++ b/cypress/e2e/external_results_spec/external_result.cy.ts
@@ -42,10 +42,10 @@ describe("Edit Profile Testing", () => {
     cy.intercept("POST", "/api/v1/external_result/bulk_upsert").as("import");
     cy.get("div").contains("Import/Export").click();
     cy.get("div").contains("Import Results").click();
-    cy.get("[id=result-upload]")
-      .selectFile("cypress/fixtures/externalresultsample.csv")
+    cy.get("[data-testid=import-file]")
+      .selectFile("cypress/fixtures/externalresultsample.csv", { force: true })
       .wait(100);
-    cy.get("button").contains("Save").click();
+    cy.submitButton("Import");
     cy.wait("@import").then((interception) => {
       expect(interception.response.statusCode).to.equal(202);
     });
diff --git a/cypress/fixtures/externalresultsample.csv b/cypress/fixtures/externalresultsample.csv
index d1e543200b2..2905cdc1af3 100644
--- a/cypress/fixtures/externalresultsample.csv
+++ b/cypress/fixtures/externalresultsample.csv
@@ -1,2 +1,2 @@
-District,srf id,name,age,age in,gender,mobile number,address,ward,local body,local body type,source,Sample Collection Date,result date,test type,lab name,sample type,patient status,Is Repeat,patient category,result
+District,SRF ID,Name,Age,Age in,Gender,Mobile Number,Address,Ward,Local Body,Local Body Type,Source,Sample Collection Date,Result Date,Test Type,Lab Name,Sample Type,Patient Status,Is Repeat,Patient Category,Result
 Ernakulam,00/EKM/0000,Test Upload,24,years,m,8888888888,Upload test address,7,Poothrikka,grama panchayath,Secondary contact aparna,2020-10-14,2020-10-14,Antigen,Karothukuzhi Laboratory,Ag-SD_Biosensor_Standard_Q_COVID-19_Ag_detection_kit,Asymptomatic,NO,Cat 17: All individuals who wish to get themselves tested,Negative
diff --git a/cypress/pageobject/Asset/AssetCreation.ts b/cypress/pageobject/Asset/AssetCreation.ts
index 8f611e97d92..421fee0cee2 100644
--- a/cypress/pageobject/Asset/AssetCreation.ts
+++ b/cypress/pageobject/Asset/AssetCreation.ts
@@ -246,7 +246,7 @@ export class AssetPage {
   }
 
   importAssetFile() {
-    cy.get("[data-testid=import-asset-file]")
+    cy.get("[data-testid=import-file]")
       .selectFile("cypress/fixtures/sampleAsset.xlsx", { force: true })
       .wait(100);
   }
diff --git a/package-lock.json b/package-lock.json
index 75328537da9..4ef224e120d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,6 @@
         "raviger": "^4.1.2",
         "react": "18.2.0",
         "react-copy-to-clipboard": "^5.1.0",
-        "react-csv-reader": "^4.0.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dnd-scrolling": "^1.3.3",
@@ -54,13 +53,13 @@
         "react-redux": "^8.1.1",
         "react-transition-group": "^4.4.5",
         "react-webcam": "^7.1.1",
-        "read-excel-file": "^5.6.1",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
         "rehype-raw": "^6.1.1",
         "rescript-webapi": "^0.8.0",
         "use-keyboard-shortcut": "^1.1.6",
-        "uuid": "^9.0.1"
+        "uuid": "^9.0.1",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@storybook/addon-essentials": "^7.6.16",
@@ -7099,14 +7098,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/@yaireo/ui-range": {
       "version": "2.1.15",
       "resolved": "https://registry.npmjs.org/@yaireo/ui-range/-/ui-range-2.1.15.tgz",
@@ -7254,6 +7245,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -7941,25 +7940,14 @@
       }
     },
     "node_modules/big-integer": {
-      "version": "1.6.52",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
-      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true,
       "engines": {
         "node": ">=0.6"
       }
     },
-    "node_modules/binary": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
-      "dependencies": {
-        "buffers": "~0.1.1",
-        "chainsaw": "~0.1.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -8071,6 +8059,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "devOptional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -8190,22 +8179,6 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
-    "node_modules/buffer-indexof-polyfill": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
-      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/buffers": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
-      "engines": {
-        "node": ">=0.2.0"
-      }
-    },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -8331,15 +8304,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chainsaw": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
       "dependencies": {
-        "traverse": ">=0.3.0 <0.4"
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
       },
       "engines": {
-        "node": "*"
+        "node": ">=0.8"
       }
     },
     "node_modules/chalk": {
@@ -8587,6 +8561,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8725,7 +8707,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "devOptional": true
     },
     "node_modules/concat-stream": {
       "version": "2.0.0",
@@ -8834,7 +8817,8 @@
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true
     },
     "node_modules/cosmiconfig": {
       "version": "8.3.6",
@@ -8877,6 +8861,17 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -9752,46 +9747,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/duplexer2": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
-      "dependencies": {
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "node_modules/duplexer2/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/duplexer2/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/duplexer2/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/duplexer2/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -12659,11 +12614,6 @@
       "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
       "dev": true
     },
-    "node_modules/fflate": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
-      "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw=="
-    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -13119,6 +13069,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -13194,7 +13152,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "devOptional": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -13210,61 +13169,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/fstream": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "inherits": "~2.0.0",
-        "mkdirp": ">=0.5 0",
-        "rimraf": "2"
-      },
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/fstream/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/fstream/node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
-    "node_modules/fstream/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -13723,7 +13627,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -14325,6 +14230,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "devOptional": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -15975,11 +15881,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/listenercount": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
-      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ=="
-    },
     "node_modules/listr2": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
@@ -17997,6 +17898,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -18008,6 +17910,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -18688,6 +18591,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "devOptional": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -18830,11 +18734,6 @@
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
       "dev": true
     },
-    "node_modules/papaparse": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
-      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -18908,6 +18807,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19541,7 +19441,8 @@
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
     },
     "node_modules/progress": {
       "version": "2.0.3",
@@ -19999,19 +19900,6 @@
         "react": "^15.3.0 || 16 || 17 || 18"
       }
     },
-    "node_modules/react-csv-reader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/react-csv-reader/-/react-csv-reader-4.0.0.tgz",
-      "integrity": "sha512-NRo27kv1YWYAJAR3H5ZZ5KREEw35avUtdGr4DwYel87QN3rwJf2wdAw97swNDO3cTW2i3cuXSNjfPqVIJm5xOg==",
-      "dependencies": {
-        "papaparse": "^5.3.0"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.7.2",
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-dnd": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
@@ -20959,16 +20847,6 @@
         "pify": "^2.3.0"
       }
     },
-    "node_modules/read-excel-file": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/read-excel-file/-/read-excel-file-5.7.1.tgz",
-      "integrity": "sha512-cEX+y7A0TmUESjaVqDTVts3iY2YbySG5ew2TlP0qJN+H7PY+b9MqiK3pl/vNPhx112AuyLtmhfqQc5n6+U2vQw==",
-      "dependencies": {
-        "@xmldom/xmldom": "^0.8.2",
-        "fflate": "^0.7.3",
-        "unzipper": "^0.10.11"
-      }
-    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -22300,11 +22178,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -22602,6 +22475,17 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/sshpk": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
@@ -23565,14 +23449,6 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "devOptional": true
     },
-    "node_modules/traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -24601,60 +24477,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/unzipper": {
-      "version": "0.10.14",
-      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
-      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
-      "dependencies": {
-        "big-integer": "^1.6.17",
-        "binary": "~0.3.0",
-        "bluebird": "~3.4.1",
-        "buffer-indexof-polyfill": "~1.0.0",
-        "duplexer2": "~0.1.4",
-        "fstream": "^1.0.12",
-        "graceful-fs": "^4.2.2",
-        "listenercount": "~1.0.1",
-        "readable-stream": "~2.3.6",
-        "setimmediate": "~1.0.4"
-      }
-    },
-    "node_modules/unzipper/node_modules/bluebird": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
-    },
-    "node_modules/unzipper/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/unzipper/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/unzipper/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/unzipper/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/upath": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@@ -26044,6 +25866,22 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -26470,7 +26308,8 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "devOptional": true
     },
     "node_modules/write-file-atomic": {
       "version": "4.0.2",
@@ -26506,6 +26345,26 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 64b0d549e14..a88d042d530 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,6 @@
     "raviger": "^4.1.2",
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-csv-reader": "^4.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-scrolling": "^1.3.3",
@@ -94,13 +93,13 @@
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",
-    "read-excel-file": "^5.6.1",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "rehype-raw": "^6.1.1",
     "rescript-webapi": "^0.8.0",
     "use-keyboard-shortcut": "^1.1.6",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.16",
diff --git a/public/External-Results-Template.csv b/public/External-Results-Template.csv
index 3ab2afc65ba..c2601f2d64f 100644
--- a/public/External-Results-Template.csv
+++ b/public/External-Results-Template.csv
@@ -1,3 +1,3 @@
-District,srf id,name,age,age in,gender,mobile number,address,ward,local body,local body type,source,Sample Collection Date,result date,test type,lab name,sample type,patient status,Is Repeat,patient category,result
+District,SRF ID,Name,Age,Age in,Gender,Mobile Number,Address,Ward,Local Body,Local Body Type,Source,Sample Collection Date,Result Date,Test Type,Lab Name,Sample Type,Patient Status,Is Repeat,Patient Category,Result
 Ernakulam,00/EKM/0000,Bodhi CSN,24,years,m,8888888888,"CSN HQ
 Kochi, Kerala ",7,Poothrikka,grama panchayath,Secondary contact aparna,2020-10-14,2020-10-14,Antigen,Karothukuzhi Laboratory,Ag-SD_Biosensor_Standard_Q_COVID-19_Ag_detection_kit,Asymptomatic,NO,Cat 17: All individuals who wish to get themselves tested,Negative
\ No newline at end of file
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 095de35aec8..862ba9e79ea 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -4,6 +4,7 @@ import { SortOption } from "../Components/Common/SortDropdown";
 import { dateQueryString } from "../Utils/utils";
 import { IconName } from "../CAREUI/icons/CareIcon";
 import { PhoneNumberValidator } from "../Components/Form/FieldValidators";
+import { SchemaType } from "./schemaParser";
 
 export const RESULTS_PER_PAGE_LIMIT = 14;
 export const PAGINATION_LIMIT = 36;
@@ -894,23 +895,23 @@ export const BLACKLISTED_PATHS: RegExp[] = [
   /\/facility\/([A-Za-z0-9]+(-[A-Za-z0-9]+)+)\/patient\/([A-Za-z0-9]+(-[A-Za-z0-9]+)+)\/consultation\/([A-Za-z0-9]+(-[A-Za-z0-9]+)+)\/dialysis+/i,
 ];
 
-export const XLSXAssetImportSchema = {
-  Name: { prop: "name", type: String },
+export const AssetImportSchema: SchemaType = {
+  Name: { prop: "name", type: "string" },
   Type: {
     prop: "asset_type",
-    type: String,
+    type: "string",
     oneOf: ["INTERNAL", "EXTERNAL"],
     required: true,
   },
   Class: {
     prop: "asset_class",
-    type: String,
+    type: "string",
     oneOf: ["HL7MONITOR", "ONVIF", "VENTILATOR", ""],
   },
-  Description: { prop: "description", type: String },
+  Description: { prop: "description", type: "string" },
   "Working Status": {
     prop: "is_working",
-    type: Boolean,
+    type: "boolean",
     parse: (status: string) => {
       if (status === "WORKING") {
         return true;
@@ -922,18 +923,15 @@ export const XLSXAssetImportSchema = {
     },
     required: true,
   },
-  "Not Working Reason": {
-    prop: "not_working_reason",
-    type: String,
-  },
-  "Serial Number": { prop: "serial_number", type: String },
-  "QR Code ID": { prop: "qr_code_id", type: String },
-  Manufacturer: { prop: "manufacturer", type: String },
-  "Vendor Name": { prop: "vendor_name", type: String },
-  "Support Name": { prop: "support_name", type: String },
+  "Not Working Reason": { prop: "not_working_reason", type: "string" },
+  "Serial Number": { prop: "serial_number", type: "string" },
+  "QR Code ID": { prop: "qr_code_id", type: "string" },
+  Manufacturer: { prop: "manufacturer", type: "string" },
+  "Vendor Name": { prop: "vendor_name", type: "string" },
+  "Support Name": { prop: "support_name", type: "string" },
   "Support Email": {
     prop: "support_email",
-    type: String,
+    type: "string",
     parse: (email: string) => {
       if (!email) return null;
       const isValid = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email);
@@ -947,7 +945,7 @@ export const XLSXAssetImportSchema = {
   },
   "Support Phone Number": {
     prop: "support_phone",
-    type: String,
+    type: "string",
     parse: (phone: number | string) => {
       phone = String(phone);
       if (phone.length === 10 && !phone.startsWith("1800")) {
@@ -972,63 +970,141 @@ export const XLSXAssetImportSchema = {
   },
   "Warranty End Date": {
     prop: "warranty_amc_end_of_validity",
-    type: String,
+    type: "string",
     parse: (date: string) => {
       if (!date) return null;
-      const parts = date.split("-");
-      const reformattedDateStr = `${parts[2]}-${parts[1]}-${parts[0]}`;
-      const parsed = new Date(reformattedDateStr);
-
-      if (String(parsed) === "Invalid Date") {
-        throw new Error("Invalid Warranty End Date:" + date);
+      //handles both "YYYY-MM-DD" and long date format eg : Wed Oct 14 2020 05:30:00 GMT+0530 (India Standard Time)
+      if (isNaN(Date.parse(date))) {
+        const parts = date.split("-");
+        if (parts.length !== 3) {
+          throw new Error("Invalid Date Format: " + date);
+        }
+        const reformattedDateStr = `${parts[2]}-${parts[1]}-${parts[0]}`;
+        const parsed = new Date(reformattedDateStr);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      } else {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
       }
-
-      return dateQueryString(parsed);
     },
   },
   "Last Service Date": {
     prop: "last_serviced_on",
-    type: String,
+    type: "string",
     parse: (date: string) => {
       if (!date) return null;
-      const parts = date.split("-");
-      const reformattedDateStr = `${parts[2]}-${parts[1]}-${parts[0]}`;
-      const parsed = new Date(reformattedDateStr);
+      if (isNaN(Date.parse(date))) {
+        const parts = date.split("-");
+        if (parts.length !== 3) {
+          throw new Error("Invalid Date Format: " + date);
+        }
+        const reformattedDateStr = `${parts[2]}-${parts[1]}-${parts[0]}`;
+        const parsed = new Date(reformattedDateStr);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      } else {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      }
+    },
+  },
+  Notes: { prop: "note", type: "string" },
+  "Config - IP Address": {
+    parent: "meta",
+    prop: "local_ip_address",
+    type: "string",
+    parse: (ip: string) => {
+      if (!ip) return null;
+      const isValid =
+        /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+          ip,
+        );
 
-      if (String(parsed) === "Invalid Date") {
-        throw new Error("Invalid Last Service Date:" + date);
+      if (!isValid) {
+        throw new Error("Invalid Config IP Address: " + ip);
       }
 
-      return dateQueryString(parsed);
+      return ip;
+    },
+  },
+  "Config: Camera Access Key": {
+    parent: "meta",
+    prop: "camera_access_key",
+    type: "string",
+  },
+};
+
+export const ExternalResultImportSchema: SchemaType = {
+  District: { prop: "district", type: "any" },
+  "SRF ID": { prop: "srf_id", type: "string" },
+  Name: { prop: "name", type: "string" },
+  Age: { prop: "age", type: "number" },
+  "Age in": { prop: "age_in", type: "string" },
+  Gender: { prop: "gender", type: "string" },
+  "Mobile Number": { prop: "mobile_number", type: "any" },
+  Address: { prop: "address", type: "string" },
+  Ward: { prop: "ward", type: "number" },
+  "Local Body": { prop: "local_body", type: "string" },
+  "Local Body Type": { prop: "local_body_type", type: "string" },
+  Source: { prop: "source", type: "string" },
+  "Sample Collection Date": {
+    prop: "sample_collection_date",
+    type: "string",
+    parse: (date: string) => {
+      if (!date) return null;
+      if (isNaN(Date.parse(date))) {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      } else {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      }
     },
   },
-  Notes: { prop: "notes", type: String },
-  META: {
-    prop: "meta",
-    type: {
-      "Config - IP Address": {
-        prop: "local_ip_address",
-        type: String,
-        parse: (ip: string) => {
-          if (!ip) return null;
-          const isValid =
-            /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
-              ip,
-            );
-
-          if (!isValid) {
-            throw new Error("Invalid Config IP Address: " + ip);
-          }
-
-          return ip;
-        },
-      },
-      "Config - Camera Access Key": {
-        prop: "camera_access_key",
-        type: String,
-      },
+  "Result Date": {
+    prop: "result_date",
+    type: "string",
+    parse: (date: string) => {
+      if (!date) return null;
+      if (isNaN(Date.parse(date))) {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      } else {
+        const parsed = new Date(date);
+        if (String(parsed) === "Invalid Date") {
+          throw new Error("Invalid Date: " + date);
+        }
+        return dateQueryString(parsed);
+      }
     },
   },
+  "Test Type": { prop: "test_type", type: "string" },
+  "Lab Name": { prop: "lab_name", type: "string" },
+  "Sample Type": { prop: "sample_type", type: "string" },
+  "Patient Status": { prop: "patient_status", type: "string" },
+  "Is Repeat": { prop: "is_repeat", type: "string" },
+  "Patient Category": { prop: "patient_category", type: "string" },
+  Result: { prop: "result", type: "string" },
 };
 
 export const USER_TYPES_MAP = {
diff --git a/src/Common/schemaParser.ts b/src/Common/schemaParser.ts
new file mode 100644
index 00000000000..d4c2d89e1ee
--- /dev/null
+++ b/src/Common/schemaParser.ts
@@ -0,0 +1,197 @@
+export interface SingleKeySchema {
+  parent?: string;
+  prop: string;
+  type: string;
+  oneOf?: string[];
+  required?: boolean;
+  parse?: (value: any) => any;
+}
+
+export interface SchemaType {
+  [key: string]: SingleKeySchema;
+}
+
+export interface DataWithError {
+  [key: string]: {
+    value: any;
+    error?: string;
+  };
+}
+
+export interface ParsedData {
+  [key: string]: any;
+}
+
+export interface ErrorData {
+  index: number;
+  key: string;
+  error: string;
+}
+
+interface parseDataProps {
+  dataWithErrors: DataWithError[];
+  parsedData: ParsedData[];
+  errors: ErrorData[];
+}
+
+const validateAndParse = (
+  key: string,
+  value: any,
+  schema: SingleKeySchema,
+): { [key: string]: { value: any; error?: string } } => {
+  try {
+    const parsedValue = schema?.parse?.(value) ?? value;
+    const expectedType = schema?.type;
+
+    if (
+      (parsedValue === undefined || parsedValue === null) &&
+      !schema?.required
+    ) {
+      return { [key]: { value: parsedValue } };
+    }
+
+    if (typeof parsedValue !== expectedType && expectedType !== "any") {
+      return {
+        [key]: {
+          value: parsedValue,
+          error: `${key} should be of type ${expectedType}`,
+        },
+      };
+    }
+
+    if (schema?.oneOf && !schema?.oneOf.includes(parsedValue)) {
+      return {
+        [key]: {
+          value: parsedValue,
+          error: `${key} should be one of the ${schema?.oneOf}`,
+        },
+      };
+    }
+
+    if (
+      schema?.required &&
+      (parsedValue === undefined || parsedValue === null)
+    ) {
+      return {
+        [key]: { value: parsedValue, error: `${key} is required` },
+      };
+    }
+
+    return { [key]: { value: parsedValue } };
+  } catch (error: any) {
+    return { [key]: { value, error: error.message } };
+  }
+};
+
+const parseDataWithSchema = (
+  data: any[],
+  schema: SchemaType,
+): parseDataProps => {
+  const errors: ErrorData[] = [];
+  const parsedData: ParsedData[] = [];
+  const dataWithErrors: DataWithError[] = data.map((item, index) => {
+    return Object.keys(schema).reduce((acc, key) => {
+      const {
+        [key]: { value, error },
+      } = validateAndParse(key, item[key], schema[key]);
+      const parsedRow = { [schema[key].prop]: value };
+      if (error) {
+        errors.push({ index, key, error });
+      }
+      const prop = schema[key].prop || key;
+
+      if (schema[key].parent) {
+        const indexKey = schema[key].parent || key;
+        acc[indexKey] = acc[indexKey] || {};
+        acc[indexKey][prop] = { value, error };
+
+        if (!parsedData[index]) {
+          parsedData[index] = {};
+        }
+
+        parsedData[index][indexKey] = {
+          ...(parsedData[index][indexKey] || {}),
+          [prop]: value,
+        };
+      } else {
+        acc[prop] = { value, error };
+
+        if (!parsedData[index]) {
+          parsedData[index] = {};
+        }
+
+        parsedData[index] = { ...parsedData[index], ...parsedRow };
+      }
+
+      return acc;
+    }, {} as ParsedData);
+  });
+
+  return { dataWithErrors, parsedData, errors };
+};
+/**
+ * This function takes in an array of JSON data and a schema and returns the parsed data and the data with errors
+ * @param dataArray The array of JSON data to be parsed
+ * @param schema The schema to validate and parse the data against
+ * @returns An object containing the parsed data, data with errors, and data without errors
+ * @example
+ * const data = [
+ *  { name: "Ram", age: 25 },
+ *  { name: "Raj", age: "30" },
+ *  { name: "Sam", age: 35 },
+ * ];
+ *
+ * const schema = {
+ *  name: { prop: "name", type: "string", required: true },
+ *  age: { prop: "age", type: "number", required: true , parse: (value) => {
+ *    if(value < 0 || value > 100) throw new Error("age should be between 0 and 100");
+ *    return value;
+ * },
+ * };
+ *
+ * const { dataWithErrors, parsedData, ParsedDataWithOutErrors, errors } = schemaParser(data, schema);
+ *
+ * dataWithErrors => [
+ * { name: { value: "Ram" }, age: { value: 25 } },
+ * { name: { value: "Raj" }, age: { value: "30", error: "age should be of type number" } },
+ * { name: { value: "Sam" }, age: { value: 35 } },
+ * ]
+ *
+ * parsedData => [
+ * { name: "Ram", age: 25 },
+ * { name: "Raj", age: "30" },
+ * { name: "Sam", age: 35 },
+ * ]
+ *
+ * ParsedDataWithOutErrors => [
+ * { name: "Ram", age: 25 },
+ * { name: "Sam", age: 35 },
+ * ]
+ *
+ * errors => [
+ * { index: 1, key: "age", error: "age should be of type number" }
+ * ]
+ *
+ */
+const schemaParser = (
+  dataArray: any[],
+  schema: SchemaType,
+): parseDataProps & { ParsedDataWithOutErrors: ParsedData[] } => {
+  const { dataWithErrors, parsedData, errors } = parseDataWithSchema(
+    dataArray,
+    schema,
+  );
+
+  const ParsedDataWithOutErrors = parsedData.filter((item, index) => {
+    return !Object.values(dataWithErrors[index]).some((item) => item.error);
+  });
+
+  return {
+    dataWithErrors,
+    parsedData,
+    ParsedDataWithOutErrors,
+    errors,
+  };
+};
+
+export default schemaParser;
diff --git a/src/Components/Assets/AssetImportModal.tsx b/src/Components/Assets/AssetImportModal.tsx
index 621d58fdd51..8c020e1a006 100644
--- a/src/Components/Assets/AssetImportModal.tsx
+++ b/src/Components/Assets/AssetImportModal.tsx
@@ -1,23 +1,19 @@
-import { ChangeEventHandler, useEffect, useState } from "react";
-import useDragAndDrop from "../../Utils/useDragAndDrop";
+import { useState, lazy } from "react";
 import { sleep } from "../../Utils/utils";
 import { FacilityModel } from "../Facility/models";
 import { AssetData } from "./AssetTypes";
 import * as Notification from "../../Utils/Notifications.js";
-import { Cancel, Submit } from "../Common/components/ButtonV2";
+import { Cancel } from "../Common/components/ButtonV2";
 import { Link } from "raviger";
-import readXlsxFile from "read-excel-file";
-import {
-  LocalStorageKeys,
-  XLSXAssetImportSchema,
-} from "../../Common/constants";
-import { parseCsvFile } from "../../Utils/utils";
+import { LocalStorageKeys, AssetImportSchema } from "../../Common/constants";
 import useConfig from "../../Common/hooks/useConfig";
 import DialogModal from "../Common/Dialog";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
-import CareIcon from "../../CAREUI/icons/CareIcon";
+const ExcelFileDragAndDrop = lazy(
+  () => import("../Common/ExcelFIleDragAndDrop"),
+);
 
 interface Props {
   open: boolean;
@@ -28,18 +24,14 @@ interface Props {
 
 const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
   const [isImporting, setIsImporting] = useState(false);
-  const [selectedFile, setSelectedFile] = useState<any>();
-  const [preview, setPreview] =
-    useState<(AssetData & { notes?: string; last_serviced_on?: string })[]>();
   const [location, setLocation] = useState("");
+  const [isValid, setIsValid] = useState(false);
   const [errors, setErrors] = useState<any>({
     location: "",
   });
   const { sample_format_asset_import } = useConfig();
 
   const closeModal = () => {
-    setPreview(undefined);
-    setSelectedFile(undefined);
     onClose && onClose();
   };
   const { data, loading } = useQuery(routes.listFacilityAssetLocation, {
@@ -48,63 +40,10 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
 
   const locations = data?.results || [];
 
-  useEffect(() => {
-    const readFile = async () => {
-      try {
-        if (selectedFile) {
-          switch (selectedFile.name.split(".").pop()) {
-            case "xlsx": {
-              const parsedData = await readXlsxFile(selectedFile, {
-                schema: XLSXAssetImportSchema,
-              });
-              if (parsedData.errors.length) {
-                parsedData.errors.map((error) => {
-                  Notification.Error({
-                    msg: `Please check the row ${error.row} of column ${error.column}`,
-                  });
-                });
-                setSelectedFile(undefined);
-              } else {
-                setPreview(parsedData.rows as AssetData[]);
-              }
-              break;
-            }
-            case "csv": {
-              const parsedData = await parseCsvFile(
-                selectedFile,
-                XLSXAssetImportSchema,
-              );
-              setPreview(parsedData);
-              break;
-            }
-            default: {
-              const parsedData = JSON.parse(await selectedFile.text());
-              setPreview(parsedData);
-            }
-          }
-        }
-      } catch (e: any) {
-        setPreview(undefined);
-        console.log(e);
-        Notification.Error({
-          msg: "Invalid file: " + e.message,
-        });
-        setSelectedFile(undefined);
-      }
-    };
-    readFile();
-  }, [selectedFile]);
-
-  const onSelectFile: ChangeEventHandler<HTMLInputElement> = (e) => {
-    if (!e.target.files || e.target.files.length === 0) {
-      setSelectedFile(undefined);
-      return;
-    }
-    setSelectedFile(e.target.files[0]);
-  };
-
-  const handleUpload = async () => {
-    if (!selectedFile) {
+  const handleUpload = async (
+    data: (AssetData & { notes?: string; last_serviced_on?: string })[],
+  ) => {
+    if (!data) {
       closeModal();
       return;
     }
@@ -119,7 +58,7 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
     let error = false;
     Notification.Success({ msg: "Importing assets..." });
 
-    for (const asset of preview || []) {
+    for (const asset of data || []) {
       const asset_data: any = {
         name: asset.name,
         asset_type: asset.asset_type,
@@ -162,10 +101,6 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
             "Error importing asset: " + asset.name + " " + JSON.stringify(data),
         });
         error = true;
-      } else {
-        setPreview((preview) => {
-          return preview?.slice(1);
-        });
       }
     }
     if (!error) {
@@ -173,30 +108,14 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
       await sleep(1000);
       setIsImporting(false);
       onUpdate?.();
+      closeModal();
     } else {
       Notification.Error({ msg: "Error importing some assets" });
       await sleep(1000);
       setIsImporting(false);
-      closeModal();
     }
   };
 
-  const dragProps = useDragAndDrop();
-  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    dragProps.setDragOver(false);
-    const dropedFile = e?.dataTransfer?.files[0];
-    if (
-      !["xlsx", "csv", "json"].includes(
-        dropedFile?.name?.split(".")?.pop() || "",
-      )
-    )
-      return dragProps.setFileDropError(
-        "Please drop a JSON / Excel file to upload!",
-      );
-    setSelectedFile(dropedFile);
-  };
-
   return (
     <DialogModal
       title="Import Assets"
@@ -228,147 +147,38 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
         </>
       ) : (
         <>
-          {preview && preview?.length > 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg">
-              <h1 className="m-7 text-2xl font-medium text-gray-700">
-                {preview.length} assets {isImporting ? "are being" : "will be"}{" "}
-                imported
-              </h1>
-              <div className="w-1/2 p-4">
-                <label htmlFor="asset-location" className="flex gap-1">
-                  Select location for import{" "}
-                  <p className="font-semibold text-danger-500">*</p>
-                </label>
-                <div className="mt-2" data-testid="select-import-location">
-                  <SelectFormField
-                    name="asset-import-location"
-                    options={locations.map((location: any) => ({
-                      title: location.name,
-                      description: location.facility.name,
-                      value: location.id,
-                    }))}
-                    optionLabel={(o) => o.title}
-                    optionValue={(o) => o.value}
-                    placeholder="Select a location"
-                    value={location}
-                    onChange={({ value }) => setLocation(value)}
-                    error={errors.location}
-                  />
-                </div>
-              </div>
-              <div className="my-4 h-80 overflow-y-scroll rounded border border-gray-500 bg-white md:min-w-[500px]">
-                <div className="flex border-b p-2">
-                  <div className="mr-2 p-2 font-bold">#</div>
-                  <div className="mr-2 p-2 font-bold md:w-1/2">Name</div>
-                  <div className="mr-2 p-2 font-bold md:w-1/2">Description</div>
-                </div>
-                {preview.map((data: AssetData, index: number) => {
-                  return (
-                    <div key={index} className="flex border-b p-2">
-                      <div className="mr-2 p-2">{index + 1}</div>
-                      <div className="mr-2 p-2 md:w-1/2">{data.name}</div>
-                      <div className="mr-2 p-2 md:w-1/2">
-                        {data.description}
-                      </div>
-                    </div>
-                  );
-                })}
+          {isValid && (
+            <div className="mx-auto w-1/2">
+              <label htmlFor="asset-location" className="flex gap-1">
+                Select location for import{" "}
+                <p className="font-semibold text-danger-500">*</p>
+              </label>
+              <div data-testid="select-import-location">
+                <SelectFormField
+                  name="asset-import-location"
+                  options={locations.map((location: any) => ({
+                    title: location.name,
+                    description: location.facility.name,
+                    value: location.id,
+                  }))}
+                  optionLabel={(o) => o.title}
+                  optionValue={(o) => o.value}
+                  placeholder="Select a location"
+                  value={location}
+                  onChange={({ value }) => setLocation(value)}
+                  error={errors.location}
+                />
               </div>
             </div>
-          ) : (
-            <div
-              onDragOver={dragProps.onDragOver}
-              onDragLeave={dragProps.onDragLeave}
-              onDrop={onDrop}
-              className={`mb-8 mt-5 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
-                dragProps.dragOver && "border-primary-500"
-              } ${
-                dragProps.fileDropError !== ""
-                  ? "border-red-500"
-                  : "border-gray-500"
-              }`}
-            >
-              <svg
-                stroke="currentColor"
-                fill="none"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                className={`h-12 w-12 ${
-                  dragProps.dragOver && "text-primary-500"
-                } ${
-                  dragProps.fileDropError !== ""
-                    ? "text-red-500"
-                    : "text-gray-600"
-                }`}
-              >
-                <path d="M12.71,11.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-2,2a1,1,0,0,0,1.42,1.42l.29-.3V17a1,1,0,0,0,2,0V14.41l.29.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM20,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19l-.1,0A1.1,1.1,0,0,0,13.06,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V9S20,9,20,8.94ZM14,5.41,16.59,8H15a1,1,0,0,1-1-1ZM18,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V5A1,1,0,0,1,7,4h5V7a3,3,0,0,0,3,3h3Z" />
-              </svg>
-              <p
-                className={`text-sm ${
-                  dragProps.dragOver && "text-primary-500"
-                } ${
-                  dragProps.fileDropError !== ""
-                    ? "text-red-500"
-                    : "text-gray-700"
-                } text-center`}
-              >
-                {dragProps.fileDropError !== ""
-                  ? dragProps.fileDropError
-                  : "Drag & drop JSON / Excel (xlsx, csv)  file to upload"}
-              </p>
-              <a
-                className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
-                href={sample_format_asset_import}
-              >
-                <CareIcon
-                  icon="l-download-alt"
-                  className="mr-1 text-lg"
-                  aria-hidden="true"
-                />{" "}
-                <span>Sample Format</span>
-              </a>
-            </div>
           )}
-
-          <div className="flex flex-col gap-2 sm:flex-row">
-            <div>
-              <label className="flex cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400">
-                <CareIcon icon="l-cloud-upload" className="mr-2 text-lg" />
-                Upload a file
-                <input
-                  data-testid="import-asset-file"
-                  title="changeFile"
-                  type="file"
-                  accept=".json, .xlsx, .csv"
-                  className="hidden"
-                  onChange={onSelectFile}
-                  onClick={() => {
-                    setPreview(undefined);
-                  }}
-                />
-              </label>
-            </div>
-            <div className="sm:flex-1" />
-            <Cancel
-              onClick={() => {
-                closeModal();
-                dragProps.setFileDropError("");
-              }}
-              disabled={isImporting}
-            />
-            <Submit
-              onClick={handleUpload}
-              disabled={isImporting || !selectedFile}
-              data-testid="asset-import-btn"
-            >
-              {isImporting ? (
-                <CareIcon icon="l-spinner" className="animate-spin text-lg" />
-              ) : (
-                <CareIcon icon="l-file-import" className="text-lg" />
-              )}
-              <span>{isImporting ? "Importing..." : "Import"}</span>
-            </Submit>
-          </div>
+          <ExcelFileDragAndDrop
+            onClose={closeModal}
+            handleSubmit={handleUpload}
+            loading={isImporting}
+            schema={AssetImportSchema}
+            sampleLink={sample_format_asset_import}
+            setIsValid={setIsValid}
+          />
         </>
       )}
     </DialogModal>
diff --git a/src/Components/Common/ExcelFIleDragAndDrop.tsx b/src/Components/Common/ExcelFIleDragAndDrop.tsx
new file mode 100644
index 00000000000..750d4785279
--- /dev/null
+++ b/src/Components/Common/ExcelFIleDragAndDrop.tsx
@@ -0,0 +1,272 @@
+import _ from "lodash-es";
+import { useEffect, useRef, useState } from "react";
+import * as Notification from "../../Utils/Notifications.js";
+import { useTranslation } from "react-i18next";
+import { Cancel, Submit } from "./components/ButtonV2.js";
+import CareIcon from "../../CAREUI/icons/CareIcon.js";
+import useDragAndDrop from "../../Utils/useDragAndDrop.js";
+import ExcelViewer from "./ExcelViewer.js";
+import * as XLSX from "xlsx";
+import schemaParser, {
+  SchemaType,
+  ErrorData,
+  ParsedData,
+} from "../../Common/schemaParser.js";
+
+interface Props {
+  handleSubmit: (data: any) => void;
+  loading: boolean;
+  sampleLink?: string;
+  schema: SchemaType;
+  onClose?: () => void;
+  setIsValid?: (value: boolean) => void;
+}
+
+export default function ExcelFileDragAndDrop({
+  handleSubmit,
+  loading = false,
+  sampleLink,
+  schema,
+  onClose,
+  setIsValid,
+}: Props) {
+  const [fileData, setFileData] = useState<any>([]);
+  const [errors, setErrors] = useState<ErrorData[]>([]);
+  const [preview, setPreview] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<any>();
+  const [validData, setValidData] = useState<ParsedData[]>([]);
+  const [parsedData, setParsedData] = useState<ParsedData[]>([]);
+
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const closeModal = () => {
+    setSelectedFile(undefined);
+    setFileData([]);
+    onClose && onClose();
+  };
+
+  const onSelectFile = (file: Blob) => {
+    setSelectedFile(file);
+    dragProps.setFileDropError("");
+    try {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const result = (e.target as FileReader).result;
+        const workbook = XLSX.read(result, {
+          type: "binary",
+          cellDates: true,
+        });
+        const worksheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[worksheetName];
+        const data = XLSX.utils.sheet_to_json(worksheet, { defval: "" });
+        //converts the date to string
+        data.forEach((row: any) => {
+          _.forIn(row, (value: any, key) => {
+            if (value instanceof Date) {
+              row[key] = value.toISOString().split("T")[0];
+            }
+          });
+        });
+
+        setFileData(data);
+      };
+      reader.onerror = () => {
+        throw new Error("Error in reading file");
+      };
+
+      reader.readAsBinaryString(file);
+    } catch (e: any) {
+      Notification.Error({
+        msg: e.message,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (fileData.length !== 0) {
+      const { errors, parsedData, ParsedDataWithOutErrors } = schemaParser(
+        fileData,
+        schema,
+      );
+      setErrors(errors);
+      setParsedData(parsedData);
+      setValidData(ParsedDataWithOutErrors);
+      if (ParsedDataWithOutErrors.length !== 0) {
+        setIsValid && setIsValid(true);
+      }
+    }
+  }, [fileData]);
+
+  const dragProps = useDragAndDrop();
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragProps.setDragOver(false);
+
+    const droppedFiles = e?.dataTransfer?.files;
+
+    if (!droppedFiles || droppedFiles.length === 0) {
+      return dragProps.setFileDropError("Please drop a file to upload!");
+    }
+
+    const droppedFile = droppedFiles[0];
+    const fileTypes = [
+      "vnd.ms-excel",
+      "text/csv",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ];
+
+    if (!fileTypes.includes(droppedFile?.type)) {
+      dragProps.setFileDropError("Please drop a Excel / CSV file to upload!");
+      setSelectedFile(null);
+      return;
+    }
+    onSelectFile(droppedFile);
+  };
+
+  return (
+    <div>
+      {preview && (
+        <ExcelViewer
+          show={preview}
+          onClose={() => setPreview(false)}
+          selectedFile={selectedFile}
+          fileData={fileData}
+          errors={errors}
+          handleSubmit={handleSubmit}
+          parsedData={parsedData}
+        />
+      )}
+      <div
+        onDragOver={dragProps.onDragOver}
+        onDragLeave={dragProps.onDragLeave}
+        onDrop={onDrop}
+        onClick={() => !selectedFile && fileInputRef.current?.click()}
+        className={`mb-8 mt-5 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
+          dragProps.dragOver ? "border-primary-500" : "border-gray-500"
+        } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
+      >
+        <svg
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          className={`h-12 w-12 ${dragProps.dragOver && "text-primary-500"} ${
+            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-600"
+          }`}
+        >
+          <path d="M12.71,11.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-2,2a1,1,0,0,0,1.42,1.42l.29-.3V17a1,1,0,0,0,2,0V14.41l.29.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM20,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19l-.1,0A1.1,1.1,0,0,0,13.06,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V9S20,9,20,8.94ZM14,5.41,16.59,8H15a1,1,0,0,1-1-1ZM18,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V5A1,1,0,0,1,7,4h5V7a3,3,0,0,0,3,3h3Z" />
+        </svg>
+        <p
+          className={`text-sm ${dragProps.dragOver && "text-primary-500"} ${
+            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-700"
+          } text-center`}
+        >
+          {dragProps.fileDropError !== "" && dragProps.fileDropError}
+          {!selectedFile && "Drag & drop xlsx/csv file to upload"}
+        </p>
+        <input
+          data-testid="import-file"
+          type="file"
+          accept=".csv, .xlsx"
+          onChange={(e) => {
+            const files = e.target.files;
+            if (files && files.length > 0) {
+              onSelectFile(files[0]);
+            }
+          }}
+          className="hidden"
+          ref={fileInputRef}
+        />
+        {selectedFile && (
+          <div className="flex pt-2">
+            <p className="text-sm text-gray-700">
+              {selectedFile.name} - {(selectedFile.size / 1024).toFixed(2)} KB
+            </p>
+            <span
+              className="cursor-pointer px-5 text-sm text-primary-500"
+              onClick={() => {
+                setSelectedFile(undefined);
+                setFileData([]);
+                setErrors([]);
+                setValidData([]);
+                setIsValid && setIsValid(false);
+                dragProps.setDragOver(false);
+                dragProps.setFileDropError("");
+              }}
+            >
+              cancel
+            </span>
+          </div>
+        )}
+        {selectedFile ? (
+          <>
+            <span
+              className="focus:ring-blue mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+              onClick={() => setPreview(true)}
+            >
+              <CareIcon
+                icon="l-arrow-up-right"
+                className="mr-1 text-lg"
+                aria-hidden="true"
+              />{" "}
+              preview
+            </span>
+          </>
+        ) : (
+          <a
+            className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+            href={sampleLink}
+            target="_blank"
+            download
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CareIcon
+              icon="l-download-alt"
+              className="mr-1 text-lg"
+              aria-hidden="true"
+            />{" "}
+            <span>{t("sample_format")}</span>
+          </a>
+        )}
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <label
+          className="flex cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <CareIcon icon="l-cloud-upload" className="mr-2 text-lg" />
+          Upload a file
+        </label>
+        <div className="sm:flex-1" />
+        <Cancel
+          onClick={() => {
+            closeModal();
+            setErrors([]);
+            setValidData([]);
+            dragProps.setDragOver(false);
+            dragProps.setFileDropError("");
+          }}
+          disabled={loading}
+        />
+        <Submit
+          data-testid="import-btn"
+          onClick={() => handleSubmit(validData)}
+          disabled={loading || !selectedFile || validData.length === 0}
+        >
+          {loading ? (
+            <CareIcon icon="l-spinner" className="animate-spin text-lg" />
+          ) : (
+            <CareIcon icon="l-file-import" className="text-lg" />
+          )}
+          <span>
+            {loading
+              ? "Importing..."
+              : `Import ${validData.length} valid fields`}
+          </span>
+        </Submit>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/ExcelViewer.tsx b/src/Components/Common/ExcelViewer.tsx
new file mode 100644
index 00000000000..2d649ca42b2
--- /dev/null
+++ b/src/Components/Common/ExcelViewer.tsx
@@ -0,0 +1,283 @@
+import { ReactNode, useEffect, useState } from "react";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ButtonV2, { Cancel, Submit } from "./components/ButtonV2";
+import DialogModal from "./Dialog";
+import Pagination from "./Pagination";
+import { ParsedData } from "../../Common/schemaParser";
+
+type FilePreviewProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  show: boolean;
+  onClose: () => void;
+  selectedFile: { name: string };
+  fileData?: any[];
+  downloadURL?: string;
+  className?: string;
+  errors?: { index: number; key: string; error: string }[];
+  handleSubmit: (data: ParsedData[]) => void;
+  showCheckbox?: boolean;
+  parsedData: ParsedData[];
+};
+
+const ExcelViewer = ({
+  title = "File Preview",
+  description,
+  show,
+  onClose,
+  className,
+  selectedFile,
+  fileData,
+  downloadURL,
+  showCheckbox = true,
+  handleSubmit,
+  parsedData,
+  errors = [],
+}: FilePreviewProps) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [selectedRowsData, setSelectedRowsData] = useState<any[]>([]);
+
+  const initialSelectedRows = fileData
+    ? fileData
+        .map((_, i) => i)
+        .filter((i) => !errors.some((err) => err.index === i)) ?? []
+    : [];
+
+  const [selectedRows, setSelectedRows] =
+    useState<number[]>(initialSelectedRows);
+
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  useEffect(() => {
+    setSelectedRowsData(selectedRows.map((rowIndex) => parsedData[rowIndex]));
+  }, [selectedRows]);
+
+  return (
+    <DialogModal
+      fixedWidth={false}
+      className={`z-10 h-full w-full max-w-5xl flex-col gap-4 rounded-lg bg-white p-4 shadow-xl md:p-6 ${className}`}
+      onClose={() => {
+        handleClose();
+      }}
+      title={title}
+      description={description}
+      show={show}
+    >
+      <>
+        <div className="mb-2 flex flex-col items-center justify-between md:flex-row">
+          <p className="text-md font-semibold text-gray-700">
+            {selectedFile.name}
+          </p>
+          <div className="flex gap-4">
+            {downloadURL && downloadURL.length > 0 && (
+              <ButtonV2>
+                <a
+                  href={downloadURL}
+                  className="text-white"
+                  download={selectedFile.name}
+                >
+                  <CareIcon icon="l-file-download" className="h-4 w-4" />
+                  <span>Download</span>
+                </a>
+              </ButtonV2>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col justify-center">
+          <div className="flex w-full justify-center overflow-scroll rounded-lg border border-gray-200">
+            {fileData && fileData[0] ? (
+              <div className="overflow-x-auto">
+                <table className="w-full table-auto border-collapse rounded-lg border border-gray-300 bg-white shadow-md">
+                  <thead className="sticky top-0 bg-gray-100">
+                    <tr>
+                      {showCheckbox && (
+                        <th className="w-5 px-4 py-2">
+                          <input
+                            type="checkbox"
+                            checked={selectedRows.length === fileData.length}
+                            disabled={errors.length > 0}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedRows(fileData.map((_, i) => i));
+                              } else {
+                                setSelectedRows([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
+                      {Object.keys(fileData[0]).map((key) => (
+                        <th
+                          key={key}
+                          className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap border-b px-4 py-2"
+                          title={key}
+                        >
+                          {key}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {fileData
+                      .slice(
+                        (currentPage - 1) * rowsPerPage,
+                        (currentPage - 1) * rowsPerPage + rowsPerPage,
+                      )
+                      .map((row, rowIndex) => {
+                        const currentRowIndex =
+                          rowIndex + (currentPage - 1) * rowsPerPage;
+                        return (
+                          <tr
+                            key={currentRowIndex}
+                            className={`
+                            ${rowIndex % 2 === 0 ? "bg-gray-50" : "bg-white"}
+                          `}
+                          >
+                            {showCheckbox && (
+                              <td className="w-5 px-4">
+                                {errors.some(
+                                  (err) => err.index === currentRowIndex,
+                                ) ? (
+                                  <span
+                                    title={`Error in column(s) ${errors
+                                      .filter(
+                                        (err) => err.index === currentRowIndex,
+                                      )
+                                      .map((err) => err.key)
+                                      .join(", ")}
+                                      `}
+                                  >
+                                    <CareIcon
+                                      icon="l-exclamation-triangle"
+                                      className="text-lg text-danger-500"
+                                    />
+                                  </span>
+                                ) : (
+                                  <input
+                                    type="checkbox"
+                                    checked={selectedRows.includes(
+                                      currentRowIndex,
+                                    )}
+                                    disabled={errors.some(
+                                      (err) => err.index === currentRowIndex,
+                                    )}
+                                    onChange={() => {
+                                      if (
+                                        selectedRows.includes(currentRowIndex)
+                                      ) {
+                                        setSelectedRows(
+                                          selectedRows.filter(
+                                            (i) => i !== currentRowIndex,
+                                          ),
+                                        );
+                                      } else {
+                                        setSelectedRows([
+                                          ...selectedRows,
+                                          currentRowIndex,
+                                        ]);
+                                      }
+                                    }}
+                                    className="disabled:bg-danger-500"
+                                  />
+                                )}
+                              </td>
+                            )}
+                            {Object.entries(row).map(
+                              ([key, value]: [string, any], colIndex) => {
+                                const error = errors.find(
+                                  (err) =>
+                                    err.index === currentRowIndex &&
+                                    err.key == key,
+                                );
+
+                                return (
+                                  <>
+                                    <td
+                                      key={colIndex}
+                                      className={`
+                                  max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap border px-4 py-2
+                                  ${!!error && "text-red-500"}
+                                `}
+                                      title={
+                                        error ? error.error : String(value)
+                                      }
+                                    >
+                                      {String(value)}
+                                    </td>
+                                  </>
+                                );
+                              },
+                            )}
+                          </tr>
+                        );
+                      })}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-gray-500">No data found</div>
+            )}
+          </div>
+          {fileData && fileData.length > 5 && (
+            <div className="flex w-full flex-wrap items-center justify-between">
+              <p className="my-6 text-gray-600 md:w-auto">
+                Showing {currentPage * rowsPerPage - rowsPerPage + 1} to{" "}
+                {currentPage * rowsPerPage > fileData.length
+                  ? fileData.length
+                  : currentPage * rowsPerPage}{" "}
+                of {fileData.length} entries
+              </p>
+              {rowsPerPage < fileData.length && (
+                <Pagination
+                  cPage={currentPage}
+                  defaultPerPage={rowsPerPage}
+                  data={{ totalCount: fileData.length }}
+                  onChange={(page, rowsPerPage) => {
+                    setCurrentPage(page);
+                    setRowsPerPage(rowsPerPage);
+                  }}
+                />
+              )}
+              <select
+                className="my-4 ml-2 h-9 w-[4.5rem] rounded-md border border-primary-400 py-0 pl-2 pr-4 text-gray-600"
+                value={rowsPerPage}
+                onChange={(e) => {
+                  setRowsPerPage(+e.target.value);
+                }}
+              >
+                {fileData && fileData.length > 0 && (
+                  <>
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="20">20</option>
+                    {fileData.length > 50 && <option value="50">50</option>}
+                    {fileData.length > 100 && <option value="100">100</option>}
+                  </>
+                )}
+              </select>
+            </div>
+          )}
+        </div>
+      </>
+      <div className="flex flex-wrap-reverse justify-end gap-5">
+        <Cancel onClick={onClose} label="Close" />
+        <Submit
+          onClick={() => {
+            handleSubmit(selectedRowsData);
+            handleClose();
+          }}
+          disabled={selectedRows.length === 0}
+          data-testid="import-btn"
+        >
+          <CareIcon icon="l-file-import" className="text-lg" />
+          <span>Import {selectedRows.length} selected fields</span>
+        </Submit>
+      </div>
+    </DialogModal>
+  );
+};
+
+export default ExcelViewer;
diff --git a/src/Components/ExternalResult/ExternalResultImportModal.tsx b/src/Components/ExternalResult/ExternalResultImportModal.tsx
new file mode 100644
index 00000000000..06ba575b3f2
--- /dev/null
+++ b/src/Components/ExternalResult/ExternalResultImportModal.tsx
@@ -0,0 +1,113 @@
+import _ from "lodash-es";
+import { navigate } from "raviger";
+import { useEffect, useState, lazy } from "react";
+import useConfig from "../../Common/hooks/useConfig";
+import * as Notification from "../../Utils/Notifications.js";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import { ExternalResultImportSchema } from "../../Common/constants";
+import DialogModal from "../Common/Dialog";
+import { IExternalResult } from "./models";
+const ExcelFileDragAndDrop = lazy(
+  () => import("../Common/ExcelFIleDragAndDrop"),
+);
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function ExternalResultImportModal({ open, onClose }: Props) {
+  const { sample_format_external_result_import } = useConfig();
+  const [loading, setLoading] = useState(false);
+
+  const fetchUser = async () => {
+    const { data: user } = await request(routes.currentUser, {
+      pathParams: {},
+    });
+
+    ExternalResultImportSchema.Address.parse = (value: string) => {
+      if (
+        user?.user_type === "StateAdmin" ||
+        user?.user_type === "StateLabAdmin"
+      ) {
+        if (value.split(",").pop()?.trim() === user?.state_object?.name) {
+          return value;
+        } else {
+          throw new Error("State should be the same as the user's state");
+        }
+      }
+      return value;
+    };
+
+    ExternalResultImportSchema.District.parse = (value: string) => {
+      if (
+        user?.user_type === "StateAdmin" ||
+        user?.user_type === "StateLabAdmin"
+      ) {
+        return value;
+      } else if (value !== user?.district_object?.name) {
+        throw new Error("District should be the same as the user's district");
+      }
+    };
+  };
+
+  useEffect(() => {
+    fetchUser();
+  }, []);
+
+  const handleSubmit = async (data: IExternalResult[]) => {
+    setLoading(true);
+
+    if (data.length !== 0) {
+      try {
+        const { res } = await request(routes.externalResultUploadCsv, {
+          body: {
+            sample_tests: data,
+          },
+        });
+
+        if (res && res.status === 202) {
+          setLoading(false);
+          navigate("/external_results");
+          Notification.Success({
+            msg: "External Results imported successfully",
+          });
+        } else {
+          Notification.Error({
+            msg: "Something went wrong",
+          });
+          setLoading(false);
+        }
+      } catch (error) {
+        Notification.Error({
+          msg: "Something went wrong: " + error,
+        });
+        setLoading(false);
+      } finally {
+        setLoading(false);
+        onClose();
+      }
+    } else {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <DialogModal
+      title="Import External Results"
+      show={open}
+      onClose={onClose}
+      className="w-[48rem]"
+      fixedWidth={false}
+    >
+      <ExcelFileDragAndDrop
+        onClose={onClose}
+        handleSubmit={handleSubmit}
+        loading={loading}
+        sampleLink={sample_format_external_result_import}
+        schema={ExternalResultImportSchema}
+      />
+    </DialogModal>
+  );
+}
diff --git a/src/Components/ExternalResult/ExternalResultUpload.tsx b/src/Components/ExternalResult/ExternalResultUpload.tsx
deleted file mode 100644
index 52f34c741d1..00000000000
--- a/src/Components/ExternalResult/ExternalResultUpload.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import _ from "lodash-es";
-import { navigate } from "raviger";
-import { lazy, useEffect, useState } from "react";
-import CSVReader from "react-csv-reader";
-import { useTranslation } from "react-i18next";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import useAppHistory from "../../Common/hooks/useAppHistory";
-import useConfig from "../../Common/hooks/useConfig";
-import routes from "../../Redux/api";
-import * as Notification from "../../Utils/Notifications.js";
-import request from "../../Utils/request/request";
-import { Cancel, Submit } from "../Common/components/ButtonV2";
-import { IExternalResult } from "./models";
-const PageTitle = lazy(() => import("../Common/PageTitle"));
-
-export default function ExternalResultUpload() {
-  const { sample_format_external_result_import } = useConfig();
-  // for disabling save button once clicked
-  const [loading, setLoading] = useState(false);
-  const [csvData, setCsvData] = useState(new Array<IExternalResult>());
-  const [errors, setErrors] = useState<any>([]);
-  const [validationErrorCount, setValidationErrorCount] = useState(0);
-  const [user, setUser] = useState<any>({});
-  const handleForce = (data: any) => {
-    setCsvData(data);
-    setValidationErrorCount(
-      data.filter(
-        (result: IExternalResult) =>
-          ((user.user_type === "StateAdmin" ||
-            user.user_type === "StateLabAdmin") &&
-            result.address.split(",").pop()?.trim() !==
-              user.state_object.name) ||
-          (user.user_type !== "StateAdmin" &&
-            result.district !== user.district_object.name),
-      ).length,
-    );
-  };
-  const { t } = useTranslation();
-  const { goBack } = useAppHistory();
-
-  const fetchUser = async () => {
-    const { data: userData } = await request(routes.currentUser, {
-      pathParams: {},
-    });
-    setUser(userData);
-  };
-
-  useEffect(() => {
-    fetchUser();
-  }, []);
-
-  const papaparseOptions = {
-    header: true,
-    dynamicTyping: true,
-    skipEmptyLines: true,
-    transformHeader: (header: string) =>
-      header.toLowerCase().replace(/\W/g, "_"),
-  };
-
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-    setLoading(true);
-    const valid = true;
-
-    if (csvData.length !== 0) {
-      if (valid) {
-        setErrors([]);
-
-        try {
-          const { res, data } = await request(routes.externalResultUploadCsv, {
-            body: {
-              sample_tests: validationErrorCount
-                ? csvData.filter(
-                    (data: IExternalResult) =>
-                      ((user.user_type === "StateAdmin" ||
-                        user.user_type === "StateLabAdmin") &&
-                        data.address.split(",").pop()?.trim() !==
-                          user.state_object.name) ||
-                      (user.user_type !== "StateAdmin" &&
-                        data.district !== user.district_object.name),
-                  )
-                : csvData,
-            },
-          });
-
-          if (res && res.status === 202) {
-            setLoading(false);
-            navigate("/external_results");
-            Notification.Success({
-              msg: "External Results imported successfully",
-            });
-          } else {
-            if (data) {
-              setErrors(data.map((err: any) => Object.entries(err)));
-            }
-            setLoading(false);
-          }
-        } catch (error) {
-          console.error("An error occurred:", error);
-          Notification.Error({
-            msg: "Something went wrong: " + error,
-          });
-          setLoading(false);
-        }
-      } else {
-        setLoading(false);
-      }
-    } else {
-      Notification.Error({
-        msg: t("please_upload_a_csv_file"),
-      });
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="px-4">
-      <PageTitle
-        title={t("upload_external_results")}
-        backUrl="/external_results"
-        className="mt-4"
-      />
-      <div className="mx-auto mt-6 flex max-w-3xl justify-center">
-        <div className="py-4 md:w-[500px]">
-          <div className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
-            <div className="my-2 sm:col-span-2 sm:mt-0">
-              <div className="mx-auto flex flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
-                <span className="flex justify-center">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="mb-2 h-12 w-12 text-gray-700"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                    />
-                  </svg>
-                </span>
-                <CSVReader
-                  inputId="result-upload"
-                  cssLabelClass="mx-auto text-sm leading-5 font-medium text-gray-700"
-                  cssClass="flex flex-col react-csv-input"
-                  cssInputClass="csv-input"
-                  label={t("csv_file_in_the_specified_format")}
-                  onFileLoaded={handleForce}
-                  parserOptions={papaparseOptions}
-                />
-                <a
-                  className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
-                  href={sample_format_external_result_import}
-                  target="_blank"
-                  download
-                >
-                  <CareIcon
-                    icon="l-download-alt"
-                    className="mr-1 text-lg"
-                    aria-hidden="true"
-                  />{" "}
-                  <span>{t("sample_format")}</span>
-                </a>
-              </div>
-            </div>
-          </div>
-          {csvData.length > 0 && (
-            <p className="flex justify-end p-2">Total: {csvData.length}</p>
-          )}
-          <div className=" rounded bg-white shadow">
-            {csvData.map((data: any, index: number) => {
-              return (
-                <div key={data.name} className="flex border-b p-2">
-                  <div className="mr-2 p-2">{index + 1}</div>
-                  <div className="mr-2 p-2 md:w-1/3">{data.name}</div>
-
-                  <div className="mr-2 p-2 capitalize">
-                    {errors && errors.length !== 0
-                      ? errors.map((error: any) => {
-                          return (
-                            <div key={error[0][0]}>
-                              {_.startCase(_.camelCase(error[0][0]))} -{" "}
-                              {error[0][1]}
-                            </div>
-                          );
-                        })
-                      : null}
-                  </div>
-                  <div>
-                    {(((user.user_type === "StateAdmin" ||
-                      user.user_type === "StateLabAdmin") &&
-                      data.address.split(",").pop()?.trim() !==
-                        user.state_object.name) ||
-                      (user.user_type !== "StateAdmin" &&
-                        user.user_type !== "StateLabAdmin" &&
-                        data.district !== user.district_object.name)) && (
-                      <p className="mt-2 flex items-center justify-center gap-1 text-red-500">
-                        <CareIcon icon="l-exclamation-triangle" /> Different
-                        districts
-                      </p>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-          <div className=""></div>
-          <div className="mt-2 flex flex-col justify-end gap-2 text-center md:flex-row">
-            <Cancel onClick={() => goBack()} />
-            <Submit
-              onClick={handleSubmit}
-              disabled={loading || csvData.length === validationErrorCount}
-              label={
-                validationErrorCount
-                  ? `Save Valid Records(${
-                      csvData.length - validationErrorCount
-                    })`
-                  : t("save")
-              }
-              data-testid="submit-button"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index 142fc9f9808..9d34b397026 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -18,6 +18,7 @@ import useQuery from "../../Utils/request/useQuery";
 import { parsePhoneNumber } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import ExternalResultImportModal from "./ExternalResultImportModal";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -34,6 +35,7 @@ export default function ResultList() {
     limit: 14,
     cacheBlacklist: ["mobile_number", "name"],
   });
+  const [importModalOpen, setImportModalOpen] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
   const [selectedFacility, setSelectedFacility] = useState<FacilityModel>({
     name: "",
@@ -243,9 +245,9 @@ export default function ResultList() {
                 ? [
                     {
                       label: "Import Results",
-                      action: () => navigate("/external_results/upload"),
                       options: {
                         icon: <CareIcon icon="l-import" />,
+                        onClick: () => setImportModalOpen(true),
                       },
                     },
                   ]
@@ -266,6 +268,12 @@ export default function ResultList() {
           />
         }
       >
+        {importModalOpen && (
+          <ExternalResultImportModal
+            open={importModalOpen}
+            onClose={() => setImportModalOpen(false)}
+          />
+        )}
         <div className="relative my-4 grid-cols-1 gap-5 px-2 sm:grid-cols-3 md:px-0 lg:grid">
           <CountBlock
             text="Total Results"
diff --git a/src/Routers/routes/ExternalResultRoutes.tsx b/src/Routers/routes/ExternalResultRoutes.tsx
index af4bf090d78..b6bc71a2808 100644
--- a/src/Routers/routes/ExternalResultRoutes.tsx
+++ b/src/Routers/routes/ExternalResultRoutes.tsx
@@ -1,4 +1,3 @@
-import ExternalResultUpload from "../../Components/ExternalResult/ExternalResultUpload";
 import ResultItem from "../../Components/ExternalResult/ResultItem";
 import ResultList from "../../Components/ExternalResult/ResultList";
 import ResultUpdate from "../../Components/ExternalResult/ResultUpdate";
@@ -6,7 +5,6 @@ import { DetailRoute } from "../types";
 
 export default {
   "/external_results": () => <ResultList />,
-  "/external_results/upload": () => <ExternalResultUpload />,
   "/external_results/:id": ({ id }: DetailRoute) => <ResultItem id={id} />,
   "/external_results/:id/update": ({ id }: DetailRoute) => (
     <ResultUpdate id={id} />
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 3db714d1e99..977221b6f66 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -160,56 +160,6 @@ export const classNames = (...classes: (string | boolean | undefined)[]) => {
   return classes.filter(Boolean).join(" ");
 };
 
-interface ISchema {
-  [key: string]: {
-    prop: string;
-    oneOf?: string[];
-    parse?: (value: any) => any;
-    type?: any;
-    required?: boolean;
-  };
-}
-
-export const parseCsvFile = async (
-  file: File,
-  schema: ISchema | undefined = undefined,
-) => {
-  const parseWithSchema: any = (schema: any, data: any) =>
-    Object.keys(schema).reduce((acc, key) => {
-      if (schema[key]?.oneOf && !schema[key].oneOf.includes(data[key]))
-        throw new Error(`${key} should be one of the ${schema[key].oneOf}`);
-
-      const value =
-        typeof schema[key]?.type === "object"
-          ? parseWithSchema(schema[key]?.type, data)
-          : schema[key]?.parse?.(data[key]) ?? data[key];
-
-      if (schema[key]?.required && (value === undefined || value === null))
-        throw new Error(`${key} is required`);
-
-      return value === undefined || value === null
-        ? acc
-        : {
-            ...acc,
-            [schema[key]?.prop]: value,
-          };
-    }, {});
-
-  const csvData = (await file.text())
-    .trim()
-    .split("\n")
-    .map((row: string) => row.split(","));
-
-  const parsed = csvData
-    .map((row: string[]) =>
-      row.reduce((acc, val, i) => ({ ...acc, [csvData[0][i]]: val }), {}),
-    )
-    .splice(1)
-    .map((csvMap: any) => (schema ? parseWithSchema(schema, csvMap) : csvMap));
-
-  return parsed;
-};
-
 export const getPincodeDetails = async (pincode: string, apiKey: string) => {
   const response = await fetch(
     `https://api.data.gov.in/resource/6176ee09-3d56-4a3b-8115-21841576b2f6?api-key=${apiKey}&format=json&filters[pincode]=${pincode}&limit=1`,

From 66e5ff4dd6ad97d6432b89966b3dbb94eabf870f Mon Sep 17 00:00:00 2001
From: hrit2773 <128292557+hrit2773@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:48:34 +0530
Subject: [PATCH 32/45] Occupation dropdown frontend (#7541)

* Occupation dropdown frontend

* Update src/Components/Form/FormFields/Autocomplete.tsx

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>

* Update src/Components/Patient/PatientRegister.tsx

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>

* constants changed

* changed

* final fix ocupations

* fix cypress

* changed dropdown

---------

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
---
 cypress/pageobject/Patient/PatientCreation.ts |  2 +-
 src/Common/constants.tsx                      | 46 +++++++++++++++++++
 src/Components/Patient/PatientRegister.tsx    |  3 +-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
index a708f754964..01bdfdb8cbb 100644
--- a/cypress/pageobject/Patient/PatientCreation.ts
+++ b/cypress/pageobject/Patient/PatientCreation.ts
@@ -95,7 +95,7 @@ export class PatientPage {
   }
 
   selectPatientOccupation(occupation: string) {
-    cy.clickAndSelectOption("#occupation", occupation);
+    cy.searchAndSelectOption("#occupation", occupation);
   }
 
   clickCreatePatient() {
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 862ba9e79ea..71fac975492 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -1274,4 +1274,50 @@ export const OCCUPATION_TYPES = [
   { id: 4, text: "Healthcare Lab Worker", value: "HEALTH_CARE_LAB_WORKER" },
   { id: 5, text: "Animal Handler", value: "ANIMAL_HANDLER" },
   { id: 6, text: "Others", value: "OTHERS" },
+  { id: 7, text: "Healthcare Practitioner", value: "HEALTHCARE_PRACTITIONER" },
+  { id: 8, text: "Paramedics", value: "PARADEMICS" },
+  {
+    id: 9,
+    text: "Business or Finance related Occupations",
+    value: "BUSINESS_RELATED",
+  },
+  { id: 10, text: "Engineer", value: "ENGINEER" },
+  { id: 11, text: "Teacher", value: "TEACHER" },
+  {
+    id: 12,
+    text: "Other Professional Occupations",
+    value: "OTHER_PROFESSIONAL_OCCUPATIONS",
+  },
+  {
+    id: 13,
+    text: "Office and Administrative Support Occupations",
+    value: "OFFICE_ADMINISTRATIVE",
+  },
+  { id: 14, text: "Chef or Head Cook", value: "CHEF" },
+  {
+    id: 15,
+    text: "Protective Service Occupations",
+    value: "PROTECTIVE_SERVICE",
+  },
+  { id: 16, text: "Hospitality Service Occupations", value: "HOSPITALITY" },
+  { id: 17, text: "Custodial Occupations", value: "CUSTODIAL" },
+  { id: 18, text: "Customer Service Occupations", value: "CUSTOMER_SERVICE" },
+  { id: 19, text: "Sales Supervisor", value: "SALES_SUPERVISOR" },
+  { id: 20, text: "Retail Sales Worker", value: "RETAIL_SALES_WORKER" },
+  { id: 21, text: "Insurance Sales Agent", value: "INSURANCE_SALES_AGENT" },
+  { id: 22, text: "Sales Representative", value: "SALES_REPRESENTATIVE" },
+  { id: 23, text: "Real Estate Sales Agent", value: "REAL_ESTATE" },
+  {
+    id: 24,
+    text: "Construction and Extraction Worker",
+    value: "CONSTRUCTION_EXTRACTION",
+  },
+  { id: 25, text: "Farming, Fishing and Forestry", value: "AGRI_NATURAL" },
+  { id: 26, text: "Production Occupations", value: "PRODUCTION_OCCUPATION" },
+  { id: 27, text: "Aircraft Pilot or Flight Engineer", value: "PILOT_FLIGHT" },
+  { id: 28, text: "Vehicle Driver", value: "VEHICLE_DRIVER" },
+  { id: 29, text: "Military", value: "MILITARY" },
+  { id: 30, text: "Homemaker", value: "HOMEMAKER" },
+  { id: 31, text: "Don't Know", value: "UNKNOWN" },
+  { id: 32, text: "Not Applicable", value: "NOT_APPLICABLE" },
 ];
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index dbc5b869e3e..7ec0dc10753 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -46,6 +46,7 @@ import { PatientModel, Occupation } from "./models";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import RadioFormField from "../Form/FormFields/RadioFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import AutocompleteFormField from "../Form/FormFields/Autocomplete.js";
 import Spinner from "../Common/Spinner";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
@@ -1673,7 +1674,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   />
                                 )}
                               </div>
-                              <SelectFormField
+                              <AutocompleteFormField
                                 {...field("occupation")}
                                 label="Occupation"
                                 placeholder="Select Occupation"

From bc244e86a2667f88942522fdb1920a8548143472 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 24 Apr 2024 17:00:01 +0530
Subject: [PATCH 33/45] Fix profile page not able to retrieve details for
 superusers (#7652)

---
 src/Components/Users/UserProfile.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 7f18eba8a9f..063280b0c16 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -144,8 +144,7 @@ export default function UserProfile() {
     data: userData,
     loading: isUserLoading,
     refetch: refetchUserData,
-  } = useQuery(routes.getUserDetails, {
-    pathParams: { username: authUser.username },
+  } = useQuery(routes.currentUser, {
     onResponse: (result) => {
       if (!result || !result.res || !result.data) return;
       const formData: EditForm = {

From 2e7d7effc15064875ca6a5ed9d2d6ee3fe73087e Mon Sep 17 00:00:00 2001
From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:05:00 +0530
Subject: [PATCH 34/45] Add notification for inventory use stock.  (#7618)

* add new notification

* Update src/Components/Facility/AddInventoryForm.tsx

Co-authored-by: Ashesh <3626859+Ashesh3@users.noreply.github.com>

---------

Co-authored-by: Ashesh <3626859+Ashesh3@users.noreply.github.com>
---
 src/Components/Facility/AddInventoryForm.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx
index a0516478cff..673e9949025 100644
--- a/src/Components/Facility/AddInventoryForm.tsx
+++ b/src/Components/Facility/AddInventoryForm.tsx
@@ -211,9 +211,16 @@ export const AddInventoryForm = (props: any) => {
         pathParams: { facilityId },
         onResponse: ({ res, data }) => {
           if (res?.ok && data) {
-            Notification.Success({
-              msg: "Inventory created successfully",
-            });
+            if (data.is_incoming) {
+              Notification.Success({
+                msg: "Inventory created successfully",
+              });
+            } else {
+              Notification.Success({
+                msg: "Inventory use stock updated successfully",
+              });
+            }
+
             goBack();
           }
         },

From da61744d7c6aa16198b13e9f12fa5106c2310ce3 Mon Sep 17 00:00:00 2001
From: Rashmik <146672184+rash-27@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:05:52 +0530
Subject: [PATCH 35/45] add seperate subheading in doctor connect (#7637)

---
 .../Facility/DoctorVideoSlideover.tsx         | 105 +++++++++++-------
 1 file changed, 64 insertions(+), 41 deletions(-)

diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 5c1e421917a..5fde98364da 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -18,6 +18,11 @@ enum FilterTypes {
   TELEICU = "TeleICU Hub",
 }
 
+interface DoctorDetails {
+  users: UserAssignedModel[];
+  type: FilterTypes.DOCTOR | FilterTypes.NURSE | FilterTypes.TELEICU;
+}
+
 const isHomeUser = (user: UserAssignedModel, facilityId: string) =>
   user.home_facility_object?.id === facilityId;
 
@@ -27,9 +32,7 @@ export default function DoctorVideoSlideover(props: {
   setShow: (show: boolean) => void;
 }) {
   const { show, facilityId, setShow } = props;
-  const [filteredDoctors, setFilteredDoctors] = useState<UserAssignedModel[]>(
-    [],
-  );
+  const [filteredDoctors, setFilteredDoctors] = useState<DoctorDetails[]>([]);
   const [filter, setFilter] = useState<FilterTypes>(FilterTypes.ALL);
 
   const { data: users, loading } = useQuery(routes.getFacilityUsers, {
@@ -40,30 +43,35 @@ export default function DoctorVideoSlideover(props: {
 
   useEffect(() => {
     const filterDoctors = (users: UserAssignedModel[]) => {
-      return users.filter(
-        (user: UserAssignedModel) =>
-          (user.alt_phone_number || user.video_connect_link) &&
+      const filteredusers = users
+        .filter((user: UserAssignedModel) => {
+          return user.alt_phone_number || user.video_connect_link;
+        })
+        .sort((a: UserAssignedModel, b: UserAssignedModel) => {
+          const aIsHomeUser = isHomeUser(a, facilityId);
+          const bIsHomeUser = isHomeUser(b, facilityId);
+          return aIsHomeUser === bIsHomeUser ? 0 : aIsHomeUser ? -1 : 1;
+        });
+      const Doctors = filteredusers.filter((user: UserAssignedModel) => {
+        return user.user_type === "Doctor" && isHomeUser(user, facilityId);
+      });
+      const Nurses = filteredusers.filter((user: UserAssignedModel) => {
+        return user.user_type === "Nurse" && isHomeUser(user, facilityId);
+      });
+      const TeleICU = filteredusers.filter((user: UserAssignedModel) => {
+        return (
           (user.user_type === "Doctor" || user.user_type === "Nurse") &&
-          (filter === FilterTypes.ALL ||
-            (filter === FilterTypes.DOCTOR &&
-              isHomeUser(user, facilityId) &&
-              user.user_type === "Doctor") ||
-            (filter === FilterTypes.NURSE &&
-              isHomeUser(user, facilityId) &&
-              user.user_type === "Nurse") ||
-            (filter === FilterTypes.TELEICU && !isHomeUser(user, facilityId))),
-      );
+          !isHomeUser(user, facilityId)
+        );
+      });
+      setFilteredDoctors([
+        { users: Doctors, type: FilterTypes.DOCTOR },
+        { users: Nurses, type: FilterTypes.NURSE },
+        { users: TeleICU, type: FilterTypes.TELEICU },
+      ]);
     };
     if (users?.results && !loading) {
-      setFilteredDoctors(
-        filterDoctors(users.results).sort(
-          (a: UserAssignedModel, b: UserAssignedModel) => {
-            const aIsHomeUser = isHomeUser(a, facilityId);
-            const bIsHomeUser = isHomeUser(b, facilityId);
-            return aIsHomeUser === bIsHomeUser ? 0 : aIsHomeUser ? -1 : 1;
-          },
-        ),
-      );
+      filterDoctors(users?.results);
     }
   }, [facilityId, filter, loading, users?.results]);
 
@@ -91,23 +99,38 @@ export default function DoctorVideoSlideover(props: {
           size="md"
         />
       </div>
-      {filteredDoctors.map((doctor, i) => (
-        <div
-          key={i}
-          className="mb-4"
-          id={`doctor-connect-${
-            isHomeUser(doctor, facilityId) ? "home" : "remote"
-          }-${doctor.user_type.toLowerCase()}`}
-        >
-          <ul className="mt-3 max-h-96 list-none" id="options" role="listbox">
-            <UserListItem
-              key={doctor.id}
-              user={doctor}
-              facilityId={facilityId}
-            />
-          </ul>
-        </div>
-      ))}
+      {filteredDoctors.map((doctor) => {
+        return (
+          (filter === FilterTypes.ALL || filter === doctor.type) && (
+            <div>
+              <p className="pt-2">{doctor.type}</p>
+              {doctor.users.map((user, i) => {
+                return (
+                  <div
+                    key={i}
+                    className="mb-4"
+                    id={`doctor-connect-${
+                      isHomeUser(user, facilityId) ? "home" : "remote"
+                    }-${user.user_type.toLowerCase()}`}
+                  >
+                    <ul
+                      className="mt-3 max-h-96 list-none"
+                      id="options"
+                      role="listbox"
+                    >
+                      <UserListItem
+                        key={user.id}
+                        user={user}
+                        facilityId={facilityId}
+                      />
+                    </ul>
+                  </div>
+                );
+              })}
+            </div>
+          )
+        );
+      })}
     </SlideOver>
   );
 }

From 30a97d1a062f2c049e0863855641d1e72a14e57b Mon Sep 17 00:00:00 2001
From: hrit2773 <128292557+hrit2773@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:08:41 +0530
Subject: [PATCH 36/45] search by typing in symptoms (#7551)

* fixing symptoms multiselect list

* symptoms list typing search

* Attempt cypress fix

* added cypress for type and multi select

* Cypress fixes

* Cypress-fixes

* Cypress fixing

* adding new test

* Cypress-fixes-again

* adding new test-1

* Single select behaviour fixed

* lint

---------

Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
---
 .../patient_spec/patient_consultation.cy.ts   | 16 ++++---
 .../pageobject/Patient/PatientConsultation.ts |  4 +-
 .../pageobject/Patient/PatientLogupdate.ts    |  2 +-
 cypress/support/commands.ts                   | 15 +++++++
 cypress/support/index.ts                      |  5 +++
 src/Components/Common/SymptomsSelect.tsx      |  6 +--
 .../FormFields/AutocompleteMultiselect.tsx    | 43 +++++++++++++++----
 7 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_consultation.cy.ts b/cypress/e2e/patient_spec/patient_consultation.cy.ts
index 530ff08b8eb..cb20dce0d88 100644
--- a/cypress/e2e/patient_spec/patient_consultation.cy.ts
+++ b/cypress/e2e/patient_spec/patient_consultation.cy.ts
@@ -59,7 +59,7 @@ describe("Patient Consultation in multiple combination", () => {
     patientConsultationPage.selectConsultationStatus(
       "Outpatient/Emergency Room"
     );
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     patientConsultationPage.typePatientIllnessHistory(patientIllnessHistory);
     patientConsultationPage.typePatientExaminationHistory(
       patientExaminationHistory
@@ -175,7 +175,7 @@ describe("Patient Consultation in multiple combination", () => {
       "Outpatient/Emergency Room"
     );
     // Asymptomatic
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     // CRITICAL category
     patientConsultationPage.selectPatientCategory("Critical");
     patientConsultationPage.selectPatientSuggestion("Declare Death");
@@ -234,7 +234,7 @@ describe("Patient Consultation in multiple combination", () => {
     );
     patientConsultationPage.selectPatientWard("Dummy Location 1");
     // Asymptomatic
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     // Abnormal category
     patientConsultationPage.selectPatientCategory("Abnormal");
     patientConsultationPage.selectPatientSuggestion("Domiciliary Care");
@@ -294,7 +294,10 @@ describe("Patient Consultation in multiple combination", () => {
     // verify the free text in referring facility name
     patientConsultationPage.typeReferringFacility("Life Care Hospital");
     // Vomiting and Nausea symptoms
-    patientConsultationPage.selectSymptoms(["VOMITING", "SORE THROAT"]);
+    patientConsultationPage.typeAndMultiSelectSymptoms("s", [
+      "SPUTUM",
+      "SORE THROAT",
+    ]);
     // Stable category
     patientConsultationPage.selectPatientCategory("Stable");
     // Date of symptoms
@@ -339,7 +342,10 @@ describe("Patient Consultation in multiple combination", () => {
       "Outpatient/Emergency Room"
     );
     // Select the Symptoms - Sore throat and fever symptoms
-    patientConsultationPage.selectSymptoms(["FEVER", "SORE THROAT"]);
+    patientConsultationPage.typeAndMultiSelectSymptoms("b", [
+      "BREATHLESSNESS",
+      "BLEEDING",
+    ]);
     // Comfort Care category
     patientConsultationPage.selectPatientCategory("Comfort Care");
     // Date of symptoms
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
index 87cead3fc1f..4400d9a524c 100644
--- a/cypress/pageobject/Patient/PatientConsultation.ts
+++ b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -9,7 +9,9 @@ export class PatientConsultationPage {
   selectSymptoms(symptoms) {
     cy.clickAndMultiSelectOption("#symptoms", symptoms);
   }
-
+  typeAndMultiSelectSymptoms(input, symptoms) {
+    cy.typeAndMultiSelectOption("#symptoms", input, symptoms);
+  }
   selectSymptomsDate(selector: string, date: string) {
     cy.clickAndTypeDate(selector, date);
   }
diff --git a/cypress/pageobject/Patient/PatientLogupdate.ts b/cypress/pageobject/Patient/PatientLogupdate.ts
index 8b15e4dd4fe..7b431dbc458 100644
--- a/cypress/pageobject/Patient/PatientLogupdate.ts
+++ b/cypress/pageobject/Patient/PatientLogupdate.ts
@@ -25,7 +25,7 @@ class PatientLogupdate {
   }
 
   typeAdditionalSymptoms(symptoms: string) {
-    cy.clickAndSelectOption("#additional_symptoms", symptoms);
+    cy.searchAndSelectOption("#additional_symptoms", symptoms);
   }
 
   typeSystolic(systolic: string) {
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 94af548f6cd..e2c85e99d6d 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -141,6 +141,21 @@ Cypress.Commands.add(
       });
   }
 );
+Cypress.Commands.add(
+  "typeAndMultiSelectOption",
+  (selector: string, input: string, options: string | string[]) => {
+    const optionArray = Array.isArray(options) ? options : [options];
+    cy.get(selector)
+      .click()
+      .type(input)
+      .then(() => {
+        optionArray.forEach((options) => {
+          cy.get("[role='option']").contains(options).click();
+        });
+        cy.get(selector).click();
+      });
+  }
+);
 
 Cypress.Commands.add(
   "clickAndSelectOption",
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index fbaaa4f18ea..01f50cc14a5 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -23,6 +23,11 @@ declare global {
         selector: string,
         symptoms: string | string[]
       ): Chainable<Element>;
+      typeAndMultiSelectOption(
+        selector: string,
+        input: string,
+        symptoms: string | string[]
+      ): Chainable<Element>;
       clickAndTypeDate(date: string, selector: string): Chainable<Element>;
       clickAndSelectOption(
         element: string,
diff --git a/src/Components/Common/SymptomsSelect.tsx b/src/Components/Common/SymptomsSelect.tsx
index f16744b7343..cdca3fe60dc 100644
--- a/src/Components/Common/SymptomsSelect.tsx
+++ b/src/Components/Common/SymptomsSelect.tsx
@@ -1,11 +1,11 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { SYMPTOM_CHOICES } from "../../Common/constants";
+import { AutocompleteMutliSelect } from "../Form/FormFields/AutocompleteMultiselect";
 import FormField from "../Form/FormFields/FormField";
 import {
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "../Form/FormFields/Utils";
-import MultiSelectMenuV2 from "../Form/MultiSelectMenuV2";
 
 const ASYMPTOMATIC_ID = 1;
 
@@ -69,15 +69,15 @@ export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
 
   return (
     <FormField field={field}>
-      <MultiSelectMenuV2
+      <AutocompleteMutliSelect
         id={field.id}
         options={SYMPTOM_CHOICES}
         disabled={props.disabled}
         placeholder="Select symptoms"
         optionLabel={(option) => option.text}
         optionValue={(option) => option.id}
+        value={props.value || []}
         optionDescription={getDescription}
-        value={props.value}
         onChange={updateSelection}
       />
     </FormField>
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index afbdda8a6c1..bed6a41f3c0 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -3,7 +3,7 @@ import {
   MultiSelectOptionChip,
   dropdownOptionClassNames,
 } from "../MultiSelectMenuV2";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Combobox } from "@headlessui/react";
 import { DropdownTransition } from "../../Common/components/HelperComponents";
@@ -47,6 +47,7 @@ type AutocompleteMutliSelectProps<T, V = T> = {
   disabled?: boolean | undefined;
   value: V[];
   placeholder?: string;
+  optionDescription?: OptionCallback<T, ReactNode>;
   optionLabel: OptionCallback<T, string>;
   optionValue?: OptionCallback<T, V>;
   className?: string;
@@ -69,14 +70,21 @@ export const AutocompleteMutliSelect = <T, V>(
   props: AutocompleteMutliSelectProps<T, V>,
 ) => {
   const [query, setQuery] = useState(""); // Ensure lower case
+  const comboButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     props.onQuery && props.onQuery(query);
   }, [query]);
-
+  const handleSingleSelect = (o: any) => {
+    if (o.option?.isSingleSelect === true && comboButtonRef.current) {
+      comboButtonRef.current.click();
+    }
+  };
   const options = props.options.map((option) => {
     const label = props.optionLabel(option);
     return {
+      option,
       label,
+      description: props.optionDescription && props.optionDescription(option),
       search: label.toLowerCase(),
       value: (props.optionValue ? props.optionValue(option) : option) as V,
     };
@@ -114,13 +122,16 @@ export const AutocompleteMutliSelect = <T, V>(
               placeholder={
                 value.length
                   ? `${value.length} item(s) selected`
-                  : props.placeholder || "Select"
+                  : props.placeholder ?? "Select"
               }
               onChange={(event) => setQuery(event.target.value.toLowerCase())}
               autoComplete="off"
             />
             {!props.disabled && (
-              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <Combobox.Button
+                ref={comboButtonRef}
+                className="absolute inset-y-0 right-0 flex items-center pr-2"
+              >
                 <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
@@ -173,14 +184,28 @@ export const AutocompleteMutliSelect = <T, V>(
                       key={`${props.id}-option-${index}`}
                       className={dropdownOptionClassNames}
                       value={option}
+                      onClick={() => {
+                        handleSingleSelect(option);
+                      }}
                     >
                       {({ selected }) => (
-                        <div className="flex justify-between">
-                          {option.label}
-                          {selected && (
-                            <CareIcon icon="l-check" className="text-lg" />
+                        <>
+                          <div className="flex justify-between">
+                            {option.label}
+                            {selected && (
+                              <CareIcon icon="l-check" className="text-lg" />
+                            )}
+                          </div>
+                          {option.description && (
+                            <p
+                              className={`font-normal ${
+                                selected ? "text-primary-200" : "text-gray-700"
+                              }`}
+                            >
+                              {option.description}
+                            </p>
                           )}
-                        </div>
+                        </>
                       )}
                     </Combobox.Option>
                   ))}

From 90dc7555654b844a8f411cd4fe979971fae521e4 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <63492939+thedevildude@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:40:24 +0530
Subject: [PATCH 37/45] Added Timeline UI for Bed Activity (#6901)

* BedActivityTimeline component added

* In Use indicator added to BedActivityTimeLine

* fixed deepscan failure due to missing key prop

* UI revision | reduced IN USE size | created BedTitleSuffix component

* moved BedActivityTimeline one level up

* Timeline note accepts react node | Bed timeline ui changed

* improved logic for showing asset changes

* moved all input fields to one row

* changed in use badge color

* Introduced i button popover to BedActivityTimeline

* Added Asset diffing function

* minor css change

* added icons for adding and removing asset

* no assets linked text added

* moved input fields back to different lines

* changed in use bed timeline node icon to l-bed

* added missing key props to map objects

* added icon style customizability for Timeline Node

* fixed null value error

* icon color changed for first node

* added divider between form and timeline | moved button to right

* Refactor BedAllocationNode and BedTimelineAsset components

* fixed linting

* fixed linting

* minor fixes based on review

---------

Co-authored-by: rithviknishad <mail@rithviknishad.dev>
---
 src/CAREUI/display/Timeline.tsx               |  16 +-
 .../Consultations/BedActivityTimeline.tsx     | 260 ++++++++++++++++++
 .../Facility/Consultations/Beds.tsx           |  72 +----
 3 files changed, 287 insertions(+), 61 deletions(-)
 create mode 100644 src/Components/Facility/Consultations/BedActivityTimeline.tsx

diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
index b2401630e93..3414a792398 100644
--- a/src/CAREUI/display/Timeline.tsx
+++ b/src/CAREUI/display/Timeline.tsx
@@ -10,7 +10,9 @@ export interface TimelineEvent<TType = string> {
   timestamp: string;
   by: PerformedByModel | undefined;
   icon: IconName;
-  notes?: string;
+  iconStyle?: string;
+  iconWrapperStyle?: string;
+  notes?: string | React.ReactNode;
   cancelled?: boolean;
 }
 
@@ -126,9 +128,17 @@ interface TimelineNodeTitleProps {
 export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
   return (
     <>
-      <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500">
+      <div
+        className={classNames(
+          props.event.iconWrapperStyle,
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+        )}
+      >
         <CareIcon
-          className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white"
+          className={classNames(
+            props.event.iconStyle,
+            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+          )}
           aria-hidden="true"
           icon={props.event.icon}
         />
diff --git a/src/Components/Facility/Consultations/BedActivityTimeline.tsx b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
new file mode 100644
index 00000000000..679913e34fd
--- /dev/null
+++ b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
@@ -0,0 +1,260 @@
+import Chip from "../../../CAREUI/display/Chip";
+import Timeline, {
+  TimelineEvent,
+  TimelineNode,
+  TimelineNodeTitle,
+} from "../../../CAREUI/display/Timeline";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import { classNames, formatDateTime, relativeTime } from "../../../Utils/utils";
+import { AssetData } from "../../Assets/AssetTypes";
+import { CurrentBed } from "../models";
+import { Popover, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+interface AssetDiff {
+  newlyLinkedAssets: AssetData[];
+  existingAssets: AssetData[];
+  unlinkedAssets: AssetData[];
+}
+
+const getAssetDiff = (a: AssetData[], b: AssetData[]): AssetDiff => {
+  const newlyLinkedAssets: AssetData[] = [];
+  const existingAssets: AssetData[] = [];
+  const unlinkedAssets: AssetData[] = [];
+
+  const bMap: Map<string, AssetData> = new Map();
+  b.forEach((asset) => bMap.set(asset.id, asset));
+  a.forEach((asset) => {
+    if (!bMap.has(asset.id)) {
+      unlinkedAssets.push(asset);
+    } else {
+      existingAssets.push(asset);
+    }
+  });
+  b.forEach((asset) => {
+    if (!a.find((aAsset) => aAsset.id === asset.id)) {
+      newlyLinkedAssets.push(asset);
+    }
+  });
+
+  return {
+    newlyLinkedAssets,
+    existingAssets,
+    unlinkedAssets,
+  };
+};
+
+interface Props {
+  consultationBeds: CurrentBed[];
+  loading?: boolean;
+}
+
+export default function BedActivityTimeline({
+  consultationBeds,
+  loading,
+}: Props) {
+  return (
+    <>
+      <Timeline
+        className={classNames(
+          "py-4 md:px-3",
+          loading && "animate-pulse opacity-70",
+        )}
+        name="bed-allocation"
+      >
+        {consultationBeds.map((bed, index) => {
+          return (
+            <BedAllocationNode
+              key={`activity-${bed.id}`}
+              bed={bed}
+              prevBed={consultationBeds[index + 1] ?? undefined}
+              isLastNode={index === consultationBeds.length - 1}
+            />
+          );
+        })}
+      </Timeline>
+    </>
+  );
+}
+
+const BedAllocationNode = ({
+  bed,
+  prevBed,
+  isLastNode,
+}: {
+  bed: CurrentBed;
+  prevBed?: CurrentBed;
+  isLastNode: boolean;
+}) => {
+  const { newlyLinkedAssets, existingAssets, unlinkedAssets } = getAssetDiff(
+    prevBed?.assets_objects ?? [],
+    bed.assets_objects ?? [],
+  );
+  const event: TimelineEvent = {
+    type: "allocated",
+    timestamp: bed.start_date,
+    by: undefined,
+    icon: "l-bed",
+    iconWrapperStyle: bed.end_date === null ? "bg-green-500" : "",
+    iconStyle: bed.end_date === null ? "text-white" : "",
+    notes:
+      newlyLinkedAssets.length === 0 &&
+      existingAssets.length === 0 &&
+      unlinkedAssets.length === 0 ? (
+        ""
+      ) : (
+        <BedTimelineAsset
+          newlyLinkedAssets={newlyLinkedAssets}
+          existingAssets={existingAssets}
+          unlinkedAssets={unlinkedAssets}
+        />
+      ),
+  };
+
+  return (
+    <>
+      <TimelineNode
+        name="bed"
+        event={event}
+        title={
+          <BedTimelineNodeTitle
+            event={event}
+            titleSuffix={<BedTitleSuffix bed={bed} prevBed={prevBed} />}
+            bed={bed}
+          />
+        }
+        isLast={isLastNode}
+      />
+    </>
+  );
+};
+
+const BedTimelineAsset = ({
+  newlyLinkedAssets,
+  existingAssets,
+  unlinkedAssets,
+}: {
+  newlyLinkedAssets: AssetData[];
+  existingAssets: AssetData[];
+  unlinkedAssets: AssetData[];
+}) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <p className="text-md font-semibold">Assets</p>
+      {newlyLinkedAssets.length === 0 &&
+        existingAssets.length === 0 &&
+        unlinkedAssets.length === 0 && (
+          <p className="text-gray-500">No assets linked</p>
+        )}
+      {newlyLinkedAssets.length > 0 &&
+        newlyLinkedAssets.map((newAsset) => (
+          <div key={newAsset.id} className="flex gap-1 text-primary">
+            <CareIcon icon="l-plus-circle" />
+            <span>{newAsset.name}</span>
+          </div>
+        ))}
+      {existingAssets.length > 0 &&
+        existingAssets.map((existingAsset) => (
+          <div key={existingAsset.id} className="flex gap-1">
+            <CareIcon icon="l-check-circle" />
+            <span>{existingAsset.name}</span>
+          </div>
+        ))}
+      {unlinkedAssets.length > 0 &&
+        unlinkedAssets.map((unlinkedAsset) => (
+          <div key={unlinkedAsset.id} className="flex gap-1 text-gray-500">
+            <CareIcon icon="l-minus-circle" />
+            <span className="line-through">{unlinkedAsset.name}</span>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const BedTimelineNodeTitle = (props: {
+  event: TimelineEvent;
+  titleSuffix: React.ReactNode;
+  bed: CurrentBed;
+}) => {
+  const { event, titleSuffix, bed } = props;
+
+  return (
+    <TimelineNodeTitle event={event}>
+      <div className="flex w-full justify-between gap-2">
+        <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+          {titleSuffix}
+        </p>
+        <div className="md:w-fit">
+          <BedActivityIButtonPopover bed={bed} />
+        </div>
+      </div>
+    </TimelineNodeTitle>
+  );
+};
+
+const BedTitleSuffix = ({
+  bed,
+  prevBed,
+}: {
+  bed: CurrentBed;
+  isLastNode?: boolean;
+  prevBed?: CurrentBed;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <div className="flex gap-x-2">
+        <span>{formatDateTime(bed.start_date).split(";")[0]}</span>
+        <span className="text-gray-500">-</span>
+        <span>{formatDateTime(bed.start_date).split(";")[1]}</span>
+      </div>
+      <p>
+        {bed.bed_object.id === prevBed?.bed_object.id
+          ? "Asset changed in" + " "
+          : "Transferred to" + " "}
+        <span className="font-semibold">{`${bed.bed_object.name} (${bed.bed_object.bed_type}) in ${bed.bed_object.location_object?.name}`}</span>
+        {bed.end_date === null && (
+          <Chip
+            text="In Use"
+            startIcon="l-notes"
+            size="small"
+            variant="primary"
+            className="ml-5"
+          />
+        )}
+      </p>
+    </div>
+  );
+};
+
+const BedActivityIButtonPopover = ({
+  bed,
+}: {
+  event?: TimelineEvent;
+  bed?: CurrentBed;
+}) => {
+  return (
+    <Popover className="relative text-sm text-gray-500 md:text-base">
+      <Popover.Button>
+        <CareIcon
+          icon="l-info-circle"
+          className="cursor-pointer text-gray-500 hover:text-gray-600"
+        />
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-gray-200 bg-gray-100 p-2 shadow">
+          <p className="text-xs text-gray-600">
+            updated {relativeTime(bed?.start_date)}
+          </p>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
index cb43d4655e0..9803be81e76 100644
--- a/src/Components/Facility/Consultations/Beds.tsx
+++ b/src/Components/Facility/Consultations/Beds.tsx
@@ -13,7 +13,6 @@ import CircularProgress from "../../Common/components/CircularProgress.js";
 import { FieldLabel } from "../../Form/FormFields/FormField";
 import Loading from "../../Common/Loading";
 import TextFormField from "../../Form/FormFields/TextFormField";
-import { formatDateTime } from "../../../Utils/utils";
 import dayjs from "../../../Utils/dayjs";
 import { AssetSelect } from "../../Common/AssetSelect.js";
 import DialogModal from "../../Common/Dialog.js";
@@ -24,6 +23,7 @@ import {
   AssetData,
 } from "../../Assets/AssetTypes.js";
 import Chip from "../../../CAREUI/display/Chip.js";
+import BedActivityTimeline from "./BedActivityTimeline";
 
 interface BedsProps {
   facilityId: string;
@@ -192,7 +192,7 @@ const Beds = (props: BedsProps) => {
       )}
       {!discharged ? (
         <form onSubmit={handleSubmit}>
-          <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          <div className="grid grid-cols-1 gap-2">
             <div>
               <FieldLabel id="asset-type">Bed</FieldLabel>
               <BedSelect
@@ -214,6 +214,7 @@ const Beds = (props: BedsProps) => {
               onChange={(e) => setStartDate(e.value)}
               max={dayjs().format("YYYY-MM-DDTHH:mm")}
               error=""
+              errorClassName="hidden"
             />
             <div>
               <FieldLabel id="assets-link-label">Link Assets</FieldLabel>
@@ -229,7 +230,7 @@ const Beds = (props: BedsProps) => {
               />
             </div>
           </div>
-          <div className="mt-4 flex flex-row justify-center">
+          <div className="mt-4 flex flex-row justify-end">
             <div>
               <ButtonV2 variant="primary" type="submit">
                 <CareIcon icon="l-bed" className="text-xl" />
@@ -242,63 +243,18 @@ const Beds = (props: BedsProps) => {
         ""
       )}
       <div>
+        <hr className="mt-4 border-t-2" />
         <h3 className="my-4 text-lg">Previous beds: </h3>
-        <div className="overflow-hidden rounded-xl">
-          <div className="grid grid-cols-4 gap-px">
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Bed
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Location
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Start Date
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              End Date
-            </div>
+        {consultationBeds.length > 0 ? (
+          <BedActivityTimeline
+            consultationBeds={consultationBeds}
+            loading={loading}
+          />
+        ) : (
+          <div className="bg-primary-100 py-2 text-center">
+            No beds allocated yet
           </div>
-          {consultationBeds.length > 0 ? (
-            consultationBeds.map((bed) => (
-              <div className="grid grid-cols-4 gap-px" key={bed?.id}>
-                <div className="break-words bg-primary-100 p-2 text-center">
-                  {bed?.bed_object?.name}
-                  {bed?.assets_objects && bed.assets_objects.length > 0 && (
-                    <span
-                      className={
-                        " ml-2 h-6 cursor-pointer rounded-md bg-primary-500 px-2 text-xs font-semibold text-white"
-                      }
-                      onClick={() => setShowBedDetails(bed)}
-                    >
-                      {bed.assets_objects.length}
-                    </span>
-                  )}
-                </div>
-                <div className="bg-primary-100 py-2 text-center">
-                  {bed?.bed_object?.location_object?.name}
-                </div>
-                <div className="break-words bg-primary-100 p-2 text-center">
-                  {formatDateTime(bed?.start_date)}
-                </div>
-                {bed?.end_date ? (
-                  <div className="break-words bg-primary-100 p-2 text-center">
-                    {formatDateTime(bed?.end_date)}
-                  </div>
-                ) : (
-                  <div className="bg-primary-100 p-2 text-center">
-                    <span className="rounded-full border border-yellow-500 bg-yellow-100 px-1 text-sm text-yellow-500 ">
-                      In Use
-                    </span>
-                  </div>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="bg-primary-100 py-2 text-center">
-              No beds allocated yet
-            </div>
-          )}
-        </div>
+        )}
       </div>
     </div>
   );

From 9b9f744f94ecd1750fb541f97724963b61655eaf Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Wed, 24 Apr 2024 18:12:39 +0530
Subject: [PATCH 38/45] disable eslint in code climate (#7564)

---
 .codeclimate.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.codeclimate.yml b/.codeclimate.yml
index eea24d2f1b7..235441e49a3 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -1,4 +1,4 @@
 plugins:
   eslint:
-    enabled: true
+    enabled: false
     channel: "eslint-7"

From aee00503857bf4d5c9a263dd9323ac7e43f32a62 Mon Sep 17 00:00:00 2001
From: Rashmik <146672184+rash-27@users.noreply.github.com>
Date: Wed, 24 Apr 2024 18:19:14 +0530
Subject: [PATCH 39/45] Update middleware update notification (#7599)

---
 cypress/e2e/facility_spec/facility_creation.cy.ts | 4 +++-
 cypress/e2e/facility_spec/facility_manage.cy.ts   | 2 +-
 src/Components/Facility/FacilityConfigure.tsx     | 3 ++-
 src/Locale/en/Facility.json                       | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/facility_spec/facility_creation.cy.ts b/cypress/e2e/facility_spec/facility_creation.cy.ts
index 679929d347b..ed6cc439272 100644
--- a/cypress/e2e/facility_spec/facility_creation.cy.ts
+++ b/cypress/e2e/facility_spec/facility_creation.cy.ts
@@ -317,7 +317,9 @@ describe("Facility Creation", () => {
     facilityPage.clickConfigureFacilityOption();
     facilityPage.fillMiddleWareAddress("dev_middleware.coronasafe.live");
     facilityPage.clickupdateMiddleWare();
-    facilityPage.verifySuccessNotification("Facility updated successfully");
+    facilityPage.verifySuccessNotification(
+      "Facility middleware updated successfully"
+    );
   });
 
   afterEach(() => {
diff --git a/cypress/e2e/facility_spec/facility_manage.cy.ts b/cypress/e2e/facility_spec/facility_manage.cy.ts
index ce459d2d66b..766bf3d9247 100644
--- a/cypress/e2e/facility_spec/facility_manage.cy.ts
+++ b/cypress/e2e/facility_spec/facility_manage.cy.ts
@@ -12,7 +12,7 @@ describe("Facility Manage Functions", () => {
   const facilityMiddleware = "dev-middleware.coronasafe.live";
   const facilityUpdatedMiddleware = "updated.coronasafe.live";
   const facilityMiddlewareSuccessfullNotification =
-    "Facility updated successfully";
+    "Facility middleware updated successfully";
   const facilityHfridUpdateButton = "Link Health Facility";
   const facilityHfridToastNotificationText =
     /Health Facility config updated successfully|Health ID registration failed/;
diff --git a/src/Components/Facility/FacilityConfigure.tsx b/src/Components/Facility/FacilityConfigure.tsx
index 8e3b92f7568..320cbd7ecc5 100644
--- a/src/Components/Facility/FacilityConfigure.tsx
+++ b/src/Components/Facility/FacilityConfigure.tsx
@@ -9,6 +9,7 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import { FieldChangeEvent } from "../Form/FormFields/Utils.js";
+import { t } from "i18next";
 const Loading = lazy(() => import("../Common/Loading"));
 
 const initForm = {
@@ -109,7 +110,7 @@ export const FacilityConfigure = (props: IProps) => {
     setIsLoading(false);
     if (res?.ok) {
       Notification.Success({
-        msg: "Facility updated successfully",
+        msg: t("update_facility_middleware_success"),
       });
       navigate(`/facility/${facilityId}`);
     } else {
diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json
index 3c22a9ab460..8c5df5f507d 100644
--- a/src/Locale/en/Facility.json
+++ b/src/Locale/en/Facility.json
@@ -53,5 +53,6 @@
   "create_asset": "Create Asset",
   "create_add_more": "Create & Add More",
   "discharged_patients": "Discharged Patients",
-  "discharged_patients_empty": "No discharged patients present in this facility"
+  "discharged_patients_empty": "No discharged patients present in this facility",
+  "update_facility_middleware_success":"Facility middleware updated successfully"
 }
\ No newline at end of file

From 218092b777125fe88a0d4ba70fd39e42c0b309c4 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 24 Apr 2024 19:13:46 +0530
Subject: [PATCH 40/45] Fixes alignment of "Year of Birth" text in patient
 registration form (#7694)

* fixes https://github.com/coronasafe/care_fe/issues/7692

* fix out of focus issue
---
 src/Components/Patient/PatientRegister.tsx | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 7ec0dc10753..dea0484a67c 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1383,16 +1383,21 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                       {...field("age")}
                                       errorClassName="hidden"
                                       trailing={
-                                        <p className="absolute right-16 mb-11 text-xs text-gray-700 sm:text-sm">
-                                          <p className="hidden sm:inline min-[768px]:hidden lg:inline">
-                                            {field("age").value !== "" &&
-                                              "Year of Birth:"}
-                                          </p>
-                                          <span className="font-bold">
-                                            {field("age").value !== "" &&
-                                              new Date().getFullYear() -
-                                                field("age").value}
-                                          </span>
+                                        <p className="relative right-4 space-x-1 text-xs text-gray-700 sm:right-14 sm:text-sm md:right-4 lg:right-14">
+                                          {field("age").value !== "" && (
+                                            <>
+                                              <span className="hidden sm:inline md:hidden lg:inline">
+                                                Year of Birth:
+                                              </span>
+                                              <span className="inline sm:hidden md:inline lg:hidden">
+                                                YOB:
+                                              </span>
+                                              <span className="font-bold">
+                                                {new Date().getFullYear() -
+                                                  field("age").value}
+                                              </span>
+                                            </>
+                                          )}
                                         </p>
                                       }
                                       placeholder="Enter the age"

From 75743a832511cb4b52839baca47272d889bdeb7d Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <70687348+Pranshu1902@users.noreply.github.com>
Date: Wed, 24 Apr 2024 19:46:16 +0530
Subject: [PATCH 41/45] Add Sorting filter on Discharged Patients page (#7594)

* Add Sorting filter on Discharged Patients page

* refactor

* add filter badges for sorting filter

* reduce number of filter options

* fix filter badge

* refactor

* fix ui issues
---
 src/Common/constants.tsx                      |  9 ++++
 .../Facility/DischargedPatientsList.tsx       | 41 +++++++++++++------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 71fac975492..07768a16cee 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -207,6 +207,15 @@ export const PATIENT_SORT_OPTIONS: SortOption[] = [
   { isAscending: false, value: "-name" },
 ];
 
+export const DISCHARGED_PATIENT_SORT_OPTIONS: SortOption[] = [
+  { isAscending: false, value: "-created_date" },
+  { isAscending: true, value: "created_date" },
+  { isAscending: false, value: "-modified_date" },
+  { isAscending: true, value: "modified_date" },
+  { isAscending: true, value: "name" },
+  { isAscending: false, value: "-name" },
+];
+
 export const getBedTypes = ({
   kasp_enabled,
   kasp_string,
diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index af5f79cf4c6..bdd0a0a649e 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -1,4 +1,4 @@
-import { Link, navigate, useQueryParams } from "raviger";
+import { Link, navigate } from "raviger";
 import routes from "../../Redux/api";
 import Page from "../Common/components/Page";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
@@ -7,12 +7,17 @@ import { PatientModel } from "../Patient/models";
 import useQuery from "../../Utils/request/useQuery";
 import { debounce } from "lodash-es";
 import SearchInput from "../Form/SearchInput";
-import { GENDER_TYPES } from "../../Common/constants";
+import {
+  DISCHARGED_PATIENT_SORT_OPTIONS,
+  GENDER_TYPES,
+} from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
 import { formatPatientAge } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
+import SortDropdownMenu from "../Common/SortDropdown";
+import useFilters from "../../Common/hooks/useFilters";
 
 const DischargedPatientsList = ({
   facility_external_id,
@@ -24,7 +29,7 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const [search, setSearch] = useQueryParams();
+  const { qParams, updateQuery, FilterBadges } = useFilters({});
 
   return (
     <Page
@@ -38,23 +43,33 @@ const DischargedPatientsList = ({
             className="mr-4 w-full max-w-sm"
             placeholder="Search by patient name"
             name="name"
-            value={search.name}
-            onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
-          />
-          <SwitchTabs
-            tab1="Live"
-            tab2="Discharged"
-            className="mr-4"
-            onClickTab1={() => navigate("/patients")}
-            isTab2Active
+            value={qParams.name}
+            onChange={debounce((e) => updateQuery({ name: e.value }))}
           />
+          <div className="flex flex-col gap-4 md:flex-row">
+            <SwitchTabs
+              tab1="Live"
+              tab2="Discharged"
+              className="mr-4"
+              onClickTab1={() => navigate("/patients")}
+              isTab2Active
+            />
+            <SortDropdownMenu
+              options={DISCHARGED_PATIENT_SORT_OPTIONS}
+              selected={qParams.ordering}
+              onSelect={(e) => updateQuery({ ordering: e.ordering })}
+            />
+          </div>
         </>
       }
     >
+      <div className="col-span-3 mt-6 flex flex-wrap">
+        <FilterBadges badges={({ ordering }) => [ordering()]} />
+      </div>
       <PaginatedList
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
-        query={search}
+        query={{ ordering: "-modified_date", ...qParams }}
       >
         {() => (
           <div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">

From 71255d4cc168966d57e40cfc19d59f11c2514c33 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:23:10 +0530
Subject: [PATCH 42/45] Fix facility page live monitor button (#7707)

---
 src/Components/Facility/FacilityHome.tsx | 31 ++++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index fa712e0df59..09c5c1889dc 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -411,7 +411,9 @@ export const FacilityHome = (props: any) => {
                 <CareIcon icon="l-monitor-heart-rate" className="text-lg" />
                 <span>Central Nursing Station</span>
               </ButtonV2>
-              <LiveMonitoringButton />
+              {CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
+                <LiveMonitoringButton />
+              )}
               <ButtonV2
                 variant="primary"
                 ghost
@@ -499,24 +501,21 @@ export const FacilityHome = (props: any) => {
 const LiveMonitoringButton = () => {
   const facilityId = useSlug("facility");
   const [location, setLocation] = useState<string>();
-  const authUser = useAuthUser();
 
   return (
     <Popover className="relative">
-      {CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
-        <Popover.Button className="mt-2 w-full">
-          <ButtonV2
-            variant="primary"
-            ghost
-            border
-            className="w-full"
-            id="facility-detailspage-livemonitoring"
-          >
-            <CareIcon icon="l-video" className="text-lg" />
-            <span>Live Monitoring</span>
-          </ButtonV2>
-        </Popover.Button>
-      )}
+      <Popover.Button className="mt-2 w-full">
+        <ButtonV2
+          variant="primary"
+          ghost
+          border
+          className="w-full"
+          id="facility-detailspage-livemonitoring"
+        >
+          <CareIcon icon="l-video" className="text-lg" />
+          <span>Live Monitoring</span>
+        </ButtonV2>
+      </Popover.Button>
 
       <Transition
         as={Fragment}

From c42aa88ed20442d709b5caab819175c83d9827d4 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 26 Apr 2024 13:23:41 +0530
Subject: [PATCH 43/45] fix spacing of phone number fields in user filters
 (#7702)

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

diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
index 4a070ee7cde..d5c16d22571 100644
--- a/src/Components/Users/UserFilter.tsx
+++ b/src/Components/Users/UserFilter.tsx
@@ -148,7 +148,7 @@ export default function UserFilter(props: any) {
         {...field("district")}
         state={filterState.state}
       />
-      <div>
+      <div className="-mb-4">
         <PhoneNumberFormField
           label="Phone Number"
           name="phone_number"

From 61342c9139931057b4bbebfb53d3efad22c9f738 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 26 Apr 2024 17:28:06 +0530
Subject: [PATCH 44/45] Enhancements to Doctor Connect Slideover (#7709)

* Enhancements to Doctor Connect Slideover

* improve no users design

* remove unnecessary sorting

* fixes #7713

* fix cypress test

* Revert "fixes #7713"

This reverts commit 9d2b4d7ba29df66acf0751b5c358197a47542fdf.

* hide teleicu nurse

* update heading

* fix doctor connect hide button issue
---
 cypress/e2e/users_spec/user_manage.cy.ts      |   4 +-
 .../Facility/DoctorVideoSlideover.tsx         | 219 +++++++++---------
 src/Components/Patient/ManagePatients.tsx     |   9 +-
 3 files changed, 113 insertions(+), 119 deletions(-)

diff --git a/cypress/e2e/users_spec/user_manage.cy.ts b/cypress/e2e/users_spec/user_manage.cy.ts
index af3b9149b2f..0ff66fba27a 100644
--- a/cypress/e2e/users_spec/user_manage.cy.ts
+++ b/cypress/e2e/users_spec/user_manage.cy.ts
@@ -33,7 +33,7 @@ describe("Manage User", () => {
     cy.awaitUrl("/users");
   });
 
-  it("linking skills for a  users and verify its reflection in profile", () => {
+  it("linking skills for users and verify its reflection in profile", () => {
     // select the district user and select one skill link and verify its profile reflection
     userPage.typeInSearchInput(usernameforworkinghour);
     userPage.checkUsernameText(usernameforworkinghour);
@@ -49,7 +49,7 @@ describe("Manage User", () => {
     manageUserPage.navigateToProfile();
     userCreationPage.verifyElementContainsText(
       "username-profile-details",
-      usernameforworkinghour
+      usernameforworkinghour,
     );
     manageUserPage.assertSkillInAlreadyLinkedSkills(linkedskill);
   });
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 5fde98364da..e5888bebf2e 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -1,79 +1,57 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import SlideOver from "../../CAREUI/interactive/SlideOver";
 import { UserAssignedModel } from "../Users/models";
 import { SkillObjectModel } from "../Users/models";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
-import { relativeTime } from "../../Utils/utils";
+import { classNames, relativeTime } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import { triggerGoal } from "../../Integrations/Plausible";
 import { Warn } from "../../Utils/Notifications";
 import Switch from "../../CAREUI/interactive/Switch";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
+import Loading from "../Common/Loading";
 
-enum FilterTypes {
-  ALL = "All",
-  DOCTOR = "Doctor",
-  NURSE = "Nurse",
-  TELEICU = "TeleICU Hub",
-}
+const UserGroups = {
+  ALL: "All",
+  DOCTOR: "Doctor",
+  NURSE: "Nurse",
+  TELEICU: "TeleICU Doctors",
+};
 
-interface DoctorDetails {
-  users: UserAssignedModel[];
-  type: FilterTypes.DOCTOR | FilterTypes.NURSE | FilterTypes.TELEICU;
-}
+type UserGroup = keyof typeof UserGroups;
+
+type UserAnnotatedWithGroup = UserAssignedModel & { group?: UserGroup };
 
 const isHomeUser = (user: UserAssignedModel, facilityId: string) =>
   user.home_facility_object?.id === facilityId;
-
 export default function DoctorVideoSlideover(props: {
   show: boolean;
   facilityId: string;
   setShow: (show: boolean) => void;
 }) {
   const { show, facilityId, setShow } = props;
-  const [filteredDoctors, setFilteredDoctors] = useState<DoctorDetails[]>([]);
-  const [filter, setFilter] = useState<FilterTypes>(FilterTypes.ALL);
+  const [filter, setFilter] = useState<UserGroup>("ALL");
 
-  const { data: users, loading } = useQuery(routes.getFacilityUsers, {
+  const { data } = useQuery(routes.getFacilityUsers, {
     prefetch: show,
     pathParams: { facility_id: facilityId },
     query: { limit: 50 },
   });
 
-  useEffect(() => {
-    const filterDoctors = (users: UserAssignedModel[]) => {
-      const filteredusers = users
-        .filter((user: UserAssignedModel) => {
-          return user.alt_phone_number || user.video_connect_link;
-        })
-        .sort((a: UserAssignedModel, b: UserAssignedModel) => {
-          const aIsHomeUser = isHomeUser(a, facilityId);
-          const bIsHomeUser = isHomeUser(b, facilityId);
-          return aIsHomeUser === bIsHomeUser ? 0 : aIsHomeUser ? -1 : 1;
-        });
-      const Doctors = filteredusers.filter((user: UserAssignedModel) => {
-        return user.user_type === "Doctor" && isHomeUser(user, facilityId);
-      });
-      const Nurses = filteredusers.filter((user: UserAssignedModel) => {
-        return user.user_type === "Nurse" && isHomeUser(user, facilityId);
-      });
-      const TeleICU = filteredusers.filter((user: UserAssignedModel) => {
-        return (
-          (user.user_type === "Doctor" || user.user_type === "Nurse") &&
-          !isHomeUser(user, facilityId)
-        );
-      });
-      setFilteredDoctors([
-        { users: Doctors, type: FilterTypes.DOCTOR },
-        { users: Nurses, type: FilterTypes.NURSE },
-        { users: TeleICU, type: FilterTypes.TELEICU },
-      ]);
-    };
-    if (users?.results && !loading) {
-      filterDoctors(users?.results);
+  const getUserGroup = (user: UserAssignedModel) => {
+    if (isHomeUser(user, facilityId)) {
+      if (user.user_type === "Doctor") return "DOCTOR";
+      if (user.user_type === "Nurse") return "NURSE";
     }
-  }, [facilityId, filter, loading, users?.results]);
+
+    if (user.user_type === "Doctor") return "TELEICU";
+  };
+
+  const annotatedUsers: UserAnnotatedWithGroup[] | undefined = data?.results
+    .filter((user) => user.alt_phone_number || user.video_connect_link)
+    .map((user) => ({ ...user, group: getUserGroup(user) }))
+    .filter((user) => !!user.group) as UserAnnotatedWithGroup[];
 
   return (
     <SlideOver
@@ -88,62 +66,94 @@ export default function DoctorVideoSlideover(props: {
       </p>
       <div className="flex justify-center" id="doctor-connect-filter-tabs">
         <Switch
-          tabs={
-            Object.values(FilterTypes).reduce(
-              (acc, type) => ({ ...acc, [type]: type }),
-              {},
-            ) as Record<FilterTypes, string>
-          }
+          tabs={UserGroups}
           selected={filter}
           onChange={(tab) => setFilter(tab)}
           size="md"
         />
       </div>
-      {filteredDoctors.map((doctor) => {
-        return (
-          (filter === FilterTypes.ALL || filter === doctor.type) && (
-            <div>
-              <p className="pt-2">{doctor.type}</p>
-              {doctor.users.map((user, i) => {
-                return (
-                  <div
-                    key={i}
-                    className="mb-4"
-                    id={`doctor-connect-${
-                      isHomeUser(user, facilityId) ? "home" : "remote"
-                    }-${user.user_type.toLowerCase()}`}
-                  >
-                    <ul
-                      className="mt-3 max-h-96 list-none"
-                      id="options"
-                      role="listbox"
-                    >
-                      <UserListItem
-                        key={user.id}
-                        user={user}
-                        facilityId={facilityId}
-                      />
-                    </ul>
-                  </div>
-                );
-              })}
-            </div>
-          )
-        );
-      })}
+
+      {!annotatedUsers ? (
+        <Loading />
+      ) : filter === "ALL" ? (
+        <div className="flex flex-col py-2">
+          <UserGroupList
+            group="DOCTOR"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+
+          <UserGroupList
+            group="NURSE"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+
+          <UserGroupList
+            group="TELEICU"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+        </div>
+      ) : (
+        <div className="py-6">
+          <UserGroupList group={filter} users={annotatedUsers} />
+        </div>
+      )}
     </SlideOver>
   );
 }
 
+const UserGroupList = (props: {
+  users: UserAnnotatedWithGroup[];
+  group: UserGroup;
+  showGroupHeading?: boolean;
+}) => {
+  const users = props.users.filter((user) => user.group === props.group);
+
+  return (
+    <div className="py-2">
+      {props.showGroupHeading && (
+        <div className="flex w-full items-center pb-2">
+          <span className="whitespace-nowrap text-lg font-bold">
+            {UserGroups[props.group]}
+          </span>
+          <div className="mx-6 h-1 w-full bg-gray-300" />
+        </div>
+      )}
+
+      {!users.length && (
+        <span className="flex w-full justify-center py-2 font-bold text-gray-500">
+          No users in this category
+        </span>
+      )}
+
+      {!!users.length && (
+        <ul className="flex flex-col gap-3" id="options" role="listbox">
+          {users.map((user) => (
+            <li
+              key={user.id}
+              role="option"
+              id={`doctor-connect-${
+                user.group !== "TELEICU" ? "home" : "remote"
+              }-${user.user_type.toLowerCase()}`}
+            >
+              <UserListItem user={user} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
 type MSLaunchURI = (
   uri: string,
   successCB?: null | (() => void),
   noHandlerCB?: null | (() => void),
 ) => void;
 
-function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
-  const user = props.user;
-  const facilityId = props.facilityId;
+function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
   const icon: IconName =
     user.user_type === "Doctor" ? "l-user-md" : "l-user-nurse";
 
@@ -207,17 +217,13 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
   }
 
   return (
-    <li
-      key={user.id}
-      className={
-        "group cursor-default select-none rounded-xl p-3 " +
-        (user.alt_phone_number
+    <div
+      className={classNames(
+        "group cursor-default select-none rounded-xl p-3",
+        user.alt_phone_number
           ? "cursor-pointer border border-gray-400 transition hover:border-green-500 hover:bg-green-50"
-          : "pointer-events-none cursor-not-allowed bg-gray-400 ")
-      }
-      id="option-1"
-      role="option"
-      tabIndex={-1}
+          : "pointer-events-none cursor-not-allowed bg-gray-400",
+      )}
     >
       <a className="flex" onClick={connectOnWhatsApp}>
         <div className="flex flex-none items-center justify-center sm:h-6 sm:w-6 md:h-10 md:w-10">
@@ -232,16 +238,11 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
           }
         </div>
         <div className="ml-4 flex flex-auto flex-col gap-1">
-          <div className="flex justify-between gap-2 text-sm font-medium text-gray-700">
+          <div className="flex justify-between gap-2 text-sm text-gray-700">
             <span>
-              {user.first_name} {user.last_name}
-              <span className="pl-1 font-normal text-gray-700">
-                (
-                {isHomeUser(user, facilityId)
-                  ? user.user_type
-                  : `TeleICU Hub ${user.user_type}`}
-                )
-              </span>
+              <strong>
+                {user.first_name} {user.last_name}
+              </strong>
             </span>
             <DoctorConnectButtons
               user={user}
@@ -289,7 +290,7 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
           </div>
         </div>
       </a>
-    </li>
+    </div>
   );
 }
 
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 51baa4d1a28..35a5bbfea02 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -105,7 +105,6 @@ export const PatientManager = () => {
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const [showDialog, setShowDialog] = useState<"create" | "list-discharged">();
   const [showDoctors, setShowDoctors] = useState(false);
-  const [showDoctorConnect, setShowDoctorConnect] = useState(false);
   const [phone_number, setPhoneNumber] = useState("");
   const [phoneNumberError, setPhoneNumberError] = useState("");
   const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
@@ -248,12 +247,6 @@ export const PatientManager = () => {
     qParams.diagnoses_differential,
   ]);
 
-  useEffect(() => {
-    if (params.facility) {
-      setShowDoctorConnect(true);
-    }
-  }, [qParams.facility]);
-
   const date_range_fields = [
     [params.created_date_before, params.created_date_after],
     [params.modified_date_before, params.modified_date_after],
@@ -785,7 +778,7 @@ export const PatientManager = () => {
               }}
               isTab2Active={!!tabValue}
             />
-            {showDoctorConnect && (
+            {!!params.facility && (
               <ButtonV2
                 id="doctor-connect-patient-button"
                 onClick={() => {

From 4959fc6be4049c978f34a2d6d01a7c719cbe5fd2 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 26 Apr 2024 17:32:48 +0530
Subject: [PATCH 45/45] Correct spelling for comment on PR close on stale
 (#7717)

* fixes #7713

* Update .github/workflows/stale.yml

* update all messages

* fix spelling mistake
---
 .github/workflows/stale.yml                      | 4 ++--
 src/Components/Facility/DoctorVideoSlideover.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
index 0e4c9005787..8964b0c8e57 100644
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -13,9 +13,9 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-issue-label: "stale"
           stale-pr-label: "stale"
-          stale-issue-message: "Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, @aparnacoronasafe, This issue has been automatically marked as stale because it has not had any recent activity."
+          stale-issue-message: "Hi, @coronasafe/care-frontend-maintainers, This issue has been automatically marked as stale because it has not had any recent activity."
           stale-pr-message: "Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions."
-          close-pr-message: "Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr."
+          close-pr-message: "Hi, @coronasafe/care-frontend-maintainers, This PR has been automatically closed due to inactivity. Thank you for your contributions. Feel free to re-open the PR."
           exempt-issue-labels: "blocked,waiting for related PR,waiting for back end,help wanted,work-in-progress,In Progress,wishlist,EPIC"
           exempt-pr-labels: "tested,needs testing,need Review,waiting for related PR,waiting for back end,help wanted,blocked,work-in-progress,In Progress"
           days-before-issue-stale: 14
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index e5888bebf2e..d2591bf3600 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -16,7 +16,7 @@ const UserGroups = {
   ALL: "All",
   DOCTOR: "Doctor",
   NURSE: "Nurse",
-  TELEICU: "TeleICU Doctors",
+  TELEICU: "TeleICU Doctor",
 };
 
 type UserGroup = keyof typeof UserGroups;