Skip to content

feat(comercial): rediseñar FilterBar al estilo del dashboard OAE y filtros dinámicos por año+mes

Alan Amox requested to merge comercial into main

Rework del filter bar del Portal Comercial (portal_comercial) para alinearlo visual y funcionalmente al dashboard principal (/oae/dashboard), más filtros que se rellenan dinámicamente desde los reportes comerciales.

FilterBar (UI):

  • Layout pill horizontal compacto: contenedor rounded-[20px] con icono SlidersHorizontal + label FILTROS + divisor.
  • Cada filtro es un nuevo ChecklistDropdown (_internal/ui/ChecklistDropdown.tsx) que reemplaza al MultiSelectMenu/SingleSelect Radix anteriores: soporta opciones {value,label}, modo singleSelect (radio) para Año, searchable para Empresa y defaultValues para que el botón Limpiar del popover vuelva al preset.
  • Pill cambia a azul sólido + badge contador cuando difiere del default.
  • Botón global Limpiar condicional, badge derecho con conteo de empresas.
  • Sticky preservado, autocontenido con clases Tailwind y hex directos (sin depender de CSS vars --oae-* que no existían en el shell del OAE — corrige el bug donde el filter bar se veía translúcido al embeber el dashboard en /oae/comercial/inicio).

Mes preseleccionado:

  • Reescrita la lógica de DEFAULT_MES para reflejar el cierre de mes el día 10: día ≤10 → M-2, día ≥11 → M-1. Ej: 4-may → Marzo; 11-may → Abril.

Canvas:

  • --background del portal comercial alineado al #f4f6fa del OAE para que el filter bar blanco destaque igual en ambos contextos.

Filtros dinámicos (año+mes + cascada):

  • Backend (backend/routers/comercial.py): summary.filtros_disponibles ahora se calcula a partir del universo año+mes. portafolios_opt y mix_opt por año+mes; empresas_opt por año+mes con cascada de portafolio.
  • Frontend (ComercialDashboard.tsx): eliminada la llamada al endpoint estático; las 3 listas se construyen como merge entre el universo válido (summary.filtros_disponibles) y la selección actual, manteniendo visibles las selecciones huérfanas hasta que el usuario las deseleccione.

Limpieza:

  • Eliminados archivos huérfanos: _internal/ui/{MultiSelectMenu,Select,Popover}.tsx.
  • Eliminada función getIndicadoresComerciaesOpciones (comercial.api.ts).
  • Eliminado endpoint backend /api/tableau/indicadores-comerciales/opciones (sin consumidores).

Merge request reports