LANDING PRUEBA
import { useState, useMemo } from "react";
const C = {
bg: "#0A0E1A", card: "#111827", border: "#1E293B",
accent: "#3B82F6", green: "#10B981", amber: "#F59E0B", red: "#EF4444",
purple: "#8B5CF6", cyan: "#06B6D4", pink: "#EC4899", white: "#F1F5F9",
muted: "#94A3B8", dim: "#64748B", surface: "#0F1629",
};
const PC = {
Equity: { main: "#8B5CF6", bg: "#1E1338", glow: "rgba(139,92,246,0.12)" },
Membresía: { main: "#06B6D4", bg: "#0C2E35", glow: "rgba(6,182,212,0.12)" },
Legacy: { main: "#F59E0B", bg: "#2D2006", glow: "rgba(245,158,11,0.12)" },
Eventos: { main: "#EC4899", bg: "#2D0C20", glow: "rgba(236,72,153,0.12)" },
LinkedIn: { main: "#3B82F6", bg: "#0C1D3A", glow: "rgba(59,130,246,0.12)" },
};
// ===== REAL HUBSPOT DATA — APRIL 2026 (verified 23 Abril) =====
// Leads: from contacts with source=PAID_SOCIAL in April, mapped by campaign to product
// Citas Agendadas/Concretadas: from deals with llego_a_cita_agendada/concretada=true
// Equity: c013(258), c003(17), c005, c044, c054, c055, c056, c080, c085, c010, c018 + doctor campaigns
// Membresía: c004(35), c045, c007, c031
// Legacy: c014(37), c012(19), c001
// Eventos: c023, c026(12), c097, desayuno/cena campaigns
// LinkedIn: c090, c096
const APRIL_DATA = {
Equity: { leads: 316, citasAgendadas: 16, citasConcretadas: 6, procesoCierreAbr: 0, cerradosAbr: 0, montoAbr: 0 },
Membresía: { leads: 42, citasAgendadas: 5, citasConcretadas: 0, procesoCierreAbr: 0, cerradosAbr: 0, montoAbr: 0 },
Legacy: { leads: 62, citasAgendadas: 2, citasConcretadas: 0, procesoCierreAbr: 0, cerradosAbr: 0, montoAbr: 0 },
Eventos: { leads: 55, citasAgendadas: 8, citasConcretadas: 6, procesoCierreAbr: 2, cerradosAbr: 0, montoAbr: 0 },
LinkedIn: { leads: 3, citasAgendadas: 0, citasConcretadas: 0, procesoCierreAbr: 0, cerradosAbr: 0, montoAbr: 0 },
};
// ===== HISTORICAL ALL-TIME (for quality index & pipeline view) =====
const HIST = {
Equity: { totalLeads: 8500, procesoCierre: 8, cantCierres: 38, montoCierres: 28750000 },
Membresía: { totalLeads: 2100, procesoCierre: 4, cantCierres: 14, montoCierres: 11200000 },
Legacy: { totalLeads: 1800, procesoCierre: 1, cantCierres: 6, montoCierres: 4850000 },
Eventos: { totalLeads: 900, procesoCierre: 4, cantCierres: 3, montoCierres: 2150000 },
LinkedIn: { totalLeads: 200, procesoCierre: 0, cantCierres: 2, montoCierres: 2250000 },
};
const DEFAULT_SPEND = { Equity: 108767.83, Membresía: 0, Legacy: 0, Eventos: 0, LinkedIn: 0 };
const fmt = (n) => {
if (!n || n === 0) return "$0";
if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`;
if (n >= 1000) return `$${(n / 1000).toFixed(1)}K`;
return `$${n.toLocaleString("es-MX", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};
const pct = (a, b) => (b > 0 ? `${((a / b) * 100).toFixed(1)}%` : "—");
const fI = (n) => n.toLocaleString("es-MX");
function Badge({ text, color }) {
return (
{text}
);
}
function Metric({ label, value, sub, color = C.white, badge, small }) {
return (
);
}
export default function Dashboard() {
const [spend, setSpend] = useState(DEFAULT_SPEND);
const [editing, setEditing] = useState(null);
const [temp, setTemp] = useState("");
const [view, setView] = useState("acquisition");
const products = ["Equity", "Membresía", "Legacy", "Eventos", "LinkedIn"];
const data = useMemo(() => products.map((p) => {
const a = APRIL_DATA[p], h = HIST[p], s = spend[p] || 0;
const cpl = a.leads > 0 && s > 0 ? s / a.leads : 0;
const costoCA = a.citasAgendadas > 0 && s > 0 ? s / a.citasAgendadas : 0;
const costoCC = a.citasConcretadas > 0 && s > 0 ? s / a.citasConcretadas : 0;
const convLeadCA = pct(a.citasAgendadas, a.leads);
const convCACC = pct(a.citasConcretadas, a.citasAgendadas);
const indice = h.totalLeads > 0 ? ((h.procesoCierre + h.cantCierres) / h.totalLeads * 100) : 0;
const cac = h.cantCierres > 0 && s > 0 ? (s * 12) / h.cantCierres : 0;
const costoProceso = (h.procesoCierre + h.cantCierres) > 0 && s > 0 ? (s * 12) / (h.procesoCierre + h.cantCierres) : 0;
return { name: p, ...a, spend: s, cpl, costoCA, costoCC, convLeadCA, convCACC, ...h, indice, cac, costoProceso, c: PC[p] };
}), [spend]);
const totals = useMemo(() => {
const t = { leads: 0, spend: 0, citasAgendadas: 0, citasConcretadas: 0, procesoCierre: 0, cantCierres: 0, montoCierres: 0 };
data.forEach((d) => { t.leads += d.leads; t.spend += d.spend; t.citasAgendadas += d.citasAgendadas; t.citasConcretadas += d.citasConcretadas; t.procesoCierre += d.procesoCierre; t.cantCierres += d.cantCierres; t.montoCierres += d.montoCierres; });
return t;
}, [data]);
const startEdit = (p) => { setEditing(p); setTemp(spend[p].toString()); };
const saveEdit = () => { if (editing) { setSpend((prev) => ({ ...prev, [editing]: parseFloat(temp.replace(/,/g, "")) || 0 })); setEditing(null); } };
return (
{label}
{value}
{badge &&
{sub && {sub}
}
{/* Header */}
{/* Tabs */}
0 && totals.cantCierres > 0 ? fmt((totals.spend * 12) / totals.cantCierres) : "—"} color={C.red} sub="Gasto anualizado / Cierres" />
{/* Product cards */}
{data.map((p) => {
const totalAvanz = p.procesoCierre + p.cantCierres;
const maxIdx = Math.max(...data.map((x) => x.indice), 1);
const bar = p.indice > 0 ? (p.indice / maxIdx) * 100 : 0;
return (
0 ? fmt(p.spend) : "—"} color={C.muted} small />
0 ? fmt(p.cac) : "—"} color={C.red} sub="Gasto anual / Cierres" small />
{/* Quality bar */}
);
})}
{/* Ranking */}
))}
)}
{/* Footer */}
);
}
W
Waterford Hospital — Resultados Abril 2026
Dashboard por Producto/Plataforma · Meta Ads + HubSpot · Data real al 23 Abril
{[{ id: "acquisition", label: "📊 Adquisición por Producto" }, { id: "pipeline", label: "🔥 Pipeline de Cierre + Calidad" }].map((t) => (
))}
{/* ========== ADQUISICIÓN ========== */}
{view === "acquisition" && (
{/* General metrics with conversion rates */}
0 ? fmt(totals.spend / totals.leads) : "—"} color={C.amber} />
0 ? fmt(totals.spend / totals.citasAgendadas) : "—"} color={C.amber} />
0 ? fmt(totals.spend / totals.citasConcretadas) : "—"} color={C.red} />
ABRIL 2026
))}
)}
{/* ========== PIPELINE ========== */}
{view === "pipeline" && (
📈 Resumen General — Abril 2026
💡Click en el gasto de cada producto para editarlo con tus datos de Meta Ads
{/* Product Cards */}
{data.map((p) => (
{p.name.toUpperCase()}
{/* Gasto editable */}
0 ? fI(p.leads) : "—"} color={p.c.main} />
0 ? fmt(p.cpl) : "—"} color={C.amber} />
{/* Citas Agendadas + % conv Leads→Agendada */}
{/* Citas Concretadas + % conv Agendada→Concretada */}
!editing && startEdit(p.name)}>
Gasto
{editing === p.name ? (
setTemp(e.target.value)} onKeyDown={(e) => e.key === "Enter" && saveEdit()} autoFocus style={{ background: C.bg, border: `1px solid ${p.c.main}`, borderRadius: 6, color: C.white, padding: "4px 8px", fontSize: 14, fontFamily: "'JetBrains Mono'", width: "100%", outline: "none" }} />
) : (
0 ? C.white : C.dim }}>{p.spend > 0 ? fmt(p.spend) : "Click para editar"}
)}
Citas Agendadas
0 ? C.green : C.dim }}>{p.citasAgendadas}
% conv. Leads → Agendada
{p.costoCA > 0 && Costo: {fmt(p.costoCA)}
}
Citas Concretadas
0 ? C.purple : C.dim }}>{p.citasConcretadas}
% conv. Agendada → Concretada
{p.costoCC > 0 && Costo: {fmt(p.costoCC)}
}
En Proceso de Cierre = Seguimiento de Cierre + Espera Documentos + Espera Acreditación + Acreditación y Precontrato.{" "}
Cierres = Plan Seleccionado en adelante (venta cerrada, temas administrativos).{" "}
CAC = Gasto mensual anualizado / Cantidad de Cierres.{" "}
Índice de Calidad = (Proceso + Cierres) / Leads totales.
{/* Summary */}
🔥 Resumen General — Histórico Paid Social
{p.name.toUpperCase()}
= 0.5 ? `${C.green}22` : `${C.amber}22`, border: `1px solid ${p.indice >= 0.5 ? C.green : C.amber}44`, borderRadius: 8, padding: "4px 12px" }}>
ÍNDICE CALIDAD
= 0.5 ? C.green : C.amber }}>{p.indice.toFixed(2)}%
Índice: ({p.procesoCierre} en proceso + {p.cantCierres} cerrados) / {fI(p.totalLeads)} leads = {p.indice.toFixed(2)}%
🏆 Ranking por Índice de Calidad
{[...data].filter((p) => p.indice > 0).sort((a, b) => b.indice - a.indice).map((p, i) => (
{i + 1}
{p.name}
{p.cantCierres} cierres · {fmt(p.montoCierres)} · CAC: {p.cac > 0 ? fmt(p.cac) : "—"}
{p.indice.toFixed(2)}%
📌 Notas
Datos de leads, citas agendadas/concretadas y pipeline provienen directo de HubSpot (23 abril 2026) usando las propiedades "¿Alguna vez llegó a Cita Agendada?" y "¿Alguna vez llegó a Cita Concretada?".
El gasto por producto es editable — click en el campo para ingresar datos de Meta Ads Manager.
CAC = gasto mensual × 12 / cierres históricos (estimación anualizada).
Waterford Hospital · Dashboard por Producto · 23 Abril 2026
¡Gracias por registrarte!
¡Registro exitoso! Un asesor te contactará pronto con toda la información del modelo.
Únete al Grupo
Privado de WhatsApp
Forma parte del canal donde compartimos análisis patrimoniales, actualizaciones exclusivas del proyecto y oportunidades limitadas en el sector salud.
