Replace flag-icons with vue-country-flag-next and improve UI styling

- Replace flag-icons CSS library with vue-country-flag-next component
- Update CountryFlag component to use new library API
- Improve avatar colors with high-contrast color palette
- Adjust dashboard layout column sizing
- Add new EditMemberDialog component
- Remove unused flag-icons CSS dependency

components/CountryFlag.vue

@@ -1,11 +1,11 @@
 <template>
   <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
-    <span 
+    <CountryFlag
-      class="fi" 
+      v-if="countryCode"
-      :class="flagClasses"
+      :country="countryCode"
-      :style="flagStyle"
+      :size="flagSize"
       :title="getCountryName(countryCode)"
-    ></span>
+    />
     <span v-if="showName && countryCode" class="country-name">
       {{ getCountryName(countryCode) }}
     </span>
@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { CountryFlag } from 'vue-country-flag-next';
 import { getCountryName } from '~/utils/countries';
 
 interface Props {
@@ -29,36 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
   square: false
 });
 
-const flagClasses = computed(() => {
+const flagSize = computed(() => {
-  const classes = [];
-  
-  if (props.countryCode) {
-    classes.push(`fi-${props.countryCode.toLowerCase()}`);
-  }
-  
-  if (props.square) {
-    classes.push('fis');
-  }
-  
-  return classes;
-});
-
-const flagStyle = computed(() => {
   const sizeMap = {
-    small: '1rem',
+    small: 'sm',
-    medium: '1.5rem',
+    medium: 'md', 
-    large: '2rem'
+    large: 'lg'
   };
   
-  return {
+  return sizeMap[props.size];
-    width: sizeMap[props.size],
-    height: props.square ? sizeMap[props.size] : `calc(${sizeMap[props.size]} * 0.75)`, // 4:3 aspect ratio
-    display: 'inline-block',
-    borderRadius: '2px',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat'
-  };
 });
 </script>
 
@@ -85,8 +64,9 @@ const flagStyle = computed(() => {
 }
 
 /* Ensure proper flag display */
-.fi {
+:deep(.vue-country-flag) {
-  flex-shrink: 0;
+  border-radius: 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
 }
 </style>

components/EditMemberDialog.vue

@@ -0,0 +1,468 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+    max-width="900"
+    persistent
+    scrollable
+  >
+    <v-card>
+      <v-card-title class="d-flex align-center pa-6 bg-primary">
+        <v-icon class="mr-3 text-white">mdi-account-edit</v-icon>
+        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
+          Edit Member: {{ member?.FullName || `${member?.['First Name']} ${member?.['Last Name']}` }}
+        </h2>
+        <v-btn
+          icon
+          variant="text"
+          color="white"
+          @click="closeDialog"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <v-form ref="formRef" v-model="formValid" @submit.prevent="handleSubmit">
+          <v-row>
+            <!-- Personal Information Section -->
+            <v-col cols="12">
+              <h3 class="text-h6 mb-4 text-primary">Personal Information</h3>
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['First Name']"
+                label="First Name"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('First Name')"
+                :error-messages="getFieldError('First Name')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['Last Name']"
+                label="Last Name"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('Last Name')"
+                :error-messages="getFieldError('Last Name')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form.Email"
+                label="Email Address"
+                type="email"
+                variant="outlined"
+                :rules="[rules.required, rules.email]"
+                required
+                :error="hasFieldError('Email')"
+                :error-messages="getFieldError('Email')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <PhoneInputWrapper
+                v-model="form.Phone"
+                label="Phone Number"
+                placeholder="Enter phone number"
+                :error="hasFieldError('Phone')"
+                :error-message="getFieldError('Phone')"
+                @phone-data="handlePhoneData"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['Date of Birth']"
+                label="Date of Birth"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Date of Birth')"
+                :error-messages="getFieldError('Date of Birth')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <MultipleNationalityInput
+                v-model="form.Nationality"
+                label="Nationality"
+                :error="hasFieldError('Nationality')"
+                :error-message="getFieldError('Nationality')"
+                :max-nationalities="3"
+              />
+            </v-col>
+            
+            <v-col cols="12">
+              <v-textarea
+                v-model="form.Address"
+                label="Address"
+                variant="outlined"
+                rows="2"
+                :error="hasFieldError('Address')"
+                :error-messages="getFieldError('Address')"
+              />
+            </v-col>
+
+            <!-- Membership Information Section -->
+            <v-col cols="12">
+              <v-divider class="my-4" />
+              <h3 class="text-h6 mb-4 text-primary">Membership Information</h3>
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-select
+                v-model="form['Membership Status']"
+                :items="membershipStatusOptions"
+                label="Membership Status"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('Membership Status')"
+                :error-messages="getFieldError('Membership Status')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="form['Member Since']"
+                label="Member Since"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Member Since')"
+                :error-messages="getFieldError('Member Since')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-switch
+                v-model="duesPaid"
+                label="Current Year Dues Paid"
+                color="success"
+                inset
+                :error="hasFieldError('Current Year Dues Paid')"
+                :error-messages="getFieldError('Current Year Dues Paid')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6" v-if="duesPaid">
+              <v-text-field
+                v-model="form['Membership Date Paid']"
+                label="Payment Date"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Membership Date Paid')"
+                :error-messages="getFieldError('Membership Date Paid')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6" v-if="!duesPaid">
+              <v-text-field
+                v-model="form['Payment Due Date']"
+                label="Payment Due Date"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Payment Due Date')"
+                :error-messages="getFieldError('Payment Due Date')"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog"
+          :disabled="loading"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="handleSubmit"
+          :loading="loading"
+          :disabled="!formValid"
+        >
+          <v-icon start>mdi-content-save</v-icon>
+          Save Changes
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import { formatBooleanAsString } from '~/server/utils/nocodb';
+
+interface Props {
+  modelValue: boolean;
+  member: Member | null;
+}
+
+interface Emits {
+  (e: 'update:model-value', value: boolean): void;
+  (e: 'member-updated', member: Member): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Form state
+const formRef = ref();
+const formValid = ref(false);
+const loading = ref(false);
+
+// Form data
+const form = ref({
+  'First Name': '',
+  'Last Name': '',
+  Email: '',
+  Phone: '',
+  'Date of Birth': '',
+  Nationality: '',
+  Address: '',
+  'Membership Status': 'Active',
+  'Member Since': '',
+  'Current Year Dues Paid': 'false',
+  'Membership Date Paid': '',
+  'Payment Due Date': ''
+});
+
+// Additional form state
+const duesPaid = ref(false);
+const phoneData = ref(null);
+
+// Error handling
+const fieldErrors = ref<Record<string, string>>({});
+
+// Watch dues paid switch
+watch(duesPaid, (newValue) => {
+  form.value['Current Year Dues Paid'] = formatBooleanAsString(newValue);
+  if (newValue) {
+    form.value['Payment Due Date'] = '';
+    if (!form.value['Membership Date Paid']) {
+      form.value['Membership Date Paid'] = new Date().toISOString().split('T')[0];
+    }
+  } else {
+    form.value['Membership Date Paid'] = '';
+    if (!form.value['Payment Due Date']) {
+      // Set due date to one year from member since date or today
+      const memberSince = form.value['Member Since'] || new Date().toISOString().split('T')[0];
+      const dueDate = new Date(memberSince);
+      dueDate.setFullYear(dueDate.getFullYear() + 1);
+      form.value['Payment Due Date'] = dueDate.toISOString().split('T')[0];
+    }
+  }
+});
+
+// Membership status options
+const membershipStatusOptions = [
+  { title: 'Active', value: 'Active' },
+  { title: 'Inactive', value: 'Inactive' },
+  { title: 'Pending', value: 'Pending' },
+  { title: 'Expired', value: 'Expired' }
+];
+
+// Validation rules
+const rules = {
+  required: (value: any) => {
+    if (typeof value === 'string') {
+      return !!value?.trim() || 'This field is required';
+    }
+    return !!value || 'This field is required';
+  },
+  email: (value: string) => {
+    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return !value || pattern.test(value) || 'Please enter a valid email address';
+  }
+};
+
+// Error handling methods
+const hasFieldError = (fieldName: string) => {
+  return !!fieldErrors.value[fieldName];
+};
+
+const getFieldError = (fieldName: string) => {
+  return fieldErrors.value[fieldName] || '';
+};
+
+const clearFieldErrors = () => {
+  fieldErrors.value = {};
+};
+
+// Phone data handler
+const handlePhoneData = (data: any) => {
+  phoneData.value = data;
+};
+
+// Form pre-population
+const populateForm = () => {
+  if (!props.member) return;
+  
+  const member = props.member;
+  form.value = {
+    'First Name': member['First Name'] || '',
+    'Last Name': member['Last Name'] || '',
+    Email: member.Email || '',
+    Phone: member.Phone || '',
+    'Date of Birth': member['Date of Birth'] || '',
+    Nationality: member.Nationality || '',
+    Address: member.Address || '',
+    'Membership Status': member['Membership Status'] || 'Active',
+    'Member Since': member['Member Since'] || '',
+    'Current Year Dues Paid': member['Current Year Dues Paid'] || 'false',
+    'Membership Date Paid': member['Membership Date Paid'] || '',
+    'Payment Due Date': member['Payment Due Date'] || ''
+  };
+  
+  // Set dues paid switch based on the string value
+  duesPaid.value = member['Current Year Dues Paid'] === 'true';
+};
+
+// Form submission
+const handleSubmit = async () => {
+  if (!formRef.value || !props.member) return;
+
+  const isValid = await formRef.value.validate();
+  if (!isValid.valid) {
+    return;
+  }
+
+  loading.value = true;
+  clearFieldErrors();
+
+  try {
+    // Prepare the data for submission
+    const memberData = { ...form.value };
+    
+    // Ensure required fields are not empty
+    if (!memberData['First Name']?.trim()) {
+      throw new Error('First Name is required');
+    }
+    if (!memberData['Last Name']?.trim()) {
+      throw new Error('Last Name is required');
+    }
+    if (!memberData.Email?.trim()) {
+      throw new Error('Email is required');
+    }
+
+    console.log('[EditMemberDialog] Updating member data:', memberData);
+
+    const response = await $fetch<{ success: boolean; data: Member; message?: string }>(`/api/members/${props.member.Id}`, {
+      method: 'PUT',
+      body: memberData
+    });
+
+    if (response.success && response.data) {
+      console.log('[EditMemberDialog] Member updated successfully:', response.data);
+      emit('member-updated', response.data);
+      closeDialog();
+    } else {
+      throw new Error(response.message || 'Failed to update member');
+    }
+  } catch (error: any) {
+    console.error('[EditMemberDialog] Error updating member:', error);
+    
+    // Handle validation errors
+    if (error.data?.fieldErrors) {
+      fieldErrors.value = error.data.fieldErrors;
+    } else {
+      // Show general error
+      fieldErrors.value = {
+        general: error.message || 'Failed to update member. Please try again.'
+      };
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Dialog management
+const closeDialog = () => {
+  emit('update:model-value', false);
+};
+
+// Watch for dialog open/close and member changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && props.member) {
+    // Dialog opened - populate form with member data
+    populateForm();
+    clearFieldErrors();
+    
+    // Reset form validation
+    nextTick(() => {
+      formRef.value?.resetValidation();
+    });
+  }
+});
+
+watch(() => props.member, (newMember) => {
+  if (newMember && props.modelValue) {
+    // Member changed while dialog is open
+    populateForm();
+  }
+});
+</script>
+
+<style scoped>
+.bg-primary {
+  background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
+}
+
+.text-primary {
+  color: #a31515 !important;
+}
+
+.v-card {
+  border-radius: 12px !important;
+}
+
+/* Form section spacing */
+.v-card-text .v-row .v-col:first-child h3 {
+  border-bottom: 2px solid rgba(var(--v-theme-primary), 0.12);
+  padding-bottom: 8px;
+}
+
+/* Error message styling */
+.field-error {
+  color: rgb(var(--v-theme-error));
+  font-size: 0.75rem;
+  margin-top: 4px;
+}
+
+/* Switch styling */
+.v-switch {
+  flex: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .v-dialog {
+    margin: 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .v-card-title {
+    padding: 16px !important;
+  }
+  
+  .v-card-text {
+    padding: 16px !important;
+  }
+  
+  .v-card-actions {
+    padding: 16px !important;
+    padding-top: 0 !important;
+  }
+}
+</style>

components/MemberCard.vue

@@ -155,8 +155,8 @@ const memberInitials = computed(() => {
 });
 
 const avatarColor = computed(() => {
-  // Generate consistent color based on member ID
+  // Generate consistent color based on member ID using high-contrast colors
-  const colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'success'];
+  const colors = ['red', 'blue', 'green', 'orange', 'purple', 'teal', 'indigo', 'pink', 'brown'];
   const idNumber = parseInt(props.member.Id) || 0;
   return colors[idNumber % colors.length];
 });

nuxt.config.ts

@@ -69,7 +69,6 @@ export default defineNuxtConfig({
     ]
   ],
   css: [
-    'flag-icons/css/flag-icons.min.css'
   ],
   app: {
     head: {

package-lock.json

@@ -20,6 +20,7 @@
         "sharp": "^0.34.2",
         "systeminformation": "^5.27.7",
         "vue": "latest",
+        "vue-country-flag-next": "^2.3.2",
         "vue-router": "latest",
         "vuetify-nuxt-module": "^0.18.3"
       },
@@ -17662,6 +17663,18 @@
       "integrity": "sha512-uoNZaJ+a1/zppa/Vgmi8zIOP2PHXDN2rT8NyF+zQRK6ZG94lNB9prcV0GdLJbY9i9lrD47JOVIH92SaiA7oJ1A==",
       "license": "MIT"
     },
+    "node_modules/vue-country-flag-next": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-country-flag-next/-/vue-country-flag-next-2.3.2.tgz",
+      "integrity": "sha512-Lv12L1VTwlBgizpZ3xPEPO3zuIETaJmeSiPuLOWLLgu2EakwU/o72iKYiKcdZ6BXiSkfss+Ski5fDzjuxZ1DcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "sharp": "^0.34.2",
     "systeminformation": "^5.27.7",
     "vue": "latest",
+    "vue-country-flag-next": "^2.3.2",
     "vue-router": "latest",
     "vuetify-nuxt-module": "^0.18.3"
   },

pages/dashboard/member-list.vue

@@ -15,7 +15,7 @@
 
     <!-- Search and Filter Controls -->
     <v-row class="mb-4">
-      <v-col cols="12" md="4">
+      <v-col cols="12" md="3">
         <v-text-field
           v-model="searchTerm"
           label="Search members..."
@@ -26,29 +26,6 @@
         />
       </v-col>
       
-      <v-col cols="12" md="3">
-        <v-select
-          v-model="nationalityFilter"
-          :items="nationalityOptions"
-          label="Nationality"
-          variant="outlined"
-          clearable
-          @update:model-value="filterMembers"
-        >
-          <template #selection="{ item }">
-            <CountryFlag :country-code="item.raw.code" :show-name="true" size="small" />
-          </template>
-          <template #item="{ props, item }">
-            <v-list-item v-bind="props">
-              <template #prepend>
-                <CountryFlag :country-code="item.raw.code" :show-name="false" size="small" />
-              </template>
-              <v-list-item-title>{{ item.raw.name }}</v-list-item-title>
-            </v-list-item>
-          </template>
-        </v-select>
-      </v-col>
-      
       <v-col cols="12" md="3">
         <v-select
           v-model="statusFilter"
@@ -60,7 +37,17 @@
         />
       </v-col>
       
-      <v-col cols="12" md="2">
+      <v-col cols="12" md="3">
+        <v-select
+          v-model="sortOption"
+          :items="sortOptions"
+          label="Sort By"
+          variant="outlined"
+          prepend-inner-icon="mdi-sort"
+        />
+      </v-col>
+      
+      <v-col cols="12" md="3">
         <v-btn
           color="primary"
           block
@@ -162,12 +149,12 @@
           <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-account-search</v-icon>
           <h3 class="text-h5 mb-2">No members found</h3>
           <p class="text-body-1 mb-4">
-            {{ searchTerm || nationalityFilter || statusFilter 
+            {{ searchTerm || statusFilter 
               ? 'Try adjusting your filters to find members.' 
               : 'No members have been added yet.' }}
           </p>
           <v-btn 
-            v-if="canCreateMembers && !searchTerm && !nationalityFilter && !statusFilter"
+            v-if="canCreateMembers && !searchTerm && !statusFilter"
             color="primary" 
             @click="showAddDialog = true"
           >
@@ -267,8 +254,8 @@ const error = ref('');
 
 // Search and filtering
 const searchTerm = ref('');
-const nationalityFilter = ref('');
 const statusFilter = ref('');
+const sortOption = ref('name-asc');
 
 // Dialogs
 const showAddDialog = ref(false);
@@ -290,15 +277,15 @@ const statusOptions = [
   { title: 'Expired', value: 'Expired' }
 ];
 
-const nationalityOptions = computed(() => {
+// Sort options
-  const countries = getAllCountries();
+const sortOptions = [
-  return countries.map(country => ({
+  { title: 'Name (A-Z)', value: 'name-asc' },
-    title: country.name,
+  { title: 'Name (Z-A)', value: 'name-desc' },
-    value: country.code,
+  { title: 'Date Paid (Newest First)', value: 'date-desc' },
-    code: country.code,
+  { title: 'Date Paid (Oldest First)', value: 'date-asc' },
-    name: country.name
+  { title: 'Nationality (A-Z)', value: 'nationality-asc' },
-  }));
+  { title: 'Nationality (Z-A)', value: 'nationality-desc' }
-});
+];
 
 // Computed properties
 const filteredMembers = computed(() => {
@@ -314,13 +301,6 @@ const filteredMembers = computed(() => {
     );
   }
 
-  // Nationality filter
-  if (nationalityFilter.value) {
-    filtered = filtered.filter(member => 
-      member.Nationality === nationalityFilter.value
-    );
-  }
-
   // Status filter
   if (statusFilter.value) {
     filtered = filtered.filter(member => 
@@ -328,6 +308,32 @@ const filteredMembers = computed(() => {
     );
   }
 
+  // Sorting
+  if (sortOption.value) {
+    filtered.sort((a, b) => {
+      switch (sortOption.value) {
+        case 'name-asc':
+          return (a.FullName || '').localeCompare(b.FullName || '');
+        case 'name-desc':
+          return (b.FullName || '').localeCompare(a.FullName || '');
+        case 'date-desc':
+          const aDate = a['Membership Date Paid'] || '';
+          const bDate = b['Membership Date Paid'] || '';
+          return new Date(bDate).getTime() - new Date(aDate).getTime();
+        case 'date-asc':
+          const aDateAsc = a['Membership Date Paid'] || '';
+          const bDateAsc = b['Membership Date Paid'] || '';
+          return new Date(aDateAsc).getTime() - new Date(bDateAsc).getTime();
+        case 'nationality-asc':
+          return (a.Nationality || '').localeCompare(b.Nationality || '');
+        case 'nationality-desc':
+          return (b.Nationality || '').localeCompare(a.Nationality || '');
+        default:
+          return 0;
+      }
+    });
+  }
+
   return filtered;
 });