@openmrs/esm-dispensing-app 1.5.1-pre.367 → 1.6.0

package/src/prescriptions/prescription-actions.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.actionsContainer {
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.actionCluster {
+  gap: layout.$spacing-03;
+  display: flex;
+  flex-direction: row;
+}

package/src/prescriptions/prescription-details.component.tsx

@@ -10,6 +10,7 @@ import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
 import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
 import ActionButtons from '../components/action-buttons.component';
 import MedicationEvent from '../components/medication-event.component';
+import PrescriptionsActionsFooter from './prescription-actions.component';
 import styles from './prescription-details.scss';
 
 const PrescriptionDetails: React.FC<{
@@ -20,10 +21,7 @@ const PrescriptionDetails: React.FC<{
   const config = useConfig<PharmacyConfig>();
   const [isAllergiesLoading, setAllergiesLoadingStatus] = useState(true);
   const { allergies, totalAllergies } = usePatientAllergies(patientUuid, config.refreshInterval);
-  const { medicationRequestBundles, isError, isLoading } = usePrescriptionDetails(
-    encounterUuid,
-    config.refreshInterval,
-  );
+  const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid, config.refreshInterval);
 
   useEffect(() => {
     if (typeof totalAllergies == 'number') {
@@ -89,11 +87,9 @@ const PrescriptionDetails: React.FC<{
           </div>
         </Tile>
       )}
-
       <h5 style={{ paddingTop: '8px', paddingBottom: '8px', fontSize: '0.9rem' }}>{t('prescribed', 'Prescribed')}</h5>
-
       {isLoading && <DataTableSkeleton role="progressbar" />}
-      {isError && <p>{t('error', 'Error')}</p>}
+      {error && <p>{t('error', 'Error')}</p>}
       {medicationRequestBundles &&
         medicationRequestBundles.map((bundle) => {
           return (
@@ -113,6 +109,7 @@ const PrescriptionDetails: React.FC<{
             </Tile>
           );
         })}
+      <PrescriptionsActionsFooter encounterUuid={encounterUuid} patientUuid={patientUuid} />
     </div>
   );
 };

package/src/print-prescription/prescription-print-action.component.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+
+type PrescriptionPrintActionProps = {
+  encounterUuid: string;
+  patientUuid: string;
+};
+
+const PrescriptionPrintAction: React.FC<PrescriptionPrintActionProps> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    const dispose = showModal('prescription-print-preview-modal', {
+      onClose: () => dispose(),
+      encounterUuid,
+      patientUuid,
+    });
+  }, [encounterUuid, patientUuid]);
+
+  return (
+    <Button renderIcon={Printer} iconDescription={t('print', 'Print')} onClick={handleClick} kind="ghost">
+      {t('printPrescriptions', 'Print prescriptions')}
+    </Button>
+  );
+};
+
+export default PrescriptionPrintAction;

package/src/print-prescription/prescription-print-preview.modal.tsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { useReactToPrint } from 'react-to-print';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@carbon/react';
+import { ErrorState, getCoreTranslation } from '@openmrs/esm-framework';
+import { usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import PrescriptionsPrintout from './prescription-printout.component';
+import PrintablePrescriptionsSelector from './printable-prescriptions.component';
+import styles from './print-prescription.scss';
+
+type PrescriptionPrintPreviewModalProps = {
+  onClose: () => void;
+  encounterUuid: string;
+  patientUuid: string;
+  status: string;
+};
+
+const PrescriptionPrintPreviewModal: React.FC<PrescriptionPrintPreviewModalProps> = ({ onClose, encounterUuid }) => {
+  const { t } = useTranslation();
+  const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid);
+
+  const [excludedPrescriptions, setExcludedPrescriptions] = useState<string[]>([]);
+  const [printError, setPrintError] = useState<string | null>(null);
+  const componentRef = useRef<HTMLDivElement>(null);
+
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+    onBeforeGetContent: () => {
+      setPrintError(null);
+    },
+    onPrintError: (error) => {
+      setPrintError(t('printError', 'An error occurred while printing. Please try again.'));
+    },
+    copyStyles: true,
+  });
+
+  return (
+    <>
+      <ModalHeader closeModal={onClose} className={styles.title}>
+        {t('printPrescriptions', 'Print prescriptions')}
+      </ModalHeader>
+      <ModalBody>
+        {isLoading && (
+          <InlineLoading
+            status="active"
+            iconDescription="Loading"
+            description={t('loading', 'Loading prescriptions') + '....'}
+          />
+        )}
+        {error && <ErrorState error={error} headerTitle={t('error', 'Error')} />}
+        {!isLoading && medicationRequestBundles?.length > 0 && (
+          <div className={styles.printoutSelectorRow}>
+            <PrintablePrescriptionsSelector
+              medicationRequests={medicationRequestBundles}
+              excludedPrescription={excludedPrescriptions}
+              onExcludedPrescriptionChange={setExcludedPrescriptions}
+            />
+            <div ref={componentRef}>
+              <PrescriptionsPrintout
+                medicationrequests={medicationRequestBundles}
+                excludedPrescription={excludedPrescriptions}
+              />
+            </div>
+          </div>
+        )}
+        {printError && (
+          <InlineNotification kind="error" title={t('printErrorTitle', 'Print Error')} subtitle={printError} />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {getCoreTranslation('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" onClick={handlePrint} type="button" disabled={isLoading}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default PrescriptionPrintPreviewModal;

package/src/print-prescription/prescription-printout.component.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
+import { formatDate, parseDate, useSession } from '@openmrs/esm-framework';
+import { type DosageInstruction, type MedicationRequestBundle, type Quantity } from '../types';
+import {
+  getDosageInstruction,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getQuantity,
+  getRefillsAllowed,
+} from '../utils';
+import styles from './print-prescription.scss';
+
+type PrescriptionsPrintoutProps = {
+  medicationrequests: Array<MedicationRequestBundle>;
+  excludedPrescription: Array<string>;
+};
+
+const PrescriptionsPrintout: React.FC<PrescriptionsPrintoutProps> = ({ medicationrequests, excludedPrescription }) => {
+  const { t } = useTranslation();
+  const {
+    sessionLocation: { display: facilityName },
+  } = useSession();
+  const patient = medicationrequests[0]?.request?.subject;
+
+  const extractPatientName = (display: string) => (display.includes('(') ? display.split('(')[0] : display);
+  return (
+    <Layer className={styles.printOutContainer}>
+      <StructuredListWrapper>
+        <StructuredListBody>
+          <StructuredListRow head>
+            <StructuredListCell head>
+              <br />
+              <br />
+              <p className={styles.printoutTitle}>{t('prescriptionInstructions', 'Prescription instructions')}</p>
+              {patient && (
+                <p className={classNames(styles.patientName, styles.faintText)}>
+                  {extractPatientName(patient.display)}
+                </p>
+              )}
+              <br />
+              <br />
+            </StructuredListCell>
+          </StructuredListRow>
+          {medicationrequests
+            ?.filter((req) => !excludedPrescription.includes(req.request.id))
+            ?.map((request, index) => {
+              const medicationEvent = request.request;
+              const dosageInstruction: DosageInstruction = getDosageInstruction(medicationEvent.dosageInstruction);
+              const quantity: Quantity = getQuantity(medicationEvent);
+              const numberOfRefillsAllowed: number = getRefillsAllowed(medicationEvent);
+
+              return (
+                <div key={index}>
+                  {dosageInstruction && (
+                    <StructuredListRow>
+                      <StructuredListCell>
+                        <p>
+                          <strong>
+                            {getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationEvent))}
+                          </strong>
+                        </p>
+                        <br />
+                        <p>
+                          <span className={styles.faintText}>{t('dose', 'Dose')}</span>
+                          {': '}
+                          <span>
+                            {dosageInstruction?.doseAndRate?.map((doseAndRate, index) => {
+                              return (
+                                <span key={index}>
+                                  {doseAndRate?.doseQuantity?.value} {doseAndRate?.doseQuantity?.unit}
+                                </span>
+                              );
+                            })}
+                          </span>{' '}
+                          &mdash; {dosageInstruction?.route?.text} &mdash; {dosageInstruction?.timing?.code?.text}
+                          {dosageInstruction?.timing?.repeat?.duration
+                            ? ` ${t('for', 'for')} ` +
+                              dosageInstruction?.timing?.repeat?.duration +
+                              ' ' +
+                              dosageInstruction?.timing?.repeat?.durationUnit
+                            : ' '}
+                          {quantity && (
+                            <p>
+                              <span className={styles.faintText}>{t('quantity', 'Quantity')}</span>
+                              {': '}
+                              <span>
+                                {quantity.value} {quantity.unit}
+                              </span>
+                            </p>
+                          )}
+                        </p>
+                        <p>
+                          <span className={styles.faintText}>{t('datePrescribed', 'Date prescribed')}</span>
+                          {': '} <span>{formatDate(parseDate(request.request.authoredOn))}</span>
+                        </p>
+                        <p>
+                          <span className={styles.faintText}>{t('refills', 'Refills')}</span>
+                          {': '}{' '}
+                          <span>
+                            {numberOfRefillsAllowed || numberOfRefillsAllowed === 0
+                              ? numberOfRefillsAllowed
+                              : t('noRefills', 'No refills')}
+                          </span>
+                        </p>
+
+                        {dosageInstruction?.text && <p>{dosageInstruction.text}</p>}
+                        {dosageInstruction?.additionalInstruction?.length > 0 && (
+                          <p>
+                            {dosageInstruction?.additionalInstruction.map((instruction) => instruction.text).join(', ')}
+                          </p>
+                        )}
+                      </StructuredListCell>
+                    </StructuredListRow>
+                  )}
+                </div>
+              );
+            })}
+          <p className={styles.facilityName}>{facilityName}</p>
+        </StructuredListBody>
+      </StructuredListWrapper>
+    </Layer>
+  );
+};
+
+export default PrescriptionsPrintout;

package/src/print-prescription/print-prescription.scss

@@ -0,0 +1,48 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.title {
+  @include type.type-style('heading-02');
+}
+
+.btnSet {
+  width: 100%;
+}
+
+.faintText {
+  color: colors.$gray-50;
+  @include type.type-style('heading-01');
+}
+
+.printOutContainer {
+  background-color: colors.$gray-20;
+  padding: layout.$spacing-05;
+  width: 20rem;
+}
+
+.printoutTitle {
+  @include type.type-style('heading-03');
+  text-align: center;
+  font-weight: bold;
+}
+
+.facilityName {
+  color: colors.$gray-50;
+  text-align: end;
+  padding: layout.$spacing-05 0 layout.$spacing-05 0;
+  @include type.type-style('label-01');
+}
+
+.printoutSelectorRow {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: 0 layout.$spacing-05 0 layout.$spacing-05;
+  justify-content: space-between;
+}
+
+.patientName {
+  text-transform: capitalize;
+  text-align: center;
+}

package/src/print-prescription/printable-prescriptions.component.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react';
+import { Checkbox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type DosageInstruction, type MedicationRequestBundle } from '../types';
+import { getDosageInstruction, getMedicationDisplay, getMedicationReferenceOrCodeableConcept } from '../utils';
+
+type PrintablePrescriptionsSelectorProps = {
+  medicationRequests: Array<MedicationRequestBundle>;
+  excludedPrescription: Array<string>;
+  onExcludedPrescriptionChange: React.Dispatch<React.SetStateAction<string[]>>;
+};
+
+const PrintablePrescriptionsSelector: React.FC<PrintablePrescriptionsSelectorProps> = ({
+  medicationRequests,
+  onExcludedPrescriptionChange,
+  excludedPrescription,
+}) => {
+  const { t } = useTranslation();
+
+  const handleChange = useCallback(
+    (checked: boolean, medicationEventId: string) => {
+      if (checked) {
+        onExcludedPrescriptionChange(excludedPrescription.filter((id) => id !== medicationEventId));
+      } else {
+        onExcludedPrescriptionChange([...excludedPrescription, medicationEventId]);
+      }
+    },
+    [onExcludedPrescriptionChange, excludedPrescription],
+  );
+
+  return (
+    <div>
+      <p>
+        <strong>{t('selectPrescriptions', 'Check prescriptions to print')}</strong>
+      </p>
+      {medicationRequests?.map((request) => {
+        const medicationEvent = request.request;
+        const dosageInstruction: DosageInstruction = getDosageInstruction(medicationEvent.dosageInstruction);
+
+        return (
+          <div key={medicationEvent.id}>
+            {dosageInstruction && (
+              <Checkbox
+                id={medicationEvent.id}
+                labelText={getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationEvent))}
+                checked={!excludedPrescription.includes(medicationEvent.id)}
+                onChange={(_, { checked }) => handleChange(checked, medicationEvent.id)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PrintablePrescriptionsSelector;

package/src/routes.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
     "webservices.rest": "^2.2.0"
@@ -50,5 +51,32 @@
       "slot": "prescription-action-button-slot",
       "component": "closeActionButton"
     }
+  ],
+  "workspaces": [
+    {
+      "name": "close-dispense-workspace",
+      "component": "closeDispenseWorkspace",
+      "type": "dispense",
+      "title": "Close prescription"
+    },
+    {
+      "name": "pause-dispense-workspace",
+      "component": "pauseDispenseWorkspace",
+      "type": "dispense",
+      "title": "Pause prescription"
+    },
+    {
+      "name": "dispense-workspace",
+      "component": "dispenseWorkspace",
+      "type": "dispense",
+      "title": "Dispense prescription",
+      "width": "wider"
+    }
+  ],
+  "modals": [
+    {
+      "name": "prescription-print-preview-modal",
+      "component": "printPrescriptionPreviewModal"
+    }
   ]
 }

package/src/types.ts

@@ -329,6 +329,7 @@ export interface MedicationRequest {
       start: string;
     };
   };
+  authoredOn?: string;
 }
 
 export interface MedicationRequestResponse {

package/translations/am.json

@@ -0,0 +1,85 @@
+{
+  "activePrescriptions": "Active prescriptions",
+  "age": "Age",
+  "allergiesCount_one": "{{count}} allergy",
+  "allergiesCount_other": "{{count}} allergies",
+  "allPrescriptions": "All prescriptions",
+  "appName": "Pharmacy",
+  "cancel": "Cancel",
+  "cancelled": "Cancelled",
+  "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
+  "close": "Close",
+  "closed": "Closed",
+  "closedDispense": "closed dispense",
+  "closePrescription": "Close prescription",
+  "completed": "Completed",
+  "created": "Created",
+  "delete": "Delete",
+  "dispense": "Dispense",
+  "dispensed": "Dispensed",
+  "dispenseDate": "Date of Dispense",
+  "dispensedBy": "Dispensed by",
+  "dispensedMedication": "dispensed medication",
+  "dispensePrescription": "Dispense prescription",
+  "dispensing": "Dispensing",
+  "dispensingAppError": "Dispensing App Error",
+  "dispensingAppMisconfigurationMessage": "Please contact your system administration: Misconfiguration - 'restrictTotalQuantityDispensed' cannot be enabled if 'allowModifyingPrescription' is enabled.",
+  "dose": "Dose",
+  "doseUnit": "Dose unit",
+  "drugDispensingUnit": "Dispensing unit",
+  "drugs": "Drugs",
+  "editCloseeRecord": "Edit Close Record",
+  "editDispenseRecord": "Edit Dispense Record",
+  "editPauseRecord": "Edit Pause Record",
+  "editRecord": "Edit Record",
+  "error": "Error",
+  "errorLoadingInventoryItems": "Error fetching inventory items",
+  "expired": "Expired",
+  "filterByLocation": "Filter by location",
+  "frequency": "Frequency",
+  "historyComments": "History and comments",
+  "home": "Home",
+  "last14Days": "Last 14 days",
+  "lastDispenser": "Last dispenser",
+  "loadingInventoryItems": "Loading inventory items...",
+  "location": "Location",
+  "maxQuantityRemaining": "Maximum quantity remaining:",
+  "medicationDispenseActionMenu": "Medication Dispense Action Menu",
+  "medicationListUpdated": "Medication dispense list has been updated.",
+  "missedCollections": "Missed collections",
+  "noAllergyDetailsFound": "No allergy details found",
+  "noPrescriptionsToDisplay": "No prescriptions to display",
+  "numberIsNotValid": "Number is not valid",
+  "ordered": "Ordered",
+  "orderedMedication ": "ordered medication",
+  "orders": "Orders",
+  "ordersForHomeDelivery": "Orders for home delivery",
+  "patientInstructions": "Patient instructions",
+  "patientName": "Patient name",
+  "pause": "Pause",
+  "paused": "Paused",
+  "pausedDispense": "paused dispense",
+  "pausePrescription": "Pause prescription",
+  "prescribed": "Prescribed",
+  "prescriber": "Prescriber",
+  "prescriptionDetails": "Prescription details",
+  "prescriptionsToFillToday": "Prescriptions to fill today",
+  "quantity": "Quantity",
+  "reasonForClose": "Reason for close",
+  "reasonForPause": "Reason for pause",
+  "refills": "Refills",
+  "route": "Route",
+  "searchByPatientIdOrName": "Search by patient ID or name",
+  "selectStockDispense": "Select stock to dispense from",
+  "status": "Status",
+  "stockDispense": "Stock Dispense",
+  "stockDispensed": "Stock dispensed",
+  "stockDispenseDetails": "Batch: {{batchNumber}} - Quantity: {{quantity}} ({{quantityUoM}}) - Expiry: {{expiration}}",
+  "stockDispensedSuccessfully": "Stock dispensed successfully and batch level updated.",
+  "substitutionReason": "Reason for substitution",
+  "substitutionType": "Type of substitution",
+  "tabList": "Tab List",
+  "today": "Today",
+  "view": "View"
+}

package/translations/ar.json

@@ -0,0 +1,85 @@
+{
+  "activePrescriptions": "Active prescriptions",
+  "age": "Age",
+  "allergiesCount_one": "{{count}} allergy",
+  "allergiesCount_other": "{{count}} allergies",
+  "allPrescriptions": "All prescriptions",
+  "appName": "Pharmacy",
+  "cancel": "Cancel",
+  "cancelled": "Cancelled",
+  "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
+  "close": "Close",
+  "closed": "Closed",
+  "closedDispense": "closed dispense",
+  "closePrescription": "Close prescription",
+  "completed": "Completed",
+  "created": "Created",
+  "delete": "Delete",
+  "dispense": "Dispense",
+  "dispensed": "Dispensed",
+  "dispenseDate": "Date of Dispense",
+  "dispensedBy": "Dispensed by",
+  "dispensedMedication": "dispensed medication",
+  "dispensePrescription": "Dispense prescription",
+  "dispensing": "Dispensing",
+  "dispensingAppError": "Dispensing App Error",
+  "dispensingAppMisconfigurationMessage": "Please contact your system administration: Misconfiguration - 'restrictTotalQuantityDispensed' cannot be enabled if 'allowModifyingPrescription' is enabled.",
+  "dose": "Dose",
+  "doseUnit": "Dose unit",
+  "drugDispensingUnit": "Dispensing unit",
+  "drugs": "Drugs",
+  "editCloseeRecord": "Edit Close Record",
+  "editDispenseRecord": "Edit Dispense Record",
+  "editPauseRecord": "Edit Pause Record",
+  "editRecord": "Edit Record",
+  "error": "Error",
+  "errorLoadingInventoryItems": "Error fetching inventory items",
+  "expired": "Expired",
+  "filterByLocation": "Filter by location",
+  "frequency": "Frequency",
+  "historyComments": "History and comments",
+  "home": "Home",
+  "last14Days": "Last 14 days",
+  "lastDispenser": "Last dispenser",
+  "loadingInventoryItems": "Loading inventory items...",
+  "location": "Location",
+  "maxQuantityRemaining": "Maximum quantity remaining:",
+  "medicationDispenseActionMenu": "Medication Dispense Action Menu",
+  "medicationListUpdated": "Medication dispense list has been updated.",
+  "missedCollections": "Missed collections",
+  "noAllergyDetailsFound": "No allergy details found",
+  "noPrescriptionsToDisplay": "No prescriptions to display",
+  "numberIsNotValid": "Number is not valid",
+  "ordered": "Ordered",
+  "orderedMedication ": "ordered medication",
+  "orders": "Orders",
+  "ordersForHomeDelivery": "Orders for home delivery",
+  "patientInstructions": "Patient instructions",
+  "patientName": "Patient name",
+  "pause": "Pause",
+  "paused": "Paused",
+  "pausedDispense": "paused dispense",
+  "pausePrescription": "Pause prescription",
+  "prescribed": "Prescribed",
+  "prescriber": "Prescriber",
+  "prescriptionDetails": "Prescription details",
+  "prescriptionsToFillToday": "Prescriptions to fill today",
+  "quantity": "Quantity",
+  "reasonForClose": "Reason for close",
+  "reasonForPause": "Reason for pause",
+  "refills": "Refills",
+  "route": "Route",
+  "searchByPatientIdOrName": "Search by patient ID or name",
+  "selectStockDispense": "Select stock to dispense from",
+  "status": "Status",
+  "stockDispense": "Stock Dispense",
+  "stockDispensed": "Stock dispensed",
+  "stockDispenseDetails": "Batch: {{batchNumber}} - Quantity: {{quantity}} ({{quantityUoM}}) - Expiry: {{expiration}}",
+  "stockDispensedSuccessfully": "Stock dispensed successfully and batch level updated.",
+  "substitutionReason": "Reason for substitution",
+  "substitutionType": "Type of substitution",
+  "tabList": "Tab List",
+  "today": "Today",
+  "view": "View"
+}