feat: add account editing functionality and update account handling in folder view

app/folders/page.tsx

@@ -22,7 +22,7 @@ import {
   Building2,
   RefreshCw,
 } from "lucide-react"
-import { generateId, addFolder, updateFolder, deleteFolder } from "@/lib/store-db"
+import { addFolder, updateFolder, deleteFolder, updateAccount } from "@/lib/store-db"
 import type { Folder as FolderType, Account } from "@/lib/types"
 import { cn } from "@/lib/utils"
 
@@ -42,6 +42,7 @@ interface FolderTreeItemProps {
   level: number
   onEdit: (folder: FolderType) => void
   onDelete: (folderId: string) => void
+  onEditAccount: (account: Account) => void
   formatCurrency: (amount: number) => string
 }
 
@@ -52,13 +53,14 @@ function FolderTreeItem({
   level,
   onEdit,
   onDelete,
+  onEditAccount,
   formatCurrency,
 }: FolderTreeItemProps) {
   const [isExpanded, setIsExpanded] = useState(true)
 
-  // Pour le dossier racine, inclure aussi les comptes sans dossier (folderId: null)
+  // Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
   const folderAccounts = accounts.filter((a) => 
-    a.folderId === folder.id || (folder.parentId === null && a.folderId === null)
+    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
@@ -129,12 +131,20 @@ function FolderTreeItem({
       {isExpanded && (
         <div>
           {folderAccounts.map((account) => (
-            <div key={account.id} className={cn("flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50", "ml-12")}>
+            <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" />
               <span className="flex-1 text-sm">{account.name}</span>
               <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>
           ))}
 
@@ -147,6 +157,7 @@ function FolderTreeItem({
               level={level + 1}
               onEdit={onEdit}
               onDelete={onDelete}
+              onEditAccount={onEditAccount}
               formatCurrency={formatCurrency}
             />
           ))}
@@ -156,6 +167,13 @@ function FolderTreeItem({
   )
 }
 
+const accountTypeLabels = {
+  CHECKING: "Compte courant",
+  SAVINGS: "Épargne",
+  CREDIT_CARD: "Carte de crédit",
+  OTHER: "Autre",
+}
+
 export default function FoldersPage() {
   const { data, isLoading, refresh } = useBankingData()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
@@ -165,6 +183,15 @@ export default function FoldersPage() {
     parentId: "folder-root" as string | null,
     color: "#6366f1",
   })
+  
+  // Account editing state
+  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
+  const [editingAccount, setEditingAccount] = useState<Account | null>(null)
+  const [accountFormData, setAccountFormData] = useState({
+    name: "",
+    type: "CHECKING" as Account["type"],
+    folderId: "folder-root",
+  })
 
   if (isLoading || !data) {
     return (
@@ -241,6 +268,35 @@ export default function FoldersPage() {
     }
   }
 
+  const handleEditAccount = (account: Account) => {
+    setEditingAccount(account)
+    setAccountFormData({
+      name: account.name,
+      type: account.type,
+      folderId: account.folderId || "folder-root",
+    })
+    setIsAccountDialogOpen(true)
+  }
+
+  const handleSaveAccount = async () => {
+    if (!editingAccount) return
+
+    try {
+      await updateAccount({
+        ...editingAccount,
+        name: accountFormData.name,
+        type: accountFormData.type,
+        folderId: accountFormData.folderId === "folder-root" ? null : accountFormData.folderId,
+      })
+      refresh()
+      setIsAccountDialogOpen(false)
+      setEditingAccount(null)
+    } catch (error) {
+      console.error("Error updating account:", error)
+      alert("Erreur lors de la mise à jour du compte")
+    }
+  }
+
   return (
     <div className="flex h-screen bg-background">
       <Sidebar />
@@ -272,6 +328,7 @@ export default function FoldersPage() {
                     level={0}
                     onEdit={handleEdit}
                     onDelete={handleDelete}
+                    onEditAccount={handleEditAccount}
                     formatCurrency={formatCurrency}
                   />
                 ))}
@@ -343,6 +400,65 @@ export default function FoldersPage() {
           </div>
         </DialogContent>
       </Dialog>
+
+      <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>
   )
 }