feat: implement folder management and drag-and-drop functionality for accounts, enhancing organization and user experience

app/accounts/page.tsx

@@ -1,22 +1,61 @@
 "use client";
 
 import { useState } from "react";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  useDroppable,
+} from "@dnd-kit/core";
 import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
 import {
   AccountCard,
   AccountEditDialog,
   AccountBulkActions,
 } from "@/components/accounts";
+import {
+  FolderEditDialog,
+} from "@/components/folders";
 import { useBankingData } from "@/lib/hooks";
-import { updateAccount, deleteAccount } from "@/lib/store-db";
+import { updateAccount, deleteAccount, addFolder, updateFolder, deleteFolder } from "@/lib/store-db";
 import { Card, CardContent } from "@/components/ui/card";
-import { Building2, Folder } from "lucide-react";
+import { Button } from "@/components/ui/button";
-import type { Account } from "@/lib/types";
+import { Building2, Folder, Plus, List, LayoutGrid } from "lucide-react";
+import type { Account, Folder as FolderType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { getAccountBalance } from "@/lib/account-utils";
 
+// Composant wrapper pour les zones de drop des dossiers
+function FolderDropZone({
+  folderId,
+  children,
+}: {
+  folderId: string;
+  children: React.ReactNode;
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `folder-${folderId}`,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        isOver && "ring-2 ring-primary ring-offset-2 rounded-lg p-2"
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
 export default function AccountsPage() {
-  const { data, isLoading, refresh } = useBankingData();
+  const { data, isLoading, refresh, refreshSilent, update } = useBankingData();
   const [editingAccount, setEditingAccount] = useState<Account | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [selectedAccounts, setSelectedAccounts] = useState<Set<string>>(
@@ -30,6 +69,25 @@ export default function AccountsPage() {
     initialBalance: 0,
   });
 
+  // Folder management state
+  const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
+  const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
+  const [folderFormData, setFolderFormData] = useState({
+    name: "",
+    parentId: "folder-root" as string | null,
+    color: "#6366f1",
+  });
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [isCompactView, setIsCompactView] = useState(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
   if (isLoading || !data) {
     return <LoadingState />;
   }
@@ -125,6 +183,134 @@ export default function AccountsPage() {
     setSelectedAccounts(newSelected);
   };
 
+  // Folder management handlers
+  const handleNewFolder = () => {
+    setEditingFolder(null);
+    setFolderFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
+    setIsFolderDialogOpen(true);
+  };
+
+  const handleEditFolder = (folder: FolderType) => {
+    setEditingFolder(folder);
+    setFolderFormData({
+      name: folder.name,
+      parentId: folder.parentId || "folder-root",
+      color: folder.color,
+    });
+    setIsFolderDialogOpen(true);
+  };
+
+  const handleSaveFolder = async () => {
+    const parentId =
+      folderFormData.parentId === "folder-root" ? null : folderFormData.parentId;
+
+    try {
+      if (editingFolder) {
+        await updateFolder({
+          ...editingFolder,
+          name: folderFormData.name,
+          parentId,
+          color: folderFormData.color,
+        });
+      } else {
+        await addFolder({
+          name: folderFormData.name,
+          parentId,
+          color: folderFormData.color,
+          icon: "folder",
+        });
+      }
+      refresh();
+      setIsFolderDialogOpen(false);
+    } catch (error) {
+      console.error("Error saving folder:", error);
+      alert("Erreur lors de la sauvegarde du dossier");
+    }
+  };
+
+  const handleDeleteFolder = async (folderId: string) => {
+    if (
+      !confirm(
+        "Supprimer ce dossier ? Les comptes seront déplacés à la racine."
+      )
+    )
+      return;
+
+    try {
+      await deleteFolder(folderId);
+      refresh();
+    } catch (error) {
+      console.error("Error deleting folder:", error);
+      alert("Erreur lors de la suppression du dossier");
+    }
+  };
+
+  // Drag and drop handlers
+  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 || !data) 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 === "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) {
+        const account = data.accounts.find((a) => a.id === accountId);
+        if (!account) return;
+
+        // Sauvegarder l'état précédent pour rollback en cas d'erreur
+        const previousData = data;
+
+        // Optimistic update : mettre à jour immédiatement l'interface
+        const updatedAccount = {
+          ...account,
+          folderId: targetFolderId,
+        };
+        const updatedAccounts = data.accounts.map((a) =>
+          a.id === accountId ? updatedAccount : a
+        );
+        update({
+          ...data,
+          accounts: updatedAccounts,
+        });
+
+        // Faire la requête en arrière-plan
+        try {
+          await updateAccount(updatedAccount);
+          // Refresh silencieux pour synchroniser avec le serveur sans loader
+          refreshSilent();
+        } catch (error) {
+          console.error("Error moving account:", error);
+          // Rollback en cas d'erreur
+          update(previousData);
+          alert("Erreur lors du déplacement du compte");
+        }
+      }
+    }
+  };
+
 
   const getTransactionCount = (accountId: string) => {
     return data.transactions.filter((t) => t.accountId === accountId).length;
@@ -157,7 +343,27 @@ export default function AccountsPage() {
     <PageLayout>
       <PageHeader
         title="Comptes"
-        description="Gérez vos comptes bancaires"
+        description="Gérez vos comptes bancaires et leur organisation"
+        actions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setIsCompactView(!isCompactView)}
+              title={isCompactView ? "Vue détaillée" : "Vue compacte"}
+            >
+              {isCompactView ? (
+                <LayoutGrid className="w-4 h-4" />
+              ) : (
+                <List className="w-4 h-4" />
+              )}
+            </Button>
+            <Button onClick={handleNewFolder}>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouveau dossier
+            </Button>
+          </div>
+        }
         rightContent={
           <div className="text-right">
             <p className="text-sm text-muted-foreground">Solde total</p>
@@ -190,122 +396,178 @@ export default function AccountsPage() {
             selectedCount={selectedAccounts.size}
             onDelete={handleBulkDelete}
           />
-          <div className="space-y-6">
+          <DndContext
-            {/* Afficher d'abord les comptes sans dossier */}
+            sensors={sensors}
-            {accountsByFolder["no-folder"] &&
+            collisionDetection={closestCenter}
-              accountsByFolder["no-folder"].length > 0 && (
+            onDragStart={handleDragStart}
-                <div>
+            onDragEnd={handleDragEnd}
-                  <div className="flex items-center gap-2 mb-4">
+          >
-                    <Folder className="w-5 h-5 text-muted-foreground" />
+            <div className="space-y-6">
-                    <h2 className="text-lg font-semibold">Sans dossier</h2>
+              {/* Afficher d'abord les comptes sans dossier */}
-                    <span className="text-sm text-muted-foreground">
+              {accountsByFolder["no-folder"] &&
-                      ({accountsByFolder["no-folder"].length})
+                accountsByFolder["no-folder"].length > 0 && (
-                    </span>
+                  <FolderDropZone folderId="root">
-                    <span
+                    <div className="flex items-center gap-2 mb-4">
-                      className={cn(
+                      <Folder className="w-5 h-5 text-muted-foreground" />
-                        "text-sm font-semibold tabular-nums ml-auto",
+                      <h2 className="text-lg font-semibold">Sans dossier</h2>
-                        accountsByFolder["no-folder"].reduce(
+                      <span className="text-sm text-muted-foreground">
-                          (sum, a) => sum + getAccountBalance(a),
+                        ({accountsByFolder["no-folder"].length})
-                          0,
+                      </span>
-                        ) >= 0
+                      <span
-                          ? "text-emerald-600"
+                        className={cn(
-                          : "text-red-600",
+                          "text-sm font-semibold tabular-nums ml-auto",
-                      )}
+                          accountsByFolder["no-folder"].reduce(
-                    >
+                            (sum, a) => sum + getAccountBalance(a),
-                      {formatCurrency(
+                            0,
-                        accountsByFolder["no-folder"].reduce(
+                          ) >= 0
-                          (sum, a) => sum + getAccountBalance(a),
+                            ? "text-emerald-600"
-                          0,
+                            : "text-red-600",
-                        ),
+                        )}
-                      )}
+                      >
-                    </span>
+                        {formatCurrency(
-                  </div>
+                          accountsByFolder["no-folder"].reduce(
-                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                            (sum, a) => sum + getAccountBalance(a),
-                    {accountsByFolder["no-folder"].map((account) => {
+                            0,
-                      const folder = data.folders.find(
+                          ),
-                        (f) => f.id === account.folderId,
+                        )}
-                      );
+                      </span>
-
-                      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 + getAccountBalance(a),
-                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>
+                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    <span className="text-sm text-muted-foreground">
+                      {accountsByFolder["no-folder"].map((account) => {
-                      ({folderAccounts.length})
+                        const folder = data.folders.find(
-                    </span>
+                          (f) => f.id === account.folderId,
-                    <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 (
+                          return (
-                        <AccountCard
+                            <AccountCard
-                          key={account.id}
+                              key={account.id}
-                          account={account}
+                              account={account}
-                          folder={accountFolder}
+                              folder={folder}
-                          transactionCount={getTransactionCount(account.id)}
+                              transactionCount={getTransactionCount(account.id)}
-                          onEdit={handleEdit}
+                              onEdit={handleEdit}
-                          onDelete={handleDelete}
+                              onDelete={handleDelete}
-                          formatCurrency={formatCurrency}
+                              formatCurrency={formatCurrency}
-                          isSelected={selectedAccounts.has(account.id)}
+                              isSelected={selectedAccounts.has(account.id)}
-                          onSelect={toggleSelectAccount}
+                              onSelect={toggleSelectAccount}
+                              draggableId={`account-${account.id}`}
+                              compact={isCompactView}
+                            />
+                          );
+                      })}
+                    </div>
+                  </FolderDropZone>
+                )}
+
+              {/* Afficher les comptes groupés par folder */}
+              {rootFolders.map((folder) => {
+                const folderAccounts = accountsByFolder[folder.id] || [];
+                const folderBalance = folderAccounts.reduce(
+                  (sum, a) => sum + getAccountBalance(a),
+                  0,
+                );
+
+                return (
+                  <FolderDropZone key={folder.id} folderId={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>
-                  </div>
+                      <span className="text-sm text-muted-foreground">
+                        ({folderAccounts.length})
+                      </span>
+                      {folderAccounts.length > 0 && (
+                        <span
+                          className={cn(
+                            "text-sm font-semibold tabular-nums",
+                            folderBalance >= 0
+                              ? "text-emerald-600"
+                              : "text-red-600",
+                          )}
+                        >
+                          {formatCurrency(folderBalance)}
+                        </span>
+                      )}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEditFolder(folder)}
+                        className="ml-auto"
+                      >
+                        Modifier
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDeleteFolder(folder.id)}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        Supprimer
+                      </Button>
+                    </div>
+                    {folderAccounts.length > 0 ? (
+                      <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}
+                              draggableId={`account-${account.id}`}
+                              compact={isCompactView}
+                            />
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <Card>
+                        <CardContent className="flex flex-col items-center justify-center py-8">
+                          <Folder className="w-12 h-12 text-muted-foreground mb-2" />
+                          <p className="text-sm text-muted-foreground">
+                            Aucun compte dans ce dossier
+                          </p>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            Glissez-déposez un compte ici pour l'ajouter
+                          </p>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </FolderDropZone>
+                );
+              })}
+            </div>
+            <DragOverlay>
+              {activeId ? (
+                <div className="opacity-50">
+                  {activeId.startsWith("account-") ? (
+                    <Card>
+                      <CardContent className="p-4">
+                        {data.accounts.find(
+                          (a) => a.id === activeId.replace("account-", "")
+                        )?.name || ""}
+                      </CardContent>
+                    </Card>
+                  ) : null}
                 </div>
-              );
+              ) : null}
-            })}
+            </DragOverlay>
-          </div>
+          </DndContext>
         </>
       )}
 
@@ -317,6 +579,16 @@ export default function AccountsPage() {
         folders={data.folders}
         onSave={handleSave}
       />
+
+      <FolderEditDialog
+        open={isFolderDialogOpen}
+        onOpenChange={setIsFolderDialogOpen}
+        editingFolder={editingFolder}
+        formData={folderFormData}
+        onFormDataChange={setFolderFormData}
+        folders={data.folders}
+        onSave={handleSaveFolder}
+      />
     </PageLayout>
   );
 }

app/folders/page.tsx

@@ -1,338 +0,0 @@
-"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,
-  FolderEditDialog,
-  AccountFolderDialog,
-} from "@/components/folders";
-import { useBankingData } from "@/lib/hooks";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Plus } from "lucide-react";
-import {
-  addFolder,
-  updateFolder,
-  deleteFolder,
-  updateAccount,
-} from "@/lib/store-db";
-import type { Folder as FolderType, Account } from "@/lib/types";
-
-export default function FoldersPage() {
-  const { data, isLoading, refresh } = useBankingData();
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
-  const [formData, setFormData] = useState({
-    name: "",
-    parentId: "folder-root" as string | null,
-    color: "#6366f1",
-  });
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  // Account editing state
-  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false);
-  const [editingAccount, setEditingAccount] = useState<Account | null>(null);
-  const [accountFormData, setAccountFormData] = useState({
-    name: "",
-    type: "CHECKING" as Account["type"],
-    folderId: "folder-root",
-  });
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    })
-  );
-
-  if (isLoading || !data) {
-    return <LoadingState />;
-  }
-
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat("fr-FR", {
-      style: "currency",
-      currency: "EUR",
-    }).format(amount);
-  };
-
-  const rootFolders = data.folders.filter((f) => f.parentId === null);
-
-  const handleNewFolder = () => {
-    setEditingFolder(null);
-    setFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
-    setIsDialogOpen(true);
-  };
-
-  const handleEdit = (folder: FolderType) => {
-    setEditingFolder(folder);
-    setFormData({
-      name: folder.name,
-      parentId: folder.parentId || "folder-root",
-      color: folder.color,
-    });
-    setIsDialogOpen(true);
-  };
-
-  const handleSave = async () => {
-    const parentId =
-      formData.parentId === "folder-root" ? null : formData.parentId;
-
-    try {
-      if (editingFolder) {
-        await updateFolder({
-          ...editingFolder,
-          name: formData.name,
-          parentId,
-          color: formData.color,
-        });
-      } else {
-        await addFolder({
-          name: formData.name,
-          parentId,
-          color: formData.color,
-          icon: "folder",
-        });
-      }
-      refresh();
-      setIsDialogOpen(false);
-    } catch (error) {
-      console.error("Error saving folder:", error);
-      alert("Erreur lors de la sauvegarde du dossier");
-    }
-  };
-
-  const handleDelete = async (folderId: string) => {
-    if (
-      !confirm(
-        "Supprimer ce dossier ? Les comptes seront déplacés à la racine."
-      )
-    )
-      return;
-
-    try {
-      await deleteFolder(folderId);
-      refresh();
-    } catch (error) {
-      console.error("Error deleting folder:", error);
-      alert("Erreur lors de la suppression du dossier");
-    }
-  };
-
-  const handleEditAccount = (account: Account) => {
-    setEditingAccount(account);
-    setAccountFormData({
-      name: account.name,
-      type: account.type,
-      folderId: account.folderId || "folder-root",
-    });
-    setIsAccountDialogOpen(true);
-  };
-
-  const handleSaveAccount = async () => {
-    if (!editingAccount) return;
-
-    try {
-      await updateAccount({
-        ...editingAccount,
-        name: accountFormData.name,
-        type: accountFormData.type,
-        folderId:
-          accountFormData.folderId === "folder-root"
-            ? null
-            : accountFormData.folderId,
-      });
-      refresh();
-      setIsAccountDialogOpen(false);
-      setEditingAccount(null);
-    } catch (error) {
-      console.error("Error updating account:", error);
-      alert("Erreur lors de la mise à jour du compte");
-    }
-  };
-
-  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
-        title="Organisation"
-        description="Organisez vos comptes en dossiers"
-        actions={
-          <Button onClick={handleNewFolder}>
-            <Plus className="w-4 h-4 mr-2" />
-            Nouveau dossier
-          </Button>
-        }
-      />
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Arborescence des comptes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <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>
-
-      <FolderEditDialog
-        open={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        editingFolder={editingFolder}
-        formData={formData}
-        onFormDataChange={setFormData}
-        folders={data.folders}
-        onSave={handleSave}
-      />
-
-      <AccountFolderDialog
-        open={isAccountDialogOpen}
-        onOpenChange={setIsAccountDialogOpen}
-        formData={accountFormData}
-        onFormDataChange={setAccountFormData}
-        folders={data.folders}
-        onSave={handleSaveAccount}
-      />
-    </PageLayout>
-  );
-}

components/accounts/account-card.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,7 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { MoreVertical, Pencil, Trash2, ExternalLink } from "lucide-react";
+import { MoreVertical, Pencil, Trash2, ExternalLink, GripVertical } from "lucide-react";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import type { Account, Folder } from "@/lib/types";
@@ -25,6 +27,8 @@ interface AccountCardProps {
   formatCurrency: (amount: number) => string;
   isSelected?: boolean;
   onSelect?: (accountId: string, selected: boolean) => void;
+  draggableId?: string;
+  compact?: boolean;
 }
 
 export function AccountCard({
@@ -36,15 +40,49 @@ export function AccountCard({
   formatCurrency,
   isSelected = false,
   onSelect,
+  draggableId,
+  compact = false,
 }: AccountCardProps) {
   const Icon = accountTypeIcons[account.type];
   const realBalance = getAccountBalance(account);
 
-  return (
+  const {
-    <Card className={cn("relative", isSelected && "ring-2 ring-primary")}>
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: draggableId || `account-${account.id}`,
+    disabled: !draggableId,
+    data: {
+      type: "account",
+      account,
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const cardContent = (
+    <Card className={cn("relative", isSelected && "ring-2 ring-primary", isDragging && "bg-muted/80")}>
       <CardHeader className="pb-0">
         <div className="flex items-start justify-between">
           <div className="flex items-center gap-2 flex-1">
+            {draggableId && (
+              <button
+                {...attributes}
+                {...listeners}
+                className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <GripVertical className="w-4 h-4 text-muted-foreground" />
+              </button>
+            )}
             {onSelect && (
               <Checkbox
                 checked={isSelected}
@@ -59,13 +97,17 @@ export function AccountCard({
             </div>
             <div className="min-w-0">
               <CardTitle className="text-sm font-semibold truncate">{account.name}</CardTitle>
-              <p className="text-xs text-muted-foreground">
+              {!compact && (
-                {accountTypeLabels[account.type]}
+                <>
-              </p>
+                  <p className="text-xs text-muted-foreground">
-              {account.accountNumber && (
+                    {accountTypeLabels[account.type]}
-                <p className="text-xs text-muted-foreground mt-0.5 truncate">
+                  </p>
-                  {account.accountNumber}
+                  {account.accountNumber && (
-                </p>
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate">
+                      {account.accountNumber}
+                    </p>
+                  )}
+                </>
               )}
             </div>
           </div>
@@ -91,43 +133,74 @@ export function AccountCard({
           </DropdownMenu>
         </div>
       </CardHeader>
-      <CardContent className="pt-1">
+      <CardContent className={cn("pt-1", compact && "pt-0")}>
-        <div
+        <div className="flex items-center justify-between">
-          className={cn(
+          <div
-            "text-xl font-bold mb-1.5",
+            className={cn(
-            realBalance >= 0 ? "text-emerald-600" : "text-red-600"
+              compact ? "text-lg" : "text-xl",
+              "font-bold",
+              !compact && "mb-1.5",
+              realBalance >= 0 ? "text-emerald-600" : "text-red-600"
+            )}
+          >
+            {formatCurrency(realBalance)}
+          </div>
+          {compact && (
+            <Link
+              href={`/transactions?accountId=${account.id}`}
+              className="text-xs text-muted-foreground hover:text-primary hover:underline"
+            >
+              {transactionCount} transactions
+            </Link>
           )}
-        >
-          {formatCurrency(realBalance)}
         </div>
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
+        {!compact && (
-          <Link
+          <>
-            href={`/transactions?accountId=${account.id}`}
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
-            className="hover:text-primary hover:underline truncate"
+              <Link
-          >
+                href={`/transactions?accountId=${account.id}`}
-            {transactionCount} transactions
+                className="hover:text-primary hover:underline truncate"
-          </Link>
+              >
-          {folder && <span className="truncate ml-2">{folder.name}</span>}
+                {transactionCount} transactions
-        </div>
+              </Link>
-        {account.lastImport && (
+              {folder && <span className="truncate ml-2">{folder.name}</span>}
-          <p className="text-xs text-muted-foreground mt-1.5">
+            </div>
-            Dernier import:{" "}
+            {account.initialBalance !== undefined && account.initialBalance !== null && (
-            {new Date(account.lastImport).toLocaleDateString("fr-FR")}
+              <p className="text-xs text-muted-foreground mt-1.5">
-          </p>
+                Solde initial: {formatCurrency(account.initialBalance)}
-        )}
+              </p>
-        {account.externalUrl && (
+            )}
-          <a
+            {account.lastImport && (
-            href={account.externalUrl}
+              <p className="text-xs text-muted-foreground mt-1.5">
-            target="_blank"
+                Dernier import:{" "}
-            rel="noopener noreferrer"
+                {new Date(account.lastImport).toLocaleDateString("fr-FR")}
-            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1.5"
+              </p>
-          >
+            )}
-            <ExternalLink className="w-3 h-3" />
+            {account.externalUrl && (
-            Accéder au portail banque
+              <a
-          </a>
+                href={account.externalUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1.5"
+              >
+                <ExternalLink className="w-3 h-3" />
+                Accéder au portail banque
+              </a>
+            )}
+          </>
         )}
       </CardContent>
     </Card>
   );
+
+  if (draggableId) {
+    return (
+      <div ref={setNodeRef} style={style}>
+        {cardContent}
+      </div>
+    );
+  }
+
+  return cardContent;
 }
 

components/dashboard/sidebar.tsx

@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button";
 import {
   LayoutDashboard,
   Wallet,
-  FolderTree,
   Tags,
   BarChart3,
   Upload,
@@ -24,7 +23,6 @@ import { toast } from "sonner";
 const navItems = [
   { href: "/", label: "Tableau de bord", icon: LayoutDashboard },
   { href: "/accounts", label: "Comptes", icon: Wallet },
-  { href: "/folders", label: "Organisation", icon: FolderTree },
   { href: "/transactions", label: "Transactions", icon: Upload },
   { href: "/categories", label: "Catégories", icon: Tags },
   { href: "/rules", label: "Règles", icon: Wand2 },

lib/hooks.ts

@@ -31,12 +31,21 @@ export function useBankingData() {
     fetchData();
   }, [fetchData]);
 
+  const refreshSilent = useCallback(async () => {
+    try {
+      const fetchedData = await loadData();
+      setData(fetchedData);
+    } catch (err) {
+      console.error("Error silently refreshing banking data:", err);
+    }
+  }, []);
+
   const update = useCallback((newData: BankingData) => {
     // Optimistic update - the actual save happens in individual operations
     setData(newData);
   }, []);
 
-  return { data, isLoading, error, refresh, update };
+  return { data, isLoading, error, refresh, refreshSilent, update };
 }
 
 export function useLocalStorage<T>(key: string, initialValue: T) {