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

62
nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<UCard> <UCard class="brand-card border border-transparent">
<template #header> <template #header>
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="flex-1"> <div class="flex-1">
<h3 class="text-lg font-semibold">{{ card.name }}</h3> <h3 class="text-lg font-semibold brand-section-title">{{ card.name }}</h3>
<p v-if="card.description" class="text-sm text-gray-500 dark:text-gray-400 mt-1"> <p v-if="card.description" class="text-sm text-[var(--brand-text-muted)] mt-1">
{{ card.description }} {{ card.description }}
</p> </p>
</div> </div>
@@ -16,21 +16,21 @@
<!-- Card Details --> <!-- Card Details -->
<div class="space-y-3"> <div class="space-y-3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-[var(--brand-text)]">
<div> <div>
<span class="font-medium">Database ID:</span> <span class="font-medium text-[var(--brand-text-muted)]">Database ID:</span>
<span class="ml-2">{{ card.database_id }}</span> <span class="ml-2">{{ card.database_id }}</span>
</div> </div>
<div> <div>
<span class="font-medium">Query Type:</span> <span class="font-medium text-[var(--brand-text-muted)]">Query Type:</span>
<span class="ml-2">{{ card.query_type || card.dataset_query?.type }}</span> <span class="ml-2">{{ card.query_type || card.dataset_query?.type }}</span>
</div> </div>
<div> <div>
<span class="font-medium">Collection:</span> <span class="font-medium text-[var(--brand-text-muted)]">Collection:</span>
<span class="ml-2">{{ card.collection_id || 'Root' }}</span> <span class="ml-2">{{ card.collection_id || 'Root' }}</span>
</div> </div>
<div> <div>
<span class="font-medium">Created:</span> <span class="font-medium text-[var(--brand-text-muted)]">Created:</span>
<span class="ml-2">{{ formatDate(card.created_at) }}</span> <span class="ml-2">{{ formatDate(card.created_at) }}</span>
</div> </div>
</div> </div>
@@ -38,25 +38,25 @@
<!-- Query Preview --> <!-- Query Preview -->
<div v-if="card.dataset_query?.native?.query" class="mt-4"> <div v-if="card.dataset_query?.native?.query" class="mt-4">
<details class="group"> <details class="group">
<summary class="cursor-pointer text-sm font-medium text-primary"> <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)]">
Ver SQL Ver SQL
</summary> </summary>
<pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs overflow-x-auto whitespace-pre-wrap break-words">{{ card.dataset_query.native.query }}</pre> <pre class="mt-2 p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs overflow-x-auto whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ card.dataset_query.native.query }}</pre>
</details> </details>
</div> </div>
<!-- Parameters Form --> <!-- Parameters Form -->
<div v-if="hasParameters" class="mt-4"> <div v-if="hasParameters" class="mt-4">
<details class="group" :open="showParameters"> <details class="group" :open="showParameters">
<summary class="cursor-pointer text-sm font-medium text-primary flex items-center gap-2 py-2"> <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2 py-2">
<UIcon name="i-heroicons-adjustments-horizontal" class="w-4 h-4" /> <UIcon name="i-heroicons-adjustments-horizontal" class="w-4 h-4" />
<span>Configurar Parámetros</span> <span>Configurar Parámetros</span>
<UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" /> <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
</summary> </summary>
<div class="mt-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg space-y-3"> <div class="mt-3 p-4 rounded-lg border border-[#3a2a16] bg-[#1c140c] space-y-3">
<div v-for="(param, key) in parameterValues" :key="key" class="flex flex-col gap-1"> <div v-for="(param, key) in parameterValues" :key="key" class="flex flex-col gap-1">
<label class="text-xs font-medium text-gray-700 dark:text-gray-300"> <label class="text-xs font-medium text-[var(--brand-text-muted)]">
{{ getParameterLabel(key) }} {{ getParameterLabel(key) }}
</label> </label>
@@ -72,7 +72,7 @@
v-else-if="getParameterType(key) === 'date'" v-else-if="getParameterType(key) === 'date'"
v-model="parameterValues[key]" v-model="parameterValues[key]"
type="date" type="date"
class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
/> />
<!-- Text parameter --> <!-- Text parameter -->
@@ -80,7 +80,7 @@
v-else v-else
v-model="parameterValues[key]" v-model="parameterValues[key]"
type="text" type="text"
class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
/> />
</div> </div>
@@ -100,11 +100,11 @@
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t dark:border-gray-700"> <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--brand-border)]">
<UButton <UButton
@click="executeQuery" @click="executeQuery"
:loading="executing" :loading="executing"
color="primary" :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
size="sm" size="sm"
> >
Ejecutar Query Ejecutar Query
@@ -135,7 +135,7 @@
<!-- Query Results --> <!-- Query Results -->
<div v-if="queryResult" class="mt-4"> <div v-if="queryResult" class="mt-4">
<div class="flex flex-wrap justify-between items-center gap-2 mb-2"> <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
<h4 class="font-medium text-sm">Resultados</h4> <h4 class="font-medium text-sm text-[var(--brand-text)]">Resultados</h4>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UBadge color="green"> <UBadge color="green">
{{ queryResult.data?.rows?.length || 0 }} filas en {{ queryResult.running_time || 0 }}ms {{ queryResult.data?.rows?.length || 0 }} filas en {{ queryResult.running_time || 0 }}ms
@@ -154,38 +154,38 @@
</div> </div>
<!-- Empty State --> <!-- Empty State -->
<div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded"> <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[#3a2a16] bg-[#1c140c]">
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full"> <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg> </svg>
</div> </div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3> <h3 class="text-sm font-medium text-[var(--brand-text)] mb-1">No hay datos</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p> <p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
</div> </div>
<!-- Data Display --> <!-- Data Display -->
<div v-else> <div v-else>
<!-- Table View --> <!-- Table View -->
<div v-if="queryResult.data.cols && queryResult.data.rows" class="overflow-x-auto mb-4"> <div v-if="queryResult.data.cols && queryResult.data.rows" class="overflow-x-auto mb-4 rounded-lg border border-[#3a2a16]">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> <table class="min-w-full divide-y divide-[var(--brand-border)]">
<thead class="bg-gray-50 dark:bg-gray-800"> <thead class="bg-[#1c140c]">
<tr> <tr>
<th <th
v-for="col in queryResult.data.cols" v-for="col in queryResult.data.cols"
:key="col.name" :key="col.name"
class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" class="px-4 py-3 text-left text-xs font-medium text-[var(--brand-text-muted)] uppercase tracking-wider"
> >
{{ col.display_name || col.name }} {{ col.display_name || col.name }}
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700"> <tbody class="bg-[var(--brand-bg)] divide-y divide-[var(--brand-border)]">
<tr v-for="(row, rowIndex) in queryResult.data.rows" :key="rowIndex"> <tr v-for="(row, rowIndex) in queryResult.data.rows" :key="rowIndex">
<td <td
v-for="(cell, cellIndex) in row" v-for="(cell, cellIndex) in row"
:key="cellIndex" :key="cellIndex"
class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" class="px-4 py-3 whitespace-nowrap text-sm text-[var(--brand-text)]"
> >
{{ formatCell(cell, queryResult.data.cols[cellIndex]) }} {{ formatCell(cell, queryResult.data.cols[cellIndex]) }}
</td> </td>
@@ -196,11 +196,11 @@
<!-- JSON View (collapsible) --> <!-- JSON View (collapsible) -->
<details class="group"> <details class="group">
<summary class="cursor-pointer text-sm font-medium text-primary flex items-center gap-2"> <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2">
<span>Ver JSON completo</span> <span>Ver JSON completo</span>
<UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" /> <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
</summary> </summary>
<pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(queryResult.data, null, 2) }}</pre> <pre class="mt-2 p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
</details> </details>
</div> </div>
</div> </div>

33
nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
View File

@@ -29,8 +29,8 @@
<template #name-data="{ row }"> <template #name-data="{ row }">
<div> <div>
<div class="font-medium">{{ row.name }}</div> <div class="font-medium text-[var(--brand-text)]">{{ row.name }}</div>
<div v-if="row.description" class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-md"> <div v-if="row.description" class="text-xs text-[var(--brand-text-muted)] truncate max-w-md">
{{ row.description }} {{ row.description }}
</div> </div>
</div> </div>
@@ -43,7 +43,7 @@
</template> </template>
<template #database_id-data="{ row }"> <template #database_id-data="{ row }">
<span class="text-sm">{{ row.database_id || 'N/A' }}</span> <span class="text-sm text-[var(--brand-text)]">{{ row.database_id || 'N/A' }}</span>
</template> </template>
<template #actions-data="{ row }"> <template #actions-data="{ row }">
@@ -51,8 +51,7 @@
<UButton <UButton
@click.stop="executeCard(row)" @click.stop="executeCard(row)"
:loading="executingCards.has(row.id)" :loading="executingCards.has(row.id)"
color="primary" :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
variant="soft"
size="xs" size="xs"
> >
Ejecutar Ejecutar
@@ -82,10 +81,10 @@
<!-- Results Modal --> <!-- Results Modal -->
<UModal v-model="showResults"> <UModal v-model="showResults">
<UCard> <UCard class="brand-card border border-transparent">
<template #header> <template #header>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">Resultados: {{ selectedCardForResults?.name }}</h3> <h3 class="text-lg font-semibold brand-section-title">Resultados: {{ selectedCardForResults?.name }}</h3>
<UButton <UButton
color="gray" color="gray"
variant="ghost" variant="ghost"
@@ -96,17 +95,17 @@
</template> </template>
<div v-if="currentResult" class="space-y-3"> <div v-if="currentResult" class="space-y-3">
<div class="flex flex-wrap gap-4 text-sm"> <div class="flex flex-wrap gap-4 text-sm text-[var(--brand-text)]">
<div> <div>
<span class="font-medium">Filas:</span> <span class="font-medium text-[var(--brand-text-muted)]">Filas:</span>
<span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span> <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
</div> </div>
<div> <div>
<span class="font-medium">Tiempo:</span> <span class="font-medium text-[var(--brand-text-muted)]">Tiempo:</span>
<span class="ml-2">{{ currentResult.running_time || 0 }}ms</span> <span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
</div> </div>
<div> <div>
<span class="font-medium">Estado:</span> <span class="font-medium text-[var(--brand-text-muted)]">Estado:</span>
<UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'"> <UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
{{ currentResult.status }} {{ currentResult.status }}
</UBadge> </UBadge>
@@ -114,19 +113,19 @@
</div> </div>
<!-- Empty State --> <!-- Empty State -->
<div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded"> <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[#3a2a16] bg-[#1c140c]">
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full"> <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg> </svg>
</div> </div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3> <h3 class="text-sm font-medium text-[var(--brand-text)] mb-1">No hay datos</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p> <p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
</div> </div>
<!-- Data Display --> <!-- Data Display -->
<div v-else class="overflow-x-auto max-h-96"> <div v-else class="overflow-x-auto max-h-96">
<pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre> <pre class="p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
</div> </div>
</div> </div>

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

@@ -23,42 +23,41 @@
</div> </div>
<!-- Stats --> <!-- Stats -->
<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>
</template>
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4"> <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
<UCard> <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-center"> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Cards</div>
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div> <div class="text-3xl font-bold text-[var(--brand-primary)]">{{ cards.length }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
</div> </div>
</UCard>
<UCard> <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-center"> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">SQL Nativo</div>
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ nativeQueries }}</div> <div class="text-3xl font-bold text-[var(--brand-primary)]">{{ nativeQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
</div> </div>
</UCard>
<UCard> <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-center"> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Query Builder</div>
<div class="text-2xl sm:text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div> <div class="text-3xl font-bold text-green-400">{{ queryBuilderQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
</div> </div>
</UCard>
<UCard> <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-center"> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Panorama</div>
<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-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-400' : 'text-orange-400'">{{ panoramaQueries.length }}/9</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
</div> </div>
</UCard>
<UCard> <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
<div class="text-center"> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Informe</div>
<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-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-400' : 'text-orange-400'">{{ informeQueries.length }}/8</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Informe</div> </div>
</div> </div>
</UCard> </UCard>
</div>
<!-- Error Display --> <!-- Error Display -->
<UAlert <UAlert