@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/procedures/procedure-queues/procedure-queues.resources.ts

@@ -0,0 +1,37 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { ExpressWorkflowConfig } from '../../../config-schema';
+import { useQueues } from '../../../hooks/useServiceQueues';
+import type { QueueEntry, QueueEntryPayload } from '../../../types';
+
+export const addPatientToQueue = async (payload: QueueEntryPayload) => {
+  const url = `${restBaseUrl}/visit-queue-entry`;
+  const res = await openmrsFetch<QueueEntry>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+  return res.data;
+};
+export const useProcedureServiceQueues = () => {
+  const { queues, isLoading: isLoadingQueues, error: errorLoadingQueues } = useQueues();
+  const {
+    queueServiceConceptUuids: { procedureService },
+  } = useConfig<ExpressWorkflowConfig>();
+
+  const procedureQueues = useMemo(
+    () =>
+      queues
+        .filter((queue) => queue.service.uuid === procedureService && queue?.queueRooms?.length > 0)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [queues, procedureService],
+  );
+
+  return {
+    procedureQueues,
+    isLoadingQueues,
+    errorLoadingQueues,
+  };
+};

package/src/components/procedures/procedure-queues/procedure-room-tabs.component.tsx

@@ -0,0 +1,80 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import startCase from 'lodash/startCase';
+import { Queue } from '../../../types';
+import styles from './procedure-rooms.scss';
+import QueueProcedureTabs from './queue-procedure-tabs.component';
+
+type ProcedureRoomTabsProps = {
+  activeQueue: string;
+  onActiveQueueChange: (queue: string) => void;
+  procedureQueues: Queue[];
+  isLoadingQueues: boolean;
+  errorLoadingQueues: Error;
+};
+
+const ProcedureRoomTabs: React.FC<ProcedureRoomTabsProps> = ({
+  activeQueue,
+  onActiveQueueChange,
+  procedureQueues,
+  isLoadingQueues,
+  errorLoadingQueues,
+}) => {
+  const { t } = useTranslation();
+
+  if (isLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <TabsSkeleton />
+      </div>
+    );
+  }
+
+  if (errorLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <ErrorState error={errorLoadingQueues} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />
+      </div>
+    );
+  }
+
+  if (!procedureQueues.length) {
+    return (
+      <div className={styles.contentArea}>
+        <ErrorState
+          headerTitle={t('noQueueRoomsConfigured', 'No queue rooms configured')}
+          error={{
+            response: { status: t('noQueueRoomsConfigured', 'No queue rooms configured') },
+          }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className={styles.tabsContainer}>
+      <Tabs
+        selectedIndex={procedureQueues.findIndex((queue) => queue.uuid === activeQueue)}
+        onChange={({ selectedIndex }) => {
+          onActiveQueueChange(procedureQueues[selectedIndex].uuid);
+        }}>
+        <TabList contained>
+          {procedureQueues.map((queue) => (
+            <Tab key={queue?.uuid}>{startCase(queue?.queueRooms?.[0]?.display)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {procedureQueues.map((queue) => (
+            <TabPanel key={queue?.uuid}>
+              <QueueProcedureTabs queue={queue.uuid} />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ProcedureRoomTabs;

package/src/components/procedures/procedure-queues/procedure-rooms.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.contentArea {
+  padding: layout.$spacing-05;
+  min-height: 400px;
+}
+
+.tabsContainer {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}

package/src/components/procedures/procedure-queues/queue-procedure-tabs.component.tsx

@@ -0,0 +1,34 @@
+import { ExtensionSlot, Order } from '@openmrs/esm-framework';
+import React, { FC, useCallback } from 'react';
+import { useQueueEntries } from '../../../hooks/useServiceQueues';
+
+type QueueProcedureTabsProps = {
+  queue: string;
+};
+const QueueProcedureTabs: FC<QueueProcedureTabsProps> = ({ queue }) => {
+  const {
+    queueEntries,
+    isLoading: isLoadingQueueEntries,
+    error: errorQueueEntries,
+  } = useQueueEntries({ queues: [queue] });
+  const isPatientInQueueByOrder = useCallback(
+    (order: Order) => {
+      return queueEntries?.some((entry) => entry.patient.uuid === order.patient.uuid);
+    },
+    [queueEntries],
+  );
+  const isPatientInQueueByPatient = useCallback(
+    (patientUuid: string) => {
+      return queueEntries?.some((entry) => entry.patient.uuid === patientUuid);
+    },
+    [queueEntries],
+  );
+  return (
+    <ExtensionSlot
+      name={'procedure-ordered-tabs-extension'}
+      state={{ filterByOrder: isPatientInQueueByOrder, filterByPatient: isPatientInQueueByPatient }}
+    />
+  );
+};
+
+export default QueueProcedureTabs;

package/src/components/procedures/procedure-queues/summary-cards.component.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import styles from './summary-cards.scss';
+import { useTranslation } from 'react-i18next';
+import { useQueueEntries } from '../../../hooks/useServiceQueues';
+import { Order } from '@openmrs/esm-framework';
+import { SkeletonText } from '@carbon/react';
+
+type ProcedureSummaryCardsProps = {
+  activeQueue: string;
+  activeOrders?: Array<Order>;
+  inProgressOrders?: Array<Order>;
+  completedOrders?: Array<Order>;
+};
+const ProcedureSummaryCards: React.FC<ProcedureSummaryCardsProps> = ({
+  activeQueue,
+  activeOrders = [],
+  inProgressOrders = [],
+  completedOrders = [],
+}) => {
+  const { queueEntries, isLoading, error } = useQueueEntries({ queues: [activeQueue] });
+  function groupOrdersById(orders: Array<Order>) {
+    if (orders && orders.length > 0) {
+      const groupedOrders = orders.reduce((acc, item) => {
+        if (!acc[item.patient.uuid]) {
+          acc[item.patient.uuid] = [];
+        }
+        acc[item.patient.uuid].push(item);
+        return acc;
+      }, {});
+
+      // Convert the result to an array of objects with patientId and orders
+      return Object.keys(groupedOrders).map((patientId) => ({
+        patientId: patientId,
+        orders: groupedOrders[patientId],
+      }));
+    } else {
+      return [];
+    }
+  }
+  const activeOrdersCount = useMemo(
+    () =>
+      groupOrdersById(activeOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [activeOrders, queueEntries],
+  );
+  const inProgressOrdersCount = useMemo(
+    () =>
+      groupOrdersById(inProgressOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [inProgressOrders, queueEntries],
+  );
+  const completedOrdersCount = useMemo(
+    () =>
+      groupOrdersById(completedOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [completedOrders, queueEntries],
+  );
+
+  const { t } = useTranslation();
+  return (
+    <div className={styles.tileContainer}>
+      <div className={styles.tile}>
+        <strong>{t('awaitingProcedure', 'Awaiting Procedure')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{activeOrdersCount}</span>}
+      </div>
+      <div className={styles.tile}>
+        <strong>{t('ongoingProcedures', 'Ongoing Procedures')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{inProgressOrdersCount}</span>}
+      </div>
+      <div className={styles.tile}>
+        <strong>{t('completedProcedures', 'Completed Procedures')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{completedOrdersCount}</span>}
+      </div>
+    </div>
+  );
+};
+
+export default ProcedureSummaryCards;

package/src/components/procedures/procedure-queues/summary-cards.scss

@@ -0,0 +1,35 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.tileContainer {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05;
+  flex-wrap: wrap;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: layout.$spacing-05;
+
+  & > span {
+    font-size: 2rem;
+    font-weight: lighter;
+    color: colors.$gray-70;
+  }
+}
+
+.tileContainer {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05;
+}

package/src/components/procedures/procedures-table.component.tsx

@@ -1,35 +1,80 @@
-import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import { EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
-import { Layer } from '@carbon/react';
+import { DataTableSkeleton, Layer } from '@carbon/react';
+import { ErrorState, FHIRResource, useConfig } from '@openmrs/esm-framework';
+import {
+  EmptyState,
+  invalidateVisitAndEncounterData,
+  invalidateVisitByUuid,
+  useLaunchWorkspaceRequiringVisit,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import OrderTable from '../../shared/orders/OrderTable';
 
-import { type Order } from '../../types/order/order';
+import { useSWRConfig } from 'swr';
 import { type ExpressWorkflowConfig } from '../../config-schema';
+import { usePatientOrders } from '../../hooks/useOrders';
 import styles from './procedures.scss';
 
 type ProceduresTableProps = {
-  orders: Order[];
+  patientUuid: string;
+  patient?: FHIRResource;
 };
-const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders }) => {
+const ProceduresTable: React.FC<ProceduresTableProps> = ({ patientUuid, patient }) => {
   const { t } = useTranslation();
-  const { imagingOrderTypeUuid, imagingOrderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const { imagingOrderTypeUuid, imagingOrderableConceptSets, proceduresConceptClassUuid } =
+    useConfig<ExpressWorkflowConfig>();
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', imagingOrderTypeUuid, undefined, undefined);
+  const filteredOrders = useMemo(
+    () => orders?.filter((order) => order.concept?.conceptClass?.uuid === proceduresConceptClassUuid),
+    [orders, proceduresConceptClassUuid],
+  );
 
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-procedures-order');
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const { mutate: globalMutate } = useSWRConfig();
+  const windowProps = useMemo(() => ({ encounterUuid: filteredOrders?.[0]?.encounter?.uuid }), [filteredOrders]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid,
+      visitContext: visitContext,
+      mutateVisitContext: () => {
+        mutateOrders();
+        invalidateVisitByUuid(globalMutate, visitContext.uuid);
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
+      },
+    }),
+    [patient, patientUuid, visitContext, mutateOrders, globalMutate],
+  );
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patientUuid ?? '', 'order-basket');
 
-  if (orders?.length === 0) {
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={t('proceduresOrders', 'Procedures Orders')} error={error} />;
+  }
+  if (filteredOrders?.length === 0) {
     return (
       <Layer>
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('proceduresOrders', 'Procedures Orders')}
           launchForm={() =>
-            launchAddLabOrder({
-              orderTypeUuid: imagingOrderTypeUuid,
-              orderableConceptSets: imagingOrderableConceptSets,
-            })
+            launchOrderBasket(
+              {
+                orderTypeUuid: imagingOrderTypeUuid,
+                orderableConceptSets: imagingOrderableConceptSets,
+              },
+              windowProps,
+              groupProps,
+            )
           }
         />
       </Layer>
@@ -39,17 +84,22 @@ const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders }) => {
   return (
     <OrderTable
       title={t('proceduresOrders', 'Procedures Orders')}
-      orders={orders}
+      orders={filteredOrders ?? []}
       onAdd={() =>
-        launchAddLabOrder({
-          orderTypeUuid: imagingOrderTypeUuid,
-          orderableConceptSets: imagingOrderableConceptSets,
-        })
+        launchOrderBasket(
+          {
+            orderTypeUuid: imagingOrderTypeUuid,
+            orderableConceptSets: imagingOrderableConceptSets,
+          },
+          windowProps,
+          groupProps,
+        )
       }
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}
       statusPillClassName={styles.statusPill}
+      module="@kenyaemr/esm-procedure-orders-app"
     />
   );
 };

package/src/components/procedures/procedures-tabs.component.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi, type MockedFunction } from 'vitest';
+import '@testing-library/jest-dom';
+import { usePatientOrders } from '../../hooks/useOrders';
+import ProceduresTabs from './procedures-tabs.component';
+import type { fhir } from '@openmrs/esm-framework';
+
+vi.mock('@openmrs/esm-framework', () => ({
+  useConfig: vi.fn(() => ({
+    proceduresConceptClassUuid: 'procedures-concept-class-uuid',
+    imagingOrderTypeUuid: 'imaging-order-type-uuid',
+  })),
+  ExtensionSlot: () => <div data-testid="extension-slot" />,
+}));
+
+vi.mock('../../hooks/useOrders', () => ({
+  usePatientOrders: vi.fn(),
+}));
+
+vi.mock('./procedures-table.component', () => ({
+  default: () => <div data-testid="procedures-orders-table">Procedures Orders Table</div>,
+}));
+
+vi.mock('../anaesthetic/anaesthetic.component', () => ({
+  default: () => <div data-testid="anaesthetic-tab-content">Anaesthetic Content</div>,
+}));
+
+const mockUsePatientOrders = usePatientOrders as MockedFunction<typeof usePatientOrders>;
+
+describe('ProceduresTabs', () => {
+  const mockPatient: fhir.Patient = {
+    resourceType: 'Patient',
+    id: 'test-patient-uuid',
+    name: [{ given: ['John'], family: 'Doe' }],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUsePatientOrders.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+      mutate: vi.fn(),
+      isValidating: false,
+    });
+  });
+
+  it('renders Orders, Results and Anaesthetic tabs', () => {
+    render(<ProceduresTabs patientUuid="test-patient-uuid" patient={mockPatient} />);
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+    expect(screen.getByRole('tab', { name: 'Orders' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Results' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Anaesthetic' })).toBeInTheDocument();
+  });
+});

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

@@ -1,28 +1,13 @@
 import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
 
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import LabTable from './procedures-table.component';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type ProceduresTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const ProceduresTabs: React.FC<ProceduresTabsProps> = ({ patientUuid, patient }) => {
-  const { proceduresConceptClassUuid, imagingOrderTypeUuid } = useConfig<ExpressWorkflowConfig>();
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="procedures"
-      resultsSlotName="ewf-procedures-results-slot"
-      orderTypeUuid={imagingOrderTypeUuid}
-      filter={(order) => order.concept?.conceptClass?.uuid === proceduresConceptClassUuid}
-      Table={({ orders }) => <LabTable orders={orders} />}
-    />
-  );
+const ProceduresTabs: React.FC<ProceduresTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="patient-procedure-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default ProceduresTabs;

package/src/components/radiology-and-imaging/index.ts

@@ -1,21 +1,36 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib/src';
 import { moduleName } from '../../constants';
-import RadiologyAndImagingTabs from './radiology-and-imaging.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const radiologyAndImagingDashboard = getSyncLifecycle(RadiologyAndImagingTabs, options);
+export const radiologyAndImagingDashboard = getAsyncLifecycle(
+  () => import('./radiology-and-imaging.component'),
+  options,
+);
 // t('radiologyAndImaging', 'Radiology and Imaging')
-export const radiologyAndImagingLeftPanelLink = getSyncLifecycle(
-  createDashboardLink({
-    path: 'radiology-and-imaging',
-    title: 'radiologyAndImaging',
-    icon: 'omrs-icon-user-xray',
-  }),
+export const radiologyAndImagingLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'radiology-and-imaging',
+        title: 'radiologyAndImaging',
+        icon: 'omrs-icon-user-xray',
+      }),
+    })),
+  options,
+);
+
+// t("results", "Results")
+export const patientImagingOrdersResults = getAsyncLifecycle(
+  () => import('../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientImagingOrdersTab = getAsyncLifecycle(
+  () => import('../../components/radiology-and-imaging/radiology-and-imaging-table.component'),
   options,
 );

package/src/components/radiology-and-imaging/radiology-and-imaging-table.component.tsx

@@ -1,35 +1,71 @@
-import React from 'react';
-import { parseDate, formatDatetime, useConfig } from '@openmrs/esm-framework';
-import { CardHeader, EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
-import { Add } from '@carbon/react/icons';
-import { Layer } from '@carbon/react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton, Layer } from '@carbon/react';
+import { ErrorState, FHIRResource, useConfig } from '@openmrs/esm-framework';
+import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import OrderTable from '../../shared/orders/OrderTable';
-
-import { type Order } from '../../types/order/order';
 import { type ExpressWorkflowConfig } from '../../config-schema';
+import { usePatientOrders } from '../../hooks/useOrders';
 import styles from './radiology-and-imaging.scss';
 
 type RadiologyAndImagingTableProps = {
-  orders: Order[];
+  patientUuid: string;
+  patient: FHIRResource;
 };
-const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ orders }) => {
+const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ patientUuid, patient }) => {
   const { t } = useTranslation();
-  const { imagingOrderTypeUuid, imagingOrderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const { imagingOrderTypeUuid, imagingOrderableConceptSets, imagingConceptClassUuid } =
+    useConfig<ExpressWorkflowConfig>();
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', imagingOrderTypeUuid, undefined, undefined);
+  const filteredOrders = useMemo(
+    () => orders?.filter((order) => order.concept?.conceptClass?.uuid === imagingConceptClassUuid),
+    [imagingConceptClassUuid, orders],
+  );
+  const { mutateVisitContext, visitContext } = usePatientChartStore(patientUuid);
+
+  const windowProps = useMemo(() => ({ encounterUuid: filteredOrders?.[0]?.encounter?.uuid }), [filteredOrders]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid,
+      visitContext: visitContext,
+      mutateVisitContext: () => {
+        mutateOrders();
+        mutateVisitContext();
+      },
+    }),
+    [patient, patientUuid, visitContext, mutateOrders, mutateVisitContext],
+  );
+  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
 
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-imaging-order');
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('radiologyAndImagingOrders', 'Radiology & Imaging Orders')} error={error} />;
+  }
 
-  if (orders?.length === 0) {
+  if (filteredOrders?.length === 0) {
     return (
       <Layer>
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('radiologyAndImagingOrders', 'Radiology and Imaging Orders')}
           launchForm={() =>
-            launchAddLabOrder({
-              orderTypeUuid: imagingOrderTypeUuid,
-              orderableConceptSets: imagingOrderableConceptSets,
-            })
+            launchAddLabOrder(
+              {
+                orderTypeUuid: imagingOrderTypeUuid,
+                orderableConceptSets: imagingOrderableConceptSets,
+              },
+              windowProps,
+              groupProps,
+            )
           }
         />
       </Layer>
@@ -39,17 +75,22 @@ const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ ord
   return (
     <OrderTable
       title={t('radiologyAndImagingOrders', 'Radiology & Imaging Orders')}
-      orders={orders}
+      orders={filteredOrders ?? []}
       onAdd={() =>
-        launchAddLabOrder({
-          orderTypeUuid: imagingOrderTypeUuid,
-          orderableConceptSets: imagingOrderableConceptSets,
-        })
+        launchAddLabOrder(
+          {
+            orderTypeUuid: imagingOrderTypeUuid,
+            orderableConceptSets: imagingOrderableConceptSets,
+          },
+          windowProps,
+          groupProps,
+        )
       }
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}
       statusPillClassName={styles.statusPill}
+      module="@kenyaemr/esm-imaging-orders-app"
     />
   );
 };