feat: Add no values icon and empty state message for normal values section

Author: adamrefaey

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

@@ -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"
     }
   }
-}
+}

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

@@ -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;

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -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<NormalValuesSectionProps> = ({
         </div>
       </div>
 
-      {isExpanded && normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
+      {isExpanded && normalValues.length === 0 && (
+        <div className="report-detail-page__section-empty">
+          <div className="report-detail-page__section-empty-content">
+            <img src={noValuesIcon} alt="No Values Icon" style={{ marginBottom: '2rem' }} />
+            <h3 className="report-detail-page__section-empty-title">
+              {t('report.normal-values.empty', { ns: 'reportDetail' })}
+            </h3>
+            <p className="report-detail-page__section-empty-description">
+              {t('report.normal-values.empty-description', { ns: 'reportDetail' })}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {isExpanded &&
+        normalValues.length > 0 &&
+        normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
     </div>
   );
 };