Introduce (i) Button Popover Component in HL7Monitor and VentilatorPatientVitalsMonitor

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,15 +66,15 @@ 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}`}
               >
                 <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>
       )}

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>
       )}

src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx

@@ -0,0 +1,74 @@
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AssetData } from "../Assets/AssetTypes";
+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;
+}
+
+const VitalsMonitorAssetPopover = ({
+  asset,
+}: VitalsMonitorAssetPopoverProps) => {
+  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-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>
+  );
+};
+
+export default VitalsMonitorAssetPopover;