M E R G E

app/(tabs)/_layout.tsx

@@ -7,8 +7,10 @@ import { HapticTab } from '@/components/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
-import TabTwoScreen from './mapScreen';
-import HomeScreen from './bonjourFL';
+import TabTwoScreen from './index';
+import HomeScreen from './explore';
+import ListMateriel from './gestionnaire_ressource';
+import BonjourScreen from './bonjourFL';
 
 const Tabs = createBottomTabNavigator();
 
@@ -17,27 +19,40 @@ export default function TabLayout() {
 
   return (
     <Tabs.Navigator
+      initialRouteName='explore'
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
         tabBarButton: HapticTab,
       }}>
+
+        <Tabs.Screen
+        name="gestionnaire_ressource"
+        component={ListMateriel}
+        options={{
+          title: 'Ressources',
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="hammer.fill" color={color} />
+          ),
+        }}
+      />
       <Tabs.Screen
         name="bonjourFL"
-        component={HomeScreen}
+        component={BonjourScreen}
         options={{
           title: 'Bonjour',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
         }}
       />
       <Tabs.Screen
-        name="mapScreen"
+        name="explore"
+        component={HomeScreen}
         options={{
           title: 'MapScreen',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
         }}
       >
-        {() => <TabTwoScreen/>}
+
       </Tabs.Screen>
       
     </Tabs.Navigator>

app/(tabs)/explore.tsx

@@ -1,5 +1,5 @@
 import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { ExternalLink } from '@/components/external-link';
 import ParallaxScrollView from '@/components/parallax-scroll-view';
@@ -8,7 +8,8 @@ import { ThemedView } from '@/components/themed-view';
 import { Collapsible } from '@/components/ui/collapsible';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Fonts } from '@/constants/theme';
-import SelectChantier from './selectChantier';
+import SelectChantier from '@/components/selectChantier';
+
 
 export default function TabTwoScreen() {
   return (
@@ -21,8 +22,10 @@ export default function TabTwoScreen() {
           name="chevron.left.forwardslash.chevron.right"
           style={styles.headerImage}
         />
-      }>
-      <SelectChantier></SelectChantier>
+    }>
+      <ThemedView style={styles.selectChantier}>
+        <SelectChantier ></SelectChantier>
+      </ThemedView>
       <ThemedView style={styles.titleContainer}>
         
         <ThemedText
@@ -112,4 +115,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 8,
   },
+  selectChantier:{
+    width:"100%",
+    margin:0
+  },
 });

app/(tabs)/gestionnaire_ressource.tsx

@@ -0,0 +1,134 @@
+import { useRouter , useLocalSearchParams} from "expo-router";
+import React, {useState} from 'react';
+import { Button,FlatList,Image, Text, TextInput,View, StyleSheet } from 'react-native';
+
+export default function GestionnaireRessource() {
+  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
+  const [search, setSearch] = useState('');
+  const router = useRouter();
+
+  type Ressource ={
+    id: number;
+    name: string;
+    type: string;
+    Image: string;
+  }
+
+  const data: Ressource[] = [
+    { id: 1, name: 'Marteau', type: 'Outil', Image: '' },
+    { id: 2, name: 'Scie', type: 'Outil' , Image: ''},
+    { id: 3, name: 'Pelle', type: 'Outil' , Image: '' },
+    { id: 4, name: 'Grue', type: 'Machine',Image: 'https://media.discordapp.net/attachments/1425108443571945644/1427207643180826757/raw.png?ex=68ee0632&is=68ecb4b2&hm=1efc51065c6abfb1af75b8382f9924c2eb177c7d7672f7ed9837e96ef3076d16&=&format=webp&quality=lossless&width=421&height=632'},
+    { id: 5, name: 'Bulldozer', type: 'Machine', Image: ''},
+  ];
+
+
+    const renderRessource = ({ item, index }: { item?: Ressource; index: number })  => {
+      if (!item) {
+        // optionnel : afficher un placeholder pour debug
+        // return <View style={styles.card}><Text>Item manquant</Text></View>;
+        return null;
+      }
+      return(
+      <View style={styles.card}>
+        <View style={styles.info}>
+          <Image source={{ uri: item.Image }} style={styles.image} />
+          <Text>{item.id}</Text>
+          <Text>{item.name}</Text>
+          <Text>{item.type}</Text>
+        </View>
+      </View>);
+    };
+
+  return(
+    <View style={styles.container}>
+      <FlatList
+        data={data}
+        renderItem={renderRessource}
+        keyExtractor={(_, index) => index.toString()}
+        contentContainerStyle={{ paddingBottom: 40 }}
+        ListHeaderComponent={
+          <View style={styles.header}>
+            <Text style={styles.text}>
+              Bonjour {prenom} {nom}
+            </Text>
+
+            {/* 🔍 Champ de recherche */}
+            <TextInput
+              style={styles.input}
+              placeholder="Rechercher une ressource..."
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        }
+        ListEmptyComponent={
+          <Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
+        }
+      />
+
+      <View style={styles.footer}>
+        <Button title="Retour" onPress={() => router.back()} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    marginTop: 60,
+    marginBottom: 20,
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  card: {
+    flexDirection: 'row',
+    marginHorizontal: 20,
+    marginBottom: 15,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 10,
+    backgroundColor: '#fafafa',
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    marginRight: 10,
+  },
+  info: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  group: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 5,
+  },
+  footer: {
+    padding: 20,
+  },
+  empty: {
+    textAlign: 'center',
+    marginTop: 30,
+    color: '#888',
+  },
+});

app/(tabs)/selectChantier.tsx

@@ -1,69 +0,0 @@
-import { useState } from 'react';
-import { Button, GestureResponderEvent, ScrollView, StyleSheet, TextInput, View } from 'react-native';
-
-export default function SelectChantier() {
-
-    const [search, setSearch] = useState('');
-    const [isOpen,setIsOpen] = useState(false);
-
-  function onPressOpen(event: GestureResponderEvent): void {
-    setIsOpen(!isOpen);
-  }
-
-    return (
-        <View style={styles.selectZone}>
-          {!isOpen && (
-             <Button onPress={onPressOpen} title={"Open"}/>
-          )}
-           {isOpen && (
-            <ScrollView>
-               <Button onPress={onPressOpen} title={"Close"}/>
-                <View style={styles.searchZone}>
-                    <View style={styles.searchMenu}>
-                        <TextInput
-                            placeholder='Rechercher un chantier'
-                            value={search}
-                            onChangeText={setSearch}
-                        />
-                    </View>
-                </View>
-                
-                <View>
-
-                </View>
-            </ScrollView>
-           )}
-        </View>
-
-    );
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  searchMenu:{
-    backgroundColor: "#BB0000",
-    width: "100%",
-    margin: 0,
-
-    
-  },
-    searchZone:{
-    width: "100%",
-    padding:20,
-    marginTop:50,
-    alignItems: 'center',
-  },
-  selectZone:{
-    position: 'absolute',
-    backgroundColor: "#FF0000",
-    width: "100%",
-    margin: 10,
-    borderRadius: 5,
-    zIndex: 9999,
-    elevation: 9999,
-  }
-});