Update project files

App.js

@@ -1,20 +1,74 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import 'react-native-gesture-handler'
+import { NavigationContainer } from '@react-navigation/native'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { createStackNavigator } from '@react-navigation/stack'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { StatusBar } from 'expo-status-bar'
+import { Text, View } from 'react-native'
+
+import { AuthProvider, useAuth } from './src/context/AuthContext.jsx'
+import HomeScreen from './src/screens/HomeScreen.jsx'
+import InventoryScreen from './src/screens/InventoryScreen.jsx'
+import SearchScreen from './src/screens/SearchScreen.jsx'
+import BarcodeScreen from './src/screens/BarcodeScreen.jsx'
+import ProfileScreen from './src/screens/ProfileScreen.jsx'
+import ShoppingListsScreen from './src/screens/ShoppingListsScreen.jsx'
+import MealPlannersScreen from './src/screens/MealPlannersScreen.jsx'
+import AdminScreen from './src/screens/AdminScreen.jsx'
+import UsersScreen from './src/screens/UsersScreen.jsx'
+import { colors } from './src/theme.js'
+
+const Tab = createBottomTabNavigator()
+const Stack = createStackNavigator()
+
+function TabIcon({ name, focused }) {
+  const icons = {
+    Home: '🏠', Inventory: '📦', Search: '🔍', Barcode: '📷',
+    Shopping: '🛒', Meals: '🍽️', Profile: '👤', Admin: '⚙️', Users: '👥',
+  }
+  return (
+    <Text style={{ fontSize: 18, opacity: focused ? 1 : 0.5 }}>{icons[name] || '•'}</Text>
+  )
+}
+
+function MainTabs() {
+  const { isSiteAdmin } = useAuth()
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused }) => <TabIcon name={route.name} focused={focused} />,
+        tabBarActiveTintColor: colors.primary,
+        tabBarInactiveTintColor: colors.textMuted,
+        tabBarStyle: { backgroundColor: colors.surface, borderTopColor: colors.border },
+        headerStyle: { backgroundColor: colors.surface },
+        headerTintColor: colors.text,
+        headerTitleStyle: { fontWeight: '700' },
+        tabBarLabelStyle: { fontSize: 10 },
+      })}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
+      <Tab.Screen name="Inventory" component={InventoryScreen} options={{ title: 'Inventory' }} />
+      <Tab.Screen name="Search" component={SearchScreen} options={{ title: 'Search' }} />
+      <Tab.Screen name="Barcode" component={BarcodeScreen} options={{ title: 'Barcode' }} />
+      <Tab.Screen name="Shopping" component={ShoppingListsScreen} options={{ title: 'Shopping' }} />
+      <Tab.Screen name="Meals" component={MealPlannersScreen} options={{ title: 'Meals' }} />
+      <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile' }} />
+      {isSiteAdmin && <Tab.Screen name="Admin" component={AdminScreen} options={{ title: 'Admin' }} />}
+      {isSiteAdmin && <Tab.Screen name="Users" component={UsersScreen} options={{ title: 'Users' }} />}
+    </Tab.Navigator>
+  )
+}
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+    <SafeAreaProvider>
+      <AuthProvider>
+        <NavigationContainer>
+          <MainTabs />
+        </NavigationContainer>
+        <StatusBar style="auto" />
+      </AuthProvider>
+    </SafeAreaProvider>
+  )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});