Feat: filtre dans la partie ressource

app/(tabs)/gestionnaire_ressource.tsx

@@ -1,16 +1,10 @@
 import { ThemedText } from "@/components/themed-text";
-import { ThemedTextInput } from '@/components/themed-textinput';
+import { ThemedTextInput } from "@/components/themed-textinput";
 import { ThemedView } from "@/components/themed-view";
+import { ThemedButton } from "@/components/themed-button";
 import { useLocalSearchParams, useRouter } from "expo-router";
-
 import React, { useEffect, useState } from "react";
-import {
+import { FlatList, Image, StyleSheet, Text } from "react-native";
-  Button,
-  FlatList,
-  Image,
-  StyleSheet,
-  Text
-} from "react-native";
 import { Ressources } from "../../class/class";
 import { getRessources } from "../../services/ressourcesService";
 
@@ -18,8 +12,8 @@ export default function GestionnaireRessource() {
   const { nom, prenom } = useLocalSearchParams();
   const [search, setSearch] = useState("");
   const [ressource, setRessources] = useState<Ressources[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [filterType, setFilterType] = useState("tout");
-
+  const [showFilterMenu, setShowFilterMenu] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -29,29 +23,28 @@ export default function GestionnaireRessource() {
         setRessources(data);
       } catch (error) {
         console.error("Erreur lors du chargement :", error);
-      } finally {
-        setLoading(false);
       }
     }
     loadData();
   }, []);
 
-  const filteredData = ressource.filter((r) =>
+  const filteredData = ressource.filter((r) => {
-    r.name.toLowerCase().includes(search.toLowerCase())
+    const matchName = r.name.toLowerCase().includes(search.toLowerCase());
-  );
+    const matchType = filterType === "tout" || r.type === filterType;
+    return matchName && matchType;
+  });
 
   const renderRessource = ({ item }: { item: Ressources }) => {
     if (!item) return null;
-
     return (
       <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>
+          <ThemedText>{item.id}</ThemedText>
-          <Text>{item.name}</Text>
+          <ThemedText>{item.name}</ThemedText>
-          <Text>{item.type}</Text>
+          <ThemedText>{item.type}</ThemedText>
-          <Text>{item.quantity}</Text>
+          <ThemedText>{item.quantity}</ThemedText>
-          <Text>{item.available_quantity}</Text>
+          <ThemedText>{item.available_quantity}</ThemedText>
         </ThemedView>
       </ThemedView>
     );
@@ -59,6 +52,39 @@ export default function GestionnaireRessource() {
 
   return (
     <ThemedView lvl={3} style={styles.container}>
+      {/* Overlay menu filtre */}
+      {showFilterMenu && (
+        <ThemedView lvl={2} style={styles.filterMenuOverlay}>
+          <ThemedView lvl={1} style={styles.filterMenu}>
+            <Text style={styles.filterTitle}>Filtrer par type</Text>
+            {["tout", "Outil", "Machine"].map((t) => (
+              <ThemedButton
+                key={t}
+                lvl={1}
+                shadow={true}
+                style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
+                onPress={() => {
+                  setFilterType(t);
+                  setShowFilterMenu(false);
+                }}
+              >
+                <ThemedText style={{ textAlign: "center" }}>{t}</ThemedText>
+              </ThemedButton>
+            ))}
+
+            {/* Bouton "Fermer" remplacé */}
+            <ThemedButton
+              lvl={1}
+              shadow={true}
+              style={{ padding: 10, borderRadius: 8 }}
+              onPress={() => setShowFilterMenu(false)}
+            >
+              <ThemedText style={{ textAlign: "center" }}>Fermer</ThemedText>
+            </ThemedButton>
+          </ThemedView>
+        </ThemedView>
+      )}
+
       <FlatList
         data={filteredData}
         renderItem={renderRessource}
@@ -66,11 +92,20 @@ export default function GestionnaireRessource() {
         contentContainerStyle={{ paddingBottom: 40 }}
         ListHeaderComponent={
           <ThemedView opacity="00" style={styles.header}>
-            <Text style={styles.text}>
+            <ThemedText style={styles.text}>
               Bonjour {prenom} {nom}
-            </Text>
+            </ThemedText>
+
+            {/* Bouton filtre en haut à droite */}
+            <ThemedButton
+              lvl={1}
+              shadow={true}
+              style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
+              onPress={() => setShowFilterMenu(true)}
+            >
+              <ThemedText>{`Filtre: ${filterType}`}</ThemedText>
+            </ThemedButton>
 
-            {/* Input background */}
             <ThemedView lvl={1} shadow={true} style={styles.inputBack}>
               <ThemedTextInput
                 lvl={0}
@@ -86,13 +121,6 @@ export default function GestionnaireRessource() {
           <ThemedText style={styles.empty}>Aucun résultat trouvé</ThemedText>
         }
       />
-
-      <ThemedView lvl={3} style={styles.footer}>
-        <Button
-          title="Retour"
-          onPress={() => router.push("/(tabs)/bonjourFL")}
-        />
-      </ThemedView>
     </ThemedView>
   );
 }
@@ -100,9 +128,9 @@ export default function GestionnaireRessource() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    marginTop: 60,
   },
   header: {
-    marginTop: 60,
     marginBottom: 20,
     alignItems: "center",
     paddingHorizontal: 20,
@@ -115,6 +143,7 @@ const styles = StyleSheet.create({
   inputBack: {
     width: "100%",
     borderRadius: 10,
+    backgroundColor: "transparent",
   },
   input: {
     width: "100%",
@@ -147,4 +176,27 @@ const styles = StyleSheet.create({
     marginTop: 30,
     color: "#888",
   },
+  filterMenuOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  filterMenu: {
+    width: "80%",
+    borderRadius: 12,
+    padding: 20,
+    backgroundColor: "#fff",
+  },
+  filterTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 20,
+    textAlign: "center",
+  },
 });