From d95400073073132cfa7850e4109824adc4e1b9e5 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 18 Feb 2024 21:28:59 +0530
Subject: [PATCH 01/15] created a VitalsMonitorAssetPopover component

---
 .../VitalsMonitorAssetPopover.tsx             | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx

diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
new file mode 100644
index 00000000000..da1094e3f15
--- /dev/null
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AssetData } from "../Assets/AssetTypes";
+import DialogModal from "../Common/Dialog";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+interface VitalsMonitorAssetPopoverProps {
+  asset?: AssetData;
+}
+
+const VitalsMonitorAssetPopover = ({
+  asset,
+}: VitalsMonitorAssetPopoverProps) => {
+  const [showDialog, setShowDialog] = useState(false);
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <CareIcon
+        className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base"
+        onClick={() => setShowDialog(true)}
+      />
+      <DialogModal
+        show={showDialog}
+        onClose={() => setShowDialog(false)}
+        fixedWidth={false}
+        title={
+          <div className="flex gap-2">
+            <CareIcon className="care-l-lungs" />
+            <p>{asset?.name}</p>
+          </div>
+        }
+      >
+        <div className="mt-2 flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <p>Middleware Hostname:</p>
+            <p className="text-gray-500">
+              {asset?.resolved_middleware?.hostname}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <p>Local IP Address:</p>
+            <p className="text-gray-500">{asset?.meta?.local_ip_address}</p>
+          </div>
+        </div>
+        <ButtonV2
+          onClick={() =>
+            navigate(
+              `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
+            )
+          }
+          id="configure-asset"
+          data-testid="asset-configure-button"
+          className="mt-4"
+        >
+          <CareIcon className="care-l-setting h-4" />
+          {t("configure")}
+        </ButtonV2>
+      </DialogModal>
+    </div>
+  );
+};
+
+export default VitalsMonitorAssetPopover;

From 576937a2362d3cf4364f86670150a6596574a336 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Sun, 18 Feb 2024 21:30:20 +0530
Subject: [PATCH 02/15] replaced asset name with (i) button popover

---
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx |  6 ++--
 .../VentilatorPatientVitalsMonitor.tsx        | 29 ++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index d91b0c56b2f..08e9ed6ee72 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -9,6 +9,7 @@ import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
+import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
 
 const minutesAgo = (timestamp: string) => {
   return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
@@ -65,7 +66,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             )}
           </div>
           <div className="flex flex-col items-center gap-2 text-xs md:flex-row md:text-sm">
-            {asset && (
+            {/* {asset && (
               <Link
                 className="flex items-center gap-1 text-gray-500"
                 href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
@@ -73,7 +74,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
                 <CareIcon className="care-l-monitor-heart-rate text-sm md:text-base" />
                 <span>{asset.name}</span>
               </Link>
-            )}
+            )} */}
             {bed && (
               <Link
                 className="flex flex-col items-center gap-2 text-gray-500 md:flex-row"
@@ -89,6 +90,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
                 </span>
               </Link>
             )}
+            <VitalsMonitorAssetPopover asset={asset} />
           </div>
         </div>
       )}
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index b03fe0645c6..2ae2b2d54c7 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -7,6 +7,7 @@ import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { classNames } from "../../Utils/utils";
 import WaveformLabels from "./WaveformLabels";
 import { VitalsNonWaveformContent } from "./HL7PatientVitalsMonitor";
+import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
 
 export default function VentilatorPatientVitalsMonitor(
   props: IVitalsComponentProps
@@ -45,19 +46,6 @@ export default function VentilatorPatientVitalsMonitor(
             )}
           </div>
           <div className="flex gap-3">
-            {asset && (
-              <div className="flex items-center gap-2 text-sm">
-                <Link
-                  className="flex gap-2 text-gray-500"
-                  href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
-                >
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-lungs text-base" />
-                    {asset.name}
-                  </span>
-                </Link>
-              </div>
-            )}
             {bed && (
               <div className="flex items-center gap-2 text-sm">
                 <Link
@@ -75,6 +63,21 @@ export default function VentilatorPatientVitalsMonitor(
                 </Link>
               </div>
             )}
+            {/* {asset && (
+              <div className="flex items-center gap-2 text-sm">
+                <Link
+                  className="flex gap-2 text-gray-500"
+                  href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
+                >
+                  <span className="flex items-center gap-1">
+                    <CareIcon className="care-l-lungs text-base" />
+                    {asset.name}
+                  </span>
+                </Link>
+              </div>
+            )} */}
+            {/* (i) button for asset details */}
+            <VitalsMonitorAssetPopover asset={asset} />
           </div>
         </div>
       )}

From 8d6b61d12bdb50c2842d683c43b7bcd0fb4e87a8 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 08:14:53 +0530
Subject: [PATCH 03/15] replaced DialogModal with headlessUI popover

---
 .../VitalsMonitorAssetPopover.tsx             | 96 ++++++++++---------
 1 file changed, 52 insertions(+), 44 deletions(-)

diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index da1094e3f15..928a0ccd6ce 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -1,10 +1,10 @@
-import { useState } from "react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { AssetData } from "../Assets/AssetTypes";
-import DialogModal from "../Common/Dialog";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
+import { Popover, Transition } from "@headlessui/react";
+import { Fragment } from "react";
 
 interface VitalsMonitorAssetPopoverProps {
   asset?: AssetData;
@@ -13,52 +13,60 @@ interface VitalsMonitorAssetPopoverProps {
 const VitalsMonitorAssetPopover = ({
   asset,
 }: VitalsMonitorAssetPopoverProps) => {
-  const [showDialog, setShowDialog] = useState(false);
   const { t } = useTranslation();
 
   return (
-    <div>
-      <CareIcon
-        className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base"
-        onClick={() => setShowDialog(true)}
-      />
-      <DialogModal
-        show={showDialog}
-        onClose={() => setShowDialog(false)}
-        fixedWidth={false}
-        title={
-          <div className="flex gap-2">
-            <CareIcon className="care-l-lungs" />
-            <p>{asset?.name}</p>
-          </div>
-        }
-      >
-        <div className="mt-2 flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <p>Middleware Hostname:</p>
-            <p className="text-gray-500">
-              {asset?.resolved_middleware?.hostname}
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <p>Local IP Address:</p>
-            <p className="text-gray-500">{asset?.meta?.local_ip_address}</p>
-          </div>
-        </div>
-        <ButtonV2
-          onClick={() =>
-            navigate(
-              `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
-            )
-          }
-          id="configure-asset"
-          data-testid="asset-configure-button"
-          className="mt-4"
+    <div className="max-w-full">
+      <Popover className="relative">
+        <Popover.Button>
+          <CareIcon className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base" />
+        </Popover.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
         >
-          <CareIcon className="care-l-setting h-4" />
-          {t("configure")}
-        </ButtonV2>
-      </DialogModal>
+          <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
+            <div className="flex flex-col gap-2 p-5">
+              <div className="flex gap-2 text-lg font-bold">
+                <CareIcon className="care-l-lungs" />
+                <p>{asset?.name}</p>
+              </div>
+              <div className="mt-2 flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <p>Middleware Hostname:</p>
+                  <p className="text-gray-500">
+                    {asset?.resolved_middleware?.hostname}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p>Local IP Address:</p>
+                  <p className="text-gray-500">
+                    {asset?.meta?.local_ip_address}
+                  </p>
+                </div>
+              </div>
+              <ButtonV2
+                onClick={() =>
+                  navigate(
+                    `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
+                  )
+                }
+                id="configure-asset"
+                data-testid="asset-configure-button"
+                className="mt-4"
+              >
+                <CareIcon className="care-l-setting h-4" />
+                {t("configure")}
+              </ButtonV2>
+            </div>
+          </Popover.Panel>
+        </Transition>
+      </Popover>
     </div>
   );
 };

From 7ca0b2afc4168a7ae44a7c7af9a07de5ac2c4588 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 08:28:29 +0530
Subject: [PATCH 04/15] minor mobile ui fix HL7Monitor

---
 src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 08e9ed6ee72..94b102a2271 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -65,7 +65,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
               </span>
             )}
           </div>
-          <div className="flex flex-col items-center gap-2 text-xs md:flex-row md:text-sm">
+          <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
             {/* {asset && (
               <Link
                 className="flex items-center gap-1 text-gray-500"
@@ -77,7 +77,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             )} */}
             {bed && (
               <Link
-                className="flex flex-col items-center gap-2 text-gray-500 md:flex-row"
+                className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
                 href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
               >
                 <span className="flex items-center gap-1">

From bd1a0904d781d2a91a01183813c79ec51a41768f Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 08:29:48 +0530
Subject: [PATCH 05/15] removed redundant code

---
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx      |  9 ---------
 .../VentilatorPatientVitalsMonitor.tsx             | 14 --------------
 2 files changed, 23 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 94b102a2271..425fb67322e 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -66,15 +66,6 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             )}
           </div>
           <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
-            {/* {asset && (
-              <Link
-                className="flex items-center gap-1 text-gray-500"
-                href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
-              >
-                <CareIcon className="care-l-monitor-heart-rate text-sm md:text-base" />
-                <span>{asset.name}</span>
-              </Link>
-            )} */}
             {bed && (
               <Link
                 className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 2ae2b2d54c7..55d91e40d7b 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -63,20 +63,6 @@ export default function VentilatorPatientVitalsMonitor(
                 </Link>
               </div>
             )}
-            {/* {asset && (
-              <div className="flex items-center gap-2 text-sm">
-                <Link
-                  className="flex gap-2 text-gray-500"
-                  href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
-                >
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-lungs text-base" />
-                    {asset.name}
-                  </span>
-                </Link>
-              </div>
-            )} */}
-            {/* (i) button for asset details */}
             <VitalsMonitorAssetPopover asset={asset} />
           </div>
         </div>

From ae3aa0bb9e24bc72a117e94e70a19d2135d97cd0 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 09:01:30 +0530
Subject: [PATCH 06/15] minor css fix and dynamic icon feature added

---
 .../VitalsMonitorAssetPopover.tsx             | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index 928a0ccd6ce..6e59fdeb72d 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -1,5 +1,5 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { AssetData } from "../Assets/AssetTypes";
+import { AssetData, assetClassProps } from "../Assets/AssetTypes";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
@@ -33,19 +33,27 @@ const VitalsMonitorAssetPopover = ({
           <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
             <div className="flex flex-col gap-2 p-5">
               <div className="flex gap-2 text-lg font-bold">
-                <CareIcon className="care-l-lungs" />
+                <CareIcon
+                  className={`care-l-${
+                    (
+                      (asset?.asset_class &&
+                        assetClassProps[asset.asset_class]) ||
+                      assetClassProps.NONE
+                    ).icon
+                  } text-2xl`}
+                />
                 <p>{asset?.name}</p>
               </div>
               <div className="mt-2 flex flex-col gap-2">
-                <div className="flex items-center gap-2">
+                <div className="flex flex-col gap-2">
                   <p>Middleware Hostname:</p>
-                  <p className="text-gray-500">
+                  <p className="break-words text-sm text-gray-600">
                     {asset?.resolved_middleware?.hostname}
                   </p>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex flex-col gap-2">
                   <p>Local IP Address:</p>
-                  <p className="text-gray-500">
+                  <p className="break-words text-sm text-gray-600">
                     {asset?.meta?.local_ip_address}
                   </p>
                 </div>

From 4f090c0495abe274ea9846445cc0057e283e6993 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 09:02:54 +0530
Subject: [PATCH 07/15] spacing fix

---
 src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index 6e59fdeb72d..3350abe0060 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -31,7 +31,7 @@ const VitalsMonitorAssetPopover = ({
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
-            <div className="flex flex-col gap-2 p-5">
+            <div className="flex flex-col gap-4 p-5">
               <div className="flex gap-2 text-lg font-bold">
                 <CareIcon
                   className={`care-l-${
@@ -44,7 +44,7 @@ const VitalsMonitorAssetPopover = ({
                 />
                 <p>{asset?.name}</p>
               </div>
-              <div className="mt-2 flex flex-col gap-2">
+              <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-2">
                   <p>Middleware Hostname:</p>
                   <p className="break-words text-sm text-gray-600">

From 1a623eb97671ecdbd3208700251eace9d4870a32 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 09:09:22 +0530
Subject: [PATCH 08/15] local fix to improper gender type

---
 .../VitalsMonitor/VentilatorPatientVitalsMonitor.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 55d91e40d7b..0eb4c17ca89 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -41,7 +41,11 @@ export default function VentilatorPatientVitalsMonitor(
             {patient && (
               <span className="text-sm font-bold text-gray-400">
                 {patient.age}y;{" "}
-                {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
+                {
+                  GENDER_TYPES.find(
+                    (g) => g.text === patient.gender?.toString()
+                  )?.icon
+                }
               </span>
             )}
           </div>

From 201b0693c70808289cc688b24ef1c4c41e679ad6 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 10:07:21 +0530
Subject: [PATCH 09/15] reusable header for VitalsMonitor

---
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx | 50 +---------------
 .../VentilatorPatientVitalsMonitor.tsx        | 55 +-----------------
 .../VitalsMonitor/VitalsMonitorHeader.tsx     | 58 +++++++++++++++++++
 3 files changed, 63 insertions(+), 100 deletions(-)
 create mode 100644 src/Components/VitalsMonitor/VitalsMonitorHeader.tsx

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 425fb67322e..6393295d266 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -1,7 +1,5 @@
 import { useEffect } from "react";
 import useHL7VitalsMonitor from "./useHL7VitalsMonitor";
-import { Link } from "raviger";
-import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import WaveformLabels from "./WaveformLabels";
 import { classNames } from "../../Utils/utils";
@@ -9,7 +7,7 @@ import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
-import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+import VitalsMonitorHeader from "./VitalsMonitorHeader";
 
 const minutesAgo = (timestamp: string) => {
   return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
@@ -19,7 +17,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor(
     props.config
   );
-  const { patient, bed, asset } = props.patientAssetBed ?? {};
+  const { bed, asset } = props.patientAssetBed ?? {};
   const authUser = useAuthUser();
 
   useEffect(() => {
@@ -42,49 +40,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      {props.patientAssetBed && (
-        <div className="flex items-center justify-between px-2 tracking-wide">
-          <div className="flex flex-col gap-2 md:flex-row">
-            {patient ? (
-              <Link
-                href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
-                className="font-bold uppercase text-white"
-              >
-                {patient?.name}
-              </Link>
-            ) : (
-              <span className="flex items-center gap-1 text-gray-500">
-                <CareIcon className="care-l-ban" />
-                No Patient
-              </span>
-            )}
-            {patient && (
-              <span className="text-xs font-bold text-gray-400 md:text-sm">
-                {patient.age}y;{" "}
-                {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
-              </span>
-            )}
-          </div>
-          <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
-            {bed && (
-              <Link
-                className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
-                href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
-              >
-                <span className="flex items-center gap-1">
-                  <CareIcon className="care-l-bed text-sm md:text-base" />
-                  <span>{bed.name}</span>
-                </span>
-                <span className="flex items-center gap-1">
-                  <CareIcon className="care-l-location-point text-sm md:text-base" />
-                  <span>{bed.location_object?.name}</span>
-                </span>
-              </Link>
-            )}
-            <VitalsMonitorAssetPopover asset={asset} />
-          </div>
-        </div>
-      )}
+      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       <div className="relative flex flex-col gap-2 md:flex-row md:justify-between">
         <VitalsNonWaveformContent>
           {/* Pulse Rate */}
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 0eb4c17ca89..282f3c8b213 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -1,20 +1,17 @@
 import { useEffect } from "react";
-import { Link } from "raviger";
-import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import useVentilatorVitalsMonitor from "./useVentilatorVitalsMonitor";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { classNames } from "../../Utils/utils";
 import WaveformLabels from "./WaveformLabels";
 import { VitalsNonWaveformContent } from "./HL7PatientVitalsMonitor";
-import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+import VitalsMonitorHeader from "./VitalsMonitorHeader";
 
 export default function VentilatorPatientVitalsMonitor(
   props: IVitalsComponentProps
 ) {
   const { connect, waveformCanvas, data, isOnline } =
     useVentilatorVitalsMonitor(props.config);
-  const { patient, bed, asset } = props.patientAssetBed ?? {};
 
   useEffect(() => {
     connect(props.socketUrl);
@@ -22,55 +19,7 @@ export default function VentilatorPatientVitalsMonitor(
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      {props.patientAssetBed && (
-        <div className="flex items-center justify-between px-2 tracking-wide">
-          <div className="flex items-center gap-2">
-            {patient ? (
-              <Link
-                href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
-                className="font-bold uppercase text-white"
-              >
-                {patient?.name}
-              </Link>
-            ) : (
-              <span className="flex items-center gap-1 text-gray-500">
-                <CareIcon className="care-l-ban" />
-                No Patient
-              </span>
-            )}
-            {patient && (
-              <span className="text-sm font-bold text-gray-400">
-                {patient.age}y;{" "}
-                {
-                  GENDER_TYPES.find(
-                    (g) => g.text === patient.gender?.toString()
-                  )?.icon
-                }
-              </span>
-            )}
-          </div>
-          <div className="flex gap-3">
-            {bed && (
-              <div className="flex items-center gap-2 text-sm">
-                <Link
-                  className="flex gap-2 text-gray-500"
-                  href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
-                >
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-bed text-base" />
-                    {bed.name}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-location-point text-base" />
-                    {bed.location_object?.name}
-                  </span>
-                </Link>
-              </div>
-            )}
-            <VitalsMonitorAssetPopover asset={asset} />
-          </div>
-        </div>
-      )}
+      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       <div className="relative flex flex-col gap-2 divide-x-0 divide-y divide-blue-600 md:flex-row md:justify-between md:divide-x md:divide-y-0">
         <div>
           <div
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
new file mode 100644
index 00000000000..2f0c2878a08
--- /dev/null
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -0,0 +1,58 @@
+import { PatientAssetBed } from "../Assets/AssetTypes";
+import { Link } from "raviger";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { GENDER_TYPES } from "../../Common/constants";
+import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+
+interface VitalsMonitorHeaderProps {
+  patientAssetBed?: PatientAssetBed;
+}
+
+const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
+  const { patient, bed, asset } = patientAssetBed ?? {};
+  return (
+    <div className="flex items-center justify-between px-2 tracking-wide">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center">
+        {patient ? (
+          <Link
+            href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
+            className="font-bold uppercase text-white"
+          >
+            {patient?.name}
+          </Link>
+        ) : (
+          <span className="flex items-center gap-1 text-gray-500">
+            <CareIcon className="care-l-ban" />
+            No Patient
+          </span>
+        )}
+        {patient && (
+          <span className="text-xs font-bold text-gray-400 md:text-sm">
+            {patient.age}y;{" "}
+            {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
+        {bed && (
+          <Link
+            className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
+            href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
+          >
+            <span className="flex items-center gap-1">
+              <CareIcon className="care-l-bed text-sm md:text-base" />
+              <span>{bed.name}</span>
+            </span>
+            <span className="flex items-center gap-1">
+              <CareIcon className="care-l-location-point text-sm md:text-base" />
+              <span>{bed.location_object?.name}</span>
+            </span>
+          </Link>
+        )}
+        <VitalsMonitorAssetPopover asset={asset} />
+      </div>
+    </div>
+  );
+};
+
+export default VitalsMonitorHeader;

From 76e2d407f2a749dfa0b4a3d3dfd43da917921d92 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 12:59:40 +0530
Subject: [PATCH 10/15] minor css fix

---
 src/Components/VitalsMonitor/VitalsMonitorHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
index 2f0c2878a08..79b803353fb 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -11,7 +11,7 @@ interface VitalsMonitorHeaderProps {
 const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
   const { patient, bed, asset } = patientAssetBed ?? {};
   return (
-    <div className="flex items-center justify-between px-2 tracking-wide">
+    <div className="flex items-center justify-between tracking-wide">
       <div className="flex flex-col gap-2 md:flex-row md:items-center">
         {patient ? (
           <Link
@@ -39,11 +39,11 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
             className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
             href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
           >
-            <span className="flex items-center gap-1">
+            <span className="flex items-center gap-1 hover:text-white">
               <CareIcon className="care-l-bed text-sm md:text-base" />
               <span>{bed.name}</span>
             </span>
-            <span className="flex items-center gap-1">
+            <span className="flex items-center gap-1 hover:text-white">
               <CareIcon className="care-l-location-point text-sm md:text-base" />
               <span>{bed.location_object?.name}</span>
             </span>

From 90ab59ca479e1d0199643457470db528fd3da394 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 13:32:41 +0530
Subject: [PATCH 11/15] minor popover css fix

---
 .../VitalsMonitorAssetPopover.tsx             | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index 3350abe0060..a36d551e7be 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -31,8 +31,8 @@ const VitalsMonitorAssetPopover = ({
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
-            <div className="flex flex-col gap-4 p-5">
-              <div className="flex gap-2 text-lg font-bold">
+            <div className="flex flex-col gap-3 p-5">
+              <div className="flex items-center gap-2 text-lg font-bold">
                 <CareIcon
                   className={`care-l-${
                     (
@@ -45,18 +45,16 @@ const VitalsMonitorAssetPopover = ({
                 <p>{asset?.name}</p>
               </div>
               <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-2">
-                  <p>Middleware Hostname:</p>
-                  <p className="break-words text-sm text-gray-600">
-                    {asset?.resolved_middleware?.hostname}
-                  </p>
-                </div>
-                <div className="flex flex-col gap-2">
-                  <p>Local IP Address:</p>
-                  <p className="break-words text-sm text-gray-600">
-                    {asset?.meta?.local_ip_address}
-                  </p>
-                </div>
+                <p className="text-sm md:text-base">Middleware Hostname:</p>
+                <p className="break-words text-gray-600">
+                  {asset?.resolved_middleware?.hostname}
+                </p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="text-sm md:text-base">Local IP Address:</p>
+                <p className="break-words text-gray-600">
+                  {asset?.meta?.local_ip_address}
+                </p>
               </div>
               <ButtonV2
                 onClick={() =>
@@ -66,7 +64,6 @@ const VitalsMonitorAssetPopover = ({
                 }
                 id="configure-asset"
                 data-testid="asset-configure-button"
-                className="mt-4"
               >
                 <CareIcon className="care-l-setting h-4" />
                 {t("configure")}

From 88e6a73bdf7cff7c110e09afec8851417c4b0b07 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 18:45:15 +0530
Subject: [PATCH 12/15] added hideHeader optional prop to VitalsMonitor

---
 src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx      | 4 +++-
 .../VitalsMonitor/VentilatorPatientVitalsMonitor.tsx          | 4 +++-
 src/Components/VitalsMonitor/types.ts                         | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 6393295d266..986421689b4 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -40,7 +40,9 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
+      {props.hideHeader ? null : (
+        <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
+      )}
       <div className="relative flex flex-col gap-2 md:flex-row md:justify-between">
         <VitalsNonWaveformContent>
           {/* Pulse Rate */}
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 282f3c8b213..b41b932f7b1 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -19,7 +19,9 @@ export default function VentilatorPatientVitalsMonitor(
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
+      {props.hideHeader ? null : (
+        <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
+      )}
       <div className="relative flex flex-col gap-2 divide-x-0 divide-y divide-blue-600 md:flex-row md:justify-between md:divide-x md:divide-y-0">
         <div>
           <div
diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
index c73d7399b59..78f1b3c0442 100644
--- a/src/Components/VitalsMonitor/types.ts
+++ b/src/Components/VitalsMonitor/types.ts
@@ -50,4 +50,5 @@ export interface IVitalsComponentProps {
   patientAssetBed?: PatientAssetBed;
   socketUrl: string;
   config?: ReturnType<typeof getVitalsCanvasSizeAndDuration>;
+  hideHeader?: boolean;
 }

From 2f63ae935341b2275ef444c44177c5146477c5b7 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Mon, 19 Feb 2024 18:46:18 +0530
Subject: [PATCH 13/15] hide header from VitalsMonitor in
 ConsultationUpdatesTab

---
 src/Components/Facility/CentralNursingStation.tsx             | 3 ++-
 .../Facility/ConsultationDetails/ConsultationUpdatesTab.tsx   | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index 186dbbd48e9..e063292cf2f 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -207,7 +207,8 @@ export default function CentralNursingStation({ facilityId }: Props) {
                     ?.start_date
                 }
                 key={`${props.patientAssetBed?.bed.id}-${hash}`}
-                {...props}
+                patientAssetBed={props.patientAssetBed}
+                socketUrl={props.socketUrl || ""}
                 config={config}
               />
             </div>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 56aadcadbdb..c9c67ca621e 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -108,6 +108,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     meta: monitorBedData?.asset_object?.meta,
                   }}
                   socketUrl={hl7SocketUrl}
+                  hideHeader={true}
                 />
               </div>
               <div className="min-h-[400px] flex-1">
@@ -119,6 +120,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                     meta: ventilatorBedData?.asset_object?.meta,
                   }}
                   socketUrl={ventilatorSocketUrl}
+                  hideHeader={true}
                 />
               </div>
             </div>
@@ -154,6 +156,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             }}
                             socketUrl={hl7SocketUrl}
                             config={vitals.config}
+                            hideHeader={true}
                           />
                         </div>
                       )}
@@ -170,6 +173,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             }}
                             socketUrl={ventilatorSocketUrl}
                             config={vitals.config}
+                            hideHeader={true}
                           />
                         </div>
                       )}

From ef84298b96ec8fb52c68359897e7f2ada7e8c587 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Wed, 21 Feb 2024 11:58:59 +0530
Subject: [PATCH 14/15] created and implemented VitalsMonitorFooter component

---
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx |   2 +
 .../VentilatorPatientVitalsMonitor.tsx        |   2 +
 .../VitalsMonitorAssetPopover.tsx             | 110 +++++++++---------
 .../VitalsMonitor/VitalsMonitorFooter.tsx     |  17 +++
 .../VitalsMonitor/VitalsMonitorHeader.tsx     |   4 +-
 5 files changed, 76 insertions(+), 59 deletions(-)
 create mode 100644 src/Components/VitalsMonitor/VitalsMonitorFooter.tsx

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 986421689b4..9ad178cef92 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -8,6 +8,7 @@ import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
 import VitalsMonitorHeader from "./VitalsMonitorHeader";
+import VitalsMonitorFooter from "./VitalsMonitorFooter";
 
 const minutesAgo = (timestamp: string) => {
   return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
@@ -178,6 +179,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
           </div>
         </div>
       </div>
+      <VitalsMonitorFooter asset={asset} />
     </div>
   );
 }
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index b41b932f7b1..08ca280eebf 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -6,6 +6,7 @@ import { classNames } from "../../Utils/utils";
 import WaveformLabels from "./WaveformLabels";
 import { VitalsNonWaveformContent } from "./HL7PatientVitalsMonitor";
 import VitalsMonitorHeader from "./VitalsMonitorHeader";
+import VitalsMonitorFooter from "./VitalsMonitorFooter";
 
 export default function VentilatorPatientVitalsMonitor(
   props: IVitalsComponentProps
@@ -82,6 +83,7 @@ export default function VentilatorPatientVitalsMonitor(
           />
         </VitalsNonWaveformContent>
       </div>
+      <VitalsMonitorFooter asset={props.patientAssetBed?.asset} />
     </div>
   );
 }
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index a36d551e7be..cf56c3c5e50 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -16,63 +16,61 @@ const VitalsMonitorAssetPopover = ({
   const { t } = useTranslation();
 
   return (
-    <div className="max-w-full">
-      <Popover className="relative">
-        <Popover.Button>
-          <CareIcon className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base" />
-        </Popover.Button>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-        >
-          <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
-            <div className="flex flex-col gap-3 p-5">
-              <div className="flex items-center gap-2 text-lg font-bold">
-                <CareIcon
-                  className={`care-l-${
-                    (
-                      (asset?.asset_class &&
-                        assetClassProps[asset.asset_class]) ||
-                      assetClassProps.NONE
-                    ).icon
-                  } text-2xl`}
-                />
-                <p>{asset?.name}</p>
-              </div>
-              <div className="flex flex-col gap-2">
-                <p className="text-sm md:text-base">Middleware Hostname:</p>
-                <p className="break-words text-gray-600">
-                  {asset?.resolved_middleware?.hostname}
-                </p>
-              </div>
-              <div className="flex flex-col gap-2">
-                <p className="text-sm md:text-base">Local IP Address:</p>
-                <p className="break-words text-gray-600">
-                  {asset?.meta?.local_ip_address}
-                </p>
-              </div>
-              <ButtonV2
-                onClick={() =>
-                  navigate(
-                    `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
-                  )
-                }
-                id="configure-asset"
-                data-testid="asset-configure-button"
-              >
-                <CareIcon className="care-l-setting h-4" />
-                {t("configure")}
-              </ButtonV2>
+    <Popover className="relative">
+      <Popover.Button>
+        <CareIcon className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base" />
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute z-[100] mt-2 w-56 -translate-x-1/3 translate-y-[-280px] rounded-md bg-white md:w-[350px] md:-translate-y-full md:translate-x-6">
+          <div className="flex flex-col gap-3 p-5">
+            <div className="flex items-center gap-2 text-lg font-bold">
+              <CareIcon
+                className={`care-l-${
+                  (
+                    (asset?.asset_class &&
+                      assetClassProps[asset.asset_class]) ||
+                    assetClassProps.NONE
+                  ).icon
+                } text-2xl`}
+              />
+              <p>{asset?.name}</p>
             </div>
-          </Popover.Panel>
-        </Transition>
-      </Popover>
-    </div>
+            <div className="flex flex-col gap-1">
+              <p className="text-sm md:text-base">Middleware Hostname:</p>
+              <p className="break-words text-gray-600">
+                {asset?.resolved_middleware?.hostname}
+              </p>
+            </div>
+            <div className="flex flex-col gap-1">
+              <p className="text-sm md:text-base">Local IP Address:</p>
+              <p className="break-words text-gray-600">
+                {asset?.meta?.local_ip_address}
+              </p>
+            </div>
+            <ButtonV2
+              onClick={() =>
+                navigate(
+                  `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
+                )
+              }
+              id="configure-asset"
+              data-testid="asset-configure-button"
+            >
+              <CareIcon className="care-l-setting h-4" />
+              {t("configure")}
+            </ButtonV2>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
   );
 };
 
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
new file mode 100644
index 00000000000..a9598f16965
--- /dev/null
+++ b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -0,0 +1,17 @@
+import { AssetData } from "../Assets/AssetTypes";
+import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+
+interface IVitalsMonitorFooterProps {
+  asset?: AssetData;
+}
+
+const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => {
+  return (
+    <div className="flex w-full items-center gap-2 text-xs tracking-wide md:text-sm">
+      <p className="text-gray-500 ">{asset?.name}</p>
+      <VitalsMonitorAssetPopover asset={asset} />
+    </div>
+  );
+};
+
+export default VitalsMonitorFooter;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
index 79b803353fb..2f9df8607b0 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -2,14 +2,13 @@ import { PatientAssetBed } from "../Assets/AssetTypes";
 import { Link } from "raviger";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { GENDER_TYPES } from "../../Common/constants";
-import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
 
 interface VitalsMonitorHeaderProps {
   patientAssetBed?: PatientAssetBed;
 }
 
 const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
-  const { patient, bed, asset } = patientAssetBed ?? {};
+  const { patient, bed } = patientAssetBed ?? {};
   return (
     <div className="flex items-center justify-between tracking-wide">
       <div className="flex flex-col gap-2 md:flex-row md:items-center">
@@ -49,7 +48,6 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
             </span>
           </Link>
         )}
-        <VitalsMonitorAssetPopover asset={asset} />
       </div>
     </div>
   );

From e5b67cfbf7c54bb9c884756467a629c849f1b60a Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <devarmforce01@gmail.com>
Date: Wed, 21 Feb 2024 19:54:58 +0530
Subject: [PATCH 15/15] hide header and footer from VitalsMonitor asset
 configure

---
 src/Components/Assets/AssetType/HL7Monitor.tsx           | 9 ++++++++-
 src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx | 2 +-
 .../VitalsMonitor/VentilatorPatientVitalsMonitor.tsx     | 4 +++-
 src/Components/VitalsMonitor/types.ts                    | 1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
index a7be23baad8..cca0a7571b8 100644
--- a/src/Components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/Components/Assets/AssetType/HL7Monitor.tsx
@@ -131,12 +131,19 @@ const HL7Monitor = (props: HL7MonitorProps) => {
         )}
 
         {assetType === "HL7MONITOR" && (
-          <HL7PatientVitalsMonitor key={socketUrl} socketUrl={socketUrl} />
+          <HL7PatientVitalsMonitor
+            key={socketUrl}
+            socketUrl={socketUrl}
+            hideHeader={true}
+            hideFooter={true}
+          />
         )}
         {assetType === "VENTILATOR" && (
           <VentilatorPatientVitalsMonitor
             key={socketUrl}
             socketUrl={socketUrl}
+            hideHeader={true}
+            hideFooter={true}
           />
         )}
       </div>
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 9ad178cef92..268e6c91ffa 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -179,7 +179,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
           </div>
         </div>
       </div>
-      <VitalsMonitorFooter asset={asset} />
+      {props.hideFooter ? null : <VitalsMonitorFooter asset={asset} />}
     </div>
   );
 }
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 08ca280eebf..ee3f471b22c 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -83,7 +83,9 @@ export default function VentilatorPatientVitalsMonitor(
           />
         </VitalsNonWaveformContent>
       </div>
-      <VitalsMonitorFooter asset={props.patientAssetBed?.asset} />
+      {props.hideFooter ? null : (
+        <VitalsMonitorFooter asset={props.patientAssetBed?.asset} />
+      )}
     </div>
   );
 }
diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
index 78f1b3c0442..d6812d273d6 100644
--- a/src/Components/VitalsMonitor/types.ts
+++ b/src/Components/VitalsMonitor/types.ts
@@ -51,4 +51,5 @@ export interface IVitalsComponentProps {
   socketUrl: string;
   config?: ReturnType<typeof getVitalsCanvasSizeAndDuration>;
   hideHeader?: boolean;
+  hideFooter?: boolean;
 }