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

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

@@ -58,16 +58,6 @@ const RoleEditPage = ({ roleId }) => {
     );
   };
 
-  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()) {
@@ -178,53 +168,24 @@ const RoleEditPage = ({ roleId }) => {
           <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]) => {
+            {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
-              const groupKeys = perms.map(p => p.key);
+              <div key={group} className="flex flex-col">
-              const allSelected = groupKeys.every(k => selectedPerms.includes(k));
+                <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
-              const someSelected = groupKeys.some(k => selectedPerms.includes(k));
+                  {group}
-
+                </p>
-              return (
+                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
-                <div key={group} className="flex flex-col">
+                  {perms.map((perm) => (
-                  <button
+                    <Switch
-                    type="button"
+                      key={perm.key}
-                    onClick={() => toggleGroup(group)}
+                      checked={selectedPerms.includes(perm.key)}
-                    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"
+                      onChange={() => togglePerm(perm.key)}
-                  >
+                      label={perm.name}
-                    <span
+                      description={perm.key}
-                      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 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>
-              );
+              </div>
-            })}
+            ))}
           </div>
         </Card>
 

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 ? (
+            <TagInput
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">Aucun rôle disponible</p>
+              label="Rôles attribués"
-            ) : (
+              options={roleOptions}
-              <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
+              value={selectedRoleIds}
-                {allRoles.map((role) => (
+              onChange={setSelectedRoleIds}
-                  <Switch
+              placeholder="Rechercher un rôle..."
-                    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>
 

src/shared/components/TagInput.js

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
+    : null;
+};
+
+const Pill = ({ option, onRemove }) => {
+  const rgb = option.color ? hexToRgb(option.color) : null;
+  const pillStyle = rgb
+    ? { backgroundColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.15)`, borderColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.4)`, color: option.color }
+    : {};
+  const fallbackClass = !rgb
+    ? 'bg-neutral-100 dark:bg-neutral-700 border-neutral-200 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300'
+    : '';
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${fallbackClass}`}
+      style={pillStyle}
+    >
+      {option.color && (
+        <span
+          className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+          style={{ backgroundColor: option.color }}
+        />
+      )}
+      {option.label}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onRemove(); }}
+        className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
+        aria-label={`Retirer ${option.label}`}
+      >
+        ×
+      </button>
+    </span>
+  );
+};
+
+const TagInput = ({
+  options = [],
+  value = [],
+  onChange,
+  label,
+  description,
+  placeholder = 'Ajouter...',
+  error,
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const selectedOptions = value.map(v => options.find(o => o.value === v)).filter(Boolean);
+  const filtered = options.filter(o =>
+    !value.includes(o.value) &&
+    o.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const selectOption = (option) => {
+    onChange([...value, option.value]);
+    setInputValue('');
+    inputRef.current?.focus();
+  };
+
+  const removeOption = (val) => {
+    onChange(value.filter(v => v !== val));
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Backspace' && inputValue === '' && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+    if (e.key === 'Escape') {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1.5" ref={containerRef}>
+      {label && (
+        <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`relative min-h-[42px] w-full flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-xl border text-sm bg-white dark:bg-neutral-900 cursor-text transition-shadow ${
+          isOpen
+            ? 'border-blue-500 ring-2 ring-blue-500/20'
+            : error
+            ? 'border-red-400 dark:border-red-500'
+            : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
+        }`}
+        onClick={() => { inputRef.current?.focus(); setIsOpen(true); }}
+      >
+        {selectedOptions.map(opt => (
+          <Pill key={opt.value} option={opt} onRemove={() => removeOption(opt.value)} />
+        ))}
+
+        <input
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={(e) => { setInputValue(e.target.value); setIsOpen(true); }}
+          onFocus={() => setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder={value.length === 0 ? placeholder : ''}
+          className="flex-1 min-w-[80px] bg-transparent outline-none text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 text-sm"
+        />
+
+        {isOpen && filtered.length > 0 && (
+          <div className="absolute top-full left-0 right-0 mt-1.5 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg overflow-hidden max-h-56 overflow-y-auto">
+            {filtered.map(option => (
+              <button
+                key={option.value}
+                type="button"
+                onMouseDown={(e) => { e.preventDefault(); selectOption(option); }}
+                className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-colors"
+              >
+                {option.color && (
+                  <span
+                    className="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: option.color }}
+                  />
+                )}
+                <span className="text-neutral-900 dark:text-white font-medium">{option.label}</span>
+                {option.description && (
+                  <span className="text-xs text-neutral-400 ml-auto">{option.description}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {isOpen && filtered.length === 0 && inputValue && (
+          <div className="absolute top-full left-0 right-0 mt-1.5 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg overflow-hidden">
+            <p className="px-3 py-2.5 text-sm text-neutral-400 dark:text-neutral-500">Aucun résultat</p>
+          </div>
+        )}
+      </div>
+
+      {description && !error && (
+        <p className="text-xs text-neutral-500 dark:text-neutral-400">{description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default TagInput;

src/shared/components/index.js

@@ -26,3 +26,4 @@ export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicato
 export { default as FilterTabs } from './FilterTabs';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as Switch } from './Switch';
+export { default as TagInput } from './TagInput';