Standardize avatar display across application

- Replace all hardcoded avatars with ProfileAvatar component
- Update admin and board layouts to use ProfileAvatar
- Update DuesActionCard and DuesOverdueBanner components
- Update admin users list to use ProfileAvatar
- Ensure consistent display of profile pictures with initials fallback
- All avatars now show either user's profile picture or initials

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -32,7 +32,9 @@
       "mcp__playwright__browser_close",
       "Bash(dir:*)",
       "mcp__playwright__browser_evaluate",
-      "mcp__playwright__browser_hover"
+      "mcp__playwright__browser_hover",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_console_messages"
     ],
     "deny": [],
     "ask": []

components/DuesActionCard.vue

@@ -21,15 +21,14 @@
     <v-card-text class="pa-4">
       <!-- Member Info Header -->
       <div class="d-flex align-center mb-3">
-        <v-avatar
+        <ProfileAvatar
-          :color="avatarColor"
+          :member-id="member.member_id || member.Id"
-          size="40"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          :member-name="member.FullName"
+          size="small"
           class="mr-3"
-        >
+        />
-          <span class="text-white font-weight-bold">
-            {{ memberInitials }}
-          </span>
-        </v-avatar>
         
         <div class="flex-grow-1">
           <h4 class="text-subtitle-1 font-weight-bold mb-1">
@@ -232,6 +231,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 // Extended member type for dues management
 interface DuesMember {

components/DuesOverdueBanner.vue

@@ -41,15 +41,12 @@
                 class="overdue-member-item"
               >
                 <template #prepend>
-                  <v-avatar
+                  <ProfileAvatar
-                    :color="member.isInactive ? 'grey' : 'warning'"
+                    :member-id="member.memberId"
-                    size="32"
+                    :member-name="member.name"
+                    size="small"
                     class="mr-3"
-                  >
+                  />
-                    <v-icon color="white" size="16">
-                      {{ member.isInactive ? 'mdi-account-off' : 'mdi-account-alert' }}
-                    </v-icon>
-                  </v-avatar>
                 </template>
                 
                 <v-list-item-title class="font-weight-medium">
@@ -137,6 +134,8 @@
 </template>
 
 <script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
 interface OverdueMember {
   id: string;
   name: string;

layouts/admin.vue

@@ -216,9 +216,14 @@
         <div class="pa-3">
           <v-card class="glass-profile-card pa-3">
             <div class="d-flex flex-column align-center">
-              <v-avatar size="small" class="mb-2">
+              <ProfileAvatar
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
+                :member-id="memberData?.member_id || memberData?.Id"
-              </v-avatar>
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :member-name="memberData?.FullName || user?.name"
+                size="small"
+                class="mb-2"
+              />
               <div class="text-center">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
                 <div class="text-caption text-medium-emphasis">{{ user?.email || 'admin@monacousa.org' }}</div>
@@ -437,6 +442,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);

layouts/board.vue

@@ -149,9 +149,14 @@
         <div class="pa-3">
           <v-card class="glass-profile-card pa-3">
             <div class="d-flex flex-column align-center">
-              <v-avatar size="small" class="mb-2">
+              <ProfileAvatar
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
+                :member-id="memberData?.member_id || memberData?.Id"
-              </v-avatar>
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :member-name="memberData?.FullName || user?.name"
+                size="small"
+                class="mb-2"
+              />
               <div class="text-center">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
                 <div class="text-caption text-medium-emphasis">{{ user?.email || 'board@monacousa.org' }}</div>
@@ -325,6 +330,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);

pages/admin/users/index.vue

@@ -81,10 +81,11 @@
       >
         <template v-slot:item.name="{ item }">
           <div class="d-flex align-center py-2">
-            <v-avatar size="40" class="mr-3">
+            <ProfileAvatar
-              <v-icon v-if="!item.avatar">mdi-account-circle</v-icon>
+              :member-name="item.name"
-              <v-img v-else :src="item.avatar" />
+              size="small"
-            </v-avatar>
+              class="mr-3"
+            />
             <div>
               <div class="font-weight-medium">{{ item.name }}</div>
               <div class="text-caption text-medium-emphasis">{{ item.email }}</div>
@@ -250,6 +251,8 @@
 </template>
 
 <script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
 definePageMeta({
   layout: 'admin',
   middleware: 'admin'