Merge pull request AMPATH#24 from lucyjemutai/otz

OTZ Clinical view and patient summary

packages/esm-otz-app/src/dashboard.meta.tsx

@@ -13,3 +13,25 @@ export const otzDashboardMeta = {
   title: 'OTZ clubs',
   dashboardIcon: Coronavirus,
 };
+
+export const otzPatientClinicalChartMeta = {
+  title: 'OTZ Program',
+  slotName: 'ohri-otz-slot',
+  isExpanded: false,
+};
+
+export const otzPatientSummaryMeta = {
+  slot: 'otz-patient-summary-slot',
+  columns: 1,
+  title: 'OTZ Patient Summary',
+  path: 'otz-patient-summary',
+  layoutMode: 'anchored',
+};
+
+export const otzProgramManagementDashboardMeta = {
+  slot: 'otz-program-management-summary-slot',
+  columns: 1,
+  title: 'OTZ Services',
+  path: 'otz-program-management',
+  layoutMode: 'anchored',
+};

packages/esm-otz-app/src/index.ts

@@ -1,11 +1,17 @@
 import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import Root from './root.component';
-import { otzPatientChartMeta } from './dashboard.meta';
+import {
+  otzPatientClinicalChartMeta,
+  otzPatientSummaryMeta,
+  otzProgramManagementDashboardMeta,
+} from './dashboard.meta';
 import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import OTZHomePatientTabs from './views/dashboard/patient-list-tabs/otz-patient-list-tabs.component';
 import { createLeftPanelLink } from './left-panel-link.component';
 import OTZSummaryTiles from './views/dashboard/summary-tiles/otz-summary-tiles.component';
+import otzPatientSummary from './views/dashboard/patient-summary/patient-summary.component';
+import otzProgramManagementSummary from './views/dashboard/otz-program-services/otz-program-services';
 
 export const moduleName = '@ampath/esm-otz-app';
 
@@ -22,6 +28,8 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+export const patientChartTptDashboard = getSyncLifecycle(createDashboardGroup(otzPatientClinicalChartMeta), options);
+
 export const otzLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'otz',
@@ -39,3 +47,21 @@ export const otzDashboardTabs = getSyncLifecycle(OTZHomePatientTabs, {
   featureName: 'otz-home-tabs',
   moduleName,
 });
+
+export const otzPatientSummaryDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...otzPatientSummaryMeta, moduleName }),
+  options,
+);
+export const otzPatientSummaryDashboard = getSyncLifecycle(otzPatientSummary, {
+  featureName: 'otz-patient-summary',
+  moduleName,
+});
+
+export const otzProgramManagementDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...otzProgramManagementDashboardMeta, moduleName }),
+  options,
+);
+export const otzProgramManagementDashboard = getSyncLifecycle(otzProgramManagementSummary, {
+  featureName: 'otz-program-management-summary',
+  moduleName,
+});

packages/esm-otz-app/src/routes.json

@@ -40,6 +40,56 @@
       "name": "otz-home-tabs-ext",
       "slot": "otz-home-tabs-slot",
       "component": "otzDashboardTabs"
+    },
+
+    {
+      "name": "otz-dashboard-link",
+      "slot": "dashboard-slot",
+      "component": "otzFolderLink",
+      "meta": {
+        "slot": "ohri-otz-dashboard-slot",
+        "isFolder": true,
+        "title": "OTZ Program"
+      }
+    },
+    {
+      "name": "ohri-otz",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "patientChartTptDashboard",
+      "order": 24
+    },
+    {
+      "name": "otz-patient-summary",
+      "slot": "ohri-otz-slot",
+      "component": "otzPatientSummaryDashboardLink",
+      "meta": {
+        "slot": "otz-patient-summary-slot",
+        "columns": 1,
+        "path": "otz-patient-summary",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "otz-patient-summary-ext",
+      "slot": "otz-patient-summary-slot",
+      "component": "otzPatientSummaryDashboard"
+    },
+
+    {
+      "name": "otz-program-management-summary",
+      "slot": "ohri-otz-slot",
+      "component": "otzProgramManagementDashboardLink",
+      "meta": {
+        "slot": "otz-program-management-summary-slot",
+        "columns": 1,
+        "path": "otz-program-management",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "otz-program-management-summary-ext",
+      "slot": "otz-program-management-summary-slot",
+      "component": "otzProgramManagementDashboard"
     }
   ]
 }

packages/esm-otz-app/src/views/dashboard/otz-program-services/otz-program-services.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const otzProgramManagementSummary: React.FC = () => {
+  return <div>coming soon</div>;
+};
+
+export default otzProgramManagementSummary;

packages/esm-otz-app/src/views/dashboard/patient-summary/otz-patientsummary.scss

@@ -0,0 +1,24 @@
+/* otz-patientsummary.scss */
+.summary-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.title {
+  text-align: left;
+  padding: 20px;
+}
+
+.tile {
+  width: 100%;
+  height: 200px;
+  background-color: #F0EDED;
+  margin-bottom: 10px;
+}
+
+.table {
+  width: 100%;
+  height: 200px;
+  border: 10px solid #ccc;
+}

packages/esm-otz-app/src/views/dashboard/patient-summary/patient-summary.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './otz-patientsummary.scss';
+
+const OtzPatientSummary: React.FC = () => {
+  return (
+    <div className={styles['summary-container']}>
+      <h3>Clinical Details</h3>
+      <div className={styles.tile}>coming soon</div>
+      <h3>Appointments</h3>
+      <div className={styles.tile}>coming soon</div>
+      <h3>Viral Loads</h3>
+      <div className={styles.tile}>coming soon</div>
+    </div>
+  );
+};
+
+export default OtzPatientSummary;