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

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(() => {
-  const countries = getAllCountries();
-  return countries.map(country => ({
-    title: country.name,
-    value: country.code,
-    code: country.code,
-    name: country.name
-  }));
-});
+// Sort options
+const sortOptions = [
+  { title: 'Name (A-Z)', value: 'name-asc' },
+  { title: 'Name (Z-A)', value: 'name-desc' },
+  { title: 'Date Paid (Newest First)', value: 'date-desc' },
+  { title: 'Date Paid (Oldest First)', value: 'date-asc' },
+  { 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;
 });