bonjour -> ouvriers

app/(tabs)/gestion_ouvrier.tsx

@@ -0,0 +1,151 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedTextInput } from "@/components/themed-textinput";
+import { ThemedView } from "@/components/themed-view";
+import Constants from "expo-constants"; //pour connaître la taille de la barre menu de l'OS en haut
+import { useLocalSearchParams, useRouter } from "expo-router";
+import React, { useMemo, useState } from "react";
+import { FlatList, Image, StyleSheet, Text } from "react-native";
+import rawConcerts from "../../data/concerts.json";
+
+import { useChantier } from "../ContextChantier";
+
+type Concert = {
+  group: string;
+  date: string;
+  nationality: string;
+  location: string;
+  price: number;
+  ticketsLeft: number;
+  Image: string;
+  favorite: boolean;
+};
+
+export default function GestionOuvrier() {
+  const router = useRouter();
+  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
+  const [search, setSearch] = useState("");
+  const { chantier, setChantier } = useChantier();
+
+  const concertsData: Concert[] = Array.isArray(rawConcerts)
+    ? (rawConcerts as Concert[])
+    : [];
+
+  const filteredData = useMemo(() => {
+    if (!Array.isArray(concertsData)) return [];
+    const q = search.trim().toLowerCase();
+    if (!q) return concertsData;
+    return concertsData.filter(
+      (item) => !!item && (item.group ?? "").toLowerCase().includes(q)
+    );
+  }, [concertsData, search]);
+
+  const renderItem = ({ item, index }: { item?: Concert; index: number }) => {
+    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}>
+          <ThemedText style={styles.group}>{item.group}</ThemedText>
+          <ThemedText>{item.date}</ThemedText>
+          <ThemedText>{item.location}</ThemedText>
+        </ThemedView>
+      </ThemedView>
+    );
+  };
+
+  return (
+    <ThemedView lvl={3} style={styles.container}>
+      <FlatList
+        data={filteredData}
+        renderItem={renderItem}
+        keyExtractor={(_, index) => index.toString()}
+        contentContainerStyle={{ paddingBottom: 40 }}
+        ListHeaderComponent={
+          <ThemedView opacity="00" style={styles.header}>
+
+            <ThemedView style={styles.inputBack} shadow={true}>
+              <ThemedTextInput
+                lvl={0}
+                style={styles.input}
+                placeholder="Rechercher un artisant..."
+                value={search}
+                onChangeText={setSearch}
+              />
+            </ThemedView>
+          </ThemedView>
+        }
+        ListEmptyComponent={
+          <Text style={styles.empty}>Aucun résultat n'a été trouvé</Text>
+        }
+      />
+
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
+    //backgroundColor: '#00FFFF',
+  },
+  header: {
+    marginTop: 60,
+    marginBottom: 20,
+    alignItems: "center",
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  inputBack: {
+    width: "100%",
+    borderRadius: 10,
+    backgroundColor: "transparent",
+  },
+  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",
+  },
+});