Skip to content

feat(comercial/ventas): rediseno visual de las cards Kanban estilo Trello/Linear

Alan Amox requested to merge comercial into qa

Cards mas atractivas con jerarquia visual clara, y header de cada columna ahora muestra el monto total compacto.

Cards:

  • Borde lateral de 4px del color del funnel (azul/ambar/emerald/rosa)
  • Nombre de venta arriba en text-sm font-semibold con line-clamp-2
  • Empresa y LN como badges chiquitos que truncan limpio
  • Monto en text-base font-bold tabular-nums + chip pequeno con tipo
  • Footer separado con bg sutil agrupando owner + fecha
  • Avatar circular de 20px con gradient determinista (hash del email)
    • iniciales 2 letras (misma persona siempre el mismo color)
  • Fecha relativa hoy / hace 3 d / hace 2 sem / hace 4 mes con tooltip de la fecha absoluta
  • Hover lift sutil con -translate-y-0.5 y shadow-md

Header de cada columna:

  • Fusion del dot de color con el contador: circulo coloreado pequeno con el numero blanco adentro a la izquierda del titulo
  • Monto total compacto Intl notation compact ($1.5M, $500K) a la derecha con tooltip del valor exacto
  • Ventas con monto NULL cuentan como 0 en la suma
  • Color del total alineado al tema del funnel

Otros toques:

  • Empty state con icono Inbox + texto centrado
  • DragOverlay rotado 2 grados, shadow-2xl, ancho fijo, conserva el borde lateral del funnel ORIGEN (no del destino)
  • Drop target visual: la columna receptora se ilumina con ring-2 del color de SU funnel, no verde universal
  • Helpers nuevos: fmtFechaRelativa, inicialesOwner, avatarGradient, fmtMoneyCompact, fmtMoneyFull

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

Merge request reports