clean

app/settings/page.tsx

@@ -1,10 +1,4 @@
-import {
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Database, Server, Settings } from "lucide-react";
 

components/dashboard/charts/model-distribution-chart.tsx

@@ -41,11 +41,6 @@ interface TooltipPayload {
   };
 }
 
-interface CustomTooltipProps {
-  active?: boolean;
-  payload?: TooltipPayload[];
-}
-
 // Couleurs par fournisseur selon l'image
 const providerColors: { [key: string]: string } = {
   Anthropic: "#7C3AED", // Violet vif
@@ -114,7 +109,37 @@ const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
   }));
 };
 
-const CustomTooltip = () => {
+const CustomTooltip = ({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: TooltipPayload[];
+}) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <div className="bg-white p-3 border rounded-lg shadow-lg">
+        <p className="font-semibold">{data.name}</p>
+        <p className="text-blue-600">Tokens: {data.value.toLocaleString()}</p>
+        {data.models && data.models.length > 0 && (
+          <div className="mt-2 space-y-1">
+            <p className="text-sm font-medium text-gray-600">Modèles:</p>
+            {data.models.slice(0, 5).map((model, index) => (
+              <p key={index} className="text-xs text-gray-500">
+                • {model.name}: {model.value.toLocaleString()}
+              </p>
+            ))}
+            {data.models.length > 5 && (
+              <p className="text-xs text-gray-400">
+                ... et {data.models.length - 5} autres
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
   return null;
 };
 
@@ -129,11 +154,12 @@ export function ModelDistributionChart({
   const groupedData = data[0]?.models ? data : groupByProvider(data);
 
   // Créer une liste de tous les modèles avec leurs couleurs
-  const allModels = groupedData.flatMap((provider) => 
+  const allModels = groupedData.flatMap(
+    (provider) =>
       provider.models?.map((model) => ({
         name: model.name,
         color: provider.color,
-      value: model.value
+        value: model.value,
       })) || []
   );
 

lib/utils/currency.ts

@@ -39,7 +39,7 @@ export async function getCurrentExchangeRate(): Promise<number> {
     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) {
+  } catch {
     console.warn('Impossible de récupérer le taux de change, utilisation du taux fixe');
     return 0.92; // Taux fixe de fallback
   }