From f84adeff21ae4ecb50a098e728f46c3cfd268f8d Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 4 Sep 2025 13:36:03 +0200
Subject: [PATCH] Add NocoDB configuration tab to admin settings for persistent
 database connectivity

---
 .claude/settings.local.json                   |   6 +-
 .../document_symbols_cache_v23-06-25.pkl      | Bin 5150176 -> 5179588 bytes
 components/DuesActionCard.vue                 |   6 +-
 pages/admin/settings/index.vue                | 277 ++++++++++++++++++
 4 files changed, 285 insertions(+), 4 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 28233f1..5b54abb 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -61,7 +61,11 @@
       "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)",
       "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
       "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
-      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)"
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\settings/**)"
     ],
     "deny": [],
     "ask": []
diff --git a/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl b/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl
index f1eb18dba498e32a4cc30e7fecae1df31a21c6e8..cf6051f0f9a6c5d09cacfba4ef18ebfb537ce4e3 100644
GIT binary patch
delta 23673
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

delta 179
zcmV~$$uh!m007|ev;R|;>_l2*%`PEXveP*9D()S=L!*=DaBaqn>F7Z`itqdV?1sOu
zpU~7J=+&p+fI&lsMPf$8C5##~ZbH(eDbr@mnlo>~qLd}e(pF?-<>aj@ShH@!rY+lw
zcI?`-@4%rW$4X9=ojP-_;zHG>E7xw++`4n`!J{Y7Uc7edt#){ezCYUaMikzQ|2S?v
A*Z=?k

diff --git a/components/DuesActionCard.vue b/components/DuesActionCard.vue
index f0e6c72..feb8e76 100644
--- a/components/DuesActionCard.vue
+++ b/components/DuesActionCard.vue
@@ -118,14 +118,14 @@
     </v-card-text>
 
     <!-- Action Buttons -->
-    <v-card-actions class="pa-4 pt-0">
+    <v-card-actions class="pa-4 pt-0 d-flex justify-center">
       <v-btn
         color="success"
         variant="elevated"
-        size="small"
+        height="44"
         :loading="loading"
         @click="showPaymentDateDialog = true"
-        block
+        class="px-4"
       >
         <v-icon start size="16">mdi-check-circle</v-icon>
         Mark as Paid
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index 496c711..a6dc763 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -19,6 +19,10 @@
           <v-icon start>mdi-email</v-icon>
           Email
         </v-tab>
+        <v-tab value="nocodb">
+          <v-icon start>mdi-database</v-icon>
+          NocoDB
+        </v-tab>
       </v-tabs>
 
       <v-window v-model="activeTab">
@@ -327,6 +331,178 @@
             </v-row>
           </v-card-text>
         </v-window-item>
+
+        <!-- NocoDB Settings -->
+        <v-window-item value="nocodb">
+          <v-card-text>
+            <!-- Edit Mode Toggle -->
+            <v-row class="mb-4">
+              <v-col>
+                <v-alert
+                  v-if="!nocodbEditMode"
+                  type="info"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    Click "Edit NocoDB Configuration" to modify database settings
+                  </template>
+                </v-alert>
+                <v-alert
+                  v-if="nocodbEditMode"
+                  type="warning"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    NocoDB configuration is required for member management functionality
+                  </template>
+                </v-alert>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  v-if="!nocodbEditMode"
+                  color="primary"
+                  variant="outlined"
+                  @click="nocodbEditMode = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit NocoDB Configuration
+                </v-btn>
+                <v-btn-group v-else>
+                  <v-btn
+                    color="success"
+                    variant="flat"
+                    @click="saveNocodbSettings"
+                  >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                  </v-btn>
+                  <v-btn
+                    color="warning"
+                    variant="outlined"
+                    @click="testNocodbConnection"
+                    :loading="testingNocodb"
+                  >
+                    <v-icon start>mdi-connection</v-icon>
+                    Test Connection
+                  </v-btn>
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    @click="cancelNocodbEdit"
+                  >
+                    <v-icon start>mdi-close</v-icon>
+                    Cancel
+                  </v-btn>
+                </v-btn-group>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">NocoDB Database Configuration</h3>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.url"
+                  label="NocoDB URL"
+                  variant="outlined"
+                  placeholder="https://your-nocodb-instance.com"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.apiKey"
+                  label="API Key"
+                  variant="outlined"
+                  :type="showNocodbApiKey ? 'text' : 'password'"
+                  placeholder="Enter your NocoDB API token"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="new-password"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                >
+                  <template v-slot:append-inner>
+                    <v-icon
+                      v-if="nocodbEditMode"
+                      @click="showNocodbApiKey = !showNocodbApiKey"
+                      :icon="showNocodbApiKey ? 'mdi-eye-off' : 'mdi-eye'"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.baseId"
+                  label="Base ID"
+                  variant="outlined"
+                  placeholder="Your NocoDB base ID"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+              </v-col>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">Table Mappings</h3>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.members"
+                  label="Members Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.events"
+                  label="Events Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.rsvps"
+                  label="RSVPs Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- Connection Status -->
+            <v-row v-if="nocodbConnectionStatus" class="mt-4">
+              <v-col>
+                <v-alert
+                  :type="nocodbConnectionStatus.success ? 'success' : 'error'"
+                  variant="tonal"
+                >
+                  {{ nocodbConnectionStatus.message }}
+                </v-alert>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
       </v-window>
     </v-card>
 
@@ -359,8 +535,12 @@ definePageMeta({
 const activeTab = ref('general');
 const generalEditMode = ref(false);
 const emailEditMode = ref(false);
+const nocodbEditMode = ref(false);
 const showPassword = ref(false);
+const showNocodbApiKey = ref(false);
 const testingEmail = ref(false);
+const testingNocodb = ref(false);
+const nocodbConnectionStatus = ref<{ success: boolean; message: string } | null>(null);
 const snackbar = ref(false);
 const snackbarText = ref('');
 const snackbarColor = ref('success');
@@ -386,6 +566,16 @@ const settings = ref({
     useTLS: true,
     fromName: 'MonacoUSA',
     fromEmail: 'noreply@monacousa.org'
+  },
+  nocodb: {
+    url: '',
+    apiKey: '',
+    baseId: '',
+    tables: {
+      members: 'Members',
+      events: 'Events',
+      rsvps: 'RSVPs'
+    }
   }
 });
 
@@ -413,6 +603,7 @@ const currencies = [
 // Load settings on mount
 onMounted(async () => {
   await loadSettings();
+  await loadNocodbSettings();
 });
 
 // Methods
@@ -488,6 +679,84 @@ const showNotification = (text: string, color: string = 'success') => {
   snackbar.value = true;
 };
 
+const loadNocodbSettings = async () => {
+  try {
+    const response = await $fetch<{ success: boolean; data?: any }>('/api/admin/nocodb-config');
+    if (response.success && response.data) {
+      settings.value.nocodb = {
+        url: response.data.url || '',
+        apiKey: response.data.apiKey || '',
+        baseId: response.data.baseId || '',
+        tables: response.data.tables || {
+          members: 'Members',
+          events: 'Events',
+          rsvps: 'RSVPs'
+        }
+      };
+    }
+  } catch (error) {
+    console.error('Error loading NocoDB settings:', error);
+    showNotification('Failed to load NocoDB settings', 'error');
+  }
+};
+
+const saveNocodbSettings = async () => {
+  try {
+    const response = await $fetch('/api/admin/nocodb-config', {
+      method: 'POST',
+      body: settings.value.nocodb
+    });
+    nocodbEditMode.value = false;
+    showNocodbApiKey.value = false;
+    showNotification('NocoDB settings saved successfully', 'success');
+    // Reload settings to ensure they're persistent
+    await loadNocodbSettings();
+  } catch (error) {
+    console.error('Error saving NocoDB settings:', error);
+    showNotification('Failed to save NocoDB settings', 'error');
+  }
+};
+
+const testNocodbConnection = async () => {
+  testingNocodb.value = true;
+  nocodbConnectionStatus.value = null;
+  
+  try {
+    const response = await $fetch<{ success: boolean; message: string }>('/api/admin/nocodb-test', {
+      method: 'POST',
+      body: settings.value.nocodb
+    });
+    
+    nocodbConnectionStatus.value = {
+      success: response.success,
+      message: response.message
+    };
+    
+    if (response.success) {
+      showNotification('NocoDB connection successful', 'success');
+    } else {
+      showNotification(response.message, 'error');
+    }
+  } catch (error: any) {
+    nocodbConnectionStatus.value = {
+      success: false,
+      message: error.data?.message || 'Failed to connect to NocoDB'
+    };
+    showNotification('Connection test failed', 'error');
+  } finally {
+    testingNocodb.value = false;
+  }
+};
+
+const cancelNocodbEdit = () => {
+  if (originalSettings.value) {
+    settings.value.nocodb = { ...originalSettings.value.nocodb };
+  }
+  nocodbEditMode.value = false;
+  showNocodbApiKey.value = false;
+  nocodbConnectionStatus.value = null;
+};
+
 // Watch for edit mode changes to backup original settings
 watch(generalEditMode, (newVal) => {
   if (newVal) {
@@ -505,6 +774,14 @@ watch(emailEditMode, (newVal) => {
   }
 });
 
+watch(nocodbEditMode, (newVal) => {
+  if (newVal) {
+    originalSettings.value = {
+      nocodb: { ...settings.value.nocodb }
+    };
+  }
+});
+
 // Prevent browser autofill on mount
 onMounted(() => {
   // Disable autofill for all inputs initially