82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useMetrics } from "@/hooks/useMetrics";
|
|
import { MetricCard } from "@/components/ui/metric-card";
|
|
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro } from "lucide-react";
|
|
import { convertCreditsToEuros } from "@/lib/utils/currency";
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
// Conversion des crédits en euros
|
|
const creditsInEuros = convertCreditsToEuros(metrics.totalCredits);
|
|
|
|
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}
|
|
/>
|
|
<div className="bg-white rounded-lg border p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="text-sm font-medium text-gray-600">Crédits totaux</h3>
|
|
<div className="flex items-center gap-1">
|
|
<Coins className="h-4 w-4 text-gray-400" />
|
|
<Euro className="h-4 w-4 text-green-600" />
|
|
</div>
|
|
</div>
|
|
<div className="text-2xl font-bold mb-1">
|
|
{metrics.totalCredits.toLocaleString()}
|
|
</div>
|
|
<div className="text-sm text-gray-500 mb-2">crédits disponibles</div>
|
|
<div className="p-2 bg-green-50 rounded border border-green-200">
|
|
<div className="text-sm font-semibold text-green-800">
|
|
{creditsInEuros.formatted.eur}
|
|
</div>
|
|
<div className="text-xs text-green-600">
|
|
{creditsInEuros.formatted.usd} USD
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<MetricCard
|
|
title="Conversations actives"
|
|
value={metrics.activeConversations}
|
|
icon={MessageSquare}
|
|
/>
|
|
<MetricCard
|
|
title="Messages totaux"
|
|
value={metrics.totalMessages}
|
|
icon={FileText}
|
|
/>
|
|
</div>
|
|
);
|
|
} |