Feat: AJout du style pour la gestion des ressources

app/(tabs)/gestionnaire_ressource.tsx

@@ -1,5 +1,9 @@
 import { useRouter, useLocalSearchParams } from "expo-router";
-import { navigate } from "expo-router/build/global-state/routing";
+import { ThemedView } from "@/components/themed-view";
+import { ThemedTextInput } from '@/components/themed-textinpute';
+import { ThemedText } from "@/components/themed-text";
+import { ThemedButton } from "@/components/themed-button";
+
 import React, { useEffect, useState } from "react";
 import {
   Button,
@@ -7,16 +11,16 @@ import {
   Image,
   Text,
   TextInput,
-  View,
   StyleSheet,
 } from "react-native";
 import { getRessources, Ressource } from "../../services/ressourcesService";
 
 export default function GestionnaireRessource() {
-  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
+  const { nom, prenom } = useLocalSearchParams();
   const [search, setSearch] = useState("");
   const [ressource, setRessources] = useState<Ressource[]>([]);
   const [loading, setLoading] = useState(true);
+
   const router = useRouter();
 
   useEffect(() => {
@@ -25,12 +29,11 @@ export default function GestionnaireRessource() {
         const data = await getRessources();
         setRessources(data);
       } catch (error) {
-        console.error("Erreur lors du chargement des ressources :", error);
+        console.error("Erreur lors du chargement :", error);
       } finally {
         setLoading(false);
       }
     }
-
     loadData();
   }, []);
 
@@ -38,73 +41,66 @@ export default function GestionnaireRessource() {
     r.name.toLowerCase().includes(search.toLowerCase())
   );
 
-  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;
-    }
+  const renderRessource = ({ item }: { item: Ressource }) => {
+    if (!item) return null;
+
     return (
-      <View style={styles.card}>
-        <View style={styles.info}>
-          <Image source={{ uri: item.Image }} style={styles.image} />
+      <ThemedView lvl={1} shadow={true} style={styles.card}>
+        <Image source={{ uri: item.Image }} style={styles.image} />
+        <ThemedView lvl={1} style={styles.info}>
           <Text>{item.id}</Text>
           <Text>{item.name}</Text>
           <Text>{item.type}</Text>
           <Text>{item.quantity}</Text>
           <Text>{item.available_quantity}</Text>
-        </View>
-      </View>
+        </ThemedView>
+      </ThemedView>
     );
   };
 
   return (
-    <View style={styles.container}>
+    <ThemedView lvl={3} style={styles.container}>
       <FlatList
         data={filteredData}
         renderItem={renderRessource}
         keyExtractor={(_, index) => index.toString()}
         contentContainerStyle={{ paddingBottom: 40 }}
         ListHeaderComponent={
-          <View style={styles.header}>
+          <ThemedView opacity="00" 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>
+            {/* Input background */}
+            <ThemedView lvl={1} shadow={true} style={styles.inputBack}>
+              <ThemedTextInput
+                lvl={0}
+                style={styles.input}
+                placeholder="Rechercher une ressource..."
+                value={search}
+                onChangeText={setSearch}
+              />
+            </ThemedView>
+          </ThemedView>
         }
         ListEmptyComponent={
-          <Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
+          <ThemedText style={styles.empty}>Aucun résultat trouvé 😕</ThemedText>
         }
       />
 
-      <View style={styles.footer}>
+      <ThemedView lvl={3} style={styles.footer}>
         <Button
           title="Retour"
           onPress={() => router.push("/(tabs)/bonjourFL")}
         />
-      </View>
-    </View>
+      </ThemedView>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
   },
   header: {
     marginTop: 60,
@@ -117,10 +113,12 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     marginBottom: 10,
   },
+  inputBack: {
+    width: "100%",
+    borderRadius: 10,
+  },
   input: {
     width: "100%",
-    borderWidth: 1,
-    borderColor: "#ccc",
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
@@ -129,11 +127,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     marginHorizontal: 20,
     marginBottom: 15,
-    borderWidth: 1,
-    borderColor: "#ddd",
     borderRadius: 10,
     padding: 10,
-    backgroundColor: "#fafafa",
   },
   image: {
     width: 80,
@@ -145,11 +140,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
   },
-  group: {
-    fontWeight: "bold",
-    fontSize: 16,
-    marginBottom: 5,
-  },
   footer: {
     padding: 20,
   },