/* ============================================ Leads — Kanban / Funnel / Table With Marketing vs AE role separation - Top role switcher: Marketing & Sales | AE | All (handover view) - Qualified stage = handover bridge ============================================ */ const stageMeta = (id) => window.CRM_DATA.STAGES.find(s => s.id === id) || window.CRM_DATA.STAGES[0]; const visibleStagesForRole = (role) => { const { STAGES } = window.CRM_DATA; // Marketing/Sales view: new/contacted/qualified/followup/won (handover at won) if (role === "marketing") return STAGES.filter(s => s.phase === "marketing" || s.phase === "handover"); // AE view: won (incoming bucket) + ae_meeting/ae_proposal/closed if (role === "ae") return STAGES.filter(s => s.phase === "handover" || s.phase === "ae"); return STAGES; }; const phaseAccent = (phase) => phase === "marketing" ? "marketing" : phase === "ae" ? "sales" : "service"; /* ---------- Card ---------- */ const KanbanCard = ({ lead, onDragStart, onDragEnd, onOpen }) => { const { TAGS, REQUIRED_CALLS } = window.CRM_DATA; const stage = stageMeta(lead.stage); const isHandover = stage.phase === "handover" && !lead.aeOwner; const isFollowup = lead.stage === "followup"; const isAeFollowup = lead.stage === "ae_followup"; const callsNeeded = (lead.callsCount || 0) < (REQUIRED_CALLS || 5); return (
{ e.dataTransfer.setData("text/plain", lead.id); e.currentTarget.classList.add("dragging"); onDragStart(lead); }} onDragEnd={(e) => { e.currentTarget.classList.remove("dragging"); onDragEnd(); }} onClick={() => onOpen(lead)} >

{lead.company}

{lead.id}

{lead.contact} · {lead.nickname}

{lead.tags.slice(0, 3).map(tid => { const t = TAGS.find(t => t.id === tid); if (!t) return null; return {t.label}; })}
{/* Sales 5-call Follow-up progress */} {isFollowup && (
Follow-up {lead.callsCount || 0}/{REQUIRED_CALLS || 5} ครั้ง
{Array.from({ length: REQUIRED_CALLS || 5 }, (_, i) => (
))}
)} {/* AE Deposit indicator */} {lead.stage === "ae_deposit" && (
รอมัดจำ 50% หรือ ≥ ฿5,000
)} {/* AE Onboard indicator */} {lead.stage === "ae_onboard" && (
นัด Onboarding
)} {/* AE Follow-up indicator (payment/contract/docs) */} {isAeFollowup && (
{lead.aeFollowupReason === "payment" ? "รอชำระเงิน" : lead.aeFollowupReason === "contract" ? "รอเซ็นสัญญา" : lead.aeFollowupReason === "documents" ? "รอเอกสาร" : "ติดตามต่อ"} ครั้งที่ {lead.aeFollowupAttempts || 1}
)} {isHandover && (
Won — รอ AE รับช่วงต่อ
)}
฿{lead.value.toLocaleString()}
{lead.mkOwner && (
)} {lead.aeOwner && (
AE
)}
); }; /* ---------- Column ---------- */ const KanbanColumn = ({ stage, leads, onDragOver, onDrop, onDragStart, onDragEnd, onOpenLead, isDropTarget }) => { const a = stage.color === "default" || stage.color === "slate" ? null : moduleAccent(stage.color); const total = leads.reduce((s, l) => s + l.value, 0); const isHandover = stage.phase === "handover"; return (
{ e.preventDefault(); }} onDragEnter={() => onDragOver(stage.id)} onDrop={(e) => { e.preventDefault(); onDrop(stage.id); }} >

{stage.label}

{leads.length} · ฿{total.toLocaleString()}

{isHandover && ( Handover )}
{leads.map(lead => )} {leads.length === 0 && (
ลากการ์ดมาที่นี่
)}
); }; /* ---------- Phase rail above Kanban ---------- */ const PhaseRail = ({ stages, role }) => { // Group consecutive stages into phase segments const segments = []; let cur = null; stages.forEach((s, i) => { const phase = s.phase; if (!cur || cur.phase !== phase) { cur = { phase, stages: [s], start: i, count: 1 }; segments.push(cur); } else { cur.stages.push(s); cur.count++; } }); // Each segment width based on count const total = stages.length; return (
{segments.map((seg, i) => { const isMk = seg.phase === "marketing"; const isHandover = seg.phase === "handover"; const isAe = seg.phase === "ae"; const colWidth = seg.count * 280 + (seg.count - 1) * 12; // 280px column + 12px gap return (

{isMk ? "Phase 1 · Marketing / Sales" : isHandover ? "Handover (at Won)" : "Phase 2 · AE (Account Executive)"}

{isMk ? "หา Lead · Qualify · Follow-up (ไม่เกิน 5 ครั้ง) · ปิดดีล" : isHandover ? "ลูกค้าตกลงซื้อแล้ว → ส่งต่อให้ AE" : "1st Meeting · เก็บข้อมูล · ทำใบเสนอราคาเชิงลึก · Onboard"}

); })}
); }; /* ---------- Kanban ---------- */ const LeadsKanban = ({ leads, onMove, onOpenLead, role }) => { const stages = visibleStagesForRole(role); const [dragOver, setDragOver] = React.useState(null); const [dragLead, setDragLead] = React.useState(null); return (
{role === "all" && }
{stages.map(s => ( l.stage === s.id)} isDropTarget={dragOver === s.id && dragLead && dragLead.stage !== s.id} onDragOver={(stageId) => setDragOver(stageId)} onDragStart={(l) => setDragLead(l)} onDragEnd={() => { setDragOver(null); setDragLead(null); }} onDrop={(stageId) => { if (dragLead && dragLead.stage !== stageId) onMove(dragLead.id, stageId); setDragOver(null); setDragLead(null); }} onOpenLead={onOpenLead} /> ))}
); }; /* ---------- Funnel ---------- */ const LeadsFunnel = ({ leads, onOpenLead, role }) => { const stages = visibleStagesForRole(role); const total = leads.length || 1; return (
{stages.map((s, i) => { const stageLeads = leads.filter(l => l.stage === s.id); const pct = (stageLeads.length / total) * 100; const widthPct = 100 - i * 12; const isHandover = s.phase === "handover"; const value = stageLeads.reduce((sum, l) => sum + l.value, 0); const bg = isHandover ? "var(--warning)" : `var(--${s.color === "default" || s.color === "slate" ? "marketing" : s.color})`; return ( {/* Handover divider above qualified */} {isHandover && (
Handover · Marketing/Sales → AE
)}

{s.label}

{s.desc}

{stageLeads.length}

฿{value.toLocaleString()}

{pct.toFixed(0)}%

{stageLeads.length > 0 && (
{stageLeads.slice(0, 6).map(l => ( ))}
)}
); })}
); }; /* ---------- Table ---------- */ const LeadsTable = ({ leads, onOpenLead, onMove, role }) => { const { TAGS } = window.CRM_DATA; return (
{leads.map(l => { const s = stageMeta(l.stage); return ( onOpenLead(l)}> ); })}
Lead บริษัท / ผู้ติดต่อ Tags Source Phase / Stage มูลค่า เจ้าของ MK / AE ติดต่อล่าสุด
{l.id}

{l.company}

{l.contact}
{l.tags.slice(0, 2).map(tid => { const t = TAGS.find(t => t.id === tid); return t ? {t.label} : null; })} {l.tags.length > 2 && +{l.tags.length - 2}}
{l.source}
{s.phase === "marketing" ? "MK" : s.phase === "handover" ? "HO" : "AE"} {s.label}
฿{l.value.toLocaleString()}
{l.mkOwner ? (
MK
) : —} {l.aeOwner ? (
AE
) : รอ AE}
{l.lastTouch}
); }; /* ============================================ New Lead modal ============================================ */ const NewLeadModal = ({ open, onClose, onCreate }) => { const { SOURCES, TAGS } = window.CRM_DATA; const [form, setForm] = React.useState({ company: "", contact: "", nickname: "", phone: "", line: "", email: "", source: "Facebook", tags: [], value: 0, note: "" }); React.useEffect(() => { if (open) setForm({ company: "", contact: "", nickname: "", phone: "", line: "", email: "", source: "Facebook", tags: [], value: 0, note: "" }); }, [open]); const toggleTag = (id) => setForm(f => ({ ...f, tags: f.tags.includes(id) ? f.tags.filter(t => t !== id) : [...f.tags, id] })); return ( } >
setForm(f => ({ ...f, company: e.target.value }))} />
setForm(f => ({ ...f, contact: e.target.value }))} />
setForm(f => ({ ...f, nickname: e.target.value }))} />
} value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} />
} value={form.line} onChange={e => setForm(f => ({ ...f, line: e.target.value }))} />
} value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} />
setForm(f => ({ ...f, value: parseInt(e.target.value) || 0 }))} />
{TAGS.map(t => { const on = form.tags.includes(t.id); return ( ); })}

Workflow ครั้งถัดไป

Marketing/Sales จะติดต่อลูกค้าและ Qualify · หาก Qualified แล้ว ระบบจะส่งต่อให้ AE รับช่วงต่อ