redesign completed

alot of work ahead

apps/mobile/package-lock.json

@@ -23,6 +23,7 @@
         "expo-constants": "^18.0.10",
         "expo-crypto": "^15.0.7",
         "expo-font": "~14.0.9",
+        "expo-haptics": "^15.0.7",
         "expo-linear-gradient": "~15.0.7",
         "expo-linking": "~8.0.0",
         "expo-notifications": "~0.32.0",
@@ -36,6 +37,7 @@
         "react-native": "0.81.5",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
+        "react-native-svg": "^15.15.0",
         "react-native-web": "^0.21.2",
         "zod": "^3.22.0"
       },
@@ -5596,6 +5598,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -6268,6 +6276,56 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -6493,6 +6551,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.4.7",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
@@ -6580,6 +6693,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-editor": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz",
@@ -7135,6 +7260,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-haptics": {
+      "version": "15.0.7",
+      "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-15.0.7.tgz",
+      "integrity": "sha512-7flWsYPrwjJxZ8x82RiJtzsnk1Xp9ahnbd9PhCy3NnsemyMApoWIEUr4waPqFr80DtiLZfhD9VMLL1CKa8AImQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-linear-gradient": {
       "version": "15.0.7",
       "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-15.0.7.tgz",
@@ -9878,6 +10012,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -10475,6 +10615,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -11496,6 +11648,21 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.15.0.tgz",
+      "integrity": "sha512-/Wx6F/IZ88B/GcF88bK8K7ZseJDYt+7WGaiggyzLvTowChQ8BM5idmcd4pK+6QJP6a6DmzL2sfOMukFUn/NArg==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3",
+        "warn-once": "0.1.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-url-polyfill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",

apps/mobile/package.json

@@ -29,6 +29,7 @@
     "expo-constants": "^18.0.10",
     "expo-crypto": "^15.0.7",
     "expo-font": "~14.0.9",
+    "expo-haptics": "^15.0.7",
     "expo-linear-gradient": "~15.0.7",
     "expo-linking": "~8.0.0",
     "expo-notifications": "~0.32.0",
@@ -42,6 +43,7 @@
     "react-native": "0.81.5",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.0",
     "react-native-web": "^0.21.2",
     "zod": "^3.22.0"
   },

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

@@ -1,7 +1,7 @@
 import { Tabs, useRouter, useSegments } from "expo-router";
-import { Ionicons } from "@expo/vector-icons";
 import { useAuth } from "@clerk/clerk-expo";
 import { useEffect } from "react";
+import { CustomTabBar } from "../../components/CustomTabBar";
 
 export default function TabLayout() {
   const { isSignedIn, isLoaded } = useAuth();
@@ -25,56 +25,40 @@ export default function TabLayout() {
 
   return (
     <Tabs
+      tabBar={(props) => <CustomTabBar {...props} />}
       screenOptions={{
-        tabBarActiveTintColor: "#2563eb",
+        headerShown: false, // We'll use custom headers in screens or layout
-        tabBarInactiveTintColor: "#6b7280",
+        tabBarShowLabel: false,
-        headerShown: true,
-        headerStyle: {
-          backgroundColor: "#fff",
-        },
-        headerTitleStyle: {
-          fontWeight: "600",
-        },
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
           title: "Home",
-          headerTitle: "FitAI",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="home" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="attendance"
-        options={{
-          title: "Attendance",
-          headerTitle: "Attendance",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="calendar" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: "Profile",
-          headerTitle: "My Profile",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="person" size={size} color={color} />
-          ),
         }}
       />
       <Tabs.Screen
         name="goals"
         options={{
           title: "Goals",
-          headerTitle: "Fitness Goals",
+        }}
-          tabBarIcon: ({ color, size }) => (
+      />
-            <Ionicons name="trophy" size={size} color={color} />
+      <Tabs.Screen
-          ),
+        name="recommendations"
+        options={{
+          title: "AI",
+        }}
+      />
+      <Tabs.Screen
+        name="attendance"
+        options={{
+          title: "Attendance",
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Profile",
         }}
       />
     </Tabs>

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

@@ -1,117 +1,81 @@
-import { useState, useEffect, useRef } from "react";
+import React, { useState, useCallback, useRef } from 'react';
-import {
+import { View, Text, StyleSheet, ScrollView, RefreshControl, TouchableOpacity, Animated, Alert } from 'react-native';
-    View,
+import { Ionicons } from '@expo/vector-icons';
-    Text,
+import { LinearGradient } from 'expo-linear-gradient';
-    StyleSheet,
+import { theme } from '../../styles/theme';
-    ScrollView,
+import { GoalProgressCard } from '../../components/GoalProgressCard';
-    TouchableOpacity,
+import { GoalCreationModal } from '../../components/GoalCreationModal';
-    ActivityIndicator,
+import { useUser, useAuth } from "@clerk/clerk-expo";
-    RefreshControl,
+import { fitnessGoalsService, type FitnessGoal, type CreateGoalData } from '../../services/fitnessGoals';
-    Alert,
+import { useFocusEffect } from 'expo-router';
-    Animated,
-} from "react-native";
-import { useAuth } from "@clerk/clerk-expo";
-import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from "expo-linear-gradient";
-import { fitnessGoalsService, type FitnessGoal, type CreateGoalData } from "../../services/fitnessGoals";
-import { GoalProgressCard } from "../../components/GoalProgressCard";
-import { GoalCreationModal } from "../../components/GoalCreationModal";
-import { theme } from "../../styles/theme";
 
 export default function GoalsScreen() {
-    const { userId, getToken } = useAuth();
+    const { user } = useUser();
+    const { getToken } = useAuth();
     const [goals, setGoals] = useState<FitnessGoal[]>([]);
-    const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
-    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [isModalVisible, setIsModalVisible] = useState(false);
     const fabScale = useRef(new Animated.Value(1)).current;
 
-    const fetchGoals = async () => {
+    const loadGoals = useCallback(async () => {
-        if (!userId) return;
+        if (!user?.id) return;
         try {
             const token = await getToken();
-            const data = await fitnessGoalsService.getGoals(userId, token);
+            const loadedGoals = await fitnessGoalsService.getGoals(user.id, token);
-            setGoals(data);
+            setGoals(loadedGoals);
         } catch (error) {
-            console.error("Error fetching fitness goals:", error);
+            console.error('Error loading goals:', error);
-            Alert.alert("Error", "Failed to load goals. Please try again.");
-        } finally {
-            setLoading(false);
-            setRefreshing(false);
         }
-    };
+    }, [user?.id]); // Removed getToken from dependencies
 
-    useEffect(() => {
+    useFocusEffect(
-        fetchGoals();
+        useCallback(() => {
-    }, [userId]);
+            loadGoals();
+        }, [loadGoals])
+    );
 
-    const onRefresh = () => {
+    const onRefresh = async () => {
         setRefreshing(true);
-        fetchGoals();
+        await loadGoals();
+        setRefreshing(false);
     };
 
-    const handleCreateGoal = async (goalData: CreateGoalData) => {
+    const handleCreateGoal = async (newGoal: CreateGoalData) => {
-        try {
+        const token = await getToken();
-            const token = await getToken();
+        await fitnessGoalsService.createGoal(newGoal, token);
-            const newGoal = await fitnessGoalsService.createGoal(goalData, token);
+        await loadGoals();
-            setGoals(prev => [newGoal, ...prev]);
+        setIsModalVisible(false);
-            Alert.alert("Success", "Goal created successfully!");
-        } catch (error) {
-            console.error("Error creating goal:", error);
-            throw error;
-        }
     };
 
-    const handleCompleteGoal = async (goalId: string) => {
+    const handleCompleteGoal = async (goal: FitnessGoal) => {
-        try {
+        const token = await getToken();
-            const token = await getToken();
+        await fitnessGoalsService.completeGoal(goal.id, token);
-            const updatedGoal = await fitnessGoalsService.completeGoal(goalId, token);
+        await loadGoals();
-            setGoals(prev => prev.map(g => g.id === goalId ? updatedGoal : g));
-            Alert.alert("Success", "Goal completed! 🎉");
-        } catch (error) {
-            console.error("Error completing goal:", error);
-            Alert.alert("Error", "Failed to complete goal. Please try again.");
-        }
     };
 
     const handleDeleteGoal = async (goalId: string) => {
-        try {
+        const token = await getToken();
-            const token = await getToken();
+        await fitnessGoalsService.deleteGoal(goalId, token);
-            await fitnessGoalsService.deleteGoal(goalId, token);
+        await loadGoals();
-            setGoals(prev => prev.filter(g => g.id !== goalId));
-            Alert.alert("Success", "Goal deleted");
-        } catch (error) {
-            console.error("Error deleting goal:", error);
-            Alert.alert("Error", "Failed to delete goal. Please try again.");
-        }
     };
 
     const activeGoals = goals.filter(g => g.status === 'active');
     const completedGoals = goals.filter(g => g.status === 'completed');
 
-    if (loading && !refreshing) {
-        return (
-            <View style={styles.center}>
-                <ActivityIndicator size="large" color="#2563eb" />
-            </View>
-        );
-    }
-
     return (
         <View style={styles.container}>
             <ScrollView
+                contentContainerStyle={styles.scrollContent}
                 refreshControl={
-                    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.colors.primary} />
                 }
             >
                 <LinearGradient
                     colors={theme.gradients.primary}
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 1, y: 1 }}
                     style={styles.header}
                 >
                     <View>
-                        <Text style={styles.headerTitle}>My Fitness Goals</Text>
+                        <Text style={styles.headerTitle}>Fitness Goals</Text>
                         <Text style={styles.headerSubtitle}>
                             Track your fitness journey progress
                         </Text>
@@ -133,7 +97,7 @@ export default function GoalsScreen() {
                             <Text style={styles.statValue}>
                                 {activeGoals.length > 0
                                     ? Math.round(
-                                        activeGoals.reduce((sum, g) => sum + g.progress, 0) /
+                                        activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
                                         activeGoals.length
                                     )
                                     : 0}%
@@ -161,7 +125,7 @@ export default function GoalsScreen() {
                             <GoalProgressCard
                                 key={goal.id}
                                 goal={goal}
-                                onComplete={() => handleCompleteGoal(goal.id)}
+                                onComplete={() => handleCompleteGoal(goal)}
                                 onDelete={() => handleDeleteGoal(goal.id)}
                             />
                         ))
@@ -188,9 +152,9 @@ export default function GoalsScreen() {
             </ScrollView>
 
             {/* Floating Action Button */}
-            <Animated.View style={{ transform: [{ scale: fabScale }] }}>
+            <Animated.View style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}>
                 <TouchableOpacity
-                    onPress={() => setShowCreateModal(true)}
+                    onPress={() => setIsModalVisible(true)}
                     onPressIn={() => {
                         Animated.spring(fabScale, {
                             toValue: 0.9,
@@ -222,8 +186,8 @@ export default function GoalsScreen() {
 
             {/* Create Goal Modal */}
             <GoalCreationModal
-                visible={showCreateModal}
+                visible={isModalVisible}
-                onClose={() => setShowCreateModal(false)}
+                onClose={() => setIsModalVisible(false)}
                 onSubmit={handleCreateGoal}
             />
         </View>
@@ -235,10 +199,8 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: theme.colors.background,
     },
-    center: {
+    scrollContent: {
-        flex: 1,
+        paddingBottom: 20,
-        justifyContent: "center",
-        alignItems: "center",
     },
     header: {
         padding: 24,
@@ -268,7 +230,7 @@ const styles = StyleSheet.create({
         backgroundColor: theme.colors.white,
         padding: 16,
         borderRadius: theme.borderRadius.xl,
-        alignItems: "center",
+        alignItems: 'center',
         ...theme.shadows.medium,
         borderWidth: 1,
         borderColor: "rgba(59, 130, 246, 0.1)",
@@ -312,10 +274,12 @@ const styles = StyleSheet.create({
     footer: {
         height: 100,
     },
-    fab: {
+    fabContainer: {
         position: "absolute",
         right: 20,
-        bottom: 20,
+        bottom: 110, // Adjusted for tab bar height
+    },
+    fab: {
         width: 64,
         height: 64,
         borderRadius: 32,

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

@@ -1,239 +1,118 @@
-import React, { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, ScrollView, RefreshControl, Image } from "react-native";
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  Animated,
-} from "react-native";
 import { useUser } from "@clerk/clerk-expo";
-import { Ionicons } from "@expo/vector-icons";
-import { useRouter } from "expo-router";
 import { LinearGradient } from "expo-linear-gradient";
+import { useState, useCallback } from "react";
 import { theme } from "../../styles/theme";
+import { ActivityWidget } from "../../components/ActivityWidget";
+import { QuickActionGrid } from "../../components/QuickActionGrid";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function HomeScreen() {
-  const { user, isLoaded } = useUser();
+  const { user } = useUser();
-  const router = useRouter();
+  const [refreshing, setRefreshing] = useState(false);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
 
-  useEffect(() => {
+  const onRefresh = useCallback(() => {
-    Animated.timing(fadeAnim, {
+    setRefreshing(true);
-      toValue: 1,
+    setTimeout(() => {
-      duration: 500,
+      setRefreshing(false);
-      useNativeDriver: true,
+    }, 2000);
-    }).start();
   }, []);
 
-  if (!isLoaded || !user) {
+  const getGreeting = () => {
-    return (
+    const hour = new Date().getHours();
-      <View style={styles.container}>
+    if (hour < 12) return "Good Morning";
-        <Text>Loading...</Text>
+    if (hour < 18) return "Good Afternoon";
-      </View>
+    return "Good Evening";
-    );
+  };
-  }
-
-  const firstName = user.firstName || "User";
-  const greeting = getGreeting();
 
   return (
-    <ScrollView style={styles.container}>
+    <View style={styles.container}>
-      <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
+      <ScrollView
-        {/* Gradient Header */}
+        contentContainerStyle={styles.scrollContent}
-        <LinearGradient
+        refreshControl={
-          colors={theme.gradients.primary}
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.colors.primary} />
-          start={{ x: 0, y: 0 }}
+        }
-          end={{ x: 1, y: 1 }}
+      >
-          style={styles.header}
+        {/* Header Section */}
-        >
+        <View style={styles.header}>
-          <Text style={styles.greeting}>{greeting}!</Text>
+          <View>
-          <Text style={styles.name}>{firstName}</Text>
+            <Text style={styles.greeting}>{getGreeting()},</Text>
-        </LinearGradient>
+            <Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
-
+          </View>
-        {/* Quick Stats with Glassmorphism */}
+          <View style={styles.avatarContainer}>
-        <View style={styles.statsContainer}>
+            {user?.imageUrl ? (
-          <LinearGradient
+              <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
-            colors={['rgba(59, 130, 246, 0.1)', 'rgba(139, 92, 246, 0.1)']}
+            ) : (
-            style={[styles.statCard, theme.shadows.medium]}
+              <View style={styles.placeholderAvatar}>
-          >
+                <Ionicons name="person" size={24} color="#fff" />
-            <View style={styles.statIconContainer}>
-              <LinearGradient
-                colors={theme.gradients.primary}
-                style={styles.statIconGradient}
-              >
-                <Ionicons name="calendar-outline" size={24} color="#fff" />
-              </LinearGradient>
-            </View>
-            <Text style={styles.statValue}>0</Text>
-            <Text style={styles.statLabel}>This Month</Text>
-          </LinearGradient>
-
-          <LinearGradient
-            colors={['rgba(239, 68, 68, 0.1)', 'rgba(236, 72, 153, 0.1)']}
-            style={[styles.statCard, theme.shadows.medium]}
-          >
-            <View style={styles.statIconContainer}>
-              <LinearGradient
-                colors={theme.gradients.danger}
-                style={styles.statIconGradient}
-              >
-                <Ionicons name="flame-outline" size={24} color="#fff" />
-              </LinearGradient>
-            </View>
-            <Text style={styles.statValue}>0</Text>
-            <Text style={styles.statLabel}>Day Streak</Text>
-          </LinearGradient>
-
-          <LinearGradient
-            colors={['rgba(245, 158, 11, 0.1)', 'rgba(217, 119, 6, 0.1)']}
-            style={[styles.statCard, theme.shadows.medium]}
-          >
-            <View style={styles.statIconContainer}>
-              <LinearGradient
-                colors={theme.gradients.warning}
-                style={styles.statIconGradient}
-              >
-                <Ionicons name="trophy-outline" size={24} color="#fff" />
-              </LinearGradient>
-            </View>
-            <Text style={styles.statValue}>0</Text>
-            <Text style={styles.statLabel}>Total Visits</Text>
-          </LinearGradient>
-        </View>
-
-        {/* Quick Actions */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Quick Actions</Text>
-
-          <TouchableOpacity
-            style={[styles.actionButton, theme.shadows.medium]}
-            onPress={() => router.push("/fitness-profile")}
-            activeOpacity={0.7}
-          >
-            <LinearGradient
-              colors={['rgba(236, 72, 153, 0.15)', 'rgba(236, 72, 153, 0.05)']}
-              style={styles.actionIcon}
-            >
-              <Ionicons name="fitness-outline" size={24} color="#ec4899" />
-            </LinearGradient>
-            <View style={styles.actionContent}>
-              <Text style={styles.actionTitle}>Fitness Profile</Text>
-              <Text style={styles.actionSubtitle}>
-                Manage your fitness information
-              </Text>
-            </View>
-            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={[styles.actionButton, theme.shadows.medium]}
-            activeOpacity={0.7}
-          >
-            <LinearGradient
-              colors={['rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.05)']}
-              style={styles.actionIcon}
-            >
-              <Ionicons name="log-in-outline" size={24} color="#2563eb" />
-            </LinearGradient>
-            <View style={styles.actionContent}>
-              <Text style={styles.actionTitle}>Check In</Text>
-              <Text style={styles.actionSubtitle}>
-                Start your workout session
-              </Text>
-            </View>
-            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={[styles.actionButton, theme.shadows.medium]}
-            activeOpacity={0.7}
-          >
-            <LinearGradient
-              colors={['rgba(16, 185, 129, 0.15)', 'rgba(16, 185, 129, 0.05)']}
-              style={styles.actionIcon}
-            >
-              <Ionicons name="calendar-outline" size={24} color="#10b981" />
-            </LinearGradient>
-            <View style={styles.actionContent}>
-              <Text style={styles.actionTitle}>View Schedule</Text>
-              <Text style={styles.actionSubtitle}>
-                Check your upcoming classes
-              </Text>
-            </View>
-            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={[styles.actionButton, theme.shadows.medium]}
-            activeOpacity={0.7}
-          >
-            <LinearGradient
-              colors={['rgba(139, 92, 246, 0.15)', 'rgba(139, 92, 246, 0.05)']}
-              style={styles.actionIcon}
-            >
-              <Ionicons name="card-outline" size={24} color="#8b5cf6" />
-            </LinearGradient>
-            <View style={styles.actionContent}>
-              <Text style={styles.actionTitle}>Payments</Text>
-              <Text style={styles.actionSubtitle}>View payment history</Text>
-            </View>
-            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
-          </TouchableOpacity>
-        </View>
-
-        {/* Membership Info with Gradient */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Membership</Text>
-          <LinearGradient
-            colors={theme.gradients.primary}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={[styles.membershipCard, theme.shadows.strong]}
-          >
-            <View style={styles.membershipHeader}>
-              <Text style={styles.membershipType}>Basic Plan</Text>
-              <View style={styles.statusBadge}>
-                <Text style={styles.statusText}>Active</Text>
               </View>
-            </View>
+            )}
-            <Text style={styles.membershipEmail}>
-              {user.primaryEmailAddress?.emailAddress}
-            </Text>
-            <Text style={styles.membershipDate}>
-              Member since {new Date(user.createdAt!).toLocaleDateString()}
-            </Text>
-          </LinearGradient>
-        </View>
-
-        {/* Recent Activity */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Recent Activity</Text>
-          <View style={[styles.emptyState, theme.shadows.medium]}>
-            <View style={styles.emptyIconContainer}>
-              <LinearGradient
-                colors={['rgba(209, 213, 219, 0.3)', 'rgba(209, 213, 219, 0.1)']}
-                style={styles.emptyIconGradient}
-              >
-                <Ionicons name="barbell-outline" size={48} color="#9ca3af" />
-              </LinearGradient>
-            </View>
-            <Text style={styles.emptyStateText}>No recent activity</Text>
-            <Text style={styles.emptyStateSubtext}>
-              Check in to start tracking your workouts
-            </Text>
           </View>
         </View>
-      </Animated.View>
-    </ScrollView>
-  );
-}
 
-function getGreeting(): string {
+        {/* Activity Widget */}
-  const hour = new Date().getHours();
+        <ActivityWidget
-  if (hour < 12) return "Good morning";
+          steps={8432}
-  if (hour < 18) return "Good afternoon";
+          calories={640}
-  return "Good evening";
+          duration={45}
+        />
+
+        {/* Quick Actions */}
+        <QuickActionGrid />
+
+        {/* Recent Activity Section */}
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>Recent Activity</Text>
+            <Text style={styles.seeAll}>See All</Text>
+          </View>
+
+          <View style={styles.activityCard}>
+            <LinearGradient
+              colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.5)']}
+              style={[styles.recentItem, theme.shadows.subtle]}
+            >
+              <View style={styles.recentIconContainer}>
+                <LinearGradient
+                  colors={theme.gradients.primary}
+                  style={styles.recentIcon}
+                >
+                  <Ionicons name="barbell" size={20} color="#fff" />
+                </LinearGradient>
+              </View>
+              <View style={styles.recentInfo}>
+                <Text style={styles.recentTitle}>Upper Body Power</Text>
+                <Text style={styles.recentSubtitle}>Today, 10:00 AM</Text>
+              </View>
+              <Text style={styles.recentValue}>45m</Text>
+            </LinearGradient>
+
+            <LinearGradient
+              colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.5)']}
+              style={[styles.recentItem, theme.shadows.subtle]}
+            >
+              <View style={styles.recentIconContainer}>
+                <LinearGradient
+                  colors={theme.gradients.success}
+                  style={styles.recentIcon}
+                >
+                  <Ionicons name="bicycle" size={20} color="#fff" />
+                </LinearGradient>
+              </View>
+              <View style={styles.recentInfo}>
+                <Text style={styles.recentTitle}>Morning Cardio</Text>
+                <Text style={styles.recentSubtitle}>Yesterday, 7:30 AM</Text>
+              </View>
+              <Text style={styles.recentValue}>30m</Text>
+            </LinearGradient>
+          </View>
+        </View>
+
+        {/* Bottom Spacer for Tab Bar */}
+        <View style={{ height: 100 }} />
+      </ScrollView>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -241,167 +120,110 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: theme.colors.background,
   },
-  content: {
+  scrollContent: {
-    paddingBottom: 20,
+    paddingTop: 60,
   },
   header: {
-    padding: 24,
+    flexDirection: "row",
-    paddingTop: 60,
+    justifyContent: "space-between",
-    paddingBottom: 32,
+    alignItems: "center",
-    borderBottomLeftRadius: theme.borderRadius['2xl'],
+    paddingHorizontal: 24,
-    borderBottomRightRadius: theme.borderRadius['2xl'],
+    marginBottom: 32,
-    marginBottom: 20,
   },
   greeting: {
-    fontSize: theme.typography.fontSize.base,
+    fontSize: 16,
-    color: "rgba(255, 255, 255, 0.9)",
+    color: theme.colors.gray600,
+    fontWeight: "500",
     marginBottom: 4,
   },
   name: {
-    fontSize: theme.typography.fontSize['4xl'],
+    fontSize: 32,
-    fontWeight: theme.typography.fontWeight.bold,
+    fontWeight: "800",
-    color: theme.colors.white,
-  },
-  statsContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    marginBottom: 24,
-    gap: 12,
-  },
-  statCard: {
-    flex: 1,
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.3)",
-  },
-  statIconContainer: {
-    marginBottom: 8,
-  },
-  statIconGradient: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  statValue: {
-    fontSize: theme.typography.fontSize['2xl'],
-    fontWeight: theme.typography.fontWeight.bold,
     color: theme.colors.gray900,
-    marginTop: 4,
+    letterSpacing: -0.5,
-    marginBottom: 4,
   },
-  statLabel: {
+  avatarContainer: {
-    fontSize: theme.typography.fontSize.xs,
+    shadowColor: "#000",
-    color: theme.colors.gray600,
+    shadowOffset: { width: 0, height: 4 },
-    textAlign: "center",
+    shadowOpacity: 0.1,
-    fontWeight: theme.typography.fontWeight.medium,
+    shadowRadius: 12,
+    elevation: 5,
   },
-  section: {
+  avatar: {
-    marginBottom: 24,
-    paddingHorizontal: 20,
-  },
-  sectionTitle: {
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray900,
-    marginBottom: 12,
-  },
-  actionButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 12,
-  },
-  actionIcon: {
     width: 56,
     height: 56,
-    borderRadius: 28,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: "#fff",
+  },
+  placeholderAvatar: {
+    width: 56,
+    height: 56,
+    borderRadius: 20,
+    backgroundColor: theme.colors.primary,
     justifyContent: "center",
     alignItems: "center",
-    marginRight: 12,
+    borderWidth: 2,
+    borderColor: "#fff",
   },
-  actionContent: {
+  section: {
-    flex: 1,
+    paddingHorizontal: 20,
+    marginBottom: 24,
   },
-  actionTitle: {
+  sectionHeader: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray900,
-    marginBottom: 2,
-  },
-  actionSubtitle: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray600,
-  },
-  membershipCard: {
-    borderRadius: theme.borderRadius.xl,
-    padding: 20,
-  },
-  membershipHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12,
-  },
-  membershipType: {
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.white,
-  },
-  statusBadge: {
-    backgroundColor: "rgba(255, 255, 255, 0.25)",
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.3)",
-  },
-  statusText: {
-    fontSize: theme.typography.fontSize.xs,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.white,
-  },
-  membershipEmail: {
-    fontSize: theme.typography.fontSize.sm,
-    color: "rgba(255, 255, 255, 0.9)",
-    marginBottom: 4,
-  },
-  membershipDate: {
-    fontSize: theme.typography.fontSize.xs,
-    color: "rgba(255, 255, 255, 0.7)",
-  },
-  emptyState: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 32,
-    alignItems: "center",
-  },
-  emptyIconContainer: {
     marginBottom: 16,
   },
-  emptyIconGradient: {
+  sectionTitle: {
-    width: 96,
+    fontSize: 18,
-    height: 96,
+    fontWeight: "700",
-    borderRadius: 48,
+    color: theme.colors.gray900,
+  },
+  seeAll: {
+    fontSize: 14,
+    color: theme.colors.primary,
+    fontWeight: "600",
+  },
+  activityCard: {
+    gap: 12,
+  },
+  recentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    borderRadius: 20,
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.6)",
+  },
+  recentIconContainer: {
+    marginRight: 16,
+  },
+  recentIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
     justifyContent: "center",
     alignItems: "center",
   },
-  emptyStateText: {
+  recentInfo: {
-    fontSize: theme.typography.fontSize.base,
+    flex: 1,
-    fontWeight: theme.typography.fontWeight.semibold,
+  },
-    color: theme.colors.gray700,
+  recentTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: theme.colors.gray900,
     marginBottom: 4,
   },
-  emptyStateSubtext: {
+  recentSubtitle: {
-    fontSize: theme.typography.fontSize.sm,
+    fontSize: 12,
     color: theme.colors.gray500,
-    textAlign: "center",
+  },
+  recentValue: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: theme.colors.gray900,
   },
 });

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

@@ -1,235 +1,135 @@
-import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from "react-native";
-import {
+import { useUser, useClerk } from "@clerk/clerk-expo";
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Alert,
-  ScrollView,
-} from "react-native";
-import { useUser, useAuth } from "@clerk/clerk-expo";
-import { useRouter } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import { theme } from "../../styles/theme";
+import { AnimatedButton } from "../../components/AnimatedButton";
+import { GradientBackground } from "../../components/GradientBackground";
 
 export default function ProfileScreen() {
   const { user } = useUser();
-  const { signOut } = useAuth();
+  const { signOut } = useClerk();
-  const router = useRouter();
 
-  const handleLogout = async () => {
+  const handleSignOut = async () => {
-    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+    try {
-      { text: "Cancel", style: "cancel" },
+      await signOut();
-      {
+    } catch (err) {
-        text: "Sign Out",
+      console.error("Error signing out:", err);
-        style: "destructive",
+    }
-        onPress: async () => {
-          try {
-            await signOut();
-            router.replace("/(auth)/sign-in");
-          } catch (error) {
-            Alert.alert("Error", "Failed to sign out");
-          }
-        },
-      },
-    ]);
   };
 
-  if (!user) {
+  const confirmSignOut = () => {
-    return (
+    Alert.alert(
-      <View style={styles.container}>
+      "Sign Out",
-        <Text>Loading...</Text>
+      "Are you sure you want to sign out?",
-      </View>
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Sign Out", style: "destructive", onPress: handleSignOut },
+      ]
     );
-  }
+  };
 
   return (
-    <ScrollView style={styles.container}>
+    <View style={styles.container}>
-      <View style={styles.content}>
+      <GradientBackground variant="primary" style={styles.header}>
-        {/* Profile Header with Gradient */}
+        <View style={styles.profileCard}>
-        <LinearGradient
-          colors={theme.gradients.primary}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={[styles.profileCard, theme.shadows.strong]}
-        >
           <View style={styles.avatarContainer}>
-            {user.imageUrl ? (
+            {user?.imageUrl ? (
-              <LinearGradient
+              <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
-                colors={['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.1)']}
-                style={styles.avatar}
-              >
-                <Text style={styles.avatarText}>
-                  {user.firstName?.charAt(0)}
-                  {user.lastName?.charAt(0)}
-                </Text>
-              </LinearGradient>
             ) : (
-              <LinearGradient
+              <View style={styles.placeholderAvatar}>
-                colors={['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.1)']}
-                style={styles.avatar}
-              >
                 <Ionicons name="person" size={40} color="#fff" />
+              </View>
+            )}
+            <View style={styles.editBadge}>
+              <Ionicons name="pencil" size={12} color={theme.colors.primary} />
+            </View>
+          </View>
+          <Text style={styles.name}>{user?.fullName || "User"}</Text>
+          <Text style={styles.email}>{user?.primaryEmailAddress?.emailAddress}</Text>
+          <View style={styles.memberBadge}>
+            <Text style={styles.memberText}>Premium Member</Text>
+          </View>
+        </View>
+      </GradientBackground>
+
+      <View style={styles.content}>
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Account</Text>
+          <View style={[styles.infoCard, theme.shadows.subtle]}>
+            <TouchableOpacity style={styles.infoRow}>
+              <LinearGradient
+                colors={['rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.05)']}
+                style={styles.iconContainer}
+              >
+                <Ionicons name="person-outline" size={20} color={theme.colors.primary} />
               </LinearGradient>
-            )}
+              <Text style={styles.infoLabel}>Personal Details</Text>
-          </View>
+              <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-
+            </TouchableOpacity>
-          <Text style={styles.name}>
+            <View style={styles.divider} />
-            {user.firstName} {user.lastName}
+            <TouchableOpacity style={styles.infoRow}>
-          </Text>
+              <LinearGradient
-          <Text style={styles.email}>
+                colors={['rgba(16, 185, 129, 0.1)', 'rgba(16, 185, 129, 0.05)']}
-            {user.primaryEmailAddress?.emailAddress}
+                style={styles.iconContainer}
-          </Text>
+              >
-
+                <Ionicons name="fitness-outline" size={20} color={theme.colors.success} />
-          {user.primaryPhoneNumber && (
+              </LinearGradient>
-            <Text style={styles.phone}>
+              <Text style={styles.infoLabel}>Fitness Profile</Text>
-              {user.primaryPhoneNumber.phoneNumber}
+              <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-            </Text>
+            </TouchableOpacity>
-          )}
+            <View style={styles.divider} />
-        </LinearGradient>
+            <TouchableOpacity style={styles.infoRow}>
-
+              <LinearGradient
-        {/* Account Information */}
+                colors={['rgba(245, 158, 11, 0.1)', 'rgba(245, 158, 11, 0.05)']}
-        <View style={styles.section}>
+                style={styles.iconContainer}
-          <Text style={styles.sectionTitle}>Account Information</Text>
+              >
-
+                <Ionicons name="notifications-outline" size={20} color={theme.colors.warning} />
-          <View style={[styles.infoCard, theme.shadows.medium]}>
+              </LinearGradient>
-            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>Notifications</Text>
-              <View style={styles.infoLabel}>
+              <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-                <LinearGradient
+            </TouchableOpacity>
-                  colors={['rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.05)']}
-                  style={styles.infoIconContainer}
-                >
-                  <Ionicons name="mail-outline" size={18} color={theme.colors.primary} />
-                </LinearGradient>
-                <Text style={styles.infoLabelText}>Email</Text>
-              </View>
-              <Text style={styles.infoValue}>
-                {user.primaryEmailAddress?.emailAddress}
-              </Text>
-            </View>
-
-            {user.primaryPhoneNumber && (
-              <View style={styles.infoRow}>
-                <View style={styles.infoLabel}>
-                  <LinearGradient
-                    colors={['rgba(16, 185, 129, 0.15)', 'rgba(16, 185, 129, 0.05)']}
-                    style={styles.infoIconContainer}
-                  >
-                    <Ionicons name="call-outline" size={18} color={theme.colors.success} />
-                  </LinearGradient>
-                  <Text style={styles.infoLabelText}>Phone</Text>
-                </View>
-                <Text style={styles.infoValue}>
-                  {user.primaryPhoneNumber.phoneNumber}
-                </Text>
-              </View>
-            )}
-
-            <View style={styles.infoRow}>
-              <View style={styles.infoLabel}>
-                <LinearGradient
-                  colors={['rgba(245, 158, 11, 0.15)', 'rgba(245, 158, 11, 0.05)']}
-                  style={styles.infoIconContainer}
-                >
-                  <Ionicons name="calendar-outline" size={18} color={theme.colors.warning} />
-                </LinearGradient>
-                <Text style={styles.infoLabelText}>Member Since</Text>
-              </View>
-              <Text style={styles.infoValue}>
-                {new Date(user.createdAt!).toLocaleDateString()}
-              </Text>
-            </View>
-
-            <View style={[styles.infoRow, { borderBottomWidth: 0 }]}>
-              <View style={styles.infoLabel}>
-                <LinearGradient
-                  colors={['rgba(16, 185, 129, 0.15)', 'rgba(16, 185, 129, 0.05)']}
-                  style={styles.infoIconContainer}
-                >
-                  <Ionicons
-                    name="shield-checkmark-outline"
-                    size={18}
-                    color={theme.colors.success}
-                  />
-                </LinearGradient>
-                <Text style={styles.infoLabelText}>Email Verified</Text>
-              </View>
-              <Text style={styles.infoValue}>
-                {user.primaryEmailAddress?.verification?.status === "verified"
-                  ? "Yes"
-                  : "No"}
-              </Text>
-            </View>
           </View>
         </View>
 
-        {/* Quick Actions */}
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Quick Actions</Text>
+          <Text style={styles.sectionTitle}>Support</Text>
-
+          <View style={[styles.infoCard, theme.shadows.subtle]}>
-          <TouchableOpacity style={[styles.actionButton, theme.shadows.medium]} activeOpacity={0.7}>
+            <TouchableOpacity style={styles.infoRow}>
-            <LinearGradient
+              <LinearGradient
-              colors={['rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.05)']}
+                colors={['rgba(139, 92, 246, 0.1)', 'rgba(139, 92, 246, 0.05)']}
-              style={styles.actionIconContainer}
+                style={styles.iconContainer}
-            >
+              >
-              <Ionicons name="person-outline" size={22} color={theme.colors.primary} />
+                <Ionicons name="help-circle-outline" size={20} color={theme.colors.secondary} />
-            </LinearGradient>
+              </LinearGradient>
-            <Text style={styles.actionButtonText}>Edit Profile</Text>
+              <Text style={styles.infoLabel}>Help Center</Text>
-            <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
+              <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-          </TouchableOpacity>
+            </TouchableOpacity>
-
+            <View style={styles.divider} />
-          <TouchableOpacity style={[styles.actionButton, theme.shadows.medium]} activeOpacity={0.7}>
+            <TouchableOpacity style={styles.infoRow}>
-            <LinearGradient
+              <LinearGradient
-              colors={['rgba(245, 158, 11, 0.15)', 'rgba(245, 158, 11, 0.05)']}
+                colors={['rgba(107, 114, 128, 0.1)', 'rgba(107, 114, 128, 0.05)']}
-              style={styles.actionIconContainer}
+                style={styles.iconContainer}
-            >
+              >
-              <Ionicons name="notifications-outline" size={22} color={theme.colors.warning} />
+                <Ionicons name="shield-checkmark-outline" size={20} color={theme.colors.gray600} />
-            </LinearGradient>
+              </LinearGradient>
-            <Text style={styles.actionButtonText}>Notifications</Text>
+              <Text style={styles.infoLabel}>Privacy & Security</Text>
-            <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
+              <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-          </TouchableOpacity>
+            </TouchableOpacity>
-
+          </View>
-          <TouchableOpacity style={[styles.actionButton, theme.shadows.medium]} activeOpacity={0.7}>
-            <LinearGradient
-              colors={['rgba(139, 92, 246, 0.15)', 'rgba(139, 92, 246, 0.05)']}
-              style={styles.actionIconContainer}
-            >
-              <Ionicons name="card-outline" size={22} color={theme.colors.purple} />
-            </LinearGradient>
-            <Text style={styles.actionButtonText}>Payment History</Text>
-            <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.actionButton, theme.shadows.medium]} activeOpacity={0.7}>
-            <LinearGradient
-              colors={['rgba(107, 114, 128, 0.15)', 'rgba(107, 114, 128, 0.05)']}
-              style={styles.actionIconContainer}
-            >
-              <Ionicons name="settings-outline" size={22} color={theme.colors.gray600} />
-            </LinearGradient>
-            <Text style={styles.actionButtonText}>Settings</Text>
-            <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
-          </TouchableOpacity>
         </View>
 
-        {/* Sign Out Button */}
+        <AnimatedButton
-        <TouchableOpacity onPress={handleLogout} activeOpacity={0.8}>
+          title="Sign Out"
-          <LinearGradient
+          onPress={confirmSignOut}
-            colors={theme.gradients.danger}
+          variant="danger"
-            start={{ x: 0, y: 0 }}
+          style={styles.signOutButton}
-            end={{ x: 1, y: 0 }}
+          icon={<Ionicons name="log-out-outline" size={20} color="#fff" />}
-            style={[styles.logoutButton, theme.shadows.glowDanger]}
+        />
-          >
-            <Ionicons name="log-out-outline" size={20} color="#fff" />
-            <Text style={styles.logoutText}>Sign Out</Text>
-          </LinearGradient>
-        </TouchableOpacity>
 
-        {/* App Version */}
         <Text style={styles.version}>Version 1.0.0</Text>
       </View>
-    </ScrollView>
+    </View>
   );
 }
 
@@ -238,134 +138,130 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: theme.colors.background,
   },
-  content: {
+  header: {
-    padding: 20,
     paddingTop: 60,
+    paddingBottom: 30,
+    borderBottomLeftRadius: theme.borderRadius.xl,
+    borderBottomRightRadius: theme.borderRadius.xl,
+    alignItems: 'center',
   },
   profileCard: {
-    borderRadius: theme.borderRadius.xl,
+    alignItems: 'center',
-    padding: 28,
-    alignItems: "center",
-    marginBottom: 24,
   },
   avatarContainer: {
+    position: 'relative',
     marginBottom: 16,
   },
   avatar: {
-    width: 96,
+    width: 100,
-    height: 96,
+    height: 100,
-    borderRadius: 48,
+    borderRadius: 50,
-    justifyContent: "center",
+    borderWidth: 4,
-    alignItems: "center",
+    borderColor: 'rgba(255, 255, 255, 0.3)',
-    borderWidth: 3,
-    borderColor: "rgba(255, 255, 255, 0.3)",
   },
-  avatarText: {
+  placeholderAvatar: {
-    fontSize: theme.typography.fontSize['4xl'],
+    width: 100,
-    fontWeight: theme.typography.fontWeight.bold,
+    height: 100,
-    color: theme.colors.white,
+    borderRadius: 50,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 4,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  editBadge: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: theme.colors.white,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
   },
   name: {
     fontSize: theme.typography.fontSize['2xl'],
     fontWeight: theme.typography.fontWeight.bold,
     color: theme.colors.white,
-    marginBottom: 6,
-  },
-  email: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
     marginBottom: 4,
   },
-  phone: {
+  email: {
     fontSize: theme.typography.fontSize.sm,
-    color: "rgba(255, 255, 255, 0.8)",
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginBottom: 12,
+  },
+  memberBadge: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  memberText: {
+    color: theme.colors.white,
+    fontSize: theme.typography.fontSize.xs,
+    fontWeight: theme.typography.fontWeight.bold,
+    letterSpacing: 0.5,
+  },
+  content: {
+    padding: 20,
+    marginTop: -20,
   },
   section: {
     marginBottom: 24,
   },
   sectionTitle: {
-    fontSize: theme.typography.fontSize.xl,
+    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.semibold,
+    fontWeight: theme.typography.fontWeight.bold,
     color: theme.colors.gray900,
     marginBottom: 12,
+    marginLeft: 4,
   },
   infoCard: {
     backgroundColor: theme.colors.white,
     borderRadius: theme.borderRadius.xl,
-    padding: 16,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: theme.colors.gray100,
   },
   infoRow: {
-    flexDirection: "row",
+    flexDirection: 'row',
-    justifyContent: "space-between",
+    alignItems: 'center',
-    alignItems: "center",
+    padding: 12,
-    paddingVertical: 14,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.gray200,
   },
-  infoLabel: {
+  iconContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-  },
-  infoIconContainer: {
     width: 36,
     height: 36,
-    borderRadius: 18,
+    borderRadius: 10,
-    justifyContent: "center",
+    justifyContent: 'center',
-    alignItems: "center",
+    alignItems: 'center',
-  },
-  infoLabelText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray700,
-    fontWeight: theme.typography.fontWeight.medium,
-  },
-  infoValue: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray900,
-    fontWeight: theme.typography.fontWeight.semibold,
-  },
-  actionButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 12,
-  },
-  actionIconContainer: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: "center",
-    alignItems: "center",
     marginRight: 12,
   },
-  actionButtonText: {
+  infoLabel: {
     flex: 1,
     fontSize: theme.typography.fontSize.base,
     color: theme.colors.gray900,
     fontWeight: theme.typography.fontWeight.medium,
   },
-  logoutButton: {
+  divider: {
-    paddingVertical: 16,
+    height: 1,
-    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.gray100,
-    alignItems: "center",
+    marginLeft: 60,
-    justifyContent: "center",
-    flexDirection: "row",
-    gap: 8,
-    marginTop: 8,
-    marginBottom: 16,
   },
-  logoutText: {
+  signOutButton: {
-    color: theme.colors.white,
+    marginTop: 8,
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
   },
   version: {
-    textAlign: "center",
+    textAlign: 'center',
+    marginTop: 24,
+    color: theme.colors.gray400,
     fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray500,
-    marginTop: 8,
-    marginBottom: 20,
   },
 });

apps/mobile/src/components/ActivityWidget.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '../styles/theme';
+
+const { width } = Dimensions.get('window');
+
+interface ActivityWidgetProps {
+    steps: number;
+    calories: number;
+    duration: number; // in minutes
+}
+
+export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProps) {
+    return (
+        <View style={styles.container}>
+            <LinearGradient
+                colors={theme.gradients.dark}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+                style={[styles.card, theme.shadows.medium]}
+            >
+                <View style={styles.header}>
+                    <Text style={styles.title}>Daily Activity</Text>
+                    <Ionicons name="stats-chart" size={20} color={theme.colors.primary} />
+                </View>
+
+                <View style={styles.statsRow}>
+                    <View style={styles.statItem}>
+                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(59, 130, 246, 0.2)' }]}>
+                            <Ionicons name="footsteps" size={20} color="#3b82f6" />
+                        </View>
+                        <Text style={styles.statValue}>{steps.toLocaleString()}</Text>
+                        <Text style={styles.statLabel}>Steps</Text>
+                    </View>
+
+                    <View style={styles.divider} />
+
+                    <View style={styles.statItem}>
+                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(239, 68, 68, 0.2)' }]}>
+                            <Ionicons name="flame" size={20} color="#ef4444" />
+                        </View>
+                        <Text style={styles.statValue}>{calories}</Text>
+                        <Text style={styles.statLabel}>Kcal</Text>
+                    </View>
+
+                    <View style={styles.divider} />
+
+                    <View style={styles.statItem}>
+                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(16, 185, 129, 0.2)' }]}>
+                            <Ionicons name="time" size={20} color="#10b981" />
+                        </View>
+                        <Text style={styles.statValue}>{duration}m</Text>
+                        <Text style={styles.statLabel}>Active</Text>
+                    </View>
+                </View>
+
+                {/* Simple Bar Chart Visualization */}
+                <View style={styles.chartContainer}>
+                    {[0.4, 0.6, 0.3, 0.8, 0.5, 0.9, 0.7].map((height, index) => (
+                        <View key={index} style={styles.barContainer}>
+                            <LinearGradient
+                                colors={theme.gradients.primaryVertical}
+                                style={[styles.bar, { height: height * 60 }]}
+                            />
+                            <Text style={styles.dayLabel}>
+                                {['M', 'T', 'W', 'T', 'F', 'S', 'S'][index]}
+                            </Text>
+                        </View>
+                    ))}
+                </View>
+            </LinearGradient>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+    card: {
+        borderRadius: 24,
+        padding: 20,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#fff',
+    },
+    statsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    statItem: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    statValue: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#fff',
+        marginBottom: 2,
+    },
+    statLabel: {
+        fontSize: 12,
+        color: theme.colors.gray400,
+        fontWeight: '500',
+    },
+    divider: {
+        width: 1,
+        height: 40,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    chartContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+        height: 80,
+        paddingTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    barContainer: {
+        alignItems: 'center',
+        gap: 8,
+    },
+    bar: {
+        width: 6,
+        borderRadius: 3,
+        opacity: 0.8,
+    },
+    dayLabel: {
+        fontSize: 10,
+        color: theme.colors.gray500,
+        fontWeight: '600',
+    },
+});

apps/mobile/src/components/AnimatedButton.tsx

@@ -15,11 +15,13 @@ import {
 } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { theme } from '../styles/theme';
+import { haptics } from '../utils/haptics';
 
 interface AnimatedButtonProps {
-    onPress: () => void;
     title: string;
-    variant?: 'primary' | 'secondary' | 'danger' | 'success';
+    onPress: () => void;
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+    size?: 'sm' | 'md' | 'lg';
     loading?: boolean;
     disabled?: boolean;
     style?: ViewStyle;
@@ -28,109 +30,125 @@ interface AnimatedButtonProps {
 }
 
 export function AnimatedButton({
-    onPress,
     title,
+    onPress,
     variant = 'primary',
+    size = 'md',
     loading = false,
     disabled = false,
     style,
     textStyle,
     icon,
 }: AnimatedButtonProps) {
-    const scaleAnim = useRef(new Animated.Value(1)).current;
+    const scale = useRef(new Animated.Value(1)).current;
 
     const handlePressIn = () => {
-        Animated.spring(scaleAnim, {
+        Animated.spring(scale, {
             toValue: 0.95,
-            friction: 8,
-            tension: 100,
             useNativeDriver: true,
         }).start();
     };
 
     const handlePressOut = () => {
-        Animated.spring(scaleAnim, {
+        Animated.spring(scale, {
             toValue: 1,
-            friction: 8,
-            tension: 100,
             useNativeDriver: true,
         }).start();
     };
 
-    const getGradientColors = (): readonly [string, string, ...string[]] => {
+    const handlePress = () => {
+        if (!disabled && !loading) {
+            haptics.light();
+            onPress();
+        }
+    };
+
+    const getGradientColors = () => {
+        if (disabled) return ['#9ca3af', '#6b7280'] as const;
         switch (variant) {
-            case 'primary':
+            case 'secondary':
-                return theme.gradients.primary;
+                return theme.gradients.purple;
-            case 'danger':
-                return theme.gradients.danger;
             case 'success':
                 return theme.gradients.success;
-            case 'secondary':
+            case 'danger':
-                return [theme.colors.gray600, theme.colors.gray700] as const;
+                return theme.gradients.danger;
+            case 'warning':
+                return theme.gradients.warning;
             default:
                 return theme.gradients.primary;
         }
     };
 
-    const getShadowStyle = () => {
+    const getSizeStyles = () => {
-        if (disabled) return {};
+        switch (size) {
-        switch (variant) {
+            case 'sm':
-            case 'danger':
+                return { paddingVertical: 8, paddingHorizontal: 16, fontSize: 14 };
-                return theme.shadows.glowDanger;
+            case 'lg':
+                return { paddingVertical: 16, paddingHorizontal: 32, fontSize: 18 };
             default:
-                return theme.shadows.glow;
+                return { paddingVertical: 12, paddingHorizontal: 24, fontSize: 16 };
         }
     };
 
+    const sizeStyles = getSizeStyles();
+
     return (
-        <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+        <TouchableOpacity
-            <TouchableOpacity
+            onPressIn={handlePressIn}
-                onPress={onPress}
+            onPressOut={handlePressOut}
-                onPressIn={handlePressIn}
+            onPress={handlePress}
-                onPressOut={handlePressOut}
+            disabled={disabled || loading}
-                disabled={disabled || loading}
+            activeOpacity={0.9}
-                activeOpacity={0.9}
+            style={[styles.container, style]}
-            >
+        >
+            <Animated.View style={{ transform: [{ scale }], width: '100%' }}>
                 <LinearGradient
                     colors={getGradientColors()}
                     start={{ x: 0, y: 0 }}
                     end={{ x: 1, y: 0 }}
                     style={[
-                        styles.button,
+                        styles.gradient,
-                        getShadowStyle(),
+                        { paddingVertical: sizeStyles.paddingVertical, paddingHorizontal: sizeStyles.paddingHorizontal },
-                        disabled && styles.disabled,
                     ]}
                 >
                     {loading ? (
                         <ActivityIndicator color="#fff" />
                     ) : (
                         <>
-                            {icon}
+                            {icon && <React.Fragment>{icon}</React.Fragment>}
-                            <Text style={[styles.text, textStyle]}>{title}</Text>
+                            <Text
+                                style={[
+                                    styles.text,
+                                    { fontSize: sizeStyles.fontSize },
+                                    icon ? { marginLeft: 8 } : {},
+                                    textStyle,
+                                ]}
+                            >
+                                {title}
+                            </Text>
                         </>
                     )}
                 </LinearGradient>
-            </TouchableOpacity>
+            </Animated.View>
-        </Animated.View>
+        </TouchableOpacity>
     );
 }
 
 const styles = StyleSheet.create({
-    button: {
+    container: {
-        paddingVertical: 16,
+        alignItems: 'center',
-        paddingHorizontal: 24,
+        justifyContent: 'center',
-        borderRadius: theme.borderRadius.lg,
+    },
+    gradient: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: 8,
+        borderRadius: 12,
+        ...theme.shadows.medium,
     },
     text: {
-        color: theme.colors.white,
+        color: '#fff',
-        fontSize: theme.typography.fontSize.base,
+        fontWeight: '600',
-        fontWeight: theme.typography.fontWeight.semibold,
+        textAlign: 'center',
-    },
-    disabled: {
-        opacity: 0.5,
     },
 });

apps/mobile/src/components/CircularProgress.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, Text } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { theme } from '../styles/theme';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface CircularProgressProps {
+    size?: number;
+    strokeWidth?: number;
+    progress: number; // 0 to 100
+    color?: string;
+    backgroundColor?: string;
+}
+
+export function CircularProgress({
+    size = 60,
+    strokeWidth = 6,
+    progress,
+    color = theme.colors.primary,
+    backgroundColor = theme.colors.gray200,
+}: CircularProgressProps) {
+    const animatedValue = useRef(new Animated.Value(0)).current;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = radius * 2 * Math.PI;
+
+    useEffect(() => {
+        Animated.timing(animatedValue, {
+            toValue: progress,
+            duration: 1000,
+            useNativeDriver: true,
+        }).start();
+    }, [progress]);
+
+    const strokeDashoffset = animatedValue.interpolate({
+        inputRange: [0, 100],
+        outputRange: [circumference, 0],
+    });
+
+    return (
+        <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+            <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+                <Circle
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    stroke={backgroundColor}
+                    strokeWidth={strokeWidth}
+                    fill="transparent"
+                />
+                <AnimatedCircle
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    stroke={color}
+                    strokeWidth={strokeWidth}
+                    fill="transparent"
+                    strokeDasharray={circumference}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap="round"
+                    rotation="-90"
+                    origin={`${size / 2}, ${size / 2}`}
+                />
+            </Svg>
+            <View style={[StyleSheet.absoluteFillObject, { justifyContent: 'center', alignItems: 'center' }]}>
+                <Text style={{ fontSize: size * 0.25, fontWeight: 'bold', color: theme.colors.gray900 }}>
+                    {Math.round(progress)}%
+                </Text>
+            </View>
+        </View>
+    );
+}

apps/mobile/src/components/CustomTabBar.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { theme } from '../styles/theme';
+import { Animated } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
+    return (
+        <View style={styles.container}>
+            <LinearGradient
+                colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']}
+                style={[styles.tabBar, theme.shadows.medium]}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 0, y: 1 }}
+            >
+                {state.routes.map((route, index) => {
+                    const { options } = descriptors[route.key];
+                    const isFocused = state.index === index;
+
+                    const onPress = () => {
+                        const event = navigation.emit({
+                            type: 'tabPress',
+                            target: route.key,
+                            canPreventDefault: true,
+                        });
+
+                        if (!isFocused && !event.defaultPrevented) {
+                            navigation.navigate(route.name);
+                        }
+                    };
+
+                    const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => {
+                        switch (routeName) {
+                            case 'index':
+                                return focused ? 'home' : 'home-outline';
+                            case 'goals':
+                                return focused ? 'trophy' : 'trophy-outline';
+                            case 'attendance':
+                                return focused ? 'calendar' : 'calendar-outline';
+                            case 'recommendations':
+                                return focused ? 'sparkles' : 'sparkles-outline';
+                            case 'profile':
+                                return focused ? 'person' : 'person-outline';
+                            default:
+                                return 'ellipse-outline';
+                        }
+                    };
+
+                    // Animation for scale
+                    const scaleValue = React.useRef(new Animated.Value(1)).current;
+
+                    React.useEffect(() => {
+                        Animated.spring(scaleValue, {
+                            toValue: isFocused ? 1.2 : 1,
+                            useNativeDriver: true,
+                            friction: 8,
+                        }).start();
+                    }, [isFocused]);
+
+                    return (
+                        <TouchableOpacity
+                            key={index}
+                            accessibilityRole="button"
+                            accessibilityState={isFocused ? { selected: true } : {}}
+                            accessibilityLabel={options.tabBarAccessibilityLabel}
+                            testID={(options as any).tabBarTestID}
+                            onPress={onPress}
+                            style={styles.tabItem}
+                            activeOpacity={0.7}
+                        >
+                            <Animated.View style={{ transform: [{ scale: scaleValue }] }}>
+                                {isFocused ? (
+                                    <LinearGradient
+                                        colors={theme.gradients.primary}
+                                        style={styles.iconContainer}
+                                    >
+                                        <Ionicons
+                                            name={getIconName(route.name, true)}
+                                            size={20}
+                                            color="#fff"
+                                        />
+                                    </LinearGradient>
+                                ) : (
+                                    <Ionicons
+                                        name={getIconName(route.name, false)}
+                                        size={24}
+                                        color={theme.colors.gray500}
+                                    />
+                                )}
+                            </Animated.View>
+                        </TouchableOpacity>
+                    );
+                })}
+            </LinearGradient>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        paddingBottom: Platform.OS === 'ios' ? 30 : 20,
+        pointerEvents: 'box-none',
+    },
+    tabBar: {
+        flexDirection: 'row',
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        borderRadius: 35,
+        height: 70,
+        width: width - 40,
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.5)',
+        paddingHorizontal: 10,
+    },
+    tabItem: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: theme.colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+});

apps/mobile/src/components/GoalCarousel.tsx

@@ -0,0 +1,223 @@
+import React, { useRef } from 'react';
+import { View, Text, StyleSheet, Dimensions, ScrollView, TouchableOpacity, Animated } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '../styles/theme';
+import { CircularProgress } from './CircularProgress';
+import type { FitnessGoal } from '../services/fitnessGoals';
+
+const { width } = Dimensions.get('window');
+const CARD_WIDTH = width * 0.8;
+const SPACING = 20;
+
+interface GoalCarouselProps {
+    goals: FitnessGoal[];
+    onGoalPress: (goal: FitnessGoal) => void;
+}
+
+export function GoalCarousel({ goals, onGoalPress }: GoalCarouselProps) {
+    const scrollX = useRef(new Animated.Value(0)).current;
+
+    if (goals.length === 0) {
+        return (
+            <View style={styles.emptyContainer}>
+                <Text style={styles.emptyText}>No active goals</Text>
+            </View>
+        );
+    }
+
+    return (
+        <View>
+            <Animated.ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                snapToInterval={CARD_WIDTH + SPACING}
+                decelerationRate="fast"
+                contentContainerStyle={styles.scrollContent}
+                onScroll={Animated.event(
+                    [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+                    { useNativeDriver: true }
+                )}
+                scrollEventThrottle={16}
+            >
+                {goals.map((goal, index) => {
+                    const inputRange = [
+                        (index - 1) * (CARD_WIDTH + SPACING),
+                        index * (CARD_WIDTH + SPACING),
+                        (index + 1) * (CARD_WIDTH + SPACING),
+                    ];
+
+                    const scale = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [0.9, 1, 0.9],
+                        extrapolate: 'clamp',
+                    });
+
+                    const opacity = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [0.7, 1, 0.7],
+                        extrapolate: 'clamp',
+                    });
+
+                    return (
+                        <TouchableOpacity
+                            key={goal.id}
+                            activeOpacity={0.9}
+                            onPress={() => onGoalPress(goal)}
+                        >
+                            <Animated.View
+                                style={[
+                                    styles.cardContainer,
+                                    { transform: [{ scale }], opacity },
+                                ]}
+                            >
+                                <LinearGradient
+                                    colors={['#ffffff', '#f9fafb']}
+                                    style={[styles.card, theme.shadows.medium]}
+                                >
+                                    <View style={styles.cardHeader}>
+                                        <View style={styles.iconContainer}>
+                                            <LinearGradient
+                                                colors={theme.gradients.primary}
+                                                style={styles.iconGradient}
+                                            >
+                                                <Ionicons name="trophy" size={24} color="#fff" />
+                                            </LinearGradient>
+                                        </View>
+                                        <View style={styles.priorityBadge}>
+                                            <Text style={styles.priorityText}>{goal.priority.toUpperCase()}</Text>
+                                        </View>
+                                    </View>
+
+                                    <Text style={styles.title} numberOfLines={1}>{goal.title}</Text>
+                                    <Text style={styles.description} numberOfLines={2}>{goal.description}</Text>
+
+                                    <View style={styles.progressContainer}>
+                                        <CircularProgress
+                                            progress={goal.progress || 0}
+                                            size={80}
+                                            strokeWidth={8}
+                                            color={theme.colors.primary}
+                                        />
+                                        <View style={styles.progressDetails}>
+                                            <Text style={styles.progressValue}>
+                                                {goal.currentValue} / {goal.targetValue}
+                                            </Text>
+                                            <Text style={styles.progressUnit}>{goal.unit}</Text>
+                                        </View>
+                                    </View>
+
+                                    <View style={styles.footer}>
+                                        <Text style={styles.date}>
+                                            Target: {goal.targetDate ? new Date(goal.targetDate).toLocaleDateString() : 'No date'}
+                                        </Text>
+                                    </View>
+                                </LinearGradient>
+                            </Animated.View>
+                        </TouchableOpacity>
+                    );
+                })}
+            </Animated.ScrollView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    scrollContent: {
+        paddingHorizontal: (width - CARD_WIDTH) / 2,
+        paddingVertical: 20,
+    },
+    emptyContainer: {
+        height: 200,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    emptyText: {
+        color: theme.colors.gray500,
+        fontSize: 16,
+    },
+    cardContainer: {
+        width: CARD_WIDTH,
+        marginRight: SPACING,
+    },
+    card: {
+        borderRadius: 24,
+        padding: 24,
+        height: 320,
+        justifyContent: 'space-between',
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.05)',
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: 16,
+    },
+    iconContainer: {
+        shadowColor: theme.colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    iconGradient: {
+        width: 48,
+        height: 48,
+        borderRadius: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    priorityBadge: {
+        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+    },
+    priorityText: {
+        color: theme.colors.primary,
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '800',
+        color: theme.colors.gray900,
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 14,
+        color: theme.colors.gray500,
+        marginBottom: 24,
+        lineHeight: 20,
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 24,
+    },
+    progressDetails: {
+        alignItems: 'flex-end',
+    },
+    progressValue: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: theme.colors.gray900,
+    },
+    progressUnit: {
+        fontSize: 14,
+        color: theme.colors.gray500,
+        fontWeight: '500',
+    },
+    footer: {
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.gray100,
+        paddingTop: 16,
+    },
+    date: {
+        fontSize: 12,
+        color: theme.colors.gray400,
+        fontWeight: '500',
+    },
+});

apps/mobile/src/components/GoalCreationModal.tsx

@@ -8,6 +8,7 @@ import {
     TouchableOpacity,
     ScrollView,
     Platform,
+    Alert,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -59,7 +60,7 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
 
     const handleSubmit = async () => {
         if (!title.trim()) {
-            alert('Please enter a goal title');
+            Alert.alert('Error', 'Please enter a goal title');
             return;
         }
 
@@ -81,7 +82,7 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
             onClose();
         } catch (error) {
             console.error('Error creating goal:', error);
-            alert('Failed to create goal. Please try again.');
+            Alert.alert('Error', 'Failed to create goal. Please try again.');
         } finally {
             setSubmitting(false);
         }
@@ -203,28 +204,31 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
                         <Text style={styles.label}>Target Date</Text>
                         <TouchableOpacity
                             style={styles.dateButton}
-                            onPress={() => setShowDatePicker(true)}
+                            onPress={() => setShowDatePicker(!showDatePicker)}
                         >
                             <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
                                 {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
                             </Text>
-                            <Ionicons name="calendar-outline" size={20} color="#6b7280" />
+                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
                         </TouchableOpacity>
                     </View>
 
                     {showDatePicker && (
-                        <DateTimePicker
+                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
-                            value={targetDate || new Date()}
+                            <DateTimePicker
-                            mode="date"
+                                value={targetDate || new Date()}
-                            display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+                                mode="date"
-                            onChange={(event, selectedDate) => {
+                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
-                                setShowDatePicker(Platform.OS === 'ios');
+                                onChange={(event, selectedDate) => {
-                                if (selectedDate) {
+                                    setShowDatePicker(Platform.OS === 'ios');
-                                    setTargetDate(selectedDate);
+                                    if (selectedDate) {
-                                }
+                                        setTargetDate(selectedDate);
-                            }}
+                                    }
-                            minimumDate={new Date()}
+                                }}
-                        />
+                                minimumDate={new Date()}
+                                themeVariant="light"
+                            />
+                        </View>
                     )}
 
                     {/* Priority */}
@@ -411,4 +415,12 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         color: '#fff',
     },
+    datePickerContainer: {
+        backgroundColor: '#fff',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#d1d5db',
+        marginTop: 8,
+        overflow: 'hidden',
+    },
 });

apps/mobile/src/components/ParallaxScrollView.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { StyleSheet, View, Animated, Dimensions, ImageSourcePropType } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { theme } from '../styles/theme';
+
+const { width } = Dimensions.get('window');
+const HEADER_HEIGHT = 300;
+
+interface ParallaxScrollViewProps {
+    children: React.ReactNode;
+    headerImage?: ImageSourcePropType;
+    headerBackgroundColor?: string;
+    headerContent?: React.ReactNode;
+}
+
+export function ParallaxScrollView({
+    children,
+    headerImage,
+    headerBackgroundColor = theme.colors.primary,
+    headerContent,
+}: ParallaxScrollViewProps) {
+    const scrollY = React.useRef(new Animated.Value(0)).current;
+
+    const headerTranslateY = scrollY.interpolate({
+        inputRange: [0, HEADER_HEIGHT],
+        outputRange: [0, -HEADER_HEIGHT / 2],
+        extrapolate: 'clamp',
+    });
+
+    const imageScale = scrollY.interpolate({
+        inputRange: [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+        outputRange: [2, 1, 1],
+        extrapolate: 'clamp',
+    });
+
+    const headerOpacity = scrollY.interpolate({
+        inputRange: [0, HEADER_HEIGHT / 2],
+        outputRange: [1, 0],
+        extrapolate: 'clamp',
+    });
+
+    return (
+        <View style={styles.container}>
+            <Animated.ScrollView
+                contentContainerStyle={styles.scrollContent}
+                onScroll={Animated.event(
+                    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+                    { useNativeDriver: true }
+                )}
+                scrollEventThrottle={16}
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={styles.contentContainer}>{children}</View>
+            </Animated.ScrollView>
+
+            <Animated.View
+                style={[
+                    styles.header,
+                    {
+                        transform: [{ translateY: headerTranslateY }],
+                    },
+                ]}
+            >
+                <Animated.View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            transform: [{ scale: imageScale }],
+                        },
+                    ]}
+                >
+                    <LinearGradient
+                        colors={theme.gradients.primary}
+                        style={StyleSheet.absoluteFill}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 1 }}
+                    />
+                    {headerImage && (
+                        <Animated.Image
+                            source={headerImage}
+                            style={[styles.headerImage, { opacity: 0.5 }]}
+                        />
+                    )}
+                </Animated.View>
+
+                <Animated.View style={[styles.headerContent, { opacity: headerOpacity }]}>
+                    {headerContent}
+                </Animated.View>
+            </Animated.View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    },
+    scrollContent: {
+        paddingTop: HEADER_HEIGHT,
+    },
+    contentContainer: {
+        backgroundColor: theme.colors.background,
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        marginTop: -32,
+        paddingTop: 32,
+        minHeight: 800,
+    },
+    header: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: HEADER_HEIGHT,
+        overflow: 'hidden',
+        zIndex: 1,
+    },
+    headerImage: {
+        ...StyleSheet.absoluteFillObject,
+        width: undefined,
+        height: undefined,
+        resizeMode: 'cover',
+    },
+    headerContent: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingBottom: 32,
+    },
+});

apps/mobile/src/components/QuickActionGrid.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '../styles/theme';
+
+const { width } = Dimensions.get('window');
+const ITEM_WIDTH = (width - 40 - 16) / 2; // (Screen width - padding - gap) / 2
+
+interface QuickActionProps {
+    icon: keyof typeof Ionicons.glyphMap;
+    label: string;
+    gradient: readonly [string, string, ...string[]];
+    onPress?: () => void;
+}
+
+function QuickActionItem({ icon, label, gradient, onPress }: QuickActionProps) {
+    return (
+        <TouchableOpacity onPress={onPress} activeOpacity={0.8} style={styles.itemContainer}>
+            <LinearGradient
+                colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.6)']}
+                style={[styles.item, theme.shadows.subtle]}
+            >
+                <LinearGradient
+                    colors={gradient}
+                    style={styles.iconContainer}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                >
+                    <Ionicons name={icon} size={24} color="#fff" />
+                </LinearGradient>
+                <Text style={styles.label}>{label}</Text>
+                <Ionicons name="chevron-forward" size={16} color={theme.colors.gray400} style={styles.arrow} />
+            </LinearGradient>
+        </TouchableOpacity>
+    );
+}
+
+export function QuickActionGrid() {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.sectionTitle}>Quick Actions</Text>
+            <View style={styles.grid}>
+                <QuickActionItem
+                    icon="barbell"
+                    label="Log Workout"
+                    gradient={theme.gradients.primary}
+                />
+                <QuickActionItem
+                    icon="restaurant"
+                    label="Track Meal"
+                    gradient={theme.gradients.success}
+                />
+                <QuickActionItem
+                    icon="water"
+                    label="Add Water"
+                    gradient={theme.gradients.ocean}
+                />
+                <QuickActionItem
+                    icon="scan"
+                    label="Scan Food"
+                    gradient={theme.gradients.purple}
+                />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 20,
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: theme.colors.gray900,
+        marginBottom: 16,
+    },
+    grid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 16,
+    },
+    itemContainer: {
+        width: ITEM_WIDTH,
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 20,
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.6)',
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: theme.colors.gray800,
+        flex: 1,
+    },
+    arrow: {
+        opacity: 0.5,
+    },
+});

apps/mobile/src/services/fitnessGoals.ts

@@ -34,8 +34,8 @@ export interface CreateGoalData {
 }
 
 export class FitnessGoalsService {
-    private async getAuthHeaders(token: string | null): Promise<HeadersInit> {
+    private async getAuthHeaders(token: string | null): Promise<any> {
-        const headers: HeadersInit = {
+        const headers: any = {
             'Content-Type': 'application/json',
         };
 

apps/mobile/src/styles/theme.ts

@@ -10,6 +10,7 @@ export const theme = {
         primary: '#3b82f6',
         primaryDark: '#2563eb',
         primaryLight: '#60a5fa',
+        secondary: '#8b5cf6',
 
         // Accent colors
         purple: '#8b5cf6',

apps/mobile/src/utils/haptics.ts

@@ -0,0 +1,40 @@
+import * as Haptics from 'expo-haptics';
+import { Platform } from 'react-native';
+
+export const haptics = {
+    light: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+    },
+    medium: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        }
+    },
+    heavy: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+        }
+    },
+    success: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
+    },
+    warning: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+        }
+    },
+    error: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        }
+    },
+    selection: () => {
+        if (Platform.OS !== 'web') {
+            Haptics.selectionAsync();
+        }
+    },
+};