@ampath/esm-dha-workflow-app 4.0.0-next.15 → 4.0.0-next.151

package/src/dashboard/overview/overview.component.scss

@@ -0,0 +1,150 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+.card {
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: white;
+    font-weight: bold;
+    flex: 0 0 250px;
+    height: 5rem;
+    min-width: 0;
+  }
+
+  .title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+}
+
+@media (max-width: 1584px) {
+  .container .card {
+    flex: 0 0 calc(20% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+@media (max-width: 1456px) {
+  .container .card {
+    flex: 0 0 calc(25% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1356px) {
+  .container .card {
+    flex: 0 0 calc(25% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1264px) {
+  .container .card {
+    flex: 0 0 calc(30% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1095px) {
+  .container .card {
+    flex: 0 0 calc(30% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1024px) {
+  .container .card {
+    flex: 0 0 calc(50% - 1rem);
+  }
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .container .card {
+    flex: 0 0 100%;
+  }
+}
+
+
+h4 {
+    font-weight: bold;
+}
+
+.dropdownItem {
+    display: flex;
+    justify-self: flex-end;
+    width: 25%; 
+    min-width: 180px; 
+    max-width: 280px;
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+}
+
+.dropdownContainer {
+  .cds--list-box__menu-item__option {
+    font-weight: 600; 
+  }
+
+  .cds--list-box__field {
+    font-weight: 600; 
+  }
+}
+
+.opd {
+    background-color: #2B579A !important;
+}
+.completed {
+    background-color: #4CAF50 !important;
+}
+
+.uncompleted {
+    background-color: #FFC107 !important;
+}
+.emergencies {
+    background-color: lightcoral !important;
+}
+
+.waitingTime {
+    background-color: lightblue !important;
+}
+.labs {
+  background-color: lightgrey !important;
+}
+
+.pharmacy {
+  background-color: lightgreen !important;
+}
+
+.text {
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-size: 1rem;
+}
+.tabsContainer {
+  margin-top: 2rem;
+}

package/src/dashboard/overview/overview.component.tsx

@@ -0,0 +1,134 @@
+import { FluidDropdown, Tab, TabList, TabPanel, TabPanels, Tabs, Tile } from '@carbon/react';
+import React, { useState } from 'react';
+import { UserMultiple, CheckmarkFilled, Time, Hospital, Chemistry, Medication } from '@carbon/react/icons';
+
+import styles from './overview.component.scss';
+import { type QueueEntryResult } from '../../registry/types';
+import PatientList from '../patient-list/patient-list.component';
+import Chart from '../charts/chart.component';
+
+interface OverviewProps {
+  triageCount?: QueueEntryResult[];
+  consultationCount?: QueueEntryResult[];
+  dashboardSummary?: any;
+}
+
+const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount, dashboardSummary }) => {
+  const totalPatients: QueueEntryResult[] = [...triageCount, ...consultationCount];
+  const patientsInQueue = totalPatients.filter(
+    (patient) => patient.status === 'WAITING' || patient.status === 'IN SERVICE',
+  ).length;
+  const [selected, setSelected] = useState<string | null>(null);
+  const triagePatients = triageCount?.length ?? 0;
+  const consultationPatients = consultationCount?.length ?? 0;
+  const dropDownItems = [
+    'Total Patients',
+    'Triage Patients',
+    'Consultation Patients',
+    'Walk-In Patients',
+    'Emergency Patients',
+  ];
+
+  const handleDropdownChange = (data: { selectedItem: string }) => {
+    const value = data.selectedItem;
+    setSelected(value);
+  };
+
+  let selectedPatients: QueueEntryResult[] = [];
+
+  switch (selected) {
+    case 'Triage Patients':
+      selectedPatients = triageCount ?? [];
+      break;
+
+    case 'Consultation Patients':
+      selectedPatients = consultationCount ?? [];
+      break;
+    case 'Walk-In Patients':
+      selectedPatients = [];
+      break;
+    case 'Emergency Patients':
+      selectedPatients = [];
+      break;
+
+    case 'Total Patients':
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+
+    default:
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+  }
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Tile className={`${styles.card} ${styles.opd}`}>
+          <h4 className={styles.text}>
+            <UserMultiple size={24} />
+            Total OPD Visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.total_opd_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.completed}`}>
+          <h4 className={styles.text}>
+            <CheckmarkFilled size={20} /> Completed Visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.completed_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.uncompleted}`}>
+          <h4 className={styles.text}>
+            <Time size={20} /> Uncompleted visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.uncompleted_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.labs}`}>
+          <h4 className={styles.text}>
+            <Chemistry size={20} /> Labs
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.labs ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.pharmacy}`}>
+          <h4 className={styles.text}>
+            <Medication size={20} /> Pharmacy
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.pharmacy ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.emergencies}`}>
+          <h4 className={styles.text}>
+            <Hospital size={20} /> Emergencies
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.emergencies ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.waitingTime}`}>
+          <h4 className={styles.text}>
+            <Time size={20} /> Avg. Waiting Time
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.average_waiting_minutes ?? 0} mins</h4>
+        </Tile>
+      </div>
+      <div className={styles.tabsContainer}>
+        <Tabs>
+          <TabList>
+            <Tab>Daily</Tab>
+            <Tab>Weekly</Tab>
+            <Tab>Monthly</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Chart dashboardId="1bdad7e2-e9a7-4cb5-886c-185f63b2eae0" />
+            </TabPanel>
+            <TabPanel>
+              <Chart dashboardId="0c59e7cd-2eba-4426-9d52-1db0866e0377" />
+            </TabPanel>
+            <TabPanel>
+              <Chart dashboardId="fe8606e8-2160-4914-860a-f5abc386d9c1" />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+
+export default Overview;

package/src/dashboard/patient-list/patient-list.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type QueueEntryResult } from '../../registry/types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+
+interface PatientListProps {
+  patients?: QueueEntryResult[];
+}
+
+const PatientList: React.FC<PatientListProps> = ({ patients }) => {
+  const layout = useLayoutType();
+  const desktop = isDesktop(layout);
+  return (
+    <Table size={desktop ? 'sm' : 'lg'}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>No</TableHeader>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Ticket</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Priority</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {patients?.map((patient, index) => {
+          return (
+            <TableRow>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{`${patient.given_name} ${patient.middle_name} ${patient.family_name}`}</TableCell>
+              <TableCell>{patient.queue_id}</TableCell>
+              <TableCell>{patient.status}</TableCell>
+              <TableCell>{patient.priority}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default PatientList;

package/src/dashboard-meta/accounting-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const accountingDashboardMeta = {
+  path: 'accounting',
+  slot: 'accounting-dashboard-slot',
+  title: 'Accounting',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/admissions-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const admissionsDashboardMeta = {
+  path: 'admissions-dashboard',
+  slot: 'admissions-dashboard-slot',
+  title: 'Admissions',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/billing-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const billingDashboardMeta = {
+  path: 'billing',
+  slot: 'ampath-billing-dashboard-slot',
+  title: 'Accounting',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/bookings-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const bookingsDashboardMeta = {
+  path: 'bookings',
+  slot: 'bookings-dashboard-slot',
+  title: 'Bookings',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/consultation-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const consultationDashboardMeta = {
+  path: 'consultation',
+  slot: 'consultation-dashboard-slot',
+  title: 'Consultation',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/dha-workflow-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const dhaWorkflowDashboardMeta = {
+  path: 'dashboard',
+  slot: 'dha-workflow-dashboard-slot',
+  title: 'Dashboard',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/inpatient-admissions.meta.ts

@@ -0,0 +1,6 @@
+export const patientChartAdmissionsMetaData = {
+  path: 'Admissions',
+  slot: 'patient-chart-admissions-summary-dashboard-slot',
+  title: 'Admissions',
+  icon: 'omrs-icon-hospital-bed',
+};

package/src/dashboard-meta/maternity-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const maternityDashboardMeta = {
+  path: 'maternity',
+  slot: 'maternity-queue-dashboard-slot',
+  title: 'Maternity',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/mch-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const mchQueueDashboardMeta = {
+  path: 'mnch',
+  slot: 'mnch-queue-dashboard-slot',
+  title: 'MCH',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/pharmacy-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const pharmacyDashboardMeta = {
+  path: 'dispensing',
+  slot: 'dispensing-dashboard-slot',
+  title: 'Pharmacy',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/queue-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const queueDashboardMeta = {
+  path: 'dashboard',
+  slot: 'queue-dashboard-slot',
+  title: 'Dashboard',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/registers-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const registersDashboardMeta = {
+  path: 'registers',
+  slot: 'registers-dashboard-slot',
+  title: 'Registers',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/registry-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const registryDashboardMeta = {
+  path: 'registry',
+  slot: 'client-registry-dashboard-slot',
+  title: 'Registry',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/service-queue-admin.meta.ts

@@ -0,0 +1,6 @@
+export const serviceQueueAdminDashboardMeta = {
+  path: 'service-queue-admin',
+  slot: 'service-queue-admin-dashboard-slot',
+  title: 'Service Queue Admin',
+  basePath: 'dha-workflow',
+};

package/src/dashboard-meta/triage-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const triageDashboardMeta = {
+  path: 'triage',
+  slot: 'triage-queue-dashboard-slot',
+  title: 'Triage',
+  basePath: `${window.spaBase}/home`,
+};

package/src/hooks/useActions.ts

@@ -1,7 +1,7 @@
-import { showModal, useConfig } from '@openmrs/esm-framework';
+import { restBaseUrl, showModal, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject, type QueueEntryAction } from '../config-schema';
 import { useMemo } from 'react';
-import { useMutateQueueEntries } from './useQueueEntries';
+import { useSWRConfig } from 'swr';
 import { type QueueEntry } from '../types/types';
 import { mapVisitQueueEntryProperties, serveQueueEntry } from '../service-queues/service-queues.resource';
 
@@ -13,6 +13,23 @@ type ActionProps = {
   isDelete?: boolean;
 };
 
+export function useMutateQueueEntries() {
+    const { mutate } = useSWRConfig();
+
+    return {
+        mutateQueueEntries: () => {
+            return mutate((key) => {
+                return (
+                    typeof key === 'string' &&
+                    (key.includes(`${restBaseUrl}/queue-entry`) || key.includes(`${restBaseUrl}/visit-queue-entry`))
+                );
+            }).then(() => {
+                window.dispatchEvent(new CustomEvent('queue-entry-updated'));
+            });
+        },
+    };
+}
+
 export function useActionPropsByKey() {
   const {
     concepts: { defaultStatusConceptUuid },

package/src/index.ts

@@ -1,13 +1,21 @@
-/**
- * This is the entrypoint file of the application. It communicates the
- * important features of this microfrontend to the app shell. It
- * connects the app shell to the React application(s) that make up this
- * microfrontend.
- */
 import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
+import { registryDashboardMeta } from './dashboard-meta/registry-dashboard.meta';
+import { createDashboardLink } from './createDashboardLink';
+import { createDashboardLink as openMrsCreateDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { queueDashboardMeta } from './dashboard-meta/queue-dashboard.meta';
+import { pharmacyDashboardMeta } from './dashboard-meta/pharmacy-dashboard.meta';
+import { triageDashboardMeta } from './dashboard-meta/triage-dashboard.meta';
+import { consultationDashboardMeta } from './dashboard-meta/consultation-dashboard.meta';
+import { dhaWorkflowDashboardMeta } from './dashboard-meta/dha-workflow-dashboard.meta';
+import { accountingDashboardMeta } from './dashboard-meta/accounting-dashboard.meta';
+import { bookingsDashboardMeta } from './dashboard-meta/bookings-dashboard.meta';
+import { serviceQueueAdminDashboardMeta } from './dashboard-meta/service-queue-admin.meta';
+import { admissionsDashboardMeta } from './dashboard-meta/admissions-dashboard.meta';
+import { patientChartAdmissionsMetaData } from './dashboard-meta/inpatient-admissions.meta';
+import { billingDashboardMeta } from './dashboard-meta/billing-dashboard.meta';
 
-const moduleName = '@ampath/openmrs-esm-home-app.js';
+export const moduleName = '@ampath/esm-dha-workflow-app';
 
 const options = {
   featureName: 'Consulation Workflow',
@@ -44,18 +52,105 @@ export const navLinks = getAsyncLifecycle(() => import('./side-nav-menu/nav-link
  */
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 export const registry = getAsyncLifecycle(() => import('./registry/registry.component'), options);
-export const waitingPatientsExtension = getAsyncLifecycle(() => import('./metrics/metrics-cards/waiting-patients.extension'), options);
-export const attendedToPatientsExtension = getAsyncLifecycle(() => import('./metrics/metrics-cards/attended-patients.extension'), options);
+export const waitingPatientsExtension = getAsyncLifecycle(
+  () => import('./service-queues/metrics/metrics-cards/waiting-patients.extension'),
+  options,
+);
+export const attendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./service-queues/metrics/metrics-cards/attended-patients.extension'),
+  options,
+);
+export const triageWaitingPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/waiting-patients.extension'),
+  options,
+);
+export const triageAttendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/attended-patients.extension'),
+  options,
+);
 
 export const workflowRegistryLink = getAsyncLifecycle(() => import('./widgets/workflow-registry-link.extension'), {
   featureName: 'workflow-registry-link',
   moduleName,
 });
 
-export const signOffModal = getAsyncLifecycle(
-  () => import('./modals/sign-off-modal'),
-  {
-    featureName: 'sign off',
-    moduleName,
-  },
+export const registryDashboardLink = getSyncLifecycle(createDashboardLink(registryDashboardMeta), options);
+
+export const registryExtension = getAsyncLifecycle(() => import('./registry/registry.component'), options);
+
+export const queueDashboardLink = getSyncLifecycle(createDashboardLink(queueDashboardMeta), options);
+
+export const queueDashboardExtension = getAsyncLifecycle(() => import('./dashboard/dashboard.component'), options);
+
+export const pharmacyDashboardLink = getSyncLifecycle(createDashboardLink(pharmacyDashboardMeta), options);
+
+export const triageDashboardLink = getSyncLifecycle(createDashboardLink(triageDashboardMeta), options);
+
+export const triageQueueExtension = getAsyncLifecycle(() => import('./triage/triage.component'), options);
+
+export const consultationDashboardLink = getSyncLifecycle(createDashboardLink(consultationDashboardMeta), options);
+
+export const consultationQueue = getAsyncLifecycle(
+  () => import('./service-queues/consultation/consultation.component'),
+  options,
+);
+
+export const dhaWorkflowDashboardLink = getSyncLifecycle(createDashboardLink(dhaWorkflowDashboardMeta), options);
+
+export const dhaWorkflowDashboard = getAsyncLifecycle(() => import('./dashboard/dashboard.component'), options);
+
+export const accountingDashboardLink = getSyncLifecycle(createDashboardLink(accountingDashboardMeta), options);
+
+export const accountingDashboard = getAsyncLifecycle(() => import('./accounting/accounting.component'), options);
+
+export const bookingsDashboardLink = getSyncLifecycle(createDashboardLink(bookingsDashboardMeta), options);
+
+export const bookings = getAsyncLifecycle(() => import('./bookings/bookings.component'), options);
+
+export const mnchQueueDashboardLink = getAsyncLifecycle(() => import('./side-nav-menu/mnch-nav-links'), options);
+
+export const MNCHRoot = getAsyncLifecycle(() => import('./mnch/mnch-root'), options);
+
+export const serviceQueueAdmin = getAsyncLifecycle(
+  () => import('./service-queues/admin/service-queue-admin-dashboard.component'),
+  options,
+);
+
+export const serviceQueuesAdminLink = getSyncLifecycle(createDashboardLink(serviceQueueAdminDashboardMeta), options);
+export const admissionsDashboardLink = getSyncLifecycle(createDashboardLink(admissionsDashboardMeta), options);
+
+export const admissionsDashboard = getAsyncLifecycle(
+  () => import('./admissions/admissions-dashboard.component'),
+  options,
+);
+
+export const serviceQueueBannerComponent = getAsyncLifecycle(
+  () => import('./service-queues/extensions/service-queue-patient-banner/service-queue-patient-banner'),
+  options,
+);
+export const patientChartAdmissionsLink = getSyncLifecycle(
+  openMrsCreateDashboardLink(patientChartAdmissionsMetaData as any),
+  options,
+);
+export const patientAdmissionSummary = getAsyncLifecycle(
+  () => import('./admissions/inpatient/inpatient-admissions.component'),
+  options,
+);
+export const billingDashboardLink = getSyncLifecycle(createDashboardLink(billingDashboardMeta), options);
+
+export const billingDashboard = getAsyncLifecycle(
+  () => import('./billing/dashboard/billingDashboard.component'),
+  options,
+);
+
+export const billingRoot = getAsyncLifecycle(() => import('./billing/billing-root'), options);
+
+export const createOrderBillFormWorkspace = getAsyncLifecycle(
+  () => import('./billing/workspaces/create-order-bill-form-workspace/create-order-bill-form.workspace'),
+  options,
+);
+
+export const visitBillingForm = getAsyncLifecycle(
+  () => import('./billing/extensions/visit-billing/visit-billing.extension'),
+  options,
 );

package/src/laboratory/laboratory.component.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
+
+const LaboratoryComponent: React.FC = () => {
+  
+  return (
+    <div>
+      <ExtensionSlot name="laboratory-dashboard-slot" />
+    </div>
+  );
+};
+
+export default LaboratoryComponent;

package/src/mnch/maternity/maternity-queues.component.scss

@@ -0,0 +1,7 @@
+.mnchLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}

package/src/mnch/maternity/maternity-queues.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './maternity-queues.component.scss';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import MaternityTriage from './queues/triage/maternity-triage';
+interface MchQueuesProps {}
+const MaternityQueues: React.FC<MchQueuesProps> = () => {
+  return (
+    <div className={styles.mnchLayout}>
+      <div className={styles.mnchHeader}>
+        <h4>Maternity</h4>
+      </div>
+      <div className={styles.mnchContent}>
+        <Tabs>
+          <TabList contained>
+            <Tab>Triage</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <MaternityTriage />
+            </TabPanel>
+
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+export default MaternityQueues;