first commit

components/dashboard/recent-transactions.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useMetrics } from "@/hooks/useMetrics";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { formatDate } from "@/lib/utils";
+
+export function RecentTransactions() {
+  const { metrics, loading } = useMetrics();
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Transactions récentes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-16 bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Transactions récentes</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {metrics?.recentTransactions.map((transaction) => (
+            <div
+              key={transaction._id}
+              className="flex items-center justify-between"
+            >
+              <div>
+                <p className="text-sm font-medium">{transaction.description}</p>
+                <p className="text-xs text-muted-foreground">
+                  {formatDate(new Date(transaction.createdAt))}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant={
+                    transaction.type === "credit" ? "default" : "destructive"
+                  }
+                >
+                  {transaction.type === "credit" ? "+" : "-"}
+                  {Math.abs(transaction.amount).toLocaleString()} tokens
+                </Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}