Add back button and refactor components to use FC type for consistency

Author: adamrefaey

frontend/src/assets/icons/back.svg

@@ -25,6 +25,19 @@
     color: #313e4c;
   }
 
+  &__back-button {
+    border: none;
+    background: transparent;
+    color: #435ff0;
+    font-size: 24px;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: 0.9em;
+    margin-bottom: 1em;
+  }
+
   &__close-button {
     border: none;
     background: transparent;

frontend/src/pages/ReportDetail/ReportDetailPage.scss

@@ -1,5 +1,5 @@
 import { IonPage, IonContent } from '@ionic/react';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import './ReportDetailPage.scss';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -33,7 +33,7 @@ const fetchReportById = async (id: string): Promise<MedicalReport> => {
  * Page component for displaying detailed medical report analysis.
  * This shows AI insights and original report data with flagged values.
  */
-const ReportDetailPage: React.FC = () => {
+const ReportDetailPage: FC = () => {
   const { reportId } = useParams<{ reportId: string }>();
   const history = useHistory();
   const { t } = useTranslation();
@@ -88,11 +88,6 @@ const ReportDetailPage: React.FC = () => {
     setActiveTab(tab);
   };
 
-  // Handle close button
-  const handleClose = () => {
-    history.push('/tabs/home');
-  };
-
   // Handle action buttons
   const handleDiscard = async (setIsProcessing: (isProcessing: boolean) => void) => {
     try {
@@ -151,7 +146,7 @@ const ReportDetailPage: React.FC = () => {
     <IonPage className="report-detail-page">
       <IonContent fullscreen>
         {/* Header component */}
-        <ReportHeader reportData={reportData} onClose={handleClose} />
+        <ReportHeader reportData={reportData} />
 
         {/* Tab selector for AI Insights vs Original Report */}
         <ReportTabs activeTab={activeTab} onTabChange={handleTabChange} />

frontend/src/pages/ReportDetail/ReportDetailPage.tsx

@@ -1,15 +1,14 @@
-import React, { useState } from 'react';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ConfirmationModal from '../../../common/components/Modal/ConfirmationModal';
 
 interface ActionButtonsProps {
   onDiscard: (setIsProcessing: (isProcessing: boolean) => void) => Promise<void>;
   onNewUpload: (setIsProcessing: (isProcessing: boolean) => void) => Promise<void>;
   reportTitle?: string;
-  reportId?: string;
 }
 
-const ActionButtons: React.FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportTitle }) => {
+const ActionButtons: FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportTitle }) => {
   const { t } = useTranslation(['reportDetail', 'common']);
   const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
   const [showConfirmNewUpload, setShowConfirmNewUpload] = useState(false);

frontend/src/pages/ReportDetail/components/ActionButtons.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, useState } from 'react';
 import { MedicalReport, LabValue } from '../../../common/models/medicalReport';
 import EmergencyAlert from './EmergencyAlert';
 import FlaggedValuesSection from './FlaggedValuesSection';
@@ -10,13 +10,10 @@ interface AiAnalysisTabProps {
   isEmergencyAlertVisible?: boolean;
 }
 
-const AiAnalysisTab: React.FC<AiAnalysisTabProps> = ({
-  reportData,
-  isEmergencyAlertVisible = true,
-}) => {
+const AiAnalysisTab: FC<AiAnalysisTabProps> = ({ reportData, isEmergencyAlertVisible = true }) => {
   // State to track expanded sections
-  const [flaggedValuesExpanded, setFlaggedValuesExpanded] = React.useState(true);
-  const [normalValuesExpanded, setNormalValuesExpanded] = React.useState(true);
+  const [flaggedValuesExpanded, setFlaggedValuesExpanded] = useState(true);
+  const [normalValuesExpanded, setNormalValuesExpanded] = useState(true);
 
   // Toggle expanded state of sections
   const toggleFlaggedValues = () => setFlaggedValuesExpanded(!flaggedValuesExpanded);

frontend/src/pages/ReportDetail/components/AiAnalysisTab.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import { FC, useState } from 'react';
 import { IonText } from '@ionic/react';
 import AIAssistantModal from '../../../common/components/AIAssistant/AIAssistantModal';
 import './AiAssistantNotice.scss';
 
 /**
  * Component to display an AI Assistant notice with a link to open the AI Chat modal.
  */
-const AiAssistantNotice: React.FC = () => {
+const AiAssistantNotice: FC = () => {
   const [isAIAssistantOpen, setIsAIAssistantOpen] = useState(false);
 
   const handleOpenAIAssistant = () => {

frontend/src/pages/ReportDetail/components/AiAssistantNotice.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import redAlertIcon from 'assets/icons/red-alert.svg';
 
-const EmergencyAlert: React.FC = () => {
+const EmergencyAlert: FC = () => {
   const { t } = useTranslation();
 
   return (

frontend/src/pages/ReportDetail/components/EmergencyAlert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from '../../../common/components/Icon/Icon';
 import { LabValue } from '../../../common/models/medicalReport';
@@ -11,7 +11,7 @@ interface FlaggedValuesSectionProps {
   onToggle: () => void;
 }
 
-const FlaggedValuesSection: React.FC<FlaggedValuesSectionProps> = ({
+const FlaggedValuesSection: FC<FlaggedValuesSectionProps> = ({
   flaggedValues,
   isExpanded,
   onToggle,

frontend/src/pages/ReportDetail/components/FlaggedValuesSection.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import './InfoCard.scss';
 import bulbIcon from '../../../assets/icons/bulb.svg';
 
-const InfoCard: React.FC = () => {
+const InfoCard: FC = () => {
   return (
     <div className="info-card">
       <div className="info-card__icon">

frontend/src/pages/ReportDetail/components/InfoCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LabValue } from '../../../common/models/medicalReport';
 import classNames from 'classnames';
@@ -7,7 +7,7 @@ interface LabValueItemProps {
   item: LabValue;
 }
 
-const LabValueItem: React.FC<LabValueItemProps> = ({ item }) => {
+const LabValueItem: FC<LabValueItemProps> = ({ item }) => {
   const { t } = useTranslation();
 
   // Parse suggestions into bullet points more intelligently