Spaces:
Running
Running
| --- | |
| // Explorador de tablas, diagrama ER y consultas SQL personalizadas. | |
| --- | |
| <!-- EXPLORADOR DE DATOS (Fase 11) --> | |
| <section id="tab-data" class="tab-content space-y-6"> | |
| <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm"> | |
| <h3 class="text-base font-bold text-stone-800 mb-2">Explorador de Datos</h3> | |
| <p class="text-sm text-stone-600 leading-relaxed"> | |
| Consulta las tablas de tu base de datos Supabase directamente. Selecciona una tabla para ver sus registros o ejecuta consultas SQL personalizadas. | |
| </p> | |
| </div> | |
| <!-- Diagrama ER --> | |
| <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm"> | |
| <h3 class="font-bold text-sm text-stone-800 mb-3">Diagrama Entidad-Relación</h3> | |
| <div id="er-diagram" class="w-full overflow-auto rounded-lg bg-stone-50 border border-stone-200"> | |
| <p class="text-xs text-stone-500 p-3">Cargando esquema...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-6"> | |
| <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm lg:col-span-4"> | |
| <h3 class="font-bold text-sm text-stone-800 mb-3">Tablas disponibles</h3> | |
| <div class="space-y-2" id="tables-list"> | |
| <p class="text-xs text-stone-500">Cargando tablas...</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm lg:col-span-8"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-bold text-sm text-stone-800" id="data-view-title">Selecciona una tabla</h3> | |
| <span class="text-[10px] text-stone-500" id="data-view-count"></span> | |
| </div> | |
| <div id="data-view-content" class="overflow-x-auto max-h-[400px] overflow-y-auto"> | |
| <p class="text-xs text-stone-500">Los datos aparecerán aquí.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Consulta SQL personalizada --> | |
| <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm"> | |
| <h3 class="font-bold text-sm text-stone-800 mb-3">Consulta SQL personalizada</h3> | |
| <textarea id="sql-query" rows="4" placeholder="SELECT * FROM fields LIMIT 10;" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50 font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500 mb-3"></textarea> | |
| <div class="flex gap-2"> | |
| <button id="btn-run-query" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs px-4 py-2 rounded-lg"> | |
| <i class="fa-solid fa-play"></i> Ejecutar | |
| </button> | |
| <button id="btn-clear-query" class="bg-stone-100 hover:bg-stone-200 text-stone-800 font-bold text-xs px-4 py-2 rounded-lg"> | |
| <i class="fa-solid fa-eraser"></i> Limpiar | |
| </button> | |
| </div> | |
| <div id="query-result" class="mt-4 overflow-x-auto max-h-[300px] overflow-y-auto"></div> | |
| </div> | |
| </section> | |