first commit

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer 
+} from "recharts";
+
+interface ModelUsageChartProps {
+  data: Record<string, number>;
+}
+
+export function ModelUsageChart({ data }: ModelUsageChartProps) {
+  const chartData = Object.entries(data).map(([model, usage]) => ({
+    model: model.replace('gpt-', 'GPT-').replace('claude-', 'Claude-'),
+    usage,
+  }));
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base font-medium">Usage par modèle</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis 
+              dataKey="model" 
+              className="text-xs fill-muted-foreground"
+              angle={-45}
+              textAnchor="end"
+              height={60}
+            />
+            <YAxis className="text-xs fill-muted-foreground" />
+            <Tooltip 
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+              }}
+            />
+            <Bar 
+              dataKey="usage" 
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}