Add hiv care and treatment summary tabs (#3)

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

@@ -2,9 +2,12 @@ import React from "react";
 import { Tabs, Tab, TabList, TabPanels, TabPanel } from "@carbon/react";
 import styles from "../common.scss";
 import { useTranslation } from "react-i18next";
-import TabOne from "./tabs/tab-one.component";
-import TabThree from "./tabs/tab-three.component";
-import TabTwo from "./tabs/tab-two.component";
+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";
 
 interface OverviewListProps {
   patientUuid: string;
@@ -16,19 +19,31 @@ const CareAndTreatment: React.FC<OverviewListProps> = ({ patientUuid }) => {
     <div className={styles.tabContainer}>
       <Tabs>
         <TabList contained>
-          <Tab className="tab-12rem">{t("tabOne", "Tab One")}</Tab>
-          <Tab>{t("tabTwo", "Tab Two")}</Tab>
-          <Tab>{t("tabThree", "Tab Three")}</Tab>
+          <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>
-            <TabOne patientUuid={patientUuid} />
+            <Visit patientUuid={patientUuid} />
           </TabPanel>
           <TabPanel>
-            <TabTwo patientUuid={patientUuid} />
+            <Problem patientUuid={patientUuid} />
           </TabPanel>
           <TabPanel>
-            <TabThree patientUuid={patientUuid} />
+            <OI patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <Image patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <Allergies patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <Hospitalization patientUuid={patientUuid} />
           </TabPanel>
         </TabPanels>
       </Tabs>

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

@@ -0,0 +1,40 @@
+{
+  "menuId": "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"
+    }
+  ]
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import {
+  getSummaryCardProps,
+  SummaryCard,
+} from "@ohri/openmrs-esm-ohri-commons-lib";
+import { useTranslation } from "react-i18next";
+import allergiesCongif from "./allergies-config.json";
+import { useConfig } from "@openmrs/esm-framework";
+
+const Allergies: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const allergyCardColumns = getSummaryCardProps(allergiesCongif, config);
+
+  const title = t("allergies", "Allergies");
+
+  return (
+    <SummaryCard
+      patientUuid={patientUuid}
+      headerTitle={title}
+      columns={allergyCardColumns}
+    />
+  );
+};
+
+export default Allergies;

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

@@ -0,0 +1,39 @@
+{
+  "menuId": "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"
+    }
+  ]
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import {
+  getSummaryCardProps,
+  SummaryCard,
+} from "@ohri/openmrs-esm-ohri-commons-lib";
+import { useTranslation } from "react-i18next";
+import hospitalizationConfig from "./hospitalization-config.json";
+import { useConfig } from "@openmrs/esm-framework";
+
+const Hospitalization: React.FC<{ patientUuid: string }> = ({
+  patientUuid,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const allergyCardColumns = getSummaryCardProps(hospitalizationConfig, config);
+  const title = t("hospitalization", "Hospitalization");
+
+  return (
+    <SummaryCard
+      patientUuid={patientUuid}
+      headerTitle={title}
+      columns={allergyCardColumns}
+    />
+  );
+};
+
+export default Hospitalization;

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

@@ -0,0 +1,23 @@
+{
+  "menuId": "opportunisticInfections",
+  "cardTitle": "Opportunistic Infections",
+  "columns": [
+    {
+      "id": "encounterDate",
+      "isDate": true,
+      "title": "Encounter Date",
+      "encounterTypes": [
+        "imageEncounterType"
+      ],
+      "concept": "encounterDate"
+    },
+    {
+      "id": "imageOrdered",
+      "title": "Image ordered",
+      "encounterTypes": [
+      "imageEncounterType"
+      ],
+      "concept": "imageOrderedConcept"
+    }
+  ]
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  getSummaryCardProps,
+  SummaryCard,
+} from "@ohri/openmrs-esm-ohri-commons-lib";
+import { useTranslation } from "react-i18next";
+import imageConfig from "./image-config.json";
+import { useConfig } from "@openmrs/esm-framework";
+
+const Image: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const imageCardColumns = getSummaryCardProps(imageConfig, config);
+  const title = t("image", "Image");
+
+  return (
+    <SummaryCard
+      patientUuid={patientUuid}
+      headerTitle={title}
+      columns={imageCardColumns}
+    />
+  );
+};
+
+export default Image;

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

@@ -0,0 +1,39 @@
+{
+  "menuId": "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"
+    }
+  ]
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  getSummaryCardProps,
+  SummaryCard,
+} from "@ohri/openmrs-esm-ohri-commons-lib";
+import { useTranslation } from "react-i18next";
+import { useConfig } from "@openmrs/esm-framework";
+import oiConfig from "./oi-config.json";
+
+const OI: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const oiCardColumns = getSummaryCardProps(oiConfig, config);
+  const title = t("opportunisticInfections", "Opportunistic Infections");
+
+  return (
+    <SummaryCard
+      patientUuid={patientUuid}
+      headerTitle={title}
+      columns={oiCardColumns}
+    />
+  );
+};
+
+export default OI;

src/care-and-treatment/tabs/tab-one.component.tsx → src/care-and-treatment/tabs/problem.component.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { EmptyStateComingSoon } from "@ohri/openmrs-esm-ohri-commons-lib";
 
-const TabOne: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+const Problem: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
   const { t } = useTranslation();
 
-  const title = t("tabOne", "Tab One");
+  const title = t("problem", "Problem");
 
   return (
     <>
@@ -14,4 +14,4 @@ const TabOne: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
   );
 };
 
-export default TabOne;
+export default Problem;