BN-50 | Add. RadiologyInvestigation Display Control (#34)

* BN-50 | Add. Group By Date Util

* BN-50 | Refactor. Use GroupByDate Util In DiagnosesService

* BN-50 | Add. Radiology Investigation Service

* BN-50 | Add. Radiology Investigation Hook

* BN-50 | Add. Radiology Investigation Table Display Control

* BN-50 | Fix. Remove Timestamp From Date Group Key

* BN-50 | Fix. Display Stat As Urgent In UI

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Add. RadiologyInvestigation To Patient Dashboard

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Add. Integration Test To RadiologyInvestigation

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Add. A11y Test For RadiologyInvestigationTable

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Fix. Use Aliases For Imports

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Refactor. Group Radiology Investigations By Date In Presentation Layer

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Refactor. Memoize Sort and Group Fn

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Refactor. Group Diagnoses By Date In Presentation Layer

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

* BN-50 | Add. a11y Test For DiagnosesTable

---------

Co-authored-by: Dev Singh <dev.singh@thoughtworks.com>

Author: rahu1ramesh

public/locales/locale_en.json

@@ -83,6 +83,7 @@
   "ERROR_FETCHING_DIAGNOSES": "Error fetching diagnoses. Please try again later.",
   "ERROR_FETCHING_ENCOUNTER_DETAILS": "Error fetching encounter details",
   "ERROR_FETCHING_LOCATIONS_DETAILS": "Error fetching locations details",
+  "ERROR_FETCHING_RADIOLOGY_ORDERS": "Error fetching radiology orders",
   "ERROR_FETCHING_PRACTITIONERS_DETAILS": "Error fetching practitioners details",
   "ERROR_FETCHING_USER_DETAILS": "Error fetching user details",
   "ERROR_INVALID_PATIENT_UUID": "Invalid patient UUID",
@@ -127,10 +128,16 @@
   "NO_DIAGNOSES": "No diagnoses recorded",
   "NO_MATCHING_ALLERGEN_FOUND": "No matching allergen found",
   "NO_MATCHING_DIAGNOSIS_FOUND": "No matching diagnosis found.",
+  "NO_RADIOLOGY_ORDERS": "No radiology orders found",
   "PARTICIPANT": "Participant(s)",
   "PATIENT_HEADER_ACTION_AREA_IN_PROGRESS": "Consultation in progress",
   "PATIENT_HEADER_LABEL": "Patient Header",
   "PATIENT_HEADER_SHOW_ACTION_AREA": "New Consultation",
+  "RADIOLOGY_ORDERED_BY": "Ordered By",
+  "RADIOLOGY_INVESTIGATION_HEADING": "Radiology Investigations",
+  "RADIOLOGY_PRIORITY_URGENT": "Urgent",
+  "RADIOLOGY_RESULTS": "Results",
+  "RADIOLOGY_TEST_NAME": "Test Name",
   "REACTIONS": "Reaction(s)",
   "SELECT_ENCOUNTER_TYPE": "Select encounter type",
   "SELECT_LOCATION": "Select location",

public/locales/locale_es.json

@@ -83,6 +83,7 @@
   "ERROR_FETCHING_DIAGNOSES": "Error al obtener datos de diagnósticos. Por favor, inténtelo de nuevo más tarde.",
   "ERROR_FETCHING_ENCOUNTER_DETAILS": "Error al obtener los detalles del encuentro",
   "ERROR_FETCHING_LOCATIONS_DETAILS": "Error al obtener detalles de ubicaciones",
+  "ERROR_FETCHING_RADIOLOGY_ORDERS": "Error al obtener órdenes de radiología",
   "ERROR_FETCHING_PRACTITIONERS_DETAILS": "Error al obtener detalles de profesionales médicos",
   "ERROR_FETCHING_USER_DETAILS": "Error al obtener detalles del usuario",
   "ERROR_INVALID_PATIENT_UUID": "UUID de paciente inválido",
@@ -127,10 +128,16 @@
   "NO_DIAGNOSES": "No hay diagnósticos registrados",
   "NO_MATCHING_ALLERGEN_FOUND": "No se encontró ningún alérgeno coincidente",
   "NO_MATCHING_DIAGNOSIS_FOUND": "No se encontraron diagnósticos coincidentes",
+  "NO_RADIOLOGY_ORDERS": "No se encontraron órdenes de radiología",
   "PARTICIPANT": "Partícipe(es)",
   "PATIENT_HEADER_ACTION_AREA_IN_PROGRESS": "Consulta en progreso",
   "PATIENT_HEADER_LABEL": "Cabecera del Paciente",
   "PATIENT_HEADER_SHOW_ACTION_AREA": "Nueva Consulta",
+  "RADIOLOGY_ORDERED_BY": "Ordenado por",
+  "RADIOLOGY_INVESTIGATION_HEADING": "Investigación de Radiología",
+  "RADIOLOGY_PRIORITY_URGENT": "Urgente",
+  "RADIOLOGY_RESULTS": "Resultados",
+  "RADIOLOGY_TEST_NAME": "Nombre de la Prueba",
   "REACTIONS": "Reacción(es)",
   "SELECT_ENCOUNTER_TYPE": "Seleccionar tipo de encuentro",
   "SELECT_LOCATION": "Seleccionar ubicación",

src/components/clinical/dashboardSection/DashboardSection.tsx

@@ -4,13 +4,14 @@ import { DashboardSectionConfig } from '@types/dashboardConfig';
 import * as styles from './styles/DashboardSection.module.scss';
 import AllergiesTable from '@displayControls/allergies/AllergiesTable';
 import ConditionsTable from '@displayControls/conditions/ConditionsTable';
-import { useTranslation } from 'react-i18next';
 import LabInvestigation from '@displayControls/labinvestigation/LabInvestigationControl';
 import DiagnosesTable from '@displayControls/diagnoses/DiagnosesTable';
+import RadiologyOrdersTable from '@displayControls/radiologyInvestigation/RadiologyInvestigationTable';
+import { useTranslation } from 'react-i18next';
 
 export interface DashboardSectionProps {
   section: DashboardSectionConfig;
-  ref: React.RefObject<HTMLDivElement>;
+  ref: React.RefObject<HTMLDivElement | null>;
 }
 
 //TODO: Refactor this to depend on Controls configuration
@@ -27,6 +28,8 @@ const renderSectionContent = (section: DashboardSectionConfig) => {
       );
     case 'Lab Investigations':
       return <LabInvestigation />;
+    case 'Radiology Investigations':
+      return <RadiologyOrdersTable />;
     default:
       return null;
   }

src/components/clinical/dashboardSection/__tests__/DashboardSection.test.tsx

@@ -21,6 +21,12 @@ jest.mock('react-i18next', () => ({
   }),
 }));
 
+// Mock CSS modules
+jest.mock('../styles/DashboardSection.module.scss', () => ({
+  sectionTitle: 'sectionTitle',
+  sectionTile: 'sectionTile',
+}));
+
 // Mock the display control components
 jest.mock('@displayControls/allergies/AllergiesTable', () => ({
   __esModule: true,
@@ -39,9 +45,19 @@ jest.mock('@displayControls/labinvestigation/LabInvestigationControl', () => ({
 
 jest.mock('@displayControls/diagnoses/DiagnosesTable', () => ({
   __esModule: true,
-  default: () => <div data-testid="diagnoses-table">Lab Investigation</div>,
+  default: () => <div data-testid="diagnoses-table">Diagnoses Table</div>,
 }));
 
+jest.mock(
+  '@displayControls/radiologyInvestigation/RadiologyInvestigationTable',
+  () => ({
+    __esModule: true,
+    default: () => (
+      <div data-testid="radiology-orders-table">Radiology Orders Table</div>
+    ),
+  }),
+);
+
 describe('DashboardSection Component', () => {
   const mockSection: DashboardSectionConfig = {
     id: 'test-section-id',
@@ -51,7 +67,7 @@ describe('DashboardSection Component', () => {
   };
 
   // Handle for forwardRef in tests
-  const mockRef = jest.fn();
+  const mockRef = React.createRef<HTMLDivElement>();
 
   it('renders with the correct section name', () => {
     render(<DashboardSection section={mockSection} ref={mockRef} />);
@@ -80,9 +96,9 @@ describe('DashboardSection Component', () => {
   });
 
   it('accepts a ref prop', () => {
-    const mockRefFn = jest.fn();
+    const testRef = React.createRef<HTMLDivElement>();
 
-    render(<DashboardSection section={mockSection} ref={mockRefFn} />);
+    render(<DashboardSection section={mockSection} ref={testRef} />);
 
     // In a real component, we'd check ref.current
     // For our mocked component, we just verify the ref was passed
@@ -121,7 +137,7 @@ describe('DashboardSection Component', () => {
       expect(screen.getByTestId('allergies-table')).toBeInTheDocument();
     });
 
-    it('renders ConditionsTable when section name is Conditions', () => {
+    it('renders both ConditionsTable and DiagnosesTable when section name is Conditions', () => {
       const conditionsSection: DashboardSectionConfig = {
         id: 'conditions-id',
         name: 'Conditions',
@@ -132,6 +148,7 @@ describe('DashboardSection Component', () => {
       render(<DashboardSection section={conditionsSection} ref={mockRef} />);
 
       expect(screen.getByTestId('conditions-table')).toBeInTheDocument();
+      expect(screen.getByTestId('diagnoses-table')).toBeInTheDocument();
     });
 
     it('renders LabInvestigation when section name is Lab Investigations', () => {
@@ -149,6 +166,19 @@ describe('DashboardSection Component', () => {
       expect(screen.getByTestId('lab-investigation')).toBeInTheDocument();
     });
 
+    it('renders RadiologyOrdersTable when section name is Radiology Investigations', () => {
+      const radiologySection: DashboardSectionConfig = {
+        id: 'radiology-id',
+        name: 'Radiology Investigations',
+        icon: 'test-icon',
+        controls: [],
+      };
+
+      render(<DashboardSection section={radiologySection} ref={mockRef} />);
+
+      expect(screen.getByTestId('radiology-orders-table')).toBeInTheDocument();
+    });
+
     it('renders no content for unknown section types', () => {
       const unknownSection: DashboardSectionConfig = {
         id: 'unknown-section-id',

src/constants/app.ts

@@ -1,3 +1,4 @@
+//TODO: Move Display Control URLs to a separate file
 import {
   HL7_CONDITION_CATEGORY_CONDITION_CODE,
   HL7_CONDITION_CATEGORY_DIAGNOSIS_CODE,
@@ -11,6 +12,10 @@ const OPENMRS_REST_V1 = '/openmrs/ws/rest/v1';
 export const BAHMNI_USER_COOKIE_NAME = 'bahmni.user';
 export const BAHMNI_USER_LOCATION_COOKIE_NAME = 'bahmni.user.location';
 
+//TODO: When we work on taking values dynamically, we need to remove the hardcoded value of LAB_ORDER_TYPE_UUID */
+export const LAB_ORDER_TYPE_UUID = 'd3560b17-5e07-11ef-8f7c-0242ac120002';
+export const RADIOLOGY_ORDER_TYPE_UUID = 'd3561dc0-5e07-11ef-8f7c-0242ac120002';
+
 export const CONFIG_TRANSLATIONS_URL_TEMPLATE = (lang: string) =>
   `/bahmni_config/openmrs/i18n/clinical/locale_${lang}.json`;
 export const BUNDLED_TRANSLATIONS_URL_TEMPLATE = (lang: string) =>
@@ -36,6 +41,9 @@ export const PATIENT_DIAGNOSIS_RESOURCE_URL = (patientUUID: string) =>
 export const CLINICAL_CONFIG_URL =
   '/bahmni_config/openmrs/apps/clinical/v2/app.json';
 export const LOCATION_RESOURCE_URL = OPENMRS_REST_V1 + '/location';
+export const PATIENT_RADIOLOGY_RESOURCE_URL = (patientUUID: string) =>
+  OPENMRS_FHIR_R4 +
+  `/ServiceRequest?category=${RADIOLOGY_ORDER_TYPE_UUID}&patient=${patientUUID}&_count=100&_sort=-_lastUpdated&numberOfVisits=5`;
 export const ENCOUNTER_CONCEPTS_URL =
   OPENMRS_REST_V1 +
   '/bahmnicore/config/bahmniencounter?callerContext=REGISTRATION_CONCEPTS';
@@ -64,5 +72,3 @@ export const LOCALE_STORAGE_KEY = 'NG_TRANSLATE_LANG_KEY';
 export const CLINICAL_NAMESPACE = 'clinical';
 export const BAHMNI_HOME_PATH = '/bahmni/home/index.html';
 export const BAHMNI_CLINICAL_PATH = '/bahmni/clinical/index.html';
-//TODO: When we work on taking values dynamically, we need to remove the hardcoded value of LAB_ORDER_TYPE_UUID */
-export const LAB_ORDER_TYPE_UUID = 'd3560b17-5e07-11ef-8f7c-0242ac120002';

src/constants/date.ts

@@ -1,3 +1,4 @@
 export const DATE_FORMAT = 'dd/MM/yyyy';
 export const FULL_MONTH_DATE_FORMAT = 'MMMM dd, yyyy';
 export const DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
+export const ISO_DATE_FORMAT = 'yyyy-MM-dd';

src/displayControls/diagnoses/DiagnosesTable.tsx

@@ -1,12 +1,13 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { Tag, Tile, DataTableSkeleton } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { ExpandableDataTable } from '@components/common/expandableDataTable/ExpandableDataTable';
 import { useDiagnoses } from '@hooks/useDiagnoses';
-import { FormattedDiagnosis } from '@types/diagnosis';
+import { Diagnosis } from '@types/diagnosis';
 import { formatDate } from '@utils/date';
-import { FULL_MONTH_DATE_FORMAT } from '@constants/date';
+import { FULL_MONTH_DATE_FORMAT, ISO_DATE_FORMAT } from '@constants/date';
 import { sortDiagnosesByCertainty } from '@utils/diagnosis';
+import { groupByDate } from '@utils/common';
 import * as styles from './styles/DiagnosesTable.module.scss';
 
 /**
@@ -34,16 +35,19 @@ const DiagnosesTable: React.FC = () => {
     [],
   );
 
-  // Sort diagnoses within each date group by certainty: confirmed → provisional
-  const sortedDiagnoses = useMemo(() => {
-    return diagnoses.map((diagnosisByDate) => ({
-      ...diagnosisByDate,
-      diagnoses: sortDiagnosesByCertainty(diagnosisByDate.diagnoses),
+  const processedDiagnoses = useMemo(() => {
+    const grouped = groupByDate(diagnoses, (diagnosis) => {
+      const result = formatDate(diagnosis.recordedDate, ISO_DATE_FORMAT);
+      return result.formattedResult;
+    });
+
+    return grouped.map((group) => ({
+      date: group.date,
+      diagnoses: sortDiagnosesByCertainty(group.items),
     }));
   }, [diagnoses]);
 
-  // Function to render cell content based on the cell ID
-  const renderCell = (diagnosis: FormattedDiagnosis, cellId: string) => {
+  const renderCell = useCallback((diagnosis: Diagnosis, cellId: string) => {
     switch (cellId) {
       case 'display':
         return (
@@ -65,7 +69,7 @@ const DiagnosesTable: React.FC = () => {
       case 'recorder':
         return diagnosis.recorder || t('DIAGNOSIS_TABLE_NOT_AVAILABLE');
     }
-  };
+  }, []);
 
   return (
     <Tile
@@ -93,7 +97,7 @@ const DiagnosesTable: React.FC = () => {
       {!loading && !error && diagnoses.length === 0 && (
         <p className={styles.diagnosesTableBodyError}>{t('NO_DIAGNOSES')}</p>
       )}
-      {sortedDiagnoses.map((diagnosisByDate, index) => {
+      {processedDiagnoses.map((diagnosisByDate, index) => {
         const { date, diagnoses: diagnosisList } = diagnosisByDate;
 
         // Format the date for display