UI improvements for Board Portal dashboard

- Added profile picture between welcome message and title
- Removed Events and Members boxes from dashboard
- Added distinct borders and icon to Dues Management card
- Moved hamburger menu to the right side of app bar
- Removed notification bell icon from app bar
- Enhanced profile card appearance in sidebar with gradient background
- Fixed Mark as Paid button alignment to be inline with other action buttons
- Added support for displaying multiple nationality flags in dues cards

🤖 Generated with Claude Code

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

pages/board/dashboard/index.vue

@@ -8,6 +8,20 @@
       <h1 class="dashboard-title text-gradient">
         Welcome Back, {{ firstName }}!
       </h1>
+      
+      <!-- Profile Picture Section -->
+      <div class="profile-picture-section my-4">
+        <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="80"
+          show-border
+          class="profile-avatar-main"
+        />
+      </div>
+      
       <p class="dashboard-subtitle">
         MonacoUSA Board Portal
       </p>
@@ -19,40 +33,6 @@
       </div>
     </div>
 
-    <!-- Board Tools with Bento Grid -->
-    <div class="bento-grid mb-6">
-      <div class="bento-item bento-item--large">
-        <v-card class="glass-card pa-4 text-center animated-entrance">
-          <v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
-          <h3 class="mb-2">Events</h3>
-          <p class="text-body-2 mb-4">View and manage association events</p>
-          <v-btn 
-            color="primary" 
-            variant="outlined"
-            style="border-color: #a31515; color: #a31515;"
-            @click="navigateToEvents"
-          >
-            View Events
-          </v-btn>
-        </v-card>
-      </div>
-      
-      <div class="bento-item bento-item--large">
-        <v-card class="glass-card pa-4 text-center animated-entrance">
-          <v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
-          <h3 class="mb-2">Members</h3>
-          <p class="text-body-2 mb-4">View and manage association members</p>
-          <v-btn 
-            color="primary" 
-            variant="outlined"
-            style="border-color: #a31515; color: #a31515;"
-            @click="navigateToMembers"
-          >
-            View Members
-          </v-btn>
-        </v-card>
-      </div>
-    </div>
 
     <!-- Board Statistics with Bento Grid -->
     <div class="bento-grid mb-6">
@@ -142,13 +122,21 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 definePageMeta({
   layout: 'board',
   middleware: 'auth'
 });
 
-const { firstName, isBoard, isAdmin } = useAuth();
+const { firstName, isBoard, isAdmin, user } = useAuth();
+
+// Fetch member data for profile
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
 
 // Check board access on mount
 onMounted(() => {
@@ -338,6 +326,18 @@ const generateReport = () => {
     inset 0 1px 2px rgba(255, 255, 255, 0.6);
   animation: slide-up 0.6s ease-out;
   text-align: center;
+  
+  .profile-picture-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    .profile-avatar-main {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 3px solid white;
+      border-radius: 50%;
+    }
+  }
 }
 
 .dashboard-title {