track meal and add water implemented

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

@@ -1,15 +1,23 @@
 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 } from "react";
+import { useState, useCallback, useEffect } from "react";
+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 { Ionicons } from "@expo/vector-icons";
 
 export default function HomeScreen() {
   const { user } = useUser();
   const [refreshing, setRefreshing] = useState(false);
+  const [trackMealModalVisible, setTrackMealModalVisible] = useState(false);
+  const [addWaterModalVisible, setAddWaterModalVisible] = useState(false);
+  const [calories, setCalories] = useState(0);
+  const [waterIntake, setWaterIntake] = useState(0);
 
   const onRefresh = useCallback(() => {
     setRefreshing(true);
@@ -25,6 +33,65 @@ export default function HomeScreen() {
     return "Good Evening";
   };
 
+  const handleSaveMeal = (meal: { type: string; name: string; calories: number }) => {
+    setCalories(prev => prev + meal.calories);
+    setTrackMealModalVisible(false);
+  };
+
+  const handleAddWater = (amount: number) => {
+    setWaterIntake(prev => prev + amount);
+    setAddWaterModalVisible(false);
+  };
+
+  const handleResetCalories = () => {
+    setCalories(0);
+  };
+
+  const handleResetWater = () => {
+    setWaterIntake(0);
+  };
+
+  const resetAllCounters = async () => {
+    setCalories(0);
+    setWaterIntake(0);
+    const today = new Date().toDateString();
+    await AsyncStorage.setItem('lastResetDate', today);
+  };
+
+  // Check for midnight reset
+  useEffect(() => {
+    const checkAndResetIfNeeded = async () => {
+      const lastResetDate = await AsyncStorage.getItem('lastResetDate');
+      const today = new Date().toDateString();
+
+      if (lastResetDate !== today) {
+        await resetAllCounters();
+      }
+    };
+
+    checkAndResetIfNeeded();
+
+    // Calculate time until midnight
+    const now = new Date();
+    const midnight = new Date();
+    midnight.setHours(24, 0, 0, 0);
+    const timeUntilMidnight = midnight.getTime() - now.getTime();
+
+    // Set timer for midnight reset
+    const midnightTimer = setTimeout(async () => {
+      await resetAllCounters();
+
+      // Set up daily interval after first midnight
+      const dailyInterval = setInterval(async () => {
+        await resetAllCounters();
+      }, 24 * 60 * 60 * 1000); // 24 hours
+
+      return () => clearInterval(dailyInterval);
+    }, timeUntilMidnight);
+
+    return () => clearTimeout(midnightTimer);
+  }, []);
+
   return (
     <View style={styles.container}>
       <ScrollView
@@ -53,12 +120,35 @@ export default function HomeScreen() {
         {/* Activity Widget */}
         <ActivityWidget
           steps={8432}
-          calories={640}
+          calories={calories}
           duration={45}
         />
 
+        {/* Hydration Widget */}
+        <HydrationWidget
+          current={waterIntake}
+          goal={2500}
+        />
+
         {/* Quick Actions */}
-        <QuickActionGrid />
+        <QuickActionGrid
+          onTrackMealPress={() => setTrackMealModalVisible(true)}
+          onAddWaterPress={() => setAddWaterModalVisible(true)}
+        />
+
+        <TrackMealModal
+          visible={trackMealModalVisible}
+          onClose={() => setTrackMealModalVisible(false)}
+          onSave={handleSaveMeal}
+          onResetData={handleResetCalories}
+        />
+
+        <AddWaterModal
+          visible={addWaterModalVisible}
+          onClose={() => setAddWaterModalVisible(false)}
+          onAdd={handleAddWater}
+          onResetData={handleResetWater}
+        />
 
         {/* Recent Activity Section */}
         <View style={styles.section}>