refactor(ui): move system badge to dedicated column and update Badge styles

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

@@ -24,14 +24,13 @@ const RolesPageClient = () => {
             style={{ backgroundColor: role.color || '#6b7280' }}
           />
           <div>
-            <div className="text-sm font-medium text-neutral-900 dark:text-white">{role.name}</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 && (
-            <Badge variant="default" size="sm">Système</Badge>
-          )}
         </div>
       ),
       skeleton: { height: 'h-4', width: '60%' }
@@ -54,6 +53,13 @@ const RolesPageClient = () => {
       ),
       skeleton: { height: 'h-4', width: '40px' }
     },
+    {
+      key: 'is_system',
+      label: 'Système',
+      sortable: false,
+      render: (role) => role.is_system ? <Badge variant="default" size="sm">système</Badge> : null,
+      skeleton: { height: 'h-4', width: '60px' }
+    },
     {
       key: 'actions',
       label: '',