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

package/src/prescriptions/patient-search-tab-panel.scss

@@ -0,0 +1,26 @@
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.searchTabPanel {
+  display: flex;
+  flex-direction: column;
+  margin: layout.$spacing-05 layout.$spacing-04;
+  gap: layout.$spacing-05;
+}
+
+.searchForPatientPlaceholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 400px;
+  flex: 1;
+  border: solid 1px $grey-2;
+}
+
+.searchBar {
+  input {
+    background-color: $ui-02;
+  }
+  display: flex;
+}

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

@@ -9,7 +9,7 @@ import { type PharmacyConfig } from '../config-schema';
 import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
 import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
 import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
-import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay } from '../utils';
+import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay, useStaleEncounterUuids } from '../utils';
 import PrescriptionsActionsFooter from './prescription-actions.component';
 import styles from './prescription-details.scss';
 
@@ -22,6 +22,7 @@ const PrescriptionDetails: React.FC<{
   const [isAllergiesLoading, setAllergiesLoadingStatus] = useState(true);
   const { allergies, totalAllergies } = usePatientAllergies(patientUuid, config.refreshInterval);
   const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid, config.refreshInterval);
+  const { staleEncounterUuids } = useStaleEncounterUuids();
 
   useEffect(() => {
     if (typeof totalAllergies == 'number') {
@@ -99,6 +100,7 @@ const PrescriptionDetails: React.FC<{
                   patientUuid={patientUuid}
                   encounterUuid={encounterUuid}
                   medicationRequestBundle={bundle}
+                  disabled={staleEncounterUuids.includes(encounterUuid)}
                 />
               </UserHasAccess>
               <MedicationEvent

package/src/prescriptions/prescription-tab-lists.component.tsx

@@ -1,45 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { ComboBox, Search, Tab, Tabs, TabList, TabPanels } from '@carbon/react';
+import React, { useState } from 'react';
+import { Tab, Tabs, TabList, TabPanels } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
-import { useLocationForFiltering } from '../location/location.resource';
-import { type SimpleLocation } from '../types';
-import { type PharmacyConfig } from '../config-schema';
 import PrescriptionTabPanel from './prescription-tab-panel.component';
 import styles from './prescriptions.scss';
+import PatientSearchTabPanel from './patient-search-tab-panel.component';
 
 const PrescriptionTabLists: React.FC = () => {
   const { t } = useTranslation();
-  const config = useConfig<PharmacyConfig>();
-  const { filterLocations, isLoading: isFilterLocationsLoading } = useLocationForFiltering(config);
-  const [searchTermUserInput, setSearchTermUserInput] = useState(''); // we have a separate "searchTermUserInput" and "searchTerm" in order to debounce
-  const [searchTerm, setSearchTerm] = useState('');
-  const [location, setLocation] = useState('');
   const [selectedTab, setSelectedTab] = useState(0);
 
-  const tabs = [
-    {
-      key: 'activePrescriptions',
-      header: t('activePrescriptions', 'Active Prescriptions'),
-      status: 'ACTIVE',
-    },
-    {
-      key: 'allPrescriptions',
-      header: t('allPrescriptions', 'All Prescriptions'),
-      status: '',
-    },
-  ];
-
-  // debounce: delay the search term update so that a search isn't triggered on every single keystroke
-  useEffect(() => {
-    const debounceFn = setTimeout(() => {
-      setSearchTerm(searchTermUserInput);
-    }, 500);
-
-    return () => clearTimeout(debounceFn);
-  }, [searchTermUserInput]);
-
-  // we use this to only render the tab panel that is currently selected, see O3-2777
   const handleTabChange = (event) => {
     setSelectedTab(event.selectedIndex);
   };
@@ -49,58 +18,23 @@ const PrescriptionTabLists: React.FC = () => {
       <section className={styles.prescriptionTabsContainer}>
         <Tabs onChange={handleTabChange}>
           <TabList aria-label={t('tabList', 'Tab List')} contained className={styles.tabsContainer}>
-            {tabs.map((tab, index) => {
-              return (
-                <Tab title={t(tab.key)} key={index} id={'tab-' + index} className={styles.tab}>
-                  {t(tab.header)}
-                </Tab>
-              );
-            })}
+            <Tab title={t('search', 'Search')} id={'tab-search'} className={styles.tab}>
+              {t('search', 'Search')}
+            </Tab>
+            <Tab
+              title={t('activePrescriptions', 'Active Prescriptions')}
+              id={'tab-active-prescription'}
+              className={styles.tab}>
+              {t('activePrescriptions', 'Active Prescriptions')}
+            </Tab>
+            <Tab title={t('allPrescriptions', 'All Prescriptions')} id={'tab-all-prescription'} className={styles.tab}>
+              {t('allPrescriptions', 'All Prescriptions')}
+            </Tab>
           </TabList>
-          <div className={styles.searchContainer}>
-            {/* <Button
-                kind="primary"
-                renderIcon={(props) => <Add size={24} />}
-                className={styles.addPrescriptionBtn}
-                size="sm"
-              >
-                {t("fillPrescription", "Fill prescription")}
-              </Button>*/}
-            <Search
-              closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
-              defaultValue={searchTermUserInput}
-              placeholder={t('searchByPatientIdOrName', 'Search by patient ID or name')}
-              labelText={t('searchByPatientIdOrName', 'Search by patient ID or name')}
-              onChange={(e) => {
-                e.preventDefault();
-                setSearchTermUserInput(e.target.value);
-              }}
-              size="md"
-              className={styles.patientSearch}
-            />
-            {config.locationBehavior?.locationFilter?.enabled &&
-              !isFilterLocationsLoading &&
-              filterLocations?.length > 1 && (
-                <ComboBox
-                  id="locationFilter"
-                  placeholder={t('filterByLocation', 'Filter by location')}
-                  items={isFilterLocationsLoading ? [] : filterLocations}
-                  itemToString={(item: SimpleLocation) => item?.name}
-                  onChange={({ selectedItem }) => {
-                    setLocation(selectedItem?.id);
-                  }}
-                  className={styles.locationFilter}
-                />
-              )}
-          </div>
           <TabPanels>
-            {tabs.map((tab, index) => {
-              return index === selectedTab ? (
-                <PrescriptionTabPanel location={location} searchTerm={searchTerm} status={tab.status} />
-              ) : (
-                <></>
-              );
-            })}
+            <PatientSearchTabPanel />
+            <PrescriptionTabPanel isTabActive={selectedTab === 1} status={'ACTIVE'} />
+            <PrescriptionTabPanel isTabActive={selectedTab === 2} status={''} />
           </TabPanels>
         </Tabs>
       </section>

package/src/prescriptions/prescription-tab-panel.component.tsx

@@ -1,165 +1,62 @@
-import {
-  DataTable,
-  DataTableSkeleton,
-  Layer,
-  Pagination,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableExpandedRow,
-  TableExpandHeader,
-  TableExpandRow,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TabPanel,
-  Tile,
-} from '@carbon/react';
-import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ComboBox, Search, TabPanel } from '@carbon/react';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import { type PharmacyConfig } from '../config-schema';
-import { usePrescriptionsTable } from '../medication-request/medication-request.resource';
-import PatientInfoCell from '../patient/patient-info-cell.component';
-import PrescriptionExpanded from './prescription-expanded.component';
+import PrescriptionsTable from './prescriptions-table.component';
 import styles from './prescriptions.scss';
+import { useLocationForFiltering } from '../location/location.resource';
+import { type SimpleLocation } from '../types';
 
 interface PrescriptionTabPanelProps {
-  searchTerm: string;
-  location: string;
   status: string;
+  isTabActive: boolean;
 }
 
-const PrescriptionTabPanel: React.FC<PrescriptionTabPanelProps> = ({ searchTerm, location, status }) => {
+const PrescriptionTabPanel: React.FC<PrescriptionTabPanelProps> = ({ status, isTabActive }) => {
   const { t } = useTranslation();
   const config = useConfig<PharmacyConfig>();
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [nextOffSet, setNextOffSet] = useState(0);
-  const { prescriptionsTableRows, error, isLoading, totalOrders } = usePrescriptionsTable(
-    pageSize,
-    nextOffSet,
-    searchTerm,
-    location,
-    status,
-    config.medicationRequestExpirationPeriodInDays,
-    config.refreshInterval,
-  );
-
-  // dynamic status keys we need to maintain
-  // t('active', 'Active')
-  // t('paused', 'Paused')
-  // t('closed', 'Closed')
-  // t('completed', 'Completed')
-  // t('expired', 'Expired')
-  // t('cancelled', 'Cancelled')
-
-  let columns = [
-    { header: t('created', 'Created'), key: 'created' },
-    { header: t('patientName', 'Patient name'), key: 'patient' },
-    { header: t('prescriber', 'Prescriber'), key: 'prescriber' },
-    { header: t('drugs', 'Drugs'), key: 'drugs' },
-    { header: t('lastDispenser', 'Last dispenser'), key: 'lastDispenser' },
-    { header: t('status', 'Status'), key: 'status' },
-  ];
-
-  // add the locations column, if enabled
-  if (config.locationBehavior?.locationColumn?.enabled) {
-    columns = [...columns.slice(0, 3), { header: t('location', 'Location'), key: 'location' }, ...columns.slice(3)];
-  }
-
-  // reset back to page 1 whenever search term changes
-  useEffect(() => {
-    setPage(1);
-    setNextOffSet(0);
-  }, [searchTerm]);
+  const { filterLocations, isLoading: isFilterLocationsLoading } = useLocationForFiltering(config);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const [location, setLocation] = useState('');
 
   return (
     <TabPanel>
-      <div className={styles.patientListTableContainer}>
-        {isLoading && <DataTableSkeleton role="progressbar" />}
-        {error && <p>Error</p>}
-        {prescriptionsTableRows && (
-          <>
-            <DataTable rows={prescriptionsTableRows} headers={columns} isSortable>
-              {({ rows, headers, getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps }) => (
-                <TableContainer>
-                  <Table {...getTableProps()} useZebraStyles>
-                    <TableHead>
-                      <TableRow>
-                        <TableExpandHeader {...getExpandHeaderProps()} />
-                        {headers.map((header) => (
-                          <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
-                        ))}
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {rows.map((row) => (
-                        <React.Fragment key={row.id}>
-                          <TableExpandRow {...getRowProps({ row })}>
-                            {row.cells.map((cell) => (
-                              <TableCell key={cell.id}>
-                                {cell.id.endsWith('created') ? (
-                                  formatDatetime(parseDate(cell.value))
-                                ) : cell.id.endsWith('patient') ? (
-                                  <PatientInfoCell patient={cell.value} />
-                                ) : cell.id.endsWith('status') ? (
-                                  t(cell.value)
-                                ) : (
-                                  cell.value
-                                )}
-                              </TableCell>
-                            ))}
-                          </TableExpandRow>
-                          {row.isExpanded ? (
-                            <TableExpandedRow colSpan={headers.length + 1}>
-                              <PrescriptionExpanded
-                                encounterUuid={row.id}
-                                patientUuid={row.cells.find((cell) => cell.id.endsWith('patient')).value.uuid}
-                                status={row.cells.find((cell) => cell.id.endsWith('status')).value}
-                              />
-                            </TableExpandedRow>
-                          ) : (
-                            <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
-                          )}
-                        </React.Fragment>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-              )}
-            </DataTable>
-            {prescriptionsTableRows?.length === 0 && (
-              <div className={styles.filterEmptyState}>
-                <Layer>
-                  <Tile className={styles.filterEmptyStateTile}>
-                    <p className={styles.filterEmptyStateContent}>
-                      {t('noPrescriptionsToDisplay', 'No prescriptions to display')}
-                    </p>
-                    <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-                  </Tile>
-                </Layer>
-              </div>
-            )}
-            {prescriptionsTableRows?.length > 0 && (
-              <div style={{ width: '100%' }}>
-                <Pagination
-                  page={page}
-                  pageSize={pageSize}
-                  pageSizes={[10, 20, 30, 40, 50, 100]}
-                  totalItems={totalOrders}
-                  onChange={({ page, pageSize }) => {
-                    setPage(page);
-                    setNextOffSet((page - 1) * pageSize);
-                    setPageSize(pageSize);
-                  }}
-                />
-              </div>
-            )}
-          </>
-        )}
+      <div className={styles.searchContainer}>
+        <Search
+          closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+          defaultValue={searchTerm}
+          placeholder={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+          labelText={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+          onChange={(e) => {
+            e.preventDefault();
+            setSearchTerm(e.target.value);
+          }}
+          size="md"
+          className={styles.patientSearch}
+        />
+        {config.locationBehavior?.locationFilter?.enabled &&
+          !isFilterLocationsLoading &&
+          filterLocations?.length > 1 && (
+            <ComboBox
+              id="locationFilter"
+              placeholder={t('filterByLocation', 'Filter by location')}
+              items={isFilterLocationsLoading ? [] : filterLocations}
+              itemToString={(item: SimpleLocation) => item?.name}
+              onChange={({ selectedItem }) => {
+                setLocation(selectedItem?.id);
+              }}
+              className={styles.locationFilter}
+            />
+          )}
       </div>
+      <PrescriptionsTable
+        loadData={isTabActive}
+        status={status}
+        debouncedSearchTerm={debouncedSearchTerm}
+        location={location}
+      />
     </TabPanel>
   );
 };

package/src/prescriptions/prescriptions-table.component.tsx

@@ -0,0 +1,164 @@
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import PatientInfoCell from '../patient/patient-info-cell.component';
+import PrescriptionExpanded from './prescription-expanded.component';
+import styles from './prescriptions.scss';
+import { usePrescriptionsTable } from '../medication-request/medication-request.resource';
+import { type PharmacyConfig } from '../config-schema';
+
+interface PrescriptionsTableProps {
+  loadData: boolean;
+  debouncedSearchTerm: string;
+  location: string;
+  status: string;
+}
+
+const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({ loadData, debouncedSearchTerm, location, status }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const nextOffSet = (page - 1) * pageSize;
+  const { prescriptionsTableRows, error, isLoading, totalOrders } = usePrescriptionsTable(
+    loadData,
+    pageSize,
+    nextOffSet,
+    debouncedSearchTerm,
+    location,
+    status,
+    config.medicationRequestExpirationPeriodInDays,
+    config.refreshInterval,
+  );
+
+  // reset back to page 1 whenever search term changes
+  useEffect(() => {
+    setPage(1);
+  }, [debouncedSearchTerm]);
+
+  // dynamic status keys we need to maintain
+  // t('active', 'Active')
+  // t('paused', 'Paused')
+  // t('closed', 'Closed')
+  // t('completed', 'Completed')
+  // t('expired', 'Expired')
+  // t('cancelled', 'Cancelled')
+
+  let columns = [
+    { header: t('created', 'Created'), key: 'created' },
+    { header: t('patientName', 'Patient name'), key: 'patient' },
+    { header: t('prescriber', 'Prescriber'), key: 'prescriber' },
+    { header: t('drugs', 'Drugs'), key: 'drugs' },
+    { header: t('lastDispenser', 'Last dispenser'), key: 'lastDispenser' },
+    { header: t('status', 'Status'), key: 'status' },
+  ];
+
+  // add the locations column, if enabled
+  if (config.locationBehavior?.locationColumn?.enabled) {
+    columns = [...columns.slice(0, 3), { header: t('location', 'Location'), key: 'location' }, ...columns.slice(3)];
+  }
+
+  return (
+    <div className={styles.patientListTableContainer}>
+      {isLoading && <DataTableSkeleton role="progressbar" />}
+      {error && <p>Error</p>}
+      {prescriptionsTableRows && (
+        <>
+          <DataTable rows={prescriptionsTableRows} headers={columns} isSortable>
+            {({ rows, headers, getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()} useZebraStyles>
+                  <TableHead>
+                    <TableRow>
+                      <TableExpandHeader {...getExpandHeaderProps()} />
+                      {headers.map((header) => (
+                        <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.id.endsWith('created') ? (
+                                formatDatetime(parseDate(cell.value))
+                              ) : cell.id.endsWith('patient') ? (
+                                <PatientInfoCell patient={cell.value} />
+                              ) : cell.id.endsWith('status') ? (
+                                t(cell.value)
+                              ) : (
+                                cell.value
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow colSpan={headers.length + 1}>
+                            <PrescriptionExpanded
+                              encounterUuid={row.id}
+                              patientUuid={row.cells.find((cell) => cell.id.endsWith('patient')).value.uuid}
+                              status={row.cells.find((cell) => cell.id.endsWith('status')).value}
+                            />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+          {prescriptionsTableRows?.length === 0 && (
+            <div className={styles.filterEmptyState}>
+              <Layer>
+                <Tile className={styles.filterEmptyStateTile}>
+                  <p className={styles.filterEmptyStateContent}>
+                    {t('noPrescriptionsToDisplay', 'No prescriptions to display')}
+                  </p>
+                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+                </Tile>
+              </Layer>
+            </div>
+          )}
+          {prescriptionsTableRows?.length > 0 && (
+            <div style={{ width: '100%' }}>
+              <Pagination
+                page={page}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50, 100]}
+                totalItems={totalOrders}
+                onChange={({ page, pageSize }) => {
+                  setPage(page);
+                  setPageSize(pageSize);
+                }}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PrescriptionsTable;

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": ">=2.2.0"
   },
   "pages": [
     {
@@ -98,4 +98,4 @@
 
     }
   ]
-}
+}

package/src/types.ts

@@ -451,7 +451,7 @@ export interface PrescriptionsTableRow {
 
 export interface Quantity {
   value: number;
-  unit: string;
+  unit?: string;
   code: string;
   system?: string;
 }
@@ -523,3 +523,12 @@ export type StockDispenseRequest = {
   stockItemPackagingUOM: string;
   quantity: number;
 };
+
+export interface DispensingStore {
+  /**
+   * A list of encounterUuids with stale data due to
+   * updates (like pausing of dispensing medication) actions,
+   * and subsequent SWR revalidation has not yet completed
+   */
+  staleEncounterUuids: string[];
+}

package/src/utils.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import { mutate } from 'swr';
 import {
   type Coding,
+  type DispensingStore,
   type DosageInstruction,
   type Medication,
   type MedicationDispense,
@@ -14,7 +15,12 @@ import {
   MedicationRequestStatus,
   type Quantity,
 } from './types';
-import { fhirBaseUrl, parseDate } from '@openmrs/esm-framework';
+import {
+  createGlobalStore,
+  fhirBaseUrl,
+  parseDate,
+  useStore,
+} from '@openmrs/esm-framework';
 import {
   OPENMRS_FHIR_EXT_DISPENSE_RECORDED,
   OPENMRS_FHIR_EXT_MEDICINE,
@@ -565,16 +571,29 @@ export function isMostRecentMedicationDispense(
 
 /**
  * Revalidated (reloads) both the prescription associated with the encounter uuid,
- * and the entire prescrption table
+ * and the entire prescription table
  * @param encounterUuid
  */
-export function revalidate(encounterUuid: string) {
-  mutate(
+export async function revalidate(encounterUuid: string) {
+  await mutate(
     (key) =>
       typeof key === 'string' &&
       (key.startsWith(`${fhirBaseUrl}/${PRESCRIPTIONS_TABLE_ENDPOINT}`) ||
         key.startsWith(`${fhirBaseUrl}/${PRESCRIPTION_DETAILS_ENDPOINT}?encounter=${encounterUuid}`)),
   );
+  dispensingStore.setState((state) => ({
+    staleEncounterUuids: state.staleEncounterUuids.filter((uuid) => uuid !== encounterUuid),
+  }));
+}
+
+/**
+ * Mark the specified encounter as stale. The encounter will be unmarked on calling
+ * revalidate() to reload the data associated with the encounter.
+ */
+export function markEncounterAsStale(encounterUuid: string) {
+  dispensingStore.setState((state) => ({
+    staleEncounterUuids: [...state.staleEncounterUuids, encounterUuid],
+  }));
 }
 
 export function sortMedicationDispensesByWhenHandedOver(a: MedicationDispense, b: MedicationDispense): number {
@@ -590,3 +609,11 @@ export function sortMedicationDispensesByWhenHandedOver(a: MedicationDispense, b
     return a.id.localeCompare(b.id); // just to enforce a standard order if two dates are equals
   }
 }
+
+const dispensingStore = createGlobalStore<DispensingStore>('dispensing-store', {
+  staleEncounterUuids: [],
+});
+
+export function useStaleEncounterUuids() {
+  return useStore(dispensingStore);
+}

package/tools/setup-tests.ts

@@ -1 +1,8 @@
 import '@testing-library/jest-dom';
+
+// Mock ResizeObserver for Carbon components
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));