// screens-data.jsx — DATA section + CUSTOMERS + PRODUCTS front doors (action-first IA, reuse-only).
//
// These are NON-DESTRUCTIVE landing screens: no existing screen was removed. DATA is the single front
// door for read-only intelligence (each card says what the data means, why it matters, and a CTA that
// deep-links to the screen where the founder can act). CUSTOMERS + PRODUCTS group existing screens by
// what the founder is trying to do. Every CTA reuses the existing deep-link mechanism (window.__navTab).
const { useState: useDataState, useEffect: useDataEffect } = React;
// deepLink — reuse the shell's deep-link: set window.__navTab (tab/revtab) then navigate. Non-destructive.
function dataDeepLink(go, screen, opts) {
try { if (opts) { window.__navTab = { screen, ...opts }; window.dispatchEvent(new CustomEvent("maxab:navtab", { detail: window.__navTab })); } } catch (e) {}
go(screen);
}
// DataCard — what this means · why it matters · responsible director · expected impact · risk · CTA.
function DataCard({ icon, title, what, why, cta, onClick, stat, responsible, impact, risk }) {
return (
{T("الأدلّة لا لوحات سلبية — كل رؤية لها معنى وأثر وخطر ومسؤول وإجراء بنقرة. البيانات تُثبت؛ المديرون يتصرّفون.", "Evidence, not passive dashboards — every insight names its meaning, impact, risk, owner and a one-click action. Data proves; Managers act.")}
{/* Part 10 — make explicit that DATA is a knowledge SOURCE, not a passive archive. */}
{T("هذه البيانات مصدر معرفة يغذّي المديرين وعاصم والموظفين الأذكياء في توصياتهم وقراراتهم.", "This data is a knowledge source that feeds your Managers, Assem and the AI Agents in their recommendations and decisions.")}
{tt("لا إجراءات قابلة للتنفيذ الآن.", "No executable actions right now.")}
}
) : null}
{msg ?
{msg}
: null}
{tt("كل إجراء يمرّ عبر جسر التنفيذ المعتمد — المال يتطلّب موافقة المؤسس؛ لا تنفيذ تلقائي للمال.", "Every action goes through the approved execution bridge — money needs founder approval; no auto-spend.")}
);
}
// CUSTOMER JOURNEY board (P1/P2/P7) — the unified Lead→Payment→Onboarding→Renewal funnel, read-only over the
// existing engines (journeyOverview + commerceOverview). Every stage is REAL; payment_verified renders only
// from a verified payment (no operator toggle), so this board can never show a fake-paid order.
// Phase 18 — the Customer Journey as a LEARNING screen: per-campaign funnel + classified bottleneck + emotion +
// lost-deal reasons + winning factors + Revenue Director recommendations. Read-only; every figure real-or-NED.
function CampaignLearningSection({ lang }) {
const tt = (ar, en) => (lang === "ar" ? ar : en);
const L = (o) => (o == null ? "" : typeof o === "string" ? o : (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) || "");
const [camps, setCamps] = React.useState(null);
const [sel, setSel] = React.useState(null);
const [intel, setIntel] = React.useState(null);
const [learn, setLearn] = React.useState(null);
React.useEffect(() => { API.campaigns.list().then((r) => { const list = (r.campaigns || r || []).filter((c) => c && c.id); setCamps(list); if (list[0]) setSel(list[0].id); }).catch(() => setCamps([])); }, []);
React.useEffect(() => { if (!sel) return; setIntel(null); setLearn(null); API.assem.campaignIntelligence(sel).then(setIntel).catch(() => setIntel({ error: true })); API.assem.campaignLearning(sel).then(setLearn).catch(() => setLearn({ error: true })); }, [sel]);
if (camps === null) return ;
if (!camps.length) return
{tt("لا حملات بعد — أنشئ حملة لترى قصّتها هنا.", "No campaigns yet — create one to see its story here.")}
{tt("تعلّم من الحملات", "Learn from your campaigns")}
{tt("لماذا تنجح الحملة ولماذا تفشل — كل حملة لها قمعها واختناقها ومشاعرها ودروسها.", "Why a campaign succeeds and why it fails — each campaign's own funnel, bottleneck, emotions, and lessons.")}
{!intel ? : intel.error ? — : (
{tt("عميل محتمل ← عرض ← دفع ← تهيئة ← تجديد — كل ذلك داخل واتساب. كل مرحلة حقيقية؛ لا يظهر طلب كمدفوع إلا بدفع مؤكَّد.", "Lead → Offer → Payment → Onboarding → Renewal — all inside WhatsApp. Every stage is real; an order shows paid only on a verified payment.")}
) : null}
{/* Phase 18 — the journey is a LEARNING screen: per-campaign funnel/bottleneck/emotion/lessons. */}
{tt("القراءة فقط — تتقدّم الرحلة عبر المحادثة والدفع المؤكَّد فقط؛ لا تعليم يدوي كاذب.", "Read-only — a journey advances only through the conversation + a verified payment; no manual fake-paid.")}
);
}
// ───────────────────────────────────────────────────────────────────────────────────────────
// P3·P3 — SALES FUNNEL INTELLIGENCE (the Revenue Director OWNS it). Consumes the real sales-funnel
// engine (no new data): the unified Leads → Conversations → Qualified → Meetings → Proposals → Closed
// funnel with per-stage conversion / drop-off, the BOTTLENECK, its root-cause attribution (agent /
// objection / channel / segment), a derived (recommendation-only) action, and a per-campaign breakdown.
// HONEST: conversions are sample-gated (NED below threshold); "closed" = claimed-won, kept distinct from
// recognized cash; script attribution is surfaced as a real gap, never fabricated.
// ───────────────────────────────────────────────────────────────────────────────────────────
function funnelRecommendedAction(bottleneckLabel, attribution, tt) {
const a = attribution || {};
const topAgent = (a.byAgent || []).find((r) => r.key && r.key !== "unattributed");
const topObj = (a.byObjection || [])[0];
const topChan = (a.byChannel || []).find((r) => r.key && r.key !== "unattributed");
if (topObj && topObj.key) return tt(`جهّز الوكلاء للتعامل مع اعتراض «${topObj.key}» — أكثر سبب توقّف عند ${bottleneckLabel}.`, `Equip agents to handle the “${topObj.key}” objection — the top blocker at ${bottleneckLabel}.`);
if (topAgent && topAgent.key) return tt(`درّب «${topAgent.key}» — أغلب المتعثّرين عند ${bottleneckLabel} لديه.`, `Coach “${topAgent.key}” — most leads stalled at ${bottleneckLabel} are theirs.`);
if (topChan && topChan.key) return tt(`راجع قناة «${topChan.key}» — أغلب التسرّب عند ${bottleneckLabel} منها.`, `Review the “${topChan.key}” channel — most drop-off at ${bottleneckLabel} is there.`);
return tt(`افحص مرحلة ${bottleneckLabel} — هنا يتوقّف أغلب العملاء.`, `Investigate the ${bottleneckLabel} stage — that's where most leads stall.`);
}
function SalesFunnelPanel({ T }) {
const lang = (document.documentElement.getAttribute("dir") === "rtl") ? "ar" : "en";
const tt = (ar, en) => (lang === "ar" ? ar : en);
const sl = (s) => (lang === "ar" ? s.ar : s.en) || s.key;
const [data, setData] = React.useState(null);
const [err, setErr] = React.useState(null);
const [camps, setCamps] = React.useState(null);
const [showCamps, setShowCamps] = React.useState(false);
React.useEffect(() => { let a = true; API.metrics.salesFunnel().then((d) => a && setData(d)).catch((e) => a && setErr(e.message)); return () => { a = false; }; }, []);
const loadCamps = () => { setShowCamps((v) => !v); if (!camps) API.metrics.campaignFunnels().then(setCamps).catch(() => {}); };
if (err) return ;
if (!data) return ;
const stages = data.stages || [];
const maxCount = Math.max(1, ...(stages.map((s) => s.count || 0)));
const bl = data.bottleneck ? stages.find((s) => s.key === data.bottleneck.stage) : null;
const blLabel = bl ? sl(bl) : "";
const money = (n) => (typeof n === "number" ? n.toLocaleString() : n);
return (
{tt("إجراء مقترح", "Recommended action")}: {funnelRecommendedAction(blLabel, data.attribution, tt)} ({tt("راجعه قبل التنفيذ", "review before acting")})
) : (
{tt("لا توجد بيانات كافية لتحديد الاختناق بعد — نحتاج عيّنة كافية في كل مرحلة.", "Not enough data to pinpoint a bottleneck yet — need a real sample at each stage.")}