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

components/folders/account-folder-dialog.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+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 type { Account, Folder } from "@/lib/types";
+import { accountTypeLabels } from "./constants";
+
+interface AccountFormData {
+  name: string;
+  type: Account["type"];
+  folderId: string;
+}
+
+interface AccountFolderDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  formData: AccountFormData;
+  onFormDataChange: (data: AccountFormData) => void;
+  folders: Folder[];
+  onSave: () => void;
+}
+
+export function AccountFolderDialog({
+  open,
+  onOpenChange,
+  formData,
+  onFormDataChange,
+  folders,
+  onSave,
+}: AccountFolderDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <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={formData.name}
+              onChange={(e) =>
+                onFormDataChange({
+                  ...formData,
+                  name: e.target.value,
+                })
+              }
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Type de compte</Label>
+            <Select
+              value={formData.type}
+              onValueChange={(v) =>
+                onFormDataChange({
+                  ...formData,
+                  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={formData.folderId}
+              onValueChange={(v) =>
+                onFormDataChange({ ...formData, folderId: v })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {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={() => onOpenChange(false)}>
+              Annuler
+            </Button>
+            <Button onClick={onSave}>Enregistrer</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

components/folders/constants.ts

@@ -0,0 +1,16 @@
+export 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" },
+];
+
+export const accountTypeLabels = {
+  CHECKING: "Compte courant",
+  SAVINGS: "Épargne",
+  CREDIT_CARD: "Carte de crédit",
+  OTHER: "Autre",
+};
+

components/folders/folder-edit-dialog.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+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 { cn } from "@/lib/utils";
+import type { Folder } from "@/lib/types";
+import { folderColors } from "./constants";
+
+interface FolderFormData {
+  name: string;
+  parentId: string | null;
+  color: string;
+}
+
+interface FolderEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingFolder: Folder | null;
+  formData: FolderFormData;
+  onFormDataChange: (data: FolderFormData) => void;
+  folders: Folder[];
+  onSave: () => void;
+}
+
+export function FolderEditDialog({
+  open,
+  onOpenChange,
+  editingFolder,
+  formData,
+  onFormDataChange,
+  folders,
+  onSave,
+}: FolderEditDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <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) =>
+                onFormDataChange({ ...formData, name: e.target.value })
+              }
+              placeholder="Ex: Comptes personnels"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Dossier parent</Label>
+            <Select
+              value={formData.parentId || "root"}
+              onValueChange={(v) =>
+                onFormDataChange({
+                  ...formData,
+                  parentId: v === "root" ? null : v,
+                })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="root">Racine</SelectItem>
+                {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={() => onFormDataChange({ ...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={() => onOpenChange(false)}>
+              Annuler
+            </Button>
+            <Button onClick={onSave} disabled={!formData.name.trim()}>
+              {editingFolder ? "Enregistrer" : "Créer"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

components/folders/folder-tree-item.tsx

@@ -0,0 +1,189 @@
+"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 type { Folder as FolderType, Account } from "@/lib/types";
+
+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;
+}
+
+export 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>
+  );
+}
+

components/folders/index.ts

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