From 0fcd48eb2b691562498c3794206084bb196018fe Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Tue, 17 Dec 2024 01:08:37 +0530
Subject: [PATCH 1/7] shadcn Card and responsiveness added

---
 src/components/Assets/AssetType/HL7Monitor.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Assets/AssetType/HL7Monitor.tsx b/src/components/Assets/AssetType/HL7Monitor.tsx
index 269deacbf58..6ccbe0ea872 100644
--- a/src/components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/components/Assets/AssetType/HL7Monitor.tsx
@@ -1,8 +1,9 @@
 import { SyntheticEvent, useEffect, useState } from "react";
 
-import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Card } from "@/components/ui/card";
+
 import {
   AssetClass,
   AssetData,
@@ -91,7 +92,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
       <div className="mx-auto flex flex-col gap-4 xl:flex-row-reverse">
         {["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">
+            <Card className="flex flex-wrap flex-col p-4 m-4 md:m-0 w-1/2 sm:w-2/3 md:w-full">
               <form onSubmit={handleSubmit}>
                 <h2 className="mb-2 text-lg font-bold">Connection</h2>
                 <div className="flex flex-col gap-2">
@@ -135,7 +136,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
               </form>
             </Card>
             {["HL7MONITOR"].includes(assetType) && (
-              <Card>
+              <Card className="p-4 m-4 md:m-0 w-1/2 sm:w-2/3 md:w-full">
                 <MonitorConfigure asset={asset as AssetData} />
               </Card>
             )}
@@ -150,6 +151,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
             hideFooter={true}
           />
         )}
+
         {assetType === "VENTILATOR" && (
           <VentilatorPatientVitalsMonitor
             key={socketUrl}

From e15f966d4fcd151704ba4d276826304af55796bc Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Tue, 17 Dec 2024 01:28:32 +0530
Subject: [PATCH 2/7] shadcn button added

---
 src/components/Assets/AssetType/HL7Monitor.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Assets/AssetType/HL7Monitor.tsx b/src/components/Assets/AssetType/HL7Monitor.tsx
index 6ccbe0ea872..924b278d09d 100644
--- a/src/components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/components/Assets/AssetType/HL7Monitor.tsx
@@ -2,6 +2,7 @@ import { SyntheticEvent, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
 import {
@@ -10,7 +11,6 @@ import {
   ResolvedMiddleware,
 } from "@/components/Assets/AssetTypes";
 import { BedSelect } from "@/components/Common/BedSelect";
-import { Submit } from "@/components/Common/ButtonV2";
 import Loading from "@/components/Common/Loading";
 import { BedModel } from "@/components/Facility/models";
 import { FieldLabel } from "@/components/Form/FormFields/FormField";
@@ -128,10 +128,10 @@ const HL7Monitor = (props: HL7MonitorProps) => {
                     required
                     error={ipadrdress_error}
                   />
-                  <Submit className="w-full">
+                  <Button variant={"primary"} className="flex gap-2 w-full">
                     <CareIcon icon="l-save" />
                     <span>Save Configuration</span>
-                  </Submit>
+                  </Button>
                 </div>
               </form>
             </Card>
@@ -233,10 +233,10 @@ function MonitorConfigure({ asset }: { asset: AssetData }) {
             className="w-full"
           />
         </div>
-        <Submit className="mt-6 w-full shrink-0">
+        <Button variant={"primary"} className="flex gap-2 mt-6 w-full shrink-0">
           <CareIcon icon="l-bed" className="text-lg" />
           {shouldUpdateLink ? "Update Bed" : "Save Bed"}
-        </Submit>
+        </Button>
       </div>
     </form>
   );

From 6bf605c9c69c51589df7d56732f27913b2248df1 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Tue, 17 Dec 2024 18:40:03 +0530
Subject: [PATCH 3/7] try to fix  AssertionError: Timed out retrying after
 10000ms: Expected to find element: #submit, but never found it.

---
 src/components/Assets/AssetType/HL7Monitor.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Assets/AssetType/HL7Monitor.tsx b/src/components/Assets/AssetType/HL7Monitor.tsx
index 924b278d09d..485e5e62987 100644
--- a/src/components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/components/Assets/AssetType/HL7Monitor.tsx
@@ -128,7 +128,11 @@ const HL7Monitor = (props: HL7MonitorProps) => {
                     required
                     error={ipadrdress_error}
                   />
-                  <Button variant={"primary"} className="flex gap-2 w-full">
+                  <Button
+                    id="submit"
+                    variant={"primary"}
+                    className="flex gap-2 w-full"
+                  >
                     <CareIcon icon="l-save" />
                     <span>Save Configuration</span>
                   </Button>
@@ -233,7 +237,11 @@ function MonitorConfigure({ asset }: { asset: AssetData }) {
             className="w-full"
           />
         </div>
-        <Button variant={"primary"} className="flex gap-2 mt-6 w-full shrink-0">
+        <Button
+          id="submit"
+          variant={"primary"}
+          className="flex gap-2 mt-6 w-full shrink-0"
+        >
           <CareIcon icon="l-bed" className="text-lg" />
           {shouldUpdateLink ? "Update Bed" : "Save Bed"}
         </Button>

From 3a868a23ca835c37b23b8759ddf446d18d4ca530 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Wed, 18 Dec 2024 20:09:59 +0530
Subject: [PATCH 4/7] use screen's width as in other pages corrected

---
 src/components/Assets/AssetType/HL7Monitor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Assets/AssetType/HL7Monitor.tsx b/src/components/Assets/AssetType/HL7Monitor.tsx
index 485e5e62987..57d30d6cc45 100644
--- a/src/components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/components/Assets/AssetType/HL7Monitor.tsx
@@ -92,7 +92,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
       <div className="mx-auto flex flex-col gap-4 xl:flex-row-reverse">
         {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
           <div className="flex w-full shrink-0 flex-col gap-4 xl:max-w-xs">
-            <Card className="flex flex-wrap flex-col p-4 m-4 md:m-0 w-1/2 sm:w-2/3 md:w-full">
+            <Card className="flex flex-wrap flex-col p-4 m-1 mt-4 md:m-0 w-[55%] sm:w-3/4 md:w-full">
               <form onSubmit={handleSubmit}>
                 <h2 className="mb-2 text-lg font-bold">Connection</h2>
                 <div className="flex flex-col gap-2">
@@ -140,7 +140,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
               </form>
             </Card>
             {["HL7MONITOR"].includes(assetType) && (
-              <Card className="p-4 m-4 md:m-0 w-1/2 sm:w-2/3 md:w-full">
+              <Card className="p-4 m-1 md:m-0 w-[55%] sm:w-3/4 md:w-full">
                 <MonitorConfigure asset={asset as AssetData} />
               </Card>
             )}

From eb38b11618eb1618785ba41f68c9c3633cd3c6f6 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Thu, 19 Dec 2024 22:08:05 +0530
Subject: [PATCH 5/7] responsiveness updated

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

diff --git a/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 662d2786a32..797cbb6a666 100644
--- a/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -47,7 +47,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   );
 
   return (
-    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
+    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2 w-[55%] m-1 md:w-full md:m-0">
       {props.hideHeader ? null : (
         <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       )}
@@ -150,7 +150,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             </div>
           </div>
         </VitalsNonWaveformContent>
-        <div>
+        <div className="flex flex-wrap md:flex-nowrap">
           <div
             className={classNames(
               "flex flex-col items-center justify-center gap-1 p-1 text-center font-mono font-medium text-warning-500",
@@ -203,7 +203,7 @@ export const VitalsNonWaveformContent = ({
 }: {
   children: JSX.Element | JSX.Element[];
 }) => (
-  <div className="z-[5] grid grid-cols-2 gap-x-8 gap-y-4 divide-blue-600 border-b border-blue-600 bg-[#020617] tracking-wider text-white md:absolute md:inset-y-0 md:right-0 md:grid-cols-1 md:gap-0 md:divide-y md:border-b-0 md:border-l">
+  <div className="z-[5] grid grid-cols-2 gap-x-8 gap-y-8 sm:gap-y-4 mt-2  divide-blue-600 border-b border-blue-600 bg-[#020617] tracking-wider text-white md:absolute md:inset-y-0 md:right-0 md:grid-cols-1 md:gap-0 md:divide-y md:border-b-0 md:border-l md:mt-0">
     {children}
   </div>
 );

From 0c193b99a0fe6d773bcaf82836e6ccb7662b5cb5 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Thu, 19 Dec 2024 23:12:18 +0530
Subject: [PATCH 6/7] Ventilator responsiveness added

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

diff --git a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index c75ee5f2510..798e03cb84e 100644
--- a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -25,12 +25,12 @@ export default function VentilatorPatientVitalsMonitor(
   }, [props.socketUrl]);
 
   return (
-    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
+    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2 w-[55%] m-1 md:w-full md:m-0">
       {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 className="flex flex-wrap">
           <div
             className={classNames(
               "flex flex-col items-center justify-center gap-1 p-1 text-center font-mono font-medium text-warning-500",

From 50620d52041236c859903b6ac064b988eca42166 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <mohamedamaan319@gmail.com>
Date: Thu, 19 Dec 2024 23:28:17 +0530
Subject: [PATCH 7/7] responsive update

---
 src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index 798e03cb84e..dbdc6b4bff1 100644
--- a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -30,7 +30,7 @@ export default function VentilatorPatientVitalsMonitor(
         <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 className="flex flex-wrap">
+        <div className="flex flex-wrap md:flex-nowrap">
           <div
             className={classNames(
               "flex flex-col items-center justify-center gap-1 p-1 text-center font-mono font-medium text-warning-500",