nacim/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user reaearch and fix function delete

Browse Source
This commit is contained in:
nBiqoz
2025-10-20 17:17:03 +02:00
parent e0232b1fcb
commit 0efe96f4e2
2 changed files with 189 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
components/collections/users-table.tsx
View File

@@ -13,13 +13,14 @@ import {
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ChevronLeft, ChevronRight } from "lucide-react";
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;
// Charger les utilisateurs
@@ -46,6 +47,20 @@ 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 = () => {
@@ -76,7 +91,20 @@ export function UsersTable() {
return (
<Card>
<CardHeader>
<CardTitle>Liste des utilisateurs ({total})</CardTitle>
<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})
</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">
@@ -93,78 +121,108 @@ export function UsersTable() {
</TableRow>
</TableHeader>
<TableBody>
{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>
<Badge variant={isActive ? 'default' : 'secondary'}>
{isActive ? 'Actif' : 'Inactif'}
</Badge>
</TableCell>
<TableCell>
<span className="text-sm text-muted-foreground">
{formatDate(user.createdAt)}
</span>
</TableCell>
</TableRow>
);
})}
{filteredUsers.length > 0 ? (
filteredUsers.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 */}
<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)
{/* 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>
<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>
)}
{/* 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>
</div>
)}
</CardContent>
</Card>
);
}
}