feat: integrate monthly chart with collapsible feature in transactions page; update transaction period to default to last 3 months

app/transactions/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { PageLayout, PageHeader } from "@/components/layout";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, Maximize2, Minimize2 } from "lucide-react";
 import {
   TransactionFilters,
   TransactionBulkActions,
@@ -13,15 +13,24 @@ import {
 } from "@/components/transactions";
 import { RuleCreateDialog } from "@/components/rules";
 import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
+import { MonthlyChart } from "@/components/statistics";
 import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Upload } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useTransactionsPage } from "@/hooks/use-transactions-page";
 import { useTransactionMutations } from "@/hooks/use-transaction-mutations";
 import { useTransactionRules } from "@/hooks/use-transaction-rules";
+import { useTransactionsChartData } from "@/hooks/use-transactions-chart-data";
 
 export default function TransactionsPage() {
   const queryClient = useQueryClient();
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   // Main page state and logic
   const {
@@ -88,6 +97,17 @@ export default function TransactionsPage() {
     metadata,
   });
 
+  // Chart data
+  const { monthlyData, isLoading: isLoadingChart } = useTransactionsChartData({
+    selectedAccounts,
+    selectedCategories,
+    period,
+    customStartDate,
+    customEndDate,
+    showReconciled,
+    searchQuery,
+  });
+
   const invalidateAll = useCallback(() => {
     invalidateTransactions();
     queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
@@ -98,7 +118,7 @@ export default function TransactionsPage() {
       handleBulkReconcile(reconciled, selectedTransactions);
       clearSelection();
     },
-    [handleBulkReconcile, selectedTransactions, clearSelection],
+    [handleBulkReconcile, selectedTransactions, clearSelection]
   );
 
   const handleBulkSetCategoryWithClear = useCallback(
@@ -106,7 +126,7 @@ export default function TransactionsPage() {
       handleBulkSetCategory(categoryId, selectedTransactions);
       clearSelection();
     },
-    [handleBulkSetCategory, selectedTransactions, clearSelection],
+    [handleBulkSetCategory, selectedTransactions, clearSelection]
   );
 
   const filteredTransactions = transactionsData?.transactions || [];
@@ -179,6 +199,21 @@ export default function TransactionsPage() {
         transactionsForCategoryFilter={transactionsForCategoryFilter}
       />
 
+      {!isLoadingChart && monthlyData.length > 0 && (
+        <div className="mb-6">
+          <MonthlyChart
+            data={monthlyData}
+            formatCurrency={formatCurrency}
+            collapsible
+            defaultExpanded={true}
+            showDots={
+              period !== "all" &&
+              (period === "12months" || monthlyData.length <= 12)
+            }
+          />
+        </div>
+      )}
+
       <TransactionBulkActions
         selectedCount={selectedTransactions.size}
         categories={metadata.categories}
@@ -192,6 +227,19 @@ export default function TransactionsPage() {
         </div>
       ) : (
         <>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex-1" />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsFullscreen(true)}
+              className="gap-2"
+            >
+              <Maximize2 className="w-4 h-4" />
+              Plein écran
+            </Button>
+          </div>
+
           <TransactionTable
             transactions={filteredTransactions}
             accounts={metadata.accounts}
@@ -224,6 +272,74 @@ export default function TransactionsPage() {
         </>
       )}
 
+      <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
+        <DialogContent
+          className="!max-w-none !max-h-none !w-full !h-full !p-0 flex flex-col !rounded-none !translate-x-0 !translate-y-0 !top-0 !left-0 !right-0 !bottom-0 !m-0"
+          showCloseButton={false}
+          style={{
+            width: "100vw",
+            height: "100vh",
+            maxWidth: "100vw",
+            maxHeight: "100vh",
+          }}
+        >
+          <DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+            <div className="flex items-center justify-between">
+              <DialogTitle>Transactions</DialogTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setIsFullscreen(false)}
+                className="gap-2"
+              >
+                <Minimize2 className="w-4 h-4" />
+                Réduire
+              </Button>
+            </div>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto px-6 pb-6 min-h-0">
+            <div className="mb-4">
+              <TransactionBulkActions
+                selectedCount={selectedTransactions.size}
+                categories={metadata.categories}
+                onReconcile={handleBulkReconcileWithClear}
+                onSetCategory={handleBulkSetCategoryWithClear}
+              />
+            </div>
+            <TransactionTable
+              transactions={filteredTransactions}
+              accounts={metadata.accounts}
+              categories={metadata.categories}
+              selectedTransactions={selectedTransactions}
+              sortField={sortField}
+              sortOrder={sortOrder}
+              onSortChange={onSortChange}
+              onToggleSelectAll={onToggleSelectAll}
+              onToggleSelectTransaction={onToggleSelectTransaction}
+              onToggleReconciled={toggleReconciled}
+              onMarkReconciled={markReconciled}
+              onSetCategory={setCategory}
+              onCreateRule={handleCreateRule}
+              onDelete={deleteTransaction}
+              formatCurrency={formatCurrency}
+              formatDate={formatDate}
+              updatingTransactionIds={updatingTransactionIds}
+              duplicateIds={duplicateIds}
+              highlightDuplicates={showDuplicates}
+            />
+            <div className="mt-4">
+              <TransactionPagination
+                page={page}
+                pageSize={pageSize}
+                total={totalTransactions}
+                hasMore={hasMore}
+                onPageChange={onPageChange}
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <RuleCreateDialog
         open={ruleDialogOpen}
         onOpenChange={setRuleDialogOpen}

components/statistics/monthly-chart.tsx

@@ -1,9 +1,12 @@
 "use client";
 
+import { useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import {
-  BarChart,
+  LineChart,
-  Bar,
+  Line,
   XAxis,
   YAxis,
   CartesianGrid,
@@ -11,6 +14,11 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 
 interface MonthlyChartData {
   month: string;
@@ -22,54 +30,117 @@ interface MonthlyChartData {
 interface MonthlyChartProps {
   data: MonthlyChartData[];
   formatCurrency: (amount: number) => string;
+  collapsible?: boolean;
+  defaultExpanded?: boolean;
+  showDots?: boolean;
 }
 
-export function MonthlyChart({ data, formatCurrency }: MonthlyChartProps) {
+export function MonthlyChart({
+  data,
+  formatCurrency,
+  collapsible = false,
+  defaultExpanded = true,
+  showDots = true,
+}: MonthlyChartProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  const chartContent = (
+    <>
+      {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" />
+              <YAxis
+                className="text-xs"
+                width={80}
+                tickFormatter={(v) => {
+                  // Format compact pour les grandes valeurs
+                  if (Math.abs(v) >= 1000) {
+                    return `${(v / 1000).toFixed(1)}k€`;
+                  }
+                  return `${v.toFixed(0)}€`;
+                }}
+                tick={{ fill: "var(--muted-foreground)" }}
+              />
+              <Tooltip
+                formatter={(value: number) => formatCurrency(value)}
+                labelFormatter={(label) => label}
+                contentStyle={{
+                  backgroundColor: "var(--card)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "8px",
+                }}
+              />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="revenus"
+                name="Revenus"
+                stroke="#22c55e"
+                strokeWidth={2}
+                dot={showDots ? { fill: "#22c55e", r: 4 } : false}
+                activeDot={showDots ? { r: 6 } : false}
+              />
+              <Line
+                type="monotone"
+                dataKey="depenses"
+                name="Dépenses"
+                stroke="#ef4444"
+                strokeWidth={2}
+                dot={showDots ? { fill: "#ef4444", r: 4 } : false}
+                activeDot={showDots ? { r: 6 } : 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>
+      )}
+    </>
+  );
+
+  if (!collapsible) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Revenus vs Dépenses par mois</CardTitle>
+        </CardHeader>
+        <CardContent>{chartContent}</CardContent>
+      </Card>
+    );
+  }
+
   return (
     <Card>
-      <CardHeader>
+      <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
-        <CardTitle>Revenus vs Dépenses par mois</CardTitle>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
-      </CardHeader>
+          <CardTitle className="text-base font-semibold">
-      <CardContent>
+            Revenus vs Dépenses par mois
-        {data.length > 0 ? (
+          </CardTitle>
-          <div className="h-[300px]">
+          <CollapsibleTrigger asChild>
-            <ResponsiveContainer width="100%" height="100%">
+            <Button variant="ghost" size="sm" className="h-8">
-              <BarChart data={data}>
+              {isExpanded ? (
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <>
-                <XAxis dataKey="month" className="text-xs" />
+                  <ChevronUp className="w-4 h-4 mr-1" />
-                <YAxis
+                  Réduire
-                  className="text-xs"
+                </>
-                  width={80}
+              ) : (
-                  tickFormatter={(v) => {
+                <>
-                    // Format compact pour les grandes valeurs
+                  <ChevronDown className="w-4 h-4 mr-1" />
-                    if (Math.abs(v) >= 1000) {
+                  Afficher
-                      return `${(v / 1000).toFixed(1)}k€`;
+                </>
-                    }
+              )}
-                    return `${Math.round(v)}€`;
+            </Button>
-                  }}
+          </CollapsibleTrigger>
-                  tick={{ fill: "var(--muted-foreground)" }}
+        </CardHeader>
-                />
+        <CollapsibleContent>
-                <Tooltip
+          <CardContent className="pt-0">{chartContent}</CardContent>
-                  formatter={(value: number) => formatCurrency(value)}
+        </CollapsibleContent>
-                  labelFormatter={(label) => label}
+      </Collapsible>
-                  contentStyle={{
-                    backgroundColor: "var(--card)",
-                    border: "1px solid var(--border)",
-                    borderRadius: "8px",
-                  }}
-                />
-                <Legend />
-                <Bar dataKey="revenus" fill="#22c55e" radius={[4, 4, 0, 0]} />
-                <Bar dataKey="depenses" fill="#ef4444" 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>
   );
 }

hooks/use-transactions-balance-chart.ts

@@ -0,0 +1,328 @@
+"use client";
+
+import { useMemo } from "react";
+import { useTransactions } from "@/lib/hooks";
+import { useBankingMetadata } from "@/lib/hooks";
+import type { TransactionsPaginatedParams } from "@/services/banking.service";
+import type { Account } from "@/lib/types";
+
+interface BalanceChartDataPoint {
+  date: string;
+  [key: string]: string | number;
+}
+
+interface UseTransactionsBalanceChartParams {
+  selectedAccounts: string[];
+  selectedCategories: string[];
+  period: "1month" | "3months" | "6months" | "12months" | "custom" | "all";
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showReconciled: string;
+  searchQuery: string;
+}
+
+export function useTransactionsBalanceChart({
+  selectedAccounts,
+  selectedCategories,
+  period,
+  customStartDate,
+  customEndDate,
+  showReconciled,
+  searchQuery,
+}: UseTransactionsBalanceChartParams) {
+  const { data: metadata } = useBankingMetadata();
+
+  // Calculate start date based on period
+  const startDate = useMemo(() => {
+    const now = new Date();
+    switch (period) {
+      case "1month":
+        return new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      case "3months":
+        return new Date(now.getFullYear(), now.getMonth() - 3, 1);
+      case "6months":
+        return new Date(now.getFullYear(), now.getMonth() - 6, 1);
+      case "12months":
+        return new Date(now.getFullYear(), now.getMonth() - 12, 1);
+      case "custom":
+        return customStartDate || new Date(0);
+      default:
+        return new Date(0);
+    }
+  }, [period, customStartDate]);
+
+  // Calculate end date (only for custom period)
+  const endDate = useMemo(() => {
+    if (period === "custom" && customEndDate) {
+      return customEndDate;
+    }
+    return undefined;
+  }, [period, customEndDate]);
+
+  // Build params for fetching all transactions (no pagination)
+  const chartParams = useMemo<TransactionsPaginatedParams>(() => {
+    const params: TransactionsPaginatedParams = {
+      limit: 10000, // Large limit to get all transactions
+      offset: 0,
+      sortField: "date",
+      sortOrder: "asc", // Ascending for balance calculation
+    };
+
+    if (startDate && period !== "all") {
+      params.startDate = startDate.toISOString().split("T")[0];
+    }
+    if (endDate) {
+      params.endDate = endDate.toISOString().split("T")[0];
+    }
+    if (!selectedAccounts.includes("all")) {
+      params.accountIds = selectedAccounts;
+    }
+    if (!selectedCategories.includes("all")) {
+      if (selectedCategories.includes("uncategorized")) {
+        params.includeUncategorized = true;
+      } else {
+        params.categoryIds = selectedCategories;
+      }
+    }
+    if (searchQuery) {
+      params.search = searchQuery;
+    }
+    if (showReconciled !== "all") {
+      params.isReconciled = showReconciled === "reconciled";
+    }
+
+    return params;
+  }, [
+    startDate,
+    endDate,
+    selectedAccounts,
+    selectedCategories,
+    searchQuery,
+    showReconciled,
+    period,
+  ]);
+
+  // Build params for fetching transactions before startDate (for initial balance)
+  const beforeStartDateParams = useMemo<TransactionsPaginatedParams>(() => {
+    if (period === "all" || !startDate) {
+      return { limit: 0, offset: 0 }; // Don't fetch if no start date
+    }
+
+    const params: TransactionsPaginatedParams = {
+      limit: 10000,
+      offset: 0,
+      sortField: "date",
+      sortOrder: "asc",
+      endDate: new Date(startDate.getTime() - 1).toISOString().split("T")[0], // Day before startDate
+    };
+
+    if (!selectedAccounts.includes("all")) {
+      params.accountIds = selectedAccounts;
+    }
+    if (!selectedCategories.includes("all")) {
+      if (selectedCategories.includes("uncategorized")) {
+        params.includeUncategorized = true;
+      } else {
+        params.categoryIds = selectedCategories;
+      }
+    }
+    if (searchQuery) {
+      params.search = searchQuery;
+    }
+    if (showReconciled !== "all") {
+      params.isReconciled = showReconciled === "reconciled";
+    }
+
+    return params;
+  }, [
+    startDate,
+    selectedAccounts,
+    selectedCategories,
+    searchQuery,
+    showReconciled,
+    period,
+  ]);
+
+  // Fetch transactions before startDate for initial balance calculation
+  const { data: beforeStartDateData } = useTransactions(
+    beforeStartDateParams,
+    !!metadata && period !== "all" && !!startDate
+  );
+
+  // Fetch all filtered transactions for chart
+  const { data: transactionsData, isLoading } = useTransactions(
+    chartParams,
+    !!metadata
+  );
+
+  // Calculate balance chart data
+  const chartData = useMemo(() => {
+    if (!transactionsData || !metadata) {
+      return {
+        aggregatedData: [],
+        perAccountData: [],
+      };
+    }
+
+    const transactions = transactionsData.transactions;
+    const accounts = metadata.accounts;
+
+    // Sort transactions by date
+    const sortedTransactions = [...transactions].sort(
+      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+    );
+
+    // Calculate starting balance: initialBalance + transactions before startDate
+    let runningBalance = 0;
+    const accountsToUse = selectedAccounts.includes("all")
+      ? accounts
+      : accounts.filter((acc: Account) => selectedAccounts.includes(acc.id));
+
+    // Start with initial balances
+    runningBalance = accountsToUse.reduce(
+      (sum: number, acc: Account) => sum + (acc.initialBalance || 0),
+      0
+    );
+
+    // Add transactions before startDate if we have them
+    if (beforeStartDateData?.transactions) {
+      const beforeStartTransactions = beforeStartDateData.transactions.filter(
+        (t) => {
+          const transactionDate = new Date(t.date);
+          return transactionDate < startDate;
+        }
+      );
+      beforeStartTransactions.forEach((t) => {
+        runningBalance += t.amount;
+      });
+    }
+
+    const aggregatedBalanceByDate = new Map<string, number>();
+
+    // Calculate balance evolution
+    sortedTransactions.forEach((t) => {
+      runningBalance += t.amount;
+      aggregatedBalanceByDate.set(t.date, runningBalance);
+    });
+
+    const aggregatedBalanceData: BalanceChartDataPoint[] = Array.from(
+      aggregatedBalanceByDate.entries()
+    ).map(([date, balance]) => ({
+      date: new Date(date).toLocaleDateString("fr-FR", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      }),
+      solde: Math.round(balance),
+    }));
+
+    // Per account balance calculation
+    const accountBalances = new Map<string, Map<string, number>>();
+    accounts.forEach((account: Account) => {
+      accountBalances.set(account.id, new Map());
+    });
+
+    // Calculate running balance per account
+    const accountRunningBalances = new Map<string, number>();
+    accounts.forEach((account: Account) => {
+      accountRunningBalances.set(account.id, account.initialBalance || 0);
+    });
+
+    // Add transactions before startDate per account
+    if (beforeStartDateData?.transactions) {
+      const beforeStartTransactions = beforeStartDateData.transactions.filter(
+        (t) => {
+          const transactionDate = new Date(t.date);
+          return transactionDate < startDate;
+        }
+      );
+      beforeStartTransactions.forEach((t) => {
+        const currentBalance = accountRunningBalances.get(t.accountId) || 0;
+        accountRunningBalances.set(t.accountId, currentBalance + t.amount);
+      });
+    }
+
+    // Filter transactions by account if needed
+    const transactionsForAccounts = selectedAccounts.includes("all")
+      ? sortedTransactions
+      : sortedTransactions.filter((t) =>
+          selectedAccounts.includes(t.accountId)
+        );
+
+    transactionsForAccounts.forEach((t) => {
+      const currentBalance = accountRunningBalances.get(t.accountId) || 0;
+      const newBalance = currentBalance + t.amount;
+      accountRunningBalances.set(t.accountId, newBalance);
+
+      const accountDates = accountBalances.get(t.accountId);
+      if (accountDates) {
+        accountDates.set(t.date, newBalance);
+      }
+    });
+
+    // Merge all dates and create data points
+    const allDates = new Set<string>();
+    accountBalances.forEach((dates) => {
+      dates.forEach((_, date) => allDates.add(date));
+    });
+
+    const sortedDates = Array.from(allDates).sort();
+    const lastBalances = new Map<string, number>();
+    accounts.forEach((account: Account) => {
+      // Start with initial balance + transactions before startDate
+      let accountStartingBalance = account.initialBalance || 0;
+      if (beforeStartDateData?.transactions) {
+        const beforeStartTransactions = beforeStartDateData.transactions.filter(
+          (t) => {
+            const transactionDate = new Date(t.date);
+            return transactionDate < startDate && t.accountId === account.id;
+          }
+        );
+        beforeStartTransactions.forEach((t) => {
+          accountStartingBalance += t.amount;
+        });
+      }
+      lastBalances.set(account.id, accountStartingBalance);
+    });
+
+    const perAccountBalanceData: BalanceChartDataPoint[] = sortedDates.map(
+      (date) => {
+        const point: BalanceChartDataPoint = {
+          date: new Date(date).toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+          }),
+        };
+
+        accounts.forEach((account: Account) => {
+          const accountDates = accountBalances.get(account.id);
+          if (accountDates?.has(date)) {
+            lastBalances.set(account.id, accountDates.get(date)!);
+          }
+          point[account.id] = Math.round(lastBalances.get(account.id) || 0);
+        });
+
+        return point;
+      }
+    );
+
+    return {
+      aggregatedData: aggregatedBalanceData,
+      perAccountData: perAccountBalanceData,
+    };
+  }, [
+    transactionsData,
+    beforeStartDateData,
+    metadata,
+    selectedAccounts,
+    startDate,
+  ]);
+
+  return {
+    aggregatedData: chartData.aggregatedData,
+    perAccountData: chartData.perAccountData,
+    accounts: metadata?.accounts || [],
+    isLoading,
+  };
+}

hooks/use-transactions-chart-data.ts

@@ -0,0 +1,200 @@
+"use client";
+
+import { useMemo } from "react";
+import { useTransactions } from "@/lib/hooks";
+import { useBankingMetadata } from "@/lib/hooks";
+import type { TransactionsPaginatedParams } from "@/services/banking.service";
+import type { Category } from "@/lib/types";
+
+interface MonthlyChartData {
+  month: string;
+  revenus: number;
+  depenses: number;
+  solde: number;
+}
+
+interface CategoryChartData {
+  name: string;
+  value: number;
+  color: string;
+  icon: string;
+  categoryId: string | null;
+}
+
+interface UseTransactionsChartDataParams {
+  selectedAccounts: string[];
+  selectedCategories: string[];
+  period: "1month" | "3months" | "6months" | "12months" | "custom" | "all";
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showReconciled: string;
+  searchQuery: string;
+}
+
+export function useTransactionsChartData({
+  selectedAccounts,
+  selectedCategories,
+  period,
+  customStartDate,
+  customEndDate,
+  showReconciled,
+  searchQuery,
+}: UseTransactionsChartDataParams) {
+  const { data: metadata } = useBankingMetadata();
+
+  // Calculate start date based on period
+  const startDate = useMemo(() => {
+    const now = new Date();
+    switch (period) {
+      case "1month":
+        return new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      case "3months":
+        return new Date(now.getFullYear(), now.getMonth() - 3, 1);
+      case "6months":
+        return new Date(now.getFullYear(), now.getMonth() - 6, 1);
+      case "12months":
+        return new Date(now.getFullYear(), now.getMonth() - 12, 1);
+      case "custom":
+        return customStartDate || new Date(0);
+      default:
+        return new Date(0);
+    }
+  }, [period, customStartDate]);
+
+  // Calculate end date (only for custom period)
+  const endDate = useMemo(() => {
+    if (period === "custom" && customEndDate) {
+      return customEndDate;
+    }
+    return undefined;
+  }, [period, customEndDate]);
+
+  // Build params for fetching all transactions (no pagination)
+  const chartParams = useMemo<TransactionsPaginatedParams>(() => {
+    const params: TransactionsPaginatedParams = {
+      limit: 10000, // Large limit to get all transactions
+      offset: 0,
+      sortField: "date",
+      sortOrder: "asc",
+    };
+
+    if (startDate && period !== "all") {
+      params.startDate = startDate.toISOString().split("T")[0];
+    }
+    if (endDate) {
+      params.endDate = endDate.toISOString().split("T")[0];
+    }
+    if (!selectedAccounts.includes("all")) {
+      params.accountIds = selectedAccounts;
+    }
+    if (!selectedCategories.includes("all")) {
+      if (selectedCategories.includes("uncategorized")) {
+        params.includeUncategorized = true;
+      } else {
+        params.categoryIds = selectedCategories;
+      }
+    }
+    if (searchQuery) {
+      params.search = searchQuery;
+    }
+    if (showReconciled !== "all") {
+      params.isReconciled = showReconciled === "reconciled";
+    }
+
+    return params;
+  }, [
+    startDate,
+    endDate,
+    selectedAccounts,
+    selectedCategories,
+    searchQuery,
+    showReconciled,
+    period,
+  ]);
+
+  // Fetch all filtered transactions for chart
+  const { data: transactionsData, isLoading } = useTransactions(
+    chartParams,
+    !!metadata
+  );
+
+  // Calculate monthly chart data
+  const monthlyData = useMemo(() => {
+    if (!transactionsData || !metadata) {
+      return [];
+    }
+
+    const transactions = transactionsData.transactions;
+
+    // Monthly breakdown
+    const monthlyMap = new Map<string, { income: number; expenses: number }>();
+    transactions.forEach((t) => {
+      const monthKey = t.date.substring(0, 7);
+      const current = monthlyMap.get(monthKey) || { income: 0, expenses: 0 };
+      if (t.amount >= 0) {
+        current.income += t.amount;
+      } else {
+        current.expenses += Math.abs(t.amount);
+      }
+      monthlyMap.set(monthKey, current);
+    });
+
+    const monthlyChartData: MonthlyChartData[] = Array.from(
+      monthlyMap.entries()
+    )
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([month, values]) => ({
+        month: new Date(month + "-01").toLocaleDateString("fr-FR", {
+          month: "short",
+          year: "numeric",
+        }),
+        revenus: values.income,
+        depenses: values.expenses,
+        solde: values.income - values.expenses,
+      }));
+
+    return monthlyChartData;
+  }, [transactionsData]);
+
+  // Calculate category chart data (expenses only)
+  const categoryData = useMemo(() => {
+    if (!transactionsData || !metadata) {
+      return [];
+    }
+
+    const transactions = transactionsData.transactions;
+    const categoryTotals = new Map<string, number>();
+
+    transactions
+      .filter((t) => t.amount < 0)
+      .forEach((t) => {
+        const catId = t.categoryId || "uncategorized";
+        const current = categoryTotals.get(catId) || 0;
+        categoryTotals.set(catId, current + Math.abs(t.amount));
+      });
+
+    const categoryChartData: CategoryChartData[] = Array.from(
+      categoryTotals.entries()
+    )
+      .map(([categoryId, total]) => {
+        const category = metadata.categories.find((c: Category) => c.id === categoryId);
+        return {
+          name: category?.name || "Non catégorisé",
+          value: Math.round(total),
+          color: category?.color || "#94a3b8",
+          icon: category?.icon || "HelpCircle",
+          categoryId: categoryId === "uncategorized" ? null : categoryId,
+        };
+      })
+      .sort((a, b) => b.value - a.value);
+
+    return categoryChartData;
+  }, [transactionsData, metadata]);
+
+  return {
+    monthlyData,
+    categoryData,
+    isLoading,
+  };
+}
+

hooks/use-transactions-page.ts

@@ -29,7 +29,7 @@ export function useTransactionsPage() {
     "all",
   ]);
   const [showReconciled, setShowReconciled] = useState<string>("all");
-  const [period, setPeriod] = useState<Period>("all");
+  const [period, setPeriod] = useState<Period>("3months");
   const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
     undefined,
   );