Redesign Patient Info Card (#7077)

* Redesign Patient Info Card * Responsive view * Fix null reference exception in LegacyDiagnosesList.tsx * Fix Cypress * Update click selector for "Edit Consultation Details" button * Remove unnecessary center alignment in PatientInfoCard * Refactor LegacyDiagnosesList component and remove unused imports * Redesign diagnosis list * Refactor to use tailwind classes * Make hide diagnoses less intrusive * Add "Manage Patient" button click in clickEditConsultationButton method
ohcnetwork · Feb 7, 2024 · e9f3cc5 · e9f3cc5
1 parent 1dd0ada
commit e9f3cc5
Show file tree

Hide file tree

Showing 10 changed files with 508 additions and 455 deletions.
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -151,6 +151,7 @@ export class PatientConsultationPage {
 
   clickEditConsultationButton() {
     cy.get("#consultation-buttons").scrollIntoView();
+    cy.get("button").contains("Manage Patient").click();
     cy.get("#consultation-buttons")
       .contains("Edit Consultation Details")
       .click();

diff --git a/src/Components/Common/RelativeDateUserMention.tsx b/src/Components/Common/RelativeDateUserMention.tsx
@@ -6,6 +6,7 @@ function RelativeDateUserMention(props: {
   actionDate?: string;
   user?: PerformedByModel;
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  withoutSuffix?: boolean;
 }) {
   return (
     <div className="flex flex-row flex-wrap items-center justify-center ">
@@ -15,7 +16,9 @@ function RelativeDateUserMention(props: {
         >
           {props.actionDate ? formatDateTime(props.actionDate) : "--:--"}
         </span>
-        {props.actionDate ? relativeDate(props.actionDate) : "--:--"}
+        {props.actionDate
+          ? relativeDate(props.actionDate, props.withoutSuffix ?? false)
+          : "--:--"}
       </div>
       {props.user && (
         <div className="tooltip">

diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
@@ -1,5 +1,4 @@
 import { useRef, useState } from "react";
-import { classNames } from "../../../Utils/utils";
 
 export default function AccordionV2(props: {
   children: JSX.Element | JSX.Element[];
@@ -55,15 +54,10 @@ export default function AccordionV2(props: {
         </button>
       </div>
       <div
-        className={classNames("transition-all duration-500 ease-in-out")}
+        className={`transition-all duration-500 ease-in-out ${
+          toggle ? "overflow-visible" : "h-0 overflow-hidden"
+        }`}
         ref={contentEl}
-        style={
-          toggle
-            ? {
-                overflow: "visible",
-              }
-            : { height: "0px", overflow: "hidden" }
-        }
       >
         {props.children}
       </div>

diff --git a/src/Components/Diagnosis/DiagnosesListAccordion.tsx b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
@@ -0,0 +1,102 @@
+import {
+  ActiveConditionVerificationStatuses,
+  ConditionVerificationStatus,
+  ConsultationDiagnosis,
+} from "./types";
+import { useTranslation } from "react-i18next";
+import { compareBy } from "../../Utils/utils";
+import { useState } from "react";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ButtonV2 from "../Common/components/ButtonV2";
+
+interface Props {
+  diagnoses: ConsultationDiagnosis[];
+}
+
+type GroupedDiagnoses = Record<
+  ConditionVerificationStatus,
+  ConsultationDiagnosis[]
+>;
+
+function groupDiagnoses(diagnoses: ConsultationDiagnosis[]) {
+  const groupedDiagnoses = {} as GroupedDiagnoses;
+
+  for (const status of ActiveConditionVerificationStatuses) {
+    groupedDiagnoses[status] = diagnoses
+      .filter((d) => d.verification_status === status)
+      .sort(compareBy("is_principal"));
+  }
+
+  return groupedDiagnoses;
+}
+
+export default function DiagnosesListAccordion(props: Props) {
+  const [isVisible, setIsVisible] = useState(true);
+  const diagnoses = groupDiagnoses(props.diagnoses);
+
+  return (
+    <div>
+      <div className="flex justify-between">
+        {!isVisible && (
+          <ButtonV2
+            className="text-md w-full p-0 font-semibold text-black hover:bg-gray-200"
+            ghost
+            onClick={() => {
+              setIsVisible((prev) => !prev);
+            }}
+          >
+            <CareIcon icon="l-angle-down" className="h-7" />
+            Expand Diagnoses
+          </ButtonV2>
+        )}
+      </div>
+      <div
+        className={`transition-all duration-500 ease-in-out ${
+          isVisible ? "overflow-visible" : "h-0 overflow-hidden"
+        }`}
+      >
+        <h3 className="my-2 text-lg font-semibold leading-relaxed text-gray-900">
+          Diagnoses
+        </h3>
+        <div className="grid grid-cols-1 items-start gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+          {Object.entries(diagnoses).map(
+            ([status, diagnoses]) =>
+              !!diagnoses.length && (
+                <DiagnosesOfStatus key={status} diagnoses={diagnoses} />
+              )
+          )}
+        </div>
+        <ButtonV2
+          className="text-md w-full rounded-lg p-0 text-gray-600 hover:bg-gray-200"
+          ghost
+          onClick={() => {
+            setIsVisible(false);
+          }}
+        >
+          <CareIcon icon="l-angle-up" className="h-7" />
+          Hide Diagnoses
+        </ButtonV2>
+      </div>
+    </div>
+  );
+}
+
+const DiagnosesOfStatus = ({ diagnoses }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h2 className="text-sm font-semibold">
+        {t(diagnoses[0].verification_status)} {t("diagnoses")}{" "}
+        <span>({t("icd11_as_recommended")})</span>
+      </h2>
+      <ul className="text-sm">
+        {diagnoses.map((diagnosis) => (
+          <li key={diagnosis.id} className="flex items-center gap-2">
+            <span>{diagnosis.diagnosis_object?.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/Components/Diagnosis/LegacyDiagnosesList.tsx b/src/Components/Diagnosis/LegacyDiagnosesList.tsx
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -342,7 +342,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <span className="text-xs font-semibold leading-relaxed text-gray-800">
                           from{" "}
                           {formatDate(
-                            props.consultationData.last_daily_round.created_at
+                            props.consultationData.last_daily_round.taken_at
                           )}
                         </span>
                       </>
@@ -602,58 +602,59 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
               </div>
             </div>
           )}
-
-          <div className="mt-4 overflow-hidden rounded-lg bg-white shadow">
-            <div className="px-4 py-5 sm:p-6">
-              <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
-                Body Details
-              </h3>
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                <div>
-                  Gender {" - "}
-                  <span className="font-semibold">
-                    {props.patientData.gender ?? "-"}
-                  </span>
-                </div>
-                <div>
-                  Age {" - "}
-                  <span className="font-semibold">
-                    {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
-                      ? formatAge(
-                          props.patientData.age,
-                          props.patientData.date_of_birth
-                        )
-                      : "-"}
-                  </span>
-                </div>
-                <div>
-                  Weight {" - "}
-                  <span className="font-semibold">
-                    {props.consultationData.weight ?? "-"} Kg
-                  </span>
-                </div>
-                <div>
-                  Height {" - "}
-                  <span className="font-semibold">
-                    {props.consultationData.height ?? "-"} cm
-                  </span>
-                </div>
-                <div>
-                  Body Surface Area {" - "}
-                  <span className="font-semibold">
-                    {Math.sqrt(
-                      (Number(props.consultationData.weight) *
-                        Number(props.consultationData.height)) /
-                        3600
-                    ).toFixed(2)}{" "}
-                    m<sup>2</sup>
-                  </span>
-                </div>
-                <div>
-                  Blood Group {" - "}
-                  <span className="font-semibold">
-                    {props.patientData.blood_group ?? "-"}
-                  </span>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="col-span-1 mt-4 overflow-hidden rounded-lg bg-white shadow">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  Body Details
+                </h3>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    Gender {" - "}
+                    <span className="font-semibold">
+                      {props.patientData.gender ?? "-"}
+                    </span>
+                  </div>
+                  <div>
+                    Age {" - "}
+                    <span className="font-semibold">
+                      {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
+                        ? formatAge(
+                            props.patientData.age,
+                            props.patientData.date_of_birth
+                          )
+                        : "-"}
+                    </span>
+                  </div>
+                  <div>
+                    Weight {" - "}
+                    <span className="font-semibold">
+                      {props.consultationData.weight ?? "-"} Kg
+                    </span>
+                  </div>
+                  <div>
+                    Height {" - "}
+                    <span className="font-semibold">
+                      {props.consultationData.height ?? "-"} cm
+                    </span>
+                  </div>
+                  <div>
+                    Body Surface Area {" - "}
+                    <span className="font-semibold">
+                      {Math.sqrt(
+                        (Number(props.consultationData.weight) *
+                          Number(props.consultationData.height)) /
+                          3600
+                      ).toFixed(2)}{" "}
+                      m<sup>2</sup>
+                    </span>
+                  </div>
+                  <div>
+                    Blood Group {" - "}
+                    <span className="font-semibold">
+                      {props.patientData.blood_group ?? "-"}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>