basic stracture and auth

in memory db :)

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

@@ -0,0 +1,36 @@
+import { Tabs } from 'expo-router'
+import { Ionicons } from '@expo/vector-icons'
+
+export default function TabLayout() {
+  return (
+    <Tabs>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          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',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="calendar" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { View, Text, StyleSheet } from 'react-native'
+
+export default function AttendanceScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Attendance</Text>
+      <Text style={styles.subtitle}>Track your gym visits</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+  },
+})

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { useRequireAuth } from '@/hooks/useRequireAuth'
+
+export default function HomeScreen() {
+  const { user } = useRequireAuth()
+
+  if (!user) {
+    return null
+  }
+
+  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>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 4,
+    color: '#333',
+  },
+  email: {
+    fontSize: 16,
+    color: '#666',
+  },
+})

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

@@ -0,0 +1,116 @@
+import React from 'react'
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native'
+import { useAuth } from '@/contexts/AuthContext'
+import { useRouter } from 'expo-router'
+
+export default function ProfileScreen() {
+  const { user, logout } = 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')
+            }
+          },
+        },
+      ]
+    )
+  }
+
+  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>
+
+      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+        <Text style={styles.logoutText}>Logout</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+  },
+  profileCard: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 24,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  email: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 4,
+  },
+  phone: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 16,
+  },
+  roleBadge: {
+    backgroundColor: '#3b82f6',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  roleText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  logoutButton: {
+    backgroundColor: '#ef4444',
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 24,
+  },
+  logoutText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+})