Redesign diagnosis list

src/Components/Diagnosis/DiagnosesListAccordion.tsx

@@ -0,0 +1,107 @@
+import {
+  ActiveConditionVerificationStatuses,
+  ConditionVerificationStatus,
+  ConsultationDiagnosis,
+} from "./types";
+import { useTranslation } from "react-i18next";
+import { classNames, 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"
+            ghost
+            onClick={() => {
+              setIsVisible((prev) => !prev);
+            }}
+          >
+            <CareIcon icon="l-angle-down" className="h-7" />
+            Expand Diagnoses
+          </ButtonV2>
+        )}
+      </div>
+      <div
+        className={classNames("transition-all duration-500 ease-in-out")}
+        style={
+          isVisible
+            ? {
+                overflow: "visible",
+              }
+            : { height: "0px", 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 mt-2 w-full p-0 font-semibold text-black"
+          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>
+  );
+};

src/Components/Facility/ConsultationDetails/index.tsx

@@ -39,8 +39,7 @@ import PatientNotesSlideover from "../PatientNotesSlideover";
 import { AssetBedModel } from "../../Assets/AssetTypes";
 import PatientInfoCard from "../../Patient/PatientInfoCard";
 import RelativeDateUserMention from "../../Common/RelativeDateUserMention";
-import LegacyDiagnosesList from "../../Diagnosis/LegacyDiagnosesList";
-import AccordionV2 from "../../Common/components/AccordionV2";
+import DiagnosesListAccordion from "../../Diagnosis/DiagnosesListAccordion";
 
 const Loading = lazy(() => import("../../Common/Loading"));
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
@@ -404,20 +403,9 @@ export const ConsultationDetails = (props: any) => {
         </div>
         <div className="col-span-1 mt-2 overflow-hidden rounded-lg bg-white shadow">
           <div className="px-4 py-2">
-            <AccordionV2
-              expanded={true}
-              title={
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
-                  Diagnoses
-                </h3>
-              }
-            >
-              <div className="mt-2">
-                <LegacyDiagnosesList
-                  diagnoses={consultationData.diagnoses || []}
-                />
-              </div>
-            </AccordionV2>
+            <DiagnosesListAccordion
+              diagnoses={consultationData.diagnoses ?? []}
+            />
           </div>
         </div>
         <div className="mt-4 w-full border-b-2 border-gray-200">