ADE-200

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

@@ -13,7 +13,7 @@
       "greeting": "Welcome, {{name}}!",
       "howAreYou": "How Are You Today?",
       "aiAssistant": {
-        "title": "MedReport AI is with you!",
+        "title": "MedReport AI\nis with you!",
         "description": "Ask questions about your medical reports and get instant answers.",
         "button": "Ask Questions"
       }

frontend/src/pages/Home/HomePage.scss

@@ -19,6 +19,7 @@
     }
 
     &-title {
+      font-family: 'Merriweather', serif;
       font-size: 1rem;
       color: var(--ion-color-medium);
       margin: 0 0 0.25rem;
@@ -70,7 +71,7 @@
         font-weight: 700;
         margin: 0 0 0.25rem;
         text-align: left;
-        white-space: normal;
+        white-space: pre-line;
         word-wrap: break-word;
       }
 
@@ -251,16 +252,18 @@
 
 // Add a more specific selector to override Ionic's default styles
 ion-card.home-page__ai-card ion-card-content h3.home-page__ai-card-title {
+  font-family: 'Inter', serif;
   color: white;
-  font-size: 1rem;
+  font-size: 1.25rem;
   font-weight: 700;
   margin: 0 0 0.25rem;
   text-align: left;
-  white-space: normal;
+  white-space: pre-line;
   word-wrap: break-word;
 }
 
 ion-card.home-page__ai-card ion-card-content span.home-page__ai-card-button-inline {
+  font-family: 'Merriweather', serif;
   font-size: 0.875rem;
   color: #ffbe5b;
   font-weight: 500;

frontend/src/pages/Home/components/ReportItem/ReportItem.scss

@@ -8,33 +8,36 @@
 
   &__content {
     flex: 1;
-    margin-left: 16px;
+    margin-left: 8px;
+    width: 60%;
+  }
+
+  &__status-bullet {
+      width: 8px;
+      height: 8px;
+      margin-top: 5px;
+      display: inline-block;
+      background-color: #fead7f;
+      border-radius: 50%;
+      vertical-align: middle;
   }
 
   &__category-label {
     font-size: 13px;
     color: #4355b9;
     margin-bottom: 4px;
     font-weight: 700;
-
-    // Add a small bullet before brain category
-    &:before {
-      content: '';
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      background-color: #fd6a6a;
-      border-radius: 50%;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
   }
 
   &__title {
     font-weight: 600;
     font-size: 16px;
     color: #111;
     margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &__date {
@@ -51,11 +54,11 @@
     margin-right: 6px;
 
     &-icon {
-      font-size: 12px;
+      font-size: 11px;
       color: #aaa;
       transition: all 0.2s ease;
-      width: 12px;
-      height: 12px;
+      width: 34px;
+      height: 34px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -67,7 +70,8 @@
 
       &--active {
         color: white;
-        background-color: #4355b9;
+        /*background-color: #4355b9;*/
+        background-color: #4765ff;
         box-shadow: none;
       }
     }

frontend/src/pages/Home/components/ReportItem/ReportItem.tsx

@@ -28,7 +28,6 @@ const ReportItem: React.FC<ReportItemProps> = ({
 }) => {
   const { t } = useTranslation(['common', 'report']);
   const { title, category, createdAt, status, bookmarked } = report;
-  console.log('status', status);
 
   // Treat category as string
   const categoryStr = category.toString().toLowerCase();
@@ -85,7 +84,11 @@ const ReportItem: React.FC<ReportItemProps> = ({
   return (
     <div className="report-item" onClick={onClick}>
       {getCategoryIcon()}
-
+      {status === 'UNREAD' && (
+          <div className="report-item__status-bullet">
+            <figure className="circle"></figure>
+          </div>
+        )}
       <div className="report-item__content">
         <div className="report-item__category-label">
           {t(getCategoryTranslationKey(), { ns: 'report' })}

frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss

@@ -1,20 +1,21 @@
 .filter-panel {
+  font-family: 'Inter', serif;
   padding: 1.5rem 1rem;
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: white;
 
   &__title {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 1.5rem;
     color: var(--ion-text-color);
   }
 
   &__category-section {
     flex: 1;
-    margin-bottom: 1.5rem;
+    margin-bottom: 3rem;
   }
 
   &__category-title {
@@ -25,23 +26,31 @@
   }
 
   &__category-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    width: 100%;
   }
 
   &__category-button {
     background-color: white;
-    border: 1px solid #e0e0e0;
+    border: 1px solid #838B94;
     border-radius: 8px;
-    padding: 0.75rem 1.25rem;
+    padding: 0.75rem 0.5rem;
     font-size: 14px;
     font-weight: 500;
     color: var(--ion-color-medium);
     transition: all 0.2s ease;
     cursor: pointer;
+    text-align: center;
+    width: 100%;
+    height: 41px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &--selected {
+      font-weight: 600;
       background-color: #313E4C;
       color: white;
       border-color: #313E4C;
@@ -50,16 +59,20 @@
 
   &__actions {
     padding-bottom: env(safe-area-inset-bottom);
+    margin-top: auto;
   }
 
   &__apply-button {
+    font-family: 'Inter', serif;
     --background: #435FF0;
     --color: white;
     height: 48px;
     font-weight: 600;
     margin: 0;
-    --border-radius: 8px;
+    --border-radius: 12px;
     text-transform: none;
     font-size: 16px;
+    letter-spacing: 0;
+    box-shadow: none;
   }
 }

frontend/src/vitest.d.ts

@@ -0,0 +1,18 @@
+// This declaration file adds the global types for Vitest testing functions
+// that TypeScript cannot find automatically
+
+import 'vitest';
+import type { TestContext } from 'vitest';
+
+declare global {
+  // Declare global testing functions
+  const describe: typeof import('vitest')['describe'];
+  const it: typeof import('vitest')['it'];
+  const test: typeof import('vitest')['test'];
+  const expect: typeof import('vitest')['expect'];
+  const beforeEach: (fn: (context: TestContext) => void) => void;
+  const afterEach: (fn: (context: TestContext) => void) => void;
+  const beforeAll: (fn: (context: TestContext) => void) => void;
+  const afterAll: (fn: (context: TestContext) => void) => void;
+  const vi: typeof import('vitest')['vi'];
+}

frontend/tsconfig.json

@@ -25,6 +25,6 @@
       "test/*": ["./src/test/*"]
     }
   },
-  "include": ["src", "src/types"],
+  "include": ["src", "src/types", "src/vitest.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }