mejoras ui/ux

nuxt4-app/app/pages/comparativa-cosechas.vue

@@ -36,11 +36,6 @@
             size="xs"
             label="Evolución"
           />
-          <USwitch
-            v-model="pageSections.porTipo"
-            size="xs"
-            label="Por Tipo"
-          />
         </div>
       </template>
     </UDashboardToolbar>
@@ -76,43 +71,79 @@
             <label
               v-for="cosecha in cosechasDisponibles"
               :key="cosecha.id"
-              class="flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-all"
-              :class="cosechasSeleccionadas.includes(cosecha.id)
-                ? 'border-[#c08040] bg-[#c08040]/10'
-                : 'border-[var(--brand-border)] hover:border-[#c08040]/50'"
+              class="flex items-center gap-2 p-3 rounded-lg border transition-all"
+              :class="[
+                cosecha.disabled
+                  ? 'border-gray-600/20 bg-gray-800/20 cursor-not-allowed opacity-50'
+                  : cosechasSeleccionadas.includes(cosecha.id)
+                    ? 'border-[#c08040] bg-[#c08040]/10 cursor-pointer'
+                    : 'border-[var(--brand-border)] hover:border-[#c08040]/50 cursor-pointer'
+              ]"
             >
               <input
                 type="checkbox"
                 :value="cosecha.id"
                 v-model="cosechasSeleccionadas"
-                class="rounded border-[var(--brand-border)] text-[#c08040] focus:ring-[#c08040]"
+                :disabled="cosecha.disabled"
+                class="rounded border-[var(--brand-border)] text-[#c08040] focus:ring-[#c08040] disabled:cursor-not-allowed"
               />
-              <div class="flex flex-col">
-                <span class="text-sm font-medium text-[var(--brand-text)]">{{ cosecha.label }}</span>
-                <span class="text-xs text-[var(--brand-text-muted)]">{{ cosecha.periodo }}</span>
+              <div class="flex flex-col flex-1">
+                <div class="flex items-center justify-between gap-2">
+                  <span class="text-sm font-medium text-[var(--brand-text)]">{{ cosecha.label }}</span>
+                  <span
+                    v-if="!cosecha.disabled"
+                    class="text-[10px] px-1.5 py-0.5 rounded-full bg-[#c08040]/20 text-[#c08040] font-semibold"
+                  >
+                    {{ cosecha.registros }}
+                  </span>
+                </div>
+                <span class="text-xs text-[var(--brand-text-muted)]">
+                  {{ cosecha.disabled ? 'Sin datos' : cosecha.periodo }}
+                </span>
               </div>
             </label>
           </div>
         </UCard>
 
+        <!-- Metadatos de Resumen de Ingresos -->
+        <div v-if="cosechasSeleccionadas.length > 0" class="grid grid-cols-1 gap-5">
+          <UCard class="brand-card border border-transparent">
+            <template #header>
+              <div class="flex items-center gap-2">
+                <UIcon name="i-lucide-database" class="size-5 text-[#c08040]" />
+                <h3 class="text-base font-semibold text-[var(--brand-text)]">Fuente de Datos: Resumen Diario de Ingresos</h3>
+              </div>
+            </template>
+            <div class="flex flex-col gap-3">
+              <MetadatosCard v-if="resumenIngresosMetadata" :metadata="resumenIngresosMetadata" :compact="true" />
+              <div class="text-xs text-[var(--brand-text-muted)] p-3 rounded-lg bg-[var(--brand-bg-secondary)] border border-[var(--brand-border)]">
+                <p class="font-semibold mb-2">Métricas utilizadas (registros diarios):</p>
+                <ul class="list-disc list-inside space-y-1 ml-2">
+                  <li><strong>total_peso_seco</strong> (qq)</li>
+                  <li><strong>peso_neto_uva</strong> (qq)</li>
+                  <li><strong>peso_neto_verde</strong> (qq)</li>
+                  <li><strong>sacos_total_dia</strong></li>
+                  <li><strong>Lempiras por tipo:</strong> uva, verde, mojado+oreado (combinados)</li>
+                </ul>
+                <p class="mt-2 text-[10px] italic">Todas las cosechas inician el 8 de septiembre y terminan el 7 de septiembre del siguiente año.</p>
+              </div>
+            </div>
+          </UCard>
+        </div>
+
         <!-- Vista Heatmap -->
         <div v-if="cosechasSeleccionadas.length > 0 && pageSections.heatmap">
-          <ComparativaCosechasHeatmap :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
+          <ComparativaCosechasHeatmap :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
         </div>
 
         <!-- Resumen General por Cosecha -->
         <div v-if="cosechasSeleccionadas.length > 0 && pageSections.totales">
-          <ComparativaCosechasTotales :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
-        </div>
-
-        <!-- Comparativa por Tipo de Café -->
-        <div v-if="cosechasSeleccionadas.length > 0 && pageSections.porTipo">
-          <ComparativaCosechasPorTipo :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
+          <ComparativaCosechasTotales :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
         </div>
 
         <!-- Evolución Temporal Comparada -->
         <div v-if="cosechasSeleccionadas.length > 0 && pageSections.evolucion">
-          <ComparativaCosechasEvolucion :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
+          <ComparativaCosechasEvolucion :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
         </div>
 
         <!-- Empty State -->
@@ -126,8 +157,7 @@
     </div>
 
     <!-- Modal de Configuración de Estilos -->
-    <UModal v-model:open="mostrarConfiguracion">
-      <UCard class="brand-card">
+      <UCard class="brand-card" v-if="mostrarConfiguracion">
         <template #header>
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2">
@@ -161,7 +191,7 @@
             </p>
             <div class="grid grid-cols-2 gap-3">
               <div
-                v-for="(cosecha, index) in cosechasDisponibles"
+                v-for="(cosecha, index) in cosechasDefiniciones"
                 :key="`color-${cosecha.id}`"
                 class="flex items-center gap-3 p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]"
               >
@@ -305,12 +335,12 @@
           </div>
         </template>
       </UCard>
-    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useTableDataStore } from '~/stores/tableDataFactory'
+import { useMetadataStore } from '~/stores/metadata'
 import type { IngresoRecord } from '~/composables/useIngresosMetrics'
 
 definePageMeta({
@@ -322,8 +352,7 @@ definePageMeta({
 const pageSections = ref({
   heatmap: true,
   totales: false,
-  evolucion: false,
-  porTipo: false
+  evolucion: false
 })
 
 // Estado del modal de configuración
@@ -382,30 +411,131 @@ function resetearConfiguracion() {
   estilosGraficas.value = { ...estilosGraficasDefault }
 }
 
-// Definición de cosechas disponibles
-const cosechasDisponibles = [
-  { id: 'cosecha-20-21', label: 'Cosecha 20-21', periodo: 'Sep 2020 - Sep 2021', fechaInicio: '2020-09-25', fechaFin: '2021-09-24' },
-  { id: 'cosecha-21-22', label: 'Cosecha 21-22', periodo: 'Sep 2021 - Sep 2022', fechaInicio: '2021-09-25', fechaFin: '2022-09-24' },
-  { id: 'cosecha-22-23', label: 'Cosecha 22-23', periodo: 'Sep 2022 - Sep 2023', fechaInicio: '2022-09-25', fechaFin: '2023-09-24' },
-  { id: 'cosecha-23-24', label: 'Cosecha 23-24', periodo: 'Sep 2023 - Sep 2024', fechaInicio: '2023-09-25', fechaFin: '2024-09-24' },
-  { id: 'cosecha-24-25', label: 'Cosecha 24-25', periodo: 'Sep 2024 - Sep 2025', fechaInicio: '2024-09-25', fechaFin: '2025-09-09' },
-  { id: 'cosecha-25-26', label: 'Cosecha 25-26', periodo: 'Sep 2025 - Hoy', fechaInicio: '2025-09-10', fechaFin: new Date().toISOString().split('T')[0] }
+// Store de resumen de ingresos (registros por día con métricas agregadas)
+const resumenIngresosStore = useTableDataStore<any>('vista_resumen_ingresos')
+
+// Datos de resumen desde el store
+const resumenIngresos = computed(() => resumenIngresosStore.allRecords)
+
+// Definición de cosechas disponibles (8 sep - 7 sep)
+const cosechasDefiniciones = [
+  { id: 'cosecha-20-21', label: 'Cosecha 20-21', periodo: '8 Sep 2020 - 7 Sep 2021', fechaInicio: '2020-09-08', fechaFin: '2021-09-07' },
+  { id: 'cosecha-21-22', label: 'Cosecha 21-22', periodo: '8 Sep 2021 - 7 Sep 2022', fechaInicio: '2021-09-08', fechaFin: '2022-09-07' },
+  { id: 'cosecha-22-23', label: 'Cosecha 22-23', periodo: '8 Sep 2022 - 7 Sep 2023', fechaInicio: '2022-09-08', fechaFin: '2023-09-07' },
+  { id: 'cosecha-23-24', label: 'Cosecha 23-24', periodo: '8 Sep 2023 - 7 Sep 2024', fechaInicio: '2023-09-08', fechaFin: '2024-09-07' },
+  { id: 'cosecha-24-25', label: 'Cosecha 24-25', periodo: '8 Sep 2024 - 7 Sep 2025', fechaInicio: '2024-09-08', fechaFin: '2025-09-07' },
+  { id: 'cosecha-25-26', label: 'Cosecha 25-26', periodo: '8 Sep 2025 - Hoy', fechaInicio: '2025-09-08', fechaFin: new Date().toISOString().split('T')[0] }
 ]
 
-// Cosechas seleccionadas (por defecto las 3 más recientes)
-const cosechasSeleccionadas = ref<string[]>(['cosecha-23-24', 'cosecha-24-25'])
+// Calcular cuántos registros tiene cada cosecha
+const registrosPorCosecha = computed(() => {
+  const counts: Record<string, number> = {}
 
-// Store de ingresos
-const ingresosStore = useTableDataStore<IngresoRecord>('ingresos')
+  cosechasDefiniciones.forEach(cosecha => {
+    const registros = resumenIngresos.value.filter((record: any) => {
+      const fecha = new Date(record.fecha || record.created_at)
+      const inicio = new Date(cosecha.fechaInicio)
+      const fin = new Date(cosecha.fechaFin)
+      return fecha >= inicio && fecha <= fin
+    })
+    counts[cosecha.id] = registros.length
+  })
 
-// Datos de ingresos desde el store
-const ingresos = computed(() => ingresosStore.allRecords as IngresoRecord[])
+  return counts
+})
+
+// Cosechas disponibles con información de registros
+const cosechasDisponibles = computed(() => {
+  return cosechasDefiniciones.map(cosecha => ({
+    ...cosecha,
+    registros: registrosPorCosecha.value[cosecha.id] || 0,
+    disabled: (registrosPorCosecha.value[cosecha.id] || 0) === 0
+  }))
+})
+
+// Cosechas seleccionadas (por defecto las más recientes con datos)
+const cosechasSeleccionadas = ref<string[]>([])
+
+// Watch para filtrar cosechas deshabilitadas y seleccionar las más recientes con datos
+watch(cosechasDisponibles, (disponibles) => {
+  // Remover cosechas deshabilitadas de la selección
+  cosechasSeleccionadas.value = cosechasSeleccionadas.value.filter(id => {
+    const cosecha = disponibles.find(c => c.id === id)
+    return cosecha && !cosecha.disabled
+  })
+
+  // Si no hay ninguna seleccionada, seleccionar las 2 más recientes con datos
+  if (cosechasSeleccionadas.value.length === 0) {
+    const conDatos = disponibles.filter(c => !c.disabled)
+    cosechasSeleccionadas.value = conDatos.slice(-2).map(c => c.id)
+  }
+}, { immediate: true })
 
 // Loading and error states
-const loading = computed(() => ingresosStore.isLoading)
-const error = computed(() => ingresosStore.error)
+const loading = computed(() => resumenIngresosStore.isLoading)
+const error = computed(() => resumenIngresosStore.error)
 
-// Exportar cosechas y configuración para los componentes
-provide('cosechasDisponibles', cosechasDisponibles)
+// Metadatos desde el store de metadata
+const metadataStore = useMetadataStore()
+
+const resumenIngresosMetadata = computed(() => {
+  const meta = metadataStore.metadata.find((t: any) => t.table === 'vista_resumen_ingresos')
+  return meta ? { ...meta, name: 'vista_resumen_ingresos' } : null
+})
+
+// Definir las métricas disponibles para los componentes
+const metricasDisponibles = {
+  pesoSeco: {
+    key: 'total_peso_seco',
+    label: 'Peso Seco Total',
+    unidad: 'qq',
+    descripcion: 'Peso seco total del día'
+  },
+  pesoNetoUva: {
+    key: 'peso_neto_uva',
+    label: 'Peso Neto Uva',
+    unidad: 'qq',
+    descripcion: 'Peso neto de café uva'
+  },
+  pesoNetoVerde: {
+    key: 'peso_neto_verde',
+    label: 'Peso Neto Verde',
+    unidad: 'qq',
+    descripcion: 'Peso neto de café verde'
+  },
+  sacos: {
+    key: 'sacos_total_dia',
+    label: 'Sacos Totales',
+    unidad: 'sacos',
+    descripcion: 'Total de sacos del día'
+  },
+  lempirasUva: {
+    key: 'total_lempiras_uva',
+    label: 'Lempiras Uva',
+    unidad: 'L',
+    descripcion: 'Total en lempiras de café uva'
+  },
+  lempirasVerde: {
+    key: 'total_lempiras_verde',
+    label: 'Lempiras Verde',
+    unidad: 'L',
+    descripcion: 'Total en lempiras de café verde'
+  },
+  lempirasMojadoOreado: {
+    key: 'total_lempiras_mojado_oreado',
+    label: 'Lempiras Mojado+Oreado',
+    unidad: 'L',
+    descripcion: 'Total en lempiras de café mojado y oreado (combinados)',
+    // Esta métrica se calcula combinando total_lempiras_mojado + total_lempiras_oreado
+    computed: true,
+    keys: ['total_lempiras_mojado', 'total_lempiras_oreado']
+  }
+}
+
+// Exportar definiciones de cosechas, métricas y configuración para los componentes
+// Usamos cosechasDefiniciones (array estático) en lugar de cosechasDisponibles (computed)
+// porque los componentes hijos no necesitan la info de disabled/registros
+provide('cosechasDisponibles', cosechasDefiniciones)
+provide('metricasDisponibles', metricasDisponibles)
 provide('estilosGraficas', estilosGraficas)
 </script>