@ampath/esm-dispensing-app 1.10.0-next.2 → 1.10.0-next.21

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

@@ -1,7 +1,15 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import useSWR from 'swr';
-import { fhirBaseUrl, openmrsFetch, parseDate } from '@openmrs/esm-framework';
+import {
+  fhirBaseUrl,
+  openmrsFetch,
+  type Order,
+  parseDate,
+  restBaseUrl,
+  useConfig,
+  useSession,
+} from '@openmrs/esm-framework';
 import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS } from '../constants';
 import {
   type AllergyIntoleranceResponse,
@@ -14,6 +22,7 @@ import {
   type MedicationRequestFulfillerStatus,
   type MedicationRequestBundle,
   type SimpleLocation,
+  type QueueEntryResult,
 } from '../types';
 import {
   getPrescriptionDetailsEndpoint,
@@ -23,7 +32,11 @@ import {
   sortMedicationDispensesByWhenHandedOver,
   computePrescriptionStatusMessageCode,
   getAssociatedMedicationDispenses,
+  getEtlBaseUrl,
 } from '../utils';
+import { type PharmacyConfig } from '../config-schema';
+
+const ACTIVE_STATUS_FETCH_COUNT = 100;
 
 export function usePrescriptionsTable(
   loadData: boolean,
@@ -36,14 +49,16 @@ export function usePrescriptionsTable(
   medicationRequestExpirationPeriodInDays: number,
   refreshInterval: number,
 ) {
+  const fetchPageSize = status === 'ACTIVE' ? ACTIVE_STATUS_FETCH_COUNT : pageSize;
+  const fetchPageOffset = status === 'ACTIVE' ? 0 : pageOffset;
   const { data, error } = useSWR<{ data: EncounterResponse }, Error>(
     loadData
       ? getPrescriptionTableEndpoint(
           customPrescriptionsTableEndpoint,
           status,
-          pageOffset,
-          pageSize,
-          dayjs(new Date()).startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day').toISOString(),
+          fetchPageOffset,
+          fetchPageSize,
+          '',
           patientSearchTerm,
           locations?.map((location) => location.id).join(','),
         )
@@ -51,18 +66,28 @@ export function usePrescriptionsTable(
     openmrsFetch,
     { refreshInterval: refreshInterval },
   );
+  const { queueEntries } = useQueueEntries();
 
   let prescriptionsTableRows: PrescriptionsTableRow[];
   if (data) {
     const entries = data?.data.entry;
-    if (entries) {
-      const encounters = entries
+    const filteredEntries =
+      status === 'ACTIVE' && entries
+        ? entries.filter((entry) =>
+            dayjs(entry?.resource?.meta?.lastUpdated).isAfter(
+              dayjs().startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day'),
+            ),
+          )
+        : entries;
+
+    if (filteredEntries) {
+      const encounters = filteredEntries
         .filter((entry) => entry?.resource?.resourceType == 'Encounter')
         .map((entry) => entry.resource as Encounter);
-      const medicationRequests = entries
+      const medicationRequests = filteredEntries
         .filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
         .map((entry) => entry.resource as MedicationRequest);
-      const medicationDispenses = entries
+      const medicationDispenses = filteredEntries
         .filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
         .map((entry) => entry.resource as MedicationDispense)
         .sort(sortMedicationDispensesByWhenHandedOver);
@@ -77,11 +102,16 @@ export function usePrescriptionsTable(
         const medicationDispensesForMedicationRequests = medicationDispenses.filter((medicationDispense) =>
           medicationRequestReferences.includes(medicationDispense.authorizingPrescription[0]?.reference),
         );
+
+        const patientUuid = encounter?.subject?.reference?.split('/')[1];
+        const priority = queueEntries?.find((q) => q.patient_uuid === patientUuid)?.priority ?? 'NON-URGENT';
+
         return buildPrescriptionsTableRow(
           encounter,
           medicationRequestsForEncounter,
           medicationDispensesForMedicationRequests,
           medicationRequestExpirationPeriodInDays,
+          priority,
         );
       });
       prescriptionsTableRows.sort((a, b) => (a.created < b.created ? 1 : -1));
@@ -94,7 +124,7 @@ export function usePrescriptionsTable(
     prescriptionsTableRows,
     error: error,
     isLoading: !prescriptionsTableRows && !error,
-    totalOrders: data?.data.total,
+    totalOrders: status === 'ACTIVE' ? prescriptionsTableRows?.length ?? 0 : data?.data.total,
   };
 }
 
@@ -103,10 +133,11 @@ function buildPrescriptionsTableRow(
   medicationRequests: Array<MedicationRequest>,
   medicationDispense: Array<MedicationDispense>,
   medicationRequestExpirationPeriodInDays: number,
+  priority: string,
 ): PrescriptionsTableRow {
   return {
     id: encounter?.id,
-    created: encounter?.period?.start,
+    created: encounter?.meta?.lastUpdated, //encounter?.period?.start,
     patient: {
       name: encounter?.subject?.display,
       uuid: encounter?.subject?.reference?.split('/')[1],
@@ -125,6 +156,7 @@ function buildPrescriptionsTableRow(
     prescriber: [...new Set(medicationRequests.map((o) => o.requester.display))].join(', '),
     status: computePrescriptionStatusMessageCode(medicationRequests, medicationRequestExpirationPeriodInDays),
     location: encounter?.location ? encounter?.location[0]?.location.display : null,
+    priority: priority,
   };
 }
 
@@ -255,3 +287,57 @@ export function updateMedicationRequestFulfillerStatus(
     },
   });
 }
+
+export function useOrders(encounterUuid: string) {
+  // const customRepresentation = `custom:(uuid,display,orders:(uuid,orderNumber,concept:(uuid,display)))`;
+  const customRepresentation = `full`;
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+  const { data, error, mutate, isLoading, isValidating } = useSWR<{
+    data: {
+      orders: Array<Order>;
+    };
+  }>(`${url}`, openmrsFetch);
+
+  const orders = data?.data?.orders;
+
+  return {
+    orders: orders ?? [],
+    isLoading,
+    isError: error,
+    mutate,
+    isValidating,
+  };
+}
+
+export function useQueueEntries(patientUuid: string = '') {
+  const [etlBaseUrl, setEtlBaseUrl] = useState('');
+  const { sessionLocation } = useSession();
+  const { serviceUuid } = useConfig<PharmacyConfig>();
+
+  useEffect(() => {
+    const fetchEtlBaseUrl = async () => {
+      const baseUrl = await getEtlBaseUrl();
+      setEtlBaseUrl(baseUrl);
+    };
+    fetchEtlBaseUrl();
+  }, []);
+
+  const url = `${etlBaseUrl}/queue-entry?locationUuid=${sessionLocation?.uuid}&serviceUuid=${serviceUuid}`;
+  const { data, error, mutate, isLoading, isValidating } = useSWR<{
+    data: { data: Array<QueueEntryResult> };
+  }>(etlBaseUrl ? `${url}` : null, openmrsFetch);
+
+  let filteredQueueEntries = data?.data?.data;
+
+  if (patientUuid) {
+    filteredQueueEntries = filteredQueueEntries?.filter((queueEntry) => queueEntry.patient_uuid === patientUuid);
+  }
+
+  return {
+    queueEntries: filteredQueueEntries ?? [],
+    isLoading,
+    isError: error,
+    mutate,
+    isValidating,
+  };
+}

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

@@ -1,17 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SkeletonText, Tag, Tile } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay, useStaleEncounterUuids } from '../utils';
 import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
-import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
+import {
+  type AllergyIntolerance,
+  type MedicationRequest,
+  MedicationRequestCombinedStatus,
+  MedicationRequestStatus,
+} from '../types';
 import { type PharmacyConfig } from '../config-schema';
-import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import {
+  useOrders,
+  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';
+import { useBills, useInvalidateBills } from '../bill/bill.resource';
 
 const PrescriptionDetails: React.FC<{
   encounterUuid: string;
@@ -27,6 +37,21 @@ const PrescriptionDetails: React.FC<{
   } = usePatientAllergies(patientUuid, config.refreshInterval);
   const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid, config.refreshInterval);
   const { staleEncounterUuids } = useStaleEncounterUuids();
+  const { orders, isLoading: isLoadingOrders } = useOrders(encounterUuid);
+  const { bills, isLoading: loadingBills } = useBills(patientUuid);
+  const hasActiveRequests = useMemo(() => {
+    return medicationRequestBundles.some(
+      (bundle) =>
+        computeMedicationRequestCombinedStatus(bundle.request, config.medicationRequestExpirationPeriodInDays) ===
+        MedicationRequestCombinedStatus.active,
+    );
+  }, [medicationRequestBundles, config]);
+
+  const invalidateBills = useInvalidateBills(patientUuid);
+
+  const mutated = () => {
+    invalidateBills();
+  };
 
   const generateStatusTag = (medicationRequest: MedicationRequest): React.ReactNode => {
     const combinedStatus: MedicationRequestCombinedStatus = computeMedicationRequestCombinedStatus(
@@ -124,21 +149,37 @@ const PrescriptionDetails: React.FC<{
       )}
       {medicationRequestBundles &&
         (medicationRequestBundles.length > 0 ? (
-          medicationRequestBundles.map((bundle) => (
-            <MedicationEvent
-              key={bundle.request.id}
-              medicationEvent={bundle.request}
-              status={generateStatusTag(bundle.request)}>
-              <UserHasAccess privilege={PRIVILEGE_CREATE_DISPENSE}>
-                <ActionButtons
-                  patientUuid={patientUuid}
-                  encounterUuid={encounterUuid}
-                  medicationRequestBundle={bundle}
-                  disabled={staleEncounterUuids.includes(encounterUuid)}
-                />
-              </UserHasAccess>
-            </MedicationEvent>
-          ))
+          medicationRequestBundles.map((bundle) => {
+            const medicationEvent =
+              bundle.request.status === MedicationRequestStatus.completed
+                ? bundle.dispenses.find(
+                    (b) =>
+                      b.quantity.code === bundle.request.dispenseRequest.quantity.code ||
+                      b.medicationReference.reference === bundle.request.medicationReference.reference,
+                  )
+                : bundle.request;
+            return (
+              <MedicationEvent
+                key={bundle.request.id}
+                medicationEvent={medicationEvent}
+                status={generateStatusTag(bundle.request)}>
+                <UserHasAccess privilege={PRIVILEGE_CREATE_DISPENSE}>
+                  <ActionButtons
+                    patientUuid={patientUuid}
+                    encounterUuid={encounterUuid}
+                    medicationRequestBundle={bundle}
+                    disabled={staleEncounterUuids.includes(encounterUuid)}
+                    orders={orders}
+                    bills={bills}
+                    isLoading={loadingBills}
+                    isLoadingOrders={isLoadingOrders}
+                    hasActiveRequests={hasActiveRequests}
+                    mutated={mutated}
+                  />
+                </UserHasAccess>
+              </MedicationEvent>
+            );
+          })
         ) : (
           <p className={styles.emptyState}>{t('noPrescriptionsFound', 'No prescriptions found')}</p>
         ))}

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { usePrescriptionDetails, usePatientAllergies } from '../medication-request/medication-request.resource';
+import {
+  usePrescriptionDetails,
+  usePatientAllergies,
+  useOrders,
+} from '../medication-request/medication-request.resource';
 import { useStaleEncounterUuids } from '../utils';
 import PrescriptionDetails from './prescription-details.component';
 
@@ -15,6 +19,7 @@ const mockUseConfig = jest.mocked(useConfig);
 const mockUsePrescriptionDetails = jest.mocked(usePrescriptionDetails);
 const mockUsePatientAllergies = jest.mocked(usePatientAllergies);
 const mockUseStaleEncounterUuids = jest.mocked(useStaleEncounterUuids);
+const mockUseOrders = jest.mocked(useOrders);
 
 const mockEncounterUuid = 'test-encounter-uuid';
 const mockPatientUuid = 'test-patient-uuid';
@@ -51,6 +56,14 @@ describe('PrescriptionDetails', () => {
         isValidating: false,
       });
 
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
+
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
       // While loading allergies, should not show allergy details or no allergies message
@@ -73,6 +86,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -94,6 +114,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -130,6 +157,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -164,6 +198,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -193,6 +234,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -216,6 +264,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -237,6 +292,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 
@@ -258,6 +320,13 @@ describe('PrescriptionDetails', () => {
         mutate: jest.fn(),
         isValidating: false,
       });
+      mockUseOrders.mockReturnValue({
+        orders: [],
+        isLoading: false,
+        isValidating: false,
+        isError: undefined,
+        mutate: jest.fn(),
+      });
 
       render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
 

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

@@ -31,10 +31,31 @@ const PrescriptionTabPanel: React.FC<PrescriptionTabPanelProps> = ({
   // set any initially selected locations
   useEffect(() => {
     if (!isInitialized.current && !isFilterLocationsLoading && sessionLocation?.uuid) {
-      setFilterLocations(locations?.filter((l) => sessionLocation?.uuid === l.associatedPharmacyLocation) || []);
+      const initialLocations: SimpleLocation[] = [];
+      // Should display from the location associated with the pharmacy location
+      initialLocations.push(
+        ...(locations?.filter((l) => l.associatedPharmacyLocations?.includes(sessionLocation?.uuid)) || []),
+      );
+
+      // Should display from all the associated pharmacy locations of the current location
+      if (config.locationBehavior.locationFilter.useAssociatedPharmacyLocations) {
+        initialLocations.push(
+          ...(locations?.filter((v) =>
+            locations?.find((l) => l.id === sessionLocation?.uuid).associatedPharmacyLocations?.includes(v.id),
+          ) || []),
+        );
+      }
+
+      // Should display from current location
+      if (config.locationBehavior.locationFilter.useCurrentLocation) {
+        initialLocations.push(...(locations?.filter((l) => l.id === sessionLocation?.uuid) || []));
+      }
+
+      setFilterLocations(initialLocations || []);
+
       isInitialized.current = true; // we only want to run when the component is first mounted so we don't override user changes
     }
-  }, [isFilterLocationsLoading, sessionLocation, locations]);
+  }, [isFilterLocationsLoading, sessionLocation, locations, config]);
 
   return (
     <TabPanel>

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

@@ -17,13 +17,14 @@ import {
   Tile,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
+import { formatDatetime, parseDate, useConfig, usePagination } from '@openmrs/esm-framework';
 import { usePrescriptionsTable } from '../medication-request/medication-request.resource';
 import { type PharmacyConfig } from '../config-schema';
 import { type SimpleLocation } from '../types';
 import PatientInfoCell from '../patient/patient-info-cell.component';
 import PrescriptionExpanded from './prescription-expanded.component';
 import styles from './prescriptions.scss';
+import PriorityTag from './priority-tag.component';
 
 interface PrescriptionsTableProps {
   loadData: boolean;
@@ -57,10 +58,20 @@ const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
     config.refreshInterval,
   );
 
+  const isActiveClientPaged = status === 'ACTIVE';
+  const { results: paginatedRows, currentPage, goTo } = usePagination(prescriptionsTableRows ?? [], pageSize);
+  const rowsToDisplay = isActiveClientPaged ? paginatedRows : prescriptionsTableRows;
+  const paginationPage = isActiveClientPaged ? currentPage : page;
+  const paginationTotalItems = isActiveClientPaged ? prescriptionsTableRows?.length ?? 0 : totalOrders;
+
   // reset back to page 1 whenever search term changes
   useEffect(() => {
-    setPage(1);
-  }, [debouncedSearchTerm]);
+    if (isActiveClientPaged) {
+      goTo(1);
+    } else {
+      setPage(1);
+    }
+  }, [debouncedSearchTerm, isActiveClientPaged, goTo]);
 
   // dynamic status keys we need to maintain
   // t('active', 'Active')
@@ -76,6 +87,7 @@ const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
     { header: t('prescriber', 'Prescriber'), key: 'prescriber' },
     { header: t('drugs', 'Drugs'), key: 'drugs' },
     { header: t('lastDispenser', 'Last dispenser'), key: 'lastDispenser' },
+    { header: t('priority', 'Priority'), key: 'priority' },
     { header: t('status', 'Status'), key: 'status' },
   ];
 
@@ -101,7 +113,7 @@ const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
       )}
       {prescriptionsTableRows && (
         <>
-          <DataTable rows={prescriptionsTableRows} headers={columns} isSortable>
+          <DataTable rows={rowsToDisplay} headers={columns} isSortable>
             {({ rows, headers, getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps }) => (
               <TableContainer>
                 <Table {...getTableProps()} useZebraStyles>
@@ -117,19 +129,28 @@ const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
                     {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>
-                          ))}
+                          {row.cells.map((cell) => {
+                            if (cell.info.header === 'priority') {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <PriorityTag status={cell.value?.content ?? cell.value} />
+                                </TableCell>
+                              );
+                            }
+                            return (
+                              <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}>
@@ -165,17 +186,26 @@ const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
           {prescriptionsTableRows?.length > 0 && (
             <div className={styles.paginationContainer}>
               <Pagination
-                page={page}
+                page={paginationPage}
                 pageSize={pageSize}
                 pageSizes={[10, 20, 30, 40, 50, 100]}
-                totalItems={totalOrders}
+                totalItems={paginationTotalItems}
                 onChange={({ page: newPage, pageSize: newPageSize }) => {
-                  if (newPageSize !== pageSize) {
-                    setPage(1);
+                  if (isActiveClientPaged) {
+                    if (newPageSize !== pageSize) {
+                      setPageSize(newPageSize);
+                      goTo(1);
+                    } else {
+                      goTo(newPage);
+                    }
                   } else {
-                    setPage(newPage);
+                    if (newPageSize !== pageSize) {
+                      setPage(1);
+                    } else {
+                      setPage(newPage);
+                    }
+                    setPageSize(newPageSize);
                   }
-                  setPageSize(newPageSize);
                 }}
               />
             </div>

package/src/prescriptions/priority-tag.component.tsx

@@ -0,0 +1,44 @@
+import { Tag } from '@carbon/react';
+import React, { useMemo } from 'react';
+import styles from './priority-tag.scss';
+
+interface PriorityTagProps {
+  status: string;
+}
+
+export enum QueueEntryPriority {
+  Emergency = 'EMERGENCY',
+  Priority = 'PRIORITY',
+  NonUrgent = 'NON-URGENT',
+}
+
+const PriorityTag: React.FC<PriorityTagProps> = ({ status }) => {
+  const tagClassName = useMemo(() => {
+    let className = 'gray';
+    if (
+      status.toUpperCase() === `${QueueEntryPriority.Emergency}` ||
+      status.toUpperCase() === `${QueueEntryPriority.Emergency} PRIORITY`
+    )
+      className = 'emergencyTag';
+    if (
+      status.toUpperCase() === `${QueueEntryPriority.Priority}` ||
+      status.toUpperCase() === `${QueueEntryPriority.Priority} PRIORITY` ||
+      status.toUpperCase() === 'NORMAL PRIORITY' ||
+      status.toUpperCase() === 'NOT URGENT'
+    )
+      className = 'priorityTag';
+    if (
+      status.toUpperCase() === `${QueueEntryPriority.NonUrgent}` ||
+      status.toUpperCase() === `${QueueEntryPriority.NonUrgent} PRIORITY`
+    )
+      className = 'nonUrgentTag';
+    return className;
+  }, [status]);
+  return (
+    <Tag size="md" className={styles[tagClassName]}>
+      {status}
+    </Tag>
+  );
+};
+
+export default PriorityTag;

package/src/prescriptions/priority-tag.scss

@@ -0,0 +1,12 @@
+.nonUrgentTag {
+  background-color: rgb(167, 240, 186);
+  color: rgb(14, 96, 39);
+}
+.emergencyTag {
+  background-color: rgb(255, 215, 217);
+  color: rgb(162, 25, 31);
+}
+.priorityTag {
+  background-color: rgb(248, 237, 98);
+  color: brown;
+}