remove tabs and combine the configs (#4)

src/care-and-treatment/care-and-treatment.component.tsx

@@ -1,52 +1,31 @@
 import React from "react";
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from "@carbon/react";
+import { useConfig } from "@openmrs/esm-framework";
 import styles from "../common.scss";
-import { useTranslation } from "react-i18next";
-import Problem from "./tabs/problem.component";
-import Visit from "./tabs/visit.component";
-import OI from "./tabs/oi.component";
-import Allergies from "./tabs/allergies.component";
-import Hospitalization from "./tabs/hospitalization.component";
-import Image from "./tabs/image.component";
+
+import careTreatmentConfigWorkflow from "./care-treatment-config.json";
+import {
+  SummaryCard,
+  getSummaryCardProps,
+} from "@ohri/openmrs-esm-ohri-commons-lib";
 
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const CareAndTreatment: React.FC<OverviewListProps> = ({ patientUuid }) => {
-  const { t } = useTranslation();
+  const config = useConfig();
+  const cards = careTreatmentConfigWorkflow.cardDefinitions;
+
   return (
     <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          <Tab className="visit">{t("visit", "Visit")}</Tab>
-          <Tab>{t("problem", "Problem")}</Tab>
-          <Tab>{t("oi", "OI")}</Tab>
-          <Tab>{t("image", "Image")}</Tab>
-          <Tab>{t("allergies", "Allergies")}</Tab>
-          <Tab>{t("hospitalization", "Hospitalization")}</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <Visit patientUuid={patientUuid} />
-          </TabPanel>
-          <TabPanel>
-            <Problem patientUuid={patientUuid} />
-          </TabPanel>
-          <TabPanel>
-            <OI patientUuid={patientUuid} />
-          </TabPanel>
-          <TabPanel>
-            <Image patientUuid={patientUuid} />
-          </TabPanel>
-          <TabPanel>
-            <Allergies patientUuid={patientUuid} />
-          </TabPanel>
-          <TabPanel>
-            <Hospitalization patientUuid={patientUuid} />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+      {cards.map((cardContent) => (
+        <SummaryCard
+          key={cardContent.cardId}
+          headerTitle={cardContent.cardTitle}
+          patientUuid={patientUuid}
+          columns={getSummaryCardProps(cardContent, config)}
+        />
+      ))}
     </div>
   );
 };

src/care-and-treatment/care-treatment-config.json

@@ -0,0 +1,193 @@
+{
+  "menuId": "careAndTreatment",
+  "cardDefinitions": [
+    {
+      "cardId": "visit",
+      "cardTitle": "Visit",
+      "columns": [
+        {
+          "id": "weight",
+          "title": "Weight",
+          "encounterTypes": [
+            "visitEncounterType"
+          ],
+          "concept": "weightConcept"
+        },
+        {
+          "id": "tbScreening",
+          "title": "Tb Screening",
+          "encounterTypes": [
+            "visitEncounterType"
+          ],
+          "concept": "tbScreeningConcept"
+        },
+        {
+          "id": "contraception",
+          "title": "Contraception",
+          "encounterTypes": [
+            "visitEncounterType"
+          ],
+          "concept": "contraceptionConcept"
+        },
+        {
+          "id": "pregnant",
+          "title": "Pregnant",
+          "encounterTypes": [
+            "visitEncounterType"
+          ],
+          "concept": "pregnantConcept"
+        },
+        {
+          "id": "nextVisit",
+          "isDate": true,
+          "title": "Next Visit",
+          "encounterTypes": [
+            "visitEncounterType"
+          ],
+          "concept": "nextVisitConcept"
+        }
+      ]
+    },
+    {
+      "cardId": "opportunisticInfections",
+      "cardTitle": "Opportunistic Infections",
+      "columns": [
+        {
+          "id": "encounterDate",
+          "isDate": true,
+          "title": "Encounter Date",
+          "encounterTypes": [
+            "oiEncounterType"
+          ],
+          "concept": "encounterDate"
+        },
+        {
+          "id": "chronicCareDx",
+          "title": "Suspected Drug",
+          "encounterTypes": [
+            "oiEncounterType"
+          ],
+          "concept": "chronicCareDxConcept"
+        },
+        {
+          "id": "whoStage",
+          "title": "WHO Stage",
+          "encounterTypes": [
+            "oiEncounterType"
+          ],
+          "concept": "whoStageConcept"
+        },
+        {
+          "id": "criteria",
+          "title": "Criteria",
+          "encounterTypes": [
+            "oiEncounterType"
+          ],
+          "concept": "criteriaConcept"
+        }
+      ]
+    },
+    {
+      "cardId": "image",
+      "cardTitle": "Image",
+      "columns": [
+        {
+          "id": "encounterDate",
+          "isDate": true,
+          "title": "Encounter Date",
+          "encounterTypes": [
+            "imageEncounterType"
+          ],
+          "concept": "encounterDate"
+        },
+        {
+          "id": "imageOrdered",
+          "title": "Image ordered",
+          "encounterTypes": [
+          "imageEncounterType"
+          ],
+          "concept": "imageOrderedConcept"
+        }
+      ]
+    },
+    {
+      "cardId": "allergies",
+      "cardTitle": "Allergies",
+      "columns": [
+        {
+          "id": "encounterDate",
+          "isDate": true,
+          "title": "Encounter Date",
+          "encounterTypes": [
+            "allergyEncounterType"
+          ],
+          "concept": "encounterDate"
+        },
+        {
+          "id": "suspectedDrug",
+          "title": "Suspected Drug",
+          "encounterTypes": [
+            "allergyEncounterType"
+          ],
+          "concept": "suspectedDrugConcept"
+        },
+
+        {
+          "id": "drugEffect",
+          "title": "Drug Effect",
+          "encounterTypes": [
+            "allergyEncounterType"
+          ],
+          "concept": "drugEffectConcept"
+        },
+        {
+          "id": "actionTaken",
+          "title": "Action Taken",
+          "encounterTypes": [
+            "allergyEncounterType"
+          ],
+          "concept": "actionTakenConcept"
+        }
+      ]
+    },
+    {
+      "cardId": "hospitalization",
+      "cardTitle": "Hospitalization",
+      "columns": [
+        {
+          "id": "encounterDate",
+          "isDate": true,
+          "title": "Encounter Date",
+          "encounterTypes": [
+            "hospitalizationEncounterType"
+          ],
+          "concept": "encounterDate"
+        },
+        {
+          "id": "reasonForHospitalization",
+          "title": "Reason For Hospitalization",
+          "encounterTypes": [
+            "hospitalizationEncounterType"
+          ],
+          "concept": "reasonForHospitalizationConcept"
+        },
+        {
+          "id": "duration",
+          "title": "Duration",
+          "encounterTypes": [
+            "hospitalizationEncounterType"
+          ],
+          "concept": "durationConcept"
+        },
+        {
+          "id": "durationUnit",
+          "title": "Duration Unit",
+          "encounterTypes": [
+            "hospitalizationEncounterType"
+          ],
+          "concept": "durationUnitConcept"
+        }
+      ]
+    }
+  ]
+}