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
-  
-  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);
+  emit('member-updated', member);
   
   // 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;
-  }
 };
 
 // Handle view member

components/DuesPaymentBanner.vue

@@ -387,16 +387,19 @@ async function markDuesAsPaid() {
   updating.value = true;
   
   try {
-    // Update member's dues status with the selected payment date
+    // Call the API with the selected payment date using the correct endpoint
-    await $fetch(`/api/members/${memberData.value.Id}`, {
+    const response = await $fetch<{
-      method: 'PUT',
+      success: boolean;
+      data: any;
+      message?: string;
+    }>(`/api/members/${memberData.value.Id}/mark-dues-paid`, {
+      method: 'post',
       body: {
-        current_year_dues_paid: 'true',
+        paymentDate: selectedPaymentDate.value
-        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
       }
     });
 
+    if (response?.success && response.data) {
       // Update local member state
       if (memberData.value) {
         memberData.value.current_year_dues_paid = 'true';
@@ -407,6 +410,7 @@ async function markDuesAsPaid() {
       showBanner.value = false;
       markAsPaidDialog.value = false;
       selectedPaymentDate.value = '';
+      selectedPaymentModel.value = null;
       
       // Show success message
       snackbar.value = {
@@ -414,6 +418,7 @@ async function markDuesAsPaid() {
         message: 'Dues marked as paid successfully!',
         color: 'success'
       };
+    }
     
   } catch (error: any) {
     console.error('Failed to mark dues as paid:', error);
@@ -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) {