63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|