feat: implement bulk account deletion and enhance account management with folder organization and drag-and-drop functionality

app/accounts/page.tsx

@@ -2,11 +2,15 @@
 
 import { useState } from "react";
 import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
-import { AccountCard, AccountEditDialog } from "@/components/accounts";
+import {
+  AccountCard,
+  AccountEditDialog,
+  AccountBulkActions,
+} from "@/components/accounts";
 import { useBankingData } from "@/lib/hooks";
 import { updateAccount, deleteAccount } from "@/lib/store-db";
 import { Card, CardContent } from "@/components/ui/card";
-import { Building2 } from "lucide-react";
+import { Building2, Folder } from "lucide-react";
 import type { Account } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -14,6 +18,9 @@ export default function AccountsPage() {
   const { data, isLoading, refresh } = useBankingData();
   const [editingAccount, setEditingAccount] = useState<Account | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedAccounts, setSelectedAccounts] = useState<Set<string>>(
+    new Set(),
+  );
   const [formData, setFormData] = useState({
     name: "",
     type: "CHECKING" as Account["type"],
@@ -76,12 +83,69 @@ export default function AccountsPage() {
     }
   };
 
+  const handleBulkDelete = async () => {
+    const count = selectedAccounts.size;
+    if (
+      !confirm(
+        `Supprimer ${count} compte${count > 1 ? "s" : ""} et toutes leurs transactions ?`,
+      )
+    )
+      return;
+
+    try {
+      const ids = Array.from(selectedAccounts);
+      const response = await fetch(
+        `/api/banking/accounts?ids=${ids.join(",")}`,
+        {
+          method: "DELETE",
+        },
+      );
+      if (!response.ok) {
+        throw new Error("Failed to delete accounts");
+      }
+      setSelectedAccounts(new Set());
+      refresh();
+    } catch (error) {
+      console.error("Error deleting accounts:", error);
+      alert("Erreur lors de la suppression des comptes");
+    }
+  };
+
+  const toggleSelectAccount = (accountId: string, selected: boolean) => {
+    const newSelected = new Set(selectedAccounts);
+    if (selected) {
+      newSelected.add(accountId);
+    } else {
+      newSelected.delete(accountId);
+    }
+    setSelectedAccounts(newSelected);
+  };
+
+
   const getTransactionCount = (accountId: string) => {
     return data.transactions.filter((t) => t.accountId === accountId).length;
   };
 
   const totalBalance = data.accounts.reduce((sum, a) => sum + a.balance, 0);
 
+  // Grouper les comptes par folder
+  const accountsByFolder = data.accounts.reduce(
+    (acc, account) => {
+      const folderId = account.folderId || "no-folder";
+      if (!acc[folderId]) {
+        acc[folderId] = [];
+      }
+      acc[folderId].push(account);
+      return acc;
+    },
+    {} as Record<string, Account[]>,
+  );
+
+  // Obtenir les folders racine (sans parent) et les trier par nom
+  const rootFolders = data.folders
+    .filter((f) => !f.parentId)
+    .sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <PageLayout>
       <PageHeader
@@ -114,23 +178,110 @@ export default function AccountsPage() {
           </CardContent>
         </Card>
       ) : (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {data.accounts.map((account) => {
-            const folder = data.folders.find((f) => f.id === account.folderId);
+        <>
+          <AccountBulkActions
+            selectedCount={selectedAccounts.size}
+            onDelete={handleBulkDelete}
+          />
+          <div className="space-y-6">
+            {/* Afficher d'abord les comptes sans dossier */}
+            {accountsByFolder["no-folder"] &&
+              accountsByFolder["no-folder"].length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2 mb-4">
+                    <Folder className="w-5 h-5 text-muted-foreground" />
+                    <h2 className="text-lg font-semibold">Sans dossier</h2>
+                    <span className="text-sm text-muted-foreground">
+                      ({accountsByFolder["no-folder"].length})
+                    </span>
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {accountsByFolder["no-folder"].map((account) => {
+                      const folder = data.folders.find(
+                        (f) => f.id === account.folderId,
+                      );
 
-            return (
-              <AccountCard
-                key={account.id}
-                account={account}
-                folder={folder}
-                transactionCount={getTransactionCount(account.id)}
-                onEdit={handleEdit}
-                onDelete={handleDelete}
-                formatCurrency={formatCurrency}
-              />
-            );
-          })}
-        </div>
+                      return (
+                        <AccountCard
+                          key={account.id}
+                          account={account}
+                          folder={folder}
+                          transactionCount={getTransactionCount(account.id)}
+                          onEdit={handleEdit}
+                          onDelete={handleDelete}
+                          formatCurrency={formatCurrency}
+                          isSelected={selectedAccounts.has(account.id)}
+                          onSelect={toggleSelectAccount}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+            {/* Afficher les comptes groupés par folder */}
+            {rootFolders.map((folder) => {
+              const folderAccounts = accountsByFolder[folder.id] || [];
+              if (folderAccounts.length === 0) return null;
+
+              const folderBalance = folderAccounts.reduce(
+                (sum, a) => sum + a.balance,
+                0,
+              );
+
+              return (
+                <div key={folder.id}>
+                  <div className="flex items-center gap-2 mb-4">
+                    <div
+                      className="w-5 h-5 rounded flex items-center justify-center"
+                      style={{ backgroundColor: `${folder.color}20` }}
+                    >
+                      <Folder
+                        className="w-4 h-4"
+                        style={{ color: folder.color }}
+                      />
+                    </div>
+                    <h2 className="text-lg font-semibold">{folder.name}</h2>
+                    <span className="text-sm text-muted-foreground">
+                      ({folderAccounts.length})
+                    </span>
+                    <span
+                      className={cn(
+                        "text-sm font-semibold tabular-nums ml-auto",
+                        folderBalance >= 0
+                          ? "text-emerald-600"
+                          : "text-red-600",
+                      )}
+                    >
+                      {formatCurrency(folderBalance)}
+                    </span>
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {folderAccounts.map((account) => {
+                      const accountFolder = data.folders.find(
+                        (f) => f.id === account.folderId,
+                      );
+
+                      return (
+                        <AccountCard
+                          key={account.id}
+                          account={account}
+                          folder={accountFolder}
+                          transactionCount={getTransactionCount(account.id)}
+                          onEdit={handleEdit}
+                          onDelete={handleDelete}
+                          formatCurrency={formatCurrency}
+                          isSelected={selectedAccounts.has(account.id)}
+                          onSelect={toggleSelectAccount}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </>
       )}
 
       <AccountEditDialog