From 2f25391bfd3145437442bb5adb839097f00ab9d0 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 6 Nov 2025 13:40:27 -0600
Subject: [PATCH] Feat: Implementar frontend completo del Informe de Comercios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Crear página principal /informe-comercios con todos los estados (loading, error, initial, main)
- Implementar componente TotalesMonetariosComercio con distribución de pagos y gráficas
- Implementar componente TotalesPesoComercio con totales por tipo de café
- Implementar componente TablaComerciosResumen con paginación y exportación
- Agregar navegación en sidebar para Informe de Comercios con icono receipt
- Integrar filtros avanzados (fechas, clientes, ubicaciones, tipos)
- Incluir sistema de alertas para cambios pendientes y comercios anulados
- Agregar funciones de copiar a texto/JSON en todos los componentes
---
 .../app/components/TablaComerciosResumen.vue  | 289 ++++++++++
 .../components/TotalesMonetariosComercio.vue  | 224 ++++++++
 .../app/components/TotalesPesoComercio.vue    | 237 ++++++++
 nuxt4-app/app/components/app/AppSidebar.vue   |   6 +
 nuxt4-app/app/pages/informe-comercios.vue     | 518 ++++++++++++++++++
 5 files changed, 1274 insertions(+)
 create mode 100644 nuxt4-app/app/components/TablaComerciosResumen.vue
 create mode 100644 nuxt4-app/app/components/TotalesMonetariosComercio.vue
 create mode 100644 nuxt4-app/app/components/TotalesPesoComercio.vue
 create mode 100644 nuxt4-app/app/pages/informe-comercios.vue

diff --git a/nuxt4-app/app/components/TablaComerciosResumen.vue b/nuxt4-app/app/components/TablaComerciosResumen.vue
new file mode 100644
index 0000000..7a09c4e
--- /dev/null
+++ b/nuxt4-app/app/components/TablaComerciosResumen.vue
@@ -0,0 +1,289 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-xl font-bold brand-section-title">Lista de Comercios</h2>
+          <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+            Detalles completos de {{ comercios?.length || 0 }} comercios filtrados
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-copy"
+            @click="copiarTexto"
+            :disabled="!comercios || comercios.length === 0"
+          >
+            Copiar Texto
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-braces"
+            @click="copiarJSON"
+            :disabled="!comercios || comercios.length === 0"
+          >
+            Copiar JSON
+          </UButton>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="comercios && comercios.length > 0" class="overflow-x-auto max-h-[600px] overflow-y-auto">
+      <table class="w-full text-sm">
+        <thead class="sticky top-0 bg-[var(--brand-surface)] z-10">
+          <tr class="border-b border-[var(--brand-border)]">
+            <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">ID</th>
+            <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Fecha</th>
+            <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Cliente</th>
+            <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Total L</th>
+            <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">QQ Seco</th>
+            <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Precio/QQ</th>
+            <th class="text-center py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Ingresos</th>
+            <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Distribución</th>
+            <th class="text-center py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Estado</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="comercio in paginatedComercios"
+            :key="comercio.id"
+            class="border-b border-[var(--brand-border)]/50 hover:bg-[var(--brand-surface)] transition-colors"
+            :class="{ 'opacity-60': comercio.fecha_anulado }"
+          >
+            <td class="py-2 px-2 text-[var(--brand-text-muted)]">{{ comercio.id }}</td>
+            <td class="py-2 px-2 text-[var(--brand-text)]">
+              {{ comercio.created_at ? formatDate(comercio.created_at) : '-' }}
+            </td>
+            <td class="py-2 px-2 text-[var(--brand-text)]">
+              <div class="flex flex-col">
+                <span class="font-medium">{{ comercio.cliente_nombre || '-' }}</span>
+                <span v-if="comercio.cliente_ubicacion" class="text-xs text-[var(--brand-text-muted)]">
+                  {{ comercio.cliente_ubicacion }}
+                </span>
+              </div>
+            </td>
+            <td class="py-2 px-2 text-right font-semibold text-[var(--brand-primary)]">
+              L {{ formatNumber(comercio.totalLempiras) }}
+            </td>
+            <td class="py-2 px-2 text-right text-[var(--brand-text)]">
+              {{ formatNumber(comercio.totalSeco) }} QQ
+            </td>
+            <td class="py-2 px-2 text-right text-[var(--brand-text)]">
+              L {{ formatNumber(calcularPrecioPorQQ(comercio)) }}
+            </td>
+            <td class="py-2 px-2 text-center">
+              <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30">
+                {{ comercio.num_ingresos || 0 }}
+              </span>
+            </td>
+            <td class="py-2 px-2">
+              <div v-if="comercio.distribucionPago" class="flex flex-col gap-0.5 text-xs">
+                <span v-if="getDistribucion(comercio.distribucionPago, 'efectivo') > 0" class="text-green-400">
+                  💵 {{ formatNumber(getDistribucion(comercio.distribucionPago, 'efectivo')) }}
+                </span>
+                <span v-if="getDistribucion(comercio.distribucionPago, 'deposito') > 0" class="text-blue-400">
+                  🏦 {{ formatNumber(getDistribucion(comercio.distribucionPago, 'deposito')) }}
+                </span>
+                <span v-if="getDistribucion(comercio.distribucionPago, 'cheque') > 0" class="text-purple-400">
+                  📝 {{ formatNumber(getDistribucion(comercio.distribucionPago, 'cheque')) }}
+                </span>
+              </div>
+            </td>
+            <td class="py-2 px-2 text-center">
+              <span
+                v-if="comercio.fecha_anulado"
+                class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
+                style="color: var(--status-anulado); background-color: rgb(from var(--status-anulado) r g b / 0.1); border-color: rgb(from var(--status-anulado) r g b / 0.3);"
+              >
+                Anulado
+              </span>
+              <span
+                v-else
+                class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
+                style="color: var(--status-pagado); background-color: rgb(from var(--status-pagado) r g b / 0.1); border-color: rgb(from var(--status-pagado) r g b / 0.3);"
+              >
+                Activo
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-else class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
+      No hay comercios disponibles con los filtros actuales
+    </div>
+
+    <!-- Paginación -->
+    <template #footer>
+      <div v-if="comercios && comercios.length > pageSize" class="flex items-center justify-between">
+        <div class="text-xs text-[var(--brand-text-muted)]">
+          Mostrando {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, comercios.length) }} de {{ comercios.length }} comercios
+        </div>
+        <div class="flex items-center gap-2">
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-chevron-left"
+            :disabled="currentPage === 1"
+            @click="currentPage--"
+          >
+            Anterior
+          </UButton>
+          <span class="text-xs text-[var(--brand-text-muted)]">
+            Página {{ currentPage }} de {{ totalPages }}
+          </span>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="soft"
+            icon="i-lucide-chevron-right"
+            :disabled="currentPage === totalPages"
+            @click="currentPage++"
+          >
+            Siguiente
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  comercios: Array<{
+    id: number
+    created_at: string
+    cliente_id: number
+    cliente_nombre: string
+    cliente_cedula?: string
+    cliente_ubicacion?: string
+    cliente_telefono?: string
+    totalLempiras: number
+    totalSeco: number
+    distribucionPago: any
+    observacion?: string
+    fecha_anulado?: string
+    fecha_retencion?: string
+    retencion_id?: number
+    num_ingresos?: number
+  }>
+  contadores?: {
+    total_comercios?: number
+    comercios_filtrados?: number
+    total_clientes?: number
+    clientes_con_comercios_filtrados?: number
+  }
+  rangoLegible: string
+  lastUpdated: string
+}>()
+
+// Paginación
+const currentPage = ref(1)
+const pageSize = 50
+
+const totalPages = computed(() => {
+  return Math.ceil((props.comercios?.length || 0) / pageSize)
+})
+
+const paginatedComercios = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  const end = start + pageSize
+  return props.comercios?.slice(start, end) || []
+})
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('es-ES', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+}
+
+const formatNumber = (value: number) => {
+  if (!value && value !== 0) return '0.00'
+  return new Intl.NumberFormat('es-HN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
+const calcularPrecioPorQQ = (comercio: any) => {
+  if (!comercio.totalSeco || comercio.totalSeco === 0) return 0
+  return comercio.totalLempiras / comercio.totalSeco
+}
+
+const getDistribucion = (distribucionPago: any, tipo: string) => {
+  if (!distribucionPago) return 0
+
+  // Si es string JSON, parsear
+  if (typeof distribucionPago === 'string') {
+    try {
+      const parsed = JSON.parse(distribucionPago)
+      return parsed[tipo] || 0
+    } catch {
+      return 0
+    }
+  }
+
+  // Si ya es objeto
+  return distribucionPago[tipo] || 0
+}
+
+async function copiarTexto() {
+  if (!props.comercios || props.comercios.length === 0) return
+
+  const footer = `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📊 RESUMEN
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📅 Rango: ${props.rangoLegible}
+📦 Comercios: ${props.contadores?.comercios_filtrados || 0} de ${props.contadores?.total_comercios || 0} registros
+👥 Clientes: ${props.contadores?.clientes_con_comercios_filtrados || 0} de ${props.contadores?.total_clientes || 0} clientes
+🕐 Generado: ${props.lastUpdated}`
+
+  const texto = `📊 LISTA DE COMERCIOS - ${props.comercios.length} registros
+Rango: ${props.rangoLegible}
+Generado: ${props.lastUpdated}
+
+${props.comercios.map((com, idx) => {
+  const efectivo = getDistribucion(com.distribucionPago, 'efectivo')
+  const deposito = getDistribucion(com.distribucionPago, 'deposito')
+  const cheque = getDistribucion(com.distribucionPago, 'cheque')
+
+  return `
+${idx + 1}. ID: ${com.id}
+   📅 Fecha: ${formatDate(com.created_at)}
+   👤 Cliente: ${com.cliente_nombre || '-'}
+   📍 Ubicación: ${com.cliente_ubicacion || '-'}
+   💰 Total: L ${formatNumber(com.totalLempiras)}
+   ⚖️ QQ Seco: ${formatNumber(com.totalSeco)} QQ
+   💵 Precio/QQ: L ${formatNumber(calcularPrecioPorQQ(com))}
+   📦 Ingresos: ${com.num_ingresos || 0}
+   💳 Distribución:
+      ${efectivo > 0 ? `Efectivo: L ${formatNumber(efectivo)}` : ''}
+      ${deposito > 0 ? `Depósito: L ${formatNumber(deposito)}` : ''}
+      ${cheque > 0 ? `Cheque: L ${formatNumber(cheque)}` : ''}
+   📍 Estado: ${com.fecha_anulado ? 'Anulado' : 'Activo'}
+   ${com.observacion ? `📝 Obs: ${com.observacion}` : ''}
+`}).join('\n')}${footer}`
+
+  await navigator.clipboard.writeText(texto)
+  alert('✅ Lista de comercios copiada al portapapeles')
+}
+
+async function copiarJSON() {
+  if (!props.comercios || props.comercios.length === 0) return
+
+  const json = JSON.stringify(props.comercios, null, 2)
+  await navigator.clipboard.writeText(json)
+  alert('✅ JSON copiado al portapapeles')
+}
+</script>
diff --git a/nuxt4-app/app/components/TotalesMonetariosComercio.vue b/nuxt4-app/app/components/TotalesMonetariosComercio.vue
new file mode 100644
index 0000000..cbebef8
--- /dev/null
+++ b/nuxt4-app/app/components/TotalesMonetariosComercio.vue
@@ -0,0 +1,224 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <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">
+      <!-- Inversión Total y Métricas Principales -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Inversión Total</h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <MetricBox label="Total Invertido" :value="formatCurrency(data.total_invertido)" color="green" />
+          <MetricBox label="Total QQ Seco" :value="`${formatNumber(data.total_qq_seco)} QQ`" />
+          <MetricBox label="Precio Promedio/QQ" :value="formatCurrency(data.precio_promedio_por_qq)" color="blue" />
+          <MetricBox label="Número de Comercios" :value="data.num_comercios?.toString() || '0'" />
+        </div>
+      </div>
+
+      <!-- Distribución de Pagos -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Distribución de Pagos</h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Efectivo</div>
+            <div class="text-lg font-bold text-green-400">
+              {{ formatCurrency(data.total_efectivo) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              {{ calcularPorcentaje(data.total_efectivo, data.total_invertido) }}%
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Depósito</div>
+            <div class="text-lg font-bold text-blue-400">
+              {{ formatCurrency(data.total_deposito) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              {{ calcularPorcentaje(data.total_deposito, data.total_invertido) }}%
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Cheque</div>
+            <div class="text-lg font-bold text-purple-400">
+              {{ formatCurrency(data.total_cheque) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              {{ calcularPorcentaje(data.total_cheque, data.total_invertido) }}%
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Verificación</div>
+            <div class="text-lg font-bold" :class="totalMatch ? 'text-green-500' : 'text-red-500'">
+              {{ formatCurrency(totalDistribucion) }}
+            </div>
+            <div class="text-xs mt-1" :class="totalMatch ? 'text-green-500' : 'text-red-500'">
+              {{ totalMatch ? '✓ Coincide' : '✗ No coincide' }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Gráfica de Distribución -->
+      <div v-if="showChart" class="mt-6">
+        <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3">Visualización de Distribución</h4>
+        <div class="space-y-2">
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Efectivo</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full bg-green-500/60 flex items-center justify-end px-2 transition-all duration-500"
+                :style="{ width: `${calcularPorcentaje(data.total_efectivo, data.total_invertido)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.total_efectivo, data.total_invertido) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_efectivo) }}</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Depósito</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full bg-blue-500/60 flex items-center justify-end px-2 transition-all duration-500"
+                :style="{ width: `${calcularPorcentaje(data.total_deposito, data.total_invertido)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.total_deposito, data.total_invertido) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_deposito) }}</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Cheque</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full bg-purple-500/60 flex items-center justify-end px-2 transition-all duration-500"
+                :style="{ width: `${calcularPorcentaje(data.total_cheque, data.total_invertido)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.total_cheque, data.total_invertido) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_cheque) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    total_invertido: number
+    total_qq_seco: number
+    precio_promedio_por_qq: number
+    total_efectivo: number
+    total_deposito: number
+    total_cheque: number
+    num_comercios: number
+  }
+  contadores?: {
+    total_comercios?: number
+    comercios_filtrados?: number
+    total_clientes?: number
+    clientes_con_comercios_filtrados?: number
+  }
+  rangoLegible: string
+  lastUpdated: string
+}>()
+
+const showChart = ref(true)
+
+// Computed
+const totalDistribucion = computed(() => {
+  return (props.data.total_efectivo || 0) +
+         (props.data.total_deposito || 0) +
+         (props.data.total_cheque || 0)
+})
+
+const totalMatch = computed(() => {
+  const diff = Math.abs(totalDistribucion.value - (props.data.total_invertido || 0))
+  return diff < 0.01 // Tolerancia de 1 centavo por redondeo
+})
+
+const formatCurrency = (value: number) => {
+  if (!value) return 'L 0.00'
+  return new Intl.NumberFormat('es-HN', {
+    style: 'currency',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value).replace('HNL', 'L')
+}
+
+const formatNumber = (value: number) => {
+  if (!value) return '0.00'
+  return new Intl.NumberFormat('es-HN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
+const calcularPorcentaje = (parte: number, total: number): string => {
+  if (!total || total === 0) return '0.0'
+  const porcentaje = (parte / total) * 100
+  return porcentaje.toFixed(1)
+}
+
+async function copiarTexto() {
+  const footer = `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📊 RESUMEN
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📅 Rango: ${props.rangoLegible}
+📦 Comercios: ${props.contadores?.comercios_filtrados || 0} de ${props.contadores?.total_comercios || 0} registros
+👥 Clientes: ${props.contadores?.clientes_con_comercios_filtrados || 0} de ${props.contadores?.total_clientes || 0} clientes
+🕐 Generado: ${props.lastUpdated}`
+
+  const texto = `💰 TOTALES MONETARIOS DE COMERCIOS
+
+💵 INVERSIÓN TOTAL:
+   Total Invertido: ${formatCurrency(props.data.total_invertido)}
+   Total QQ Seco: ${formatNumber(props.data.total_qq_seco)} QQ
+   Precio Promedio/QQ: ${formatCurrency(props.data.precio_promedio_por_qq)}
+   Número de Comercios: ${props.data.num_comercios}
+
+💳 DISTRIBUCIÓN DE PAGOS:
+   Efectivo: ${formatCurrency(props.data.total_efectivo)} (${calcularPorcentaje(props.data.total_efectivo, props.data.total_invertido)}%)
+   Depósito: ${formatCurrency(props.data.total_deposito)} (${calcularPorcentaje(props.data.total_deposito, props.data.total_invertido)}%)
+   Cheque: ${formatCurrency(props.data.total_cheque)} (${calcularPorcentaje(props.data.total_cheque, props.data.total_invertido)}%)
+
+   Total Distribución: ${formatCurrency(totalDistribucion.value)}
+   Verificación: ${totalMatch.value ? '✓ Coincide con total invertido' : '✗ No coincide con total invertido'}${footer}`
+
+  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/TotalesPesoComercio.vue b/nuxt4-app/app/components/TotalesPesoComercio.vue
new file mode 100644
index 0000000..90a91ea
--- /dev/null
+++ b/nuxt4-app/app/components/TotalesPesoComercio.vue
@@ -0,0 +1,237 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold brand-section-title">Totales de Peso</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">
+      <!-- Totales por Tipo de Café -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Quintales Seco por Tipo</h3>
+        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
+          <!-- Uva -->
+          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
+               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(139, 69, 19, 0.1) 100%);">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-uva, #8B4513);"></div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Uva</div>
+            </div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.qq_seco_uva) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ Seco
+            </div>
+          </div>
+
+          <!-- Mojado -->
+          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
+               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(30, 144, 255, 0.1) 100%);">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-mojado, #1E90FF);"></div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Mojado</div>
+            </div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.qq_seco_mojado) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ Seco
+            </div>
+          </div>
+
+          <!-- Oreado -->
+          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
+               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(255, 140, 0, 0.1) 100%);">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-oreado, #FF8C00);"></div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Oreado</div>
+            </div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.qq_seco_oreado) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ Seco
+            </div>
+          </div>
+
+          <!-- Verde -->
+          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
+               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(34, 139, 34, 0.1) 100%);">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-verde, #228B22);"></div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Verde</div>
+            </div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.qq_verde) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ
+            </div>
+          </div>
+
+          <!-- Total -->
+          <div class="rounded-lg border-2 border-[var(--brand-primary)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-2">Total</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
+              {{ formatNumber(data.total_qq_seco) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ Seco
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Visualización de Distribución por Tipo -->
+      <div v-if="showChart" class="mt-6">
+        <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3">Distribución de Peso por Tipo</h4>
+        <div class="space-y-2">
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Uva</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full flex items-center justify-end px-2 transition-all duration-500"
+                style="background-color: var(--coffee-uva, #8B4513);"
+                :style="{ width: `${calcularPorcentaje(data.qq_seco_uva)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.qq_seco_uva) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_seco_uva) }} QQ</span>
+          </div>
+
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Mojado</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full flex items-center justify-end px-2 transition-all duration-500"
+                style="background-color: var(--coffee-mojado, #1E90FF);"
+                :style="{ width: `${calcularPorcentaje(data.qq_seco_mojado)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.qq_seco_mojado) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_seco_mojado) }} QQ</span>
+          </div>
+
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Oreado</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full flex items-center justify-end px-2 transition-all duration-500"
+                style="background-color: var(--coffee-oreado, #FF8C00);"
+                :style="{ width: `${calcularPorcentaje(data.qq_seco_oreado)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.qq_seco_oreado) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_seco_oreado) }} QQ</span>
+          </div>
+
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Verde</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full flex items-center justify-end px-2 transition-all duration-500"
+                style="background-color: var(--coffee-verde, #228B22);"
+                :style="{ width: `${calcularPorcentaje(data.qq_verde)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.qq_verde) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_verde) }} QQ</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    qq_seco_uva: number
+    qq_seco_mojado: number
+    qq_seco_oreado: number
+    qq_verde: number
+    total_qq_seco: number
+  }
+  contadores?: {
+    total_comercios?: number
+    comercios_filtrados?: number
+    total_clientes?: number
+    clientes_con_comercios_filtrados?: number
+  }
+  rangoLegible: string
+  lastUpdated: string
+}>()
+
+const showChart = ref(true)
+
+const formatNumber = (value: number) => {
+  if (!value) return '0.00'
+  return new Intl.NumberFormat('es-HN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
+const calcularPorcentaje = (parte: number): string => {
+  if (!props.data.total_qq_seco || props.data.total_qq_seco === 0) return '0.0'
+  const porcentaje = (parte / props.data.total_qq_seco) * 100
+  return porcentaje.toFixed(1)
+}
+
+async function copiarTexto() {
+  const footer = `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📊 RESUMEN
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📅 Rango: ${props.rangoLegible}
+📦 Comercios: ${props.contadores?.comercios_filtrados || 0} de ${props.contadores?.total_comercios || 0} registros
+👥 Clientes: ${props.contadores?.clientes_con_comercios_filtrados || 0} de ${props.contadores?.total_clientes || 0} clientes
+🕐 Generado: ${props.lastUpdated}`
+
+  const texto = `⚖️ TOTALES DE PESO POR TIPO
+
+☕ QUINTALES SECO POR TIPO:
+   Uva: ${formatNumber(props.data.qq_seco_uva)} QQ (${calcularPorcentaje(props.data.qq_seco_uva)}%)
+   Mojado: ${formatNumber(props.data.qq_seco_mojado)} QQ (${calcularPorcentaje(props.data.qq_seco_mojado)}%)
+   Oreado: ${formatNumber(props.data.qq_seco_oreado)} QQ (${calcularPorcentaje(props.data.qq_seco_oreado)}%)
+   Verde: ${formatNumber(props.data.qq_verde)} QQ (${calcularPorcentaje(props.data.qq_verde)}%)
+
+📊 TOTAL:
+   Total QQ Seco: ${formatNumber(props.data.total_qq_seco)} QQ${footer}`
+
+  await navigator.clipboard.writeText(texto)
+  alert('✅ Totales de Peso 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/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index 41dab94..0efab66 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -291,6 +291,12 @@ const navigationPrimary = computed<NavigationMenuItem[]>(() => [
     to: '/informe-ingresos',
     active: route.path === '/informe-ingresos'
   },
+  {
+    label: 'Informe Comercios',
+    icon: 'i-lucide-receipt',
+    to: '/informe-comercios',
+    active: route.path === '/informe-comercios'
+  },
   {
     label: 'Comparativa Cosechas',
     icon: 'i-lucide-calendar-range',
diff --git a/nuxt4-app/app/pages/informe-comercios.vue b/nuxt4-app/app/pages/informe-comercios.vue
new file mode 100644
index 0000000..344591d
--- /dev/null
+++ b/nuxt4-app/app/pages/informe-comercios.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <!-- Loading State -->
+    <UCard v-if="loading && !data" class="brand-card border border-transparent">
+      <div class="flex flex-col items-center justify-center gap-4 py-10 text-[var(--brand-text-muted)]">
+        <div class="flex items-center gap-3">
+          <span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[var(--brand-primary-strong)] border-t-transparent align-middle" aria-hidden="true" />
+          <span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="rounded-lg border border-red-500/40 bg-red-500/18 p-4 text-sm text-red-200">
+      <p>Error al cargar datos: {{ error }}</p>
+      <UButton class="mt-4" :loading="loading" :disabled="loading" @click="loadData" color="primary">
+        Reintentar
+      </UButton>
+    </div>
+
+    <!-- Initial State - No data loaded yet -->
+    <template v-else-if="!data && !loading">
+      <!-- Card de Filtros -->
+      <UCard class="brand-card border border-transparent">
+        <template #header>
+          <div class="flex flex-col gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Aplicados a <code>created_at</code> de comercios
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
+              </div>
+            </div>
+
+            <!-- Alerta roja cuando incluye anulados -->
+            <UAlert
+              v-if="includeAnulados"
+              color="error"
+              variant="solid"
+              icon="i-lucide-alert-triangle"
+              title="Incluir anulados activado"
+              description="Los cálculos incluyen comercios anulados. Esto puede afectar los resultados financieros."
+            />
+          </div>
+        </template>
+
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="onUpdatePreset"
+          @update:fecha-desde="onUpdateFechaDesde"
+          @update:fecha-hasta="onUpdateFechaHasta"
+        />
+
+        <!-- Filtros Avanzados -->
+        <div class="mt-6 space-y-4">
+          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
+
+          <!-- Selector de Clientes -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Clientes</label>
+            <ClienteMultiSelector
+              :selected-ids="selectedClienteIds"
+              @update:selected-ids="selectedClienteIds = $event"
+            />
+          </div>
+
+          <!-- Selector de Ubicaciones -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Ubicaciones</label>
+            <UbicacionMultiSelector
+              :selected-ubicaciones="selectedUbicaciones"
+              :ubicaciones="opcionesFiltros.ubicaciones"
+              @update:selected-ubicaciones="selectedUbicaciones = $event"
+            />
+          </div>
+
+          <!-- Selector de Tipos de Café -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
+            <SimpleMultiSelector
+              :selected-items="selectedTipos"
+              :items="opcionesFiltros.tipos"
+              icon="i-lucide-coffee"
+              placeholder="Todos los tipos"
+              item-label="tipo"
+              items-label="tipos"
+              @update:selected-items="selectedTipos = $event"
+            />
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
+            <div class="text-xs text-[var(--brand-text-muted)]">
+              Rango activo: {{ rangoLegible }}
+            </div>
+            <UButton
+              :loading="loading"
+              :disabled="loading"
+              :ui="{ base: 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50 disabled:cursor-not-allowed' }"
+              size="sm"
+              @click="loadData"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+              </template>
+              Actualizar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Mensaje de bienvenida -->
+      <UCard class="brand-card border border-transparent">
+        <div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
+          <div class="rounded-full bg-[var(--brand-primary-strong)]/10 p-6">
+            <UIcon name="i-lucide-receipt" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
+              Informe de Comercios
+            </h3>
+            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
+              Configura los filtros y haz clic en el botón "Actualizar" para cargar el informe detallado de comercios
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Main Content -->
+    <template v-else-if="data">
+      <!-- Card de Filtros -->
+      <UCard
+        :class="[
+          'brand-card border transition-all duration-300',
+          hasPendingChanges
+            ? 'border-yellow-500/60'
+            : 'border-transparent'
+        ]"
+      >
+        <template #header>
+          <div class="flex flex-col gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Aplicados a <code>created_at</code> de comercios
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
+              </div>
+            </div>
+
+            <!-- Alerta de cambios pendientes -->
+            <UAlert
+              v-if="hasPendingChanges"
+              color="warning"
+              variant="soft"
+              class="py-2"
+            >
+              <template #title>
+                <div class="flex items-center justify-between gap-3 text-sm">
+                  <div class="flex items-center gap-2">
+                    <span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
+                    <span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
+                  </div>
+                </div>
+              </template>
+            </UAlert>
+
+            <!-- Alerta roja cuando incluye anulados -->
+            <UAlert
+              v-if="includeAnulados"
+              color="error"
+              variant="solid"
+              icon="i-lucide-alert-triangle"
+              title="Incluir anulados activado"
+              description="Los cálculos incluyen comercios anulados. Esto puede afectar los resultados financieros."
+            />
+          </div>
+        </template>
+
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="onUpdatePreset"
+          @update:fecha-desde="onUpdateFechaDesde"
+          @update:fecha-hasta="onUpdateFechaHasta"
+        />
+
+        <!-- Filtros Avanzados -->
+        <div class="mt-6 space-y-4">
+          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
+
+          <!-- Selector de Clientes -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Clientes</label>
+            <ClienteMultiSelector
+              :selected-ids="selectedClienteIds"
+              @update:selected-ids="selectedClienteIds = $event"
+            />
+          </div>
+
+          <!-- Selector de Ubicaciones -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Ubicaciones</label>
+            <UbicacionMultiSelector
+              :selected-ubicaciones="selectedUbicaciones"
+              :ubicaciones="opcionesFiltros.ubicaciones"
+              @update:selected-ubicaciones="selectedUbicaciones = $event"
+            />
+          </div>
+
+          <!-- Selector de Tipos de Café -->
+          <div>
+            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
+            <SimpleMultiSelector
+              :selected-items="selectedTipos"
+              :items="opcionesFiltros.tipos"
+              icon="i-lucide-coffee"
+              placeholder="Todos los tipos"
+              item-label="tipo"
+              items-label="tipos"
+              @update:selected-items="selectedTipos = $event"
+            />
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
+            <div class="text-xs text-[var(--brand-text-muted)]">
+              Rango activo: {{ rangoLegible }} · Comercios filtrados: {{ data.contadores.comercios_filtrados || 0 }}/{{ data.contadores.total_comercios || 0 }}
+            </div>
+            <UButton
+              :loading="loading"
+              :disabled="loading"
+              :ui="{
+                base: hasPendingChanges
+                  ? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
+                  : 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50 disabled:cursor-not-allowed'
+              }"
+              size="sm"
+              @click="loadData"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+              </template>
+              Actualizar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Contadores -->
+      <UCard v-if="data.contadores" class="brand-card border border-transparent">
+        <template #header>
+          <h2 class="text-xl font-bold brand-section-title">Estadísticas del Filtro</h2>
+        </template>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Comercios Filtrados</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
+              {{ data.contadores.comercios_filtrados || 0 }}
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Comercios</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ data.contadores.total_comercios || 0 }}
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Clientes Activos</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
+              {{ data.contadores.clientes_con_comercios_filtrados || 0 }}
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Clientes</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ data.contadores.total_clientes || 0 }}
+            </div>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="text-xs text-[var(--brand-text-muted)]">
+            Última actualización: {{ lastUpdated }}
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Secciones de Totales -->
+      <TotalesMonetariosComercio
+        v-if="data.totalesMonetarios"
+        :data="data.totalesMonetarios"
+        :contadores="data.contadores"
+        :rango-legible="rangoLegible"
+        :last-updated="lastUpdated"
+      />
+
+      <TotalesPesoComercio
+        v-if="data.totalesPeso"
+        :data="data.totalesPeso"
+        :contadores="data.contadores"
+        :rango-legible="rangoLegible"
+        :last-updated="lastUpdated"
+      />
+
+      <!-- Lista de Comercios -->
+      <TablaComerciosResumen
+        v-if="data.listaComercio"
+        :comercios="data.listaComercio"
+        :contadores="data.contadores"
+        :rango-legible="rangoLegible"
+        :last-updated="lastUpdated"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useInformeLayout } from '~/composables/useInformeLayout'
+
+// Define page metadata
+definePageMeta({
+  layout: 'informe',
+  title: 'Informe Comercios'
+})
+
+// Get page sections from layout
+const { pageSections } = useInformeLayout()
+
+// Reactive state
+const data = ref<any>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const lastUpdated = ref<string>('')
+
+// Filtros básicos
+const includeAnulados = ref(false)
+
+type PresetValue =
+  | '' | 'custom' | 'hoy' | 'semana' | 'mes' | 'ytd'
+  | 'cosecha-20-21' | 'cosecha-21-22' | 'cosecha-22-23'
+  | 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26'
+
+const selectedPreset = ref<PresetValue>('hoy')
+const fechaDesde = ref<string | null>(null)
+const fechaHasta = ref<string | null>(null)
+
+// Filtros avanzados
+const selectedClienteIds = ref<number[]>([])
+const selectedUbicaciones = ref<string[]>([])
+const selectedTipos = ref<string[]>([])
+
+// Opciones de filtros disponibles (desde Metabase)
+const opcionesFiltros = ref({
+  ubicaciones: [] as string[],
+  tipos: [] as string[]
+})
+
+// Filtros aplicados (los que se usaron en la última carga de datos)
+const appliedFilters = ref<{
+  fechaDesde: string | null
+  fechaHasta: string | null
+  includeAnulados: boolean
+  clienteIds: number[]
+  ubicaciones: string[]
+  tipos: string[]
+} | null>(null)
+
+// Computed
+const rangoLegible = computed(() => {
+  if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
+  const f = fechaDesde.value ?? '—'
+  const t = fechaHasta.value ?? '—'
+  return `${f} → ${t}`
+})
+
+// Detectar si hay cambios pendientes sin aplicar
+const hasPendingChanges = computed(() => {
+  // Si no hay datos cargados, no hay cambios pendientes
+  if (!appliedFilters.value) return false
+
+  // Comparar filtros actuales con los aplicados
+  return (
+    fechaDesde.value !== appliedFilters.value.fechaDesde ||
+    fechaHasta.value !== appliedFilters.value.fechaHasta ||
+    includeAnulados.value !== appliedFilters.value.includeAnulados ||
+    JSON.stringify(selectedClienteIds.value) !== JSON.stringify(appliedFilters.value.clienteIds) ||
+    JSON.stringify(selectedUbicaciones.value) !== JSON.stringify(appliedFilters.value.ubicaciones) ||
+    JSON.stringify(selectedTipos.value) !== JSON.stringify(appliedFilters.value.tipos)
+  )
+})
+
+// Methods
+async function loadData() {
+  // Prevenir múltiples peticiones simultáneas
+  if (loading.value) {
+    console.warn('[InformeComercio] Ya hay una petición en proceso, ignorando nueva solicitud')
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const payload = {
+      fecha_desde: fechaDesde.value,
+      fecha_hasta: fechaHasta.value,
+      incluir_anulados: includeAnulados.value,
+      cliente_ids: selectedClienteIds.value,
+      tipos: selectedTipos.value,
+      comercio_ids: [],
+      granularidad: 'dia' // Default granularity
+    }
+
+    console.log('[InformeComercio] Cargando datos con filtros:', payload)
+    const result = await $fetch('/api/metabase/informe-comercios', {
+      method: 'POST',
+      body: payload
+    })
+
+    data.value = result
+    lastUpdated.value = new Date().toLocaleString('es-ES', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+
+    // Guardar los filtros aplicados
+    appliedFilters.value = {
+      fechaDesde: fechaDesde.value,
+      fechaHasta: fechaHasta.value,
+      includeAnulados: includeAnulados.value,
+      clienteIds: [...selectedClienteIds.value],
+      ubicaciones: [...selectedUbicaciones.value],
+      tipos: [...selectedTipos.value]
+    }
+
+    console.log('[InformeComercio] Datos cargados:', result)
+  } catch (err: any) {
+    error.value = err.message || 'Error al cargar datos del informe de comercios'
+    console.error('[InformeComercio] Error loading data:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onToggleAnulados(newValue: boolean | 'indeterminate') {
+  if (newValue === true) {
+    // Pedir confirmación al activar
+    const confirmed = confirm(
+      '⚠️ ADVERTENCIA\n\n' +
+      'Está a punto de incluir comercios ANULADOS en los cálculos.\n\n' +
+      'Esto puede afectar significativamente los resultados financieros y métricas.\n\n' +
+      '¿Está seguro de que desea continuar?'
+    )
+
+    if (!confirmed) {
+      // Si cancela, revertir el cambio
+      includeAnulados.value = false
+      return
+    }
+  }
+
+  // NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
+}
+
+function onUpdatePreset(value: PresetValue) {
+  selectedPreset.value = value
+}
+
+function onUpdateFechaDesde(value: string | null) {
+  fechaDesde.value = value
+}
+
+function onUpdateFechaHasta(value: string | null) {
+  fechaHasta.value = value
+}
+
+// Cargar opciones de filtros desde el endpoint
+async function loadOpcionesFiltros() {
+  try {
+    // Por ahora usamos valores hardcoded, pero se podría hacer un endpoint específico
+    opcionesFiltros.value = {
+      ubicaciones: [], // Se cargará del endpoint cuando se ejecute la primera query
+      tipos: ['uva', 'verde', 'mojado', 'oreado']
+    }
+  } catch (error) {
+    console.error('[InformeComercio] Error loading opciones de filtros:', error)
+  }
+}
+
+// Inicializar preset por defecto sin cargar datos
+onMounted(async () => {
+  // Default preset: hoy
+  selectedPreset.value = 'hoy'
+
+  // Cargar opciones de filtros disponibles
+  await loadOpcionesFiltros()
+
+  // NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
+})
+</script>