Enhance LabValueItem component to intelligently parse suggestions and improve status label handling

Author: adamrefaey

frontend/src/common/api/__tests__/reportService.test.ts

@@ -5,6 +5,7 @@ import {
   fetchLatestReports,
   fetchAllReports,
   markReportAsRead,
+  getAuthConfig,
 } from '../reportService';
 import { ReportCategory, ReportStatus } from '../../models/medicalReport';
 import axios from 'axios';
@@ -22,6 +23,17 @@ vi.mock('axios', () => ({
   },
 }));
 
+// Mock auth
+vi.mock('@aws-amplify/auth', () => ({
+  fetchAuthSession: vi.fn().mockResolvedValue({
+    tokens: {
+      idToken: {
+        toString: () => 'mock-id-token',
+      },
+    },
+  }),
+}));
+
 // Mock dynamic imports to handle the service functions
 vi.mock('../reportService', async (importOriginal) => {
   const actual = (await importOriginal()) as typeof ReportServiceModule;
@@ -31,6 +43,15 @@ vi.mock('../reportService', async (importOriginal) => {
     // Keep the ReportError class
     ReportError: actual.ReportError,
 
+    // Mock getAuthConfig to avoid authentication issues in tests
+    getAuthConfig: async () => ({
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer mock-id-token',
+      },
+    }),
+
     // Mock the API functions
     uploadReport: async (file: File, onProgress?: (progress: number) => void) => {
       try {
@@ -80,23 +101,24 @@ vi.mock('../reportService', async (importOriginal) => {
       }
     },
 
-    // Keep other functions as is
-    markReportAsRead: actual.markReportAsRead,
-    getAuthConfig: actual.getAuthConfig,
+    // Mock markReportAsRead to avoid the dependency on getAuthConfig
+    markReportAsRead: async (reportId: string) => {
+      try {
+        const response = await axios.patch(`/api/reports/${reportId}`, {
+          status: 'READ',
+        });
+        return response.data;
+      } catch (error) {
+        throw new actual.ReportError(
+          error instanceof Error
+            ? `Failed to mark report as read: ${error.message || 'Unknown error'}`
+            : 'Failed to mark report as read',
+        );
+      }
+    },
   };
 });
 
-// Mock auth
-vi.mock('@aws-amplify/auth', () => ({
-  fetchAuthSession: vi.fn().mockResolvedValue({
-    tokens: {
-      idToken: {
-        toString: () => 'mock-id-token',
-      },
-    },
-  }),
-}));
-
 // Mock response data
 const mockReports = [
   {

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -239,103 +239,110 @@
 
   &__item {
     background-color: #ffffff;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 0;
-    margin-top: 12px;
-    margin-bottom: 8px;
-    border-top: 1px solid #ebeef8;
+    margin: 16px;
     overflow: hidden;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+    border: 1px solid #ebeef8;
   }
 
   &__item-header {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: 12px 16px;
+    padding: 16px;
     background-color: #fff;
 
     &--high {
       background-color: rgba(201, 58, 84, 0.08);
+      border-bottom: 1px solid rgba(201, 58, 84, 0.15);
     }
 
     &--low {
-      background-color: rgba(108, 99, 255, 0.08);
+      background-color: rgba(250, 173, 113, 0.08);
+      border-bottom: 1px solid rgba(250, 173, 113, 0.15);
     }
   }
 
   &__item-name {
-    font-weight: 500;
-    font-size: 15px;
+    font-weight: 600;
+    font-size: 16px;
     margin-right: 12px;
     flex: 1;
     letter-spacing: 0.26px;
-    line-height: 15.7px;
+    line-height: 20px;
     color: #313e4c;
   }
 
   &__item-level {
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 4px;
+    font-size: 13px;
+    padding: 4px 12px;
+    border-radius: 12px;
     margin-right: 16px;
     font-weight: 600;
-    text-transform: uppercase;
+    text-transform: capitalize;
 
     &--high {
-      background-color: rgba(201, 58, 84, 0.1);
-      color: #c93a54;
+      background-color: #c93a54;
+      color: white;
     }
 
     &--low {
-      background-color: rgba(108, 99, 255, 0.1);
-      color: #435ff0;
+      background-color: #ffcf99;
+      color: white;
     }
   }
 
   &__item-value {
     font-weight: 600;
-    font-size: 15px;
+    font-size: 16px;
     white-space: nowrap;
     color: #313e4c;
   }
 
   &__item-details {
     color: #444;
-    padding: 10px 16px 16px;
-    background-color: rgba(235, 238, 248, 0.3);
+    padding: 16px;
+    background-color: rgba(248, 249, 251, 0.6);
   }
 
   &__item-section {
-    margin-bottom: 12px;
+    margin-bottom: 20px;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     h4 {
-      font-size: 14px;
+      font-size: 15px;
       color: #313e4c;
-      margin: 0 0 4px 0;
+      margin: 0 0 8px 0;
       font-weight: 600;
     }
 
     p {
       margin: 0;
       font-size: 14px;
-      line-height: 1.4;
+      line-height: 1.5;
       color: #5c6d80;
     }
   }
 
   &__item-list {
     margin: 0;
-    padding-left: 18px;
-    font-size: 13px;
+    padding-left: 20px;
+    font-size: 14px;
     line-height: 1.5;
+    color: #5c6d80;
 
     li {
-      margin-bottom: 6px;
+      margin-bottom: 10px;
       padding-left: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 

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

@@ -9,6 +9,69 @@ interface LabValueItemProps {
 const LabValueItem: React.FC<LabValueItemProps> = ({ item }) => {
   const { t } = useTranslation();
 
+  // Parse suggestions into bullet points more intelligently
+  const getSuggestionsList = (suggestions: string): string[] => {
+    if (!suggestions) return [];
+
+    // Handle case where the text is already separated by bullet points
+    if (suggestions.includes('•')) {
+      return suggestions
+        .split('•')
+        .filter(Boolean)
+        .map((item) => item.trim());
+    }
+
+    // Handle case where items are separated by hyphens
+    if (suggestions.includes('-')) {
+      return suggestions
+        .split('-')
+        .filter(Boolean)
+        .map((item) => item.trim());
+    }
+
+    // Handle case with numbered lists (1., 2., etc.)
+    if (/\d+\.\s/.test(suggestions)) {
+      return suggestions
+        .split(/\d+\.\s/)
+        .filter(Boolean)
+        .map((item) => item.trim());
+    }
+
+    // Split by periods if it seems like sentences
+    if (suggestions.includes('.')) {
+      // Don't split on decimal points in numbers (e.g. "10.5")
+      const sentences = suggestions
+        .replace(/(\d+)\.(\d+)/g, '$1@$2')
+        .split('.')
+        .map((s) => s.replace(/@/g, '.').trim())
+        .filter(Boolean);
+      return sentences;
+    }
+
+    // If we can't detect a pattern, return the whole string as one item
+    return [suggestions];
+  };
+
+  const suggestionItems = getSuggestionsList(item.suggestions);
+
+  // Determine classes and text for status label based on status
+  const getStatusInfo = () => {
+    if (item.status === 'high') {
+      return {
+        className: 'report-detail-page__item-level--high',
+        text: t('report.high', { ns: 'reportDetail', defaultValue: 'High' }),
+      };
+    } else if (item.status === 'low') {
+      return {
+        className: 'report-detail-page__item-level--low',
+        text: t('report.low', { ns: 'reportDetail', defaultValue: 'Low' }),
+      };
+    }
+    return { className: '', text: '' };
+  };
+
+  const statusInfo = getStatusInfo();
+
   return (
     <div className="report-detail-page__item">
       <div
@@ -20,10 +83,8 @@ const LabValueItem: React.FC<LabValueItemProps> = ({ item }) => {
       >
         <div className="report-detail-page__item-name">{item.name}</div>
         {item.status !== 'normal' && (
-          <div
-            className={`report-detail-page__item-level report-detail-page__item-level--${item.status.toLowerCase()}`}
-          >
-            {item.status}
+          <div className={`report-detail-page__item-level ${statusInfo.className}`}>
+            {statusInfo.text}
           </div>
         )}
         <div className="report-detail-page__item-value">
@@ -32,12 +93,24 @@ const LabValueItem: React.FC<LabValueItemProps> = ({ item }) => {
       </div>
       <div className="report-detail-page__item-details">
         <div className="report-detail-page__item-section">
-          <h4>{t('report.conclusion.title', { ns: 'reportDetail' })}:</h4>
+          <h4>
+            {t('report.conclusion.title', { ns: 'reportDetail', defaultValue: 'Conclusion' })}:
+          </h4>
           <p>{item.conclusion}</p>
         </div>
         <div className="report-detail-page__item-section">
-          <h4>{t('report.suggestions.title', { ns: 'reportDetail' })}:</h4>
-          <p>{item.suggestions}</p>
+          <h4>
+            {t('report.suggestions.title', { ns: 'reportDetail', defaultValue: 'Suggestions' })}:
+          </h4>
+          {suggestionItems.length > 0 ? (
+            <ul className="report-detail-page__item-list">
+              {suggestionItems.map((suggestion, index) => (
+                <li key={index}>{suggestion}</li>
+              ))}
+            </ul>
+          ) : (
+            <p>{item.suggestions}</p>
+          )}
         </div>
       </div>
     </div>