From ef668510c84bd2fb8c426e2de548a23ce192a157 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 27 Nov 2025 11:53:36 +0100
Subject: [PATCH] feat: add links to transaction pages from accounts and
 folders for improved navigation

---
 app/accounts/page.tsx     |  8 ++++++--
 app/folders/page.tsx      |  8 +++++++-
 app/transactions/page.tsx | 12 +++++++++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/accounts/page.tsx b/app/accounts/page.tsx
index f33ec40..089f22f 100644
--- a/app/accounts/page.tsx
+++ b/app/accounts/page.tsx
@@ -40,6 +40,7 @@ import {
 } from "lucide-react";
 import type { Account } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 
 const accountTypeIcons = {
   CHECKING: Wallet,
@@ -235,9 +236,12 @@ export default function AccountsPage() {
                         {formatCurrency(account.balance)}
                       </div>
                       <div className="flex items-center justify-between text-sm text-muted-foreground">
-                        <span>
+                        <Link
+                          href={`/transactions?accountId=${account.id}`}
+                          className="hover:text-primary hover:underline"
+                        >
                           {getTransactionCount(account.id)} transactions
-                        </span>
+                        </Link>
                         {folder && <span>{folder.name}</span>}
                       </div>
                       {account.lastImport && (
diff --git a/app/folders/page.tsx b/app/folders/page.tsx
index 47e6bd6..26ce9c4 100644
--- a/app/folders/page.tsx
+++ b/app/folders/page.tsx
@@ -46,6 +46,7 @@ import {
 } from "@/lib/store-db";
 import type { Folder as FolderType, Account } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 
 const folderColors = [
   { value: "#6366f1", label: "Indigo" },
@@ -177,7 +178,12 @@ function FolderTreeItem({
               )}
             >
               <Building2 className="w-4 h-4 text-muted-foreground" />
-              <span className="flex-1 text-sm">{account.name}</span>
+              <Link
+                href={`/transactions?accountId=${account.id}`}
+                className="flex-1 text-sm hover:text-primary hover:underline"
+              >
+                {account.name}
+              </Link>
               <span
                 className={cn(
                   "text-sm tabular-nums",
diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx
index 66499ba..b33d112 100644
--- a/app/transactions/page.tsx
+++ b/app/transactions/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
 import { Sidebar } from "@/components/dashboard/sidebar";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
@@ -41,9 +42,18 @@ type SortField = "date" | "amount" | "description";
 type SortOrder = "asc" | "desc";
 
 export default function TransactionsPage() {
+  const searchParams = useSearchParams();
   const { data, isLoading, refresh, update } = useBankingData();
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedAccount, setSelectedAccount] = useState<string>("all");
+
+  // Initialize account filter from URL params
+  useEffect(() => {
+    const accountId = searchParams.get("accountId");
+    if (accountId) {
+      setSelectedAccount(accountId);
+    }
+  }, [searchParams]);
   const [selectedCategory, setSelectedCategory] = useState<string>("all");
   const [showReconciled, setShowReconciled] = useState<string>("all");
   const [sortField, setSortField] = useState<SortField>("date");