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>

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">
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
-              </v-avatar>
+              <ProfileAvatar
+                :member-id="memberData?.member_id || memberData?.Id"
+                :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">
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
-              </v-avatar>
+              <ProfileAvatar
+                :member-id="memberData?.member_id || memberData?.Id"
+                :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);