{{ label }}
{{ value }}
diff --git a/nuxt4-app/app/components/MetricCard.vue b/nuxt4-app/app/components/MetricCard.vue
index 8d4b464..cbbc43e 100644
--- a/nuxt4-app/app/components/MetricCard.vue
+++ b/nuxt4-app/app/components/MetricCard.vue
@@ -29,12 +29,12 @@ const props = withDefaults(defineProps(), {
const variantClasses = computed(() => {
const variants = {
- default: 'bg-[#1c140c] border-[#3a2a16] text-[var(--brand-text)]',
- primary: 'bg-[#1c140c] border-[#c08040] text-[var(--brand-primary)]',
- success: 'bg-[#1c140c] border-green-600/30 text-green-400',
- danger: 'bg-[#1c140c] border-red-600/30 text-red-400',
- warning: 'bg-[#1c140c] border-yellow-600/30 text-yellow-400',
- info: 'bg-[#1c140c] border-cyan-600/30 text-cyan-400'
+ default: 'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]',
+ primary: 'bg-[var(--brand-surface)] border-[var(--brand-primary-strong)] text-[var(--brand-primary)]',
+ success: 'bg-[var(--brand-surface)] border-green-600/30 text-green-400',
+ danger: 'bg-[var(--brand-surface)] border-red-600/30 text-red-400',
+ warning: 'bg-[var(--brand-surface)] border-yellow-600/30 text-yellow-400',
+ info: 'bg-[var(--brand-surface)] border-cyan-600/30 text-cyan-400'
}
return variants[props.variant]
})
diff --git a/nuxt4-app/app/components/UserMenu.vue b/nuxt4-app/app/components/UserMenu.vue
index b22bedf..526cede 100644
--- a/nuxt4-app/app/components/UserMenu.vue
+++ b/nuxt4-app/app/components/UserMenu.vue
@@ -69,14 +69,14 @@ const items = computed(() => [
v-model:open="isOpen"
:items="items"
:ui="{
- content: 'w-72 p-2 bg-white dark:bg-gray-900 shadow-xl border border-gray-200 dark:border-gray-800 backdrop-blur-xl',
+ content: 'w-72 p-2 bg-[var(--brand-surface)] shadow-xl border border-[var(--brand-border)] backdrop-blur-xl',
item: {
disabled: 'cursor-default select-text opacity-100',
- base: 'group gap-3 rounded-xl transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 active:scale-[0.98]',
+ base: 'group gap-3 rounded-xl transition-all duration-300 hover:bg-[var(--brand-primary)]/10 active:scale-[0.98]',
padding: 'px-4 py-3'
},
separator: 'my-1.5',
- arrow: 'before:bg-white dark:before:bg-gray-900 before:border before:border-gray-200 dark:before:border-gray-800'
+ arrow: 'before:bg-[var(--brand-surface)] before:border before:border-[var(--brand-border)]'
}"
:popper="{ placement: 'bottom-end', offsetDistance: 12 }"
arrow
@@ -88,43 +88,43 @@ const items = computed(() => [
rounded: 'rounded-full',
padding: { sm: 'p-1' }
}"
- class="relative hover:bg-gray-100/80 dark:hover:bg-gray-800/80 transition-all duration-300 hover:scale-110 active:scale-95 group"
+ class="relative hover:bg-[var(--brand-primary)]/10 transition-all duration-300 hover:scale-110 active:scale-95 group"
>
+
-
@@ -133,18 +133,18 @@ const items = computed(() => [
+
{{ item.label }}
-+
{{ item.description }}
-
+
@@ -152,45 +152,45 @@ const items = computed(() => [
-
- +
{{ item.label }}
-+
{{ item.description }}
-
-
Username
+Username
{{ user?.username }}
-
- Email
+Email
{{ user?.email || 'No especificado' }}
-
-
Nombre Completo
+Nombre Completo
{{ user?.name || 'No especificado' }}
-
-
ID Único
-{{ user?.uid }}
+ID Único
+{{ user?.uid }}
-
-
[
-
Grupos
+Grupos
- ('app-theme', () => ({ ...defaultTheme }))
+
+ /**
+ * Aplica las variables CSS del tema al DOM
+ * @param themeColors - Objeto con los colores del tema (opcional, usa el estado actual si no se proporciona)
+ */
+ const applyTheme = (themeColors?: ThemeColors) => {
+ if (import.meta.client) {
+ const colors = themeColors || theme.value
+ const root = document.documentElement
+
+ root.style.setProperty('--brand-bg', colors.bg)
+ root.style.setProperty('--brand-surface', colors.surface)
+ root.style.setProperty('--brand-border', colors.border)
+ root.style.setProperty('--brand-primary', colors.primary)
+ root.style.setProperty('--brand-primary-strong', colors.primaryStrong)
+ root.style.setProperty('--brand-accent', colors.accent)
+ root.style.setProperty('--brand-text', colors.text)
+ root.style.setProperty('--brand-text-muted', colors.textMuted)
+ }
+ }
+
+ /**
+ * Carga el tema guardado desde localStorage
+ * Si no existe tema guardado, aplica el tema por defecto
+ */
+ const loadTheme = () => {
+ if (import.meta.client) {
+ try {
+ const savedTheme = localStorage.getItem(STORAGE_KEY)
+ if (savedTheme) {
+ const parsed = JSON.parse(savedTheme) as ThemeColors
+ theme.value = parsed
+ applyTheme(parsed)
+ } else {
+ // No hay tema guardado, aplicar el por defecto
+ applyTheme(defaultTheme)
+ }
+ } catch (error) {
+ console.error('Error al cargar el tema desde localStorage:', error)
+ // En caso de error, aplicar tema por defecto
+ applyTheme(defaultTheme)
+ }
+ }
+ }
+
+ /**
+ * Guarda el tema actual en localStorage
+ * @returns true si se guardó correctamente, false si hubo un error
+ */
+ const saveTheme = (): boolean => {
+ if (import.meta.client) {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(theme.value))
+ return true
+ } catch (error) {
+ console.error('Error al guardar el tema en localStorage:', error)
+ return false
+ }
+ }
+ return false
+ }
+
+ /**
+ * Resetea el tema a los valores por defecto y limpia localStorage
+ */
+ const resetTheme = () => {
+ theme.value = { ...defaultTheme }
+ applyTheme(defaultTheme)
+
+ if (import.meta.client) {
+ try {
+ localStorage.removeItem(STORAGE_KEY)
+ } catch (error) {
+ console.error('Error al limpiar el tema de localStorage:', error)
+ }
+ }
+ }
+
+ /**
+ * Establece un nuevo tema completo
+ * @param newTheme - Objeto con los colores del nuevo tema
+ * @param save - Si true, guarda automáticamente en localStorage (default: false)
+ */
+ const setTheme = (newTheme: ThemeColors, save = false) => {
+ theme.value = { ...newTheme }
+ applyTheme(newTheme)
+
+ if (save) {
+ saveTheme()
+ }
+ }
+
+ /**
+ * Exporta el tema actual como JSON string
+ * @returns JSON string del tema actual
+ */
+ const exportTheme = (): string => {
+ return JSON.stringify(theme.value, null, 2)
+ }
+
+ /**
+ * Importa un tema desde JSON string
+ * @param jsonString - JSON string con la configuración del tema
+ * @param save - Si true, guarda automáticamente en localStorage (default: false)
+ * @returns true si se importó correctamente, false si hubo un error
+ */
+ const importTheme = (jsonString: string, save = false): boolean => {
+ try {
+ const parsed = JSON.parse(jsonString) as ThemeColors
+
+ // Validar que tenga todas las propiedades requeridas
+ const requiredKeys: (keyof ThemeColors)[] = [
+ 'bg', 'surface', 'border', 'primary',
+ 'primaryStrong', 'accent', 'text', 'textMuted'
+ ]
+
+ for (const key of requiredKeys) {
+ if (!parsed[key] || typeof parsed[key] !== 'string') {
+ throw new Error(`Propiedad "${key}" faltante o inválida`)
+ }
+ }
+
+ setTheme(parsed, save)
+ return true
+ } catch (error) {
+ console.error('Error al importar el tema:', error)
+ return false
+ }
+ }
+
+ /**
+ * Listener para sincronizar cambios de tema entre pestañas
+ * Se ejecuta automáticamente cuando se detecta un cambio en localStorage
+ */
+ const syncThemeAcrossTabs = (event: StorageEvent) => {
+ if (event.key === STORAGE_KEY && event.newValue) {
+ try {
+ const newTheme = JSON.parse(event.newValue) as ThemeColors
+ theme.value = newTheme
+ applyTheme(newTheme)
+ } catch (error) {
+ console.error('Error al sincronizar tema entre pestañas:', error)
+ }
+ } else if (event.key === STORAGE_KEY && event.newValue === null) {
+ // El tema fue eliminado en otra pestaña, resetear
+ resetTheme()
+ }
+ }
+
+ /**
+ * Inicializa los listeners de sincronización entre pestañas
+ * Solo debe llamarse una vez al montar la aplicación
+ */
+ const initStorageListener = () => {
+ if (import.meta.client) {
+ window.addEventListener('storage', syncThemeAcrossTabs)
+ }
+ }
+
+ /**
+ * Limpia los listeners de sincronización
+ * Debe llamarse al desmontar si es necesario
+ */
+ const cleanupStorageListener = () => {
+ if (import.meta.client) {
+ window.removeEventListener('storage', syncThemeAcrossTabs)
+ }
+ }
+
+ return {
+ theme,
+ defaultTheme,
+ applyTheme,
+ loadTheme,
+ saveTheme,
+ resetTheme,
+ setTheme,
+ exportTheme,
+ importTheme,
+ initStorageListener,
+ cleanupStorageListener
+ }
+}
diff --git a/nuxt4-app/app/pages/index.vue b/nuxt4-app/app/pages/index.vue
index e198086..674e274 100644
--- a/nuxt4-app/app/pages/index.vue
+++ b/nuxt4-app/app/pages/index.vue
@@ -7,7 +7,7 @@
@@ -29,8 +29,8 @@
Conexión Authentik
+
+
@@ -229,18 +229,18 @@ const items = computed(() => [
Conexión Authentik
-
{{ user.appSlug }}
+ {{ user.appSlug }}
-
{{ user.outpostName }}
+ {{ user.outpostName }}
-
diff --git a/nuxt4-app/app/composables/useTheme.ts b/nuxt4-app/app/composables/useTheme.ts
new file mode 100644
index 0000000..9e68939
--- /dev/null
+++ b/nuxt4-app/app/composables/useTheme.ts
@@ -0,0 +1,239 @@
+/**
+ * Composable para gestionar el sistema de temas de Analítica Núcleo
+ *
+ * Proporciona funciones para cargar, aplicar, guardar y resetear temas personalizados.
+ * El tema se guarda en localStorage y se sincroniza entre pestañas del navegador.
+ *
+ * @example
+ * ```ts
+ * const { theme, applyTheme, loadTheme, saveTheme, resetTheme } = useTheme()
+ *
+ * // Cargar tema guardado
+ * onMounted(() => loadTheme())
+ *
+ * // Modificar tema
+ * theme.value.primary = '#ff5733'
+ * applyTheme()
+ * saveTheme()
+ * ```
+ */
+
+export interface ThemeColors {
+ bg: string
+ surface: string
+ border: string
+ primary: string
+ primaryStrong: string
+ accent: string
+ text: string
+ textMuted: string
+}
+
+/**
+ * Tema por defecto - Café
+ */
+export const defaultTheme: ThemeColors = {
+ bg: '#14100b',
+ surface: '#1f180f',
+ border: '#3a2a16',
+ primary: '#e0c080',
+ primaryStrong: '#c08040',
+ accent: '#ffe0a0',
+ text: '#fef9f0',
+ textMuted: '#d8c7a6'
+}
+
+/**
+ * Clave de localStorage donde se guarda el tema
+ */
+const STORAGE_KEY = 'custom-theme'
+
+/**
+ * Hook principal del sistema de temas
+ */
+export const useTheme = () => {
+ // Estado reactivo compartido entre todos los componentes
+ const theme = useState
+
diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index d215278..7140129 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -18,9 +18,9 @@
v-if="!isCollapsed"
src="/logo.png"
alt="Analítica Núcleo"
- class="h-8 w-8 rounded-full border border-[#ffe0a0]/40"
+ class="h-8 w-8 rounded-full border border-[var(--brand-accent)]/40"
/>
- {{ item.label }}
-+
{{ item.description }}
@@ -29,8 +29,8 @@
-
-
-
-
Gestiona tu información personal y preferencias del sistema.
-
+
Ver perfil →
@@ -80,14 +80,14 @@
-
Personaliza tu experiencia y ajusta las preferencias del panel.
-
+
Ir a configuración →
diff --git a/nuxt4-app/app/pages/informe-ingresos.vue b/nuxt4-app/app/pages/informe-ingresos.vue
index 7f7242b..764e6ca 100644
--- a/nuxt4-app/app/pages/informe-ingresos.vue
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -370,11 +370,35 @@
-
- Lista de Ingresos
-
- Detalles completos de {{ data.listaIngresos?.length || 0 }} ingresos filtrados
-
+
+
+ Lista de Ingresos
+
+ Detalles completos de {{ data.listaIngresos?.length || 0 }} ingresos filtrados
+
+
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
@@ -447,11 +471,35 @@
-
- Top 10 Clientes
-
- Clientes ordenados por monto total de ingresos
-
+
+
+ Top 10 Clientes
+
+ Clientes ordenados por monto total de ingresos
+
+
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
@@ -491,11 +539,35 @@
-
- Serie Temporal Acumulada
-
- Evolución de ingresos en el tiempo ({{ data.serieTemporal.length }} puntos de datos)
-
+
+
+ Serie Temporal Acumulada
+
+ Evolución de ingresos en el tiempo ({{ data.serieTemporal.length }} puntos de datos)
+
+
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
@@ -773,6 +845,97 @@ async function loadOpcionesFiltros() {
}
}
+// Funciones de copia
+async function copiarListaIngresosTexto() {
+ if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return
+
+ const texto = `📊 LISTA DE INGRESOS - ${data.value.listaIngresos.length} registros
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${data.value.listaIngresos.map((ing, idx) => `
+${idx + 1}. ID: ${ing.id}
+ 📅 Fecha: ${ing.created_at ? new Date(ing.created_at).toLocaleDateString('es-ES') : '-'}
+ 👤 Cliente: ${ing.cliente_nombre || '-'}
+ ☕ Tipo: ${ing.tipo || '-'}
+ ⚖️ Peso: ${ing.peso_neto ? ing.peso_neto.toFixed(2) : '-'} lb
+ 💰 Precio: L ${ing.precio ? ing.precio.toFixed(2) : '-'}
+ 💵 Total: L ${ing.total_a_pagar ? ing.total_a_pagar.toFixed(2) : '-'}
+ 📍 Estado: ${ing.estado || '-'}
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Lista de ingresos copiada al portapapeles')
+}
+
+async function copiarListaIngresosJSON() {
+ if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return
+
+ const json = JSON.stringify(data.value.listaIngresos, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
+async function copiarTop10ClientesTexto() {
+ if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return
+
+ const top10 = data.value.listaClientes.slice(0, 10)
+ const texto = `🏆 TOP 10 CLIENTES
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${top10.map((cliente, idx) => `
+${idx + 1}. ${cliente.cliente_nombre || 'Sin nombre'}
+ 📄 Cédula: ${cliente.cliente_cedula || 'Sin cédula'}
+ 📍 Ubicación: ${cliente.cliente_ubicacion || 'Sin ubicación'}
+ 💰 Total Pagado: L ${cliente.total_pagado ? cliente.total_pagado.toFixed(2) : '0.00'}
+ 📦 Ingresos: ${cliente.num_ingresos || 0}
+ ⚖️ Quintales: ${cliente.total_qq_seco ? cliente.total_qq_seco.toFixed(2) : '0.00'} qq
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Top 10 clientes copiado al portapapeles')
+}
+
+async function copiarTop10ClientesJSON() {
+ if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return
+
+ const top10 = data.value.listaClientes.slice(0, 10)
+ const json = JSON.stringify(top10, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
+async function copiarSerieTemporalTexto() {
+ if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return
+
+ const texto = `📈 SERIE TEMPORAL ACUMULADA - ${data.value.serieTemporal.length} puntos
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${data.value.serieTemporal.map((punto, idx) => `
+${idx + 1}. 📅 ${punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-'}
+ ☕ Tipo: ${punto.tipo || '-'}
+ 📍 Estado: ${punto.estado || '-'}
+ 📦 Ingresos: ${punto.num_ingresos_periodo || 0}
+ ⚖️ Peso Seco: ${punto.peso_seco_periodo ? punto.peso_seco_periodo.toFixed(2) : '0.00'} qq
+ 💰 Inversión: L ${punto.inversion_periodo ? punto.inversion_periodo.toFixed(2) : '0.00'}
+ 📊 Acumulado: ${punto.peso_seco_acumulado ? punto.peso_seco_acumulado.toFixed(2) : '0.00'} qq
+ 💵 Total Acum: L ${punto.inversion_acumulada ? punto.inversion_acumulada.toFixed(2) : '0.00'}
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Serie temporal copiada al portapapeles')
+}
+
+async function copiarSerieTemporalJSON() {
+ if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return
+
+ const json = JSON.stringify(data.value.serieTemporal, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
// Inicializar preset por defecto sin cargar datos
onMounted(async () => {
// Default preset: cosecha 25-26
diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index d5d5a8e..4e7d4fd 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -1,68 +1,91 @@
+```
+
+## Checklist Pre-Commit
+
+Antes de hacer commit de tu código, verifica:
+
+- [ ] **No hay colores hardcoded** (`#ffffff`, `#000000`, etc.)
+- [ ] **No hay clases gray-scale genéricas** (`bg-gray-900`, `text-gray-500`, etc.)
+- [ ] **Todos los fondos usan** `--brand-bg` o `--brand-surface`
+- [ ] **Todos los bordes usan** `--brand-border`
+- [ ] **Todo el texto usa** `--brand-text` o `--brand-text-muted`
+- [ ] **Los elementos interactivos usan** `--brand-primary` o `--brand-accent`
+- [ ] **Los hover states usan transparencias** (ej: `hover:bg-[var(--brand-primary)]/10`)
+- [ ] **Se usan clases utilitarias** cuando sea posible (`.brand-card`, `.brand-shell`, etc.)
+
+## Casos Especiales
+
+### Colores Semánticos (Success, Error, Warning)
+
+Para colores que NO son parte del tema (éxito, error, advertencia), puedes usar colores de Tailwind:
+
+```vue
+
+Éxito
+Error
+Advertencia
+Info
+
+
+
+ Operación exitosa
+
+```
+
+### Iconos
+
+Los iconos deben usar colores del tema:
+
+```vue
+
+Título
+
+ Descripción
+
+
+
+
+```
+
+### Después (Correcto)
+
+```vue
+
+
+ Título
+
+ Descripción
+
+
+ Acción
+
+
+
+```
+
+## Errores Comunes y Soluciones
+
+### Error 1: Mezclar Variables con Hardcoded Colors
+
+**❌ No hagas esto:**
+```vue
+
+ Contenido
+
+```
+
+**✅ Haz esto:**
+```vue
+
+ Contenido
+
+```
+
+### Error 2: No Considerar el Contraste
+
+Asegúrate de que el texto tenga suficiente contraste sobre su fondo:
+
+**❌ Mal contraste:**
+```vue
+
+ Texto importante
+
+```
+
+**✅ Buen contraste:**
+```vue
+
+ Texto importante
+
+```
+
+### Error 3: Duplicar Estilos en Lugar de Usar Clases
+
+**❌ Duplicación:**
+```vue
+
+ Card 1
+
+
+ Card 2
+
+```
+
+**✅ Reutilización:**
+```vue
+Card 1
+Card 2
+```
+
+## Testing del Tema
+
+Para probar que tu componente respeta el tema:
+
+1. Ve a `/settings`
+2. Cambia el tema a "Azul Corporativo" o "Verde Natural"
+3. Navega a tu componente
+4. Verifica que todos los colores cambien correctamente
+5. Verifica que no haya elementos con colores hardcoded que no cambiaron
+
+## Recursos Adicionales
+
+- **Documentación del usuario:** `THEME_CUSTOMIZATION.md`
+- **Composable de temas:** `app/composables/useTheme.ts`
+- **Variables CSS:** `app/assets/css/main.css`
+- **Configuración de Nuxt UI:** `app.config.ts`
+
+## Preguntas Frecuentes
+
+### ¿Puedo usar colores de Tailwind como `bg-blue-500`?
+
+Solo para estados semánticos (éxito, error, advertencia) que NO forman parte del tema. Para todo lo demás, usa las variables de tema.
+
+### ¿Cómo personalizo un componente de Nuxt UI?
+
+Usa la prop `:ui` con las variables de tema:
+
+```vue
+
+ Contenido
+
+```
+
+### ¿Qué hago si necesito un color que no está en el tema?
+
+Primero pregunta: ¿realmente necesito un color nuevo, o puedo usar uno existente? Si es absolutamente necesario, propón agregar una nueva variable al sistema de temas en lugar de hardcodear el color.
+
+### ¿Cómo manejo dark mode?
+
+No necesitas manejarlo manualmente. Las variables CSS ya están optimizadas para dark mode. Solo usa las variables y funcionará automáticamente.
+
+---
+
+**Última actualización:** 2025-10-30
+**Mantenedor:** Claude Code para Núcleo Río Frío
+**Versión:** 1.0.0
-
+
Ver perfil →
@@ -80,14 +80,14 @@
+
Ir a configuración →
diff --git a/nuxt4-app/app/pages/informe-ingresos.vue b/nuxt4-app/app/pages/informe-ingresos.vue
index 7f7242b..764e6ca 100644
--- a/nuxt4-app/app/pages/informe-ingresos.vue
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -370,11 +370,35 @@
-
-
@@ -53,7 +53,7 @@
+
-
@@ -65,14 +65,14 @@
-
Gestiona tu información personal y preferencias del sistema.
-
-
Personaliza tu experiencia y ajusta las preferencias del panel.
-
-
-
Lista de Ingresos
-- Detalles completos de {{ data.listaIngresos?.length || 0 }} ingresos filtrados -
+
+
@@ -447,11 +471,35 @@
+
+ Lista de Ingresos
++ Detalles completos de {{ data.listaIngresos?.length || 0 }} ingresos filtrados +
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
-
-
Top 10 Clientes
-- Clientes ordenados por monto total de ingresos -
+
+
@@ -491,11 +539,35 @@
+
+ Top 10 Clientes
++ Clientes ordenados por monto total de ingresos +
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
-
+ Contenido
+
+```
+
+### ¿Qué hago si necesito un color que no está en el tema?
+
+Primero pregunta: ¿realmente necesito un color nuevo, o puedo usar uno existente? Si es absolutamente necesario, propón agregar una nueva variable al sistema de temas en lugar de hardcodear el color.
+
+### ¿Cómo manejo dark mode?
+
+No necesitas manejarlo manualmente. Las variables CSS ya están optimizadas para dark mode. Solo usa las variables y funcionará automáticamente.
+
+---
+
+**Última actualización:** 2025-10-30
+**Mantenedor:** Claude Code para Núcleo Río Frío
+**Versión:** 1.0.0
Serie Temporal Acumulada
-- Evolución de ingresos en el tiempo ({{ data.serieTemporal.length }} puntos de datos) -
+
+
@@ -773,6 +845,97 @@ async function loadOpcionesFiltros() {
}
}
+// Funciones de copia
+async function copiarListaIngresosTexto() {
+ if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return
+
+ const texto = `📊 LISTA DE INGRESOS - ${data.value.listaIngresos.length} registros
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${data.value.listaIngresos.map((ing, idx) => `
+${idx + 1}. ID: ${ing.id}
+ 📅 Fecha: ${ing.created_at ? new Date(ing.created_at).toLocaleDateString('es-ES') : '-'}
+ 👤 Cliente: ${ing.cliente_nombre || '-'}
+ ☕ Tipo: ${ing.tipo || '-'}
+ ⚖️ Peso: ${ing.peso_neto ? ing.peso_neto.toFixed(2) : '-'} lb
+ 💰 Precio: L ${ing.precio ? ing.precio.toFixed(2) : '-'}
+ 💵 Total: L ${ing.total_a_pagar ? ing.total_a_pagar.toFixed(2) : '-'}
+ 📍 Estado: ${ing.estado || '-'}
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Lista de ingresos copiada al portapapeles')
+}
+
+async function copiarListaIngresosJSON() {
+ if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return
+
+ const json = JSON.stringify(data.value.listaIngresos, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
+async function copiarTop10ClientesTexto() {
+ if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return
+
+ const top10 = data.value.listaClientes.slice(0, 10)
+ const texto = `🏆 TOP 10 CLIENTES
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${top10.map((cliente, idx) => `
+${idx + 1}. ${cliente.cliente_nombre || 'Sin nombre'}
+ 📄 Cédula: ${cliente.cliente_cedula || 'Sin cédula'}
+ 📍 Ubicación: ${cliente.cliente_ubicacion || 'Sin ubicación'}
+ 💰 Total Pagado: L ${cliente.total_pagado ? cliente.total_pagado.toFixed(2) : '0.00'}
+ 📦 Ingresos: ${cliente.num_ingresos || 0}
+ ⚖️ Quintales: ${cliente.total_qq_seco ? cliente.total_qq_seco.toFixed(2) : '0.00'} qq
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Top 10 clientes copiado al portapapeles')
+}
+
+async function copiarTop10ClientesJSON() {
+ if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return
+
+ const top10 = data.value.listaClientes.slice(0, 10)
+ const json = JSON.stringify(top10, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
+async function copiarSerieTemporalTexto() {
+ if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return
+
+ const texto = `📈 SERIE TEMPORAL ACUMULADA - ${data.value.serieTemporal.length} puntos
+Rango: ${rangoLegible.value}
+Generado: ${lastUpdated.value}
+
+${data.value.serieTemporal.map((punto, idx) => `
+${idx + 1}. 📅 ${punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-'}
+ ☕ Tipo: ${punto.tipo || '-'}
+ 📍 Estado: ${punto.estado || '-'}
+ 📦 Ingresos: ${punto.num_ingresos_periodo || 0}
+ ⚖️ Peso Seco: ${punto.peso_seco_periodo ? punto.peso_seco_periodo.toFixed(2) : '0.00'} qq
+ 💰 Inversión: L ${punto.inversion_periodo ? punto.inversion_periodo.toFixed(2) : '0.00'}
+ 📊 Acumulado: ${punto.peso_seco_acumulado ? punto.peso_seco_acumulado.toFixed(2) : '0.00'} qq
+ 💵 Total Acum: L ${punto.inversion_acumulada ? punto.inversion_acumulada.toFixed(2) : '0.00'}
+`).join('\n')}`
+
+ await navigator.clipboard.writeText(texto)
+ alert('✅ Serie temporal copiada al portapapeles')
+}
+
+async function copiarSerieTemporalJSON() {
+ if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return
+
+ const json = JSON.stringify(data.value.serieTemporal, null, 2)
+ await navigator.clipboard.writeText(json)
+ alert('✅ JSON copiado al portapapeles')
+}
+
// Inicializar preset por defecto sin cargar datos
onMounted(async () => {
// Default preset: cosecha 25-26
diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index d5d5a8e..4e7d4fd 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -1,68 +1,91 @@
+```
+
+## Checklist Pre-Commit
+
+Antes de hacer commit de tu código, verifica:
+
+- [ ] **No hay colores hardcoded** (`#ffffff`, `#000000`, etc.)
+- [ ] **No hay clases gray-scale genéricas** (`bg-gray-900`, `text-gray-500`, etc.)
+- [ ] **Todos los fondos usan** `--brand-bg` o `--brand-surface`
+- [ ] **Todos los bordes usan** `--brand-border`
+- [ ] **Todo el texto usa** `--brand-text` o `--brand-text-muted`
+- [ ] **Los elementos interactivos usan** `--brand-primary` o `--brand-accent`
+- [ ] **Los hover states usan transparencias** (ej: `hover:bg-[var(--brand-primary)]/10`)
+- [ ] **Se usan clases utilitarias** cuando sea posible (`.brand-card`, `.brand-shell`, etc.)
+
+## Casos Especiales
+
+### Colores Semánticos (Success, Error, Warning)
+
+Para colores que NO son parte del tema (éxito, error, advertencia), puedes usar colores de Tailwind:
+
+```vue
+
+
+
+ Serie Temporal Acumulada
++ Evolución de ingresos en el tiempo ({{ data.serieTemporal.length }} puntos de datos) +
+
+
+ Copiar Texto
+
+
+ Copiar JSON
+
+
Éxito
+Error
+Advertencia
+Info
+
+
+
+ Operación exitosa
+
+```
+
+### Iconos
+
+Los iconos deben usar colores del tema:
+
+```vue
+
+
+
+
+
+
+```
+
+### Después (Correcto)
+
+```vue
+
+ Título
++ Descripción +
+ +
+
+ Acción
+
+
+
+```
+
+## Errores Comunes y Soluciones
+
+### Error 1: Mezclar Variables con Hardcoded Colors
+
+**❌ No hagas esto:**
+```vue
+Título
++ Descripción +
+
+ Contenido
+
+```
+
+**✅ Haz esto:**
+```vue
+
+ Contenido
+
+```
+
+### Error 2: No Considerar el Contraste
+
+Asegúrate de que el texto tenga suficiente contraste sobre su fondo:
+
+**❌ Mal contraste:**
+```vue
+
+ Texto importante
+
+```
+
+**✅ Buen contraste:**
+```vue
+
+ Texto importante
+
+```
+
+### Error 3: Duplicar Estilos en Lugar de Usar Clases
+
+**❌ Duplicación:**
+```vue
+
+ Card 1
+
+
+ Card 2
+
+```
+
+**✅ Reutilización:**
+```vue
+Card 1
+Card 2
+```
+
+## Testing del Tema
+
+Para probar que tu componente respeta el tema:
+
+1. Ve a `/settings`
+2. Cambia el tema a "Azul Corporativo" o "Verde Natural"
+3. Navega a tu componente
+4. Verifica que todos los colores cambien correctamente
+5. Verifica que no haya elementos con colores hardcoded que no cambiaron
+
+## Recursos Adicionales
+
+- **Documentación del usuario:** `THEME_CUSTOMIZATION.md`
+- **Composable de temas:** `app/composables/useTheme.ts`
+- **Variables CSS:** `app/assets/css/main.css`
+- **Configuración de Nuxt UI:** `app.config.ts`
+
+## Preguntas Frecuentes
+
+### ¿Puedo usar colores de Tailwind como `bg-blue-500`?
+
+Solo para estados semánticos (éxito, error, advertencia) que NO forman parte del tema. Para todo lo demás, usa las variables de tema.
+
+### ¿Cómo personalizo un componente de Nuxt UI?
+
+Usa la prop `:ui` con las variables de tema:
+
+```vue
+