refactor(admin): remove group toggle feature and simplify permissions UI in RoleEditPage

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Button, Card, Input, Select, Loading, Switch } from '@zen/core/shared/components';
+import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 
 const UserEditPage = ({ userId }) => {
@@ -80,12 +80,6 @@ const UserEditPage = ({ userId }) => {
     }
   };
 
-  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()) {
@@ -146,6 +140,13 @@ const UserEditPage = ({ userId }) => {
     }
   };
 
+  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">
@@ -219,33 +220,16 @@ const UserEditPage = ({ userId }) => {
         </Card>
 
         <Card variant="default" padding="md">
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-4">
             <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>
-            )}
+            <TagInput
+              label="Rôles attribués"
+              options={roleOptions}
+              value={selectedRoleIds}
+              onChange={setSelectedRoleIds}
+              placeholder="Rechercher un rôle..."
+            />
           </div>
         </Card>