OHRI-2122 Add Program Management under the TPT Program

UCSF-IGHS · Jan 22, 2024 · 4dc4b18 · 4dc4b18
1 parent d580dab
commit 4dc4b18
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 2 deletions.
diff --git a/packages/esm-tb-app/src/dashboard.meta.tsx b/packages/esm-tb-app/src/dashboard.meta.tsx
@@ -51,4 +51,18 @@ export const tbCasesDashboardMeta = {
   config: { columns: 1, type: 'grid', programme: 'tb', dashboardTitle: 'TB Treatment', icon: PillsAdd },
   title: 'TB Treatment',
   dashboardIcon: PillsAdd,
-};
+};
+
+export const tptPatientChartMeta = {
+  title: 'TPT Program',
+  slotName: 'ohri-tpt-slot',
+  isExpanded: false,
+};
+
+export const tptProgramManagementDashboardMeta = {
+  slot: 'tpt-program-management-summary-slot',
+  columns: 1,
+  title: 'Program Management',
+  path: 'tpt-program-management',
+  layoutMode: 'anchored',
+};
diff --git a/packages/esm-tb-app/src/index.ts b/packages/esm-tb-app/src/index.ts
@@ -9,6 +9,8 @@ import {
   tbTreatmentFollowUpDashboardMeta,
   tbClinicalViewDashboardMeta,
   tbCasesDashboardMeta,
+  tptProgramManagementDashboardMeta,
+  tptPatientChartMeta,
 } from './dashboard.meta';
 import { configSchema } from './config-schema';
 import TBSummaryOverviewList from './views/patient-summary/tb-patient-summary.component';
@@ -17,6 +19,7 @@ import TbTreatmentFollowUpList from './views/treatment-and-follow-up/tb-treatmen
 import TbContactTracingList from './views/tb-contact-listing/tb-contact-list.component';
 import TbSummaryTiles from './views/dashboard/summary-tiles/tb-summary-tiles.component';
 import TbHomePatientTabs from './views/dashboard/patient-list-tabs/tb-patient-list-tabs.component';
+import tptProgramManagementSummary from './views/tpt/program-management/tpt-program-management';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -35,6 +38,8 @@ export function startupApp() {
 
 export const patientChartTbDashboard = getSyncLifecycle(createDashboardGroup(tbPatientChartMeta), options);
 
+export const patientChartTptDashboard = getSyncLifecycle(createDashboardGroup(tptPatientChartMeta), options);
+
 export const tbPatientSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...tbPatientSummaryDashboardMeta, moduleName }),
   options,
@@ -84,6 +89,15 @@ export const tbDashboardTabs = getSyncLifecycle(TbHomePatientTabs, {
   moduleName,
 });
 
+export const tptProgramManagementDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...tptProgramManagementDashboardMeta, moduleName }),
+  options,
+);
+export const tptProgramManagementDashboard = getSyncLifecycle(tptProgramManagementSummary, {
+  featureName: 'tpt-program-management-summary',
+  moduleName,
+});
+
 // OHRI HOME
 export const tbClinicalViewDashboardLink = getSyncLifecycle(
   createOHRIDashboardLink(tbClinicalViewDashboardMeta),

diff --git a/packages/esm-tb-app/src/routes.json b/packages/esm-tb-app/src/routes.json
@@ -22,6 +22,23 @@
       "component": "patientChartTbDashboard",
       "order": 24
     },
+
+    {
+      "name": "tpt-dashboard-link",
+      "slot": "dashboard-slot",
+      "component": "tptFolderLink",
+      "meta": {
+        "slot": "ohri-tpt-dashboard-slot",
+        "isFolder": true,
+        "title": "TPT Program"
+      }
+    },
+    {
+      "name": "ohri-tpt",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "patientChartTptDashboard",
+      "order": 24
+    },
 
     {
       "name": "tb-summary-dashboard",
@@ -57,6 +74,23 @@
       "component": "tbProgramManagementDashboard"
     },
 
+    {
+      "name": "tpt-program-management-summary",
+      "slot": "ohri-tpt-slot",
+      "component": "tptProgramManagementDashboardLink",
+      "meta": {
+        "slot": "tpt-program-management-summary-slot",
+        "columns": 1,
+        "path": "tpt-program-management",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "tpt-program-management-summary-ext",
+      "slot": "tpt-program-management-summary-slot",
+      "component": "tptProgramManagementDashboard"
+    },
+
     {
       "name": "tb-treatment-follow-up-summary",
       "slot": "ohri-tb-slot",

diff --git a/packages/esm-tb-app/src/views/tpt/program-management/tabs/tpt-enrolment.component.tsx b/packages/esm-tb-app/src/views/tpt/program-management/tabs/tpt-enrolment.component.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+interface TptEnrolmentListProps {
+  patientUuid: string;
+}
+
+const TptEnrolmentList: React.FC<TptEnrolmentListProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const headerTitle = t('tptTreatment');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default TptEnrolmentList;
diff --git a/packages/esm-tb-app/src/views/tpt/program-management/tabs/tpt-treatment.component copy.tsx b/packages/esm-tb-app/src/views/tpt/program-management/tabs/tpt-treatment.component copy.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+interface TptTreatmentListProps {
+  patientUuid: string;
+}
+
+const TptTreatmentList: React.FC<TptTreatmentListProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const headerTitle = t('TptEnrolment');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default TptTreatmentList;
diff --git a/packages/esm-tb-app/src/views/tpt/program-management/tpt-program-management.tsx b/packages/esm-tb-app/src/views/tpt/program-management/tpt-program-management.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import styles from '../../common.scss';
+import { useTranslation } from 'react-i18next';
+import TptTreatmentList from './tabs/tpt-treatment.component copy';
+import TptEnrolmentList from './tabs/tpt-enrolment.component';
+import { PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const TptProgramManagementSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.tabContainer}>
+      <Tabs>
+        <TabList contained>
+          <Tab>{t('tptEnrolment')}</Tab>
+          <Tab>{t('tptTreatment')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <TptEnrolmentList patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <TptTreatmentList patientUuid={patientUuid} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default TptProgramManagementSummary;
diff --git a/packages/esm-tb-app/translations/en.json b/packages/esm-tb-app/translations/en.json
@@ -28,5 +28,7 @@
   "nextAppointment": "Next Appointment",
   "siteOfTb": "Site of TB",
   "appointmentDate": "Appointment Date",
-  "editFollowUpForm": "Edit TB Follow-up Form"
+  "editFollowUpForm": "Edit TB Follow-up Form",
+  "tptEnrolment": "TPT Enrolment", 
+  "tptTreatment": "TPT Treatment"
 }