Fix Avatar issue

frontend/src/components/layout/Header/Header.tsx

@@ -401,7 +401,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                 <Avatar
                   src={user.avatar}
                   alt={user.name}
-                  fallback={user.name}
+                  name={user.name}
                   size="xs"
                   className={clsx(
                     "flex-shrink-0 transition-all duration-200",
@@ -409,20 +409,23 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                     isUserMenuOpen && "ring-2 ring-[var(--color-primary)]/30"
                   )}
                 />
-                <span className="hidden sm:block text-sm font-medium text-[var(--text-primary)] truncate max-w-[120px]">
-                  {user.name}
-                </span>
               </Button>
 
               {isUserMenuOpen && (
                 <div className="absolute right-0 top-full mt-2 w-56 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-2 z-[var(--z-dropdown)]">
                   {/* User info */}
-                  <div className="px-4 py-2 border-b border-[var(--border-primary)]">
+                  <div className="px-4 py-3 border-b border-[var(--border-primary)] flex items-center gap-3">
-                    <div className="text-sm font-medium text-[var(--text-primary)] truncate">
+                    <Avatar
-                      {user.name}
+                      src={user.avatar || undefined}
-                    </div>
+                      alt={user.name}
-                    <div className="text-xs text-[var(--text-tertiary)] truncate">
+                      name={user.name}
-                      {user.email}
+                      size="sm"
+                      className="flex-shrink-0"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="text-xs text-[var(--text-tertiary)] truncate">
+                        {user.email}
+                      </div>
                     </div>
                   </div>
 

frontend/src/components/ui/Avatar/Avatar.tsx

@@ -104,10 +104,10 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   };
 
   const statusClasses = {
-    online: 'bg-status-online',
+    online: 'bg-[var(--color-success)]',
-    offline: 'bg-status-offline',
+    offline: 'bg-[var(--text-tertiary)]',
-    away: 'bg-status-away',
+    away: 'bg-[var(--color-warning)]',
-    busy: 'bg-status-busy',
+    busy: 'bg-[var(--color-error)]',
   };
 
   const statusSizeClasses = {
@@ -135,7 +135,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
 
   const baseClasses = [
     'relative inline-flex items-center justify-center',
-    'bg-bg-tertiary text-text-primary font-medium',
+    'bg-[var(--bg-tertiary)] text-[var(--text-primary)] font-medium',
     'overflow-hidden flex-shrink-0',
   ];
 
@@ -164,11 +164,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
 
     if (loading) {
       return (
-        <div className="animate-pulse bg-bg-quaternary w-full h-full" />
+        <div className="animate-pulse bg-[var(--bg-quaternary)] w-full h-full" />
       );
     }
 
-    if (src && !imageError) {
+    if (src && typeof src === 'string' && src.trim() !== '' && !imageError) {
       return (
         <img
           src={src}
@@ -203,7 +203,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
 
     if (icon) {
       return (
-        <span className="text-text-tertiary">
+        <span className="text-[var(--text-tertiary)]">
           {icon}
         </span>
       );
@@ -213,15 +213,27 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
       return fallback;
     }
 
-    // Default user icon
+    // Default bakery-themed chef icon
     return (
-      <svg
+      <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white">
-        className="w-3/5 h-3/5 text-text-tertiary"
+        <svg
-        fill="currentColor"
+          className="w-3/5 h-3/5"
-        viewBox="0 0 24 24"
+          fill="currentColor"
-      >
+          viewBox="0 0 24 24"
-        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+          xmlns="http://www.w3.org/2000/svg"
-      </svg>
+        >
+          {/* Chef hat */}
+          <path d="M18.5 7c-1.4 0-2.5-1.1-2.5-2.5S17.1 2 18.5 2s2.5 1.1 2.5 2.5S19.9 7 18.5 7z"/>
+          <path d="M5.5 7C4.1 7 3 5.9 3 4.5S4.1 2 5.5 2 8 3.1 8 4.5 6.9 7 5.5 7z"/>
+          <path d="M12 6c-1.4 0-2.5-1.1-2.5-2.5S10.6 1 12 1s2.5 1.1 2.5 2.5S13.4 6 12 6z"/>
+          <path d="M19 8H5c-1.1 0-2 .9-2 2v1c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-1c0-1.1-.9-2-2-2z"/>
+          <path d="M18 12H6v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-8z"/>
+          {/* Chef details */}
+          <circle cx="9" cy="16" r="0.5" fill="currentColor" opacity="0.7"/>
+          <circle cx="15" cy="16" r="0.5" fill="currentColor" opacity="0.7"/>
+          <path d="M10 18h4" stroke="currentColor" strokeWidth="0.5" strokeLinecap="round" opacity="0.7"/>
+        </svg>
+      </div>
     );
   };
 
@@ -247,7 +259,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
       {status && (
         <span
           className={clsx(
-            'absolute rounded-full ring-2 ring-bg-primary',
+            'absolute rounded-full ring-2 ring-[var(--bg-primary)]',
             statusClasses[status],
             statusSizeClasses[size],
             statusPositionClasses[statusPosition]
@@ -282,7 +294,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
     return (
       <div className="flex items-center gap-2">
         {avatarElement}
-        <span className="text-sm text-text-secondary">
+        <span className="text-sm text-[var(--text-secondary)]">
           {statusTextMap[status]}
         </span>
       </div>
@@ -341,7 +353,7 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(({
             size={size}
             shape={shape}
             onClick={onMoreClick}
-            className="bg-bg-quaternary text-text-secondary cursor-pointer hover:bg-bg-tertiary transition-colors duration-200"
+            className="bg-[var(--bg-quaternary)] text-[var(--text-secondary)] cursor-pointer hover:bg-[var(--bg-tertiary)] transition-colors duration-200"
           >
             <span className="font-medium">
               {moreText || `+${hiddenCount}`}