@ampath/esm-dispensing-app 1.10.0-next.1

package/src/forms/medication-dispense-review.test.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { type MedicationDispense, MedicationDispenseStatus } from '../types';
+import MedicationDispenseReview from './medication-dispense-review.component';
+import { useProviders } from '../medication-dispense/medication-dispense.resource';
+
+jest.mock('../medication-dispense/medication-dispense.resource', () => ({
+  ...jest.requireActual('../medication-dispense/medication-dispense.resource'),
+  useProviders: jest.fn(),
+}));
+
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseProviders = jest.mocked(useProviders);
+const mockUseSession = jest.mocked(useSession);
+
+beforeEach(() => {
+  mockUseConfig.mockReturnValue({
+    dispenseBehavior: {
+      allowModifyingPrescription: false,
+      restrictTotalQuantityDispensed: false,
+    },
+    valueSets: {
+      substitutionType: { uuid: '123' },
+      substitutionReason: { uuid: 'abc' },
+    },
+  });
+  mockUseProviders.mockReturnValue([]);
+  mockUseSession.mockReturnValue({
+    currentProvider: {
+      uuid: 'user-uuid-123',
+      identifier: 'user-identifier-123',
+    },
+  } as any);
+});
+
+describe('Medication Dispense Review Component tests', () => {
+  test('component should render medication dispense review', () => {
+    const medicationDispense: MedicationDispense = {
+      resourceType: 'MedicationDispense',
+      id: 'ff2fa24c-b0d4-457c-bbdf-7d6512b8b746',
+      type: {
+        coding: [
+          {
+            code: '123',
+          },
+        ],
+      },
+      meta: {
+        lastUpdated: '2023-01-10T10:52:36.000-05:00',
+      },
+      status: MedicationDispenseStatus.completed,
+      medicationReference: {
+        reference: 'Medication/78f96684-dfbe-11e9-8a34-2a2ae2dbcce4',
+        type: 'Medication',
+        display: 'Lamivudine (3TC), Oral solution, 10mg/mL, 240mL bottle',
+      },
+      subject: {
+        reference: 'Patient/b36dbb26-8309-4d51-80ed-07bbb63ab928',
+        type: 'Patient',
+        display: 'Test, Fiona (ZL EMR ID: Y480K4)',
+      },
+      performer: [
+        {
+          actor: {
+            reference: 'Practitioner/6558dfef-bfe1-488e-b048-ed286aded924',
+            type: 'Practitioner',
+            identifier: {
+              value: 'LADAL',
+            },
+            display: 'Dylan, Bob (Identifier: LADAL)',
+          },
+        },
+      ],
+      location: {
+        reference: 'Location/47521fa1-ac7f-4fdb-b167-a86fe223a3d9',
+        type: 'Location',
+        display: 'Klinik MNT',
+      },
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/9e416e5f-a435-433c-99d3-8b2fd1e8a421',
+          type: 'MedicationRequest',
+        },
+      ],
+      quantity: {
+        value: 30.0,
+        unit: 'Tablet',
+        system: 'http://snomed.info/sct',
+        code: '385055001',
+      },
+      whenPrepared: '2023-01-10T10:52:22-05:00',
+      whenHandedOver: '2023-01-10T10:52:22-05:00',
+      dosageInstruction: [
+        {
+          timing: {
+            code: {
+              coding: [
+                {
+                  code: '023bee9c-2dbb-483c-8401-46f0ccf6b333',
+                  display: 'ON (night)',
+                },
+              ],
+              text: 'ON (night)',
+            },
+          },
+          asNeededBoolean: false,
+          route: {
+            coding: [
+              {
+                code: '46aaaca8-1f21-410a-aac9-67bfcc1fd577',
+                display: 'Oral',
+              },
+              {
+                system: 'https://openconceptlab.org/orgs/CIEL/sources/CIEL',
+                code: '160240',
+                display: 'Oral',
+              },
+              {
+                system: 'http://snomed.info/sct',
+                code: '26643006',
+                display: 'Oral',
+              },
+            ],
+            text: 'Oral',
+          },
+          doseAndRate: [
+            {
+              doseQuantity: {
+                value: 1.0,
+                unit: 'Tablet',
+                system: 'http://snomed.info/sct',
+                code: '385055001',
+              },
+            },
+          ],
+        },
+      ],
+      substitution: {
+        wasSubstituted: false,
+      },
+    };
+
+    const mockUpdate = jest.fn();
+    render(
+      <MedicationDispenseReview
+        medicationDispense={medicationDispense}
+        updateMedicationDispense={mockUpdate}
+        isFreeTextDosage={false}
+        setIsFreeTextDosage={() => {}}
+        quantityRemaining={30}
+        quantityDispensed={30}
+      />,
+    );
+
+    // TODO test expected views and various interactions
+  });
+});

package/src/forms/pause-dispense-form.workspace.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ComboBox, Form, InlineLoading } from '@carbon/react';
+import {
+  ExtensionSlot,
+  getCoreTranslation,
+  ResponsiveWrapper,
+  showSnackbar,
+  useConfig,
+  usePatient,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { saveMedicationDispense, useReasonForPauseValueSet } from '../medication-dispense/medication-dispense.resource';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import { getUuidFromReference, markEncounterAsStale, revalidate } from '../utils';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import styles from './forms.scss';
+
+type PauseDispenseFormProps = {
+  medicationDispense: MedicationDispense;
+  mode: 'enter' | 'edit';
+  patientUuid?: string;
+  encounterUuid: string;
+  customWorkspaceTitle?: string;
+};
+
+const PauseDispenseForm: React.FC<Workspace2DefinitionProps<PauseDispenseFormProps, {}, {}>> = ({
+  workspaceProps: { medicationDispense, mode, patientUuid, encounterUuid, customWorkspaceTitle },
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] = useState<MedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reasonsForPause, setReasonsForPause] = useState([]);
+  const { reasonForPauseValueSet } = useReasonForPauseValueSet(config.valueSets.reasonForPause.uuid);
+
+  useEffect(() => {
+    const reasonForPauseOptions = [];
+
+    if (reasonForPauseValueSet?.compose?.include) {
+      const uuidValueSet = reasonForPauseValueSet.compose.include.find((include) => !include.system);
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          reasonForPauseOptions.push({
+            id: concept.code,
+            text: concept.display,
+          }),
+        );
+        reasonForPauseOptions.sort((a, b) => a.text.localeCompare(b.text));
+      }
+    }
+    setReasonsForPause(reasonForPauseOptions);
+  }, [reasonForPauseValueSet]);
+
+  const handleSubmit = () => {
+    if (!isSubmitting) {
+      setIsSubmitting(true);
+      const abortController = new AbortController();
+      markEncounterAsStale(encounterUuid);
+      saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.on_hold, abortController)
+        .then((response) => {
+          // only update request status when added a new dispense event, not updating
+          if (response.ok && !medicationDispense.id) {
+            return updateMedicationRequestFulfillerStatus(
+              getUuidFromReference(
+                medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+              ),
+              MedicationRequestFulfillerStatus.on_hold,
+            );
+          } else {
+            return response;
+          }
+        })
+        .then((response) => {
+          if (response.ok) {
+            revalidate(encounterUuid);
+            showSnackbar({
+              kind: 'success',
+              title: t(
+                mode === 'enter' ? 'medicationDispensePaused' : 'medicationDispenseUpdated',
+                mode === 'enter' ? 'Medication dispense paused.' : 'Dispense record successfully updated.',
+              ),
+            });
+            closeWorkspace({ discardUnsavedChanges: true });
+          }
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t(
+              mode === 'enter' ? 'medicationDispensePauseError' : 'medicationDispenseUpdatedError',
+              mode === 'enter' ? 'Error pausing medication dispense.' : 'Error updating dispense record',
+            ),
+            kind: 'error',
+            subtitle: error?.message,
+          });
+          setIsSubmitting(false);
+        });
+    }
+  };
+
+  const checkIsValid = () => {
+    if (medicationDispensePayload && medicationDispensePayload.statusReasonCodeableConcept?.coding[0].code) {
+      setIsValid(true);
+    } else {
+      setIsValid(false);
+    }
+  };
+
+  // initialize the internal dispense payload with the dispenses passed in as props
+  useEffect(() => setMedicationDispensePayload(medicationDispense), [medicationDispense]);
+
+  // check is valid on any changes
+  useEffect(checkIsValid, [medicationDispensePayload]);
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  return (
+    <Workspace2 title={customWorkspaceTitle ?? t('pausePrescription', 'Pause prescription')}>
+      <Form className={styles.formWrapper}>
+        <div>
+          {isLoading && (
+            <InlineLoading
+              className={styles.bannerLoading}
+              iconDescription="Loading"
+              description="Loading banner"
+              status="active"
+            />
+          )}
+          {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
+          <section className={styles.formGroup}>
+            <ResponsiveWrapper>
+              <ComboBox
+                id="reasonForPause"
+                items={reasonsForPause}
+                titleText={t('reasonForPause', 'Reason for pause')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+                  text: medicationDispense.statusReasonCodeableConcept?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  setMedicationDispensePayload({
+                    ...medicationDispensePayload,
+                    statusReasonCodeableConcept: {
+                      coding: [
+                        {
+                          code: selectedItem?.id,
+                        },
+                      ],
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
+          </section>
+        </div>
+        <section className={styles.buttonGroup}>
+          <Button
+            disabled={isSubmitting}
+            onClick={() => {
+              closeWorkspace();
+            }}
+            kind="secondary">
+            {getCoreTranslation('cancel', 'Cancel')}
+          </Button>
+          <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+            {/* t('pause', 'Pause')
+            t('saveChanges', 'Save changes') */}
+            {t(mode === 'enter' ? 'pause' : 'saveChanges', mode === 'enter' ? 'Pause' : 'Save changes')}
+          </Button>
+        </section>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default PauseDispenseForm;

package/src/forms/stock-dispense/stock-dispense.component.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ComboBox, InlineLoading, InlineNotification, Layer } from '@carbon/react';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
+import { type MedicationDispense, type InventoryItem } from '../../types';
+import { type PharmacyConfig } from '../../config-schema';
+import { useDispenseStock } from './stock.resource';
+
+type StockDispenseProps = {
+  medicationDispense: MedicationDispense;
+  updateInventoryItem: (inventoryItem: InventoryItem) => void;
+  inventoryItem: InventoryItem;
+};
+
+const StockDispense: React.FC<StockDispenseProps> = ({ medicationDispense, updateInventoryItem }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+
+  const drugUuid = medicationDispense?.medicationReference?.reference?.split('/')[1];
+  const { inventoryItems, error, isLoading } = useDispenseStock(drugUuid);
+  const validInventoryItems = inventoryItems
+    .filter((item) => isValidBatch(medicationDispense, item))
+    .sort((a, b) => new Date(a.expiration).getTime() - new Date(b.expiration).getTime());
+
+  function parseDate(dateString) {
+    return new Date(dateString);
+  }
+
+  //check whether the drug will expire before the medication period ends
+  function isValidBatch(medicationToDispense, inventoryItem) {
+    if (typeof config !== 'undefined' && !config.validateBatch) {
+      return true;
+    }
+    if (medicationToDispense?.dosageInstruction && medicationToDispense?.dosageInstruction.length > 0) {
+      return medicationToDispense.dosageInstruction.some((instruction) => {
+        if (
+          instruction.timing?.repeat?.duration &&
+          instruction.timing?.repeat?.durationUnit &&
+          inventoryItem.quantity > 0
+        ) {
+          const durationUnit = instruction.timing.repeat.durationUnit;
+          const durationValue = instruction.timing.repeat.duration;
+          const lastMedicationDate = new Date();
+
+          switch (durationUnit) {
+            case 's':
+              lastMedicationDate.setSeconds(lastMedicationDate.getSeconds() + durationValue);
+              break;
+            case 'min':
+              lastMedicationDate.setMinutes(lastMedicationDate.getMinutes() + durationValue);
+              break;
+            case 'h':
+              lastMedicationDate.setHours(lastMedicationDate.getHours() + durationValue);
+              break;
+            case 'd':
+              lastMedicationDate.setDate(lastMedicationDate.getDate() + durationValue);
+              break;
+            case 'wk':
+              lastMedicationDate.setDate(lastMedicationDate.getDate() + durationValue * 7);
+              break;
+            case 'mo':
+              lastMedicationDate.setMonth(lastMedicationDate.getMonth() + durationValue);
+              break;
+            case 'y':
+              lastMedicationDate.setFullYear(lastMedicationDate.getFullYear() + durationValue);
+              break;
+            default:
+              return false;
+          }
+
+          const expiryDate = parseDate(inventoryItem.expiration);
+          return expiryDate > lastMedicationDate;
+        }
+        return false;
+      });
+    }
+    return false;
+  }
+
+  const toStockDispense = (inventoryItems) => {
+    return t(
+      'stockDispenseDetails',
+      'Batch: {{batchNumber}} - Quantity: {{quantity}} ({{quantityUoM}}) - Expiry: {{expiration}}',
+      {
+        batchNumber: inventoryItems.batchNumber,
+        quantity: Math.floor(inventoryItems.quantity),
+        quantityUoM: inventoryItems.quantityUoM,
+        expiration: formatDate(new Date(inventoryItems.expiration)),
+      },
+    );
+  };
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        subtitle={t('errorLoadingInventoryItems', 'Error fetching inventory items')}
+        title={t('error', 'Error')}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return <InlineLoading description={t('loadingInventoryItems', 'Loading inventory items...')} />;
+  }
+
+  return (
+    <Layer>
+      <ComboBox
+        id="stockDispense"
+        items={validInventoryItems}
+        onChange={({ selectedItem }) => {
+          updateInventoryItem(selectedItem);
+        }}
+        itemToString={(item) => (item ? toStockDispense(item) : '')}
+        titleText={t('stockDispense', 'Stock Dispense')}
+        placeholder={t('selectStockDispense', 'Select stock to dispense from')}
+      />
+    </Layer>
+  );
+};
+
+export default StockDispense;

package/src/forms/stock-dispense/stock.resource.tsx

@@ -0,0 +1,67 @@
+import useSWR from 'swr';
+import { openmrsFetch, useSession } from '@openmrs/esm-framework';
+import { type StockDispenseRequest, type InventoryItem, type MedicationDispense } from '../../types';
+import { getUuidFromReference } from '../../utils';
+
+//TODO: Add configuration to retrieve the stock dispense endpoint
+// For stock dispense to work, stock management module should be installed and configured
+/**
+ * Fetches the inventory items for a given drug UUID.
+ *
+ * @param {string} drugUuid - The UUID of the drug.
+ * @returns {Array} - The inventory items.
+ */
+export const useDispenseStock = (drugUuid: string) => {
+  const session = useSession();
+  const url = `/ws/rest/v1/stockmanagement/stockiteminventory?v=default&totalCount=true&drugUuid=${drugUuid}&includeBatchNo=true&groupBy=LocationStockItemBatchNo&dispenseLocationUuid=${session?.sessionLocation?.uuid}&includeStrength=1&includeConceptRefIds=1&emptyBatch=1&emptyBatchLocationUuid=${session?.sessionLocation?.uuid}&dispenseAtLocation=1`;
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<InventoryItem> } }>(url, openmrsFetch);
+  return { inventoryItems: data?.data?.results ?? [], error, isLoading };
+};
+
+/**
+ * Sends a POST request to the inventory dispense endpoint with the provided stock dispense request.
+ *
+ * @param {AbortController} abortController - The AbortController used to cancel the request.
+ * @returns {Promise<Response>} - A Promise that resolves to the response of the POST request.
+ */
+export async function sendStockDispenseRequest(
+  stockDispenseRequest,
+  abortController: AbortController,
+): Promise<Response> {
+  const url = '/ws/rest/v1/stockmanagement/dispenserequest';
+  return await openmrsFetch(url, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ dispenseItems: [stockDispenseRequest] }),
+  });
+}
+
+/**
+ * Creates a stock dispense request payload.
+ *
+ * @param inventoryItem - The inventory item to dispense.
+ * @param patientUuid - The UUID of the patient.
+ * @param encounterUuid - The UUID of the encounter.
+ * @param medicationDispensePayload - The medication dispense payload.
+ * @returns The stock dispense request payload.
+ */
+export const createStockDispenseRequestPayload = (
+  inventoryItem: InventoryItem,
+  patientUuid: string,
+  encounterUuid: string,
+  medicationDispensePayload: MedicationDispense,
+): StockDispenseRequest => {
+  return {
+    dispenseLocation: inventoryItem.locationUuid,
+    patient: patientUuid,
+    order: getUuidFromReference(medicationDispensePayload.authorizingPrescription[0].reference),
+    encounter: encounterUuid,
+    stockItem: inventoryItem?.stockItemUuid,
+    stockBatch: inventoryItem.stockBatchUuid,
+    stockItemPackagingUOM: inventoryItem.quantityUoMUuid,
+    quantity: medicationDispensePayload.quantity.value,
+  };
+};

package/src/history/delete-confirm.modal.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+const DeleteConfirmModal = ({
+  title,
+  onClose,
+  onDelete,
+
+  message,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+  title: string;
+  message: string;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <ModalHeader closeModal={onClose} title={title}></ModalHeader>
+      <ModalBody>{message}</ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onDelete}>
+          {t('delete', 'Delete')}
+        </Button>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+export default DeleteConfirmModal;