78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import type { Transaction, Category } from "@/lib/types";
|
|
|
|
interface TopExpensesListProps {
|
|
expenses: Transaction[];
|
|
categories: Category[];
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function TopExpensesList({
|
|
expenses,
|
|
categories,
|
|
formatCurrency,
|
|
}: TopExpensesListProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Top 5 dépenses</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{expenses.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{expenses.map((expense, index) => {
|
|
const category = categories.find(
|
|
(c) => c.id === expense.categoryId
|
|
);
|
|
return (
|
|
<div key={expense.id} className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm font-semibold">
|
|
{index + 1}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-sm truncate">
|
|
{expense.description}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(expense.date).toLocaleDateString("fr-FR")}
|
|
</span>
|
|
{category && (
|
|
<span
|
|
className="text-xs px-1.5 py-0.5 rounded inline-flex items-center gap-1"
|
|
style={{
|
|
backgroundColor: `${category.color}20`,
|
|
color: category.color,
|
|
}}
|
|
>
|
|
<CategoryIcon
|
|
icon={category.icon}
|
|
color={category.color}
|
|
size={10}
|
|
/>
|
|
{category.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-red-600 font-semibold tabular-nums">
|
|
{formatCurrency(expense.amount)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="h-[200px] flex items-center justify-center text-muted-foreground">
|
|
Pas de dépenses pour cette période
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|