@openmrs/esm-dispensing-app 1.9.1 → 1.9.2-pre.1002

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Checkbox, Form, FormLabel, InlineLoading } from '@carbon/react';
 import {
@@ -20,6 +20,7 @@ import {
   computeNewFulfillerStatusAfterDispenseEvent,
   getFulfillerStatus,
   getUuidFromReference,
+  markEncounterAsStale,
   revalidate,
 } from '../utils';
 import { type PharmacyConfig } from '../config-schema';
@@ -61,9 +62,6 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
   // 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);
 
@@ -74,6 +72,7 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
     if (!isSubmitting) {
       setIsSubmitting(true);
       const abortController = new AbortController();
+      markEncounterAsStale(encounterUuid);
       saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.completed, abortController)
         .then((response) => {
           if (response.ok) {
@@ -173,8 +172,16 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
     }
   };
 
-  const checkIsValid = () => {
-    if (
+  const updateMedicationDispense = useCallback((medicationDispenseUpdate: Partial<MedicationDispense>) => {
+    setMedicationDispensePayload((prevState) => ({
+      ...prevState,
+      ...medicationDispenseUpdate,
+    }));
+  }, []);
+
+  // whether or not the form is valid and ready to submit
+  const isValid = useMemo(() => {
+    return (
       medicationDispensePayload &&
       medicationDispensePayload.performer &&
       medicationDispensePayload.performer[0]?.actor.reference &&
@@ -188,19 +195,12 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
       (!medicationDispensePayload.substitution.wasSubstituted ||
         (medicationDispensePayload.substitution.reason[0]?.coding[0].code &&
           medicationDispensePayload.substitution.type?.coding[0].code))
-    ) {
-      setIsValid(true);
-    } else {
-      setIsValid(false);
-    }
-  };
+    );
+  }, [medicationDispensePayload, quantityRemaining]);
 
   // 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, quantityRemaining, inventoryItem]);
-
   const isButtonDisabled = (config.enableStockDispense ? !inventoryItem : false) || !isValid || isSubmitting;
 
   const bannerState = useMemo(() => {
@@ -238,7 +238,7 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
             <div>
               <MedicationDispenseReview
                 medicationDispense={medicationDispensePayload}
-                updateMedicationDispense={setMedicationDispensePayload}
+                updateMedicationDispense={updateMedicationDispense}
                 quantityRemaining={quantityRemaining}
                 quantityDispensed={quantityDispensed}
               />

package/src/forms/forms.scss

@@ -152,3 +152,18 @@
 .reviewContainer {
   margin: 0.8rem 0 0 0 !important;
 }
+
+// copied from .sectionHeader of drug-order-form.scss
+.prescriptionFormSectionHeader {
+  @include type.type-style('heading-01');
+  margin-bottom: layout.$spacing-05;
+}
+
+// copied from .field of drug-order-form.scss
+.prescriptionFormField {
+  margin-bottom: layout.$spacing-05;
+
+  :global(.cds--label) {
+    vertical-align: middle;
+  }
+}

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

@@ -7,6 +7,7 @@ import { getConceptCodingUuid, getMedicationReferenceOrCodeableConcept, getOpenM
 import { useMedicationCodeableConcept, useMedicationFormulations } from '../medication/medication.resource';
 import { useMedicationRequest, usePrescriptionDetails } from '../medication-request/medication-request.resource';
 import {
+  blankSubstitution,
   useOrderConfig,
   useProviders,
   useSubstitutionReasonValueSet,
@@ -20,7 +21,7 @@ import styles from '../components/medication-dispense-review.scss';
 
 interface MedicationDispenseReviewProps {
   medicationDispense: MedicationDispense;
-  updateMedicationDispense: Function;
+  updateMedicationDispense(updates: Partial<MedicationDispense>);
   quantityRemaining: number;
   quantityDispensed: number;
 }
@@ -35,15 +36,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
   const config = useConfig<PharmacyConfig>();
   const session = useSession();
   const [isEditingFormulation, setIsEditingFormulation] = useState(false);
-  const [isSubstitution, setIsSubstitution] = useState(false);
-  // Dosing Unit eg Tablets
-  const [drugDosingUnits, setDrugDosingUnits] = useState([]);
-  // Dispensing Unit eg Tablets
-  const [drugDispensingUnits, setDrugDispensingUnits] = useState([]);
-  // Route eg Oral
-  const [drugRoutes, setDrugRoutes] = useState([]);
-  // Frequency eg Twice daily
-  const [orderFrequencies, setOrderFrequencies] = useState([]);
   // type of substitution question
   const [substitutionTypes, setSubstitutionTypes] = useState([]);
   // reason for substitution question
@@ -72,41 +64,21 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
   // we fetch this just to get the prescription date
   const { prescriptionDate } = usePrescriptionDetails(medicationRequest ? medicationRequest.encounter.reference : null);
 
-  useEffect(() => {
+  const { drugRoutes, drugDosingUnits, drugDispensingUnits, orderFrequencies } = useMemo(() => {
     if (orderConfigObject) {
-      // sync drug route options order config
-      const availableRoutes = drugRoutes.map((x) => x.id);
-      const otherRouteOptions = [];
-      orderConfigObject.drugRoutes.forEach(
-        (x) => availableRoutes.includes(x.uuid) || otherRouteOptions.push({ id: x.uuid, text: x.display }),
-      );
-      setDrugRoutes([...drugRoutes, ...otherRouteOptions]);
-
-      // sync dosage.unit options with what's defined in the order config
-      const availableDosingUnits = drugDosingUnits.map((x) => x.id);
-      const otherDosingUnits = [];
-      orderConfigObject.drugDosingUnits.forEach(
-        (x) => availableDosingUnits.includes(x.uuid) || otherDosingUnits.push({ id: x.uuid, text: x.display }),
-      );
-      setDrugDosingUnits([...drugDosingUnits, ...otherDosingUnits]);
-
-      // sync dispensing unit options with what's defined in the order config
-      const availableDispensingUnits = drugDispensingUnits.map((x) => x.id);
-      const otherDispensingUnits = [];
-      orderConfigObject.drugDispensingUnits.forEach(
-        (x) => availableDispensingUnits.includes(x.uuid) || otherDispensingUnits.push({ id: x.uuid, text: x.display }),
-      );
-      setDrugDispensingUnits([...drugDispensingUnits, ...otherDispensingUnits]);
-
-      // sync order frequency options with order config
-      const availableFrequencies = orderFrequencies.map((x) => x.id);
-      const otherFrequencyOptions = [];
-      orderConfigObject.orderFrequencies.forEach(
-        (x) => availableFrequencies.includes(x.uuid) || otherFrequencyOptions.push({ id: x.uuid, text: x.display }),
-      );
-      setOrderFrequencies([...orderFrequencies, ...otherFrequencyOptions]);
+      // Dosing Unit eg Tablets
+      const drugRoutes = orderConfigObject.drugRoutes.map((x) => ({ id: x.uuid, text: x.display }));
+      // Dispensing Unit eg Tablets
+      const drugDosingUnits = orderConfigObject.drugDosingUnits.map((x) => ({ id: x.uuid, text: x.display }));
+      // Route eg Oral
+      const drugDispensingUnits = orderConfigObject.drugDispensingUnits.map((x) => ({ id: x.uuid, text: x.display }));
+      // Frequency eg Twice daily
+      const orderFrequencies = orderConfigObject.orderFrequencies.map((x) => ({ id: x.uuid, text: x.display }));
+      return { drugRoutes, drugDosingUnits, drugDispensingUnits, orderFrequencies };
+    } else {
+      return { drugRoutes: [], drugDosingUnits: [], drugDispensingUnits: [], orderFrequencies: [] };
     }
-  }, [drugDispensingUnits, drugDosingUnits, drugRoutes, orderConfigObject, orderFrequencies]);
+  }, [orderConfigObject]);
 
   useEffect(() => {
     const substitutionTypeOptions = [];
@@ -164,36 +136,25 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
   );
 
   // check to see if the current dispense would be a substitution, and update accordingly
+  const isSubstitution =
+    medicationRequest?.medicationReference?.reference &&
+    medicationDispense?.medicationReference?.reference &&
+    medicationRequest.medicationReference.reference != medicationDispense.medicationReference.reference;
+
+  const { substitution } = medicationDispense;
   useEffect(() => {
-    if (
-      medicationRequest?.medicationReference?.reference &&
-      medicationDispense?.medicationReference?.reference &&
-      medicationRequest.medicationReference.reference != medicationDispense.medicationReference.reference
-    ) {
-      setIsSubstitution(true);
-      updateMedicationDispense({
-        ...medicationDispense,
-        substitution: {
-          ...medicationDispense.substitution,
-          wasSubstituted: true,
-        },
-      });
+    if (isSubstitution) {
+      // make sure that the value substitution.wasSubstituted exists and is truthy
+      if (!substitution.wasSubstituted) {
+        const newSubstitution = { ...substitution, wasSubstituted: true };
+        updateMedicationDispense({ substitution: newSubstitution });
+      }
     } else {
-      setIsSubstitution(false);
-      updateMedicationDispense({
-        ...medicationDispense,
-        substitution: {
-          wasSubstituted: false,
-          reason: [
-            {
-              coding: [{ code: null }],
-            },
-          ],
-          type: { coding: [{ code: null }] },
-        },
-      });
+      if (substitution != blankSubstitution) {
+        updateMedicationDispense({ substitution: blankSubstitution });
+      }
     }
-  }, [medicationDispense, medicationRequest, updateMedicationDispense]);
+  }, [isSubstitution, substitution, updateMedicationDispense]);
 
   useEffect(() => {
     setUserCanModify(session?.user && userHasAccess(PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS, session.user));
@@ -211,11 +172,9 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
           }
         : undefined;
   }, [medicationDispense?.performer, providers, session?.currentProvider?.uuid, session?.user?.person?.display]);
-
   useEffect(() => {
     if (initialDispenser?.uuid) {
       updateMedicationDispense({
-        ...medicationDispense,
         performer: [
           {
             actor: {
@@ -225,7 +184,7 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
         ],
       });
     }
-  }, [initialDispenser, medicationDispense, updateMedicationDispense]);
+  }, [initialDispenser, updateMedicationDispense]);
 
   return (
     <div className={styles.medicationDispenseReviewContainer}>
@@ -251,7 +210,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               onChange={({ selectedItem }) => {
                 const typedItem = selectedItem as Medication;
                 updateMedicationDispense({
-                  ...medicationDispense,
                   medicationCodeableConcept: undefined,
                   medicationReference: {
                     reference: 'Medication/' + typedItem?.id,
@@ -279,7 +237,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
                 }}
                 onChange={({ selectedItem }) => {
                   updateMedicationDispense({
-                    ...medicationDispense,
                     substitution: {
                       ...medicationDispense.substitution,
                       type: {
@@ -312,7 +269,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
                 }}
                 onChange={({ selectedItem }) => {
                   updateMedicationDispense({
-                    ...medicationDispense,
                     substitution: {
                       ...medicationDispense.substitution,
                       reason: [
@@ -362,10 +318,9 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             max={config.dispenseBehavior.restrictTotalQuantityDispensed ? quantityRemaining : undefined}
             onChange={(event, state) => {
               updateMedicationDispense({
-                ...medicationDispense,
                 quantity: {
                   ...medicationDispense.quantity,
-                  value: state.value ? parseFloat(state.value.toString()) : '',
+                  value: state.value ? parseFloat(state.value.toString()) : 0,
                 },
               });
             }}
@@ -383,7 +338,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               }}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
-                  ...medicationDispense,
                   // note that we specifically recreate doseQuantity to overwrite any unit or system properties that may have been set
                   quantity: {
                     value: medicationDispense.quantity.value,
@@ -408,7 +362,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             value={medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity.value}
             onChange={(event, state) => {
               updateMedicationDispense({
-                ...medicationDispense,
                 dosageInstruction: [
                   {
                     ...medicationDispense.dosageInstruction[0],
@@ -417,7 +370,7 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
                         ...medicationDispense.dosageInstruction[0].doseAndRate[0],
                         doseQuantity: {
                           ...medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity,
-                          value: state.value ? parseFloat(state.value.toString()) : '',
+                          value: state.value ? parseFloat(state.value.toString()) : 0,
                         },
                       },
                     ],
@@ -440,7 +393,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               }}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
-                  ...medicationDispense,
                   dosageInstruction: [
                     {
                       ...medicationDispense.dosageInstruction[0],
@@ -474,7 +426,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               itemToString={(item) => item?.text}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
-                  ...medicationDispense,
                   dosageInstruction: [
                     {
                       ...medicationDispense.dosageInstruction[0],
@@ -507,7 +458,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             itemToString={(item) => item?.text}
             onChange={({ selectedItem }) => {
               updateMedicationDispense({
-                ...medicationDispense,
                 dosageInstruction: [
                   {
                     ...medicationDispense.dosageInstruction[0],
@@ -535,7 +485,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
           maxLength={65535}
           onChange={(e) => {
             updateMedicationDispense({
-              ...medicationDispense,
               dosageInstruction: [
                 {
                   ...medicationDispense.dosageInstruction[0],
@@ -555,7 +504,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             const currentDate = medicationDispense.whenHandedOver ? dayjs(medicationDispense.whenHandedOver) : null;
             const selectedDate = dayjs(input);
             updateMedicationDispense({
-              ...medicationDispense,
               whenHandedOver: currentDate?.isSame(selectedDate, 'day')
                 ? currentDate.toISOString()
                 : selectedDate.toISOString(), // to preserve any time component, only update if the day actually changes
@@ -570,7 +518,6 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
               initialSelectedItem={initialDispenser}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
-                  ...medicationDispense,
                   performer: [
                     {
                       actor: {

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

@@ -126,7 +126,7 @@ describe('Medication Dispense Review Component tests', () => {
       },
     };
 
-    const mockUpdate: Function = jest.fn();
+    const mockUpdate = jest.fn();
     render(
       <MedicationDispenseReview
         medicationDispense={medicationDispense}

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

@@ -13,7 +13,7 @@ import {
 } from '@openmrs/esm-framework';
 import { saveMedicationDispense, useReasonForPauseValueSet } from '../medication-dispense/medication-dispense.resource';
 import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
-import { getUuidFromReference, revalidate } from '../utils';
+import { getUuidFromReference, markEncounterAsStale, revalidate } from '../utils';
 import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
 import { type PharmacyConfig } from '../config-schema';
 import styles from './forms.scss';
@@ -71,6 +71,7 @@ const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({
     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

package/src/history/history-and-comments.component.tsx

@@ -34,6 +34,7 @@ import {
   revalidate,
   sortMedicationDispensesByWhenHandedOver,
   computeTotalQuantityDispensed,
+  markEncounterAsStale,
 } from '../utils';
 import { type PharmacyConfig } from '../config-schema';
 
@@ -222,6 +223,7 @@ const HistoryAndComments: React.FC<{
       config.dispenseBehavior.restrictTotalQuantityDispensed,
     );
 
+    markEncounterAsStale(encounterUuid);
     deleteMedicationDispense(medicationDispense.id)
       .then(() => {
         showSnackbar({

package/src/medication-dispense/medication-dispense.resource.tsx

@@ -166,16 +166,18 @@ export function initiateMedicationDispenseBody(
               ],
         },
       ],
-      substitution: {
-        wasSubstituted: false,
-        reason: [
-          {
-            coding: [{ code: null }],
-          },
-        ],
-        type: { coding: [{ code: null }] },
-      },
+      substitution: blankSubstitution,
     };
   }
   return medicationDispense;
 }
+
+export const blankSubstitution = {
+  wasSubstituted: false,
+  reason: [
+    {
+      coding: [{ code: null }],
+    },
+  ],
+  type: { coding: [{ code: null }] },
+};

package/src/medication-request/medication-request.resource.test.tsx

@@ -13,12 +13,16 @@ import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS }
 
 jest.mocked(openmrsFetch);
 jest.mock('swr');
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useMemo: jest.fn((fn) => fn()),
+}));
 
 describe('Medication Request Resource Test', () => {
   test('usePrescriptionsTable should call active endpoint and proper date based on expiration period if status parameter is active', () => {
     // @ts-ignore
     useSWR.mockImplementation(() => ({ data: { data: 'mockedReturnData' } }));
-    usePrescriptionsTable(5, 5, 'bob', null, 'ACTIVE', 10, 10000);
+    usePrescriptionsTable(true, 5, 5, 'bob', null, 'ACTIVE', 10, 10000);
     expect(useSWR).toHaveBeenCalledWith(
       `/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=5&_count=5&date=ge${dayjs()
         .startOf('day')
@@ -32,7 +36,7 @@ describe('Medication Request Resource Test', () => {
   test('usePrescriptionsTable should call all endpoint if status parameter is not active', () => {
     // @ts-ignore
     useSWR.mockImplementation(() => ({ data: { data: 'mockedReturnData' } }));
-    usePrescriptionsTable(5, 5, 'bob', null, null, 10, 10000);
+    usePrescriptionsTable(true, 5, 5, 'bob', null, null, 10, 10000);
     expect(useSWR).toHaveBeenCalledWith(
       `/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=5&_count=5&patientSearchTerm=bob`,
       openmrsFetch,
@@ -587,7 +591,7 @@ describe('Medication Request Resource Test', () => {
 
     // @ts-ignore
     useSWR.mockImplementation(() => ({ data: { data: queryResultsBundle } }));
-    const { prescriptionsTableRows, totalOrders } = usePrescriptionsTable(2, 0, 'bob', 'ACTIVE', null, 90, 10000);
+    const { prescriptionsTableRows, totalOrders } = usePrescriptionsTable(true, 2, 0, 'bob', 'ACTIVE', null, 90, 10000);
     expect(totalOrders).toBe(26);
     expect(prescriptionsTableRows.length).toBe(2);
     expect(prescriptionsTableRows[0].id).toBe('7aee7123-9e50-4f72-a636-895d77a63e98');

package/src/medication-request/medication-request.resource.tsx

@@ -23,8 +23,10 @@ import {
 } from '../utils';
 import dayjs from 'dayjs';
 import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS } from '../constants';
+import { useMemo } from 'react';
 
 export function usePrescriptionsTable(
+  loadData: boolean,
   pageSize: number = 10,
   pageOffset: number = 0,
   patientSearchTerm: string = '',
@@ -34,15 +36,17 @@ export function usePrescriptionsTable(
   refreshInterval: number,
 ) {
   const { data, error } = useSWR<{ data: EncounterResponse }, Error>(
-    status === 'ACTIVE'
-      ? getPrescriptionTableActiveMedicationRequestsEndpoint(
-          pageOffset,
-          pageSize,
-          dayjs(new Date()).startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day').toISOString(),
-          patientSearchTerm,
-          location,
-        )
-      : getPrescriptionTableAllMedicationRequestsEndpoint(pageOffset, pageSize, patientSearchTerm, location),
+    loadData
+      ? status === 'ACTIVE'
+        ? getPrescriptionTableActiveMedicationRequestsEndpoint(
+            pageOffset,
+            pageSize,
+            dayjs(new Date()).startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day').toISOString(),
+            patientSearchTerm,
+            location,
+          )
+        : getPrescriptionTableAllMedicationRequestsEndpoint(pageOffset, pageSize, patientSearchTerm, location)
+      : null,
     openmrsFetch,
     { refreshInterval: refreshInterval },
   );
@@ -124,54 +128,53 @@ function buildPrescriptionsTableRow(
 }
 
 export function usePrescriptionDetails(encounterUuid: string, refreshInterval = null) {
-  const medicationRequestBundles: Array<MedicationRequestBundle> = [];
-  let prescriptionDate: Date;
-  let isLoading = true;
-
-  const { data, error } = useSWR<{ data: MedicationRequestResponse }, Error>(
+  const { data, ...rest } = useSWR<{ data: MedicationRequestResponse }, Error>(
     getPrescriptionDetailsEndpoint(encounterUuid),
     openmrsFetch,
     { refreshInterval: refreshInterval },
   );
 
-  if (data) {
-    const results = data?.data.entry;
-
-    const encounter = results
-      ?.filter((entry) => entry?.resource?.resourceType == 'Encounter')
-      .map((entry) => entry.resource as Encounter);
-
-    if (encounter) {
-      // by definition of the request (search by encounter) there should be one and only one encounter
-      prescriptionDate = parseDate(encounter[0]?.period.start);
+  const { medicationRequestBundles, prescriptionDate } = useMemo(() => {
+    const medicationRequestBundles: Array<MedicationRequestBundle> = [];
+    let prescriptionDate: Date;
+    if (data) {
+      const results = data?.data.entry;
 
-      const medicationRequests = results
-        ?.filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
-        .map((entry) => entry.resource as MedicationRequest);
-
-      const medicationDispenses = results
-        ?.filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
-        .map((entry) => entry.resource as MedicationDispense)
-        .sort(sortMedicationDispensesByWhenHandedOver);
+      const encounter = results
+        ?.filter((entry) => entry?.resource?.resourceType == 'Encounter')
+        .map((entry) => entry.resource as Encounter);
 
-      medicationRequests.every((medicationRequest) =>
-        medicationRequestBundles.push({
-          request: medicationRequest,
-          dispenses: getAssociatedMedicationDispenses(medicationRequest, medicationDispenses).sort(
-            sortMedicationDispensesByWhenHandedOver,
-          ),
-        }),
-      );
+      if (encounter) {
+        // by definition of the request (search by encounter) there should be one and only one encounter
+        prescriptionDate = parseDate(encounter[0]?.period.start);
+
+        const medicationRequests = results
+          ?.filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
+          .map((entry) => entry.resource as MedicationRequest);
+
+        const medicationDispenses = results
+          ?.filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
+          .map((entry) => entry.resource as MedicationDispense)
+          .sort(sortMedicationDispensesByWhenHandedOver);
+
+        medicationRequests.every((medicationRequest) =>
+          medicationRequestBundles.push({
+            request: medicationRequest,
+            dispenses: getAssociatedMedicationDispenses(medicationRequest, medicationDispenses).sort(
+              sortMedicationDispensesByWhenHandedOver,
+            ),
+          }),
+        );
+      }
     }
-  }
 
-  isLoading = (!medicationRequestBundles || medicationRequestBundles.length == 0) && !error;
+    return { medicationRequestBundles, prescriptionDate };
+  }, [data]);
 
   return {
     medicationRequestBundles,
     prescriptionDate,
-    error,
-    isLoading,
+    ...rest,
   };
 }
 

package/src/prescriptions/patient-search-tab-panel.component.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Button, Search, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { PatientSearchPictogram } from '@openmrs/esm-framework';
+import PrescriptionsTable from './prescriptions-table.component';
+import styles from './patient-search-tab-panel.scss';
+
+const PatientSearchTabPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [submittedSearchTerm, setSubmittedSearchTerm] = useState('');
+
+  return (
+    <TabPanel>
+      <div className={styles.searchTabPanel}>
+        <form
+          className={styles.searchBar}
+          onSubmit={(e) => {
+            e.preventDefault();
+            setSubmittedSearchTerm(searchTerm);
+          }}>
+          <Search
+            closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+            defaultValue={searchTerm}
+            placeholder={t('searchForPatient', 'Search for a patient by name or identifier number')}
+            labelText={t('searchForPatient', 'Search for a patient by name or identifier number')}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            onClear={() => setSubmittedSearchTerm('')}
+            size="lg"
+          />
+          <Button kind="secondary" type="submit">
+            {t('search', 'Search')}
+          </Button>
+        </form>
+        {submittedSearchTerm ? (
+          <PrescriptionsTable
+            loadData={true}
+            status={'ACTIVE'}
+            debouncedSearchTerm={submittedSearchTerm}
+            location={''}
+          />
+        ) : (
+          <div className={styles.searchForPatientPlaceholder}>
+            <div>
+              <PatientSearchPictogram />
+              <h5>{t('searchForPatientHeader', 'Search for a patient')}</h5>
+              <div>{t('searchForPatient', 'Search for a patient by name or identifier number')}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </TabPanel>
+  );
+};
+
+export default PatientSearchTabPanel;