updated member list with improved filtering system and enhanced editing capabilities.

pages/dashboard/member-list.vue

@@ -15,7 +15,7 @@
 
     <!-- Search and Filter Controls -->
     <v-row class="mb-4">
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="2">
         <v-text-field
           v-model="searchTerm"
           label="Search members..."
@@ -26,18 +26,40 @@
         />
       </v-col>
       
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="2">
         <v-select
-          v-model="statusFilter"
+          v-model="activeFilter"
-          :items="statusOptions"
+          :items="activeFilterOptions"
-          label="Membership Status"
+          label="Member Status"
           variant="outlined"
           clearable
-          @update:model-value="filterMembers"
+          prepend-inner-icon="mdi-account-check"
         />
       </v-col>
       
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="2">
+        <v-select
+          v-model="statusFilter"
+          :items="statusOptions"
+          label="Membership Level"
+          variant="outlined"
+          clearable
+          prepend-inner-icon="mdi-shield-account"
+        />
+      </v-col>
+      
+      <v-col cols="12" md="2">
+        <v-select
+          v-model="duesFilter"
+          :items="duesFilterOptions"
+          label="Dues Status"
+          variant="outlined"
+          clearable
+          prepend-inner-icon="mdi-cash"
+        />
+      </v-col>
+      
+      <v-col cols="12" md="2">
         <v-select
           v-model="sortOption"
           :items="sortOptions"
@@ -47,7 +69,7 @@
         />
       </v-col>
       
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="2">
         <v-btn
           color="primary"
           block
@@ -254,7 +276,9 @@ const error = ref('');
 
 // Search and filtering
 const searchTerm = ref('');
+const activeFilter = ref('');
 const statusFilter = ref('');
+const duesFilter = ref('');
 const sortOption = ref('name-asc');
 
 // Dialogs
@@ -270,6 +294,11 @@ const showSuccess = ref(false);
 const successMessage = ref('');
 
 // Filter options
+const activeFilterOptions = [
+  { title: 'Active Members', value: 'active' },
+  { title: 'Inactive Members', value: 'inactive' }
+];
+
 const statusOptions = [
   { title: 'Active', value: 'Active' },
   { title: 'Inactive', value: 'Inactive' },
@@ -277,12 +306,15 @@ const statusOptions = [
   { title: 'Expired', value: 'Expired' }
 ];
 
+const duesFilterOptions = [
+  { title: 'Dues Paid', value: 'paid' },
+  { title: 'Dues Outstanding', value: 'unpaid' }
+];
+
 // 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' }
 ];
@@ -296,18 +328,36 @@ const filteredMembers = computed(() => {
     const search = searchTerm.value.toLowerCase();
     filtered = filtered.filter(member =>
       member.FullName?.toLowerCase().includes(search) ||
-      member.Email?.toLowerCase().includes(search) ||
+      member.email?.toLowerCase().includes(search) ||
-      member.Phone?.includes(search)
+      member.phone?.includes(search)
     );
   }
 
-  // Status filter
+  // Active/Inactive filter
+  if (activeFilter.value) {
+    if (activeFilter.value === 'active') {
+      filtered = filtered.filter(member => member.membership_status === 'Active');
+    } else if (activeFilter.value === 'inactive') {
+      filtered = filtered.filter(member => member.membership_status !== 'Active');
+    }
+  }
+
+  // Status filter (specific membership levels)
   if (statusFilter.value) {
     filtered = filtered.filter(member => 
-      member['Membership Status'] === statusFilter.value
+      member.membership_status === statusFilter.value
     );
   }
 
+  // Dues filter
+  if (duesFilter.value) {
+    if (duesFilter.value === 'paid') {
+      filtered = filtered.filter(member => member.current_year_dues_paid === 'true');
+    } else if (duesFilter.value === 'unpaid') {
+      filtered = filtered.filter(member => member.current_year_dues_paid !== 'true');
+    }
+  }
+
   // Sorting
   if (sortOption.value) {
     filtered.sort((a, b) => {
@@ -316,18 +366,10 @@ const filteredMembers = computed(() => {
           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 || '');
+          return (a.nationality || '').localeCompare(b.nationality || '');
         case 'nationality-desc':
-          return (b.Nationality || '').localeCompare(a.Nationality || '');
+          return (b.nationality || '').localeCompare(a.nationality || '');
         default:
           return 0;
       }
@@ -339,13 +381,13 @@ const filteredMembers = computed(() => {
 
 const totalMembers = computed(() => members.value.length);
 const activeMembers = computed(() => 
-  members.value.filter(m => m['Membership Status'] === 'Active').length
+  members.value.filter(m => m.membership_status === 'Active').length
 );
 const paidDuesMembers = computed(() => 
-  members.value.filter(m => m['Current Year Dues Paid'] === 'true').length
+  members.value.filter(m => m.current_year_dues_paid === 'true').length
 );
 const uniqueNationalities = computed(() => {
-  const nationalities = new Set(members.value.map(m => m.Nationality).filter(Boolean));
+  const nationalities = new Set(members.value.map(m => m.nationality).filter(Boolean));
   return nationalities.size;
 });