@openmrs/esm-patient-tests-app 11.3.1-patch.9064 → 11.3.1-patch.9310

package/src/test-orders/add-test-order/test-order-form.component.tsx

@@ -19,30 +19,36 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
 import {
-  type DefaultPatientWorkspaceProps,
   type OrderUrgency,
   priorityOptions,
   useOrderBasket,
   useOrderType,
+  type TestOrderBasketItem,
+  postOrder,
+  useMutatePatientOrders,
+  showOrderSuccessToast,
 } from '@openmrs/esm-patient-common-lib';
 import {
   ExtensionSlot,
-  launchWorkspace,
   OpenmrsDatePicker,
+  showSnackbar,
   useConfig,
   useLayoutType,
   useSession,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { prepTestOrderPostData, useOrderReasons } from '../api';
 import { ordersEqual } from './test-order';
 import { type ConfigObject } from '../../config-schema';
-import { type TestOrderBasketItem } from '../../types';
 import styles from './test-order-form.scss';
 
-export interface LabOrderFormProps extends DefaultPatientWorkspaceProps {
+export interface LabOrderFormProps {
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
   initialOrder: TestOrderBasketItem;
   orderTypeUuid: string;
   orderableConceptSets: Array<string>;
+  setHasUnsavedChanges: (hasUnsavedChanges: boolean) => void;
+  patient: fhir.Patient;
 }
 
 // Designs:
@@ -51,20 +57,22 @@ export interface LabOrderFormProps extends DefaultPatientWorkspaceProps {
 export function LabOrderForm({
   initialOrder,
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
   orderTypeUuid,
-  orderableConceptSets,
+  setHasUnsavedChanges,
+  patient,
 }: LabOrderFormProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
-  const isEditing = useMemo(() => initialOrder && initialOrder.action === 'REVISE', [initialOrder]);
-  const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(orderTypeUuid, prepTestOrderPostData);
+  const { orders, setOrders, clearOrders } = useOrderBasket<TestOrderBasketItem>(
+    patient,
+    orderTypeUuid,
+    prepTestOrderPostData,
+  );
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const config = useConfig<ConfigObject>();
-  const { orderType, isLoadingOrderType } = useOrderType(orderTypeUuid);
-
+  const { orderType } = useOrderType(orderTypeUuid);
+  const { mutate: mutateOrders } = useMutatePatientOrders(patient.id);
   const orderReasonRequired = useMemo(
     () =>
       (config.labTestsWithOrderReasons?.find((c) => c.labTestUuid === initialOrder?.testType?.conceptUuid) || {})
@@ -136,7 +144,7 @@ export function LabOrderForm({
     return itemDisplay?.includes(inputValue);
   }, []);
 
-  const handleFormSubmission = useCallback(
+  const saveLabOrderToBasket = useCallback(
     (data: TestOrderBasketItem) => {
       const finalizedOrder: TestOrderBasketItem = {
         ...initialOrder,
@@ -159,22 +167,47 @@ export function LabOrderForm({
 
       setOrders(newOrders);
 
-      closeWorkspaceWithSavedChanges({
-        onWorkspaceClose: () => launchWorkspace('order-basket'),
-        closeWorkspaceGroup: false,
-      });
+      closeWorkspace({ discardUnsavedChanges: true });
     },
-    [orders, setOrders, session?.currentProvider?.uuid, closeWorkspaceWithSavedChanges, initialOrder],
+    [orders, setOrders, session?.currentProvider?.uuid, closeWorkspace, initialOrder],
+  );
+
+  const submitLabOrderToServer = useCallback(
+    (data: TestOrderBasketItem) => {
+      const finalizedOrder: TestOrderBasketItem = {
+        ...initialOrder,
+        ...data,
+      };
+      finalizedOrder.orderer = session.currentProvider.uuid;
+      postOrder(prepTestOrderPostData(finalizedOrder, patient.id, finalizedOrder?.encounterUuid))
+        .then(() => {
+          clearOrders();
+          mutateOrders();
+          showOrderSuccessToast(t, [finalizedOrder]);
+          closeWorkspace({ discardUnsavedChanges: true });
+        })
+        .catch((error) => {
+          showSnackbar({
+            isLowContrast: false,
+            kind: 'error',
+            title: t('errorSavingLabOrder', 'Error saving lab order'),
+            subtitle: error.message,
+          });
+        });
+    },
+    [clearOrders, closeWorkspace, initialOrder, mutateOrders, patient.id, session.currentProvider.uuid, t],
   );
 
   const cancelOrder = useCallback(() => {
     setOrders(orders.filter((order) => order.testType.conceptUuid !== defaultValues.testType.conceptUuid));
-    closeWorkspace({
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-      closeWorkspaceGroup: false,
-    });
+    closeWorkspace();
   }, [closeWorkspace, orders, setOrders, defaultValues]);
 
+  const closeModifyOrderWorkspace = useCallback(() => {
+    clearOrders();
+    closeWorkspace();
+  }, [clearOrders, closeWorkspace]);
+
   const onError = (errors: FieldErrors<TestOrderBasketItem>) => {
     if (errors) {
       setShowErrorNotification(true);
@@ -195,13 +228,17 @@ export function LabOrderForm({
   );
 
   useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
+    setHasUnsavedChanges(isDirty);
+  }, [isDirty, setHasUnsavedChanges]);
 
   const responsiveSize = isTablet ? 'lg' : 'sm';
 
   return (
-    <Form className={styles.orderForm} onSubmit={handleSubmit(handleFormSubmission, onError)} id="drugOrderForm">
+    <Form
+      className={styles.orderForm}
+      onSubmit={handleSubmit(initialOrder?.action == 'REVISE' ? submitLabOrderToServer : saveLabOrderToBasket, onError)}
+      id="drugOrderForm"
+    >
       <div className={styles.form}>
         <ExtensionSlot name="top-of-lab-order-form-slot" state={{ order: initialOrder }} />
         <Grid className={styles.gridRow}>
@@ -351,7 +388,12 @@ export function LabOrderForm({
         <ButtonSet
           className={classNames(styles.buttonSet, isTablet ? styles.tabletButtonSet : styles.desktopButtonSet)}
         >
-          <Button className={styles.button} kind="secondary" onClick={cancelOrder} size="xl">
+          <Button
+            className={styles.button}
+            kind="secondary"
+            onClick={initialOrder?.action == 'REVISE' ? closeModifyOrderWorkspace : cancelOrder}
+            size="xl"
+          >
             {t('discard', 'Discard')}
           </Button>
           <Button className={styles.button} kind="primary" size="xl" type="submit">

package/src/test-orders/add-test-order/test-order.ts

@@ -1,16 +1,16 @@
-import { priorityOptions, type OrderUrgency } from '@openmrs/esm-patient-common-lib';
+import { priorityOptions, type OrderUrgency, type TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
 import { type TestType } from './useTestTypes';
-import type { TestOrderBasketItem } from '../../types';
 
 type LabOrderRequest = Pick<TestOrderBasketItem, 'action' | 'testType'>;
 
-export function createEmptyLabOrder(testType: TestType, orderer: string): TestOrderBasketItem {
+export function createEmptyLabOrder(testType: TestType, orderer: string, visit): TestOrderBasketItem {
   return {
     action: 'NEW',
     urgency: priorityOptions[0].value as OrderUrgency,
     display: testType.label,
     testType,
     orderer,
+    visit,
   };
 }
 

package/src/test-orders/add-test-order/test-type-search.component.tsx

@@ -5,16 +5,15 @@ import { Button, ButtonSkeleton, Search, SkeletonText, Tile } from '@carbon/reac
 import { ShoppingCartArrowUp } from '@carbon/react/icons';
 import {
   ArrowRightIcon,
-  closeWorkspace,
-  launchWorkspace,
   ResponsiveWrapper,
   ShoppingCartArrowDownIcon,
   useDebounce,
   useLayoutType,
   useSession,
+  type Visit,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
-import { useOrderBasket } from '@openmrs/esm-patient-common-lib';
-import type { TestOrderBasketItem } from '../../types';
+import { useOrderBasket, type TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
 import { prepTestOrderPostData } from '../api';
 import { createEmptyLabOrder } from './test-order';
 import { useTestTypes, type TestType } from './useTestTypes';
@@ -24,21 +23,34 @@ export interface TestTypeSearchProps {
   openLabForm: (searchResult: TestOrderBasketItem) => void;
   orderTypeUuid: string;
   orderableConceptSets: Array<string>;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+  patient: fhir.Patient;
+  visit: Visit;
 }
 
 interface TestTypeSearchResultsProps extends TestTypeSearchProps {
-  cancelOrder: () => void;
   searchTerm: string;
   focusAndClearSearchInput: () => void;
+  patient: fhir.Patient;
 }
 
 interface TestTypeSearchResultItemProps {
   orderTypeUuid: string;
   testType: TestType;
   openOrderForm: (searchResult: TestOrderBasketItem) => void;
+  patient: fhir.Patient;
+  visit: Visit;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
 }
 
-export function TestTypeSearch({ openLabForm, orderTypeUuid, orderableConceptSets }: TestTypeSearchProps) {
+export function TestTypeSearch({
+  patient,
+  visit,
+  openLabForm,
+  orderTypeUuid,
+  orderableConceptSets,
+  closeWorkspace,
+}: TestTypeSearchProps) {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
@@ -49,13 +61,6 @@ export function TestTypeSearch({ openLabForm, orderTypeUuid, orderableConceptSet
     searchInputRef.current?.focus();
   }, [setSearchTerm]);
 
-  const cancelOrder = useCallback(() => {
-    closeWorkspace('add-lab-order', {
-      ignoreChanges: true,
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-    });
-  }, []);
-
   const handleSearchTermChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setSearchTerm(event.target.value ?? '');
@@ -77,24 +82,28 @@ export function TestTypeSearch({ openLabForm, orderTypeUuid, orderableConceptSet
         />
       </ResponsiveWrapper>
       <TestTypeSearchResults
-        cancelOrder={cancelOrder}
+        closeWorkspace={closeWorkspace}
         orderTypeUuid={orderTypeUuid}
         orderableConceptSets={orderableConceptSets}
         focusAndClearSearchInput={focusAndClearSearchInput}
         openLabForm={openLabForm}
         searchTerm={debouncedSearchTerm}
+        patient={patient}
+        visit={visit}
       />
     </>
   );
 }
 
 function TestTypeSearchResults({
-  cancelOrder,
+  closeWorkspace,
   searchTerm,
   orderTypeUuid,
   orderableConceptSets,
   openLabForm,
   focusAndClearSearchInput,
+  patient,
+  visit,
 }: TestTypeSearchResultsProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -145,6 +154,9 @@ function TestTypeSearchResults({
                 orderTypeUuid={orderTypeUuid}
                 openOrderForm={openLabForm}
                 testType={testType}
+                closeWorkspace={closeWorkspace}
+                patient={patient}
+                visit={visit}
               />
             ))}
           </div>
@@ -152,7 +164,11 @@ function TestTypeSearchResults({
         {isTablet && (
           <div className={styles.separatorContainer}>
             <p className={styles.separator}>{t('or', 'or')}</p>
-            <Button iconDescription="Return to order basket" kind="ghost" onClick={cancelOrder}>
+            <Button
+              iconDescription="Return to order basket"
+              kind="ghost"
+              onClick={() => closeWorkspace({ discardUnsavedChanges: true })}
+            >
               {t('returnToOrderBasket', 'Return to order basket')}
             </Button>
           </div>
@@ -185,11 +201,14 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
   testType,
   openOrderForm,
   orderTypeUuid,
+  closeWorkspace,
+  patient,
+  visit,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
-  const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(orderTypeUuid, prepTestOrderPostData);
+  const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(patient, orderTypeUuid, prepTestOrderPostData);
 
   const testTypeAlreadyInBasket = useMemo(
     () => orders?.some((order) => order.testType.conceptUuid === testType.conceptUuid),
@@ -198,20 +217,17 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
 
   const createLabOrder = useCallback(
     (orderableConcept: TestType) => {
-      return createEmptyLabOrder(orderableConcept, session.currentProvider?.uuid);
+      return createEmptyLabOrder(orderableConcept, session.currentProvider?.uuid, visit);
     },
-    [session.currentProvider.uuid],
+    [session.currentProvider.uuid, visit],
   );
 
   const addToBasket = useCallback(() => {
     const labOrder = createLabOrder(testType);
     labOrder.isOrderIncomplete = true;
     setOrders([...orders, labOrder]);
-    closeWorkspace('add-lab-order', {
-      ignoreChanges: true,
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-    });
-  }, [orders, setOrders, createLabOrder, testType]);
+    closeWorkspace({ discardUnsavedChanges: true });
+  }, [orders, setOrders, createLabOrder, testType, closeWorkspace]);
 
   const removeFromBasket = useCallback(() => {
     setOrders(orders.filter((order) => order.testType.conceptUuid !== testType.conceptUuid));

package/src/test-orders/api.ts

@@ -2,7 +2,12 @@ import { useCallback, useMemo } from 'react';
 import { chunk } from 'lodash-es';
 import useSWR, { useSWRConfig } from 'swr';
 import useSWRImmutable from 'swr/immutable';
-import type { OrderPost, PatientOrderFetchResponse, TestOrderPost } from '@openmrs/esm-patient-common-lib';
+import type {
+  OrderPost,
+  PatientOrderFetchResponse,
+  TestOrderBasketItem,
+  TestOrderPost,
+} from '@openmrs/esm-patient-common-lib';
 import {
   type FetchResponse,
   openmrsFetch,
@@ -12,7 +17,6 @@ import {
   useConfig,
 } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
-import type { TestOrderBasketItem } from '../types';
 
 export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
 

package/src/test-orders/lab-order-basket-panel/lab-order-basket-item-tile.component.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { ClickableTile, IconButton, Tile } from '@carbon/react';
 import { ExtensionSlot, TrashCanIcon, useLayoutType, WarningIcon } from '@openmrs/esm-framework';
-import type { TestOrderBasketItem } from '../../types';
+import type { TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
 import styles from './lab-order-basket-item-tile.scss';
 
 export interface OrderBasketItemTileProps {

package/src/test-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx

@@ -2,27 +2,25 @@ import React, { type ComponentProps, useCallback, useEffect, useMemo, useState }
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Tile } from '@carbon/react';
+import { AddIcon, ChevronDownIcon, ChevronUpIcon, useLayoutType, useConfig, MaybeIcon } from '@openmrs/esm-framework';
 import {
-  AddIcon,
-  closeWorkspace,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  useLayoutType,
-  useConfig,
-  MaybeIcon,
-  launchWorkspace,
-} from '@openmrs/esm-framework';
-import { type OrderBasketItem, useOrderBasket, useOrderType } from '@openmrs/esm-patient-common-lib';
+  type OrderBasketExtensionProps,
+  useOrderBasket,
+  useOrderType,
+  type TestOrderBasketItem,
+} from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../../config-schema';
-import type { TestOrderBasketItem } from '../../types';
 import { LabOrderBasketItemTile } from './lab-order-basket-item-tile.component';
 import { prepTestOrderPostData } from '../api';
 import styles from './lab-order-basket-panel.scss';
 
 /**
+ * The extension is slotted into order-basket-slot in the main Order Basket workspace by default.
+ * It renders the "Add +" button for lab orders, and lists pending lab orders in the order basket.
+ *
  * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/648c44d9d4052c613e7f23da
  */
-export default function LabOrderBasketPanelExtension() {
+export function LabOrderBasketPanelExtension({ patient, launchLabOrderForm }: OrderBasketExtensionProps) {
   const { orders, additionalTestOrderTypes } = useConfig<ConfigObject>();
   const { t } = useTranslation();
   const allOrderTypes: ConfigObject['additionalTestOrderTypes'] = [
@@ -38,7 +36,12 @@ export default function LabOrderBasketPanelExtension() {
   return (
     <>
       {allOrderTypes.map((orderTypeConfig) => (
-        <LabOrderBasketPanel key={orderTypeConfig.orderTypeUuid} {...orderTypeConfig} />
+        <LabOrderBasketPanel
+          key={orderTypeConfig.orderTypeUuid}
+          patient={patient}
+          {...orderTypeConfig}
+          launchLabOrderForm={launchLabOrderForm}
+        />
       ))}
     </>
   );
@@ -46,14 +49,17 @@ export default function LabOrderBasketPanelExtension() {
 
 type OrderTypeConfig = ConfigObject['additionalTestOrderTypes'][0];
 
-interface LabOrderBasketPanelProps extends OrderTypeConfig {}
+interface LabOrderBasketPanelProps extends OrderTypeConfig {
+  patient: fhir.Patient;
+  launchLabOrderForm(orderTypeUuid: string, order?: TestOrderBasketItem): void;
+}
 
-function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanelProps) {
+function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrderForm }: LabOrderBasketPanelProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { orderType, isLoadingOrderType } = useOrderType(orderTypeUuid);
 
-  const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(orderTypeUuid, prepTestOrderPostData);
+  const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(patient, orderTypeUuid, prepTestOrderPostData);
   const [isExpanded, setIsExpanded] = useState(orders.length > 0);
   const {
     incompleteOrderBasketItems,
@@ -91,32 +97,6 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
     };
   }, [orders]);
 
-  const openNewLabForm = useCallback(() => {
-    closeWorkspace('order-basket', {
-      ignoreChanges: true,
-      onWorkspaceClose: () =>
-        launchWorkspace('add-lab-order', {
-          orderTypeUuid: orderTypeUuid,
-        }),
-      closeWorkspaceGroup: false,
-    });
-  }, [orderTypeUuid]);
-
-  const openEditLabForm = useCallback(
-    (order: OrderBasketItem) => {
-      closeWorkspace('order-basket', {
-        ignoreChanges: true,
-        onWorkspaceClose: () =>
-          launchWorkspace('add-lab-order', {
-            order,
-            orderTypeUuid: orderTypeUuid,
-          }),
-        closeWorkspaceGroup: false,
-      });
-    },
-    [orderTypeUuid],
-  );
-
   const removeLabOrder = useCallback(
     (order: TestOrderBasketItem) => {
       const newOrders = [...orders];
@@ -150,7 +130,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
             className={styles.addButton}
             iconDescription="Add lab order"
             kind="ghost"
-            onClick={openNewLabForm}
+            onClick={() => launchLabOrderForm(orderTypeUuid)}
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
             size={isTablet ? 'md' : 'sm'}
           >
@@ -180,7 +160,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
                   {incompleteOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => openEditLabForm(order)}
+                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -192,7 +172,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
                   {newOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => openEditLabForm(order)}
+                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -205,7 +185,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
                   {renewedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => openEditLabForm(order)}
+                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -218,7 +198,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
                   {revisedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => openEditLabForm(order)}
+                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -231,7 +211,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
                   {discontinuedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => openEditLabForm(order)}
+                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -245,3 +225,5 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
     </Tile>
   );
 }
+
+export default LabOrderBasketPanelExtension;

package/src/test-orders/lab-order-basket-panel/lab-order-basket-panel.test.tsx

@@ -3,9 +3,11 @@ import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 import { useOrderType } from '@openmrs/esm-patient-common-lib';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import type { OrderBasketExtensionProps, TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
 import { type ConfigObject, configSchema } from '../../config-schema';
-import type { TestOrderBasketItem } from '../../types';
 import LabOrderBasketPanel from './lab-order-basket-panel.extension';
+import { mockPatient } from 'tools';
+import { mockVisit } from '__mocks__';
 
 const mockUseOrderBasket = jest.fn();
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
@@ -36,10 +38,17 @@ mockUseOrderType.mockReturnValue({
   errorFetchingOrderType: undefined,
 });
 
+const testProps: OrderBasketExtensionProps = {
+  patient: mockPatient,
+  launchDrugOrderForm: jest.fn(),
+  launchLabOrderForm: jest.fn(),
+  launchGeneralOrderForm: jest.fn(),
+};
+
 describe('LabOrderBasketPanel', () => {
   test('renders an empty state when no items are selected in the order basket', () => {
     mockUseOrderBasket.mockReturnValue({ orders: [] });
-    render(<LabOrderBasketPanel />);
+    render(<LabOrderBasketPanel {...testProps} />);
     expect(screen.getByRole('heading', { name: /Lab orders \(0\)/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Add/i })).toBeInTheDocument();
   });
@@ -56,6 +65,7 @@ describe('LabOrderBasketPanel', () => {
         display: 'HIV VIRAL LOAD',
         urgency: 'ROUTINE',
         uuid: 'order-uuid-1',
+        visit: mockVisit,
       },
       {
         action: 'NEW',
@@ -66,6 +76,7 @@ describe('LabOrderBasketPanel', () => {
         display: 'CD4 COUNT',
         urgency: 'STAT',
         uuid: 'order-uuid-2',
+        visit: mockVisit,
       },
     ];
     let orders = [...labs];
@@ -76,7 +87,7 @@ describe('LabOrderBasketPanel', () => {
       orders: orders,
       setOrders: mockSetOrders,
     }));
-    const { rerender } = render(<LabOrderBasketPanel />);
+    const { rerender } = render(<LabOrderBasketPanel {...testProps} />);
     expect(screen.getByText(/Lab orders \(2\)/i)).toBeInTheDocument();
     expect(screen.getByText(/HIV VIRAL LOAD/i)).toBeInTheDocument();
     expect(screen.getByText(/CD4 COUNT/i)).toBeInTheDocument();
@@ -85,7 +96,7 @@ describe('LabOrderBasketPanel', () => {
     expect(removeHivButton).toBeVisible();
 
     await user.click(removeHivButton);
-    rerender(<LabOrderBasketPanel />);
+    rerender(<LabOrderBasketPanel {...testProps} />);
     await expect(screen.getByText(/Lab orders \(1\)/i)).toBeInTheDocument();
     expect(screen.getByText(/CD4 COUNT/i)).toBeInTheDocument();
     expect(screen.queryByText(/HIV VIRAL LOAD/i)).not.toBeInTheDocument();

package/src/test-results/filter/filter-types.ts

@@ -14,6 +14,7 @@ export interface TreeNode {
   flatName: string;
   subSets?: Array<TreeNode>;
   hasData?: boolean;
+  hiAbsolute?: number;
   hiCritical?: number;
   hiNormal?: number;
   lowAbsolute?: number;
@@ -75,6 +76,15 @@ export interface ObservationData {
   obsDatetime: string;
   value: string;
   interpretation: OBSERVATION_INTERPRETATION;
+  // Reference range fields from observation-level (criteria-based)
+  // Note: Units are only at the concept/node level, not observation-level
+  hiAbsolute?: number;
+  hiCritical?: number;
+  hiNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
+  lowNormal?: number;
+  range?: string; // Formatted range string for display
 }
 
 export interface ParsedTimeType {
@@ -124,6 +134,15 @@ export interface RowData extends TreeNode {
         obsDatetime: string;
         value: string;
         interpretation: OBSERVATION_INTERPRETATION;
+        // Reference range fields from observation-level (criteria-based)
+        // Note: Units are only at the concept/node level, not observation-level
+        hiAbsolute?: number;
+        hiCritical?: number;
+        hiNormal?: number;
+        lowAbsolute?: number;
+        lowCritical?: number;
+        lowNormal?: number;
+        range?: string; // Formatted range string for display
       }
     | undefined
   >;