Merge pull request #156 from ModusCreateOrg/ADE-200-Adam

[ADE-200] UI fixes

Author: adamrefaey

frontend/src/assets/img/report-header-bg.svg

@@ -18,7 +18,7 @@ import DiagnosticsPage from 'pages/Account/components/Diagnostics/DiagnosticsPag
 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 ReportDetailPage from 'pages/ReportDetail/ReportDetailPage';
 import ProcessingPage from 'pages/Processing/ProcessingPage';
 
 // Import SVG icons

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

@@ -3,22 +3,38 @@ import { render as defaultRender, screen } from '@testing-library/react';
 import TabNavigation from '../TabNavigation';
 import '@testing-library/jest-dom';
 
-// Create a mock i18n instance - MOVED UP before any uses
-const mockI18n = {
-  t: (key: string, options?: Record<string, unknown>) => options?.defaultValue || key,
-  language: 'en',
-  languages: ['en'],
-  use: () => mockI18n, // Return itself for chaining
-  init: () => mockI18n, // Return itself for chaining
-  changeLanguage: vi.fn(),
-  exists: vi.fn(() => true),
-  addResourceBundle: vi.fn(),
-};
+// vi.mock calls must come before any variable they reference
+// All mocks are hoisted to the top, so we need to define them before they're used
 
 // Mock i18next
-vi.mock('i18next', () => ({
-  default: mockI18n,
-}));
+vi.mock('i18next', () => {
+  return {
+    default: {
+      t: (key: string, options?: Record<string, unknown>) => options?.defaultValue || key,
+      language: 'en',
+      languages: ['en'],
+      use: () => ({
+        t: (key: string, options?: Record<string, unknown>) => options?.defaultValue || key,
+        language: 'en',
+        languages: ['en'],
+        changeLanguage: vi.fn(),
+        exists: vi.fn(() => true),
+        addResourceBundle: vi.fn(),
+      }),
+      init: () => ({
+        t: (key: string, options?: Record<string, unknown>) => options?.defaultValue || key,
+        language: 'en',
+        languages: ['en'],
+        changeLanguage: vi.fn(),
+        exists: vi.fn(() => true),
+        addResourceBundle: vi.fn(),
+      }),
+      changeLanguage: vi.fn(),
+      exists: vi.fn(() => true),
+      addResourceBundle: vi.fn(),
+    },
+  };
+});
 
 // Mock i18next-browser-languagedetector
 vi.mock('i18next-browser-languagedetector', () => ({
@@ -36,9 +52,18 @@ vi.mock('react-i18next', () => ({
   I18nextProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
-// Mock common/utils/i18n
+// Mock common/utils/i18n using factory function that doesn't depend on mockI18n
 vi.mock('common/utils/i18n', () => ({
-  default: mockI18n,
+  default: {
+    t: (key: string, options?: Record<string, unknown>) => options?.defaultValue || key,
+    language: 'en',
+    languages: ['en'],
+    use: vi.fn().mockReturnThis(),
+    init: vi.fn().mockReturnThis(),
+    changeLanguage: vi.fn(),
+    exists: vi.fn(() => true),
+    addResourceBundle: vi.fn(),
+  },
 }));
 
 // Mock the window object for Ionic

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

@@ -8,6 +8,7 @@
   &__header {
     padding: 20px var(--padding-horizontal) 16px;
     position: relative;
+    background-image: url('../../assets/img/report-header-bg.svg');
   }
 
   &__title-container {

frontend/src/pages/Reports/ReportDetailPage.scss renamed to frontend/src/pages/ReportDetail/ReportDetailPage.scss

@@ -27,9 +27,7 @@ const AiAnalysisTab: React.FC<AiAnalysisTabProps> = ({
   const flaggedValues: LabValue[] = reportData.labValues.filter(
     (value) => value.status !== 'normal',
   );
-  const normalValues: LabValue[] = reportData.labValues.filter(
-    (value) => value.status === 'normal',
-  );
+  const normalValues: LabValue[] = [];
 
   // Format confidence score for display
   const confidenceScore = reportData.confidence;

frontend/src/pages/Reports/ReportDetailPage.tsx renamed to frontend/src/pages/ReportDetail/ReportDetailPage.tsx

@@ -27,7 +27,7 @@
 }
 
 // Media Queries for larger screens
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .info-card {
     max-width: 600px;
     margin-left: auto;