From f54b2640adb822c55f0d95e8218ddc2f42c0c835 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 16:15:43 -0400
Subject: [PATCH] refactor(admin): replace parameterized routes with
 modal-based editing for users and roles

---
 src/features/admin/AdminPage.client.js        |  15 -
 .../admin/components/RoleEditModal.client.js  | 180 ++++++++++
 .../admin/components/UserEditModal.client.js  | 194 +++++++++++
 src/features/admin/components/index.js        |   2 +
 .../admin/pages/RoleEditPage.client.js        | 200 -----------
 src/features/admin/pages/RolesPage.client.js  | 317 ++++++++++--------
 .../admin/pages/UserEditPage.client.js        | 244 --------------
 src/features/admin/pages/UsersPage.client.js  |  89 ++---
 src/features/admin/pages/index.client.js      |  15 +-
 src/shared/components/Modal.js                |  67 +++-
 10 files changed, 643 insertions(+), 680 deletions(-)
 create mode 100644 src/features/admin/components/RoleEditModal.client.js
 create mode 100644 src/features/admin/components/UserEditModal.client.js
 delete mode 100644 src/features/admin/pages/RoleEditPage.client.js
 delete mode 100644 src/features/admin/pages/UserEditPage.client.js

diff --git a/src/features/admin/AdminPage.client.js b/src/features/admin/AdminPage.client.js
index ac7decf..c38d07d 100644
--- a/src/features/admin/AdminPage.client.js
+++ b/src/features/admin/AdminPage.client.js
@@ -8,21 +8,6 @@ export default function AdminPageClient({ params, user, widgetData }) {
   const parts = params?.admin || [];
   const [first, second, third] = parts;
 
-  // Routes paramétrées — le registre stocke le composant sous un slug
-  // "namespace:form", le client y attache les bons props.
-  if (first === 'users' && second === 'edit' && third) {
-    const page = getPage('users:edit');
-    if (page) return <page.Component userId={third} user={user} />;
-  }
-  if (first === 'roles' && second === 'edit' && third) {
-    const page = getPage('roles:edit');
-    if (page) return <page.Component roleId={third} user={user} />;
-  }
-  if (first === 'roles' && second === 'new') {
-    const page = getPage('roles:edit');
-    if (page) return <page.Component roleId="new" user={user} />;
-  }
-
   const slug = first || 'dashboard';
   const page = getPage(slug) || getPage('dashboard');
   if (!page) return null;
diff --git a/src/features/admin/components/RoleEditModal.client.js b/src/features/admin/components/RoleEditModal.client.js
new file mode 100644
index 0000000..a38043b
--- /dev/null
+++ b/src/features/admin/components/RoleEditModal.client.js
@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Input, Textarea, Switch, Modal } from '@zen/core/shared/components';
+import { useToast } from '@zen/core/toast';
+import { getPermissionGroups } from '@zen/core/users/constants';
+
+const PERMISSION_GROUPS = getPermissionGroups();
+
+const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
+    const toast = useToast();
+    const isNew = !roleId || roleId === 'new';
+
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [isSystem, setIsSystem] = useState(false);
+
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [color, setColor] = useState('#6b7280');
+    const [selectedPerms, setSelectedPerms] = useState([]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        if (isNew) {
+            setName('');
+            setDescription('');
+            setColor('#6b7280');
+            setSelectedPerms([]);
+            setIsSystem(false);
+            return;
+        }
+        fetchRole();
+    }, [isOpen, roleId]);
+
+    const fetchRole = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch(`/zen/api/roles/${roleId}`, { credentials: 'include' });
+            if (!response.ok) {
+                toast.error('Rôle introuvable');
+                onClose();
+                return;
+            }
+            const data = await response.json();
+            const role = data.role;
+            setName(role.name || '');
+            setDescription(role.description || '');
+            setColor(role.color || '#6b7280');
+            setSelectedPerms(role.permission_keys || []);
+            setIsSystem(role.is_system || false);
+        } catch {
+            toast.error('Impossible de charger ce rôle');
+            onClose();
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const togglePerm = (key) => {
+        setSelectedPerms(prev =>
+            prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
+        );
+    };
+
+    const handleSubmit = async () => {
+        if (!name.trim()) {
+            toast.error('Le nom du rôle est requis');
+            return;
+        }
+        try {
+            setSaving(true);
+            const url = isNew ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
+            const method = isNew ? 'POST' : 'PUT';
+
+            const response = await fetch(url, {
+                method,
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: name.trim(),
+                    description: description.trim() || null,
+                    color,
+                    permissionKeys: selectedPerms,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                toast.error(data.message || 'Impossible de sauvegarder ce rôle');
+                return;
+            }
+            toast.success(isNew ? 'Rôle créé' : 'Rôle mis à jour');
+            onSaved?.();
+            onClose();
+        } catch {
+            toast.error('Impossible de sauvegarder ce rôle');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const title = isNew ? 'Nouveau rôle' : `Modifier "${name}"`;
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={title}
+            onSubmit={handleSubmit}
+            submitLabel={isNew ? 'Créer le rôle' : 'Sauvegarder'}
+            loading={saving}
+            disabled={loading}
+            size="lg"
+        >
+            {loading ? (
+                <div className="flex flex-col gap-4 animate-pulse">
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-20 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                </div>
+            ) : (
+                <div className="flex flex-col gap-6">
+                    <div className="flex flex-col gap-4">
+                        <Input
+                            label="Nom du rôle"
+                            value={name}
+                            onChange={setName}
+                            disabled={isSystem}
+                            placeholder="Éditeur, Modérateur..."
+                            required
+                        />
+                        <Textarea
+                            label="Description"
+                            value={description}
+                            onChange={setDescription}
+                            rows={2}
+                            placeholder="Description optionnelle..."
+                        />
+                        <div className="flex items-center gap-3">
+                            <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                                Couleur
+                            </label>
+                            <input
+                                type="color"
+                                value={color}
+                                onChange={(e) => setColor(e.target.value)}
+                                className="w-8 h-8 rounded cursor-pointer border border-neutral-200 dark:border-neutral-700"
+                            />
+                            <span className="text-xs text-neutral-500">{color}</span>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                        <p className="text-xs font-semibold text-neutral-900 dark:text-white">Permissions</p>
+                        {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
+                            <div key={group} className="flex flex-col">
+                                <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
+                                    {group}
+                                </p>
+                                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
+                                    {perms.map((perm) => (
+                                        <Switch
+                                            key={perm.key}
+                                            checked={selectedPerms.includes(perm.key)}
+                                            onChange={() => togglePerm(perm.key)}
+                                            label={perm.name}
+                                            description={perm.key}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default RoleEditModal;
diff --git a/src/features/admin/components/UserEditModal.client.js b/src/features/admin/components/UserEditModal.client.js
new file mode 100644
index 0000000..0d71512
--- /dev/null
+++ b/src/features/admin/components/UserEditModal.client.js
@@ -0,0 +1,194 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Input, Select, TagInput, Modal } from '@zen/core/shared/components';
+import { useToast } from '@zen/core/toast';
+
+const UserEditModal = ({ userId, isOpen, onClose, onSaved }) => {
+    const toast = useToast();
+
+    const [userData, setUserData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+
+    const [formData, setFormData] = useState({ name: '', email_verified: 'false' });
+    const [errors, setErrors] = useState({});
+
+    const [allRoles, setAllRoles] = useState([]);
+    const [selectedRoleIds, setSelectedRoleIds] = useState([]);
+    const [initialRoleIds, setInitialRoleIds] = useState([]);
+
+    const emailVerifiedOptions = [
+        { value: 'false', label: 'Non vérifié' },
+        { value: 'true', label: 'Vérifié' },
+    ];
+
+    useEffect(() => {
+        if (!isOpen || !userId) return;
+        loadAll();
+    }, [isOpen, userId]);
+
+    const loadAll = async () => {
+        try {
+            setLoading(true);
+            setErrors({});
+            const [userRes, rolesRes, userRolesRes] = await Promise.all([
+                fetch(`/zen/api/users/${userId}`, { credentials: 'include' }),
+                fetch('/zen/api/roles', { credentials: 'include' }),
+                fetch(`/zen/api/users/${userId}/roles`, { credentials: 'include' }),
+            ]);
+            const [userJson, rolesJson, userRolesJson] = await Promise.all([
+                userRes.json(),
+                rolesRes.json(),
+                userRolesRes.json(),
+            ]);
+
+            if (userJson.user) {
+                setUserData(userJson.user);
+                setFormData({
+                    name: userJson.user.name || '',
+                    email_verified: userJson.user.email_verified ? 'true' : 'false',
+                });
+            } else {
+                toast.error(userJson.message || 'Utilisateur introuvable');
+                onClose();
+                return;
+            }
+
+            setAllRoles(rolesJson.roles || []);
+
+            const ids = (userRolesJson.roles || []).map(r => r.id);
+            setSelectedRoleIds(ids);
+            setInitialRoleIds(ids);
+        } catch {
+            toast.error("Impossible de charger l'utilisateur");
+            onClose();
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        if (errors[field]) setErrors(prev => ({ ...prev, [field]: null }));
+    };
+
+    const validate = () => {
+        const newErrors = {};
+        if (!formData.name?.trim()) newErrors.name = 'Le nom est requis';
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async () => {
+        if (!validate()) return;
+        try {
+            setSaving(true);
+
+            const userRes = await fetch(`/zen/api/users/${userId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    name: formData.name.trim(),
+                    email_verified: formData.email_verified === 'true',
+                }),
+            });
+            const userResData = await userRes.json();
+            if (!userRes.ok) {
+                toast.error(userResData.message || userResData.error || "Impossible de mettre à jour l'utilisateur");
+                return;
+            }
+
+            const toAdd = selectedRoleIds.filter(id => !initialRoleIds.includes(id));
+            const toRemove = initialRoleIds.filter(id => !selectedRoleIds.includes(id));
+
+            await Promise.all([
+                ...toAdd.map(roleId =>
+                    fetch(`/zen/api/users/${userId}/roles`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        credentials: 'include',
+                        body: JSON.stringify({ roleId }),
+                    })
+                ),
+                ...toRemove.map(roleId =>
+                    fetch(`/zen/api/users/${userId}/roles/${roleId}`, {
+                        method: 'DELETE',
+                        credentials: 'include',
+                    })
+                ),
+            ]);
+
+            toast.success('Utilisateur mis à jour');
+            onSaved?.();
+            onClose();
+        } catch {
+            toast.error("Impossible de mettre à jour l'utilisateur");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const roleOptions = allRoles.map(r => ({
+        value: r.id,
+        label: r.name,
+        color: r.color || '#6b7280',
+        description: r.description || undefined,
+    }));
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Modifier l'utilisateur"
+            onSubmit={handleSubmit}
+            submitLabel="Mettre à jour"
+            loading={saving}
+            disabled={loading}
+            size="md"
+        >
+            {loading ? (
+                <div className="flex flex-col gap-4 animate-pulse">
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                </div>
+            ) : (
+                <div className="flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <Input
+                            label="Nom *"
+                            value={formData.name}
+                            onChange={(value) => handleInputChange('name', value)}
+                            placeholder="Nom de l'utilisateur"
+                            error={errors.name}
+                        />
+                        <Input
+                            label="Email"
+                            value={userData?.email || ''}
+                            disabled
+                        />
+                    </div>
+
+                    <Select
+                        label="Email vérifié"
+                        value={formData.email_verified}
+                        onChange={(value) => handleInputChange('email_verified', value)}
+                        options={emailVerifiedOptions}
+                    />
+
+                    <TagInput
+                        label="Rôles attribués"
+                        options={roleOptions}
+                        value={selectedRoleIds}
+                        onChange={setSelectedRoleIds}
+                        placeholder="Rechercher un rôle..."
+                    />
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default UserEditModal;
diff --git a/src/features/admin/components/index.js b/src/features/admin/components/index.js
index 8d4bd38..42f5146 100644
--- a/src/features/admin/components/index.js
+++ b/src/features/admin/components/index.js
@@ -5,3 +5,5 @@ export { default as AdminSidebar } from './AdminSidebar.js';
 export { default as AdminTop } from './AdminTop.js';
 export { default as AdminHeader } from './AdminHeader.js';
 export { default as ThemeToggle } from './ThemeToggle.js';
+export { default as UserEditModal } from './UserEditModal.client.js';
+export { default as RoleEditModal } from './RoleEditModal.client.js';
diff --git a/src/features/admin/pages/RoleEditPage.client.js b/src/features/admin/pages/RoleEditPage.client.js
deleted file mode 100644
index 11304d4..0000000
--- a/src/features/admin/pages/RoleEditPage.client.js
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
-import { useToast } from '@zen/core/toast';
-import { getPermissionGroups } from '@zen/core/users/constants';
-import AdminHeader from '../components/AdminHeader.js';
-
-const PERMISSION_GROUPS = getPermissionGroups();
-
-const isNewRole = (roleId) => roleId === 'new';
-
-const RoleEditPage = ({ roleId }) => {
-  const router = useRouter();
-  const toast = useToast();
-
-  const [loading, setLoading] = useState(!isNewRole(roleId));
-  const [saving, setSaving] = useState(false);
-  const [isSystem, setIsSystem] = useState(false);
-
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [color, setColor] = useState('#6b7280');
-  const [selectedPerms, setSelectedPerms] = useState([]);
-
-  useEffect(() => {
-    if (isNewRole(roleId)) return;
-
-    const fetchRole = async () => {
-      try {
-        const response = await fetch(`/zen/api/roles/${roleId}`, { credentials: 'include' });
-        if (!response.ok) {
-          toast.error('Rôle introuvable');
-          router.push('/admin/roles');
-          return;
-        }
-        const data = await response.json();
-        const role = data.role;
-        setName(role.name || '');
-        setDescription(role.description || '');
-        setColor(role.color || '#6b7280');
-        setSelectedPerms(role.permission_keys || []);
-        setIsSystem(role.is_system || false);
-      } catch {
-        toast.error('Impossible de charger ce rôle');
-        router.push('/admin/roles');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchRole();
-  }, [roleId]);
-
-  const togglePerm = (key) => {
-    setSelectedPerms(prev =>
-      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
-    );
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!name.trim()) {
-      toast.error('Le nom du rôle est requis');
-      return;
-    }
-
-    setSaving(true);
-    try {
-      const isCreating = isNewRole(roleId);
-      const url = isCreating ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
-      const method = isCreating ? 'POST' : 'PUT';
-
-      const body = {
-        name: name.trim(),
-        description: description.trim() || null,
-        color,
-        permissionKeys: selectedPerms,
-      };
-
-      const response = await fetch(url, {
-        method,
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      });
-
-      const data = await response.json();
-      if (!response.ok) {
-        toast.error(data.message || 'Impossible de sauvegarder ce rôle');
-        return;
-      }
-
-      toast.success(isCreating ? 'Rôle créé' : 'Rôle mis à jour');
-      router.push('/admin/roles');
-    } catch {
-      toast.error('Impossible de sauvegarder ce rôle');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex flex-col gap-6">
-        <div className="h-6 w-48 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
-        <Card variant="default" padding="md">
-          <div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-        </Card>
-      </div>
-    );
-  }
-
-  const title = isNewRole(roleId) ? 'Nouveau rôle' : `Modifier "${name}"`;
-
-  return (
-    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <AdminHeader
-        title={title}
-        description={isSystem ? 'Rôle système — le nom ne peut pas être modifié' : undefined}
-        backHref="/admin/roles"
-      />
-
-      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
-        <Card variant="default" padding="md">
-          <div className="flex flex-col gap-4">
-            <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Informations</h2>
-
-            <Input
-              label="Nom du rôle"
-              value={name}
-              onChange={setName}
-              disabled={isSystem}
-              placeholder="Éditeur, Modérateur..."
-              required
-            />
-
-            <Textarea
-              label="Description"
-              value={description}
-              onChange={setDescription}
-              rows={2}
-              placeholder="Description optionnelle..."
-            />
-
-            <div className="flex items-center gap-3">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                Couleur
-              </label>
-              <input
-                type="color"
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                className="w-8 h-8 rounded cursor-pointer border border-neutral-200 dark:border-neutral-700"
-              />
-              <span className="text-xs text-neutral-500">{color}</span>
-            </div>
-          </div>
-        </Card>
-
-        <Card variant="default" padding="md">
-          <div className="flex flex-col gap-4">
-            <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Permissions</h2>
-
-            {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
-              <div key={group} className="flex flex-col">
-                <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
-                  {group}
-                </p>
-                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
-                  {perms.map((perm) => (
-                    <Switch
-                      key={perm.key}
-                      checked={selectedPerms.includes(perm.key)}
-                      onChange={() => togglePerm(perm.key)}
-                      label={perm.name}
-                      description={perm.key}
-                    />
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </Card>
-
-        <div className="flex justify-end gap-3">
-          <Button variant="secondary" type="button" onClick={() => router.push('/admin/roles')}>
-            Annuler
-          </Button>
-          <Button variant="primary" type="submit" loading={saving} disabled={saving}>
-            {saving ? 'Sauvegarde...' : 'Sauvegarder'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default RoleEditPage;
diff --git a/src/features/admin/pages/RolesPage.client.js b/src/features/admin/pages/RolesPage.client.js
index 02d4830..d3b7dd5 100644
--- a/src/features/admin/pages/RolesPage.client.js
+++ b/src/features/admin/pages/RolesPage.client.js
@@ -1,164 +1,195 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { Card, Table, Button, Badge } from '@zen/core/shared/components';
 import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 import AdminHeader from '../components/AdminHeader.js';
+import RoleEditModal from '../components/RoleEditModal.client.js';
 
 const RolesPageClient = () => {
-  const router = useRouter();
-  const toast = useToast();
-  const [roles, setRoles] = useState([]);
-  const [loading, setLoading] = useState(true);
+    const toast = useToast();
+    const [roles, setRoles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [editingRoleId, setEditingRoleId] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
 
-  const columns = [
-    {
-      key: 'name',
-      label: 'Rôle',
-      sortable: false,
-      render: (role) => (
-        <div className="flex items-center gap-2">
-          <span
-            className="inline-block w-3 h-3 rounded-full flex-shrink-0"
-            style={{ backgroundColor: role.color || '#6b7280' }}
-          />
-          <div>
-            <div className="text-sm font-medium text-neutral-900 dark:text-white">
-              {role.name}
-            </div>
-            {role.description && (
-              <div className="text-xs text-neutral-500 dark:text-gray-400">{role.description}</div>
-            )}
-          </div>
-        </div>
-      ),
-      skeleton: { height: 'h-4', width: '60%' }
-    },
-    {
-      key: 'permission_count',
-      label: 'Permissions',
-      sortable: false,
-      render: (role) => (
-        <span className="text-sm text-neutral-600 dark:text-gray-300">{role.permission_count}</span>
-      ),
-      skeleton: { height: 'h-4', width: '40px' }
-    },
-    {
-      key: 'user_count',
-      label: 'Utilisateurs',
-      sortable: false,
-      render: (role) => (
-        <span className="text-sm text-neutral-600 dark:text-gray-300">{role.user_count}</span>
-      ),
-      skeleton: { height: 'h-4', width: '40px' }
-    },
-    {
-      key: 'is_system',
-      label: 'Système',
-      sortable: false,
-      render: (role) => role.is_system ? <Badge variant="default" size="sm">système</Badge> : null,
-      skeleton: { height: 'h-4', width: '60px' }
-    },
-    {
-      key: 'actions',
-      label: '',
-      sortable: false,
-      noWrap: true,
-      render: (role) => (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={() => router.push(`/admin/roles/edit/${role.id}`)}
-            icon={<PencilEdit01Icon className="w-4 h-4" />}
-          >
-            Modifier
-          </Button>
-          {!role.is_system && (
-            <Button
-              variant="danger"
-              size="sm"
-              onClick={() => handleDelete(role)}
-              icon={<Cancel01Icon className="w-4 h-4" />}
-            >
-              Supprimer
-            </Button>
-          )}
-        </div>
-      ),
-      skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' }
-    }
-  ];
+    const openEdit = (roleId) => {
+        setEditingRoleId(roleId);
+        setModalOpen(true);
+    };
 
-  const fetchRoles = async () => {
-    setLoading(true);
-    try {
-      const response = await fetch('/zen/api/roles', { credentials: 'include' });
-      if (!response.ok) throw new Error(`Error: ${response.status}`);
-      const data = await response.json();
-      setRoles(data.roles);
-    } catch (err) {
-      toast.error(err.message || 'Impossible de charger les rôles');
-    } finally {
-      setLoading(false);
-    }
-  };
+    const closeModal = () => {
+        setModalOpen(false);
+        setEditingRoleId(null);
+    };
 
-  const handleDelete = async (role) => {
-    if (!confirm(`Supprimer le rôle "${role.name}" ?`)) return;
-    try {
-      const response = await fetch(`/zen/api/roles/${role.id}`, {
-        method: 'DELETE',
-        credentials: 'include'
-      });
-      const data = await response.json();
-      if (!response.ok) {
-        toast.error(data.message || 'Impossible de supprimer ce rôle');
-        return;
-      }
-      toast.success('Rôle supprimé');
-      fetchRoles();
-    } catch (err) {
-      toast.error('Impossible de supprimer ce rôle');
-    }
-  };
+    const columns = [
+        {
+            key: 'name',
+            label: 'Rôle',
+            sortable: false,
+            render: (role) => (
+                <div className="flex items-center gap-2">
+                    <span
+                        className="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: role.color || '#6b7280' }}
+                    />
+                    <div>
+                        <div className="text-sm font-medium text-neutral-900 dark:text-white">
+                            {role.name}
+                        </div>
+                        {role.description && (
+                            <div className="text-xs text-neutral-500 dark:text-gray-400">{role.description}</div>
+                        )}
+                    </div>
+                </div>
+            ),
+            skeleton: { height: 'h-4', width: '60%' },
+        },
+        {
+            key: 'permission_count',
+            label: 'Permissions',
+            sortable: false,
+            render: (role) => (
+                <span className="text-sm text-neutral-600 dark:text-gray-300">{role.permission_count}</span>
+            ),
+            skeleton: { height: 'h-4', width: '40px' },
+        },
+        {
+            key: 'user_count',
+            label: 'Utilisateurs',
+            sortable: false,
+            render: (role) => (
+                <span className="text-sm text-neutral-600 dark:text-gray-300">{role.user_count}</span>
+            ),
+            skeleton: { height: 'h-4', width: '40px' },
+        },
+        {
+            key: 'is_system',
+            label: 'Système',
+            sortable: false,
+            render: (role) => role.is_system ? <Badge variant="default" size="sm">système</Badge> : null,
+            skeleton: { height: 'h-4', width: '60px' },
+        },
+        {
+            key: 'actions',
+            label: '',
+            sortable: false,
+            noWrap: true,
+            render: (role) => (
+                <div className="flex items-center gap-2">
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => openEdit(role.id)}
+                        icon={<PencilEdit01Icon className="w-4 h-4" />}
+                    >
+                        Modifier
+                    </Button>
+                    {!role.is_system && (
+                        <Button
+                            variant="danger"
+                            size="sm"
+                            onClick={() => handleDelete(role)}
+                            icon={<Cancel01Icon className="w-4 h-4" />}
+                        >
+                            Supprimer
+                        </Button>
+                    )}
+                </div>
+            ),
+            skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' },
+        },
+    ];
 
-  useEffect(() => {
-    fetchRoles();
-  }, []);
+    const fetchRoles = async () => {
+        setLoading(true);
+        try {
+            const response = await fetch('/zen/api/roles', { credentials: 'include' });
+            if (!response.ok) throw new Error(`Error: ${response.status}`);
+            const data = await response.json();
+            setRoles(data.roles);
+        } catch (err) {
+            toast.error(err.message || 'Impossible de charger les rôles');
+        } finally {
+            setLoading(false);
+        }
+    };
 
-  return (
-    <Card variant="default" padding="none">
-      <Table
-        columns={columns}
-        data={roles}
-        loading={loading}
-        emptyMessage="Aucun rôle trouvé"
-        emptyDescription="Créez un rôle pour commencer"
-      />
-    </Card>
-  );
+    const handleDelete = async (role) => {
+        if (!confirm(`Supprimer le rôle "${role.name}" ?`)) return;
+        try {
+            const response = await fetch(`/zen/api/roles/${role.id}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                toast.error(data.message || 'Impossible de supprimer ce rôle');
+                return;
+            }
+            toast.success('Rôle supprimé');
+            fetchRoles();
+        } catch {
+            toast.error('Impossible de supprimer ce rôle');
+        }
+    };
+
+    useEffect(() => {
+        fetchRoles();
+    }, []);
+
+    return (
+        <>
+            <Card variant="default" padding="none">
+                <Table
+                    columns={columns}
+                    data={roles}
+                    loading={loading}
+                    emptyMessage="Aucun rôle trouvé"
+                    emptyDescription="Créez un rôle pour commencer"
+                />
+            </Card>
+
+            <RoleEditModal
+                roleId={editingRoleId}
+                isOpen={modalOpen}
+                onClose={closeModal}
+                onSaved={fetchRoles}
+            />
+        </>
+    );
 };
 
-const RolesPage = () => {
-  const router = useRouter();
-
-  return (
+const RolesPage = () => (
     <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <AdminHeader
-        title="Rôles"
-        description="Gérez les rôles et leurs permissions"
-        action={
-          <Button variant="primary" size="sm" onClick={() => router.push('/admin/roles/new')}>
-            Nouveau rôle
-          </Button>
-        }
-      />
-      <RolesPageClient />
+        <RolesPageHeader />
+        <RolesPageClient />
     </div>
-  );
+);
+
+const RolesPageHeader = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <AdminHeader
+                title="Rôles"
+                description="Gérez les rôles et leurs permissions"
+                action={
+                    <Button variant="primary" size="sm" onClick={() => setModalOpen(true)}>
+                        Nouveau rôle
+                    </Button>
+                }
+            />
+            <RoleEditModal
+                roleId="new"
+                isOpen={modalOpen}
+                onClose={() => setModalOpen(false)}
+            />
+        </>
+    );
 };
 
 export default RolesPage;
diff --git a/src/features/admin/pages/UserEditPage.client.js b/src/features/admin/pages/UserEditPage.client.js
deleted file mode 100644
index 04e7e05..0000000
--- a/src/features/admin/pages/UserEditPage.client.js
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
-import { useToast } from '@zen/core/toast';
-import AdminHeader from '../components/AdminHeader.js';
-
-const UserEditPage = ({ userId }) => {
-  const router = useRouter();
-  const toast = useToast();
-
-  const [userData, setUserData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  const [formData, setFormData] = useState({
-    name: '',
-    email_verified: 'false',
-  });
-  const [errors, setErrors] = useState({});
-
-  const [allRoles, setAllRoles] = useState([]);
-  const [selectedRoleIds, setSelectedRoleIds] = useState([]);
-  const [initialRoleIds, setInitialRoleIds] = useState([]);
-
-  const emailVerifiedOptions = [
-    { value: 'false', label: 'Non vérifié' },
-    { value: 'true', label: 'Vérifié' }
-  ];
-
-  useEffect(() => {
-    loadAll();
-  }, [userId]);
-
-  const loadAll = async () => {
-    try {
-      setLoading(true);
-      const [userRes, rolesRes, userRolesRes] = await Promise.all([
-        fetch(`/zen/api/users/${userId}`, { credentials: 'include' }),
-        fetch('/zen/api/roles', { credentials: 'include' }),
-        fetch(`/zen/api/users/${userId}/roles`, { credentials: 'include' }),
-      ]);
-
-      const [userData, rolesData, userRolesData] = await Promise.all([
-        userRes.json(),
-        rolesRes.json(),
-        userRolesRes.json(),
-      ]);
-
-      if (userData.user) {
-        setUserData(userData.user);
-        setFormData({
-          name: userData.user.name || '',
-          email_verified: userData.user.email_verified ? 'true' : 'false',
-        });
-      } else {
-        toast.error(userData.message || 'Utilisateur introuvable');
-      }
-
-      if (rolesData.roles) {
-        setAllRoles(rolesData.roles);
-      }
-
-      if (userRolesData.roles) {
-        const ids = userRolesData.roles.map(r => r.id);
-        setSelectedRoleIds(ids);
-        setInitialRoleIds(ids);
-      }
-    } catch {
-      toast.error("Impossible de charger l'utilisateur");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: null }));
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors = {};
-    if (!formData.name || !formData.name.trim()) {
-      newErrors.name = 'Le nom est requis';
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-
-    try {
-      setSaving(true);
-
-      const userRes = await fetch(`/zen/api/users/${userId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({
-          name: formData.name.trim(),
-          email_verified: formData.email_verified === 'true',
-        })
-      });
-      const userResData = await userRes.json();
-      if (!userRes.ok) {
-        toast.error(userResData.message || userResData.error || "Impossible de mettre à jour l'utilisateur");
-        return;
-      }
-
-      const toAdd = selectedRoleIds.filter(id => !initialRoleIds.includes(id));
-      const toRemove = initialRoleIds.filter(id => !selectedRoleIds.includes(id));
-
-      await Promise.all([
-        ...toAdd.map(roleId =>
-          fetch(`/zen/api/users/${userId}/roles`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'include',
-            body: JSON.stringify({ roleId }),
-          })
-        ),
-        ...toRemove.map(roleId =>
-          fetch(`/zen/api/users/${userId}/roles/${roleId}`, {
-            method: 'DELETE',
-            credentials: 'include',
-          })
-        ),
-      ]);
-
-      toast.success('Utilisateur mis à jour avec succès');
-      router.push('/admin/users');
-    } catch {
-      toast.error("Impossible de mettre à jour l'utilisateur");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const roleOptions = allRoles.map(r => ({
-    value: r.id,
-    label: r.name,
-    color: r.color || '#6b7280',
-    description: r.description || undefined,
-  }));
-
-  if (loading) {
-    return (
-      <div className="min-h-64 flex items-center justify-center">
-        <Loading />
-      </div>
-    );
-  }
-
-  if (!userData) {
-    return (
-      <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-        <AdminHeader
-          title="Modifier l'utilisateur"
-          description="Utilisateur introuvable"
-          backHref="/admin/users"
-          backLabel="← Retour aux utilisateurs"
-        />
-        <Card>
-          <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
-            <p className="font-medium">Utilisateur introuvable</p>
-            <p className="text-sm mt-1">L'utilisateur que vous recherchez n'existe pas ou a été supprimé.</p>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <AdminHeader
-        title="Modifier l'utilisateur"
-        description={userData.email}
-        backHref="/admin/users"
-        backLabel="← Retour aux utilisateurs"
-      />
-
-      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
-        <Card variant="default" padding="md">
-          <div className="flex flex-col gap-4">
-            <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Informations</h2>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <Input
-                label="Nom *"
-                value={formData.name}
-                onChange={(value) => handleInputChange('name', value)}
-                placeholder="Nom de l'utilisateur"
-                error={errors.name}
-              />
-
-              <Input
-                label="Email"
-                value={userData.email}
-                disabled
-              />
-
-              <Select
-                label="Email vérifié"
-                value={formData.email_verified}
-                onChange={(value) => handleInputChange('email_verified', value)}
-                options={emailVerifiedOptions}
-              />
-            </div>
-          </div>
-        </Card>
-
-        <Card variant="default" padding="md">
-          <div className="flex flex-col gap-4">
-            <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Rôles</h2>
-
-            <TagInput
-              label="Rôles attribués"
-              options={roleOptions}
-              value={selectedRoleIds}
-              onChange={setSelectedRoleIds}
-              placeholder="Rechercher un rôle..."
-            />
-          </div>
-        </Card>
-
-        <div className="flex items-center justify-end gap-3">
-          <Button type="button" variant="secondary" onClick={() => router.push('/admin/users')} disabled={saving}>
-            Annuler
-          </Button>
-          <Button type="submit" variant="success" loading={saving} disabled={saving}>
-            {saving ? 'Enregistrement...' : 'Mettre à jour'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default UserEditPage;
diff --git a/src/features/admin/pages/UsersPage.client.js b/src/features/admin/pages/UsersPage.client.js
index df56ab5..3e5e545 100644
--- a/src/features/admin/pages/UsersPage.client.js
+++ b/src/features/admin/pages/UsersPage.client.js
@@ -1,32 +1,29 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 import AdminHeader from '../components/AdminHeader.js';
+import UserEditModal from '../components/UserEditModal.client.js';
 
 const UsersPageClient = () => {
-    const router = useRouter();
     const toast = useToast();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
     const [roleColorMap, setRoleColorMap] = useState({});
-    
-    // Pagination state
+    const [editingUserId, setEditingUserId] = useState(null);
+
     const [pagination, setPagination] = useState({
         page: 1,
         limit: 20,
         total: 0,
-        totalPages: 0
+        totalPages: 0,
     });
 
-    // Sort state
     const [sortBy, setSortBy] = useState('created_at');
     const [sortOrder, setSortOrder] = useState('desc');
 
-    // Table columns configuration
     const columns = [
         {
             key: 'name',
@@ -43,8 +40,8 @@ const UsersPageClient = () => {
             ),
             skeleton: {
                 height: 'h-4', width: '60%',
-                secondary: { height: 'h-3', width: '40%' }
-            }
+                secondary: { height: 'h-3', width: '40%' },
+            },
         },
         {
             key: 'role',
@@ -55,14 +52,14 @@ const UsersPageClient = () => {
                     {user.role}
                 </Badge>
             ),
-            skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' }
+            skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' },
         },
         {
             key: 'email_verified',
             label: 'Statut',
             sortable: true,
             render: (user) => <StatusBadge status={user.email_verified ? 'verified' : 'unverified'} />,
-            skeleton: { height: 'h-6', width: '90px', className: 'rounded-full' }
+            skeleton: { height: 'h-6', width: '90px', className: 'rounded-full' },
         },
         {
             key: 'created_at',
@@ -73,7 +70,7 @@ const UsersPageClient = () => {
                     {formatDate(user.created_at)}
                 </span>
             ),
-            skeleton: { height: 'h-4', width: '70%' }
+            skeleton: { height: 'h-4', width: '70%' },
         },
         {
             key: 'actions',
@@ -84,35 +81,28 @@ const UsersPageClient = () => {
                 <Button
                     variant="secondary"
                     size="sm"
-                    onClick={() => router.push(`/admin/users/edit/${user.id}`)}
+                    onClick={() => setEditingUserId(user.id)}
                     icon={<PencilEdit01Icon className="w-4 h-4" />}
                 >
                     Modifier
                 </Button>
             ),
-            skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' }
-        }
+            skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' },
+        },
     ];
 
-    // Fetch users function
     const fetchUsers = async () => {
         setLoading(true);
-        
         try {
             const searchParams = new URLSearchParams({
                 page: pagination.page.toString(),
                 limit: pagination.limit.toString(),
                 sortBy,
-                sortOrder
+                sortOrder,
             });
 
-            const response = await fetch(`/zen/api/users?${searchParams}`, {
-                credentials: 'include'
-            });
-            
-            if (!response.ok) {
-                throw new Error(`Error: ${response.status}`);
-            }
+            const response = await fetch(`/zen/api/users?${searchParams}`, { credentials: 'include' });
+            if (!response.ok) throw new Error(`Error: ${response.status}`);
 
             const data = await response.json();
             setUsers(data.users);
@@ -120,11 +110,10 @@ const UsersPageClient = () => {
                 ...prev,
                 total: data.pagination.total,
                 totalPages: data.pagination.totalPages,
-                page: data.pagination.page
+                page: data.pagination.page,
             }));
         } catch (err) {
             toast.error(err.message || 'Impossible de charger les utilisateurs');
-            console.error('Error fetching users:', err);
         } finally {
             setLoading(false);
         }
@@ -143,32 +132,18 @@ const UsersPageClient = () => {
             .catch(() => {});
     }, []);
 
-    // Effect to fetch users when sort or pagination change
     useEffect(() => {
         fetchUsers();
     }, [sortBy, sortOrder, pagination.page, pagination.limit]);
 
-    // Handle pagination
-    const handlePageChange = (newPage) => {
-        setPagination(prev => ({ ...prev, page: newPage }));
-    };
-
-    const handleLimitChange = (newLimit) => {
-        setPagination(prev => ({ 
-            ...prev, 
-            limit: newLimit, 
-            page: 1 // Reset to first page when changing limit
-        }));
-    };
-
-    // Handle sorting
+    const handlePageChange = (newPage) => setPagination(prev => ({ ...prev, page: newPage }));
+    const handleLimitChange = (newLimit) => setPagination(prev => ({ ...prev, limit: newLimit, page: 1 }));
     const handleSort = (newSortBy) => {
         const newSortOrder = sortBy === newSortBy && sortOrder === 'asc' ? 'desc' : 'asc';
         setSortBy(newSortBy);
         setSortOrder(newSortOrder);
     };
 
-    // Format date helper
     const formatDate = (dateString) => {
         if (!dateString) return 'N/A';
         try {
@@ -177,7 +152,7 @@ const UsersPageClient = () => {
                 month: '2-digit',
                 year: 'numeric',
                 hour: '2-digit',
-                minute: '2-digit'
+                minute: '2-digit',
             });
         } catch {
             return 'Date invalide';
@@ -185,8 +160,7 @@ const UsersPageClient = () => {
     };
 
     return (
-        <div className="flex flex-col gap-6">
-            {/* Users Table */}
+        <>
             <Card variant="default" padding="none">
                 <Table
                     columns={columns}
@@ -205,17 +179,22 @@ const UsersPageClient = () => {
                     total={pagination.total}
                 />
             </Card>
-        </div>
+
+            <UserEditModal
+                userId={editingUserId}
+                isOpen={!!editingUserId}
+                onClose={() => setEditingUserId(null)}
+                onSaved={fetchUsers}
+            />
+        </>
     );
 };
 
-const UsersPage = () => {
-    return (
-        <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-            <AdminHeader title="Utilisateurs" description="Gérez les comptes utilisateurs" />
-            <UsersPageClient />
-        </div>
-    );
-};
+const UsersPage = () => (
+    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
+        <AdminHeader title="Utilisateurs" description="Gérez les comptes utilisateurs" />
+        <UsersPageClient />
+    </div>
+);
 
 export default UsersPage;
diff --git a/src/features/admin/pages/index.client.js b/src/features/admin/pages/index.client.js
index 5355c80..1af62b5 100644
--- a/src/features/admin/pages/index.client.js
+++ b/src/features/admin/pages/index.client.js
@@ -3,17 +3,10 @@
 import { registerPage } from '../registry.js';
 import DashboardPage from './DashboardPage.client.js';
 import UsersPage from './UsersPage.client.js';
-import UserEditPage from './UserEditPage.client.js';
 import RolesPage from './RolesPage.client.js';
-import RoleEditPage from './RoleEditPage.client.js';
 import ProfilePage from './ProfilePage.client.js';
 
-// Pages core — le slug correspond au premier segment après /admin/. Les
-// routes paramétrées (users/edit/:id, roles/edit/:id, roles/new) sont
-// résolues dans AdminPage.client.js via le slug "namespace:form".
-registerPage({ slug: 'dashboard',  Component: DashboardPage, title: 'Tableau de bord' });
-registerPage({ slug: 'users',      Component: UsersPage,     title: 'Utilisateurs' });
-registerPage({ slug: 'roles',      Component: RolesPage,     title: 'Rôles' });
-registerPage({ slug: 'profile',    Component: ProfilePage,   title: 'Profil' });
-registerPage({ slug: 'users:edit', Component: UserEditPage,  title: 'Modifier utilisateur', breadcrumbLabel: 'Modifier' });
-registerPage({ slug: 'roles:edit', Component: RoleEditPage,  title: 'Modifier rôle',         breadcrumbLabel: 'Modifier' });
+registerPage({ slug: 'dashboard', Component: DashboardPage, title: 'Tableau de bord' });
+registerPage({ slug: 'users',     Component: UsersPage,     title: 'Utilisateurs' });
+registerPage({ slug: 'roles',     Component: RolesPage,     title: 'Rôles' });
+registerPage({ slug: 'profile',   Component: ProfilePage,   title: 'Profil' });
diff --git a/src/shared/components/Modal.js b/src/shared/components/Modal.js
index 593f498..b7fcdbd 100644
--- a/src/shared/components/Modal.js
+++ b/src/shared/components/Modal.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { Dialog } from '@headlessui/react';
 import { Cancel01Icon } from '../icons/index.js';
-import Button from './Button';
+import Button from './Button.js';
+
+const FORM_ID = 'modal-form-inner';
 
 const Modal = ({
     isOpen = true,
@@ -10,19 +12,56 @@ const Modal = ({
     children,
     footer,
     size = 'lg',
-    closable = true
+    closable = true,
+    // Form props — when provided, wraps children in a <form> and shows a standard footer
+    onSubmit,
+    submitLabel = 'Enregistrer',
+    cancelLabel = 'Annuler',
+    submitVariant = 'primary',
+    loading = false,
+    disabled = false,
 }) => {
     const sizeClasses = {
         sm: 'max-w-md',
         md: 'max-w-lg',
         lg: 'max-w-2xl',
         xl: 'max-w-4xl',
-        full: 'max-w-7xl'
+        full: 'max-w-7xl',
     };
 
+    const isForm = typeof onSubmit === 'function';
+
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(e);
+    };
+
+    const resolvedFooter = footer ?? (isForm ? (
+        <div className="flex items-center justify-end gap-2">
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClose}
+                disabled={loading}
+            >
+                {cancelLabel}
+            </Button>
+            <Button
+                type="submit"
+                form={FORM_ID}
+                variant={submitVariant}
+                size="sm"
+                loading={loading}
+                disabled={disabled || loading}
+            >
+                {submitLabel}
+            </Button>
+        </div>
+    ) : null);
+
     return (
-        <Dialog 
-            open={isOpen} 
+        <Dialog
+            open={isOpen}
             onClose={closable ? onClose : () => {}}
             className="relative z-50"
         >
@@ -31,14 +70,14 @@ const Modal = ({
 
             {/* Container */}
             <div className="fixed inset-0 flex items-center justify-center p-4">
-                <Dialog.Panel 
+                <Dialog.Panel
                     className={`
                         w-full ${sizeClasses[size]}
                         bg-white dark:bg-neutral-900
                         border border-neutral-200 dark:border-neutral-800
                         rounded-lg
-                        shadow-xl 
-                        max-h-[90vh] 
+                        shadow-xl
+                        max-h-[90vh]
                         overflow-hidden
                         flex flex-col
                     `}
@@ -61,13 +100,17 @@ const Modal = ({
 
                     {/* Content */}
                     <div className="flex-1 overflow-y-auto p-4">
-                        {children}
+                        {isForm ? (
+                            <form id={FORM_ID} onSubmit={handleFormSubmit} noValidate>
+                                {children}
+                            </form>
+                        ) : children}
                     </div>
 
                     {/* Footer */}
-                    {footer && (
+                    {resolvedFooter && (
                         <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
-                            {footer}
+                            {resolvedFooter}
                         </div>
                     )}
                 </Dialog.Panel>
@@ -76,4 +119,4 @@ const Modal = ({
     );
 };
 
-export default Modal; 
\ No newline at end of file
+export default Modal;