From dcd4d9b9f9815e9b0f7e43b6a0b0a5a5850b1f4d Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Sun, 19 Apr 2026 16:56:50 -0400
Subject: [PATCH] refactor(admin): replace raw form elements with shared Input,
 Textarea, and Switch components in RoleEditPage

---
 .../admin/components/pages/RoleEditPage.js    | 176 +++----
 .../admin/components/pages/RolesPage.js       |   8 +-
 .../admin/components/pages/UserEditPage.js    | 444 ++++++++++--------
 src/features/auth/api.js                      |   9 +-
 src/shared/components/Switch.js               |  46 ++
 src/shared/components/index.js                |   1 +
 6 files changed, 375 insertions(+), 309 deletions(-)
 create mode 100644 src/shared/components/Switch.js

diff --git a/src/features/admin/components/pages/RoleEditPage.js b/src/features/admin/components/pages/RoleEditPage.js
index 4ffa0b9..86229a3 100644
--- a/src/features/admin/components/pages/RoleEditPage.js
+++ b/src/features/admin/components/pages/RoleEditPage.js
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, Button } from '@zen/core/shared/components';
+import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 import { getPermissionGroups } from '@zen/core/users/constants';
 
@@ -41,7 +41,7 @@ const RoleEditPage = ({ roleId }) => {
         setColor(role.color || '#6b7280');
         setSelectedPerms(role.permission_keys || []);
         setIsSystem(role.is_system || false);
-      } catch (err) {
+      } catch {
         toast.error('Impossible de charger ce rôle');
         router.push('/admin/roles');
       } finally {
@@ -81,9 +81,12 @@ const RoleEditPage = ({ roleId }) => {
       const url = isCreating ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
       const method = isCreating ? 'POST' : 'PUT';
 
-      const body = isCreating
-        ? { name: name.trim(), description: description.trim() || null, color }
-        : { name: name.trim(), description: description.trim() || null, color, permissionKeys: selectedPerms };
+      const body = {
+        name: name.trim(),
+        description: description.trim() || null,
+        color,
+        permissionKeys: selectedPerms,
+      };
 
       const response = await fetch(url, {
         method,
@@ -99,14 +102,8 @@ const RoleEditPage = ({ roleId }) => {
       }
 
       toast.success(isCreating ? 'Rôle créé' : 'Rôle mis à jour');
-
-      // After creating, redirect to edit page so permissions can be set
-      if (isCreating && data.role?.id) {
-        router.push(`/admin/roles/edit/${data.role.id}`);
-      } else {
-        router.push('/admin/roles');
-      }
-    } catch (err) {
+      router.push('/admin/roles');
+    } catch {
       toast.error('Impossible de sauvegarder ce rôle');
     } finally {
       setSaving(false);
@@ -117,7 +114,7 @@ const RoleEditPage = ({ roleId }) => {
     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="default">
+        <Card variant="default" padding="md">
           <div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
         </Card>
       </div>
@@ -141,37 +138,26 @@ const RoleEditPage = ({ roleId }) => {
       </div>
 
       <form onSubmit={handleSubmit} className="flex flex-col gap-6">
-        {/* Basic info */}
-        <Card variant="default" padding="default">
+        <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="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                Nom du rôle
-              </label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                disabled={isSystem}
-                placeholder="Éditeur, Modérateur..."
-                className="w-full px-3 py-2 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
+            <Input
+              label="Nom du rôle"
+              value={name}
+              onChange={setName}
+              disabled={isSystem}
+              placeholder="Éditeur, Modérateur..."
+              required
+            />
 
-            <div className="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                Description
-              </label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={2}
-                placeholder="Description optionnelle..."
-                className="w-full px-3 py-2 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
-              />
-            </div>
+            <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">
@@ -188,75 +174,65 @@ const RoleEditPage = ({ roleId }) => {
           </div>
         </Card>
 
-        {/* Permissions — only shown when editing, not when creating */}
-        {!isNewRole(roleId) && (
-          <Card variant="default" padding="default">
-            <div className="flex flex-col gap-4">
-              <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Permissions</h2>
+        <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]) => {
-                const groupKeys = perms.map(p => p.key);
-                const allSelected = groupKeys.every(k => selectedPerms.includes(k));
-                const someSelected = groupKeys.some(k => selectedPerms.includes(k));
+            {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => {
+              const groupKeys = perms.map(p => p.key);
+              const allSelected = groupKeys.every(k => selectedPerms.includes(k));
+              const someSelected = groupKeys.some(k => selectedPerms.includes(k));
 
-                return (
-                  <div key={group} className="flex flex-col gap-2">
-                    <button
-                      type="button"
-                      onClick={() => toggleGroup(group)}
-                      className="flex items-center gap-2 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide hover:text-neutral-700 dark:hover:text-neutral-200 text-left"
+              return (
+                <div key={group} className="flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => toggleGroup(group)}
+                    className="flex items-center gap-2 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide hover:text-neutral-700 dark:hover:text-neutral-200 text-left py-1"
+                  >
+                    <span
+                      className={`w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 ${
+                        allSelected
+                          ? 'bg-blue-600 border-blue-600'
+                          : someSelected
+                          ? 'bg-blue-200 border-blue-400 dark:bg-blue-900 dark:border-blue-500'
+                          : 'border-neutral-300 dark:border-neutral-600'
+                      }`}
                     >
-                      <span
-                        className={`w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 ${
-                          allSelected
-                            ? 'bg-blue-600 border-blue-600'
-                            : someSelected
-                            ? 'bg-blue-200 border-blue-400 dark:bg-blue-900 dark:border-blue-500'
-                            : 'border-neutral-300 dark:border-neutral-600'
-                        }`}
-                      >
-                        {allSelected && (
-                          <svg className="w-2 h-2 text-white" viewBox="0 0 10 8" fill="none">
-                            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                          </svg>
-                        )}
-                        {someSelected && !allSelected && (
-                          <span className="w-1.5 h-0.5 bg-blue-600 dark:bg-blue-400 rounded" />
-                        )}
-                      </span>
-                      {group}
-                    </button>
+                      {allSelected && (
+                        <svg className="w-2 h-2 text-white" viewBox="0 0 10 8" fill="none">
+                          <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                      )}
+                      {someSelected && !allSelected && (
+                        <span className="w-1.5 h-0.5 bg-blue-600 dark:bg-blue-400 rounded" />
+                      )}
+                    </span>
+                    {group}
+                  </button>
 
-                    <div className="flex flex-col gap-1 pl-5">
-                      {perms.map((perm) => (
-                        <label
-                          key={perm.key}
-                          className="flex items-center gap-2.5 cursor-pointer group"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={selectedPerms.includes(perm.key)}
-                            onChange={() => togglePerm(perm.key)}
-                            className="w-3.5 h-3.5 rounded border-neutral-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500"
-                          />
-                          <span className="text-sm text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-white">
-                            {perm.name}
-                          </span>
-                        </label>
-                      ))}
-                    </div>
+                  <div className="flex flex-col pl-5 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>
-          </Card>
-        )}
+                </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" disabled={saving}>
+          <Button variant="primary" type="submit" loading={saving} disabled={saving}>
             {saving ? 'Sauvegarde...' : 'Sauvegarder'}
           </Button>
         </div>
diff --git a/src/features/admin/components/pages/RolesPage.js b/src/features/admin/components/pages/RolesPage.js
index e470798..422dc06 100644
--- a/src/features/admin/components/pages/RolesPage.js
+++ b/src/features/admin/components/pages/RolesPage.js
@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, Table, Button } from '@zen/core/shared/components';
+import { Card, Table, Button, Badge } from '@zen/core/shared/components';
 import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 
@@ -30,9 +30,7 @@ const RolesPageClient = () => {
             )}
           </div>
           {role.is_system && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-400">
-              système
-            </span>
+            <Badge variant="default" size="sm">Système</Badge>
           )}
         </div>
       ),
diff --git a/src/features/admin/components/pages/UserEditPage.js b/src/features/admin/components/pages/UserEditPage.js
index 8dd23c6..2054bb7 100644
--- a/src/features/admin/components/pages/UserEditPage.js
+++ b/src/features/admin/components/pages/UserEditPage.js
@@ -1,225 +1,265 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Button, Card, Input, Select, Loading } from '@zen/core/shared/components';
+import { Button, Card, Input, Select, Loading, Switch } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 
-/**
- * User Edit Page Component
- * Page for editing an existing user (admin only)
- */
-const UserEditPage = ({ userId, user }) => {
-    const router = useRouter();
-    const toast = useToast();
+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: '',
-        role: 'user',
-        email_verified: 'false',
-    });
-    const [errors, setErrors] = useState({});
+  const [userData, setUserData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
 
-    const roleOptions = [
-        { value: 'user', label: 'Utilisateur' },
-        { value: 'admin', label: 'Admin' }
-    ];
+  const [formData, setFormData] = useState({
+    name: '',
+    email_verified: 'false',
+  });
+  const [errors, setErrors] = useState({});
 
-    const emailVerifiedOptions = [
-        { value: 'false', label: 'Non vérifié' },
-        { value: 'true', label: 'Vérifié' }
-    ];
+  const [allRoles, setAllRoles] = useState([]);
+  const [selectedRoleIds, setSelectedRoleIds] = useState([]);
+  const [initialRoleIds, setInitialRoleIds] = useState([]);
 
-    useEffect(() => {
-        loadUser();
-    }, [userId]);
+  const emailVerifiedOptions = [
+    { value: 'false', label: 'Non vérifié' },
+    { value: 'true', label: 'Vérifié' }
+  ];
 
-    const loadUser = async () => {
-        try {
-            setLoading(true);
-            const response = await fetch(`/zen/api/users/${userId}`, {
-                credentials: 'include'
-            });
-            const data = await response.json();
+  useEffect(() => {
+    loadAll();
+  }, [userId]);
 
-            if (data.user) {
-                setUserData(data.user);
-                setFormData(prev => ({
-                    ...prev,
-                    name: data.user.name || '',
-                    role: data.user.role || 'user',
-                    email_verified: data.user.email_verified ? 'true' : 'false',
-                }));
-            } else {
-                toast.error(data.message || 'Utilisateur introuvable');
-            }
-        } catch (error) {
-            console.error('Error loading user:', error);
-            toast.error('Impossible de charger l\'utilisateur');
-        } finally {
-            setLoading(false);
-        }
-    };
+  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 handleInputChange = (field, value) => {
-        setFormData(prev => ({ ...prev, [field]: value }));
-        if (errors[field]) {
-            setErrors(prev => ({ ...prev, [field]: null }));
-        }
-    };
+      const [userData, rolesData, userRolesData] = await Promise.all([
+        userRes.json(),
+        rolesRes.json(),
+        userRolesRes.json(),
+      ]);
 
-    const validateForm = () => {
-        const newErrors = {};
-        if (!formData.name || !formData.name.trim()) {
-            newErrors.name = 'Le nom est requis';
-        }
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
+      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');
+      }
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!validateForm()) return;
+      if (rolesData.roles) {
+        setAllRoles(rolesData.roles);
+      }
 
-        try {
-            setSaving(true);
-            const response = await fetch(`/zen/api/users/${userId}`, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({
-                    name: formData.name.trim(),
-                    role: formData.role,
-                    email_verified: formData.email_verified === 'true',
-                })
-            });
-            const data = await response.json();
-
-            if (data.success) {
-                toast.success('Utilisateur mis à jour avec succès');
-                router.push('/admin/users');
-            } else {
-                toast.error(data.message || data.error || 'Impossible de mettre à jour l\'utilisateur');
-            }
-        } catch (error) {
-            console.error('Error updating user:', error);
-            toast.error('Impossible de mettre à jour l\'utilisateur');
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    if (loading) {
-        return (
-            <div className="min-h-64 flex items-center justify-center">
-                <Loading />
-            </div>
-        );
+      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);
     }
+  };
 
-    if (!userData) {
-        return (
-            <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-                <div className="flex items-center justify-between">
-                    <div>
-                        <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
-                        <p className="mt-1 text-xs text-neutral-400">Utilisateur introuvable</p>
-                    </div>
-                    <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => router.push('/admin/users')}
-                    >
-                        ← Retour aux utilisateurs
-                    </Button>
-                </div>
-                <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>
-        );
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: null }));
     }
+  };
 
-    return (
-        <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-            <div className="flex items-center justify-between">
-                <div>
-                    <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
-                    <p className="mt-1 text-xs text-neutral-400">{userData.email}</p>
-                </div>
-                <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => router.push('/admin/users')}
-                >
-                    ← Retour aux utilisateurs
-                </Button>
-            </div>
-
-            <form onSubmit={handleSubmit} className="space-y-6">
-                <Card>
-                    <div className="space-y-4">
-                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Informations de l'utilisateur</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="Rôle"
-                                value={formData.role}
-                                onChange={(value) => handleInputChange('role', value)}
-                                options={roleOptions}
-                            />
-
-                            <Select
-                                label="Email vérifié"
-                                value={formData.email_verified}
-                                onChange={(value) => handleInputChange('email_verified', value)}
-                                options={emailVerifiedOptions}
-                            />
-                        </div>
-                    </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>
+  const toggleRole = (roleId) => {
+    setSelectedRoleIds(prev =>
+      prev.includes(roleId) ? prev.filter(id => id !== roleId) : [...prev, roleId]
     );
+  };
+
+  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);
+    }
+  };
+
+  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">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
+            <p className="mt-1 text-xs text-neutral-400">Utilisateur introuvable</p>
+          </div>
+          <Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
+            ← Retour aux utilisateurs
+          </Button>
+        </div>
+        <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">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
+          <p className="mt-1 text-xs text-neutral-400">{userData.email}</p>
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
+          ← Retour aux utilisateurs
+        </Button>
+      </div>
+
+      <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-2">
+            <h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Rôles</h2>
+            <p className="text-xs text-neutral-400 mb-2">Activez les rôles à attribuer à cet utilisateur.</p>
+
+            {allRoles.length === 0 ? (
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">Aucun rôle disponible</p>
+            ) : (
+              <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
+                {allRoles.map((role) => (
+                  <Switch
+                    key={role.id}
+                    checked={selectedRoleIds.includes(role.id)}
+                    onChange={() => toggleRole(role.id)}
+                    label={
+                      <span className="flex items-center gap-2">
+                        <span
+                          className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0"
+                          style={{ backgroundColor: role.color || '#6b7280' }}
+                        />
+                        {role.name}
+                      </span>
+                    }
+                    description={role.description || undefined}
+                  />
+                ))}
+              </div>
+            )}
+          </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/auth/api.js b/src/features/auth/api.js
index 10b65f3..6dd5c2e 100644
--- a/src/features/auth/api.js
+++ b/src/features/auth/api.js
@@ -401,7 +401,7 @@ async function handleListRoles() {
 async function handleCreateRole(request) {
   try {
     const body = await request.json();
-    const { name, description, color } = body;
+    const { name, description, color, permissionKeys } = body;
 
     if (!name || !String(name).trim()) {
       return apiError('Bad Request', 'Role name is required');
@@ -413,7 +413,12 @@ async function handleCreateRole(request) {
       color: color ? String(color) : '#6b7280'
     });
 
-    return apiSuccess({ role });
+    if (Array.isArray(permissionKeys) && permissionKeys.length > 0) {
+      const updatedRole = await updateRole(role.id, { permissionKeys });
+      return apiSuccess({ role: updatedRole });
+    }
+
+    return apiSuccess({ role: { ...role, permission_keys: [] } });
   } catch (error) {
     if (error.message === 'Role name is required') return apiError('Bad Request', error.message);
     logAndObscureError(error, null);
diff --git a/src/shared/components/Switch.js b/src/shared/components/Switch.js
new file mode 100644
index 0000000..d79ca12
--- /dev/null
+++ b/src/shared/components/Switch.js
@@ -0,0 +1,46 @@
+'use client';
+
+const Switch = ({
+  checked = false,
+  onChange,
+  label,
+  description,
+  disabled = false,
+}) => {
+  return (
+    <div
+      className={`flex items-center justify-between gap-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+      onClick={() => !disabled && onChange?.(!checked)}
+    >
+      <div className="flex flex-col gap-0.5 min-w-0">
+        {label && (
+          <span className="text-sm text-neutral-900 dark:text-white select-none">{label}</span>
+        )}
+        {description && (
+          <span className="text-xs text-neutral-500 dark:text-neutral-400 select-none">{description}</span>
+        )}
+      </div>
+
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked); }}
+        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
+          checked
+            ? 'bg-blue-600'
+            : 'bg-neutral-300 dark:bg-neutral-600'
+        } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+      >
+        <span
+          className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
+            checked ? 'translate-x-5' : 'translate-x-0'
+          }`}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default Switch;
diff --git a/src/shared/components/index.js b/src/shared/components/index.js
index 21a605e..b95cf2e 100644
--- a/src/shared/components/index.js
+++ b/src/shared/components/index.js
@@ -25,3 +25,4 @@ export { default as MarkdownEditor } from './MarkdownEditor';
 export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator';
 export { default as FilterTabs } from './FilterTabs';
 export { default as Breadcrumb } from './Breadcrumb';
+export { default as Switch } from './Switch';