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

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/mch/mch.consultation.component.tsx

@@ -1,12 +1,14 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import { IconButton, InlineLoading } from '@carbon/react';
 import { Renew } from '@carbon/react/icons';
 import { useConfig } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { ExpressWorkflowConfig } from '../../config-schema';
 import { useQueues } from '../../hooks/useServiceQueues';
 import QueueTab from '../../shared/queue/queue-tab.component';
+import QueueSummaryCards, { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
 import { Queue, QueueFilter } from '../../types';
 import {
   useConsultationQueueMetrics,
@@ -17,7 +19,7 @@ import styles from '../consultation/consultation.scss';
 
 const MCHConsultation: React.FC = () => {
   const { t } = useTranslation();
-  const { queues, isLoading, error } = useQueues();
+  const { queues, isLoading: isLoadingQueues } = useQueues();
   const [currQueue, setCurrQueue] = useState<Queue>();
   const [filters, setFilters] = useState<Array<QueueFilter>>([]);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -26,7 +28,12 @@ const MCHConsultation: React.FC = () => {
     priorities: { emergencyPriorityConceptUuid, urgentPriorityConceptUuid, notUrgentPriorityConceptUuid },
     queueServiceConceptUuids,
   } = useConfig<ExpressWorkflowConfig>();
-  const { data: totalVisits, isLoading: isLoadingTotalVisits } = useTotalVisits();
+  const {
+    data: totalVisits,
+    isLoading: isLoadingTotalVisits,
+    isValidating: isValidatingTotalVisits,
+  } = useTotalVisits();
+
   const consultationQueues = queues.filter(
     (queue) =>
       queue.service.uuid === queueServiceConceptUuids.consultationService &&
@@ -38,21 +45,21 @@ const MCHConsultation: React.FC = () => {
   const {
     waitingEntries,
     isLoading: isLoadingQueueMetrics,
-    error: waitingError,
     emergencyEntries,
     urgentEntries,
     notUrgentEntries,
+    isValidating: isValidatingQueueMetrics,
   } = useConsultationQueueMetrics(activeQueue);
   const {
     awaitingCount,
     completedCount,
-    totalCount,
     lab,
     radiology,
     procedures,
     isLoading: isLoadingInvestigations,
     refresh: refreshInvestigations,
     investigationCategorizedEntries,
+    isValidating: isValidatingInvestigations,
   } = useInvestigationStats(activeQueue);
   // Single refresh handler for all investigations
   const handleRefresh = useCallback(async () => {
@@ -66,7 +73,7 @@ const MCHConsultation: React.FC = () => {
     }
   }, [refreshInvestigations]);
 
-  const cards = useMemo(
+  const cards: Array<QueueSummaryCard> = useMemo(
     () => [
       {
         title: t('awaitingConsultation', 'Awaiting consultation'),
@@ -258,7 +265,10 @@ const MCHConsultation: React.FC = () => {
     ],
   );
 
-  if (isLoading || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueueMetrics) {
+  const isLoading = isLoadingQueues || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueueMetrics;
+  const isValidating = isValidatingTotalVisits || isValidatingInvestigations || isValidatingQueueMetrics;
+
+  if (isLoading && !isValidating) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
@@ -271,14 +281,16 @@ const MCHConsultation: React.FC = () => {
     );
   }
   return (
-    <QueueTab
-      queues={consultationQueues}
-      navigatePath="mch"
-      cards={cards}
-      usePatientChart
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <>
+      <QueueSummaryCards cards={cards} />
+      <QueueTab
+        queues={consultationQueues}
+        navigatePath="mch"
+        usePatientChart
+        filters={filters}
+        onFiltersChanged={setFilters}
+      />
+    </>
   );
 };
 

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

@@ -5,13 +5,14 @@ import { ErrorState, useConfig } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useQueues } from '../../hooks/useServiceQueues';
 import QueueTab from '../../shared/queue/queue-tab.component';
+import QueueSummaryCards, { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
 import { Queue, QueueFilter } from '../../types';
 import { useTriageQueuesMetrics } from '../triage/triage.resource';
 import { ExpressWorkflowConfig } from '../../config-schema';
 
 const MCHTriage: React.FC = () => {
   const { t } = useTranslation();
-  const { queues, isLoading, error } = useQueues();
+  const { queues, isLoading: isLoadingQueues, error } = useQueues();
   const [currQueue, setCurrQueue] = useState<Queue>();
   const [filters, setFilters] = useState<Array<QueueFilter>>([]);
   const {
@@ -31,11 +32,15 @@ const MCHTriage: React.FC = () => {
   const {
     error: metricsError,
     isLoading: isLoadingMetrics,
-    attendedtoEntries,
+    attendedToEntries,
     waitingEntries,
+    isValidating: isValidatingMetrics,
   } = useTriageQueuesMetrics(activeQueue);
 
-  if (isLoading || isLoadingMetrics) {
+  const isLoading = isLoadingQueues || isLoadingMetrics;
+  const isValidating = isValidatingMetrics;
+
+  if (isLoading && !isValidating) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
@@ -43,37 +48,41 @@ const MCHTriage: React.FC = () => {
     return <ErrorState error={error ?? metricsError} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />;
   }
 
+  const cards: Array<QueueSummaryCard> = [
+    {
+      title: t('patientsAwaiting', 'Patient awaiting'),
+      value: waitingEntries?.length?.toString(),
+      onClick: () => {
+        setFilters((prevFilters) => [
+          ...prevFilters.filter((f) => f.key !== 'status'),
+          { key: 'status', value: waitingStatus, label: t('waiting', 'Waiting') },
+        ]);
+      },
+    },
+    {
+      title: t('patientAttended', 'Patient attended to'),
+      value: attendedToEntries?.length?.toString(),
+      onClick: () => {
+        setFilters((prevFilters) => [
+          ...prevFilters.filter((f) => f.key !== 'status'),
+          { key: 'status', value: `${finishedStatus},${inServiceStatus}`, label: t('attendedTo', 'Attended to') },
+        ]);
+      },
+    },
+  ];
+
   return (
-    <QueueTab
-      queues={triageQueues}
-      navigatePath="mch"
-      cards={[
-        {
-          title: t('patientsAwaiting', 'Patient awaiting'),
-          value: waitingEntries?.length?.toString(),
-          onClick: () => {
-            setFilters((prevFilters) => [
-              ...prevFilters.filter((f) => f.key !== 'status'),
-              { key: 'status', value: waitingStatus, label: t('waiting', 'Waiting') },
-            ]);
-          },
-        },
-        {
-          title: t('patientAttended', 'Patient attended to'),
-          value: attendedtoEntries?.length?.toString(),
-          onClick: () => {
-            setFilters((prevFilters) => [
-              ...prevFilters.filter((f) => f.key !== 'status'),
-              { key: 'status', value: `${finishedStatus},${inServiceStatus}`, label: t('attendedTo', 'Attended to') },
-            ]);
-          },
-        },
-      ]}
-      onTabChanged={setCurrQueue}
-      usePatientChart
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <>
+      <QueueSummaryCards cards={cards} />
+      <QueueTab
+        queues={triageQueues}
+        navigatePath="mch"
+        onTabChanged={setCurrQueue}
+        usePatientChart
+        filters={filters}
+        onFiltersChanged={setFilters}
+      />
+    </>
   );
 };
 

package/src/components/pharmacy/index.ts

@@ -1,34 +1,36 @@
-import { getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import PharmacyTabs from './pharmacy-tabs.component';
-import Pharmacy from './pharmacy.component';
-
+export * from './tabs';
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
 // t('pharmacy', 'Pharmacy')
-export const pharmacyLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'pharmacy',
-    title: 'pharmacy',
-  }),
+export const pharmacyLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        name: 'pharmacy',
+        title: 'pharmacy',
+      }),
+    })),
   options,
 );
-export const pharmacy = getSyncLifecycle(Pharmacy, options);
-export const pharmacyTabs = getSyncLifecycle(PharmacyTabs, options);
+export const pharmacy = getAsyncLifecycle(() => import('./pharmacy.component'), options);
+export const pharmacyTabs = getAsyncLifecycle(() => import('./pharmacy-tabs.component'), options);
 
 // t('precription', 'Prescription')
-export const pharmacyPatientChartDashboardLink = getSyncLifecycle(
-  createDashboardLink({
-    path: 'pharmacy',
-    title: 'prescription',
-    icon: 'omrs-icon-medication',
-  }),
+export const pharmacyPatientChartDashboardLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'pharmacy',
+        title: 'prescription',
+        icon: 'omrs-icon-medication',
+      }),
+    })),
   options,
 );
 export const pharmacyOrders = getAsyncLifecycle(() => import('./orders/pharmacy-orders.component'), options);

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

@@ -18,12 +18,20 @@ import {
 } 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 {
+  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,18 +44,28 @@ 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;
   }, [medicationRequests]);
 
-  const { pageSizes, itemsDisplayed } = usePaginationInfo(
-    currPageSize,
-    totalCount || 0,
-    currentPage || 1,
-    currentItems,
-  );
+  const { pageSizes } = usePaginationInfo(currPageSize, totalCount || 0, currentPage || 1, currentItems);
 
   const header = [
     { key: 'date', header: t('dateAndTime', 'Date and time') },
@@ -58,7 +76,7 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
   ];
 
   const rows = medicationRequests.map((medicationRequest) => {
-    const resource = medicationRequest.resource as fhir.MedicationRequest;
+    const resource = medicationRequest.resource;
     return {
       id: medicationRequest.fullUrl,
       date: formatDatetime(parseDate(resource?.authoredOn), { mode: 'standard', noToday: true }),
@@ -89,9 +107,9 @@ const PharmacyOrders: React.FC<PharmacyOrdersProps> = ({ patient }) => {
     return (
       <div className={styles.pharmacyOrdersContainer}>
         <EmptyState
-          displayText={t('noMedicationOrdersFound', 'No medication orders found')}
-          headerTitle={t('noMedicationOrders', 'No medication orders')}
-          launchForm={launchAddDrugOrder}
+          displayText={t('noMedicationOrdersFound', 'medication orders found')}
+          headerTitle={t('medicationOrders', 'Medication Orders')}
+          launchForm={() => launchOrderBasket({}, { encounterUuid: '' }, groupProps)}
         />
       </div>
     );
@@ -118,7 +136,11 @@ 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
+                  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', () => {

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

@@ -1,29 +1,13 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Layer } from '@carbon/react';
-import { Activity, RequestQuote, CalendarTools } from '@carbon/react/icons';
+import React from 'react';
 
-import ExtensionTabs, { ExtensionTabItem } from '../../shared/tabs/extension-tabs.component';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type PharmacyTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const PharmacyTabs: React.FC<PharmacyTabsProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const items: Array<ExtensionTabItem> = [
-    { label: t('orders', 'Orders'), icon: RequestQuote, slotName: 'ewf-orders-slot' },
-    { label: t('activeMedications', 'Active Medications'), icon: Activity, slotName: 'ewf-active-medications-slot' },
-    { label: t('pastMedications', 'Past Medications'), icon: CalendarTools, slotName: 'ewf-past-medications-slot' },
-  ];
-
-  return (
-    <Layer>
-      <ExtensionTabs items={items} state={state} />
-    </Layer>
-  );
+const PharmacyTabs: React.FC<PharmacyTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName={'pharmacy-tabs-slot'} patientUuid={patientUuid} />;
 };
 
 export default PharmacyTabs;

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

@@ -0,0 +1,21 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName: '@kenyaemr/esm-express-workflow-app',
+};
+// t('orders', 'Orders')
+export const pharmacyOrdersTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('activeMedications', 'Active Medications')
+export const pharmacyActiveMedicationsTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('pastMedications', 'Past Medications')
+export const pharmacyPastMedicationsTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);

package/src/components/preauth/index.ts

@@ -0,0 +1,22 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+import { moduleName } from '../../constants';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName,
+};
+
+export const preauthDashboard = getAsyncLifecycle(() => import('./preauth-dashboard.component'), options);
+
+// t('careAuthorization', 'Care Authorizations')
+export const preauthDashboardLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'preauthorization',
+        title: 'careAuthorization',
+        icon: 'omrs-icon-money',
+      }),
+    })),
+  options,
+);

package/src/components/preauth/preauth-dashboard.component.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { Layer } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+
+type PreauthDashboardProps = {
+  patientUuid: string;
+  patient: fhir.Patient;
+};
+
+const PreauthDashboard: React.FC<PreauthDashboardProps> = ({ patientUuid, patient }) => {
+  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+
+  return (
+    <Layer>
+      <ExtensionSlot name="ewf-preauth-dashboard-slot" state={state} />
+    </Layer>
+  );
+};
+
+export default PreauthDashboard;

package/src/components/procedures/index.ts

@@ -1,21 +1,38 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { moduleName } from '../../constants';
-import ProceduresTabs from './procedures-tabs.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const proceduresDashboard = getSyncLifecycle(ProceduresTabs, options);
+export const proceduresDashboard = getAsyncLifecycle(() => import('./procedures-tabs.component'), options);
 // t('procedures', 'Procedures')
-export const proceduresLeftPanelLink = getSyncLifecycle(
-  createDashboardLink({
-    path: 'procedures',
-    title: 'procedures',
-    icon: 'omrs-icon-movement',
-  }),
+export const proceduresLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'procedures',
+        title: 'procedures',
+        icon: 'omrs-icon-movement',
+      }),
+    })),
+  options,
+);
+
+// t("results", "Results")
+export const patientProcedureOrdersResults = getAsyncLifecycle(
+  () => import('../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientProcedureOrdersTab = getAsyncLifecycle(
+  () => import('../../components/procedures/procedures-table.component'),
+  options,
+);
+// t('anaesthetic', 'Anaesthetic')
+export const patientProcedureAnaestheticTab = getAsyncLifecycle(
+  () => import('../../components/anaesthetic/anaesthetic.component'),
   options,
 );

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

@@ -0,0 +1,13 @@
+import { getSyncLifecycle } from '@openmrs/esm-framework';
+import ProcedureQueues from './procedure-queues.component';
+import ProcedureFormExtras from './procedure-form-extras.component';
+
+const moduleName = '@kenyaemr/esm-express-workflow-app';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName,
+};
+
+export const procedureQueues = getSyncLifecycle(ProcedureQueues, options);
+export const procedureFormExtras = getSyncLifecycle(ProcedureFormExtras, options);

package/src/components/procedures/procedure-queues/procedure-form-extras.component.tsx

@@ -0,0 +1,33 @@
+import { Button, Layer } from '@carbon/react';
+import { showModal, type Visit } from '@openmrs/esm-framework';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './procedure-form-extras.scss';
+import { ArrowRight } from '@carbon/react/icons';
+
+type ProcedureFormExtrasProps = {
+  visitContext: Visit;
+  patient: fhir.Patient;
+};
+const ProcedureFormExtras: FC<ProcedureFormExtrasProps> = ({ visitContext, patient }) => {
+  const { t } = useTranslation();
+
+  const onMovePatientToQueue = () => {
+    const dispose = showModal('transition-patient-to-latest-queue-modal', {
+      closeModal: () => {
+        dispose();
+      },
+      activeVisit: visitContext,
+    });
+  };
+
+  return (
+    <Layer className={styles.gridRow}>
+      <Button kind="ghost" size="md" onClick={onMovePatientToQueue} renderIcon={ArrowRight}>
+        {t('moveToProcedureQueue', 'Move to procedure queue')}
+      </Button>
+    </Layer>
+  );
+};
+
+export default ProcedureFormExtras;

package/src/components/procedures/procedure-queues/procedure-form-extras.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.gridRow {
+  padding: layout.$spacing-03;
+}

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

@@ -0,0 +1,35 @@
+import React, { FC, useMemo, useState } from 'react';
+import ProcedureSummaryCards from './summary-cards.component';
+import { useProcedureServiceQueues } from './procedure-queues.resources';
+import ProcedureRoomTabs from './procedure-room-tabs.component';
+import { Order } from '@openmrs/esm-framework';
+
+type ProcedureQueuesProps = {
+  activeOrders?: Array<Order>;
+  inProgressOrders?: Array<Order>;
+  completedOrders?: Array<Order>;
+};
+const ProcedureQueues: FC<ProcedureQueuesProps> = ({ activeOrders, completedOrders, inProgressOrders }) => {
+  const [activeQueue, setActiveQueue] = useState<string>();
+  const { errorLoadingQueues, isLoadingQueues, procedureQueues } = useProcedureServiceQueues();
+  const currentQueue = useMemo(() => activeQueue ?? procedureQueues?.[0]?.uuid, [activeQueue, procedureQueues]);
+  return (
+    <>
+      <ProcedureSummaryCards
+        activeQueue={currentQueue}
+        activeOrders={activeOrders}
+        completedOrders={completedOrders}
+        inProgressOrders={inProgressOrders}
+      />
+      <ProcedureRoomTabs
+        activeQueue={currentQueue}
+        onActiveQueueChange={setActiveQueue}
+        procedureQueues={procedureQueues}
+        isLoadingQueues={isLoadingQueues}
+        errorLoadingQueues={errorLoadingQueues}
+      />
+    </>
+  );
+};
+
+export default ProcedureQueues;