nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: unificar estilos de cards de Metabase Debug con Panorama e Informe
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 49s
Details

Browse Source 
- Aplicar clase brand-card a todas las cards principales
- Usar colores de variables CSS (--brand-text, --brand-text-muted, --brand-primary)
- Estilizar cards de estadísticas con border-[#3a2a16] y bg-[#1c140c]
- Actualizar estilos de tablas, modales y formularios
- Aplicar estilo consistente a botones principales con color de marca #c08040
This commit is contained in:
josedario87
2025-10-29 18:06:48 -06:00
parent e25a0c6b76
commit e85078f6c8
3 changed files with 73 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
nuxt4-app/app/pages/metabase-debug.vue
View File

@@ -23,42 +23,41 @@
</div>
<!-- Stats -->
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
<UCard>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
<UCard class="brand-card border border-transparent">
<template #header>
<div>
<h2 class="text-2xl font-bold brand-section-title">Estadísticas de Metabase</h2>
<p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de queries y cards configuradas</p>
</div>
</UCard>
</template>
<UCard>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ nativeQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Cards</div>
<div class="text-3xl font-bold text-[var(--brand-primary)]">{{ cards.length }}</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">SQL Nativo</div>
<div class="text-3xl font-bold text-[var(--brand-primary)]">{{ nativeQueries }}</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-600' : 'text-orange-600'">{{ panoramaQueries.length }}/9</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Query Builder</div>
<div class="text-3xl font-bold text-green-400">{{ queryBuilderQueries }}</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-600' : 'text-orange-600'">{{ informeQueries.length }}/8</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Informe</div>
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Panorama</div>
<div class="text-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-400' : 'text-orange-400'">{{ panoramaQueries.length }}/9</div>
</div>
</UCard>
</div>
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Informe</div>
<div class="text-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-400' : 'text-orange-400'">{{ informeQueries.length }}/8</div>
</div>
</div>
</UCard>
<!-- Error Display -->
<UAlert