@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.159

package/src/hooks/useActions.ts

@@ -0,0 +1,165 @@
+import { restBaseUrl, showModal, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject, type QueueEntryAction } from '../config-schema';
+import { useMemo } from 'react';
+import { useSWRConfig } from 'swr';
+import { type QueueEntry } from '../types/types';
+import { mapVisitQueueEntryProperties, serveQueueEntry } from '../service-queues/service-queues.resource';
+
+type ActionProps = {
+  label: string;
+  text: string;
+  onClick: (queueEntry: QueueEntry) => void;
+  showIf?: (queueEntry: QueueEntry) => boolean;
+  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 },
+    visitQueueNumberAttributeUuid,
+  } = useConfig<ConfigObject>();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+
+  // Map action strings to component props
+  const actionPropsByKey: Record<QueueEntryAction, ActionProps> = useMemo(() => {
+    return {
+      call: {
+        // t('call', 'Call'),
+        label: 'call',
+        text: 'Call',
+        onClick: async (queueEntry: QueueEntry) => {
+          const mappedQueueEntry = mapVisitQueueEntryProperties(queueEntry, visitQueueNumberAttributeUuid);
+          const callingQueueResponse = await serveQueueEntry(
+            mappedQueueEntry.queue.name,
+            mappedQueueEntry.visitQueueNumber,
+            'calling',
+          );
+          if (callingQueueResponse.ok) {
+            await mutateQueueEntries();
+            const dispose = showModal('call-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+              size: 'sm',
+            });
+          }
+        },
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.status.uuid === defaultStatusConceptUuid;
+        },
+      },
+      move: {
+        // t('move', 'Move'),
+        label: 'move',
+        text: 'Move',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('move-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      transition: {
+        // t('transition', 'Transition'),
+        label: 'transition',
+        text: 'Transition',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      edit: {
+        // t('edit', 'Edit'),
+        label: 'edit',
+        text: 'Edit',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('edit-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      remove: {
+        // t('removePatient', 'Remove patient'),
+        label: 'removePatient',
+        text: 'Remove patient',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('remove-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      delete: {
+        // t('deleteEntry', 'Delete entry'),
+        label: 'deleteEntry',
+        text: 'Delete entry',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('delete-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        isDelete: true,
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry === null;
+        },
+      },
+      undo: {
+        // t('undoTransition', 'Undo transition'),
+        label: 'undoTransition',
+        text: 'Undo transition',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('undo-transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        isDelete: true,
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry !== null;
+        },
+      },
+      signOff: {
+        // t('signOff', 'Sign off'),
+        label: 'signOff',
+        text: 'Sign off',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('sign-off-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry !== null;
+        },
+      },
+    };
+  }, [defaultStatusConceptUuid, visitQueueNumberAttributeUuid, mutateQueueEntries]);
+  return actionPropsByKey;
+}

package/src/index.ts

@@ -0,0 +1,161 @@
+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';
+
+export const moduleName = '@ampath/esm-dha-workflow-app';
+
+const options = {
+  featureName: 'Consulation Workflow',
+  moduleName,
+};
+
+/**
+ * This tells the app shell how to obtain translation files: that they
+ * are JSON files in the directory `../translations` (which you should
+ * see in the directory structure).
+ */
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+/**
+ * This function performs any setup that should happen at microfrontend
+ * load-time (such as defining the config schema) and then returns an
+ * object which describes how the React application(s) should be
+ * rendered.
+ */
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const navLinks = getAsyncLifecycle(() => import('./side-nav-menu/nav-links'), {
+  featureName: 'side-nav-workflow-link',
+  moduleName,
+});
+
+/**
+ * This named export tells the app shell that the default export of `root.component.tsx`
+ * should be rendered when the route matches `root`. The full route
+ * will be `openmrsSpaBase() + 'root'`, which is usually
+ * `/openmrs/spa/root`.
+ */
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+export const registry = getAsyncLifecycle(() => import('./registry/registry.component'), 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 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,
+);
+
+export const claims = getAsyncLifecycle(
+  () => import('./claims/claims.component'),
+  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/left-panel/left-panel.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './left-panel.scss';
+
+const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  return (
+    isDesktop(layout) && (
+      <SideNav className={styles.leftPanel} expanded>
+        <ExtensionSlot name="dha-workflow-slot" />
+      </SideNav>
+    )
+  );
+};
+
+export default LeftPanel;

package/src/left-panel/left-panel.scss

@@ -0,0 +1,42 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.leftPanel {
+  border-right: 1px solid colors.$gray-20;
+  padding-top: layout.$spacing-05;
+
+  // Left nav menu item
+  :global(.cds--side-nav__link) {
+    color: colors.$gray-70;
+    @include type.type-style('heading-compact-01');
+
+    &:focus,
+    &:hover {
+      background-color: colors.$gray-10-hover;
+    }
+
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: colors.$gray-100;
+      border-left: layout.$spacing-02 solid var(--brand-01);
+      outline: none;
+      padding: 0 layout.$spacing-04;
+      background-color: colors.$gray-20;
+    }
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-07;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-09;
+  }
+}

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;

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,7 @@
+.mnchLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}

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

@@ -0,0 +1,32 @@
+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';
+interface MchQueuesProps {}
+const MchQueues: React.FC<MchQueuesProps> = () => {
+  return (
+    <div className={styles.mnchLayout}>
+      <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/modals/sign-off-modal.scss

@@ -0,0 +1,7 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.subHeading {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+}

package/src/modals/sign-off-modal.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './sign-off-modal.scss';
+import { type QueueEntry } from '../types/types';
+
+interface SignOffModalProps {
+  queueEntries: Array<QueueEntry>;
+  closeModal: () => void;
+}
+
+const SignOffModal: React.FC<SignOffModalProps> = ({ queueEntries, closeModal }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSignOffRequest = useCallback(() => {
+    setIsSubmitting(true);
+  }, []);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('signOffMessage', 'Sign off message')}
+        title={t('signOffMessage', 'Sign off message')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'signOffMessage',
+            'Sign off message',
+          )}
+          .
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting === true ? (
+          <ButtonSkeleton />
+        ) : (
+          <Button kind="danger" onClick={handleSignOffRequest}>
+            {t('signOff', 'SignOff')}
+          </Button>
+        )}
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default SignOffModal;

package/src/mortuary/mortuary.component.tsx

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

package/src/pharmacy/pharmacy.component.tsx

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

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;