@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/index.ts

@@ -1,11 +1,19 @@
-/**
- * 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 { caseSummaryMeta } from './dashboard-meta/case-summary.meta';
 
 export const moduleName = '@ampath/esm-dha-workflow-app';
 
@@ -65,3 +73,166 @@ export const workflowRegistryLink = getAsyncLifecycle(() => import('./widgets/wo
   featureName: 'workflow-registry-link',
   moduleName,
 });
+
+export const registryDashboardLink = getSyncLifecycle(createDashboardLink(registryDashboardMeta), options);
+
+export const registryExtension = getAsyncLifecycle(() => import('./registry/registry-entry'), 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 specializedClinicsDashboardLink = getAsyncLifecycle(
+  () => import('./side-nav-menu/specialized-clinics-nav-links'),
+  options,
+);
+
+export const MNCHRoot = getAsyncLifecycle(() => import('./mnch/mnch-root'), options);
+
+export const SpecializedClinicsRoot = getAsyncLifecycle(
+  () => import('./specialized-clinics/specialized-clinics-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 caseSummaryLink = getSyncLifecycle(openMrsCreateDashboardLink(caseSummaryMeta as any), options);
+
+export const caseSummary = getAsyncLifecycle(() => import('./case-summary/case-summary.extension'), options);
+export const billingDashboardLink = getAsyncLifecycle(
+  () => import('./billing/billing-dashboard-link.component'),
+  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,
+);
+
+export const claims = getAsyncLifecycle(() => import('./claims/claims.component'), options);
+
+export const formEntryWorkspace = getAsyncLifecycle(
+  () => import('./admissions/form-entry-workspace/form-entry-workspace'),
+  {
+    featureName: 'admissions-form-entry',
+    moduleName,
+  },
+);
+
+export const uploadInterventionAttachmentsWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/patient-bill-details/attachments/add-attachments.component'),
+  options,
+);
+
+export const generateInterventionAttachmentsWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/patient-bill-details/attachments/generate-attachments.component'),
+  options,
+);
+
+export const billItemPaymentWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/patient-bill-details/workspaces/bill-item-payment/bill-item-payment.workspace'),
+  options,
+);
+
+export const addClaimLineWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/patient-bill-details/workspaces/add-claim-line/add-claim-line.workspace'),
+  options,
+);
+
+export const switchInterventionWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/claim-visits/switch-intervention/switch-intervention.workspace'),
+  options,
+);
+
+export const preauthFormWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v3/preauth/preauth.workspace'),
+  options,
+);
+
+export const recordDetailsWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/claim-visits/shared/record-details.workspace'),
+  options,
+);
+
+export const payCashWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v2/clearance/pay-cash.component'),
+  options,
+);
+
+export const sendToQueueWorkspace = getAsyncLifecycle(
+  () => import('./registry/modal/send-to-triage/send-to-queue.modal'),
+  options,
+);
+
+export const generateOrderBillButton = getAsyncLifecycle(
+  () => import('./billing/extensions/generate-order-bill-button/generate-order-bill-button.extension'),
+  options,
+);
+
+export const payerPreviewWorkspace = getAsyncLifecycle(
+  () => import('./billing/dashboard/v3/claim-visits/payer-preview/payer-preview-workspace.component'),
+  options,
+);

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,32 @@
+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';
+import FacilityAndWorkerSlot from '../../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+interface MchQueuesProps {}
+const MaternityQueues: React.FC<MchQueuesProps> = () => {
+  return (
+    <div className={styles.mnchLayout}>
+      <div className={styles.hwrSection}>
+            <FacilityAndWorkerSlot />
+      </div>
+      <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;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import ServiceQueueComponent from '../../../../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../../../../shared/constants/concepts';
+
+interface TriageProps {}
+const MaternityTriage: React.FC<TriageProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.MATERNITY_TRIAGE_SERVICE_UUID} title="Maternity Triage" />
+      </div>
+    </>
+  );
+};
+export default MaternityTriage;

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './mch-queues.component.scss';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import MchTriage from './queues/triage/mch-triage';
+import MchConsultation from './queues/consultation/mch-consultation';
+import FacilityAndWorkerSlot from '../../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+interface MchQueuesProps {}
+const MchQueues: React.FC<MchQueuesProps> = () => {
+  return (
+    <div className={styles.mnchLayout}>
+      <div className={styles.hwrSection}>
+            <FacilityAndWorkerSlot />
+      </div>
+      <div className={styles.mnchHeader}>
+        <h4>MNCH</h4>
+      </div>
+      <div className={styles.mnchContent}>
+        <Tabs>
+          <TabList contained>
+            <Tab>Triage</Tab>
+            <Tab>Consultation</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <MchTriage />
+            </TabPanel>
+            <TabPanel>
+              <MchConsultation />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+export default MchQueues;

package/src/mnch/mch/queues/consultation/mch-consultation.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ServiceQueueComponent from '../../../../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../../../../shared/constants/concepts';
+
+interface MchConsultationProps {}
+const MchConsultation: React.FC<MchConsultationProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent
+          serviceTypeUuid={QUEUE_SERVICE_UUIDS.MCH_CLINICAL_CONSULTATION_SERVICE_UUID}
+          title="MCH Consultation"
+        />
+      </div>
+    </>
+  );
+};
+export default MchConsultation;

package/src/mnch/mch/queues/triage/mch-triage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ServiceQueueComponent from '../../../../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../../../../shared/constants/concepts';
+
+interface TriageProps {}
+const MchTriage: React.FC<TriageProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.MCH_TRIAGE_SERVICE_UUID} title="MCH Triage" />
+      </div>
+    </>
+  );
+};
+export default MchTriage;

package/src/mnch/mnch-root.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import MchQueues from './mch/mch-queues.component';
+import MaternityQueues from './maternity/maternity-queues.component';
+
+const MNCHRoot: React.FC = () => {
+  return (
+    <BrowserRouter basename={`${window.spaBase}/home/mnch`}>
+      <Routes>
+        <Route path="/mch" element={<MchQueues/>} />
+        <Route path="/maternity" element={<MaternityQueues />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default MNCHRoot;

package/src/mortuary/mortuary.component.tsx

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

package/src/pharmacy/pharmacy.component.scss

@@ -0,0 +1,16 @@
+.pharmacyLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 1px;
+    .hwrSection{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+    .pharmacySection{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+}

package/src/pharmacy/pharmacy.component.tsx

@@ -1,11 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
-
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './pharmacy.component.scss';
+import FacilityAndWorkerSlot from '../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
 const PharmacyComponent: React.FC = () => {
-  
   return (
-    <div>
-      <ExtensionSlot name="poc-pharmacy-dashboard-slot" />
+    <div className={styles.pharmacyLayout}>
+      <div className={styles.hwrSection}>
+        <FacilityAndWorkerSlot />
+      </div>
+      <div className={styles.pharmacySection}>
+        <ExtensionSlot name="dispensing-dashboard-slot" />
+      </div>
     </div>
   );
 };

package/src/registers/registers.component.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface RegistersProps {}
+const Registers: React.FC<RegistersProps> = () => {
+  return <>Registers</>;
+};
+
+export default Registers;

package/src/registry/drawer/emr-compare.component.scss

@@ -0,0 +1,263 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.wrap {
+  margin-top: layout.$spacing-04;
+  width: 100%;
+}
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--brand-01);
+  @include type.type-style('heading-compact-01');
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.diffBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  padding: 0 layout.$spacing-02;
+  border-radius: 999px;
+  background-color: var(--brand-01);
+  color: #ffffff;
+  @include type.type-style('label-01');
+  text-decoration: none;
+}
+
+.panel {
+  margin-top: layout.$spacing-03;
+  border: 1px solid $ui-03;
+  background-color: $ui-background;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.summary {
+  padding: layout.$spacing-03 layout.$spacing-05;
+  margin: 0;
+  background-color: $ui-01;
+  border-bottom: 1px solid $ui-03;
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.tableWrap {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 6.5rem minmax(6rem, 1fr) minmax(6rem, 1fr) 3rem;
+  align-items: center;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-03 layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+  @include type.type-style('body-compact-01');
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.head {
+  position: sticky;
+  top: 0;
+  background-color: $ui-03;
+  @include type.type-style('label-01');
+  color: $text-02;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+/* Two-column layout (Field | Value) for the "create" preview. */
+.createRow {
+  grid-template-columns: 8rem 1fr;
+}
+
+/* A difference the user has NOT ticked: an unresolved variance. Highlighted in
+   amber with a left accent so it clearly stands out and asks for a decision. */
+.rowUnresolved {
+  background-color: color-mix(in srgb, #f1c21b 22%, #ffffff);
+  box-shadow: inset 3px 0 0 0 #f1c21b;
+
+  .colField,
+  .colVal {
+    color: $ui-05;
+  }
+  .colVal:nth-of-type(2) {
+    font-weight: 600;
+  }
+}
+
+/* A difference ticked for update: calmer brand tint — it's handled. */
+.rowSelected {
+  background-color: color-mix(in srgb, var(--brand-01) 8%, #ffffff);
+  box-shadow: inset 3px 0 0 0 var(--brand-01);
+
+  .colVal:nth-of-type(2) {
+    color: var(--brand-01);
+    font-weight: 600;
+  }
+}
+
+/* Already matching: muted so it recedes. */
+.rowSame {
+  color: $text-03;
+}
+
+.colField {
+  color: $text-02;
+  font-weight: 600;
+}
+
+.colVal {
+  overflow-wrap: anywhere;
+}
+
+.colPick {
+  display: flex;
+  justify-content: center;
+
+  // Neaten Carbon's checkbox: rounded, brand-coloured when checked, with soft
+  // hover/focus feedback.
+  :global {
+    .cds--checkbox-wrapper {
+      margin: 0;
+    }
+    .cds--checkbox-label {
+      min-height: 1.25rem;
+    }
+    .cds--checkbox-label::before {
+      border-radius: 4px;
+      border-width: 1.5px;
+      border-color: $text-03;
+      transition: background-color 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
+    }
+    .cds--checkbox:hover + .cds--checkbox-label::before {
+      border-color: var(--brand-01);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-01) 14%, transparent);
+    }
+    .cds--checkbox:checked + .cds--checkbox-label::before {
+      background-color: var(--brand-01);
+      border-color: var(--brand-01);
+    }
+    .cds--checkbox:focus + .cds--checkbox-label::before {
+      outline: 2px solid var(--brand-01);
+      outline-offset: 1px;
+    }
+  }
+}
+
+.muted {
+  color: $text-03;
+}
+
+.same {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+  @include type.type-style('label-01');
+  color: colors.$green-60;
+  white-space: nowrap;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-01;
+  border-top: 1px solid $ui-03;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  @include type.type-style('body-01');
+  color: colors.$red-60;
+}
+
+/* Confirmation dialog listing what will change. */
+.confirmText {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: 0 0 layout.$spacing-05;
+}
+
+/* A tidy, bordered, striped definition list of the changes. */
+.confirmList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid $ui-03;
+  border-radius: 8px;
+  overflow: hidden auto;
+  max-height: 46vh;
+
+  li {
+    display: grid;
+    grid-template-columns: 8rem 1fr auto 1fr;
+    align-items: center;
+    gap: layout.$spacing-04;
+    padding: layout.$spacing-03 layout.$spacing-05;
+    background-color: $ui-background;
+
+    & + li {
+      border-top: 1px solid $ui-03;
+    }
+    &:nth-child(even) {
+      background-color: $ui-01;
+    }
+  }
+}
+
+/* Create confirm lists only Field | Value. */
+.confirmListCreate li {
+  grid-template-columns: 8.5rem 1fr;
+}
+
+.confirmField {
+  @include type.type-style('label-01');
+  color: $text-02;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.confirmFrom {
+  @include type.type-style('body-compact-01');
+  color: $text-03;
+  text-decoration: line-through;
+  overflow-wrap: anywhere;
+}
+
+.confirmArrow {
+  display: inline-flex;
+  align-items: center;
+  color: var(--brand-01);
+  font-weight: 600;
+}
+
+.confirmTo {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}