Activar página de Informe de Ingresos con filtros y totales

nuxt4-app/app/pages/informe-ingresos.vue

@@ -1,15 +1,283 @@
 <template>
-  <MaintenanceMode
-    title="Informe de Ingresos"
-    description="El informe detallado de ingresos está temporalmente deshabilitado."
-    icon="i-lucide-file-bar-chart"
-    technical-info="Sistema de reportes financieros en proceso de migración y mejora de algoritmos de cálculo."
+  <div class="space-y-6">
+    <!-- Filtros -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-filter" class="w-5 h-5" />
+            <h3 class="text-lg font-semibold">Filtros</h3>
+          </div>
+          <UButton
+            @click="applyFilters"
+            :loading="loading"
+            icon="i-lucide-search"
+            color="primary"
+            size="sm"
+          >
+            Aplicar Filtros
+          </UButton>
+        </div>
+      </template>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <!-- Fecha Desde -->
+        <div>
+          <label class="block text-sm font-medium mb-1">Fecha Desde</label>
+          <input
+            v-model="filters.fecha_desde"
+            type="date"
+            class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
           />
+        </div>
+
+        <!-- Fecha Hasta -->
+        <div>
+          <label class="block text-sm font-medium mb-1">Fecha Hasta</label>
+          <input
+            v-model="filters.fecha_hasta"
+            type="date"
+            class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
+          />
+        </div>
+
+        <!-- Incluir Anulados -->
+        <div class="flex items-center pt-6">
+          <UCheckbox
+            v-model="filters.incluir_anulados"
+            label="Incluir Anulados"
+          />
+        </div>
+
+        <!-- Granularidad -->
+        <div>
+          <label class="block text-sm font-medium mb-1">Granularidad</label>
+          <select
+            v-model="filters.granularidad"
+            class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
+          >
+            <option value="dia">Día</option>
+            <option value="semana">Semana</option>
+            <option value="mes">Mes</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Filtros Avanzados (colapsables) -->
+      <UAccordion :items="[{ label: 'Filtros Avanzados', icon: 'i-lucide-sliders-horizontal', defaultOpen: false, slot: 'advanced' }]" class="mt-4">
+        <template #advanced>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
+            <!-- Tipos -->
+            <div>
+              <label class="block text-sm font-medium mb-1">Tipos de Café</label>
+              <div class="space-y-2">
+                <UCheckbox v-model="tiposSeleccionados.uva" label="Uva" />
+                <UCheckbox v-model="tiposSeleccionados.mojado" label="Mojado" />
+                <UCheckbox v-model="tiposSeleccionados.oreado" label="Oreado" />
+                <UCheckbox v-model="tiposSeleccionados.verde" label="Verde" />
+              </div>
+            </div>
+
+            <!-- Estados -->
+            <div>
+              <label class="block text-sm font-medium mb-1">Estados</label>
+              <div class="space-y-2">
+                <UCheckbox v-model="estadosSeleccionados.pagado" label="Pagado" />
+                <UCheckbox v-model="estadosSeleccionados.pendiente" label="Pendiente" />
+              </div>
+            </div>
+
+            <!-- Placeholder para filtros futuros -->
+            <div class="col-span-2 text-sm text-gray-500">
+              Filtros de ubicaciones, calidades y clientes se agregarán próximamente
+            </div>
+          </div>
+        </template>
+      </UAccordion>
+    </UCard>
+
+    <!-- Error Display -->
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="soft"
+      :title="error"
+      :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'error', variant: 'link' }"
+      @close="error = null"
+    />
+
+    <!-- Loading State -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin" />
+    </div>
+
+    <!-- Content -->
+    <div v-else-if="data" class="space-y-6">
+      <!-- Totales Monetarios -->
+      <UCard v-if="pageSections.totalesCafe">
+        <template #header>
+          <h3 class="text-lg font-semibold">Totales Monetarios</h3>
+        </template>
+        <TotalesMonetarios :data="data.totalesMonetarios" />
+      </UCard>
+
+      <!-- Totales Ingreso y Compra -->
+      <UCard v-if="pageSections.totalesCafe">
+        <template #header>
+          <h3 class="text-lg font-semibold">Totales de Ingreso y Compra</h3>
+        </template>
+        <TotalesIngresoCompra :data="data.totalesIngresoCompra" />
+      </UCard>
+
+      <!-- Totales Verde -->
+      <UCard v-if="pageSections.totalesVerde">
+        <template #header>
+          <h3 class="text-lg font-semibold">Totales de Café Verde</h3>
+        </template>
+        <TotalesVerde :data="data.totalesVerde" />
+      </UCard>
+
+      <!-- Contadores -->
+      <UCard v-if="data.contadores">
+        <template #header>
+          <h3 class="text-lg font-semibold">Estadísticas</h3>
+        </template>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div class="text-center">
+            <div class="text-2xl font-bold text-primary">{{ data.contadores.ingresos_filtrados }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">Ingresos Filtrados</div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_ingresos }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">Total Ingresos</div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-primary">{{ data.contadores.clientes_con_ingresos_filtrados }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">Clientes Activos</div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_clientes }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">Total Clientes</div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Tabla de Ingresos (placeholder) -->
+      <UCard v-if="pageSections.tablaIngresos && data.listaIngresos?.length > 0">
+        <template #header>
+          <h3 class="text-lg font-semibold">Lista de Ingresos ({{ data.listaIngresos.length }})</h3>
+        </template>
+        <div class="text-sm text-gray-500">
+          Tabla de ingresos se implementará próximamente
+        </div>
+      </UCard>
+
+      <!-- Top 10 Clientes (placeholder) -->
+      <UCard v-if="pageSections.top10Clientes && data.listaClientes?.length > 0">
+        <template #header>
+          <h3 class="text-lg font-semibold">Top Clientes ({{ data.listaClientes.length }})</h3>
+        </template>
+        <div class="text-sm text-gray-500">
+          Ranking de clientes se implementará próximamente
+        </div>
+      </UCard>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { useInformeLayout } from '~/composables/useInformeLayout'
+
 definePageMeta({
   layout: 'informe',
   title: 'Informe Ingresos'
 })
+
+const { pageSections } = useInformeLayout()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const data = ref<any>(null)
+
+// Filtros
+const filters = ref({
+  fecha_desde: null as string | null,
+  fecha_hasta: null as string | null,
+  incluir_anulados: false,
+  granularidad: 'dia'
+})
+
+// Filtros avanzados con checkboxes
+const tiposSeleccionados = ref({
+  uva: false,
+  mojado: false,
+  oreado: false,
+  verde: false
+})
+
+const estadosSeleccionados = ref({
+  pagado: false,
+  pendiente: false
+})
+
+// Computed para convertir checkboxes a arrays
+const tiposArray = computed(() => {
+  const tipos: string[] = []
+  if (tiposSeleccionados.value.uva) tipos.push('uva')
+  if (tiposSeleccionados.value.mojado) tipos.push('mojado')
+  if (tiposSeleccionados.value.oreado) tipos.push('oreado')
+  if (tiposSeleccionados.value.verde) tipos.push('verde')
+  return tipos
+})
+
+const estadosArray = computed(() => {
+  const estados: string[] = []
+  if (estadosSeleccionados.value.pagado) estados.push('pagado')
+  if (estadosSeleccionados.value.pendiente) estados.push('pendiente')
+  return estados
+})
+
+// Función para cargar datos
+async function loadData() {
+  loading.value = true
+  error.value = null
+
+  try {
+    const payload = {
+      fecha_desde: filters.value.fecha_desde,
+      fecha_hasta: filters.value.fecha_hasta,
+      incluir_anulados: filters.value.incluir_anulados,
+      cliente_ids: [], // TODO: implementar selector de clientes
+      tipos: tiposArray.value,
+      estados: estadosArray.value,
+      ubicaciones: [], // TODO: implementar selector de ubicaciones
+      calidades: [], // TODO: implementar selector de calidades
+      granularidad: filters.value.granularidad
+    }
+
+    console.log('[Informe] Cargando datos con filtros:', payload)
+    const result = await $fetch('/api/metabase/informe', {
+      method: 'POST',
+      body: payload
+    })
+
+    data.value = result
+    console.log('[Informe] Datos cargados:', result)
+  } catch (e: any) {
+    error.value = e.message || 'Error al cargar datos del informe'
+    console.error('[Informe] Error:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Función para aplicar filtros
+function applyFilters() {
+  loadData()
+}
+
+// Cargar datos al montar
+onMounted(() => {
+  loadData()
+})
 </script>