62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useMetrics } from "@/hooks/useMetrics";
|
|
import { MetricCard } from "@/components/ui/metric-card";
|
|
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText } from "lucide-react";
|
|
|
|
export function OverviewMetrics() {
|
|
const { metrics, loading, error } = useMetrics();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !metrics) {
|
|
return (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
Erreur lors du chargement des métriques
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<MetricCard
|
|
title="Utilisateurs totaux"
|
|
value={metrics.totalUsers}
|
|
icon={Users}
|
|
/>
|
|
<MetricCard
|
|
title="Utilisateurs actifs"
|
|
value={metrics.activeUsers}
|
|
icon={UserCheck}
|
|
/>
|
|
<MetricCard
|
|
title="Administrateurs"
|
|
value={metrics.totalAdmins}
|
|
icon={Shield}
|
|
/>
|
|
<MetricCard
|
|
title="Crédits totaux"
|
|
value={metrics.totalCredits}
|
|
icon={Coins}
|
|
/>
|
|
<MetricCard
|
|
title="Conversations actives"
|
|
value={metrics.activeConversations}
|
|
icon={MessageSquare}
|
|
/>
|
|
<MetricCard
|
|
title="Messages totaux"
|
|
value={metrics.totalMessages}
|
|
icon={FileText}
|
|
/>
|
|
</div>
|
|
);
|
|
} |