Add payment date selection for dues payments and improve member viewing

- Add payment date dialog when marking dues as paid with date validation
- Replace direct member view emission with dedicated ViewMemberDialog component
- Add backend support for custom payment dates in mark-dues-paid endpoint
- Prevent future date selection for payment records
- Improve user workflow for viewing and editing member details

server/api/members/[id]/mark-dues-paid.post.ts

@@ -10,6 +10,10 @@ export default defineEventHandler(async (event) => {
       });
     }
 
+    // Get request body for custom payment date
+    const body = await readBody(event).catch(() => ({}));
+    const customPaymentDate = body.paymentDate;
+
     const { updateMember, getMemberById } = await import('~/server/utils/nocodb');
 
     // Get current member data
@@ -22,23 +26,44 @@ export default defineEventHandler(async (event) => {
       });
     }
 
+    // Determine payment date - use custom date if provided, otherwise today
+    let paymentDate: string;
+    if (customPaymentDate) {
+      try {
+        // Validate the custom date
+        const parsedDate = new Date(customPaymentDate);
+        if (isNaN(parsedDate.getTime())) {
+          throw new Error('Invalid date format');
+        }
+        paymentDate = parsedDate.toISOString().split('T')[0]; // YYYY-MM-DD format
+      } catch (error) {
+        throw createError({
+          statusCode: 400,
+          statusMessage: 'Invalid payment date provided. Please use YYYY-MM-DD format.'
+        });
+      }
+    } else {
+      // Default to today if no custom date provided
+      paymentDate = new Date().toISOString().split('T')[0];
+    }
+
     // Prepare update data
-    const today = new Date();
     const updateData = {
       current_year_dues_paid: 'true',
-      membership_date_paid: today.toISOString().split('T')[0], // YYYY-MM-DD format
+      membership_date_paid: paymentDate,
+      membership_status: 'Active', // Ensure member is marked as active when dues are paid
       payment_due_date: undefined // Clear the due date since it's now paid
     };
 
     // Update the member
     const updatedMember = await updateMember(memberId, updateData);
 
-    console.log(`[API] Successfully marked dues as paid for member ${memberId}`);
+    console.log(`[API] Successfully marked dues as paid for member ${memberId} with payment date: ${paymentDate}`);
 
     return {
       success: true,
       data: updatedMember,
-      message: `Dues marked as paid for ${updatedMember.first_name} ${updatedMember.last_name}`
+      message: `Dues marked as paid for ${updatedMember.first_name} ${updatedMember.last_name} (Payment Date: ${paymentDate})`
     };
 
   } catch (error: any) {

server/api/members/index.post.ts

@@ -128,7 +128,15 @@ async function sanitizeMemberData(data: any): Promise<Partial<Member>> {
   if (data.nationality) sanitized.nationality = data.nationality.trim();
   if (data.address) sanitized.address = data.address.trim();
   if (data.date_of_birth) sanitized.date_of_birth = data.date_of_birth;
-  if (data.member_since) sanitized.member_since = data.member_since;
+  
+  // Set member_since to provided date or default to today in YYYY-MM-DD format
+  if (data.member_since) {
+    sanitized.member_since = data.member_since;
+  } else {
+    sanitized.member_since = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
+    console.log('[api/members.post] Set member_since to current date:', sanitized.member_since);
+  }
+  
   if (data.membership_date_paid) sanitized.membership_date_paid = data.membership_date_paid;
   if (data.payment_due_date) sanitized.payment_due_date = data.payment_due_date;
   

server/api/registration.post.ts

@@ -130,7 +130,7 @@ export default defineEventHandler(async (event) => {
       current_year_dues_paid: 'false',
       membership_status: 'Active',
       registration_date: new Date().toISOString(),
-      member_since: new Date().getFullYear().toString(),
+      member_since: new Date().toISOString().split('T')[0], // YYYY-MM-DD format
       membership_date_paid: '',
       payment_due_date: paymentDueDate.toISOString() // 1 month from registration
     };