sper mejoras de UI

nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue

@@ -1,138 +1,193 @@
 <template>
   <div class="flex flex-col gap-6">
     <!-- Fila 1: Selector de Clientes -->
-    <div class="flex flex-col gap-3">
-      <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide">
-        Clientes
-      </h3>
-      <ClienteSelector
-        :clientes="clientes"
-        :selected-ids="selectedClienteIds"
-        @update:selected-ids="emit('update:selectedClienteIds', $event)"
-      />
-      <UButton
-        v-if="selectedClienteIds.length > 0"
-        size="xs"
-        variant="ghost"
-        color="neutral"
-        @click="emit('update:selectedClienteIds', [])"
-        block
-      >
-        <template #leading>
-          <UIcon name="i-lucide-x" />
-        </template>
-        Limpiar selección
-      </UButton>
-    </div>
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div v-if="selectedClienteIds.length === 0" class="flex flex-col gap-3">
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide">
+          Clientes
+        </h3>
+        <ClienteSelector
+          :clientes="clientes"
+          :selected-ids="selectedClienteIds"
+          @update:selected-ids="emit('update:selectedClienteIds', $event)"
+        />
+      </div>
+    </Transition>
 
     <!-- Fila 2: Selector de Rango de Fechas -->
-    <div class="flex flex-col gap-3">
-      <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide">
-        Rango de Fechas
-      </h3>
-      <DateRangeSelector
-        :selected-preset="selectedPreset"
-        :fecha-desde="fechaDesde"
-        :fecha-hasta="fechaHasta"
-        @update:selected-preset="emit('update:selectedPreset', $event)"
-        @update:fecha-desde="emit('update:fechaDesde', $event)"
-        @update:fecha-hasta="emit('update:fechaHasta', $event)"
-      />
-      <UButton
-        v-if="fechaDesde || fechaHasta"
-        size="xs"
-        variant="ghost"
-        color="neutral"
-        @click="clearDates"
-        block
-      >
-        <template #leading>
-          <UIcon name="i-lucide-x" />
-        </template>
-        Limpiar fechas
-      </UButton>
-    </div>
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div v-if="!fechaDesde && !fechaHasta" class="flex flex-col gap-3">
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide">
+          Rango de Fechas
+        </h3>
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="emit('update:selectedPreset', $event)"
+          @update:fecha-desde="emit('update:fechaDesde', $event)"
+          @update:fecha-hasta="emit('update:fechaHasta', $event)"
+        />
+      </div>
+    </Transition>
 
     <!-- Fila 3: Filtros Avanzados (grid de 4 columnas) -->
-    <div class="flex flex-col gap-3">
+    <div v-if="hasAvailableAdvancedFilters" class="flex flex-col gap-3">
       <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide">
         Filtros Avanzados
       </h3>
       <div class="grid grid-cols-2 gap-3">
         <!-- Tipo de Café -->
-        <div class="flex flex-col gap-2">
-          <label class="text-xs text-[var(--brand-text-muted)]">Tipo</label>
-          <UInputMenu
-            v-model="selectedTipos"
-            :items="tiposOptions"
-            value-key="value"
-            multiple
-            placeholder="Todos"
-            size="xs"
-            icon="i-lucide-coffee"
-            class="w-full"
-          />
-        </div>
+        <Transition
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition-all duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="selectedTipos.length === 0" class="flex flex-col gap-2">
+            <label class="text-xs text-[var(--brand-text-muted)]">Tipo</label>
+            <UInputMenu
+              v-model="selectedTipos"
+              :items="tiposOptions"
+              value-key="value"
+              multiple
+              placeholder="Todos"
+              size="xs"
+              icon="i-lucide-coffee"
+              class="w-full"
+            />
+          </div>
+        </Transition>
 
         <!-- Estado -->
-        <div class="flex flex-col gap-2">
-          <label class="text-xs text-[var(--brand-text-muted)]">Estado</label>
-          <UInputMenu
-            v-model="selectedEstados"
-            :items="estadosOptions"
-            value-key="value"
-            multiple
-            placeholder="Todos"
-            size="xs"
-            icon="i-lucide-check-circle"
-            class="w-full"
-          />
-        </div>
+        <Transition
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition-all duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="selectedEstados.length === 0" class="flex flex-col gap-2">
+            <label class="text-xs text-[var(--brand-text-muted)]">Estado</label>
+            <UInputMenu
+              v-model="selectedEstados"
+              :items="estadosOptions"
+              value-key="value"
+              multiple
+              placeholder="Todos"
+              size="xs"
+              icon="i-lucide-check-circle"
+              class="w-full"
+            />
+          </div>
+        </Transition>
 
         <!-- Ubicación -->
-        <div class="flex flex-col gap-2">
-          <label class="text-xs text-[var(--brand-text-muted)]">Ubicación</label>
-          <UInputMenu
-            v-model="selectedUbicaciones"
-            :items="ubicacionesOptions"
-            value-key="value"
-            multiple
-            placeholder="Todas"
-            size="xs"
-            icon="i-lucide-map-pin"
-            class="w-full"
-          />
-        </div>
+        <Transition
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition-all duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="selectedUbicaciones.length === 0" class="flex flex-col gap-2">
+            <label class="text-xs text-[var(--brand-text-muted)]">Ubicación</label>
+            <UInputMenu
+              v-model="selectedUbicaciones"
+              :items="ubicacionesOptions"
+              value-key="value"
+              multiple
+              placeholder="Todas"
+              size="xs"
+              icon="i-lucide-map-pin"
+              class="w-full"
+            />
+          </div>
+        </Transition>
 
         <!-- Calidad -->
-        <div class="flex flex-col gap-2">
-          <label class="text-xs text-[var(--brand-text-muted)]">Calidad</label>
-          <UInputMenu
-            v-model="selectedCalidades"
-            :items="calidadesOptions"
-            value-key="value"
-            multiple
-            placeholder="Todas"
-            size="xs"
-            icon="i-lucide-star"
-            class="w-full"
-          />
-        </div>
+        <Transition
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition-all duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="selectedCalidades.length === 0" class="flex flex-col gap-2">
+            <label class="text-xs text-[var(--brand-text-muted)]">Calidad</label>
+            <UInputMenu
+              v-model="selectedCalidades"
+              :items="calidadesOptions"
+              value-key="value"
+              multiple
+              placeholder="Todas"
+              size="xs"
+              icon="i-lucide-star"
+              class="w-full"
+            />
+          </div>
+        </Transition>
       </div>
     </div>
 
     <!-- Checkbox de incluir anulados -->
-    <div class="flex flex-col gap-3">
-      <UCheckbox v-model="includeAnulados" label="Incluir anulados" size="sm" />
-      <UAlert
-        v-if="includeAnulados"
-        color="error"
-        variant="soft"
-        icon="i-lucide-alert-triangle"
-        title="Incluir anulados activado"
-        description="Los cálculos incluyen registros anulados."
-      />
-    </div>
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div v-if="!includeAnulados" class="flex flex-col gap-3">
+        <UCheckbox v-model="includeAnulados" label="Incluir anulados" size="sm" />
+      </div>
+    </Transition>
+
+    <!-- Botón "Sin filtros" -->
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div v-if="!noFilter && !hasAnyActiveFilter" class="flex flex-col gap-3">
+        <UButton
+          @click="handleNoFilter"
+          size="sm"
+          variant="outline"
+          color="neutral"
+          icon="i-lucide-ban"
+          block
+        >
+          Sin filtros
+        </UButton>
+        <p class="text-xs text-[var(--brand-text-muted)] text-center">
+          Confirma que no quieres aplicar ningún filtro
+        </p>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -154,6 +209,7 @@ interface Props {
   ubicacionesOptions: any[]
   calidadesOptions: any[]
   includeAnulados: boolean
+  noFilter: boolean
 }
 
 const props = defineProps<Props>()
@@ -168,6 +224,8 @@ const emit = defineEmits<{
   'update:selectedUbicaciones': [value: string[]]
   'update:selectedCalidades': [value: string[]]
   'update:includeAnulados': [value: boolean]
+  'update:noFilter': [value: boolean]
+  'hideFiltros': []
 }>()
 
 const selectedTipos = computed({
@@ -195,9 +253,37 @@ const includeAnulados = computed({
   set: (value) => emit('update:includeAnulados', value)
 })
 
+const noFilter = computed({
+  get: () => props.noFilter,
+  set: (value) => emit('update:noFilter', value)
+})
+
+const hasAvailableAdvancedFilters = computed(() => {
+  return selectedTipos.value.length === 0 ||
+    selectedEstados.value.length === 0 ||
+    selectedUbicaciones.value.length === 0 ||
+    selectedCalidades.value.length === 0
+})
+
+const hasAnyActiveFilter = computed(() => {
+  return props.selectedClienteIds.length > 0 ||
+    props.fechaDesde !== null ||
+    props.fechaHasta !== null ||
+    props.selectedTipos.length > 0 ||
+    props.selectedEstados.length > 0 ||
+    props.selectedUbicaciones.length > 0 ||
+    props.selectedCalidades.length > 0 ||
+    props.includeAnulados
+})
+
 function clearDates() {
   emit('update:fechaDesde', null)
   emit('update:fechaHasta', null)
   emit('update:selectedPreset', '')
 }
+
+function handleNoFilter() {
+  emit('update:noFilter', true)
+  emit('hideFiltros')
+}
 </script>