diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
index a7be23baad..cca0a7571b 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" && (
-
+
)}
{assetType === "VENTILATOR" && (
)}
diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index 186dbbd48e..e063292cf2 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}
/>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 1ccd6e0626..fdbf484632 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -111,6 +111,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
meta: monitorBedData?.asset_object?.meta,
}}
socketUrl={hl7SocketUrl}
+ hideHeader={true}
/>
@@ -122,6 +123,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
meta: ventilatorBedData?.asset_object?.meta,
}}
socketUrl={ventilatorSocketUrl}
+ hideHeader={true}
/>
@@ -157,6 +159,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
}}
socketUrl={hl7SocketUrl}
config={vitals.config}
+ hideHeader={true}
/>
)}
@@ -173,6 +176,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
}}
socketUrl={ventilatorSocketUrl}
config={vitals.config}
+ hideHeader={true}
/>
)}
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index d91b0c56b2..268e6c91ff 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,6 +7,8 @@ import { IVitalsComponentProps, VitalsValueBase } from "./types";
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`;
@@ -18,7 +18,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(() => {
@@ -41,56 +41,8 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
return (
- {props.patientAssetBed && (
-
-
- {patient ? (
-
- {patient?.name}
-
- ) : (
-
-
- No Patient
-
- )}
- {patient && (
-
- {patient.age}y;{" "}
- {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
-
- )}
-
-
- {asset && (
-
-
- {asset.name}
-
- )}
- {bed && (
-
-
-
- {bed.name}
-
-
-
- {bed.location_object?.name}
-
-
- )}
-
-
+ {props.hideHeader ? null : (
+
)}
@@ -227,6 +179,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
+ {props.hideFooter ? null :
- {props.patientAssetBed && (
-
-
- {patient ? (
-
- {patient?.name}
-
- ) : (
-
-
- No Patient
-
- )}
- {patient && (
-
- {patient.age}y;{" "}
- {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
-
- )}
-
-
- {asset && (
-
-
-
-
- {asset.name}
-
-
-
- )}
- {bed && (
-
-
-
-
- {bed.name}
-
-
-
- {bed.location_object?.name}
-
-
-
- )}
-
-
+ {props.hideHeader ? null : (
+
)}
@@ -138,6 +83,9 @@ export default function VentilatorPatientVitalsMonitor(
/>
+ {props.hideFooter ? null : (
+
+ )}
);
}
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
new file mode 100644
index 0000000000..cf56c3c5e5
--- /dev/null
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -0,0 +1,77 @@
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AssetData, assetClassProps } 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 (
+
+
+
+
+
+
+
+
+
+
Middleware Hostname:
+
+ {asset?.resolved_middleware?.hostname}
+
+
+
+
Local IP Address:
+
+ {asset?.meta?.local_ip_address}
+
+
+
+ navigate(
+ `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
+ )
+ }
+ id="configure-asset"
+ data-testid="asset-configure-button"
+ >
+
+ {t("configure")}
+
+
+
+
+
+ );
+};
+
+export default VitalsMonitorAssetPopover;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
new file mode 100644
index 0000000000..a9598f1696
--- /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 (
+
+ );
+};
+
+export default VitalsMonitorFooter;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
new file mode 100644
index 0000000000..2f9df8607b
--- /dev/null
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -0,0 +1,56 @@
+import { PatientAssetBed } from "../Assets/AssetTypes";
+import { Link } from "raviger";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { GENDER_TYPES } from "../../Common/constants";
+
+interface VitalsMonitorHeaderProps {
+ patientAssetBed?: PatientAssetBed;
+}
+
+const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
+ const { patient, bed } = patientAssetBed ?? {};
+ return (
+
+
+ {patient ? (
+
+ {patient?.name}
+
+ ) : (
+
+
+ No Patient
+
+ )}
+ {patient && (
+
+ {patient.age}y;{" "}
+ {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
+
+ )}
+
+
+ {bed && (
+
+
+
+ {bed.name}
+
+
+
+ {bed.location_object?.name}
+
+
+ )}
+
+
+ );
+};
+
+export default VitalsMonitorHeader;
diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
index c73d7399b5..d6812d273d 100644
--- a/src/Components/VitalsMonitor/types.ts
+++ b/src/Components/VitalsMonitor/types.ts
@@ -50,4 +50,6 @@ export interface IVitalsComponentProps {
patientAssetBed?: PatientAssetBed;
socketUrl: string;
config?: ReturnType
;
+ hideHeader?: boolean;
+ hideFooter?: boolean;
}