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.
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user