clerkauth

implemented, sync with db to be added

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

@@ -1,36 +1,72 @@
-import { Tabs } from 'expo-router'
-import { Ionicons } from '@expo/vector-icons'
+import { Tabs, useRouter, useSegments } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useAuth } from "@clerk/clerk-expo";
+import { useEffect } from "react";
 
 export default function TabLayout() {
+  const { isSignedIn, isLoaded } = useAuth();
+  const router = useRouter();
+  const segments = useSegments();
+
+  useEffect(() => {
+    if (!isLoaded) return;
+
+    const inAuthGroup = segments[0] === "(auth)";
+
+    if (!isSignedIn && !inAuthGroup) {
+      // Redirect to sign-in if not authenticated
+      router.replace("/(auth)/sign-in");
+    }
+  }, [isSignedIn, isLoaded, segments]);
+
+  if (!isLoaded || !isSignedIn) {
+    return null;
+  }
+
   return (
-    <Tabs>
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: "#2563eb",
+        tabBarInactiveTintColor: "#6b7280",
+        headerShown: true,
+        headerStyle: {
+          backgroundColor: "#fff",
+        },
+        headerTitleStyle: {
+          fontWeight: "600",
+        },
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: "Home",
+          headerTitle: "FitAI",
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="home" size={size} color={color} />
           ),
         }}
       />
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: 'Profile',
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="person" size={size} color={color} />
-          ),
-        }}
-      />
       <Tabs.Screen
         name="attendance"
         options={{
-          title: 'Attendance',
+          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>
-  )
-}
+  );
+}

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

@@ -1,45 +1,293 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { useRequireAuth } from '@/hooks/useRequireAuth'
+import React from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { useUser } from "@clerk/clerk-expo";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function HomeScreen() {
-  const { user } = useRequireAuth()
+  const { user, isLoaded } = useUser();
 
-  if (!user) {
-    return null
+  if (!isLoaded || !user) {
+    return (
+      <View style={styles.container}>
+        <Text>Loading...</Text>
+      </View>
+    );
   }
 
+  const firstName = user.firstName || "User";
+  const greeting = getGreeting();
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Welcome back!</Text>
-      <Text style={styles.subtitle}>
-        {user.firstName} {user.lastName}
-      </Text>
-      <Text style={styles.email}>{user.email}</Text>
-    </View>
-  )
+    <ScrollView style={styles.container}>
+      <View style={styles.content}>
+        {/* Welcome Header */}
+        <View style={styles.header}>
+          <Text style={styles.greeting}>{greeting}!</Text>
+          <Text style={styles.name}>{firstName}</Text>
+        </View>
+
+        {/* Quick Stats */}
+        <View style={styles.statsContainer}>
+          <View style={styles.statCard}>
+            <Ionicons name="calendar-outline" size={32} color="#2563eb" />
+            <Text style={styles.statValue}>0</Text>
+            <Text style={styles.statLabel}>This Month</Text>
+          </View>
+
+          <View style={styles.statCard}>
+            <Ionicons name="flame-outline" size={32} color="#ef4444" />
+            <Text style={styles.statValue}>0</Text>
+            <Text style={styles.statLabel}>Day Streak</Text>
+          </View>
+
+          <View style={styles.statCard}>
+            <Ionicons name="trophy-outline" size={32} color="#f59e0b" />
+            <Text style={styles.statValue}>0</Text>
+            <Text style={styles.statLabel}>Total Visits</Text>
+          </View>
+        </View>
+
+        {/* Quick Actions */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Quick Actions</Text>
+
+          <View style={styles.actionButton}>
+            <View style={styles.actionIcon}>
+              <Ionicons name="log-in-outline" size={24} color="#2563eb" />
+            </View>
+            <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" />
+          </View>
+
+          <View style={styles.actionButton}>
+            <View style={styles.actionIcon}>
+              <Ionicons name="calendar-outline" size={24} color="#10b981" />
+            </View>
+            <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" />
+          </View>
+
+          <View style={styles.actionButton}>
+            <View style={styles.actionIcon}>
+              <Ionicons name="card-outline" size={24} color="#8b5cf6" />
+            </View>
+            <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" />
+          </View>
+        </View>
+
+        {/* Membership Info */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Membership</Text>
+          <View style={styles.membershipCard}>
+            <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>
+          </View>
+        </View>
+
+        {/* Recent Activity */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Recent Activity</Text>
+          <View style={styles.emptyState}>
+            <Ionicons name="barbell-outline" size={48} color="#d1d5db" />
+            <Text style={styles.emptyStateText}>No recent activity</Text>
+            <Text style={styles.emptyStateSubtext}>
+              Check in to start tracking your workouts
+            </Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+function getGreeting(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
+    backgroundColor: "#f5f5f5",
   },
-  title: {
+  content: {
+    padding: 20,
+  },
+  header: {
+    marginBottom: 24,
+  },
+  greeting: {
+    fontSize: 16,
+    color: "#6b7280",
+    marginBottom: 4,
+  },
+  name: {
     fontSize: 32,
-    fontWeight: 'bold',
+    fontWeight: "bold",
+    color: "#1a1a1a",
+  },
+  statsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 24,
+  },
+  statCard: {
+    flex: 1,
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 16,
+    alignItems: "center",
+    marginHorizontal: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  statValue: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#1a1a1a",
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: "#6b7280",
+    textAlign: "center",
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1a1a1a",
+    marginBottom: 12,
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  actionIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: "#f0f9ff",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  actionContent: {
+    flex: 1,
+  },
+  actionTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1a1a1a",
+    marginBottom: 2,
+  },
+  actionSubtitle: {
+    fontSize: 14,
+    color: "#6b7280",
+  },
+  membershipCard: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  membershipHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginBottom: 8,
   },
-  subtitle: {
-    fontSize: 24,
-    fontWeight: '600',
+  membershipType: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1a1a1a",
+  },
+  statusBadge: {
+    backgroundColor: "#dcfce7",
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#16a34a",
+  },
+  membershipEmail: {
+    fontSize: 14,
+    color: "#6b7280",
     marginBottom: 4,
-    color: '#333',
   },
-  email: {
+  membershipDate: {
+    fontSize: 12,
+    color: "#9ca3af",
+  },
+  emptyState: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 32,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  emptyStateText: {
     fontSize: 16,
-    color: '#666',
+    fontWeight: "600",
+    color: "#6b7280",
+    marginTop: 12,
+    marginBottom: 4,
   },
-})
+  emptyStateSubtext: {
+    fontSize: 14,
+    color: "#9ca3af",
+    textAlign: "center",
+  },
+});

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

@@ -1,116 +1,307 @@
-import React from 'react'
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native'
-import { useAuth } from '@/contexts/AuthContext'
-import { useRouter } from 'expo-router'
+import React from "react";
+import {
+  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";
 
 export default function ProfileScreen() {
-  const { user, logout } = useAuth()
-  const router = useRouter()
+  const { user } = useUser();
+  const { signOut } = useAuth();
+  const router = useRouter();
 
   const handleLogout = async () => {
-    Alert.alert(
-      'Logout',
-      'Are you sure you want to logout?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Logout',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              await logout()
-              router.replace('/login')
-            } catch (error) {
-              Alert.alert('Error', 'Failed to logout')
-            }
-          },
+    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Sign Out",
+        style: "destructive",
+        onPress: async () => {
+          try {
+            await signOut();
+            router.replace("/(auth)/sign-in");
+          } catch (error) {
+            Alert.alert("Error", "Failed to sign out");
+          }
         },
-      ]
-    )
+      },
+    ]);
+  };
+
+  if (!user) {
+    return (
+      <View style={styles.container}>
+        <Text>Loading...</Text>
+      </View>
+    );
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.profileCard}>
-        <Text style={styles.title}>Profile</Text>
-        <Text style={styles.name}>
-          {user?.firstName} {user?.lastName}
-        </Text>
-        <Text style={styles.email}>{user?.email}</Text>
-        {user?.phone && <Text style={styles.phone}>{user.phone}</Text>}
-        
-        <View style={styles.roleBadge}>
-          <Text style={styles.roleText}>
-            {user?.role.charAt(0).toUpperCase() + user?.role.slice(1)}
-          </Text>
-        </View>
-      </View>
+    <ScrollView style={styles.container}>
+      <View style={styles.content}>
+        {/* Profile Header */}
+        <View style={styles.profileCard}>
+          <View style={styles.avatarContainer}>
+            {user.imageUrl ? (
+              <View style={styles.avatar}>
+                <Text style={styles.avatarText}>
+                  {user.firstName?.charAt(0)}
+                  {user.lastName?.charAt(0)}
+                </Text>
+              </View>
+            ) : (
+              <View style={styles.avatar}>
+                <Ionicons name="person" size={40} color="#fff" />
+              </View>
+            )}
+          </View>
 
-      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
-        <Text style={styles.logoutText}>Logout</Text>
-      </TouchableOpacity>
-    </View>
-  )
+          <Text style={styles.name}>
+            {user.firstName} {user.lastName}
+          </Text>
+          <Text style={styles.email}>
+            {user.primaryEmailAddress?.emailAddress}
+          </Text>
+
+          {user.primaryPhoneNumber && (
+            <Text style={styles.phone}>
+              {user.primaryPhoneNumber.phoneNumber}
+            </Text>
+          )}
+        </View>
+
+        {/* Account Information */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Account Information</Text>
+
+          <View style={styles.infoRow}>
+            <View style={styles.infoLabel}>
+              <Ionicons name="mail-outline" size={20} color="#666" />
+              <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}>
+                <Ionicons name="call-outline" size={20} color="#666" />
+                <Text style={styles.infoLabelText}>Phone</Text>
+              </View>
+              <Text style={styles.infoValue}>
+                {user.primaryPhoneNumber.phoneNumber}
+              </Text>
+            </View>
+          )}
+
+          <View style={styles.infoRow}>
+            <View style={styles.infoLabel}>
+              <Ionicons name="calendar-outline" size={20} color="#666" />
+              <Text style={styles.infoLabelText}>Member Since</Text>
+            </View>
+            <Text style={styles.infoValue}>
+              {new Date(user.createdAt!).toLocaleDateString()}
+            </Text>
+          </View>
+
+          <View style={styles.infoRow}>
+            <View style={styles.infoLabel}>
+              <Ionicons
+                name="shield-checkmark-outline"
+                size={20}
+                color="#666"
+              />
+              <Text style={styles.infoLabelText}>Email Verified</Text>
+            </View>
+            <Text style={styles.infoValue}>
+              {user.primaryEmailAddress?.verification?.status === "verified"
+                ? "Yes"
+                : "No"}
+            </Text>
+          </View>
+        </View>
+
+        {/* Quick Actions */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Quick Actions</Text>
+
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="person-outline" size={24} color="#2563eb" />
+            <Text style={styles.actionButtonText}>Edit Profile</Text>
+            <Ionicons name="chevron-forward" size={20} color="#999" />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="notifications-outline" size={24} color="#2563eb" />
+            <Text style={styles.actionButtonText}>Notifications</Text>
+            <Ionicons name="chevron-forward" size={20} color="#999" />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="card-outline" size={24} color="#2563eb" />
+            <Text style={styles.actionButtonText}>Payment History</Text>
+            <Ionicons name="chevron-forward" size={20} color="#999" />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="settings-outline" size={24} color="#2563eb" />
+            <Text style={styles.actionButtonText}>Settings</Text>
+            <Ionicons name="chevron-forward" size={20} color="#999" />
+          </TouchableOpacity>
+        </View>
+
+        {/* Sign Out Button */}
+        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+          <Ionicons name="log-out-outline" size={20} color="#fff" />
+          <Text style={styles.logoutText}>Sign Out</Text>
+        </TouchableOpacity>
+
+        {/* App Version */}
+        <Text style={styles.version}>Version 1.0.0</Text>
+      </View>
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: "#f5f5f5",
+  },
+  content: {
     padding: 20,
-    backgroundColor: '#f5f5f5',
   },
   profileCard: {
-    backgroundColor: 'white',
-    borderRadius: 12,
+    backgroundColor: "white",
+    borderRadius: 16,
     padding: 24,
-    alignItems: 'center',
-    shadowColor: '#000',
+    alignItems: "center",
+    shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
+    shadowRadius: 8,
+    elevation: 4,
+    marginBottom: 24,
   },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
+  avatarContainer: {
     marginBottom: 16,
   },
+  avatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "#2563eb",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  avatarText: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#fff",
+  },
   name: {
-    fontSize: 20,
-    fontWeight: '600',
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#1a1a1a",
     marginBottom: 4,
   },
   email: {
     fontSize: 16,
-    color: '#666',
+    color: "#666",
     marginBottom: 4,
   },
   phone: {
-    fontSize: 16,
-    color: '#666',
+    fontSize: 14,
+    color: "#999",
+  },
+  section: {
+    backgroundColor: "white",
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1a1a1a",
     marginBottom: 16,
   },
-  roleBadge: {
-    backgroundColor: '#3b82f6',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 20,
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
   },
-  roleText: {
-    color: 'white',
+  infoLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  infoLabelText: {
     fontSize: 14,
-    fontWeight: '600',
+    color: "#666",
+    fontWeight: "500",
+  },
+  infoValue: {
+    fontSize: 14,
+    color: "#1a1a1a",
+    fontWeight: "500",
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+  },
+  actionButtonText: {
+    flex: 1,
+    fontSize: 16,
+    color: "#1a1a1a",
+    marginLeft: 12,
+    fontWeight: "500",
   },
   logoutButton: {
-    backgroundColor: '#ef4444',
-    paddingVertical: 14,
-    borderRadius: 8,
-    alignItems: 'center',
-    marginTop: 24,
+    backgroundColor: "#ef4444",
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: 8,
+    marginTop: 8,
+    marginBottom: 16,
+    shadowColor: "#ef4444",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
   },
   logoutText: {
-    color: 'white',
+    color: "white",
     fontSize: 16,
-    fontWeight: '600',
+    fontWeight: "600",
   },
-})
+  version: {
+    textAlign: "center",
+    fontSize: 12,
+    color: "#999",
+    marginTop: 8,
+    marginBottom: 20,
+  },
+});