Refactor ReportHeader component to display report title within category wrapper and adjust margin styles for better layout

Author: adamrefaey

frontend/src/pages/Processing/ProcessingPage.tsx

@@ -26,7 +26,6 @@ const ProcessingPage: React.FC = () => {
   const [processingError, setProcessingError] = useState<string | null>(null);
   const [errorHeading, setErrorHeading] = useState<string | null>(null);
   const statusCheckIntervalRef = useRef<number | null>(null);
-  const lastTriggeredTime = useRef<number | null>(null);
 
   // Get the location state which may contain the reportId (previously filePath)
   const location = useLocation<{ reportId: string }>();
@@ -127,17 +126,12 @@ const ProcessingPage: React.FC = () => {
     // Reset error state and try processing the same file again
     setError(null, null);
     setIsProcessing(true);
-    lastTriggeredTime.current = Date.now();
     processFile();
   };
 
   // Send the API request when component mounts
   useEffect(() => {
-    // check last triggered time to prevent multiple calls, if it's within 100ms then ignore
-    if ((lastTriggeredTime.current && lastTriggeredTime.current > Date.now() - 100) || !reportId) {
-      return;
-    }
-
+    clearStatusCheckInterval();
     execute();
 
     // Clean up the interval when the component unmounts

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -50,7 +50,6 @@
     justify-content: space-between;
     align-items: center;
     margin-top: 16px;
-    margin-bottom: 4px;
   }
 
   &__category {
@@ -84,7 +83,7 @@
     font-family: var(--font-family-base);
     font-size: 18px;
     font-weight: 600;
-    margin: 4px 0 16px;
+    margin: 0 0 16px;
     color: #313e4c;
   }
 

frontend/src/pages/Reports/components/ReportHeader.tsx

@@ -26,6 +26,7 @@ const ReportHeader: React.FC<ReportHeaderProps> = ({ reportData, onClose }) => {
       <div className="report-detail-page__category-wrapper">
         <span className="report-detail-page__category">
           {reportData.category && t(`list.${reportData.category}Category`, { ns: 'reportDetail' })}
+          <h2 className="report-detail-page__subtitle">{reportData.title}</h2>
         </span>
         <button className="report-detail-page__bookmark-button">
           {reportData.bookmarked ? (
@@ -35,7 +36,6 @@ const ReportHeader: React.FC<ReportHeaderProps> = ({ reportData, onClose }) => {
           )}
         </button>
       </div>
-      <h2 className="report-detail-page__subtitle">{reportData.title}</h2>
     </div>
   );
 };