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} />
+          <AccountsSummary data={filteredData} />
-          <CategoryBreakdown data={data} />
+          <CategoryBreakdown data={filteredData} />
         </div>
       </div>
     </PageLayout>

components/dashboard/accounts-summary.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import type { BankingData } from "@/lib/types";
+import type { BankingData, Account, Folder } from "@/lib/types";
 import { cn } from "@/lib/utils";
-import { Building2 } from "lucide-react";
+import { Building2, Folder as FolderIcon } from "lucide-react";
 import { getAccountBalance } from "@/lib/account-utils";
 
 interface AccountsSummaryProps {
@@ -19,9 +20,132 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
     }).format(amount);
   };
 
-  const totalPositive = data.accounts
+  // Group accounts by folder
-    .filter((a) => getAccountBalance(a) > 0)
+  const accountsByFolder = useMemo(() => {
-    .reduce((sum, a) => sum + getAccountBalance(a), 0);
+    const grouped: Record<string, Account[]> = {};
+    
+    data.accounts.forEach((account) => {
+      const folderId = account.folderId || "no-folder";
+      if (!grouped[folderId]) {
+        grouped[folderId] = [];
+      }
+      grouped[folderId].push(account);
+    });
+
+    // Sort accounts within each folder by name
+    Object.keys(grouped).forEach((folderId) => {
+      grouped[folderId].sort((a, b) => a.name.localeCompare(b.name));
+    });
+
+    return grouped;
+  }, [data.accounts]);
+
+  // Get root folders (folders without parent) sorted by name
+  const rootFolders = useMemo(() => {
+    return data.folders
+      .filter((f) => !f.parentId)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [data.folders]);
+
+  // Helper to get child folders recursively
+  const getChildFolders = (parentId: string): Folder[] => {
+    return data.folders
+      .filter((f) => f.parentId === parentId)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  };
+
+  // Render folder section recursively
+  const renderFolderSection = (folder: Folder, level: number = 0) => {
+    const folderAccounts = accountsByFolder[folder.id] || [];
+    const childFolders = getChildFolders(folder.id);
+    const folderTotal = folderAccounts.reduce(
+      (sum, a) => sum + getAccountBalance(a),
+      0,
+    );
+
+    if (folderAccounts.length === 0 && childFolders.length === 0) {
+      return null;
+    }
+
+    return (
+      <div key={folder.id} className={level > 0 ? "mt-4" : ""}>
+        {/* Folder header */}
+        <div className="flex items-center gap-2 mb-3">
+          <FolderIcon className="w-4 h-4 text-muted-foreground" />
+          <h3 className={cn("font-semibold text-sm", level > 0 && "text-muted-foreground")}>
+            {folder.name}
+          </h3>
+          {folderAccounts.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              ({folderAccounts.length})
+            </span>
+          )}
+          {folderTotal !== 0 && (
+            <span
+              className={cn(
+                "text-xs font-semibold tabular-nums ml-auto",
+                folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatCurrency(folderTotal)}
+            </span>
+          )}
+        </div>
+
+        {/* Accounts in this folder */}
+        {folderAccounts.length > 0 && (
+          <div className={cn("space-y-3", level > 0 && "ml-4")}>
+            {folderAccounts.map((account) => {
+              const realBalance = getAccountBalance(account);
+              const totalPositive = data.accounts
+                .filter((a) => getAccountBalance(a) > 0)
+                .reduce((sum, a) => sum + getAccountBalance(a), 0);
+              const percentage =
+                totalPositive > 0
+                  ? Math.max(0, (realBalance / totalPositive) * 100)
+                  : 0;
+
+              return (
+                <div key={account.id} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                        <Building2 className="w-4 h-4 text-primary" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-sm">{account.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {account.accountNumber}
+                        </p>
+                      </div>
+                    </div>
+                    <span
+                      className={cn(
+                        "font-semibold tabular-nums",
+                        realBalance >= 0
+                          ? "text-emerald-600"
+                          : "text-red-600",
+                      )}
+                    >
+                      {formatCurrency(realBalance)}
+                    </span>
+                  </div>
+                  {realBalance > 0 && (
+                    <Progress value={percentage} className="h-1.5" />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Child folders */}
+        {childFolders.map((childFolder) =>
+          renderFolderSection(childFolder, level + 1),
+        )}
+      </div>
+    );
+  };
 
   if (data.accounts.length === 0) {
     return (
@@ -42,51 +166,87 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
     );
   }
 
+  const orphanAccounts = accountsByFolder["no-folder"] || [];
+  const orphanTotal = orphanAccounts.reduce(
+    (sum, a) => sum + getAccountBalance(a),
+    0,
+  );
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Mes Comptes</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className="space-y-6">
-          {data.accounts.map((account) => {
+          {/* Accounts without folder */}
-            const realBalance = getAccountBalance(account);
+          {orphanAccounts.length > 0 && (
-            const percentage =
+            <div>
-              totalPositive > 0
+              <div className="flex items-center gap-2 mb-3">
-                ? Math.max(0, (realBalance / totalPositive) * 100)
+                <FolderIcon className="w-4 h-4 text-muted-foreground" />
-                : 0;
+                <h3 className="font-semibold text-sm">Sans dossier</h3>
-
+                <span className="text-xs text-muted-foreground">
-            return (
+                  ({orphanAccounts.length})
-              <div key={account.id} className="space-y-2">
+                </span>
-                <div className="flex items-center justify-between">
+                {orphanTotal !== 0 && (
-                  <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
-                      <Building2 className="w-4 h-4 text-primary" />
-                    </div>
-                    <div>
-                      <p className="font-medium text-sm">{account.name}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {account.accountNumber}
-                      </p>
-                    </div>
-                  </div>
                   <span
                     className={cn(
-                      "font-semibold tabular-nums",
+                      "text-xs font-semibold tabular-nums ml-auto",
-                      realBalance >= 0
+                      orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
-                        ? "text-emerald-600"
-                        : "text-red-600",
                     )}
                   >
-                    {formatCurrency(realBalance)}
+                    {formatCurrency(orphanTotal)}
                   </span>
-                </div>
-                {realBalance > 0 && (
-                  <Progress value={percentage} className="h-1.5" />
                 )}
               </div>
-            );
+              <div className="space-y-3">
-          })}
+                {orphanAccounts.map((account) => {
+                  const realBalance = getAccountBalance(account);
+                  const totalPositive = data.accounts
+                    .filter((a) => getAccountBalance(a) > 0)
+                    .reduce((sum, a) => sum + getAccountBalance(a), 0);
+                  const percentage =
+                    totalPositive > 0
+                      ? Math.max(0, (realBalance / totalPositive) * 100)
+                      : 0;
+
+                  return (
+                    <div key={account.id} className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                            <Building2 className="w-4 h-4 text-primary" />
+                          </div>
+                          <div>
+                            <p className="font-medium text-sm">{account.name}</p>
+                            <p className="text-xs text-muted-foreground">
+                              {account.accountNumber}
+                            </p>
+                          </div>
+                        </div>
+                        <span
+                          className={cn(
+                            "font-semibold tabular-nums",
+                            realBalance >= 0
+                              ? "text-emerald-600"
+                              : "text-red-600",
+                          )}
+                        >
+                          {formatCurrency(realBalance)}
+                        </span>
+                      </div>
+                      {realBalance > 0 && (
+                        <Progress value={percentage} className="h-1.5" />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Folders */}
+          {rootFolders.map((folder) => renderFolderSection(folder))}
         </div>
       </CardContent>
     </Card>