@openmrs/esm-dispensing-app 1.6.2 → 1.6.3-pre.10

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

@@ -1,9 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { ComboBox, Dropdown, NumberInput, Stack, TextArea } from '@carbon/react';
-import { OpenmrsDatePicker, useLayoutType, useConfig, useSession, userHasAccess } from '@openmrs/esm-framework';
-import { getConceptCodingUuid, getMedicationReferenceOrCodeableConcept, getOpenMRSMedicineDrugName } from '../utils';
+import { ComboBox, Dropdown, NumberInput, Stack, TextArea  } from '@carbon/react';
+import {
+  OpenmrsDatePicker,
+  useLayoutType,
+  useConfig,
+  useSession,
+  userHasAccess,
+  ResponsiveWrapper,
+} from '@openmrs/esm-framework';
+import {
+  getConceptCodingUuid,
+  getMedicationReferenceOrCodeableConcept,
+  getOpenMRSMedicineDrugName,
+} from '../utils';
 import { useMedicationCodeableConcept, useMedicationFormulations } from '../medication/medication.resource';
 import { useMedicationRequest, usePrescriptionDetails } from '../medication-request/medication-request.resource';
 import {
@@ -22,12 +33,14 @@ interface MedicationDispenseReviewProps {
   medicationDispense: MedicationDispense;
   updateMedicationDispense: Function;
   quantityRemaining: number;
+  quantityDispensed: number;
 }
 
 const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
   medicationDispense,
   updateMedicationDispense,
   quantityRemaining,
+  quantityDispensed,
 }) => {
   const { t } = useTranslation();
   const config = useConfig<PharmacyConfig>();
@@ -206,97 +219,115 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             editAction={userCanModify && allowEditing ? () => setIsEditingFormulation(true) : null}
           />
         ) : (
-          <Dropdown
-            id="medicationFormulation"
-            light={isTablet}
-            items={medicationFormulations}
-            itemToString={(item: Medication) => getOpenMRSMedicineDrugName(item)}
-            initialSelectedItem={{
-              ...medicationFormulations?.find(
-                (formulation) => formulation.id === medicationDispense.medicationReference?.reference.split('/')[1],
-              ),
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                medicationCodeableConcept: undefined,
-                medicationReference: {
-                  reference: 'Medication/' + selectedItem?.id,
-                  display: getOpenMRSMedicineDrugName(selectedItem),
-                },
-              });
-              setIsEditingFormulation(false);
-            }}
-            required
-          />
-        )}
-
-        {isSubstitution && (
-          <div className={styles.dispenseDetailsContainer}>
-            <ComboBox
-              className={styles.substitutionType}
-              id="substitutionType"
-              light={isTablet}
-              items={substitutionTypes}
-              titleText={t('substitutionType', 'Type of substitution')}
-              itemToString={(item) => item?.text}
+          <ResponsiveWrapper>
+            <Dropdown
+              id="medicationFormulation"
+              items={medicationFormulations}
+              itemToString={(item: Medication) => getOpenMRSMedicineDrugName(item)}
               initialSelectedItem={{
-                id: medicationDispense.substitution.type?.coding[0]?.code,
-                text: medicationDispense.substitution.type?.text,
+                ...medicationFormulations?.find(
+                  (formulation) => formulation.id === medicationDispense.medicationReference?.reference.split('/')[1],
+                ),
               }}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
                   ...medicationDispense,
-                  substitution: {
-                    ...medicationDispense.substitution,
-                    type: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
-                    },
+                  medicationCodeableConcept: undefined,
+                  medicationReference: {
+                    reference: 'Medication/' + selectedItem?.id,
+                    display: getOpenMRSMedicineDrugName(selectedItem),
                   },
                 });
+                setIsEditingFormulation(false);
               }}
+              required
             />
-          </div>
+          </ResponsiveWrapper>
         )}
 
         {isSubstitution && (
           <div className={styles.dispenseDetailsContainer}>
-            <ComboBox
-              className={styles.substitutionReason}
-              id="substitutionReason"
-              light={isTablet}
-              items={substitutionReasons}
-              titleText={t('substitutionReason', 'Reason for substitution')}
-              itemToString={(item) => item?.text}
-              initialSelectedItem={{
-                id: medicationDispense.substitution.reason[0]?.coding[0]?.code,
-                text: medicationDispense.substitution.reason[0]?.text,
-              }}
-              onChange={({ selectedItem }) => {
-                updateMedicationDispense({
-                  ...medicationDispense,
-                  substitution: {
-                    ...medicationDispense.substitution,
-                    reason: [
-                      {
+            <ResponsiveWrapper>
+              <ComboBox
+                className={styles.substitutionType}
+                id="substitutionType"
+                items={substitutionTypes}
+                titleText={t('substitutionType', 'Type of substitution')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.substitution.type?.coding[0]?.code,
+                  text: medicationDispense.substitution.type?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  updateMedicationDispense({
+                    ...medicationDispense,
+                    substitution: {
+                      ...medicationDispense.substitution,
+                      type: {
                         coding: [
                           {
                             code: selectedItem?.id,
                           },
                         ],
                       },
-                    ],
-                  },
-                });
-              }}
-            />
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
           </div>
         )}
 
+        {isSubstitution && (
+          <div className={styles.dispenseDetailsContainer}>
+            <ResponsiveWrapper>
+              <ComboBox
+                className={styles.substitutionReason}
+                id="substitutionReason"
+                items={substitutionReasons}
+                titleText={t('substitutionReason', 'Reason for substitution')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.substitution.reason[0]?.coding[0]?.code,
+                  text: medicationDispense.substitution.reason[0]?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  updateMedicationDispense({
+                    ...medicationDispense,
+                    substitution: {
+                      ...medicationDispense.substitution,
+                      reason: [
+                        {
+                          coding: [
+                            {
+                              code: selectedItem?.id,
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
+          </div>
+        )}
+        <ResponsiveWrapper>
+          <div>
+            <p className={styles.quantitySummary}>
+              {t('quantityPrescribed', 'Quantity Prescribed')}:{medicationDispense.quantity.value}
+            </p>
+            <p className={styles.quantitySummary}>
+              {t('quantityDispensed', 'Quantity Dispensed')}: {quantityDispensed}
+            </p>
+            {config.dispenseBehavior.restrictTotalQuantityDispensed ? (
+              <p className={styles.quantitySummary}>
+                {t('quantityRemaining', 'Quantity Remaining to Dispense')}:{quantityRemaining}
+              </p>
+            ) : null}
+          </div>
+        </ResponsiveWrapper>
+
         <div className={styles.dispenseDetailsContainer}>
           <NumberInput
             allowEmpty={false}
@@ -305,14 +336,10 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             id="quantity"
             invalidText={t('numberIsNotValid', 'Number is not valid')}
             label={
-              t('quantity', 'Quantity') +
-              (config.dispenseBehavior.restrictTotalQuantityDispensed
-                ? ' (' + t('maxQuantityRemaining', 'Maximum quantity remaining:') + ' ' + quantityRemaining + ')'
-                : '')
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>{t('quantity', 'Quantity')}</div>
             }
             min={0}
             max={config.dispenseBehavior.restrictTotalQuantityDispensed ? quantityRemaining : undefined}
-            value={medicationDispense.quantity.value}
             onChange={(e) => {
               updateMedicationDispense({
                 ...medicationDispense,
@@ -323,30 +350,30 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               });
             }}
           />
-
-          <ComboBox
-            id="quantityUnits"
-            disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugDispensingUnits}
-            titleText={t('drugDispensingUnit', 'Dispensing unit')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.quantity.code,
-              text: medicationDispense.quantity.unit,
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
-                quantity: {
-                  value: medicationDispense.quantity.value,
-                  code: selectedItem?.id,
-                },
-              });
-            }}
-            required
-          />
+          <ResponsiveWrapper>
+            <ComboBox
+              id="quantityUnits"
+              disabled={!userCanModify || !allowEditing}
+              items={drugDispensingUnits}
+              titleText={t('drugDispensingUnit', 'Dispensing unit')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.quantity.code,
+                text: medicationDispense.quantity.unit,
+              }}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                  quantity: {
+                    value: medicationDispense.quantity.value,
+                    code: selectedItem?.id,
+                  },
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
         </div>
 
         <div className={styles.dispenseDetailsContainer}>
@@ -380,49 +407,83 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             }}
           />
 
-          <ComboBox
-            id="dosingUnits"
-            disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugDosingUnits}
-            titleText={t('doseUnit', 'Dose unit')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.code,
-              text: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.unit,
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                dosageInstruction: [
-                  {
-                    ...medicationDispense.dosageInstruction[0],
-                    doseAndRate: [
-                      {
-                        doseQuantity: {
-                          // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
-                          value: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.value,
-                          code: selectedItem?.id,
+          <ResponsiveWrapper>
+            <ComboBox
+              id="dosingUnits"
+              disabled={!userCanModify || !allowEditing}
+              items={drugDosingUnits}
+              titleText={t('doseUnit', 'Dose unit')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.code,
+                text: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.unit,
+              }}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  dosageInstruction: [
+                    {
+                      ...medicationDispense.dosageInstruction[0],
+                      doseAndRate: [
+                        {
+                          doseQuantity: {
+                            // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                            value: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.value,
+                            code: selectedItem?.id,
+                          },
                         },
+                      ],
+                    },
+                  ],
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
+
+          <ResponsiveWrapper>
+            <ComboBox
+              id="editRoute"
+              disabled={!userCanModify || !allowEditing}
+              items={drugRoutes}
+              initialSelectedItem={{
+                id: medicationDispense.dosageInstruction[0].route?.coding[0]?.code,
+                text: medicationDispense.dosageInstruction[0].route?.text,
+              }}
+              titleText={t('route', 'Route')}
+              itemToString={(item) => item?.text}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  dosageInstruction: [
+                    {
+                      ...medicationDispense.dosageInstruction[0],
+                      route: {
+                        coding: [
+                          {
+                            code: selectedItem?.id,
+                          },
+                        ],
                       },
-                    ],
-                  },
-                ],
-              });
-            }}
-            required
-          />
+                    },
+                  ],
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
+        </div>
 
+        <ResponsiveWrapper>
           <ComboBox
-            id="editRoute"
+            id="frequency"
             disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugRoutes}
+            items={orderFrequencies}
             initialSelectedItem={{
-              id: medicationDispense.dosageInstruction[0].route?.coding[0]?.code,
-              text: medicationDispense.dosageInstruction[0].route?.text,
+              id: medicationDispense.dosageInstruction[0].timing?.code?.coding[0]?.code,
+              text: medicationDispense.dosageInstruction[0].timing?.code?.text,
             }}
-            titleText={t('route', 'Route')}
+            titleText={t('frequency', 'Frequency')}
             itemToString={(item) => item?.text}
             onChange={({ selectedItem }) => {
               updateMedicationDispense({
@@ -430,12 +491,15 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
                 dosageInstruction: [
                   {
                     ...medicationDispense.dosageInstruction[0],
-                    route: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
+                    timing: {
+                      ...medicationDispense.dosageInstruction[0].timing,
+                      code: {
+                        coding: [
+                          {
+                            code: selectedItem?.id,
+                          },
+                        ],
+                      },
                     },
                   },
                 ],
@@ -443,41 +507,7 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             }}
             required
           />
-        </div>
-
-        <ComboBox
-          id="frequency"
-          disabled={!userCanModify || !allowEditing}
-          light={isTablet}
-          items={orderFrequencies}
-          initialSelectedItem={{
-            id: medicationDispense.dosageInstruction[0].timing?.code?.coding[0]?.code,
-            text: medicationDispense.dosageInstruction[0].timing?.code?.text,
-          }}
-          titleText={t('frequency', 'Frequency')}
-          itemToString={(item) => item?.text}
-          onChange={({ selectedItem }) => {
-            updateMedicationDispense({
-              ...medicationDispense,
-              dosageInstruction: [
-                {
-                  ...medicationDispense.dosageInstruction[0],
-                  timing: {
-                    ...medicationDispense.dosageInstruction[0].timing,
-                    code: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
-                    },
-                  },
-                },
-              ],
-            });
-          }}
-          required
-        />
+        </ResponsiveWrapper>
 
         <TextArea
           labelText={t('patientInstructions', 'Patient instructions')}
@@ -514,33 +544,34 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
           value={dayjs(medicationDispense.whenHandedOver).toDate()}></OpenmrsDatePicker>
 
         {providers && (
-          <ComboBox
-            id="dispenser"
-            light={isTablet}
-            initialSelectedItem={
-              medicationDispense?.performer[0].actor.reference
-                ? providers.find(
-                    (provider) => provider.uuid === medicationDispense?.performer[0].actor.reference.split('/')[1],
-                  )
-                : null
-            }
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                performer: [
-                  {
-                    actor: {
-                      reference: `Practitioner/${selectedItem?.uuid}`,
+          <ResponsiveWrapper>
+            <ComboBox
+              id="dispenser"
+              initialSelectedItem={
+                medicationDispense?.performer[0].actor.reference
+                  ? providers.find(
+                      (provider) => provider.uuid === medicationDispense?.performer[0].actor.reference.split('/')[1],
+                    )
+                  : null
+              }
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  performer: [
+                    {
+                      actor: {
+                        reference: `Practitioner/${selectedItem?.uuid}`,
+                      },
                     },
-                  },
-                ],
-              });
-            }}
-            items={providers}
-            itemToString={(item) => item?.person?.display}
-            required
-            titleText={t('dispensedBy', 'Dispensed by')}
-          />
+                  ],
+                });
+              }}
+              items={providers}
+              itemToString={(item) => item?.person?.display}
+              required
+              titleText={t('dispensedBy', 'Dispensed by')}
+            />
+          </ResponsiveWrapper>
         )}
       </Stack>
     </div>

package/src/forms/{medication-dispense-review.component.test.tsx → medication-dispense-review.test.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
 import { type MedicationDispense, MedicationDispenseStatus } from '../types';
 import MedicationDispenseReview from './medication-dispense-review.component';
-import { useConfig } from '@openmrs/esm-framework';
 
 const mockUseConfig = jest.mocked(useConfig);
 
@@ -132,6 +132,7 @@ describe('Medication Dispense Review Component tests', () => {
         medicationDispense={medicationDispense}
         updateMedicationDispense={mockUpdate}
         quantityRemaining={30}
+        quantityDispensed={30}
       />,
     );
 

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

@@ -5,6 +5,7 @@ import {
   type DefaultWorkspaceProps,
   ExtensionSlot,
   getCoreTranslation,
+  ResponsiveWrapper,
   showSnackbar,
   useConfig,
   useLayoutType,
@@ -152,29 +153,30 @@ const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({
         )}
         {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
         <section className={styles.formGroup}>
-          <ComboBox
-            id="reasonForPause"
-            light={isTablet}
-            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>
+            <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}>

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

@@ -1,9 +1,10 @@
 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';
-import { formatDate } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 
 type StockDispenseProps = {
   medicationDispense: MedicationDispense;
@@ -13,17 +14,13 @@ type StockDispenseProps = {
 
 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));
-  const validInventoryItemss = inventoryItems
+  const validInventoryItems = inventoryItems
     .filter((item) => isValidBatch(medicationDispense, item))
-    .sort((a, b) => {
-      const dateA = new Date(a.expiration);
-      const dateB = new Date(b.expiration);
-
-      return dateA.getDate() - dateB.getDate();
-    });
+    .sort((a, b) => new Date(a.expiration).getTime() - new Date(b.expiration).getTime());
 
   function parseDate(dateString) {
     return new Date(dateString);
@@ -31,6 +28,9 @@ const StockDispense: React.FC<StockDispenseProps> = ({ medicationDispense, updat
 
   //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 (