feat: Refactor TabNavigation to use ProcessingPage component and add new ProcessingPage styles

Author: adamrefaey

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

@@ -18,7 +18,7 @@ import ChatPage from 'pages/Chat/ChatPage';
 import UploadPage from 'pages/Upload/UploadPage';
 import ReportsListPage from 'pages/Reports/ReportsListPage';
 import ReportDetailPage from 'pages/Reports/ReportDetailPage';
-import Processing from 'pages/Processing/Processing';
+import ProcessingPage from 'pages/Processing/ProcessingPage';
 
 /**
  * The `TabNavigation` component provides a router outlet for all of the
@@ -92,7 +92,7 @@ const TabNavigation = (): JSX.Element => {
             <ReportDetailPage />
           </Route>
           <Route exact path="/tabs/processing">
-            <Processing />
+            <ProcessingPage />
           </Route>
           <Route exact path="/">
             <Redirect to="/tabs/home" />

…end/src/pages/Processing/Processing.scss …src/pages/Processing/ProcessingPage.scssfrontend/src/pages/Processing/Processing.scss renamed to frontend/src/pages/Processing/ProcessingPage.scss frontend/src/pages/Processing/Processing.scss renamed to frontend/src/pages/Processing/ProcessingPage.scss

@@ -4,15 +4,15 @@ import Avatar from '../../common/components/Icon/Avatar';
 import { useLocation, useHistory } from 'react-router-dom';
 import { useEffect, useState, useRef } from 'react';
 import { useAxios } from '../../common/hooks/useAxios';
-import './Processing.scss';
+import './ProcessingPage.scss';
 import { getAuthConfig } from 'common/api/reportService';
 const API_URL = import.meta.env.VITE_BASE_URL_API || '';
 
 /**
  * Processing page that shows while the system analyzes uploaded documents
  * This page automatically displays after a successful upload
  */
-const Processing: React.FC = () => {
+const ProcessingPage: React.FC = () => {
   const currentUser = useCurrentUser();
   const firstName = currentUser?.name?.split(' ')[0];
   const axios = useAxios();
@@ -166,4 +166,4 @@ const Processing: React.FC = () => {
   );
 };
 
-export default Processing;
+export default ProcessingPage;