Improve top of the screen

Author: GuidoBR

frontend/src/common/api/reportService.ts

@@ -11,7 +11,8 @@ const mockReports: MedicalReport[] = [
     category: ReportCategory.HEART,
     date: '2024-01-01',
     status: ReportStatus.UNREAD,
-    documentUrl: 'https://example.com/reports/1/heart_scan.pdf'
+    documentUrl: 'https://example.com/reports/1/heart_scan.pdf',
+    bookmarked: false
   }
 ];
 
@@ -129,7 +130,8 @@ export const uploadReport = async (
       category: determineCategory(file.name),
       date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
       status: ReportStatus.UNREAD,
-      documentUrl: `https://example.com/reports/${mockReports.length + 1}/${file.name}` // Mock URL
+      documentUrl: `https://example.com/reports/${mockReports.length + 1}/${file.name}`, // Mock URL
+      bookmarked: false
     };
 
     // Add to mock data
@@ -220,3 +222,37 @@ export const markReportAsRead = async (reportId: string): Promise<MedicalReport>
     throw new ReportError('Failed to mark report as read');
   }
 };
+
+/**
+ * Toggles the bookmark status of a report.
+ * @param reportId - ID of the report to toggle bookmark status
+ * @param isBookmarked - Boolean indicating if the report should be bookmarked or not
+ * @returns Promise with the updated report
+ */
+export const toggleReportBookmark = async (reportId: string, isBookmarked: boolean): Promise<MedicalReport> => {
+  try {
+    await axios.patch(`${API_URL}/api/reports/${reportId}/bookmark`, {
+      bookmarked: isBookmarked
+    }, await getAuthConfig());
+
+    // In a real implementation, this would return the response from the API
+    // return response.data;
+
+    // For now, we'll mock the response
+    const report = mockReports.find(r => r.id === reportId);
+
+    if (!report) {
+      throw new Error(`Report with ID ${reportId} not found`);
+    }
+
+    // Update the bookmark status
+    report.bookmarked = isBookmarked;
+
+    return { ...report };
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new ReportError(`Failed to toggle bookmark status: ${error.message}`);
+    }
+    throw new ReportError('Failed to toggle bookmark status');
+  }
+};

frontend/src/common/models/medicalReport.ts

@@ -33,4 +33,5 @@ export interface MedicalReport {
   content?: string;
   doctor?: string;
   facility?: string;
-} 
+  bookmarked?: boolean;
+}

frontend/src/common/utils/i18n/resources/en/report.json

@@ -18,6 +18,8 @@
     "wbc": "WBC (White Blood Cells)",
     "vitaminD": "Vitamin D (25-OH)",
     "cholesterol": "Total Cholesterol",
+    "bookmarkAdded": "Report added to bookmarks",
+    "bookmarkRemoved": "Report removed from bookmarks",
     "aiInsightsContent": "Based on the blood test results, our AI has identified several points of interest that may require attention or further discussion with your healthcare provider.",
     "insight1Title": "Hemoglobin Level",
     "insight1Content": "Your hemoglobin level is slightly below the reference range. This could indicate mild anemia, which may cause fatigue and weakness.",

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -1,13 +1,21 @@
 .report-detail-page {
   --background: var(--ion-color-light);
 
+  ion-toolbar {
+    --background: #fff;
+  }
+
+  ion-back-button {
+    --color: var(--ion-color-primary);
+  }
+
   &__header {
     background-color: #fff;
     border-bottom: 1px solid var(--ion-color-light-shade);
   }
 
   .report-category {
-    color: var(--ion-color-medium);
+    color: var(--ion-color-primary);
     font-size: 1rem;
     margin-bottom: 0.25rem;
   }
@@ -26,6 +34,29 @@
 
   .report-segment {
     padding-top: 0.5rem;
+
+    ion-segment-button {
+      --color: var(--ion-color-medium);
+      --color-checked: var(--ion-color-primary);
+      --indicator-color: var(--ion-color-primary);
+    }
+
+    &--ai-insights {
+      --padding-start: 1rem;
+      --padding-end: 1rem;
+    }
+  }
+
+  .bookmark-button {
+    --color: var(--ion-color-primary);
+
+    &--active {
+      --color: var(--ion-color-primary);
+    }
+
+    &--inactive {
+      --color: var(--ion-color-medium);
+    }
   }
 
   .report-metadata {

frontend/src/pages/Reports/ReportDetailPage.tsx

@@ -13,16 +13,17 @@ import {
   IonCardContent,
   IonText,
   IonButton,
-  IonIcon
+  IonIcon,
+  IonToast
 } from '@ionic/react';
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
-import { bookmarkOutline } from 'ionicons/icons';
+import { bookmark, bookmarkOutline } from 'ionicons/icons';
 import { MedicalReport } from 'common/models/medicalReport';
-import { useQuery } from '@tanstack/react-query';
-import { fetchAllReports } from 'common/api/reportService';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { fetchAllReports, toggleReportBookmark } from 'common/api/reportService';
 
 import './ReportDetailPage.scss';
 
@@ -51,13 +52,52 @@ const ReportDetailPage: React.FC = () => {
   const { reportId } = useParams<ReportDetailParams>();
   const [selectedSegment, setSelectedSegment] = useState<'aiInsights' | 'testResults'>('aiInsights');
   const [report, setReport] = useState<MedicalReport | null>(null);
+  const [showBookmarkToast, setShowBookmarkToast] = useState(false);
+  const [bookmarkToastMessage, setBookmarkToastMessage] = useState('');
+  const queryClient = useQueryClient();
 
   // Fetch all reports and find the one we need
   const { data: reports = [] } = useQuery({
     queryKey: ['reports'],
     queryFn: fetchAllReports
   });
 
+  // Toggle bookmark mutation
+  const { mutate: toggleBookmark } = useMutation({
+    mutationFn: ({ reportId, isBookmarked }: { reportId: string; isBookmarked: boolean }) => {
+      return toggleReportBookmark(reportId, isBookmarked);
+    },
+    onSuccess: (updatedReport) => {
+      // Update the report state with the updated bookmarked status
+      setReport(updatedReport);
+
+      // Update the reports query cache
+      queryClient.setQueryData(['reports'], (oldData: MedicalReport[] | undefined) => {
+        if (!oldData) return [];
+        return oldData.map(oldReport =>
+          oldReport.id === updatedReport.id ? updatedReport : oldReport
+        );
+      });
+
+      // Show toast notification
+      setBookmarkToastMessage(updatedReport.bookmarked ?
+        t('detail.bookmarkAdded') :
+        t('detail.bookmarkRemoved')
+      );
+      setShowBookmarkToast(true);
+    }
+  });
+
+  // Handle bookmark click
+  const handleBookmarkClick = () => {
+    if (report) {
+      toggleBookmark({
+        reportId: report.id,
+        isBookmarked: !report.bookmarked
+      });
+    }
+  };
+
   // Mock blood test data based on the screenshot
   const bloodTestData: BloodTestData = {
     results: [
@@ -118,8 +158,11 @@ const ReportDetailPage: React.FC = () => {
           </IonButtons>
           <IonTitle>{t('detail.title')}</IonTitle>
           <IonButtons slot="end">
-            <IonButton>
-              <IonIcon slot="icon-only" icon={bookmarkOutline} />
+            <IonButton
+              className={`bookmark-button ${report.bookmarked ? 'bookmark-button--active' : 'bookmark-button--inactive'}`}
+              onClick={handleBookmarkClick}
+            >
+              <IonIcon slot="icon-only" icon={report.bookmarked ? bookmark : bookmarkOutline} />
             </IonButton>
           </IonButtons>
         </IonToolbar>
@@ -209,6 +252,15 @@ const ReportDetailPage: React.FC = () => {
             </IonText>
           )}
         </div>
+
+        <IonToast
+          isOpen={showBookmarkToast}
+          onDidDismiss={() => setShowBookmarkToast(false)}
+          message={bookmarkToastMessage}
+          duration={2000}
+          position="bottom"
+          color="primary"
+        />
       </IonContent>
     </IonPage>
   );