josedario87
aa76fea286
- Reemplazar colores hardcoded del tema café con variables --brand-* - #c08040 → var(--brand-primary-strong) - #d99a56 → var(--brand-primary) - #f0c07c → var(--brand-accent) - #1c140c → var(--brand-surface) - #3a2a16 → var(--brand-border) - #1b1209, #14100b → var(--brand-bg) - Reemplazar colores de tipos de café con variables --coffee-* - #a855f7 → var(--coffee-uva) - #f97316 → var(--coffee-oreado) - #06b6d4 → var(--coffee-mojado) - #22c55e → var(--coffee-verde) - Reemplazar clases gray-scale de Tailwind con variables de tema - text-gray-400, text-gray-500 → text-[var(--brand-text-muted)] - bg-gray-700/30 → bg-[var(--brand-surface)] - Todos los componentes ahora responden dinámicamente a cambios de tema Archivos adaptados: - Páginas: error, informe-ingresos, panorama, explorer, metabase-debug, profile, notifications, settings - Componentes de ingresos: GraficaSerieIngresos, GraficaSerieInversion, GraficaDinamicaPagadoDeposito, GraficaAcumuladoresUva, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, SecosVendidos, TopClientes, VistaTablaIngresos, VistaTablaIngresosConClientes, FiltrosActivos - Componentes de comparativa: CosechasHeatmap, CosechasPorTipo, CosechasEvolucion, CosechasTotales - Componentes de UI: ClienteSelector, DateRangeSelector, MetadatosCard, MaintenanceMode - Componentes de auth: UserAvatar, UserMetadata - Componentes de clientes: ClienteCard, VistaTablaClientes - Componentes de rechazos: RechazoCard, RechazosRechazoCard, RechazosSubproductos - Componentes de metabase: MetabaseCardDisplay, MetabaseCardsTable
Analítica Núcleo Data Studio
Panel de administración y monitoreo empresarial para Núcleo Río Frío, construido con Nuxt 4, Vue 3 y Nuxt UI.
Características Principales
- 🎨 Sistema de Temas Personalizable - Personaliza todos los colores de la interfaz
- 🔐 Autenticación con Authentik - SSO seguro con Authentik Proxy Outpost
- 📊 Dashboards Interactivos - Visualizaciones de datos con filtros dinámicos
- 🌙 Dark Mode Optimizado - Tema oscuro pensado para uso prolongado
- 🚀 Performance - Construido con Nuxt 4 y Vue 3 Composition API
- 📱 Responsive - Optimizado para desktop, tablet y móvil
Sistema de Temas
Analítica Núcleo cuenta con un sistema de temas completamente personalizable que permite ajustar todos los colores de la interfaz en tiempo real.
Características
- ✅ 8 variables de color personalizables
- ✅ 4 temas predefinidos: Café, Azul, Verde, Carbón
- ✅ Personalización individual con selector visual
- ✅ Persistencia en localStorage
- ✅ Exportar/importar temas en JSON
- ✅ Integración completa con Nuxt UI
Para Usuarios
Accede a Configuración (/settings) para personalizar el tema de la aplicación.
Para Desarrolladores
REGLAS OBLIGATORIAS:
- ✅ Usa SIEMPRE variables CSS (
--brand-*) - ✅ Usa clases utilitarias (
.brand-card,.brand-shell, etc.) - ❌ NUNCA uses colores hardcoded (
#ffffff, etc.) - ❌ NUNCA uses clases gray-scale (
bg-gray-900, etc.)
📖 Documentación completa: THEME_SYSTEM.md
Look at the Nuxt documentation to learn more.
Setup
Make sure to install dependencies:
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
Development Server
Start the development server on http://localhost:3000:
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
Production
Build the application for production:
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
Locally preview production build:
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
Check out the deployment documentation for more information.