From eb09ecd41b31a09d41c37acb688ab52238662959 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Wed, 20 Sep 2023 18:49:06 +0530
Subject: [PATCH 01/16] Activate asset config for district/state admins only
 (#6309)

---
 src/Components/Assets/AssetManage.tsx         |   3 +-
 .../Assets/AssetType/HL7Monitor.tsx           |  71 ++++++------
 .../Assets/AssetType/ONVIFCamera.tsx          | 107 +++++++++---------
 3 files changed, 93 insertions(+), 88 deletions(-)

diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 27f0f2d8bc0..4565c48b33d 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -28,7 +28,7 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
 import { useTranslation } from "react-i18next";
 const Loading = lazy(() => import("../Common/Loading"));
 import * as Notification from "../../Utils/Notifications.js";
-import AuthorizeFor, { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import Uptime from "../Common/Uptime";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
@@ -453,7 +453,6 @@ const AssetManage = (props: AssetManageProps) => {
                   }
                   id="configure-asset"
                   data-testid="asset-configure-button"
-                  authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
                 >
                   <CareIcon className="care-l-setting h-4" />
                   {t("configure")}
diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
index b19190ed410..55f4d0c258e 100644
--- a/src/Components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/Components/Assets/AssetType/HL7Monitor.tsx
@@ -15,6 +15,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import TextFormField from "../../Form/FormFields/TextFormField";
 import HL7PatientVitalsMonitor from "../../VitalsMonitor/HL7PatientVitalsMonitor";
 import VentilatorPatientVitalsMonitor from "../../VitalsMonitor/VentilatorPatientVitalsMonitor";
+import useAuthUser from "../../../Common/hooks/useAuthUser";
 
 interface HL7MonitorProps {
   assetId: string;
@@ -31,7 +32,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
   const [isLoading, setIsLoading] = useState(true);
   const [localipAddress, setLocalIPAddress] = useState("");
   const [ipadrdress_error, setIpAddress_error] = useState("");
-
+  const authUser = useAuthUser();
   const dispatch = useDispatch<any>();
 
   useEffect(() => {
@@ -87,40 +88,42 @@ const HL7Monitor = (props: HL7MonitorProps) => {
   return (
     <div className="mx-auto flex w-full xl:mt-8">
       <div className="mx-auto flex flex-col gap-4 xl:flex-row-reverse">
-        <div className="flex w-full shrink-0 flex-col gap-4 xl:max-w-xs">
-          <Card className="flex w-full flex-col">
-            <form onSubmit={handleSubmit}>
-              <h2 className="mb-2 text-lg font-bold">Connection</h2>
-              <div className="flex flex-col">
-                <TextFormField
-                  name="middlewareHostname"
-                  label="Middleware Hostname"
-                  placeholder={facilityMiddlewareHostname}
-                  value={middlewareHostname}
-                  onChange={(e) => setMiddlewareHostname(e.value)}
-                  errorClassName="hidden"
-                />
-                <TextFormField
-                  name="localipAddress"
-                  label="Local IP Address"
-                  value={localipAddress}
-                  onChange={(e) => setLocalIPAddress(e.value)}
-                  required
-                  error={ipadrdress_error}
-                />
-                <Submit className="w-full">
-                  <CareIcon className="care-l-save" />
-                  <span>Save Configuration</span>
-                </Submit>
-              </div>
-            </form>
-          </Card>
-          {["HL7MONITOR"].includes(assetType) && (
-            <Card>
-              <MonitorConfigure asset={asset as AssetData} />
+        {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
+          <div className="flex w-full shrink-0 flex-col gap-4 xl:max-w-xs">
+            <Card className="flex w-full flex-col">
+              <form onSubmit={handleSubmit}>
+                <h2 className="mb-2 text-lg font-bold">Connection</h2>
+                <div className="flex flex-col">
+                  <TextFormField
+                    name="middlewareHostname"
+                    label="Middleware Hostname"
+                    placeholder={facilityMiddlewareHostname}
+                    value={middlewareHostname}
+                    onChange={(e) => setMiddlewareHostname(e.value)}
+                    errorClassName="hidden"
+                  />
+                  <TextFormField
+                    name="localipAddress"
+                    label="Local IP Address"
+                    value={localipAddress}
+                    onChange={(e) => setLocalIPAddress(e.value)}
+                    required
+                    error={ipadrdress_error}
+                  />
+                  <Submit className="w-full">
+                    <CareIcon className="care-l-save" />
+                    <span>Save Configuration</span>
+                  </Submit>
+                </div>
+              </form>
             </Card>
-          )}
-        </div>
+            {["HL7MONITOR"].includes(assetType) && (
+              <Card>
+                <MonitorConfigure asset={asset as AssetData} />
+              </Card>
+            )}
+          </div>
+        )}
 
         {assetType === "HL7MONITOR" && (
           <HL7PatientVitalsMonitor
diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 0f26c4924ae..5cb518a3855 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -16,6 +16,7 @@ import { checkIfValidIP } from "../../../Common/validation";
 import TextFormField from "../../Form/FormFields/TextFormField";
 import { Submit } from "../../Common/components/ButtonV2";
 import { SyntheticEvent } from "react";
+import useAuthUser from "../../../Common/hooks/useAuthUser";
 
 interface ONVIFCameraProps {
   assetId: string;
@@ -44,7 +45,7 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
   );
   const [refreshHash, setRefreshHash] = useState(Number(new Date()));
   const dispatch = useDispatch<any>();
-
+  const authUser = useAuthUser();
   useEffect(() => {
     const fetchFacility = async () => {
       const res = await dispatch(getPermittedFacility(facilityId));
@@ -147,57 +148,59 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
 
   return (
     <div className="space-y-6">
-      <form className="rounded bg-white p-8 shadow" onSubmit={handleSubmit}>
-        <div className="grid grid-cols-1 gap-x-4 lg:grid-cols-2">
-          <TextFormField
-            name="middleware_hostname"
-            label="Hospital Middleware Hostname"
-            autoComplete="off"
-            value={middlewareHostname}
-            onChange={({ value }) => setMiddlewareHostname(value)}
-          />
-          <TextFormField
-            name="camera_address"
-            label="Local IP Address"
-            autoComplete="off"
-            value={cameraAddress}
-            onChange={({ value }) => setCameraAddress(value)}
-            error={ipadrdress_error}
-          />
-          <TextFormField
-            name="username"
-            label="Username"
-            autoComplete="off"
-            value={username}
-            onChange={({ value }) => setUsername(value)}
-          />
-          <TextFormField
-            name="password"
-            label="Password"
-            autoComplete="off"
-            type="password"
-            value={password}
-            onChange={({ value }) => setPassword(value)}
-          />
-          <TextFormField
-            name="stream_uuid"
-            label="Stream UUID"
-            autoComplete="off"
-            value={streamUuid}
-            type="password"
-            className="tracking-widest"
-            labelClassName="tracking-normal"
-            onChange={({ value }) => setStreamUuid(value)}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Submit
-            disabled={loadingSetConfiguration}
-            className="w-full md:w-auto"
-            label="Set Configuration"
-          />
-        </div>
-      </form>
+      {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
+        <form className="rounded bg-white p-8 shadow" onSubmit={handleSubmit}>
+          <div className="grid grid-cols-1 gap-x-4 lg:grid-cols-2">
+            <TextFormField
+              name="middleware_hostname"
+              label="Hospital Middleware Hostname"
+              autoComplete="off"
+              value={middlewareHostname}
+              onChange={({ value }) => setMiddlewareHostname(value)}
+            />
+            <TextFormField
+              name="camera_address"
+              label="Local IP Address"
+              autoComplete="off"
+              value={cameraAddress}
+              onChange={({ value }) => setCameraAddress(value)}
+              error={ipadrdress_error}
+            />
+            <TextFormField
+              name="username"
+              label="Username"
+              autoComplete="off"
+              value={username}
+              onChange={({ value }) => setUsername(value)}
+            />
+            <TextFormField
+              name="password"
+              label="Password"
+              autoComplete="off"
+              type="password"
+              value={password}
+              onChange={({ value }) => setPassword(value)}
+            />
+            <TextFormField
+              name="stream_uuid"
+              label="Stream UUID"
+              autoComplete="off"
+              value={streamUuid}
+              type="password"
+              className="tracking-widest"
+              labelClassName="tracking-normal"
+              onChange={({ value }) => setStreamUuid(value)}
+            />
+          </div>
+          <div className="flex justify-end">
+            <Submit
+              disabled={loadingSetConfiguration}
+              className="w-full md:w-auto"
+              label="Set Configuration"
+            />
+          </div>
+        </form>
+      )}
 
       {assetType === "ONVIF" ? (
         <CameraConfigure

From fb8b9e25bd1b86e9d900ab4a93c02a551582a8b7 Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <70687348+Pranshu1902@users.noreply.github.com>
Date: Wed, 20 Sep 2023 18:49:40 +0530
Subject: [PATCH 02/16]  Enhanced UI for Principle diagnosis (#6264)

* highlight principal diagnosis

* refactor

* use chip

* add badge

* add tooltip
---
 .../Facility/ConsultationDetails/index.tsx    | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 490c704f295..3d9fa0f6e75 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -8,7 +8,7 @@ import { ConsultationModel, ICD11DiagnosisModel } from "../models";
 import { getConsultation, getPatient } from "../../../Redux/actions";
 import { statusType, useAbortableEffect } from "../../../Common/utils";
 import { lazy, useCallback, useState } from "react";
-
+import ToolTip from "../../Common/utils/Tooltip";
 import ButtonV2 from "../../Common/components/ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import DischargeModal from "../DischargeModal";
@@ -191,10 +191,20 @@ export const ConsultationDetails = (props: any) => {
     return diagnoses.length ? (
       <div className="w-full text-sm">
         <p className="font-semibold leading-relaxed">{label}</p>
-
-        {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) => (
-          <p>{diagnosis.label}</p>
-        ))}
+        {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) =>
+          diagnosis.id === consultationData.icd11_principal_diagnosis ? (
+            <div className="relative flex items-center gap-2">
+              <p>{diagnosis.label}</p>
+              <div>
+                <ToolTip text="Principal Diagnosis" position="BOTTOM">
+                  <CareIcon className="care-l-stethoscope rounded-lg bg-primary-500  p-1 text-2xl text-white" />
+                </ToolTip>
+              </div>
+            </div>
+          ) : (
+            <p>{diagnosis.label}</p>
+          )
+        )}
         {diagnoses.length > nshow && (
           <>
             {!showMore ? (
@@ -359,22 +369,6 @@ export const ConsultationDetails = (props: any) => {
                   </div>
                 )*/}
 
-                {consultationData.icd11_principal_diagnosis && (
-                  <ShowDiagnosis
-                    label="Principal Diagnosis (as per ICD-11 recommended by WHO)"
-                    diagnoses={[
-                      [
-                        ...(consultationData?.icd11_diagnoses_object ?? []),
-                        ...(consultationData?.icd11_provisional_diagnoses_object ??
-                          []),
-                      ].find(
-                        (d) =>
-                          d.id === consultationData.icd11_principal_diagnosis
-                      )!,
-                    ]}
-                  />
-                )}
-
                 <ShowDiagnosis
                   diagnoses={
                     consultationData?.icd11_provisional_diagnoses_object

From 9fe59db919e17b1410fe296a102c368745aa140f Mon Sep 17 00:00:00 2001
From: "Tasnimul H. Tauhid" <thtauhid.71@gmail.com>
Date: Wed, 20 Sep 2023 20:55:30 +0530
Subject: [PATCH 03/16] Removed react-swipeable-views package (#6312)

* removed SwipeableViews from ManagePatients.tsx

* Removed react-swipeable-views package
---
 package-lock.json                         | 137 +---------------------
 package.json                              |   2 -
 src/Components/Patient/ManagePatients.tsx |  15 +--
 3 files changed, 7 insertions(+), 147 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6f655932fd7..4871fbe374b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,6 @@
         "react-player": "^2.12.0",
         "react-qr-reader": "^2.2.1",
         "react-redux": "^8.1.1",
-        "react-swipeable-views": "^0.14.0",
         "react-transition-group": "^4.4.5",
         "react-webcam": "^7.1.1",
         "read-excel-file": "^5.6.1",
@@ -85,7 +84,6 @@
         "@types/react-dom": "^18.2.6",
         "@types/react-google-recaptcha": "^2.1.5",
         "@types/react-qr-reader": "^2.1.4",
-        "@types/react-swipeable-views": "^0.13.2",
         "@types/react-transition-group": "^4.4.6",
         "@typescript-eslint/eslint-plugin": "^5.61.0",
         "@typescript-eslint/parser": "^5.61.0",
@@ -5639,15 +5637,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-swipeable-views": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/@types/react-swipeable-views/-/react-swipeable-views-0.13.2.tgz",
-      "integrity": "sha512-FiszBm9M0JicAgzO/IwDqpfHQRUEjPZA88UexYsVD6qHJBf5LrbGjR5Mw4+yZbf8ZxJneNqOsZbe4WGjOYG7iQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.6",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
@@ -11996,11 +11985,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
-      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
-    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -14273,6 +14257,7 @@
     "node_modules/npm/node_modules/brace-expansion": {
       "version": "2.0.1",
       "dev": true,
+      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -15267,15 +15252,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/npm/node_modules/minimatch/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "dev": true,
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/npm/node_modules/minipass": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
@@ -18125,19 +18101,6 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
-    "node_modules/react-event-listener": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
-      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
-      "dependencies": {
-        "@babel/runtime": "^7.2.0",
-        "prop-types": "^15.6.0",
-        "warning": "^4.0.1"
-      },
-      "peerDependencies": {
-        "react": "^16.3.0"
-      }
-    },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -18306,91 +18269,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-swipeable-views": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.14.0.tgz",
-      "integrity": "sha512-wrTT6bi2nC3JbmyNAsPXffUXLn0DVT9SbbcFr36gKpbaCgEp7rX/OFxsu5hPc/NBsUhHyoSRGvwqJNNrWTwCww==",
-      "dependencies": {
-        "@babel/runtime": "7.0.0",
-        "prop-types": "^15.5.4",
-        "react-swipeable-views-core": "^0.14.0",
-        "react-swipeable-views-utils": "^0.14.0",
-        "warning": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
-    "node_modules/react-swipeable-views-core": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0.tgz",
-      "integrity": "sha512-0W/e9uPweNEOSPjmYtuKSC/SvKKg1sfo+WtPdnxeLF3t2L82h7jjszuOHz9C23fzkvLfdgkaOmcbAxE9w2GEjA==",
-      "dependencies": {
-        "@babel/runtime": "7.0.0",
-        "warning": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/react-swipeable-views-core/node_modules/@babel/runtime": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
-      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
-      "dependencies": {
-        "regenerator-runtime": "^0.12.0"
-      }
-    },
-    "node_modules/react-swipeable-views-core/node_modules/regenerator-runtime": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-    },
-    "node_modules/react-swipeable-views-utils": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0.tgz",
-      "integrity": "sha512-W+fXBOsDqgFK1/g7MzRMVcDurp3LqO3ksC8UgInh2P/tKgb5DusuuB1geKHFc6o1wKl+4oyER4Zh3Lxmr8xbXA==",
-      "dependencies": {
-        "@babel/runtime": "7.0.0",
-        "keycode": "^2.1.7",
-        "prop-types": "^15.6.0",
-        "react-event-listener": "^0.6.0",
-        "react-swipeable-views-core": "^0.14.0",
-        "shallow-equal": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/react-swipeable-views-utils/node_modules/@babel/runtime": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
-      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
-      "dependencies": {
-        "regenerator-runtime": "^0.12.0"
-      }
-    },
-    "node_modules/react-swipeable-views-utils/node_modules/regenerator-runtime": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-    },
-    "node_modules/react-swipeable-views/node_modules/@babel/runtime": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
-      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
-      "dependencies": {
-        "regenerator-runtime": "^0.12.0"
-      }
-    },
-    "node_modules/react-swipeable-views/node_modules/regenerator-runtime": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -19371,11 +19249,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -21268,14 +21141,6 @@
         "makeerror": "1.0.12"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 8ade8c604be..246734dc3d4 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
     "react-player": "^2.12.0",
     "react-qr-reader": "^2.2.1",
     "react-redux": "^8.1.1",
-    "react-swipeable-views": "^0.14.0",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",
     "read-excel-file": "^5.6.1",
@@ -125,7 +124,6 @@
     "@types/react-dom": "^18.2.6",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-qr-reader": "^2.1.4",
-    "@types/react-swipeable-views": "^0.13.2",
     "@types/react-transition-group": "^4.4.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 71a3ad08c8c..e15db9f3b40 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -36,7 +36,6 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
 import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
-import SwipeableViews from "react-swipeable-views";
 import { parseOptionId } from "../../Common/utils";
 import { parsePhoneNumber } from "../../Utils/utils.js";
 import { useDispatch } from "react-redux";
@@ -985,14 +984,12 @@ export const PatientManager = () => {
       </div>
       <div>
         <PatientFilter {...advancedFilter} key={window.location.search} />
-        <SwipeableViews index={tabValue}>
-          <TabPanel value={tabValue} index={0}>
-            <div className="mb-4">{managePatients}</div>
-          </TabPanel>
-          <TabPanel value={tabValue} index={1}>
-            <div className="mb-4">{managePatients}</div>
-          </TabPanel>
-        </SwipeableViews>
+        <TabPanel value={tabValue} index={0}>
+          <div className="mb-4">{managePatients}</div>
+        </TabPanel>
+        <TabPanel value={tabValue} index={1}>
+          <div className="mb-4">{managePatients}</div>
+        </TabPanel>
         <DoctorVideoSlideover
           facilityId={params.facility}
           show={showDoctors}

From 5c8d4f9dae07d5ce39571775084f6a6c585d15c5 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Thu, 21 Sep 2023 10:07:59 +0530
Subject: [PATCH 04/16] Refactor `App.tsx`, Providers, Integrations; Remove
 usage on redux's states; Adds support for notifications to `useQuery` and
 `request` (#6287)

* Refactor `App.tsx`, providers, integrations and remove redux state usage.

* remove axios dependency

* fixes trailing slash redirect for token refresh

* handle notifications

* fix auth state management and notifications

* fix suspense fallback

* support for reattempts

* request; make new headers on every attempt
---
 src/App.tsx                                   | 127 +++---------------
 src/CAREUI/misc/ThemedFavicon.tsx             |  14 ++
 src/Common/hooks/useAppHistory.ts             |   2 +-
 src/Common/hooks/useFilters.tsx               |   2 +-
 .../Facility/ConsultationDetails/index.tsx    |   2 +-
 .../Facility/Consultations/Feed.tsx           |   2 +-
 src/Components/Patient/ManagePatients.tsx     |   2 +-
 src/Components/Patient/PatientHome.tsx        |   2 +-
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx |   2 +-
 .../Common => Integrations}/Plausible.tsx     |   4 +-
 src/Integrations/Sentry.tsx                   |  25 ++++
 src/Integrations/index.tsx                    |   6 +
 src/Providers/AppConfigProvider.tsx           |  25 ++++
 src/Providers/AuthUserProvider.tsx            |  63 +++++++++
 .../misc => Providers}/HistoryAPIProvider.tsx |   4 +-
 src/Providers/index.tsx                       |   5 +
 src/Redux/api.tsx                             |  12 +-
 src/{Router => Routers}/AppRouter.tsx         |   0
 src/{Router => Routers}/SessionRouter.tsx     |   0
 src/Routers/index.tsx                         |   6 +
 src/Utils/request/handleResponse.ts           |  38 ++++++
 src/Utils/request/request.ts                  |  54 ++++++--
 src/Utils/request/types.ts                    |  11 +-
 src/Utils/request/useQuery.ts                 |  24 +---
 src/Utils/request/utils.ts                    |   9 ++
 25 files changed, 295 insertions(+), 146 deletions(-)
 create mode 100644 src/CAREUI/misc/ThemedFavicon.tsx
 rename src/{Components/Common => Integrations}/Plausible.tsx (95%)
 create mode 100644 src/Integrations/Sentry.tsx
 create mode 100644 src/Integrations/index.tsx
 create mode 100644 src/Providers/AppConfigProvider.tsx
 create mode 100644 src/Providers/AuthUserProvider.tsx
 rename src/{CAREUI/misc => Providers}/HistoryAPIProvider.tsx (93%)
 create mode 100644 src/Providers/index.tsx
 rename src/{Router => Routers}/AppRouter.tsx (100%)
 rename src/{Router => Routers}/SessionRouter.tsx (100%)
 create mode 100644 src/Routers/index.tsx
 create mode 100644 src/Utils/request/handleResponse.ts

diff --git a/src/App.tsx b/src/App.tsx
index e00ca18f652..f89dfd11e74 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,111 +1,28 @@
-import * as Sentry from "@sentry/browser";
-
-import { FC, Suspense, lazy, useEffect, useState } from "react";
-import { getConfig, getCurrentUser } from "./Redux/actions";
-import { statusType, useAbortableEffect } from "./Common/utils";
-import { useDispatch, useSelector } from "react-redux";
-
-import AppRouter from "./Router/AppRouter";
-import { HistoryAPIProvider } from "./CAREUI/misc/HistoryAPIProvider";
-import { AppConfigContext, IConfig } from "./Common/hooks/useConfig";
-import { LocalStorageKeys } from "./Common/constants";
-import Plausible from "./Components/Common/Plausible";
-import SessionRouter from "./Router/SessionRouter";
-import axios from "axios";
-import { AuthUserContext } from "./Common/hooks/useAuthUser";
-
-const Loading = lazy(() => import("./Components/Common/Loading"));
-
-const App: FC = () => {
-  const dispatch: any = useDispatch();
-  const state: any = useSelector((state) => state);
-  const { currentUser, config } = state;
-  const [user, setUser] = useState(null);
-
-  useAbortableEffect(async () => {
-    const res = await dispatch(getConfig());
-    if (res.data && res.status < 400) {
-      const config = res.data as IConfig;
-
-      if (config?.sentry_dsn && import.meta.env.PROD) {
-        Sentry.init({
-          environment: config.sentry_environment,
-          dsn: config.sentry_dsn,
-        });
-      }
-
-      localStorage.setItem("config", JSON.stringify(config));
-    }
-  }, [dispatch]);
-
-  const updateRefreshToken = () => {
-    const refresh = localStorage.getItem(LocalStorageKeys.refreshToken);
-    // const access = localStorage.getItem(LocalStorageKeys.accessToken);
-    // if (!access && refresh) {
-    //   localStorage.removeItem(LocalStorageKeys.refreshToken);
-    //   document.location.reload();
-    //   return;
-    // }
-    if (!refresh) {
-      return;
-    }
-    axios
-      .post("/api/v1/auth/token/refresh/", {
-        refresh,
-      })
-      .then((resp) => {
-        localStorage.setItem(LocalStorageKeys.accessToken, resp.data.access);
-        localStorage.setItem(LocalStorageKeys.refreshToken, resp.data.refresh);
-      });
-  };
-  useEffect(() => {
-    updateRefreshToken();
-    setInterval(updateRefreshToken, 5 * 60 * 1000);
-  }, [user]);
-
-  useAbortableEffect(
-    async (status: statusType) => {
-      const res = await dispatch(getCurrentUser());
-      if (!status.aborted && res && res.statusCode === 200) {
-        setUser(res.data);
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
-    const favicon: any = document.querySelector("link[rel~='icon']");
-    if (darkThemeMq.matches) {
-      favicon.href = "/favicon-light.ico";
-    } else {
-      favicon.href = "/favicon.ico";
-    }
-  }, []);
-
-  if (
-    !currentUser ||
-    currentUser.isFetching ||
-    !config ||
-    config.isFetching ||
-    !config.data
-  ) {
-    return <Loading />;
-  }
-
+import { Suspense } from "react";
+import Routers from "./Routers";
+import {
+  AppConfigProvider,
+  AuthUserProvider,
+  HistoryAPIProvider,
+} from "./Providers";
+import ThemedFavicon from "./CAREUI/misc/ThemedFavicon";
+import Intergrations from "./Integrations";
+import Loading from "./Components/Common/Loading";
+
+const App = () => {
   return (
     <Suspense fallback={<Loading />}>
+      <ThemedFavicon />
       <HistoryAPIProvider>
-        <AppConfigContext.Provider value={config.data}>
-          {currentUser?.data ? (
-            <AuthUserContext.Provider value={currentUser.data}>
-              <AppRouter />
-            </AuthUserContext.Provider>
-          ) : (
-            <SessionRouter />
-          )}
-          <Plausible />
-        </AppConfigContext.Provider>
+        <AppConfigProvider>
+          <AuthUserProvider unauthorized={<Routers.SessionRouter />}>
+            <Routers.AppRouter />
+          </AuthUserProvider>
+
+          {/* Integrations */}
+          <Intergrations.Sentry disabled={!import.meta.env.PROD} />
+          <Intergrations.Plausible />
+        </AppConfigProvider>
       </HistoryAPIProvider>
     </Suspense>
   );
diff --git a/src/CAREUI/misc/ThemedFavicon.tsx b/src/CAREUI/misc/ThemedFavicon.tsx
new file mode 100644
index 00000000000..55b8d34ec7e
--- /dev/null
+++ b/src/CAREUI/misc/ThemedFavicon.tsx
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+export default function ThemedFavicon() {
+  useEffect(() => {
+    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+    const favicon = document.querySelector(
+      "link[rel~='icon']"
+    ) as HTMLLinkElement;
+
+    favicon.href = darkThemeMq.matches ? "/favicon-light.ico" : "/favicon.ico";
+  }, []);
+
+  return null;
+}
diff --git a/src/Common/hooks/useAppHistory.ts b/src/Common/hooks/useAppHistory.ts
index f4ee2f11f78..a4605db082b 100644
--- a/src/Common/hooks/useAppHistory.ts
+++ b/src/Common/hooks/useAppHistory.ts
@@ -3,7 +3,7 @@ import { useContext } from "react";
 import {
   HistoryContext,
   ResetHistoryContext,
-} from "../../CAREUI/misc/HistoryAPIProvider";
+} from "../../Providers/HistoryAPIProvider";
 
 export default function useAppHistory() {
   const history = useContext(HistoryContext);
diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx
index 309cdc37787..129a696041b 100644
--- a/src/Common/hooks/useFilters.tsx
+++ b/src/Common/hooks/useFilters.tsx
@@ -196,7 +196,7 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
     FilterBadge,
     FilterBadges,
     Pagination,
-    // TODO: update this props to be compliant with new FiltersSlideOver when #3996 is merged.
+
     advancedFilter: {
       show: showFilters,
       setShow: setShowFilters,
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 3d9fa0f6e75..356257f9ac6 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -23,7 +23,7 @@ import { navigate } from "raviger";
 import { useDispatch } from "react-redux";
 import { useQueryParams } from "raviger";
 import { useTranslation } from "react-i18next";
-import { triggerGoal } from "../../Common/Plausible";
+import { triggerGoal } from "../../../Integrations/Plausible";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
 import { ConsultationUpdatesTab } from "./ConsultationUpdatesTab";
 import { ConsultationABGTab } from "./ConsultationABGTab";
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 84b3e62ef9e..75ab72d168c 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -30,7 +30,7 @@ import { useDispatch } from "react-redux";
 import { useHLSPLayer } from "../../../Common/hooks/useHLSPlayer";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import useFullscreen from "../../../Common/hooks/useFullscreen.js";
-import { triggerGoal } from "../../Common/Plausible.js";
+import { triggerGoal } from "../../../Integrations/Plausible.js";
 import useAuthUser from "../../../Common/hooks/useAuthUser.js";
 
 interface IFeedProps {
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index e15db9f3b40..423edb894c9 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -43,7 +43,7 @@ import useFilters from "../../Common/hooks/useFilters";
 import { useTranslation } from "react-i18next";
 import Page from "../Common/components/Page.js";
 import dayjs from "dayjs";
-import { triggerGoal } from "../Common/Plausible.js";
+import { triggerGoal } from "../../Integrations/Plausible.js";
 import useAuthUser from "../../Common/hooks/useAuthUser.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 3d39f377462..8fdc0f51280 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -30,7 +30,7 @@ import Page from "../Common/components/Page";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
 import dayjs from "../../Utils/dayjs";
-import { triggerGoal } from "../Common/Plausible";
+import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 
 const Loading = lazy(() => import("../Common/Loading"));
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index c0b089df8b0..1b45fd80ddc 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -6,7 +6,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import WaveformLabels from "./WaveformLabels";
 import { classNames } from "../../Utils/utils";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
-import { triggerGoal } from "../Common/Plausible";
+import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 
 export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
diff --git a/src/Components/Common/Plausible.tsx b/src/Integrations/Plausible.tsx
similarity index 95%
rename from src/Components/Common/Plausible.tsx
rename to src/Integrations/Plausible.tsx
index 77589e0f923..c9b040749d4 100644
--- a/src/Components/Common/Plausible.tsx
+++ b/src/Integrations/Plausible.tsx
@@ -1,6 +1,6 @@
 import { useLocationChange } from "raviger";
-import useConfig from "../../Common/hooks/useConfig";
-import Script from "./Script";
+import useConfig from "../Common/hooks/useConfig";
+import Script from "../Components/Common/Script";
 import { useEffect } from "react";
 
 export default function Plausible() {
diff --git a/src/Integrations/Sentry.tsx b/src/Integrations/Sentry.tsx
new file mode 100644
index 00000000000..466f93487c4
--- /dev/null
+++ b/src/Integrations/Sentry.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import useConfig from "../Common/hooks/useConfig";
+
+interface Props {
+  disabled?: boolean;
+}
+
+export default function Sentry({ disabled }: Props) {
+  const { sentry_dsn, sentry_environment } = useConfig();
+
+  useEffect(() => {
+    if (disabled || !sentry_dsn) {
+      return;
+    }
+
+    import("@sentry/browser").then((Sentry) => {
+      Sentry.init({
+        environment: sentry_environment,
+        dsn: sentry_dsn,
+      });
+    });
+  }, [sentry_dsn, sentry_environment, disabled]);
+
+  return null;
+}
diff --git a/src/Integrations/index.tsx b/src/Integrations/index.tsx
new file mode 100644
index 00000000000..aeb0399a452
--- /dev/null
+++ b/src/Integrations/index.tsx
@@ -0,0 +1,6 @@
+import Sentry from "./Sentry";
+import Plausible from "./Plausible";
+
+const Intergrations = { Sentry, Plausible };
+
+export default Intergrations;
diff --git a/src/Providers/AppConfigProvider.tsx b/src/Providers/AppConfigProvider.tsx
new file mode 100644
index 00000000000..7492a83c126
--- /dev/null
+++ b/src/Providers/AppConfigProvider.tsx
@@ -0,0 +1,25 @@
+import { AppConfigContext } from "../Common/hooks/useConfig";
+import Loading from "../Components/Common/Loading";
+import routes from "../Redux/api";
+import useQuery from "../Utils/request/useQuery";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function AppConfigProvider({ children }: Props) {
+  const { data, loading } = useQuery(routes.config, {
+    refetchOnWindowFocus: false,
+    prefetch: true,
+  });
+
+  if (loading || data === undefined) {
+    return <Loading />;
+  }
+
+  return (
+    <AppConfigContext.Provider value={data}>
+      {children}
+    </AppConfigContext.Provider>
+  );
+}
diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
new file mode 100644
index 00000000000..64027a17215
--- /dev/null
+++ b/src/Providers/AuthUserProvider.tsx
@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { AuthUserContext } from "../Common/hooks/useAuthUser";
+import Loading from "../Components/Common/Loading";
+import routes from "../Redux/api";
+import useQuery from "../Utils/request/useQuery";
+import { LocalStorageKeys } from "../Common/constants";
+import request from "../Utils/request/request";
+
+interface Props {
+  children: React.ReactNode;
+  unauthorized: React.ReactNode;
+}
+
+export default function AuthUserProvider({ children, unauthorized }: Props) {
+  const { res, data, loading } = useQuery(routes.currentUser, {
+    refetchOnWindowFocus: false,
+    prefetch: true,
+    silent: true,
+  });
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    updateRefreshToken(true);
+    setInterval(() => updateRefreshToken(), 5 * 60 * 1000); // TODO: move this interval to config.json
+  }, [data]);
+
+  if (loading || !res) {
+    return <Loading />;
+  }
+
+  if (res.status !== 200 || !data) {
+    return unauthorized;
+  }
+
+  return (
+    <AuthUserContext.Provider value={data}>{children}</AuthUserContext.Provider>
+  );
+}
+
+const updateRefreshToken = async (silent = false) => {
+  const refresh = localStorage.getItem(LocalStorageKeys.refreshToken);
+
+  if (!refresh) {
+    return;
+  }
+
+  const { res, data } = await request(routes.token_refresh, {
+    body: { refresh },
+    silent,
+  });
+
+  if (res?.status !== 200 || !data) {
+    localStorage.removeItem(LocalStorageKeys.accessToken);
+    localStorage.removeItem(LocalStorageKeys.refreshToken);
+    return;
+  }
+
+  localStorage.setItem(LocalStorageKeys.accessToken, data.access);
+  localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
+};
diff --git a/src/CAREUI/misc/HistoryAPIProvider.tsx b/src/Providers/HistoryAPIProvider.tsx
similarity index 93%
rename from src/CAREUI/misc/HistoryAPIProvider.tsx
rename to src/Providers/HistoryAPIProvider.tsx
index e82e379053f..3fa4b6fab86 100644
--- a/src/CAREUI/misc/HistoryAPIProvider.tsx
+++ b/src/Providers/HistoryAPIProvider.tsx
@@ -5,7 +5,7 @@ export const HistoryContext = createContext<string[]>([]);
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const ResetHistoryContext = createContext(() => {});
 
-export const HistoryAPIProvider = (props: { children: ReactNode }) => {
+export default function HistoryAPIProvider(props: { children: ReactNode }) {
   const [history, setHistory] = useState<string[]>([]);
 
   useLocationChange(
@@ -36,4 +36,4 @@ export const HistoryAPIProvider = (props: { children: ReactNode }) => {
       </ResetHistoryContext.Provider>
     </HistoryContext.Provider>
   );
-};
+}
diff --git a/src/Providers/index.tsx b/src/Providers/index.tsx
new file mode 100644
index 00000000000..728ee9e1f91
--- /dev/null
+++ b/src/Providers/index.tsx
@@ -0,0 +1,5 @@
+import AppConfigProvider from "./AppConfigProvider";
+import AuthUserProvider from "./AuthUserProvider";
+import HistoryAPIProvider from "./HistoryAPIProvider";
+
+export { AppConfigProvider, AuthUserProvider, HistoryAPIProvider };
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index b98a099f439..cb124b5bb80 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -1,4 +1,6 @@
+import { IConfig } from "../Common/hooks/useConfig";
 import { LocationModel } from "../Components/Facility/models";
+import { UserModel } from "../Components/Users/models";
 import { PaginatedResponse } from "../Utils/request/types";
 
 /**
@@ -9,11 +11,17 @@ function Res<T>(): T {
   return {} as T;
 }
 
+interface JwtTokenObtainPair {
+  access: string;
+  refresh: string;
+}
+
 const routes = {
   config: {
     path: import.meta.env.REACT_APP_CONFIG ?? "/config.json",
     method: "GET",
     noAuth: true,
+    TRes: Res<IConfig>(),
   },
 
   // Auth Endpoints
@@ -24,8 +32,9 @@ const routes = {
   },
 
   token_refresh: {
-    path: "/api/v1/auth/token/refresh",
+    path: "/api/v1/auth/token/refresh/",
     method: "POST",
+    TRes: Res<JwtTokenObtainPair>(),
   },
 
   token_verify: {
@@ -55,6 +64,7 @@ const routes = {
   // User Endpoints
   currentUser: {
     path: "/api/v1/users/getcurrentuser/",
+    TRes: Res<UserModel>(),
   },
 
   userList: {
diff --git a/src/Router/AppRouter.tsx b/src/Routers/AppRouter.tsx
similarity index 100%
rename from src/Router/AppRouter.tsx
rename to src/Routers/AppRouter.tsx
diff --git a/src/Router/SessionRouter.tsx b/src/Routers/SessionRouter.tsx
similarity index 100%
rename from src/Router/SessionRouter.tsx
rename to src/Routers/SessionRouter.tsx
diff --git a/src/Routers/index.tsx b/src/Routers/index.tsx
new file mode 100644
index 00000000000..8a27df7b59d
--- /dev/null
+++ b/src/Routers/index.tsx
@@ -0,0 +1,6 @@
+import SessionRouter from "./SessionRouter";
+import AppRouter from "./AppRouter";
+
+const routers = { SessionRouter, AppRouter };
+
+export default routers;
diff --git a/src/Utils/request/handleResponse.ts b/src/Utils/request/handleResponse.ts
new file mode 100644
index 00000000000..2ecad95ac88
--- /dev/null
+++ b/src/Utils/request/handleResponse.ts
@@ -0,0 +1,38 @@
+import { RequestResult } from "./types";
+import * as Notifications from "../Notifications";
+import { navigate } from "raviger";
+
+export default function handleResponse(
+  { res, error }: RequestResult<unknown>,
+  silent?: boolean
+) {
+  const notify = silent ? undefined : Notifications;
+
+  if (res === undefined) {
+    return;
+  }
+
+  // 5xx errors
+  if (res.status >= 500 && res.status < 600) {
+    console.error("Server error", res);
+    notify?.Error({ msg: "Something went wrong...!" });
+    return;
+  }
+
+  // 400/406 Bad Request
+  if (res.status === 400 || res.status === 406) {
+    notify?.BadRequest({ errs: error });
+    return;
+  }
+
+  // Other 400 Errors
+  if (res.status >= 400) {
+    // Invalid token
+    if (!silent && error?.code === "token_not_valid") {
+      navigate("/session-expired");
+    }
+
+    notify?.Error({ msg: error?.detail || "Something went wrong...!" });
+    return;
+  }
+}
diff --git a/src/Utils/request/request.ts b/src/Utils/request/request.ts
index 2dc938fa6f1..45c8e5ce664 100644
--- a/src/Utils/request/request.ts
+++ b/src/Utils/request/request.ts
@@ -1,4 +1,5 @@
-import { RequestOptions, Route } from "./types";
+import handleResponse from "./handleResponse";
+import { RequestOptions, RequestResult, Route } from "./types";
 import { makeHeaders, makeUrl } from "./utils";
 
 interface Options extends RequestOptions {
@@ -7,21 +8,56 @@ interface Options extends RequestOptions {
 
 export default async function request<TData>(
   { path, method, noAuth }: Route<TData>,
-  { query, body, pathParams, controller }: Options = {}
-) {
+  {
+    query,
+    body,
+    pathParams,
+    controller,
+    onResponse,
+    silent,
+    reattempts = 3,
+  }: Options = {}
+): Promise<RequestResult<TData>> {
   const signal = controller?.signal;
-
-  const headers = makeHeaders(noAuth ?? false);
   const url = makeUrl(path, query, pathParams);
 
-  const options: RequestInit = { headers, method, signal };
+  const options: RequestInit = { method, signal };
 
   if (body) {
     options.body = JSON.stringify(body);
   }
 
-  const res = await fetch(url, options);
-  const data: TData = await res.json();
+  let result: RequestResult<TData> = {
+    res: undefined,
+    data: undefined,
+    error: undefined,
+  };
+
+  for (let i = 0; i < reattempts + 1; i++) {
+    options.headers = makeHeaders(noAuth ?? false);
+
+    try {
+      const res = await fetch(url, options);
+      const data: TData = await res.json();
+
+      result = {
+        res,
+        data: res.ok ? data : undefined,
+        error: res.ok ? undefined : (data as Record<string, unknown>),
+      };
+
+      onResponse?.(result);
+      handleResponse(result, silent);
+
+      return result;
+    } catch (error: any) {
+      result = { error, res: undefined, data: undefined };
+    }
+  }
 
-  return { res, data };
+  console.error(
+    `Request failed after ${reattempts + 1} attempts`,
+    result.error
+  );
+  return result;
 }
diff --git a/src/Utils/request/types.ts b/src/Utils/request/types.ts
index e7f0f9544a3..7f01ef91d9c 100644
--- a/src/Utils/request/types.ts
+++ b/src/Utils/request/types.ts
@@ -18,10 +18,19 @@ export interface MutationRoute<TData> extends RouteBase<TData> {
 
 export type Route<TData> = QueryRoute<TData> | MutationRoute<TData>;
 
-export interface RequestOptions {
+export interface RequestResult<TData> {
+  res: Response | undefined;
+  data: TData | undefined;
+  error: undefined | Record<string, unknown>;
+}
+
+export interface RequestOptions<TData = unknown> {
   query?: QueryParams;
   body?: object;
   pathParams?: Record<string, string>;
+  onResponse?: (res: RequestResult<TData>) => void;
+  silent?: boolean;
+  reattempts?: number;
 }
 
 export interface PaginatedResponse<TItem> {
diff --git a/src/Utils/request/useQuery.ts b/src/Utils/request/useQuery.ts
index e459a579e3e..a370b909fe9 100644
--- a/src/Utils/request/useQuery.ts
+++ b/src/Utils/request/useQuery.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { QueryRoute, RequestOptions } from "./types";
+import { QueryRoute, RequestOptions, RequestResult } from "./types";
 import request from "./request";
 import { mergeRequestOptions } from "./utils";
 
@@ -12,9 +12,7 @@ export default function useQuery<TData>(
   route: QueryRoute<TData>,
   options?: QueryOptions
 ) {
-  const [res, setRes] = useState<Response>();
-  const [data, setData] = useState<TData>();
-  const [error, setError] = useState<any>();
+  const [response, setResponse] = useState<RequestResult<TData>>();
   const [loading, setLoading] = useState(false);
 
   const controllerRef = useRef<AbortController>();
@@ -32,20 +30,8 @@ export default function useQuery<TData>(
           : options;
 
       setLoading(true);
-
-      try {
-        const { res, data } = await request<TData>(route, resolvedOptions);
-
-        setRes(res);
-        setData(res.ok ? data : undefined);
-        setError(res.ok ? undefined : data);
-      } catch (error) {
-        console.error(error);
-        setData(undefined);
-        setError(error);
-      } finally {
-        setLoading(false);
-      }
+      setResponse(await request(route, resolvedOptions));
+      setLoading(false);
     },
     [route, JSON.stringify(options)]
   );
@@ -66,5 +52,5 @@ export default function useQuery<TData>(
     }
   }, [runQuery, options?.refetchOnWindowFocus]);
 
-  return { res, data, error, loading, refetch: runQuery };
+  return { ...response, loading, refetch: runQuery };
 }
diff --git a/src/Utils/request/utils.ts b/src/Utils/request/utils.ts
index 21236a8145f..5a4fb7e2b2e 100644
--- a/src/Utils/request/utils.ts
+++ b/src/Utils/request/utils.ts
@@ -74,8 +74,17 @@ export function mergeRequestOptions(
   overrides: RequestOptions
 ): RequestOptions {
   return {
+    ...options,
+    ...overrides,
+
     query: { ...options.query, ...overrides.query },
     body: { ...options.body, ...overrides.body },
     pathParams: { ...options.pathParams, ...overrides.pathParams },
+
+    onResponse: (res) => {
+      options.onResponse?.(res);
+      overrides.onResponse?.(res);
+    },
+    silent: overrides.silent || options.silent,
   };
 }

From 35de3f107c1432acaa4481572a191fa6714b8869 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Thu, 21 Sep 2023 10:50:09 +0530
Subject: [PATCH 05/16] Added documentation on `request` and `useQuery` (#6315)

---
 src/Utils/request/README.md | 142 ++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 src/Utils/request/README.md

diff --git a/src/Utils/request/README.md b/src/Utils/request/README.md
new file mode 100644
index 00000000000..a9948d48f41
--- /dev/null
+++ b/src/Utils/request/README.md
@@ -0,0 +1,142 @@
+# CARE's data fetching utilities: `useQuery` and `request`
+
+There are two main ways to fetch data in CARE: `useQuery` and `request`. Both of these utilities are built on top of [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
+
+## `useQuery`
+
+`useQuery` is a React hook that allows you to fetch data and automatically update the UI when the data changes. It is
+a wrapper around `request` that is designed to be used in React components. Only "GET" requests are supported with `useQuery`. For other request methods (mutations), use `request`.
+
+### Usage
+
+```jsx
+import { useQuery } from "@care/request";
+import FooRoutes from "@foo/routes";
+
+export default function FooDetails({ children, id }) {
+  const { res, data, loading, error } = useQuery(FooRoutes.getFoo, {
+    pathParams: { id },
+  });
+
+  /* 🪄 Here typeof data is automatically inferred from the specified route. */
+
+  if (loading) return <Loading />;
+
+  if (res.status === 403) {
+    navigate("/forbidden");
+    return null;
+  }
+
+  if (error) {
+    return <Error error={error} />;
+  }
+
+  return (
+    <div>
+      <span>{data.id}</span>
+      <span>{data.name}</span>
+    </div>
+  );
+}
+```
+
+### API
+
+```ts
+useQuery(route: Route, options?: QueryOptions): ReturnType<useQuery>;
+```
+
+#### `route`
+
+A route object that specifies the endpoint to fetch data from.
+
+```ts
+const FooRoutes = {
+  getFoo: {
+    path: "/api/v1/foo/{id}/",  // 👈 The path to the endpoint. Slug parameters can be specified using curly braces.
+
+    method: "GET",              // 👈 The HTTP method to use. Optional; defaults to "GET".
+    TRes: Res<Foo()>,           // 👈 The type of the response body (for type inference).
+    noAuth: true,               // 👈 Whether to skip adding the Authorization header to the request.
+  },
+} as const; // 👈 This is important for type inference to work properly.
+```
+
+#### `options`
+
+An object that specifies options for the request.
+
+```ts
+const options = {
+  prefetch: true,               // 👈 Whether to prefetch the data when the component mounts.
+  refetchOnWindowFocus: true,   // 👈 Whether to refetch the data when the window regains focus.
+
+  // The following options are passed directly to the underlying `request` function.
+
+  pathParams: { id: "123" },    // 👈 The slug parameters to use in the path.
+  // If you accidentally forget to specify a slug parameter an error will be 
+  // thrown before the request is made.
+
+  query: { limit: 10 },         // 👈 The query parameters to be added to the request URL.
+  body: { name: "foo" },        // 👈 The body to be sent with the request.
+  headers: { "X-Foo": "bar" },  // 👈 Additional headers to be sent with the request. (Coming soon...)
+
+  silent: true,                 // 👈 Whether to suppress notifications for this request.
+  // This is useful for requests that are made in the background.
+
+  reattempts: 3,                // 👈 The number of times to retry the request if it fails.
+  // Reattempts are only made if the request fails due to a network error. Responses with
+  // status codes in the 400s and 500s are not retried.
+
+  onResponse: (res) => {        // 👈 An optional callback that is called after the response is received.
+    if (res.status === 403) {
+      navigate("/forbidden");
+    }
+  },
+  // This is useful for handling responses with status codes in the 400s and 500s for a specific request.
+};
+```
+
+#### `ReturnType<useQuery>`
+
+The `useQuery` hook returns an object with the following properties:
+
+```ts
+{
+  res: Res<TRes> | undefined;   // 👈 The response object. `undefined` if the request has not been made yet.
+  
+  data: TRes | null;            // 👈 The response body. `null` if the request has not been made yet.
+
+  error: any;                   // 👈 The error that occurred while making the request if any.
+
+  loading: boolean;             // 👈 Whether the request is currently in progress.
+
+  refetch: () => void;          // 👈 A function that can be called to refetch the data. 
+  // Ideal for revalidating stale data after a mutation.
+}
+```
+
+## `request`
+
+`request` is a function that allows you to fetch data. It is a wrapper around `fetch` that adds some useful features. It can be used in both React components and non-React code. For fetching data in React components, prefer using `useQuery`. For mutations, use `request`.
+
+### `request` usage
+
+```ts
+import { request } from "@care/request";
+import FooRoutes from "@foo/routes";
+
+export default async function updateFoo(id: string, object: Foo) {
+  const { res, data } = await request(FooRoutes.updateFoo, {
+    pathParams: { id },
+    body: object,               // 👈 The body is automatically serialized to JSON.
+  });
+
+  if (res.status === 403) {
+    navigate("/forbidden");
+    return null;
+  }
+
+  return data;
+}
+```

From 5009a86abfb96e9b21f8371635176e4c3f73c5a7 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Thu, 21 Sep 2023 11:24:21 +0530
Subject: [PATCH 06/16] Prescriptions: Shrink discontinued prescriptions + Flip
 MAR timeline + Freeze primary columns in horizontal scroll (#6282)

* MAR Table: reverse adm. intervals (#6177)

* MAR Table: freeze columns (fixes #6177)

* MAR Table: shrink discontinued medicines (#6151)

* MAR Table: fix column freeze

* fix discontinued button alignment

* fix reversed slots and improper snapping

* fix mobile responsiveness
---
 src/Common/hooks/useRangePagination.ts        |  32 ++-
 .../PrescriptionAdministrationsTable.tsx      | 266 +++++++++++-------
 src/Redux/actions.tsx                         |   2 +-
 3 files changed, 180 insertions(+), 120 deletions(-)

diff --git a/src/Common/hooks/useRangePagination.ts b/src/Common/hooks/useRangePagination.ts
index 7652ae546c1..e6bbe9f573e 100644
--- a/src/Common/hooks/useRangePagination.ts
+++ b/src/Common/hooks/useRangePagination.ts
@@ -9,17 +9,18 @@ interface Props {
   bounds: DateRange;
   perPage: number;
   slots?: number;
-  defaultEnd?: boolean;
+  snapToLatest?: boolean;
+  reverse?: boolean;
 }
 
 const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
   const [currentRange, setCurrentRange] = useState(
-    getInitialBounds(bounds, perPage, props.defaultEnd)
+    getInitialBounds(bounds, perPage, props.snapToLatest)
   );
 
   useEffect(() => {
-    setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
-  }, [bounds, perPage, props.defaultEnd]);
+    setCurrentRange(getInitialBounds(bounds, perPage, props.snapToLatest));
+  }, [bounds, perPage, props.snapToLatest]);
 
   const next = () => {
     const { end } = currentRange;
@@ -62,17 +63,24 @@ const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
     }
 
     const slots: DateRange[] = [];
-    const { start } = currentRange;
+    const { start, end } = currentRange;
     const delta = perPage / props.slots;
 
     for (let i = 0; i < props.slots; i++) {
-      slots.push({
-        start: new Date(start.valueOf() + delta * i),
-        end: new Date(start.valueOf() + delta * (i + 1)),
-      });
+      if (props.snapToLatest) {
+        slots.push({
+          start: new Date(end.valueOf() - delta * (i - 1)),
+          end: new Date(end.valueOf() - delta * i),
+        });
+      } else {
+        slots.push({
+          start: new Date(start.valueOf() + delta * i),
+          end: new Date(start.valueOf() + delta * (i + 1)),
+        });
+      }
     }
 
-    return slots;
+    return props.reverse ? slots.reverse() : slots;
   }, [currentRange, props.slots, perPage]);
 
   return {
@@ -90,7 +98,7 @@ export default useRangePagination;
 const getInitialBounds = (
   bounds: DateRange,
   perPage: number,
-  defaultEnd?: boolean
+  snapToLatest?: boolean
 ) => {
   const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
 
@@ -98,7 +106,7 @@ const getInitialBounds = (
     return bounds;
   }
 
-  if (defaultEnd) {
+  if (snapToLatest) {
     return {
       start: new Date(bounds.end.valueOf() - perPage),
       end: bounds.end,
diff --git a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
index 81282126d7c..470caa1042b 100644
--- a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
+++ b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
@@ -47,6 +47,10 @@ export default function PrescriptionAdministrationsTable({
   const { t } = useTranslation();
 
   const [state, setState] = useState<State>();
+
+  const [showDiscontinued, setShowDiscontinued] = useState(false);
+  const [discontinuedCount, setDiscontinuedCount] = useState<number>();
+
   const pagination = useRangePagination({
     bounds: state?.administrationsTimeBounds ?? {
       start: new Date(),
@@ -54,7 +58,8 @@ export default function PrescriptionAdministrationsTable({
     },
     perPage: 24 * 60 * 60 * 1000,
     slots: 24,
-    defaultEnd: true,
+    snapToLatest: true,
+    reverse: true,
   });
   const [showBulkAdminister, setShowBulkAdminister] = useState(false);
 
@@ -64,8 +69,13 @@ export default function PrescriptionAdministrationsTable({
   );
 
   const refetch = useCallback(async () => {
+    const filters = {
+      is_prn: prn,
+      prescription_type: "REGULAR",
+    };
+
     const res = await dispatch(
-      list({ is_prn: prn, prescription_type: "REGULAR" })
+      list(showDiscontinued ? filters : { ...filters, discontinued: false })
     );
 
     setState({
@@ -74,7 +84,14 @@ export default function PrescriptionAdministrationsTable({
       ),
       administrationsTimeBounds: getAdministrationBounds(res.data.results),
     });
-  }, [consultation_id, dispatch]);
+
+    if (showDiscontinued === false) {
+      const discontinuedRes = await dispatch(
+        list({ ...filters, discontinued: true, limit: 0 })
+      );
+      setDiscontinuedCount(discontinuedRes.data.count);
+    }
+  }, [consultation_id, showDiscontinued, dispatch]);
 
   useEffect(() => {
     refetch();
@@ -141,17 +158,22 @@ export default function PrescriptionAdministrationsTable({
         }
       />
 
-      <div className="overflow-x-auto rounded border border-white shadow">
-        <table className="w-full overflow-x-scroll whitespace-nowrap rounded">
+      <div className="relative overflow-x-auto rounded border border-white shadow">
+        <table className="w-full whitespace-nowrap rounded">
           <thead className="bg-white text-xs font-medium text-black">
             <tr>
-              <th className="py-3 pl-4 text-left text-sm">{t("medicine")}</th>
-
-              <th className="px-2 text-center leading-none">
-                <p>Dosage &</p>
-                <p>
-                  {!state?.prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}
-                </p>
+              <th className="sticky left-0 z-10 bg-white py-3 pl-4 text-left">
+                <div className="flex justify-between gap-2">
+                  <span className="text-sm">{t("medicine")}</span>
+                  <span className="hidden px-2 text-center text-xs leading-none lg:block">
+                    <p>Dosage &</p>
+                    <p>
+                      {!state?.prescriptions[0]?.is_prn
+                        ? "Frequency"
+                        : "Indicator"}
+                    </p>
+                  </span>
+                </div>
               </th>
 
               <th>
@@ -162,8 +184,10 @@ export default function PrescriptionAdministrationsTable({
                   border
                   className="mx-2 px-1"
                   variant="secondary"
-                  disabled={!pagination.hasPrevious}
-                  onClick={pagination.previous}
+                  disabled={!pagination.hasNext}
+                  onClick={pagination.next}
+                  tooltip="Next 24 hours"
+                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
                 >
                   <CareIcon icon="l-angle-left-b" className="text-base" />
                 </ButtonV2>
@@ -177,24 +201,26 @@ export default function PrescriptionAdministrationsTable({
                       <p className="h-4 w-6 animate-pulse rounded bg-gray-500" />
                     </th>
                   ))
-                : pagination.slots?.map(({ start, end }, index) => (
-                    <th
-                      className="tooltip px-0.5 py-2 text-center font-semibold leading-none text-gray-900"
-                      key={index}
-                    >
-                      <p>{formatDateTime(start, "DD/MM")}</p>
-                      <p>{formatDateTime(start, "HH:mm")}</p>
-
-                      <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs font-normal">
-                        Administration(s) between
-                        <br />
-                        <strong>{formatTime(start)}</strong> and{" "}
-                        <strong>{formatTime(end)}</strong>
-                        <br />
-                        on <strong>{formatDate(start)}</strong>
-                      </span>
-                    </th>
-                  ))}
+                : pagination.slots
+                    ?.map(({ start, end }, index) => (
+                      <th
+                        className="tooltip px-0.5 py-2 text-center font-semibold leading-none text-gray-900"
+                        key={index}
+                      >
+                        <p>{formatDateTime(end, "DD/MM")}</p>
+                        <p>{formatDateTime(end, "HH:mm")}</p>
+
+                        <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs font-normal">
+                          Administration(s) between
+                          <br />
+                          <strong>{formatTime(start)}</strong> and{" "}
+                          <strong>{formatTime(end)}</strong>
+                          <br />
+                          on <strong>{formatDate(start)}</strong>
+                        </span>
+                      </th>
+                    ))
+                    .reverse()}
               <th>
                 <ButtonV2
                   size="small"
@@ -203,8 +229,10 @@ export default function PrescriptionAdministrationsTable({
                   border
                   className="mx-2 px-1"
                   variant="secondary"
-                  disabled={!pagination.hasNext}
-                  onClick={pagination.next}
+                  disabled={!pagination.hasPrevious}
+                  onClick={pagination.previous}
+                  tooltip="Previous 24 hours"
+                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
                 >
                   <CareIcon icon="l-angle-right-b" className="text-base" />
                 </ButtonV2>
@@ -227,6 +255,23 @@ export default function PrescriptionAdministrationsTable({
           </tbody>
         </table>
 
+        {showDiscontinued === false && !!discontinuedCount && (
+          <ButtonV2
+            variant="secondary"
+            className="sticky left-0 z-10 w-full"
+            ghost
+            onClick={() => setShowDiscontinued(true)}
+          >
+            <span className="flex w-full justify-start gap-1 text-sm">
+              <CareIcon icon="l-eye" className="text-lg" />
+              <span>
+                Show <strong>{discontinuedCount}</strong> other discontinued
+                prescription(s)
+              </span>
+            </span>
+          </ButtonV2>
+        )}
+
         {state?.prescriptions.length === 0 && (
           <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
             <CareIcon className="care-l-tablets text-5xl" />
@@ -283,12 +328,7 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
   }, [prescription.id, dispatch, props.intervals]);
 
   return (
-    <tr
-      className={classNames(
-        "border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
-        // prescription.discontinued && "opacity-60"
-      )}
-    >
+    <>
       {showDiscontinue && (
         <DiscontinuePrescription
           prescription={prescription}
@@ -356,77 +396,89 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
           </div>
         </DialogModal>
       )}
-      <td
-        className="cursor-pointer py-3 pl-4 text-left"
-        onClick={() => setShowDetails(true)}
+      <tr
+        className={classNames(
+          "group border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
+          // prescription.discontinued && "opacity-60"
+        )}
       >
-        <div className="flex items-center gap-2">
-          <span
-            className={classNames(
-              "text-sm font-semibold",
-              prescription.discontinued ? "text-gray-700" : "text-gray-900"
-            )}
-          >
-            {prescription.medicine_object?.name ?? prescription.medicine_old}
-          </span>
+        <td
+          className="sticky left-0 z-10 cursor-pointer bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
+          onClick={() => setShowDetails(true)}
+        >
+          <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
+            <div className="flex items-center gap-2">
+              <span
+                className={classNames(
+                  "text-sm font-semibold",
+                  prescription.discontinued ? "text-gray-700" : "text-gray-900"
+                )}
+              >
+                {prescription.medicine_object?.name ??
+                  prescription.medicine_old}
+              </span>
 
-          {prescription.discontinued && (
-            <span className="rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700">
-              {t("discontinued")}
-            </span>
-          )}
+              {prescription.discontinued && (
+                <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
+                  {t("discontinued")}
+                </span>
+              )}
 
-          {prescription.route && (
-            <span className="rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700">
-              {t(prescription.route)}
-            </span>
-          )}
-        </div>
-      </td>
-
-      <td className="text-center text-xs font-semibold text-gray-900">
-        <p>{prescription.dosage}</p>
-        <p>
-          {!prescription.is_prn
-            ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
-            : prescription.indicator}
-        </p>
-      </td>
-
-      <td />
-      {/* Administration Cells */}
-      {props.intervals.map(({ start, end }, index) => (
-        <td className="text-center" key={index}>
-          {administrations === undefined ? (
-            <CareIcon
-              icon="l-spinner"
-              className="animate-spin text-lg text-gray-500"
-            />
-          ) : (
-            <AdministrationCell
-              administrations={administrations}
-              interval={{ start, end }}
-              prescription={prescription}
-            />
-          )}
+              {prescription.route && (
+                <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
+                  {t(prescription.route)}
+                </span>
+              )}
+            </div>
+
+            <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
+              <p>{prescription.dosage}</p>
+              <p>
+                {!prescription.is_prn
+                  ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
+                  : prescription.indicator}
+              </p>
+            </div>
+          </div>
         </td>
-      ))}
-      <td />
-
-      {/* Action Buttons */}
-      <td className="space-x-1 pr-2 text-right">
-        <ButtonV2
-          type="button"
-          size="small"
-          disabled={prescription.discontinued}
-          ghost
-          border
-          onClick={() => setShowAdminister(true)}
-        >
-          {t("administer")}
-        </ButtonV2>
-      </td>
-    </tr>
+
+        <td />
+        {/* Administration Cells */}
+        {props.intervals
+          .map(({ start, end }, index) => (
+            <td className="text-center" key={index}>
+              {administrations === undefined ? (
+                <CareIcon
+                  icon="l-spinner"
+                  className="animate-spin text-lg text-gray-500"
+                />
+              ) : (
+                <AdministrationCell
+                  administrations={administrations}
+                  interval={{ start, end }}
+                  prescription={prescription}
+                />
+              )}
+            </td>
+          ))
+          .reverse()}
+        <td />
+
+        {/* Action Buttons */}
+        <td className="space-x-1 pr-2 text-right">
+          <ButtonV2
+            type="button"
+            size="small"
+            disabled={prescription.discontinued}
+            ghost
+            border
+            onClick={() => setShowAdminister(true)}
+          >
+            {t("administer")}
+          </ButtonV2>
+        </td>
+      </tr>
+    </>
   );
 };
 
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
index 6e0d91fc59d..1a5bd7e4fb1 100644
--- a/src/Redux/actions.tsx
+++ b/src/Redux/actions.tsx
@@ -1003,7 +1003,7 @@ export const PrescriptionActions = (consultation_external_id: string) => {
   const pathParams = { consultation_external_id };
 
   return {
-    list: (query?: Partial<Prescription>) => {
+    list: (query?: Record<string, string | boolean | number>) => {
       let altKey;
       if (query?.is_prn !== undefined) {
         altKey = query?.is_prn

From f4bddb950bc0ce8b6af631373c56d34ce4d60acb Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:31:56 +0530
Subject: [PATCH 07/16] Fix action field in consultation form (#6314)

---
 src/Components/Facility/ConsultationForm.tsx | 111 +++++++++----------
 1 file changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index ca2301b5964..6c7e8a6760e 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -97,7 +97,7 @@ type FormDetails = {
   procedure: ProcedureType[];
   investigation: InvestigationType[];
   is_telemedicine: BooleanStrings;
-  action?: string;
+  action?: number;
   assigned_to: string;
   assigned_to_object: UserModel | null;
   special_instruction: string;
@@ -143,7 +143,7 @@ const initForm: FormDetails = {
   procedure: [],
   investigation: [],
   is_telemedicine: "false",
-  action: "NO_ACTION",
+  action: 10,
   assigned_to: "",
   assigned_to_object: null,
   special_instruction: "",
@@ -279,15 +279,14 @@ export const ConsultationForm = (props: any) => {
         setIsLoading(true);
         const res = await dispatchAction(getPatient({ id: patientId }));
         if (res.data) {
-          setPatientName(res.data.name);
-          setFacilityName(res.data.facility_object.name);
           if (isUpdate) {
-            const form = { ...state.form };
-            form.action = TELEMEDICINE_ACTIONS.find(
-              (a) => a.id === res.data.action
-            )?.text;
-            dispatch({ type: "set_form", form });
+            dispatch({
+              type: "set_form",
+              form: { ...state.form, action: res.data.action },
+            });
           }
+          setPatientName(res.data.name);
+          setFacilityName(res.data.facility_object.name);
         }
       } else {
         setPatientName("");
@@ -302,6 +301,49 @@ export const ConsultationForm = (props: any) => {
     !!state.form.symptoms.length && !state.form.symptoms.includes(1);
   const isOtherSymptomsSelected = state.form.symptoms.includes(9);
 
+  const handleFormFieldChange: FieldChangeEventHandler<unknown> = (event) => {
+    if (event.name === "consultation_status" && event.value === "1") {
+      dispatch({
+        type: "set_form",
+        form: {
+          ...state.form,
+          consultation_status: 1,
+          symptoms: [1],
+          symptoms_onset_date: new Date(),
+          category: "Critical",
+          suggestion: "DD",
+        },
+      });
+    } else if (event.name === "suggestion" && event.value === "DD") {
+      dispatch({
+        type: "set_form",
+        form: {
+          ...state.form,
+          suggestion: "DD",
+          consultation_notes: "Patient declared dead",
+          verified_by: "Declared Dead",
+        },
+      });
+    } else if (
+      event.name === "icd11_diagnoses_object" ||
+      event.name === "icd11_provisional_diagnoses_object"
+    ) {
+      dispatch({
+        type: "set_form",
+        form: {
+          ...state.form,
+          [event.name]: event.value,
+          icd11_principal_diagnosis: undefined,
+        },
+      });
+    } else {
+      dispatch({
+        type: "set_form",
+        form: { ...state.form, [event.name]: event.value },
+      });
+    }
+  };
+
   const fetchData = useCallback(
     async (status: statusType) => {
       if (!patientId) setIsLoading(true);
@@ -352,7 +394,7 @@ export const ConsultationForm = (props: any) => {
             death_confirmed_doctor: res.data?.death_confirmed_doctor || "",
             InvestigationAdvice: res.data.investigation,
           };
-          dispatch({ type: "set_form", form: formData });
+          dispatch({ type: "set_form", form: { ...state.form, ...formData } });
           setBed(formData.bed);
 
           if (res.data.last_daily_round) {
@@ -364,7 +406,7 @@ export const ConsultationForm = (props: any) => {
         setIsLoading(false);
       }
     },
-    [dispatchAction, id]
+    [dispatchAction, id, patientName, patientId]
   );
 
   useAbortableEffect(
@@ -745,49 +787,6 @@ export const ConsultationForm = (props: any) => {
     }
   };
 
-  const handleFormFieldChange: FieldChangeEventHandler<unknown> = (event) => {
-    if (event.name === "consultation_status" && event.value === "1") {
-      dispatch({
-        type: "set_form",
-        form: {
-          ...state.form,
-          consultation_status: 1,
-          symptoms: [1],
-          symptoms_onset_date: new Date(),
-          category: "Critical",
-          suggestion: "DD",
-        },
-      });
-    } else if (event.name === "suggestion" && event.value === "DD") {
-      dispatch({
-        type: "set_form",
-        form: {
-          ...state.form,
-          suggestion: "DD",
-          consultation_notes: "Patient declared dead",
-          verified_by: "Declared Dead",
-        },
-      });
-    } else if (
-      event.name === "icd11_diagnoses_object" ||
-      event.name === "icd11_provisional_diagnoses_object"
-    ) {
-      dispatch({
-        type: "set_form",
-        form: {
-          ...state.form,
-          [event.name]: event.value,
-          icd11_principal_diagnosis: undefined,
-        },
-      });
-    } else {
-      dispatch({
-        type: "set_form",
-        form: { ...state.form, [event.name]: event.value },
-      });
-    }
-  };
-
   const handleDoctorSelect = (event: FieldChangeEvent<UserModel | null>) => {
     if (event.value?.id) {
       dispatch({
@@ -1347,12 +1346,12 @@ export const ConsultationForm = (props: any) => {
                             </div>
                             <div className="flex-1" ref={fieldRef["action"]}>
                               <SelectFormField
-                                {...field("action")}
+                                {...selectField("action")}
                                 label="Action"
                                 position="above"
                                 options={TELEMEDICINE_ACTIONS}
                                 optionLabel={(option) => option.desc}
-                                optionValue={(option) => option.text}
+                                optionDescription={() => ""}
                               />
                             </div>
                           </div>

From c0f0e4b0e4beaf2c7093667be80b7cd71efa8323 Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <70687348+Pranshu1902@users.noreply.github.com>
Date: Thu, 21 Sep 2023 19:54:42 +0530
Subject: [PATCH 08/16] fix loader (#6204)

Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
---
 src/Components/Patient/PatientNotes.tsx | 111 ++++++++++++------------
 1 file changed, 56 insertions(+), 55 deletions(-)

diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
index b7993ed1ea3..68a5ab4dc5d 100644
--- a/src/Components/Patient/PatientNotes.tsx
+++ b/src/Components/Patient/PatientNotes.tsx
@@ -101,10 +101,6 @@ const PatientNotes = (props: PatientNotesProps) => {
     });
   };
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
     <div className="flex w-full flex-col">
       <PageTitle
@@ -119,6 +115,7 @@ const PatientNotes = (props: PatientNotesProps) => {
       <h3 className="pl-10 text-lg">Add new notes</h3>
       <textarea
         rows={3}
+        value={noteField}
         placeholder="Type your Note"
         className="mx-10 my-4 rounded-lg border border-gray-500 p-4 focus:border-primary-500 focus:outline-none focus:ring-primary-500"
         onChange={(e) => setNoteField(e.target.value)}
@@ -132,66 +129,70 @@ const PatientNotes = (props: PatientNotesProps) => {
           Post Your Note
         </ButtonV2>
       </div>
-      <div className="px-10 py-5">
-        <h3 className="text-lg">Added Notes</h3>
-        <div className="w-full">
-          {state.notes.length ? (
-            state.notes.map((note: any) => (
-              <div
-                key={note.id}
-                className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
-              >
-                <span className="whitespace-pre-wrap break-words">
-                  {note.note}
-                </span>
-                <div className="mt-3">
-                  <span className="text-xs text-gray-500">
-                    {formatDateTime(note.created_date) || "-"}
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <div className="px-10 py-5">
+          <h3 className="text-lg">Added Notes</h3>
+          <div className="w-full">
+            {state.notes.length ? (
+              state.notes.map((note: any) => (
+                <div
+                  key={note.id}
+                  className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+                >
+                  <span className="whitespace-pre-wrap break-words">
+                    {note.note}
                   </span>
-                </div>
-
-                <div className="space-y-2 sm:flex sm:space-y-0">
-                  <div className="mr-2 inline-flex w-full items-center justify-center rounded-md border bg-gray-100 py-1 pl-2 pr-3 md:w-auto">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full">
-                      <i className="fas fa-user" />
-                    </div>
-                    <span className="text-sm text-gray-700">
-                      {note.created_by_object?.first_name || "Unknown"}{" "}
-                      {note.created_by_object?.last_name}
+                  <div className="mt-3">
+                    <span className="text-xs text-gray-500">
+                      {formatDateTime(note.created_date) || "-"}
                     </span>
                   </div>
 
-                  <div
-                    className="inline-flex w-full cursor-pointer items-center justify-center rounded-md border bg-gray-100 py-1 pl-2 pr-3 md:w-auto"
-                    onClick={() => navigate(`/facility/${note.facility?.id}`)}
-                  >
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full">
-                      <i className="fas fa-hospital" />
+                  <div className="space-y-2 sm:flex sm:space-y-0">
+                    <div className="mr-2 inline-flex w-full items-center justify-center rounded-md border bg-gray-100 py-1 pl-2 pr-3 md:w-auto">
+                      <div className="flex h-8 w-8 items-center justify-center rounded-full">
+                        <i className="fas fa-user" />
+                      </div>
+                      <span className="text-sm text-gray-700">
+                        {note.created_by_object?.first_name || "Unknown"}{" "}
+                        {note.created_by_object?.last_name}
+                      </span>
+                    </div>
+
+                    <div
+                      className="inline-flex w-full cursor-pointer items-center justify-center rounded-md border bg-gray-100 py-1 pl-2 pr-3 md:w-auto"
+                      onClick={() => navigate(`/facility/${note.facility?.id}`)}
+                    >
+                      <div className="flex h-8 w-8 items-center justify-center rounded-full">
+                        <i className="fas fa-hospital" />
+                      </div>
+                      <span className="text-sm text-gray-700">
+                        {note.facility?.name || "Unknown"}
+                      </span>
                     </div>
-                    <span className="text-sm text-gray-700">
-                      {note.facility?.name || "Unknown"}
-                    </span>
                   </div>
                 </div>
+              ))
+            ) : (
+              <div className="mt-2 flex items-center justify-center text-2xl font-bold text-gray-500">
+                No Notes Found
               </div>
-            ))
-          ) : (
-            <div className="mt-2 flex items-center justify-center text-2xl font-bold text-gray-500">
-              No Notes Found
-            </div>
-          )}
-          {state.count > pageSize && (
-            <div className="mt-4 flex w-full justify-center">
-              <Pagination
-                data={{ totalCount: state.count }}
-                onChange={handlePagination}
-                defaultPerPage={pageSize}
-                cPage={state.cPage}
-              />
-            </div>
-          )}
+            )}
+            {state.count > pageSize && (
+              <div className="mt-4 flex w-full justify-center">
+                <Pagination
+                  data={{ totalCount: state.count }}
+                  onChange={handlePagination}
+                  defaultPerPage={pageSize}
+                  cPage={state.cPage}
+                />
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

From fee064833df4334a2021e327490cf915d2b261a5 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 22 Sep 2023 19:26:37 +0530
Subject: [PATCH 09/16] Asset Configure: Migrate `useDispatch` to use
 `useQuery` (inherently fixes camera not reloading on configure saved) (#6327)

* Fix camera view not reloading on configuration save

* minor code cleanup

* minor code cleanup
---
 src/Components/Assets/AssetConfigure.tsx      | 65 ++++++-------------
 .../Assets/AssetType/ONVIFCamera.tsx          | 18 ++---
 src/Redux/api.tsx                             |  2 +
 3 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 7099f911463..fd431ae35ea 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -1,60 +1,32 @@
-import { useCallback, useState } from "react";
 import Loading from "../Common/Loading";
-import { AssetData } from "./AssetTypes";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { useDispatch } from "react-redux";
-import { getAsset } from "../../Redux/actions";
-import * as Notification from "../../Utils/Notifications.js";
 import HL7Monitor from "./AssetType/HL7Monitor";
 import ONVIFCamera from "./AssetType/ONVIFCamera";
 import Page from "../Common/components/Page";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 interface AssetConfigureProps {
   assetId: string;
   facilityId: string;
 }
 
-const AssetConfigure = (props: AssetConfigureProps) => {
-  const { assetId, facilityId } = props;
-  const [asset, setAsset] = useState<AssetData>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [assetType, setAssetType] = useState("");
-  const dispatch = useDispatch<any>();
+const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
+  const {
+    data: asset,
+    loading,
+    refetch,
+  } = useQuery(routes.getAsset, { pathParams: { external_id: assetId } });
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const [assetData]: any = await Promise.all([dispatch(getAsset(assetId))]);
-      if (!status.aborted) {
-        setIsLoading(false);
-        if (!assetData.data)
-          Notification.Error({
-            msg: "Something went wrong..!",
-          });
-        else {
-          setAsset(assetData.data);
-          setAssetType(assetData.data.asset_class);
-        }
-      }
-    },
-    [dispatch, assetId]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData]
-  );
-
-  if (isLoading) return <Loading />;
+  if (loading || !asset) {
+    return <Loading />;
+  }
 
-  if (assetType === "HL7MONITOR") {
+  if (asset.asset_class === "HL7MONITOR") {
     return (
       <Page
-        title={`Configure HL7 Monitor: ${asset?.name}`}
+        title={`Configure HL7 Monitor: ${asset.name}`}
         crumbsReplacements={{
-          [facilityId]: { name: asset?.location_object.facility.name },
+          [facilityId]: { name: asset.location_object.facility.name },
           assets: { uri: `/assets?facility=${facilityId}` },
           [assetId]: { name: asset?.name },
         }}
@@ -65,7 +37,7 @@ const AssetConfigure = (props: AssetConfigureProps) => {
     );
   }
 
-  if (assetType === "VENTILATOR") {
+  if (asset.asset_class === "VENTILATOR") {
     return (
       <Page
         title={`Configure Ventilator: ${asset?.name}`}
@@ -91,7 +63,12 @@ const AssetConfigure = (props: AssetConfigureProps) => {
       }}
       backUrl={`/facility/${facilityId}/assets/${assetId}`}
     >
-      <ONVIFCamera asset={asset} assetId={assetId} facilityId={facilityId} />
+      <ONVIFCamera
+        asset={asset}
+        assetId={assetId}
+        facilityId={facilityId}
+        onUpdated={() => refetch()}
+      />
     </Page>
   );
 };
diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 5cb518a3855..4720c876010 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -18,14 +18,14 @@ import { Submit } from "../../Common/components/ButtonV2";
 import { SyntheticEvent } from "react";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
 
-interface ONVIFCameraProps {
+interface Props {
   assetId: string;
   facilityId: string;
   asset: any;
+  onUpdated?: () => void;
 }
 
-const ONVIFCamera = (props: ONVIFCameraProps) => {
-  const { assetId, facilityId, asset } = props;
+const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   const [isLoading, setIsLoading] = useState(true);
   const [assetType, setAssetType] = useState("");
   const [middlewareHostname, setMiddlewareHostname] = useState("");
@@ -43,7 +43,6 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
   const [refreshPresetsHash, setRefreshPresetsHash] = useState(
     Number(new Date())
   );
-  const [refreshHash, setRefreshHash] = useState(Number(new Date()));
   const dispatch = useDispatch<any>();
   const authUser = useAuthUser();
   useEffect(() => {
@@ -88,14 +87,10 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
         dispatch(partialUpdateAsset(assetId, data))
       );
       if (res?.status === 200) {
-        Notification.Success({
-          msg: "Asset Configured Successfully",
-        });
-        setRefreshHash(Number(new Date()));
+        Notification.Success({ msg: "Asset Configured Successfully" });
+        onUpdated?.();
       } else {
-        Notification.Error({
-          msg: "Something went wrong..!",
-        });
+        Notification.Error({ msg: "Something went wrong..!" });
       }
       setLoadingSetConfiguration(false);
     } else {
@@ -204,7 +199,6 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
 
       {assetType === "ONVIF" ? (
         <CameraConfigure
-          key={refreshHash}
           asset={asset as AssetData}
           bed={bed}
           setBed={setBed}
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index cb124b5bb80..8eff2594af0 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -1,4 +1,5 @@
 import { IConfig } from "../Common/hooks/useConfig";
+import { AssetData } from "../Components/Assets/AssetTypes";
 import { LocationModel } from "../Components/Facility/models";
 import { UserModel } from "../Components/Users/models";
 import { PaginatedResponse } from "../Utils/request/types";
@@ -804,6 +805,7 @@ const routes = {
   getAsset: {
     path: "/api/v1/asset/{external_id}/",
     method: "GET",
+    TRes: Res<AssetData>(),
   },
   deleteAsset: {
     path: "/api/v1/asset/{external_id}/",

From b2076e3b081b98719ed0cf1e264f7090502002b9 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 22 Sep 2023 22:06:38 +0530
Subject: [PATCH 10/16] Fix Ambulance Phone Number validation in Shifting
 (#6332)

---
 src/Components/Patient/ShiftCreate.tsx | 11 +++++++++--
 src/Utils/utils.ts                     |  2 ++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Components/Patient/ShiftCreate.tsx b/src/Components/Patient/ShiftCreate.tsx
index e8e89ebc59c..fb15039a2ea 100644
--- a/src/Components/Patient/ShiftCreate.tsx
+++ b/src/Components/Patient/ShiftCreate.tsx
@@ -145,6 +145,11 @@ export const ShiftCreate = (props: patientShiftProps) => {
           errors: action.errors,
         };
       }
+      case "set_field":
+        return {
+          form: { ...state.form, [action.name]: action.value },
+          errors: { ...state.errors, [action.name]: action.error },
+        };
       default:
         return state;
     }
@@ -188,8 +193,10 @@ export const ShiftCreate = (props: patientShiftProps) => {
 
   const handleFormFieldChange = (event: FieldChangeEvent<unknown>) => {
     dispatch({
-      type: "set_form",
-      form: { ...state.form, [event.name]: event.value },
+      type: "set_field",
+      name: event.name,
+      value: event.value,
+      error: "",
     });
   };
 
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 4c29d5105f3..1c702e75e86 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -253,6 +253,8 @@ export interface CountryData {
 }
 
 export const parsePhoneNumber = (phoneNumber: string, countryCode?: string) => {
+  if (!phoneNumber) return "";
+  if (phoneNumber === "+91") return "";
   const phoneCodes: Record<string, CountryData> = phoneCodesJson;
   let parsedNumber = phoneNumber.replace(/[-+() ]/g, "");
   if (countryCode && phoneCodes[countryCode]) {

From 9fb1a9fb8a5b19d4947cb145aaede6a44315e02d Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Mon, 25 Sep 2023 19:56:34 +0530
Subject: [PATCH 11/16] request: fix/improve typesafety of `TData` (#6324)

---
 src/Utils/request/request.ts  | 4 ++--
 src/Utils/request/useQuery.ts | 6 +++---
 src/Utils/request/utils.ts    | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Utils/request/request.ts b/src/Utils/request/request.ts
index 45c8e5ce664..c946f524ab9 100644
--- a/src/Utils/request/request.ts
+++ b/src/Utils/request/request.ts
@@ -2,7 +2,7 @@ import handleResponse from "./handleResponse";
 import { RequestOptions, RequestResult, Route } from "./types";
 import { makeHeaders, makeUrl } from "./utils";
 
-interface Options extends RequestOptions {
+interface Options<TData> extends RequestOptions<TData> {
   controller?: AbortController;
 }
 
@@ -16,7 +16,7 @@ export default async function request<TData>(
     onResponse,
     silent,
     reattempts = 3,
-  }: Options = {}
+  }: Options<TData> = {}
 ): Promise<RequestResult<TData>> {
   const signal = controller?.signal;
   const url = makeUrl(path, query, pathParams);
diff --git a/src/Utils/request/useQuery.ts b/src/Utils/request/useQuery.ts
index a370b909fe9..2a8cb2e2ad4 100644
--- a/src/Utils/request/useQuery.ts
+++ b/src/Utils/request/useQuery.ts
@@ -3,14 +3,14 @@ import { QueryRoute, RequestOptions, RequestResult } from "./types";
 import request from "./request";
 import { mergeRequestOptions } from "./utils";
 
-export interface QueryOptions extends RequestOptions {
+export interface QueryOptions<TData> extends RequestOptions<TData> {
   prefetch?: boolean;
   refetchOnWindowFocus?: boolean;
 }
 
 export default function useQuery<TData>(
   route: QueryRoute<TData>,
-  options?: QueryOptions
+  options?: QueryOptions<TData>
 ) {
   const [response, setResponse] = useState<RequestResult<TData>>();
   const [loading, setLoading] = useState(false);
@@ -18,7 +18,7 @@ export default function useQuery<TData>(
   const controllerRef = useRef<AbortController>();
 
   const runQuery = useCallback(
-    async (overrides?: QueryOptions) => {
+    async (overrides?: QueryOptions<TData>) => {
       controllerRef.current?.abort();
 
       const controller = new AbortController();
diff --git a/src/Utils/request/utils.ts b/src/Utils/request/utils.ts
index 5a4fb7e2b2e..f159df1b7a7 100644
--- a/src/Utils/request/utils.ts
+++ b/src/Utils/request/utils.ts
@@ -69,10 +69,10 @@ export function getAuthorizationHeader() {
   return null;
 }
 
-export function mergeRequestOptions(
-  options: RequestOptions,
-  overrides: RequestOptions
-): RequestOptions {
+export function mergeRequestOptions<TData>(
+  options: RequestOptions<TData>,
+  overrides: RequestOptions<TData>
+): RequestOptions<TData> {
   return {
     ...options,
     ...overrides,

From 2973d6e08d520a49b411851722c4e56a2c8abae2 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Mon, 25 Sep 2023 19:57:10 +0530
Subject: [PATCH 12/16] update icd11 model (#6343)

---
 .../Facility/ConsultationDetails/index.tsx    | 42 ++++++++-----------
 src/Components/Facility/models.tsx            |  1 -
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 356257f9ac6..c23bf071fa1 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -50,10 +50,26 @@ export interface ConsultationTabProps {
   patientData: PatientModel;
 }
 
+const TABS = {
+  UPDATES: ConsultationUpdatesTab,
+  FEED: ConsultationFeedTab,
+  SUMMARY: ConsultationSummaryTab,
+  MEDICINES: ConsultationMedicinesTab,
+  FILES: ConsultationFilesTab,
+  INVESTIGATIONS: ConsultationInvestigationsTab,
+  ABG: ConsultationABGTab,
+  NURSING: ConsultationNursingTab,
+  NEUROLOGICAL_MONITORING: ConsultationNeurologicalMonitoringTab,
+  VENTILATOR: ConsultationVentilatorTab,
+  NUTRITION: ConsultationNursingTab,
+  PRESSURE_SORE: ConsultationPressureSoreTab,
+  DIALYSIS: ConsultationDialysisTab,
+};
+
 export const ConsultationDetails = (props: any) => {
   const { t } = useTranslation();
   const { facilityId, patientId, consultationId } = props;
-  const tab = props.tab.toUpperCase();
+  const tab = props.tab.toUpperCase() as keyof typeof TABS;
   const dispatch: any = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
   const [showDoctors, setShowDoctors] = useState(false);
@@ -142,22 +158,6 @@ export const ConsultationDetails = (props: any) => {
     });
   }, []);
 
-  const TABS = {
-    UPDATES: ConsultationUpdatesTab,
-    FEED: ConsultationFeedTab,
-    SUMMARY: ConsultationSummaryTab,
-    MEDICINES: ConsultationMedicinesTab,
-    FILES: ConsultationFilesTab,
-    INVESTIGATIONS: ConsultationInvestigationsTab,
-    ABG: ConsultationABGTab,
-    NURSING: ConsultationNursingTab,
-    NEUROLOGICAL_MONITORING: ConsultationNeurologicalMonitoringTab,
-    VENTILATOR: ConsultationVentilatorTab,
-    NUTRITION: ConsultationNursingTab,
-    PRESSURE_SORE: ConsultationPressureSoreTab,
-    DIALYSIS: ConsultationDialysisTab,
-  };
-
   const consultationTabProps: ConsultationTabProps = {
     consultationId,
     facilityId,
@@ -379,13 +379,7 @@ export const ConsultationDetails = (props: any) => {
                 <ShowDiagnosis
                   diagnoses={[
                     ...(consultationData?.diagnosis
-                      ? [
-                          {
-                            id: "0",
-                            label: consultationData?.diagnosis,
-                            parentId: null,
-                          },
-                        ]
+                      ? [{ id: "0", label: consultationData?.diagnosis }]
                       : []),
                     ...(consultationData?.icd11_diagnoses_object ?? []),
                   ]}
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index cc34140e7a9..de2c6af698a 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -223,5 +223,4 @@ export interface CurrentBed {
 export type ICD11DiagnosisModel = {
   id: string;
   label: string;
-  parentId: string | null;
 };

From 0a7bee381a8fdead36526f4e72bc47e5a5be3519 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:17:19 +0530
Subject: [PATCH 13/16] Create cypress test for asset transaction and service
 history's (#6349)

* Asset page redirection

* Test for asset transaction and service history
---
 cypress/e2e/assets_spec/assets_manage.cy.ts   | 54 ++++++++++++++
 cypress/pageobject/Asset/AssetCreation.ts     | 74 +++++++++++++++++++
 .../pageobject/Facility/FacilityCreation.ts   |  2 -
 src/Components/Assets/AssetManage.tsx         | 17 ++++-
 .../Assets/AssetServiceEditModal.tsx          | 15 +++-
 .../Form/FormFields/Autocomplete.tsx          |  2 +-
 6 files changed, 155 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/assets_spec/assets_manage.cy.ts b/cypress/e2e/assets_spec/assets_manage.cy.ts
index 1f89facd0a3..34c554b374e 100644
--- a/cypress/e2e/assets_spec/assets_manage.cy.ts
+++ b/cypress/e2e/assets_spec/assets_manage.cy.ts
@@ -12,6 +12,9 @@ describe("Asset", () => {
   const assetSearchPage = new AssetSearchPage();
   const assetFilters = new AssetFilters();
   const fillFacilityName = "Dummy Facility 1";
+  const assetname = "Dummy Camera";
+  const locationName = "Dummy Location 1";
+  const initiallocationName = "Camera Location";
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();
@@ -23,6 +26,57 @@ describe("Asset", () => {
     cy.awaitUrl("/assets");
   });
 
+  it("Create & Edit a service history and verify reflection", () => {
+    assetSearchPage.typeSearchKeyword(assetname);
+    assetSearchPage.pressEnter();
+    assetSearchPage.verifyBadgeContent(assetname);
+    assetSearchPage.clickAssetByName(assetname);
+    assetPage.clickupdatedetailbutton();
+    assetPage.scrollintonotes();
+    assetPage.enterAssetNotes("Dummy Notes");
+    assetPage.enterAssetservicedate("01092023");
+    assetPage.clickassetupdatebutton();
+    assetPage.scrollintoservicehistory();
+    assetPage.clickedithistorybutton();
+    assetPage.scrollintonotes();
+    assetPage.enterAssetNotes("Dummy Notes Editted");
+    assetPage.clickassetupdatebutton();
+    assetPage.scrollintoservicehistory();
+    assetPage.viewassetservicehistorybutton();
+    assetPage.openassetservicehistory();
+    assetPage.verifyassetupdateservicehistory();
+    assetPage.viewassetservicehistorybutton();
+  });
+
+  it("Create a asset transaction and verify history", () => {
+    assetSearchPage.typeSearchKeyword(assetname);
+    assetSearchPage.pressEnter();
+    assetSearchPage.verifyBadgeContent(assetname);
+    assetSearchPage.clickAssetByName(assetname);
+    assetPage.clickupdatedetailbutton();
+    assetPage.clickassetlocation(locationName);
+    assetPage.clickUpdateAsset();
+    assetPage.verifyassetlocation(locationName);
+    assetPage.verifytransactionStatus(initiallocationName, locationName);
+  });
+
+  it("Verify Facility Asset Page Redirection", () => {
+    cy.visit("/facility");
+    assetSearchPage.typeSearchKeyword(fillFacilityName);
+    assetSearchPage.pressEnter();
+    facilityPage.verifyFacilityBadgeContent(fillFacilityName);
+    facilityPage.visitAlreadyCreatedFacility();
+    facilityPage.clickManageFacilityDropdown();
+    facilityPage.clickCreateAssetFacilityOption();
+    facilityPage.verifyfacilitycreateassetredirection();
+    facilityPage.verifyassetfacilitybackredirection();
+    facilityPage.clickManageFacilityDropdown();
+    facilityPage.clickviewAssetFacilityOption();
+    facilityPage.verifyfacilityviewassetredirection();
+    assetFilters.assertFacilityText(fillFacilityName);
+    facilityPage.verifyassetfacilitybackredirection();
+  });
+
   it("Delete an Asset", () => {
     assetPage.openCreatedAsset();
     assetPage.interceptDeleteAssetApi();
diff --git a/cypress/pageobject/Asset/AssetCreation.ts b/cypress/pageobject/Asset/AssetCreation.ts
index b939c31405f..45356a1a4e7 100644
--- a/cypress/pageobject/Asset/AssetCreation.ts
+++ b/cypress/pageobject/Asset/AssetCreation.ts
@@ -276,4 +276,78 @@ export class AssetPage {
     cy.get("#submit").contains("Import").click();
     cy.wait("@importAsset").its("response.statusCode").should("eq", 201);
   }
+
+  clickupdatedetailbutton() {
+    cy.get("[data-testid=asset-update-button]").click();
+  }
+
+  scrollintonotes() {
+    cy.get("#notes").scrollIntoView();
+  }
+
+  enterAssetNotes(text) {
+    cy.get("#notes").click().clear();
+    cy.get("#notes").click().type(text);
+  }
+
+  enterAssetservicedate(text) {
+    cy.get("input[name='last_serviced_on']").click();
+    cy.get("#date-input").click().type(text);
+  }
+
+  clickassetupdatebutton() {
+    cy.get("#submit").click();
+  }
+
+  viewassetservicehistorybutton() {
+    cy.get("#view-service-history").should("be.visible");
+  }
+
+  openassetservicehistory() {
+    cy.get("#view-service-history").click();
+    cy.get("#view-asset-edit-history").first().click();
+  }
+
+  verifyassetupdateservicehistory() {
+    cy.get("#edit-history-asset-servicedon").should("have.text", "01/09/2023");
+    cy.get("#edit-history-asset-note").should(
+      "have.text",
+      "Dummy Notes Editted"
+    );
+    cy.get("#view-history-back-button").contains("Back").click();
+    cy.get("#view-history-back-button").contains("Close").click();
+  }
+
+  scrollintoservicehistory() {
+    cy.get("#service-history").scrollIntoView();
+  }
+
+  clickedithistorybutton() {
+    cy.get("#edit-service-history").click();
+  }
+
+  verifytransactionStatus(initiallocationName: string, locationName: string) {
+    cy.get("#transaction-history").scrollIntoView();
+    cy.get("#transaction-history table tbody tr:first-child td:eq(0)").should(
+      "contain",
+      initiallocationName
+    );
+    cy.get("#transaction-history table tbody tr:first-child td:eq(1)").should(
+      "contain",
+      locationName
+    );
+  }
+
+  verifyassetlocation(locationName: string) {
+    cy.get("#asset-current-location").should("contain", locationName);
+  }
+
+  clickassetlocation(locationName: string) {
+    cy.get("#clear-button").click();
+    cy.get("[data-testid=asset-location-input] button").click();
+    cy.get("[data-testid=asset-location-input] button")
+      .click()
+      .type(locationName);
+    cy.get("[role='option']").contains(locationName).click();
+  }
 }
diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts
index 0c12d4655fd..b6285bff72b 100644
--- a/cypress/pageobject/Facility/FacilityCreation.ts
+++ b/cypress/pageobject/Facility/FacilityCreation.ts
@@ -205,9 +205,7 @@ class FacilityPage {
   }
 
   verifyfacilityviewassetredirection() {
-    cy.intercept("GET", "**api/v1/getallfacilities/**").as("getViewAssets");
     cy.url().should("include", "/assets?facility=");
-    cy.wait("@getViewAssets").its("response.statusCode").should("eq", 200);
   }
 
   clickManageInventory() {
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 4565c48b33d..84325d704aa 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -231,6 +231,7 @@ const AssetManage = (props: AssetManageProps) => {
             </td>
             <td className="gap-4 whitespace-nowrap px-6 py-4 text-left text-sm leading-5">
               <ButtonV2
+                id="edit-service-history"
                 authorizeFor={NonReadOnlyUsers}
                 onClick={() => {
                   setServiceEditData({ ...service, open: true });
@@ -240,6 +241,7 @@ const AssetManage = (props: AssetManageProps) => {
                 <CareIcon icon="l-pen" className="text-lg" />
               </ButtonV2>
               <ButtonV2
+                id="view-service-history"
                 authorizeFor={NonReadOnlyUsers}
                 tooltip={service.edits?.length < 2 ? "No previous edits" : ""}
                 tooltipClassName="tooltip-left"
@@ -296,7 +298,10 @@ const AssetManage = (props: AssetManageProps) => {
           </div>
           <div className="break-words text-gray-700">{item.label}</div>
         </div>
-        <div className="ml-8 grow-0 break-words text-lg font-semibold">
+        <div
+          className="ml-8 grow-0 break-words text-lg font-semibold"
+          id="asset-current-location"
+        >
           {item.content || "--"}
         </div>
       </div>
@@ -513,7 +518,10 @@ const AssetManage = (props: AssetManageProps) => {
         asset?.asset_class &&
         asset?.asset_class != AssetClass.NONE && <Uptime assetId={asset?.id} />}
       <div className="mb-4 mt-8 text-xl font-semibold">Service History</div>
-      <div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+      <div
+        className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
+        id="service-history"
+      >
         <table className="min-w-full divide-y divide-gray-200">
           <thead>
             <tr>
@@ -540,7 +548,10 @@ const AssetManage = (props: AssetManageProps) => {
         </table>
       </div>
       <div className="mb-4 mt-8 text-xl font-semibold">Transaction History</div>
-      <div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+      <div
+        className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
+        id="transaction-history"
+      >
         <table className="min-w-full divide-y divide-gray-200">
           <thead>
             <tr>
diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 75c9dd9fc60..66d44d11907 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -97,7 +97,10 @@ export const AssetServiceEditModal = (props: {
                       {edit.edited_by.username}
                     </p>
                   </div>
-                  <div className="flex items-center justify-center">
+                  <div
+                    className="flex items-center justify-center"
+                    id="view-asset-edit-history"
+                  >
                     <CareIcon icon="l-eye" className="text-lg" />
                   </div>
                 </div>
@@ -124,19 +127,25 @@ export const AssetServiceEditModal = (props: {
                   <p className="text-sm font-medium text-gray-500">
                     Serviced On
                   </p>
-                  <p className="text-gray-900">
+                  <p
+                    className="text-gray-900"
+                    id="edit-history-asset-servicedon"
+                  >
                     {formatDate(editRecord.serviced_on)}
                   </p>
                 </div>
                 <div className="mt-4 grow">
                   <p className="text-sm font-medium text-gray-500">Notes</p>
-                  <p className="text-gray-900">{editRecord.note || "-"}</p>
+                  <p className="text-gray-900" id="edit-history-asset-note">
+                    {editRecord.note || "-"}
+                  </p>
                 </div>
               </div>
             </div>
           )}
           <div className="flex justify-end">
             <ButtonV2
+              id="view-history-back-button"
               variant="secondary"
               onClick={() => {
                 editRecord ? setEditRecord(undefined) : props.handleClose();
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index bbc60643faf..c4b3ea3686e 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -165,7 +165,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                 <span>{value?.icon}</span>
 
                 {value && !props.isLoading && !props.required && (
-                  <div className="tooltip">
+                  <div className="tooltip" id="clear-button">
                     <CareIcon
                       className="care-l-times-circle h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
                       onClick={(e) => {

From 308379ecf566eb7c641ac384b5686db54a8b36a1 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:19:46 +0530
Subject: [PATCH 14/16] Display patient age in mm dd when younger than 1y
 (#6342)

---
 .../ConsultationUpdatesTab.tsx                |  9 +++++--
 .../Investigations/Reports/ReportTable.tsx    | 12 +++++++--
 .../Facility/Investigations/Reports/index.tsx |  5 +++-
 src/Components/Facility/LegacyMonitorCard.tsx |  3 ++-
 src/Components/Facility/TreatmentSummary.tsx  |  5 ++--
 src/Components/Patient/ManagePatients.tsx     |  6 +++--
 src/Components/Patient/PatientHome.tsx        |  9 +++++--
 src/Components/Patient/PatientInfoCard.tsx    |  4 +--
 src/Components/Patient/SampleDetails.tsx      |  4 +--
 src/Components/Shifting/ListView.tsx          |  9 +++++--
 src/Components/Shifting/ShiftDetails.tsx      | 14 +++++++---
 src/Components/Shifting/ShiftingBoard.tsx     |  9 +++++--
 src/Utils/utils.ts                            | 27 +++++++++++++++++++
 13 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 705b3d9479a..1b89f3980e1 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -10,7 +10,7 @@ import useVitalsAspectRatioConfig from "../../VitalsMonitor/useVitalsAspectRatio
 import { DISCHARGE_REASONS, SYMPTOM_CHOICES } from "../../../Common/constants";
 import PrescriptionsTable from "../../Medicine/PrescriptionsTable";
 import Chip from "../../../CAREUI/display/Chip";
-import { formatDate, formatDateTime } from "../../../Utils/utils";
+import { formatAge, formatDate, formatDateTime } from "../../../Utils/utils";
 import ReadMore from "../../Common/components/Readmore";
 import { DailyRoundsList } from "../Consultations/DailyRoundsList";
 
@@ -621,7 +621,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                 <div>
                   Age {" - "}
                   <span className="font-semibold">
-                    {props.patientData.age ?? "-"}
+                    {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
+                      ? formatAge(
+                          props.patientData.age,
+                          props.patientData.date_of_birth
+                        )
+                      : "-"}
                   </span>
                 </div>
                 <div>
diff --git a/src/Components/Facility/Investigations/Reports/ReportTable.tsx b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
index 0826ff904fc..1f20ec94180 100644
--- a/src/Components/Facility/Investigations/Reports/ReportTable.tsx
+++ b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
@@ -2,7 +2,7 @@ import { getColorIndex, rowColor, transformData } from "./utils";
 
 import ButtonV2 from "../../../Common/components/ButtonV2";
 import { InvestigationResponse } from "./types";
-import { formatDateTime } from "../../../../Utils/utils";
+import { formatAge, formatDateTime } from "../../../../Utils/utils";
 import { FC } from "react";
 
 const ReportRow = ({ data, name, min, max }: any) => {
@@ -53,6 +53,7 @@ interface ReportTableProps {
   patientDetails?: {
     name: string;
     age: number;
+    date_of_birth: string;
     hospitalName: string;
   };
   investigationData: InvestigationResponse;
@@ -83,7 +84,14 @@ const ReportTable: FC<ReportTableProps> = ({
         {patientDetails && (
           <div className="flex flex-col gap-1 p-1">
             <p>Name: {patientDetails.name}</p>
-            <p>Age: {patientDetails.age}</p>
+            <p>
+              Age:{" "}
+              {formatAge(
+                patientDetails.age,
+                patientDetails.date_of_birth,
+                true
+              )}
+            </p>
             <p>Hospital: {patientDetails.hospitalName}</p>
           </div>
         )}
diff --git a/src/Components/Facility/Investigations/Reports/index.tsx b/src/Components/Facility/Investigations/Reports/index.tsx
index c4c69bc9169..ab5380c62ca 100644
--- a/src/Components/Facility/Investigations/Reports/index.tsx
+++ b/src/Components/Facility/Investigations/Reports/index.tsx
@@ -100,8 +100,9 @@ const InvestigationReports = ({ id }: any) => {
   const [patientDetails, setPatientDetails] = useState<{
     name: string;
     age: number;
+    date_of_birth: string;
     hospitalName: string;
-  }>({ name: "", age: -1, hospitalName: "" });
+  }>({ name: "", age: -1, date_of_birth: "", hospitalName: "" });
   const [state, dispatch] = useReducer(
     investigationReportsReducer,
     initialState
@@ -220,6 +221,7 @@ const InvestigationReports = ({ id }: any) => {
           setPatientDetails({
             name: res.data.name,
             age: res.data.age,
+            date_of_birth: res.data.date_of_birth,
             hospitalName: res.data.facility_object.name,
           });
         }
@@ -227,6 +229,7 @@ const InvestigationReports = ({ id }: any) => {
         setPatientDetails({
           name: "",
           age: -1,
+          date_of_birth: "",
           hospitalName: "",
         });
       }
diff --git a/src/Components/Facility/LegacyMonitorCard.tsx b/src/Components/Facility/LegacyMonitorCard.tsx
index 9f9fb8f1ea0..61bff3d607b 100644
--- a/src/Components/Facility/LegacyMonitorCard.tsx
+++ b/src/Components/Facility/LegacyMonitorCard.tsx
@@ -4,6 +4,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { PatientModel } from "../Patient/models";
 import LegacyPatientVitalsCard from "../Patient/LegacyPatientVitalsCard";
 import { AssetLocationObject } from "../Assets/AssetTypes";
+import { formatAge } from "../../Utils/utils";
 
 interface MonitorCardProps {
   facilityId: string;
@@ -28,7 +29,7 @@ export const LegacyMonitorCard = ({
           {patient.name}
         </Link>
         <span>
-          {patient.age}y |{" "}
+          {formatAge(patient.age, patient.date_of_birth)} |{" "}
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
         </span>
         <span className="flex flex-1 items-center justify-end gap-2 text-end">
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index dbca307d38b..3fbd80ac8b2 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -10,7 +10,7 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
 import { PatientModel } from "../Patient/models";
 
 import { GENDER_TYPES } from "../../Common/constants";
-import { formatDate, formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDate, formatDateTime } from "../../Utils/utils";
 const Loading = lazy(() => import("../Common/Loading"));
 
 const TreatmentSummary = (props: any) => {
@@ -132,7 +132,8 @@ const TreatmentSummary = (props: any) => {
 
               <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 md:grid-cols-3">
                 <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-r-2 md:border-b-0 ">
-                  <b>Age :</b> {patientData.age}
+                  <b>Age :</b>{" "}
+                  {formatAge(patientData.age, patientData.date_of_birth, true)}
                 </div>
                 <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 md:border-b-0 md:border-r-2">
                   <b>Date of admission :</b>
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 423edb894c9..6e83eb9bc91 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -37,7 +37,7 @@ import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import { parseOptionId } from "../../Common/utils";
-import { parsePhoneNumber } from "../../Utils/utils.js";
+import { formatAge, parsePhoneNumber } from "../../Utils/utils.js";
 import { useDispatch } from "react-redux";
 import useFilters from "../../Common/hooks/useFilters";
 import { useTranslation } from "react-i18next";
@@ -558,7 +558,9 @@ export const PatientManager = () => {
               <div className="flex w-full justify-between gap-2">
                 <div className="font-semibold">
                   <span className="text-xl capitalize">{patient.name}</span>
-                  <span className="ml-4 text-gray-800">{`${patient.age} yrs.`}</span>
+                  <span className="ml-4 text-gray-800">
+                    {formatAge(patient.age, patient.date_of_birth, true)}
+                  </span>
                 </div>
               </div>
 
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 8fdc0f51280..b6ceaf2e4dc 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -19,7 +19,7 @@ import { ConsultationModel } from "../Facility/models";
 import { PatientModel, SampleTestModel } from "./models";
 import { SampleTestCard } from "./SampleTestCard";
 import Chip from "../../CAREUI/display/Chip";
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
@@ -476,7 +476,12 @@ export const PatientHome = (props: any) => {
               <div>
                 <div className="flex flex-row gap-4">
                   <h1 className="flex flex-row pb-3 text-2xl font-bold">
-                    {patientData.name} - {patientData.age}
+                    {patientData.name} -{" "}
+                    {formatAge(
+                      patientData.age,
+                      patientData.date_of_birth,
+                      true
+                    )}
                   </h1>
                   <div className="ml-auto mr-9 flex flex-wrap gap-3">
                     {patientData.is_vaccinated ? (
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index dbb4aac34ce..701b76b5e3a 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -20,7 +20,7 @@ import { PatientModel } from "./models";
 import { getDimensionOrDash } from "../../Common/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import { useState } from "react";
-import { formatDate, formatDateTime } from "../../Utils/utils.js";
+import { formatAge, formatDate, formatDateTime } from "../../Utils/utils.js";
 import dayjs from "../../Utils/dayjs";
 
 export default function PatientInfoCard(props: {
@@ -171,7 +171,7 @@ export default function PatientInfoCard(props: {
               </p>
             )}
             <p className="text-sm text-gray-900 sm:text-sm">
-              <span>{patient.age} years</span>
+              <span>{formatAge(patient.age, patient.date_of_birth, true)}</span>
               <span className="mx-2">•</span>
               <span>{patient.gender}</span>
               {consultation?.suggestion === "DC" && (
diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
index a5f802115bd..7814109978b 100644
--- a/src/Components/Patient/SampleDetails.tsx
+++ b/src/Components/Patient/SampleDetails.tsx
@@ -8,7 +8,7 @@ import Card from "../../CAREUI/display/Card";
 import { FileUpload } from "./FileUpload";
 import Page from "../Common/components/Page";
 import _ from "lodash";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import { getTestSample } from "../../Redux/actions";
 
 import { navigate } from "raviger";
@@ -118,7 +118,7 @@ export const SampleDetails = ({ id }: SampleDetailsProps) => {
             ) : (
               <div>
                 <span className="font-semibold leading-relaxed">Age: </span>
-                {patientData?.age}
+                {formatAge(patientData.age, patientData.date_of_birth)}
               </div>
             )}
             <div>
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index dddfd275f9d..6d55122ea11 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -12,7 +12,7 @@ import { ExportButton } from "../Common/Export";
 import ListFilter from "./ListFilter";
 import Page from "../Common/components/Page";
 import SearchInput from "../Form/SearchInput";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import { formatFilter } from "./Commons";
 import { navigate } from "raviger";
 import useConfig from "../../Common/hooks/useConfig";
@@ -127,7 +127,12 @@ export default function ListView() {
             <div>
               <div className="flex justify-between">
                 <div className="mb-2 text-xl font-bold capitalize">
-                  {shift.patient_object.name} - {shift.patient_object.age}
+                  {shift.patient_object.name} -{" "}
+                  {formatAge(
+                    shift.patient_object.age,
+                    shift.patient_object.date_of_birth,
+                    true
+                  )}
                 </div>
                 <div>
                   {shift.emergency && (
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index 8215bd21e31..03e09702aac 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -18,7 +18,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import Page from "../Common/components/Page";
 import QRCode from "qrcode.react";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -110,7 +110,13 @@ export default function ShiftDetails(props: { id: string }) {
       "\n" +
       t("age") +
       ":" +
-      data?.patient_object?.age +
+      +(
+        formatAge(
+          data?.patient_object?.age,
+          data?.patient_object?.date_of_birth,
+          true
+        ) ?? "-"
+      ) +
       "\n" +
       t("origin_facility") +
       ":" +
@@ -195,7 +201,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {patientData?.age}
+              {formatAge(patientData?.age, patientData?.date_of_birth, true)}
             </div>
           )}
           {patientData?.gender === 2 && patientData?.is_antenatal && (
@@ -380,7 +386,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {patientData?.age}
+              {formatAge(patientData.age, patientData.date_of_birth, true)}
             </div>
             <div>
               <span className="font-semibold leading-relaxed">
diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
index 71a33afdda8..7c065d0c0a8 100644
--- a/src/Components/Shifting/ShiftingBoard.tsx
+++ b/src/Components/Shifting/ShiftingBoard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
 import {
   completeTransfer,
   downloadShiftRequests,
@@ -78,7 +78,12 @@ const ShiftCard = ({ shift, filter }: any) => {
           <div>
             <div className="flex justify-between">
               <div className="mb-2 text-xl font-bold capitalize">
-                {shift.patient_object.name} - {shift.patient_object.age}
+                {shift.patient_object.name} -{" "}
+                {formatAge(
+                  shift.patient_object?.age,
+                  shift.patient_object?.age.date_of_birth,
+                  true
+                )}
               </div>
               <div>
                 {shift.emergency && (
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 1c702e75e86..3aef5b03d67 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -379,3 +379,30 @@ export const getCountryCode = (phoneNumber: string) => {
   }
   return undefined;
 };
+
+export const formatAge = (
+  age?: number,
+  date_of_birth?: string,
+  abbreviated = false
+) => {
+  if (!age && !date_of_birth) return undefined;
+  if (!age) age = 0;
+
+  const daySuffix = abbreviated ? "d" : "days";
+  const monthSuffix = abbreviated ? "mo" : "months";
+  const yearSuffix = abbreviated ? "yr" : "years";
+
+  if (age < 1 && date_of_birth) {
+    const dob = new Date(date_of_birth);
+    const today = new Date();
+    const diffTime = Math.abs(today.getTime() - dob.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    const months = Math.floor(diffDays / 30);
+    const days = diffDays % 30;
+    if (months === 0) {
+      return `${days} ${daySuffix}`;
+    }
+    return `${months} ${monthSuffix} ${days} ${daySuffix}`;
+  }
+  return `${age} ${yearSuffix}`;
+};

From f0d34708c664fcd37fe6fbe570495d14f7c726df Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:24:28 +0530
Subject: [PATCH 15/16] Enable clearing 'referred to' in discharge modal
 (#6337)

---
 src/Components/Facility/DischargeModal.tsx | 13 +++++++------
 src/Components/Form/AutoCompleteAsync.tsx  | 22 +++++++++++++++++++---
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 8376a0ad299..b069b371a72 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -75,7 +75,7 @@ const DischargeModal = ({
   const [latestClaim, setLatestClaim] = useState<HCXClaimModel>();
   const [isCreateClaimLoading, setIsCreateClaimLoading] = useState(false);
   const [isSendingDischargeApi, setIsSendingDischargeApi] = useState(false);
-  const [facility, setFacility] = useState<FacilityModel>({ id: 0, name: "" }); // for referred to external
+  const [facility, setFacility] = useState<FacilityModel>();
   const [errors, setErrors] = useState<any>({});
 
   const fetchLatestClaim = useCallback(async () => {
@@ -186,12 +186,13 @@ const DischargeModal = ({
   const prescriptionActions = PrescriptionActions(consultationData.id ?? "");
 
   const handleFacilitySelect = (selected: FacilityModel) => {
-    setFacility(selected ? selected : facility);
-    const { id, name } = selected;
+    setFacility(selected);
+    const { id, name } = selected || {};
     const isExternal = id === -1;
     setPreDischargeForm((prev) => ({
       ...prev,
-      ...(isExternal ? { referred_to_external: name } : { referred_to: id }),
+      referred_to: isExternal ? null : id,
+      referred_to_external: isExternal ? name : null,
     }));
   };
 
@@ -238,8 +239,8 @@ const DischargeModal = ({
                 handleFacilitySelect(selected as FacilityModel)
               }
               selected={facility}
-              showAll={true}
-              freeText={true}
+              showAll
+              freeText
               multiple={false}
               errors={errors?.referred_to}
               className="mb-4"
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index d06067af957..5f33c6388c5 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -7,6 +7,7 @@ import {
   MultiSelectOptionChip,
   dropdownOptionClassNames,
 } from "./MultiSelectMenuV2";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   name?: string;
@@ -23,6 +24,7 @@ interface Props {
   placeholder?: string;
   disabled?: boolean;
   error?: string;
+  required?: boolean;
   onBlur?: () => void;
   onFocus?: () => void;
 }
@@ -42,11 +44,13 @@ const AutoCompleteAsync = (props: Props) => {
     className = "",
     placeholder,
     disabled = false,
+    required = false,
     error,
   } = props;
   const [data, setData] = useState([]);
   const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
 
   const hasSelection =
     (!multiple && selected) || (multiple && selected?.length > 0);
@@ -86,9 +90,7 @@ const AutoCompleteAsync = (props: Props) => {
                   : placeholder || "Start typing to search..."
               }
               displayValue={() =>
-                hasSelection && !multiple
-                  ? optionLabel && optionLabel(selected)
-                  : ""
+                hasSelection && !multiple ? optionLabel?.(selected) : ""
               }
               onChange={({ target }) => setQuery(target.value)}
               onFocus={props.onFocus}
@@ -100,6 +102,20 @@ 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">
+                    <CareIcon
+                      className="care-l-times-circle mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        onChange(null);
+                      }}
+                    />
+                    <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+                      {t("clear_selection")}
+                    </span>
+                  </div>
+                )}
                 {loading ? (
                   <CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
                 ) : (

From 269d00ff74901614198bb6b2db1542291f767e00 Mon Sep 17 00:00:00 2001
From: "Tasnimul H. Tauhid" <thtauhid.71@gmail.com>
Date: Tue, 26 Sep 2023 18:52:38 +0530
Subject: [PATCH 16/16] Added logic for showing "Track Shifting" button when
 patient has active shifting (#6318)

* logic for track shifting button

* removed console log

* cypress fix

* cypress fix

---------

Co-authored-by: Rithvik Nishad <mail@rithviknishad.dev>
Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
---
 cypress/e2e/patient_spec/patient_crud.cy.ts   |  2 +
 .../pageobject/Facility/FacilityCreation.ts   |  2 -
 .../pageobject/Patient/PatientConsultation.ts |  1 +
 cypress/pageobject/Patient/PatientCreation.ts |  4 ++
 .../Facility/ConsultationDetails/index.tsx    | 67 +++++++++++++++----
 5 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/patient_spec/patient_crud.cy.ts b/cypress/e2e/patient_spec/patient_crud.cy.ts
index b55732fa440..b22ccdbce13 100644
--- a/cypress/e2e/patient_spec/patient_crud.cy.ts
+++ b/cypress/e2e/patient_spec/patient_crud.cy.ts
@@ -33,6 +33,7 @@ describe("Patient Creation with consultation", () => {
   it("Create a new patient with no consultation", () => {
     patientPage.createPatient();
     patientPage.selectFacility("dummy facility");
+    patientPage.patientformvisibility();
     patientPage.enterPatientDetails(
       phone_number,
       emergency_phone_number,
@@ -69,6 +70,7 @@ describe("Patient Creation with consultation", () => {
     patientPage.interceptFacilities();
     patientPage.visitUpdatePatientUrl();
     patientPage.verifyStatusCode();
+    patientPage.patientformvisibility();
     updatePatientPage.enterPatientDetails(
       "Test E2E User Edited",
       "O+",
diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts
index b6285bff72b..42ec6d8fd7c 100644
--- a/cypress/pageobject/Facility/FacilityCreation.ts
+++ b/cypress/pageobject/Facility/FacilityCreation.ts
@@ -191,9 +191,7 @@ class FacilityPage {
   }
 
   verifyfacilitycreateassetredirection() {
-    cy.intercept("GET", "**/api/v1/facility/**").as("getNewAssets");
     cy.url().should("include", "/assets/new");
-    cy.wait("@getNewAssets").its("response.statusCode").should("eq", 200);
   }
 
   verifyassetfacilitybackredirection() {
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
index c0ba0c260d8..b1c95d19140 100644
--- a/cypress/pageobject/Patient/PatientConsultation.ts
+++ b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -16,6 +16,7 @@ export class PatientConsultationPage {
   }
 
   fillIllnessHistory(history: string) {
+    cy.wait(5000);
     cy.get("#history_of_present_illness").scrollIntoView();
     cy.get("#history_of_present_illness").should("be.visible");
     cy.get("#history_of_present_illness").click().type(history);
diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
index 9b8df4a287e..4fcd43dc490 100644
--- a/cypress/pageobject/Patient/PatientCreation.ts
+++ b/cypress/pageobject/Patient/PatientCreation.ts
@@ -124,4 +124,8 @@ export class PatientPage {
   verifyStatusCode() {
     cy.wait("@getFacilities").its("response.statusCode").should("eq", 200);
   }
+
+  patientformvisibility() {
+    cy.get("[data-testid='current-address']").scrollIntoView();
+  }
 }
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index c23bf071fa1..403f1752704 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -5,7 +5,11 @@ import {
   SYMPTOM_CHOICES,
 } from "../../../Common/constants";
 import { ConsultationModel, ICD11DiagnosisModel } from "../models";
-import { getConsultation, getPatient } from "../../../Redux/actions";
+import {
+  getConsultation,
+  getPatient,
+  listShiftRequests,
+} from "../../../Redux/actions";
 import { statusType, useAbortableEffect } from "../../../Common/utils";
 import { lazy, useCallback, useState } from "react";
 import ToolTip from "../../Common/utils/Tooltip";
@@ -79,6 +83,7 @@ export const ConsultationDetails = (props: any) => {
     {} as ConsultationModel
   );
   const [patientData, setPatientData] = useState<PatientModel>({});
+  const [activeShiftingData, setActiveShiftingData] = useState<Array<any>>([]);
   const [openDischargeSummaryDialog, setOpenDischargeSummaryDialog] =
     useState(false);
   const [openDischargeDialog, setOpenDischargeDialog] = useState(false);
@@ -140,6 +145,15 @@ export const ConsultationDetails = (props: any) => {
             };
             setPatientData(data);
           }
+
+          // Get shifting data
+          const shiftingRes = await dispatch(
+            listShiftRequests({ patient: id }, "shift-list-call")
+          );
+          if (shiftingRes?.data?.results) {
+            const data = shiftingRes.data.results;
+            setActiveShiftingData(data);
+          }
         } else {
           navigate("/not-found");
         }
@@ -168,6 +182,19 @@ export const ConsultationDetails = (props: any) => {
 
   const SelectedTab = TABS[tab];
 
+  const hasActiveShiftingRequest = () => {
+    if (activeShiftingData.length > 0) {
+      return [
+        "PENDING",
+        "APPROVED",
+        "DESTINATION APPROVED",
+        "PATIENT TO BE PICKED UP",
+      ].includes(activeShiftingData[activeShiftingData.length - 1].status);
+    }
+
+    return false;
+  };
+
   if (isLoading) {
     return <Loading />;
   }
@@ -265,17 +292,33 @@ export const ConsultationDetails = (props: any) => {
           <div className="-right-6 top-0 flex w-full flex-col space-y-1 sm:w-min sm:flex-row sm:items-center sm:space-y-0 sm:divide-x-2 lg:absolute xl:right-0">
             {!consultationData.discharge_date && (
               <div className="flex w-full flex-col px-2 sm:flex-row">
-                <ButtonV2
-                  onClick={() =>
-                    navigate(
-                      `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
-                    )
-                  }
-                  className="btn btn-primary m-1 w-full hover:text-white"
-                >
-                  <CareIcon className="care-l-ambulance h-5 w-5" />
-                  Shift Patient
-                </ButtonV2>
+                {hasActiveShiftingRequest() ? (
+                  <ButtonV2
+                    onClick={() =>
+                      navigate(
+                        `/shifting/${
+                          activeShiftingData[activeShiftingData.length - 1].id
+                        }`
+                      )
+                    }
+                    className="btn btn-primary m-1 w-full hover:text-white"
+                  >
+                    <CareIcon className="care-l-ambulance h-5 w-5" />
+                    Track Shifting
+                  </ButtonV2>
+                ) : (
+                  <ButtonV2
+                    onClick={() =>
+                      navigate(
+                        `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
+                      )
+                    }
+                    className="btn btn-primary m-1 w-full hover:text-white"
+                  >
+                    <CareIcon className="care-l-ambulance h-5 w-5" />
+                    Shift Patient
+                  </ButtonV2>
+                )}
                 <button
                   onClick={() => {
                     triggerGoal("Doctor Connect Clicked", {