consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: reskin NovaSpark en las 7 apps

Browse Source 
Del look editorial (verde #1B4332, esquinas a 0, botones en mayusculas)
al sistema NovaSpark: primario azul #2563EB, detalle naranja #F97316,
fondo #F8FAFC con tarjetas blancas rounded-xl + shadow-sm, chips
rounded-full semanticos, focus ring azul, transiciones 100-200ms.
Incluye headers de tabla en los PDFs (cotizador y estado de cuenta).
This commit is contained in:
Consult AS Technology
2026-09-03 02:35:34 +00:00
parent 89fcd1c579
commit 599dce2629
78 changed files with 842 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
apps/mi-dia/src/pages/MiDiaPage.tsx
View File

@@ -17,19 +17,24 @@ import { cambiarEstadoLead, crearLead, descartarLead, fetchResumenMiDia } from '
import { getSesion } from '../services/auth'
function TituloSeccion({ children }: { children: string }) {
return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{children}</h2>
}
function EstadoVacio({ mensaje }: { mensaje: string }) {
return (
<div className="flex h-24 items-center justify-center border border-dashed border-neutral-300">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
<div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white">
<p className="text-xs font-semibold uppercase tracking-wider text-[#94A3B8]">{mensaje}</p>
</div>
)
}
const CLASE_BOTON_ACCION =
'border border-accent px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50'
'rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50'
const CLASE_INPUT =
'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
/** Modal de descarte: motivo (dropdown CRM) + comentario opcional */
function ModalDescartar({
@@ -47,9 +52,9 @@ function ModalDescartar({
const [comentario, setComentario] = useState('')
return (
<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 border border-neutral-300 bg-white p-6">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-500">Descartar lead</p>
<p className="mt-2 text-lg font-light">{lead.nombre}</p>
<div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Descartar lead</p>
<p className="mt-2 text-lg font-medium text-[#111827]">{lead.nombre}</p>
<form
className="mt-6 space-y-4"
onSubmit={(e) => {
@@ -58,14 +63,14 @@ function ModalDescartar({
}}
>
<div>
<label htmlFor="motivo-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="motivo-descarte" className={CLASE_LABEL}>
Motivo
</label>
<select
id="motivo-descarte"
value={motivo}
onChange={(e) => setMotivo(e.target.value as MotivoNoCompra)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
>
{MOTIVOS_NO_COMPRA.map((m) => (
<option key={m} value={m}>
@@ -75,7 +80,7 @@ function ModalDescartar({
</select>
</div>
<div>
<label htmlFor="comentario-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="comentario-descarte" className={CLASE_LABEL}>
Comentario (opcional)
</label>
<textarea
@@ -83,7 +88,7 @@ function ModalDescartar({
value={comentario}
onChange={(e) => setComentario(e.target.value)}
rows={3}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
/>
</div>
<div className="flex justify-end gap-3">
@@ -91,14 +96,14 @@ function ModalDescartar({
type="button"
onClick={onCancelar}
disabled={enviando}
className="border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500 disabled:opacity-50"
className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50"
>
Cancelar
</button>
<button
type="submit"
disabled={enviando}
className="bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
className="rounded-lg bg-red-600 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-red-700 disabled:opacity-50"
>
{enviando ? 'Descartando…' : 'Descartar'}
</button>
@@ -124,16 +129,16 @@ function FilaLead({
const [conCita, setConCita] = useState(false)
const [fechaCita, setFechaCita] = useState('')
return (
<li className="border border-neutral-200 p-4">
<li className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-sm font-medium">{lead.nombre}</p>
<p className="mt-1 text-xs text-neutral-500">
<p className="mt-1 text-xs text-[#64748B]">
{lead.telefono || 'Sin teléfono'}
{lead.origen ? ` · ${lead.origen}` : ''}
</p>
</div>
<span className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
<span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
{lead.estado || 'Sin estado'}
</span>
</div>
@@ -158,14 +163,14 @@ function FilaLead({
aria-label="Fecha de la cita"
value={fechaCita}
onChange={(e) => setFechaCita(e.target.value)}
className="border border-neutral-300 px-2 py-1.5 text-xs focus:border-accent focus:outline-none"
className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
/>
)}
<button
type="button"
disabled={enviando}
onClick={onDescartar}
className="border border-red-700 px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-700 hover:text-white disabled:opacity-50"
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50"
>
Descartar
</button>
@@ -258,31 +263,33 @@ export default function MiDiaPage() {
<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-bold uppercase tracking-widest text-accent">FRASA · Mi día</p>
<h1 className="mt-2 text-3xl font-light text-neutral-900">{nombreVendedor}</h1>
<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>
</div>
<button
type="button"
onClick={() => void cargar()}
disabled={cargando}
className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
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>
{error && (
<p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
<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 border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700">
<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 border border-neutral-300 px-4 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500">
<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>
)}
@@ -309,14 +316,17 @@ export default function MiDiaPage() {
) : (
<ul className="space-y-2">
{resumen.misActividadesHoy.map((a) => (
<li key={a.id} className="flex items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
<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-widest text-neutral-400">{a.tipo}</span> : null}
{a.tipo ? <span className="ml-2 text-xs uppercase tracking-wider text-[#94A3B8]">{a.tipo}</span> : null}
</p>
<span
className={`text-xs font-bold uppercase tracking-widest ${
esActividadVencida(a.fecha, hoy) ? 'text-red-700' : 'text-neutral-500'
className={`text-xs font-medium ${
esActividadVencida(a.fecha, hoy) ? 'text-red-600' : 'text-[#64748B]'
}`}
>
{formatoFechaCorta(a.fecha)}
@@ -332,14 +342,17 @@ export default function MiDiaPage() {
<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 border border-neutral-200 px-4 py-3">
<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-neutral-400">{a.unidadCodigo}</span> : null}
{a.unidadCodigo ? <span className="ml-2 text-xs text-[#94A3B8]">{a.unidadCodigo}</span> : null}
</p>
<span
className={`text-xs font-bold uppercase tracking-widest ${
a.diasRestantes <= 1 ? 'text-red-700' : 'text-amber-700'
className={`text-xs font-medium ${
a.diasRestantes <= 1 ? 'text-red-600' : 'text-amber-600'
}`}
>
{textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
@@ -376,19 +389,22 @@ export default function MiDiaPage() {
) : (
<ul className="space-y-2">
{resumen.misCapturas.map((c) => (
<li key={c.leadId} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
<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-neutral-500">
<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="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
<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-bold uppercase tracking-widest text-neutral-500">
<span className="text-xs font-medium text-[#64748B]">
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
</span>
</div>
@@ -405,24 +421,27 @@ export default function MiDiaPage() {
) : (
<ul className="space-y-2">
{resumen.misClientes.map((c) => (
<li key={c.id} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
<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-neutral-500">
<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={`border px-2 py-1 text-xs font-bold uppercase tracking-widest ${
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
c.completado
? 'border-neutral-300 text-neutral-500'
: 'border-amber-700 text-amber-700'
? 'bg-gray-100 text-gray-600'
: 'bg-amber-50 text-amber-700'
}`}
>
{c.completado ? 'Cliente' : 'En captura'}
</span>
<span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
<span className="text-xs font-medium text-[#64748B]">
{formatoFechaCorta(c.capturadoEn.slice(0, 10))}
</span>
</div>
@@ -434,9 +453,12 @@ export default function MiDiaPage() {
<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 border border-neutral-200 p-6 sm:grid-cols-2">
<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="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="cap-nombre" className={CLASE_LABEL}>
Nombre
</label>
<input
@@ -445,11 +467,11 @@ export default function MiDiaPage() {
value={capNombre}
onChange={(e) => setCapNombre(e.target.value)}
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
/>
</div>
<div>
<label htmlFor="cap-telefono" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="cap-telefono" className={CLASE_LABEL}>
Teléfono
</label>
<input
@@ -457,11 +479,11 @@ export default function MiDiaPage() {
type="tel"
value={capTelefono}
onChange={(e) => setCapTelefono(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
/>
</div>
<div>
<label htmlFor="cap-email" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="cap-email" className={CLASE_LABEL}>
Email
</label>
<input
@@ -469,18 +491,18 @@ export default function MiDiaPage() {
type="email"
value={capEmail}
onChange={(e) => setCapEmail(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
/>
</div>
<div>
<label htmlFor="cap-origen" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="cap-origen" className={CLASE_LABEL}>
Origen
</label>
<select
id="cap-origen"
value={capOrigen}
onChange={(e) => setCapOrigen(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
>
{ORIGENES_LEAD.map((o) => (
<option key={o} value={o}>
@@ -490,14 +512,14 @@ export default function MiDiaPage() {
</select>
</div>
<div>
<label htmlFor="cap-desarrollo" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<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="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
>
<option value="">Sin especificar</option>
{DESARROLLOS_LEAD.map((d) => (
@@ -508,7 +530,7 @@ export default function MiDiaPage() {
</select>
</div>
<div>
<label htmlFor="cap-notas" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
<label htmlFor="cap-notas" className={CLASE_LABEL}>
Notas
</label>
<input
@@ -516,14 +538,16 @@ export default function MiDiaPage() {
type="text"
value={capNotas}
onChange={(e) => setCapNotas(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className={CLASE_INPUT}
/>
</div>
{capMensaje && (
<p
role="status"
className={`border px-4 py-3 text-xs font-bold uppercase tracking-widest sm:col-span-2 ${
capMensaje.tipo === 'ok' ? 'border-accent text-accent' : 'border-red-700 text-red-700'
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}
@@ -533,7 +557,7 @@ export default function MiDiaPage() {
<button
type="submit"
disabled={capEnviando}
className="bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
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>
@@ -544,7 +568,7 @@ export default function MiDiaPage() {
{esRolConEquipo(rol) && resumen.equipo && (
<section aria-label="Equipo" className="mt-12">
<TituloSeccion>Equipo</TituloSeccion>
<p className="mb-4 text-sm text-neutral-500">
<p className="mb-4 text-sm text-[#64748B]">
Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
</p>
{resumen.equipo.porVendedor.length === 0 ? (
@@ -552,9 +576,12 @@ export default function MiDiaPage() {
) : (
<ul className="space-y-2">
{resumen.equipo.porVendedor.map((v) => (
<li key={v.mondayUserId} className="flex items-center justify-between border border-neutral-200 px-4 py-3">
<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="text-xs font-bold uppercase tracking-widest text-neutral-500">
<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>