feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states

components/transactions/transaction-bulk-actions.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { CheckCircle2, Circle, Tags } from "lucide-react";
+import type { Category } from "@/lib/types";
+
+interface TransactionBulkActionsProps {
+  selectedCount: number;
+  categories: Category[];
+  onReconcile: (reconciled: boolean) => void;
+  onSetCategory: (categoryId: string | null) => void;
+}
+
+export function TransactionBulkActions({
+  selectedCount,
+  categories,
+  onReconcile,
+  onSetCategory,
+}: TransactionBulkActionsProps) {
+  if (selectedCount === 0) return null;
+
+  return (
+    <Card className="bg-primary/5 border-primary/20">
+      <CardContent className="py-3">
+        <div className="flex items-center gap-4">
+          <span className="text-sm font-medium">
+            {selectedCount} sélectionnée{selectedCount > 1 ? "s" : ""}
+          </span>
+          <Button size="sm" variant="outline" onClick={() => onReconcile(true)}>
+            <CheckCircle2 className="w-4 h-4 mr-1" />
+            Pointer
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => onReconcile(false)}
+          >
+            <Circle className="w-4 h-4 mr-1" />
+            Dépointer
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="sm" variant="outline">
+                <Tags className="w-4 h-4 mr-1" />
+                Catégoriser
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onClick={() => onSetCategory(null)}>
+                Aucune catégorie
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              {categories.map((cat) => (
+                <DropdownMenuItem
+                  key={cat.id}
+                  onClick={() => onSetCategory(cat.id)}
+                >
+                  <CategoryIcon
+                    icon={cat.icon}
+                    color={cat.color}
+                    size={14}
+                    className="mr-2"
+                  />
+                  {cat.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+