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>

components/BoardDuesManagement.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card elevation="2" class="dues-management-card">
+  <v-card elevation="4" class="dues-management-card" style="border: 2px solid #dc2626; border-radius: 16px;">
     <v-card-title class="pa-4 bg-warning-lighten-5">
-      <v-icon class="mr-2" color="warning">mdi-cash-clock</v-icon>
-      <span class="text-h6">Dues Management</span>
+      <v-icon class="mr-3" color="warning" size="28">mdi-cash-multiple</v-icon>
+      <span class="text-h6 font-weight-bold">Dues Management</span>
       <v-spacer />
       <v-chip color="warning" size="small">
         {{ overdueMembers.length + upcomingMembers.length }} Action Items

components/DuesActionCard.vue

@@ -38,9 +38,9 @@
             <v-chip size="x-small" color="grey" variant="text" class="pa-0 mr-2">
               ID: {{ member.member_id || `MUSA-${member.Id}` }}
             </v-chip>
-            <CountryFlag
+            <MultipleCountryFlags
               v-if="member.nationality"
-              :country-code="member.nationality.split(',')[0]"
+              :country-codes="member.nationality"
               :show-name="false"
               size="small"
             />
@@ -117,21 +117,6 @@
       </div>
     </v-card-text>
 
-    <!-- Action Buttons -->
-    <v-card-actions class="pa-4 pt-0 d-flex justify-center">
-      <v-btn
-        color="success"
-        variant="elevated"
-        height="44"
-        :loading="loading"
-        @click="showPaymentDateDialog = true"
-        class="px-4"
-      >
-        <v-icon start size="16">mdi-check-circle</v-icon>
-        Mark as Paid
-      </v-btn>
-    </v-card-actions>
-
     <!-- Payment Date Selection Dialog -->
     <v-dialog v-model="showPaymentDateDialog" max-width="400">
       <v-card>
@@ -202,28 +187,39 @@
     </v-dialog>
 
     <!-- Quick Actions -->
-    <v-card-actions class="pa-4 pt-0">
-      <v-btn
-        variant="text"
-        size="small"
-        @click="$emit('view-member', member)"
-      >
-        <v-icon start size="16">mdi-account</v-icon>
-        View Details
-      </v-btn>
-      
-      <v-spacer />
+    <v-card-actions class="pa-4 pt-0 d-flex justify-space-between">
+      <div class="d-flex gap-1">
+        <v-btn
+          variant="text"
+          size="small"
+          @click="$emit('view-member', member)"
+        >
+          <v-icon start size="16">mdi-account</v-icon>
+          View Details
+        </v-btn>
+        
+        <v-btn
+          variant="text"
+          size="small"
+          :loading="emailLoading"
+          :disabled="!member.email"
+          @click="sendDuesReminder"
+          v-if="member.email"
+        >
+          <v-icon start size="16">mdi-email</v-icon>
+          Email
+        </v-btn>
+      </div>
       
       <v-btn
-        variant="text"
+        color="success"
+        variant="elevated"
         size="small"
-        :loading="emailLoading"
-        :disabled="!member.email"
-        @click="sendDuesReminder"
-        v-if="member.email"
+        :loading="loading"
+        @click="showPaymentDateDialog = true"
       >
-        <v-icon start size="16">mdi-email</v-icon>
-        Email
+        <v-icon start size="16">mdi-check-circle</v-icon>
+        Mark as Paid
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -232,6 +228,7 @@
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
 import ProfileAvatar from '~/components/ProfileAvatar.vue';
+import MultipleCountryFlags from '~/components/MultipleCountryFlags.vue';
 
 // Extended member type for dues management
 interface DuesMember {