Mapear --ui-color-success-* a --brand-success para que color="success"
en componentes de Nuxt UI use los colores del tema personalizado.
Antes:
- text-success buscaba --ui-color-success-* (no definidas)
- El color no se conectaba con --brand-success del tema
Después:
- Paleta completa de success (50-950) generada con color-mix
- success-500 apunta directamente a --brand-success
- Variaciones más claras/oscuras con mezclas de white/black
- NavigationMenu con color="success" ahora usa el color del tema
Flujo de colores:
color="success" → text-success (Tailwind) → --color-success-500
→ --ui-color-success-500 → --brand-success (tema personalizado)
Esto completa la integración del sistema de temas con los colores
semánticos de Nuxt UI v4.
- Cambiar v-model a v-model:open según @nuxt/ui v4.0.0
- Eliminar UCard interno que causaba renderizado permanente
- Usar slots nativos del Modal (#header) en lugar de Card
- Simplificar estilos usando clases de Tailwind estándar
- El modal ahora se mostrará solo cuando showResults sea true
Cambiar de configuración :ui incorrecta a props nativos del componente.
Antes (INCORRECTO):
- Usaba :ui="{ item: { base, active, inactive } }"
- La propiedad 'item' NO existe en NavigationMenu v4
Después (CORRECTO):
- Usar color="success" para aplicar colores del tema
- Usar variant="pill" para activar estilos de estado activo
- Eliminar objeto :ui que no era parte de la API del componente
Según el código fuente de Nuxt UI v4, NavigationMenu solo aplica
colores al estado activo con variant="pill" + color específico.
Las compound variants del tema mapean text-success a las variables
CSS del sistema de temas (--brand-success).
Ref: node_modules/@nuxt/ui/.nuxt/ui/navigation-menu.ts líneas 289-296
Movido text-[var(--brand-text-muted)] de item.base a item.inactive
para evitar conflictos de especificidad CSS con el color del estado activo.
Antes:
- item.base aplicaba text-muted a TODOS los items
- Conflicto con text-[var(--brand-success)] del estado active
Después:
- item.base solo tiene estilos de hover (aplicados a todos)
- item.inactive tiene el color muted explícitamente
- item.active mantiene su color success sin conflictos
Esto asegura que el color del texto activo se aplique correctamente
según el tema seleccionado.
- Cambiar UDropdown por UDropdownMenu (componente correcto)
- Corregir evento @select para recibir ambos parámetros (row, event)
- Los botones de exportación ahora funcionarán correctamente
- El modal de resultados debería abrirse al ejecutar queries
- Agregar contador de Queries Comparativa (4/4) en estadísticas
- Agregar nueva tab "Queries Comparativa" en metabase-debug
- Actualizar endpoint query-config para incluir queries comparativa
- Agregar computeds comparativaQueries y missingComparativaQueries
- Mostrar las 4 queries de comparativa con sus detalles
- Reorganizar grid de estadísticas para 6 columnas
La nueva tab permite visualizar y debuggear las queries:
- comparativa_datos_diarios_completos
- comparativa_totales_por_cosecha
- comparativa_datos_acumulados_por_dia
- comparativa_metadata_cosechas
- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-*
* danger ahora usa var(--coffee-uva) para métricas de café Uva
* info ahora usa var(--coffee-mojado) para métricas de café Mojado
* warning ahora usa var(--coffee-oreado) para métricas de café Oreado
* Usar color-mix para crear transparencias en bordes (30%)
- TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva)
* Total Uva Ingresada, Pagada y en Depósito con color dinámico
* Bordes con 30% de opacidad usando color-mix
- TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva)
- TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones
* 6 cards con diferentes tonalidades de verde usando color-mix
* Mezclas con white para crear variaciones más claras
* Una mezcla con cyan (#20d5ff) para variación distintiva
Los valores numéricos de cada tipo de café ahora reflejan dinámicamente
los colores del tema seleccionado, mejorando la identidad visual.
- Cambiar de slots personalizados a definición correcta de columnas con TanStack Table
- Usar accessorKey en lugar de key
- Implementar funciones header y cell con h() para renderizar componentes
- Eliminar slots #column-data y migrar a patrón estándar de nuxt-ui
- Seguir mismo patrón que VistaTablaIngresos.vue y VistaTablaClientes.vue
Esto corrige el problema donde los datos no se mostraban en la tabla de la página metabase-debug
- Agregar configuración de queries comparativa en metabase-queries.ts
- Crear endpoint /api/metabase/comparativa-cosechas.post.ts
- Crear 4 queries en Metabase:
* comparativa_datos_diarios_completos (ID: 56)
* comparativa_totales_por_cosecha (ID: 57)
* comparativa_datos_acumulados_por_dia (ID: 58)
* comparativa_metadata_cosechas (ID: 59)
- Restaurar página comparativa-cosechas.vue con nueva arquitectura
- Remover badge de mantenimiento del sidebar
- Integrar con componentes CosechasHeatmap, CosechasEvolucion y CosechasTotales
- Usar vista_resumen_ingresos como fuente de datos
La página permite comparar métricas entre diferentes cosechas de café
con visualizaciones interactivas y filtros configurables.
- 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.
Cambios realizados:
- Agregada variable success (#00dc82 Nuxt green) para botones de confirmación y elementos de éxito
- Agregados inputs de color para todas las variables de café (Uva, Oreado, Mojado, Verde)
- Agregados inputs de color para todas las variables de estados (Pendiente, Pagado, Anulado)
- Actualizada interfaz ThemeColors con nueva propiedad success
- Actualizados todos los temas preestablecidos (café, azul, verde, carbón) con variable success
- Actualizada validación de importación de temas con nueva propiedad
- Agregado CSS --brand-success en main.css
Los usuarios ahora pueden personalizar completamente todos los colores del sistema:
- 9 colores base (incluye success)
- 4 colores de tipos de café
- 3 colores de estados de pago
Total: 16 variables personalizables
La variable success se aplica a:
- Botones de confirmación
- Página seleccionada en sidebar
- Indicadores de éxito
- Explicación de arquitectura y componentes
- Guía de uso para desarrolladores
- Ejemplos de código y casos de uso
- Detalles de separación por usuario
- Configuración de limpieza automática
- Sincronización entre pestañas
- FAQ y mejoras futuras
- Crear composable useNotifications con gestión por localStorage
- Almacenamiento separado por usuario usando UID de Authentik
- Auto-limpieza de notificaciones mayores a 30 días
- Sincronización automática entre pestañas
- Filtrado por tipo, búsqueda y gestión completa
- Crear wrapper useToast para guardar toasts automáticamente
- Intercepta todos los toasts de la aplicación
- Guarda historial sin afectar funcionalidad existente
- Implementar endpoints de API para notificaciones del backend
- POST /api/notifications/send para enviar notificaciones
- GET /api/notifications/list para obtener pendientes
- Actualizar página de notificaciones con funcionalidad real
- Búsqueda y filtros por tipo (info, warning, success, error)
- Eliminar individual o todas las notificaciones
- Marcar como leídas individual o todas
- Badges de origen (toast, backend, manual)
- Estados vacíos con mensajes informativos
- Actualizar badge del sidebar con contador dinámico
- Muestra número real de notificaciones no leídas
- Se oculta cuando no hay notificaciones
- Inicializar sistema en app.vue
- Auto-inicialización al montar la app
- Limpieza automática de notificaciones antiguas
Cambios:
- Agregar sección de Variables de Tipos de Café (--coffee-*)
- Agregar sección de Variables de Estados (--status-*)
- Agregar Ejemplo 7: Usar Colores de Tipos de Café
- Agregar Ejemplo 8: Usar Colores de Estados
- Actualizar Ejemplo 6 con todas las propiedades del tema
- Actualizar Resumen de Comandos Rápidos con nuevas variables
- Documentación completa para las 15 variables CSS del sistema
La documentación ahora refleja el sistema extendido de temas.
Cambios:
- app.vue: Reemplazar #fef9f0 con var(--brand-text)
- layouts/dashboard.vue: Usar var(--brand-text)
- layouts/informe.vue: Usar var(--brand-text)
Todos los componentes base ahora responden al sistema de temas.
Cambios:
- Agregar documentación completa del sistema de temas en /settings
- Extender ThemeColors con 7 nuevas variables:
* coffeeUva, coffeeOreado, coffeeMojado, coffeeVerde
* statusPendiente, statusPagado, statusAnulado
- Actualizar useTheme.ts para aplicar nuevas variables CSS
- Actualizar main.css con definiciones de nuevas variables
- Actualizar temas predefinidos (azul, verde, carbón)
- Mantener colores de café y estados consistentes en todos los temas
Las nuevas variables permiten personalizar:
- Colores de identificación de tipos de café en gráficas
- Colores de estados de pago en tablas y badges
Remueve las páginas en modo mantenimiento que no se van a utilizar:
Páginas eliminadas:
- /metadatos - Visualización de estructura de tablas
- /rawExplorer - Exploración de datos en formato raw
Cambios en sidebar:
- Removidos enlaces de "Metadatos" y "Explorador de datos raw"
- Sidebar ahora solo muestra páginas activas y funcionales
Páginas que permanecen:
- Panorama Facturador (funcional)
- Informe Ingresos (funcional)
- Explorador de datos (funcional)
- Comparativa Cosechas (en mantenimiento, se restaurará próximamente)
- Metabase Debug (herramienta de desarrollo)
Simplifica la navegación mostrando solo funcionalidades relevantes.
Remueve el badge de "Mantenimiento" del enlace de Informe Ingresos
en el sidebar, ya que la página está completamente funcional con:
- Todos los totales funcionando correctamente
- Lista de Ingresos con tabla completa
- Top 10 Clientes ranking
- Serie Temporal Acumulada
- Botones de copia (Texto y JSON) en todos los componentes
- Footer con resumen en todos los exports
- Filtros avanzados funcionando
- Sistema de actualizacion con cambios pendientes
La página está lista para producción.
- Crear THEME_SYSTEM.md como documento único y completo
- Eliminar DEVELOPER_GUIDE.md y THEME_CUSTOMIZATION.md (desactualizados)
- Actualizar README.md con referencia al nuevo documento
- Incluye arquitectura, variables, reglas, ejemplos y troubleshooting
- Documentación clara para usuarios y desarrolladores
Implementa botones "Copiar Texto" y "Copiar JSON" en todos los
componentes de datos del Panorama Facturador:
Componentes actualizados:
- SecosVendidos: Exporta inventario y proyecciones de café seco
- RechazosSubproductos: Exporta tabla de rechazos con totales
- Totales Financieros: Exporta vista general financiera (directo en página)
Además:
- Los componentes de Totales (IngresoCompra, Monetarios, Verde)
ahora reciben contadores y metadata para incluir footer
- Todos los textos incluyen footer con:
- Rango de fechas
- Ingresos y rechazos filtrados vs totales
- Fecha de generación
Nota: Panorama no tiene datos de clientes, solo ingresos y rechazos.
El problema era que Nuxt UI usa la escala neutral de forma invertida:
- neutral-50 se usa para texto claro
- neutral-900/950 se usa para fondos oscuros
Esto causaba que los labels tuvieran el mismo color que el fondo de las cards.
Cambios:
- Invertir el mapeo de --ui-color-neutral-*
- neutral-50/100 ahora mapean a --brand-text/--brand-text-muted
- neutral-900/950 ahora mapean a --brand-bg
PROBLEMA: Los componentes de Nuxt UI (UCard, UButton, etc.) usaban
colores fijos de --color-coffee-* que no respondían a cambios de tema.
SOLUCIÓN: Mapear --ui-color-neutral-* a variables --brand-* dinámicas:
- neutral-50/100 → --brand-bg (fondos más oscuros)
- neutral-200 → --brand-surface (fondos elevados)
- neutral-300/400 → --brand-border (bordes)
- neutral-500/600/700 → --brand-primary/primary-strong (interactivos)
- neutral-800/900/950 → --brand-text/text-muted (textos)
RESULTADO: Ahora los UCard y otros componentes de Nuxt UI cambian
correctamente cuando se selecciona un tema predefinido.
Archivos modificados:
- app/assets/css/main.css: Remapeo de variables --ui-color-neutral-*
- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets
Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border
Implementa un footer consistente en todas las funciones de copiar texto
que incluye información de contexto del informe:
Footer incluye:
- 📅 Rango de fechas aplicado
- 📦 Cantidad de ingresos filtrados vs total
- 👥 Cantidad de clientes con ingresos vs total
- 🕐 Fecha y hora de generación
Cambios en archivos:
- informe-ingresos.vue: Footer en Lista, Top 10 y Serie Temporal
- TotalesIngresoCompra.vue: Recibe contadores y metadata
- TotalesMonetarios.vue: Recibe contadores y metadata
- TotalesVerde.vue: Recibe contadores y metadata
El footer usa datos de la query "Informe Ingresos - Contadores de Filtros"
que proporciona totales con y sin filtros aplicados.
Cambia todos los botones de copia en informe-ingresos.vue para
usar el mismo estilo que los componentes de Totales:
- color: "gray" (antes "neutral")
- variant: "soft" (antes "outline")
- icon JSON: "i-lucide-braces" (antes "i-lucide-code")
Ahora todos los botones de copia en la página tienen apariencia
consistente.
Implementa botones "Copiar Texto" y "Copiar JSON" en los tres
componentes de totales del informe de ingresos:
- TotalesIngresoCompra: Exporta datos de Uva, Mojado, Oreado y totales
- TotalesMonetarios: Exporta inversiones, precios promedio y restantes
- TotalesVerde: Exporta métricas de café verde
Cada componente incluye:
- Formato de texto con emojis para compartir en WhatsApp
- Formato JSON para integración con sistemas
- Alertas de confirmación al copiar
Todos los componentes de datos del informe ahora tienen
funcionalidad de exportación consistente.
Implementa funcionalidad de copia en tres secciones del Informe:
📋 Funcionalidades agregadas:
1. Lista de Ingresos
- Copiar Texto: Formato WhatsApp con emojis y legible
- Copiar JSON: Formato estructurado para sistemas
2. Top 10 Clientes
- Copiar Texto: Ranking formateado con métricas
- Copiar JSON: Array de objetos con datos completos
3. Serie Temporal Acumulada
- Copiar Texto: Evolución temporal con emojis
- Copiar JSON: Datos completos para análisis
✨ Características:
- Botones con iconos (i-lucide-copy y i-lucide-code)
- Disabled cuando no hay datos disponibles
- Alertas de confirmación al copiar
- Formato texto optimizado para WhatsApp
- Incluye metadata: rango de fechas y timestamp
Uso:
- Copiar Texto → Compartir en WhatsApp/Telegram
- Copiar JSON → Integración con otros sistemas
- Altura máxima de 600px con scroll vertical
- Header sticky que se mantiene visible al hacer scroll
- Mejora la usabilidad cuando hay muchos registros
Agrega tres secciones principales con datos reales de Metabase:
1. Lista de Ingresos (Query ID 50)
- Tabla completa con detalles de cada ingreso
- Campos: ID, fecha, cliente, tipo, peso, precio, total, estado
- Badges de colores para tipos y estados
- Soporte para 1000 registros
2. Top 10 Clientes (Query ID 51)
- Ranking por monto total pagado
- Muestra: nombre, cédula, ubicación
- Métricas: total pagado, número de ingresos, quintales
- Diseño en cards con numeración
3. Serie Temporal Acumulada (Query ID 52)
- Datos desglosados por fecha, tipo y estado
- Columnas del período: ingresos, peso seco, inversión
- Columnas acumuladas: qq acumulados, inversión acumulada
- Tabla scrollable con sticky header
Correcciones técnicas:
- Usar campos correctos de las queries de Metabase
- created_at en lugar de fecha
- cliente_nombre en lugar de nombre_cliente
- cliente_id, cliente_cedula, cliente_ubicacion
- fecha_grupo, peso_seco_periodo, inversion_acumulada
- Crear THEME_CUSTOMIZATION.md con guía completa de uso
- Documentar las 8 variables CSS y sus propósitos
- Incluir guías de buenas prácticas y accesibilidad
- Agregar ejemplos de temas predefinidos
- Explicar persistencia en localStorage
- Documentar arquitectura técnica del sistema
- Incluir troubleshooting y roadmap futuro
- Crear formulario completo de configuración de colores
- Agregar 8 campos editables: bg, surface, border, primary, primaryStrong, accent, text, textMuted
- Implementar color pickers + inputs de texto hexadecimal
- Agregar vista previa en tiempo real (toggle opcional)
- Guardar configuración en localStorage
- Aplicar cambios dinámicamente con CSS variables
- Incluir botón para restaurar colores por defecto
- Colores default: tema café actual de la aplicación
Problema: Las queries de Metabase en el endpoint /api/metabase/informe
retornaban 0 filas porque se enviaban par\u00e1metros con arrays vac\u00edos,
lo cual activaba filtros condicionales sin valores.
Soluci\u00f3n: Modificar buildParameters() para solo incluir par\u00e1metros
opcionales (cliente_ids, tipos, estados, ubicaciones, calidades) cuando
tengan valores (arrays no vac\u00edos). Los filtros condicionales [[...]]
de Metabase ahora se omiten correctamente cuando no hay valores.
- Corregir prop :ui de 'wrapper' a 'root' en UDashboardSidebar
- Agregar mapeo explícito de variables --ui-color-neutral-* a coffee
- Esto fuerza a Nuxt UI a usar la paleta café en lugar de slate/azul
- Soluciona el problema de fondo azul en todos los navegadores
- Agregar fondo café oscuro al sidebar (var(--brand-surface))
- Personalizar estilos del input de búsqueda con colores del tema
- Mejorar indicador visual de tab seleccionada con borde izquierdo
- Aplicar estilos consistentes a los badges de teclado (⌘ K)
Los shades estaban configurados para light mode (50=claro, 950=oscuro).
En dark mode, Nuxt UI espera la escala invertida (50=oscuro, 950=claro).
Cambios:
- 50: #1b1209 (más oscuro)
- 500: #c08040 (medio - café principal)
- 950: #fef9f0 (más claro)
Esto asegura que en dark mode se vean los colores café/dorado correctamente.
Nuevo componente creado:
- SimpleMultiSelector.vue: Componente genérico reutilizable
- Normaliza strings a objetos {label, value}
- Capitaliza primera letra automáticamente
- Props configurables: icon, placeholder, labels singular/plural
- Mismo estilo espectacular que otros selectores
Cambios en informe-ingresos.vue:
1. Layout mejorado:
- Grid de 3 columnas (antes 2 columnas + 1 separado)
- Tipos, Estados y Calidades en mismo nivel
- Distribución más equilibrada y consistente
2. Reemplazar UCheckboxGroup por SimpleMultiSelector:
- Tipos de Café: icon coffee, "tipo/tipos"
- Estados: icon check-circle, "estado/estados"
- Calidades: icon star, "calidad/calidades"
3. Labels consistentes:
- Todas las secciones usan mismo formato
- text-sm font-medium mb-2
Beneficios:
- Interfaz más limpia y moderna
- Búsqueda integrada en cada filtro
- Tags visuales de selección
- Consistencia total en todos los filtros
- Mismo tema café/dorado en toda la app
- Mejor uso del espacio (3 columnas iguales)
Problema identificado:
- El array de ubicaciones viene como array de strings simples,
no como objetos con {label, value}
- Ejemplo: ["breñales, la union, lempira", "buenos aires, ..."]
Solución implementada:
1. Normalización de datos:
- Crear computed normalizedUbicaciones que transforma el array
- Si el item es string: usa el string como label y value
- Si el item es objeto: usa sus propiedades label y value
- Filtrar null/undefined durante la transformación
2. Agregar prop loading:
- Agregada prop opcional loading?: boolean
- Pasar loading al UInputMenu para mostrar spinner
3. Simplificar lógica de filtrado:
- Usar normalizedUbicaciones como base
- Filtrar por query sin errores de toLowerCase
4. Mejorar selectedUbicacionesObjects:
- Usar normalizedUbicaciones para encontrar seleccionados
- Comparar con value normalizado
Ahora el componente:
- Muestra todas las ubicaciones correctamente
- Funciona con array de strings o array de objetos
- Muestra animación de loading cuando carga datos
- Búsqueda funciona sin errores
Implementa la configuración correcta de colores según Nuxt UI 4:
- Define color 'coffee' con shades 50-950 usando @theme en CSS
- Configura aliases primary y neutral a 'coffee' en app.config.ts
- Esto permite que todos los componentes de Nuxt UI usen el tema café/dorado
- Reemplaza los colores azules y verdes por defecto globalmente
Problemas corregidos:
1. Error "Cannot read properties of undefined (reading 'toLowerCase')":
- Agregar validación para filtrar items undefined/null
- Verificar que cada item tenga label y value antes de usar toLowerCase
- Prevenir errores cuando el array de ubicaciones tiene items inválidos
2. Selección múltiple no funcionaba:
- Mejorar onSelectionChange para manejar diferentes tipos de valores
- Agregar validación de array antes de procesar
- Filtrar items null/undefined antes de extraer valores
- Manejar tanto objetos como strings en el array de valores
3. Tags no aparecían en el input:
- El problema estaba en el procesamiento de valores seleccionados
- Ahora maneja correctamente item.value y strings directos
El componente ahora funciona igual que ClienteMultiSelector:
- Sin errores en consola
- Tags visuales aparecen correctamente
- Selección múltiple funciona perfectamente
Nuevo componente creado:
- UbicacionMultiSelector.vue: InputMenu con tema personalizado
- Mismo estilo y funcionalidad que ClienteMultiSelector
- Búsqueda en tiempo real de ubicaciones
- Tags visuales para selección múltiple
- Contador y botón "Limpiar todo"
Cambios en informe-ingresos.vue:
- Reemplazar UCheckboxGroup de ubicaciones por UbicacionMultiSelector
- Mover selector de ubicaciones a su propia sección (fuera del grid)
- Grid ahora tiene 2 columnas (Tipos y Estados) en lugar de 3
- Mantener layout consistente con selector de clientes
Estilos aplicados (igual que ClienteMultiSelector):
- Fondo: --brand-surface
- Bordes: --brand-border con focus dorado
- Item highlighted: tono dorado suave
- Tags: color --brand-primary
Ahora ubicaciones tiene la misma UX moderna que clientes.
Reemplaza todos los colores por defecto de Nuxt UI (azules y verdes)
en la sidebar con la paleta de colores café/dorado personalizada.
- Toggle button: color neutral con hover café/dorado
- Tarjeta de usuario: fondo brand-surface con borde brand-border
- Avatar: ring brand-primary, indicador brand-accent
- Avatar generado: background café (c08040) en lugar de azul
- Botones de acción: hover brand-primary/10, iconos en colores del tema
- Badge notificaciones: brand-accent con texto brand-bg
- Botón cerrar sesión: colores del tema en lugar de rojo
- Vista colapsada: todos los colores actualizados
Se aplica el mismo tema café/dorado a todos los InputMenu de filtros:
- Tipo de café
- Estado
- Ubicación
- Calidad
Estilos aplicados (igual que ClienteMultiSelector):
- Fondo: --brand-surface (#1f180f)
- Borde: --brand-border (#3a2a16)
- Focus ring: ring-1 con --brand-primary (#e0c080)
- Item highlighted: rgba(224,192,128,0.12)
- Tags: color --brand-primary con bordes dorados
- Transición suave en el borde de focus
Todos los filtros ahora mantienen la coherencia visual
con el resto de la aplicación.
Cambios aplicados:
- Reemplazar ring-2 (2px) por ring-1 (1px) para borde más delgado
- Cambiar color de focus de verde por defecto a --brand-primary (#e0c080)
- Aplicar focus:ring-1 y focus:border-[--brand-primary] en el input base
- Agregar focus-within:ring-1 en el root para consistencia
- Agregar transition-shadow para animación suave del borde
Ahora el borde de focus es más delgado y usa el color dorado
de la app en lugar del verde por defecto de Nuxt UI.
- Añadir hover con fondo color brand (#c08040) al 5% de opacidad
- Transición suave de 200ms en cambio de colores
- Bordes redondeados para mejor estética
- Sin cambios de tamaño ni desplazamiento
- Aplicado a todos los filtros: ubicaciones, tipos, estados y calidades
Colores aplicados según el sistema de diseño de la app:
- Fondo del input: --brand-surface (#1f180f)
- Borde: --brand-border (#3a2a16)
- Texto: --brand-text (#fef9f0)
- Placeholder y iconos: --brand-text-muted (#d8c7a6)
- Dropdown: mismo fondo y borde que el input
- Item highlighted: rgba(224,192,128,0.12) (tono dorado suave)
- Tags seleccionados: rgba(224,192,128,0.14) con borde más fuerte
- Color de tags: --brand-primary (#e0c080)
- Hover en botón delete: tono dorado más intenso
El componente ahora tiene la misma paleta de colores que las cards
de Metabase Debug y el resto de la aplicación, eliminando los
colores azules/verdes por defecto de Nuxt UI.
- Reemplazar checkboxes individuales por UCheckboxGroup en filtros de:
* Ubicaciones (con scroll vertical para listas largas)
* Tipos de Café (Uva, Mojado, Oreado, Verde)
* Estados (Pagado, Pendiente)
* Calidades (orientación horizontal)
- Simplificar modelo de datos:
* Eliminar filterTipos y filterEstados (objetos con booleanos)
* Usar directamente selectedTipos y selectedEstados (arrays)
* Eliminar computed tiposArray y estadosArray (innecesarios)
- Beneficios:
* Código más limpio y mantenible
* Mejor consistencia con Nuxt UI
* UI más compacta y profesional
* Menos lógica de conversión de datos
Correcciones de funcionalidad:
- Cambiar v-model por :model-value y @update:model-value para control manual
- Crear selectedClientesObjects computed para sincronizar con props
- Implementar onSelectionChange para extraer IDs correctamente
- Arreglar binding bidireccional con selectedIds
Correcciones de estilo:
- Agregar size="sm" para consistencia con otros inputs
- Usar variables CSS de la app (--brand-text, --brand-text-muted)
- Mantener coherencia visual con el resto de componentes
- Corregir contador para usar props.selectedIds directamente
Ahora el componente:
- Permite seleccionar y deseleccionar usuarios correctamente
- Muestra tags visuales de los seleccionados
- Mantiene el estilo consistente con la app
- Respeta el mínimo de 4 caracteres para búsqueda
Correcciones aplicadas:
- Usar ignore-filter para control manual del filtrado
- Implementar label-key y value-key correctamente
- Usar slot #item-label en lugar de #item para personalización
- Usar slot #empty para mensajes cuando no hay resultados
- Mapear items a formato InputMenuItem con label y value
- Usar clases de Nuxt UI (text-muted) en lugar de variables CSS
- Simplificar lógica eliminando control manual del estado open
Funcionalidad:
- Filtrado solo se activa con mínimo 4 caracteres
- Búsqueda por nombre y cédula
- Selección múltiple con tags visuales
- Formato de cédula mantenido
Cambios implementados:
- Reemplazar input con checkboxes por UInputMenu con selección múltiple
- Filtrado por nombre y cédula únicamente (sin ubicación)
- El menú de sugerencias solo se abre después de 4 caracteres
- Mantener contador de seleccionados y botón "Limpiar todo"
- Actualizar tipo de cedula de number a string para manejar formato correcto
- Simplificar lógica eliminando filtros por ubicación
Mejoras de UX:
- Interfaz más limpia y moderna con InputMenu
- Búsqueda más eficiente con mínimo de caracteres
- Tags visuales para items seleccionados
- Formato de cédula mantenido (XXXX-XXXX-XXXXX)
