amélioration recherche utilisateurs avec bouton de validation

- Ajout d'un système de recherche avec bouton "Rechercher"
- Support de la validation par touche Entrée
- Recherche côté serveur avec filtres MongoDB sur nom et email
- Réinitialisation automatique de la page lors d'une nouvelle recherche
- Suppression du debounce automatique pour un contrôle utilisateur total

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/collections/[collection]/route.ts

@@ -55,6 +55,7 @@ export async function GET(
     if (collection === "users") {
       const email = searchParams.get("email");
       const id = searchParams.get("id");
+      const search = searchParams.get("search"); // ✅ AJOUTER cette ligne
 
       if (email) {
         filter.email = email.toLowerCase();
@@ -69,6 +70,13 @@ export async function GET(
             { status: 400 }
           );
         }
+      } else if (search) {
+        // ✅ AJOUTER ce bloc
+        // Recherche partielle sur nom et email
+        filter.$or = [
+          { name: { $regex: search, $options: "i" } },
+          { email: { $regex: search, $options: "i" } },
+        ];
       }
     }
 

components/collections/users-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useCollection } from "@/hooks/useCollection";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -20,10 +20,15 @@ import { LibreChatUser, LibreChatBalance } from "@/lib/types";
 
 export function UsersTable() {
   const [page, setPage] = useState(1);
-  const [searchTerm, setSearchTerm] = useState("");
+  const [searchInput, setSearchInput] = useState(""); // Ce que l'utilisateur tape
+  const [activeSearch, setActiveSearch] = useState(""); // Ce qui est réellement recherché
   const limit = 20;
 
-  // Charger les utilisateurs
+  // Réinitialiser la page à 1 quand une nouvelle recherche est lancée
+  useEffect(() => {
+    setPage(1);
+  }, [activeSearch]);
+
   const {
     data: users = [],
     total = 0,
@@ -31,11 +36,24 @@ export function UsersTable() {
   } = useCollection<LibreChatUser>("users", {
     page,
     limit,
+    search: activeSearch,
   });
 
+  // Fonction pour lancer la recherche
+  const handleSearch = () => {
+    setActiveSearch(searchInput);
+  };
+
+  // Gérer la touche Entrée
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
   // Charger tous les balances pour associer les crédits
   const { data: balances = [] } = useCollection<LibreChatBalance>("balances", {
-    limit: 1000, // Charger tous les balances
+    limit: 1000,
   });
 
   // Créer une map des crédits par utilisateur
@@ -47,20 +65,6 @@ export function UsersTable() {
     return map;
   }, [balances]);
 
-  // Filtrer les utilisateurs selon le terme de recherche
-  const filteredUsers = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return users;
-    }
-
-    const searchLower = searchTerm.toLowerCase();
-    return users.filter(
-      (user) =>
-        user.name?.toLowerCase().includes(searchLower) ||
-        user.email?.toLowerCase().includes(searchLower)
-    );
-  }, [users, searchTerm]);
-
   const totalPages = Math.ceil(total / limit);
 
   const handlePrevPage = () => {
@@ -93,17 +97,23 @@ export function UsersTable() {
       <CardHeader>
         <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
           <CardTitle>
-            Liste des utilisateurs ({searchTerm ? filteredUsers.length : total})
+            Liste des utilisateurs ({total})
           </CardTitle>
-          <div className="relative w-full sm:w-80">
+          <div className="flex gap-2 w-full sm:w-auto">
+            <div className="relative flex-1 sm:w-80">
               <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 placeholder="Rechercher par nom ou email..."
-              value={searchTerm}
+                value={searchInput}
-              onChange={(e) => setSearchTerm(e.target.value)}
+                onChange={(e) => setSearchInput(e.target.value)}
+                onKeyPress={handleKeyPress}
                 className="pl-10"
               />
             </div>
+            <Button onClick={handleSearch} variant="default">
+              Rechercher
+            </Button>
+          </div>
         </div>
       </CardHeader>
       <CardContent>
@@ -121,12 +131,12 @@ export function UsersTable() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filteredUsers.length > 0 ? (
+              {users.length > 0 ? (
-                filteredUsers.map((user) => {
+                users.map((user) => {
                   const userCredits = creditsMap.get(user._id) || 0;
                   const isActive =
                     new Date(user.updatedAt || user.createdAt) >
-                    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 jours en millisecondes
+                    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
 
                   return (
                     <TableRow key={user._id}>
@@ -176,8 +186,8 @@ export function UsersTable() {
                     colSpan={7}
                     className="text-center py-8 text-muted-foreground"
                   >
-                    {searchTerm
+                    {activeSearch
-                      ? `Aucun utilisateur trouvé pour "${searchTerm}"`
+                      ? `Aucun utilisateur trouvé pour "${activeSearch}"`
                       : "Aucun utilisateur trouvé"}
                   </TableCell>
                 </TableRow>
@@ -186,11 +196,18 @@ export function UsersTable() {
           </Table>
         </div>
 
-        {/* Pagination - masquée lors de la recherche */}
+        {/* Pagination */}
-        {!searchTerm && (
         <div className="flex items-center justify-between space-x-2 py-4">
           <div className="text-sm text-muted-foreground">
-              Page {page} sur {totalPages} ({total} éléments au total)
+            {activeSearch ? (
+              <span>
+                {total} résultat(s) pour &quot;{activeSearch}&quot; - Page {page} sur {totalPages}
+              </span>
+            ) : (
+              <span>
+                Page {page} sur {totalPages} ({total} utilisateurs au total)
+              </span>
+            )}
           </div>
           <div className="flex space-x-2">
             <Button
@@ -213,15 +230,6 @@ export function UsersTable() {
             </Button>
           </div>
         </div>
-        )}
-
-        {/* Info de recherche */}
-        {searchTerm && (
-          <div className="py-4 text-sm text-muted-foreground">
-            {filteredUsers.length} résultat(s) trouvé(s) pour &quot;{searchTerm}
-            &quot;
-          </div>
-        )}
       </CardContent>
     </Card>
   );

hooks/useCollection.ts

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo } from "react";
 
 interface UseCollectionOptions {
   page?: number;
   limit?: number;
   filter?: Record<string, unknown>;
+  search?: string;
 }
 
 interface CollectionResponse<T> {
@@ -26,7 +27,7 @@ export function useCollection<T = Record<string, unknown>>(
   const [total, setTotal] = useState(0);
   const [totalPages, setTotalPages] = useState(0);
 
-  const { page = 1, limit = 20, filter = {} } = options;
+  const { page = 1, limit = 20, filter = {}, search } = options;
 
   // Mémoriser la chaîne JSON du filtre pour éviter les re-renders inutiles
   const filterString = useMemo(() => JSON.stringify(filter), [filter]);
@@ -37,22 +38,28 @@ export function useCollection<T = Record<string, unknown>>(
       const params = new URLSearchParams({
         page: page.toString(),
         limit: limit.toString(),
-        filter: filterString
+        filter: filterString,
       });
+      if (search) {
+        params.append("search", search);
+      }
 
-      const response = await fetch(`/api/collections/${collectionName}?${params}`);
+      const response = await fetch(
-      if (!response.ok) throw new Error(`Erreur lors du chargement de ${collectionName}`);
+        `/api/collections/${collectionName}?${params}`
+      );
+      if (!response.ok)
+        throw new Error(`Erreur lors du chargement de ${collectionName}`);
 
       const result: CollectionResponse<T> = await response.json();
       setData(result.data);
       setTotal(result.total);
       setTotalPages(result.totalPages);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Erreur inconnue');
+      setError(err instanceof Error ? err.message : "Erreur inconnue");
     } finally {
       setLoading(false);
     }
-  }, [collectionName, page, limit, filterString]);
+  }, [collectionName, page, limit, filterString, search]);
 
   useEffect(() => {
     fetchData();