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,38 +20,86 @@ 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[]> = {};
     
-  if (data.accounts.length === 0) {
+    data.accounts.forEach((account) => {
-    return (
+      const folderId = account.folderId || "no-folder";
-      <Card>
+      if (!grouped[folderId]) {
-        <CardHeader>
+        grouped[folderId] = [];
-          <CardTitle>Mes Comptes</CardTitle>
+      }
-        </CardHeader>
+      grouped[folderId].push(account);
-        <CardContent>
+    });
-          <div className="flex flex-col items-center justify-center py-8 text-center">
+
-            <Building2 className="w-12 h-12 text-muted-foreground mb-3" />
+    // Sort accounts within each folder by name
-            <p className="text-muted-foreground">Aucun compte</p>
+    Object.keys(grouped).forEach((folderId) => {
-            <p className="text-sm text-muted-foreground mt-1">
+      grouped[folderId].sort((a, b) => a.name.localeCompare(b.name));
-              Importez un fichier OFX pour ajouter un compte
+    });
-            </p>
+
-          </div>
+    return grouped;
-        </CardContent>
+  }, [data.accounts]);
-      </Card>
+
+  // 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 (
-    <Card>
+      <div key={folder.id} className={level > 0 ? "mt-4" : ""}>
-      <CardHeader>
+        {/* Folder header */}
-        <CardTitle>Mes Comptes</CardTitle>
+        <div className="flex items-center gap-2 mb-3">
-      </CardHeader>
+          <FolderIcon className="w-4 h-4 text-muted-foreground" />
-      <CardContent>
+          <h3 className={cn("font-semibold text-sm", level > 0 && "text-muted-foreground")}>
-        <div className="space-y-4">
+            {folder.name}
-          {data.accounts.map((account) => {
+          </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)
@@ -88,6 +137,117 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
               );
             })}
           </div>
+        )}
+
+        {/* Child folders */}
+        {childFolders.map((childFolder) =>
+          renderFolderSection(childFolder, level + 1),
+        )}
+      </div>
+    );
+  };
+
+  if (data.accounts.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Mes Comptes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <Building2 className="w-12 h-12 text-muted-foreground mb-3" />
+            <p className="text-muted-foreground">Aucun compte</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Importez un fichier OFX pour ajouter un compte
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  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-6">
+          {/* Accounts without folder */}
+          {orphanAccounts.length > 0 && (
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <FolderIcon className="w-4 h-4 text-muted-foreground" />
+                <h3 className="font-semibold text-sm">Sans dossier</h3>
+                <span className="text-xs text-muted-foreground">
+                  ({orphanAccounts.length})
+                </span>
+                {orphanTotal !== 0 && (
+                  <span
+                    className={cn(
+                      "text-xs font-semibold tabular-nums ml-auto",
+                      orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
+                    )}
+                  >
+                    {formatCurrency(orphanTotal)}
+                  </span>
+                )}
+              </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>
   );