Merge pull request #10 from ModusCreateOrg/ADE-27

[ADE-27] - Personalized Home Screen with Latest Medical Reports and AI Assistance

Author: jkestering-modus

.cursor/rules/general.mdc

@@ -56,10 +56,18 @@ Technologies:
 
  For visual context, you can use this images:
 
- [1 - Home.png](mdc:docs/assets/images/1 - Home.png)
- [3 - upload2.png](mdc:docs/assets/images/3 - upload2.png)
- [4 - processing.png](mdc:docs/assets/images/4 - processing.png)
- [5 - Results analysis.png](mdc:docs/assets/images/5 - Results analysis.png)
- [6 - Results Archive.png](mdc:docs/assets/images/6 - Results Archive.png)
- [8 -  AI.png](mdc:docs/assets/images/8 -  AI.png)
+[1 - Home copy.png](mdc:docs/assets/images/1 - Home copy.png)
+[1 - Home_avatar.png](mdc:docs/assets/images/1 - Home_avatar.png)
+[1a - Home_NoReports.png](mdc:docs/assets/images/1a - Home_NoReports.png)
+[1b - Home_NoLoad.png](mdc:docs/assets/images/1b - Home_NoLoad.png)
+[2 - upload1.png](mdc:docs/assets/images/2 - upload1.png)
+[2 - upload1_url.png](mdc:docs/assets/images/2 - upload1_url.png)
+[3 - upload2.png](mdc:docs/assets/images/3 - upload2.png)
+[3 - upload2_url.png](mdc:docs/assets/images/3 - upload2_url.png)
+[4 - processing.png](mdc:docs/assets/images/4 - processing.png)
+[5 - Results analysis.png](mdc:docs/assets/images/5 - Results analysis.png)
+[6 - Results Archive.png](mdc:docs/assets/images/6 - Results Archive.png)
+[7 - Detail.png](mdc:docs/assets/images/7 - Detail.png)
 
+ 
+AWS architecture: [aws architecture.pdf](mdc:docs/assets/aws architecture.pdf)

frontend/.husky/pre-commit renamed to .husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-cd frontend && npx lint-staged
+cd frontend && npm run lint

frontend/.husky/pre-push renamed to .husky/pre-push

@@ -36,6 +36,7 @@
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
     "@ionic/react": "8.4.1",
@@ -44,6 +45,7 @@
     "@tanstack/react-query-devtools": "5.62.16",
     "axios": "1.7.9",
     "classnames": "2.5.1",
+    "date-fns": "4.1.0",
     "dayjs": "1.11.13",
     "formik": "2.4.6",
     "i18next": "24.2.1",

docs/assets/aws architecture.pdf

@@ -0,0 +1,116 @@
+import axios from 'axios';
+import { MedicalReport, ReportStatus, ReportCategory } from '../models/medicalReport';
+
+// Base API URL - should be configured from environment variables in a real app
+// Removed unused API_URL variable
+
+/**
+ * Error thrown when report operations fail.
+ */
+export class ReportError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ReportError';
+  }
+}
+
+/**
+ * Fetches the latest reports (limited to a specified count).
+ * @param limit - Maximum number of reports to fetch
+ * @returns Promise with the latest reports
+ */
+export const fetchLatestReports = async (limit = 3): Promise<MedicalReport[]> => {
+  try {
+    // In a real app, this would be an actual API call
+    // const response = await axios.get(`/api/reports/latest?limit=${limit}`);
+    // return response.data;
+    
+    // For now, return mock data
+    return mockReports.slice(0, limit);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new ReportError(`Failed to fetch latest reports: ${error.message}`);
+    }
+    throw new ReportError('Failed to fetch latest reports');
+  }
+};
+
+/**
+ * Fetches all reports.
+ * @returns Promise with all reports
+ */
+export const fetchAllReports = async (): Promise<MedicalReport[]> => {
+  try {
+    // In a real app, this would be an actual API call
+    // const response = await axios.get(`/api/reports`);
+    // return response.data;
+    
+    // For now, return mock data
+    return mockReports;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new ReportError(`Failed to fetch all reports: ${error.message}`);
+    }
+    throw new ReportError('Failed to fetch all reports');
+  }
+};
+
+/**
+ * Marks a report as read.
+ * @param reportId - ID of the report to mark as read
+ * @returns Promise with the updated report
+ */
+export const markReportAsRead = async (reportId: string): Promise<MedicalReport> => {
+  try {
+    // In a real app, this would be an actual API call
+    // const response = await axios.patch(`/api/reports/${reportId}`, {
+    //   status: ReportStatus.READ
+    // });
+    // return response.data;
+    
+    // For now, update mock data
+    const report = mockReports.find(r => r.id === reportId);
+    if (!report) {
+      throw new Error(`Report with ID ${reportId} not found`);
+    }
+    
+    report.status = ReportStatus.READ;
+    return { ...report };
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new ReportError(`Failed to mark report as read: ${error.message}`);
+    }
+    throw new ReportError('Failed to mark report as read');
+  }
+};
+
+// Mock data for development
+const mockReports: MedicalReport[] = [
+  {
+    id: '1',
+    title: 'Blood Test',
+    category: ReportCategory.GENERAL,
+    date: '2025-01-27',
+    status: ReportStatus.UNREAD,
+    doctor: 'Dr. Smith',
+    facility: 'City Hospital'
+  },
+  {
+    id: '2',
+    title: 'Cranial Nerve Exam',
+    category: ReportCategory.NEUROLOGICAL,
+    date: '2025-01-19',
+    status: ReportStatus.UNREAD,
+    doctor: 'Dr. Johnson',
+    facility: 'Neurology Center'
+  },
+  {
+    id: '3',
+    title: 'Stress Test',
+    category: ReportCategory.HEART,
+    date: '2024-12-26',
+    status: ReportStatus.READ,
+    doctor: 'Dr. Williams',
+    facility: 'Heart Institute'
+  }
+]; 

docs/assets/components/tabbar.png

@@ -3,6 +3,7 @@ import { IonText } from '@ionic/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import {
+  faBookmark,
   faBuilding,
   faCalendar,
   faCircleInfo,
@@ -21,7 +22,19 @@ import {
   faUserGear,
   faUsers,
   faXmark,
+  faArrowUpFromBracket,
+  faHome,
+  faFileLines as faSolidFileLines,
+  faUpload,
+  faComment,
+  faUserCircle
 } from '@fortawesome/free-solid-svg-icons';
+import {
+  faFileLines as faRegularFileLines,
+  faComment as faRegularComment,
+  faUser as faRegularUser,
+  faBookmark as faRegularBookmark
+} from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';
 
 import { BaseComponentProps } from '../types';
@@ -30,11 +43,18 @@ import { BaseComponentProps } from '../types';
  * A union type of all Font Awesome icon names (without the `fa-` prefix)
  * used in the applciation.
  */
+export type IconStyle = 'solid' | 'regular';
+
 export type IconName =
+  | 'arrowUpFromBracket'
+  | 'bookmark'
   | 'building'
   | 'calendar'
   | 'circleInfo'
+  | 'comment'
   | 'envelope'
+  | 'fileLines'
+  | 'home'
   | 'house'
   | 'link'
   | 'mapLocationDot'
@@ -45,7 +65,9 @@ export type IconName =
   | 'signOut'
   | 'trash'
   | 'triangleExclamation'
+  | 'upload'
   | 'user'
+  | 'userCircle'
   | 'users'
   | 'userGear'
   | 'xmark';
@@ -60,16 +82,22 @@ export interface IconProps
     Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, 'color' | 'icon'>,
     Pick<ComponentPropsWithoutRef<typeof IonText>, 'color' | 'slot'> {
   icon: IconName;
+  iconStyle?: IconStyle;
 }
 
 /**
- * A key/value mapping of every icon used in the application.
+ * A key/value mapping of every solid icon used in the application.
  */
-const icons: Record<IconName, IconProp> = {
+const solidIcons: Record<IconName, IconProp> = {
+  arrowUpFromBracket: faArrowUpFromBracket,
+  bookmark: faBookmark,
   building: faBuilding,
   calendar: faCalendar,
   circleInfo: faCircleInfo,
+  comment: faComment,
   envelope: faEnvelope,
+  fileLines: faSolidFileLines,
+  home: faHome,
   house: faHouse,
   link: faLink,
   mapLocationDot: faMapLocationDot,
@@ -80,12 +108,25 @@ const icons: Record<IconName, IconProp> = {
   signOut: faSignOutAlt,
   trash: faTrash,
   triangleExclamation: faTriangleExclamation,
-  userGear: faUserGear,
+  upload: faUpload,
   user: faUser,
+  userCircle: faUserCircle,
+  userGear: faUserGear,
   users: faUsers,
   xmark: faXmark,
 };
 
+/**
+ * A key/value mapping of regular icons used in the application.
+ * Only includes icons that have regular variants.
+ */
+const regularIcons: Partial<Record<IconName, IconProp>> = {
+  comment: faRegularComment,
+  fileLines: faRegularFileLines,
+  user: faRegularUser,
+  bookmark: faRegularBookmark
+};
+
 /**
  * The `Icon` component renders an icon. Wraps the `FontAwesomeIcon` component.
  *
@@ -97,11 +138,15 @@ const Icon = ({
   className,
   color,
   icon,
+  iconStyle = 'solid',
   slot = '',
   testid = 'icon',
   ...iconProps
 }: IconProps): JSX.Element => {
-  const faIcon = icons[icon];
+  // Select icon based on style
+  const faIcon = iconStyle === 'regular' && regularIcons[icon] 
+    ? regularIcons[icon] 
+    : solidIcons[icon];
 
   return (
     <IonText color={color} slot={slot} data-testid={testid}>

docs/assets/images/1 - Home copy.png

@@ -1,9 +1,50 @@
 .ls-tab-navigation {
   &__bar {
+    border-radius: 2rem;
+    margin: 0 0.75rem 1.5rem;
+    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+    height: 3.5rem;
+    --background: #ffffff;
+    
     &-button {
+      --color: #435FF0;
+      --color-selected: #fd7bf4;
+      
       &-icon {
-        margin-top: 0.375rem;
-        margin-bottom: 0.125rem;
+        margin: 0;
+        font-size: 1.25rem;
+      }
+      
+      &.tab-selected {
+        .ls-tab-navigation__bar-button-icon {
+          color: var(--color-selected);
+        }
+      }
+      
+      &--upload {
+        position: relative;
+        overflow: visible;
+        
+        .ls-tab-navigation__bar-button-upload-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: #4765ff;
+          color: white;
+          width: 3rem;
+          height: 3rem;
+          border-radius: 50%;
+          position: absolute;
+          top: 0.25rem;
+          left: 50%;
+          transform: translateX(-50%);
+          box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);
+          
+          .ls-tab-navigation__bar-button-icon {
+            color: white;
+            margin: 0;
+          }
+        }
       }
     }
   }