Consultation update page form UI updated

cypress/pageobject/Patient/PatientLogupdate.ts

@@ -88,9 +88,17 @@ class PatientLogupdate {
     cy.wait(3000);
   }
 
+  // clickUpdateDetail() {
+  //   cy.verifyAndClickElement("#consultation-preview", "Update Log");
+  //   cy.wait(3000);
+  // }
+
   clickUpdateDetail() {
     cy.verifyAndClickElement("#consultation-preview", "Update Log");
-    cy.wait(3000);
+
+    // Wait dynamically for the desired element or state to confirm success
+    cy.get("#consultation-preview", { timeout: 30000 }) // Adjust timeout as needed
+      .should("be.visible"); // Ensure the element remains visible after the action
   }
 
   clearIntoElementById(elementId) {

cypress/support/commands.ts

@@ -113,8 +113,19 @@ Cypress.Commands.add(
   },
 );
 
+// Cypress.Commands.add("verifyNotification", (text) => {
+//   return cy.get(".pnotify-container").should("exist").contains(text);
+// });
 Cypress.Commands.add("verifyNotification", (text) => {
-  return cy.get(".pnotify-container").should("exist").contains(text);
+  cy.log(`Verifying notification with text: "${text}"`);
+
+  // Ensure the notification container exists and contains the text
+  cy.get(".pnotify-container", { timeout: 30000 }) // Increased timeout for slower loads
+    .should("be.visible")
+    .and("contain.text", text)
+    .then(() => {
+      cy.log(`Notification verified: "${text}"`);
+    });
 });
 
 Cypress.Commands.add("clearAllFilters", () => {

src/components/LogUpdate/CriticalCarePreview.tsx

@@ -82,32 +82,82 @@ export default function CriticalCarePreview(props: Props) {
             <span>{t(`ROUNDS_TYPE__${data.rounds_type}`)}</span>
           </div>
         </h2>
-
         <Section title="General">
-          <Detail label="Patient Category" value={data.patient_category} />
-          <Detail
-            label="Physical Examination Info"
-            value={data.physical_examination_info}
-          />
-          <Detail label="Other Details" value={data.other_details} />
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {data?.patient_category && (
+              <div className="flex items-center rounded-lg border p-4">
+                <div>
+                  <Detail
+                    label="Patient Category"
+                    value={data.patient_category}
+                  />
+                </div>
+              </div>
+            )}
+
+            {data?.physical_examination_info && (
+              <div className="flex items-center rounded-lg border p-4">
+                <div>
+                  <Detail
+                    label="Physical Examination Info"
+                    value={data.physical_examination_info}
+                  />
+                </div>
+              </div>
+            )}
+
+            {data?.other_details && (
+              <div className="flex items-center rounded-lg border p-4">
+                <div>
+                  <Detail label="Other Details" value={data.other_details} />
+                </div>
+              </div>
+            )}
+          </div>
         </Section>
 
         <Section title="Routine">
-          <ChoiceDetail data={data} name="sleep" />
-          <ChoiceDetail data={data} name="bowel_issue" />
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <div className="flex items-center  rounded-lg border p-4">
+              <ChoiceDetail data={data} name="sleep" />
+            </div>
+            <div className="flex items-center  rounded-lg border p-4">
+              <ChoiceDetail data={data} name="bowel_issue" />
+            </div>
+          </div>
+
           <Section subSection title="Bladder">
-            <ChoiceDetail data={data} name="bladder_drainage" />
-            <ChoiceDetail data={data} name="bladder_issue" />
-            <Detail
-              label={t("LOG_UPDATE_FIELD_LABEL__is_experiencing_dysuria")}
-              value={data.is_experiencing_dysuria}
-            />
-            <ChoiceDetail data={data} name="urination_frequency" />
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <div className="flex items-center rounded-lg border p-4">
+                <ChoiceDetail data={data} name="bladder_drainage" />
+              </div>
+              <div className="flex items-center  rounded-lg border p-4">
+                <ChoiceDetail data={data} name="bladder_issue" />
+              </div>
+            </div>
+            <div className="mb-2 max-w-96 space-y-1 rounded border border-secondary-300 bg-secondary-100 p-3 my-4">
+              <Detail
+                label={t("LOG_UPDATE_FIELD_LABEL__is_experiencing_dysuria")}
+                value={data.is_experiencing_dysuria}
+              />
+              <ChoiceDetail data={data} name="urination_frequency" />
+            </div>
           </Section>
+
           <Section subSection title="Nutrition">
-            <ChoiceDetail data={data} name="nutrition_route" />
-            <ChoiceDetail data={data} name="oral_issue" />
-            <ChoiceDetail data={data} name="appetite" />
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <div className="flex items-center rounded-lg border p-4">
+                <ChoiceDetail data={data} name="nutrition_route" />
+              </div>
+              {data.oral_issue && (
+                <div className="flex items-center  rounded-lg border p-4">
+                  <ChoiceDetail data={data} name="oral_issue" />
+                </div>
+              )}
+              <div className="flex items-center  rounded-lg border p-4">
+                <ChoiceDetail data={data} name="appetite" />
+              </div>
+            </div>
           </Section>
         </Section>
 
@@ -202,8 +252,8 @@ export default function CriticalCarePreview(props: Props) {
           </div>
         </Section>
 
-        <Section title="Arterial Blood Gas Analaysis">
-          <ul className="grid grid-cols-1 gap-3 lg:grid-cols-3">
+        <Section title="Arterial Blood Gas Analysis">
+          <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {ABGAnalysisFields.map((field) => {
               const value = data[field.key];
               return (
@@ -222,34 +272,51 @@ export default function CriticalCarePreview(props: Props) {
         </Section>
 
         <Section title="Blood Sugar">
-          <RangeDetail
-            label="Blood Sugar Level"
-            value={data.blood_sugar_level}
-            valueDescriptions={rangeValueDescription({ low: 69, high: 110 })}
-            max={700}
-            unit="mg/dL"
-          />
-          <Detail label="Dosage" value={data.insulin_intake_dose} />
-          <Detail
-            label="Frequency"
-            value={tOption(
-              "INSULIN_INTAKE_FREQUENCY",
-              "insulin_intake_frequency",
-            )}
-          />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="mb-2 max-w-96 space-y-1 rounded border border-secondary-300 bg-secondary-100 p-3">
+              <RangeDetail
+                label="Blood Sugar Level"
+                value={data.blood_sugar_level}
+                valueDescriptions={rangeValueDescription({
+                  low: 69,
+                  high: 110,
+                })}
+                max={700}
+                unit="mg/dL"
+              />
+            </div>
+            <div>
+              <Detail label="Dosage" value={data.insulin_intake_dose} />
+            </div>
+            <div>
+              <Detail
+                label="Frequency"
+                value={tOption(
+                  "INSULIN_INTAKE_FREQUENCY",
+                  "insulin_intake_frequency",
+                )}
+              />
+            </div>
+          </div>
         </Section>
 
         <Section title="Dialysis">
-          <Detail
-            label="Fluid Balance"
-            value={data.dialysis_fluid_balance}
-            suffix="ml/h"
-          />
-          <Detail
-            label="Net Balance"
-            value={data.dialysis_net_balance}
-            suffix="ml/h"
-          />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2">
+            <div>
+              <Detail
+                label="Fluid Balance"
+                value={data.dialysis_fluid_balance}
+                suffix="ml/h"
+              />
+            </div>
+            <div>
+              <Detail
+                label="Net Balance"
+                value={data.dialysis_net_balance}
+                suffix="ml/h"
+              />
+            </div>
+          </div>
         </Section>
 
         <Section title="Vitals" show={!!data.pain_scale_enhanced?.length}>
@@ -279,53 +346,49 @@ export default function CriticalCarePreview(props: Props) {
               />
             </div>
           )}
-          <RangeDetail
-            label={
-              <span>
-                SpO<sub>2</sub>
-              </span>
-            }
-            value={data.ventilator_spo2}
-            max={100}
-            unit="%"
-            valueDescriptions={rangeValueDescription({ low: 89 })}
-          />
-          <RangeDetail
-            label="Temperature"
-            value={data.temperature}
-            max={106}
-            unit="°F"
-            valueDescriptions={rangeValueDescription({ low: 97.4, high: 99.6 })}
-          />
-          <RangeDetail
-            label="Respiratory Rate"
-            value={data.resp}
-            max={150}
-            unit="bpm"
-            valueDescriptions={rangeValueDescription({ low: 11, high: 16 })}
-          />
-          <RangeDetail
-            label="Pulse"
-            value={data.pulse}
-            unit="bpm"
-            max={200}
-            valueDescriptions={[
-              {
-                till: 40,
-                className: "text-red-500",
-                text: "Bradycardia",
-              },
-              {
-                till: 100,
-                className: "text-green-500",
-                text: "Normal",
-              },
-              {
-                className: "text-red-500",
-                text: "Tachycardia",
-              },
-            ]}
-          />
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <RangeDetail
+              label={
+                <span>
+                  SpO<sub>2</sub>
+                </span>
+              }
+              value={data.ventilator_spo2}
+              max={100}
+              unit="%"
+              valueDescriptions={rangeValueDescription({ low: 89 })}
+            />
+            <RangeDetail
+              label="Temperature"
+              value={data.temperature}
+              max={106}
+              unit="°F"
+              valueDescriptions={rangeValueDescription({
+                low: 97.4,
+                high: 99.6,
+              })}
+            />
+            <RangeDetail
+              label="Respiratory Rate"
+              value={data.resp}
+              max={150}
+              unit="bpm"
+              valueDescriptions={rangeValueDescription({ low: 11, high: 16 })}
+            />
+            <RangeDetail
+              label="Pulse"
+              value={data.pulse}
+              unit="bpm"
+              max={200}
+              valueDescriptions={[
+                { till: 40, className: "text-red-500", text: "Bradycardia" },
+                { till: 100, className: "text-green-500", text: "Normal" },
+                { className: "text-red-500", text: "Tachycardia" },
+              ]}
+            />
+          </div>
+
           <Detail
             label={t("LOG_UPDATE_FIELD_LABEL__rhythm")}
             value={data.rhythm && t(`HEARTBEAT_RHYTHM__${data.rhythm}`)}
@@ -334,6 +397,7 @@ export default function CriticalCarePreview(props: Props) {
             label={t("LOG_UPDATE_FIELD_LABEL__rhythm_detail")}
             value={data.rhythm_detail}
           />
+
           {!!data.pain_scale_enhanced?.length && (
             <>
               <h4 className="py-4">Pain Scale</h4>