@ampath/esm-laboratory-app 1.3.0-next.2

package/src/lab-tabs/laboratory-tabs.scss

@@ -0,0 +1,38 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 layout.$spacing-05;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.tab {
+  min-width: 8.875rem;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+}

package/src/lab-tabs/modals/approval-lab-results-modal.component.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { ExtensionSlot, showNotification, showSnackbar, useAbortController, type Order } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { setFulfillerStatus, useInvalidateLabOrders } from '../../laboratory.resource';
+
+interface ApproveLabResultsModal {
+  closeModal: () => void;
+  order: Order;
+}
+
+const ApproveLabResultsModal: React.FC<ApproveLabResultsModal> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const abortController = useAbortController();
+  const invalidateLabOrders = useInvalidateLabOrders();
+
+  const handleApproval = () => {
+    setIsSubmitting(true);
+    setFulfillerStatus(order.uuid, 'COMPLETED', abortController).then(
+      () => {
+        invalidateLabOrders();
+        setIsSubmitting(false);
+        closeModal();
+        showSnackbar({
+          isLowContrast: true,
+          title: t('resultsApproved', 'Results Approved'),
+          kind: 'success',
+          subtitle: t('labResultsApprovedSuccessfully', 'Lab results have been successfully approved and finalized'),
+        });
+      },
+      (error) => {
+        setIsSubmitting(false);
+        showNotification({
+          title: t('errorApprovingResults', 'Error approving results'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  };
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('approveLabResults', 'Approve Lab Results')} />
+      <ModalBody>
+        <p>
+          {t(
+            'approveResultsConfirmationText',
+            'You are about to approve and finalize these lab results. Once approved, the results will be marked as complete and made available to clinicians. Are you sure you want to proceed?',
+          )}
+        </p>
+        <>
+          <ExtensionSlot state={{ order: order }} name="completed-lab-order-results-slot" />
+        </>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" onClick={handleApproval} disabled={isSubmitting}>
+          {t('approveResults', 'Approve Results')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ApproveLabResultsModal;

package/src/lab-tabs/modals/pickup-lab-request-modal.component.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showNotification, showSnackbar, useAbortController, type Order } from '@openmrs/esm-framework';
+import { setFulfillerStatus, useInvalidateLabOrders } from '../../laboratory.resource';
+
+interface PickupLabRequestModal {
+  closeModal: () => void;
+  order: Order;
+}
+
+const PickupLabRequestModal: React.FC<PickupLabRequestModal> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const abortController = useAbortController();
+  const invalidateLabOrders = useInvalidateLabOrders();
+
+  const handlePickup = () => {
+    setIsSubmitting(true);
+    setFulfillerStatus(order.uuid, 'IN_PROGRESS', abortController).then(
+      () => {
+        invalidateLabOrders();
+        setIsSubmitting(false);
+        closeModal();
+        showSnackbar({
+          isLowContrast: true,
+          title: t('pickedAnOrder', 'Picked an order'),
+          kind: 'success',
+          subtitle: t('orderPickedSuccessfully', 'You have successfully picked an order'),
+        });
+      },
+      (error) => {
+        setIsSubmitting(false);
+        showNotification({
+          title: t('errorPickingOrder', 'Error picking order'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  };
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('pickRequest', 'Pick lab request')} />
+      <ModalBody>
+        <p>
+          {t(
+            'pickRequestConfirmationText',
+            'Continuing will update the request status to "In Progress" and advance it to the next stage. Are you sure you want to proceed?',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button type="submit" onClick={handlePickup} disabled={isSubmitting}>
+          {t('pickupLabRequest', 'Pick up lab request')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default PickupLabRequestModal;

package/src/lab-tabs/modals/pickup-lab-request-modal.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar, showNotification, type Order } from '@openmrs/esm-framework';
+import { setFulfillerStatus, useInvalidateLabOrders } from '../../laboratory.resource';
+import PickupLabRequestModal from './pickup-lab-request-modal.component';
+
+jest.mock('../../laboratory.resource', () => ({
+  setFulfillerStatus: jest.fn(),
+  useInvalidateLabOrders: jest.fn(),
+}));
+
+const mockSetFulfillerStatus = jest.mocked(setFulfillerStatus);
+const mockUseInvalidateLabOrders = jest.mocked(useInvalidateLabOrders);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockShowNotification = jest.mocked(showNotification);
+
+const mockOrder: Partial<Order> = {
+  uuid: 'order-uuid-1',
+  orderNumber: 'ORD-001',
+  patient: {
+    uuid: 'patient-uuid-1',
+    display: 'Test Patient',
+  } as Order['patient'],
+};
+
+describe('PickupLabRequestModal', () => {
+  const mockCloseModal = jest.fn();
+  const mockInvalidateLabOrders = jest.fn();
+
+  beforeEach(() => {
+    mockUseInvalidateLabOrders.mockReturnValue(mockInvalidateLabOrders);
+  });
+
+  it('should render the modal with confirmation text', () => {
+    render(<PickupLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    expect(screen.getByText('Pick lab request')).toBeInTheDocument();
+    expect(screen.getByText(/Continuing will update the request status to "In Progress"/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Pick up lab request' })).toBeInTheDocument();
+  });
+
+  it('should close modal when discard button is clicked', async () => {
+    render(<PickupLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Discard' }));
+
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+
+  it('should call setFulfillerStatus and show success snackbar when picking up order succeeds', async () => {
+    mockSetFulfillerStatus.mockResolvedValue({} as any);
+
+    render(<PickupLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Pick up lab request' }));
+
+    await waitFor(() => {
+      expect(mockSetFulfillerStatus).toHaveBeenCalledWith(
+        'order-uuid-1',
+        'IN_PROGRESS',
+        expect.objectContaining({ signal: expect.any(Object) }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockInvalidateLabOrders).toHaveBeenCalled();
+      expect(mockCloseModal).toHaveBeenCalled();
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        isLowContrast: true,
+        title: 'Picked an order',
+        kind: 'success',
+        subtitle: 'You have successfully picked an order',
+      });
+    });
+  });
+
+  it('should show error notification when picking up order fails', async () => {
+    const error = new Error('Network error');
+    mockSetFulfillerStatus.mockRejectedValue(error);
+
+    render(<PickupLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Pick up lab request' }));
+
+    await waitFor(() => {
+      expect(mockShowNotification).toHaveBeenCalledWith({
+        title: 'Error picking order',
+        kind: 'error',
+        critical: true,
+        description: 'Network error',
+      });
+    });
+
+    expect(mockCloseModal).not.toHaveBeenCalled();
+  });
+
+  it('should disable submit button while submitting', async () => {
+    let resolvePromise: (value: unknown) => void;
+    mockSetFulfillerStatus.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolvePromise = resolve;
+        }),
+    );
+
+    render(<PickupLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    const submitButton = screen.getByRole('button', { name: 'Pick up lab request' });
+    expect(submitButton).not.toBeDisabled();
+
+    await user.click(submitButton);
+
+    expect(submitButton).toBeDisabled();
+
+    resolvePromise!({});
+
+    await waitFor(() => {
+      expect(mockCloseModal).toHaveBeenCalled();
+    });
+  });
+});

package/src/lab-tabs/modals/reject-lab-request-modal.component.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, TextArea, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type Order, showNotification, showSnackbar, useAbortController } from '@openmrs/esm-framework';
+import { rejectLabOrder, useInvalidateLabOrders } from '../../laboratory.resource';
+import styles from './reject-lab-request-modal.scss';
+
+interface RejectLabRequestModalProps {
+  order: Order;
+  closeModal: () => void;
+}
+
+const RejectLabRequestModal: React.FC<RejectLabRequestModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+  const [fulfillerComment, setFulfillerComment] = useState('');
+  const abortController = useAbortController();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const invalidateLabOrders = useInvalidateLabOrders();
+
+  const handleRejectOrder = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    rejectLabOrder(order.uuid, fulfillerComment, abortController).then(
+      () => {
+        invalidateLabOrders();
+        setIsSubmitting(false);
+        closeModal();
+        showSnackbar({
+          isLowContrast: true,
+          title: t('rejectLabRequestTitle', 'Lab request rejected'),
+          kind: 'success',
+          subtitle: t(
+            'rejectLabRequestSuccessMessage',
+            'Lab request with order number "{{orderNumber}}" rejected successfully',
+            { orderNumber: order.orderNumber },
+          ),
+        });
+      },
+      (err) => {
+        setIsSubmitting(false);
+        showNotification({
+          title: t('errorRejectingRequest', 'Error rejecting lab request'),
+          kind: 'error',
+          critical: true,
+          description: err?.message,
+        });
+      },
+    );
+  };
+
+  return (
+    <Form onSubmit={handleRejectOrder}>
+      <ModalHeader
+        closeModal={closeModal}
+        title={`${t('rejectLabRequest', 'Reject lab request')} [${order.orderNumber}]`}
+      />
+      <ModalBody>
+        <div className={styles.modalBody}>
+          <Layer>
+            <p className={styles.section}>{`${t('testType', 'Test type')}: ${order.concept?.display}`}</p>
+          </Layer>
+          <br />
+          <Layer>
+            <TextArea
+              labelText={t('fulfillerComment', 'Fulfiller comment')}
+              id="commentField"
+              maxCount={500}
+              enableCounter
+              onChange={(e) => setFulfillerComment(e.target.value)}
+            />
+          </Layer>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" type="submit" disabled={isSubmitting}>
+          {t('reject', 'Reject')}
+        </Button>
+      </ModalFooter>
+    </Form>
+  );
+};
+
+export default RejectLabRequestModal;

package/src/lab-tabs/modals/reject-lab-request-modal.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+
+section {
+  margin: layout.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: layout.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: layout.$spacing-05;
+}

package/src/lab-tabs/modals/reject-lab-request-modal.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar, showNotification, type Order } from '@openmrs/esm-framework';
+import { rejectLabOrder, useInvalidateLabOrders } from '../../laboratory.resource';
+import RejectLabRequestModal from './reject-lab-request-modal.component';
+
+jest.mock('../../laboratory.resource', () => ({
+  rejectLabOrder: jest.fn(),
+  useInvalidateLabOrders: jest.fn(),
+}));
+
+const mockRejectLabOrder = jest.mocked(rejectLabOrder);
+const mockUseInvalidateLabOrders = jest.mocked(useInvalidateLabOrders);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockShowNotification = jest.mocked(showNotification);
+
+const mockOrder: Partial<Order> = {
+  uuid: 'order-uuid-1',
+  orderNumber: 'ORD-001',
+  patient: {
+    uuid: 'patient-uuid-1',
+    display: 'Test Patient',
+  } as Order['patient'],
+  concept: {
+    uuid: 'concept-uuid-1',
+    display: 'Blood Test',
+  },
+};
+
+describe('RejectLabRequestModal', () => {
+  const mockCloseModal = jest.fn();
+  const mockInvalidateLabOrders = jest.fn();
+
+  beforeEach(() => {
+    mockUseInvalidateLabOrders.mockReturnValue(mockInvalidateLabOrders);
+  });
+
+  it('should render the modal with order details and comment field', () => {
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    expect(screen.getByText(/Reject lab request.*\[ORD-001\]/)).toBeInTheDocument();
+    expect(screen.getByText('Test type: Blood Test')).toBeInTheDocument();
+    expect(screen.getByLabelText('Fulfiller comment')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Reject/ })).toBeInTheDocument();
+  });
+
+  it('should close modal when cancel button is clicked', async () => {
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+
+  it('should call rejectLabOrder with comment and show success snackbar when rejection succeeds', async () => {
+    mockRejectLabOrder.mockResolvedValue({} as any);
+
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    const commentInput = screen.getByLabelText('Fulfiller comment');
+    await user.type(commentInput, 'Sample contaminated');
+    await user.click(screen.getByRole('button', { name: /Reject/ }));
+
+    await waitFor(() => {
+      expect(mockRejectLabOrder).toHaveBeenCalledWith(
+        'order-uuid-1',
+        'Sample contaminated',
+        expect.objectContaining({ signal: expect.any(Object) }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockInvalidateLabOrders).toHaveBeenCalled();
+      expect(mockCloseModal).toHaveBeenCalled();
+      expect(mockShowSnackbar).toHaveBeenCalledWith(
+        expect.objectContaining({
+          isLowContrast: true,
+          title: 'Lab request rejected',
+          kind: 'success',
+        }),
+      );
+    });
+  });
+
+  it('should show error notification when rejection fails', async () => {
+    const error = new Error('Server error');
+    mockRejectLabOrder.mockRejectedValue(error);
+
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /Reject/ }));
+
+    await waitFor(() => {
+      expect(mockShowNotification).toHaveBeenCalledWith({
+        title: 'Error rejecting lab request',
+        kind: 'error',
+        critical: true,
+        description: 'Server error',
+      });
+    });
+
+    expect(mockCloseModal).not.toHaveBeenCalled();
+  });
+
+  it('should disable submit button while submitting', async () => {
+    let resolvePromise: (value: unknown) => void;
+    mockRejectLabOrder.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolvePromise = resolve;
+        }),
+    );
+
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    const submitButton = screen.getByRole('button', { name: /Reject/ });
+    expect(submitButton).not.toBeDisabled();
+
+    await user.click(submitButton);
+
+    expect(submitButton).toBeDisabled();
+
+    resolvePromise!({});
+
+    await waitFor(() => {
+      expect(mockCloseModal).toHaveBeenCalled();
+    });
+  });
+
+  it('should allow submitting with empty comment', async () => {
+    mockRejectLabOrder.mockResolvedValue({} as any);
+
+    render(<RejectLabRequestModal order={mockOrder as Order} closeModal={mockCloseModal} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /Reject/ }));
+
+    await waitFor(() => {
+      expect(mockRejectLabOrder).toHaveBeenCalledWith(
+        'order-uuid-1',
+        '',
+        expect.objectContaining({ signal: expect.any(Object) }),
+      );
+    });
+  });
+});

package/src/lab-tiles/all-lab-requests-tile.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabOrders } from '../laboratory.resource';
+import LabSummaryTile from '../components/summary-tile/lab-summary-tile.component';
+
+const AllLabRequestsTile = () => {
+  const { t } = useTranslation();
+  const { labOrders } = useLabOrders({ newOrdersOnly: true });
+
+  return (
+    <LabSummaryTile
+      label={t('orders', 'Orders')}
+      value={labOrders?.length}
+      headerLabel={t('testsOrdered', 'Tests ordered')}
+    />
+  );
+};
+
+export default AllLabRequestsTile;

package/src/lab-tiles/completed-lab-requests-tile.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabOrders } from '../laboratory.resource';
+import LabSummaryTile from '../components/summary-tile/lab-summary-tile.component';
+
+const CompletedLabRequestsTile = () => {
+  const { t } = useTranslation();
+  const { labOrders } = useLabOrders({ status: 'COMPLETED', excludeCanceled: false });
+
+  return (
+    <LabSummaryTile
+      label={t('completed', 'Completed')}
+      value={labOrders?.length}
+      headerLabel={t('results', 'Results')}
+    />
+  );
+};
+
+export default CompletedLabRequestsTile;

package/src/lab-tiles/in-progress-lab-requests-tile.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabOrders } from '../laboratory.resource';
+import LabSummaryTile from '../components/summary-tile/lab-summary-tile.component';
+
+const InProgressLabRequestsTile = () => {
+  const { t } = useTranslation();
+  const { labOrders } = useLabOrders({ status: 'IN_PROGRESS' });
+
+  return (
+    <LabSummaryTile
+      label={t('inProgress', 'In progress')}
+      value={labOrders?.length}
+      headerLabel={t('worklist', 'Worklist')}
+    />
+  );
+};
+
+export default InProgressLabRequestsTile;

package/src/lab-tiles/laboratory-summary-tiles.component.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type AssignedExtension, useAssignedExtensions, Extension, useConfig } from '@openmrs/esm-framework';
+// ComponentContext is not part of the public API but is needed here to render extensions
+// in a custom layout (CSS grid tiles) without the wrapper div that ExtensionSlot adds.
+// eslint-disable-next-line no-restricted-imports
+import { ComponentContext } from '@openmrs/esm-framework/src/internal';
+import styles from './laboratory-summary-tiles.scss';
+import { type Config } from '../config-schema';
+
+const LaboratorySummaryTiles: React.FC = () => {
+  const { t } = useTranslation();
+  const { enableReviewingLabResultsBeforeApproval } = useConfig<Config>();
+  const labTileSlot = 'lab-tiles-slot';
+  const tilesExtensions = useAssignedExtensions(labTileSlot) as AssignedExtension[];
+
+  const filteredExtensions = tilesExtensions.filter((extension) => {
+    const meta = extension.meta ?? {};
+    if (Object.keys(meta).length === 0) {
+      return false;
+    }
+    if (extension.name === 'pending-review-list-tile-component') {
+      return enableReviewingLabResultsBeforeApproval === true;
+    }
+    return true;
+  });
+
+  return (
+    <div className={styles.cardContainer}>
+      {filteredExtensions.map((extension, index) => {
+        return (
+          <ComponentContext.Provider
+            key={extension.id}
+            value={{
+              moduleName: extension.moduleName,
+              featureName: 'laboratory',
+              extension: {
+                extensionId: extension.id,
+                extensionSlotName: labTileSlot,
+                extensionSlotModuleName: extension.moduleName,
+              },
+            }}
+          >
+            <Extension />
+          </ComponentContext.Provider>
+        );
+      })}
+    </div>
+  );
+};
+
+export default LaboratorySummaryTiles;

package/src/lab-tiles/laboratory-summary-tiles.scss

@@ -0,0 +1,16 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  flex-wrap: wrap;
+  padding: layout.$spacing-03;
+  gap: 0 layout.$spacing-01;
+}
+
+.cardContainer > div {
+  flex: 1 1 300px;
+  box-sizing: border-box;
+}