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>

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,16 +97,22 @@ 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">
-            <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}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
-            />
+          <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={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+                onKeyPress={handleKeyPress}
+                className="pl-10"
+              />
+            </div>
+            <Button onClick={handleSearch} variant="default">
+              Rechercher
+            </Button>
           </div>
         </div>
       </CardHeader>
@@ -121,12 +131,12 @@ export function UsersTable() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filteredUsers.length > 0 ? (
-                filteredUsers.map((user) => {
+              {users.length > 0 ? (
+                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
-                      ? `Aucun utilisateur trouvé pour "${searchTerm}"`
+                    {activeSearch
+                      ? `Aucun utilisateur trouvé pour "${activeSearch}"`
                       : "Aucun utilisateur trouvé"}
                   </TableCell>
                 </TableRow>
@@ -186,42 +196,40 @@ export function UsersTable() {
           </Table>
         </div>
 
-        {/* Pagination - masquée lors de la recherche */}
-        {!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)
-            </div>
-            <div className="flex space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handlePrevPage}
-                disabled={page <= 1}
-              >
-                <ChevronLeft className="h-4 w-4" />
-                Précédent
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleNextPage}
-                disabled={page >= totalPages}
-              >
-                Suivant
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            </div>
+        {/* Pagination */}
+        <div className="flex items-center justify-between space-x-2 py-4">
+          <div className="text-sm text-muted-foreground">
+            {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>
-        )}
-
-        {/* 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 className="flex space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePrevPage}
+              disabled={page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Précédent
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNextPage}
+              disabled={page >= totalPages}
+            >
+              Suivant
+              <ChevronRight className="h-4 w-4" />
+            </Button>
           </div>
-        )}
+        </div>
       </CardContent>
     </Card>
   );