Add overdue dues management system with notifications and status updates

- Create DuesOverdueBanner component for displaying overdue member counts
- Add API endpoints for overdue count retrieval and status updates
- Integrate overdue dues banner into admin and member list dashboards
- Implement handlers for viewing overdue members and updating statuses
- Add dues management section to admin dashboard

pages/dashboard/admin.vue

@@ -112,6 +112,29 @@
         </v-col>
       </v-row>
 
+      <!-- Overdue Dues Banner -->
+      <DuesOverdueBanner
+        :overdue-count="overdueCount"
+        :can-update-statuses="true"
+        :can-send-reminders="true"
+        :refresh-trigger="overdueRefreshTrigger"
+        @view-overdue="viewOverdueMembers"
+        @send-reminders="sendDuesReminders"
+        @statuses-updated="handleStatusesUpdated"
+      />
+
+      <!-- Dues Management -->
+      <v-row class="mb-6">
+        <v-col cols="12">
+          <BoardDuesManagement
+            :refresh-trigger="duesRefreshTrigger"
+            @view-member="handleViewMember"
+            @view-all-members="navigateToMembers"
+            @member-updated="handleMemberUpdated"
+          />
+        </v-col>
+      </v-row>
+
       <!-- Portal Configuration -->
       <v-row class="mb-6">
         <v-col cols="12">
@@ -390,6 +413,11 @@ const showRecaptchaConfig = ref(false);
 const showMembershipConfig = ref(false);
 const showEmailConfig = ref(false);
 
+// Dues management
+const overdueCount = ref(0);
+const overdueRefreshTrigger = ref(0);
+const duesRefreshTrigger = ref(0);
+
 // Create user dialog data
 const createUserValid = ref(false);
 const creatingUser = ref(false);
@@ -622,9 +650,60 @@ const systemMaintenance = () => {
   // TODO: Implement maintenance mode
 };
 
-// Load stats on component mount
+// Dues management handlers
+const loadOverdueCount = async () => {
+  try {
+    const response = await $fetch<{ success: boolean; data: { count: number } }>('/api/members/overdue-count');
+    if (response.success) {
+      overdueCount.value = response.data.count;
+    }
+  } catch (error: any) {
+    console.error('Error loading overdue count:', error);
+  }
+};
+
+const viewOverdueMembers = () => {
+  // Navigate to member list with overdue filter applied
+  navigateTo('/dashboard/member-list');
+};
+
+const sendDuesReminders = () => {
+  // Placeholder for dues reminder functionality
+  console.log('Send dues reminders - feature to be implemented');
+};
+
+const handleStatusesUpdated = async (updatedCount: number) => {
+  console.log(`Successfully updated ${updatedCount} member${updatedCount !== 1 ? 's' : ''} to inactive status`);
+  
+  // Refresh overdue count
+  await loadOverdueCount();
+  
+  // Trigger banner refresh
+  overdueRefreshTrigger.value += 1;
+};
+
+const handleViewMember = (member: any) => {
+  // Navigate to member details or open modal
+  console.log('View member:', member.FullName || `${member.first_name} ${member.last_name}`);
+  navigateTo('/dashboard/member-list');
+};
+
+const navigateToMembers = () => {
+  // Navigate to member list page
+  navigateTo('/dashboard/member-list');
+};
+
+const handleMemberUpdated = (member: any) => {
+  console.log('Member updated:', member.FullName || `${member.first_name} ${member.last_name}`);
+  
+  // Trigger dues refresh
+  duesRefreshTrigger.value += 1;
+};
+
+// Load stats and overdue count on component mount
 onMounted(async () => {
   await loadStats();
+  await loadOverdueCount();
 });
 </script>
 

pages/dashboard/member-list.vue

@@ -13,6 +13,17 @@
       </v-col>
     </v-row>
 
+    <!-- Overdue Dues Banner -->
+    <DuesOverdueBanner
+      :overdue-count="overdueCount"
+      :can-update-statuses="isAdmin"
+      :can-send-reminders="isAdmin || isBoard"
+      :refresh-trigger="overdueRefreshTrigger"
+      @view-overdue="viewOverdueMembers"
+      @send-reminders="sendDuesReminders"
+      @statuses-updated="handleStatusesUpdated"
+    />
+
     <!-- Search and Filter Controls -->
     <v-row class="mb-4">
       <v-col cols="12" md="2">
@@ -290,6 +301,10 @@ const successMessage = ref('');
 // Portal account creation
 const creatingPortalAccountIds = ref<string[]>([]);
 
+// Overdue dues management
+const overdueCount = ref(0);
+const overdueRefreshTrigger = ref(0);
+
 // Filter options
 const activeFilterOptions = [
   { title: 'Active Members', value: 'active' },
@@ -554,9 +569,50 @@ const createPortalAccount = async (member: Member) => {
   }
 };
 
-// Load members on mount
-onMounted(() => {
-  loadMembers();
+// Overdue dues handlers
+const loadOverdueCount = async () => {
+  try {
+    const response = await $fetch<{ success: boolean; data: { count: number } }>('/api/members/overdue-count');
+    if (response.success) {
+      overdueCount.value = response.data.count;
+    }
+  } catch (error: any) {
+    console.error('Error loading overdue count:', error);
+  }
+};
+
+const viewOverdueMembers = () => {
+  // Filter to show only inactive members (who were marked inactive due to overdue dues)
+  activeFilter.value = 'inactive';
+  duesFilter.value = 'unpaid';
+  
+  showSuccess.value = true;
+  successMessage.value = 'Showing members with overdue dues (marked as inactive)';
+};
+
+const sendDuesReminders = () => {
+  // Placeholder for dues reminder functionality
+  console.log('Send dues reminders - feature to be implemented');
+  showSuccess.value = true;
+  successMessage.value = 'Dues reminder feature coming soon!';
+};
+
+const handleStatusesUpdated = async (updatedCount: number) => {
+  showSuccess.value = true;
+  successMessage.value = `Successfully updated ${updatedCount} member${updatedCount !== 1 ? 's' : ''} to inactive status`;
+  
+  // Refresh members list and overdue count
+  await loadMembers();
+  await loadOverdueCount();
+  
+  // Trigger banner refresh
+  overdueRefreshTrigger.value += 1;
+};
+
+// Load members and overdue count on mount
+onMounted(async () => {
+  await loadMembers();
+  await loadOverdueCount();
 });
 </script>