feat: Enhance ReportDetailPage with new layout and data structure for flagged and normal values

Author: adamrefaey

frontend/src/common/components/Icon/Icon.tsx

@@ -30,13 +30,18 @@ import {
   faComment,
   faUserCircle,
   faGlobe as faGoogle,
-  faA as faApple
+  faA as faApple,
+  faFlag,
+  faFlask,
+  faChevronUp,
+  faChevronDown,
+  faVial,
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faFileLines as faRegularFileLines,
   faComment as faRegularComment,
   faUser as faRegularUser,
-  faBookmark as faRegularBookmark
+  faBookmark as faRegularBookmark,
 } from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';
 
@@ -76,7 +81,12 @@ export type IconName =
   | 'userGear'
   | 'xmark'
   | 'google'
-  | 'apple';
+  | 'apple'
+  | 'flag'
+  | 'flask'
+  | 'chevronUp'
+  | 'chevronDown'
+  | 'vial';
 
 /**
  * Properties for the `Icon` component.
@@ -123,6 +133,11 @@ const solidIcons: Record<IconName, IconProp> = {
   xmark: faXmark,
   google: faGoogle,
   apple: faApple,
+  flag: faFlag,
+  flask: faFlask,
+  chevronUp: faChevronUp,
+  chevronDown: faChevronDown,
+  vial: faVial,
 };
 
 /**
@@ -154,9 +169,8 @@ const Icon = ({
   ...iconProps
 }: IconProps): JSX.Element => {
   // Select icon based on style
-  const faIcon = iconStyle === 'regular' && regularIcons[icon] 
-    ? regularIcons[icon] 
-    : solidIcons[icon];
+  const faIcon =
+    iconStyle === 'regular' && regularIcons[icon] ? regularIcons[icon] : solidIcons[icon];
 
   return (
     <IonText color={color} slot={slot} data-testid={testid}>

frontend/src/common/components/Router/TabNavigation.tsx

@@ -16,8 +16,8 @@ import ProfilePage from 'pages/Account/components/Profile/ProfilePage';
 import DiagnosticsPage from 'pages/Account/components/Diagnostics/DiagnosticsPage';
 import ChatPage from 'pages/Chat/ChatPage';
 import UploadPage from 'pages/Upload/UploadPage';
-import ReportDetailPage from 'pages/Reports/ReportDetailPage';
 import ReportsListPage from 'pages/Reports/ReportsListPage';
+import ReportDetailPage from 'pages/Reports/ReportDetailPage';
 import Processing from 'pages/Processing/Processing';
 
 /**
@@ -101,14 +101,13 @@ const TabNavigation = (): JSX.Element => {
 
         <IonTabBar slot="bottom" className="ls-tab-navigation__bar ion-hide-md-up">
           <IonTabButton className="ls-tab-navigation__bar-button" tab="home" href="/tabs/home">
-            <Icon
-              className="ls-tab-navigation__bar-button-icon"
-              icon="home"
-              size="xl"
-              fixedWidth
-            />
+            <Icon className="ls-tab-navigation__bar-button-icon" icon="home" size="xl" fixedWidth />
           </IonTabButton>
-          <IonTabButton className="ls-tab-navigation__bar-button" tab="reports" href="/tabs/reports">
+          <IonTabButton
+            className="ls-tab-navigation__bar-button"
+            tab="reports"
+            href="/tabs/reports"
+          >
             <Icon
               className="ls-tab-navigation__bar-button-icon"
               icon="fileLines"