modifs complete

components/collections/users-table.tsx

@@ -14,26 +14,28 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
-import { ChevronLeft, ChevronRight, Search } from "lucide-react";
+import { ChevronLeft, ChevronRight, Search, X } from "lucide-react";
 import { formatDate } from "@/lib/utils";
 import { LibreChatUser, LibreChatBalance } from "@/lib/types";
 
 // Couleurs prédéfinies pour les référents
 const REFERENT_COLORS: Record<string, string> = {
-  "Emmanuel WATHELE": "#3B82F6", // Bleu
-  "IHECS": "#10B981",            // Vert
+  "Emmanuel WATHELE": "#3B82F6",     // Bleu
+  "IHECS": "#10B981",                // Vert
+  "Patrice De La Broise": "#F59E0B", // Orange
 };
 
 export function UsersTable() {
   const [page, setPage] = useState(1);
   const [searchInput, setSearchInput] = useState(""); // Ce que l'utilisateur tape
   const [activeSearch, setActiveSearch] = useState(""); // Ce qui est réellement recherché
+  const [activeReferent, setActiveReferent] = useState<string | undefined>(undefined);
   const limit = 20;
 
-  // Réinitialiser la page à 1 quand une nouvelle recherche est lancée
+  // Réinitialiser la page à 1 quand une nouvelle recherche ou filtre est lancé
   useEffect(() => {
     setPage(1);
-  }, [activeSearch]);
+  }, [activeSearch, activeReferent]);
 
   const {
     data: users = [],
@@ -43,8 +45,21 @@ export function UsersTable() {
     page,
     limit,
     search: activeSearch,
+    referent: activeReferent,
   });
 
+  const handleReferentClick = (referent: string) => {
+    if (activeReferent === referent) {
+      setActiveReferent(undefined); // Toggle off
+    } else {
+      setActiveReferent(referent);
+    }
+  };
+
+  const clearReferentFilter = () => {
+    setActiveReferent(undefined);
+  };
+
   // Fonction pour lancer la recherche
   const handleSearch = () => {
     setActiveSearch(searchInput);
@@ -105,7 +120,22 @@ export function UsersTable() {
           <CardTitle>
             Liste des utilisateurs ({total})
           </CardTitle>
-          <div className="flex gap-2 w-full sm:w-auto">
+          <div className="flex gap-2 w-full sm:w-auto items-center">
+            {activeReferent && (
+              <Badge
+                variant="secondary"
+                className="flex items-center gap-1 px-3 py-1"
+                style={{ backgroundColor: REFERENT_COLORS[activeReferent] || "#6B7280", color: "white" }}
+              >
+                {activeReferent}
+                <button
+                  onClick={clearReferentFilter}
+                  className="ml-1 hover:bg-white/20 rounded-full p-0.5"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            )}
             <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
@@ -166,9 +196,17 @@ export function UsersTable() {
                       </TableCell>
                       <TableCell>
                         {user.referent ? (
-                          <span className="text-sm truncate block max-w-[120px]" title={user.referent}>
+                          <button
+                            onClick={() => handleReferentClick(user.referent!)}
+                            className={`text-sm truncate block max-w-[120px] hover:underline cursor-pointer transition-colors ${
+                              activeReferent === user.referent
+                                ? "font-bold text-primary"
+                                : "text-foreground hover:text-primary"
+                            }`}
+                            title={`Cliquer pour filtrer par ${user.referent}`}
+                          >
                             {user.referent}
-                          </span>
+                          </button>
                         ) : (
                           <span className="text-sm text-gray-400">-</span>
                         )}