@openmrs/esm-dispensing-app 1.9.2-pre.883 → 1.9.2-pre.889

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"dispensing","route":"dispensing","online":true,"offline":true}],"extensions":[{"name":"dispensing-link","slot":"app-menu-slot","component":"dispensingLink","online":true,"offline":true},{"name":"patient-diagnoses","component":"patientDiagnoses","slot":"dispensing-condition-and-diagnoses","online":true,"offline":true},{"name":"patient-conditions","component":"patientConditions","slot":"dispensing-condition-and-diagnoses","online":true,"offline":true},{"name":"dispensing-dashboard","slot":"dispensing-dashboard-slot","component":"dispensingDashboard","online":true,"offline":true},{"name":"dispensing-dashboard-link","component":"dispensingDashboardLink","meta":{"name":"dispensing","slot":"dispensing-dashboard-slot","title":"Dispensing"}},{"name":"dispense-action-button","slot":"prescription-action-button-slot","component":"dispenseActionButton"},{"name":"pause-action-button","slot":"prescription-action-button-slot","component":"pauseActionButton"},{"name":"close-action-button","slot":"prescription-action-button-slot","component":"closeActionButton"}],"workspaces":[{"name":"close-dispense-workspace","component":"closeDispenseWorkspace","type":"dispense","title":"Close prescription"},{"name":"pause-dispense-workspace","component":"pauseDispenseWorkspace","type":"dispense","title":"Pause prescription"},{"name":"dispense-workspace","component":"dispenseWorkspace","type":"dispense","title":"Dispense prescription","width":"wider"}],"modals":[{"name":"prescription-print-preview-modal","component":"printPrescriptionPreviewModal"},{"name":"delete-confirm-modal","component":"deleteConfirmModal"}],"version":"1.9.2-pre.883"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"dispensing","route":"dispensing","online":true,"offline":true}],"extensions":[{"name":"dispensing-link","slot":"app-menu-slot","component":"dispensingLink","online":true,"offline":true},{"name":"patient-diagnoses","component":"patientDiagnoses","slot":"dispensing-condition-and-diagnoses","online":true,"offline":true},{"name":"patient-conditions","component":"patientConditions","slot":"dispensing-condition-and-diagnoses","online":true,"offline":true},{"name":"dispensing-dashboard","slot":"dispensing-dashboard-slot","component":"dispensingDashboard","online":true,"offline":true},{"name":"dispensing-dashboard-link","component":"dispensingDashboardLink","meta":{"name":"dispensing","slot":"dispensing-dashboard-slot","title":"Dispensing"}},{"name":"dispense-action-button","slot":"prescription-action-button-slot","component":"dispenseActionButton"},{"name":"pause-action-button","slot":"prescription-action-button-slot","component":"pauseActionButton"},{"name":"close-action-button","slot":"prescription-action-button-slot","component":"closeActionButton"}],"workspaces":[{"name":"close-dispense-workspace","component":"closeDispenseWorkspace","type":"dispense","title":"Close prescription"},{"name":"pause-dispense-workspace","component":"pauseDispenseWorkspace","type":"dispense","title":"Pause prescription"},{"name":"dispense-workspace","component":"dispenseWorkspace","type":"dispense","title":"Dispense prescription","width":"wider"}],"modals":[{"name":"prescription-print-preview-modal","component":"printPrescriptionPreviewModal"},{"name":"delete-confirm-modal","component":"deleteConfirmModal"}],"version":"1.9.2-pre.889"}

package/e2e/commands/encounter-operations.ts

@@ -2,7 +2,6 @@
 import { type APIRequestContext, expect } from '@playwright/test';
 import { type Encounter } from './types';
 import { type Visit } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
 
 export interface Observation {
   uuid: string;
@@ -36,9 +35,7 @@ export const createEncounter = async (
   providerId: string,
   visit: Visit,
 ): Promise<Encounter> => {
-  const encounterAfterVisit = dayjs(visit.startDatetime).add(1, 'minute');
-  const now = dayjs().subtract(1, 'second');
-  const encounterDatetime = encounterAfterVisit.isBefore(now) ? encounterAfterVisit.format() : now.format();
+  const encounterDatetime = visit.startDatetime;
   const encounterRes = await api.post('encounter', {
     data: {
       encounterDatetime,

package/e2e/specs/close-prescription.spec.ts

@@ -32,6 +32,11 @@ test('Close prescription', async ({ page, patient }) => {
     await dispensingPage.goTo();
   });
 
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+    await expect(page.getByRole('tab', { name: 'Active prescriptions' })).toHaveAttribute('aria-selected', 'true');
+  });
+
   await test.step('And I expand a table row in the prescriptions table corresponding to an active prescription', async () => {
     const rowText = new RegExp(`Expand current row`);
     await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();

package/e2e/specs/dispense-medication.spec.ts

@@ -33,6 +33,10 @@ test('Dispense prescription', async ({ page, patient }) => {
     await expect(page).toHaveURL(process.env.E2E_BASE_URL + `/spa/dispensing`);
   });
 
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+  });
+
   await test.step('And I expand a table row in the Prescriptions table corresponding to an active prescription', async () => {
     const rowText = new RegExp(`Expand current row`);
     await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();

package/e2e/specs/pause-prescription.spec.ts

@@ -33,6 +33,11 @@ test('Pause prescription', async ({ page, patient }) => {
     await dispensingPage.goTo();
   });
 
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+    await expect(page.getByRole('tab', { name: 'Active prescriptions' })).toHaveAttribute('aria-selected', 'true');
+  });
+
   await test.step('And I expand a table row in the prescriptions table corresponding to an active prescription', async () => {
     const rowText = new RegExp(`Expand current row`);
     await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-dispensing-app",
-  "version": "1.9.2-pre.883",
+  "version": "1.9.2-pre.889",
   "license": "MPL-2.0",
   "description": "Medication dispensing application",
   "browser": "dist/openmrs-esm-dispensing-app.js",

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

@@ -18,7 +18,7 @@ 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 +32,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 +587,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

@@ -25,6 +25,7 @@ import dayjs from 'dayjs';
 import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS } from '../constants';
 
 export function usePrescriptionsTable(
+  loadData: boolean,
   pageSize: number = 10,
   pageOffset: number = 0,
   patientSearchTerm: string = '',
@@ -34,15 +35,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 },
   );

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;

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-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>
   );
 };