new

components/dashboard/metric-cards.tsx

@@ -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>
+          <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>

components/dashboard/overview-metrics.tsx

@@ -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}

components/dashboard/usage-analytics.tsx

@@ -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>
+            <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>

lib/utils/currency.ts

@@ -0,0 +1,46 @@
+// Fonction de conversion des crédits en euros
+export function convertCreditsToEuros(credits: number): {
+  usd: number;
+  eur: number;
+  formatted: {
+    usd: string;
+    eur: string;
+  };
+} {
+  // Votre règle : 5 millions de crédits = 5 USD
+  // Donc : 1 million de crédits = 1 USD
+  const usdAmount = credits / 1_000_000;
+  
+  // Taux de change USD → EUR (vous pouvez ajuster ce taux)
+  // Taux approximatif actuel : 1 USD ≈ 0.92 EUR
+  const USD_TO_EUR_RATE = 0.92;
+  const eurAmount = usdAmount * USD_TO_EUR_RATE;
+  
+  return {
+    usd: usdAmount,
+    eur: eurAmount,
+    formatted: {
+      usd: `$${usdAmount.toFixed(2)}`,
+      eur: `€${eurAmount.toFixed(2)}`
+    }
+  };
+}
+
+// Fonction pour formater les crédits avec conversion
+export function formatCreditsWithCurrency(credits: number): string {
+  const conversion = convertCreditsToEuros(credits);
+  return `${credits.toLocaleString()} crédits (${conversion.formatted.eur})`;
+}
+
+// Fonction pour obtenir le taux de change en temps réel (optionnel)
+export async function getCurrentExchangeRate(): Promise<number> {
+  try {
+    // Vous pouvez utiliser une API gratuite comme exchangerate-api.com
+    const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
+    const data = await response.json();
+    return data.rates.EUR || 0.92; // Fallback au taux fixe
+  } catch (error) {
+    console.warn('Impossible de récupérer le taux de change, utilisation du taux fixe');
+    return 0.92; // Taux fixe de fallback
+  }
+}