FSPM — sitio comercial y micro CRM

Demostración construida por Consultoría E3 para Fire Service Plus México. Sitio público orientado a venta consultiva, con un CRM interno que registra cada envío de formulario y de widget de WhatsApp como oportunidad, con su atribución de campaña.

No es un maquetado: los formularios escriben en base de datos, el panel lee de ella, y las reglas de asignación reparten los leads entre vendedores.

De dónde salió el contenido

El sitio implementa las recomendaciones de una auditoría de marca y mercado previa. Los hallazgos que dirigieron el diseño:

Hallazgo de la auditoría	Cómo se resuelve aquí
Propuesta demasiado amplia, ocho categorías sin rutas	Inicio con tres rutas —industria, riesgo y cumplimiento— y cinco páginas por segmento prioritario
El visitante debe inferir qué solución le toca	Clasificador de riesgo en el héroe: elige operación y clases de fuego, y el sitio lo enruta
Claims sin condiciones ni evidencia por modelo	Aislados en claimsPorVerificar y presentados como compromiso de documentación, nunca como característica
Sin meta description ni Open Graph	Metadatos por página, sitemap derivado de los datos, JSON-LD y tarjeta social generada
Conversión poco consultiva	El formulario pide lo que un ingeniero necesita para cotizar, no "solicita información"
Sin forma de medir efectividad comercial	Atribución de primer toque que sobrevive a la navegación, y analítica por campaña en el panel

Los datos de producto provienen de la extracción del sitio público de FSPM. Lo que la fuente no sostiene está marcado como pendiente de verificar; nada se inventó para rellenar.

Stack

Next.js 15 App Router · React 19 · TypeScript estricto · Tailwind CSS v4 · Prisma 6 + SQLite · sesiones propias con jose · Playwright para pruebas. Sin librería de gráficas: el tablero dibuja SVG a mano.

Arrancar en local

npm install
cp .env.example .env          # ajusta AUTH_SECRET
npx prisma db push
npm run db:seed               # datos de demostración
npm run dev

Sitio en http://localhost:3000. El panel en /admin/login — no está enlazado desde el sitio público, es intencional.

Las credenciales del seed se imprimen al final de npm run db:seed. En la pantalla de acceso hay además entrada rápida por perfil para la demostración, que se apaga con DEMO_ACCESO_RAPIDO=false.

Estructura

src/app/(sitio)/     páginas públicas
src/app/admin/       panel comercial, con noindex y fuera del sitemap
src/app/api/leads/   captura: deduplica contacto, crea oportunidad, asigna
src/data/            catálogo, industrias, clases de fuego, datos de empresa
src/lib/crm/         dominio, sesiones, consultas, acciones, asignación
src/components/marca/RielClases.tsx    el elemento firma del diseño
tests/               Playwright, incluidos dos proyectos WebKit
docs/CONTRATO.md     sistema de diseño y reglas de contenido
docs/DESPLIEGUE.md   variables, Docker y despliegue

Cómo funciona la captura

1. El visitante llega con parámetros de campaña. src/lib/utm.ts guarda el primer toque y no lo sobreescribe.
2. Navega. Envía el formulario en una ficha de producto, ya sin parámetros en la URL.
3. POST /api/leads deduplica el contacto por correo o teléfono normalizado, crea una oportunidad nueva —un mismo contacto acumula varias— y guarda la campaña del primer toque junto con el producto y la URL exactos.
4. Las reglas de asignación eligen vendedor; si ninguna coincide, se reparte por turno entre los activos.
5. El widget de WhatsApp hace lo mismo antes de abrir la conversación, así el lead existe aunque la persona nunca mande el mensaje.

Pruebas

npm run test:e2e        # todos los proyectos
npm run test:webkit     # solo Safari e iOS

Cubren rutas y metadatos, responsividad de 320 a 1440 sin desborde horizontal, el circuito de captura con atribución, el aislamiento entre roles del panel y accesibilidad básica.

Alcance

Los datos del panel son ficticios. Los logotipos de clientes se muestran sin atribuirles testimonio ni resultado: la auditoría pide confirmar la relación antes de usarlos comercialmente. La información normativa es de referencia y no sustituye dictamen técnico ni jurídico.