cambio heavys

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

@@ -0,0 +1,203 @@
+<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>
+
+    <!-- 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>
+
+    <!-- Fila 3: Filtros Avanzados (grid de 4 columnas) -->
+    <div 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>
+
+        <!-- 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>
+
+        <!-- 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>
+
+        <!-- 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>
+      </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Cliente } from '~/composables/useClienteSelector'
+
+interface Props {
+  clientes: Cliente[]
+  selectedClienteIds: number[]
+  selectedPreset: string
+  fechaDesde: string | null
+  fechaHasta: string | null
+  selectedTipos: string[]
+  selectedEstados: string[]
+  selectedUbicaciones: string[]
+  selectedCalidades: string[]
+  tiposOptions: any[]
+  estadosOptions: any[]
+  ubicacionesOptions: any[]
+  calidadesOptions: any[]
+  includeAnulados: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:selectedClienteIds': [value: number[]]
+  'update:selectedPreset': [value: string]
+  'update:fechaDesde': [value: string | null]
+  'update:fechaHasta': [value: string | null]
+  'update:selectedTipos': [value: string[]]
+  'update:selectedEstados': [value: string[]]
+  'update:selectedUbicaciones': [value: string[]]
+  'update:selectedCalidades': [value: string[]]
+  'update:includeAnulados': [value: boolean]
+}>()
+
+const selectedTipos = computed({
+  get: () => props.selectedTipos,
+  set: (value) => emit('update:selectedTipos', value)
+})
+
+const selectedEstados = computed({
+  get: () => props.selectedEstados,
+  set: (value) => emit('update:selectedEstados', value)
+})
+
+const selectedUbicaciones = computed({
+  get: () => props.selectedUbicaciones,
+  set: (value) => emit('update:selectedUbicaciones', value)
+})
+
+const selectedCalidades = computed({
+  get: () => props.selectedCalidades,
+  set: (value) => emit('update:selectedCalidades', value)
+})
+
+const includeAnulados = computed({
+  get: () => props.includeAnulados,
+  set: (value) => emit('update:includeAnulados', value)
+})
+
+function clearDates() {
+  emit('update:fechaDesde', null)
+  emit('update:fechaHasta', null)
+  emit('update:selectedPreset', '')
+}
+</script>