Skip to content

Commit 8396993

Browse files
adamrefaeyadamrefaey
authored
Merge pull request #100 from ModusCreateOrg/ADE-66
[ADE-66] fixes for processing and viewing a report
2 parents d335bb9 + e1823c3 commit 8396993

File tree

8 files changed

+112
-16
lines changed

8 files changed

+112
-16
lines changed

‎frontend/src/assets/icons/no-values.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎frontend/src/assets/icons/orange-alert.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎frontend/src/assets/icons/red-alert.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎frontend/src/common/utils/i18n/resources/en/reportDetail.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@
6666
"title": "Flagged values"
6767
},
6868
"normal-values": {
69-
"title": "Normal values"
69+
"title": "Normal values",
70+
"empty": "No values available.",
71+
"empty-description": "No normal values within the normal range were detected."
7072
},
7173
"conclusion": {
7274
"title": "Conclusion"
@@ -88,4 +90,4 @@
8890
"original-report": "Original Report"
8991
}
9092
}
91-
}
93+
}

‎frontend/src/pages/Reports/ReportDetailPage.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,52 @@
191191
align-items: center;
192192
}
193193

194+
&__section-empty {
195+
padding: 24px 16px 32px;
196+
background-color: #fff;
197+
}
198+
199+
&__section-empty-content {
200+
display: flex;
201+
flex-direction: column;
202+
align-items: center;
203+
text-align: center;
204+
}
205+
206+
&__section-empty-icon {
207+
background-color: #EEF1FF;
208+
border-radius: 50%;
209+
width: 90px;
210+
height: 90px;
211+
display: flex;
212+
align-items: center;
213+
justify-content: center;
214+
margin-bottom: 32px;
215+
216+
img {
217+
width: 48px;
218+
height: 48px;
219+
}
220+
}
221+
222+
&__section-empty-title {
223+
font-family: 'Inter', sans-serif;
224+
font-size: 18px;
225+
font-weight: 600;
226+
color: #313e4c;
227+
margin: 0 0 16px;
228+
}
229+
230+
&__section-empty-description {
231+
font-family: 'Inter', sans-serif;
232+
font-size: 14px;
233+
font-weight: 400;
234+
color: #313e4c;
235+
margin: 0;
236+
max-width: 286px;
237+
line-height: 22px;
238+
}
239+
194240
&__item {
195241
background-color: #ffffff;
196242
border-radius: 8px;
@@ -538,6 +584,9 @@
538584
}
539585

540586
&--value {
587+
display: flex;
588+
justify-content: end;
589+
align-items: center;
541590
width: 100px;
542591
text-align: right;
543592
font-family: 'Inter', sans-serif;

‎frontend/src/pages/Reports/ReportDetailPage.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,7 @@ const ReportDetailPage: React.FC = () => {
5555
return (
5656
<IonPage>
5757
<IonContent className="ion-padding">
58-
<div>
59-
{t('error.loading.report', { ns: 'errors', errorMessage: (error as Error).message })}
60-
</div>
58+
<div>{t('loading.report', { ns: 'errors', errorMessage: (error as Error).message })}</div>
6159
</IonContent>
6260
</IonPage>
6361
);
@@ -67,7 +65,7 @@ const ReportDetailPage: React.FC = () => {
6765
return (
6866
<IonPage>
6967
<IonContent className="ion-padding">
70-
<div>{t('error.no-report-data', { ns: 'errors' })}</div>
68+
<div>{t('no-report-data', { ns: 'errors' })}</div>
7169
</IonContent>
7270
</IonPage>
7371
);

‎frontend/src/pages/Reports/components/NormalValuesSection.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Icon from '../../../common/components/Icon/Icon';
44
import { LabValue } from '../../../common/models/medicalReport';
55
import LabValueItem from './LabValueItem';
66
import normalValuesIcon from '../../../assets/icons/normal-values.svg';
7+
import noValuesIcon from '../../../assets/icons/no-values.svg';
78

89
interface NormalValuesSectionProps {
910
normalValues: LabValue[];
@@ -35,7 +36,23 @@ const NormalValuesSection: React.FC<NormalValuesSectionProps> = ({
3536
</div>
3637
</div>
3738

38-
{isExpanded && normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
39+
{isExpanded && normalValues.length === 0 && (
40+
<div className="report-detail-page__section-empty">
41+
<div className="report-detail-page__section-empty-content">
42+
<img src={noValuesIcon} alt="No Values Icon" style={{ marginBottom: '2rem' }} />
43+
<h3 className="report-detail-page__section-empty-title">
44+
{t('report.normal-values.empty', { ns: 'reportDetail' })}
45+
</h3>
46+
<p className="report-detail-page__section-empty-description">
47+
{t('report.normal-values.empty-description', { ns: 'reportDetail' })}
48+
</p>
49+
</div>
50+
</div>
51+
)}
52+
53+
{isExpanded &&
54+
normalValues.length > 0 &&
55+
normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
3956
</div>
4057
);
4158
};

‎frontend/src/pages/Reports/components/OriginalReportTab.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import { format } from 'date-fns';
33
import Icon from '../../../common/components/Icon/Icon';
44
import { MedicalReport } from '../../../common/models/medicalReport';
5+
import orangeAlertIcon from '../../../assets/icons/orange-alert.svg';
6+
import redAlertIcon from '../../../assets/icons/red-alert.svg';
57

68
interface OriginalReportTabProps {
79
reportData: MedicalReport;
@@ -40,20 +42,24 @@ const OriginalReportTab: React.FC<OriginalReportTabProps> = ({ reportData }) =>
4042

4143
{/* Test Results Rows */}
4244
{reportData.labValues.map((labValue, index) => (
43-
<div
44-
key={index}
45-
className={`report-detail-page__results-row ${
46-
labValue.status !== 'normal' ? 'report-detail-page__results-row--flagged' : ''
47-
}`}
48-
>
45+
<div key={index} className="report-detail-page__results-row">
4946
<div className="report-detail-page__results-cell report-detail-page__results-cell--test">
50-
{labValue.name}
47+
<p>{labValue.name}</p>
5148
</div>
5249
<div className="report-detail-page__results-cell report-detail-page__results-cell--value">
53-
{labValue.value} {labValue.unit}
50+
{labValue.status !== 'normal' && (
51+
<img
52+
src={labValue.status === 'low' ? orangeAlertIcon : redAlertIcon}
53+
style={{ display: 'block', marginRight: '1rem' }}
54+
/>
55+
)}
56+
57+
<p>
58+
{labValue.value} {labValue.unit}
59+
</p>
5460
</div>
5561
<div className="report-detail-page__results-cell report-detail-page__results-cell--ref">
56-
{labValue.normalRange}
62+
<p>{labValue.normalRange}</p>
5763
</div>
5864
</div>
5965
))}

0 commit comments

Comments
 (0)