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

app/folders/page.tsx

@@ -1,43 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import { Sidebar } from "@/components/dashboard/sidebar";
+import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
+import {
+  FolderTreeItem,
+  FolderEditDialog,
+  AccountFolderDialog,
+} from "@/components/folders";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Plus,
-  MoreVertical,
-  Pencil,
-  Trash2,
-  Folder,
-  FolderOpen,
-  ChevronRight,
-  ChevronDown,
-  Building2,
-  RefreshCw,
-} from "lucide-react";
+import { Plus } from "lucide-react";
 import {
   addFolder,
   updateFolder,
@@ -45,189 +18,6 @@ import {
   updateAccount,
 } from "@/lib/store-db";
 import type { Folder as FolderType, Account } from "@/lib/types";
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-
-const folderColors = [
-  { value: "#6366f1", label: "Indigo" },
-  { value: "#22c55e", label: "Vert" },
-  { value: "#f59e0b", label: "Orange" },
-  { value: "#ec4899", label: "Rose" },
-  { value: "#3b82f6", label: "Bleu" },
-  { value: "#ef4444", label: "Rouge" },
-];
-
-interface FolderTreeItemProps {
-  folder: FolderType;
-  accounts: Account[];
-  allFolders: FolderType[];
-  level: number;
-  onEdit: (folder: FolderType) => void;
-  onDelete: (folderId: string) => void;
-  onEditAccount: (account: Account) => void;
-  formatCurrency: (amount: number) => string;
-}
-
-function FolderTreeItem({
-  folder,
-  accounts,
-  allFolders,
-  level,
-  onEdit,
-  onDelete,
-  onEditAccount,
-  formatCurrency,
-}: FolderTreeItemProps) {
-  const [isExpanded, setIsExpanded] = useState(true);
-
-  // Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
-  const folderAccounts = accounts.filter(
-    (a) =>
-      a.folderId === folder.id ||
-      (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>
-
-      {isExpanded && (
-        <div>
-          {folderAccounts.map((account) => (
-            <div
-              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>
-          ))}
-
-          {childFolders.map((child) => (
-            <FolderTreeItem
-              key={child.id}
-              folder={child}
-              accounts={accounts}
-              allFolders={allFolders}
-              level={level + 1}
-              onEdit={onEdit}
-              onDelete={onDelete}
-              onEditAccount={onEditAccount}
-              formatCurrency={formatCurrency}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const accountTypeLabels = {
-  CHECKING: "Compte courant",
-  SAVINGS: "Épargne",
-  CREDIT_CARD: "Carte de crédit",
-  OTHER: "Autre",
-};
 
 export default function FoldersPage() {
   const { data, isLoading, refresh } = useBankingData();
@@ -249,14 +39,7 @@ export default function FoldersPage() {
   });
 
   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) => {
@@ -315,7 +98,7 @@ export default function FoldersPage() {
   const handleDelete = async (folderId: string) => {
     if (
       !confirm(
-        "Supprimer ce dossier ? Les comptes seront déplacés à la racine.",
+        "Supprimer ce dossier ? Les comptes seront déplacés à la racine."
       )
     )
       return;
@@ -362,196 +145,59 @@ export default function FoldersPage() {
   };
 
   return (
-    <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="p-6 space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">
-                Organisation
-              </h1>
-              <p className="text-muted-foreground">
-                Organisez vos comptes en dossiers
-              </p>
-            </div>
-            <Button onClick={handleNewFolder}>
-              <Plus className="w-4 h-4 mr-2" />
-              Nouveau dossier
-            </Button>
-          </div>
+    <PageLayout>
+      <PageHeader
+        title="Organisation"
+        description="Organisez vos comptes en dossiers"
+        actions={
+          <Button onClick={handleNewFolder}>
+            <Plus className="w-4 h-4 mr-2" />
+            Nouveau dossier
+          </Button>
+        }
+      />
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Arborescence des comptes</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-1">
-                {rootFolders.map((folder) => (
-                  <FolderTreeItem
-                    key={folder.id}
-                    folder={folder}
-                    accounts={data.accounts}
-                    allFolders={data.folders}
-                    level={0}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                    onEditAccount={handleEditAccount}
-                    formatCurrency={formatCurrency}
-                  />
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </main>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {editingFolder ? "Modifier le dossier" : "Nouveau dossier"}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Nom du dossier</Label>
-              <Input
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Ex: Comptes personnels"
+      <Card>
+        <CardHeader>
+          <CardTitle>Arborescence des comptes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-1">
+            {rootFolders.map((folder) => (
+              <FolderTreeItem
+                key={folder.id}
+                folder={folder}
+                accounts={data.accounts}
+                allFolders={data.folders}
+                level={0}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+                onEditAccount={handleEditAccount}
+                formatCurrency={formatCurrency}
               />
-            </div>
-            <div className="space-y-2">
-              <Label>Dossier parent</Label>
-              <Select
-                value={formData.parentId || "root"}
-                onValueChange={(v) =>
-                  setFormData({
-                    ...formData,
-                    parentId: v === "root" ? null : v,
-                  })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="root">Racine</SelectItem>
-                  {data.folders
-                    .filter((f) => f.id !== editingFolder?.id)
-                    .map((folder) => (
-                      <SelectItem key={folder.id} value={folder.id}>
-                        {folder.name}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label>Couleur</Label>
-              <div className="flex gap-2">
-                {folderColors.map(({ value }) => (
-                  <button
-                    key={value}
-                    onClick={() => setFormData({ ...formData, color: value })}
-                    className={cn(
-                      "w-8 h-8 rounded-full transition-transform",
-                      formData.color === value &&
-                        "ring-2 ring-offset-2 ring-primary scale-110",
-                    )}
-                    style={{ backgroundColor: value }}
-                  />
-                ))}
-              </div>
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
-                Annuler
-              </Button>
-              <Button onClick={handleSave} disabled={!formData.name.trim()}>
-                {editingFolder ? "Enregistrer" : "Créer"}
-              </Button>
-            </div>
+            ))}
           </div>
-        </DialogContent>
-      </Dialog>
+        </CardContent>
+      </Card>
 
-      <Dialog open={isAccountDialogOpen} onOpenChange={setIsAccountDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Modifier le compte</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Nom du compte</Label>
-              <Input
-                value={accountFormData.name}
-                onChange={(e) =>
-                  setAccountFormData({
-                    ...accountFormData,
-                    name: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <Label>Type de compte</Label>
-              <Select
-                value={accountFormData.type}
-                onValueChange={(v) =>
-                  setAccountFormData({
-                    ...accountFormData,
-                    type: v as Account["type"],
-                  })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.entries(accountTypeLabels).map(([value, label]) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label>Dossier</Label>
-              <Select
-                value={accountFormData.folderId}
-                onValueChange={(v) =>
-                  setAccountFormData({ ...accountFormData, folderId: v })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {data.folders.map((folder) => (
-                    <SelectItem key={folder.id} value={folder.id}>
-                      {folder.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsAccountDialogOpen(false)}
-              >
-                Annuler
-              </Button>
-              <Button onClick={handleSaveAccount}>Enregistrer</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
+      <FolderEditDialog
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        editingFolder={editingFolder}
+        formData={formData}
+        onFormDataChange={setFormData}
+        folders={data.folders}
+        onSave={handleSave}
+      />
+
+      <AccountFolderDialog
+        open={isAccountDialogOpen}
+        onOpenChange={setIsAccountDialogOpen}
+        formData={accountFormData}
+        onFormDataChange={setAccountFormData}
+        folders={data.folders}
+        onSave={handleSaveAccount}
+      />
+    </PageLayout>
   );
 }