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>

layouts/board.vue

@@ -252,23 +252,38 @@
       <!-- Enhanced Profile Card -->
       <template v-slot:append>
         <div class="pa-2">
-          <v-card class="glass-profile-card overflow-visible">
+          <v-card class="glass-profile-card overflow-visible" style="background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.95)); border: 1px solid rgba(220, 38, 38, 0.2);">
             <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
               <!-- Avatar Section -->
-              <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="miniVariant ? '32' : 'small'"
-                :class="miniVariant ? '' : 'mr-3'"
-              />
+              <div style="position: relative;">
+                <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="miniVariant ? '32' : '48'"
+                  :class="miniVariant ? '' : 'mr-3'"
+                  show-border
+                  style="border: 2px solid #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);"
+                />
+                <v-icon 
+                  v-if="!miniVariant"
+                  size="16" 
+                  color="green" 
+                  style="position: absolute; bottom: 0; right: 12px; background: white; border-radius: 50%; padding: 2px;"
+                >
+                  mdi-check-circle
+                </v-icon>
+              </div>
               
               <!-- Info Section (Hidden in mini mode) -->
               <div v-if="!miniVariant" class="flex-grow-1">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
                 <div class="text-caption text-medium-emphasis">{{ user?.email?.split('@')[0] || 'board' }}</div>
-                <v-chip size="x-small" class="mt-1 glass-badge">Board</v-chip>
+                <v-chip size="x-small" class="mt-1" style="background: linear-gradient(135deg, #dc2626, #b91c1c); color: white;">
+                  <v-icon start size="12">mdi-shield-check</v-icon>
+                  Board
+                </v-chip>
               </div>
               
               <!-- Action Buttons -->
@@ -279,10 +294,12 @@
                       v-bind="props"
                       icon
                       :size="miniVariant ? 'small' : 'small'"
-                      variant="text"
+                      variant="tonal"
+                      color="primary"
                       class="profile-menu-btn"
+                      style="background: rgba(220, 38, 38, 0.1);"
                     >
-                      <v-icon>mdi-dots-vertical</v-icon>
+                      <v-icon>mdi-cog</v-icon>
                     </v-btn>
                   </template>
                   <v-list density="compact" class="glass-menu" min-width="200">
@@ -321,14 +338,6 @@
     </v-navigation-drawer>
     
     <v-app-bar elevation="0" flat class="glass-app-bar board-bar">
-      <v-btn
-        icon
-        @click="toggleDrawer"
-        class="glass-icon-btn mr-2"
-      >
-        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
-      </v-btn>
-      
       <v-toolbar-title class="font-weight-bold text-white">
         Board Portal
       </v-toolbar-title>
@@ -344,14 +353,13 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <v-btn icon class="glass-icon-btn">
-        <v-badge 
-          :content="notifications" 
-          :value="notifications > 0"
-          color="error"
-        >
-          <v-icon>mdi-bell</v-icon>
-        </v-badge>
+      <!-- Move hamburger menu to the right side -->
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn ml-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
       </v-btn>
       
       <!-- User Menu -->