LinkDesk/frontend/docs/avatar-display-implementation.md

Avatar Display Implementation

Overview

Added comprehensive avatar display support across all user-related pages, team management, and activity components throughout the VFX Project Management System.

Components Updated

1. User Management Components

• UserManagementTable.vue

  • Added avatar display in user table rows
  • Shows user avatar or initials fallback next to user names
  • Changed "Name" column header to "User" for better context

• UserApprovalCard.vue

  • Added larger avatar (h-12 w-12) in card header
  • Displays avatar next to user information for pending approvals

• UserEditDialog.vue

  • Added avatar in dialog header
  • Shows which user is being edited with their avatar

• UserDeleteConfirmDialog.vue

  • Added avatar in dialog header
  • Makes it clear which user is being deleted

2. Project Team Management

• ProjectMemberManagement.vue
  • Added avatar display for all team members in the list
  • Shows user avatar or generated initials
  • Supports both uploaded avatars and fallback to Dicebear API

3. Task Management Components

• TaskList.vue

  • Added avatar display for assigned users in task rows
  • Shows small avatar (h-5 w-5) next to assigned user name
  • Added avatar display in task assignment dialog member selection
  • Shows avatar with member name and department badge

• TaskDetailPanel.vue

  • Added avatar display for assigned user in task metadata section
  • Shows avatar (h-6 w-6) with user name
  • Added avatar display in assignment dialog member list
  • Shows larger avatar (h-8 w-8) with member details

4. Task Activity Components

• SubmissionCard.vue

  • Added small avatar (h-5 w-5) next to submitter name
  • Shows who submitted the work with their avatar

• NoteItem.vue

  • Replaced simple colored circle with proper Avatar component
  • Shows user avatar or initials for note authors
  • Maintains threaded note display with avatars

• AttachmentCard.vue

  • Added tiny avatar (h-4 w-4) next to uploader name
  • Shows who uploaded the attachment

5. Activity Feed

• ActivityFeed.vue
  • Added avatar display for all activity items
  • Shows user avatar (h-8 w-8) for each activity
  • Supports both uploaded avatars and generated initials

Avatar Features

Avatar Sources (Priority Order)

1. User's uploaded avatar - If user has uploaded an avatar, it's displayed
2. Dicebear API fallback - Generates avatar based on user's full name
3. Initials fallback - Shows user initials if images fail to load

Helper Functions Added

All components include these standardized helper functions:

// Get avatar URL with proper path handling
function getAvatarUrl(url: string | null | undefined) {
  if (!url) return ''
  if (url.startsWith('http')) return url
  const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
  return `http://localhost:8000/${cleanUrl}`
}

// Get user initials from first and last name
function getUserInitials(firstName: string, lastName: string) {
  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase()
}

Avatar Sizes Used

• h-4 w-4 - Tiny avatars (attachment cards)
• h-5 w-5 - Small avatars (task list assigned users)
• h-6 w-6 - Medium avatars (task detail assigned user)
• h-8 w-8 - Standard avatars (user tables, activity feed, team management, dialogs)
• h-10 w-10 - Large avatars (dialog headers)
• h-12 w-12 - Extra large avatars (user approval cards)

Implementation Pattern

Each component follows this consistent pattern:

<template>
  <Avatar class="h-8 w-8">
    <!-- User's uploaded avatar -->
    <AvatarImage
      v-if="user.avatar_url"
      :src="getAvatarUrl(user.avatar_url)"
    />
    <!-- Dicebear generated avatar -->
    <AvatarImage
      v-else
      :src="`https://api.dicebear.com/7.x/initials/svg?seed=${user.first_name} ${user.last_name}`"
    />
    <!-- Initials fallback -->
    <AvatarFallback>{{ getUserInitials(user) }}</AvatarFallback>
  </Avatar>
</template>

Benefits

1. Visual Consistency - All user displays now show avatars consistently
2. Better UX - Users can quickly identify people by their avatars
3. Professional Look - Avatars make the interface more polished and modern
4. Fallback Support - Multiple fallback options ensure avatars always display
5. Scalable - Easy to add avatars to new components using the same pattern

Pages Covered

• ✅ Users Management Page
• ✅ User Approval Dashboard
• ✅ Profile Page (already implemented)
• ✅ App Header (already implemented)
• ✅ Project Team Management
• ✅ Task List View
• ✅ Task Detail Panel
• ✅ Task Submissions
• ✅ Task Notes
• ✅ Task Attachments
• ✅ Activity Feed
• ✅ All User Dialogs (Edit, Delete, Create)

Technical Notes

• All avatar components use the shadcn-vue Avatar component
• Avatar URLs are properly handled for both local backend paths and full URLs
• Dicebear API is used for consistent generated avatars based on user names
• All components include proper TypeScript typing
• Avatar display is responsive and works across different screen sizes