feat(admin): add dynamic role color support for user badges

src/features/admin/pages/UsersPage.client.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, StatusBadge, Button } from '@zen/core/shared/components';
+import { Card, Table, Badge, StatusBadge, Button } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 
@@ -11,6 +11,7 @@ const UsersPageClient = () => {
     const toast = useToast();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [roleColorMap, setRoleColorMap] = useState({});
     
     // Pagination state
     const [pagination, setPagination] = useState({
@@ -55,7 +56,11 @@ const UsersPageClient = () => {
             key: 'role',
             label: 'Rôle',
             sortable: true,
-            render: (user) => <StatusBadge status={user.role} />,
+            render: (user) => (
+                <Badge color={roleColorMap[user.role?.toLowerCase()]}>
+                    {user.role}
+                </Badge>
+            ),
             skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' }
         },
         {
@@ -131,6 +136,19 @@ const UsersPageClient = () => {
         }
     };
 
+    useEffect(() => {
+        fetch('/zen/api/roles', { credentials: 'include' })
+            .then(r => r.json())
+            .then(data => {
+                const map = {};
+                for (const role of data.roles || []) {
+                    if (role.color) map[role.name.toLowerCase()] = role.color;
+                }
+                setRoleColorMap(map);
+            })
+            .catch(() => {});
+    }, []);
+
     // Effect to fetch users when sort or pagination change
     useEffect(() => {
         fetchUsers();