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

app/transactions/page.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from "react";
 import { PageLayout, PageHeader } from "@/components/layout";
-import { RefreshCw, Receipt, Euro, ChevronDown } from "lucide-react";
+import { RefreshCw, Receipt, Euro, ChevronDown, ChevronUp } from "lucide-react";
 import {
   TransactionFilters,
   TransactionBulkActions,
@@ -27,6 +27,7 @@ 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";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 
 export default function TransactionsPage() {
   const queryClient = useQueryClient();
@@ -150,6 +151,12 @@ export default function TransactionsPage() {
   const totalAmount = chartTotalAmount ?? 0;
   const displayTotalCount = chartTotalCount ?? totalTransactions;
 
+  // Persist statistics collapsed state in localStorage
+  const [isStatsExpanded, setIsStatsExpanded] = useLocalStorage(
+    "transactions-stats-expanded",
+    true
+  );
+
   // For filter comboboxes, we'll use empty arrays for now
   // They can be enhanced later with separate queries if needed
   const transactionsForAccountFilter: never[] = [];
@@ -213,15 +220,24 @@ export default function TransactionsPage() {
 
       {(!isLoadingChart || !isLoadingTransactions) && (
         <Card className="mb-6">
-          <Collapsible defaultOpen={true}>
+          <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
               <CardTitle className="text-base font-semibold">
                 Statistiques
               </CardTitle>
               <CollapsibleTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-8">
-                  <ChevronDown className="w-4 h-4 mr-1" />
-                  Réduire
+                  {isStatsExpanded ? (
+                    <>
+                      <ChevronUp className="w-4 h-4 mr-1" />
+                      Réduire
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="w-4 h-4 mr-1" />
+                      Afficher
+                    </>
+                  )}
                 </Button>
               </CollapsibleTrigger>
             </CardHeader>