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,12 +154,13 @@ 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.models?.map((model) => ({
+    (provider) =>
-      name: model.name,
+      provider.models?.map((model) => ({
-      color: provider.color,
+        name: model.name,
-      value: model.value
+        color: provider.color,
-    })) || []
+        value: model.value,
+      })) || []
   );
 
   return (
@@ -238,16 +264,16 @@ export function ModelDistributionChart({
               {allModels
                 .sort((a, b) => b.value - a.value) // Trier par usage décroissant
                 .map((model, index) => (
-                <div key={index} className="flex items-center gap-2">
+                  <div key={index} className="flex items-center gap-2">
-                  <div
+                    <div
-                    className="w-3 h-3 rounded-full flex-shrink-0"
+                      className="w-3 h-3 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: model.color }}
+                      style={{ backgroundColor: model.color }}
-                  ></div>
+                    ></div>
-                  <span className="text-xs text-muted-foreground">
+                    <span className="text-xs text-muted-foreground">
-                    {model.name}
+                      {model.name}
-                  </span>
+                    </span>
-                </div>
+                  </div>
-              ))}
+                ))}
             </div>
           </div>
         )}

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
   }