fixes

components/DuesPaymentBanner.vue

@@ -1,16 +1,16 @@
 <template>
   <v-banner
     v-if="showBanner"
-    color="warning"
-    icon="mdi-alert-circle"
+    :color="isOverdue ? 'error' : 'warning'"
+    :icon="isOverdue ? 'mdi-alert-octagon' : 'mdi-alert-circle'"
     sticky
-    class="dues-payment-banner"
+    :class="['dues-payment-banner', { 'overdue-banner': isOverdue }]"
   >
     <template #text>
       <div class="banner-content">
         <div class="text-h6 font-weight-bold mb-2">
-          <v-icon left>mdi-credit-card-alert</v-icon>
-          Membership Dues Payment Required
+          <v-icon left>{{ isOverdue ? 'mdi-alert-octagon' : 'mdi-credit-card-alert' }}</v-icon>
+          {{ isOverdue ? '🚨 URGENT: Overdue Dues Payment' : 'Membership Dues Payment Required' }}
         </div>
         
         <div class="text-body-1 mb-3">
@@ -209,8 +209,27 @@ const isPaymentOverOneYear = computed(() => {
 });
 
 /**
- * Check if dues need to be paid (either overdue or in grace period)
- * Banner should show when payment is needed
+ * Check if dues are coming due within 30 days
+ */
+const isDueSoon = computed(() => {
+  if (!memberData.value?.payment_due_date) return false;
+  
+  try {
+    const dueDate = new Date(memberData.value.payment_due_date);
+    const today = new Date();
+    const diffTime = dueDate.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    
+    // Show banner if due within 30 days (including overdue)
+    return diffDays <= 30;
+  } catch {
+    return false;
+  }
+});
+
+/**
+ * Check if dues need to be paid (either coming due soon or overdue)
+ * Banner should show when payment is needed within 30 days
  */
 const needsPayment = computed(() => {
   if (!memberData.value) return false;
@@ -219,9 +238,9 @@ const needsPayment = computed(() => {
   const paymentTooOld = isPaymentOverOneYear.value;
   
   // Show banner if:
-  // 1. Dues are not currently paid (regardless of grace period)
+  // 1. Dues are coming due within 30 days AND not currently paid
   // 2. OR payment is over 1 year old (even if marked as paid)
-  return !duesCurrentlyPaid || paymentTooOld;
+  return (isDueSoon.value && !duesCurrentlyPaid) || paymentTooOld;
 });
 
 // Computed properties
@@ -241,16 +260,23 @@ const daysRemaining = computed(() => {
   const diffTime = dueDate.getTime() - today.getTime();
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
   
-  return Math.max(0, diffDays);
+  return diffDays; // Allow negative values for overdue
+});
+
+const isOverdue = computed(() => {
+  return daysRemaining.value < 0;
 });
 
 const paymentMessage = computed(() => {
-  if (daysRemaining.value > 30) {
-    return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days.`;
-  } else if (daysRemaining.value > 0) {
+  if (isOverdue.value) {
+    const overdueDays = Math.abs(daysRemaining.value);
+    return `Your annual membership dues of €${config.value.membershipFee} are ${overdueDays} day${overdueDays !== 1 ? 's' : ''} overdue. Immediate payment is required to avoid account suspension.`;
+  } else if (daysRemaining.value <= 7) {
+    return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days. Please pay immediately to avoid late fees.`;
+  } else if (daysRemaining.value <= 30) {
     return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days. Please pay soon to avoid account suspension.`;
   } else {
-    return `Your annual membership dues of €${config.value.membershipFee} are overdue. Your account may be suspended soon.`;
+    return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days.`;
   }
 });
 
@@ -387,6 +413,17 @@ onMounted(() => {
   border-left: 4px solid #ff9800;
 }
 
+.dues-payment-banner.overdue-banner {
+  border-left: 4px solid #f44336;
+  animation: pulse-border 2s infinite;
+}
+
+@keyframes pulse-border {
+  0% { border-left-color: #f44336; }
+  50% { border-left-color: #ff5252; }
+  100% { border-left-color: #f44336; }
+}
+
 .banner-content {
   width: 100%;
 }

server/api/members/[id]/send-dues-reminder.post.ts

@@ -1,5 +1,5 @@
 import { sendEmail } from '~/server/utils/email';
-import { createNocoDBClient } from '~/server/utils/nocodb';
+import { getMemberById } from '~/server/utils/nocodb';
 import { calculateDaysUntilDue, calculateOverdueDays, getNextDuesDate, isPaymentOverOneYear, isDuesActuallyCurrent } from '~/utils/dues-calculations';
 import { getRegistrationConfig } from '~/server/utils/admin-config';
 
@@ -23,8 +23,7 @@ export default defineEventHandler(async (event) => {
     }
 
     // Get member data
-    const nocodb = createNocoDBClient();
-    const member = await nocodb.findOne('nc_members', memberId);
+    const member = await getMemberById(memberId);
 
     if (!member) {
       throw createError({