feat(cotizador): historial, compartir WhatsApp, folio+QR, comparador de unidades, alertas de inventario
- Mis cotizaciones (guardar con cliente, retomar, nueva) asociadas al vendedor del token - Compartir: resumen copiable + deep link wa.me; PDF con folio, vigencia y QR - GET /api/cotizaciones/:id/publico (público, datos mínimos sin PII del cliente) - Comparador lado a lado de 2 unidades (mismo o distinto desarrollo) - POST /api/cotizaciones/alertas-inventario: avisa al vendedor si una unidad cotizada cambia de estatus (dedup; wire con syncs documentado) - Fix: labels de propuesta mapeados a los reales del board Oportunidades - Tests: api 201, cotizador 82
This commit is contained in:
184
apps/cotizador/src/components/ComparadorUnidades.tsx
Normal file
184
apps/cotizador/src/components/ComparadorUnidades.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import type { Unidad, TipoPropuesta } from '../types'
|
||||
import { compararUnidades, type ColumnaComparador } from '../lib/comparadorUnidades'
|
||||
import { formatoMoneda } from '../lib/formatters'
|
||||
import { LISTA_DESARROLLOS, obtenerDesarrollo } from '../data/desarrollos'
|
||||
|
||||
interface Props {
|
||||
unidades: Unidad[]
|
||||
/** Tipo de propuesta activa en el cotizador (se aplica a ambas unidades) */
|
||||
tipo: TipoPropuesta
|
||||
apartado: number
|
||||
acabados: boolean
|
||||
}
|
||||
|
||||
const formatoM2 = (v: number | null): string => (v === null ? '—' : `${v.toLocaleString('es-MX')} m²`)
|
||||
|
||||
interface Fila {
|
||||
etiqueta: string
|
||||
obtener: (c: ColumnaComparador) => string
|
||||
destacada?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Comparador de 2 unidades (del mismo o distinto desarrollo), lado a lado,
|
||||
* con la propuesta activa calculada por el motor con los parámetros de cada
|
||||
* desarrollo.
|
||||
*/
|
||||
export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props) {
|
||||
const [abierto, setAbierto] = useState(false)
|
||||
const [codigoA, setCodigoA] = useState('')
|
||||
const [codigoB, setCodigoB] = useState('')
|
||||
|
||||
const porCodigo = useMemo(() => {
|
||||
const m = new Map<string, Unidad>()
|
||||
for (const u of unidades) m.set(`${u.desarrollo ?? 'DIAGONAL'}|${u.codigo}`, u)
|
||||
return m
|
||||
}, [unidades])
|
||||
|
||||
const unidadA = porCodigo.get(codigoA) ?? null
|
||||
const unidadB = porCodigo.get(codigoB) ?? null
|
||||
|
||||
const comparacion = useMemo(
|
||||
() => (unidadA && unidadB ? compararUnidades(unidadA, unidadB, tipo, apartado, acabados) : null),
|
||||
[unidadA, unidadB, tipo, apartado, acabados],
|
||||
)
|
||||
|
||||
const filas: Fila[] = [
|
||||
{ etiqueta: 'Desarrollo', obtener: (c) => c.desarrolloNombre },
|
||||
{ etiqueta: 'Modelo', obtener: (c) => c.unidad.modelo },
|
||||
{ etiqueta: 'Estatus', obtener: (c) => c.unidad.status },
|
||||
{ etiqueta: 'Sup. construcción', obtener: (c) => formatoM2(c.supConstruccion) },
|
||||
{ etiqueta: 'Precio de lista', obtener: (c) => formatoMoneda(c.precioLista) },
|
||||
{ etiqueta: 'Precio final c/desc.', obtener: (c) => formatoMoneda(c.propuesta.precioFinal) },
|
||||
{ etiqueta: 'Enganche', obtener: (c) => formatoMoneda(c.propuesta.enganche) },
|
||||
{
|
||||
etiqueta: 'Mensualidad',
|
||||
obtener: (c) =>
|
||||
c.propuesta.notaMensualidades
|
||||
? `— (${c.propuesta.notaMensualidades})`
|
||||
: c.propuesta.mensualidad === null
|
||||
? 'N/A'
|
||||
: `${c.propuesta.numMensualidades} × ${formatoMoneda(c.propuesta.mensualidad)}`,
|
||||
},
|
||||
{ etiqueta: 'Pago final', obtener: (c) => formatoMoneda(c.propuesta.pagoFinal) },
|
||||
{
|
||||
etiqueta: 'Total pagado',
|
||||
obtener: (c) => (c.total === null ? '—' : formatoMoneda(c.total)),
|
||||
destacada: true,
|
||||
},
|
||||
]
|
||||
|
||||
const selector = (id: string, valor: string, onChange: (v: string) => void, etiqueta: string) => (
|
||||
<div>
|
||||
<label htmlFor={id} className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase">
|
||||
{etiqueta}
|
||||
</label>
|
||||
<select
|
||||
id={id}
|
||||
value={valor}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
|
||||
>
|
||||
<option value="">Selecciona una unidad…</option>
|
||||
{LISTA_DESARROLLOS.map((dev) => {
|
||||
const delDesarrollo = unidades.filter((u) => (u.desarrollo ?? 'DIAGONAL') === dev)
|
||||
if (delDesarrollo.length === 0) return null
|
||||
return (
|
||||
<optgroup key={dev} label={obtenerDesarrollo(dev).nombre}>
|
||||
{delDesarrollo.map((u) => (
|
||||
<option key={`${dev}|${u.codigo}`} value={`${dev}|${u.codigo}`}>
|
||||
{u.codigo} — {u.modelo}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<section className="mt-16" aria-labelledby="comparador-unidades-titulo">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<h2
|
||||
id="comparador-unidades-titulo"
|
||||
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
Comparar unidades
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={abierto}
|
||||
aria-controls="comparador-unidades-contenido"
|
||||
onClick={() => setAbierto((v) => !v)}
|
||||
className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
|
||||
>
|
||||
{abierto ? 'Ocultar comparación' : 'Comparar 2 unidades'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{abierto && (
|
||||
<div id="comparador-unidades-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{selector('comparador-a', codigoA, setCodigoA, 'Unidad A')}
|
||||
{selector('comparador-b', codigoB, setCodigoB, 'Unidad B')}
|
||||
</div>
|
||||
|
||||
{!comparacion ? (
|
||||
<p className="mt-6 text-sm text-neutral-500">
|
||||
Selecciona dos unidades para ver la comparación lado a lado.
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-6 overflow-x-auto">
|
||||
<table className="w-full min-w-[480px] border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="w-48 p-3 text-left">
|
||||
<span className="sr-only">Concepto</span>
|
||||
</th>
|
||||
{[comparacion.a, comparacion.b].map((c) => (
|
||||
<th
|
||||
key={`${c.desarrolloId}|${c.unidad.codigo}`}
|
||||
scope="col"
|
||||
className="p-3 text-right text-xs font-bold tracking-widest text-neutral-900 uppercase"
|
||||
>
|
||||
{c.unidad.codigo}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((fila) => (
|
||||
<tr key={fila.etiqueta}>
|
||||
<th
|
||||
scope="row"
|
||||
className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
{fila.etiqueta}
|
||||
</th>
|
||||
{[comparacion.a, comparacion.b].map((c) => (
|
||||
<td
|
||||
key={`${c.desarrolloId}|${c.unidad.codigo}`}
|
||||
className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
|
||||
fila.destacada ? 'font-bold text-accent' : 'font-light text-neutral-900'
|
||||
}`}
|
||||
>
|
||||
{fila.obtener(c)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="mt-6 text-xs text-neutral-400">
|
||||
Cada unidad se calcula con los parámetros de su desarrollo y el mismo apartado.
|
||||
El enganche ya incluye la deducción del apartado.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
120
apps/cotizador/src/components/MisCotizaciones.tsx
Normal file
120
apps/cotizador/src/components/MisCotizaciones.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { useState } from 'react'
|
||||
import type { CotizacionGuardada } from '../services/api'
|
||||
import { formatoMoneda } from '../lib/formatters'
|
||||
|
||||
interface Props {
|
||||
cotizaciones: CotizacionGuardada[]
|
||||
cargando: boolean
|
||||
error: string | null
|
||||
/** Restaura la cotización en el cotizador (unidad + parámetros) */
|
||||
onRetomar: (c: CotizacionGuardada) => void
|
||||
}
|
||||
|
||||
const TITULO_PROPUESTA: Record<string, string> = {
|
||||
BANCARIO: 'Crédito Bancario',
|
||||
INFONAVIT: 'Crédito Infonavit-Cofinavit',
|
||||
COFINAVIT: 'Crédito Infonavit-Cofinavit',
|
||||
CONTADO: 'Contado',
|
||||
SEMI_CONTADO: 'Semi Contado',
|
||||
}
|
||||
|
||||
const formatoFechaHora = (iso: string): string =>
|
||||
new Date(iso).toLocaleString('es-MX', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
|
||||
/** Sección colapsable "Mis cotizaciones": historial del vendedor logueado */
|
||||
export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Props) {
|
||||
const [abierto, setAbierto] = useState(false)
|
||||
|
||||
return (
|
||||
<section aria-labelledby="mis-cotizaciones-titulo">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<h2
|
||||
id="mis-cotizaciones-titulo"
|
||||
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
Mis cotizaciones
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={abierto}
|
||||
aria-controls="mis-cotizaciones-contenido"
|
||||
onClick={() => setAbierto((v) => !v)}
|
||||
className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
|
||||
>
|
||||
{abierto ? 'Ocultar historial' : `Ver historial (${cotizaciones.length})`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{abierto && (
|
||||
<div id="mis-cotizaciones-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
|
||||
{cargando && <p className="text-sm text-neutral-500">Cargando historial…</p>}
|
||||
{error && <p className="text-xs text-red-700">{error}</p>}
|
||||
{!cargando && !error && cotizaciones.length === 0 && (
|
||||
<p className="text-sm text-neutral-500">
|
||||
Aún no tienes cotizaciones guardadas. Se guardan al generar el PDF.
|
||||
</p>
|
||||
)}
|
||||
{cotizaciones.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[640px] border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
{['Fecha', 'Folio', 'Cliente', 'Unidad', 'Propuesta', 'Precio final', ''].map(
|
||||
(h) => (
|
||||
<th
|
||||
key={h}
|
||||
scope="col"
|
||||
className="p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
),
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cotizaciones.map((c) => (
|
||||
<tr key={c.id}>
|
||||
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
|
||||
{formatoFechaHora(c.createdAt)}
|
||||
</td>
|
||||
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
|
||||
{c.folio ?? '—'}
|
||||
</td>
|
||||
<td className="border-t border-neutral-200 p-3">{c.clienteNombre}</td>
|
||||
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
|
||||
{c.unidadCodigo}
|
||||
<span className="ml-1 text-xs text-neutral-400">{c.desarrollo}</span>
|
||||
</td>
|
||||
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
|
||||
{TITULO_PROPUESTA[c.tipoPropuesta] ?? c.tipoPropuesta}
|
||||
</td>
|
||||
<td className="border-t border-neutral-200 p-3 text-right whitespace-nowrap">
|
||||
{formatoMoneda(c.precioFinal)}
|
||||
</td>
|
||||
<td className="border-t border-neutral-200 p-3 text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRetomar(c)}
|
||||
className="border border-accent bg-white px-3 py-1.5 text-xs font-bold tracking-widest text-accent uppercase transition-colors duration-150 hover:bg-accent hover:text-white"
|
||||
>
|
||||
Retomar
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
131
apps/cotizador/src/components/ModalCliente.tsx
Normal file
131
apps/cotizador/src/components/ModalCliente.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { Cliente } from '../types'
|
||||
|
||||
interface Props {
|
||||
abierto: boolean
|
||||
nombreInicial?: string
|
||||
telefonoInicial?: string
|
||||
emailInicial?: string
|
||||
/** Aceptar con los datos capturados (nombre mínimo 3 caracteres) */
|
||||
onAceptar: (cliente: Cliente) => void
|
||||
onCancelar: () => void
|
||||
}
|
||||
|
||||
const campoInput =
|
||||
'w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
|
||||
const etiquetaCampo = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
|
||||
|
||||
/**
|
||||
* Modal sencillo para pedir los datos del cliente cuando se va a
|
||||
* guardar/generar el PDF y aún no se capturaron en el panel.
|
||||
*/
|
||||
export function ModalCliente({ abierto, nombreInicial = '', telefonoInicial = '', emailInicial = '', onAceptar, onCancelar }: Props) {
|
||||
const [nombre, setNombre] = useState(nombreInicial)
|
||||
const [telefono, setTelefono] = useState(telefonoInicial)
|
||||
const [email, setEmail] = useState(emailInicial)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (abierto) {
|
||||
setNombre(nombreInicial)
|
||||
setTelefono(telefonoInicial)
|
||||
setEmail(emailInicial)
|
||||
setError(null)
|
||||
}
|
||||
}, [abierto, nombreInicial, telefonoInicial, emailInicial])
|
||||
|
||||
if (!abierto) return null
|
||||
|
||||
const aceptar = () => {
|
||||
if (nombre.trim().length < 3) {
|
||||
setError('El nombre del cliente es requerido (mínimo 3 caracteres)')
|
||||
return
|
||||
}
|
||||
onAceptar({
|
||||
nombre: nombre.trim(),
|
||||
telefono: telefono.trim() || undefined,
|
||||
email: email.trim() || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-900/50 p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-cliente-titulo"
|
||||
>
|
||||
<div className="w-full max-w-md border border-neutral-200 bg-white p-6">
|
||||
<h2
|
||||
id="modal-cliente-titulo"
|
||||
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
Datos del cliente
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
Se necesitan para guardar la cotización y generar el PDF.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
<div>
|
||||
<label htmlFor="modal-nombre" className={etiquetaCampo}>
|
||||
Nombre *
|
||||
</label>
|
||||
<input
|
||||
id="modal-nombre"
|
||||
type="text"
|
||||
autoFocus
|
||||
value={nombre}
|
||||
onChange={(e) => setNombre(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && aceptar()}
|
||||
className={campoInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="modal-telefono" className={etiquetaCampo}>
|
||||
Teléfono (opcional)
|
||||
</label>
|
||||
<input
|
||||
id="modal-telefono"
|
||||
type="tel"
|
||||
value={telefono}
|
||||
onChange={(e) => setTelefono(e.target.value)}
|
||||
className={campoInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="modal-email" className={etiquetaCampo}>
|
||||
Correo electrónico (opcional)
|
||||
</label>
|
||||
<input
|
||||
id="modal-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={campoInput}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="mt-3 text-xs text-red-700">{error}</p>}
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelar}
|
||||
className="border border-neutral-300 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-600 uppercase transition-colors duration-150 hover:bg-neutral-100"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={aceptar}
|
||||
className="bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-accent-hover"
|
||||
>
|
||||
Continuar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user