From c452797fc1a6c5e8d7a036e81fa0b92377d8a4d6 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Wed, 23 Apr 2025 19:45:22 +0200 Subject: [PATCH 1/3] fix: Update translation keys for loading and no report data messages --- frontend/src/pages/Reports/ReportDetailPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Reports/ReportDetailPage.tsx b/frontend/src/pages/Reports/ReportDetailPage.tsx index 04103054..763912e9 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.tsx +++ b/frontend/src/pages/Reports/ReportDetailPage.tsx @@ -56,7 +56,7 @@ const ReportDetailPage: React.FC = () => {
- {t('error.loading.report', { ns: 'errors', errorMessage: (error as Error).message })} + {t('loading.report', { ns: 'errors', errorMessage: (error as Error).message })}
@@ -67,7 +67,7 @@ const ReportDetailPage: React.FC = () => { return ( -
{t('error.no-report-data', { ns: 'errors' })}
+
{t('no-report-data', { ns: 'errors' })}
 ); From ff55a375b3314ec1b2d5fc01bae878a6af8527df Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Wed, 23 Apr 2025 20:53:30 +0200 Subject: [PATCH 2/3] fix: Add alert icons for lab value status indicators and update result cell layout --- frontend/src/assets/icons/orange-alert.svg | 6 +++++ frontend/src/assets/icons/red-alert.svg | 6 +++++ .../src/pages/Reports/ReportDetailPage.scss | 3 +++ .../src/pages/Reports/ReportDetailPage.tsx | 4 +--- .../Reports/components/OriginalReportTab.tsx | 24 ++++++++++++------- 5 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 frontend/src/assets/icons/orange-alert.svg create mode 100644 frontend/src/assets/icons/red-alert.svg diff --git a/frontend/src/assets/icons/orange-alert.svg b/frontend/src/assets/icons/orange-alert.svg new file mode 100644 index 00000000..6e35a9b2 --- /dev/null +++ b/frontend/src/assets/icons/orange-alert.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/red-alert.svg b/frontend/src/assets/icons/red-alert.svg new file mode 100644 index 00000000..cf8b3a94 --- /dev/null +++ b/frontend/src/assets/icons/red-alert.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/frontend/src/pages/Reports/ReportDetailPage.scss b/frontend/src/pages/Reports/ReportDetailPage.scss index 9fb6b15d..c7290844 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.scss +++ b/frontend/src/pages/Reports/ReportDetailPage.scss @@ -538,6 +538,9 @@ } &--value { + display: flex; + justify-content: end; + align-items: center; width: 100px; text-align: right; font-family: 'Inter', sans-serif; diff --git a/frontend/src/pages/Reports/ReportDetailPage.tsx b/frontend/src/pages/Reports/ReportDetailPage.tsx index 763912e9..ed989846 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.tsx +++ b/frontend/src/pages/Reports/ReportDetailPage.tsx @@ -55,9 +55,7 @@ const ReportDetailPage: React.FC = () => { return ( -
- {t('loading.report', { ns: 'errors', errorMessage: (error as Error).message })} -
+
{t('loading.report', { ns: 'errors', errorMessage: (error as Error).message })}
 ); diff --git a/frontend/src/pages/Reports/components/OriginalReportTab.tsx b/frontend/src/pages/Reports/components/OriginalReportTab.tsx index a9df4735..8c8db892 100644 --- a/frontend/src/pages/Reports/components/OriginalReportTab.tsx +++ b/frontend/src/pages/Reports/components/OriginalReportTab.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { format } from 'date-fns'; import Icon from '../../../common/components/Icon/Icon'; import { MedicalReport } from '../../../common/models/medicalReport'; +import orangeAlertIcon from '../../../assets/icons/orange-alert.svg'; +import redAlertIcon from '../../../assets/icons/red-alert.svg'; interface OriginalReportTabProps { reportData: MedicalReport; @@ -40,20 +42,24 @@ const OriginalReportTab: React.FC = ({ reportData }) => {/* Test Results Rows */} {reportData.labValues.map((labValue, index) => ( -
+
- {labValue.name} +

{labValue.name}

- {labValue.value} {labValue.unit} + {labValue.status !== 'normal' && ( + + )} + +

+ {labValue.value} {labValue.unit} +

- {labValue.normalRange} +

{labValue.normalRange}

))} From e1823c3b86f296cbb2efc0c798d09e239481fbb8 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Wed, 23 Apr 2025 21:26:00 +0200 Subject: [PATCH 3/3] feat: Add no values icon and empty state message for normal values section --- frontend/src/assets/icons/no-values.svg | 12 +++++ .../utils/i18n/resources/en/reportDetail.json | 6 ++- .../src/pages/Reports/ReportDetailPage.scss | 46 +++++++++++++++++++ .../components/NormalValuesSection.tsx | 19 +++++++- 4 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 frontend/src/assets/icons/no-values.svg diff --git a/frontend/src/assets/icons/no-values.svg b/frontend/src/assets/icons/no-values.svg new file mode 100644 index 00000000..e6c5ebe5 --- /dev/null +++ b/frontend/src/assets/icons/no-values.svg @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/frontend/src/common/utils/i18n/resources/en/reportDetail.json b/frontend/src/common/utils/i18n/resources/en/reportDetail.json index d5395357..9aa87d6c 100644 --- a/frontend/src/common/utils/i18n/resources/en/reportDetail.json +++ b/frontend/src/common/utils/i18n/resources/en/reportDetail.json @@ -66,7 +66,9 @@ "title": "Flagged values" }, "normal-values": { - "title": "Normal values" + "title": "Normal values", + "empty": "No values available.", + "empty-description": "No normal values within the normal range were detected." }, "conclusion": { "title": "Conclusion" @@ -88,4 +90,4 @@ "original-report": "Original Report" } } -} +} \ No newline at end of file diff --git a/frontend/src/pages/Reports/ReportDetailPage.scss b/frontend/src/pages/Reports/ReportDetailPage.scss index c7290844..48861b05 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.scss +++ b/frontend/src/pages/Reports/ReportDetailPage.scss @@ -191,6 +191,52 @@ align-items: center; } + &__section-empty { + padding: 24px 16px 32px; + background-color: #fff; + } + + &__section-empty-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + + &__section-empty-icon { + background-color: #EEF1FF; + border-radius: 50%; + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 32px; + + img { + width: 48px; + height: 48px; + } + } + + &__section-empty-title { + font-family: 'Inter', sans-serif; + font-size: 18px; + font-weight: 600; + color: #313e4c; + margin: 0 0 16px; + } + + &__section-empty-description { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 400; + color: #313e4c; + margin: 0; + max-width: 286px; + line-height: 22px; + } + &__item { background-color: #ffffff; border-radius: 8px; diff --git a/frontend/src/pages/Reports/components/NormalValuesSection.tsx b/frontend/src/pages/Reports/components/NormalValuesSection.tsx index c366354f..bb196eb8 100644 --- a/frontend/src/pages/Reports/components/NormalValuesSection.tsx +++ b/frontend/src/pages/Reports/components/NormalValuesSection.tsx @@ -4,6 +4,7 @@ import Icon from '../../../common/components/Icon/Icon'; import { LabValue } from '../../../common/models/medicalReport'; import LabValueItem from './LabValueItem'; import normalValuesIcon from '../../../assets/icons/normal-values.svg'; +import noValuesIcon from '../../../assets/icons/no-values.svg'; interface NormalValuesSectionProps { normalValues: LabValue[]; @@ -35,7 +36,23 @@ const NormalValuesSection: React.FC = ({
- {isExpanded && normalValues.map((item, index) => )} + {isExpanded && normalValues.length === 0 && ( +
+
+ No Values Icon +

+ {t('report.normal-values.empty', { ns: 'reportDetail' })} +

+

+ {t('report.normal-values.empty-description', { ns: 'reportDetail' })} +

+
+
+ )} + + {isExpanded && + normalValues.length > 0 && + normalValues.map((item, index) => )} ); };