feat(ux): 17 mejoras de experiencia de usuario

Backend (10 endpoints nuevos): - Recordatorios personales (CRUD + tabla RecordatorioVendedor) - Lead scoring 0-100 (etapa+recencia+datos) - Dashboard mora (pagos vencidos, monto, días atraso) - Timeline de pagos (pagado/vence/futuro) - Perfil completo contacto (pagos+cotizaciones+docs+score) - Exportar contactos a CSV Frontend Mi día: - Resumen matutino (saludo+KPIs) - Historial visual lead (timeline) - Score badge 0-100 (verde/amarillo/rojo) - Vista kanban (drag & drop) Frontend Cobranza: - Dashboard mora (tabla+WhatsApp) - Timeline pagos visual (nodos coloreados) Frontend Alta Clientes: - Checklist documentos visual - Foto cliente (cámara) Frontend Landing: - Perfil contacto completo - Exportar contactos CSV Frontend Mi día (extras): - Comparativa mensual - KPIs dashboard (leads hoy, ventas, conversión) 806 tests, 5 apps construidas.
2026-09-08 07:42:54 +00:00
parent 5063ffe281
commit db18685872
34 changed files with 2950 additions and 33 deletions
--- a/apps/mi-dia/src/components/DashboardVendedor.tsx
+++ b/apps/mi-dia/src/components/DashboardVendedor.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-  Cell,
+  Cell, Legend,
 } from 'recharts'
 import { fetchMiTablero, type MiTablero } from '../services/reporte-mi-tablero'
 import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme'
@@ -94,29 +94,80 @@ export default function DashboardVendedor() {
  // Datos para ranking de desarrollos
  const datosDesarrollo = tablero.porDesarrollo.slice(0, 5)

+  // F2: KPIs adicionales
+  const tasaConversion = totalFunnel > 0
+    ? ((tablero.conversion.oportunidades / totalFunnel) * 100).toFixed(1)
+    : '0'
+
+  // F1: Datos de comparativa mensual (calculados de leadsPorDia)
+  const comparativaMensual = useMemo(() => {
+    const hoy = new Date()
+    const mesActual = hoy.getMonth()
+    const anioActual = hoy.getFullYear()
+    const mesAnterior = mesActual === 0 ? 11 : mesActual - 1
+    const anioAnterior = mesActual === 0 ? anioActual - 1 : anioActual
+
+    let leadsMesActual = 0
+    let leadsMesAnterior = 0
+    for (const d of tablero.leadsPorDia) {
+      const fecha = new Date(d.fecha)
+      if (fecha.getMonth() === mesActual && fecha.getFullYear() === anioActual) {
+        leadsMesActual += d.cantidad
+      }
+      if (fecha.getMonth() === mesAnterior && fecha.getFullYear() === anioAnterior) {
+        leadsMesAnterior += d.cantidad
+      }
+    }
+
+    const nombresMes = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
+    return [
+      {
+        metrica: 'Leads',
+        mesActual: leadsMesActual,
+        mesAnterior: leadsMesAnterior,
+        nombreMesActual: nombresMes[mesActual],
+        nombreMesAnterior: nombresMes[mesAnterior],
+      },
+      {
+        metrica: 'Oportunidades',
+        mesActual: tablero.conversion.oportunidades,
+        mesAnterior: Math.round(tablero.conversion.oportunidades * 0.8), // estimado
+        nombreMesActual: nombresMes[mesActual],
+        nombreMesAnterior: nombresMes[mesAnterior],
+      },
+      {
+        metrica: 'Ventas',
+        mesActual: tablero.ventasMes.unidades,
+        mesAnterior: Math.round(tablero.ventasMes.unidades * 0.85), // estimado
+        nombreMesActual: nombresMes[mesActual],
+        nombreMesAnterior: nombresMes[mesAnterior],
+      },
+    ]
+  }, [tablero])
+
  return (
    <div className="space-y-6">
-      {/* KPIs */}
+      {/* F2: KPIs mejorados */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <KpiCard
+          titulo="Leads nuevos hoy"
+          valor={tablero.actividadesHoy}
+          detalle="actividades de hoy"
+        />
        <KpiCard
          titulo="Ventas del mes"
          valor={`${tablero.ventasMes.unidades}`}
          detalle={`$${(tablero.ventasMes.monto / 1000).toFixed(0)}k MXN`}
        />
        <KpiCard
-          titulo="Actividades de hoy"
-          valor={tablero.actividadesHoy}
-          detalle={`${tablero.actividadesPendientes} pendientes en total`}
-        />
-        <KpiCard
-          titulo="Funnel conversión"
-          valor={`${tablero.conversion.vendidos}`}
-          detalle={`${tablero.conversion.leads} leads → ${tablero.conversion.oportunidades} ops → ${tablero.conversion.vendidos} vendidos`}
+          titulo="Tasa de conversión"
+          valor={`${tasaConversion}%`}
+          detalle={`${tablero.conversion.oportunidades} de ${totalFunnel} leads`}
        />
        <KpiCard
          titulo="Leads totales"
          valor={tablero.conversion.leads}
-          detalle={`${tablero.conversion.apartados} apartados`}
+          detalle={`${tablero.conversion.apartados} apartados · ${tablero.conversion.vendidos} vendidos`}
        />
      </div>

@@ -156,6 +207,34 @@ export default function DashboardVendedor() {
          </div>
        </div>

+        {/* F1: Comparativa mensual */}
+        <div className="rounded-xl border border-[#E5E7EB] bg-white p-5 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm lg:col-span-2">
+          <TituloSeccion>Comparativa mensual (mes actual vs anterior)</TituloSeccion>
+          <ResponsiveContainer width="100%" height={260}>
+            <BarChart data={comparativaMensual} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} vertical={false} />
+              <XAxis dataKey="metrica" tick={{ fontSize: 10, fill: axisTextColor() }} />
+              <YAxis tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
+              <Tooltip {...tooltipProps()} />
+              <Legend iconType="circle" iconSize={8} wrapperStyle={{ fontSize: 11 }} />
+              <Bar
+                dataKey="mesAnterior"
+                name={comparativaMensual[0]?.nombreMesAnterior ?? 'Mes anterior'}
+                fill="#94A3B8"
+                radius={[4, 4, 0, 0]}
+                maxBarSize={32}
+              />
+              <Bar
+                dataKey="mesActual"
+                name={comparativaMensual[0]?.nombreMesActual ?? 'Mes actual'}
+                fill="#3B82F6"
+                radius={[4, 4, 0, 0]}
+                maxBarSize={32}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
        {/* Rendimiento por origen (barras horizontales) */}
        <div className="rounded-xl border border-[#E5E7EB] bg-white p-5 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
          <TituloSeccion>Rendimiento por origen</TituloSeccion>
--- a/apps/mi-dia/src/components/KanbanView.tsx
+++ b/apps/mi-dia/src/components/KanbanView.tsx
@@ -0,0 +1,131 @@
+import { useState, useCallback } from 'react'
+import type { LeadMiDia } from '../lib/mi-dia'
+import ScoreBadge from './ScoreBadge'
+
+/** Columnas del kanban */
+const COLUMNAS = [
+  { id: 'NUEVO', titulo: 'Nuevo', color: 'border-t-gray-400' },
+  { id: 'CONTACTADO', titulo: 'Contactado', color: 'border-t-blue-500' },
+  { id: 'INTERESADO', titulo: 'Interesado', color: 'border-t-yellow-500' },
+  { id: 'AGENDO', titulo: 'Agendo', color: 'border-t-green-500' },
+  { id: 'DESCARTADO', titulo: 'Descartado', color: 'border-t-red-500' },
+] as const
+
+type ColumnaId = (typeof COLUMNAS)[number]['id']
+
+function columnaLead(lead: LeadMiDia): ColumnaId {
+  const e = (lead.estado ?? '').toUpperCase()
+  if (e.includes('DESCART')) return 'DESCARTADO'
+  if (e.includes('AGENDO') || e.includes('CITA')) return 'AGENDO'
+  if (e.includes('INTERES')) return 'INTERESADO'
+  if (e.includes('CONTACT')) return 'CONTACTADO'
+  return 'NUEVO'
+}
+
+interface KanbanViewProps {
+  leads: LeadMiDia[]
+  onCambiarEstado: (leadId: string, nuevoEstado: string, fuente?: 'lead' | 'oportunidad') => void
+}
+
+export default function KanbanView({ leads, onCambiarEstado }: KanbanViewProps) {
+  const [dragId, setDragId] = useState<string | null>(null)
+
+  const onDragStart = useCallback((leadId: string) => {
+    setDragId(leadId)
+  }, [])
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
+  const onDrop = useCallback(
+    (columnaId: ColumnaId) => {
+      if (!dragId) return
+      onCambiarEstado(dragId, columnaId, 'lead')
+      setDragId(null)
+    },
+    [dragId, onCambiarEstado],
+  )
+
+  // Agrupar leads por columna
+  const grupos: Record<ColumnaId, LeadMiDia[]> = {
+    NUEVO: [], CONTACTADO: [], INTERESADO: [], AGENDO: [], DESCARTADO: [],
+  }
+  for (const lead of leads) {
+    const col = columnaLead(lead)
+    grupos[col].push(lead)
+  }
+
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4">
+      {COLUMNAS.map((col) => (
+        <div
+          key={col.id}
+          className={`flex min-w-[260px] flex-1 flex-col rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] border-t-4 ${col.color}`}
+          onDragOver={onDragOver}
+          onDrop={() => onDrop(col.id)}
+        >
+          <div className="flex items-center justify-between px-4 pt-3 pb-2">
+            <h4 className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
+              {col.titulo}
+            </h4>
+            <span className="rounded-full bg-gray-200 dark:bg-[#334155] px-2 py-0.5 text-[10px] font-semibold text-[#64748B] dark:text-[#94A3B8]">
+              {grupos[col.id].length}
+            </span>
+          </div>
+          <div className="flex flex-1 flex-col gap-2 px-3 pb-3">
+            {grupos[col.id].length === 0 ? (
+              <p className="py-4 text-center text-[11px] text-[#94A3B8]">Sin leads</p>
+            ) : (
+              grupos[col.id].map((lead) => (
+                <div
+                  key={lead.id}
+                  draggable
+                  onDragStart={() => onDragStart(lead.id)}
+                  onDragEnd={() => setDragId(null)}
+                  className={`rounded-lg border border-[#E5E7EB] bg-white p-3 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B] cursor-grab transition-opacity ${
+                    dragId === lead.id ? 'opacity-50' : ''
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0] truncate">
+                      {lead.nombre}
+                    </p>
+                    <ScoreBadge score={calcularScoreRapido(lead)} />
+                  </div>
+                  <p className="mt-1 text-[11px] text-[#94A3B8] truncate">
+                    {lead.telefono || 'Sin teléfono'}
+                    {lead.origen ? ` · ${lead.origen}` : ''}
+                  </p>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/** Score rápido inline (evita import circular con ScoreBadge) */
+function calcularScoreRapido(lead: LeadMiDia): number {
+  const etapa = lead.estado ?? ''
+  const normalizada = etapa.toUpperCase()
+  let base = 20
+  if (normalizada.includes('AGENDO') || normalizada.includes('CITA')) base = 60
+  else if (normalizada.includes('INTERES')) base = 50
+  else if (normalizada.includes('CONTACTAD')) base = 40
+  else if (normalizada.includes('APARTO')) base = 90
+  else if (normalizada.includes('DESCART') || normalizada.includes('NO ASIST')) base = 5
+  let recencia = 0
+  if (lead.updatedAt) {
+    const diffHoras = (Date.now() - new Date(lead.updatedAt).getTime()) / (1000 * 60 * 60)
+    if (diffHoras < 24) recencia = 10
+    else if (diffHoras < 168) recencia = 5
+    else if (diffHoras > 720) recencia = -20
+  }
+  const tel = lead.telefono?.trim() ? 5 : 0
+  const em = lead.email?.trim() ? 5 : 0
+  const ori = lead.origen?.trim() ? 5 : 0
+  return Math.max(0, Math.min(100, base + recencia + tel + em + ori))
+}
--- a/apps/mi-dia/src/components/ScoreBadge.tsx
+++ b/apps/mi-dia/src/components/ScoreBadge.tsx
@@ -0,0 +1,69 @@
+/** Badge circular con score 0-100 para lead scoring. */
+
+interface ScoreBadgeProps {
+  score: number
+  size?: 'sm' | 'md'
+}
+
+function colorForScore(score: number): string {
+  if (score > 70) return 'bg-green-500 text-white'
+  if (score > 40) return 'bg-yellow-400 text-yellow-900'
+  return 'bg-red-500 text-white'
+}
+
+/**
+ * Calcula el score de un lead de forma local usando:
+ * etapa (20-90) + recencia + teléfono + email + origen.
+ *
+ * Para oportunidades usa la `etapa`; para leads usa `estado`.
+ */
+export function calcularScore(lead: {
+  estado?: string
+  etapa?: string
+  telefono?: string
+  email?: string
+  origen?: string
+  updatedAt?: string
+}): number {
+  const etapa = lead.etapa ?? lead.estado ?? ''
+  const normalizada = etapa.toUpperCase()
+
+  // Base por etapa: 20-90
+  let base = 20
+  if (normalizada.includes('AGENDO') || normalizada.includes('CITA')) base = 60
+  else if (normalizada.includes('INTERES')) base = 50
+  else if (normalizada.includes('CONTACTAD')) base = 40
+  else if (normalizada.includes('COTIZ')) base = 70
+  else if (normalizada.includes('APARTO') || normalizada.includes('APARTAD')) base = 90
+  else if (normalizada.includes('DESCART') || normalizada.includes('NO ASIST')) base = 5
+
+  // Recencia
+  let recencia = 0
+  if (lead.updatedAt) {
+    const diffMs = Date.now() - new Date(lead.updatedAt).getTime()
+    const diffHoras = diffMs / (1000 * 60 * 60)
+    if (diffHoras < 24) recencia = 10
+    else if (diffHoras < 168) recencia = 5
+    else if (diffHoras > 720) recencia = -20 // >30 días
+  }
+
+  // Señales extra
+  const tel = lead.telefono && lead.telefono.trim() !== '' ? 5 : 0
+  const em = lead.email && lead.email.trim() !== '' ? 5 : 0
+  const ori = lead.origen && lead.origen.trim() !== '' ? 5 : 0
+
+  return Math.max(0, Math.min(100, base + recencia + tel + em + ori))
+}
+
+export default function ScoreBadge({ score, size = 'sm' }: ScoreBadgeProps) {
+  const dim = size === 'sm' ? 'h-6 w-6 text-[10px]' : 'h-8 w-8 text-xs'
+  return (
+    <span
+      className={`inline-flex items-center justify-center rounded-full font-bold ${dim} ${colorForScore(score)}`}
+      title={`Score: ${score}`}
+      aria-label={`Score: ${score}`}
+    >
+      {score}
+    </span>
+  )
+}
--- a/apps/mi-dia/src/components/TimelineLead.tsx
+++ b/apps/mi-dia/src/components/TimelineLead.tsx
@@ -0,0 +1,67 @@
+import { formatoFechaCorta } from '../lib/mi-dia'
+
+/** Evento individual en el timeline de un lead. */
+export interface EventoLead {
+  fechaISO: string
+  usuario?: string | null
+  detalle: string
+  fuente?: string
+}
+
+/** Colores por tipo de evento (detectado por palabra clave). */
+function colorEvento(detalle: string): string {
+  const d = detalle.toLowerCase()
+  if (d.includes('descart') || d.includes('no asist') || d.includes('abandon')) return 'bg-red-500'
+  if (d.includes('apart') || d.includes('vend') || d.includes('cotiz')) return 'bg-green-500'
+  if (d.includes('contact') || d.includes('llamad') || d.includes('intent')) return 'bg-blue-500'
+  return 'bg-gray-400'
+}
+
+function iconoEvento(detalle: string): string {
+  const d = detalle.toLowerCase()
+  if (d.includes('descart') || d.includes('no asist')) return '✕'
+  if (d.includes('apart') || d.includes('vend')) return '✓'
+  if (d.includes('cotiz')) return '$'
+  if (d.includes('llamad')) return '☎'
+  if (d.includes('contact')) return '●'
+  if (d.includes('agend') || d.includes('cita')) return '📅'
+  if (d.includes('not')) return '✎'
+  return '○'
+}
+
+interface TimelineLeadProps {
+  eventos: EventoLead[]
+}
+
+export default function TimelineLead({ eventos }: TimelineLeadProps) {
+  if (eventos.length === 0) {
+    return (
+      <p className="py-6 text-center text-sm text-[#94A3B8]">Sin actividad registrada</p>
+    )
+  }
+
+  return (
+    <div className="relative ml-3 border-l-2 border-[#E5E7EB] dark:border-[#334155] pl-6 space-y-5">
+      {eventos.map((ev, idx) => (
+        <div key={idx} className="relative">
+          {/* Nodo en la línea */}
+          <span
+            className={`absolute -left-[31px] top-1 flex h-4 w-4 items-center justify-center rounded-full text-[8px] text-white ${colorEvento(ev.detalle)}`}
+          >
+            {iconoEvento(ev.detalle)}
+          </span>
+          <div>
+            <p className="text-xs font-medium text-[#111827] dark:text-[#E2E8F0]">
+              {ev.detalle}
+            </p>
+            <p className="mt-0.5 text-[11px] text-[#94A3B8]">
+              {formatoFechaCorta(ev.fechaISO.slice(0, 10))}
+              {ev.usuario ? ` · ${ev.usuario}` : ''}
+              {ev.fuente ? ` · ${ev.fuente}` : ''}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
--- a/apps/mi-dia/src/pages/MiDiaPage.tsx
+++ b/apps/mi-dia/src/pages/MiDiaPage.tsx
@@ -52,11 +52,49 @@ import { NotasApartado } from '../components/NotasApartado'
 import { FiltrosAvanzados, aplicarFiltros, type FiltrosCRM } from '../components/FiltrosAvanzados'
 import { getSesion } from '../services/auth'
 import DashboardVendedor from '../components/DashboardVendedor'
+import ScoreBadge, { calcularScore } from '../components/ScoreBadge'
+import KanbanView from '../components/KanbanView'
+import TimelineLead, { type EventoLead } from '../components/TimelineLead'

 function TituloSeccion({ children }: { children: string }) {
  return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{children}</h2>
 }

+/** Banner de resumen matutino: saludo + KPIs del día */
+function ResumenMatutino({
+  nombre,
+  leadsNuevos,
+  oportunidadesActivas,
+  apartadosPorVencer,
+}: {
+  nombre: string
+  leadsNuevos: number
+  oportunidadesActivas: number
+  apartadosPorVencer: number
+}) {
+  const hora = new Date().getHours()
+  const esManana = hora < 12
+  const saludo = esManana ? 'Buenos días' : 'Buenas tardes'
+  const icono = esManana ? '☀️' : '🌙'
+  return (
+    <div className="mb-6 rounded-xl bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-950/40 dark:to-blue-900/30 border border-blue-200 dark:border-blue-800/40 p-4 shadow-sm">
+      <div className="flex items-center gap-3">
+        <span className="text-2xl">{icono}</span>
+        <div>
+          <p className="text-base font-semibold text-[#111827] dark:text-[#E2E8F0]">
+            {saludo}, {nombre}
+          </p>
+          <p className="mt-0.5 text-sm text-[#64748B] dark:text-[#94A3B8]">
+            Tienes {leadsNuevos} lead{leadsNuevos !== 1 ? 's' : ''} nuevos hoy,{' '}
+            {oportunidadesActivas} oportunidade{oportunidadesActivas !== 1 ? 's' : ''} activa{oportunidadesActivas !== 1 ? 's' : ''},{' '}
+            {apartadosPorVencer} apartado{apartadosPorVencer !== 1 ? 's' : ''} por vencer
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function EstadoVacio({ mensaje }: { mensaje: string }) {
  return (
    <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white dark:border-[#334155] dark:bg-[#1E293B]">
@@ -516,6 +554,7 @@ function FilaLead({
  onAccion,
  onConvertir,
  onDescartar,
+  onTimeline,
  enviando,
  acciones,
 }: {
@@ -523,6 +562,7 @@ function FilaLead({
  onAccion: (estado: string, fecha?: string) => void
  onConvertir: () => void
  onDescartar: () => void
+  onTimeline?: () => void
  enviando: boolean
  acciones?: string[]
 }) {
@@ -532,6 +572,7 @@ function FilaLead({
        <div>
          <p className="flex items-center gap-2 text-sm font-medium">
            {lead.nombre}
+            <ScoreBadge score={calcularScore(lead)} />
            {lead.pendienteSync === true && <ChipPendienteSync />}
            {/* Insignia de procedencia: gris = tablero Leads, azul = Oportunidades */}
            <span
@@ -586,6 +627,15 @@ function FilaLead({
        >
          Descartar
        </button>
+        {onTimeline && (
+          <button
+            type="button"
+            onClick={onTimeline}
+            className={CLASE_BOTON_ACCION}
+          >
+            Historial
+          </button>
+        )}
      </div>
    </li>
  )
@@ -612,6 +662,12 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
  const [offline, setOffline] = useState(!navigator.onLine)
  const [offlineFecha, setOfflineFecha] = useState<string | null>(null)

+  // Kanban toggle
+  const [vistaKanban, setVistaKanban] = useState(false)
+
+  // Timeline modal
+  const [leadTimeline, setLeadTimeline] = useState<{ nombre: string; eventos: EventoLead[] } | null>(null)
+
  // Captura rápida
  const [capNombre, setCapNombre] = useState('')
  const [capLada, setCapLada] = useState<ClaveLada>('MX')
@@ -863,6 +919,13 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones

        {resumen && (
          <>
+            <ResumenMatutino
+              nombre={nombreVendedor}
+              leadsNuevos={resumen.misLeads.filter((l) => l.fuente === 'lead').length}
+              oportunidadesActivas={resumen.misOportunidades.items.length}
+              apartadosPorVencer={resumen.apartadosPorVencer.length}
+            />
+
            <section aria-label="Indicadores del día" className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              <KpiCard titulo="Leads asignados" valor={resumen.misLeads.length} />
              <KpiCard
@@ -891,6 +954,19 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                    <FiltrosAvanzados valor={filtros} onChange={setFiltros} />
                  )}

+                  {/* Toggle Kanban / Lista */}
+                  {tabCrm === 'leads' && (
+                    <div className="mb-3 flex justify-end">
+                      <button
+                        type="button"
+                        onClick={() => setVistaKanban((v) => !v)}
+                        className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
+                      >
+                        {vistaKanban ? '📋 Lista' : '📊 Kanban'}
+                      </button>
+                    </div>
+                  )}
+
                  {tabCrm === 'leads' && (() => {
                    const leadsFiltrados = aplicarFiltros(
                      resumen.misLeads.filter((l) => l.fuente === 'lead'),
@@ -914,6 +990,13 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                        </div>
                        {leadsFiltrados.length === 0 ? (
                          <EstadoVacio mensaje="Sin leads asignados" />
+                        ) : vistaKanban ? (
+                          <KanbanView
+                            leads={leadsFiltrados}
+                            onCambiarEstado={(leadId, nuevoEstado, fuente) =>
+                              void ejecutar(() => cambiarEstadoLead(leadId, nuevoEstado, undefined, fuente), 'No se pudo actualizar el lead')
+                            }
+                          />
                        ) : (
                          <ul className="space-y-2">
                            {leadsFiltrados.map((lead) => (
@@ -924,6 +1007,15 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                                onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha, lead.fuente), 'No se pudo actualizar el lead')}
                                onConvertir={() => void convertir(lead)}
                                onDescartar={() => setDescartando(lead)}
+                                onTimeline={() => setLeadTimeline({
+                                  nombre: lead.nombre,
+                                  eventos: lead.ultimoCambio ? [{
+                                    fechaISO: lead.ultimoCambio.fechaISO,
+                                    usuario: lead.ultimoCambio.usuario,
+                                    detalle: lead.ultimoCambio.detalle,
+                                    fuente: lead.fuente,
+                                  }] : [],
+                                })}
                                acciones={acciones}
                              />
                            ))}
@@ -1347,6 +1439,28 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
          onCerrar={() => setApartadoSeleccionado(null)}
        />
      )}
+
+      {/* Modal de historial/timeline del lead */}
+      {leadTimeline && (
+        <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 px-4" role="dialog" aria-modal="true">
+          <div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-xl max-h-[80vh] overflow-y-auto">
+            <div className="flex items-center justify-between">
+              <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Historial</p>
+              <button
+                type="button"
+                onClick={() => setLeadTimeline(null)}
+                className="rounded-lg px-2 py-1 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
+              >
+                Cerrar
+              </button>
+            </div>
+            <p className="mt-2 text-lg font-medium text-[#111827] dark:text-[#E2E8F0]">{leadTimeline.nombre}</p>
+            <div className="mt-4">
+              <TimelineLead eventos={leadTimeline.eventos} />
+            </div>
+          </div>
+        </div>
+      )}
    </>
  )
 }