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

applicatif 3M, user, chart

Browse Source
This commit is contained in:
nBiqoz
2025-10-31 20:51:39 +01:00
parent 0efe96f4e2
commit 1c7bca8e35
7 changed files with 286 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/dashboard/overview-metrics.tsx
View File

@@ -2,7 +2,15 @@
import { useMetrics } from "@/hooks/useMetrics";
import { MetricCard } from "@/components/ui/metric-card";
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro, Activity } from "lucide-react";
import {
Users,
UserCheck,
Coins,
MessageSquare,
FileText,
Euro,
Activity,
} from "lucide-react";
import { convertCreditsToEuros } from "@/lib/utils/currency";
export function OverviewMetrics() {
@@ -30,62 +38,63 @@ export function OverviewMetrics() {
const creditsInEuros = convertCreditsToEuros(metrics.totalCredits);
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<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}
/>
{/* Nouvelle carte pour les tokens consommés */}
<MetricCard
title="Tokens consommés"
value={metrics.totalTokensConsumed?.toLocaleString() || "0"}
icon={Activity}
description={`${Math.round((metrics.totalTokensConsumed || 0) / (metrics.totalUsers || 1))} par utilisateur`}
/>
<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 className="space-y-4">
{/* Ligne 1: Utilisateurs actifs, Conversations actives, Tokens consommés */}
<div className="grid gap-4 md:grid-cols-3">
<MetricCard
title="Utilisateurs actifs"
value={metrics.activeUsers}
icon={UserCheck}
/>
<MetricCard
title="Conversations actives"
value={metrics.activeConversations}
icon={MessageSquare}
/>
<MetricCard
title="Tokens consommés"
value={metrics.totalTokensConsumed?.toLocaleString() || "0"}
icon={Activity}
description={`${Math.round(
(metrics.totalTokensConsumed || 0) / (metrics.totalUsers || 1)
)} par utilisateur`}
/>
</div>
{/* Ligne 2: Utilisateurs totaux, Messages totaux, Crédits totaux */}
<div className="grid gap-4 md:grid-cols-3">
<MetricCard
title="Utilisateurs totaux"
value={metrics.totalUsers}
icon={Users}
/>
<MetricCard
title="Messages totaux"
value={metrics.totalMessages}
icon={FileText}
/>
<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>
<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 className="text-2xl font-bold mb-1">
{metrics.totalCredits.toLocaleString()}
</div>
<div className="text-xs text-green-600">
{creditsInEuros.formatted.usd} USD
<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>
</div>
<MetricCard
title="Conversations actives"
value={metrics.activeConversations}
icon={MessageSquare}
/>
<MetricCard
title="Messages totaux"
value={metrics.totalMessages}
icon={FileText}
/>
</div>
);
}
}