refactor(admin): replace inline avatar logic with shared UserAvatar component

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, Table, Badge, StatusBadge, Button } from '@zen/core/shared/components';
+import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 
@@ -29,27 +29,20 @@ const UsersPageClient = () => {
     const columns = [
         {
             key: 'name',
-            label: 'Nom',
+            label: 'Utilisateur',
             sortable: true,
             render: (user) => (
-                <div>
-                    <div className="text-sm font-medium text-neutral-900 dark:text-white">{user.name}</div>
-                    <div className="text-xs text-neutral-500 dark:text-gray-400">ID: {user.id.slice(0, 8)}...</div>
+                <div className="flex items-center gap-3">
+                    <UserAvatar user={user} />
+                    <div>
+                        <div className="text-sm font-medium text-neutral-900 dark:text-white">{user.name}</div>
+                        <div className="text-xs text-neutral-500 dark:text-gray-400">{user.email}</div>
+                    </div>
                 </div>
             ),
-            skeleton: { 
+            skeleton: {
                 height: 'h-4', width: '60%',
-                secondary: { height: 'h-3', width: '40%' } 
-            }
-        },
-        {
-            key: 'email',
-            label: 'Email',
-            sortable: true,
-            render: (user) => <div className="text-sm font-medium text-neutral-900 dark:text-white">{user.email}</div>,
-            skeleton: { 
-                height: 'h-4', 
-                width: '60%',
+                secondary: { height: 'h-3', width: '40%' }
             }
         },
         {