Skip to content

Homologa comercial al canon de Finanzas (KPI cards, chart cards, filtros)

Infraestructura requested to merge feat/homologa-comercial into qa

Comercial era el area mas alejada del canon: 0 de 25 archivos usaba MultiSelectFilter o CollapsibleSection — construye todo su chrome propio. Sin reescribir esa estructura (implica riesgo de comportamiento), se alinea el lenguaje visual, que es lo que se ve.

KpiCard (_internal/KpiCard.tsx)

  • label: text-[12px] font-semibold TINTED con el color del semaforo -> text-[11px] font-medium tracking-widest uppercase en --text-muted. Mismo hallazgo que en OaeCards: el label de color hacia que cada card gritara un tono distinto; en el canon el color es significado, no decoracion, y el protagonista es el numero.
  • cifra: text-2xl (24px) -> text-[36px] sm:text-[40px] del canon. FitValue ya encoge si desbordaria, asi que no rompe el "real / meta".
  • card: p-4 rounded-xl bg-white/dark:bg-card border-gray-200 -> p-5 rounded-2xl bg-surface border-border.
  • se retira el border-l-4 de color: el estado ya lo comunican el tile del icono y el anillo de avance (triple codificacion del mismo dato).
  • tile del icono: h-10 w-10 con borde -> h-8 w-8 del canon.
  • hint: text-gray-400/dark:text-gray-500 -> var(--text-secondary).
  • SE CONSERVA el MetaRing (anillo de avance vs meta): es funcionalidad, no decoracion, y el canon no tiene equivalente porque los KPIs de Finanzas en general no llevan meta.

ChartCard (_internal/ChartCard.tsx)

  • titulo: text-sm font-semibold text-gray-700 -> text-[11px] font-medium tracking-widest en --text-muted (canon §5.3).
  • chrome: rounded-xl p-4 con grises hardcodeados -> rounded-2xl p-5 con bg-surface / border-border.

FilterBar + ChecklistDropdown

  • orden de filtros: Año·Mes·Portafolio·Empresa -> PORTAFOLIO·EMPRESA·AÑO·MES (§6, el orden de 8 de las 10 paginas de Finanzas).
  • estado activo: bg-blue-600 solido -> border-primary bg-primary-subtle text-primary, identico al MultiSelectFilter canonico.
  • se eliminan los 6 hexes hardcodeados del chrome (bg-[#222738], border-[#e2e5ea], text-[#8a93a3]...) por tokens.

Verificacion: npm run build OK en portal_comercial y en frontend (embed).

Co-Authored-By: Claude Opus 5 (1M context) noreply@anthropic.com

Merge request reports