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

components/accounts/account-edit-dialog.tsx

@@ -0,0 +1,126 @@
+"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;
+  externalUrl: string;
+}
+
+interface AccountEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  formData: AccountFormData;
+  onFormDataChange: (data: AccountFormData) => void;
+  folders: Folder[];
+  onSave: () => void;
+}
+
+export function AccountEditDialog({
+  open,
+  onOpenChange,
+  formData,
+  onFormDataChange,
+  folders,
+  onSave,
+}: AccountEditDialogProps) {
+  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="space-y-2">
+            <Label>Lien externe (portail banque)</Label>
+            <Input
+              value={formData.externalUrl}
+              onChange={(e) =>
+                onFormDataChange({ ...formData, externalUrl: e.target.value })
+              }
+              placeholder="https://..."
+            />
+            <p className="text-xs text-muted-foreground">
+              URL personnalisée vers le portail de votre banque
+            </p>
+          </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>
+  );
+}
+