Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,150 @@
+# 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:
+
+```typescript
+// 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:
+
+```vue
+<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