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

Fix: Corregir aplicación del sistema de temas en componentes
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source 
- Cambiar botones de confirmación (Guardar/Importar) en settings para usar --brand-success
- Actualizar color de tab activa en sidebar de --brand-primary a --brand-success
- Reemplazar colores hardcoded por variables CSS en badges de tipos de café:
  * VistaTablaIngresos: Usar var(--coffee-uva/verde/mojado/oreado)
  * informe-ingresos: Aplicar variables --coffee-* y --status-*
- Cambiar text-green-400 por text-[var(--brand-success)] en panorama
- Quitar badge de mantenimiento de Comparativa Cosechas

Todos los cambios siguen las reglas de THEME_SYSTEM.md para garantizar
que los colores respondan correctamente a los cambios de tema del usuario.
This commit is contained in:
josedario87
2025-10-31 09:49:49 -06:00
parent d9fefe6df4
commit 61c37a97b8
5 changed files with 82 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nuxt4-app/app/components/app/AppSidebar.vue
View File

@@ -51,7 +51,7 @@
:ui="{ :ui="{
item: { item: {
base: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10', base: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10',
active: 'bg-[var(--brand-primary)]/15 text-[var(--brand-primary)] border-l-2 border-[var(--brand-primary)] font-medium', active: 'bg-[var(--brand-success)]/15 text-[var(--brand-success)] border-l-2 border-[var(--brand-success)] font-medium',
inactive: 'border-l-2 border-transparent' inactive: 'border-l-2 border-transparent'
} }
}" }"
@@ -300,8 +300,7 @@ const navigationPrimary = computed<NavigationMenuItem[]>(() => [
label: 'Comparativa Cosechas', label: 'Comparativa Cosechas',
icon: 'i-lucide-calendar-range', icon: 'i-lucide-calendar-range',
to: '/comparativa-cosechas', to: '/comparativa-cosechas',
active: route.path === '/comparativa-cosechas', active: route.path === '/comparativa-cosechas'
badge: { label: 'Mantenimiento', color: 'amber' }
}, },
{ {
label: 'Explorador de datos', label: 'Explorador de datos',

29
nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue
View File

@@ -394,34 +394,45 @@ function formatCellValue(value: unknown, column: string, row: any, depth: number
}) })
} }
// tipo - badge con colores especiales y gradientes // tipo - badge con colores especiales usando variables CSS del tema
if (column === 'tipo' && typeof value === 'string') { if (column === 'tipo' && typeof value === 'string') {
const tipoConfig: Record<string, { class: string, icon: string }> = { const tipoConfig: Record<string, { bgColor: string, textColor: string, icon: string }> = {
'uva': { 'uva': {
class: 'bg-gradient-to-r from-red-600 via-red-500 to-yellow-600 text-white font-semibold shadow-md', bgColor: 'var(--coffee-uva)',
textColor: 'white',
icon: 'i-lucide-grape' icon: 'i-lucide-grape'
}, },
'verde': { 'verde': {
class: 'bg-gradient-to-r from-green-600 via-green-500 to-yellow-500 text-white font-semibold shadow-md', bgColor: 'var(--coffee-verde)',
textColor: 'white',
icon: 'i-lucide-leaf' icon: 'i-lucide-leaf'
}, },
'mojado': { 'mojado': {
class: 'bg-gradient-to-r from-cyan-400 via-blue-300 to-stone-100 text-gray-800 font-semibold shadow-md', bgColor: 'var(--coffee-mojado)',
textColor: 'white',
icon: 'i-lucide-droplet' icon: 'i-lucide-droplet'
}, },
'oreado': { 'oreado': {
class: 'bg-gradient-to-r from-yellow-700 via-amber-300 to-stone-50 text-gray-800 font-semibold shadow-md', bgColor: 'var(--coffee-oreado)',
textColor: 'white',
icon: 'i-lucide-wind' icon: 'i-lucide-wind'
}, },
'seco': { 'seco': {
class: 'bg-gradient-to-r from-stone-400 to-stone-200 text-gray-800 font-semibold shadow-md', bgColor: '#9ca3af',
textColor: 'white',
icon: 'i-lucide-sun' icon: 'i-lucide-sun'
} }
} }
const config = tipoConfig[value.toLowerCase()] || { class: 'bg-gray-500 text-white', icon: 'i-lucide-circle' } const config = tipoConfig[value.toLowerCase()] || { bgColor: '#6b7280', textColor: 'white', icon: 'i-lucide-circle' }
return h('div', { class: 'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full ' + config.class }, [ return h('div', {
class: 'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-semibold shadow-md',
style: {
backgroundColor: config.bgColor,
color: config.textColor
}
}, [
h(UIcon, { name: config.icon, class: 'w-4 h-4' }), h(UIcon, { name: config.icon, class: 'w-4 h-4' }),
h('span', {}, upperFirst(value)) h('span', {}, upperFirst(value))
]) ])

82
nuxt4-app/app/pages/informe-ingresos.vue
View File

@@ -446,14 +446,17 @@
</td> </td>
<td class="py-2 px-2 text-[var(--brand-text)]">{{ ingreso.cliente_nombre || '-' }}</td> <td class="py-2 px-2 text-[var(--brand-text)]">{{ ingreso.cliente_nombre || '-' }}</td>
<td class="py-2 px-2"> <td class="py-2 px-2">
<span :class="[ <span
'inline-flex px-2 py-0.5 rounded text-xs font-medium', class="inline-flex px-2 py-0.5 rounded text-xs font-medium"
ingreso.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' : :style="{
ingreso.tipo === 'verde' ? 'bg-green-500/20 text-green-300' : backgroundColor: ingreso.tipo === 'uva' ? 'var(--coffee-uva)' :
ingreso.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' : ingreso.tipo === 'verde' ? 'var(--coffee-verde)' :
ingreso.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' : ingreso.tipo === 'mojado' ? 'var(--coffee-mojado)' :
'bg-gray-500/20 text-gray-300' ingreso.tipo === 'oreado' ? 'var(--coffee-oreado)' :
]"> '#6b7280',
color: 'white'
}"
>
{{ ingreso.tipo || '-' }} {{ ingreso.tipo || '-' }}
</span> </span>
</td> </td>
@@ -467,13 +470,23 @@
L {{ ingreso.total_a_pagar ? ingreso.total_a_pagar.toFixed(2) : '-' }} L {{ ingreso.total_a_pagar ? ingreso.total_a_pagar.toFixed(2) : '-' }}
</td> </td>
<td class="py-2 px-2 text-center"> <td class="py-2 px-2 text-center">
<span :class="[ <span
'inline-flex px-2 py-0.5 rounded text-xs font-medium', class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
ingreso.estado === 'pagado' ? 'bg-green-500/20 text-green-300' : :style="{
ingreso.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' : color: ingreso.estado === 'pagado' ? 'var(--status-pagado)' :
ingreso.estado === 'anulado' ? 'bg-red-500/20 text-red-300' : ingreso.estado === 'pendiente' ? 'var(--status-pendiente)' :
'bg-gray-500/20 text-gray-300' ingreso.estado === 'anulado' ? 'var(--status-anulado)' :
]"> '#9ca3af',
backgroundColor: ingreso.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.1)' :
ingreso.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.1)' :
ingreso.estado === 'anulado' ? 'rgb(from var(--status-anulado) r g b / 0.1)' :
'rgb(156 163 175 / 0.1)',
borderColor: ingreso.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.3)' :
ingreso.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.3)' :
ingreso.estado === 'anulado' ? 'rgb(from var(--status-anulado) r g b / 0.3)' :
'rgb(156 163 175 / 0.3)'
}"
>
{{ ingreso.estado || '-' }} {{ ingreso.estado || '-' }}
</span> </span>
</td> </td>
@@ -615,24 +628,35 @@
{{ punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-' }} {{ punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-' }}
</td> </td>
<td class="py-2 px-2"> <td class="py-2 px-2">
<span :class="[ <span
'inline-flex px-2 py-0.5 rounded text-xs font-medium', class="inline-flex px-2 py-0.5 rounded text-xs font-medium"
punto.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' : :style="{
punto.tipo === 'verde' ? 'bg-green-500/20 text-green-300' : backgroundColor: punto.tipo === 'uva' ? 'var(--coffee-uva)' :
punto.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' : punto.tipo === 'verde' ? 'var(--coffee-verde)' :
punto.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' : punto.tipo === 'mojado' ? 'var(--coffee-mojado)' :
'bg-gray-500/20 text-gray-300' punto.tipo === 'oreado' ? 'var(--coffee-oreado)' :
]"> '#6b7280',
color: 'white'
}"
>
{{ punto.tipo || '-' }} {{ punto.tipo || '-' }}
</span> </span>
</td> </td>
<td class="py-2 px-2"> <td class="py-2 px-2">
<span :class="[ <span
'inline-flex px-2 py-0.5 rounded text-xs font-medium', class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
punto.estado === 'pagado' ? 'bg-green-500/20 text-green-300' : :style="{
punto.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' : color: punto.estado === 'pagado' ? 'var(--status-pagado)' :
'bg-gray-500/20 text-gray-300' punto.estado === 'pendiente' ? 'var(--status-pendiente)' :
]"> '#9ca3af',
backgroundColor: punto.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.1)' :
punto.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.1)' :
'rgb(156 163 175 / 0.1)',
borderColor: punto.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.3)' :
punto.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.3)' :
'rgb(156 163 175 / 0.3)'
}"
>
{{ punto.estado || '-' }} {{ punto.estado || '-' }}
</span> </span>
</td> </td>

2
nuxt4-app/app/pages/panorama.vue
View File

@@ -224,7 +224,7 @@
</div> </div>
<div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-6 py-4"> <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-6 py-4">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div> <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div>
<div class="text-3xl font-bold text-green-400"> <div class="text-3xl font-bold text-[var(--brand-success)]">
{{ formatCurrency(data.financieros.total_rechazos) }} {{ formatCurrency(data.financieros.total_rechazos) }}
</div> </div>
</div> </div>

8
nuxt4-app/app/pages/settings.vue
View File

@@ -610,9 +610,11 @@ watch(() => theme.value, (newTheme) => {
Restaurar por defecto Restaurar por defecto
</UButton> </UButton>
<UButton <UButton
color="primary"
icon="i-lucide-save" icon="i-lucide-save"
@click="handleSaveTheme" @click="handleSaveTheme"
:ui="{
base: 'bg-[var(--brand-success)] text-white border border-[var(--brand-success)] hover:bg-[var(--brand-success)]/90 hover:border-[var(--brand-success)] shadow-sm disabled:opacity-50 disabled:cursor-not-allowed'
}"
> >
Guardar cambios Guardar cambios
</UButton> </UButton>
@@ -666,8 +668,10 @@ watch(() => theme.value, (newTheme) => {
Cancelar Cancelar
</UButton> </UButton>
<UButton <UButton
color="primary"
@click="handleImportTheme" @click="handleImportTheme"
:ui="{
base: 'bg-[var(--brand-success)] text-white border border-[var(--brand-success)] hover:bg-[var(--brand-success)]/90 hover:border-[var(--brand-success)] shadow-sm disabled:opacity-50 disabled:cursor-not-allowed'
}"
> >
Importar Importar
</UButton> </UButton>