Add support for multiple nationalities display with flags

- Create MultipleCountryFlags component to display multiple country flags
- Support comma-separated nationality values (e.g., 'FR,MC,US')
- Update admin members page to use MultipleCountryFlags in both list and grid views
- Update board members page to display nationalities with flags
- Add nationality column to board members table
- Update member forms to support multiple nationality selection
- Display flags with slight overlap for space efficiency, expand on hover
- Maintain backward compatibility with single nationality values

🤖 Generated with [Claude Code](https://claude.ai/code)

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

pages/admin/members/index.vue

@@ -190,14 +190,12 @@
 
         <template v-slot:item.nationality="{ item }">
           <div class="d-flex align-center">
-            <CountryFlag
-              v-if="item.nationality"
-              :country-code="item.nationality"
-              :show-name="false"
+            <MultipleCountryFlags
+              :nationality="item.nationality"
+              :show-name="true"
               size="small"
-              class="mr-2"
+              fallback-text="Not specified"
             />
-            <span>{{ getCountryName(item.nationality) || 'Not specified' }}</span>
           </div>
         </template>
 
@@ -320,16 +318,13 @@
             </h3>
             
             <div class="d-flex align-center justify-center mb-3">
-              <CountryFlag
-                v-if="member.nationality"
-                :country-code="member.nationality"
-                :show-name="false"
+              <MultipleCountryFlags
+                :nationality="member.nationality"
+                :show-name="true"
                 size="small"
-                class="mr-2"
+                fallback-text="No nationality"
+                class="text-body-2 text-medium-emphasis"
               />
-              <span class="text-body-2 text-medium-emphasis">
-                {{ getCountryName(member.nationality) || 'No nationality' }}
-              </span>
             </div>
             
             <!-- Email -->

pages/board/members/index.vue

@@ -178,6 +178,16 @@
           <div class="text-body-2">{{ item.email }}</div>
         </template>
 
+        <!-- Nationality -->
+        <template v-slot:item.nationality="{ item }">
+          <MultipleCountryFlags
+            :nationality="item.nationality"
+            :show-name="false"
+            size="small"
+            fallback-text="-"
+          />
+        </template>
+
         <!-- Status -->
         <template v-slot:item.status="{ item }">
           <v-chip
@@ -328,9 +338,14 @@
               <v-col cols="12" md="6">
                 <v-select
                   v-model="newMember.nationality"
-                  label="Nationality"
-                  :items="nationalities"
+                  label="Nationality (can select multiple)"
+                  :items="nationalityOptions"
                   variant="outlined"
+                  multiple
+                  chips
+                  closable-chips
+                  hint="Select all applicable nationalities"
+                  persistent-hint
                 />
               </v-col>
               <v-col cols="12" md="6">
@@ -395,12 +410,35 @@ const stats = ref({
 const statusOptions = ['Active', 'Inactive'];
 const duesOptions = ['Paid', 'Pending', 'Overdue'];
 const memberTypeOptions = ['Regular', 'Premium', 'Honorary', 'Board', 'Admin'];
-const nationalities = ['United States', 'Monaco', 'France', 'Italy', 'United Kingdom', 'Germany', 'Other'];
+// Country options with codes for multiple selection
+const nationalityOptions = [
+  { title: 'United States', value: 'US' },
+  { title: 'Monaco', value: 'MC' },
+  { title: 'France', value: 'FR' },
+  { title: 'Italy', value: 'IT' },
+  { title: 'United Kingdom', value: 'GB' },
+  { title: 'Germany', value: 'DE' },
+  { title: 'Spain', value: 'ES' },
+  { title: 'Sweden', value: 'SE' },
+  { title: 'Norway', value: 'NO' },
+  { title: 'Denmark', value: 'DK' },
+  { title: 'Canada', value: 'CA' },
+  { title: 'Australia', value: 'AU' },
+  { title: 'Japan', value: 'JP' },
+  { title: 'China', value: 'CN' },
+  { title: 'India', value: 'IN' },
+  { title: 'Brazil', value: 'BR' },
+  { title: 'Mexico', value: 'MX' },
+  { title: 'Russia', value: 'RU' },
+  { title: 'South Africa', value: 'ZA' },
+  { title: 'Other', value: 'XX' }
+];
 
 // Table headers
 const headers = [
   { title: 'Member', key: 'name', sortable: true },
   { title: 'Email', key: 'email', sortable: true },
+  { title: 'Nationality', key: 'nationality', sortable: true },
   { title: 'Status', key: 'status', sortable: true },
   { title: 'Dues', key: 'duesStatus', sortable: true },
   { title: 'Type', key: 'memberType', sortable: true },
@@ -418,7 +456,7 @@ const newMember = ref({
   lastName: '',
   email: '',
   phone: '',
-  nationality: '',
+  nationality: [] as string[], // Array for multiple nationalities
   memberType: 'Regular',
   joinDate: new Date().toISOString().split('T')[0]
 });
@@ -511,7 +549,14 @@ const deleteMember = (member: any) => {
 };
 
 const addMember = () => {
-  console.log('Adding new member:', newMember.value);
+  // Convert nationality array to comma-separated string for storage
+  const memberData = {
+    ...newMember.value,
+    nationality: Array.isArray(newMember.value.nationality) 
+      ? newMember.value.nationality.join(',') 
+      : newMember.value.nationality
+  };
+  console.log('Adding new member:', memberData);
   showAddMemberDialog.value = false;
   // Reset form
   newMember.value = {
@@ -519,7 +564,7 @@ const addMember = () => {
     lastName: '',
     email: '',
     phone: '',
-    nationality: '',
+    nationality: [],
     memberType: 'Regular',
     joinDate: new Date().toISOString().split('T')[0]
   };