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/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/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 9fb6b15d..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; @@ -538,6 +584,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 04103054..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('error.loading.report', { ns: 'errors', errorMessage: (error as Error).message })} -
+
{t('loading.report', { ns: 'errors', errorMessage: (error as Error).message })}
 ); @@ -67,7 +65,7 @@ const ReportDetailPage: React.FC = () => { return ( -
{t('error.no-report-data', { ns: 'errors' })}
+
{t('no-report-data', { ns: 'errors' })}
 ); 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) => )} ); }; 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}

))}