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

apps/cotizador/src/components/ComparadorUnidades.tsx

@@ -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>
+  )
+}

apps/cotizador/src/components/MisCotizaciones.tsx

@@ -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>
+  )
+}

apps/cotizador/src/components/ModalCliente.tsx

@@ -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>
+  )
+}

apps/cotizador/src/hooks/useCotizacion.ts

@@ -28,9 +28,27 @@ interface UseCotizacionResult {
   errorApartado: string | null
   descuentos: DescuentosPropuestas
   setDescuento: (clave: keyof DescuentosPropuestas, valor: number) => void
+  /** Índice de la propuesta elegida (para guardar/compartir) */
+  propuestaIndex: number
+  setPropuestaIndex: (i: number) => void
   precioLista: number
   numMeses: number | null
   propuestas: PropuestaResultado[]
+  /** Restaura el estado completo desde una cotización guardada (historial) */
+  restaurar: (estado: EstadoRestaurar) => void
+  /** Reinicia la cotización (botón "Nueva") */
+  nueva: () => void
+}
+
+export interface EstadoRestaurar {
+  desarrollo: string
+  /** Unidad ya resuelta del inventario cargado */
+  unidad: Unidad
+  acabados: boolean
+  apartado: number
+  /** Descuento (fracción) de la propuesta elegida; se aplica sobre su clave */
+  descuento?: number
+  propuestaIndex?: number
 }
 
 /** Estado central de la cotización: desarrollo, unidad, acabados, apartado y descuentos */
@@ -40,6 +58,7 @@ export function useCotizacion(): UseCotizacionResult {
   const [acabados, setAcabados] = useState(false)
   const [apartado, setApartado] = useState<number>(APARTADO_DEFAULT)
   const [descuentos, setDescuentos] = useState<DescuentosPropuestas>(descuentosDefault(DESARROLLO_DEFAULT))
+  const [propuestaIndex, setPropuestaIndex] = useState(0)
 
   const params = obtenerDesarrollo(desarrollo)
 
@@ -48,12 +67,36 @@ export function useCotizacion(): UseCotizacionResult {
     setUnidad(null)
     setAcabados(false)
     setDescuentos(descuentosDefault(id))
+    setPropuestaIndex(0)
   }
 
   const setDescuento = (clave: keyof DescuentosPropuestas, valor: number) => {
     setDescuentos((prev) => ({ ...prev, [clave]: valor }))
   }
 
+  const restaurar = (estado: EstadoRestaurar) => {
+    setDesarrolloState(estado.desarrollo)
+    setUnidad(estado.unidad)
+    setAcabados(estado.acabados)
+    setApartado(estado.apartado)
+    const base = descuentosDefault(estado.desarrollo)
+    if (estado.descuento !== undefined) {
+      const idx = estado.propuestaIndex ?? 0
+      const clave = obtenerDesarrollo(estado.desarrollo).propuestas[idx]?.claveDescuento
+      if (clave) base[clave] = estado.descuento
+    }
+    setDescuentos(base)
+    setPropuestaIndex(estado.propuestaIndex ?? 0)
+  }
+
+  const nueva = () => {
+    setUnidad(null)
+    setAcabados(false)
+    setApartado(APARTADO_DEFAULT)
+    setDescuentos(descuentosDefault(desarrollo))
+    setPropuestaIndex(0)
+  }
+
   const numMeses = useMemo(
     () => (unidad ? resolverNumMensualidades(unidad, params) : null),
     [unidad, params],
@@ -87,8 +130,12 @@ export function useCotizacion(): UseCotizacionResult {
     errorApartado,
     descuentos,
     setDescuento,
+    propuestaIndex,
+    setPropuestaIndex,
     precioLista,
     numMeses,
     propuestas,
+    restaurar,
+    nueva,
   }
 }

apps/cotizador/src/lib/comparadorUnidades.ts

@@ -0,0 +1,63 @@
+import type { Unidad, TipoPropuesta } from '../types'
+import {
+  calcularPropuestas,
+  obtenerPrecioLista,
+  totalPagado,
+  type PropuestaResultado,
+} from './calculations'
+import { descuentosDefault, obtenerDesarrollo } from '../data/desarrollos'
+
+export interface ColumnaComparador {
+  unidad: Unidad
+  desarrolloId: string
+  desarrolloNombre: string
+  precioLista: number
+  supConstruccion: number | null
+  /** La propuesta del tipo activo, calculada con los defaults del desarrollo de la unidad */
+  propuesta: PropuestaResultado
+  /** Total pagado (apartado + enganche + mensualidades + pago final); null si no se puede conocer */
+  total: number | null
+}
+
+export interface ComparacionUnidades {
+  a: ColumnaComparador
+  b: ColumnaComparador
+}
+
+/**
+ * Comparador de 2 unidades (del mismo o distinto desarrollo): calcula para
+ * cada una la propuesta del tipo activo con los parámetros de SU desarrollo.
+ * El apartado y acabados se aplican igual a ambas (acabados se ignora en
+ * desarrollos de precio único, igual que en el cotizador).
+ */
+export function compararUnidades(
+  unidadA: Unidad,
+  unidadB: Unidad,
+  tipo: TipoPropuesta,
+  apartado: number,
+  acabados: boolean,
+): ComparacionUnidades {
+  const columna = (unidad: Unidad): ColumnaComparador => {
+    const desarrolloId = unidad.desarrollo ?? 'DIAGONAL'
+    const params = obtenerDesarrollo(desarrolloId)
+    const propuestas = calcularPropuestas({
+      unidad,
+      acabados,
+      apartado,
+      descuentos: descuentosDefault(desarrolloId),
+      desarrollo: desarrolloId,
+    })
+    const propuesta = propuestas.find((p) => p.tipo === tipo) ?? propuestas[0]
+    if (!propuesta) throw new Error(`El desarrollo ${desarrolloId} no tiene propuestas`)
+    return {
+      unidad,
+      desarrolloId,
+      desarrolloNombre: params.nombre,
+      precioLista: obtenerPrecioLista(unidad, acabados),
+      supConstruccion: unidad.supConstruccion,
+      propuesta,
+      total: totalPagado(propuesta, apartado),
+    }
+  }
+  return { a: columna(unidadA), b: columna(unidadB) }
+}

apps/cotizador/src/lib/compartir.ts

@@ -0,0 +1,62 @@
+import type { PropuestaResultado } from './calculations'
+import { formatoMoneda, formatoFechaLarga } from './formatters'
+
+export interface DatosCompartir {
+  unidadCodigo: string
+  desarrolloNombre: string
+  propuesta: PropuestaResultado
+  apartado: number
+  vigencia: Date
+  /** Folio y URL pública solo existen si la cotización ya se guardó en el API */
+  folio?: string
+  urlPublica?: string
+}
+
+/**
+ * Texto resumen de la propuesta, listo para copiar/pegar en WhatsApp.
+ * Incluye unidad, desarrollo, propuesta elegida, montos y vigencia.
+ */
+export function textoCompartir(d: DatosCompartir): string {
+  const lineas: string[] = []
+  lineas.push(
+    d.folio ? `Cotización ${d.folio} — FRASA Desarrollos` : 'Cotización — FRASA Desarrollos',
+  )
+  lineas.push(`Desarrollo: ${d.desarrolloNombre}`)
+  lineas.push(`Unidad: ${d.unidadCodigo}`)
+  lineas.push(`Propuesta: ${d.propuesta.titulo}`)
+  lineas.push(`Precio final c/desc: ${formatoMoneda(d.propuesta.precioFinal)}`)
+  lineas.push(`Apartado: ${formatoMoneda(d.apartado)}`)
+  lineas.push(`Enganche: ${formatoMoneda(d.propuesta.enganche)}`)
+  if (d.propuesta.notaMensualidades) {
+    lineas.push(`Mensualidades: — (${d.propuesta.notaMensualidades})`)
+  } else if (d.propuesta.mensualidad !== null) {
+    lineas.push(
+      `Mensualidades: ${d.propuesta.numMensualidades} × ${formatoMoneda(d.propuesta.mensualidad)}`,
+    )
+  } else {
+    lineas.push('Mensualidades: N/A')
+  }
+  lineas.push(`Pago final: ${formatoMoneda(d.propuesta.pagoFinal)}`)
+  lineas.push(`Vigencia: hasta el ${formatoFechaLarga(d.vigencia)}`)
+  if (d.urlPublica) lineas.push(`Consulta: ${d.urlPublica}`)
+  return lineas.join('\n')
+}
+
+/**
+ * Normaliza un teléfono a dígitos para wa.me; null si no es usable.
+ * Agrega 52 (México) cuando son 10 dígitos locales.
+ */
+export function telefonoWhatsApp(telefono?: string): string | null {
+  if (!telefono) return null
+  const digitos = telefono.replace(/\D/g, '')
+  if (digitos.length === 10) return `52${digitos}`
+  if (digitos.length >= 11 && digitos.length <= 15) return digitos
+  return null
+}
+
+/** Deep link wa.me con el texto urlencoded; null si no hay teléfono válido */
+export function urlWhatsApp(telefono: string | undefined, texto: string): string | null {
+  const numero = telefonoWhatsApp(telefono)
+  if (!numero) return null
+  return `https://wa.me/${numero}?text=${encodeURIComponent(texto)}`
+}

apps/cotizador/src/lib/folio.ts

@@ -0,0 +1,8 @@
+/**
+ * Folio corto de cotización, derivado de forma determinista del id (uuid).
+ * Espejo de api-gateway/src/utils/folio.ts (mantener sincronizados).
+ */
+export function folioCotizacion(id: string): string {
+  const hex = id.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
+  return `COT-${(hex || id.toUpperCase()).slice(0, 6)}`
+}

apps/cotizador/src/lib/herramientas.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import { folioCotizacion } from './folio'
+import { textoCompartir, telefonoWhatsApp, urlWhatsApp } from './compartir'
+import { compararUnidades } from './comparadorUnidades'
+import { APARTADO_DEFAULT, calcularPropuestas, DESCUENTOS_DEFAULT, totalPagado } from './calculations'
+import { UNIDADES_SEED } from '../data/unidades'
+import { UNIDADES_ATELIER } from '../data/unidades-atelier'
+import { formatoMoneda } from './formatters'
+
+describe('folioCotizacion', () => {
+  it('deriva COT-XXXXXX (6 hex mayúsculas) del uuid, igual que el API', () => {
+    expect(folioCotizacion('3f8a1b2c-9d4e-4f5a-b6c7-d8e9f0a1b2c3')).toBe('COT-3F8A1B')
+    expect(folioCotizacion('xyz')).toBe('COT-XYZ')
+  })
+})
+
+describe('textoCompartir', () => {
+  const propuesta = calcularPropuestas({
+    unidad: UNIDADES_SEED[0],
+    acabados: true,
+    apartado: APARTADO_DEFAULT,
+    descuentos: { ...DESCUENTOS_DEFAULT },
+    numMeses: 14,
+  })[0]
+
+  const base = {
+    unidadCodigo: 'U-101',
+    desarrolloNombre: 'Diagonal',
+    propuesta,
+    apartado: APARTADO_DEFAULT,
+    vigencia: new Date('2026-08-31T00:00:00'),
+  }
+
+  it('incluye unidad, desarrollo, propuesta, montos y vigencia', () => {
+    const texto = textoCompartir({ ...base, folio: 'COT-3F8A1B', urlPublica: 'https://x/api/cotizaciones/1/publico' })
+    expect(texto).toContain('Cotización COT-3F8A1B')
+    expect(texto).toContain('Desarrollo: Diagonal')
+    expect(texto).toContain('Unidad: U-101')
+    expect(texto).toContain(`Propuesta: ${propuesta.titulo}`)
+    expect(texto).toContain(`Enganche: ${formatoMoneda(propuesta.enganche)}`)
+    expect(texto).toContain(`Pago final: ${formatoMoneda(propuesta.pagoFinal)}`)
+    expect(texto).toContain('Vigencia: hasta el 31 de agosto de 2026')
+    expect(texto).toContain('Consulta: https://x/api/cotizaciones/1/publico')
+  })
+
+  it('sin folio/URL usa encabezado genérico y omite la liga', () => {
+    const texto = textoCompartir(base)
+    expect(texto).toContain('Cotización — FRASA Desarrollos')
+    expect(texto).not.toContain('Consulta:')
+  })
+
+  it('contado (mensualidad null) muestra Mensualidades: N/A', () => {
+    const contado = calcularPropuestas({
+      unidad: UNIDADES_SEED[0],
+      acabados: true,
+      apartado: APARTADO_DEFAULT,
+      descuentos: { ...DESCUENTOS_DEFAULT },
+      numMeses: 14,
+    }).find((p) => p.tipo === 'CONTADO')!
+    expect(textoCompartir({ ...base, propuesta: contado })).toContain('Mensualidades: N/A')
+  })
+})
+
+describe('telefonoWhatsApp / urlWhatsApp', () => {
+  it('10 dígitos locales → agrega 52', () => {
+    expect(telefonoWhatsApp('664 123 4567')).toBe('526641234567')
+  })
+
+  it('con lada internacional la conserva; basura → null', () => {
+    expect(telefonoWhatsApp('+1 (664) 123-4567')).toBe('16641234567')
+    expect(telefonoWhatsApp('12345')).toBeNull()
+    expect(telefonoWhatsApp(undefined)).toBeNull()
+  })
+
+  it('urlWhatsApp urlencodea el texto; null sin teléfono', () => {
+    const url = urlWhatsApp('6641234567', 'Hola\nlínea 2')
+    expect(url).toBe(`https://wa.me/526641234567?text=${encodeURIComponent('Hola\nlínea 2')}`)
+    expect(urlWhatsApp(undefined, 'Hola')).toBeNull()
+  })
+})
+
+describe('compararUnidades', () => {
+  const diagonal = UNIDADES_SEED[0] // U-101 DIAGONAL
+  const atelier = UNIDADES_ATELIER[0]
+
+  it('compara 2 unidades de distinto desarrollo con los parámetros de cada una', () => {
+    const r = compararUnidades(diagonal, atelier, 'CREDITO_BANCARIO', APARTADO_DEFAULT, true)
+    expect(r.a.desarrolloId).toBe('DIAGONAL')
+    expect(r.b.desarrolloId).toBe('ATELIER')
+    expect(r.a.propuesta.tipo).toBe('CREDITO_BANCARIO')
+    expect(r.b.propuesta.tipo).toBe('CREDITO_BANCARIO')
+    // Precios de lista según acabados/precio único
+    expect(r.a.precioLista).toBe(diagonal.precioConAcabados)
+    expect(r.b.precioLista).toBe(atelier.precioConAcabados)
+    // Totales consistentes con el motor
+    expect(r.a.total).toBe(totalPagado(r.a.propuesta, APARTADO_DEFAULT))
+    expect(r.b.total).toBe(totalPagado(r.b.propuesta, APARTADO_DEFAULT))
+  })
+
+  it('expone m² de construcción y nombre de desarrollo para la tabla', () => {
+    const r = compararUnidades(diagonal, atelier, 'CONTADO', APARTADO_DEFAULT, false)
+    expect(r.a.supConstruccion).toBe(diagonal.supConstruccion)
+    expect(r.a.desarrolloNombre).toBe('Diagonal')
+    expect(r.a.propuesta.tipo).toBe('CONTADO')
+    // Sin acabados en DIAGONAL el precio de lista baja
+    expect(r.a.precioLista).toBe(diagonal.precioSinAcabados)
+  })
+
+  it('total null cuando el plazo no se puede conocer (sin fecha de entrega)', () => {
+    const sinFecha = { ...diagonal, fechaEntrega: null }
+    const r = compararUnidades(sinFecha, diagonal, 'CREDITO_BANCARIO', APARTADO_DEFAULT, true)
+    expect(r.a.total).toBeNull()
+    expect(r.b.total).not.toBeNull()
+  })
+})

apps/cotizador/src/lib/pdf.test.ts

@@ -29,6 +29,32 @@ describe('crearDocumentoPdf', () => {
     const texto = doc.output('datauristring')
     expect(texto.length).toBeGreaterThan(0)
   })
+
+  it('imprime folio, vigencia y QR cuando la cotización ya está guardada', () => {
+    const unidad = UNIDADES_SEED[0]
+    const propuestas = calcularPropuestas({
+      unidad,
+      acabados: true,
+      apartado: APARTADO_DEFAULT,
+      descuentos: { ...DESCUENTOS_DEFAULT },
+      numMeses: 14,
+    })
+    // PNG 1x1 válido; en la app lo genera la librería qrcode
+    const png1x1 =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
+    const { doc } = crearDocumentoPdf({
+      unidad,
+      acabados: true,
+      apartado: APARTADO_DEFAULT,
+      precioLista: unidad.precioConAcabados,
+      propuestas,
+      cliente: { nombre: 'Juan Pérez' },
+      folio: 'COT-3F8A1B',
+      qrDataUrl: png1x1,
+      vigencia: new Date('2026-08-31T00:00:00'),
+    })
+    expect(doc.getNumberOfPages()).toBeGreaterThanOrEqual(1)
+  })
 })
 
 describe('cuota de mantenimiento', () => {

apps/cotizador/src/lib/pdf.ts

@@ -14,6 +14,12 @@ export interface PdfInput {
   cliente: Cliente
   /** Parámetros del desarrollo; por defecto DIAGONAL */
   desarrollo?: ParametrosDesarrollo
+  /** Folio corto (COT-XXXXXX); solo existe si la cotización se guardó en el API */
+  folio?: string
+  /** Data URL PNG del QR que apunta al endpoint público de la cotización */
+  qrDataUrl?: string
+  /** Fecha límite de vigencia que se imprime bajo el encabezado */
+  vigencia?: Date
 }
 
 const formatoM2Pdf = (v: number | null): string => (v === null ? '—' : `${v} m2`)
@@ -43,7 +49,7 @@ export interface DocumentoPdf {
 }
 
 /** Construye el documento PDF "ANEXO A" (sin descargarlo) */
-export function crearDocumentoPdf({ unidad, acabados, apartado, precioLista, propuestas, cliente, desarrollo }: PdfInput): DocumentoPdf {
+export function crearDocumentoPdf({ unidad, acabados, apartado, precioLista, propuestas, cliente, desarrollo, folio, qrDataUrl, vigencia }: PdfInput): DocumentoPdf {
   const params = desarrollo ?? DESARROLLOS[DESARROLLO_DEFAULT]
   const doc = new jsPDF()
   const hoy = new Date()
@@ -75,7 +81,26 @@ export function crearDocumentoPdf({ unidad, acabados, apartado, precioLista, pro
   y += 5
   doc.setFont('helvetica', 'bold')
   doc.text(`DESARROLLO ${params.nombre.toUpperCase()}`, 105, y, { align: 'center' })
-  y += 8
+  y += 6
+
+  // 1.1 Folio, vigencia y QR (cuando la cotización ya quedó guardada en el API)
+  if (folio) {
+    doc.setFontSize(9)
+    doc.setFont('helvetica', 'bold')
+    doc.text(`FOLIO: ${folio}`, 105, y, { align: 'center' })
+    y += 5
+  }
+  if (vigencia) {
+    doc.setFontSize(9)
+    doc.setFont('helvetica', 'normal')
+    doc.text(`VIGENTE HASTA: ${formatoFechaLarga(vigencia).toUpperCase()}`, 105, y, { align: 'center' })
+    y += 5
+  }
+  if (qrDataUrl) {
+    // Esquina superior derecha; el QR apunta al resumen público de la cotización
+    doc.addImage(qrDataUrl, 'PNG', 210 - MARGEN - 28, MARGEN, 28, 28)
+  }
+  y += 2
 
   // 2. Tabla de unidad
   autoTable(doc, {

apps/cotizador/src/pages/CotizadorPage.tsx

@@ -1,16 +1,31 @@
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
+import QRCode from 'qrcode'
 import { useUnidades } from '../hooks/useUnidades'
 import { useCotizacion } from '../hooks/useCotizacion'
 import { UnitSelector } from '../components/UnitSelector'
 import { UnitInfoCard } from '../components/UnitInfoCard'
 import { ProposalCard } from '../components/ProposalCard'
 import { ComparadorPropuestas } from '../components/ComparadorPropuestas'
+import { ComparadorUnidades } from '../components/ComparadorUnidades'
+import { MisCotizaciones } from '../components/MisCotizaciones'
+import { ModalCliente } from '../components/ModalCliente'
 import { generarPdf } from '../lib/pdf'
 import { formatoMoneda, formatoFechaLarga } from '../lib/formatters'
 import { calcularVigencia } from '../lib/vigencia'
+import { folioCotizacion } from '../lib/folio'
+import { textoCompartir, urlWhatsApp } from '../lib/compartir'
 import { LISTA_DESARROLLOS, obtenerDesarrollo } from '../data/desarrollos'
+import {
+  getMisCotizaciones,
+  guardarCotizacion,
+  urlPublicaCotizacion,
+  TIPO_A_API,
+  TIPO_DE_API,
+  type CotizacionGuardada,
+} from '../services/api'
 import type { Cliente } from '../types'
 
 const esquemaCliente = z.object({
@@ -46,17 +61,50 @@ export default function CotizadorPage() {
     apartadoEfectivo,
     errorApartado,
     setDescuento,
+    propuestaIndex,
+    setPropuestaIndex,
     precioLista,
     numMeses,
     propuestas,
+    restaurar,
+    nueva,
   } = cotizacion
 
   const unidadesDesarrollo = unidades.filter((u) => (u.desarrollo ?? 'DIAGONAL') === desarrollo)
   const disponiblesDesarrollo = unidadesDesarrollo.filter((u) => u.status === 'DISPONIBLE').length
 
+  // Historial del vendedor + última cotización guardada (para folio/QR/compartir)
+  const [misCotizaciones, setMisCotizaciones] = useState<CotizacionGuardada[]>([])
+  const [cargandoMias, setCargandoMias] = useState(true)
+  const [errorMias, setErrorMias] = useState<string | null>(null)
+  const [ultimaGuardada, setUltimaGuardada] = useState<CotizacionGuardada | null>(null)
+  const [modalClienteAbierto, setModalClienteAbierto] = useState(false)
+  const [guardando, setGuardando] = useState(false)
+  const [aviso, setAviso] = useState<string | null>(null)
+
+  useEffect(() => {
+    let vivo = true
+    getMisCotizaciones()
+      .then((lista) => {
+        if (vivo) setMisCotizaciones(lista)
+      })
+      .catch((err) => {
+        console.warn('[api] No se pudo cargar el historial de cotizaciones.', err)
+        if (vivo) setErrorMias('No se pudo cargar el historial (sin conexión al servidor).')
+      })
+      .finally(() => {
+        if (vivo) setCargandoMias(false)
+      })
+    return () => {
+      vivo = false
+    }
+  }, [])
+
   const {
     register,
     watch,
+    setValue,
+    reset,
     formState: { errors },
   } = useForm<FormularioCliente>({
     resolver: zodResolver(esquemaCliente),
@@ -65,16 +113,144 @@ export default function CotizadorPage() {
   })
 
   const nombreCliente = watch('nombre') ?? ''
-  const puedeGenerarPdf = Boolean(unidad) && nombreCliente.trim().length >= 3 && !errorApartado
+  // La propuesta elegida (para guardar/compartir); acotada por si cambia el desarrollo
+  const propuestaActiva = propuestas[Math.min(propuestaIndex, Math.max(propuestas.length - 1, 0))]
+  const puedeGenerarPdf = Boolean(unidad) && !errorApartado && !guardando
+
+  /** Persiste la cotización en el API; null si no hay conexión (el PDF sale igual, sin folio/QR) */
+  const guardarEnApi = async (cliente: Cliente): Promise<CotizacionGuardada | null> => {
+    if (!unidad || !propuestaActiva) return null
+    try {
+      const guardada = await guardarCotizacion({
+        unidadCodigo: unidad.codigo,
+        clienteNombre: cliente.nombre,
+        ...(cliente.email ? { clienteEmail: cliente.email } : {}),
+        ...(cliente.telefono ? { clienteTelefono: cliente.telefono } : {}),
+        tipoPropuesta: TIPO_A_API[propuestaActiva.tipo],
+        acabados,
+        apartado: apartadoEfectivo,
+        descuento: propuestaActiva.descuento,
+      })
+      const conFolio = { ...guardada, folio: guardada.folio ?? folioCotizacion(guardada.id) }
+      setUltimaGuardada(conFolio)
+      setMisCotizaciones((prev) => [conFolio, ...prev].slice(0, 50))
+      return conFolio
+    } catch (err) {
+      console.warn('[api] No se pudo guardar la cotización; el PDF sale sin folio/QR.', err)
+      setAviso('Sin conexión al servidor: la cotización no se guardó (PDF sin folio/QR).')
+      return null
+    }
+  }
+
+  const generarPdfConCliente = async (cliente: Cliente) => {
+    if (!unidad) return
+    setGuardando(true)
+    try {
+      const guardada = await guardarEnApi(cliente)
+      let folio: string | undefined
+      let qrDataUrl: string | undefined
+      if (guardada) {
+        folio = guardada.folio ?? folioCotizacion(guardada.id)
+        qrDataUrl = await QRCode.toDataURL(urlPublicaCotizacion(guardada.id), {
+          margin: 1,
+          width: 200,
+        })
+      }
+      generarPdf({
+        unidad,
+        acabados,
+        apartado: apartadoEfectivo,
+        precioLista,
+        propuestas,
+        cliente,
+        desarrollo: params,
+        ...(folio ? { folio } : {}),
+        ...(qrDataUrl ? { qrDataUrl } : {}),
+        vigencia: calcularVigencia(),
+      })
+    } finally {
+      setGuardando(false)
+    }
+  }
 
   const handleGenerarPdf = () => {
     if (!unidad) return
-    const cliente: Cliente = {
+    // Sin nombre capturado, pide los datos del cliente en el modal
+    if (nombreCliente.trim().length < 3) {
+      setModalClienteAbierto(true)
+      return
+    }
+    void generarPdfConCliente({
       nombre: nombreCliente.trim(),
       email: watch('email') || undefined,
       telefono: watch('telefono') || undefined,
+    })
+  }
+
+  const handleModalAceptar = (cliente: Cliente) => {
+    setModalClienteAbierto(false)
+    setValue('nombre', cliente.nombre, { shouldValidate: true })
+    if (cliente.telefono) setValue('telefono', cliente.telefono, { shouldValidate: true })
+    if (cliente.email) setValue('email', cliente.email, { shouldValidate: true })
+    void generarPdfConCliente(cliente)
+  }
+
+  const handleCompartir = async () => {
+    if (!unidad || !propuestaActiva) return
+    const texto = textoCompartir({
+      unidadCodigo: unidad.codigo,
+      desarrolloNombre: params.nombre,
+      propuesta: propuestaActiva,
+      apartado: apartadoEfectivo,
+      vigencia: calcularVigencia(),
+      ...(ultimaGuardada
+        ? {
+            folio: ultimaGuardada.folio ?? folioCotizacion(ultimaGuardada.id),
+            urlPublica: urlPublicaCotizacion(ultimaGuardada.id),
+          }
+        : {}),
+    })
+    try {
+      await navigator.clipboard.writeText(texto)
+      setAviso('Resumen copiado al portapapeles.')
+    } catch {
+      setAviso('No se pudo copiar al portapapeles.')
     }
-    generarPdf({ unidad, acabados, apartado: apartadoEfectivo, precioLista, propuestas, cliente, desarrollo: params })
+    const telefono = watch('telefono') || ultimaGuardada?.clienteTelefono || undefined
+    const url = urlWhatsApp(telefono, texto)
+    if (url) window.open(url, '_blank', 'noopener')
+  }
+
+  const handleRetomar = (c: CotizacionGuardada) => {
+    const u = unidades.find(
+      (x) => x.codigo === c.unidadCodigo && (x.desarrollo ?? 'DIAGONAL') === c.desarrollo,
+    )
+    if (!u) {
+      setAviso(`La unidad ${c.unidadCodigo} ya no está en el inventario actual.`)
+      return
+    }
+    const tipo = TIPO_DE_API[c.tipoPropuesta]
+    const idx = obtenerDesarrollo(c.desarrollo).propuestas.findIndex((p) => p.tipo === tipo)
+    restaurar({
+      desarrollo: c.desarrollo,
+      unidad: u,
+      acabados: c.acabados,
+      apartado: c.apartado,
+      descuento: c.descuento,
+      propuestaIndex: idx >= 0 ? idx : 0,
+    })
+    setValue('nombre', c.clienteNombre, { shouldValidate: true })
+    setValue('telefono', c.clienteTelefono ?? '', { shouldValidate: true })
+    setValue('email', c.clienteEmail ?? '', { shouldValidate: true })
+    setUltimaGuardada(c)
+    setAviso(`Cotización ${c.folio ?? ''} retomada.`)
+  }
+
+  const handleNueva = () => {
+    nueva()
+    reset({ nombre: '', email: '', telefono: '' })
+    setUltimaGuardada(null)
+    setAviso(null)
   }
 
   return (
@@ -251,6 +427,16 @@ export default function CotizadorPage() {
                 </p>
               </div>
             )}
+
+            {unidad && (
+              <button
+                type="button"
+                onClick={handleNueva}
+                className="w-full 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"
+              >
+                Nueva cotización
+              </button>
+            )}
           </section>
 
           {unidad && <UnitInfoCard unidad={unidad} numMeses={numMeses} />}
@@ -258,14 +444,21 @@ export default function CotizadorPage() {
 
         {/* Panel de propuestas */}
         <section>
+          <MisCotizaciones
+            cotizaciones={misCotizaciones}
+            cargando={cargandoMias}
+            error={errorMias}
+            onRetomar={handleRetomar}
+          />
+
           {!unidad ? (
-            <div className="flex h-64 items-center justify-center border border-dashed border-neutral-300 bg-white">
+            <div className="mt-16 flex h-64 items-center justify-center border border-dashed border-neutral-300 bg-white">
               <p className="text-sm text-neutral-500">
                 Selecciona una unidad para ver las propuestas comerciales.
               </p>
             </div>
           ) : (
-            <>
+            <div className="mt-16">
               <div className="grid gap-8 md:grid-cols-2">
                 {propuestas.map((p, i) => (
                   <ProposalCard
@@ -283,25 +476,67 @@ export default function CotizadorPage() {
                 propuestas={propuestas}
                 titulos={propuestas.map((p) => p.titulo)}
               />
-              <div className="mt-16 flex justify-end">
+              <div className="mt-16 flex flex-wrap items-center justify-end gap-4">
+                <div>
+                  <label htmlFor="propuesta-elegida" className={etiquetaCampo}>
+                    Propuesta elegida
+                  </label>
+                  <select
+                    id="propuesta-elegida"
+                    value={Math.min(propuestaIndex, propuestas.length - 1)}
+                    onChange={(e) => setPropuestaIndex(Number(e.target.value))}
+                    className="border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+                  >
+                    {propuestas.map((p, i) => (
+                      <option key={p.tipo} value={i}>
+                        #{i + 1} {p.titulo}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <button
+                  type="button"
+                  onClick={handleCompartir}
+                  disabled={!puedeGenerarPdf}
+                  className="border border-accent bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-accent uppercase transition-colors duration-150 hover:bg-accent hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Compartir
+                </button>
                 <button
                   type="button"
                   onClick={handleGenerarPdf}
                   disabled={!puedeGenerarPdf}
                   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 disabled:cursor-not-allowed disabled:opacity-40"
                 >
-                  Generar PDF
+                  {guardando ? 'Guardando…' : 'Guardar y generar PDF'}
                 </button>
               </div>
-              {!puedeGenerarPdf && (
+              {aviso && <p className="mt-2 text-right text-xs text-neutral-500">{aviso}</p>}
+              {!puedeGenerarPdf && !guardando && (
                 <p className="mt-2 text-right text-xs text-neutral-400">
-                  Selecciona una unidad y captura el nombre del cliente para generar el PDF.
+                  Selecciona una unidad para guardar y generar el PDF.
                 </p>
               )}
-            </>
+            </div>
           )}
+
+          <ComparadorUnidades
+            unidades={unidades}
+            tipo={propuestaActiva?.tipo ?? 'CREDITO_BANCARIO'}
+            apartado={apartadoEfectivo}
+            acabados={acabados}
+          />
         </section>
       </main>
+
+      <ModalCliente
+        abierto={modalClienteAbierto}
+        nombreInicial={watch('nombre')}
+        telefonoInicial={watch('telefono')}
+        emailInicial={watch('email')}
+        onAceptar={handleModalAceptar}
+        onCancelar={() => setModalClienteAbierto(false)}
+      />
     </div>
   )
 }

apps/cotizador/src/services/api.ts

@@ -1,10 +1,12 @@
-import type { Unidad } from '../types'
+import type { Unidad, TipoPropuesta } from '../types'
 import { INVENTARIO_SEED } from '../data/unidades'
 import { conAuth, manejar401 } from './auth'
 
 // TODO produccion: '/api' same-origin detras de NGINX
 const API_URL = import.meta.env.VITE_API_URL ?? 'http://192.168.10.123:3000/api'
 
+export { API_URL }
+
 export interface GetUnidadesResult {
   unidades: Unidad[]
   /** true cuando se usó el seed local por no poder contactar el API */
@@ -28,3 +30,79 @@ export async function getUnidades(): Promise<GetUnidadesResult> {
     return { unidades: INVENTARIO_SEED, usandoSeed: true }
   }
 }
+
+// ---------- Cotizaciones guardadas (historial del vendedor) ----------
+
+/** Tipo de propuesta tal como lo espera el API (body de POST /cotizaciones) */
+export type TipoPropuestaApi = 'BANCARIO' | 'INFONAVIT' | 'CONTADO' | 'SEMI_CONTADO'
+
+export const TIPO_A_API: Record<TipoPropuesta, TipoPropuestaApi> = {
+  CREDITO_BANCARIO: 'BANCARIO',
+  CREDITO_INFONAVIT_COFINAVIT: 'INFONAVIT',
+  CONTADO: 'CONTADO',
+  SEMI_CONTADO: 'SEMI_CONTADO',
+}
+
+export const TIPO_DE_API: Record<TipoPropuestaApi, TipoPropuesta> = {
+  BANCARIO: 'CREDITO_BANCARIO',
+  INFONAVIT: 'CREDITO_INFONAVIT_COFINAVIT',
+  CONTADO: 'CONTADO',
+  SEMI_CONTADO: 'SEMI_CONTADO',
+}
+
+export interface CotizacionGuardada {
+  id: string
+  folio?: string
+  unidadCodigo: string
+  desarrollo: string
+  clienteNombre: string
+  clienteTelefono: string | null
+  clienteEmail: string | null
+  tipoPropuesta: TipoPropuestaApi
+  acabados: boolean
+  apartado: number
+  descuento: number
+  precioLista: number
+  precioFinal: number
+  enganche: number
+  numMensualidades: number
+  mensualidad: number | null
+  pagoFinal: number
+  createdAt: string
+}
+
+export interface GuardarCotizacionPayload {
+  unidadCodigo: string
+  clienteNombre: string
+  clienteEmail?: string
+  clienteTelefono?: string
+  tipoPropuesta: TipoPropuestaApi
+  acabados: boolean
+  apartado?: number
+  descuento?: number
+}
+
+/** URL pública de una cotización (destino del QR del PDF) */
+export function urlPublicaCotizacion(id: string): string {
+  return `${API_URL}/cotizaciones/${id}/publico`
+}
+
+/** POST /cotizaciones — persiste y registra la oportunidad en Monday */
+export async function guardarCotizacion(payload: GuardarCotizacionPayload): Promise<CotizacionGuardada> {
+  const resp = await fetch(`${API_URL}/cotizaciones`, conAuth({
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  }))
+  manejar401(resp)
+  if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  return (await resp.json()) as CotizacionGuardada
+}
+
+/** GET /cotizaciones/mias — últimas 50 del vendedor autenticado */
+export async function getMisCotizaciones(): Promise<CotizacionGuardada[]> {
+  const resp = await fetch(`${API_URL}/cotizaciones/mias`, conAuth())
+  manejar401(resp)
+  if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  return (await resp.json()) as CotizacionGuardada[]
+}