112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import type { BankingData } from "@/lib/types";
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
Tooltip,
|
|
} from "recharts";
|
|
|
|
interface CategoryBreakdownProps {
|
|
data: BankingData;
|
|
}
|
|
|
|
export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
|
|
// Get current month expenses by category
|
|
const thisMonth = new Date();
|
|
thisMonth.setDate(1);
|
|
const thisMonthStr = thisMonth.toISOString().slice(0, 7);
|
|
|
|
const monthExpenses = data.transactions.filter(
|
|
(t) => t.date.startsWith(thisMonthStr) && t.amount < 0,
|
|
);
|
|
|
|
const categoryTotals = new Map<string, number>();
|
|
|
|
monthExpenses.forEach((t) => {
|
|
const catId = t.categoryId || "uncategorized";
|
|
const current = categoryTotals.get(catId) || 0;
|
|
categoryTotals.set(catId, current + Math.abs(t.amount));
|
|
});
|
|
|
|
const chartData = Array.from(categoryTotals.entries())
|
|
.map(([categoryId, total]) => {
|
|
const category = data.categories.find((c) => c.id === categoryId);
|
|
return {
|
|
name: category?.name || "Non catégorisé",
|
|
value: total,
|
|
color: category?.color || "#94a3b8",
|
|
};
|
|
})
|
|
.sort((a, b) => b.value - a.value)
|
|
.slice(0, 6);
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(value);
|
|
};
|
|
|
|
if (chartData.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dépenses par catégorie</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
<p className="text-muted-foreground">Pas de données ce mois-ci</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dépenses par catégorie</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[250px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={chartData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={50}
|
|
outerRadius={80}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{chartData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
formatter={(value: number) => formatCurrency(value)}
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--card))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
<Legend
|
|
formatter={(value) => (
|
|
<span className="text-sm text-foreground">{value}</span>
|
|
)}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|