feat: add performance metrics dashboard to mobile home screen with gradient cards

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

@@ -10,6 +10,7 @@ import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
 import { HydrationWidget } from "../../components/HydrationWidget";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
+import { PerformanceMetrics } from "../../components/PerformanceMetrics";
 import { Ionicons } from "@expo/vector-icons";
 
 export default function HomeScreen() {
@@ -131,6 +132,9 @@ export default function HomeScreen() {
           duration={45}
         />
 
+        {/* Performance Metrics */}
+        <PerformanceMetrics />
+
         {/* Hydration Widget */}
         <HydrationWidget
           current={waterIntake}

apps/mobile/src/components/PerformanceMetrics.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '../styles/theme';
+
+interface MetricProps {
+  title: string;
+  value: string | number;
+  change: string;
+  trend: 'up' | 'down';
+  icon: string;
+  colors: string[];
+}
+
+const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon, colors }) => {
+  const isPositive = trend === 'up';
+  const changeColor = isPositive ? '#10b981' : '#ef4444';
+  const trendIcon = isPositive ? 'arrow-up' : 'arrow-down';
+
+  return (
+    <LinearGradient
+      colors={colors}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={styles.card}
+    >
+      <View style={styles.cardContent}>
+        <View style={styles.iconContainer}>
+          <Ionicons name={icon as any} size={24} color="#fff" />
+        </View>
+
+        <View style={styles.info}>
+          <Text style={styles.label}>{title}</Text>
+          <Text style={styles.value}>{value}</Text>
+        </View>
+
+        <View style={styles.changeContainer}>
+          <View style={[styles.trendBadge, { backgroundColor: changeColor }]}>
+            <Ionicons
+              name={trendIcon}
+              size={12}
+              color="#fff"
+              style={{ marginRight: 4 }}
+            />
+            <Text style={styles.changeText}>{change}</Text>
+          </View>
+          <Text style={styles.compareText}>vs month</Text>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+export const PerformanceMetrics: React.FC = () => {
+  const metrics: MetricProps[] = [
+    {
+      title: 'Total Users',
+      value: '0',
+      change: '+12%',
+      trend: 'up',
+      icon: 'people',
+      colors: ['#3b82f6', '#06b6d4'],
+    },
+    {
+      title: 'Active Clients',
+      value: '0',
+      change: '+5%',
+      trend: 'up',
+      icon: 'person-add',
+      colors: ['#10b981', '#14b8a6'],
+    },
+    {
+      title: 'Revenue',
+      value: '$0.00',
+      change: '0%',
+      trend: 'down',
+      icon: 'wallet',
+      colors: ['#a855f7', '#3b82f6'],
+    },
+    {
+      title: 'Growth',
+      value: '24%',
+      change: '-2%',
+      trend: 'down',
+      icon: 'trending-up',
+      colors: ['#f97316', '#ef4444'],
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Performance metrics & athlete insights</Text>
+      </View>
+
+      <View style={styles.metricsGrid}>
+        {metrics.map((metric, index) => (
+          <View key={index} style={styles.metricWrapper}>
+            <MetricCard {...metric} />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    marginBottom: 24,
+  },
+  header: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: theme.colors.gray600,
+    letterSpacing: 0.3,
+  },
+  metricsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  metricWrapper: {
+    width: '48%',
+  },
+  card: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+  },
+  cardContent: {
+    padding: 16,
+    minHeight: 140,
+    justifyContent: 'space-between',
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  info: {
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: 'rgba(255, 255, 255, 0.8)',
+    letterSpacing: 0.5,
+    marginBottom: 6,
+    textTransform: 'uppercase',
+  },
+  value: {
+    fontSize: 24,
+    fontWeight: '800',
+    color: '#fff',
+  },
+  changeContainer: {
+    alignItems: 'flex-start',
+  },
+  trendBadge: {
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  changeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  compareText: {
+    fontSize: 10,
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontWeight: '500',
+  },
+});