);
}
diff --git a/mvp/b2c/src/app/panel/precios/actions.ts b/mvp/b2c/src/app/panel/precios/actions.ts
index 0ac8156..d149f40 100644
--- a/mvp/b2c/src/app/panel/precios/actions.ts
+++ b/mvp/b2c/src/app/panel/precios/actions.ts
@@ -93,6 +93,19 @@ export async function actualizarExtras(formData: FormData) {
revalidatePath('/panel/precios');
}
+export async function actualizarBaremo(formData: FormData) {
+ const tenantId = await getTenantId();
+ const raw = formData.get('baremoMinimo');
+ const txt = typeof raw === 'string' ? raw.trim() : '';
+ // Vacío = sin baremo (null). Con valor = euros → céntimos.
+ const baremoMinimo = txt === '' ? null : eurosToCents(raw, 'baremo de rentabilidad');
+ await db
+ .update(pricingConfig)
+ .set({ baremoMinimo, updatedAt: new Date() })
+ .where(eq(pricingConfig.tenantId, tenantId));
+ revalidatePath('/panel/precios');
+}
+
export async function actualizarEnvio(formData: FormData) {
const tenantId = await getTenantId();
const modo = formData.get('modo');
diff --git a/mvp/b2c/src/app/panel/precios/page.tsx b/mvp/b2c/src/app/panel/precios/page.tsx
index 75cca9d..d8bee7c 100644
--- a/mvp/b2c/src/app/panel/precios/page.tsx
+++ b/mvp/b2c/src/app/panel/precios/page.tsx
@@ -5,6 +5,7 @@ import {
borrarMaterial,
actualizarConfig,
actualizarExtras,
+ actualizarBaremo,
actualizarEnvio,
importarCatalogoCsv,
} from './actions';
@@ -81,7 +82,7 @@ export default async function PreciosPage() {
{/* Config general */}
-
+
Configuración general
+ {/* Baremo de rentabilidad */}
+
+
Baremo de rentabilidad
+
+ Importe mínimo de un trabajo para que te resulte rentable. Es solo orientativo para ti: en la
+ ficha de cada lead verás marcados en otro color los presupuestos que no lleguen a este valor.
+ No afecta a lo que ve el cliente ni a la conversación de los agentes. Déjalo vacío para no usar
+ baremo.
+
Cabecera: categoria,nombre,calidad,precio,unidad,descriptor_render,sku. El
diff --git a/mvp/b2c/src/app/solicitud/[id]/page.tsx b/mvp/b2c/src/app/solicitud/[id]/page.tsx
index 2fd5062..9e50c4d 100644
--- a/mvp/b2c/src/app/solicitud/[id]/page.tsx
+++ b/mvp/b2c/src/app/solicitud/[id]/page.tsx
@@ -1,82 +1,295 @@
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { getPublicLead } from '@/lib/funnel/public-queries';
+import { resolveTheme, themeStyle } from '@/lib/funnel/themes';
import TenantBrand from '@/components/funnel/TenantBrand';
export const dynamic = 'force-dynamic';
+const BRAND = 'var(--brand, #0a0a0a)';
+const BRAND_CONTRAST = 'var(--brand-contrast, #ffffff)';
+
+function IconLlamada() {
+ return (
+
+ );
+}
+
+function IconWhatsapp() {
+ return (
+
+ );
+}
+
+function IconFormulario() {
+ return (
+
+ );
+}
+
const CANALES = [
{
slug: 'llamada',
- icon: '📞',
+ icon: ,
titulo: 'Que te llamemos',
descripcion:
'Un asistente te llama y te hace unas preguntas rápidas. Lo más cómodo: no escribes nada.',
cta: 'Quiero que me llamen',
+ badge: 'La más rápida',
},
{
slug: 'whatsapp',
- icon: '💬',
+ icon: ,
titulo: 'Por WhatsApp',
- descripcion:
- 'Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras.',
+ descripcion: 'Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras.',
cta: 'Seguir por WhatsApp',
+ badge: null,
},
{
slug: 'formulario',
- icon: '📝',
+ icon: ,
titulo: 'Rellenar un formulario',
descripcion:
'Tú lo cuentas zona por zona y subes las fotos. Recibes el presupuesto al instante.',
cta: 'Rellenar el formulario',
+ badge: null,
},
] as const;
+const PASOS_DESPUES = [
+ {
+ titulo: 'Nos cuentas tu reforma a tu manera',
+ body: 'Fotos, medidas, gustos. Cuanto más nos cuentes, más se parecerá el resultado a lo que tienes en la cabeza.',
+ },
+ {
+ titulo: 'Render + presupuesto en minutos',
+ body: 'Ves tu espacio ya reformado en imágenes, con un presupuesto orientativo desglosado partida a partida.',
+ },
+ // El tercer paso interpola el nombre del reformista; se monta en el componente.
+] as const;
+
+function Stepper() {
+ const conectores = 'h-px flex-1 min-w-4';
+ return (
+
+
+
+
+
+ Tus datos
+
+
+
+
+ 2
+
+ Tu reforma
+
+
+
+
+ 3
+
+
+ Render + presupuesto
+
+
+
+ );
+}
+
export default async function ChooserPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const data = await getPublicLead(id);
if (!data) notFound();
const { lead, tenant } = data;
+ const theme = resolveTheme(tenant?.themePreset, tenant?.themeColor);
+ const nombrePila = lead.nombre.split(' ')[0];
+ const nombreReformista = tenant?.nombreEmpresa ?? 'el reformista';
+
+ const pasosDespues = [
+ ...PASOS_DESPUES,
+ {
+ titulo: 'Visita gratuita para el presupuesto final',
+ body: `Si te convence, acuerdas una visita con ${nombreReformista}: ve la obra, la mide con detalle y te confirma el precio definitivo. Sin compromiso.`,
+ },
+ ];
return (
- <>
+
{tenant && }
-
-
-
- Elige cómo seguir
-
-
- ¿Cómo prefieres contarnos tu reforma, {lead.nombre.split(' ')[0]}?
-
-
- Tú eliges. Por cualquiera de las tres nos das lo que necesitamos para preparar tu render
- y tu presupuesto.
-
-
-
- {CANALES.map((c) => (
-
-
- {c.icon}
-
-
- {c.titulo}
- {c.descripcion}
-
- {c.cta} →
+
+ {/* Halo sutil con el color de marca del reformista */}
+
+
+
+
+
+
+
+
+
+ Elige cómo seguir
+
+
+ ¿Cómo prefieres contarnos tu reforma, {nombrePila}?
+
+
+ Tú eliges. Por cualquiera de las tres nos das lo que necesitamos para preparar tu
+ render y tu presupuesto.
+
+ Elijas lo que elijas, esto es lo que pasa después
+
+
+ {/* Línea que conecta los pasos en desktop */}
+
+ {pasosDespues.map((paso, i) => (
+
+
+ {i + 1}
+
+
+
{paso.titulo}
+
{paso.body}
+
+
+ ))}
+
+
-
+
);
}
diff --git a/mvp/b2c/src/budget/types.ts b/mvp/b2c/src/budget/types.ts
index 0ddd0ae..8e45856 100644
--- a/mvp/b2c/src/budget/types.ts
+++ b/mvp/b2c/src/budget/types.ts
@@ -46,6 +46,7 @@ export interface PricingConfig {
factorZona: Record; // provincia -> multiplicador
manoObra: Record; // céntimos por m² de suelo
extras?: ExtrasFijos; // importes fijos en céntimos
+ baremoMinimo?: number | null; // céntimos; trabajo mínimo rentable (informativo, no lo usan los agentes)
}
export interface BudgetInputs {
diff --git a/mvp/b2c/src/components/AppNav.tsx b/mvp/b2c/src/components/AppNav.tsx
index 2d47f81..953fbd8 100644
--- a/mvp/b2c/src/components/AppNav.tsx
+++ b/mvp/b2c/src/components/AppNav.tsx
@@ -116,6 +116,7 @@ export default function AppNav({ links }: { links: readonly AppNavLink[] }) {
{l.label}
diff --git a/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx b/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx
index a54b375..772439c 100644
--- a/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx
+++ b/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
import type { PublicGaleriaFoto } from '@/lib/funnel/public-queries';
type GaleriaTrabajosProps = {
@@ -5,11 +8,37 @@ type GaleriaTrabajosProps = {
nombreEmpresa: string;
};
-// Galería de trabajos del reformista en su landing pública. Solo se muestra si
-// el reformista ha subido fotos desde su panel.
+// Galería de trabajos del reformista en su landing pública. Solo se muestra si el reformista ha
+// subido fotos desde su panel. Formato apaisado y, al pulsar una foto, se amplía en un lightbox
+// con navegación entre todas las imágenes.
export default function GaleriaTrabajos({ fotos, nombreEmpresa }: GaleriaTrabajosProps) {
+ const [idx, setIdx] = useState(null);
+
+ const cerrar = useCallback(() => setIdx(null), []);
+ const mover = useCallback(
+ (d: number) => setIdx((cur) => (cur === null ? cur : (cur + d + fotos.length) % fotos.length)),
+ [fotos.length],
+ );
+
+ useEffect(() => {
+ if (idx === null) return;
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') cerrar();
+ else if (e.key === 'ArrowRight') mover(1);
+ else if (e.key === 'ArrowLeft') mover(-1);
+ };
+ document.addEventListener('keydown', onKey);
+ document.body.style.overflow = 'hidden';
+ return () => {
+ document.removeEventListener('keydown', onKey);
+ document.body.style.overflow = '';
+ };
+ }, [idx, cerrar, mover]);
+
if (fotos.length === 0) return null;
+ const actual = idx !== null ? fotos[idx] : null;
+
return (
@@ -24,24 +53,31 @@ export default function GaleriaTrabajos({ fotos, nombreEmpresa }: GaleriaTrabajo
Reformas que ya hemos hecho
- Una muestra real del trabajo de {nombreEmpresa}. Calidad de acabados, plazos cumplidos.
+ Una muestra real del trabajo de {nombreEmpresa}. Toca cualquier imagen para verla en grande.
+ )}
);
}
diff --git a/mvp/b2c/src/components/panel/PanelTour.tsx b/mvp/b2c/src/components/panel/PanelTour.tsx
new file mode 100644
index 0000000..9e62b38
--- /dev/null
+++ b/mvp/b2c/src/components/panel/PanelTour.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { driver, type DriveStep } from 'driver.js';
+import 'driver.js/dist/driver.css';
+import { tourForPath } from '@/lib/onboarding/panel-tour';
+
+const SEEN_PREFIX = 'reformix_tour_v1_';
+
+// Onboarding del panel con driver.js. Lanza el tour de la pestaña actual la primera vez que se
+// visita (flag por pestaña en localStorage) y deja un botón flotante para repetirlo. Los pasos
+// cuyo elemento no exista o esté oculto (p. ej. la nav de escritorio en móvil) se descartan.
+export default function PanelTour() {
+ const pathname = usePathname();
+ const [hayTour, setHayTour] = useState(false);
+
+ useEffect(() => {
+ const tour = tourForPath(pathname);
+ setHayTour(Boolean(tour));
+ if (!tour) return;
+ if (localStorage.getItem(SEEN_PREFIX + tour.key) === '1') return;
+
+ // Espera a que el contenido de la página esté montado antes de resaltar.
+ const t = setTimeout(() => {
+ localStorage.setItem(SEEN_PREFIX + tour.key, '1');
+ lanzar(tour.steps);
+ }, 700);
+ return () => clearTimeout(t);
+ }, [pathname]);
+
+ function visibles(steps: DriveStep[]): DriveStep[] {
+ return steps.filter((s) => {
+ const sel = s.element;
+ if (!sel || typeof sel !== 'string') return true; // paso centrado (intro)
+ const el = document.querySelector(sel) as HTMLElement | null;
+ return !!el && el.offsetParent !== null;
+ });
+ }
+
+ function lanzar(steps: DriveStep[]) {
+ const pasos = visibles(steps);
+ if (pasos.length === 0) return;
+ driver({
+ showProgress: true,
+ overlayColor: '#0b1220',
+ nextBtnText: 'Siguiente',
+ prevBtnText: 'Atrás',
+ doneBtnText: 'Listo',
+ progressText: '{{current}} de {{total}}',
+ steps: pasos,
+ }).drive();
+ }
+
+ function repetir() {
+ const tour = tourForPath(pathname);
+ if (tour) lanzar(tour.steps);
+ }
+
+ if (!hayTour) return null;
+ return (
+
+ );
+}
diff --git a/mvp/b2c/src/db/pricing-queries.ts b/mvp/b2c/src/db/pricing-queries.ts
index cbcc46a..1e5810a 100644
--- a/mvp/b2c/src/db/pricing-queries.ts
+++ b/mvp/b2c/src/db/pricing-queries.ts
@@ -42,6 +42,7 @@ export async function getPricingConfigFor(tenantId: string): Promise) },
extras: { ...EXTRAS_DEFAULT, ...(row.extras ?? {}) },
+ baremoMinimo: row.baremoMinimo ?? null,
};
}
diff --git a/mvp/b2c/src/db/schema.ts b/mvp/b2c/src/db/schema.ts
index 3810d73..f1ec578 100644
--- a/mvp/b2c/src/db/schema.ts
+++ b/mvp/b2c/src/db/schema.ts
@@ -396,6 +396,10 @@ export const pricingConfig = pgTable('pricing_config', {
.$type<{ tuberias: number; boletin: number; distribucion: number }>()
.notNull()
.default({ tuberias: 0, boletin: 0, distribucion: 0 }),
+ // Baremo de rentabilidad (céntimos): importe mínimo que el reformista considera rentable. Solo
+ // informativo en el panel (marca en otro color los leads por debajo); los agentes NO lo usan para
+ // decidir nada. Null = sin baremo configurado.
+ baremoMinimo: integer('baremo_minimo'),
updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow(),
});
diff --git a/mvp/b2c/src/db/seed.ts b/mvp/b2c/src/db/seed.ts
index a14b46b..7fe8c07 100644
--- a/mvp/b2c/src/db/seed.ts
+++ b/mvp/b2c/src/db/seed.ts
@@ -291,13 +291,13 @@ const SEED_LEADS: SeedLead[] = [
const STAGE_ORDER = schema.pipelineStage.enumValues;
async function main() {
- const [existing] = await db
- .select()
- .from(schema.tenants)
- .where(eq(schema.tenants.slug, 'reformas-ejemplo'))
- .limit(1);
+ // Guard de seguridad: solo sembramos si la base de datos está VACÍA (sin ningún tenant). Antes se
+ // comprobaba un slug concreto ("reformas-ejemplo"); si ese tenant no estaba pero había otros
+ // (p. ej. una empresa creada por el reformista), el seed los TRUNCABA en cada deploy → pérdida de
+ // datos. Ahora cualquier tenant existente protege toda la DB. SEED_FORCE=1 fuerza el reseed (BORRA TODO).
+ const [existing] = await db.select({ id: schema.tenants.id }).from(schema.tenants).limit(1);
if (existing && !process.env.SEED_FORCE) {
- console.log('Ya hay datos (tenant "reformas-ejemplo"). Saltando seed. Usa SEED_FORCE=1 para forzar.');
+ console.log('La base de datos ya tiene datos (existe al menos un tenant). Saltando seed para no borrar nada. Usa SEED_FORCE=1 para forzar (¡BORRA TODO!).');
await client.end();
return;
}
diff --git a/mvp/b2c/src/lib/onboarding/panel-tour.ts b/mvp/b2c/src/lib/onboarding/panel-tour.ts
new file mode 100644
index 0000000..8a634bd
--- /dev/null
+++ b/mvp/b2c/src/lib/onboarding/panel-tour.ts
@@ -0,0 +1,147 @@
+import type { DriveStep } from 'driver.js';
+
+// Pasos del onboarding del panel, por pestaña. El copy vive también en copy/COPY-GUIDE.md
+// (sección "Onboarding del panel"). Los pasos cuyo elemento no exista o no esté visible se
+// descartan en PanelTour (degrada con naturalidad en móvil o si una sección no aparece).
+
+const PASOS_PANEL: DriveStep[] = [
+ {
+ popover: {
+ title: 'Tu panel de Reformix',
+ description:
+ 'Te enseño en 30 segundos qué hay en cada sitio. Puedes saltártelo cuando quieras con la X.',
+ },
+ },
+ {
+ element: '[data-tour="nav-leads"]',
+ popover: {
+ title: 'Leads',
+ description:
+ 'Aquí caen tus clientes con su presupuesto y su render ya preparados. Es tu día a día.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="nav-precios"]',
+ popover: {
+ title: 'Precios y baremo',
+ description:
+ 'Tu tabla de precios, la mano de obra y el baremo de rentabilidad. De aquí salen los presupuestos.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="nav-galeria"]',
+ popover: { title: 'Galería', description: 'Tus fotos de trabajos para enseñar en la web.', side: 'bottom' },
+ },
+ {
+ element: '[data-tour="nav-opiniones"]',
+ popover: {
+ title: 'Opiniones',
+ description: 'Reseñas de tus clientes; las apruebas tú antes de publicarlas.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="nav-empresa"]',
+ popover: { title: 'Empresa', description: 'Tu marca, logo y datos de contacto.', side: 'bottom' },
+ },
+ {
+ element: '[data-tour="leads-filtros"]',
+ popover: {
+ title: 'Filtra por estado',
+ description: 'Nuevos, contactados, presupuestados… para centrarte en lo que toca ahora.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="leads-tabla"]',
+ popover: {
+ title: 'Tus leads',
+ description: 'Cada cliente con su estado y su presupuesto. Ábrelo para ver el detalle completo.',
+ side: 'top',
+ },
+ },
+];
+
+const PASOS_FICHA: DriveStep[] = [
+ {
+ element: '[data-tour="ficha-presupuesto"]',
+ popover: {
+ title: 'Presupuesto estimado',
+ description:
+ 'Lo que costaría la reforma según tu catálogo. Si no llega a tu baremo, lo verás en rojo.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="ficha-estado"]',
+ popover: {
+ title: 'Estado del lead',
+ description: 'Avanza el lead por el funnel: contactado, presupuestado, ganado…',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="ficha-render"]',
+ popover: {
+ title: 'Render de la reforma',
+ description:
+ 'La imagen del “después” que ve tu cliente, generada a partir de su foto y sus gustos.',
+ side: 'top',
+ },
+ },
+ {
+ element: '[data-tour="ficha-desglose"]',
+ popover: {
+ title: 'Presupuesto desglosado',
+ description:
+ 'Edita las partidas, recalcula desde el catálogo y envíaselo al cliente por WhatsApp.',
+ side: 'top',
+ },
+ },
+];
+
+const PASOS_PRECIOS: DriveStep[] = [
+ {
+ element: '[data-tour="precios-baremo"]',
+ popover: {
+ title: 'Baremo de rentabilidad',
+ description:
+ 'El trabajo mínimo que te compensa. Solo te avisa a ti: marca en rojo los leads por debajo.',
+ side: 'bottom',
+ },
+ },
+ {
+ element: '[data-tour="precios-config"]',
+ popover: {
+ title: 'Mano de obra',
+ description: 'Tus precios de mano de obra por m². El motor los usa para calcular cada presupuesto.',
+ side: 'top',
+ },
+ },
+ {
+ element: '[data-tour="precios-catalogo"]',
+ popover: {
+ title: 'Tu catálogo',
+ description: 'Materiales y precios por calidad. Puedes importarlos en bloque por CSV.',
+ side: 'top',
+ },
+ },
+];
+
+export interface PanelTour {
+ key: string;
+ steps: DriveStep[];
+}
+
+// Devuelve el tour que corresponde a la ruta actual del panel, o null si esa ruta no tiene tour.
+export function tourForPath(pathname: string): PanelTour | null {
+ if (pathname === '/panel') return { key: 'panel', steps: PASOS_PANEL };
+ if (pathname === '/panel/precios') return { key: 'precios', steps: PASOS_PRECIOS };
+ const m = pathname.match(/^\/panel\/([^/]+)\/?$/);
+ if (m && !['precios', 'galeria', 'opiniones', 'empresa'].includes(m[1])) {
+ return { key: 'ficha', steps: PASOS_FICHA };
+ }
+ return null;
+}
+
{f.titulo && (
- 
e.stopPropagation()}
+ className="max-h-[86vh] max-w-[94vw] w-auto rounded-lg shadow-2xl"
+ />
+
+ {fotos.length > 1 && (
+
+ )}
+
+ {actual.titulo && (
+