Add dues management system with UI improvements

- Add BoardDuesManagement and DuesActionCard components
- Create API endpoints for dues status tracking and payment marking
- Integrate dues management section into board dashboard
- Move create portal account button to member card action buttons
- Add edit button to member view dialog
- Implement member update handlers and navigation between views

pages/dashboard/board.vue

@@ -144,6 +144,18 @@
       </v-col>
     </v-row>
 
+    <!-- Dues Management Section -->
+    <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>
+
     <!-- Recent Board Activity -->
     <v-row class="mb-6">
       <v-col cols="12">
@@ -224,6 +236,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Member } from '~/utils/types';
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
@@ -241,6 +255,9 @@ onMounted(() => {
   }
 });
 
+// Dues management state
+const duesRefreshTrigger = ref(0);
+
 // Mock data for board dashboard
 const stats = ref({
   totalMembers: 156,
@@ -278,13 +295,32 @@ const recentActivity = ref([
   }
 ]);
 
+// Dues management handlers
+const handleViewMember = (member: Member) => {
+  // Navigate to member details or open modal
+  console.log('View member:', member.FullName || `${member.first_name} ${member.last_name}`);
+  // You could implement member detail view here
+  navigateToMembers();
+};
+
+const handleMemberUpdated = (member: Member) => {
+  console.log('Member updated:', member.FullName || `${member.first_name} ${member.last_name}`);
+  
+  // Trigger dues refresh to update the lists
+  duesRefreshTrigger.value += 1;
+  
+  // You could also update stats here if needed
+  // stats.value = await fetchUpdatedStats();
+};
+
 // Navigation methods (placeholder implementations)
 const navigateToMeetings = () => {
   console.log('Navigate to meetings');
 };
 
 const navigateToMembers = () => {
-  console.log('Navigate to members');
+  // Navigate to member list page
+  navigateTo('/dashboard/member-list');
 };
 
 const navigateToReports = () => {

pages/dashboard/member-list.vue

@@ -197,6 +197,7 @@
     <ViewMemberDialog
       v-model="showViewDialog"
       :member="selectedMember"
+      @edit="editMember"
     />
 
     <!-- Delete Confirmation Dialog -->
@@ -326,7 +327,9 @@ const filteredMembers = computed(() => {
     filtered = filtered.filter(member =>
       member.FullName?.toLowerCase().includes(search) ||
       member.email?.toLowerCase().includes(search) ||
-      member.phone?.includes(search)
+      member.phone?.includes(search) ||
+      member.member_id?.toLowerCase().includes(search) ||
+      `MUSA-${member.Id}`.toLowerCase().includes(search) // Search by generated member ID format
     );
   }