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

components/accounts/account-card.tsx

@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import Link from "next/link";
 import type { Account, Folder } from "@/lib/types";
 import { accountTypeIcons, accountTypeLabels } from "./constants";
+import { Checkbox } from "@/components/ui/checkbox";
 
 interface AccountCardProps {
   account: Account;
@@ -21,6 +22,8 @@ interface AccountCardProps {
   onEdit: (account: Account) => void;
   onDelete: (accountId: string) => void;
   formatCurrency: (amount: number) => string;
+  isSelected?: boolean;
+  onSelect?: (accountId: string, selected: boolean) => void;
 }
 
 export function AccountCard({
@@ -30,28 +33,44 @@ export function AccountCard({
   onEdit,
   onDelete,
   formatCurrency,
+  isSelected = false,
+  onSelect,
 }: AccountCardProps) {
   const Icon = accountTypeIcons[account.type];
 
   return (
-    <Card className="relative">
-      <CardHeader className="pb-2">
+    <Card className={cn("relative", isSelected && "ring-2 ring-primary")}>
+      <CardHeader className="pb-1.5">
         <div className="flex items-start justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-              <Icon className="w-5 h-5 text-primary" />
+          <div className="flex items-center gap-2 flex-1">
+            {onSelect && (
+              <Checkbox
+                checked={isSelected}
+                onCheckedChange={(checked) =>
+                  onSelect(account.id, checked === true)
+                }
+                onClick={(e) => e.stopPropagation()}
+              />
+            )}
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+              <Icon className="w-4 h-4 text-primary" />
             </div>
-            <div>
-              <CardTitle className="text-base">{account.name}</CardTitle>
+            <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>
+              )}
             </div>
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <MoreVertical className="w-4 h-4" />
+              <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
+                <MoreVertical className="w-3.5 h-3.5" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -70,26 +89,26 @@ export function AccountCard({
           </DropdownMenu>
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="pt-1.5">
         <div
           className={cn(
-            "text-2xl font-bold mb-2",
+            "text-xl font-bold mb-1.5",
             account.balance >= 0 ? "text-emerald-600" : "text-red-600"
           )}
         >
           {formatCurrency(account.balance)}
         </div>
-        <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
           <Link
             href={`/transactions?accountId=${account.id}`}
-            className="hover:text-primary hover:underline"
+            className="hover:text-primary hover:underline truncate"
           >
             {transactionCount} transactions
           </Link>
-          {folder && <span>{folder.name}</span>}
+          {folder && <span className="truncate ml-2">{folder.name}</span>}
         </div>
         {account.lastImport && (
-          <p className="text-xs text-muted-foreground mt-2">
+          <p className="text-xs text-muted-foreground mt-1.5">
             Dernier import:{" "}
             {new Date(account.lastImport).toLocaleDateString("fr-FR")}
           </p>
@@ -99,7 +118,7 @@ export function AccountCard({
             href={account.externalUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-2"
+            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