From 82e27524b5886936be2511bb8a6a8de8cf88d441 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 21 Dec 2025 08:33:19 +0100
Subject: [PATCH] feat: enhance TransactionsPage with total count and amount
 display; update CategoryCard and ParentCategoryRow to link to transaction
 filters by category; implement localStorage for transaction period preference

---
 app/transactions/page.tsx                     | 7 +++++++
 components/categories/category-card.tsx       | 9 ++++++++-
 components/categories/parent-category-row.tsx | 9 +++++++--
 hooks/use-transactions-page.ts                | 3 ++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx
index 08e35f4..12a7c7a 100644
--- a/app/transactions/page.tsx
+++ b/app/transactions/page.tsx
@@ -243,6 +243,13 @@ export default function TransactionsPage() {
             <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
               <CardTitle className="text-base font-semibold">
                 Statistiques
+                {!isStatsExpanded && (
+                  <span className="ml-3 text-sm font-normal text-muted-foreground">
+                    {displayTotalCount} opération
+                    {displayTotalCount > 1 ? "s" : ""} •{" "}
+                    {formatCurrency(totalAmount)}
+                  </span>
+                )}
               </CardTitle>
               <CollapsibleTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-8">
diff --git a/components/categories/category-card.tsx b/components/categories/category-card.tsx
index b7853fd..f0fd1ab 100644
--- a/components/categories/category-card.tsx
+++ b/components/categories/category-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { CategoryIcon } from "@/components/ui/category-icon";
@@ -37,7 +38,13 @@ export function CategoryCard({
             size={isMobile ? 10 : 12}
           />
         </div>
-        <span className="text-xs md:text-sm truncate">{category.name}</span>
+        <Link
+          href={`/transactions?categoryIds=${category.id}`}
+          className="text-xs md:text-sm truncate hover:underline"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {category.name}
+        </Link>
         {!isMobile && (
           <span className="text-xs md:text-sm text-muted-foreground shrink-0">
             {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
diff --git a/components/categories/parent-category-row.tsx b/components/categories/parent-category-row.tsx
index d8db228..9820797 100644
--- a/components/categories/parent-category-row.tsx
+++ b/components/categories/parent-category-row.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -73,9 +74,13 @@ export function ParentCategoryRow({
                   size={isMobile ? 10 : 14}
                 />
               </div>
-              <span className="font-medium text-xs md:text-sm truncate">
+              <Link
+                href={`/transactions?categoryIds=${parent.id}`}
+                className="font-medium text-xs md:text-sm truncate hover:underline"
+                onClick={(e) => e.stopPropagation()}
+              >
                 {parent.name}
-              </span>
+              </Link>
               {!isMobile && (
                 <span className="text-xs md:text-sm text-muted-foreground shrink-0">
                   {children.length} • {stats.count} opération
diff --git a/hooks/use-transactions-page.ts b/hooks/use-transactions-page.ts
index df941d9..6bad8b3 100644
--- a/hooks/use-transactions-page.ts
+++ b/hooks/use-transactions-page.ts
@@ -7,6 +7,7 @@ import {
   useTransactions,
   useDuplicateIds,
 } from "@/lib/hooks";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 import type { TransactionsPaginatedParams } from "@/services/banking.service";
 import type { Category } from "@/lib/types";
 
@@ -30,7 +31,7 @@ export function useTransactionsPage() {
     "all",
   ]);
   const [showReconciled, setShowReconciled] = useState<string>("all");
-  const [period, setPeriod] = useState<Period>("3months");
+  const [period, setPeriod] = useLocalStorage<Period>("transactions-period", "3months");
   const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
     undefined,
   );