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

src/shared/components/UserAvatar.js

@@ -0,0 +1,39 @@
+'use client';
+
+const getImageUrl = (imageKey) => {
+    if (!imageKey) return null;
+    return `/zen/api/storage/${imageKey}`;
+};
+
+const getUserInitials = (name) => {
+    if (!name) return 'U';
+    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+};
+
+const sizeMap = {
+    sm: { wrapper: 'w-[26px] h-[26px]', text: 'text-[10px]' },
+    md: { wrapper: 'w-8 h-8', text: 'text-[11px]' },
+};
+
+const UserAvatar = ({ user, size = 'md' }) => {
+    const imageUrl = getImageUrl(user?.image);
+    const initials = getUserInitials(user?.name);
+    const { wrapper, text } = sizeMap[size] ?? sizeMap.md;
+
+    if (imageUrl) {
+        return (
+            <img
+                src={imageUrl}
+                alt={user?.name || 'User'}
+                className={`${wrapper} rounded-full object-cover shrink-0`}
+            />
+        );
+    }
+    return (
+        <div className={`${wrapper} rounded-full bg-black dark:bg-white flex items-center justify-center shrink-0`}>
+            <span className={`${text} font-medium text-white dark:text-black`}>{initials}</span>
+        </div>
+    );
+};
+
+export default UserAvatar;

src/shared/components/index.js

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