3 and 4 completed

apps/mobile/src/app/(tabs)/index.tsx

@@ -1,14 +1,22 @@
-import { View, Text, StyleSheet, ScrollView, RefreshControl, Image } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Image,
+} from "react-native";
 import { useUser } from "@clerk/clerk-expo";
 import { LinearGradient } from "expo-linear-gradient";
 import { useState, useCallback, useEffect } from "react";
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { theme } from "../../styles/theme";
 import { ActivityWidget } from "../../components/ActivityWidget";
 import { QuickActionGrid } from "../../components/QuickActionGrid";
 import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
 import { HydrationWidget } from "../../components/HydrationWidget";
+import { WeeklyProgressWidget } from "../../components/WeeklyProgressWidget";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
 import { Ionicons } from "@expo/vector-icons";
 
@@ -35,13 +43,17 @@ export default function HomeScreen() {
     return "Good Evening";
   };
 
-  const handleSaveMeal = (meal: { type: string; name: string; calories: number }) => {
-    setCalories(prev => prev + meal.calories);
+  const handleSaveMeal = (meal: {
+    type: string;
+    name: string;
+    calories: number;
+  }) => {
+    setCalories((prev) => prev + meal.calories);
     setTrackMealModalVisible(false);
   };
 
   const handleAddWater = (amount: number) => {
-    setWaterIntake(prev => prev + amount);
+    setWaterIntake((prev) => prev + amount);
     setAddWaterModalVisible(false);
   };
 
@@ -54,7 +66,7 @@ export default function HomeScreen() {
   };
 
   const handleAddScannedFood = (scannedCalories: number) => {
-    setCalories(prev => prev + scannedCalories);
+    setCalories((prev) => prev + scannedCalories);
     setScanFoodModalVisible(false);
   };
 
@@ -62,13 +74,13 @@ export default function HomeScreen() {
     setCalories(0);
     setWaterIntake(0);
     const today = new Date().toDateString();
-    await AsyncStorage.setItem('lastResetDate', today);
+    await AsyncStorage.setItem("lastResetDate", today);
   };
 
   // Check for midnight reset
   useEffect(() => {
     const checkAndResetIfNeeded = async () => {
-      const lastResetDate = await AsyncStorage.getItem('lastResetDate');
+      const lastResetDate = await AsyncStorage.getItem("lastResetDate");
       const today = new Date().toDateString();
 
       if (lastResetDate !== today) {
@@ -89,9 +101,12 @@ export default function HomeScreen() {
       await resetAllCounters();
 
       // Set up daily interval after first midnight
-      const dailyInterval = setInterval(async () => {
-        await resetAllCounters();
-      }, 24 * 60 * 60 * 1000); // 24 hours
+      const dailyInterval = setInterval(
+        async () => {
+          await resetAllCounters();
+        },
+        24 * 60 * 60 * 1000,
+      ); // 24 hours
 
       return () => clearInterval(dailyInterval);
     }, timeUntilMidnight);
@@ -104,7 +119,11 @@ export default function HomeScreen() {
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.colors.primary} />
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={theme.colors.primary}
+          />
         }
       >
         {/* Header Section */}
@@ -125,24 +144,7 @@ export default function HomeScreen() {
         </View>
 
         {/* Activity Widget */}
-        <ActivityWidget
-          steps={8432}
-          calories={calories}
-          duration={45}
-        />
-
-        {/* Hydration Widget */}
-        <HydrationWidget
-          current={waterIntake}
-          goal={2500}
-        />
-
-        {/* Quick Actions */}
-        <QuickActionGrid
-          onTrackMealPress={() => setTrackMealModalVisible(true)}
-          onAddWaterPress={() => setAddWaterModalVisible(true)}
-          onScanFoodPress={() => setScanFoodModalVisible(true)}
-        />
+        <ActivityWidget calories={calories} />
 
         <TrackMealModal
           visible={trackMealModalVisible}
@@ -173,7 +175,7 @@ export default function HomeScreen() {
 
           <View style={styles.activityCard}>
             <LinearGradient
-              colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.5)']}
+              colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
               style={[styles.recentItem, theme.shadows.subtle]}
             >
               <View style={styles.recentIconContainer}>
@@ -192,7 +194,7 @@ export default function HomeScreen() {
             </LinearGradient>
 
             <LinearGradient
-              colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.5)']}
+              colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
               style={[styles.recentItem, theme.shadows.subtle]}
             >
               <View style={styles.recentIconContainer}>