[ADE-66] fixes for processing and viewing a report

[adamrefaey]

Change

This pull request introduces enhancements to the ReportDetailPage and its components, focusing on improving the user experience for displaying empty states and flagged lab values. Key changes include adding empty state handling for normal values, updating the display of flagged lab values with icons, and refining some translations and styles.

Enhancements to empty state handling:

• Added new translations for empty states in reportDetail.json to display messages when no normal values are available ("empty" and "empty-description").
• Updated the NormalValuesSection component to show a styled empty state with an icon, title, and description when no normal values are present.
• Imported the no-values.svg icon for use in the empty state display.

Improvements to flagged lab value display:

• Updated the OriginalReportTab component to include visual indicators (icons) for flagged lab values, using orangeAlertIcon for low values and redAlertIcon for high values.
• Imported the orange-alert.svg and red-alert.svg icons for flagged value representation.

Styling updates:

• Added new CSS classes in ReportDetailPage.scss for styling the empty state, including layout, icon, title, and description.
• Adjusted alignment for the value column in the results table to improve layout consistency.

Translation refinements:

• Fixed translation keys in ReportDetailPage.tsx to use the correct keys ('loading.report' and 'no-report-data') for error and loading messages. [1] [2]

Does this PR introduce a breaking change?

{...}

What needs to be documented once your changes are merged?

{...}

Additional Comments

{...}

[Copilot]

Pull Request Overview

This PR improves report viewing by enhancing empty state displays and flagged lab value indicators, as well as refining translation keys and styling for better user experience.

• Updated OriginalReportTab to include icons for flagged lab values and wrapped text in paragraph tags.
• Refined NormalValuesSection to display an empty state with proper icon and translations when no normal lab values exist.
• Corrected translation keys and error messages in ReportDetailPage.

Reviewed Changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated no comments.

File	Description
frontend/src/pages/Reports/components/OriginalReportTab.tsx	Added flagged lab value icons and updated layout by wrapping lab value name in a paragraph tag.
frontend/src/pages/Reports/components/NormalValuesSection.tsx	Implemented a new empty state for scenarios when there are no normal lab values.
frontend/src/pages/Reports/ReportDetailPage.tsx	Adjusted translation keys for error and no-data messages.

Files not reviewed (2)

• frontend/src/common/utils/i18n/resources/en/reportDetail.json: Language not supported
• frontend/src/pages/Reports/ReportDetailPage.scss: Language not supported

Comments suppressed due to low confidence (1)

frontend/src/pages/Reports/components/OriginalReportTab.tsx:50

• Consider adding an alt attribute to the flagged lab value icon () for improved accessibility. For example, add alt='Flagged lab value indicator'.

<img src={labValue.status === 'low' ? orangeAlertIcon : redAlertIcon} style={{ display: 'block', marginRight: '1rem' }} />