💰 เงินสดนี้ “ใช้ได้จริง” เท่าไร — แยกตามบัญชี
{canEdit && }
openDrill('all')} title="กดดูทุกบัญชี" style={{ fontSize: 28, fontWeight: 800, color: C.ink, letterSpacing: '-.5px', cursor: 'pointer' }}>{cfpFmtM(total)}
เงินสดรวมทุกบัญชี — openDrill('usable')} title="กดดูว่ามาจากบัญชีไหน" style={{ color: C.pos, ...clk }}>ใช้ได้จริง {cfpFmtM(usableTotal)} ({pct(usableTotal)}%){restrictedTotal > 0 ? · ติดเงื่อนไข {cfpFmtM(restrictedTotal)} ({pct(restrictedTotal)}%) : null}
{/* แถบ 100% แยกตามประเภท */}
{byType.map(t =>
openDrill(t.key)} title={t.icon + ' ' + t.label + ' · ' + cfpFmtB(t.amount) + ' (กดดูที่มา)'} style={{ width: (total > 0 ? t.amount / total * 100 : 0) + '%', background: t.color, minWidth: 2, cursor: 'pointer' }} />)}
{/* ชิปประเภท (กดดูบัญชีในแต่ละประเภท) = "เงินก้อนนี้เป็นเงินอะไรบ้าง" */}
{byType.map(t => (
))}
กดที่ยอด หรือชิปประเภท เพื่อดูว่ามาจากบัญชีไหน + เพิ่ม-ลดรายเดือน · ทั้งหมด {accts.length} บัญชี
{unclassified && canEdit &&
ยังไม่ได้จัดประเภทบัญชี — กด ✏️ จัดประเภทบัญชี เพื่อระบุ ค้ำประกัน/นักลงทุน/บัญชีร่วม/OD (ตอนนี้นับเป็นใช้ได้ทั้งหมด)
}
{/* โมดัล: ที่มาของยอด (รายบัญชี + เพิ่ม-ลดรายเดือน) / โหมดจัดประเภท */}
{modalOpen && (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,.3)', width: 'min(940px,100%)', padding: '18px 20px' }}>
{modalTitle}
{shown.length} บัญชี · รวม {cfpFmtM(shownTotal)}{(!editing && dMeta) ? ' (' + pct(shownTotal) + '% ของเงินสดทั้งหมด)' : ''}
{editing
?
:
{canEdit && }
}
{editing &&
เลือกประเภทของแต่ละบัญชีจากเมนู (สามารถใช้ได้ / ค้ำประกัน / นักลงทุน / บัญชีร่วม / OD) แล้วกดบันทึก
}
| บัญชี |
ประเภท |
ต้นงวด |
{months.map(m => {CFP_MONTHS[m] || m} | )}
ปลายงวด |
{shown.map(a => {
const k = typeOf(a); const m = cfpTypeMeta(k);
return (
| ···{a.last4 || '—'} |
{editing
?
: } |
{cfpFmtM(a.opening)} |
{months.map(mn => { const v = a.byMonth[mn] || 0; return 0 ? C.pos : (v < 0 ? C.neg : C.faint) }}>{cfpDeltaM(v)} | ; })}
{cfpFmtM(a.ending)} |
);
})}
| รวม |
|
{cfpFmtM(shown.reduce((s, a) => s + a.opening, 0))} |
{months.map(m => { const v = shown.reduce((s, a) => s + (a.byMonth[m] || 0), 0); return 0 ? C.pos : (v < 0 ? C.neg : C.faint), position: 'sticky', bottom: 0, background: C.soft }}>{cfpDeltaM(v)} | ; })}
{cfpFmtM(shownTotal)} |
ต้นงวด = ยอดยกมารายบัญชี · ตัวเลขรายเดือน = เพิ่ม/ลดสุทธิของบัญชีนั้นในเดือนนั้น (รวมเงินโอนระหว่างบัญชี) · ปลายงวด = ยอดคงเหลือล่าสุด
)}
);
}
/* ---------- SVG: waterfall ---------- */
function CfpWaterfall({ model, onPick }) {
const W = 720, H = 300, padX = 46, top = 30, baseY = 250;
const cols = [
{ key: null, name: 'ต้นงวด', delta: model.opening, abs: true }, { key: 'op', name: 'ดำเนินงาน', delta: model.acts.op.net },
{ key: 'inv', name: 'ลงทุน', delta: model.acts.inv.net }, { key: 'fin', name: 'จัดหาเงิน', delta: model.acts.fin.net },
{ key: null, name: 'ปลายงวด', delta: model.ending, abs: true },
];
const segs = [{ from: 0, to: model.opening }]; let cum = model.opening;
[model.acts.op.net, model.acts.inv.net, model.acts.fin.net].forEach(d => { const from = cum; cum += d; segs.push({ from, to: cum }); });
segs.push({ from: 0, to: model.ending });
const peak = Math.max(model.opening, model.ending, ...segs.map(s => Math.max(s.from, s.to))) * 1.1 || 1;
const y = v => baseY - (v / peak) * (baseY - top);
const slot = (W - padX * 2) / cols.length, bw = Math.min(74, slot * 0.5);
return (
);
}
/* ---------- SVG: monthly grouped bars (up/down by activity) ---------- */
function CfpMonthly({ model, onPick }) {
const mo = model.monthly; if (!mo.length) return null;
const acts = ['op', 'inv', 'fin'];
// ★ แท่งกลุ่มตามกิจกรรม "ขึ้น/ลง" จากเส้นศูนย์ — บวกขึ้น (เข้ม) · ลบลง (จาง)
// ค่ากำกับ: บวกบนหัวแท่ง · ลบใต้แท่ง. จัดกลุ่มรายเดือน (พื้นสลับเฉดแยกเดือน).
const W = 760, H = 320, padX = 20, padTop = 40, padBot = 56;
const plotH = H - padTop - padBot, baseY = H - padBot, zeroY = padTop + plotH / 2, half = plotH / 2 - 12;
const maxAbs = Math.max.apply(null, mo.map(d => Math.max(Math.abs(d.op), Math.abs(d.inv), Math.abs(d.fin))).concat([1]));
const slot = (W - padX * 2) / mo.length, cx = i => padX + slot * i + slot / 2;
const gb = Math.min(34, (slot * 0.66) / 3), gap = Math.min(9, gb * 0.3);
const groupW = gb * 3 + gap * 2;
const barH = v => Math.max(2, Math.abs(v) / maxAbs * half);
const lbl = v => (v >= 0 ? '+' : '-') + (Math.abs(v) / 1e6).toFixed(1) + 'M';
return (
);
}
function CfpBar({ amt, max }) { const w = Math.max(2, Math.round(Math.abs(amt) / (max || 1) * 100)); return
; }
/* ---------- statement table ---------- */
function CfpStatementTable({ model, onPick }) {
const rows = model.stmt;
const [collapsed, setCollapsed] = useState({}); // { prefix: true } = ย่อกลุ่มรหัสนั้น
if (!rows || !rows.length) return
ยังไม่มีรายการในงบ
;
const months = (model.monthLabels && model.monthLabels.length) ? model.monthLabels : model.months.map(m => CFP_MONTHS[m]);
const monthNumByIdx = i => model.months[i] || (i + 1);
const toggle = p => setCollapsed(c => Object.assign({}, c, { [p]: !c[p] }));
const anyCode = rows.some(r => r.type === 'codegroup');
const acct = v => { if (!v) return
-; const neg = v < 0; return
{neg ? '(' + cfpFmtPlain(v) + ')' : cfpFmtPlain(v)}; };
const th = { padding: '8px 8px', fontWeight: 700, color: C.mut, whiteSpace: 'nowrap', borderBottom: '2px solid ' + C.line, fontSize: 12, position: 'sticky', top: 0, background: '#f6f9fe' };
return (
{anyCode &&
}
| รหัส |
รายการ |
{months.map((m, i) => {m} | )}
รวม |
{rows.map((r, ri) => {
const isLeaf = r.type === 'leaf', isSection = r.type === 'section', isNet = r.type === 'net', isGrand = r.type === 'grand', isSub = r.type === 'subtotal', isGroup = r.type === 'group', isCode = r.type === 'codegroup';
if (isLeaf && r.prefix && collapsed[r.prefix]) return null; // ซ่อนรายการย่อยเมื่อกลุ่มถูกย่อ
// สีไล่ระดับชั้นให้ดูกลุ่มง่าย: section (เข้มสุด) > หัวรับ-จ่าย > รวม > สุทธิ > กลุ่มรหัส > รายการย่อย(ขาว)
const rowBg = isSection ? '#cdddf7' : isGrand ? '#c9dcf6' : isNet ? '#d8e6fb' : isGroup ? '#e8f0fb' : isSub ? '#e9f1fc' : isCode ? '#f4f8fe' : 'transparent';
const fw = (isSection || isNet || isSub || isGrand) ? 800 : (isGroup || isCode) ? 700 : 400;
const indent = (typeof r.indent === 'number') ? r.indent : (isSection ? 0 : isGroup ? 14 : (isSub || isNet || isGrand) ? 14 : 26);
const emptyVals = isSection || isGroup; // หัวกิจกรรม / หัวรับ-จ่าย = ไม่มียอด
const canDrill = isLeaf || isNet || isSub || isGrand || isCode;
const sideAcc = r.side === 'in' ? C.pos : r.side === 'out' ? C.neg : null; // เขียว=รับ · แดง=จ่าย
const accent = sideAcc || C.primary;
const col = (isSection || isNet || isGrand) ? C.primaryD : ((isGroup || isSub) && sideAcc) ? sideAcc : C.ink;
const labelBg = rowBg === 'transparent' ? '#fff' : rowBg;
// แถบสีซ้ายแยกรับ/จ่าย: หัวรับ-จ่าย/รวม/กลุ่มรหัส = เข้ม · รายการย่อย = จาง → เห็นบล็อกกลุ่มชัด
const leftBar = (isGroup || isSub || isCode) ? ('4px solid ' + accent) : (isLeaf && sideAcc) ? ('4px solid ' + (r.side === 'in' ? 'rgba(21,164,95,.20)' : 'rgba(229,72,77,.18)')) : '4px solid transparent';
const tdTop = isNet ? ('2px solid ' + C.primary) : isCode ? '1px solid #e2e9f4' : (isSub && sideAcc) ? ('1.5px solid ' + accent) : '0';
return (
| {r.code || ''} |
{ if (isCode) toggle(r.prefix); else if (canDrill && onPick) onPick(r, null); }} style={{ padding: '6px 8px', paddingLeft: 8 + indent, fontWeight: fw, color: col, cursor: (isCode || canDrill) ? 'pointer' : 'default', whiteSpace: 'nowrap', position: 'sticky', left: 64, zIndex: 1, background: labelBg, borderBottom: '1px solid ' + C.line, borderTop: tdTop }}>
{isCode && {collapsed[r.prefix] ? '▸' : '▾'}}
{r.label}{(canDrill && !isCode) && ›}
|
{months.map((m, ci) => (
{ if (!emptyVals && canDrill && onPick) onPick(r, monthNumByIdx(ci)); }} style={{ padding: '6px 8px', textAlign: 'right', fontWeight: (isNet || isSub || isGrand) ? 800 : (isCode ? 700 : 400), cursor: (!emptyVals && canDrill) ? 'pointer' : 'default', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', borderBottom: '1px solid ' + C.line, borderTop: tdTop }}>{emptyVals ? '' : acct(r.vals[ci])} |
))}
{ if (!emptyVals && canDrill && onPick) onPick(r, null); }} style={{ padding: '6px 8px', textAlign: 'right', fontWeight: 800, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', cursor: (!emptyVals && canDrill) ? 'pointer' : 'default', background: '#eaf1fb', borderBottom: '1px solid ' + C.line, borderTop: tdTop }}>{emptyVals ? '' : acct(r.total)} |
);
})}
);
}
/* ---------- Transaction Explorer ---------- */
function CfpExplorer({ model, toast }) {
const [q, setQ] = useState('');
const [fAct, setFAct] = useState(''); const [fBank, setFBank] = useState(''); const [fMonth, setFMonth] = useState(''); const [fType, setFType] = useState('');
const [sortKey, setSortKey] = useState('iso'); const [sortDir, setSortDir] = useState(-1);
const banks = useMemo(() => Array.from(new Set(model.allTxns.map(t => t.account))).sort(), [model]);
const sel = { padding: '8px 11px', border: '1px solid ' + C.line, borderRadius: 11, fontSize: 13, fontFamily: 'inherit', background: '#fff', color: C.ink };
const rows = useMemo(() => {
const ql = q.trim().toLowerCase();
let r = model.allTxns.filter(t => {
if (fAct && t.actKey !== fAct) return false;
if (fBank && t.account !== fBank) return false;
if (fMonth && String(t.month) !== fMonth) return false;
if (fType === 'in' && t.flow <= 0) return false;
if (fType === 'out' && t.flow >= 0) return false;
if (ql) { const s = (t.note + ' ' + t.category + ' ' + t.docNo + ' ' + t.account).toLowerCase(); if (s.indexOf(ql) < 0) return false; }
return true;
});
r = r.slice().sort((a, b) => { let x = a[sortKey], y = b[sortKey]; if (x < y) return -sortDir; if (x > y) return sortDir; return 0; });
return r;
}, [model, q, fAct, fBank, fMonth, fType, sortKey, sortDir]);
const totIn = rows.filter(t => t.flow > 0).reduce((s, t) => s + t.flow, 0);
const totOut = rows.filter(t => t.flow < 0).reduce((s, t) => s + Math.abs(t.flow), 0);
const shown = rows.slice(0, 500);
function sortBy(k) { if (sortKey === k) setSortDir(d => -d); else { setSortKey(k); setSortDir(k === 'iso' ? -1 : 1); } }
function arrow(k) { return sortKey === k ? (sortDir > 0 ? ' ▲' : ' ▼') : ''; }
function exportCSV() {
const head = ['วันที่', 'เลขที่', 'รายการ', 'บัญชี', 'หมวด', 'กิจกรรม', 'รับ', 'จ่าย', 'คงเหลือ'];
const lines = [head.join(',')].concat(rows.map(t => [cfpThaiDate(t.iso), t.docNo, '"' + (t.note || '').replace(/"/g, '""') + '"', '"' + t.account + '"', '"' + t.category + '"', CFP_ACT_SHORT[t.actKey] || '', t.flow > 0 ? Math.round(t.flow) : '', t.flow < 0 ? Math.round(-t.flow) : '', t.balance || ''].join(',')));
const blob = new Blob(['' + lines.join('\n')], { type: 'text/csv;charset=utf-8' });
const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'transactions.csv'; a.click();
toast && toast('ดาวน์โหลด CSV · ' + rows.length + ' รายการ');
}
const th = (label, k, align) =>
sortBy(k) : undefined} style={{ padding: '8px 9px', fontWeight: 700, fontSize: 12, color: C.mut, cursor: k ? 'pointer' : 'default', whiteSpace: 'nowrap', textAlign: align || 'left', position: 'sticky', top: 0, background: '#f6f9fe', userSelect: 'none' }}>{label}{k ? arrow(k) : ''} | ;
return (
setQ(e.target.value)} placeholder="ค้นหา รายการ / หมวด / เลขที่…" style={{ ...sel, minWidth: 230, flex: '1 1 230px' }} />
{rows.length.toLocaleString('en-US')} รายการ
รับ {cfpFmtB(totIn)}
จ่าย {cfpFmtB(totOut)}
สุทธิ {cfpFmtB(totIn - totOut)}
{th('วันที่', 'iso')}{th('เลขที่', 'docNo')}{th('รายการ', 'note')}{th('บัญชี', 'account')}{th('หมวด', 'category')}{th('กิจกรรม', 'actKey')}{th('รับ', 'flow', 'right')}{th('จ่าย', null, 'right')}{th('คงเหลือ', 'balance', 'right')}
{shown.map((t, i) => (
| {cfpThaiDate(t.iso)} |
{t.docNo} |
{t.note || '-'} |
|
{t.category} |
|
{t.flow > 0 ? cfpFmtPlain(t.flow) : ''} |
{t.flow < 0 ? cfpFmtPlain(t.flow) : ''} |
{t.balance ? cfpFmtPlain(t.balance) : ''} |
))}
{rows.length > shown.length &&
แสดง {shown.length} จาก {rows.length.toLocaleString('en-US')} รายการ — ใช้ตัวกรอง/ค้นหาเพื่อแคบลง
}
);
}
/* ---------- activity detail (องค์ประกอบ + จุดเฝ้าระวัง รายกิจกรรม) ---------- */
function CfpActivityDetail({ model, k, onCat, onAll }) {
const [expanded, setExpanded] = useState(false);
const a = model.acts[k]; if (!a) return null;
const flags = cfpWatch(model, k);
const cats = a.catList || [];
const maxAbs = Math.max.apply(null, cats.map(c => Math.abs(c.net)).concat([1]));
const inTot = cats.filter(c => c.net > 0).reduce((s, c) => s + c.net, 0);
const outTot = cats.filter(c => c.net < 0).reduce((s, c) => s + Math.abs(c.net), 0);
const top = expanded ? cats : cats.slice(0, 7);
return (
{CFP_ACT_NAME[k]}
{cfpFmtM(a.net)}
รับ {cfpFmtM(inTot)}
จ่าย {cfpFmtM(outTot)}
{cats.length} หมวด
องค์ประกอบหลัก (กดดูรายการ)
{top.map((c, i) => (
onCat(c)} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,2.4fr) minmax(0,0.8fr) 92px', gap: 10, alignItems: 'center', padding: '6px 6px', borderBottom: '1px solid ' + C.line, cursor: 'pointer', borderRadius: 6 }}>
{c.name} ({c.count})
{cfpFmtB(c.net)}
))}
{cats.length > 7 && (
setExpanded(e => !e)} style={{ fontSize: 12, color: C.primary, cursor: 'pointer', fontWeight: 700 }}>{expanded ? '▲ ย่อ' : '▼ ดูอีก ' + (cats.length - 7) + ' หมวด'}
ดูรายการทั้งหมด →
)}
🚩 จุดเฝ้าระวัง
{flags.map((f, i) => {
const s = CFP_SEV[f.sev] || CFP_SEV.blue;
return (
{f.t}
);
})}
);
}
/* ---------- main page ---------- */
function CashFlowPresentPage({ data, setData, toast }) {
const [stored, setStored] = useState(() => { try { return JSON.parse(localStorage.getItem(CFP_LS) || 'null'); } catch (e) { return null; } });
const [uploading, setUploading] = useState(false);
const [tab, setTab] = useState('overview');
const [topN, setTopN] = useState(10); const [era, setEra] = useState(() => { try { return localStorage.getItem('wtp-cfp-era') || 'auto'; } catch (e) { return 'auto'; } });
const [modal, setModal] = useState(null);
const [synced, setSynced] = useState(false); // โหลด/แชร์ผ่านส่วนกลาง (Supabase) สำเร็จล่าสุด
const [shareBusy, setShareBusy] = useState(false);
const [orient, setOrient] = useState(() => { try { return localStorage.getItem('wtp-cfp-print-orient') || 'portrait'; } catch (e) { return 'portrait'; } });
const [groupsOpen, setGroupsOpen] = useState(false);
const fileRef = useRef(null);
const fetchedRef = useRef(false);
const canEdit = !(window._wtpRoleIsReadOnly && window._wtpRoleIsReadOnly());
const model = useMemo(() => { if (!stored || !stored.stm) return null; try { return cfpBuildModel(stored.stm, stored.catGroups, stored.codeGroups); } catch (e) { console.error('[cfp] build', e); return null; } }, [stored]); useEffect(() => { try { localStorage.setItem('wtp-cfp-era', era); } catch (e) {} }, [era]);
// บันทึกการจัดกลุ่มหมวด (catGroups) — เก็บลง stored + push ส่วนกลาง (เหมือน BIO saveCatMap)
function saveGroups(newGroups) {
persist({ stm: stored.stm, catGroups: newGroups, codeGroups: (stored && stored.codeGroups) || null, acctTypes: (stored && stored.acctTypes) || null }).then(r => { toast && toast('บันทึกการจัดกลุ่มแล้ว' + cfpShareSuffix(r), r.reason === 'error' ? 'error' : undefined); });
setGroupsOpen(false);
}
// บันทึกการจัดประเภทบัญชี (ใช้ได้/ผูกพัน) → เก็บใน acctTypes + push ส่วนกลาง
function saveAcctTypes(at) {
persist({ stm: stored.stm, catGroups: (stored && stored.catGroups) || null, codeGroups: (stored && stored.codeGroups) || null, acctTypes: at }).then(r => { toast && toast('บันทึกการจัดประเภทบัญชีแล้ว' + cfpShareSuffix(r), r.reason === 'error' ? 'error' : undefined); });
}
// โหลดข้อมูล "ส่วนกลาง" จาก Supabase ตอนเข้าหน้า → ทุกคน/ผู้บริหารเห็นชุดเดียวกัน
// server = แหล่งจริง (ทับ local cache); ถ้า server ว่าง/ตารางยังไม่สร้าง → คง local เดิม
useEffect(() => {
if (fetchedRef.current || !cfpCanSync()) return;
fetchedRef.current = true; let alive = true;
window.WTPData.fetchSheetRows(CFP_TABLE).then(rows => {
if (!alive) return;
const row = (rows || []).find(r => r && r.stm);
if (row && row.stm) { setStored(row); setSynced(true); try { localStorage.setItem(CFP_LS, JSON.stringify(row)); } catch (e) {} }
}).catch(e => { console.warn('[cfp] โหลดส่วนกลางไม่สำเร็จ:', e && e.message); });
return () => { alive = false; };
}, []);
function refreshShared() {
if (!cfpCanSync()) return; setShareBusy(true);
window.WTPData.fetchSheetRows(CFP_TABLE).then(rows => {
const row = (rows || []).find(r => r && r.stm);
if (row && row.stm) { setStored(row); setSynced(true); try { localStorage.setItem(CFP_LS, JSON.stringify(row)); } catch (e) {} toast && toast('โหลดข้อมูลส่วนกลางล่าสุดแล้ว'); }
else { toast && toast('ยังไม่มีข้อมูลส่วนกลาง — ให้ผู้ดูแลอัปโหลด', 'error'); }
setShareBusy(false);
}).catch(e => { setShareBusy(false); toast && toast('โหลดไม่สำเร็จ: ' + (e && e.message || ''), 'error'); });
}
function openAct(k) { const a = model.acts[k]; if (!a) return; let txns = []; a.catList.forEach(c => { txns = txns.concat(c.txns); }); txns.sort((x, y) => x.iso < y.iso ? 1 : -1); setModal({ title: CFP_ACT_NAME[k], subtitle: 'รวม ' + model.periodLabel + ' · ' + txns.length + ' รายการ', txns }); }
function openMonth(m) { const txns = model.allTxns.filter(t => t.month === m && t.actKey !== 'transfer' && t.actKey !== 'other').sort((x, y) => x.iso < y.iso ? 1 : -1); setModal({ title: 'เดือน ' + (CFP_MONTHS[m] || m), subtitle: txns.length + ' รายการ', txns }); }
function openCat(c) { const txns = (c.txns || []).slice().sort((x, y) => x.iso < y.iso ? 1 : -1); setModal({ title: c.name, subtitle: c.count + ' รายการ · สุทธิ ' + cfpFmtB(c.net), txns }); }
function watchSub(k) { const n = cfpWatch(model, k).filter(f => f.sev === 'red' || f.sev === 'amber').length; return n ? ('🚩 ' + n + ' จุดเฝ้าระวัง') : 'กดดูรายการ'; }
function openStmt(row, monthNum) {
const mlab = monthNum ? ' · เดือน ' + (CFP_MONTHS[monthNum] || monthNum) : '';
// grand (สุทธิ/ต้นงวด/ปลายงวด) → รายการทั้งหมด (ของเดือนที่กด)
if (row.type === 'grand') {
const txns = model.allTxns.filter(t => t.actKey !== 'transfer' && t.actKey !== 'other' && (!monthNum || t.month === monthNum)).slice().sort((x, y) => x.iso < y.iso ? 1 : -1);
setModal({ title: row.label, subtitle: txns.length + ' รายการ' + mlab, txns }); return;
}
if (!row.actKey) return;
// สรุปรายหมวดของรายการชุดหนึ่ง (เรียงยอดมากก่อน, กรองเดือนถ้ามี) → ป้อน breakdown ให้ modal
const mkBreakdown = catObjs => catObjs.map(c => {
let tx = c.txns; if (monthNum) tx = tx.filter(t => t.month === monthNum);
return { name: c.name, count: tx.length, net: tx.reduce((s, t) => s + t.flow, 0), txns: tx.slice().sort((x, y) => x.iso < y.iso ? 1 : -1) };
}).filter(b => b.count > 0).sort((a, b) => Math.abs(b.net) - Math.abs(a.net));
// leaf / กลุ่มรหัส (codegroup) / รวมรับ-จ่าย (subtotal) → หลายหมวด = สรุปแยกหมวดก่อน · หมวดเดียว = รายการตรงๆ
if ((row.type === 'leaf' || row.type === 'subtotal' || row.type === 'codegroup') && row.catNames && row.catNames.length) {
const cats = cfpCatsByNames(model, row.catNames);
if (cats.length > 1) {
const bd = mkBreakdown(cats); const tot = bd.reduce((s, b) => s + b.net, 0);
setModal({ title: row.label, subtitle: bd.length + ' หมวด · สุทธิ ' + cfpFmtB(tot) + mlab + ' · กดหมวดเพื่อดูรายการ', breakdown: bd }); return;
}
let txns = []; cats.forEach(c => { txns = txns.concat(c.txns); });
if (monthNum) txns = txns.filter(t => t.month === monthNum);
txns = txns.slice().sort((x, y) => x.iso < y.iso ? 1 : -1);
setModal({ title: row.label, subtitle: txns.length + ' รายการ · สุทธิ ' + cfpFmtB(txns.reduce((s, t) => s + t.flow, 0)) + mlab, txns }); return;
}
// net (สุทธิรายกิจกรรม) → สรุปแยกหมวดทั้งกิจกรรม
const a = model.acts[row.actKey]; if (!a) return;
const bd = mkBreakdown(a.catList); const tot = bd.reduce((s, b) => s + b.net, 0);
setModal({ title: row.label, subtitle: 'ทั้ง' + (CFP_ACT_NAME[row.actKey] || 'กิจกรรม') + ' · ' + bd.length + ' หมวด · สุทธิ ' + cfpFmtB(tot) + mlab, breakdown: bd });
}
// อ่านทั้ง workbook ครั้งเดียว → คืน AOA ของชีต DATA + เงินสดต้นงวด (Σ ต้นงวด ชีตเดือนแรก)
async function readWorkbook(file) {
return new Promise((resolve, reject) => {
if (!window.XLSX) { reject(new Error('ไม่พบ SheetJS — รีเฟรชหน้า')); return; }
const r = new FileReader();
r.onload = e => {
try {
const wb = window.XLSX.read(e.target.result, { type: 'array', cellDates: false });
const aoaOf = name => { const ws = wb.Sheets[name]; return ws ? window.XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: '' }) : null; };
const names = wb.SheetNames || [];
// 1) ชีต DATA (ไม่สนตัวพิมพ์/ช่องว่าง); ถ้าไม่เจอ → ชีตแรกที่มีหัว BANK+Amount+กิจกรรม
let dataAoa = null; const dn = names.find(n => /^\s*DATA\s*$/i.test(n));
if (dn) dataAoa = aoaOf(dn);
if (!dataAoa) { for (const n of names) { const a = aoaOf(n); if (a && cfpFindHeaderRow(a) >= 0) { dataAoa = a; break; } } }
// 2) เงินสดต้นงวด = Σ "ต้นงวด" ชีตเดือนแรกสุดที่มีตาราง (Jan./Feb./… ตามลำดับปฏิทิน)
// + openingAccts = ยอดต้นงวด "รายบัญชี" (ใช้แยก ใช้ได้/ผูกพัน ตามบัญชี)
const MON = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// ยอดรายบัญชี ต้น/ปลายงวด + Δ รายเดือน จากชีตเดือนทุกเดือน (ปลายงวด=ยอดจริงจากไฟล์ ไม่คำนวณจาก flow)
const balRes = cfpBuildAcctBalances(aoaOf, MON);
const opening = balRes.opening || 0, acctBalances = balRes.acctBalances, balMonths = balRes.balMonths;
// 3) chart of accounts จากชีต "ค่าใช้จ่าย" (รหัส 5 หลัก → ชื่อกลุ่ม) — แก้ในไฟล์แล้ว re-upload ได้
const cn = names.find(n => /ค่าใช้จ่าย/.test(n));
const codeGroups = cn ? cfpParseCodeGroups(aoaOf(cn)) : {};
resolve({ dataAoa, opening, acctBalances, balMonths, codeGroups });
} catch (err) { reject(err); }
};
r.onerror = () => reject(new Error('อ่านไฟล์ไม่สำเร็จ')); r.readAsArrayBuffer(file);
});
}
async function onUpload(files) { cfpEraHint = era;
setUploading(true);
try {
const { dataAoa, opening, acctBalances, balMonths, codeGroups } = await readWorkbook(files[0]);
if (!dataAoa) { toast && toast('ไม่พบชีต "DATA" — ตรวจว่าเป็นไฟล์ WTP-Cash Flow', 'error'); setUploading(false); return; }
const stm = cfpParseStm(dataAoa);
if (!stm.txns.length) { toast && toast('อ่านชีต DATA ไม่พบรายการ — ตรวจหัวคอลัมน์ (BANK / Amount / ประเภทกิจกรรม)', 'error'); setUploading(false); return; }
stm.opening = opening || 0;
stm.acctBalances = acctBalances || []; // ยอดรายบัญชี (ต้น/ปลายงวด+Δรายเดือน) จากไฟล์ → แยก ใช้ได้/ผูกพัน ตามบัญชี
stm.balMonths = balMonths || [];
const nCg = codeGroups ? Object.keys(codeGroups).length : 0;
const r = await persist({ stm, catGroups: (stored && stored.catGroups) || null, codeGroups: codeGroups || null, acctTypes: (stored && stored.acctTypes) || null });
toast && toast('อ่านข้อมูลสำเร็จ · ' + stm.txns.length + ' รายการ' + (opening ? ' · ต้นงวด ' + cfpFmtM(opening) : '') + (nCg ? ' · ' + nCg + ' กลุ่มรหัส' : '') + cfpShareSuffix(r), r.reason === 'error' ? 'error' : undefined);
} catch (e) { console.error(e); toast && toast('อ่านไฟล์ไม่สำเร็จ: ' + (e.message || e), 'error'); }
setUploading(false);
}
function cfpShareSuffix(r) { if (!r) return ''; if (r.shared) return ' · 🌐 แชร์ให้ทีมแล้ว'; if (r.reason === 'error') return ' · ⚠️ แชร์ส่วนกลางไม่สำเร็จ (บันทึกในเครื่อง · รัน SQL?)'; return ''; }
// บันทึก local (cache/offline) + push ขึ้นส่วนกลาง (ทุกคนเห็น). คืน {shared, reason}.
async function persist(obj) {
const payload = Object.assign({ id: CFP_ROW_ID, uploadedAt: Date.now(), uploadedBy: cfpCurrentUser() }, obj);
try { localStorage.setItem(CFP_LS, JSON.stringify(payload)); } catch (e) { console.error('[cfp] save', e); }
setStored(payload);
if (!cfpCanSync()) return { shared: false, reason: 'local' };
setShareBusy(true);
try { await window.WTPData.writeTable(CFP_TABLE, [payload], r => r.id); setSynced(true); setShareBusy(false); return { shared: true }; }
catch (e) { setShareBusy(false); setSynced(false); console.warn('[cfp] แชร์ส่วนกลางไม่สำเร็จ:', e && e.message); return { shared: false, reason: 'error', message: e && e.message }; }
}
function clearData() {
if (!confirm('ล้างข้อมูล Cash Flow ส่วนกลาง? (ทุกคนจะไม่เห็นจนกว่าจะอัปใหม่)')) return;
localStorage.removeItem(CFP_LS); setStored(null); setSynced(false);
if (cfpCanSync()) { setShareBusy(true); window.WTPData.writeTable(CFP_TABLE, [], r => r.id).then(() => { setShareBusy(false); toast && toast('ล้างข้อมูลส่วนกลางแล้ว'); }).catch(e => { setShareBusy(false); toast && toast('ล้างในเครื่องแล้ว แต่ส่วนกลางไม่สำเร็จ: ' + (e && e.message || ''), 'error'); }); }
}
// ปรินต์/บันทึก PDF ของแท็บที่กำลังเปิดอยู่ (ใช้ window.print เหมือนหน้า Investor; print CSS ใน styles.css
// ซ่อน sidebar/topbar/ปุ่ม/แท็บ + พิมพ์สีตรง). ตั้ง document.title ชั่วคราว → ใช้เป็นชื่อไฟล์ PDF.
// แนวกระดาษ (แนวตั้ง/แนวนอน): inject