(Enhancement) Make MNCH Summary widgets, MCH tile on home Dashboard c…

…onfigurable (#1916)
UCSF-IGHS · Aug 14, 2024 · febc76c · febc76c
1 parent fada1f2
commit febc76c
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "start:hct": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-hiv-care-treatment-app",
     "start:hp": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-hiv-prevention-app",
     "start:cervical-cancer": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-cervical-cancer-app",
-    "start:pmtct": "openmrs develop --backend https://ohri-namibia-dev.globalhealthapp.net --sources 'packages/esm-ohri-pmtct-app/'",
+    "start:pmtct": "openmrs develop --backend https://ohri-namibia-demo.globalhealthapp.net --sources 'packages/esm-ohri-pmtct-app/'",
     "start:form-render": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-form-render-app",
     "start:tb": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-tb-app",
     "start:opd": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-opd-app",

diff --git a/packages/esm-ohri-pmtct-app/src/config-schema.ts b/packages/esm-ohri-pmtct-app/src/config-schema.ts
@@ -47,6 +47,41 @@ export const configSchema = {
       mchEncounterTypeEncounterType: '12de5bc5-352e-4faf-9961-a2125085a75c',
     },
   },
+  showRecentPregnancy: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the Recent Pregnancy Summary widget',
+    _default: true,
+  },
+  showMotherArtTherapy: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the ART Therapy widget on MNCH Summary',
+    _default: true,
+  },
+  showAppointmentsSummary: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the Appointments widget on MNCH Summary',
+    _default: true,
+  },
+  showHivExposedInfantSummary: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the HIV Exposed Infant widget on MNCH Summary',
+    _default: true,
+  },
+  showTotalPregnantWomen: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the Total Pregnant Women tile',
+    _default: true,
+  },
+  showTotalDeliveries: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the Total Deliveries tile',
+    _default: true,
+  },
+  showHivExposedInfants: {
+    _type: Type.Boolean,
+    _description: 'Shows or hides the HIV Exposed Infants tile',
+    _default: true,
+  },
   obsConcepts: {
     _type: Type.Object,
     _description: 'List of observation concept UUIDs related to PMTCT.',
@@ -114,4 +149,11 @@ export interface ConfigObject {
   obsConcepts: Object;
   formNames: Object;
   formUuids: Object;
+  showRecentPregnancy: Boolean;
+  showMotherArtTherapy: Boolean;
+  showAppointmentsSummary: Boolean;
+  showHivExposedInfantSummary: Boolean;
+  showTotalPregnantWomen: Boolean;
+  showTotalDeliveries: Boolean;
+  showHivExposedInfants: Boolean;
 }
diff --git a/...es/esm-ohri-pmtct-app/src/pmtct/home-dashboard/maternal-child-summary-tiles.component.tsx b/...es/esm-ohri-pmtct-app/src/pmtct/home-dashboard/maternal-child-summary-tiles.component.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OHRIProgrammeSummaryTiles, fetchMambaReportData } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { useConfig } from '@openmrs/esm-framework';
 
 function MaternalChildSummaryTiles() {
   const { t } = useTranslation();
+  const config = useConfig();
+  const { showTotalPregnantWomen, showTotalDeliveries, showHivExposedInfants } = config;
 
   const [totalPregnantWomen, setTotalPregnantWomen] = useState(null);
   const [totalDeliveries, setTotalDeliveries] = useState(null);
@@ -30,29 +33,47 @@ function MaternalChildSummaryTiles() {
     fetchData();
   }, []);
 
-  const tiles = useMemo(
-    () => [
-      {
+  const tiles = useMemo(() => {
+    const allTiles = [];
+
+    if (showTotalPregnantWomen) {
+      allTiles.push({
         title: t('anc', 'ANC'),
         linkAddress: '#',
         subTitle: t('pregnantWomenAttendingFirstANC', '# Pregnant women attending first ANC'),
         value: totalPregnantWomen,
-      },
-      {
+      });
+    }
+
+    if (showTotalDeliveries) {
+      allTiles.push({
         title: t('labourDelivery', 'Labour & Delivery'),
         linkAddress: '#',
         subTitle: t('totalDeliveries', '# Total deliveries'),
         value: totalDeliveries,
-      },
-      {
+      });
+    }
+
+    if (showHivExposedInfants) {
+      allTiles.push({
         title: t('children', 'Children'),
         linkAddress: '#',
         subTitle: t('hivExposedChildrenEnrolledInFollowUpCare', '# HIV Exposed children enrolled in follow up care'),
         value: hivExposedInfants,
-      },
-    ],
-    [t, totalPregnantWomen, totalDeliveries, hivExposedInfants],
-  );
+      });
+    }
+
+    return allTiles;
+  }, [
+    t,
+    totalPregnantWomen,
+    totalDeliveries,
+    hivExposedInfants,
+    showTotalPregnantWomen,
+    showTotalDeliveries,
+    showHivExposedInfants,
+  ]);
+
   return <OHRIProgrammeSummaryTiles tiles={tiles} />;
 }
 

diff --git a/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/mch-summary.component.tsx b/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/mch-summary.component.tsx
@@ -6,12 +6,11 @@ import CurrentPregnancy from './tabs/current-pregnancy.component';
 import HivExposedInfant from './tabs/hiv-exposed-infant.component';
 import { usePatient, useConfig } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
-
 import styles from '../common.scss';
 
 const MaternalSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { identifiersTypes } = useConfig();
+  const { identifiersTypes, showRecentPregnancy, showHivExposedInfantSummary } = useConfig();
   const { patient, isLoading } = usePatient(patientUuid);
   const dob = patient?.birthDate;
   const age = useMemo(() => dayjs().diff(dayjs(patient?.birthDate), 'year'), [patient?.birthDate]);
@@ -39,7 +38,7 @@ const MaternalSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
           {age > 10 ? (
             <Tabs>
               <TabList contained>
-                <Tab>{t('recentPregnancy', 'Recent Pregnancy')}</Tab>
+                {showRecentPregnancy && <Tab>{t('recentPregnancy', 'Recent Pregnancy')}</Tab>}
               </TabList>
               <TabPanels>
                 <TabPanel>
@@ -50,7 +49,7 @@ const MaternalSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
           ) : (
             <Tabs>
               <TabList contained>
-                <Tab>{t('hivExposedInfant', 'HIV Exposed Infant')}</Tab>
+                {showHivExposedInfantSummary && <Tab>{t('hivExposedInfant', 'HIV Exposed Infant')}</Tab>}
               </TabList>
               <TabPanels>
                 <TabPanel>

diff --git a/...m-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx b/...m-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx
@@ -97,6 +97,8 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
     },
   ];
 
+  const { showRecentPregnancy, showMotherArtTherapy, showAppointmentsSummary } = config;
+
   const getParentRelationships = useCallback(async () => {
     let relationships = [];
     const relationshipsData = await fetchPatientRelationships(patientUuid);
@@ -236,10 +238,16 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
 
   return (
     <div>
-      <SummaryCard patientUuid={patientUuid} headerTitle={currentPregnancyHeader} columns={recentPregnancyTabs} />
+      {showRecentPregnancy && (
+        <SummaryCard patientUuid={patientUuid} headerTitle={currentPregnancyHeader} columns={recentPregnancyTabs} />
+      )}
       <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem', height: '15rem' }}>
-        <SummaryCard patientUuid={patientUuid} headerTitle={arvTherapyHeader} columns={arvTherapyTabs} />
-        <SummaryCard patientUuid={patientUuid} headerTitle={appointmentsHeader} columns={appointmentSummaryTabs} />
+        {showMotherArtTherapy && (
+          <SummaryCard patientUuid={patientUuid} headerTitle={arvTherapyHeader} columns={arvTherapyTabs} />
+        )}
+        {showAppointmentsSummary && (
+          <SummaryCard patientUuid={patientUuid} headerTitle={appointmentsHeader} columns={appointmentSummaryTabs} />
+        )}
       </div>
 
       <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
@@ -272,7 +280,11 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
         />
       </div>
 
-      <EncounterListTabsComponent patientUuid={patientUuid} configSchema={motherPreviousVisitConfigSchema} config={config} />
+      <EncounterListTabsComponent
+        patientUuid={patientUuid}
+        configSchema={motherPreviousVisitConfigSchema}
+        config={config}
+      />
     </div>
   );
 };

diff --git a/...-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/hiv-exposed-infant.component.tsx b/...-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/hiv-exposed-infant.component.tsx
@@ -69,6 +69,8 @@ const HivExposedInfant: React.FC<{
     },
   ];
 
+  const { showHivExposedInfantSummary } = config;
+
   const getChildPTracker = useCallback(
     async (patientUuid) => {
       let pTrackerMap = { patientId: '', pTrackerId: '--' };
@@ -120,23 +122,27 @@ const HivExposedInfant: React.FC<{
 
   return (
     <div>
-      <SummaryCard
-        patientUuid={patientUuid}
-        headerTitle={t('infantSummary', 'Infants Summary')}
-        columns={infantCardColumns}
-      />
-
-      {hivExposedInfantSummaryTabs.map((tab) => (
-        <EncounterList
+      {showHivExposedInfantSummary && (
+        <SummaryCard
           patientUuid={patientUuid}
-          encounterType={tab.encounterType}
-          columns={tab.columns}
-          description={tab.description}
-          headerTitle={tab.headerTitle}
-          formList={tab.formList}
-          launchOptions={tab.launchOptions}
+          headerTitle={t('infantSummary', 'Infants Summary')}
+          columns={infantCardColumns}
         />
-      ))}
+      )}
+
+      {showHivExposedInfantSummary &&
+        hivExposedInfantSummaryTabs.map((tab) => (
+          <EncounterList
+            key={tab.encounterType}
+            patientUuid={patientUuid}
+            encounterType={tab.encounterType}
+            columns={tab.columns}
+            description={tab.description}
+            headerTitle={tab.headerTitle}
+            formList={tab.formList}
+            launchOptions={tab.launchOptions}
+          />
+        ))}
 
       <ExpandableList
         headerTitle={t('family', 'Family')}