// ABO Tracking — list & spreadsheet (split from abo.jsx).
// MobileAboList, FollowUpSheet, InactiveList, _jumpToSixW.
// ======================== Mobile card list ========================
// Mobile-friendly alternative to FollowUpSheet — the spreadsheet's tiny
// 28×30 checkboxes + vertical-text headers are unusable on a phone. Each
// person is a card; the หลัก (BM/BI/6W) checkboxes are exposed inline,
// other groups collapse behind an "ดูเพิ่ม" toggle to keep the card short.
// Quick navigation helper shared by the ABO list cards — open the 6W
// Tracking view focused on the matching customer.
function _jumpToSixW(name) {
if (!name) return;
const detail = { kind: '6w', name, prospectId: null };
window.__emphasisPendingFocus = detail;
window.dispatchEvent(new CustomEvent('emphasis:focus-followup', { detail }));
// navigate by re-dispatching a window event the shell listens to. We don't
// have direct access to navigate() here, so use a dedicated nav event.
window.dispatchEvent(new CustomEvent('emphasis:navigate', { detail: { view: '6w' } }));
}
function MobileAboList({ people, onToggle, onMarkInactive, onEditPerson, onRestore, onDeletePerson, sixwCodes, mode = 'active' }) {
const [expandedId, setExpandedId] = useState(null);
if (people.length === 0) {
return (
ไม่มีรายชื่อตรงกับตัวกรอง
);
}
return (
{people.map((p, idx) => {
const stage = stageOf(p);
const country = window.COUNTRIES?.find(c => c.id === p.country);
const expanded = expandedId === p.id;
const sixWEnrolled = p.filled.em6w === 'enrolled' || p.filled.em6w === true;
const mfinityDone = !!p.filled.bt3;
// Count progress for the chip on the right of each group toggle
const groupProgress = FU_GROUPS.map(g => {
const filled = g.cols.filter(c => {
const v = p.filled[c.id];
return c.id === 'em6w' ? (v === 'enrolled' || v === true) : !!v;
}).length;
return { id: g.id, filled, total: g.cols.length };
});
return (
{/* Header */}
{/* Stage badge only while still in EM Begin — keeps the card clean. */}
{stage.id === 's4' && (
{_stageLabel(stage, p)}
)}
{/* Cross-link to 6W Tracking for ABO people also enrolled
in the weight program (matched by abo_code). */}
{p.abo_code && sixwCodes && sixwCodes.has(p.abo_code) && (
)}
{mode === 'active' && onMarkInactive && (
)}
{mode === 'inactive' && onRestore && (
)}
{onDeletePerson && (
)}
{/* Key (หลัก) group — always visible: BM / BI / 6W */}
);
}
// ======================== Spreadsheet ========================
function FollowUpSheet({ people, onToggle, onMarkInactive, onRestore, onEditPerson, onDeletePerson, onReorder, onPickSponsor, hoveredCol, onHoverCol, mode = 'active' }) {
const NAME_W = 280;
const CELL_W = 28;
const CELL_H = 30;
// Drag-to-reorder state: which row id is being dragged, and which row the
// pointer is currently over (for the drop-indicator highlight).
const [dragId, setDragId] = useState(null);
const [overId, setOverId] = useState(null);
// Collapsed sponsors (their DL subtree is hidden). Default = all expanded.
const [collapsed, setCollapsed] = useState(() => new Set());
const toggleCollapse = (id) => setCollapsed(prev => {
const n = new Set(prev);
n.has(id) ? n.delete(id) : n.add(id);
return n;
});
// Quick lookup so a row can show its sponsor's name.
const byId = useMemo(() => new Map(people.map(p => [p.id, p])), [people]);
// Build the DL hierarchy: each person with a sponsorId nests under that
// sponsor. Flatten depth-first so a DL renders right under its upline,
// indented by depth. Roots = no sponsor (or sponsor not in this view).
// Sibling order follows the incoming fu_position order. Collapsed nodes
// keep their row but skip their subtree.
const flatRows = useMemo(() => {
const childrenOf = new Map();
for (const p of people) {
const par = p.sponsorId && byId.has(p.sponsorId) ? p.sponsorId : null;
if (!childrenOf.has(par)) childrenOf.set(par, []);
childrenOf.get(par).push(p);
}
const out = [];
const seen = new Set();
// `hidden` = we're inside a collapsed ancestor's subtree. We still recurse
// (so every descendant is marked seen and excluded from the orphan
// fallback below) but emit no rows for them — that's what "ซ่อน DL" means.
const walk = (parentKey, depth, hidden) => {
const kids = childrenOf.get(parentKey) || [];
for (const p of kids) {
if (seen.has(p.id)) continue; // cycle guard
seen.add(p.id);
const hasChildren = (childrenOf.get(p.id) || []).length > 0;
const isCollapsed = collapsed.has(p.id);
if (!hidden) out.push({ p, depth, hasChildren, isCollapsed });
if (hasChildren) walk(p.id, depth + 1, hidden || isCollapsed);
}
};
walk(null, 0, false);
// Safety: append any orphan not reached (shouldn't happen).
for (const p of people) if (!seen.has(p.id)) out.push({ p, depth: 0, hasChildren: false, isCollapsed: false });
return out;
}, [people, byId, collapsed]);
// Every row that has at least one DL nested under it — drives the
// "ซ่อน/แสดง DL ทั้งหมด" toggle.
const parentIds = useMemo(() => {
const s = new Set();
for (const p of people) if (p.sponsorId && byId.has(p.sponsorId)) s.add(p.sponsorId);
return s;
}, [people, byId]);
const allCollapsed = parentIds.size > 0 && [...parentIds].every(id => collapsed.has(id));
const toggleAll = () => setCollapsed(allCollapsed ? new Set() : new Set(parentIds));
return (
)}
{/* DL-of: icon-only button (the upline is already shown by the
row indentation, so no text chip). Amber when a sponsor
is set; otherwise reveals on hover. */}
{onPickSponsor && (
)}
{mode === 'active' && onMarkInactive && (
)}
{mode === 'inactive' && onRestore && (
)}
{onDeletePerson && (
)}