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

new

Browse Source
This commit is contained in:
nBiqoz
2025-10-06 19:19:57 +02:00
parent 0f2adca44a
commit 5b68ffdfb6
4 changed files with 113 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/dashboard/metric-cards.tsx
View File

@@ -8,8 +8,10 @@ import {
TrendingUp,
TrendingDown,
Activity,
Euro,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { convertCreditsToEuros } from "@/lib/utils/currency";
interface MetricCardProps {
title: string;
@@ -77,6 +79,9 @@ interface MetricCardsProps {
}
export function MetricCards({ metrics }: MetricCardsProps) {
// Conversion des crédits en euros
const creditsConversion = convertCreditsToEuros(metrics.totalCreditsUsed);
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<MetricCard
@@ -105,7 +110,10 @@ export function MetricCards({ metrics }: MetricCardsProps) {
<CardTitle className="text-sm font-medium text-muted-foreground">
Crédits totaux
</CardTitle>
<CreditCard className="h-4 w-4 text-muted-foreground" />
<div className="flex items-center gap-1">
<CreditCard className="h-4 w-4 text-muted-foreground" />
<Euro className="h-4 w-4 text-green-600" />
</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
@@ -114,7 +122,22 @@ export function MetricCards({ metrics }: MetricCardsProps) {
<p className="text-xs text-muted-foreground mt-1">
crédits disponibles
</p>
<div className="flex items-center space-x-2 text-xs text-muted-foreground mt-1">
{/* Conversion en euros */}
<div className="mt-2 p-2 bg-green-50 rounded-lg border border-green-200">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-green-800">Valeur en EUR:</span>
<span className="text-lg font-bold text-green-600">
{creditsConversion.formatted.eur}
</span>
</div>
<div className="flex items-center justify-between text-xs text-green-600">
<span>USD: {creditsConversion.formatted.usd}</span>
<span>Taux: 1 USD = 0.92 EUR</span>
</div>
</div>
<div className="flex items-center space-x-2 text-xs text-muted-foreground mt-2">
<TrendingUp className="h-3 w-3 text-green-500" />
<span className="text-green-500">+23%</span>
<span>par rapport au mois dernier</span>

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

@@ -2,7 +2,8 @@
import { useMetrics } from "@/hooks/useMetrics";
import { MetricCard } from "@/components/ui/metric-card";
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText } from "lucide-react";
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();
@@ -25,6 +26,9 @@ export function OverviewMetrics() {
);
}
// 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
@@ -42,11 +46,27 @@ export function OverviewMetrics() {
value={metrics.totalAdmins}
icon={Shield}
/>
<MetricCard
title="Crédits totaux"
value={metrics.totalCredits}
icon={Coins}
/>
<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}

18
components/dashboard/usage-analytics.tsx
View File

@@ -3,8 +3,9 @@
import { useState, useEffect, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Users, MessageSquare, DollarSign, Activity } from "lucide-react";
import { Users, MessageSquare, DollarSign, Activity, Euro } from "lucide-react";
import { useCollection } from "@/hooks/useCollection";
import { convertCreditsToEuros } from "@/lib/utils/currency";
import {
LibreChatUser,
@@ -322,13 +323,26 @@ export function UsageAnalytics() {
<CardTitle className="text-sm font-medium">
Crédits totaux
</CardTitle>
<DollarSign className="h-4 w-4 text-muted-foreground" />
<div className="flex items-center gap-1">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<Euro className="h-4 w-4 text-green-600" />
</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{stats.totalCreditsUsed.toLocaleString()}
</div>
<p className="text-xs text-muted-foreground">crédits disponibles</p>
{/* Conversion en euros */}
<div className="mt-2 p-2 bg-green-50 rounded-lg border border-green-200">
<div className="text-sm font-medium text-green-800">
Valeur: {convertCreditsToEuros(stats.totalCreditsUsed).formatted.eur}
</div>
<div className="text-xs text-green-600">
({convertCreditsToEuros(stats.totalCreditsUsed).formatted.usd} USD)
</div>
</div>
</CardContent>
</Card>
</div>