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

app/folders/page.tsx

@@ -1,6 +1,17 @@
 "use client";
 
 import { useState } from "react";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
 import {
   FolderTreeItem,
@@ -28,6 +39,7 @@ export default function FoldersPage() {
     parentId: "folder-root" as string | null,
     color: "#6366f1",
   });
+  const [activeId, setActiveId] = useState<string | null>(null);
 
   // Account editing state
   const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false);
@@ -38,6 +50,14 @@ export default function FoldersPage() {
     folderId: "folder-root",
   });
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
   if (isLoading || !data) {
     return <LoadingState />;
   }
@@ -144,6 +164,87 @@ export default function FoldersPage() {
     }
   };
 
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+
+    if (!over || active.id === over.id) return;
+
+    const activeId = active.id as string;
+    const overId = over.id as string;
+
+    // Déplacer un compte vers un dossier
+    if (activeId.startsWith("account-")) {
+      const accountId = activeId.replace("account-", "");
+      let targetFolderId: string | null = null;
+
+      if (overId.startsWith("folder-")) {
+        const folderId = overId.replace("folder-", "");
+        targetFolderId = folderId === "folder-root" ? null : folderId;
+      } else if (overId.startsWith("account-")) {
+        // Déplacer vers le dossier du compte cible
+        const targetAccountId = overId.replace("account-", "");
+        const targetAccount = data.accounts.find((a) => a.id === targetAccountId);
+        if (targetAccount) {
+          targetFolderId = targetAccount.folderId;
+        }
+      }
+
+      if (targetFolderId !== undefined) {
+        try {
+          const account = data.accounts.find((a) => a.id === accountId);
+          if (account) {
+            await updateAccount({
+              ...account,
+              folderId: targetFolderId,
+            });
+            refresh();
+          }
+        } catch (error) {
+          console.error("Error moving account:", error);
+          alert("Erreur lors du déplacement du compte");
+        }
+      }
+    }
+
+    // Déplacer un dossier vers un autre dossier (changer le parent)
+    if (activeId.startsWith("folder-") && overId.startsWith("folder-")) {
+      const folderId = activeId.replace("folder-", "");
+      const targetFolderId = overId.replace("folder-", "");
+
+      // Empêcher de déplacer un dossier dans lui-même ou ses enfants
+      const folder = data.folders.find((f) => f.id === folderId);
+      if (!folder) return;
+
+      const isDescendant = (parentId: string, childId: string): boolean => {
+        const child = data.folders.find((f) => f.id === childId);
+        if (!child || !child.parentId) return false;
+        if (child.parentId === parentId) return true;
+        return isDescendant(parentId, child.parentId);
+      };
+
+      if (folderId === targetFolderId || isDescendant(folderId, targetFolderId)) {
+        return; // Ne pas permettre de déplacer un dossier dans lui-même ou ses descendants
+      }
+
+      try {
+        const newParentId = targetFolderId === "folder-root" ? null : targetFolderId;
+        await updateFolder({
+          ...folder,
+          parentId: newParentId,
+        });
+        refresh();
+      } catch (error) {
+        console.error("Error moving folder:", error);
+        alert("Erreur lors du déplacement du dossier");
+      }
+    }
+  };
+
   return (
     <PageLayout>
       <PageHeader
@@ -162,21 +263,55 @@ export default function FoldersPage() {
           <CardTitle>Arborescence des comptes</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="space-y-1">
-            {rootFolders.map((folder) => (
-              <FolderTreeItem
-                key={folder.id}
-                folder={folder}
-                accounts={data.accounts}
-                allFolders={data.folders}
-                level={0}
-                onEdit={handleEdit}
-                onDelete={handleDelete}
-                onEditAccount={handleEditAccount}
-                formatCurrency={formatCurrency}
-              />
-            ))}
-          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={[
+                ...rootFolders.map((f) => `folder-${f.id}`),
+                ...data.accounts.map((a) => `account-${a.id}`),
+              ]}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-1">
+                {rootFolders.map((folder) => (
+                  <FolderTreeItem
+                    key={folder.id}
+                    folder={folder}
+                    accounts={data.accounts}
+                    allFolders={data.folders}
+                    level={0}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    onEditAccount={handleEditAccount}
+                    formatCurrency={formatCurrency}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+            <DragOverlay>
+              {activeId ? (
+                <div className="opacity-50">
+                  {activeId.startsWith("account-") ? (
+                    <div className="p-2 bg-muted rounded">
+                      {data.accounts.find(
+                        (a) => a.id === activeId.replace("account-", "")
+                      )?.name || ""}
+                    </div>
+                  ) : (
+                    <div className="p-2 bg-muted rounded">
+                      {data.folders.find(
+                        (f) => f.id === activeId.replace("folder-", "")
+                      )?.name || ""}
+                    </div>
+                  )}
+                </div>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
         </CardContent>
       </Card>