chore: init from v0

2025-11-27 09:51:18 +01:00
commit e9e44916fd
109 changed files with 15966 additions and 0 deletions
--- a/components/dashboard/category-breakdown.tsx
+++ b/components/dashboard/category-breakdown.tsx
@@ -0,0 +1,98 @@
+"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>
+  )
+}