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

components/accounts/account-bulk-actions.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Trash2 } from "lucide-react";
+
+interface AccountBulkActionsProps {
+  selectedCount: number;
+  onDelete: () => void;
+}
+
+export function AccountBulkActions({
+  selectedCount,
+  onDelete,
+}: AccountBulkActionsProps) {
+  if (selectedCount === 0) return null;
+
+  return (
+    <Card className="bg-destructive/5 border-destructive/20">
+      <CardContent className="py-3">
+        <div className="flex items-center gap-4">
+          <span className="text-sm font-medium">
+            {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
+            {selectedCount > 1 ? "s" : ""}
+          </span>
+          <Button size="sm" variant="destructive" onClick={onDelete}>
+            <Trash2 className="w-4 h-4 mr-1" />
+            Supprimer
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

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

components/accounts/index.ts

@@ -1,4 +1,5 @@
 export { AccountCard } from "./account-card";
 export { AccountEditDialog } from "./account-edit-dialog";
+export { AccountBulkActions } from "./account-bulk-actions";
 export { accountTypeIcons, accountTypeLabels } from "./constants";
 

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

components/folders/draggable-folder-item.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  MoreVertical,
+  Pencil,
+  Trash2,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  GripVertical,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Folder as FolderType, Account } from "@/lib/types";
+
+interface DraggableFolderItemProps {
+  folder: FolderType;
+  accounts?: Account[];
+  allFolders?: FolderType[];
+  level: number;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEdit: (folder: FolderType) => void;
+  onDelete: (folderId: string) => void;
+  onEditAccount?: (account: Account) => void;
+  formatCurrency: (amount: number) => string;
+  folderAccounts: Account[];
+  childFolders: FolderType[];
+  folderTotal: number;
+}
+
+export function DraggableFolderItem({
+  folder,
+  level,
+  isExpanded,
+  onToggleExpand,
+  onEdit,
+  onDelete,
+  formatCurrency,
+  folderAccounts,
+  childFolders,
+  folderTotal,
+}: DraggableFolderItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `folder-${folder.id}`,
+    data: {
+      type: "folder",
+      folder,
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <div
+        className={cn(
+          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
+          level > 0 && "ml-6",
+          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>
+        <button
+          onClick={onToggleExpand}
+          className="p-1 hover:bg-muted rounded"
+          disabled={folderAccounts.length === 0 && childFolders.length === 0}
+        >
+          {folderAccounts.length > 0 || childFolders.length > 0 ? (
+            isExpanded ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-muted-foreground" />
+            )
+          ) : (
+            <div className="w-4 h-4" />
+          )}
+        </button>
+
+        <div
+          className="w-6 h-6 rounded flex items-center justify-center"
+          style={{ backgroundColor: `${folder.color}20` }}
+        >
+          {isExpanded ? (
+            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
+          ) : (
+            <Folder className="w-4 h-4" style={{ color: folder.color }} />
+          )}
+        </div>
+
+        <span className="flex-1 font-medium text-sm">{folder.name}</span>
+
+        {folderAccounts.length > 0 && (
+          <span
+            className={cn(
+              "text-sm font-semibold tabular-nums",
+              folderTotal >= 0 ? "text-emerald-600" : "text-red-600"
+            )}
+          >
+            {formatCurrency(folderTotal)}
+          </span>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 opacity-0 group-hover:opacity-100"
+            >
+              <MoreVertical className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onEdit(folder)}>
+              <Pencil className="w-4 h-4 mr-2" />
+              Modifier
+            </DropdownMenuItem>
+            {folder.id !== "folder-root" && (
+              <DropdownMenuItem
+                onClick={() => onDelete(folder.id)}
+                className="text-red-600"
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Supprimer
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+

components/folders/folder-tree-item.tsx

@@ -1,25 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  MoreVertical,
-  Pencil,
-  Trash2,
-  Folder,
-  FolderOpen,
-  ChevronRight,
-  ChevronDown,
-  Building2,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { DraggableFolderItem } from "./draggable-folder-item";
+import { DraggableAccountItem } from "./draggable-account-item";
 import type { Folder as FolderType, Account } from "@/lib/types";
 
 interface FolderTreeItemProps {
@@ -52,120 +35,35 @@ export function FolderTreeItem({
       (folder.id === "folder-root" && a.folderId === null)
   );
   const childFolders = allFolders.filter((f) => f.parentId === folder.id);
-  const hasChildren = childFolders.length > 0 || folderAccounts.length > 0;
-
   const folderTotal = folderAccounts.reduce((sum, a) => sum + a.balance, 0);
 
   return (
     <div>
-      <div
-        className={cn(
-          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
-          level > 0 && "ml-6"
-        )}
-      >
-        <button
-          onClick={() => setIsExpanded(!isExpanded)}
-          className="p-1 hover:bg-muted rounded"
-          disabled={!hasChildren}
-        >
-          {hasChildren ? (
-            isExpanded ? (
-              <ChevronDown className="w-4 h-4 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="w-4 h-4 text-muted-foreground" />
-            )
-          ) : (
-            <div className="w-4 h-4" />
-          )}
-        </button>
-
-        <div
-          className="w-6 h-6 rounded flex items-center justify-center"
-          style={{ backgroundColor: `${folder.color}20` }}
-        >
-          {isExpanded ? (
-            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
-          ) : (
-            <Folder className="w-4 h-4" style={{ color: folder.color }} />
-          )}
-        </div>
-
-        <span className="flex-1 font-medium text-sm">{folder.name}</span>
-
-        {folderAccounts.length > 0 && (
-          <span
-            className={cn(
-              "text-sm font-semibold tabular-nums",
-              folderTotal >= 0 ? "text-emerald-600" : "text-red-600"
-            )}
-          >
-            {formatCurrency(folderTotal)}
-          </span>
-        )}
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 opacity-0 group-hover:opacity-100"
-            >
-              <MoreVertical className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onEdit(folder)}>
-              <Pencil className="w-4 h-4 mr-2" />
-              Modifier
-            </DropdownMenuItem>
-            {folder.id !== "folder-root" && (
-              <DropdownMenuItem
-                onClick={() => onDelete(folder.id)}
-                className="text-red-600"
-              >
-                <Trash2 className="w-4 h-4 mr-2" />
-                Supprimer
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+      <DraggableFolderItem
+        folder={folder}
+        accounts={accounts}
+        allFolders={allFolders}
+        level={level}
+        isExpanded={isExpanded}
+        onToggleExpand={() => setIsExpanded(!isExpanded)}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        onEditAccount={onEditAccount}
+        formatCurrency={formatCurrency}
+        folderAccounts={folderAccounts}
+        childFolders={childFolders}
+        folderTotal={folderTotal}
+      />
 
       {isExpanded && (
         <div>
           {folderAccounts.map((account) => (
-            <div
+            <DraggableAccountItem
               key={account.id}
-              className={cn(
-                "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
-                "ml-12"
-              )}
-            >
-              <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"
-              >
-                {account.name}
-              </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>
+              account={account}
+              onEditAccount={onEditAccount}
+              formatCurrency={formatCurrency}
+            />
           ))}
 
           {childFolders.map((child) => (

components/folders/index.ts

@@ -1,5 +1,7 @@
 export { FolderTreeItem } from "./folder-tree-item";
 export { FolderEditDialog } from "./folder-edit-dialog";
 export { AccountFolderDialog } from "./account-folder-dialog";
+export { DraggableFolderItem } from "./draggable-folder-item";
+export { DraggableAccountItem } from "./draggable-account-item";
 export { folderColors, accountTypeLabels } from "./constants";
 

components/transactions/transaction-table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -43,6 +44,8 @@ interface TransactionTableProps {
   formatDate: (dateStr: string) => string;
 }
 
+const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
+
 export function TransactionTable({
   transactions,
   accounts,
@@ -61,7 +64,14 @@ export function TransactionTable({
   formatDate,
 }: TransactionTableProps) {
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-  const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: transactions.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10,
+  });
 
   const handleRowClick = useCallback(
     (index: number, transactionId: string) => {
@@ -81,9 +91,8 @@ export function TransactionTable({
         if (newIndex !== focusedIndex) {
           setFocusedIndex(newIndex);
           onMarkReconciled(transactions[newIndex].id);
-          rowRefs.current[newIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
+          virtualizer.scrollToIndex(newIndex, {
+            align: "start",
           });
         }
       } else if (e.key === "ArrowUp") {
@@ -92,14 +101,13 @@ export function TransactionTable({
         if (newIndex !== focusedIndex) {
           setFocusedIndex(newIndex);
           onMarkReconciled(transactions[newIndex].id);
-          rowRefs.current[newIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
+          virtualizer.scrollToIndex(newIndex, {
+            align: "start",
           });
         }
       }
     },
-    [focusedIndex, transactions, onMarkReconciled]
+    [focusedIndex, transactions, onMarkReconciled, virtualizer]
   );
 
   useEffect(() => {
@@ -111,6 +119,7 @@ export function TransactionTable({
   useEffect(() => {
     setFocusedIndex(null);
   }, [transactions.length]);
+
   const getAccount = (accountId: string) => {
     return accounts.find((a) => a.id === accountId);
   };
@@ -124,87 +133,106 @@ export function TransactionTable({
           </div>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="p-3 text-left">
-                    <Checkbox
-                      checked={
-                        selectedTransactions.size === transactions.length &&
-                        transactions.length > 0
-                      }
-                      onCheckedChange={onToggleSelectAll}
-                    />
-                  </th>
-                  <th className="p-3 text-left">
-                    <button
-                      onClick={() => onSortChange("date")}
-                      className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
-                    >
-                      Date
-                      <ArrowUpDown className="w-3 h-3" />
-                    </button>
-                  </th>
-                  <th className="p-3 text-left">
-                    <button
-                      onClick={() => onSortChange("description")}
-                      className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
-                    >
-                      Description
-                      <ArrowUpDown className="w-3 h-3" />
-                    </button>
-                  </th>
-                  <th className="p-3 text-left text-sm font-medium text-muted-foreground">
-                    Compte
-                  </th>
-                  <th className="p-3 text-left text-sm font-medium text-muted-foreground">
-                    Catégorie
-                  </th>
-                  <th className="p-3 text-right">
-                    <button
-                      onClick={() => onSortChange("amount")}
-                      className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground ml-auto"
-                    >
-                      Montant
-                      <ArrowUpDown className="w-3 h-3" />
-                    </button>
-                  </th>
-                  <th className="p-3 text-center text-sm font-medium text-muted-foreground">
-                    Pointé
-                  </th>
-                  <th className="p-3"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {transactions.map((transaction, index) => {
+            {/* Header fixe */}
+            <div className="sticky top-0 z-10 bg-[var(--card)] border-b border-border">
+              <div className="grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0">
+                <div className="p-3">
+                  <Checkbox
+                    checked={
+                      selectedTransactions.size === transactions.length &&
+                      transactions.length > 0
+                    }
+                    onCheckedChange={onToggleSelectAll}
+                  />
+                </div>
+                <div className="p-3">
+                  <button
+                    onClick={() => onSortChange("date")}
+                    className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
+                  >
+                    Date
+                    <ArrowUpDown className="w-3 h-3" />
+                  </button>
+                </div>
+                <div className="p-3">
+                  <button
+                    onClick={() => onSortChange("description")}
+                    className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
+                  >
+                    Description
+                    <ArrowUpDown className="w-3 h-3" />
+                  </button>
+                </div>
+                <div className="p-3 text-sm font-medium text-muted-foreground">
+                  Compte
+                </div>
+                <div className="p-3 text-sm font-medium text-muted-foreground">
+                  Catégorie
+                </div>
+                <div className="p-3 text-right">
+                  <button
+                    onClick={() => onSortChange("amount")}
+                    className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground ml-auto"
+                  >
+                    Montant
+                    <ArrowUpDown className="w-3 h-3" />
+                  </button>
+                </div>
+                <div className="p-3 text-center text-sm font-medium text-muted-foreground">
+                  Pointé
+                </div>
+                <div className="p-3"></div>
+              </div>
+            </div>
+            {/* Body virtualisé */}
+            <div
+              ref={parentRef}
+              className="overflow-auto"
+              style={{ height: "calc(100vh - 400px)", minHeight: "400px" }}
+            >
+              <div
+                style={{
+                  height: `${virtualizer.getTotalSize()}px`,
+                  width: "100%",
+                  position: "relative",
+                }}
+              >
+                {virtualizer.getVirtualItems().map((virtualRow) => {
+                  const transaction = transactions[virtualRow.index];
                   const account = getAccount(transaction.accountId);
-                  const isFocused = focusedIndex === index;
+                  const isFocused = focusedIndex === virtualRow.index;
 
                   return (
-                    <tr
+                    <div
                       key={transaction.id}
-                      ref={(el) => {
-                        rowRefs.current[index] = el;
+                      data-index={virtualRow.index}
+                      ref={virtualizer.measureElement}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`,
                       }}
-                      onClick={() => handleRowClick(index, transaction.id)}
+                      onClick={() => handleRowClick(virtualRow.index, transaction.id)}
                       className={cn(
-                        "border-b border-border last:border-0 hover:bg-muted/50 cursor-pointer",
+                        "grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
                         transaction.isReconciled && "bg-emerald-500/5",
                         isFocused && "bg-primary/10 ring-1 ring-primary/30"
                       )}
                     >
-                      <td className="p-3">
+                      <div className="p-3">
                         <Checkbox
                           checked={selectedTransactions.has(transaction.id)}
                           onCheckedChange={() =>
                             onToggleSelectTransaction(transaction.id)
                           }
                         />
-                      </td>
-                      <td className="p-3 text-sm text-muted-foreground whitespace-nowrap">
+                      </div>
+                      <div className="p-3 text-sm text-muted-foreground whitespace-nowrap">
                         {formatDate(transaction.date)}
-                      </td>
-                      <td className="p-3">
+                      </div>
+                      <div className="p-3">
                         <p className="font-medium text-sm">
                           {transaction.description}
                         </p>
@@ -213,11 +241,11 @@ export function TransactionTable({
                             {transaction.memo}
                           </p>
                         )}
-                      </td>
-                      <td className="p-3 text-sm text-muted-foreground">
+                      </div>
+                      <div className="p-3 text-sm text-muted-foreground">
                         {account?.name || "-"}
-                      </td>
-                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
+                      </div>
+                      <div className="p-3" onClick={(e) => e.stopPropagation()}>
                         <CategoryCombobox
                           categories={categories}
                           value={transaction.categoryId}
@@ -227,8 +255,8 @@ export function TransactionTable({
                           showBadge
                           align="start"
                         />
-                      </td>
-                      <td
+                      </div>
+                      <div
                         className={cn(
                           "p-3 text-right font-semibold tabular-nums",
                           transaction.amount >= 0
@@ -238,8 +266,8 @@ export function TransactionTable({
                       >
                         {transaction.amount >= 0 ? "+" : ""}
                         {formatCurrency(transaction.amount)}
-                      </td>
-                      <td className="p-3 text-center" onClick={(e) => e.stopPropagation()}>
+                      </div>
+                      <div className="p-3 text-center" onClick={(e) => e.stopPropagation()}>
                         <button
                           onClick={() => onToggleReconciled(transaction.id)}
                           className="p-1 hover:bg-muted rounded"
@@ -250,8 +278,8 @@ export function TransactionTable({
                             <Circle className="w-5 h-5 text-muted-foreground" />
                           )}
                         </button>
-                      </td>
-                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
+                      </div>
+                      <div className="p-3" onClick={(e) => e.stopPropagation()}>
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                             <Button
@@ -293,12 +321,12 @@ export function TransactionTable({
                             </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
-                      </td>
-                    </tr>
+                      </div>
+                    </div>
                   );
                 })}
-              </tbody>
-            </table>
+              </div>
+            </div>
           </div>
         )}
       </CardContent>