bouton recherche

.claude/settings.local.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cat:*)",
+      "Bash(awk:*)",
+      "Bash(useCollection.tmp)",
+      "Bash(npm run build:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

CLAUDE.md

@@ -0,0 +1,13 @@
+## CRITICAL: File Editing on Windows
+
+### ⚠️ MANDATORY: Always Use Backslashes on Windows for File Paths
+
+When using Edit or MultiEdit tools on Windows, you MUST use backslashes (\) in file paths, NOT forward slashes (/).
+
+#### ❌ WRONG - Will cause errors:
+
+Edit(file_path: "D:/repos/project/file.tsx", ...)
+
+#### ✅ CORRECT - Always works:
+
+Edit(file_path: "D:\repos\project\file.tsx", ...)

components/collections/users-table.old.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useCollection } from "@/hooks/useCollection";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+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 { formatDate } from "@/lib/utils";
+import { LibreChatUser, LibreChatBalance } from "@/lib/types";
+
+export function UsersTable() {
+  const [page, setPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const limit = 20;
+
+  const {
+    data: users = [],
+    total = 0,
+    loading: usersLoading,
+  } = useCollection<LibreChatUser>("users", {
+    page,
+    limit,
+    // ✅ AJOUTER le searchTerm ici
+    search: searchTerm,
+  });
+
+  // Charger tous les balances pour associer les crédits
+  const { data: balances = [] } = useCollection<LibreChatBalance>("balances", {
+    limit: 1000, // Charger tous les balances
+  });
+
+  // Créer une map des crédits par utilisateur
+  const creditsMap = useMemo(() => {
+    const map = new Map<string, number>();
+    balances.forEach((balance) => {
+      map.set(balance.user, balance.tokenCredits || 0);
+    });
+    return map;
+  }, [balances]);
+
+  const totalPages = Math.ceil(total / limit);
+
+  const handlePrevPage = () => {
+    setPage((prev) => Math.max(1, prev - 1));
+  };
+
+  const handleNextPage = () => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  };
+
+  if (usersLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Liste des utilisateurs</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-16 bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <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 ? users.length : 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>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Nom</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Rôle</TableHead>
+                <TableHead>Crédits</TableHead>
+                <TableHead>Statut</TableHead>
+                <TableHead>Créé le</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {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
+
+                  return (
+                    <TableRow key={user._id}>
+                      <TableCell>
+                        <span className="font-mono text-xs">
+                          {user._id.slice(-8)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="font-medium">{user.name}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm">{user.email}</span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            user.role === "ADMIN" ? "default" : "secondary"
+                          }
+                        >
+                          {user.role}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <span className="font-semibold">
+                          {userCredits.toLocaleString()} crédits
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-muted-foreground">
+                          <Badge variant={isActive ? "default" : "secondary"}>
+                            {isActive ? "Actif" : "Inactif"}
+                          </Badge>
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-muted-foreground">
+                          {formatDate(user.createdAt)}
+                        </span>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={7}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    {searchTerm
+                      ? `Aucun utilisateur trouvé pour "${searchTerm}"`
+                      : "Aucun utilisateur trouvé"}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </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>
+          </div>
+        )}
+
+        {/* Info de recherche */}
+        {searchTerm && (
+          <div className="py-4 text-sm text-muted-foreground">
+            {users.length} résultat(s) trouvé(s) pour &quot;{searchTerm}
+            &quot;
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

hooks/useCollection.old.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+
+interface UseCollectionOptions {
+  page?: number;
+  limit?: number;
+  filter?: Record<string, unknown>;
+  search?: string;
+}
+
+interface CollectionResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export function useCollection<T = Record<string, unknown>>(
+  collectionName: string,
+  options: UseCollectionOptions = {}
+) {
+  const [data, setData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  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]);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString(),
+        filter: filterString,
+      });
+      if (search) {
+        params.append("search", search);
+      }
+
+      const response = await fetch(
+        `/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");
+    } finally {
+      setLoading(false);
+    }
+  }, [collectionName, page, limit, filterString]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const refetch = useCallback(() => {
+    return fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, total, totalPages, refetch };
+}

hooks/useCollection.ts.bak

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+
+interface UseCollectionOptions {
+  page?: number;
+  limit?: number;
+  filter?: Record<string, unknown>;
+  search?: string;
+}
+
+interface CollectionResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export function useCollection<T = Record<string, unknown>>(
+  collectionName: string,
+  options: UseCollectionOptions = {}
+) {
+  const [data, setData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  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]);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString(),
+        filter: filterString,
+      });
+      if (search) {
+        params.append("search", search);
+      }
+
+      const response = await fetch(
+        `/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");
+    } finally {
+      setLoading(false);
+    }
+  }, [collectionName, page, limit, filterString]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const refetch = useCallback(() => {
+    return fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, total, totalPages, refetch };
+}