From 5e5bcdfb4f01244dbae0dd70ae1b6e3ca7678da1 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 5 Sep 2025 17:03:26 +0200
Subject: [PATCH] Update member list ID display and move Mark Paid button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed ID display from "DB ID: pending" to "ID Pending" for cleaner UI
- Moved Mark Paid button from Dues column to Actions column for better organization
- Increased Actions column width to accommodate the Mark Paid button
- Simplified the dues status display to just show the chip

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 pages/admin/members/index.vue | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/pages/admin/members/index.vue b/pages/admin/members/index.vue
index ed3d54c..be36413 100644
--- a/pages/admin/members/index.vue
+++ b/pages/admin/members/index.vue
@@ -177,7 +177,7 @@
             />
             <div>
               <div class="font-weight-medium">{{ item.first_name }} {{ item.last_name }}</div>
-              <div class="text-caption text-medium-emphasis">ID: {{ item.member_id || `Pending (DB ID: ${item.Id})` }}</div>
+              <div class="text-caption text-medium-emphasis">{{ item.member_id ? `ID: ${item.member_id}` : 'ID Pending' }}</div>
             </div>
           </div>
         </template>
@@ -200,14 +200,17 @@
         </template>
 
         <template v-slot:item.dues_paid="{ item }">
-          <div class="d-flex align-center gap-2">
-            <v-chip
-              :color="item.dues_paid_this_year ? 'success' : 'warning'"
-              size="small"
-              variant="flat"
-            >
-              {{ item.dues_paid_this_year ? 'Yes' : 'No' }}
-            </v-chip>
+          <v-chip
+            :color="item.dues_paid_this_year ? 'success' : 'warning'"
+            size="small"
+            variant="flat"
+          >
+            {{ item.dues_paid_this_year ? 'Yes' : 'No' }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.actions="{ item }">
+          <div class="d-flex align-center gap-1">
             <v-btn
               v-if="!item.dues_paid_this_year"
               color="success"
@@ -218,11 +221,6 @@
               <v-icon start size="16">mdi-check</v-icon>
               Mark Paid
             </v-btn>
-          </div>
-        </template>
-
-        <template v-slot:item.actions="{ item }">
-          <div class="d-flex align-center gap-1">
             <v-btn
               icon="mdi-eye"
               size="small"
@@ -545,7 +543,7 @@ const enhancedHeaders = [
   { title: 'Email', key: 'email', sortable: true },
   { title: 'Nationality', key: 'nationality', sortable: true },
   { title: 'Dues Paid This Year', key: 'dues_paid', sortable: true },
-  { title: 'Actions', key: 'actions', sortable: false, align: 'center', width: '200' }
+  { title: 'Actions', key: 'actions', sortable: false, align: 'center', width: '250' }
 ];
 
 // Real data from API