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>

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
-          :color="avatarColor"
-          size="40"
+        <ProfileAvatar
+          :member-id="member.member_id || member.Id"
+          :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
-                    :color="member.isInactive ? 'grey' : 'warning'"
-                    size="32"
+                  <ProfileAvatar
+                    :member-id="member.memberId"
+                    :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;