Merge BN-49 | Display lab orders on patient dashboard

A few changes related to the priority-based display of tests need to be made.

Author: devsingh05298

public/locales/locale_en.json

@@ -101,7 +101,6 @@
   "LAB_TEST_REPORTED_ON": "Reported On",
   "LAB_TEST_RESULT": "Result",
   "LAB_TEST_RESULTS_PENDING": "Results Pending",
-  "LAB_TEST_ROUTINE": "Routine",
   "LAB_TEST_SINGLE_TEST": "Single Test",
   "LAB_TEST_STATUS": "Status",
   "LAB_TEST_UNAVAILABLE": "No lab Investigations available",

public/locales/locale_es.json

@@ -101,7 +101,6 @@
   "LAB_TEST_REPORTED_ON": "Reportado el",
   "LAB_TEST_RESULT": "Resultado",
   "LAB_TEST_RESULTS_PENDING": "Resultados pendientes",
-  "LAB_TEST_ROUTINE": "De rutina",
   "LAB_TEST_SINGLE_TEST": "Prueba única",
   "LAB_TEST_STATUS": "Estado",
   "LAB_TEST_UNAVAILABLE": "No disponible",

src/displayControls/labinvestigation/LabInvestigationControl.tsx

@@ -5,7 +5,7 @@ import { Accordion, AccordionItem, SkeletonText } from '@carbon/react';
 import LabInvestigationItem from './LabInvestigationItem';
 import useLabInvestigations from '@/hooks/useLabInvestigations';
 import { groupLabTestsByDate } from '@/services/labInvestigationService';
-import { LabTestsByDate, FormattedLabTest } from '@/types/labInvestigation';
+import { LabTestsByDate } from '@/types/labInvestigation';
 
 const LabInvestigationControl: React.FC = () => {
   const { t } = useTranslation();
@@ -16,17 +16,13 @@ const LabInvestigationControl: React.FC = () => {
     return groupLabTestsByDate(labTests);
   }, [labTests]);
 
-  if (isError) {
-    return <div>{t('LAB_TEST_ERROR_LOADING')}</div>;
-  }
-
-  if (!isLoading && labTests.length === 0) {
-    return <div>{t('LAB_TEST_UNAVAILABLE')}</div>;
-  }
-
   return (
     <section className={styles.labInvestigationWrapper}>
       <Accordion align="start" size="lg">
+        {isError && <div>{t('LAB_TEST_ERROR_LOADING')}</div>}
+        {!isLoading && labTests.length === 0 && (
+          <div>{t('LAB_TEST_UNAVAILABLE')}</div>
+        )}
         {isLoading && labTests.length === 0 && (
           <>
             <SkeletonText lineCount={3} width="100%" />
@@ -43,9 +39,25 @@ const LabInvestigationControl: React.FC = () => {
               </span>
             }
           >
-            {group.tests?.map((test: FormattedLabTest, testIndex: number) => (
-              <LabInvestigationItem key={testIndex} test={test} />
-            ))}
+            {/* Render 'urgent' tests first */}
+            {group.tests
+              ?.filter((test) => test.priority === 'Urgent')
+              .map((test, index) => (
+                <LabInvestigationItem
+                  key={`urgent-${group.date}-${test.testName}-${index}`}
+                  test={test}
+                />
+              ))}
+
+            {/* Then render non-urgent tests */}
+            {group.tests
+              ?.filter((test) => test.priority !== 'Urgent')
+              .map((test, index) => (
+                <LabInvestigationItem
+                  key={`nonurgent-${group.date}-${test.testName}-${index}`}
+                  test={test}
+                />
+              ))}
           </AccordionItem>
         ))}
       </Accordion>

src/displayControls/labinvestigation/LabInvestigationItem.tsx

@@ -14,31 +14,25 @@ const LabInvestigationItem: React.FC<LabInvestigationItemProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  // Determine tag color based on priority
-  const getTagType = (priority: LabTestPriority): 'gray' | 'green' => {
-    switch (priority) {
-      case LabTestPriority.stat:
-        return 'gray' as const;
-      case LabTestPriority.routine:
-        return 'green' as const;
-      default:
-        return 'green' as const;
-    }
-  };
-
   return (
     <div className={styles.labBox}>
       <div className={styles.labHeader}>
         <div>
           <strong>{test.testName}</strong>
-          <span className={styles.testType}>
-            {' '}
-            {t(`LAB_TEST_${test.testType.replace(/\s+/g, '_').toUpperCase()}`)}
-          </span>
+          {test.testType === 'Panel' && (
+            <span className={styles.testType}>
+              {t(`LAB_TEST_${test.testType.toUpperCase()}`)}
+            </span>
+          )}
         </div>
-        <Tag type={getTagType(test.priority)}>
-          {t(`LAB_TEST_${test.priority.toUpperCase()}`)}
-        </Tag>
+        {test.priority === LabTestPriority.stat && (
+          <Tag
+            className={styles['yellow-tag']}
+            data-testid={`lab-test-priority-${test.priority}`}
+          >
+            {t(`LAB_TEST_${test.priority.toUpperCase()}`)}
+          </Tag>
+        )}
         <div className={styles.orderedBy}>
           <BahmniIcon name="fa-user" size={ICON_SIZE.SM} id="homeIcon" />
           {t('LAB_TEST_ORDERED_BY')}: {test.orderedBy}

src/displayControls/labinvestigation/__tests__/LabInvestigationControl.integration.test.tsx

@@ -101,18 +101,9 @@ describe('LabInvestigationControl Integration', () => {
 
     render(<LabInvestigationControl />);
 
-    // Verify the priorities are displayed by checking for tag elements
-    // Carbon Design System's Tag component might not render text content properly in tests
-    const tags = document.querySelectorAll('.cds--tag');
-    expect(tags.length).toBe(3); // Total of 3 tags
-
-    // Check for green tags (routine priority)
-    const greenTags = document.querySelectorAll('.cds--tag--green');
-    expect(greenTags.length).toBe(2); // Two routine tests (actual count in the DOM)
-
-    // Check for gray tags (stat priority)
-    const grayTags = document.querySelectorAll('.cds--tag--gray');
-    expect(grayTags.length).toBe(1); // One stat priority test
+    // Check for stat priority tag using data-testid
+    const statPriorityTag = screen.getByTestId('lab-test-priority-Urgent');
+    expect(statPriorityTag).toBeInTheDocument();
   });
 
   it('should display ordered by information', () => {

src/displayControls/labinvestigation/__tests__/LabInvestigationControl.test.tsx

@@ -95,7 +95,7 @@ describe('LabInvestigationControl', () => {
       id: 'test-3',
       testName: 'Liver Function',
       status: LabTestStatus.Pending,
-      priority: LabTestPriority.stat,
+      priority: LabTestPriority.routine,
       orderedBy: 'Dr. Williams',
       orderedDate: '2025-04-09T13:21:22+00:00',
       formattedDate: '04/09/2025',
@@ -108,12 +108,15 @@ describe('LabInvestigationControl', () => {
     {
       date: '05/08/2025',
       rawDate: '2025-05-08T12:44:24+00:00',
-      tests: [mockFormattedLabTests[0]],
+      tests: [mockFormattedLabTests[0]], // Complete Blood Count (routine)
     },
     {
       date: '04/09/2025',
       rawDate: '2025-04-09T13:21:22+00:00',
-      tests: [mockFormattedLabTests[1], mockFormattedLabTests[2]],
+      tests: [
+        mockFormattedLabTests[1], // Lipid Panel (stat/Urgent) - should be first
+        mockFormattedLabTests[2], // Liver Function (stat/Urgent) - should be second
+      ],
     },
   ];
 
@@ -180,7 +183,7 @@ describe('LabInvestigationControl', () => {
     expect(testPriorities).toHaveLength(3);
     expect(testPriorities[0].textContent).toBe(LabTestPriority.routine);
     expect(testPriorities[1].textContent).toBe(LabTestPriority.stat);
-    expect(testPriorities[2].textContent).toBe(LabTestPriority.stat);
+    expect(testPriorities[2].textContent).toBe(LabTestPriority.routine);
   });
 
   it('renders "No lab Investigations available" message when there are no lab tests and isLoading is false', () => {
@@ -215,4 +218,33 @@ describe('LabInvestigationControl', () => {
     // Check that the error message is displayed
     expect(screen.getByText('Error loading lab tests')).toBeInTheDocument();
   });
+
+  it('renders urgent tests before non-urgent tests within each group', () => {
+    // Mock the hook to return lab tests
+    (useLabInvestigations as jest.Mock).mockReturnValue({
+      labTests: mockFormattedLabTests,
+      isLoading: false,
+      isError: false,
+    });
+
+    render(<LabInvestigationControl />);
+
+    // Get all test names in DOM order
+    const testNames = screen.getAllByTestId('test-name');
+    const testPriorities = screen.getAllByTestId('test-priority');
+
+    expect(testNames).toHaveLength(3);
+
+    // The component renders by date groups first, then by priority within each group
+    // First date group (05/08/2025): Complete Blood Count (routine)
+    expect(testNames[0].textContent).toBe('Complete Blood Count');
+    expect(testPriorities[0].textContent).toBe(LabTestPriority.routine);
+
+    // Second date group (04/09/2025): Urgent tests first within this group
+    expect(testNames[1].textContent).toBe('Lipid Panel');
+    expect(testPriorities[1].textContent).toBe(LabTestPriority.stat);
+
+    expect(testNames[2].textContent).toBe('Liver Function');
+    expect(testPriorities[2].textContent).toBe(LabTestPriority.routine);
+  });
 });

src/displayControls/labinvestigation/__tests__/LabInvestigationItem.test.tsx

@@ -43,9 +43,6 @@ describe('LabInvestigationItem', () => {
         // Return appropriate values based on the translation key
         const translations: Record<string, string> = {
           LAB_TEST_PANEL: 'Panel',
-          LAB_TEST_SINGLE_TEST: 'Single Test',
-          LAB_TEST_5_TESTS: '5 Tests',
-          LAB_TEST_ROUTINE: 'Routine',
           LAB_TEST_URGENT: 'Urgent',
           LAB_TEST_ORDERED_BY: 'Ordered by:',
           LAB_TEST_RESULTS_PENDING: 'Results pending…',
@@ -64,9 +61,6 @@ describe('LabInvestigationItem', () => {
     // Check that the test type is displayed (using translation)
     expect(screen.getByText('Panel')).toBeInTheDocument();
 
-    // Check that the priority is displayed (using translation)
-    expect(screen.getByText('Routine')).toBeInTheDocument();
-
     // Check that the ordered by information is displayed
     expect(screen.getByText(/Ordered by:/)).toBeInTheDocument();
     expect(screen.getByText(/Dr. Smith/)).toBeInTheDocument();
@@ -90,69 +84,15 @@ describe('LabInvestigationItem', () => {
     expect(screen.getByText('Urgent')).toBeInTheDocument();
   });
 
-  it('handles unknown priority values and defaults to green tag', () => {
-    // Create a test with an unknown priority value
-    const unknownPriorityTest = {
-      ...mockLabTest,
-      priority: 'unknown' as unknown as LabTestPriority,
-    };
-
-    // Update the translation mock for this specific test
-    (useTranslation as jest.Mock).mockReturnValue({
-      t: (key: string) => {
-        if (key === 'LAB_TEST_UNKNOWN') return 'unknown';
-        const translations: Record<string, string> = {
-          LAB_TEST_PANEL: 'Panel',
-          LAB_TEST_ORDERED_BY: 'Ordered by:',
-          LAB_TEST_RESULTS_PENDING: 'Results pending…',
-        };
-        return translations[key] || key;
-      },
-    });
-
-    render(<LabInvestigationItem test={unknownPriorityTest} />);
-
-    // The tag should still be rendered with the unknown priority text
-    expect(screen.getByText('unknown')).toBeInTheDocument();
-
-    // We can't directly test the color, but we can verify the component renders
-    // without errors, which means the default case was used
-  });
-
-  it('displays different test types correctly', () => {
-    // Test with Single Test type
-    const singleTest = {
+  it('displays test type correctly', () => {
+    // Test with Panel Test type
+    const panelTest = {
       ...mockLabTest,
-      testType: 'Single Test',
+      testType: 'Panel',
     };
 
-    const { rerender } = render(<LabInvestigationItem test={singleTest} />);
-    expect(screen.getByText('Single Test')).toBeInTheDocument();
-
     // Test with Panel type
-    rerender(<LabInvestigationItem test={mockLabTest} />);
+    render(<LabInvestigationItem test={panelTest} />);
     expect(screen.getByText('Panel')).toBeInTheDocument();
-
-    // Test with X Tests type
-    const multipleTest = {
-      ...mockLabTest,
-      testType: '5 Tests',
-    };
-
-    // Update the translation mock for this specific test case
-    (useTranslation as jest.Mock).mockReturnValue({
-      t: (key: string) => {
-        const translations: Record<string, string> = {
-          LAB_TEST_5_TESTS: '5 Tests',
-          LAB_TEST_ROUTINE: 'Routine',
-          LAB_TEST_ORDERED_BY: 'Ordered by:',
-          LAB_TEST_RESULTS_PENDING: 'Results pending…',
-        };
-        return translations[key] || key;
-      },
-    });
-
-    rerender(<LabInvestigationItem test={multipleTest} />);
-    expect(screen.getByText('5 Tests')).toBeInTheDocument();
   });
 });

src/displayControls/labinvestigation/styles/LabInvestigation.module.scss

@@ -60,3 +60,8 @@
     padding-inline-end: 0%;
   }
 }
+
+.yellow-tag {
+  background-color: #f8d465 !important;
+  color: #333 !important;
+}

src/types/labInvestigation.ts

@@ -108,7 +108,7 @@ export interface FormattedLabTest {
   readonly orderedDate: string; // ISO date string
   readonly formattedDate: string; // Formatted date for display
   readonly result?: string | LabTestResult[];
-  readonly testType: string; // "Panel" or "Single Test"
+  readonly testType: string; // "Panel" or not
 }
 
 /**