/* MIRAI — Dashboard de clientes · sección Inicio (modo lectura) */
const { useState: uS, useEffect: uE, useRef: uR, useMemo: uM } = React;
// ============ ICONOS (SVG inline, sin dependencias) ============
function Icon({ name, size = 18 }) {
const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
switch (name) {
case "home": return
);
}
function InstagramIcon({ size = 18, mono = false }) {
if (mono) {
return (
);
}
const gid = "ig-grad";
return (
);
}
function ChannelIcon({ channel, size = 18 }) {
return channel === "instagram" ?
setHover(null)}>
{grid.map((g) => (
{g}
))}
{data.labels.map((lb, li) => {
const i = Math.min(n - 1, li * labelEvery);
return {lb} ;
})}
)}
{hover !== null && (
{data.consultas[hover]}
{data.leads[hover]}
)}
);
}
// ============ GRÁFICO DE DONA (SVG) ============
function ConsultationResultsChart({ data }) {
const size = 150, stroke = 22, r = (size - stroke) / 2, c = 2 * Math.PI * r;
let acc = 0;
return (
{data.map((seg) => {
const len = (seg.value / 100) * c;
const el = (
{`${seg.label}: ${seg.value}%`}
);
acc += len;
return el;
})}
100%
Total
);
}
// ============ DONA INTERACTIVA + LEYENDA (tarjeta "Resultado de las consultas") ============
const RESULT_SHORT_LABEL = {
"Resueltas por Emma": "Emma",
"Derivadas correctamente": "Derivadas",
"En conversación": "En curso",
"No resueltas": "No resueltas",
"Resueltas manualmente": "Manual",
};
function ConsultationResultsCard({ data }) {
const [sel, setSel] = uS(null);
const [ready, setReady] = uS(false);
uE(() => {
setReady(false);
const t = requestAnimationFrame(() => requestAnimationFrame(() => setReady(true)));
return () => cancelAnimationFrame(t);
}, [data]);
// `pad` deja lugar dentro del lienzo SVG para que el aro más grueso del
// segmento activo (hover) no quede recortado contra el borde del viewBox.
const size = 150, stroke = 22, pad = 6, canvas = size + pad * 2, r = (size - stroke) / 2, c = 2 * Math.PI * r;
let acc = 0;
const active = sel != null ? data[sel] : null;
// Los valores reales (redondeados por separado en el backend) no siempre suman
// exactamente 100 — normalizamos contra la suma real al calcular los arcos para
// que siempre cierren el círculo sin superponerse ni dejar hueco, sin tocar el
// % que se muestra en la leyenda/tooltip/centro.
const totalValue = data.reduce((s, seg) => s + (seg.value || 0), 0) || 100;
return (
Resultado de las consultas
setSel(null)}>
{data.map((seg, i) => {
const fullLen = (seg.value / totalValue) * c;
const len = ready ? fullLen : 0;
const segStart = acc;
acc += fullLen;
return (
setSel(i)}
onClick={() => setSel((cur) => (cur === i ? null : i))}>
{`${seg.label}: ${seg.value}%`}
);
})}
{active ? `${active.value}%` : "100%"}
{active ? (RESULT_SHORT_LABEL[active.label] || active.label) : "Total"}
{data.map((seg, i) => (
setSel(i)} onMouseLeave={() => setSel(null)}
onClick={() => setSel((cur) => (cur === i ? null : i))}>
{seg.label}
{seg.value}%
))}
);
}
// ============ SIDEBAR ============
function DashboardSidebar({ active, onComingSoon, open, onClose, user }) {
const [chPrefs] = useChannelPrefs(user);
const items = [
{ key: "inicio", label: "Inicio", href: "#/dashboard", icon: (act) =>
);
}
// ============ MENÚ DESPLEGABLE / DROPDOWN GENÉRICO ============
// portal=true: el menú se renderiza en document.body con position:fixed en
// vez de quedar absoluto dentro de .dd — evita que se corte cuando el botón
// está cerca del borde de un contenedor con overflow:hidden/auto (p.ej. la
// última fila de una tabla dentro de una card).
function Dropdown({ button, children, align = "left", className = "", portal = false, closeOnItemClick = true }) {
const [open, setOpen] = uS(false);
const [pos, setPos] = uS(null);
const ref = uR(null);
const menuRef = uR(null);
uE(() => {
if (!open) return;
const onDoc = (e) => {
const insideTrigger = ref.current && ref.current.contains(e.target);
const insideMenu = menuRef.current && menuRef.current.contains(e.target);
if (!insideTrigger && !insideMenu) setOpen(false);
};
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, [open]);
// useLayoutEffect (no uE/useEffect): calcula la posición antes del paint
// para que el menú no "salte" de lugar en el primer frame. Si no entra
// debajo del botón dentro de la ventana, lo abre hacia arriba.
React.useLayoutEffect(() => {
if (!open || !portal || !ref.current) return;
const rect = ref.current.getBoundingClientRect();
const ESTIMATED_MENU_H = 260;
const openUp = window.innerHeight - rect.bottom < ESTIMATED_MENU_H && rect.top > ESTIMATED_MENU_H;
// Siempre fijar top Y bottom (uno en "auto"): la clase .dd__menu trae un
// top por defecto que si no se pisa explícitamente queda activo a la vez
// que el bottom inline, y el navegador calcula la altura como la
// distancia entre ambos en vez de ajustarla al contenido.
const vertical = openUp
? { top: "auto", bottom: window.innerHeight - rect.top + 8 }
: { top: rect.bottom + 8, bottom: "auto" };
setPos({
...vertical,
...(align === "right" ? { right: window.innerWidth - rect.right } : { left: rect.left }),
});
}, [open, portal, align]);
const menu = open && (
setOpen(false) : undefined}>
{children}
);
return (
{button(open, () => setOpen((v) => !v))}
{portal ? (open ? ReactDOM.createPortal(menu, document.body) : null) : menu}
);
}
// ============ FILTROS ============
const CHANNEL_OPTS = [
{ key: "all", label: "Todos" },
{ key: "whatsapp", label: "WhatsApp" },
{ key: "instagram", label: "Instagram" },
{ key: "crm", label: "CRM" },
];
function ChannelDropdown({ filters, setFilters }) {
const sel = CHANNEL_OPTS.find((c) => c.key === filters.channel) || CHANNEL_OPTS[0];
let triggerStyle = {};
if (sel.key === "whatsapp") triggerStyle = { background: "#25D366", color: "#fff", borderColor: "#25D366" };
if (sel.key === "instagram") triggerStyle = { background: "linear-gradient(90deg, #8134AF 0%, #C837AB 38%, #F35369 70%, #F58529 100%)", color: "#fff", borderColor: "transparent" };
if (sel.key === "crm") triggerStyle = { background: "#C0003B", color: "#fff", borderColor: "#C0003B" };
return (
(
{sel.key === "whatsapp" &&
)}>
{CHANNEL_OPTS.map((c) => (
setFilters({ ...filters, channel: c.key })}>
{c.key === "whatsapp" &&
))}
);
}
function DashboardFilters({ filters, setFilters, env, setEnv, showEnvSwitch }) {
const periodLabel = (DASH_PERIODS.find((p) => p.key === filters.period) || {}).label;
return (
(
)}>
{DASH_PERIODS.map((p) => (
setFilters({ ...filters, period: p.key })}>{p.label}
))}
);
}
// ============ SELECTOR DE ENTORNO (tester / producción) ============
function EnvSwitch({ env, setEnv }) {
const sel = MIRAI_ENVIRONMENTS.find((e) => e.key === env) || MIRAI_ENVIRONMENTS[0];
return (
(
)}>
{MIRAI_ENVIRONMENTS.map((e) => (
setEnv(e.key)}>{e.label}
))}
);
}
// ============ BOTÓN DE ACTUALIZACIÓN MANUAL + ÚLTIMA ACTUALIZACIÓN ============
function RefreshControl({ onRefresh, loading, lastUpdated }) {
return (
{lastUpdated && (
Actualizado {miraiFmtTime(lastUpdated)}
)}
);
}
// ============ TARJETA DE MÉTRICA ============
// Anima de 0 al valor numérico cuando éste cambia (count-up). Para valores de
// texto (p.ej. "WhatsApp") o con unidades raras, muestra el texto tal cual.
function useCountUp(target, active, duration = 900) {
const [val, setVal] = uS(target);
const prev = uR(target);
uE(() => {
if (!active) { setVal(target); return; }
const from = prev.current || 0;
const to = target;
prev.current = to;
if (from === to) { setVal(to); return; }
let raf;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(from + (to - from) * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, active, duration]);
return val;
}
function MetricCard({ m }) {
const dirCls = m.dir === "up" ? "is-up" : m.dir === "down-good" ? "is-up" : m.dir === "up-bad" ? "is-down" : "";
const raw = String(m.value);
const isText = /[A-Za-z]/.test(raw);
// Detecta valores puramente numéricos (con separadores de miles y % opcional).
const numMatch = /^([\d.]+)\s*(%?)$/.exec(raw.replace(/\./g, "").replace(",", "."));
const animate = !isText && numMatch != null;
const targetNum = animate ? parseFloat(numMatch[1]) : 0;
const suffix = animate ? numMatch[2] : "";
const reduced = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
const animVal = useCountUp(targetNum, animate && !reduced);
const shown = animate
? `${Math.round(animVal).toLocaleString("es-AR")}${suffix}`
: raw;
return (
{m.label}
{shown}
{m.delta && {m.delta} }
{m.note && {m.note} }
);
}
// ============ DESGLOSE DE CANALES ============
function ChannelBreakdown({ channels }) {
return (
{channels.map((ch, i) => (
0 ? "has-sep" : ""}`}>
{ch.label}
{ch.pct}%
{ch.count.toLocaleString("es-AR")} consultas
))}
{cfg.label} ;
}
// ============ TABLA DE CONSULTAS ============
function RecentConsultationsTable({ rows, onSelect }) {
return (
Cliente Canal Intención Zona Presupuesto Estado Fecha
{rows.map((r) => (
onSelect(r)} tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter") onSelect(r); }}>
{r.name}
{r.intent}
{r.zone}
{r.budget}
{r.dateLabel}
))}
{rows.length === 0 && (
No hay consultas para los filtros seleccionados.
);
}
// ============ DRAWER DE DETALLE (modo lectura) ============
function ConsultationDetailDrawer({ row, onClose, onGoToChat, onCopyDiagnosis, onAssign }) {
uE(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
}, []);
if (!row) return null;
const d = row.detail;
const fields = [
["Nombre", row.name], ["Canal", row.channel === "instagram" ? "Instagram" : "WhatsApp"],
[row.channel === "instagram" ? "Usuario" : "Teléfono", d.contact],
["Intención", row.intent], ["Zona", row.zone], ["Tipo de propiedad", d.propertyType],
["Ambientes", d.ambientes], ["Presupuesto", row.budget], ["Forma de pago", d.payment],
["Características", d.features], ["Hora de ingreso", d.entryTime], ["Hora de derivación", d.derivTime],
];
const diagnosisText = d.summary && miraiFormatDiagnosis({
name: row.name, operator: (row.derivedTo || []).join(", "), phone: d.contact, intent: row.intentRaw || row.intent, summary: d.summary,
});
return (
Derivado a
onAssign(row, p)} />
onGoToChat(row)}>
onCopyDiagnosis(row)}>
Diagnóstico
{diagnosisText}
Datos del lead
{fields.map(([k, v]) => (
{k}
{v || "—"}
))}
);
}
// ============ PANEL: ZONAS MÁS BUSCADAS ============
function TopZonesCard({ zones, onMore }) {
return (
Zonas más buscadas
{zones.map((z, i) => (
{i + 1}. {z.zone}
{z.count.toLocaleString("es-AR")}
))}
Ver todas las zonas
);
}
// ============ PANEL: CONSULTAS NO RESUELTAS ============
function UnresolvedConsultationsCard({ items, onMore }) {
return (
Consultas no resueltas
{items.map((it, i) => (
{i + 1}. {it.reason}
{it.pct}%
))}
Ver detalle
);
}
// ============ MODAL GENÉRICO ============
function Modal({ title, onClose, children }) {
uE(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, []);
return (
);
}
// ============ AVISO "PRÓXIMAMENTE" (toast discreto) ============
function ComingSoonNotice({ msg }) {
if (!msg) return null;
return {msg}
;
}
// ============ ENCABEZADO ============
function DashboardHeader({ filters, setFilters, onLogout, onMenu, onAccount, onRefresh, loading, lastUpdated, env, setEnv, showEnvSwitch }) {
return (
);
}
// ============ HOOK: toast "próximamente" reutilizable ============
function useToast() {
const [toast, setToast] = uS("");
const show = (msg) => {
setToast(msg);
window.clearTimeout(show._t);
show._t = window.setTimeout(() => setToast(""), 2600);
};
return [toast, show];
}
const COMING_SOON = "Esta sección estará disponible próximamente.";
// ============ PANTALLA INICIO ============
function DashboardHomePage({ user, onLogout, env, setEnv, showEnvSwitch }) {
const [filters, setFilters] = uS({ period: "30d", channel: "all", compare: false });
const [selected, setSelected] = uS(null);
const [modal, setModal] = uS(null); // 'zones' | 'unresolved'
const [sbOpen, setSbOpen] = uS(false);
const [toast, showToast] = useToast();
// Datos del dashboard: mock para cuentas demo, backend en vivo para cuentas
// con datos en Supabase (p.ej. "deleo"). Misma forma en ambos casos.
const data = useDashboardData(user, filters, env);
const { metrics, series, results, channels, rows, zones, unresolved } = data;
// Clave que cambia con cada actualización/filtro para reanimar la entrada de tarjetas.
const animKey = `${filters.period}-${filters.channel}-${data.lastUpdated ? data.lastUpdated.getTime() : 0}`;
// "Ir a la conversación": guarda qué chat abrir y navega al Inbox de ese canal
// (mismo mecanismo que usa el Tablero — ver mirai_setPendingChat en dashboard-inbox.jsx).
const goToChat = (row) => {
mirai_setPendingChat(row.channel, row.detail.contact);
window.location.hash = `#/dashboard/${row.channel}`;
};
const copyDiagnosis = async (row) => {
const summary = row.detail.summary;
if (!summary) return;
const text = miraiFormatDiagnosis({
name: row.name, operator: (row.derivedTo || []).join(", "), phone: row.detail.contact, intent: row.intentRaw || row.intent, summary,
});
try { await navigator.clipboard.writeText(text); } catch (e) { /* clipboard no disponible */ }
showToast("Diagnóstico copiado");
};
// "Derivado a": admite varias personas a la vez. Optimista siempre; en
// cuentas en vivo además lo guarda en Supabase (mismo endpoint que usa el
// Tablero) — si falla, se revierte.
const assignDerivedTo = async (row, derivedToList) => {
const prev = row.derivedTo;
setSelected((r) => (r && r.id === row.id ? { ...r, derivedTo: derivedToList } : r));
const label = derivedToList.length ? `Derivado a ${derivedToList.join(", ")}` : "Derivado desasignado";
if (!data.isLive) {
showToast(label);
return;
}
try {
await mirai_assignDerivedTo(row.detail.contact, derivedToList, env);
showToast(label);
} catch (e) {
setSelected((r) => (r && r.id === row.id ? { ...r, derivedTo: prev } : r));
showToast("No se pudo guardar la asignación.");
}
};
return (
showToast(COMING_SOON)} open={sbOpen} onClose={() => setSbOpen(false)} />
setSbOpen(true)}
onAccount={() => showToast(COMING_SOON)}
onRefresh={data.refresh} loading={data.loading} lastUpdated={data.lastUpdated}
env={env} setEnv={setEnv} showEnvSwitch={showEnvSwitch} />
{/* Fila 1 — métricas */}
{metrics.map((m) =>
{/* Fila 2 — gráficos */}
Evolución de consultas y leads
Canales
{/* Fila 3 — tabla + paneles */}
Últimas consultas
setModal("zones")} />
setModal("unresolved")} />
{selected && (
setSelected(null)}
onGoToChat={goToChat} onCopyDiagnosis={copyDiagnosis} onAssign={assignDerivedTo} />
)}
{modal === "zones" && (
setModal(null)}>
{data.zonesFull.map((z, i) => (
{i + 1}. {z.zone}
{z.count.toLocaleString("es-AR")}
))}
)}
{modal === "unresolved" && (
setModal(null)}>
Motivo Incidencia Descripción
{data.unresolvedFull.map((it) => (
{it.reason}
{it.pct}%
{it.desc}
))}
)}
);
}
// ============ INTENCIONES MÁS FRECUENTES (barras horizontales) ============
const BAR_SHADES = ["#000000", "#3d3d3d", "#6b6b6b", "#9a9a9a", "#c9c9c9"];
function TopIntentionsCard({ items }) {
return (
Intenciones más frecuentes
{items.map((it, i) => (
{i + 1}.
{it[0]}
{it[1]}%
))}
);
}
// ============ PANEL "MÁS INFORMACIÓN" (colapsable) ============
function MoreInformationPanel({ cfg }) {
const [open, setOpen] = uS(false);
const strip = cfg.gradient || cfg.accent;
return (
setOpen((v) => !v)} aria-expanded={open}>
Más información
Ver últimas consultas, horarios de mayor demanda y más detalles
Últimas consultas
{cfg.recent.map((r, i) => (
{r.name}
{r.intent} · {r.zone}
{r.time}
))}
Horarios con mayor demanda
{cfg.peakHours.map((h) => (
{h[0]}
))}
Zonas más consultadas
{cfg.zones.map((z, i) => (
{i + 1}. {z[0]}
{z[1].toLocaleString("es-AR")}
))}
Consultas no resueltas
{cfg.unresolved.map((u, i) => (
{i + 1}. {u[0]}
{u[1]}%
))}
);
}
// ============ HEADER DE CANAL ============
function ChannelDashboardHeader({ cfg, filters, setFilters, onLogout, onMenu, onAccount, onRefresh, loading, lastUpdated, env, setEnv, showEnvSwitch }) {
return (
);
}
// ============ EMPTY STATE (canal sin datos) ============
function ChannelEmptyState({ cfg }) {
return (
Todavía no hay datos disponibles para este canal.
);
}
// ============ PÁGINA DE CANAL (WhatsApp / Instagram) ============
function ChannelDashboardPage({ channel, user, onLogout }) {
const cfg = dashGetChannelCfg(channel);
const [filters, setFilters] = uS({ period: "30d", channel, compare: false });
const [sbOpen, setSbOpen] = uS(false);
const [toast, showToast] = useToast();
// Datos reales (deleo) o mock (cuentas demo). El filtro de canal va al backend.
const data = useDashboardData(user, { period: filters.period, channel, compare: filters.compare });
// Fuente de datos según cuenta. Para datos reales mantenemos la identidad
// visual del canal (cfg) pero los datos vienen del backend.
const isLive = data.isLive;
const metrics = isLive ? data.metrics : dashGetChannelMetrics(channel, filters);
const series = isLive ? data.series : dashGetChannelSeries(channel, filters);
const results = isLive ? data.results : dashGetChannelResults(channel);
const intentions = isLive ? data.intentions : cfg.intentions;
const panelCfg = isLive
? {
...cfg,
recent: data.recent,
peakHours: data.peakHours,
zones: (data.zones || []).map((z) => [z.zone, z.count]),
unresolved: (data.unresolved || []).map((u) => [u.reason, u.pct]),
}
: cfg;
const showEmpty = isLive && data.empty;
const animKey = `${channel}-${filters.period}-${data.lastUpdated ? data.lastUpdated.getTime() : 0}`;
return (
showToast(COMING_SOON)} open={sbOpen} onClose={() => setSbOpen(false)} />
setSbOpen(true)} onAccount={() => showToast(COMING_SOON)}
onRefresh={data.refresh} loading={data.loading} lastUpdated={data.lastUpdated} />
{metrics.map((m) =>
{showEmpty ? (
Evolución de consultas de {cfg.name}
Estado de las consultas
{results.map((seg) => (
{seg.label}
{seg.value}%
))}
);
}
// ============ DARK MODE (preferencia persistida en el navegador) ============
const MIRAI_DARK_KEY = "mirai_dark";
function miraiReadDark() {
try { return localStorage.getItem(MIRAI_DARK_KEY) === "1"; } catch (e) { return false; }
}
function miraiApplyDark(on) {
const el = document.documentElement;
if (on) el.classList.add("mirai-dark"); else el.classList.remove("mirai-dark");
}
function useDarkMode() {
const [dark, setDark] = uS(miraiReadDark);
uE(() => {
miraiApplyDark(dark);
try { localStorage.setItem(MIRAI_DARK_KEY, dark ? "1" : "0"); } catch (e) {}
}, [dark]);
// Al desmontar el dashboard volvemos al tema claro (la landing es siempre clara).
uE(() => () => miraiApplyDark(false), []);
return [dark, setDark];
}
// ============ CANALES ACTIVOS (preferencia por usuario, persistida) ============
// Se guarda por usuario en el navegador (igual que la preferencia de Dark Mode),
// de modo que cada cuenta conserva su propia configuración tras cerrar sesión o
// recargar. NO toca datos ni la conexión con Google Sheets: es solo visual/acceso.
const miraiChKey = (user) => `mirai_channels_${(user || "").toLowerCase()}`;
const CH_FIELDS = {
whatsapp: "whatsappEnabled", instagram: "instagramEnabled",
crm: "crmEnabled", rastreo: "rastreoEnabled", tickets: "ticketsEnabled",
};
function miraiReadChannels(user) {
try {
const raw = JSON.parse(localStorage.getItem(miraiChKey(user)) || "null") || {};
return {
whatsappEnabled: raw.whatsappEnabled !== false,
instagramEnabled: raw.instagramEnabled !== false,
crmEnabled: raw.crmEnabled !== false,
rastreoEnabled: raw.rastreoEnabled !== false,
ticketsEnabled: raw.ticketsEnabled !== false,
};
} catch (e) {
return { whatsappEnabled: true, instagramEnabled: true, crmEnabled: true, rastreoEnabled: true, ticketsEnabled: true };
}
}
function useChannelPrefs(user) {
const [prefs, setPrefs] = uS(() => miraiReadChannels(user));
uE(() => { setPrefs(miraiReadChannels(user)); }, [user]);
uE(() => {
const onChange = () => setPrefs(miraiReadChannels(user));
window.addEventListener("mirai-channels-changed", onChange);
window.addEventListener("storage", onChange);
return () => {
window.removeEventListener("mirai-channels-changed", onChange);
window.removeEventListener("storage", onChange);
};
}, [user]);
const setChannel = (key, enabled) => {
const cur = miraiReadChannels(user);
const field = CH_FIELDS[key] || "whatsappEnabled";
const next = { ...cur, [field]: enabled };
try { localStorage.setItem(miraiChKey(user), JSON.stringify(next)); } catch (e) {}
setPrefs(next);
window.dispatchEvent(new Event("mirai-channels-changed"));
};
return [prefs, setChannel];
}
// ============ PÁGINA DE CONFIGURACIÓN ============
const MIRAI_ADMIN_WA = "5491128661164"; // +54 9 11 2866 1164
function ConfigurationPage({ user, onLogout, dark, setDark, env, setEnv, showEnvSwitch }) {
const [sbOpen, setSbOpen] = uS(false);
const [toast, showToast] = useToast();
const [chPrefs, setChannel] = useChannelPrefs(user);
const waLink = `https://wa.me/${MIRAI_ADMIN_WA}?text=${encodeURIComponent("Hola, quiero cambiar mi usuario o contraseña del dashboard de MirAI.")}`;
return (
showToast(COMING_SOON)} open={sbOpen} onClose={() => setSbOpen(false)} />
setSbOpen(true)} aria-label="Abrir menú">
Configuración
Preferencias de tu cuenta
(
Cerrar sesión
{/* Cuenta */}
{/* Apariencia */}
Apariencia
Modo oscuro
Cambia el tema del dashboard. La preferencia se guarda en este dispositivo.
setDark((v) => !v)}>
{/* Canales activos */}
Canales activos
Activar o desactivar canal
setChannel("whatsapp", !chPrefs.whatsappEnabled)}>
Activar o desactivar canal
setChannel("instagram", !chPrefs.instagramEnabled)}>
Activar o desactivar canal
setChannel("crm", !chPrefs.crmEnabled)}>
Activar o desactivar canal
setChannel("rastreo", !chPrefs.rastreoEnabled)}>
Activar o desactivar canal
setChannel("tickets", !chPrefs.ticketsEnabled)}>
);
}
// ============ ROUTER DEL DASHBOARD ============
function DashboardApp({ user, onLogout }) {
const route = useRoute();
const [dark, setDark] = useDarkMode();
const [chPrefs] = useChannelPrefs(user);
const { env, setEnv, showEnvSwitch } = useMiraiEnv(user);
const envProps = { env, setEnv, showEnvSwitch };
// Guard: si el canal está desactivado, redirigir a /dashboard (sin borrar datos).
const blocked =
(route === "/dashboard/whatsapp" && !chPrefs.whatsappEnabled) ||
(route === "/dashboard/instagram" && !chPrefs.instagramEnabled) ||
(route === "/dashboard/crm" && !chPrefs.crmEnabled) ||
(route === "/dashboard/rastreo" && !chPrefs.rastreoEnabled) ||
(route === "/dashboard/tickets" && !chPrefs.ticketsEnabled);
uE(() => {
if (blocked && window.location.hash !== "#/dashboard") {
window.location.hash = "#/dashboard";
}
}, [blocked]);
if (!blocked && route === "/dashboard/whatsapp") return