[ADE-66] create ReportDetailPage & add report-status api gateway endpoint

backend/src/iac/backend-stack.ts

@@ -400,6 +400,9 @@ export class BackendStack extends cdk.Stack {
     // Create the 'status' resource under ':id'
     const documentProcessorResource = apiResource.addResource('document-processor');
     const processFileResource = documentProcessorResource.addResource('process-file');
+    // Add report-status/:reportId resource under document-processor
+    const reportStatusDPResource = documentProcessorResource.addResource('report-status');
+    const reportStatusDPIdResource = reportStatusDPResource.addResource('{reportId}');
 
     // Define integration options once for reuse
     const integrationOptions = {
@@ -467,6 +470,19 @@ export class BackendStack extends cdk.Stack {
       options: integrationOptions,
     });
 
+    // Integration for document-processor/report-status/{reportId}
+    const getReportStatusDPIntegration = new apigateway.Integration({
+      type: apigateway.IntegrationType.HTTP_PROXY,
+      integrationHttpMethod: 'GET',
+      uri: `${serviceUrl}/api/document-processor/report-status/{reportId}`,
+      options: {
+        ...integrationOptions,
+        requestParameters: {
+          'integration.request.path.reportId': 'method.request.path.reportId',
+        },
+      },
+    });
+
     // Define method options with authorization
     const methodOptions = {
       authorizer: authorizer,
@@ -495,6 +511,13 @@ export class BackendStack extends cdk.Stack {
 
     // Add POST method to process file
     processFileResource.addMethod('POST', processFileIntegration, methodOptions);
+    // Add GET method to document-processor/report-status/{reportId}
+    reportStatusDPIdResource.addMethod('GET', getReportStatusDPIntegration, {
+      ...methodOptions,
+      requestParameters: {
+        'method.request.path.reportId': true,
+      },
+    });
 
     // Add CORS to each resource separately - after methods have been created
     const corsOptions = {
@@ -534,6 +557,11 @@ export class BackendStack extends cdk.Stack {
       ...corsOptions,
       allowCredentials: false,
     });
+    // Add CORS to new resource
+    reportStatusDPIdResource.addCorsPreflight({
+      ...corsOptions,
+      allowCredentials: false,
+    });
 
     // Configure Gateway Responses to add CORS headers to error responses
     const gatewayResponseTypes = [

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"