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

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 (
-    <Card className={cn("relative", isSelected && "ring-2 ring-primary")}>
+  const {
+    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">
-                {accountTypeLabels[account.type]}
-              </p>
-              {account.accountNumber && (
-                <p className="text-xs text-muted-foreground mt-0.5 truncate">
-                  {account.accountNumber}
-                </p>
+              {!compact && (
+                <>
+                  <p className="text-xs text-muted-foreground">
+                    {accountTypeLabels[account.type]}
+                  </p>
+                  {account.accountNumber && (
+                    <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">
-        <div
-          className={cn(
-            "text-xl font-bold mb-1.5",
-            realBalance >= 0 ? "text-emerald-600" : "text-red-600"
+      <CardContent className={cn("pt-1", compact && "pt-0")}>
+        <div className="flex items-center justify-between">
+          <div
+            className={cn(
+              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">
-          <Link
-            href={`/transactions?accountId=${account.id}`}
-            className="hover:text-primary hover:underline truncate"
-          >
-            {transactionCount} transactions
-          </Link>
-          {folder && <span className="truncate ml-2">{folder.name}</span>}
-        </div>
-        {account.lastImport && (
-          <p className="text-xs text-muted-foreground mt-1.5">
-            Dernier import:{" "}
-            {new Date(account.lastImport).toLocaleDateString("fr-FR")}
-          </p>
-        )}
-        {account.externalUrl && (
-          <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>
+        {!compact && (
+          <>
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <Link
+                href={`/transactions?accountId=${account.id}`}
+                className="hover:text-primary hover:underline truncate"
+              >
+                {transactionCount} transactions
+              </Link>
+              {folder && <span className="truncate ml-2">{folder.name}</span>}
+            </div>
+            {account.initialBalance !== undefined && account.initialBalance !== null && (
+              <p className="text-xs text-muted-foreground mt-1.5">
+                Solde initial: {formatCurrency(account.initialBalance)}
+              </p>
+            )}
+            {account.lastImport && (
+              <p className="text-xs text-muted-foreground mt-1.5">
+                Dernier import:{" "}
+                {new Date(account.lastImport).toLocaleDateString("fr-FR")}
+              </p>
+            )}
+            {account.externalUrl && (
+              <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 },