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>
+  );
+}
+