From 0966af4d1f19288b83c5ec6179ce6553af903499 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 16:38:13 -0600
Subject: [PATCH] Feat: Agregar botones de copia a componentes de Totales
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 nuxt4-app/README.md                           | 34 ++++++++++-
 .../app/components/TotalesIngresoCompra.vue   | 57 ++++++++++++++++++-
 .../app/components/TotalesMonetarios.vue      | 55 +++++++++++++++++-
 nuxt4-app/app/components/TotalesVerde.vue     | 47 ++++++++++++++-
 4 files changed, 189 insertions(+), 4 deletions(-)

diff --git a/nuxt4-app/README.md b/nuxt4-app/README.md
index 25b5821..7a001f4 100644
--- a/nuxt4-app/README.md
+++ b/nuxt4-app/README.md
@@ -1,4 +1,36 @@
-# Nuxt Minimal Starter
+# 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 los colores de la interfaz según tus preferencias.
+
+### Para Usuarios
+
+- Accede a **Configuración** (`/settings`) para personalizar el tema
+- Elige entre 4 temas predefinidos: Café, Azul, Verde, Carbón
+- O personaliza cada color individualmente con el selector visual
+- Exporta/importa temas para compartir o hacer backup
+
+📖 **Documentación completa:** [THEME_CUSTOMIZATION.md](./docs/THEME_CUSTOMIZATION.md)
+
+### Para Desarrolladores
+
+- Usa siempre variables CSS (`--brand-*`) en lugar de colores hardcoded
+- Aprovecha las clases utilitarias (`.brand-card`, `.brand-shell`, etc.)
+- Utiliza el composable `useTheme()` para manipular temas programáticamente
+
+📖 **Guía de desarrollo:** [DEVELOPER_GUIDE.md](./docs/DEVELOPER_GUIDE.md)
 
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
diff --git a/nuxt4-app/app/components/TotalesIngresoCompra.vue b/nuxt4-app/app/components/TotalesIngresoCompra.vue
index 3192bea..635da46 100644
--- a/nuxt4-app/app/components/TotalesIngresoCompra.vue
+++ b/nuxt4-app/app/components/TotalesIngresoCompra.vue
@@ -1,7 +1,29 @@
 <template>
   <UCard class="brand-card border border-transparent">
     <template #header>
-      <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
+        <div class="flex items-center gap-2">
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-copy"
+            @click="copiarTexto"
+          >
+            Copiar Texto
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-braces"
+            @click="copiarJSON"
+          >
+            Copiar JSON
+          </UButton>
+        </div>
+      </div>
     </template>
 
     <div class="space-y-6">
@@ -165,4 +187,37 @@ const formatNumber = (value: number) => {
     maximumFractionDigits: 2
   }).format(value)
 }
+
+async function copiarTexto() {
+  const texto = `☕ TOTALES DE INGRESO Y COMPRA
+
+🍇 UVA:
+   Ingresada: ${formatNumber(props.data.total_lb_uva_ingresada)} lb (${formatNumber(props.data.total_qq_seco_uva_ingresado)} QQ seco)
+   Pagada: ${formatNumber(props.data.total_lb_uva_pagada)} lb (${formatNumber(props.data.total_qq_seco_uva_pagado)} QQ seco)
+   En Depósito: ${formatNumber(props.data.total_lb_uva_deposito)} lb (${formatNumber(qqSecoUvaDeposito.value)} QQ seco)
+
+💧 MOJADO:
+   Ingresado: ${formatNumber(props.data.total_qq_seco_mojado_ingresado)} QQ seco
+   Pagado: ${formatNumber(props.data.total_qq_seco_mojado_pagado)} QQ seco
+   En Depósito: ${formatNumber(props.data.total_qq_mojado_deposito)} QQ
+
+🌬️ OREADO:
+   Ingresado: ${formatNumber(props.data.total_qq_seco_oreado_ingresado)} QQ seco
+   Pagado: ${formatNumber(props.data.total_qq_seco_oreado_pagado)} QQ seco
+   En Depósito: ${formatNumber(props.data.total_qq_oreado_deposito)} QQ
+
+📊 TOTALES GENERALES:
+   QQ Seco Ingresado: ${formatNumber(props.data.total_qq_seco_ingresado)} QQ
+   QQ Seco Comprado: ${formatNumber(props.data.total_qq_seco_comprado)} QQ
+   QQ Seco en Depósito: ${formatNumber(props.data.total_qq_seco_deposito)} QQ`
+
+  await navigator.clipboard.writeText(texto)
+  alert('✅ Totales de Ingreso y Compra copiados al portapapeles')
+}
+
+async function copiarJSON() {
+  const json = JSON.stringify(props.data, null, 2)
+  await navigator.clipboard.writeText(json)
+  alert('✅ JSON copiado al portapapeles')
+}
 </script>
diff --git a/nuxt4-app/app/components/TotalesMonetarios.vue b/nuxt4-app/app/components/TotalesMonetarios.vue
index 3c53b24..97bc6fa 100644
--- a/nuxt4-app/app/components/TotalesMonetarios.vue
+++ b/nuxt4-app/app/components/TotalesMonetarios.vue
@@ -1,7 +1,29 @@
 <template>
   <UCard class="brand-card border border-transparent">
     <template #header>
-      <h2 class="text-xl font-bold brand-section-title">Totales Monetarios</h2>
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold brand-section-title">Totales Monetarios</h2>
+        <div class="flex items-center gap-2">
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-copy"
+            @click="copiarTexto"
+          >
+            Copiar Texto
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-braces"
+            @click="copiarJSON"
+          >
+            Copiar JSON
+          </UButton>
+        </div>
+      </div>
     </template>
 
     <div class="space-y-6">
@@ -130,4 +152,35 @@ const formatCurrency = (value: number) => {
     maximumFractionDigits: 2
   }).format(value).replace('HNL', 'L')
 }
+
+async function copiarTexto() {
+  const texto = `💰 TOTALES MONETARIOS
+
+💵 INVERSIÓN HASTA LA FECHA:
+   Inversión Uva: ${formatCurrency(props.data.inversion_uva)}
+   Inversión Mojado: ${formatCurrency(props.data.inversion_mojado)}
+   Inversión Oreado: ${formatCurrency(props.data.inversion_oreado)}
+   Total Invertido: ${formatCurrency(props.data.total_invertido)}
+
+📊 PRECIOS PROMEDIO PONDERADOS:
+   Uva: ${formatCurrency(props.data.precio_promedio_uva_por_lb)}/lb (${formatCurrency(props.data.precio_promedio_uva_por_qq)}/QQ)
+   Mojado: ${formatCurrency(props.data.precio_promedio_mojado_por_qq)}/QQ
+   Oreado: ${formatCurrency(props.data.precio_promedio_oreado_por_qq)}/QQ
+   Global QQ Seco: ${formatCurrency(props.data.precio_promedio_qq_seco)}/QQ
+
+⏳ INVERSIÓN RESTANTE ESPERADA:
+   Restante Uva: ${formatCurrency(props.data.inversion_restante_uva)}
+   Restante Mojado: ${formatCurrency(props.data.inversion_restante_mojado)}
+   Restante Oreado: ${formatCurrency(props.data.inversion_restante_oreado)}
+   Total Restante: ${formatCurrency(props.data.inversion_restante_esperada)}`
+
+  await navigator.clipboard.writeText(texto)
+  alert('✅ Totales Monetarios copiados al portapapeles')
+}
+
+async function copiarJSON() {
+  const json = JSON.stringify(props.data, null, 2)
+  await navigator.clipboard.writeText(json)
+  alert('✅ JSON copiado al portapapeles')
+}
 </script>
diff --git a/nuxt4-app/app/components/TotalesVerde.vue b/nuxt4-app/app/components/TotalesVerde.vue
index efa7de1..4afc5f9 100644
--- a/nuxt4-app/app/components/TotalesVerde.vue
+++ b/nuxt4-app/app/components/TotalesVerde.vue
@@ -1,7 +1,29 @@
 <template>
   <UCard class="brand-card border border-transparent">
     <template #header>
-      <h2 class="text-xl font-bold brand-section-title">Café Verde</h2>
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold brand-section-title">Café Verde</h2>
+        <div class="flex items-center gap-2">
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-copy"
+            @click="copiarTexto"
+          >
+            Copiar Texto
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-braces"
+            @click="copiarJSON"
+          >
+            Copiar JSON
+          </UButton>
+        </div>
+      </div>
     </template>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -78,4 +100,27 @@ const formatCurrency = (value: number) => {
     maximumFractionDigits: 2
   }).format(value).replace('HNL', 'L')
 }
+
+async function copiarTexto() {
+  const texto = `🌱 CAFÉ VERDE
+
+📊 TOTALES:
+   LB Neto Verde Total: ${formatNumber(props.data.total_lb_neto_verde)} lb
+   LB Neto Comprado: ${formatNumber(props.data.total_lb_neto_comprado_verde)} lb
+   LB Neto en Depósito: ${formatNumber(props.data.total_lb_neto_verde_deposito)} lb
+
+💵 FINANCIERO:
+   Precio Promedio Pagado: ${formatCurrency(props.data.precio_promedio_verde_pagado)}/lb
+   Inversión Hasta la Fecha: ${formatCurrency(props.data.inversion_verde_hasta_fecha)}
+   Inversión Restante: ${formatCurrency(props.data.inversion_restante_verde)}`
+
+  await navigator.clipboard.writeText(texto)
+  alert('✅ Totales de Café Verde copiados al portapapeles')
+}
+
+async function copiarJSON() {
+  const json = JSON.stringify(props.data, null, 2)
+  await navigator.clipboard.writeText(json)
+  alert('✅ JSON copiado al portapapeles')
+}
 </script>