From 03ccc7533775dce918bd9c56c418161b4d8c52bd Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 21 May 2026 10:07:06 -0500
Subject: [PATCH] Fix servidor dashboard: correct all field names to match
 models
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All fields were using wrong names (Go struct names instead of JSON tags):
- servidor.Nombre → servidor.nombre
- servidor.IP → servidor.ip_servidor
- servidor.TipoServidor → servidor.tipo_servidor
- servidor.ProvServidor → servidor.prov_servidor
- servidor.Ram → servidor.ram
- servidor.CPU → servidor.nucleos (correct field)
- servidor.Almacenamiento → servidor.disco
- servidor.SO → servidor.so
- servidor.FechaExpiracion → servidor.vencimiento
- servidor.Activo → removed (field does not exist)
- servidor.Descripcion → removed (field does not exist)

For ConxDb:
- conexion.Nombre → removed (field does not exist)
- conexion.Host → conexion.servidor.ip_servidor (from preloaded relation)
- conexion.Puerto → conexion.puerto
- conexion.Usuario → conexion.usuario
- conexion.TipoDb → conexion.tipo_db
- conexion.Estado → removed (field does not exist)
- conexion.Version → removed (field does not exist)

Also improved UI: loading skeleton, better card layout, ping badges inline.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 resources/views/servidor_dashboard.html | 584 +++++++++++-------------
 1 file changed, 266 insertions(+), 318 deletions(-)

diff --git a/resources/views/servidor_dashboard.html b/resources/views/servidor_dashboard.html
index 48cdfb7..3697cad 100644
--- a/resources/views/servidor_dashboard.html
+++ b/resources/views/servidor_dashboard.html
@@ -1,297 +1,283 @@
 <!-- Servidor Dashboard -->
 <div x-data="servidorDashboard()" x-init="init()">
   <!-- Header -->
-  <div class="mb-8">
-    <h1 class="text-3xl font-bold text-slate-800">Dashboard de Servidores</h1>
-    <p class="text-slate-500 text-sm mt-2">Monitorea todos tus servidores y conexiones de base de datos en un solo lugar</p>
+  <div class="mb-8 flex items-center justify-between">
+    <div>
+      <h1 class="text-3xl font-bold text-slate-800">Dashboard de Servidores</h1>
+      <p class="text-slate-500 text-sm mt-2">Monitorea todos tus servidores y sus conexiones de base de datos</p>
+    </div>
+    <button @click="cargarServidores()" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+      Actualizar
+    </button>
+  </div>
+
+  <!-- Loading -->
+  <div x-show="cargando" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <template x-for="i in [1,2,3]">
+      <div class="bg-white rounded-lg border border-slate-200 h-48 animate-pulse">
+        <div class="bg-slate-200 h-16 rounded-t-lg"></div>
+        <div class="p-4 space-y-3">
+          <div class="h-4 bg-slate-200 rounded w-3/4"></div>
+          <div class="h-4 bg-slate-200 rounded w-1/2"></div>
+        </div>
+      </div>
+    </template>
   </div>
 
   <!-- Servidor List -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" x-show="!servidorSeleccionado">
+  <div x-show="!cargando" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     <template x-for="servidor in servidores" :key="servidor.ID">
-      <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all overflow-hidden">
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-lg transition-all overflow-hidden group">
         <!-- Card Header -->
-        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4">
-          <h3 class="text-white font-bold text-lg" x-text="servidor.Nombre"></h3>
-          <p class="text-blue-100 text-xs mt-1" x-text="servidor.Descripcion"></p>
+        <div class="bg-gradient-to-br from-slate-700 to-slate-900 p-5">
+          <div class="flex items-start justify-between">
+            <div>
+              <h3 class="text-white font-bold text-base" x-text="servidor.nombre"></h3>
+              <p class="text-slate-300 text-xs mt-1 font-mono" x-text="servidor.ip_servidor"></p>
+            </div>
+            <span class="text-xs px-2 py-1 rounded-full font-semibold"
+              :class="servidor.tipo_servidor?.nombre ? 'bg-blue-500 text-white' : 'bg-slate-600 text-slate-300'"
+              x-text="servidor.tipo_servidor?.nombre || 'Servidor'"></span>
+          </div>
         </div>
 
         <!-- Card Body -->
         <div class="p-4 space-y-3">
-          <!-- Server Info -->
-          <div class="space-y-2 pb-3 border-b border-slate-100">
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m7-4a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <span class="text-sm text-slate-600">
-                <strong>IP:</strong> <span x-text="servidor.IP"></span>
-              </span>
+          <!-- Info grid -->
+          <div class="grid grid-cols-3 gap-2 text-xs">
+            <div class="bg-slate-50 rounded-lg p-2 text-center">
+              <p class="text-slate-400 font-medium">RAM</p>
+              <p class="text-slate-800 font-bold mt-0.5" x-text="servidor.ram || '—'"></p>
             </div>
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <span class="text-sm text-slate-600">
-                <strong>Estado:</strong>
-                <span class="ml-1 inline-block px-2 py-0.5 rounded-full text-xs font-medium"
-                  :class="servidor.Activo ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
-                  x-text="servidor.Activo ? 'Activo' : 'Inactivo'">
-                </span>
-              </span>
+            <div class="bg-slate-50 rounded-lg p-2 text-center">
+              <p class="text-slate-400 font-medium">CPU</p>
+              <p class="text-slate-800 font-bold mt-0.5" x-text="servidor.nucleos || '—'"></p>
+            </div>
+            <div class="bg-slate-50 rounded-lg p-2 text-center">
+              <p class="text-slate-400 font-medium">Disco</p>
+              <p class="text-slate-800 font-bold mt-0.5" x-text="servidor.disco || '—'"></p>
             </div>
           </div>
 
-          <!-- Connections Count -->
-          <div class="flex items-center justify-between py-2">
+          <!-- Provider & OS -->
+          <div class="flex items-center justify-between text-xs text-slate-500">
+            <span x-text="servidor.prov_servidor?.nombre || 'Sin proveedor'"></span>
+            <span x-text="servidor.so || 'Sin OS'"></span>
+          </div>
+
+          <!-- Ultimo ping -->
+          <div x-show="servidor.ultimo_ping" class="text-xs text-slate-400">
+            Último ping: <span class="font-mono" x-text="servidor.ultimo_ping"></span>
+          </div>
+
+          <!-- Conexiones count -->
+          <div class="flex items-center gap-2 pt-1">
+            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582 4 8 4"/>
+            </svg>
             <span class="text-sm text-slate-600">
-              <strong>Conexiones BD:</strong>
-              <span class="ml-1 font-bold text-blue-600" x-text="servidor.conexiones?.length || 0"></span>
+              <span class="font-bold text-blue-600" x-text="servidor._conexiones?.length || 0"></span>
+              conexiones BD
             </span>
           </div>
 
           <!-- Action Button -->
           <button @click="abrirModal(servidor)"
-            class="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
+            class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 active:bg-blue-800 transition-colors flex items-center justify-center gap-2 text-sm mt-2">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
             </svg>
-            Ver Detalles
+            Ver Detalles y Conexiones
           </button>
         </div>
       </div>
     </template>
 
     <!-- Empty State -->
-    <template x-if="servidores.length === 0">
-      <div class="col-span-full text-center py-20 text-slate-400">
-        <svg class="w-16 h-16 mx-auto mb-4 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v12m6-12v12m.938-6h2.016A2.25 2.25 0 0121 12a2.25 2.25 0 01-2.25 2.25h-2.016m0 0h2.016a2.25 2.25 0 100-4.5h-2.016m0 0V7.5A2.25 2.25 0 109.75 9.75"></path>
-        </svg>
-        <p class="text-lg font-medium">No hay servidores disponibles</p>
-      </div>
-    </template>
+    <div x-show="!cargando && servidores.length === 0" class="col-span-full text-center py-20 text-slate-400">
+      <svg class="w-16 h-16 mx-auto mb-4 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
+      </svg>
+      <p class="text-lg font-medium">No hay servidores registrados</p>
+    </div>
   </div>
 
-  <!-- Server Detail Modal -->
-  <template x-if="servidorSeleccionado">
-    <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" @click.self="cerrarModal()">
-      <div class="bg-white rounded-lg max-w-6xl w-full max-h-[90vh] overflow-y-auto">
-        <!-- Modal Header -->
-        <div class="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-700 p-6 border-b border-blue-800 flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <button @click="cerrarModal()" class="text-white hover:bg-blue-500 p-2 rounded-lg transition-colors">
-              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-              </svg>
-            </button>
-            <div>
-              <h2 class="text-2xl font-bold text-white" x-text="servidorSeleccionado.Nombre"></h2>
-              <p class="text-blue-100 text-sm" x-text="servidorSeleccionado.Descripcion"></p>
+  <!-- ===== Modal Detalle Servidor ===== -->
+  <div x-show="servidorSeleccionado" x-cloak
+    class="fixed inset-0 bg-black/60 z-50 flex items-start justify-center p-4 overflow-y-auto"
+    @click.self="cerrarModal()">
+    <div class="bg-white rounded-xl w-full max-w-5xl my-8 shadow-2xl">
+
+      <!-- Modal Header -->
+      <div class="bg-gradient-to-br from-slate-700 to-slate-900 p-6 rounded-t-xl flex items-center justify-between">
+        <div>
+          <h2 class="text-2xl font-bold text-white" x-text="servidorSeleccionado?.nombre"></h2>
+          <p class="text-slate-300 text-sm mt-1 font-mono" x-text="servidorSeleccionado?.ip_servidor"></p>
+        </div>
+        <button @click="cerrarModal()" class="text-slate-300 hover:text-white p-2 rounded-lg hover:bg-white/10 transition-colors">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="p-6 space-y-8">
+
+        <!-- === Info Grid === -->
+        <div>
+          <h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Información del Servidor</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">🌐 IP Servidor</p>
+              <p class="font-bold text-slate-900 font-mono text-sm break-all" x-text="servidorSeleccionado?.ip_servidor || '—'"></p>
             </div>
-          </div>
-          <div class="text-right">
-            <span class="text-white text-sm font-medium">
-              <span class="inline-block px-3 py-1 rounded-full text-xs font-bold"
-                :class="servidorSeleccionado.Activo ? 'bg-green-400 text-green-900' : 'bg-red-400 text-red-900'"
-                x-text="servidorSeleccionado.Activo ? '● Activo' : '● Inactivo'">
-              </span>
-            </span>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">🏢 Proveedor</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.prov_servidor?.nombre || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">🖥️ Tipo</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.tipo_servidor?.nombre || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">💻 SO</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.so || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">🧠 RAM</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.ram || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">⚙️ Núcleos CPU</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.nucleos || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">💾 Disco</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.disco || '—'"></p>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <p class="text-xs text-slate-400 font-medium mb-1">📅 Vencimiento</p>
+              <p class="font-bold text-slate-900 text-sm" x-text="servidorSeleccionado?.vencimiento || '—'"></p>
+            </div>
+
+            <div x-show="servidorSeleccionado?.ultimo_ping" class="bg-slate-50 border border-slate-200 rounded-xl p-4 md:col-span-2">
+              <p class="text-xs text-slate-400 font-medium mb-1">📡 Último Ping</p>
+              <p class="font-bold text-slate-900 text-sm font-mono" x-text="servidorSeleccionado?.ultimo_ping"></p>
+            </div>
+
           </div>
         </div>
 
-        <!-- Modal Body -->
-        <div class="p-8 space-y-8">
-          <!-- Server Information Grid -->
-          <div>
-            <h3 class="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
-              <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
-              </svg>
-              Información del Servidor
-            </h3>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <!-- IP -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Dirección IP</p>
-                <p class="text-lg font-bold text-slate-900 font-mono" x-text="servidorSeleccionado.IP"></p>
-              </div>
+        <!-- === Conexiones BD === -->
+        <div>
+          <h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">
+            Conexiones de Base de Datos
+            <span class="ml-2 bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-bold normal-case"
+              x-text="(servidorSeleccionado?._conexiones?.length || 0) + ' conexiones'"></span>
+          </h3>
 
-              <!-- Tipo -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Tipo</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.TipoServidor?.Nombre || 'N/A'"></p>
-              </div>
-
-              <!-- Provider -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Proveedor</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.ProvServidor?.Nombre || 'N/A'"></p>
-              </div>
-
-              <!-- RAM -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">RAM</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.Ram + ' GB' || 'N/A'"></p>
-              </div>
-
-              <!-- CPU -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">CPU</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.CPU || 'N/A'"></p>
-              </div>
-
-              <!-- Almacenamiento -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Almacenamiento</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.Almacenamiento + ' GB' || 'N/A'"></p>
-              </div>
-
-              <!-- OS -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Sistema Operativo</p>
-                <p class="text-lg font-bold text-slate-900" x-text="servidorSeleccionado.SO || 'N/A'"></p>
-              </div>
-
-              <!-- Fecha Expiración -->
-              <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
-                <p class="text-xs font-medium text-slate-500 uppercase mb-2">Expiración</p>
-                <p class="text-lg font-bold text-slate-900" x-text="formatearFecha(servidorSeleccionado.FechaExpiracion)"></p>
-              </div>
-            </div>
+          <!-- Cargando conexiones -->
+          <div x-show="cargandoConexiones" class="text-center py-8 text-slate-400">
+            <div class="inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-2"></div>
+            <p class="text-sm">Cargando conexiones...</p>
           </div>
 
-          <!-- Databases Connection Diagram -->
-          <div>
-            <h3 class="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
-              <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
-              </svg>
-              Conexiones de Base de Datos
-            </h3>
+          <!-- Grid de conexiones -->
+          <div x-show="!cargandoConexiones && servidorSeleccionado?._conexiones?.length > 0"
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <template x-for="cx in (servidorSeleccionado?._conexiones || [])" :key="cx.ID">
+              <div class="bg-white border-2 border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all">
 
-            <template x-if="servidorSeleccionado.conexiones && servidorSeleccionado.conexiones.length > 0">
-              <div class="space-y-4">
-                <!-- Server node in center -->
-                <div class="relative">
-                  <div class="flex justify-center mb-8">
-                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-lg shadow-lg font-bold flex items-center gap-2">
-                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 100 16 8 8 0 000-16z"></path>
-                      </svg>
-                      <span x-text="servidorSeleccionado.Nombre"></span>
-                    </div>
+                <!-- DB header with type color -->
+                <div class="px-4 py-3 flex items-center justify-between" :class="getTipoDbBg(cx.tipo_db?.nombre)">
+                  <div class="flex items-center gap-2">
+                    <span class="text-white font-bold text-sm px-2 py-0.5 rounded bg-black/20"
+                      x-text="cx.tipo_db?.nombre || 'DB'"></span>
+                    <span class="text-white/80 text-xs font-mono" x-text="'#' + cx.ID"></span>
+                  </div>
+                  <!-- Ping badge -->
+                  <div x-show="pingResultado[cx.ID] !== undefined">
+                    <span class="text-xs px-2 py-1 rounded-full font-bold"
+                      :class="pingResultado[cx.ID]?.exitoso ? 'bg-green-400 text-green-900' : 'bg-red-400 text-red-900'"
+                      x-text="pingResultado[cx.ID]?.exitoso ? '✓ ' + pingResultado[cx.ID].tiempo + 'ms' : '✗ offline'">
+                    </span>
+                  </div>
+                </div>
+
+                <!-- DB details -->
+                <div class="p-4 space-y-2 text-xs">
+                  <div class="flex justify-between">
+                    <span class="text-slate-500 font-medium">Host</span>
+                    <span class="text-slate-900 font-mono" x-text="cx.servidor?.ip_servidor || servidorSeleccionado?.ip_servidor || '—'"></span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-slate-500 font-medium">Puerto</span>
+                    <span class="text-slate-900 font-mono font-bold" x-text="cx.puerto || '—'"></span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-slate-500 font-medium">Usuario</span>
+                    <span class="text-slate-900 font-mono" x-text="cx.usuario || '—'"></span>
                   </div>
 
-                  <!-- Databases Grid below server -->
-                  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
-                    <template x-for="conexion in servidorSeleccionado.conexiones" :key="conexion.ID">
-                      <div class="bg-white border-2 rounded-lg overflow-hidden hover:shadow-lg transition-all"
-                        :class="getEstadoColorClass(conexion.Estado)">
-                        <!-- Connection Header -->
-                        <div class="px-4 py-3" :class="getEstadoHeaderClass(conexion.Estado)">
-                          <div class="flex items-center justify-between">
-                            <h4 class="font-bold text-white text-sm" x-text="conexion.Nombre"></h4>
-                            <span class="inline-flex items-center gap-1 text-xs font-bold text-white"
-                              :class="conexion.Estado === 'activo' ? 'text-green-100' : 'text-red-100'">
-                              <span class="w-2 h-2 rounded-full" :class="conexion.Estado === 'activo' ? 'bg-green-400' : 'bg-red-400'"></span>
-                              <span x-text="conexion.Estado || 'desconocido'"></span>
-                            </span>
-                          </div>
-                        </div>
+                  <!-- Ping button -->
+                  <div class="pt-3 border-t border-slate-100 flex items-center justify-between">
+                    <button @click="hacerPing(cx)"
+                      :disabled="pingCargando[cx.ID]"
+                      class="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+                      :class="pingCargando[cx.ID] ? 'bg-slate-100 text-slate-400' : 'bg-blue-50 text-blue-700 hover:bg-blue-100'">
+                      <svg x-show="!pingCargando[cx.ID]" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
+                      </svg>
+                      <svg x-show="pingCargando[cx.ID]" class="w-3.5 h-3.5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                      </svg>
+                      <span x-text="pingCargando[cx.ID] ? 'Probando...' : 'Ping'"></span>
+                    </button>
 
-                        <!-- Connection Body -->
-                        <div class="p-4 space-y-3">
-                          <!-- DB Type Badge -->
-                          <div class="flex items-center gap-2">
-                            <span class="text-xs font-bold px-2 py-1 rounded-full text-white" :class="getTipoDbColor(conexion.TipoDb?.Nombre)">
-                              <span x-text="conexion.TipoDb?.Nombre || 'UNKNOWN'"></span>
-                            </span>
-                            <span class="text-xs text-slate-500 font-medium" x-text="`v${conexion.Version || 'N/A'}`"></span>
-                          </div>
-
-                          <!-- Connection Details -->
-                          <div class="space-y-2 text-xs">
-                            <div class="flex justify-between items-start">
-                              <span class="text-slate-600 font-medium">Host:</span>
-                              <span class="text-slate-900 font-mono text-right" x-text="conexion.Host"></span>
-                            </div>
-                            <div class="flex justify-between items-start">
-                              <span class="text-slate-600 font-medium">Puerto:</span>
-                              <span class="text-slate-900 font-mono" x-text="conexion.Puerto"></span>
-                            </div>
-                            <div class="flex justify-between items-start">
-                              <span class="text-slate-600 font-medium">Usuario:</span>
-                              <span class="text-slate-900 font-mono" x-text="conexion.Usuario"></span>
-                            </div>
-                          </div>
-
-                          <!-- Connection Status Section -->
-                          <div class="pt-3 border-t border-slate-200">
-                            <div class="flex items-center justify-between">
-                              <span class="text-xs font-medium text-slate-600">Ping:</span>
-                              <button @click="hacerPingConexion(conexion)" 
-                                :disabled="pingCargando[conexion.ID]"
-                                class="text-xs px-2 py-1 rounded bg-slate-100 text-slate-700 hover:bg-slate-200 disabled:opacity-50 transition-colors">
-                                <span x-show="!pingCargando[conexion.ID]">Verificar</span>
-                                <span x-show="pingCargando[conexion.ID]">...</span>
-                              </button>
-                            </div>
-                            <template x-if="pingResultado[conexion.ID]">
-                              <div class="mt-2 p-2 rounded-lg text-xs font-mono"
-                                :class="pingResultado[conexion.ID].exitoso ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'">
-                                <template x-if="pingResultado[conexion.ID].exitoso">
-                                  <span>✓ <span x-text="`${pingResultado[conexion.ID].tiempo}ms`"></span></span>
-                                </template>
-                                <template x-if="!pingResultado[conexion.ID].exitoso">
-                                  <span>✗ Conexión fallida</span>
-                                </template>
-                              </div>
-                            </template>
-                          </div>
-
-                          <!-- Action Button -->
-                          <button @click="abrirVcard(conexion)"
-                            class="w-full mt-3 px-3 py-2 bg-blue-50 text-blue-700 rounded-lg font-medium text-xs hover:bg-blue-100 transition-colors flex items-center justify-center gap-2">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                            </svg>
-                            Ver Conexión
-                          </button>
-                        </div>
-                      </div>
-                    </template>
+                    <button @click="abrirQueryRunner(cx)"
+                      class="flex items-center gap-1 px-3 py-1.5 bg-slate-50 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-100 transition-colors">
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+                      </svg>
+                      Query Runner
+                    </button>
                   </div>
                 </div>
               </div>
             </template>
-
-            <!-- No connections -->
-            <template x-if="!servidorSeleccionado.conexiones || servidorSeleccionado.conexiones.length === 0">
-              <div class="text-center py-12 bg-slate-50 rounded-lg border border-slate-200">
-                <svg class="w-12 h-12 mx-auto mb-3 opacity-30 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.658 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
-                </svg>
-                <p class="text-slate-600 font-medium">Este servidor no tiene conexiones de base de datos configuradas</p>
-              </div>
-            </template>
           </div>
 
-          <!-- Last Updated -->
-          <div class="text-center py-4 border-t border-slate-200">
-            <p class="text-xs text-slate-500" x-text="`Última actualización: ${formatearFechaHora(new Date())}`"></p>
+          <!-- Sin conexiones -->
+          <div x-show="!cargandoConexiones && (!servidorSeleccionado?._conexiones || servidorSeleccionado._conexiones.length === 0)"
+            class="text-center py-12 bg-slate-50 rounded-xl border border-slate-200">
+            <svg class="w-10 h-10 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4"/>
+            </svg>
+            <p class="text-slate-500 font-medium text-sm">Este servidor no tiene conexiones de base de datos</p>
           </div>
         </div>
+
       </div>
     </div>
-  </template>
+  </div>
 
   <script>
     function servidorDashboard() {
       return {
         servidores: [],
         servidorSeleccionado: null,
+        cargando: true,
+        cargandoConexiones: false,
         pingCargando: {},
         pingResultado: {},
 
@@ -300,111 +286,73 @@
         },
 
         async cargarServidores() {
+          this.cargando = true;
           try {
-            const response = await fetch('/app/loadservidor?limit=100');
-            const data = await response.json();
+            const r = await fetch('/app/loadservidor?limit=100');
+            const data = await r.json();
             this.servidores = data.registros || [];
-            
-            // Cargar detalles de conexiones para cada servidor
-            for (let servidor of this.servidores) {
-              await this.cargarConexionesServidor(servidor);
-            }
-          } catch (error) {
-            console.error('Error cargando servidores:', error);
+          } catch (e) {
+            console.error('Error cargando servidores:', e);
+            this.servidores = [];
+          } finally {
+            this.cargando = false;
           }
         },
 
-        async cargarConexionesServidor(servidor) {
-          try {
-            const response = await fetch(`/app/servidor-dashboard/${servidor.ID}`);
-            const data = await response.json();
-            if (data.conexiones) {
-              servidor.conexiones = data.conexiones;
-            }
-          } catch (error) {
-            console.error('Error cargando conexiones:', error);
-            servidor.conexiones = [];
-          }
-        },
-
-        abrirModal(servidor) {
-          this.servidorSeleccionado = JSON.parse(JSON.stringify(servidor));
+        async abrirModal(servidor) {
+          this.servidorSeleccionado = { ...servidor };
+          this.pingCargando = {};
           this.pingResultado = {};
+          this.cargandoConexiones = true;
+          try {
+            const r = await fetch(`/app/servidor-dashboard/${servidor.ID}`);
+            const data = await r.json();
+            this.servidorSeleccionado._conexiones = data.conexiones || [];
+            // Actualizar también el contador en la card
+            const idx = this.servidores.findIndex(s => s.ID === servidor.ID);
+            if (idx >= 0) this.servidores[idx]._conexiones = data.conexiones || [];
+          } catch (e) {
+            console.error('Error cargando conexiones:', e);
+            this.servidorSeleccionado._conexiones = [];
+          } finally {
+            this.cargandoConexiones = false;
+          }
         },
 
         cerrarModal() {
           this.servidorSeleccionado = null;
-          this.pingCargando = {};
-          this.pingResultado = {};
         },
 
-        async hacerPingConexion(conexion) {
-          this.pingCargando[conexion.ID] = true;
+        async hacerPing(cx) {
+          this.pingCargando = { ...this.pingCargando, [cx.ID]: true };
           try {
-            const response = await fetch(`/app/conx-ping/${conexion.ID}`);
-            const data = await response.json();
-            this.pingResultado[conexion.ID] = data;
-          } catch (error) {
-            this.pingResultado[conexion.ID] = {
-              exitoso: false,
-              error: error.message
-            };
+            const r = await fetch(`/app/conx-ping/${cx.ID}`);
+            const data = await r.json();
+            this.pingResultado = { ...this.pingResultado, [cx.ID]: data };
+          } catch (e) {
+            this.pingResultado = { ...this.pingResultado, [cx.ID]: { exitoso: false } };
           } finally {
-            this.pingCargando[conexion.ID] = false;
+            this.pingCargando = { ...this.pingCargando, [cx.ID]: false };
           }
         },
 
-        abrirVcard(conexion) {
-          window.open(`/app/conx_db?conx_db_id=${conexion.ID}`, '_blank');
+        abrirQueryRunner(cx) {
+          window.open(`/app/query-runner?conx_db_id=${cx.ID}`, '_blank');
         },
 
-        getTipoDbColor(tipo) {
-          const colores = {
-            'MySQL': 'bg-blue-600',
-            'PostgreSQL': 'bg-blue-700',
+        getTipoDbBg(tipo) {
+          const m = {
+            'MySQL': 'bg-blue-500',
+            'MariaDB': 'bg-blue-600',
+            'PostgreSQL': 'bg-indigo-600',
             'MongoDB': 'bg-green-600',
-            'Redis': 'bg-red-600',
-            'SQLite': 'bg-yellow-600',
-            'SQLServer': 'bg-purple-600'
+            'Redis': 'bg-red-500',
+            'SQLite': 'bg-amber-500',
+            'SQLServer': 'bg-purple-600',
+            'MSSQL': 'bg-purple-600',
           };
-          return colores[tipo] || 'bg-slate-500';
+          return m[tipo] || 'bg-slate-600';
         },
-
-        getEstadoHeaderClass(estado) {
-          if (estado === 'activo') return 'bg-green-600';
-          if (estado === 'inactivo') return 'bg-red-600';
-          return 'bg-slate-600';
-        },
-
-        getEstadoColorClass(estado) {
-          if (estado === 'activo') return 'border-green-300';
-          if (estado === 'inactivo') return 'border-red-300';
-          return 'border-slate-300';
-        },
-
-        formatearFecha(fecha) {
-          if (!fecha) return 'N/A';
-          try {
-            return new Date(fecha).toLocaleDateString('es-CO', {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric'
-            });
-          } catch {
-            return 'N/A';
-          }
-        },
-
-        formatearFechaHora(fecha) {
-          return fecha.toLocaleString('es-CO', {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit'
-          });
-        }
       };
     }
   </script>