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

components/categories/category-card.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { Pencil, Trash2 } from "lucide-react";
+import type { Category } from "@/lib/types";
+
+interface CategoryCardProps {
+  category: Category;
+  stats: { total: number; count: number };
+  formatCurrency: (amount: number) => string;
+  onEdit: (category: Category) => void;
+  onDelete: (categoryId: string) => void;
+}
+
+export function CategoryCard({
+  category,
+  stats,
+  formatCurrency,
+  onEdit,
+  onDelete,
+}: CategoryCardProps) {
+  return (
+    <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <div
+          className="w-5 h-5 rounded-full flex items-center justify-center shrink-0"
+          style={{ backgroundColor: `${category.color}20` }}
+        >
+          <CategoryIcon
+            icon={category.icon}
+            color={category.color}
+            size={12}
+          />
+        </div>
+        <span className="text-sm truncate">{category.name}</span>
+        <span className="text-sm text-muted-foreground shrink-0">
+          {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
+          {formatCurrency(stats.total)}
+        </span>
+        {category.keywords.length > 0 && (
+          <Badge
+            variant="outline"
+            className="text-[10px] px-1.5 py-0 h-4 shrink-0"
+          >
+            {category.keywords.length}
+          </Badge>
+        )}
+      </div>
+
+      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={() => onEdit(category)}
+        >
+          <Pencil className="w-3 h-3" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 text-destructive hover:text-destructive"
+          onClick={() => onDelete(category.id)}
+        >
+          <Trash2 className="w-3 h-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+