Spaces:
Sleeping
Sleeping
File size: 2,804 Bytes
227a41a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | ---
// 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>
|