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

package/src/root.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+  height: calc(100vh - layout.$spacing-09);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/root.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * This is the root test for this page. It simply checks that the page
+ * renders. If the components of your page are highly interdependent,
+ * (e.g., if the `Root` component had state that communicated
+ * information between `Greeter` and `PatientGetter`) then you might
+ * want to do most of your testing here. If those components are
+ * instead quite independent (as is the case in this example), then
+ * it would make more sense to test those components independently.
+ *
+ * The key thing to remember, always, is: write tests that behave like
+ * users. They should *look* for elements by their visual
+ * characteristics, *interact* with them, and (mostly) *assert* based
+ * on things that would be visually apparent to a user.
+ *
+ * To learn more about how we do testing, see the following resources:
+ *   https://o3-docs.vercel.app/docs/frontend-modules/testing
+ *   https://kentcdodds.com/blog/how-to-know-what-to-test
+ *   https://kentcdodds.com/blog/testing-implementation-details
+ *   https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
+ *
+ * Kent C. Dodds is the inventor of `@testing-library`:
+ *   https://testing-library.com/docs/guiding-principles
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { Config } from './config-schema';
+import Root from './root.component';
+
+/**
+ * This is an idiomatic way of dealing with mocked files. Note that
+ * `useConfig` is already mocked; the Jest moduleNameMapper (see the
+ * Jest config) has mapped the `@openmrs/esm-framework` import to a
+ * mock file. This line just tells TypeScript that the object is, in
+ * fact, a mock, and so will have methods like `mockReturnValue`.
+ */
+const mockUseConfig = jest.mocked(useConfig<Config>);
+
+it('renders a landing page for the Home app', () => {
+  const config: Config = { casualGreeting: false, whoToGreet: ['World'] };
+  mockUseConfig.mockReturnValue(config);
+
+  render(<Root />);
+
+  expect(screen.getByRole('heading', { name: /welcome to the o3 home app/i })).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: /configuration system/i })).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: /extension system/i })).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: /data fetching/i })).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: /resources/i })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /get a patient named 'test'/i })).toBeInTheDocument();
+});

package/src/routes.json

@@ -0,0 +1,292 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {},
+  "pages": [
+    {
+      "component": "root",
+      "route": "dha-workflow",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "component": "navLinks",
+      "name": "side-nav-workflow-links",
+      "slot": "dha-workflow-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "dha-workflow-dashboard-link",
+      "component": "dhaWorkflowDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "dashboard",
+        "slot": "dha-workflow-dashboard-slot",
+        "title": "Dashboard"
+      },
+      "online": true,
+      "offline": true,
+      "order": 0
+    },
+    {
+      "component": "dhaWorkflowDashboard",
+      "name": "dashboardExt",
+      "slot": "dha-workflow-dashboard-slot"
+    },
+    {
+      "name": "registry-dashboard-link",
+      "component": "registryDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Client Registry Dashboard"
+      ],
+      "meta": {
+        "name": "registry",
+        "slot": "client-registry-dashboard-slot",
+        "title": "Registry"
+      },
+      "online": true,
+      "offline": true,
+      "order": 1
+    },
+    {
+      "component": "registryExtension",
+      "name": "registry",
+      "slot": "client-registry-dashboard-slot",
+      "privileges": [
+        "O3 View Client Registry Dashboard"
+      ]
+    },
+    {
+      "name": "triage-dashboard-link",
+      "component": "triageDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Triage Dashboard"
+      ],
+      "meta": {
+        "name": "triage",
+        "slot": "triage-queue-dashboard-slot",
+        "title": "Triage"
+      },
+      "online": true,
+      "offline": false
+    },
+    {
+      "component": "triageQueueExtension",
+      "name": "triage",
+      "slot": "triage-queue-dashboard-slot",
+      "privileges": [
+        "O3 View Triage Dashboard"
+      ]
+    },
+    {
+      "name": "consultation-dashboard-link",
+      "component": "consultationDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Consultation Dashboard"
+      ],
+      "meta": {
+        "name": "consultation",
+        "slot": "consultation-dashboard-slot",
+        "title": "Consultation"
+      },
+      "online": true,
+      "offline": false
+    },
+    {
+      "component": "consultationQueue",
+      "name": "consultation",
+      "slot": "consultation-dashboard-slot",
+      "privileges": [
+        "O3 View Consultation Dashboard"
+      ]
+    },
+    {
+      "name": "mnch-dashboard-link",
+      "component": "mnchQueueDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View MNCH Dashboard"
+      ],
+      "meta": {
+        "name": "mnch",
+        "slot": "mnch-dashboard-slot",
+        "title": "MNCH"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "MNCHRoot",
+      "name": "mnch",
+      "slot": "mnch-dashboard-slot",
+      "privileges": [
+        "O3 View MNCH Dashboard"
+      ]
+    },
+    {
+      "name": "pharmacy-dashboard-link",
+      "component": "pharmacyDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Pharmacy Dashboard"
+      ],
+      "meta": {
+        "name": "dispensing",
+        "slot": "dispensing-dashboard-slot",
+        "title": "Pharmacy"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "bookings-dashboard-link",
+      "component": "bookingsDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Bookings Dashboard"
+      ],
+      "meta": {
+        "name": "bookings",
+        "slot": "bookings-dashboard-slot",
+        "title": "Bookings"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "bookings",
+      "name": "bookings",
+      "slot": "bookings-dashboard-slot",
+      "privileges": [
+        "O3 View Bookings Dashboard"
+      ]
+    },
+    {
+      "name": "service-queue-admin-dashboard-link",
+      "component": "serviceQueuesAdminLink",
+      "privileges": [
+        "O3 View Service Queue Admin Panel"
+      ],
+      "slot": "app-menu-slot",
+      "meta": {
+        "name": "service-queue-admin",
+        "slot": "service-queue-admin-dashboard-slot",
+        "title": "Service Queue Admin"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "serviceQueueAdmin",
+      "name": "service-queue-admin",
+      "slot": "service-queue-admin-dashboard-slot",
+      "privileges": [
+        "O3 View Service Queue Admin Panel"
+      ]
+    },
+    {
+      "name": "admissions-dashboard-link",
+      "component": "admissionsDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Admissions Dashboard"
+      ],
+      "meta": {
+        "name": "admissions-dashboard",
+        "slot": "admissions-dashboard-slot",
+        "title": "Admissions Dashboard"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "admissionsDashboard",
+      "name": "admissions-dashboard",
+      "slot": "admissions-dashboard-slot",
+      "privileges": [
+        "O3 View Admissions Dashboard"
+      ]
+    },
+    {
+      "component": "serviceQueueBannerComponent",
+      "name": "service-queue-banne",
+      "slot": "patient-banner-tags-slot"
+    },
+    {
+      "name": "admissions-summary-dashboard",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "patientChartAdmissionsLink",
+      "meta": {
+        "slot": "patient-chart-admissions-summary-dashboard-slot",
+        "path": "Admissions",
+        "layoutMode": "anchored"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "admission-details",
+      "slot": "patient-chart-admissions-summary-dashboard-slot",
+      "component": "patientAdmissionSummary",
+      "order": 1,
+      "meta": {
+        "title": "Admissions",
+        "view": "admissions"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "ampath-billing-dashboard-link",
+      "component": "billingDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "privileges": [
+        "O3 View Accounting Dashboard"
+      ],
+      "meta": {
+        "name": "billing",
+        "slot": "ampath-billing-dashboard-slot",
+        "title": "Accounting"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "billingRoot",
+      "name": "billing",
+      "slot": "ampath-billing-dashboard-slot",
+      "privileges": [
+        "O3 View Accounting Dashboard"
+      ]
+    },
+    {
+      "name": "ampath-billing-checkin-form",
+      "slot": "extra-visit-attribute-slot",
+      "component": "visitBillingForm"
+    },
+    {
+      "name": "claims",
+      "slot": "billing-claims-slot",
+      "component": "claims"
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "create-order-bill-form-workspace",
+      "component": "createOrderBillFormWorkspace",
+      "title": "Create order Bill",
+      "type": "other-form"
+    }
+  ],
+  "modals": [
+    {
+      "name": "sign-off-queue-entry-modal",
+      "component": "signOffModal"
+    }
+  ]
+}

package/src/service-queues/action-button.component.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@carbon/react";
+import { useLayoutType, isDesktop } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { useActionPropsByKey } from "../hooks/useActions";
+import { type QueueEntryAction } from "../config-schema";
+import { type QueueEntry } from "../types/types";
+
+export function ActionButton({ actionKey, queueEntry }: { actionKey: QueueEntryAction; queueEntry: QueueEntry }) {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const actionPropsByKey = useActionPropsByKey();
+
+  const actionProps = actionPropsByKey[actionKey];
+  if (!actionProps) {
+    console.error(`Service queue table configuration uses unknown action in 'action.buttons': ${actionKey}`);
+    return null;
+  }
+
+  if (actionProps.showIf && !actionProps.showIf(queueEntry)) {
+    return null;
+  }
+
+  return (
+    <Button
+      key={actionKey}
+      kind="ghost"
+      aria-label={t(actionProps.label, actionProps.text)}
+      onClick={() => actionProps.onClick(queueEntry)}
+      size={isDesktop(layout) ? 'sm' : 'lg'}>
+      {t(actionProps.label, actionProps.text)}
+    </Button>
+  );
+}

package/src/service-queues/action-overflow-menu-item.component.tsx

@@ -0,0 +1,34 @@
+import { OverflowMenuItem } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { type QueueEntryAction } from "../config-schema";
+import { useActionPropsByKey } from "../hooks/useActions";
+import { type QueueEntry } from "../types/types";
+import styles from './service-queue.scss';
+
+export function ActionOverflowMenuItem({ actionKey, queueEntry }: { actionKey: QueueEntryAction; queueEntry: QueueEntry }) {
+  const { t } = useTranslation();
+  const actionPropsByKey = useActionPropsByKey();
+
+  const actionProps = actionPropsByKey[actionKey];
+  if (!actionProps) {
+    console.error(`Service queue table configuration uses unknown action in 'action.overflowMenu': ${actionKey}`);
+    return null;
+  }
+
+  if (actionProps.showIf && !actionProps.showIf(queueEntry)) {
+    return null;
+  }
+
+  return (
+    <OverflowMenuItem
+      key={actionKey}
+      className={styles.menuItem}
+      aria-label={t(actionProps.label, actionProps.text)}
+      hasDivider
+      isDelete={actionProps.isDelete}
+      onClick={() => actionProps.onClick(queueEntry)}
+      itemText={t(actionProps.label, actionProps.text)}
+    />
+  );
+}

package/src/service-queues/admin/queue/modal/create-queue/create-queue.modal.scss

@@ -0,0 +1,31 @@
+.createQueueModalLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 15px 15px;
+    .sectionHeader{
+        display: flex;
+        flex-direction: column;
+        row-gap: 15px;
+        width: 100%;
+        padding-bottom: 15px;
+    }
+    .createQueueModalContentSection{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 10px;
+    }
+    .createQueueModalFormRow{
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        column-gap: 10px;
+    }
+    .createQueueModalFormControl{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+}

package/src/service-queues/admin/queue/modal/create-queue/create-queue.modal.tsx

@@ -0,0 +1,143 @@
+import { Modal, ModalBody, SelectItem, Select, TextInput, Button } from '@carbon/react';
+import React, { useState } from 'react';
+import styles from './create-queue.modal.scss';
+import { useSession, showSnackbar } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../../../../shared/constants/concepts';
+import { type CreateQueueDto } from '../../../../../types/types';
+import { createQueue } from '../../../../service-queues.resource';
+interface CreateQueueModalProps {
+  open: boolean;
+  onModalClose: () => void;
+}
+
+const CreateQueueModal: React.FC<CreateQueueModalProps> = ({ open, onModalClose }) => {
+  const session = useSession();
+  const location = session.sessionLocation;
+  const [queueName, setQueueName] = useState<string>();
+  const [description, setDescription] = useState<string>();
+  const [queueService, setQueueService] = useState<string>();
+  const handleQueueName = (queueName: string) => {
+    setQueueName(queueName);
+  };
+  const handleQueueDescription = (queueDescription: string) => {
+    setDescription(queueDescription);
+  };
+  const handleQueueService = (queueServiceUuid: string) => {
+    setQueueService(queueServiceUuid);
+  };
+  const handleCreateQueue = async () => {
+    const payload = generateCreateQueuePayload();
+    if (isValidateCreateQueueDto(payload)) {
+      const resp = await createQueue(payload);
+      if (resp) {
+        showAlert('Queue created successfully!', 'success');
+        onModalClose();
+      }
+    }
+  };
+  const generateCreateQueuePayload = (): CreateQueueDto => {
+    return {
+      name: queueName,
+      description: description,
+      service: {
+        uuid: queueService,
+      },
+      location: {
+        uuid: location.uuid,
+      },
+    };
+  };
+  const isValidateCreateQueueDto = (payload: CreateQueueDto): boolean => {
+    if (!payload.name) {
+      showAlert('Please add the queue name', 'error');
+      return false;
+    }
+    if (!payload.description) {
+      showAlert('Please add the queue description', 'error');
+      return false;
+    }
+    if (!payload.service) {
+      showAlert('Please add the queue service', 'error');
+      return false;
+    } else {
+      if (!payload.service.uuid) {
+        showAlert('Please select as service', 'error');
+        return false;
+      }
+    }
+    return true;
+  };
+  const showAlert = (message: string, alertType: 'success' | 'error') => {
+    showSnackbar({
+      kind: alertType,
+      title: 'Queue Deleted',
+      subtitle: message,
+    });
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={handleCreateQueue}
+        primaryButtonText="Create Queue"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.createQueueModalLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Create Service Queue</h4>
+            </div>
+            <div className={styles.createQueueModalContentSection}>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="queue-name"
+                    labelText="Queue Name"
+                    onChange={(e) => handleQueueName(e.target.value)}
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="description"
+                    labelText="Description"
+                    onChange={(e) => handleQueueDescription(e.target.value)}
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <Select id="service" labelText="Service" onChange={(e) => handleQueueService(e.target.value)}>
+                    <SelectItem value="" text="Select Service" />
+                    <SelectItem value={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} text="Triage Service" />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID}
+                      text="Clinical Consultation Service"
+                    />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.MCH_TRIAGE_SERVICE_UUID}
+                      text="Maternal Child Health Triage Service"
+                    />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.MCH_CLINICAL_CONSULTATION_SERVICE_UUID}
+                      text="Maternal Child Health Consultation Service"
+                    />
+                    <SelectItem value={QUEUE_SERVICE_UUIDS.MATERNITY_TRIAGE_SERVICE_UUID} text="Maternity Triage" />
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default CreateQueueModal;