// ABO Tracking — funnel & waiting-stage cards (split from abo.jsx).
// PipelineFunnel, GroupReportModal, WaitingStages, EmBeginFollowUpCard.
// ======================== Pipeline Funnel ========================
// Each tile shows the count of people who STILL NEED to be followed up to
// reach this stage (waitingGate), not the count currently sitting at that
// stage. Clicking a tile filters the sheet to those same waiting people.
function PipelineFunnel({ people, stageFilter, onStageClick }) {
const counts = VISIBLE_STAGES.map(s => people.filter(p => s.waitingGate?.(p)).length);
const max = Math.max(1, ...counts);
return (
Pipeline · เส้นทาง follow up
คลิก stage เพื่อกรองรายชื่อ
{people.length} คน
{VISIBLE_STAGES.map((s, i) => {
const c = counts[i];
const isActive = stageFilter === s.id;
const ratio = c / max;
return (
);
})}
);
}
// ======================== Waiting at each stage (2Y / Check in / Em Guide) ========================
// Renders one card per stage that has a `waitingGate` AND has at least one
// person matching it. If everyone is caught up at every gated stage, we
// show a single "all clear" card.
// The "ต้องเข้า X" cards stay hidden by default — they only show when the
// user clicks a stage tile in the PipelineFunnel above. That way the
// reminder area is quiet until you actively drill into a stage.
// BT never gets a card (it's only counted in the funnel).
// ======================== Group report / ส่งการบ้าน ========================
// Summary popup: for the chosen class/condition, list everyone in the filter
// grouped by who their upline (sponsor) is, showing attended ✅ + camera 📷.
// Produces a copy-ready text block to paste into the homework group chat.
const GR_HEART = ['💖', '🩵', '🤍', '💛', '💚', '🧡', '💜', '❤️', '🩷', '💙'];
function GroupReportModal({ stage, people, currentUser, onClose, onToast }) {
// For EM Begin (s4) the user picks which of the 4 classes to report on.
const EM_CLASSES = (FU_GROUPS.find(g => g.id === 'meeting')?.cols) || [];
const isEmBegin = stage?.id === 's4';
const [classId, setClassId] = useState(isEmBegin ? 'mtg1' : null);
// Manual overrides — both attendance and camera are editable in the popup,
// defaulting to whatever the ABO Tracking data already says. Keyed by id.
const [att, setAtt] = useState({}); // id → bool
const [camera, setCamera] = useState({}); // id → bool
const [reason, setReason] = useState({}); // id → string (why absent)
// Pool = only people who haven't yet attended the chosen class/stage in the
// data — that's who you still need to chase. EM Begin: BM+BI done, not
// MFinity'd, and the selected class still un-ticked.
const pool = useMemo(() => {
if (isEmBegin) return people.filter(p => !!p.filled.bmodel && !!p.filled.bincome && !p.filled.bt3 && !p.filled[classId]);
return people.filter(p => stage?.waitingGate?.(p));
}, [people, stage, isEmBegin, classId]);
// Default: everyone เข้า + เปิดกล้อง — the user unchecks whoever was absent.
// Reset overrides when the class changes.
const dataAttended = () => true;
useEffect(() => { setAtt({}); setCamera({}); setReason({}); }, [classId]);
const attendedOf = (p) => (p.id in att) ? att[p.id] : dataAttended(p);
const camOf = (p) => (p.id in camera) ? camera[p.id] : attendedOf(p);
const reasonOf = (p) => reason[p.id] || '';
// Which EM Begin attendance this class is for the person: classes already
// done + 1. 1 → ครั้งแรก, 4 → ครั้งสุดท้าย, else ครั้งที่ N. EM Begin only.
const attemptLabel = (p) => {
const n = _mtgDone(p) + 1;
if (n <= 1) return 'ครั้งแรก';
if (n >= 4) return 'ครั้งสุดท้าย';
return `ครั้งที่ ${n}`;
};
const toggleAtt = (p) => setAtt(prev => ({ ...prev, [p.id]: !attendedOf(p) }));
const toggleCam = (p) => setCamera(prev => ({ ...prev, [p.id]: !camOf(p) }));
// Group by sponsor (upline). sponsorId null → top group under the coach.
const byId = useMemo(() => new Map(people.map(p => [p.id, p])), [people]);
const groups = useMemo(() => {
const m = new Map(); // sponsorId|'_top' → { name, members[] }
for (const p of pool) {
const key = p.sponsorId || '_top';
const name = p.sponsorId ? (byId.get(p.sponsorId)?.name || 'อัปไลน์') : 'Front Line ติดตัว';
if (!m.has(key)) m.set(key, { name, members: [] });
m.get(key).members.push(p);
}
// top group first, then alpha
return [...m.entries()].sort((a, b) => (a[0] === '_top' ? -1 : b[0] === '_top' ? 1 : a[1].name.localeCompare(b[1].name)));
}, [pool, byId]);
const classLabel = isEmBegin ? (EM_CLASSES.find(c => c.id === classId)?.label || '') : stage?.short;
const attendedCount = pool.filter(attendedOf).length;
// Build the copy text.
const buildText = () => {
const absentCount = pool.length - attendedCount;
const camOffCount = pool.filter(p => attendedOf(p) && !camOf(p)).length;
const lines = [];
lines.push(`📋 สรุปการบ้าน · ${classLabel}`);
lines.push(`✅ เข้าเรียน ${attendedCount}/${pool.length} คน · ❌ ขาด ${absentCount} คน`);
lines.push(`🚫 ปิดกล้อง ${camOffCount} คน`);
lines.push('');
groups.forEach(([, g], gi) => {
lines.push(`${GR_HEART[gi % GR_HEART.length]} ${g.name === 'Front Line ติดตัว' ? 'Front Line ติดตัว' : 'ของ ' + g.name}`);
g.members.forEach((p, i) => {
const att = attendedOf(p);
const cam = camOf(p);
const why = !att && reasonOf(p).trim() ? ` (${reasonOf(p).trim()})` : '';
const times = isEmBegin ? ` · ${attemptLabel(p)}` : '';
lines.push(`${i + 1}.${p.name}${times} ${att ? '✅' : '❌'}${att ? (cam ? ' 📷' : ' 🚫กล้อง') : why}`);
});
lines.push('');
});
return lines.join('\n').trim();
};
const copy = () => { try { navigator.clipboard.writeText(buildText()); } catch {} onToast?.('คัดลอกการบ้านแล้ว · เอาไปวางในกลุ่มได้เลย', '#10B981'); };
return (
);
}
// ======================== EM Begin follow-up tracker ========================
// Lists who hasn't yet attended each EM Begin class — but only for people
// who:
// 1. have actually finished BM + BI (no point chasing them into a class
// they haven't met the prerequisite for), and
// 2. haven't reached MFinity (BT ข้อ 3) — once MFinity is ticked the
// EM Begin group is closed for that person, so they drop out.
//
// EM Begin classes come from the 'meeting' group in FU_GROUPS — the four
// mtg1..mtg4 columns. The card stays hidden when nobody's waiting.
function EmBeginFollowUpCard({ people, onMarkInactive, onGroupReport }) {
const meetingGroup = FU_GROUPS.find(g => g.id === 'meeting');
// Lookup so each row can show its upline (UL) name in parentheses.
const byId = useMemo(() => new Map((people || []).map(p => [p.id, p])), [people]);
if (!meetingGroup) return null;
const classes = meetingGroup.cols;
// BM + BI done, not MFinity'd yet — that's the chase pool.
const eligible = people.filter(p => !!p.filled.bmodel && !!p.filled.bincome && !p.filled.bt3);
const groups = classes
.map(cls => ({ cls, missing: eligible.filter(p => !p.filled[cls.id]) }))
.filter(g => g.missing.length > 0);
// Empty state (everyone caught up or already MFinity'd)
if (groups.length === 0) {
return (