@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/components/consultation/clinical-encounter/clinical-encounter.component.tsx

@@ -1,28 +1,12 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Layer } from '@carbon/react';
-import { IbmWatsonDiscovery, Account, Stethoscope } from '@carbon/react/icons';
-import ExtensionTabs, { ExtensionTabItem } from '../../../shared/tabs/extension-tabs.component';
+import React from 'react';
+import ExtensionTabs from '../../../shared/tabs/extension-tabs.component';
 
 type ClinicalEncounterProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const items: Array<ExtensionTabItem> = [
-    { label: t('clinicalEncounter', 'Clinical Encounter'), icon: Stethoscope, slotName: 'ewf-clinical-encounter-slot' },
-    { label: t('visits', 'Visits'), icon: Account, slotName: 'ewf-visits-slot' },
-    { label: t('specialClinics', 'Special Clinics'), icon: IbmWatsonDiscovery, slotName: 'ewf-special-clinics-slot' },
-  ];
-
-  return (
-    <Layer>
-      <ExtensionTabs items={items} state={state} />
-    </Layer>
-  );
+const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="clinical-encounter-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default ClinicalEncounter;

package/src/components/consultation/clinical-encounter/encounter-details.component.tsx

@@ -9,7 +9,6 @@ import {
   Dashboard,
   Stethoscope,
   Add,
-  Edit,
   DocumentMultiple_02,
 } from '@carbon/react/icons';
 
@@ -88,6 +87,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
         <TabPanels>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               title={t('visitDetails', 'Visit Details')}
               mutateForm={mutate}
@@ -108,6 +108,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientHistory', 'Patient History')}
@@ -116,6 +117,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientExamination', 'Patient Examination')}
@@ -124,6 +126,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientManagement', 'Patient Management')}
@@ -146,24 +149,21 @@ type EncounterCardProps = {
   cardItems: Array<{ title: string; value: string }>;
   mutateForm: () => void;
   encounterUuid?: string;
+  patientUuid: string;
 };
 
-const EncounterCard = ({ title, cardItems, mutateForm, encounterUuid }: EncounterCardProps) => {
+const EncounterCard = ({ title, cardItems, mutateForm, encounterUuid, patientUuid }: EncounterCardProps) => {
   const { t } = useTranslation();
   const {
     clinicalEncounter: { formUuid },
   } = useConfig<ExpressWorkflowConfig>();
-  const launchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit('patient-form-entry-workspace');
+  const launchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit(patientUuid, 'patient-form-entry-workspace');
 
   const handleOpenOrEditClinicalEncounterForm = (encounterUuid?: string) => {
     launchWorkspaceRequiringVisit({
-      workspaceTitle: title,
+      form: { uuid: formUuid },
       mutateForm: mutateForm,
-      formInfo: {
-        encounterUuid: encounterUuid ?? '',
-        formUuid: formUuid,
-        additionalProps: {},
-      },
+      encounterUuid: encounterUuid ?? '',
     });
   };
   return (

package/src/components/consultation/clinical-encounter/encounter-details.test.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi, type MockedFunction } from 'vitest';
 import { formatDatetime, parseDate } from '@openmrs/esm-framework';
 import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
 import EncounterDetails from './encounter-details.component';
 import { usePatientEncounter, useClinicalEncounterForm } from '../../../hooks/usePatientEncounter';
 
 // Create a mock function for the workspace launcher
-const mockLaunchWorkspaceRequiringVisit = jest.fn();
+const mockLaunchWorkspaceRequiringVisit = vi.fn();
 
 // Mock dependencies
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  formatDatetime: jest.fn((date, options) => '15-Jan-2024'),
-  parseDate: jest.fn((date) => new Date(date)),
-  openmrsFetch: jest.fn(),
-  useConfig: jest.fn(() => ({
+vi.mock('@openmrs/esm-framework', () => ({
+  ...vi.importActual<typeof import('@openmrs/esm-framework')>('@openmrs/esm-framework'),
+  formatDatetime: vi.fn((date, options) => '15-Jan-2024'),
+  parseDate: vi.fn((date) => new Date(date)),
+  openmrsFetch: vi.fn(),
+  useConfig: vi.fn(() => ({
     clinicalEncounter: {
       encounterTypeUuid: '465a92f2-baf8-42e9-9612-53064be868e8',
       formUuid: 'e958f902-64df-4819-afd4-7fb061f59308',
     },
   })),
-  ErrorState: jest.fn(({ error, headerTitle }) => (
+  ErrorState: vi.fn(({ error, headerTitle }) => (
     <div data-testid="error-state">
       <h2>{headerTitle}</h2>
       <p>{error.message}</p>
@@ -29,26 +30,26 @@ jest.mock('@openmrs/esm-framework', () => ({
   )),
 }));
 
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
   CardHeader: ({ title, children }: { title: string; children: React.ReactNode }) => (
     <div data-testid="card-header">
       <h2>{title}</h2>
       {children}
     </div>
   ),
-  useLaunchWorkspaceRequiringVisit: jest.fn(),
+  useLaunchWorkspaceRequiringVisit: vi.fn(),
 }));
 
-jest.mock('@carbon/react', () => ({
-  ...jest.requireActual('@carbon/react'),
-  TabsSkeleton: jest.fn(() => <div data-testid="tabs-skeleton">Loading tabs...</div>),
+vi.mock('@carbon/react', () => ({
+  ...vi.importActual<typeof import('@carbon/react')>('@carbon/react'),
+  TabsSkeleton: vi.fn(() => <div data-testid="tabs-skeleton">Loading tabs...</div>),
 }));
 
-jest.mock('../../../hooks/usePatientEncounter');
+vi.mock('../../../hooks/usePatientEncounter');
 
-const mockUsePatientEncounter = usePatientEncounter as jest.MockedFunction<typeof usePatientEncounter>;
-const mockUseClinicalEncounterForm = useClinicalEncounterForm as jest.MockedFunction<typeof useClinicalEncounterForm>;
-const mockUseLaunchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit as jest.MockedFunction<
+const mockUsePatientEncounter = usePatientEncounter as MockedFunction<typeof usePatientEncounter>;
+const mockUseClinicalEncounterForm = useClinicalEncounterForm as MockedFunction<typeof useClinicalEncounterForm>;
+const mockUseLaunchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit as MockedFunction<
   typeof useLaunchWorkspaceRequiringVisit
 >;
 
@@ -150,7 +151,7 @@ describe('EncounterDetails', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockLaunchWorkspaceRequiringVisit.mockClear();
     mockUseLaunchWorkspaceRequiringVisit.mockReturnValue(mockLaunchWorkspaceRequiringVisit);
     mockUsePatientEncounter.mockReturnValue({

package/src/components/consultation/consultation.utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, InlineLoading } from '@carbon/react';
+import type { TFunction } from 'i18next';
 import { Renew } from '@carbon/react/icons';
-import type { TFunction } from 'react-i18next';
 import type { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
 import type { QueueFilter, QueueEntry } from '../../types';
 import styles from './consultation.scss';

package/src/components/consultation/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import Consultation from './consultation.component';
 
 type ConsultationDashboardProps = {
@@ -13,7 +12,6 @@ const ConsultationDashboard: React.FC<ConsultationDashboardProps> = ({ dashboard
     <BrowserRouter basename={`${spaBasePath}/consultation`}>
       <Routes>
         <Route path="/" element={<Consultation dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="consultation" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/consultation/index.ts

@@ -1,5 +1,5 @@
 import { getAsyncLifecycle } from '@openmrs/esm-framework';
-
+export * from './tabs';
 import { moduleName } from '../../constants';
 
 const options = {

package/src/components/consultation/tabs/index.ts

@@ -0,0 +1,67 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName: '@kenyaemr/esm-express-workflow-app',
+};
+
+// t('patientSummaryTab', 'Patient Summary')
+export const patientSummary = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('vitalsAndAnthropometric', 'Vitals & Anthropometric')
+export const patientVitals = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('carePanel', 'Care Panel')
+export const carePanel = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('immunizations', 'Immunizations')
+export const immunization = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('relationships', 'Relationships')
+export const relationships = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('appointments', 'Appointments')
+export const appointments = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("attachments", "Attachments")
+export const attachments = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('clinicalEncounterTab', 'Clinical Encounter')
+export const patientClinicalEncounter = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('visits', 'Visits')
+export const patientVisits = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('specialClinics', 'Special Clinics')
+export const specialClinics = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('clinicalNotes', 'Clinical Notes')
+export const clinicalNotes = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('proceduresAndOrders', 'Investigation & Orders')
+export const proceduresAndOrders = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);

package/src/components/facility-dashboard/components/header/home-header.component.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { MultiSelect } from '@carbon/react';
 import {
   PageHeader,
   PageHeaderContent,
@@ -18,17 +17,17 @@ interface HomeHeaderProps {
 
 const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
   const { t } = useTranslation();
-  const today = new Date().toISOString().split('T')[0];
+  const today = dayjs().toDate();
   const [startDate, setStartDate] = React.useState(today);
   const [endDate, setEndDate] = React.useState(today);
 
   const handleDateChange = (type: 'start' | 'end', date: string) => {
     if (type === 'start') {
-      setStartDate(date);
-      onDateChange?.(date, endDate);
+      setStartDate(dayjs(date).startOf('day').toDate());
+      onDateChange?.(dayjs(date).startOf('day').toISOString(), dayjs(endDate).endOf('day').toISOString());
     } else {
-      setEndDate(date);
-      onDateChange?.(startDate, date);
+      setEndDate(dayjs(date).endOf('day').toDate());
+      onDateChange?.(dayjs(startDate).startOf('day').toISOString(), dayjs(date).endOf('day').toISOString());
     }
   };
 
@@ -44,9 +43,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
             id="start-date"
             labelText="Start Date"
             value={startDate}
-            onChange={(date) =>
-              handleDateChange('start', typeof date === 'string' ? date : date.toISOString().split('T')[0])
-            }
+            onChange={(date) => handleDateChange('start', typeof date === 'string' ? date : date.toISOString())}
           />
         </div>
         <div className={styles.dateInput}>
@@ -54,9 +51,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
             id="end-date"
             labelText="End Date"
             value={endDate}
-            onChange={(date) =>
-              handleDateChange('end', typeof date === 'string' ? date : date.toISOString().split('T')[0])
-            }
+            onChange={(date) => handleDateChange('end', typeof date === 'string' ? date : date.toISOString())}
           />
         </div>
       </div>

package/src/components/laboratory/index.ts

@@ -20,3 +20,14 @@ export const laboratoryLeftPanelLink = getAsyncLifecycle(
     })),
   options,
 );
+
+// t("results", "Results")
+export const patientLaboratoryOrdersResults = getAsyncLifecycle(
+  () => import('./../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientLaboratoryOrdersTab = getAsyncLifecycle(
+  () => import('../../components/laboratory/lab-table.component'),
+  options,
+);

package/src/components/laboratory/lab-table.component.tsx

@@ -1,22 +1,49 @@
-import React from 'react';
-import { Order } from '../../types/order/order';
-import { Layer } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { DataTableSkeleton, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { ErrorState, useConfig } from '@openmrs/esm-framework';
 import styles from './laboratory-tabs.scss';
-import { EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import { ExpressWorkflowConfig } from '../../config-schema';
 import OrderTable from '../../shared/orders/OrderTable';
+import { getPatientPrintFields } from '../../shared/utils';
+import { usePatientOrders } from '../../hooks/useOrders';
 
 type LabTableProps = {
-  orders: Order[];
+  patientUuid: string;
 };
 
-const LabTable: React.FC<LabTableProps> = ({ orders }) => {
-  const { t } = useTranslation();
+const LabTable: React.FC<LabTableProps> = ({ patientUuid }) => {
   const { labOrderTypeUuid, orderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', labOrderTypeUuid, undefined, undefined);
+
+  const { t } = useTranslation();
+  const { patient } = usePatientChartStore(patientUuid);
+  const windowProps = useMemo(() => ({ encounterUuid: orders?.[0]?.encounter?.uuid }), [orders]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid: patient?.id,
+      visitContext: orders?.[0]?.encounter?.visit,
+      mutateVisitContext: mutateOrders,
+    }),
+    [patient, orders, mutateOrders],
+  );
+  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
+  const { patientName, patientId, patientAge } = getPatientPrintFields(patient);
 
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-lab-order');
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('laboratoryOrders', 'Laboratory Orders')} error={error} />;
+  }
 
   if (orders?.length === 0) {
     return (
@@ -24,7 +51,9 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('laboratoryOrders', 'Laboratory Orders')}
-          launchForm={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+          launchForm={() =>
+            launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets }, windowProps, groupProps)
+          }
         />
       </Layer>
     );
@@ -33,12 +62,17 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
   return (
     <OrderTable
       title={t('laboratoryOrders', 'Laboratory Orders')}
-      orders={orders}
-      onAdd={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+      orders={orders ?? []}
+      onAdd={() => launchAddLabOrder(undefined, { encounterUuid: '' }, groupProps)}
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}
       statusPillClassName={styles.statusPill}
+      module="@openmrs/esm-laboratory-app"
+      orderType="lab"
+      patientName={patientName}
+      patientId={patientId}
+      patientAge={patientAge}
     />
   );
 };

package/src/components/laboratory/laboratory-tabs.component.tsx

@@ -1,29 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import LabTable from './lab-table.component';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type LaboratoryTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const LaboratoryTabs: React.FC<LaboratoryTabsProps> = ({ patientUuid, patient }) => {
+const LaboratoryTabs: React.FC<LaboratoryTabsProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const testOrderTypeUuid = '52a447d3-a64a-11e3-9aeb-50e549534c5e';
 
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="laboratory"
-      resultsSlotName="ewf-laboratory-results-slot"
-      orderTypeUuid={testOrderTypeUuid}
-      Table={({ orders }) => {
-        return <LabTable orders={orders} />;
-      }}
-    />
-  );
+  return <ExtensionTabs extensionSlotName="patient-laboratory-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default LaboratoryTabs;

package/src/components/mch/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import MCH from './mch.component';
 
 type MchDashboardProps = {
@@ -13,7 +12,6 @@ const MCHDashboard: React.FC<MchDashboardProps> = ({ dashboardTitle }) => {
     <BrowserRouter basename={`${spaBasePath}/mch`}>
       <Routes>
         <Route path="/" element={<MCH dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="mch" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/mch/mch.component.tsx

@@ -18,9 +18,7 @@ const MCH: React.FC<MchProps> = ({ dashboardTitle }) => {
     <div>
       <PageHeader className={styles.pageHeader}>
         <PageHeaderContent
-          title={`${toUpper(dashboardTitle)} ${
-            selectedIndex === 0 ? t('triage', 'Triage') : t('consultation', 'Consultation')
-          }`}
+          title={selectedIndex === 0 ? t('mchTriage', 'MCH Triage') : t('mchConsultation', 'MCH Consultation')}
           illustration={<HomePictogram />}
         />
 

package/src/components/pharmacy/index.ts

@@ -1,7 +1,7 @@
 import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-
+export * from './tabs';
 const options = {
   featureName: 'express-workflow',
   moduleName,

package/src/components/pharmacy/orders/pharmacy-orders.component.tsx

@@ -16,14 +16,22 @@ import {
   DataTableSkeleton,
   Pagination,
 } from '@carbon/react';
-import { Add, Renew } from '@carbon/react/icons';
-import { ErrorState, formatDatetime, parseDate, useDebounce, useLayoutType } from '@openmrs/esm-framework';
-import { EmptyState, useLaunchWorkspaceRequiringVisit, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { Add, Printer, Renew } from '@carbon/react/icons';
+import { ErrorState, formatDatetime, parseDate, showModal, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import {
+  EmptyState,
+  invalidateVisitAndEncounterData,
+  invalidateVisitByUuid,
+  useLaunchWorkspaceRequiringVisit,
+  usePaginationInfo,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
 import capitalize from 'lodash-es/capitalize';
 
 import { usePharmacyOrders } from './pharmacy-orders.resource';
 
 import styles from './pharmacy-orders.scss';
+import { useSWRConfig } from 'swr';
 
 type PharmacyOrdersProps = {
   patient: fhir.Patient;
@@ -36,7 +44,22 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
   const { medicationRequests, isLoading, error, mutate, currentPage, goTo, totalCount, currPageSize, setCurrPageSize } =
     usePharmacyOrders(patient.identifier[0]?.value ?? '', debouncedSearchTerm);
-  const launchAddDrugOrder = useLaunchWorkspaceRequiringVisit('add-drug-order');
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const { visitContext } = usePatientChartStore(patient.id);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid: patient?.id,
+      visitContext: visitContext,
+      mutateVisitContext: () => {
+        invalidateVisitByUuid(globalMutate, visitContext.uuid);
+        invalidateVisitAndEncounterData(globalMutate, patient.id);
+      },
+    }),
+    [globalMutate, visitContext, patient.id],
+  );
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patient?.id, 'order-basket');
 
   const currentItems = useMemo(() => {
     return medicationRequests.length;
@@ -64,6 +87,14 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
     };
   });
 
+  const handlePrintPrescription = () => {
+    const uuids = medicationRequests.map((entry) => entry.resource.id).filter(Boolean);
+    const dispose = showModal('print-prescription-modal', {
+      onClose: () => dispose(),
+      medicationRequestUuids: uuids,
+    });
+  };
+
   if (isLoading) {
     return (
       <div className={styles.pharmacyOrdersContainer}>
@@ -86,7 +117,7 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
         <EmptyState
           displayText={t('noMedicationOrdersFound', 'medication orders found')}
           headerTitle={t('medicationOrders', 'Medication Orders')}
-          launchForm={launchAddDrugOrder}
+          launchForm={() => launchOrderBasket({}, { encounterUuid: '' }, groupProps)}
         />
       </div>
     );
@@ -113,7 +144,14 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
                 <Button kind="ghost" renderIcon={Renew} size={responseSize} onClick={() => mutate()}>
                   {t('refresh', 'Refresh')}
                 </Button>
-                <Button size={responseSize} onClick={() => launchAddDrugOrder()} kind="ghost" renderIcon={Add}>
+                <Button kind="ghost" renderIcon={Printer} size={responseSize} onClick={() => handlePrintPrescription()}>
+                  {t('printPrescription', 'Print Prescription')}
+                </Button>
+                <Button
+                  size={responseSize}
+                  onClick={() => launchOrderBasket({}, { encounterUuid: '' }, groupProps)}
+                  kind="ghost"
+                  renderIcon={Add}>
                   {t('addMedicationOrder', 'Add Medication Order')}
                 </Button>
               </TableToolbarContent>

package/src/components/pharmacy/orders/pharmacy-orders.test.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi, type MockedFunction } from 'vitest';
 import { renderWithSwr } from '../../../../../../tools/test-helpers';
 import PharmacyOrders from './pharmacy-orders.component';
 import { usePharmacyOrders } from './pharmacy-orders.resource';
 
 // Mock the workspace launcher hook
-const mockLaunchAddDrugOrder = jest.fn();
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  ...jest.requireActual('@openmrs/esm-patient-common-lib'),
-  useLaunchWorkspaceRequiringVisit: jest.fn(() => mockLaunchAddDrugOrder),
+const mockLaunchAddDrugOrder = vi.fn();
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  ...vi.importActual<typeof import('@openmrs/esm-patient-common-lib')>('@openmrs/esm-patient-common-lib'),
+  useLaunchWorkspaceRequiringVisit: vi.fn(() => mockLaunchAddDrugOrder),
 }));
 
 // Mock the pharmacy orders hook
-jest.mock('./pharmacy-orders.resource');
+vi.mock('./pharmacy-orders.resource');
 
-const mockUsePharmacyOrders = usePharmacyOrders as jest.MockedFunction<typeof usePharmacyOrders>;
+const mockUsePharmacyOrders = usePharmacyOrders as MockedFunction<typeof usePharmacyOrders>;
 
 describe('PharmacyOrders Component', () => {
   const mockPatient: fhir.Patient = {
@@ -103,7 +104,7 @@ describe('PharmacyOrders Component', () => {
   const mockSetCurrPageSize = jest.fn() as unknown as React.Dispatch<React.SetStateAction<number>>;
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('Loading State', () => {