// Portal A.2 — Marketing dashboard function PortalAMarketing() { const s = YJ.useStore(); const toast = useToast(); const [view, setView] = useState("traffic"); const [showCouponModal, setShowCouponModal] = useState(false); const [showPushModal, setShowPushModal] = useState(false); const [showCampaignModal, setShowCampaignModal] = useState(false); const utmRows = useMemo(() => { const map = {}; s.orders.forEach(o => { if (!o.brokerId) return; map[o.brokerId] = map[o.brokerId] || { clicks: 0, carts: 0, orders: 0, gmv: 0 }; map[o.brokerId].orders += 1; map[o.brokerId].gmv += o.amount; }); // Synthesise clicks + carts from orders (3-5% conv rate) return Object.entries(map).map(([brokerId, m]) => { const broker = s.brokers.find(b => b.id === brokerId); const clicks = Math.round(m.orders * (25 + Math.random() * 18)); const carts = Math.round(m.orders * (3.5 + Math.random() * 1.4)); return { broker, clicks, carts, orders: m.orders, gmv: m.gmv, conv: (m.orders / clicks * 100) }; }).sort((a, b) => b.gmv - a.gmv); }, [s.orders, s.brokers]); const totalClicks = utmRows.reduce((a, r) => a + r.clicks, 0); const totalCarts = utmRows.reduce((a, r) => a + r.carts, 0); const totalOrders = utmRows.reduce((a, r) => a + r.orders, 0); const totalGMV = utmRows.reduce((a, r) => a + r.gmv, 0); return (

ฝ่ายการตลาด — Conversion & Campaigns

วิเคราะห์ Traffic / UTM, สร้างคูปอง Push และวัด ROI
{view === "traffic" && ( <>
{[ { label: "คลิกลิงก์นายหน้า", value: totalClicks, color: "#7b61ff" }, { label: "ใส่ตะกร้า", value: totalCarts, color: "var(--accent)" }, { label: "สั่งซื้อสำเร็จ", value: totalOrders, color: "var(--ok)" }, ].map((step, i, arr) => (
STEP {i + 1}
{step.label}
{fmtNum(step.value)}
{i > 0 && (
→ {((step.value / arr[i - 1].value) * 100).toFixed(1)}% จาก STEP {i}
)}
))}
Click → Cart
{((totalCarts / Math.max(1, totalClicks)) * 100).toFixed(1)}%
Cart → Order
{((totalOrders / Math.max(1, totalCarts)) * 100).toFixed(1)}%
End-to-end
{((totalOrders / Math.max(1, totalClicks)) * 100).toFixed(1)}%
เทียบกับ industry 1.8% — ดีกว่า
{[ { src: "Facebook", clicks: 4820, orders: 142 }, { src: "TikTok", clicks: 3210, orders: 98 }, { src: "LINE OA", clicks: 1820, orders: 76 }, { src: "Instagram", clicks: 980, orders: 28 }, { src: "Direct / Other", clicks: 540, orders: 12 }, ].map(r => (
{r.src}
{fmtNum(r.clicks)} clicks
{(r.orders / r.clicks * 100).toFixed(1)}%
))}
)} {view === "utm" && (
{utmRows.map(r => ( ))}
นายหน้าClicksAdd to CartOrdersGMVConv.UTM Link
{r.broker.avatar}
{r.broker.name}
Lv {r.broker.level}
 {fmtNum(r.clicks)} {fmtNum(r.carts)} {fmtNum(r.orders)} {fmtTHB(r.gmv)} {r.conv.toFixed(1)}% yjm.co/r/{r.broker.id}
)} {view === "campaign" && ( <>
setShowCampaignModal(true)}>+ ใหม่}>
{s.campaigns.map(c => (
{c.name}
{c.channel} · เริ่ม {fmtDate(c.startsAt)}
งบ
{fmtTHB(c.budget)}
ใช้แล้ว
{fmtTHB(c.spent)}
GMV ที่ได้
{fmtTHB(c.gmv)}
{(c.gmv / Math.max(1, c.spent)).toFixed(1)}x ROAS
))}
setShowCouponModal(true)}>+ สร้าง}>
{s.coupons.map(c => (
{c.code}
{c.desc}
Scope: {c.scope === "telesales" ? "Telesales เท่านั้น" : "ลูกค้าทั่วไป"}
-{fmtTHB(c.value)}
{c.used}/{c.limit} ใช้แล้ว
))}
setShowPushModal(true)}>+ ส่งใหม่}>
{s.pushLog.map(n => (
{n.title}
{n.body}
{fmtRelTime(n.sentAt)} ถึง {fmtNum(n.reach)} คน
))}
)} {view === "roi" && ( <>
a + c.spent, 0))} /> a + c.gmv, 0))} /> a + c.gmv, 0) / Math.max(1, s.campaigns.reduce((a, c) => a + c.spent, 0))).toFixed(2) + "x"} accent />
{s.campaigns.map(c => (
{c.name} {(c.gmv / Math.max(1, c.spent)).toFixed(2)}x
Spend {fmtTHB(c.spent)}GMV {fmtTHB(c.gmv)}
))}
)}
setShowCouponModal(false)} onSubmit={(c) => { YJ.actions.addCoupon(c); toast.push("สร้างคูปอง " + c.code + " เรียบร้อย"); setShowCouponModal(false); }} /> setShowPushModal(false)} onSubmit={(p) => { YJ.actions.sendPush(p); toast.push("ส่ง Push แล้ว ถึง " + fmtNum(s.brokers.length) + " คน"); setShowPushModal(false); }} /> setShowCampaignModal(false)} onSubmit={(c) => { YJ.actions.addCampaign(c); toast.push("สร้างแคมเปญ " + c.name); setShowCampaignModal(false); }} />
); } function CouponModal({ open, onClose, onSubmit }) { const [code, setCode] = useState(""); const [desc, setDesc] = useState(""); const [value, setValue] = useState(50); const [limit, setLimit] = useState(100); const [scope, setScope] = useState("telesales"); useEffect(() => { if (open) { setCode("YJ-" + Math.random().toString(36).slice(2, 7).toUpperCase()); setDesc(""); setValue(50); setLimit(100); setScope("telesales"); } }, [open]); return ( } >
setCode(e.target.value.toUpperCase())} /> setDesc(e.target.value)} placeholder="เช่น ส่วนลด Telesales 100฿" />
{[["telesales", "Telesales เท่านั้น (On-top)"], ["customer", "ลูกค้าทั่วไป"]].map(([k, l]) => ( ))}
); } function PushModal({ open, onClose, onSubmit }) { const [title, setTitle] = useState(""); const [body, setBody] = useState(""); useEffect(() => { if (open) { setTitle(""); setBody(""); } }, [open]); return ( } >
setTitle(e.target.value)} placeholder="เช่น โปรใหม่ Glow Beauty +15% Commission" />