feat: implement localStorage persistence for user preferences in categories, statistics, transactions, and sidebar components; enhance UI with collapsible elements and improved layout

app/statistics/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
 import {
   StatsSummaryCards,
@@ -46,6 +46,7 @@ import { Button } from "@/components/ui/button";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 import type { Account, Category } from "@/lib/types";
 
 type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
@@ -54,21 +55,59 @@ export default function StatisticsPage() {
   const { data, isLoading } = useBankingData();
   const isMobile = useIsMobile();
   const [sheetOpen, setSheetOpen] = useState(false);
-  const [period, setPeriod] = useState<Period>("6months");
-  const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([
-    "all",
-  ]);
+  
+  // Persister les filtres dans le localStorage
+  const [period, setPeriod] = useLocalStorage<Period>(
+    "statistics-period",
+    "6months"
+  );
+  const [selectedAccounts, setSelectedAccounts] = useLocalStorage<string[]>(
+    "statistics-selected-accounts",
+    ["all"]
+  );
+  const [selectedCategories, setSelectedCategories] = useLocalStorage<string[]>(
+    "statistics-selected-categories",
+    ["all"]
+  );
   const [excludeInternalTransfers, setExcludeInternalTransfers] =
-    useState(true);
-  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
-    undefined,
+    useLocalStorage("statistics-exclude-internal-transfers", true);
+  
+  // Pour les dates, on stocke les ISO strings et on les convertit
+  const [customStartDateISO, setCustomStartDateISO] = useLocalStorage<
+    string | null
+  >("statistics-custom-start-date", null);
+  const [customEndDateISO, setCustomEndDateISO] = useLocalStorage<
+    string | null
+  >("statistics-custom-end-date", null);
+  
+  // Convertir les ISO strings en Date
+  const customStartDate = useMemo(
+    () => (customStartDateISO ? new Date(customStartDateISO) : undefined),
+    [customStartDateISO]
   );
-  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
-    undefined,
+  const customEndDate = useMemo(
+    () => (customEndDateISO ? new Date(customEndDateISO) : undefined),
+    [customEndDateISO]
   );
+  
+  // Fonctions pour mettre à jour les dates avec persistance
+  const setCustomStartDate = (date: Date | undefined) => {
+    setCustomStartDateISO(date ? date.toISOString() : null);
+  };
+  const setCustomEndDate = (date: Date | undefined) => {
+    setCustomEndDateISO(date ? date.toISOString() : null);
+  };
+  
   const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
 
+  // Nettoyer les dates personnalisées quand on change de période (sauf si on passe à "custom")
+  useEffect(() => {
+    if (period !== "custom" && (customStartDateISO || customEndDateISO)) {
+      setCustomStartDateISO(null);
+      setCustomEndDateISO(null);
+    }
+  }, [period, customStartDateISO, customEndDateISO, setCustomStartDateISO, setCustomEndDateISO]);
+
   // Get start date based on period
   const startDate = useMemo(() => {
     const now = new Date();