feat: implement account filtering and enhance accounts summary display with folder organization

app/page.tsx

@@ -1,19 +1,47 @@
 "use client";
 
+import { useState, useMemo } from "react";
 import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
 import { OverviewCards } from "@/components/dashboard/overview-cards";
 import { RecentTransactions } from "@/components/dashboard/recent-transactions";
 import { AccountsSummary } from "@/components/dashboard/accounts-summary";
 import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
 import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
+import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
+import { Card, CardContent } from "@/components/ui/card";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
 import { Upload } from "lucide-react";
+import type { BankingData } from "@/lib/types";
 
 export default function DashboardPage() {
   const { data, isLoading, refresh } = useBankingData();
+  const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
 
-  if (isLoading || !data) {
+  // Filter data based on selected accounts
+  const filteredData = useMemo<BankingData | null>(() => {
+    if (!data) return null;
+    
+    if (selectedAccounts.includes("all") || selectedAccounts.length === 0) {
+      return data;
+    }
+
+    const filteredAccounts = data.accounts.filter((a) =>
+      selectedAccounts.includes(a.id)
+    );
+    const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
+    const filteredTransactions = data.transactions.filter((t) =>
+      filteredAccountIds.has(t.accountId)
+    );
+
+    return {
+      ...data,
+      accounts: filteredAccounts,
+      transactions: filteredTransactions,
+    };
+  }, [data, selectedAccounts]);
+
+  if (isLoading || !data || !filteredData) {
     return <LoadingState />;
   }
 
@@ -32,13 +60,28 @@ export default function DashboardPage() {
         }
       />
 
-      <OverviewCards data={data} />
+      <Card className="mb-6">
+        <CardContent className="pt-4">
+          <div className="flex flex-wrap gap-4">
+            <AccountFilterCombobox
+              accounts={data.accounts}
+              folders={data.folders}
+              value={selectedAccounts}
+              onChange={setSelectedAccounts}
+              className="w-[200px]"
+              filteredTransactions={data.transactions}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <OverviewCards data={filteredData} />
 
       <div className="grid gap-6 lg:grid-cols-2">
-        <RecentTransactions data={data} />
+        <RecentTransactions data={filteredData} />
         <div className="space-y-6">
-          <AccountsSummary data={data} />
-          <CategoryBreakdown data={data} />
+          <AccountsSummary data={filteredData} />
+          <CategoryBreakdown data={filteredData} />
         </div>
       </div>
     </PageLayout>