first commit

components/dashboard/charts/usage-chart.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  LineChart, 
+  Line, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer 
+} from "recharts";
+
+interface UsageChartProps {
+  data: Array<{
+    date: string;
+    conversations: number;
+    tokens: number;
+  }>;
+}
+
+export function UsageChart({ data }: UsageChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base font-medium">Usage quotidien</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis 
+              dataKey="date" 
+              className="text-xs fill-muted-foreground"
+              tickFormatter={(value) => new Date(value).toLocaleDateString('fr-FR', { 
+                month: 'short', 
+                day: 'numeric' 
+              })}
+            />
+            <YAxis className="text-xs fill-muted-foreground" />
+            <Tooltip 
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+              }}
+              labelFormatter={(value) => new Date(value).toLocaleDateString('fr-FR')}
+              formatter={(value: number, name: string) => {
+                if (name === 'tokens') {
+                  return [Math.round(value / 1000), "Tokens (k)"];
+                }
+                return [value, name];
+              }}
+            />
+            <Line 
+              type="monotone" 
+              dataKey="conversations" 
+              stroke="hsl(var(--primary))" 
+              strokeWidth={2}
+              name="Conversations"
+            />
+            <Line 
+              type="monotone" 
+              dataKey="tokens" 
+              stroke="hsl(var(--destructive))" 
+              strokeWidth={2}
+              name="tokens"
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}