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

components/folders/draggable-account-item.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button } from "@/components/ui/button";
+import { Building2, GripVertical, Pencil } from "lucide-react";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import type { Account } from "@/lib/types";
+
+interface DraggableAccountItemProps {
+  account: Account;
+  onEditAccount: (account: Account) => void;
+  formatCurrency: (amount: number) => string;
+}
+
+export function DraggableAccountItem({
+  account,
+  onEditAccount,
+  formatCurrency,
+}: DraggableAccountItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `account-${account.id}`,
+    data: {
+      type: "account",
+      account,
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group ml-12",
+        isDragging && "bg-muted/80"
+      )}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
+      >
+        <GripVertical className="w-4 h-4 text-muted-foreground" />
+      </button>
+      <Building2 className="w-4 h-4 text-muted-foreground" />
+      <Link
+        href={`/transactions?accountId=${account.id}`}
+        className="flex-1 text-sm hover:text-primary hover:underline truncate"
+      >
+        {account.name}
+        {account.accountNumber && (
+          <span className="text-muted-foreground">
+            {" "}({account.accountNumber})
+          </span>
+        )}
+      </Link>
+      <span
+        className={cn(
+          "text-sm tabular-nums",
+          account.balance >= 0 ? "text-emerald-600" : "text-red-600"
+        )}
+      >
+        {formatCurrency(account.balance)}
+      </span>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 opacity-0 group-hover:opacity-100"
+        onClick={() => onEditAccount(account)}
+      >
+        <Pencil className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}
+

components/folders/draggable-folder-item.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  MoreVertical,
+  Pencil,
+  Trash2,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  GripVertical,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Folder as FolderType, Account } from "@/lib/types";
+
+interface DraggableFolderItemProps {
+  folder: FolderType;
+  accounts?: Account[];
+  allFolders?: FolderType[];
+  level: number;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEdit: (folder: FolderType) => void;
+  onDelete: (folderId: string) => void;
+  onEditAccount?: (account: Account) => void;
+  formatCurrency: (amount: number) => string;
+  folderAccounts: Account[];
+  childFolders: FolderType[];
+  folderTotal: number;
+}
+
+export function DraggableFolderItem({
+  folder,
+  level,
+  isExpanded,
+  onToggleExpand,
+  onEdit,
+  onDelete,
+  formatCurrency,
+  folderAccounts,
+  childFolders,
+  folderTotal,
+}: DraggableFolderItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `folder-${folder.id}`,
+    data: {
+      type: "folder",
+      folder,
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <div
+        className={cn(
+          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
+          level > 0 && "ml-6",
+          isDragging && "bg-muted/80"
+        )}
+      >
+        <button
+          {...attributes}
+          {...listeners}
+          className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
+        >
+          <GripVertical className="w-4 h-4 text-muted-foreground" />
+        </button>
+        <button
+          onClick={onToggleExpand}
+          className="p-1 hover:bg-muted rounded"
+          disabled={folderAccounts.length === 0 && childFolders.length === 0}
+        >
+          {folderAccounts.length > 0 || childFolders.length > 0 ? (
+            isExpanded ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-muted-foreground" />
+            )
+          ) : (
+            <div className="w-4 h-4" />
+          )}
+        </button>
+
+        <div
+          className="w-6 h-6 rounded flex items-center justify-center"
+          style={{ backgroundColor: `${folder.color}20` }}
+        >
+          {isExpanded ? (
+            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
+          ) : (
+            <Folder className="w-4 h-4" style={{ color: folder.color }} />
+          )}
+        </div>
+
+        <span className="flex-1 font-medium text-sm">{folder.name}</span>
+
+        {folderAccounts.length > 0 && (
+          <span
+            className={cn(
+              "text-sm font-semibold tabular-nums",
+              folderTotal >= 0 ? "text-emerald-600" : "text-red-600"
+            )}
+          >
+            {formatCurrency(folderTotal)}
+          </span>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 opacity-0 group-hover:opacity-100"
+            >
+              <MoreVertical className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onEdit(folder)}>
+              <Pencil className="w-4 h-4 mr-2" />
+              Modifier
+            </DropdownMenuItem>
+            {folder.id !== "folder-root" && (
+              <DropdownMenuItem
+                onClick={() => onDelete(folder.id)}
+                className="text-red-600"
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Supprimer
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+

components/folders/folder-tree-item.tsx

@@ -1,25 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  MoreVertical,
-  Pencil,
-  Trash2,
-  Folder,
-  FolderOpen,
-  ChevronRight,
-  ChevronDown,
-  Building2,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { DraggableFolderItem } from "./draggable-folder-item";
+import { DraggableAccountItem } from "./draggable-account-item";
 import type { Folder as FolderType, Account } from "@/lib/types";
 
 interface FolderTreeItemProps {
@@ -52,120 +35,35 @@ export function FolderTreeItem({
       (folder.id === "folder-root" && a.folderId === null)
   );
   const childFolders = allFolders.filter((f) => f.parentId === folder.id);
-  const hasChildren = childFolders.length > 0 || folderAccounts.length > 0;
-
   const folderTotal = folderAccounts.reduce((sum, a) => sum + a.balance, 0);
 
   return (
     <div>
-      <div
-        className={cn(
-          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
-          level > 0 && "ml-6"
-        )}
-      >
-        <button
-          onClick={() => setIsExpanded(!isExpanded)}
-          className="p-1 hover:bg-muted rounded"
-          disabled={!hasChildren}
-        >
-          {hasChildren ? (
-            isExpanded ? (
-              <ChevronDown className="w-4 h-4 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="w-4 h-4 text-muted-foreground" />
-            )
-          ) : (
-            <div className="w-4 h-4" />
-          )}
-        </button>
-
-        <div
-          className="w-6 h-6 rounded flex items-center justify-center"
-          style={{ backgroundColor: `${folder.color}20` }}
-        >
-          {isExpanded ? (
-            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
-          ) : (
-            <Folder className="w-4 h-4" style={{ color: folder.color }} />
-          )}
-        </div>
-
-        <span className="flex-1 font-medium text-sm">{folder.name}</span>
-
-        {folderAccounts.length > 0 && (
-          <span
-            className={cn(
-              "text-sm font-semibold tabular-nums",
-              folderTotal >= 0 ? "text-emerald-600" : "text-red-600"
-            )}
-          >
-            {formatCurrency(folderTotal)}
-          </span>
-        )}
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 opacity-0 group-hover:opacity-100"
-            >
-              <MoreVertical className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onEdit(folder)}>
-              <Pencil className="w-4 h-4 mr-2" />
-              Modifier
-            </DropdownMenuItem>
-            {folder.id !== "folder-root" && (
-              <DropdownMenuItem
-                onClick={() => onDelete(folder.id)}
-                className="text-red-600"
-              >
-                <Trash2 className="w-4 h-4 mr-2" />
-                Supprimer
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+      <DraggableFolderItem
+        folder={folder}
+        accounts={accounts}
+        allFolders={allFolders}
+        level={level}
+        isExpanded={isExpanded}
+        onToggleExpand={() => setIsExpanded(!isExpanded)}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        onEditAccount={onEditAccount}
+        formatCurrency={formatCurrency}
+        folderAccounts={folderAccounts}
+        childFolders={childFolders}
+        folderTotal={folderTotal}
+      />
 
       {isExpanded && (
         <div>
           {folderAccounts.map((account) => (
-            <div
+            <DraggableAccountItem
               key={account.id}
-              className={cn(
-                "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
-                "ml-12"
-              )}
-            >
-              <Building2 className="w-4 h-4 text-muted-foreground" />
-              <Link
-                href={`/transactions?accountId=${account.id}`}
-                className="flex-1 text-sm hover:text-primary hover:underline"
-              >
-                {account.name}
-              </Link>
-              <span
-                className={cn(
-                  "text-sm tabular-nums",
-                  account.balance >= 0 ? "text-emerald-600" : "text-red-600"
-                )}
-              >
-                {formatCurrency(account.balance)}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 opacity-0 group-hover:opacity-100"
-                onClick={() => onEditAccount(account)}
-              >
-                <Pencil className="w-4 h-4" />
-              </Button>
-            </div>
+              account={account}
+              onEditAccount={onEditAccount}
+              formatCurrency={formatCurrency}
+            />
           ))}
 
           {childFolders.map((child) => (

components/folders/index.ts

@@ -1,5 +1,7 @@
 export { FolderTreeItem } from "./folder-tree-item";
 export { FolderEditDialog } from "./folder-edit-dialog";
 export { AccountFolderDialog } from "./account-folder-dialog";
+export { DraggableFolderItem } from "./draggable-folder-item";
+export { DraggableAccountItem } from "./draggable-account-item";
 export { folderColors, accountTypeLabels } from "./constants";