bouton recherche
This commit is contained in:
Biqoz
15
.claude/settings.local.json
Normal file
15
.claude/settings.local.json
Normal file
@@ -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": []
|
||||
}
|
||||
}
|
||||
13
CLAUDE.md
Normal file
13
CLAUDE.md
Normal file
@@ -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", ...)
|
||||
215
components/collections/users-table.old.tsx
Normal file
215
components/collections/users-table.old.tsx
Normal file
@@ -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 "{searchTerm}
|
||||
"
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
73
hooks/useCollection.old.ts
Normal file
73
hooks/useCollection.old.ts
Normal file
@@ -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 };
|
||||
}
|
||||
73
hooks/useCollection.ts.bak
Normal file
73
hooks/useCollection.ts.bak
Normal file
@@ -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 };
|
||||
}
|
||||
Reference in New Issue
Block a user