Refactor NocoDB settings to support dynamic table configuration and update related validation

components/NocoDBSettingsDialog.vue

@@ -68,7 +68,7 @@
               />
             </v-col>
             
-            <v-col cols="12" md="6">
+            <v-col cols="12">
               <v-text-field
                 v-model="form.baseId"
                 label="Base ID"
@@ -80,18 +80,25 @@
                 :error-messages="getFieldError('baseId')"
               />
             </v-col>
+
+            <v-col cols="12">
+              <h3 class="text-h6 mb-4 text-primary">Table Configuration</h3>
+            </v-col>
             
-            <v-col cols="12" md="6">
+            <v-col cols="12">
               <v-text-field
-                v-model="form.tableId"
+                v-model="form.tables.members"
                 label="Members Table ID"
                 variant="outlined"
                 :rules="[rules.required]"
                 required
                 placeholder="members-table-id"
-                :error="hasFieldError('tableId')"
-                :error-messages="getFieldError('tableId')"
+                :error="hasFieldError('tables.members')"
+                :error-messages="getFieldError('tables.members')"
               />
+              <div class="text-caption text-medium-emphasis mt-1">
+                Configure the table ID for the Members functionality
+              </div>
             </v-col>
 
             <v-col cols="12">
@@ -210,7 +217,7 @@ const form = ref<NocoDBSettings>({
   url: 'https://database.monacousa.org',
   apiKey: '',
   baseId: '',
-  tableId: ''
+  tables: { members: '' }
 });
 
 // Error handling
@@ -261,6 +268,10 @@ const loadSettings = async () => {
     
     if (response.success && response.data) {
       form.value = { ...response.data };
+      // Ensure tables object exists
+      if (!form.value.tables) {
+        form.value.tables = { members: '' };
+      }
     }
   } catch (error: any) {
     console.error('Failed to load NocoDB settings:', error);
@@ -352,7 +363,7 @@ const resetForm = () => {
     url: 'https://database.monacousa.org',
     apiKey: '',
     baseId: '',
-    tableId: ''
+    tables: { members: '' }
   };
   clearFieldErrors();
   connectionStatus.value = null;