3 and 4 completed

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

@@ -14,12 +14,16 @@ import { LinearGradient } from "expo-linear-gradient";
 import { theme } from "../../styles/theme";
 import { GoalProgressCard } from "../../components/GoalProgressCard";
 import { GoalCreationModal } from "../../components/GoalCreationModal";
+import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
+import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
 import { useUser, useAuth } from "@clerk/clerk-expo";
 import {
   fitnessGoalsService,
   type FitnessGoal,
   type CreateGoalData,
 } from "../../services/fitnessGoals";
+import { getUserStatistics } from "../../api/statistics";
+import type { UserStatisticsResponse } from "../../api/types";
 import { useFocusEffect } from "expo-router";
 import * as SecureStore from "expo-secure-store";
 import log from "../../utils/logger";
@@ -28,8 +32,12 @@ export default function GoalsScreen() {
   const { user } = useUser();
   const { getToken } = useAuth();
   const [goals, setGoals] = useState<FitnessGoal[]>([]);
+  const [statistics, setStatistics] = useState<UserStatisticsResponse | null>(
+    null,
+  );
   const [refreshing, setRefreshing] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [showAnalytics, setShowAnalytics] = useState(false);
   const fabScale = useRef(new Animated.Value(1)).current;
 
   const loadGoals = useCallback(async () => {
@@ -60,6 +68,14 @@ export default function GoalsScreen() {
 
       const loadedGoals = await fitnessGoalsService.getGoals(user.id, token);
       setGoals(loadedGoals);
+
+      // Load statistics
+      try {
+        const stats = await getUserStatistics(user.id);
+        setStatistics(stats);
+      } catch (error) {
+        log.error("Failed to load statistics", error);
+      }
     } catch (error) {
       log.error("Failed to load goals", error);
     }
@@ -199,6 +215,47 @@ export default function GoalsScreen() {
           </View>
         )}
 
+        {/* Analytics Section */}
+        {statistics && (
+          <View style={styles.analyticsSection}>
+            <TouchableOpacity
+              style={styles.analyticsHeader}
+              onPress={() => setShowAnalytics(!showAnalytics)}
+            >
+              <View style={styles.analyticsHeaderLeft}>
+                <Ionicons
+                  name="bar-chart-outline"
+                  size={20}
+                  color={theme.colors.primary}
+                />
+                <Text style={styles.analyticsTitle}>Progress Analytics</Text>
+              </View>
+              <Ionicons
+                name={showAnalytics ? "chevron-up" : "chevron-down"}
+                size={20}
+                color={theme.colors.gray400}
+              />
+            </TouchableOpacity>
+
+            {showAnalytics && (
+              <View style={styles.analyticsContent}>
+                {statistics.weeklyTrend.length > 0 && (
+                  <WeeklyProgressChart
+                    weeklyData={statistics.weeklyTrend}
+                    title="8-Week Trend"
+                  />
+                )}
+                {statistics.goals.goalsByType.length > 0 && (
+                  <GoalTypeBreakdownChart
+                    data={statistics.goals.goalsByType}
+                    title="Goals by Type"
+                  />
+                )}
+              </View>
+            )}
+          </View>
+        )}
+
         {/* Active Goals */}
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>
@@ -348,6 +405,33 @@ const styles = StyleSheet.create({
     color: "#6b7280",
     fontWeight: "500",
   },
+  analyticsSection: {
+    padding: 16,
+    paddingTop: 0,
+  },
+  analyticsHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: theme.colors.white,
+    padding: 16,
+    borderRadius: theme.borderRadius.xl,
+    marginBottom: 12,
+    ...theme.shadows.subtle,
+  },
+  analyticsHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  analyticsTitle: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.gray700,
+  },
+  analyticsContent: {
+    paddingTop: 4,
+  },
   section: {
     padding: 20,
     paddingTop: 10,