237 lines
8.3 KiB
TypeScript
237 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Users } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useCollection } from "@/hooks/useCollection";
|
|
import {
|
|
LibreChatUser,
|
|
LibreChatConversation,
|
|
LibreChatTransaction,
|
|
LibreChatBalance,
|
|
} from "@/lib/types";
|
|
|
|
interface DashboardUser {
|
|
userId: string;
|
|
userName: string;
|
|
conversations: number;
|
|
tokens: number;
|
|
credits: number;
|
|
}
|
|
|
|
// Fonction utilitaire pour valider et convertir les dates
|
|
const isValidDate = (value: unknown): value is string | number | Date => {
|
|
if (!value) return false;
|
|
if (value instanceof Date) return !isNaN(value.getTime());
|
|
if (typeof value === 'string' || typeof value === 'number') {
|
|
const date = new Date(value);
|
|
return !isNaN(date.getTime());
|
|
}
|
|
return false;
|
|
};
|
|
|
|
export function DashboardUsersList() {
|
|
const [topUsers, setTopUsers] = useState<DashboardUser[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const { data: users, loading: usersLoading } = useCollection<LibreChatUser>('users');
|
|
const { data: conversations, loading: conversationsLoading } = useCollection<LibreChatConversation>('conversations');
|
|
const { data: transactions, loading: transactionsLoading } = useCollection<LibreChatTransaction>('transactions');
|
|
const { data: balances, loading: balancesLoading } = useCollection<LibreChatBalance>('balances');
|
|
|
|
const processUsers = useCallback(() => {
|
|
if (!users?.length || !conversations?.length || !transactions?.length || !balances?.length) {
|
|
return;
|
|
}
|
|
|
|
console.log("🔄 Processing users data...");
|
|
console.log("Users:", users.length);
|
|
console.log("Conversations:", conversations.length);
|
|
console.log("Transactions:", transactions.length);
|
|
console.log("Balances:", balances.length);
|
|
|
|
const processedUsers: DashboardUser[] = [];
|
|
|
|
users.forEach((user: LibreChatUser) => {
|
|
// Obtenir les conversations de l'utilisateur
|
|
const userConversations = conversations.filter(
|
|
(conv: LibreChatConversation) => conv.user === user._id
|
|
);
|
|
|
|
// Obtenir les transactions de l'utilisateur
|
|
const userTransactions = transactions.filter(
|
|
(trans: LibreChatTransaction) => trans.user === user._id
|
|
);
|
|
|
|
// Calculer les tokens consommés
|
|
const totalTokens = userTransactions.reduce(
|
|
(sum: number, trans: LibreChatTransaction) => sum + (trans.rawAmount || 0),
|
|
0
|
|
);
|
|
|
|
// Obtenir les balances de l'utilisateur
|
|
const userBalances = balances.filter(
|
|
(balance: LibreChatBalance) => balance.user === user._id
|
|
);
|
|
|
|
// Trier par date de mise à jour (plus récent en premier)
|
|
const sortedBalances = userBalances.sort((a, b) => {
|
|
const dateA = a.updatedAt || a.createdAt;
|
|
const dateB = b.updatedAt || b.createdAt;
|
|
|
|
// Vérifier que les dates sont valides avant de les comparer
|
|
if (isValidDate(dateA) && isValidDate(dateB)) {
|
|
return new Date(dateB as string | number | Date).getTime() - new Date(dateA as string | number | Date).getTime();
|
|
}
|
|
|
|
// Si seulement une date existe et est valide, la privilégier
|
|
if (isValidDate(dateA) && !isValidDate(dateB)) return -1;
|
|
if (!isValidDate(dateA) && isValidDate(dateB)) return 1;
|
|
|
|
// Si aucune date n'existe ou n'est valide, garder l'ordre actuel
|
|
return 0;
|
|
});
|
|
|
|
// Prendre la balance la plus récente
|
|
const latestBalance = sortedBalances[0];
|
|
const credits = latestBalance ? latestBalance.tokenCredits || 0 : 0;
|
|
|
|
// Ajouter l'utilisateur seulement s'il a des données significatives
|
|
if (userConversations.length > 0 || totalTokens > 0 || credits > 0) {
|
|
processedUsers.push({
|
|
userId: user._id,
|
|
userName: user.name || user.username || user.email || 'Utilisateur inconnu',
|
|
conversations: userConversations.length,
|
|
tokens: totalTokens,
|
|
credits: credits,
|
|
});
|
|
}
|
|
});
|
|
|
|
// Trier par tokens consommés (décroissant) et prendre les 5 premiers
|
|
const sortedUsers = processedUsers
|
|
.sort((a, b) => b.tokens - a.tokens)
|
|
.slice(0, 5);
|
|
|
|
console.log("✅ Top 5 users processed:", sortedUsers);
|
|
setTopUsers(sortedUsers);
|
|
setIsLoading(false);
|
|
}, [users, conversations, transactions, balances]);
|
|
|
|
useEffect(() => {
|
|
const allDataLoaded = !usersLoading && !conversationsLoading && !transactionsLoading && !balancesLoading;
|
|
|
|
if (allDataLoaded) {
|
|
processUsers();
|
|
} else {
|
|
setIsLoading(true);
|
|
}
|
|
}, [usersLoading, conversationsLoading, transactionsLoading, balancesLoading, processUsers]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
Top 5 utilisateurs
|
|
</CardTitle>
|
|
<Button variant="outline" size="sm" disabled>
|
|
Chargement...
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse"></div>
|
|
<div>
|
|
<div className="h-4 bg-gray-200 rounded w-24 animate-pulse"></div>
|
|
<div className="h-3 bg-gray-200 rounded w-16 mt-1 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
|
|
<div className="h-3 bg-gray-200 rounded w-12 mt-1 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (topUsers.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
Top 5 utilisateurs
|
|
</CardTitle>
|
|
<Link href="/users">
|
|
<Button variant="outline" size="sm">
|
|
Voir tous
|
|
</Button>
|
|
</Link>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
Aucun utilisateur trouvé
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
Top 5 utilisateurs
|
|
</CardTitle>
|
|
<Link href="/users">
|
|
<Button variant="outline" size="sm">
|
|
Voir tous
|
|
</Button>
|
|
</Link>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{topUsers.map((user, index) => (
|
|
<div
|
|
key={user.userId}
|
|
className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Badge variant="secondary" className="w-6 h-6 rounded-full p-0 flex items-center justify-center text-xs">
|
|
{index + 1}
|
|
</Badge>
|
|
<div>
|
|
<p className="font-medium text-sm">{user.userName}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{user.conversations} conversation{user.conversations !== 1 ? 's' : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-sm">
|
|
{user.tokens.toLocaleString()} tokens
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{user.credits.toLocaleString()} crédits
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |