feat: enhance statistics page with new charts and data visualizations including savings trend, category trends, and year-over-year comparisons

app/statistics/page.tsx

@@ -8,6 +8,11 @@ import {
   CategoryPieChart,
   BalanceLineChart,
   TopExpensesList,
+  CategoryBarChart,
+  CategoryTrendChart,
+  SavingsTrendChart,
+  IncomeExpenseTrendChart,
+  YearOverYearChart,
 } from "@/components/statistics";
 import { useBankingData } from "@/lib/hooks";
 import { getAccountBalance } from "@/lib/account-utils";
@@ -409,6 +414,126 @@ export default function StatisticsPage() {
       return point;
     });
 
+    // Savings trend data
+    const savingsTrendData = monthlyChartData.map((month) => ({
+      month: month.month,
+      savings: month.solde,
+      cumulative: 0, // Will be calculated if needed
+    }));
+
+    // Category trend data (monthly breakdown by category)
+    const categoryTrendByMonth = new Map<string, Map<string, number>>();
+    transactions
+      .filter((t) => t.amount < 0)
+      .forEach((t) => {
+        const monthKey = t.date.substring(0, 7);
+        const catId = t.categoryId || "uncategorized";
+        
+        if (!categoryTrendByMonth.has(monthKey)) {
+          categoryTrendByMonth.set(monthKey, new Map());
+        }
+        const monthCategories = categoryTrendByMonth.get(monthKey)!;
+        const current = monthCategories.get(catId) || 0;
+        monthCategories.set(catId, current + Math.abs(t.amount));
+      });
+
+    const allCategoryMonths = Array.from(categoryTrendByMonth.keys()).sort();
+    const categoryTrendData = allCategoryMonths.map((monthKey) => {
+      const point: { month: string; [key: string]: string | number } = {
+        month: new Date(monthKey + "-01").toLocaleDateString("fr-FR", {
+          month: "short",
+          year: "numeric",
+        }),
+      };
+      const monthCategories = categoryTrendByMonth.get(monthKey)!;
+      monthCategories.forEach((total, catId) => {
+        point[catId] = Math.round(total);
+      });
+      return point;
+    });
+
+    // Category trend data grouped by parent category
+    const categoryTrendByMonthByParent = new Map<string, Map<string, number>>();
+    transactions
+      .filter((t) => t.amount < 0)
+      .forEach((t) => {
+        const monthKey = t.date.substring(0, 7);
+        const category = data.categories.find((c) => c.id === t.categoryId);
+        // Use parent category ID if category has a parent, otherwise use the category itself
+        // If category is null (uncategorized), use "uncategorized"
+        let groupId: string;
+        if (!category) {
+          groupId = "uncategorized";
+        } else if (category.parentId) {
+          groupId = category.parentId;
+        } else {
+          // Category is a parent itself
+          groupId = category.id;
+        }
+        
+        if (!categoryTrendByMonthByParent.has(monthKey)) {
+          categoryTrendByMonthByParent.set(monthKey, new Map());
+        }
+        const monthCategories = categoryTrendByMonthByParent.get(monthKey)!;
+        const current = monthCategories.get(groupId) || 0;
+        monthCategories.set(groupId, current + Math.abs(t.amount));
+      });
+
+    // Use the same months as categoryTrendData
+    const categoryTrendDataByParent = allCategoryMonths.map((monthKey) => {
+      const point: { month: string; [key: string]: string | number } = {
+        month: new Date(monthKey + "-01").toLocaleDateString("fr-FR", {
+          month: "short",
+          year: "numeric",
+        }),
+      };
+      const monthCategories = categoryTrendByMonthByParent.get(monthKey);
+      if (monthCategories) {
+        monthCategories.forEach((total, groupId) => {
+          point[groupId] = Math.round(total);
+        });
+      }
+      return point;
+    });
+
+    // Year over year comparison (if we have at least 12 months)
+    const currentYear = new Date().getFullYear();
+    const previousYear = currentYear - 1;
+    const yearOverYearData: Array<{
+      month: string;
+      current: number;
+      previous: number;
+      label: string;
+    }> = [];
+
+    if (allCategoryMonths.length >= 12) {
+      const currentYearData = new Map<string, number>();
+      const previousYearData = new Map<string, number>();
+
+      monthlyData.forEach((values, monthKey) => {
+        const date = new Date(monthKey + "-01");
+        const monthName = date.toLocaleDateString("fr-FR", { month: "short" });
+        const year = date.getFullYear();
+
+        if (year === currentYear) {
+          currentYearData.set(monthName, values.expenses);
+        } else if (year === previousYear) {
+          previousYearData.set(monthName, values.expenses);
+        }
+      });
+
+      // Get all months from current year
+      const months = Array.from(currentYearData.keys());
+      months.forEach((month) => {
+        yearOverYearData.push({
+          month,
+          current: currentYearData.get(month) || 0,
+          previous: previousYearData.get(month) || 0,
+          label: month,
+        });
+      });
+    }
+
     return {
       monthlyChartData,
       categoryChartData,
@@ -419,6 +544,10 @@ export default function StatisticsPage() {
       aggregatedBalanceData,
       perAccountBalanceData,
       transactionCount: transactions.length,
+      savingsTrendData,
+      categoryTrendData,
+      categoryTrendDataByParent,
+      yearOverYearData,
     };
   }, [data, startDate, endDate, selectedAccounts, selectedCategories, excludeInternalTransfers, internalTransferCategory]);
 
@@ -609,34 +738,88 @@ export default function StatisticsPage() {
         </CardContent>
       </Card>
 
+      {/* Vue d'ensemble */}
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mb-4">Vue d'ensemble</h2>
         <StatsSummaryCards
           totalIncome={stats.totalIncome}
           totalExpenses={stats.totalExpenses}
           avgMonthlyExpenses={stats.avgMonthlyExpenses}
           formatCurrency={formatCurrency}
         />
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <MonthlyChart
-          data={stats.monthlyChartData}
-          formatCurrency={formatCurrency}
-        />
-        <CategoryPieChart
-          data={stats.categoryChartData}
-          formatCurrency={formatCurrency}
-        />
+        <div className="mt-6">
           <BalanceLineChart
             aggregatedData={stats.aggregatedBalanceData}
             perAccountData={stats.perAccountBalanceData}
             accounts={data.accounts}
             formatCurrency={formatCurrency}
           />
+        </div>
+        <div className="mt-6">
+          <SavingsTrendChart
+            data={stats.savingsTrendData}
+            formatCurrency={formatCurrency}
+          />
+        </div>
+      </section>
+
+      {/* Revenus et Dépenses */}
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mb-4">Revenus et Dépenses</h2>
+        <div className="grid gap-6 lg:grid-cols-2">
+          <MonthlyChart
+            data={stats.monthlyChartData}
+            formatCurrency={formatCurrency}
+          />
+          <IncomeExpenseTrendChart
+            data={stats.monthlyChartData.map((m) => ({
+              month: m.month,
+              revenus: m.revenus,
+              depenses: m.depenses,
+            }))}
+            formatCurrency={formatCurrency}
+          />
+        </div>
+        {stats.yearOverYearData.length > 0 && (
+          <div className="mt-6">
+            <YearOverYearChart
+              data={stats.yearOverYearData}
+              formatCurrency={formatCurrency}
+            />
+          </div>
+        )}
+      </section>
+
+      {/* Analyse par Catégorie */}
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mb-4">Analyse par Catégorie</h2>
+        <div className="grid gap-6 lg:grid-cols-2">
+          <CategoryPieChart
+            data={stats.categoryChartData}
+            formatCurrency={formatCurrency}
+          />
+          <CategoryBarChart
+            data={stats.categoryChartData}
+            formatCurrency={formatCurrency}
+          />
+        </div>
+        <div className="mt-6">
+          <CategoryTrendChart
+            data={stats.categoryTrendData}
+            dataByParent={stats.categoryTrendDataByParent}
+            categories={data.categories}
+            formatCurrency={formatCurrency}
+          />
+        </div>
+        <div className="mt-6">
           <TopExpensesList
             expenses={stats.topExpenses}
             categories={data.categories}
             formatCurrency={formatCurrency}
           />
         </div>
+      </section>
+
     </PageLayout>
   );
 }

components/statistics/category-bar-chart.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+import type { CategoryChartData } from "./category-pie-chart";
+
+interface CategoryBarChartProps {
+  data: CategoryChartData[];
+  formatCurrency: (amount: number) => string;
+  title?: string;
+  maxItems?: number;
+}
+
+export function CategoryBarChart({
+  data,
+  formatCurrency,
+  title = "Top catégories de dépenses",
+  maxItems = 10,
+}: CategoryBarChartProps) {
+  const displayData = data.slice(0, maxItems).reverse(); // Reverse pour avoir le plus grand en haut
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {displayData.length > 0 ? (
+          <div className="h-[400px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={displayData}
+                layout="vertical"
+                margin={{ left: 100, right: 20, top: 20, bottom: 20 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  type="number"
+                  className="text-xs"
+                  tickFormatter={(v) => {
+                    if (Math.abs(v) >= 1000) {
+                      return `${(v / 1000).toFixed(1)}k€`;
+                    }
+                    return `${Math.round(v)}€`;
+                  }}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                />
+                <YAxis
+                  type="category"
+                  dataKey="name"
+                  className="text-xs"
+                  width={90}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                  tickFormatter={(value) => {
+                    const item = displayData.find((d) => d.name === value);
+                    return item ? value : "";
+                  }}
+                />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    const item = payload[0].payload as CategoryChartData;
+                    return (
+                      <div
+                        className="px-3 py-2 rounded-lg shadow-lg"
+                        style={{
+                          backgroundColor: "var(--card)",
+                          border: "1px solid var(--border)",
+                        }}
+                      >
+                        <div className="flex items-center gap-2 mb-1">
+                          <CategoryIcon
+                            icon={item.icon}
+                            color={item.color}
+                            size={16}
+                          />
+                          <span
+                            className="font-medium"
+                            style={{ color: item.color }}
+                          >
+                            {item.name}
+                          </span>
+                        </div>
+                        <div className="text-foreground font-semibold">
+                          {formatCurrency(item.value)}
+                        </div>
+                      </div>
+                    );
+                  }}
+                />
+                <Bar dataKey="value" radius={[4, 0, 0, 4]}>
+                  {displayData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-[400px] flex items-center justify-center text-muted-foreground">
+            Pas de données pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

components/statistics/category-trend-chart.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { ChevronDown, ChevronUp, Layers, List } from "lucide-react";
+import type { Category } from "@/lib/types";
+
+interface CategoryTrendDataPoint {
+  month: string;
+  [categoryId: string]: string | number;
+}
+
+interface CategoryTrendChartProps {
+  data: CategoryTrendDataPoint[];
+  dataByParent: CategoryTrendDataPoint[];
+  categories: Category[];
+  formatCurrency: (amount: number) => string;
+  maxCategories?: number;
+}
+
+const CATEGORY_COLORS = [
+  "#ef4444", // red
+  "#f59e0b", // amber
+  "#eab308", // yellow
+  "#22c55e", // green
+  "#06b6d4", // cyan
+  "#3b82f6", // blue
+  "#6366f1", // indigo
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#f97316", // orange
+];
+
+export function CategoryTrendChart({
+  data,
+  dataByParent,
+  categories,
+  formatCurrency,
+  maxCategories = 5,
+}: CategoryTrendChartProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [groupByParent, setGroupByParent] = useState(true);
+
+  // Use the appropriate dataset based on groupByParent
+  const currentData = groupByParent ? dataByParent : data;
+
+  // Get top categories by total amount
+  const categoryTotals = new Map<string, number>();
+  currentData.forEach((point) => {
+    Object.keys(point).forEach((key) => {
+      if (key !== "month" && typeof point[key] === "number") {
+        const current = categoryTotals.get(key) || 0;
+        categoryTotals.set(key, current + (point[key] as number));
+      }
+    });
+  });
+
+  const topCategories = Array.from(categoryTotals.entries())
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, maxCategories)
+    .map(([id]) => id);
+
+  const displayCategories = isExpanded
+    ? Array.from(categoryTotals.keys())
+    : topCategories;
+
+  const categoriesToShow =
+    selectedCategories.length > 0 ? selectedCategories : displayCategories;
+
+  // Helper function to get category name
+  // When groupByParent is true, the categoryId in dataByParent is already the parent ID
+  const getCategoryName = (categoryId: string): string => {
+    if (categoryId === "uncategorized") return "Non catégorisé";
+    const category = categories.find((c) => c.id === categoryId);
+    return category?.name || "Inconnu";
+  };
+
+  // Helper function to get category info (for color, icon)
+  // When groupByParent is true, the categoryId in dataByParent is already the parent ID
+  const getCategoryInfo = (categoryId: string): Category | null => {
+    if (categoryId === "uncategorized") return null;
+    return categories.find((c) => c.id === categoryId) || null;
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle>Évolution des dépenses par catégorie</CardTitle>
+        <div className="flex gap-2">
+          <Button
+            variant={groupByParent ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setGroupByParent(!groupByParent)}
+            title={groupByParent ? "Afficher toutes les catégories" : "Regrouper par catégories parentes"}
+          >
+            {groupByParent ? (
+              <>
+                <List className="w-4 h-4 mr-1" />
+                Par catégorie
+              </>
+            ) : (
+              <>
+                <Layers className="w-4 h-4 mr-1" />
+                Par parent
+              </>
+            )}
+          </Button>
+          {categoryTotals.size > maxCategories && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="w-4 h-4 mr-1" />
+                  Réduire
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="w-4 h-4 mr-1" />
+                  Voir tout ({categoryTotals.size})
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {currentData.length > 0 && categoriesToShow.length > 0 ? (
+          <div className="h-[350px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={currentData}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  dataKey="month"
+                  className="text-xs"
+                  interval="preserveStartEnd"
+                />
+                <YAxis
+                  className="text-xs"
+                  width={80}
+                  tickFormatter={(v) => {
+                    if (Math.abs(v) >= 1000) {
+                      return `${(v / 1000).toFixed(1)}k€`;
+                    }
+                    return `${Math.round(v)}€`;
+                  }}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                />
+                <Tooltip
+                  formatter={(value: number) => formatCurrency(value)}
+                  contentStyle={{
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Legend
+                  content={() => {
+                    // Get all category IDs from data
+                    const allCategoryIds = Array.from(categoryTotals.keys());
+                    
+                    return (
+                      <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
+                        {allCategoryIds.map((categoryId) => {
+                          const categoryInfo = getCategoryInfo(categoryId);
+                          const categoryName = getCategoryName(categoryId);
+                          if (!categoryInfo && categoryId !== "uncategorized") return null;
+                          
+                          const isInDisplayCategories = displayCategories.includes(categoryId);
+                          const isSelected =
+                            selectedCategories.length === 0
+                              ? isInDisplayCategories
+                              : selectedCategories.includes(categoryId);
+                          return (
+                            <button
+                              key={`legend-${categoryId}`}
+                              className={`flex items-center gap-1.5 text-sm cursor-pointer transition-opacity px-2 py-1 rounded ${
+                                isSelected
+                                  ? "opacity-100"
+                                  : "opacity-30 hover:opacity-60"
+                              }`}
+                              onClick={() => {
+                                if (selectedCategories.includes(categoryId)) {
+                                  setSelectedCategories(
+                                    selectedCategories.filter(
+                                      (id) => id !== categoryId
+                                    )
+                                  );
+                                } else {
+                                  setSelectedCategories([
+                                    ...selectedCategories,
+                                    categoryId,
+                                  ]);
+                                }
+                              }}
+                            >
+                              {categoryInfo ? (
+                                <CategoryIcon
+                                  icon={categoryInfo.icon}
+                                  color={categoryInfo.color}
+                                  size={14}
+                                />
+                              ) : (
+                                <div
+                                  className="w-3.5 h-3.5 rounded-full"
+                                  style={{ backgroundColor: "#94a3b8" }}
+                                />
+                              )}
+                              <span className="text-foreground">
+                                {categoryName}
+                              </span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    );
+                  }}
+                />
+                {categoriesToShow.map((categoryId, index) => {
+                  const categoryInfo = getCategoryInfo(categoryId);
+                  const categoryName = getCategoryName(categoryId);
+                  if (!categoryInfo && categoryId !== "uncategorized") return null;
+                  
+                  const isSelected =
+                    selectedCategories.length === 0 ||
+                    selectedCategories.includes(categoryId);
+                  return (
+                    <Line
+                      key={categoryId}
+                      type="monotone"
+                      dataKey={categoryId}
+                      name={categoryName}
+                      stroke={categoryInfo?.color || CATEGORY_COLORS[index % CATEGORY_COLORS.length]}
+                      strokeWidth={isSelected ? 2 : 1}
+                      strokeOpacity={isSelected ? 1 : 0.3}
+                      dot={false}
+                      hide={!isSelected && selectedCategories.length > 0}
+                    />
+                  );
+                })}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-[350px] flex items-center justify-center text-muted-foreground">
+            Pas de données pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

components/statistics/income-expense-trend-chart.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+interface IncomeExpenseTrendDataPoint {
+  month: string;
+  revenus: number;
+  depenses: number;
+}
+
+interface IncomeExpenseTrendChartProps {
+  data: IncomeExpenseTrendDataPoint[];
+  formatCurrency: (amount: number) => string;
+}
+
+export function IncomeExpenseTrendChart({
+  data,
+  formatCurrency,
+}: IncomeExpenseTrendChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tendances revenus et dépenses</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {data.length > 0 ? (
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={data}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  dataKey="month"
+                  className="text-xs"
+                  interval="preserveStartEnd"
+                />
+                <YAxis
+                  className="text-xs"
+                  width={80}
+                  tickFormatter={(v) => {
+                    if (Math.abs(v) >= 1000) {
+                      return `${(v / 1000).toFixed(1)}k€`;
+                    }
+                    return `${Math.round(v)}€`;
+                  }}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                />
+                <Tooltip
+                  formatter={(value: number) => formatCurrency(value)}
+                  contentStyle={{
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="revenus"
+                  name="Revenus"
+                  stroke="#22c55e"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="depenses"
+                  name="Dépenses"
+                  stroke="#ef4444"
+                  strokeWidth={2}
+                  dot={false}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+            Pas de données pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

components/statistics/index.ts

@@ -3,4 +3,9 @@ export { MonthlyChart } from "./monthly-chart";
 export { CategoryPieChart } from "./category-pie-chart";
 export { BalanceLineChart } from "./balance-line-chart";
 export { TopExpensesList } from "./top-expenses-list";
+export { CategoryBarChart } from "./category-bar-chart";
+export { CategoryTrendChart } from "./category-trend-chart";
+export { SavingsTrendChart } from "./savings-trend-chart";
+export { IncomeExpenseTrendChart } from "./income-expense-trend-chart";
+export { YearOverYearChart } from "./year-over-year-chart";
 

components/statistics/savings-trend-chart.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { TrendingUp, TrendingDown } from "lucide-react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+interface SavingsTrendDataPoint {
+  month: string;
+  savings: number;
+  cumulative: number;
+}
+
+interface SavingsTrendChartProps {
+  data: SavingsTrendDataPoint[];
+  formatCurrency: (amount: number) => string;
+}
+
+export function SavingsTrendChart({
+  data,
+  formatCurrency,
+}: SavingsTrendChartProps) {
+  const latestSavings = data.length > 0 ? data[data.length - 1].savings : 0;
+  const isPositive = latestSavings >= 0;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle>Évolution des économies</CardTitle>
+        <div className="flex items-center gap-2">
+          {isPositive ? (
+            <TrendingUp className="w-4 h-4 text-emerald-600" />
+          ) : (
+            <TrendingDown className="w-4 h-4 text-red-600" />
+          )}
+          <span
+            className={`text-sm font-semibold ${
+              isPositive ? "text-emerald-600" : "text-red-600"
+            }`}
+          >
+            {formatCurrency(latestSavings)}
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {data.length > 0 ? (
+          <div className="h-[250px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={data}>
+                <defs>
+                  <linearGradient id="savingsGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="5%"
+                      stopColor={isPositive ? "#22c55e" : "#ef4444"}
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="95%"
+                      stopColor={isPositive ? "#22c55e" : "#ef4444"}
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  dataKey="month"
+                  className="text-xs"
+                  interval="preserveStartEnd"
+                />
+                <YAxis
+                  className="text-xs"
+                  width={80}
+                  tickFormatter={(v) => {
+                    if (Math.abs(v) >= 1000) {
+                      return `${(v / 1000).toFixed(1)}k€`;
+                    }
+                    return `${Math.round(v)}€`;
+                  }}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                />
+                <Tooltip
+                  formatter={(value: number) => formatCurrency(value)}
+                  contentStyle={{
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="savings"
+                  name="Économies mensuelles"
+                  stroke={isPositive ? "#22c55e" : "#ef4444"}
+                  strokeWidth={2}
+                  fill="url(#savingsGradient)"
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-[250px] flex items-center justify-center text-muted-foreground">
+            Pas de données pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

components/statistics/year-over-year-chart.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+interface YearOverYearDataPoint {
+  month: string;
+  current: number;
+  previous: number;
+  label: string;
+}
+
+interface YearOverYearChartProps {
+  data: YearOverYearDataPoint[];
+  formatCurrency: (amount: number) => string;
+  currentYearLabel?: string;
+  previousYearLabel?: string;
+}
+
+export function YearOverYearChart({
+  data,
+  formatCurrency,
+  currentYearLabel = "Cette année",
+  previousYearLabel = "Année précédente",
+}: YearOverYearChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Comparaison année sur année</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {data.length > 0 ? (
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={data}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis dataKey="month" className="text-xs" />
+                <YAxis
+                  className="text-xs"
+                  width={80}
+                  tickFormatter={(v) => {
+                    if (Math.abs(v) >= 1000) {
+                      return `${(v / 1000).toFixed(1)}k€`;
+                    }
+                    return `${Math.round(v)}€`;
+                  }}
+                  tick={{ fill: "var(--muted-foreground)" }}
+                />
+                <Tooltip
+                  formatter={(value: number) => formatCurrency(value)}
+                  contentStyle={{
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Legend />
+                <Bar
+                  dataKey="current"
+                  name={currentYearLabel}
+                  fill="#6366f1"
+                  radius={[4, 4, 0, 0]}
+                />
+                <Bar
+                  dataKey="previous"
+                  name={previousYearLabel}
+                  fill="#94a3b8"
+                  radius={[4, 4, 0, 0]}
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+            Pas de données pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+