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

app/categories/page.tsx

@@ -1,49 +1,16 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { Sidebar } from "@/components/dashboard/sidebar";
+import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
+import {
+  CategoryCard,
+  CategoryEditDialog,
+  ParentCategoryRow,
+  CategorySearchBar,
+} from "@/components/categories";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Plus,
-  MoreVertical,
-  Pencil,
-  Trash2,
-  RefreshCw,
-  X,
-  ChevronDown,
-  ChevronRight,
-  ChevronsUpDown,
-  Search,
-} from "lucide-react";
-import { CategoryIcon } from "@/components/ui/category-icon";
+import { Plus } from "lucide-react";
 import {
   autoCategorize,
   addCategory,
@@ -51,32 +18,13 @@ import {
   deleteCategory,
 } from "@/lib/store-db";
 import type { Category } from "@/lib/types";
-import { cn } from "@/lib/utils";
-
-const categoryColors = [
-  "#22c55e",
-  "#3b82f6",
-  "#f59e0b",
-  "#ec4899",
-  "#ef4444",
-  "#8b5cf6",
-  "#06b6d4",
-  "#84cc16",
-  "#f97316",
-  "#6366f1",
-  "#14b8a6",
-  "#f43f5e",
-  "#64748b",
-  "#0891b2",
-  "#dc2626",
-];
 
 export default function CategoriesPage() {
   const { data, isLoading, refresh } = useBankingData();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [expandedParents, setExpandedParents] = useState<Set<string>>(
-    new Set(),
+    new Set()
   );
   const [formData, setFormData] = useState({
     name: "",
@@ -84,7 +32,6 @@ export default function CategoriesPage() {
     keywords: [] as string[],
     parentId: null as string | null,
   });
-  const [newKeyword, setNewKeyword] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
 
   // Organiser les catégories par parent
@@ -101,7 +48,6 @@ export default function CategoriesPage() {
       const children: Record<string, Category[]> = {};
       const orphans: Category[] = [];
 
-      // Grouper les enfants par parent
       data.categories
         .filter((c) => c.parentId !== null)
         .forEach((child) => {
@@ -131,14 +77,7 @@ export default function CategoriesPage() {
   });
 
   if (isLoading || !data) {
-    return (
-      <div className="flex h-screen">
-        <Sidebar />
-        <main className="flex-1 flex items-center justify-center">
-          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
-        </main>
-      </div>
-    );
+    return <LoadingState />;
   }
 
   const formatCurrency = (amount: number) => {
@@ -159,11 +98,11 @@ export default function CategoriesPage() {
     }
 
     const categoryTransactions = data.transactions.filter((t) =>
-      categoryIds.includes(t.categoryId || ""),
+      categoryIds.includes(t.categoryId || "")
     );
     const total = categoryTransactions.reduce(
       (sum, t) => sum + Math.abs(t.amount),
-      0,
+      0
     );
     const count = categoryTransactions.length;
     return { total, count };
@@ -252,30 +191,10 @@ export default function CategoriesPage() {
     }
   };
 
-  const addKeyword = () => {
-    if (
-      newKeyword.trim() &&
-      !formData.keywords.includes(newKeyword.trim().toLowerCase())
-    ) {
-      setFormData({
-        ...formData,
-        keywords: [...formData.keywords, newKeyword.trim().toLowerCase()],
-      });
-      setNewKeyword("");
-    }
-  };
-
-  const removeKeyword = (keyword: string) => {
-    setFormData({
-      ...formData,
-      keywords: formData.keywords.filter((k) => k !== keyword),
-    });
-  };
-
   const reApplyAutoCategories = async () => {
     if (
       !confirm(
-        "Recatégoriser automatiquement les transactions non catégorisées ?",
+        "Recatégoriser automatiquement les transactions non catégorisées ?"
       )
     )
       return;
@@ -287,7 +206,7 @@ export default function CategoriesPage() {
       for (const transaction of uncategorized) {
         const categoryId = autoCategorize(
           transaction.description + " " + (transaction.memo || ""),
-          data.categories,
+          data.categories
         );
         if (categoryId) {
           await updateTransaction({ ...transaction, categoryId });
@@ -301,395 +220,118 @@ export default function CategoriesPage() {
   };
 
   const uncategorizedCount = data.transactions.filter(
-    (t) => !t.categoryId,
+    (t) => !t.categoryId
   ).length;
 
-  // Composant pour une carte de catégorie enfant
-  const ChildCategoryCard = ({ category }: { category: Category }) => {
-    const stats = getCategoryStats(category.id);
-
-    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={() => handleEdit(category)}
-          >
-            <Pencil className="w-3 h-3" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6 text-destructive hover:text-destructive"
-            onClick={() => handleDelete(category.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </div>
+  // Filtrer les catégories selon la recherche
+  const filteredParentCategories = parentCategories.filter((parent) => {
+    if (!searchQuery.trim()) return true;
+    const query = searchQuery.toLowerCase();
+    if (parent.name.toLowerCase().includes(query)) return true;
+    if (parent.keywords.some((k) => k.toLowerCase().includes(query)))
+      return true;
+    const children = childrenByParent[parent.id] || [];
+    return children.some(
+      (c) =>
+        c.name.toLowerCase().includes(query) ||
+        c.keywords.some((k) => k.toLowerCase().includes(query))
     );
-  };
+  });
 
   return (
-    <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="p-6 space-y-6">
-          {/* Header */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">Catégories</h1>
-              <p className="text-muted-foreground">
-                {parentCategories.length} catégories principales •{" "}
-                {data.categories.length - parentCategories.length}{" "}
-                sous-catégories
-              </p>
-            </div>
-            <div className="flex gap-2">
-              {uncategorizedCount > 0 && (
-                <Button variant="outline" onClick={reApplyAutoCategories}>
-                  Recatégoriser ({uncategorizedCount})
-                </Button>
-              )}
-              <Button onClick={() => handleNewCategory(null)}>
-                <Plus className="w-4 h-4 mr-2" />
-                Nouvelle catégorie
+    <PageLayout>
+      <PageHeader
+        title="Catégories"
+        description={`${parentCategories.length} catégories principales • ${data.categories.length - parentCategories.length} sous-catégories`}
+        actions={
+          <>
+            {uncategorizedCount > 0 && (
+              <Button variant="outline" onClick={reApplyAutoCategories}>
+                Recatégoriser ({uncategorizedCount})
               </Button>
-            </div>
-          </div>
-
-          {/* Barre de recherche et contrôles */}
-          <div className="flex items-center gap-3">
-            <div className="relative flex-1 max-w-sm">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-              <Input
-                placeholder="Rechercher une catégorie ou un mot-clé..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9"
-              />
-              {searchQuery && (
-                <button
-                  onClick={() => setSearchQuery("")}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              )}
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={allExpanded ? collapseAll : expandAll}
-            >
-              <ChevronsUpDown className="w-4 h-4 mr-2" />
-              {allExpanded ? "Tout replier" : "Tout déplier"}
-            </Button>
-          </div>
-
-          {/* Liste des catégories par parent */}
-          <div className="space-y-1">
-            {parentCategories
-              .filter((parent) => {
-                if (!searchQuery.trim()) return true;
-                const query = searchQuery.toLowerCase();
-                // Afficher si le parent matche
-                if (parent.name.toLowerCase().includes(query)) return true;
-                if (
-                  parent.keywords.some((k) => k.toLowerCase().includes(query))
-                )
-                  return true;
-                // Ou si un enfant matche
-                const children = childrenByParent[parent.id] || [];
-                return children.some(
-                  (c) =>
-                    c.name.toLowerCase().includes(query) ||
-                    c.keywords.some((k) => k.toLowerCase().includes(query)),
-                );
-              })
-              .map((parent) => {
-                const allChildren = childrenByParent[parent.id] || [];
-                // Filtrer les enfants aussi si recherche active
-                const children = searchQuery.trim()
-                  ? allChildren.filter(
-                      (c) =>
-                        c.name
-                          .toLowerCase()
-                          .includes(searchQuery.toLowerCase()) ||
-                        c.keywords.some((k) =>
-                          k.toLowerCase().includes(searchQuery.toLowerCase()),
-                        ) ||
-                        // Garder tous les enfants si le parent matche
-                        parent.name
-                          .toLowerCase()
-                          .includes(searchQuery.toLowerCase()),
-                    )
-                  : allChildren;
-                const stats = getCategoryStats(parent.id, true);
-                const isExpanded =
-                  expandedParents.has(parent.id) ||
-                  (searchQuery.trim() !== "" && children.length > 0);
-
-                return (
-                  <div key={parent.id} className="border rounded-lg bg-card">
-                    <Collapsible
-                      open={isExpanded}
-                      onOpenChange={() => toggleExpanded(parent.id)}
-                    >
-                      <div className="flex items-center justify-between px-3 py-2">
-                        <CollapsibleTrigger asChild>
-                          <button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
-                            {isExpanded ? (
-                              <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
-                            ) : (
-                              <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
-                            )}
-                            <div
-                              className="w-7 h-7 rounded-full flex items-center justify-center shrink-0"
-                              style={{ backgroundColor: `${parent.color}20` }}
-                            >
-                              <CategoryIcon
-                                icon={parent.icon}
-                                color={parent.color}
-                                size={14}
-                              />
-                            </div>
-                            <span className="font-medium text-sm truncate">
-                              {parent.name}
-                            </span>
-                            <span className="text-sm text-muted-foreground shrink-0">
-                              {children.length} • {stats.count} opération
-                              {stats.count > 1 ? "s" : ""} •{" "}
-                              {formatCurrency(stats.total)}
-                            </span>
-                          </button>
-                        </CollapsibleTrigger>
-
-                        <div className="flex items-center gap-1 shrink-0 ml-2">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-7 w-7"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleNewCategory(parent.id);
-                            }}
-                          >
-                            <Plus className="w-4 h-4" />
-                          </Button>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7"
-                              >
-                                <MoreVertical className="w-4 h-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() => handleEdit(parent)}
-                              >
-                                <Pencil className="w-4 h-4 mr-2" />
-                                Modifier
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={() => handleDelete(parent.id)}
-                                className="text-red-600"
-                              >
-                                <Trash2 className="w-4 h-4 mr-2" />
-                                Supprimer
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </div>
-
-                      <CollapsibleContent>
-                        {children.length > 0 ? (
-                          <div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
-                            {children.map((child) => (
-                              <ChildCategoryCard
-                                key={child.id}
-                                category={child}
-                              />
-                            ))}
-                          </div>
-                        ) : (
-                          <div className="px-3 pb-2 ml-11 text-xs text-muted-foreground italic">
-                            Aucune sous-catégorie
-                          </div>
-                        )}
-                      </CollapsibleContent>
-                    </Collapsible>
-                  </div>
-                );
-              })}
-
-            {/* Catégories orphelines (sans parent valide) */}
-            {orphanCategories.length > 0 && (
-              <div className="border rounded-lg bg-card">
-                <div className="px-3 py-2 border-b">
-                  <span className="text-sm font-medium text-muted-foreground">
-                    Catégories non classées ({orphanCategories.length})
-                  </span>
-                </div>
-                <div className="p-2 space-y-1">
-                  {orphanCategories.map((category) => (
-                    <ChildCategoryCard key={category.id} category={category} />
-                  ))}
-                </div>
-              </div>
             )}
-          </div>
-        </div>
-      </main>
+            <Button onClick={() => handleNewCategory(null)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouvelle catégorie
+            </Button>
+          </>
+        }
+      />
 
-      {/* Dialog de création/édition */}
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>
-              {editingCategory ? "Modifier la catégorie" : "Nouvelle catégorie"}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            {/* Catégorie parente */}
-            <div className="space-y-2">
-              <Label>Catégorie parente</Label>
-              <Select
-                value={formData.parentId || "none"}
-                onValueChange={(value) =>
-                  setFormData({
-                    ...formData,
-                    parentId: value === "none" ? null : value,
-                  })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Aucune (catégorie principale)" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">
-                    Aucune (catégorie principale)
-                  </SelectItem>
-                  {parentCategories
-                    .filter((p) => p.id !== editingCategory?.id)
-                    .map((parent) => (
-                      <SelectItem key={parent.id} value={parent.id}>
-                        <div className="flex items-center gap-2">
-                          <div
-                            className="w-3 h-3 rounded-full"
-                            style={{ backgroundColor: parent.color }}
-                          />
-                          {parent.name}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
+      <CategorySearchBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        allExpanded={allExpanded}
+        onToggleAll={allExpanded ? collapseAll : expandAll}
+      />
+
+      <div className="space-y-1">
+        {filteredParentCategories.map((parent) => {
+          const allChildren = childrenByParent[parent.id] || [];
+          const children = searchQuery.trim()
+            ? allChildren.filter(
+                (c) =>
+                  c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                  c.keywords.some((k) =>
+                    k.toLowerCase().includes(searchQuery.toLowerCase())
+                  ) ||
+                  parent.name.toLowerCase().includes(searchQuery.toLowerCase())
+              )
+            : allChildren;
+          const stats = getCategoryStats(parent.id, true);
+          const isExpanded =
+            expandedParents.has(parent.id) ||
+            (searchQuery.trim() !== "" && children.length > 0);
+
+          return (
+            <ParentCategoryRow
+              key={parent.id}
+              parent={parent}
+              children={children}
+              stats={stats}
+              isExpanded={isExpanded}
+              onToggleExpanded={() => toggleExpanded(parent.id)}
+              formatCurrency={formatCurrency}
+              getCategoryStats={(id) => getCategoryStats(id)}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              onNewCategory={handleNewCategory}
+            />
+          );
+        })}
+
+        {orphanCategories.length > 0 && (
+          <div className="border rounded-lg bg-card">
+            <div className="px-3 py-2 border-b">
+              <span className="text-sm font-medium text-muted-foreground">
+                Catégories non classées ({orphanCategories.length})
+              </span>
             </div>
-
-            {/* Nom */}
-            <div className="space-y-2">
-              <Label>Nom</Label>
-              <Input
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Ex: Alimentation"
-              />
-            </div>
-
-            {/* Couleur */}
-            <div className="space-y-2">
-              <Label>Couleur</Label>
-              <div className="flex flex-wrap gap-2">
-                {categoryColors.map((color) => (
-                  <button
-                    key={color}
-                    onClick={() => setFormData({ ...formData, color })}
-                    className={cn(
-                      "w-8 h-8 rounded-full transition-transform",
-                      formData.color === color &&
-                        "ring-2 ring-offset-2 ring-primary scale-110",
-                    )}
-                    style={{ backgroundColor: color }}
-                  />
-                ))}
-              </div>
-            </div>
-
-            {/* Mots-clés */}
-            <div className="space-y-2">
-              <Label>Mots-clés pour la catégorisation automatique</Label>
-              <div className="flex gap-2">
-                <Input
-                  value={newKeyword}
-                  onChange={(e) => setNewKeyword(e.target.value)}
-                  placeholder="Ajouter un mot-clé"
-                  onKeyDown={(e) =>
-                    e.key === "Enter" && (e.preventDefault(), addKeyword())
-                  }
+            <div className="p-2 space-y-1">
+              {orphanCategories.map((category) => (
+                <CategoryCard
+                  key={category.id}
+                  category={category}
+                  stats={getCategoryStats(category.id)}
+                  formatCurrency={formatCurrency}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
                 />
-                <Button type="button" onClick={addKeyword} size="icon">
-                  <Plus className="w-4 h-4" />
-                </Button>
-              </div>
-              <div className="flex flex-wrap gap-1 mt-2 max-h-32 overflow-y-auto">
-                {formData.keywords.map((keyword) => (
-                  <Badge key={keyword} variant="secondary" className="gap-1">
-                    {keyword}
-                    <button onClick={() => removeKeyword(keyword)}>
-                      <X className="w-3 h-3" />
-                    </button>
-                  </Badge>
-                ))}
-              </div>
-            </div>
-
-            {/* Actions */}
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
-                Annuler
-              </Button>
-              <Button onClick={handleSave} disabled={!formData.name.trim()}>
-                {editingCategory ? "Enregistrer" : "Créer"}
-              </Button>
+              ))}
             </div>
           </div>
-        </DialogContent>
-      </Dialog>
-    </div>
+        )}
+      </div>
+
+      <CategoryEditDialog
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        editingCategory={editingCategory}
+        formData={formData}
+        onFormDataChange={setFormData}
+        parentCategories={parentCategories}
+        onSave={handleSave}
+      />
+    </PageLayout>
   );
 }