style: rediseno de layout profesional en las 7 apps
Headers sticky con marca y acciones, contenedores max-w-[1280px], grids de contenido con rails laterales sticky (cotizador, mi-dia, detalle de cobranza), stepper vertical en el wizard de alta, toolbar+ tabla unificadas en cobranza, tabs como segmented control en dashboards, chat con barra de entrada fija y preguntas sugeridas, landing con navbar + hero + grid de modulos + footer.
This commit is contained in:
@@ -3,12 +3,18 @@ import { getSesion, logout, type Sesion } from '../services/auth'
|
||||
import CambiarPasswordModal from './CambiarPasswordModal'
|
||||
import LoginScreen from './LoginScreen'
|
||||
|
||||
/** Acciones de sesión que la página ubica en el header ("Contraseña" y "Salir") */
|
||||
export interface AccionesSesion {
|
||||
onCambiarPassword: () => void
|
||||
onLogout: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
|
||||
* app con una barra discreta "nombre · rol", "Contraseña" (modal de cambio)
|
||||
* y botón "Salir".
|
||||
* app. La página recibe las acciones de sesión como render prop para
|
||||
* integrarlas en su propio header.
|
||||
*/
|
||||
export default function AuthGate({ children }: { children: ReactNode }) {
|
||||
export default function AuthGate({ children }: { children: (acciones: AccionesSesion) => ReactNode }) {
|
||||
const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
|
||||
const [modalPassword, setModalPassword] = useState(false)
|
||||
|
||||
@@ -18,33 +24,13 @@ export default function AuthGate({ children }: { children: ReactNode }) {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
|
||||
<div className="border-b border-[#E5E7EB] bg-white">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
|
||||
<span className="text-xs font-medium text-[#64748B]">
|
||||
{sesion.usuario.nombre} · {sesion.usuario.rol}
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModalPassword(true)}
|
||||
className="rounded-md px-2 py-1.5 text-xs font-medium text-[#4B5563] transition-all duration-100 ease-out hover:text-[#111827]"
|
||||
>
|
||||
Contraseña
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
logout()
|
||||
setSesion(null)
|
||||
}}
|
||||
className="rounded-md px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:text-accent-hover"
|
||||
>
|
||||
Salir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
{children({
|
||||
onCambiarPassword: () => setModalPassword(true),
|
||||
onLogout: () => {
|
||||
logout()
|
||||
setSesion(null)
|
||||
},
|
||||
})}
|
||||
{modalPassword && <CambiarPasswordModal onCerrar={() => setModalPassword(false)} />}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -11,7 +11,7 @@ import MiDiaPage from './pages/MiDiaPage'
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<AuthGate>
|
||||
<MiDiaPage />
|
||||
{(accionesSesion) => <MiDiaPage accionesSesion={accionesSesion} />}
|
||||
</AuthGate>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useCallback, useEffect, useState, type FormEvent } from 'react'
|
||||
import KpiCard from '../components/KpiCard'
|
||||
import type { AccionesSesion } from '../components/AuthGate'
|
||||
import {
|
||||
esActividadVencida,
|
||||
esRolConEquipo,
|
||||
@@ -179,7 +180,7 @@ function FilaLead({
|
||||
)
|
||||
}
|
||||
|
||||
export default function MiDiaPage() {
|
||||
export default function MiDiaPage({ accionesSesion }: { accionesSesion: AccionesSesion }) {
|
||||
const nombreVendedor = getSesion()?.usuario.nombre ?? ''
|
||||
const rol = getSesion()?.usuario.rol ?? 'vendedor'
|
||||
const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
|
||||
@@ -258,340 +259,387 @@ export default function MiDiaPage() {
|
||||
}
|
||||
|
||||
const hoy = hoyLocal()
|
||||
const iniciales = nombreVendedor
|
||||
.split(' ')
|
||||
.filter((p) => p !== '')
|
||||
.map((p) => p.charAt(0))
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-6xl px-4 py-8">
|
||||
<div className="mb-8 flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-accent">
|
||||
FRASA <span aria-hidden="true" className="text-[#F97316]">·</span> Mi día
|
||||
</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold text-[#111827]">{nombreVendedor}</h1>
|
||||
<>
|
||||
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
|
||||
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-4 px-4 sm:px-6">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<p className="shrink-0 text-xs font-semibold uppercase tracking-wider text-accent">
|
||||
FRASA <span aria-hidden="true" className="text-[#F97316]">·</span> Mi día
|
||||
</p>
|
||||
<span aria-hidden="true" className="hidden h-4 w-px bg-[#E5E7EB] sm:block" />
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent"
|
||||
>
|
||||
{iniciales}
|
||||
</span>
|
||||
<span className="hidden truncate text-sm font-medium text-[#111827] sm:block">{nombreVendedor}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1 sm:gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={accionesSesion.onCambiarPassword}
|
||||
className="rounded-md px-2 py-1.5 text-xs font-medium text-[#4B5563] transition-all duration-100 ease-out hover:text-[#111827]"
|
||||
>
|
||||
Contraseña
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={accionesSesion.onLogout}
|
||||
className="rounded-md px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:text-accent-hover"
|
||||
>
|
||||
Salir
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void cargar()}
|
||||
disabled={cargando}
|
||||
className="rounded-lg bg-accent px-4 py-2 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50 sm:text-sm"
|
||||
>
|
||||
{cargando ? 'Actualizando…' : 'Actualizar'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void cargar()}
|
||||
disabled={cargando}
|
||||
className="rounded-lg bg-accent px-5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
|
||||
>
|
||||
{cargando ? 'Actualizando…' : 'Actualizar'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="mb-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
|
||||
Sin datos del API — {error}
|
||||
</p>
|
||||
)}
|
||||
{aviso && (
|
||||
<p role="alert" className="mb-8 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
|
||||
{aviso}
|
||||
</p>
|
||||
)}
|
||||
{resumen?.sinMapeoMonday && (
|
||||
<p className="mb-8 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] shadow-sm">
|
||||
Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
|
||||
</p>
|
||||
)}
|
||||
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-xl font-semibold text-[#111827]">{nombreVendedor}</h1>
|
||||
<p className="mt-1 text-sm text-[#64748B]">{formatoFechaCorta(hoy)}</p>
|
||||
</div>
|
||||
|
||||
{!resumen && cargando && <EstadoVacio mensaje="Cargando…" />}
|
||||
{error && (
|
||||
<p role="alert" className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
|
||||
Sin datos del API — {error}
|
||||
</p>
|
||||
)}
|
||||
{aviso && (
|
||||
<p role="alert" className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
|
||||
{aviso}
|
||||
</p>
|
||||
)}
|
||||
{resumen?.sinMapeoMonday && (
|
||||
<p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] shadow-sm">
|
||||
Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
|
||||
</p>
|
||||
)}
|
||||
|
||||
{resumen && (
|
||||
<>
|
||||
<section aria-label="Indicadores del día" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<KpiCard titulo="Leads asignados" valor={resumen.misLeads.length} />
|
||||
<KpiCard
|
||||
titulo="Actividades de hoy"
|
||||
valor={resumen.misActividadesHoy.length}
|
||||
detalle={`${resumen.conteos.actividadesAbiertas} abiertas en total`}
|
||||
/>
|
||||
<KpiCard titulo="Apartados por vencer" valor={resumen.apartadosPorVencer.length} detalle="próximos 7 días" />
|
||||
<KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
|
||||
</section>
|
||||
{!resumen && cargando && <EstadoVacio mensaje="Cargando…" />}
|
||||
|
||||
<section aria-label="Mis actividades" className="mt-12">
|
||||
<TituloSeccion>Mis actividades</TituloSeccion>
|
||||
{resumen.misActividadesHoy.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin actividades para hoy" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misActividadesHoy.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">
|
||||
{a.nombre}
|
||||
{a.tipo ? <span className="ml-2 text-xs uppercase tracking-wider text-[#94A3B8]">{a.tipo}</span> : null}
|
||||
</p>
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
esActividadVencida(a.fecha, hoy) ? 'text-red-600' : 'text-[#64748B]'
|
||||
}`}
|
||||
>
|
||||
{formatoFechaCorta(a.fecha)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{resumen.apartadosPorVencer.length > 0 && (
|
||||
<section aria-label="Apartados por vencer" className="mt-12">
|
||||
<TituloSeccion>Apartados por vencer</TituloSeccion>
|
||||
<ul className="space-y-2">
|
||||
{resumen.apartadosPorVencer.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">
|
||||
{a.nombre}
|
||||
{a.unidadCodigo ? <span className="ml-2 text-xs text-[#94A3B8]">{a.unidadCodigo}</span> : null}
|
||||
</p>
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
a.diasRestantes <= 1 ? 'text-red-600' : 'text-amber-600'
|
||||
}`}
|
||||
>
|
||||
{textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{resumen && (
|
||||
<>
|
||||
<section aria-label="Indicadores del día" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<KpiCard titulo="Leads asignados" valor={resumen.misLeads.length} />
|
||||
<KpiCard
|
||||
titulo="Actividades de hoy"
|
||||
valor={resumen.misActividadesHoy.length}
|
||||
detalle={`${resumen.conteos.actividadesAbiertas} abiertas en total`}
|
||||
/>
|
||||
<KpiCard titulo="Apartados por vencer" valor={resumen.apartadosPorVencer.length} detalle="próximos 7 días" />
|
||||
<KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section aria-label="Mis leads" className="mt-12">
|
||||
<TituloSeccion>Mis leads</TituloSeccion>
|
||||
{resumen.misLeads.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin leads asignados" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misLeads.map((lead) => (
|
||||
<FilaLead
|
||||
key={lead.id}
|
||||
lead={lead}
|
||||
enviando={enviando}
|
||||
onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha), 'No se pudo actualizar el lead')}
|
||||
onDescartar={() => setDescartando(lead)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
<div className="mt-6 flex flex-col gap-6 lg:grid lg:grid-cols-3 lg:gap-6">
|
||||
<div className="order-2 flex flex-col gap-6 lg:order-1 lg:col-span-2">
|
||||
<section aria-label="Mis leads">
|
||||
<TituloSeccion>Mis leads</TituloSeccion>
|
||||
{resumen.misLeads.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin leads asignados" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misLeads.map((lead) => (
|
||||
<FilaLead
|
||||
key={lead.id}
|
||||
lead={lead}
|
||||
enviando={enviando}
|
||||
onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha), 'No se pudo actualizar el lead')}
|
||||
onDescartar={() => setDescartando(lead)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-label="Mis capturas de afluencia" className="mt-12">
|
||||
<TituloSeccion>Mis capturas de afluencia</TituloSeccion>
|
||||
{resumen.misCapturas.length === 0 ? (
|
||||
<EstadoVacio mensaje="Aún no registras afluencias" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misCapturas.map((c) => (
|
||||
<li
|
||||
key={c.leadId}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
<section aria-label="Mis capturas de afluencia">
|
||||
<TituloSeccion>Mis capturas de afluencia</TituloSeccion>
|
||||
{resumen.misCapturas.length === 0 ? (
|
||||
<EstadoVacio mensaje="Aún no registras afluencias" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misCapturas.map((c) => (
|
||||
<li
|
||||
key={c.leadId}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{c.nombre}</p>
|
||||
<p className="mt-1 text-xs text-[#64748B]">
|
||||
{c.telefono || 'Sin teléfono'}
|
||||
{c.origen ? ` · ${c.origen}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
|
||||
{c.estado || '—'}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-[#64748B]">
|
||||
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-label="Mis clientes">
|
||||
<TituloSeccion>Mis clientes</TituloSeccion>
|
||||
{resumen.misClientes.length === 0 ? (
|
||||
<EstadoVacio mensaje="Aún no registras clientes" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misClientes.map((c) => (
|
||||
<li
|
||||
key={c.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{c.nombre}</p>
|
||||
<p className="mt-1 text-xs text-[#64748B]">
|
||||
{[c.proyecto, c.unidadCodigo].filter((p) => p !== '').join(' · ') || 'Alta sin proyecto'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
|
||||
c.completado
|
||||
? 'bg-gray-100 text-gray-600'
|
||||
: 'bg-amber-50 text-amber-700'
|
||||
}`}
|
||||
>
|
||||
{c.completado ? 'Cliente' : 'En captura'}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-[#64748B]">
|
||||
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside className="order-1 flex flex-col gap-6 lg:order-2 lg:sticky lg:top-20 lg:self-start">
|
||||
<section aria-label="Mis actividades">
|
||||
<TituloSeccion>Mis actividades</TituloSeccion>
|
||||
{resumen.misActividadesHoy.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin actividades para hoy" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misActividadesHoy.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">
|
||||
{a.nombre}
|
||||
{a.tipo ? <span className="ml-2 text-xs uppercase tracking-wider text-[#94A3B8]">{a.tipo}</span> : null}
|
||||
</p>
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
esActividadVencida(a.fecha, hoy) ? 'text-red-600' : 'text-[#64748B]'
|
||||
}`}
|
||||
>
|
||||
{formatoFechaCorta(a.fecha)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{resumen.apartadosPorVencer.length > 0 && (
|
||||
<section aria-label="Apartados por vencer">
|
||||
<TituloSeccion>Apartados por vencer</TituloSeccion>
|
||||
<ul className="space-y-2">
|
||||
{resumen.apartadosPorVencer.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">
|
||||
{a.nombre}
|
||||
{a.unidadCodigo ? <span className="ml-2 text-xs text-[#94A3B8]">{a.unidadCodigo}</span> : null}
|
||||
</p>
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
a.diasRestantes <= 1 ? 'text-red-600' : 'text-amber-600'
|
||||
}`}
|
||||
>
|
||||
{textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section aria-label="Captura rápida de lead">
|
||||
<TituloSeccion>Captura rápida de lead</TituloSeccion>
|
||||
<form
|
||||
onSubmit={enviarCaptura}
|
||||
className="grid gap-4 rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{c.nombre}</p>
|
||||
<p className="mt-1 text-xs text-[#64748B]">
|
||||
{c.telefono || 'Sin teléfono'}
|
||||
{c.origen ? ` · ${c.origen}` : ''}
|
||||
</p>
|
||||
<label htmlFor="cap-nombre" className={CLASE_LABEL}>
|
||||
Nombre
|
||||
</label>
|
||||
<input
|
||||
id="cap-nombre"
|
||||
type="text"
|
||||
value={capNombre}
|
||||
onChange={(e) => setCapNombre(e.target.value)}
|
||||
required
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
|
||||
{c.estado || '—'}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-[#64748B]">
|
||||
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-label="Mis clientes" className="mt-12">
|
||||
<TituloSeccion>Mis clientes</TituloSeccion>
|
||||
{resumen.misClientes.length === 0 ? (
|
||||
<EstadoVacio mensaje="Aún no registras clientes" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.misClientes.map((c) => (
|
||||
<li
|
||||
key={c.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{c.nombre}</p>
|
||||
<p className="mt-1 text-xs text-[#64748B]">
|
||||
{[c.proyecto, c.unidadCodigo].filter((p) => p !== '').join(' · ') || 'Alta sin proyecto'}
|
||||
</p>
|
||||
<label htmlFor="cap-telefono" className={CLASE_LABEL}>
|
||||
Teléfono
|
||||
</label>
|
||||
<input
|
||||
id="cap-telefono"
|
||||
type="tel"
|
||||
value={capTelefono}
|
||||
onChange={(e) => setCapTelefono(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
|
||||
c.completado
|
||||
? 'bg-gray-100 text-gray-600'
|
||||
: 'bg-amber-50 text-amber-700'
|
||||
<div>
|
||||
<label htmlFor="cap-email" className={CLASE_LABEL}>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="cap-email"
|
||||
type="email"
|
||||
value={capEmail}
|
||||
onChange={(e) => setCapEmail(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-origen" className={CLASE_LABEL}>
|
||||
Origen
|
||||
</label>
|
||||
<select
|
||||
id="cap-origen"
|
||||
value={capOrigen}
|
||||
onChange={(e) => setCapOrigen(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
>
|
||||
{ORIGENES_LEAD.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-desarrollo" className={CLASE_LABEL}>
|
||||
Desarrollo de interés
|
||||
</label>
|
||||
<select
|
||||
id="cap-desarrollo"
|
||||
value={capDesarrollo}
|
||||
onChange={(e) => setCapDesarrollo(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
>
|
||||
<option value="">Sin especificar</option>
|
||||
{DESARROLLOS_LEAD.map((d) => (
|
||||
<option key={d} value={d}>
|
||||
{d}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-notas" className={CLASE_LABEL}>
|
||||
Notas
|
||||
</label>
|
||||
<input
|
||||
id="cap-notas"
|
||||
type="text"
|
||||
value={capNotas}
|
||||
onChange={(e) => setCapNotas(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
{capMensaje && (
|
||||
<p
|
||||
role="status"
|
||||
className={`rounded-lg border px-4 py-3 text-sm font-medium ${
|
||||
capMensaje.tipo === 'ok'
|
||||
? 'border-green-200 bg-green-50 text-green-700'
|
||||
: 'border-red-200 bg-red-50 text-red-700'
|
||||
}`}
|
||||
>
|
||||
{c.completado ? 'Cliente' : 'En captura'}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-[#64748B]">
|
||||
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
|
||||
</span>
|
||||
{capMensaje.texto}
|
||||
</p>
|
||||
)}
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={capEnviando}
|
||||
className="w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
|
||||
>
|
||||
{capEnviando ? 'Registrando…' : 'Registrar lead'}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section aria-label="Captura rápida de lead" className="mt-12">
|
||||
<TituloSeccion>Captura rápida de lead</TituloSeccion>
|
||||
<form
|
||||
onSubmit={enviarCaptura}
|
||||
className="grid gap-4 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm sm:grid-cols-2"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="cap-nombre" className={CLASE_LABEL}>
|
||||
Nombre
|
||||
</label>
|
||||
<input
|
||||
id="cap-nombre"
|
||||
type="text"
|
||||
value={capNombre}
|
||||
onChange={(e) => setCapNombre(e.target.value)}
|
||||
required
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-telefono" className={CLASE_LABEL}>
|
||||
Teléfono
|
||||
</label>
|
||||
<input
|
||||
id="cap-telefono"
|
||||
type="tel"
|
||||
value={capTelefono}
|
||||
onChange={(e) => setCapTelefono(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-email" className={CLASE_LABEL}>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="cap-email"
|
||||
type="email"
|
||||
value={capEmail}
|
||||
onChange={(e) => setCapEmail(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-origen" className={CLASE_LABEL}>
|
||||
Origen
|
||||
</label>
|
||||
<select
|
||||
id="cap-origen"
|
||||
value={capOrigen}
|
||||
onChange={(e) => setCapOrigen(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
>
|
||||
{ORIGENES_LEAD.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-desarrollo" className={CLASE_LABEL}>
|
||||
Desarrollo de interés
|
||||
</label>
|
||||
<select
|
||||
id="cap-desarrollo"
|
||||
value={capDesarrollo}
|
||||
onChange={(e) => setCapDesarrollo(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
>
|
||||
<option value="">Sin especificar</option>
|
||||
{DESARROLLOS_LEAD.map((d) => (
|
||||
<option key={d} value={d}>
|
||||
{d}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cap-notas" className={CLASE_LABEL}>
|
||||
Notas
|
||||
</label>
|
||||
<input
|
||||
id="cap-notas"
|
||||
type="text"
|
||||
value={capNotas}
|
||||
onChange={(e) => setCapNotas(e.target.value)}
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
{capMensaje && (
|
||||
<p
|
||||
role="status"
|
||||
className={`rounded-lg border px-4 py-3 text-sm font-medium sm:col-span-2 ${
|
||||
capMensaje.tipo === 'ok'
|
||||
? 'border-green-200 bg-green-50 text-green-700'
|
||||
: 'border-red-200 bg-red-50 text-red-700'
|
||||
}`}
|
||||
>
|
||||
{capMensaje.texto}
|
||||
{esRolConEquipo(rol) && resumen.equipo && (
|
||||
<section aria-label="Equipo" className="mt-6">
|
||||
<TituloSeccion>Equipo</TituloSeccion>
|
||||
<p className="mb-4 text-sm text-[#64748B]">
|
||||
Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
|
||||
</p>
|
||||
)}
|
||||
<div className="sm:col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={capEnviando}
|
||||
className="rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
|
||||
>
|
||||
{capEnviando ? 'Registrando…' : 'Registrar lead'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{esRolConEquipo(rol) && resumen.equipo && (
|
||||
<section aria-label="Equipo" className="mt-12">
|
||||
<TituloSeccion>Equipo</TituloSeccion>
|
||||
<p className="mb-4 text-sm text-[#64748B]">
|
||||
Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
|
||||
</p>
|
||||
{resumen.equipo.porVendedor.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin leads asignados en el equipo" />
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{resumen.equipo.porVendedor.map((v) => (
|
||||
<li
|
||||
key={v.mondayUserId}
|
||||
className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
|
||||
<span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
|
||||
{v.leadsAsignados} lead(s)
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{resumen.equipo.porVendedor.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin leads asignados en el equipo" />
|
||||
) : (
|
||||
<ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{resumen.equipo.porVendedor.map((v) => (
|
||||
<li
|
||||
key={v.mondayUserId}
|
||||
className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
|
||||
<span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
|
||||
{v.leadsAsignados} lead(s)
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{descartando && (
|
||||
<ModalDescartar
|
||||
@@ -608,6 +656,6 @@ export default function MiDiaPage() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user