);
}
/* ---------- Overview ---------- */
function MktOverview({ D }) {
const t = useT(); const { lang } = useLang();
const resv = (window.PPDB.reservations.all() || []);
const leads = (window.PPDB.leads.all() || []);
const pend = resv.filter((r) => (r.status || "pending") === "pending").length;
const ck = resv.filter((r) => String(r.experienceId || "").startsWith("ck-")).length;
const followers = D.accounts.reduce((a, x) => a + (Number(x.followers) || 0), 0);
const unread = D.conversations.filter((c) => c.unread).length;
const spend = D.campaigns.reduce((a, x) => a + (Number(x.spend) || 0), 0);
const cards = [
["users-round", t("Total audience", "Audiencia total"), mktN(followers), t("across connected accounts", "en cuentas conectadas")],
["inbox", t("Inbox pending", "Inbox pendiente"), unread, t("unanswered conversations", "conversaciones sin responder")],
["calendar-check", t("Reservations", "Reservas"), resv.length + " · " + pend + " " + t("pending", "pendientes"), ck + " " + t("for Chacal & Yakarta", "para Chacal & Yakarta")],
["badge-dollar-sign", t("Ads spend (period)", "Inversión Ads (período)"), "$" + mktN(spend), D.campaigns.filter((c) => c.status === "active").length + " " + t("active campaigns", "campañas activas")],
];
return (
{t("Audience by network", "Audiencia por red")}
{D.accounts.filter((a) => a.followers).map((a) => { const n = mktNet(a.platform); return (
{n.label} {a.username} {mktN(a.followers)}
); })}
{D.accounts.filter((a) => a.engagement).map((a) => { const n = mktNet(a.platform); return (
{n.label}
{a.engagement}%
{t("engagement rate", "tasa de engagement")}
); })}
{t("Live metrics come from Zernio Analytics (per-post and per-account) once connected.", "Las métricas en vivo vienen de Zernio Analytics (por publicación y por cuenta) al conectar.")}
);
}
/* ---------- Posts (read-only) ---------- */
function MktPosts({ D }) {
const t = useT(); const { lang } = useLang();
const fmt = (iso) => { try { return new Date(iso).toLocaleDateString(lang === "es" ? "es" : "en", { month: "short", day: "numeric" }); } catch (e) { return ""; } };
return (
{D.posts.map((p) => { const n = mktNet(p.platform); return (
{p.img &&
}
{n.label}{p.type ? " · " + p.type : ""}
); })}
);
}
/* ---------- Inbox ---------- */
function MktInbox({ D, live }) {
const t = useT(); const { lang } = useLang();
const [openId, setOpenId] = useState(D.conversations[0] ? D.conversations[0].id : null);
const [thread, setThread] = useState(null);
const [reply, setReply] = useState("");
const [sending, setSending] = useState(false);
const conv = D.conversations.find((c) => c.id === openId) || null;
const fmt = (iso) => { try { return new Date(iso).toLocaleString(lang === "es" ? "es" : "en", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }); } catch (e) { return ""; } };
useEffect(() => {
let on = true;
setThread(null);
if (!openId) return;
if (live && window.PPZernio.enabled()) {
window.PPZernio.messages(openId).then(mktList).then((m) => { if (on) setThread(m); }).catch(() => { if (on) setThread([]); });
} else {
setThread(MKT_DEMO.messages[openId] || []);
}
return () => { on = false; };
}, [openId, live]);
const send = async () => {
const text = reply.trim();
if (!text || !conv) return;
setSending(true);
try {
if (live && window.PPZernio.enabled()) await window.PPZernio.sendMessage(conv.id, text);
setThread((th) => [...(th || []), { id: "loc" + Date.now(), dir: "out", text, at: new Date().toISOString() }]);
setReply("");
window.toast && window.toast(t("Reply sent", "Respuesta enviada"), "ok");
} catch (e) { window.toast && window.toast(String((e && e.message) || e), "error"); }
setSending(false);
};
return (
{D.conversations.map((c) => { const n = mktNet(c.platform); return (
setOpenId(c.id)} className={"w-full text-left px-4 py-3.5 border-b border-white/6 transition-colors " + (openId === c.id ? "bg-coral/10" : "hover:bg-white/4")}>
{c.from}
{c.unread && {c.kind}
{c.last}
); })}
{!D.conversations.length &&
{t("No conversations.", "Sin conversaciones.")}
}
{conv ? (
{conv.from}
{mktNet(conv.platform).label} · {conv.kind}
{fmt(conv.at)}
{thread == null &&
{t("Loading…", "Cargando…")}
}
{(thread || []).map((m) => (
{m.text}
))}
) :
{t("Pick a conversation.", "Elige una conversación.")}
}
);
}
/* ---------- Ads (read-only) ---------- */
function MktAds({ D }) {
const t = useT();
const ST = { active: { l: t("Active", "Activa"), c: "#34d399" }, paused: { l: t("Paused", "Pausada"), c: "#CBA35C" }, ended: { l: t("Ended", "Terminada"), c: "#888" } };
return (
{/* status bar */}
{D.error &&
{D.error} }
{connected && setShowCfg((v) => !v)} className="px-4 py-2 rounded-full border border-white/12 text-white/60 hover:text-white text-[11px] font-bold uppercase tracking-wider inline-flex items-center gap-2">
{showCfg &&
setShowCfg(false)} onSaved={() => { setShowCfg(false); refresh(); }} />}
{/* tabs */}
{tabs.map(([id, lbl, ic]) => (
setTab(id)} className={"shrink-0 inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (tab === id ? "bg-coral text-white" : "bg-card border border-white/12 text-white/60 hover:text-white")}>
))}
{tab === "overview" &&