Fix RSVP API calls and compact MemberCard UI design

components/EventDetailsDialog.vue

@@ -452,7 +452,11 @@ const submitRSVP = async (status: 'confirmed' | 'declined') => {
   rsvpLoading.value = true;
   
   try {
-    await rsvpToEvent(props.event.id, {
+    // Use the database ID for RSVP API calls
+    const databaseId = (props.event as any).extendedProps?.database_id || props.event.id;
+    console.log('[EventDetailsDialog] Using database ID for RSVP:', databaseId, 'from event:', props.event);
+    
+    await rsvpToEvent(databaseId, {
       member_id: '', // This will be filled by the composable
       rsvp_status: status,
       rsvp_notes: rsvpNotes.value

components/MemberCard.vue

@@ -60,20 +60,20 @@
     </div>
 
     <!-- Card Content -->
-    <v-card-text class="pb-4">
-      <div class="d-flex align-center mb-3">
+    <v-card-text class="pb-4 pt-3">
+      <div class="d-flex align-center mb-2">
         <v-avatar
           :color="avatarColor"
-          size="48"
+          size="40"
           class="mr-3"
         >
-          <span class="text-white font-weight-bold text-h6">
+          <span class="text-white font-weight-bold">
             {{ memberInitials }}
           </span>
         </v-avatar>
         
         <div class="flex-grow-1">
-          <h3 class="text-h6 font-weight-bold mb-1">
+          <h3 class="text-subtitle-1 font-weight-bold mb-1">
             {{ member.FullName || `${member.first_name} ${member.last_name}` }}
           </h3>
           <div class="nationality-display">
@@ -92,14 +92,14 @@
                 </div>
                 <!-- Display country names -->
                 <div class="country-names">
-                  <span class="text-body-2 text-medium-emphasis">
+                  <span class="text-caption text-medium-emphasis">
                     {{ nationalitiesArray.map(n => getCountryName(n)).join(', ') }}
                   </span>
                 </div>
               </div>
             </template>
             <template v-else>
-              <span class="text-body-2 text-medium-emphasis">
+              <span class="text-caption text-medium-emphasis">
                 Unknown
               </span>
             </template>
@@ -107,83 +107,81 @@
         </div>
       </div>
 
-      <!-- Member Info -->
-      <div class="member-info">
-        <div class="info-row mb-2">
-          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
-          <span class="text-body-2">{{ member.email || 'No email' }}</span>
+      <!-- Member Info - More Compact -->
+      <div class="member-info mb-2">
+        <div class="info-row mb-1" v-if="member.email">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
+          <span class="text-caption">{{ member.email }}</span>
         </div>
         
-        <div class="info-row mb-2" v-if="member.phone">
-          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-phone</v-icon>
-          <span class="text-body-2">{{ member.FormattedPhone || member.phone }}</span>
+        <div class="info-row mb-1" v-if="member.phone">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-phone</v-icon>
+          <span class="text-caption">{{ member.FormattedPhone || member.phone }}</span>
         </div>
         
-        <div class="info-row mb-2" v-if="member.member_since">
-          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-calendar</v-icon>
-          <span class="text-body-2">Member since {{ formatDate(member.member_since) }}</span>
+        <div class="info-row mb-1" v-if="member.member_since">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-calendar</v-icon>
+          <span class="text-caption">Since {{ formatDate(member.member_since) }}</span>
         </div>
       </div>
 
-      <!-- Dues Status -->
-      <div class="dues-status mt-3">
-        <v-chip
-          :color="duesColor"
-          :variant="duesVariant"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">{{ duesIcon }}</v-icon>
-          {{ duesText }}
-        </v-chip>
+      <!-- Status Section - Reorganized -->
+      <div class="status-section">
+        <!-- Primary Status (Dues) -->
+        <div class="d-flex align-center justify-space-between mb-2">
+          <v-chip
+            :color="duesColor"
+            :variant="duesVariant"
+            size="small"
+            class="flex-grow-1 mr-1"
+          >
+            <v-icon start size="12">{{ duesIcon }}</v-icon>
+            {{ duesText }}
+          </v-chip>
           
-        <!-- Dues Coming Due Warning -->
-        <v-chip
-          v-if="isDuesComingDue"
-          color="orange"
-          variant="flat"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-clock-alert</v-icon>
-          Due {{ formatDate(nextDuesDate) }}
-        </v-chip>
+          <!-- Portal Status - Compact -->
+          <v-tooltip 
+            :text="member.keycloak_id ? 'Portal Account Active' : 'No Portal Account'"
+            location="top"
+          >
+            <template #activator="{ props }">
+              <v-chip
+                v-bind="props"
+                :color="member.keycloak_id ? 'success' : 'grey'"
+                variant="tonal"
+                size="x-small"
+                class="ml-1"
+              >
+                <v-icon size="12">{{ member.keycloak_id ? 'mdi-account-check' : 'mdi-account-off' }}</v-icon>
+              </v-chip>
+            </template>
+          </v-tooltip>
+        </div>
         
-        <v-chip
-          v-if="member.payment_due_date && !isDuesComingDue"
-          color="warning"
-          variant="tonal"
-          size="small"
-          :class="{ 'text-error': isOverdue }"
-        >
-          <v-icon start size="14">mdi-calendar-alert</v-icon>
-          {{ isOverdue ? 'Overdue' : `Due ${formatDate(member.payment_due_date)}` }}
-        </v-chip>
-      </div>
+        <!-- Secondary Status (Due Dates) - Only show if relevant -->
+        <div v-if="isDuesComingDue || (member.payment_due_date && !isDuesComingDue && isOverdue)" class="d-flex">
+          <v-chip
+            v-if="isDuesComingDue"
+            color="orange"
+            variant="flat"
+            size="x-small"
+            class="flex-grow-1"
+          >
+            <v-icon start size="10">mdi-clock-alert</v-icon>
+            Due {{ formatDate(nextDuesDate) }}
+          </v-chip>
           
-      <!-- Portal Account Status -->
-      <div class="portal-status mt-3">
-        <v-chip
-          v-if="member.keycloak_id"
-          color="success"
-          variant="tonal"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-account-check</v-icon>
-          Portal Account Active
-        </v-chip>
-        
-        <v-chip
-          v-else
-          color="grey"
-          variant="tonal"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-account-off</v-icon>
-          No Portal Account
-        </v-chip>
+          <v-chip
+            v-else-if="member.payment_due_date && !isDuesComingDue && isOverdue"
+            color="error"
+            variant="flat"
+            size="x-small"
+            class="flex-grow-1"
+          >
+            <v-icon start size="10">mdi-calendar-alert</v-icon>
+            Overdue
+          </v-chip>
+        </div>
       </div>
     </v-card-text>
 
@@ -481,7 +479,7 @@ const formatDate = (dateString: string): string => {
 }
 
 .member-info {
-  min-height: 80px;
+  min-height: 60px;
 }
 
 .info-row {

composables/useEvents.ts

@@ -123,8 +123,13 @@ export const useEvents = () => {
       });
 
       if (response.success) {
-        // Update local event data
-        const eventIndex = events.value.findIndex(e => e.id === eventId);
+        // Update local event data - match by database ID (stored in Id field or as fallback)
+        const eventIndex = events.value.findIndex(e => 
+          (e as any).Id === eventId || e.id === eventId
+        );
+        
+        console.log('[useEvents] Looking for event with database ID:', eventId, 'found at index:', eventIndex);
+        
         if (eventIndex !== -1) {
           events.value[eventIndex].user_rsvp = response.data;
           

layouts/dashboard.vue

@@ -180,7 +180,7 @@
       <!-- Dues Payment Banner -->
       <DuesPaymentBanner />
       
-      <v-container fluid class="pa-0">
+      <v-container fluid>
         <slot />
       </v-container>
     </v-main>

pages/dashboard/member-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container fluid class="pa-4">
     <!-- Dues Payment Banner -->
     <DuesPaymentBanner />
     
@@ -146,8 +146,9 @@
         :key="member.Id"
         cols="12"
         sm="6"
-        md="4"
-        lg="3"
+        md="6"
+        lg="4"
+        xl="3"
       >
         <MemberCard
           :member="member"