fixes

components/BoardDuesManagement.vue

@@ -161,38 +161,17 @@ const loadDuesData = async () => {
   }
 };
 
-// Handle mark as paid
+// Handle mark as paid - let DuesActionCard handle the date picker and API call
 const handleMarkPaid = async (member: Member) => {
-  loading.value[member.Id] = true;
+  // Remove member from current lists since they've been marked as paid
+  overdueMembers.value = overdueMembers.value.filter(m => m.Id !== member.Id);
+  upcomingMembers.value = upcomingMembers.value.filter(m => m.Id !== member.Id);
   
-  try {
-    const response = await $fetch<{
-      success: boolean;
-      data: Member;
-      message?: string;
-    }>(`/api/members/${member.Id}/mark-dues-paid`, {
-      method: 'POST'
-    });
-
-    if (response.success) {
-      // Remove member from current lists
-      overdueMembers.value = overdueMembers.value.filter(m => m.Id !== member.Id);
-      upcomingMembers.value = upcomingMembers.value.filter(m => m.Id !== member.Id);
-      
-      // Emit update event
-      emit('member-updated', response.data);
-      
-      // Show success message
-      console.log('Dues marked as paid successfully');
-    } else {
-      throw new Error(response.message || 'Failed to mark dues as paid');
-    }
-  } catch (error: any) {
-    console.error('Error marking dues as paid:', error);
-    // Show error notification
-  } finally {
-    loading.value[member.Id] = false;
-  }
+  // Emit update event
+  emit('member-updated', member);
+  
+  // Show success message
+  console.log('Dues marked as paid successfully');
 };
 
 // Handle view member

components/DuesPaymentBanner.vue

@@ -387,34 +387,39 @@ async function markDuesAsPaid() {
   updating.value = true;
   
   try {
-    // Update member's dues status with the selected payment date
-    await $fetch(`/api/members/${memberData.value.Id}`, {
-      method: 'PUT',
+    // Call the API with the selected payment date using the correct endpoint
+    const response = await $fetch<{
+      success: boolean;
+      data: any;
+      message?: string;
+    }>(`/api/members/${memberData.value.Id}/mark-dues-paid`, {
+      method: 'post',
       body: {
-        current_year_dues_paid: 'true',
-        membership_date_paid: selectedPaymentDate.value,
-        payment_due_date: new Date(new Date(selectedPaymentDate.value).getTime() + 365 * 24 * 60 * 60 * 1000).toISOString() // Next year from payment date
+        paymentDate: selectedPaymentDate.value
       }
     });
-    
-    // Update local member state
-    if (memberData.value) {
-      memberData.value.current_year_dues_paid = 'true';
-      memberData.value.membership_date_paid = selectedPaymentDate.value;
+
+    if (response?.success && response.data) {
+      // Update local member state
+      if (memberData.value) {
+        memberData.value.current_year_dues_paid = 'true';
+        memberData.value.membership_date_paid = selectedPaymentDate.value;
+      }
+      
+      // Hide banner and reset
+      showBanner.value = false;
+      markAsPaidDialog.value = false;
+      selectedPaymentDate.value = '';
+      selectedPaymentModel.value = null;
+      
+      // Show success message
+      snackbar.value = {
+        show: true,
+        message: 'Dues marked as paid successfully!',
+        color: 'success'
+      };
     }
     
-    // Hide banner and reset
-    showBanner.value = false;
-    markAsPaidDialog.value = false;
-    selectedPaymentDate.value = '';
-    
-    // Show success message
-    snackbar.value = {
-      show: true,
-      message: 'Dues marked as paid successfully!',
-      color: 'success'
-    };
-    
   } catch (error: any) {
     console.error('Failed to mark dues as paid:', error);
     snackbar.value = {
@@ -427,6 +432,15 @@ async function markDuesAsPaid() {
   }
 }
 
+// Initialize with today's date when dialog opens
+watch(markAsPaidDialog, (isOpen) => {
+  if (isOpen) {
+    const today = new Date();
+    selectedPaymentModel.value = today;
+    selectedPaymentDate.value = todayDate.value;
+  }
+});
+
 // Date picker handler
 const handleDateUpdate = (date: Date | null) => {
   if (date) {