feat(users): refactor users system

src/features/admin/components/AdminPages.js

@@ -4,6 +4,8 @@ import DashboardPage from './pages/DashboardPage.js';
 import UsersPage from './pages/UsersPage.js';
 import UserEditPage from './pages/UserEditPage.js';
 import ProfilePage from './pages/ProfilePage.js';
+import RolesPage from './pages/RolesPage.js';
+import RoleEditPage from './pages/RoleEditPage.js';
 
 export default function AdminPagesClient({ params, user, dashboardStats = null }) {
   const parts = params?.admin || [];
@@ -13,10 +15,19 @@ export default function AdminPagesClient({ params, user, dashboardStats = null }
     return <UserEditPage userId={parts[2]} user={user} />;
   }
 
+  if (page === 'roles' && parts[1] === 'edit' && parts[2]) {
+    return <RoleEditPage roleId={parts[2]} user={user} />;
+  }
+
+  if (page === 'roles' && parts[1] === 'new') {
+    return <RoleEditPage roleId="new" user={user} />;
+  }
+
   const corePages = {
     dashboard: () => <DashboardPage user={user} stats={dashboardStats} />,
     users: () => <UsersPage user={user} />,
     profile: () => <ProfilePage user={user} />,
+    roles: () => <RolesPage user={user} />,
   };
 
   const CorePageComponent = corePages[page];

src/features/admin/components/pages/RoleEditPage.js

@@ -0,0 +1,268 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, Button } from '@zen/core/shared/components';
+import { useToast } from '@zen/core/toast';
+import { getPermissionGroups } from '@zen/core/users/constants';
+
+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 (err) {
+        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 toggleGroup = (group) => {
+    const groupKeys = PERMISSION_GROUPS[group].map(p => p.key);
+    const allSelected = groupKeys.every(k => selectedPerms.includes(k));
+    if (allSelected) {
+      setSelectedPerms(prev => prev.filter(k => !groupKeys.includes(k)));
+    } else {
+      setSelectedPerms(prev => [...new Set([...prev, ...groupKeys])]);
+    }
+  };
+
+  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 = isCreating
+        ? { name: name.trim(), description: description.trim() || null, color }
+        : { 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');
+
+      // 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) {
+      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="default">
+          <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">
+      <div className="flex items-center gap-3">
+        <Button variant="secondary" size="sm" onClick={() => router.push('/admin/roles')}>
+          ← Retour
+        </Button>
+        <div>
+          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
+          {isSystem && (
+            <p className="mt-1 text-xs text-neutral-400">Rôle système — le nom ne peut pas être modifié</p>
+          )}
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+        {/* Basic info */}
+        <Card variant="default" padding="default">
+          <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>
+
+            <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>
+
+            <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>
+
+        {/* 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>
+
+              {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"
+                    >
+                      <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>
+
+                    <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>
+                );
+              })}
+            </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}>
+            {saving ? 'Sauvegarde...' : 'Sauvegarder'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default RoleEditPage;

src/features/admin/components/pages/RolesPage.js

@@ -0,0 +1,163 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, Table, Button } from '@zen/core/shared/components';
+import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
+import { useToast } from '@zen/core/toast';
+
+const RolesPageClient = () => {
+  const router = useRouter();
+  const toast = useToast();
+  const [roles, setRoles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  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>
+          {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>
+          )}
+        </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: '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 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 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');
+    }
+  };
+
+  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>
+  );
+};
+
+const RolesPage = () => {
+  const router = useRouter();
+
+  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">Rôles</h1>
+          <p className="mt-1 text-xs text-neutral-400">Gérez les rôles et leurs permissions</p>
+        </div>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => router.push('/admin/roles/new')}
+        >
+          Nouveau rôle
+        </Button>
+      </div>
+      <RolesPageClient />
+    </div>
+  );
+};
+
+export default RolesPage;