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

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

@@ -23,3 +23,14 @@ export const radiologyAndImagingLeftPanelLink = getAsyncLifecycle(
     })),
   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,78 @@
-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';
+import { getPatientPrintFields } from '../../shared/utils';
 
 type RadiologyAndImagingTableProps = {
-  orders: Order[];
+  patientUuid: string;
+  patient: fhir.Patient;
 };
-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 { patientName, patientId, patientAge } = getPatientPrintFields(patient);
 
-  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 +82,26 @@ 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"
+      orderType="radiology"
+      patientName={patientName}
+      patientId={patientId}
+      patientAge={patientAge}
     />
   );
 };

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

@@ -1,28 +1,12 @@
 import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import LabTable from './radiology-and-imaging-table.component';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type RadiologyAndImagingTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
-const imagingRadiologyConceptClassUuid = '8caa332c-efe4-4025-8b18-3398328e1323';
 
-const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid, patient }) => {
-  const { imagingOrderTypeUuid } = useConfig<ExpressWorkflowConfig>();
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="radiology-and-imaging"
-      resultsSlotName="ewf-radiology-and-imaging-results-slot"
-      orderTypeUuid={imagingOrderTypeUuid}
-      filter={(order) => order.concept?.conceptClass?.uuid === imagingRadiologyConceptClassUuid}
-      Table={({ orders }) => <LabTable orders={orders} />}
-    />
-  );
+const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="patient-imaging-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default RadiologyAndImagingTabs;

package/src/components/registration/card/HIE-card/hie-card.component.tsx

@@ -7,13 +7,21 @@ import styles from '../card.scss';
 import DependentsComponent from '../../dependants/dependants.component';
 import { LocalResponse, type HIEBundleResponse, type EligibilityResponse } from '../../type';
 import { hasDependents } from '../../helper';
-import { launchWorkspace, PatientPhoto, showModal, navigate, closeWorkspace } from '@openmrs/esm-framework';
+import {
+  launchWorkspace2,
+  launchWorkspaceGroup2,
+  PatientPhoto,
+  showModal,
+  navigate,
+  type Visit,
+} from '@openmrs/esm-framework';
 import { EnhancedPatientBannerPatientInfo } from '../../patient-banner/patient-banner.component';
 import { findExistingLocalPatient, registerOrLaunchHIEPatient } from '../../search-bar/search-bar.resource';
 import { launchOtpVerificationModal } from '../../../../shared/otp-verification';
 import { otpManager, useOtpSource, cleanupAllOTPs } from './hie-card.resource';
 import { useMultipleActiveVisits } from '../../dependants/dependants.resource';
 import { sanitizePhoneNumber } from '../../../../shared/utils';
+import { VisitFormProps } from '../../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 interface HIEDisplayCardProps {
   bundle: HIEBundleResponse;
@@ -140,6 +148,25 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
     return '254700000000';
   };
 
+  const launchCheckInWorkspace = async (patient: any, patientUuid: string) => {
+    await launchWorkspaceGroup2('ewf-patient-chart', {
+      patient,
+      patientUuid,
+      visitContext: null as unknown as Visit,
+      mutateVisitContext: () => {},
+    });
+
+    launchWorkspace2<VisitFormProps, {}, {}>(
+      'custom-start-visit-workspace-form',
+      {
+        openedFrom: 'registration-check-in',
+        showPatientHeader: false,
+      },
+      {},
+      null,
+    );
+  };
+
   const handleOTPRequest = (patientUuid: string) => {
     setOtpRequestedFor((prev) => new Set(prev).add(patientUuid));
   };
@@ -170,9 +197,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
           if (!otpSource) {
             throw new Error('OTP source not configured. Please contact your administrator.');
           }
-
           otpManager.setOtpSource(otpSource);
-
           await otpManager.requestOTP(sanitizedPhone, patientName, otpExpiryMinutes, searchedNationalId, patientUuid);
         } catch (error) {
           throw error;
@@ -184,9 +209,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
           if (!otpSource) {
             throw new Error('OTP source not configured. Please contact your administrator.');
           }
-
           otpManager.setOtpSource(otpSource);
-
           const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, patientUuid);
           if (!isValid) {
             throw new Error('OTP verification failed');
@@ -312,21 +335,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                         <Button
                           kind="secondary"
                           size="sm"
-                          onClick={() => {
-                            const localPatientName =
-                              localPatient?.person?.personName?.display ||
-                              `${localPatient?.person?.personName?.givenName || ''} ${
-                                localPatient?.person?.personName?.middleName || ''
-                              } ${localPatient?.person?.personName?.familyName || ''}`.trim() ||
-                              patientName;
-
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: localPatient.uuid,
-                              workspaceTitle: t('startVisitWorkspaceTitle', 'Start Visit for {{patientName}}', {
-                                patientName: localPatientName,
-                              }),
-                            });
-                          }}>
+                          onClick={() => launchCheckInWorkspace(localPatient, localPatient.uuid)}>
                           {t('checkIn', 'Check In')}
                         </Button>
                       )}
@@ -345,27 +354,8 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                           kind="secondary"
                           size="sm"
                           onClick={async () => {
-                            const localPatient = await registerOrLaunchHIEPatient(patient, t);
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: localPatient.uuid,
-                              workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
-                              closeWorkspace: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  onWorkspaceClose: () => {
-                                    navigate({ to: `\${openmrsSpaBase}/patient/${localPatient.uuid}/chart` });
-                                  },
-                                  ignoreChanges: true,
-                                });
-                              },
-                              closeWorkspaceWithSavedChanges: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  onWorkspaceClose: () => {
-                                    navigate({ to: `\${openmrsSpaBase}/patient/${localPatient.uuid}/chart` });
-                                  },
-                                  ignoreChanges: true,
-                                });
-                              },
-                            });
+                            const registeredPatient = await registerOrLaunchHIEPatient(patient, t);
+                            await launchCheckInWorkspace(registeredPatient, registeredPatient.uuid);
                           }}>
                           {t('checkIn', 'Check In')}
                         </Button>
@@ -376,9 +366,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                           iconDescription={showDependents ? 'Hide dependents' : 'Show dependents'}
                           kind="tertiary"
                           size="sm"
-                          onClick={() => {
-                            toggleDependentsVisibility(patientKey);
-                          }}
+                          onClick={() => toggleDependentsVisibility(patientKey)}
                           renderIcon={showDependents ? ChevronUp : ChevronDown}>
                           {showDependents
                             ? t('hideDependents', 'Hide dependents')

package/src/components/registration/card/Local-card/local-card.component.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import styles from '../card.scss';
 import { LocalResponse, type HIEBundleResponse, type EligibilityResponse } from '../../type';
-import { launchWorkspace, PatientPhoto, showModal, closeWorkspace, navigate } from '@openmrs/esm-framework';
+import { launchWorkspace2, launchWorkspaceGroup2, PatientPhoto, showModal, type Visit } from '@openmrs/esm-framework';
 import { EnhancedPatientBannerPatientInfo } from '../../patient-banner/patient-banner.component';
 import { convertLocalPatientToFHIR, getNationalIdFromPatient, hasDependents } from '../../helper';
 import { launchOtpVerificationModal } from '../../../../shared/otp-verification';
@@ -13,6 +13,7 @@ import DependentsComponent from '../../dependants/dependants.component';
 import { useMultipleActiveVisits } from '../../dependants/dependants.resource';
 import { otpManager, useOtpSource, cleanupAllOTPs } from '../HIE-card/hie-card.resource';
 import { sanitizePhoneNumber } from '../../../../shared/utils';
+import { VisitFormProps } from '../../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 interface LocalPatientCardProps {
   localSearchResults: LocalResponse;
@@ -46,7 +47,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
     }
   }, [otpSource]);
 
-  // Clean up OTPs when component unmounts
   useEffect(() => {
     return () => {
       cleanupAllOTPs();
@@ -114,6 +114,25 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
     return '254700000000';
   }, []);
 
+  const launchCheckInWorkspace = async (patient: any, patientUuid: string) => {
+    const groupProps = {
+      patient,
+      patientUuid,
+      visitContext: null as unknown as Visit,
+      mutateVisitContext: () => {},
+    };
+
+    launchWorkspace2<VisitFormProps, {}, {}>(
+      'custom-start-visit-workspace-form',
+      {
+        openedFrom: 'registration-check-in',
+        showPatientHeader: false,
+      },
+      {},
+      groupProps,
+    );
+  };
+
   const handleOTPRequest = useCallback((patientUuid: string) => {
     setOtpRequestedFor((prev) => new Set(prev).add(patientUuid));
   }, []);
@@ -141,9 +160,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             await otpManager.requestOTP(sanitizedPhone, patientName, otpExpiryMinutes, searchedNationalId, patientUuid);
           } catch (error) {
             throw error;
@@ -155,9 +172,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, patientUuid);
             if (!isValid) {
               throw new Error('OTP verification failed');
@@ -207,7 +222,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
         const hasActiveVisit = !!activeVisit;
 
         const hiePatientData: any = findHIEPatientData(localPatient);
-
         const patientHasDependents: boolean = hiePatientData ? hasDependents(hiePatientData) : false;
         const showDependents: boolean = showDependentsForPatient.has(patientUuid);
 
@@ -230,7 +244,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
                 <div className={styles.patientAvatar} role="img">
                   <PatientPhoto patientUuid={patientUuid} patientName={patientName} />
                 </div>
-
                 <EnhancedPatientBannerPatientInfo
                   patient={fhirPatient}
                   renderedFrom="local-search"
@@ -291,22 +304,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
                         <Button
                           kind="primary"
                           size="sm"
-                          onClick={() => {
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: patientUuid,
-                              workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
-                              closeWorkspace: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  ignoreChanges: true,
-                                });
-                              },
-                              closeWorkspaceWithSavedChanges: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  ignoreChanges: true,
-                                });
-                              },
-                            });
-                          }}>
+                          onClick={() => launchCheckInWorkspace(localPatient, patientUuid)}>
                           {t('checkIn', 'Check In')}
                         </Button>
                       )}

package/src/components/registration/checkin-form-extra/checkin-form-extra.extension.tsx

@@ -13,6 +13,7 @@ export interface CheckinFormExtraExtensionProps {
     isDHAWorkflow: boolean;
   };
   patientUuid: string;
+  visitStatus: string;
 }
 
 /**
@@ -20,9 +21,14 @@ export interface CheckinFormExtraExtensionProps {
  * It is used slotted into the patient-chart's start visit form
  */
 const CheckinFormExtraExtension: React.FC<CheckinFormExtraExtensionProps> = (props) => {
-  const { setVisitFormCallbacks, visitFormOpenedFrom, patientChartConfig } = props;
+  const { setVisitFormCallbacks, visitFormOpenedFrom, patientChartConfig, visitStatus } = props;
   if (patientChartConfig.isDHAWorkflow || visitFormOpenedFrom == 'service-queues-add-patient') {
-    return <QueueFields setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })} />;
+    return (
+      <QueueFields
+        setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })}
+        visitStatus={visitStatus}
+      />
+    );
   } else {
     return <></>;
   }

package/src/components/registration/checkin-form-extra/queue-fields.component.tsx

@@ -1,12 +1,4 @@
-import {
-  InlineNotification,
-  RadioButton,
-  RadioButtonGroup,
-  RadioButtonSkeleton,
-  Select,
-  SelectItem,
-  SelectSkeleton,
-} from '@carbon/react';
+import { InlineNotification, RadioButton, RadioButtonGroup, Select, SelectItem, SelectSkeleton } from '@carbon/react';
 import { ResponsiveWrapper, showSnackbar, useConfig, useSession, type Visit } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,21 +8,23 @@ import { ExpressWorkflowConfig } from '../../../config-schema';
 
 export interface QueueFieldsProps {
   setOnSubmit(onSubmit: (visit: Visit) => Promise<any>);
+  visitStatus: string;
 }
 
-const PATIENT_CATEGORIES = [
-  { id: 'triage', name: 'Triage' },
-  { id: 'walk-in', name: 'Walk-in' },
-];
-
 /**
  * This component contains form fields for starting a patient's queue entry.
  */
-const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
+const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit, visitStatus }) => {
   const { t } = useTranslation();
+  const patientCategory = useMemo(
+    () => [
+      { id: 'triage', name: t('triage', 'Triage') },
+      { id: 'walk-in', name: t('walkIn', 'Walk-in') },
+    ],
+    [t],
+  );
   const { queueRooms, isLoading: isLoadingQueueRooms } = useQueueRooms();
   const { sessionLocation } = useSession();
-
   const {
     visitQueueNumberAttributeUuid,
     triageServiceConceptUuid,
@@ -84,7 +78,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
 
   const onSubmit = useCallback(
     (visit: Visit) => {
-      if (selectedQueueRoom) {
+      if (selectedQueueRoom && visitStatus !== 'past') {
         const selectedRoom = filteredQueueRooms.find((room) => room.uuid === selectedQueueRoom);
         const queueUuid = selectedRoom?.queue?.uuid;
 
@@ -140,6 +134,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
       sessionLocation.uuid,
       filteredQueueRooms,
       t,
+      visitStatus,
     ],
   );
 
@@ -157,6 +152,10 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
     }
   }, [filteredQueueRooms, selectedQueueRoom]);
 
+  if (visitStatus === 'past') {
+    return null;
+  }
+
   return (
     <div>
       <section className={styles.section}>
@@ -169,7 +168,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
             orientation="vertical"
             valueSelected={selectedCategory}
             onChange={(value) => setSelectedCategory(String(value))}>
-            {PATIENT_CATEGORIES.map((category) => (
+            {patientCategory.map((category) => (
               <RadioButton
                 key={category.id}
                 className={styles.radioButtonOption}
@@ -218,4 +217,4 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
   );
 };
 
-export default QueueFields;
+export default React.memo(QueueFields);