From 2e58a16f4d3b407548676dd2b98c7fe5e989bbb2 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 17:24:20 -0600
Subject: [PATCH] =?UTF-8?q?Refactor:=20mejorar=20dise=C3=B1o=20de=20p?=
 =?UTF-8?q?=C3=A1gina=20informe-ingresos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios realizados:
- Eliminar cards innecesarias que envolvían componentes de métricas
  (TotalesMonetarios, TotalesIngresoCompra, TotalesVerde ya son cards)
- Actualizar estilo del contenedor de filtros al estilo de panorama facturador:
  * Usar clase 'brand-card' y bordes transparentes
  * Header con título y subtítulo estilizados
  * Checkbox 'Incluir anulados' en header
  * Inputs con variables CSS de brand
  * Footer con botón 'Actualizar' estilizado
  * Layout consistente con gap-8

Resultado: diseño más limpio, sin duplicación de cards y
estilo consistente entre páginas.
---
 nuxt4-app/app/pages/informe-ingresos.vue | 96 ++++++++++++------------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/nuxt4-app/app/pages/informe-ingresos.vue b/nuxt4-app/app/pages/informe-ingresos.vue
index 45f30fb..a8ba9d7 100644
--- a/nuxt4-app/app/pages/informe-ingresos.vue
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -1,60 +1,53 @@
 <template>
-  <div class="space-y-6">
+  <div class="flex flex-col gap-8">
     <!-- Filtros -->
-    <UCard>
+    <UCard class="brand-card border border-transparent">
       <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 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 ingresos de café
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <UCheckbox
+                v-model="filters.incluir_anulados"
+                label="Incluir anulados"
+              />
+            </div>
           </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">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <!-- Fecha Desde -->
         <div>
-          <label class="block text-sm font-medium mb-1">Fecha Desde</label>
+          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">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"
+            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
           />
         </div>
 
         <!-- Fecha Hasta -->
         <div>
-          <label class="block text-sm font-medium mb-1">Fecha Hasta</label>
+          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">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"
+            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
           />
         </div>
 
         <!-- Granularidad -->
         <div>
-          <label class="block text-sm font-medium mb-1">Granularidad</label>
+          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">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"
+            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
           >
             <option value="dia">Día</option>
             <option value="semana">Semana</option>
@@ -94,6 +87,26 @@
           </div>
         </template>
       </UAccordion>
+
+      <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)]">
+            Filtros aplicados al informe de ingresos
+          </div>
+          <UButton
+            :loading="loading"
+            :disabled="loading"
+            :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
+            size="sm"
+            @click="applyFilters"
+          >
+            <template #leading>
+              <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+            </template>
+            Actualizar
+          </UButton>
+        </div>
+      </template>
     </UCard>
 
     <!-- Error Display -->
@@ -112,30 +125,15 @@
     </div>
 
     <!-- Content -->
-    <div v-else-if="data" class="space-y-6">
+    <div v-else-if="data" class="flex flex-col gap-8">
       <!-- Totales Monetarios -->
-      <UCard v-if="pageSections.totalesCafe">
-        <template #header>
-          <h3 class="text-lg font-semibold">Totales Monetarios</h3>
-        </template>
-        <TotalesMonetarios :data="data.totalesMonetarios" />
-      </UCard>
+      <TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
 
       <!-- 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>
+      <TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
 
       <!-- 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>
+      <TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
 
       <!-- Contadores -->
       <UCard v-if="data.contadores">