mejora ui x exageradas

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

@@ -10,6 +10,11 @@
 
       <template #right>
         <div class="flex items-center gap-3">
+          <USwitch
+            v-model="pageSections.heatmap"
+            size="xs"
+            label="Heatmap"
+          />
           <USwitch
             v-model="pageSections.totales"
             size="xs"
@@ -79,6 +84,11 @@
           </div>
         </UCard>
 
+        <!-- Vista Heatmap -->
+        <div v-if="cosechasSeleccionadas.length > 0 && pageSections.heatmap">
+          <ComparativaCosechasHeatmap :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
+        </div>
+
         <!-- Resumen General por Cosecha -->
         <div v-if="cosechasSeleccionadas.length > 0 && pageSections.totales">
           <ComparativaCosechasTotales :ingresos="ingresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
@@ -117,9 +127,10 @@ definePageMeta({
 
 // Definir secciones específicas de esta página
 const pageSections = ref({
-  totales: true,
-  evolucion: true,
-  porTipo: true
+  heatmap: true,
+  totales: false,
+  evolucion: false,
+  porTipo: false
 })
 
 // Definición de cosechas disponibles
@@ -136,40 +147,14 @@ const cosechasDisponibles = [
 const cosechasSeleccionadas = ref<string[]>(['cosecha-23-24', 'cosecha-24-25'])
 
 // Store de ingresos
-const ingresosStore = useTableDataStore('ingresos')
+const ingresosStore = useTableDataStore<IngresoRecord>('ingresos')
 
-const loading = ref(false)
-const error = ref<string | null>(null)
+// Datos de ingresos desde el store
+const ingresos = computed(() => ingresosStore.allRecords as IngresoRecord[])
 
-// Cargar datos
-onMounted(async () => {
-  try {
-    loading.value = true
-    error.value = null
-    await ingresosStore.fetch()
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Error desconocido'
-  } finally {
-    loading.value = false
-  }
-})
-
-// Datos de ingresos
-const ingresos = computed(() => {
-  return ingresosStore.data.map(row => {
-    const ingreso: IngresoRecord = {
-      id: row.id as number,
-      created_at: row.created_at as string,
-      peso_neto: row.peso_neto as number,
-      precio: row.precio as number,
-      tipo: row.tipo as string,
-      cliente: row.cliente as string,
-      peso_seco: row.peso_seco as number | undefined,
-      pagado: row.pagado as boolean | undefined
-    }
-    return ingreso
-  })
-})
+// Loading and error states
+const loading = computed(() => ingresosStore.isLoading)
+const error = computed(() => ingresosStore.error)
 
 // Exportar cosechas para los componentes
 provide('cosechasDisponibles', cosechasDisponibles)