feat: refactor transaction filters to support multiple account selection and improve UI with new account filter component

app/transactions/page.tsx

@@ -27,12 +27,12 @@ export default function TransactionsPage() {
   const searchParams = useSearchParams();
   const { data, isLoading, refresh, update } = useBankingData();
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedAccount, setSelectedAccount] = useState<string>("all");
+  const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
 
   useEffect(() => {
     const accountId = searchParams.get("accountId");
     if (accountId) {
-      setSelectedAccount(accountId);
+      setSelectedAccounts([accountId]);
     }
   }, [searchParams]);
 
@@ -60,9 +60,9 @@ export default function TransactionsPage() {
       );
     }
 
-    if (selectedAccount !== "all") {
+    if (!selectedAccounts.includes("all")) {
       transactions = transactions.filter(
-        (t) => t.accountId === selectedAccount
+        (t) => selectedAccounts.includes(t.accountId)
       );
     }
 
@@ -103,7 +103,7 @@ export default function TransactionsPage() {
   }, [
     data,
     searchQuery,
-    selectedAccount,
+    selectedAccounts,
     selectedCategories,
     showReconciled,
     sortField,
@@ -376,13 +376,14 @@ export default function TransactionsPage() {
       <TransactionFilters
         searchQuery={searchQuery}
         onSearchChange={setSearchQuery}
-        selectedAccount={selectedAccount}
-        onAccountChange={setSelectedAccount}
+        selectedAccounts={selectedAccounts}
+        onAccountsChange={setSelectedAccounts}
         selectedCategories={selectedCategories}
         onCategoriesChange={setSelectedCategories}
         showReconciled={showReconciled}
         onReconciledChange={setShowReconciled}
         accounts={data.accounts}
+        folders={data.folders}
         categories={data.categories}
       />