auth with handler

app/(tabs)/_layout.tsx

@@ -1,33 +1,27 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { } from 'expo-router';
+import { Tabs } from 'expo-router';
 import React from 'react';
 import { HapticTab } from '@/components/expoExempleComponents/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
-import GestionOuvrier from './gestion_ouvrier';
-import ListMateriel from './gestionnaire_ressource';
-import Home from './home';
-import MapScreen from './mapScreen';
 import AntDesign from '@expo/vector-icons/AntDesign';
-import AddScreen from './addScreen';
-
-const Tabs = createBottomTabNavigator();
+import { useUser } from '../ContextUser';
+import { useAuthHandler } from '../AuthHandler';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
+  const { role } = useUser();
+  
+  // Handle auth in tabs layout
+  useAuthHandler();
 
   return (
-    <Tabs.Navigator
-      initialRouteName='explore'
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-      }}>
+    <Tabs screenOptions={{tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, headerShown: false, tabBarButton: HapticTab}}>
+      <Tabs.Screen name="index" options={{ href: null}}/>
+      <Tabs.Screen name="explore" options={{ href: null }}/>
+      <Tabs.Screen name="templateSreen" options={{ href: null}}/>
       <Tabs.Screen
         name="home"
-        component={Home}
         options={{
           title: 'Home',
           tabBarIcon: ({ color }) => (
@@ -37,7 +31,6 @@ export default function TabLayout() {
       />
       <Tabs.Screen
         name="gestionnaire_ressource"
-        component={ListMateriel}
         options={{
           title: 'Ressources',
           tabBarIcon: ({ color }) => (
@@ -46,34 +39,29 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="GestionOuvrier"
-        component={GestionOuvrier}
+        name="gestion_ouvrier"
         options={{
           title: 'Ouvriers',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
         }}
       />
       <Tabs.Screen
-        name="explore"
-        component={MapScreen}
+        name="mapScreen"
         options={{
-          title: 'MapScreen',
+          title: 'Map',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
         }}
-      >
-      </Tabs.Screen>
+      />
       <Tabs.Screen
-        name="Ajouter"
-        component={AddScreen}
+        name="addScreen"
         options={{
           title: 'Ajouter',
+          href: role === 'chef' ? '/(tabs)/addScreen' : null,
           tabBarIcon: ({ color }) => (
             <AntDesign name="plus" size={24} color={color} />
           ),
         }}
       />
-
-
-    </Tabs.Navigator>
+    </Tabs>
   );
-}
+}