fix: simplify SelectMenu to use string values instead of objects

- Change from object binding to string-based selection
- Add computed properties to transform data to string arrays
- Add reverse lookup to get IDs from selected strings
- Improves compatibility with USelectMenu component
- Fixes dropdown not showing options correctly

nuxt4-app/app/pages/explorer.vue

@@ -16,32 +16,22 @@
         <UFieldGroup label="Base de datos">
           <USelectMenu
             v-model="selectedDatabase"
-            :options="databases"
+            :options="databaseOptions"
             placeholder="Seleccionar base de datos"
             :loading="loadingDatabases"
             :disabled="loadingDatabases"
-            option-attribute="name"
-          >
-            <template #label>
-              {{ selectedDatabase?.name || 'Seleccionar base de datos' }}
-            </template>
-          </USelectMenu>
+          />
         </UFieldGroup>
 
         <!-- Table Selector -->
         <UFieldGroup label="Tabla" v-if="selectedDatabase">
           <USelectMenu
             v-model="selectedTable"
-            :options="tables"
+            :options="tableOptions"
             placeholder="Seleccionar tabla"
             :loading="loadingTables"
             :disabled="loadingTables || !selectedDatabase"
-            option-attribute="name"
-          >
-            <template #label>
-              {{ selectedTable?.display_name || selectedTable?.name || 'Seleccionar tabla' }}
-            </template>
-          </USelectMenu>
+          />
         </UFieldGroup>
 
         <!-- Load Data Button -->
@@ -196,11 +186,28 @@ const tableData = ref<any[]>([])
 const visibleColumns = ref<string[]>([])
 
 // Computed
-const selectedDatabaseId = computed(() => selectedDatabase.value?.id)
-const selectedTableId = computed(() => selectedTable.value?.id)
+const databaseOptions = computed(() => {
+  return databases.value.map(db => db.name)
+})
+
+const tableOptions = computed(() => {
+  return tables.value.map(table => table.display_name || table.name)
+})
+
+const selectedDatabaseId = computed(() => {
+  if (!selectedDatabase.value) return null
+  const db = databases.value.find(d => d.name === selectedDatabase.value)
+  return db?.id
+})
+
+const selectedTableId = computed(() => {
+  if (!selectedTable.value) return null
+  const table = tables.value.find(t => (t.display_name || t.name) === selectedTable.value)
+  return table?.id
+})
 
 const selectedTableName = computed(() => {
-  return selectedTable.value ? (selectedTable.value.display_name || selectedTable.value.name) : ''
+  return selectedTable.value || ''
 })
 
 const tableColumns = computed(() => {
@@ -246,7 +253,7 @@ async function loadDatabases() {
 
     // Auto-select first database
     if (databases.value.length > 0) {
-      selectedDatabase.value = databases.value[0]
+      selectedDatabase.value = databases.value[0].name
     }
   } catch (err: any) {
     error.value = `Error al cargar bases de datos: ${err.message || 'Error desconocido'}`
@@ -257,7 +264,7 @@ async function loadDatabases() {
 }
 
 async function loadTables() {
-  if (!selectedDatabase.value) return
+  if (!selectedDatabase.value || !selectedDatabaseId.value) return
 
   loadingTables.value = true
   error.value = null
@@ -265,7 +272,7 @@ async function loadTables() {
   tableData.value = []
 
   try {
-    const response = await $fetch(`/api/metabase/tables/${selectedDatabase.value.id}`)
+    const response = await $fetch(`/api/metabase/tables/${selectedDatabaseId.value}`)
     const metadata = response as any
 
     // Metabase returns tables in the 'tables' property