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