99 lines
2.9 KiB
TypeScript
99 lines
2.9 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>
|
|
)
|
|
}
|