{value == null ? '—' : Math.round(v) + '%'}

); } function PcDonut({ segments, size = 90, thickness = 13, center }) { const r = (size - thickness) / 2, c = 2 * Math.PI * r, cx = size / 2; let off = 0; const total = segments.reduce((s, x) => s + x.value, 0) || 1; return (

{center &&

{center}

}

); } function PcBand({ n, en, th }) { return (

{n} {en} {th}

); } const pcCard = { background: '#fff', border: '1px solid #e6ecf4', borderRadius: 14, boxShadow: '0 1px 3px rgba(13,31,58,.05)' }; // ── KPI section (8 cards) ─────────────────────────────────────────────────── function PcKpiSection({ summary, filterStatus, onFilterStatus }) { const card = (key, icon, label, th, value, sub, color, status) => { const active = status && filterStatus === status; return ( ); }; return (

{card('all', , 'โครงการทั้งหมด', 'All Projects', summary.count.toLocaleString(), PCU.fmtCompact(summary.contractTotal), '#2a6fdb', null)} {card('wip', , 'กำลังดำเนินการ', 'Work in Progress', summary.wip.toLocaleString(), PCU.fmtCompact(summary.wipAmt), '#2a6fdb', 'Work in progress')} {card('await', , 'รอลงนาม', 'Awaiting Sign', summary.awaiting.toLocaleString(), PCU.fmtCompact(summary.awaitAmt), '#f97316', 'ยังไม่ลงนาม')} {card('fin', , 'เสร็จสิ้น', 'Finished', summary.finish.toLocaleString(), PCU.fmtCompact(summary.finishAmt), '#16a34a', 'Finish')} {card('cancel', , 'ยกเลิก', 'Cancelled', summary.cancelled.toLocaleString(), PCU.fmtCompact(summary.cancelAmt), '#ef4444', 'ยกเลิก')} {card('contract', , 'มูลค่าสัญญารวม', 'Contract Value', PCU.fmtCompact(summary.contractTotal), 'รับแล้ว ' + PCU.fmtCompact(summary.received), '#0e9f9a', null)} {card('ar', , 'ยอดค้างรับ', 'Outstanding AR', PCU.fmtCompact(summary.outstandingAR), null, '#b45309', null)} {card('f30', , 'คาดรับ 30 วัน', 'Forecast 30d', PCU.fmtCompact(summary.forecast30), '60d ' + PCU.fmtCompact(summary.forecast60), '#2563eb', null)}

); } // ── Funnel (sub-status pipeline) ──────────────────────────────────────────── function PcFunnel({ rows, onPick }) { const counts = pcMemo(() => PCU.pipelineCounts(rows).filter(p => p.count > 0 || p.th === 'ลงนามแล้ว'), [rows]); const max = Math.max(1, ...counts.map(c => c.count)); return (

{counts.map((c) => { const w = Math.max(6, (c.count / max) * 100); return ( ); })}

); } // ── Cashflow forecast chart (monthly) ─────────────────────────────────────── function PcCashflow({ rows }) { const years = pcMemo(() => PCU.forecastYears(rows), [rows]); const [year, setYear] = pcSt(null); const [drill, setDrill] = pcSt(null); // month obj const yr = year || years[0] || new Date().getFullYear(); const months = pcMemo(() => PCU.cashflowByMonth(rows, yr), [rows, yr]); const max = Math.max(1, ...months.map(m => m.gross)); const total = months.reduce((s, m) => ({ gross: s.gross + m.gross, debt: s.debt + m.debt, net: s.net + m.net }), { gross: 0, debt: 0, net: 0 }); return (

{PCU.fmtCompact(total.gross)} Gross {PCU.fmtCompact(total.net)} Net · คลิกแท่งเพื่อดูรายโครงการ/งวด

{years.length > 1 && ( )}

{months.map((m, i) => { const gh = (m.gross / max) * 110, nh = (m.net / max) * 110; const has = m.count > 0; return (

setDrill(m) : undefined} title={`${m.month} · คาดรับ ${PCU.fmtBaht(m.gross)} · ${m.count} งวด`} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, cursor: has ? 'pointer' : 'default' }}>

{m.month}

); })}

{drill && (

setDrill(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(8,18,34,.42)', zIndex: 650, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>

e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, width: 'min(680px,96vw)', maxHeight: '82vh', display: 'flex', flexDirection: 'column', boxShadow: '0 24px 60px rgba(13,31,58,.28)', overflow: 'hidden' }}>

กระแสเงินสดคาดการณ์ · {yr}

{drill.month} · คาดรับ {PCU.fmtBaht(drill.gross)} ({drill.count} งวด)

{['โครงการ', 'งวด', 'คาดรับ', 'วันที่'].map((h, i) => )} {drill.lines.map((ln, i) => ( ))}

= 2 ? 'right' : 'left', fontSize: 11, color: '#334155', whiteSpace: 'nowrap' }}>{h}
{ln.row.site \|\| ln.row.name} {[/^(XL\|WS)-/i.test(ln.row.contractNo) ? null : ln.row.contractNo, ln.row.province].filter(Boolean).join(' · ')}	งวด {ln.no}	{PCU.fmtBaht(ln.amount)}	{PCU.fmtDate(ln.date)}
รวม {drill.month}	{PCU.fmtBaht(drill.gross)}

)}

); } // ── LG section ────────────────────────────────────────────────────────────── function PcLgSection({ rows }) { const banks = pcMemo(() => PCU.lgByBank(rows), [rows]); const total = banks.reduce((s, b) => s + b.amount, 0); if (!banks.length) return

ยังไม่มีข้อมูล LG · กรอกใน Finance Master (drawer) เพื่อแสดงผล

; return (

({ value: b.amount, color: b.color }))} center={<>

LG รวม

{PCU.fmtCompact(total)}

} />

{banks.map(b => (

{b.bank} {PCU.fmtCompact(b.amount)}

))}

); } function PcDebtSection({ rows }) { const creds = pcMemo(() => PCU.debtByCreditor(rows), [rows]); const total = creds.reduce((s, c) => s + c.total, 0); const remaining = creds.reduce((s, c) => s + c.remaining, 0); if (!creds.length) return

ยังไม่มีภาระหนี้ (ผู้รับโอนสิทธิเป็นเจ้าหนี้) ในมุมมองนี้

; return (

หนี้รวม

{PCU.fmtCompact(total)}

คงเหลือ

{PCU.fmtCompact(remaining)}

หักแล้ว

{PCU.fmtCompact(total - remaining)}

{creds.map(c => { const pctDed = c.total > 0 ? (c.deducted / c.total * 100) : 0; return (

{c.name} · {c.count} {PCU.fmtCompact(c.remaining)} / {PCU.fmtCompact(c.total)}

); })}

); } // ═══════════════════════════════════════════════════════════════════════════ // EXCEL-GRADE DATA GRID // ═══════════════════════════════════════════════════════════════════════════ function PcCellRender(col, r) { const U = PCU; switch (col.id) { case 'name': return (

{r.site || '—'}

{[r.province, r.type].filter(Boolean).join(' · ')}

); case 'contractNo': return {/^(XL|WS)-/i.test(r.contractNo) ? '(ไม่มีเลข)' : (r.contractNo || '—')}; case 'fy': return r.fy ? FY{r.fy} : '—'; case 'region': return r.regionEn ? {r.regionEn} · {r.region} : '—'; case 'type': return r.type ? {r.type} : '—'; case 'contractAmt': return {r.contractAmt ? U.fmtBaht(r.contractAmt, 2) : '—'}; case 'progress': return ; case 'status': return ; case 'projectStatus': return {r.projectStatus}; case 'outstandingAR': return 0 ? '#b45309' : '#cbd5e1' }}>{r.outstandingAR > 0 ? U.fmtBaht(r.outstandingAR) : '—'}; case 'received': return 0 ? '#15803d' : '#cbd5e1' }}>{r.received > 0 ? U.fmtBaht(r.received) : '—'}; case 'forecastReceive': return 0 ? '#0e9f9a' : '#cbd5e1' }}>{r.forecastReceive > 0 ? U.fmtBaht(r.forecastReceive) : '—'}; case 'forecastDate': { const dd = U.daysFromToday(r.forecastDate); const over = dd != null && dd < 0; return r.forecastDate ? {U.fmtDate(r.forecastDate)}{dd != null && dd >= 0 && dd <= 30 ? ·{dd}d : ''} : '—'; } case 'fc1Amount': return 0 ? '#0e9f9a' : '#cbd5e1' }}>{r.fc1Amount > 0 ? U.fmtBaht(r.fc1Amount) : '—'}; case 'fc2Amount': return 0 ? '#0e9f9a' : '#cbd5e1' }}>{r.fc2Amount > 0 ? U.fmtBaht(r.fc2Amount) : '—'}; case 'fc1Date': case 'fc2Date': { const iso = col.id === 'fc1Date' ? r.fc1Date : r.fc2Date; const dd = U.daysFromToday(iso); const over = dd != null && dd < 0; return iso ? {U.fmtDate(iso)}{dd != null && dd >= 0 && dd <= 30 ? ·{dd}d : ''} : '—'; } case 'forecastNet': return 0 ? 'var(--ink-900)' : '#cbd5e1' }}>{r.forecastNet > 0 ? U.fmtBaht(r.forecastNet) : '—'}; case 'assignee': return r.assignee ? {r.assignee} : '—'; case 'lgBank': return r.lg && r.lg.bank ? {r.lg.bank} : '—'; case 'lgAmount': return r.lg ? {U.fmtBaht(r.lg.amount)} : '—'; case 'start': return r.start ? {U.fmtDate(r.start)} : '—'; case 'finish': return r.finish ? {U.fmtDate(r.finish)} : '—'; default: { const v = col.value(r); // raw engineer columns carry col.kind (money/date/pct/text) for nice formatting if (col.kind === 'money') return {v == null || v === '' ? '—' : U.fmtBaht(v)}; if (col.kind === 'pct') return {v == null || v === '' ? '—' : Math.round(+v) + '%'}; if (col.kind === 'date') return v ? {U.fmtDate(v)} : '—'; return v == null || v === '' ? '—' : {String(v)}; } } } function PcColFilterDropdown({ col, rows, value, onChange, onClose }) { const [tab] = pcSt(col.type); const distinct = pcMemo(() => col.type === 'enum' || col.type === 'text' ? PCGrid.distinctValues(rows, col) : [], [rows, col]); const [sel, setSel] = pcSt(() => value && value.kind === 'set' ? new Set(value.values) : new Set()); const [q, setQ] = pcSt(value && value.kind === 'text' ? value.q : ''); const [mn, setMn] = pcSt(value && value.kind === 'num' ? (value.min ?? '') : ''); const [mx, setMx] = pcSt(value && value.kind === 'num' ? (value.max ?? '') : ''); const [from, setFrom] = pcSt(value && value.kind === 'date' ? (value.from || '') : ''); const [to, setTo] = pcSt(value && value.kind === 'date' ? (value.to || '') : ''); const [search, setSearch] = pcSt(''); const apply = () => { if (col.type === 'num') onChange(mn === '' && mx === '' ? null : { kind: 'num', min: mn === '' ? null : +mn, max: mx === '' ? null : +mx }); else if (col.type === 'date') onChange(!from && !to ? null : { kind: 'date', from: from || null, to: to || null }); else if (col.type === 'enum') onChange(sel.size ? { kind: 'set', values: [...sel] } : null); else onChange(q ? { kind: 'text', q } : null); onClose(); }; return (

e.stopPropagation()} style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, zIndex: 50, background: '#fff', border: '1px solid #d3dcea', borderRadius: 9, boxShadow: '0 16px 44px rgba(13,31,58,.16)', padding: 10, width: 230 }}> {col.type === 'num' && (

setMn(e.target.value)} style={pcInp} /> setMx(e.target.value)} style={pcInp} />

)} {col.type === 'date' && (

)} {col.type === 'text' && setQ(e.target.value)} style={pcInp} />} {col.type === 'enum' && (<> setSearch(e.target.value)} style={{ ...pcInp, marginBottom: 6 }} />

0} ref={el => { if (el) el.indeterminate = sel.size > 0 && sel.size < distinct.length; }} onChange={() => setSel(sel.size === distinct.length ? new Set() : new Set(distinct))} />เลือกทั้งหมด ({distinct.length}) {distinct.filter(d => !search || String(d).toLowerCase().includes(search.toLowerCase())).map((d, i) => ( { const n = new Set(sel); n.has(d) ? n.delete(d) : n.add(d); setSel(n); }} />{d === '' ? (ว่าง) : d} ))}

)}

); } const pcInp = { width: '100%', height: 28, fontSize: 11.5, padding: '0 8px', border: '1px solid #d3dcea', borderRadius: 6, outline: 'none', boxSizing: 'border-box' }; const pcChk = { display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, padding: '2px 0', cursor: 'pointer' }; const pcBtn = { height: 28, padding: '0 12px', fontSize: 11.5, fontWeight: 600, border: '1px solid #d3dcea', borderRadius: 6, background: '#fff', cursor: 'pointer' }; function PcGrid({ rows, allCols, state, setState, onOpenRow }) { const [openFilter, setOpenFilter] = pcSt(null); const [resizing, setResizing] = pcSt(null); const [dragCol, setDragCol] = pcSt(null); const [dragOver, setDragOver] = pcSt(null); const moveCol = (srcId, dstId) => { if (!srcId || srcId === dstId) return; setState(s => { const ord = s.order.filter(x => x !== srcId); const idx = ord.indexOf(dstId); if (idx < 0) return s; ord.splice(idx, 0, srcId); return { ...s, order: ord }; }); }; const visibleCols = pcMemo(() => state.order.map(id => allCols.find(c => c.id === id)).filter(c => c && !state.hidden.includes(c.id)), [state.order, state.hidden, allCols]); const frozenCols = visibleCols.filter(c => state.frozen.includes(c.id)); const scrollCols = visibleCols.filter(c => !state.frozen.includes(c.id)); const colW = (c) => state.widths && state.widths[c.id] ? state.widths[c.id] : c.width; // pipeline: colFilters → sort const filtered = pcMemo(() => PCGrid.applyColFilters(rows, allCols, state.colFilters), [rows, allCols, state.colFilters]); const sorted = pcMemo(() => PCGrid.applySort(filtered, allCols, state.sort), [filtered, allCols, state.sort]); const pageRows = pcMemo(() => { const start = (state.page - 1) * state.pageSize; return sorted.slice(start, start + state.pageSize); }, [sorted, state.page, state.pageSize]); const totalPages = Math.max(1, Math.ceil(sorted.length / state.pageSize)); const toggleSort = (cid, additive) => { setState(s => { const cur = s.sort.find(x => x.id === cid); let sort; if (!cur) sort = additive ? [...s.sort, { id: cid, dir: 'asc' }] : [{ id: cid, dir: 'asc' }]; else if (cur.dir === 'asc') sort = s.sort.map(x => x.id === cid ? { ...x, dir: 'desc' } : x); else sort = s.sort.filter(x => x.id !== cid); if (!additive && cur) sort = cur.dir === 'asc' ? [{ id: cid, dir: 'desc' }] : []; return { ...s, sort, page: 1 }; }); }; // resize handlers pcEff(() => { if (!resizing) return; const onMove = (e) => { const dx = e.clientX - resizing.x0; setState(s => ({ ...s, widths: { ...(s.widths || {}), [resizing.id]: Math.max(60, resizing.w0 + dx) } })); }; const onUp = () => setResizing(null); window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; }, [resizing]); const renderHeader = (c, frozen, leftOffset) => { const sortIdx = state.sort.findIndex(x => x.id === c.id); const sortDir = sortIdx >= 0 ? state.sort[sortIdx].dir : null; const hasFilter = !!state.colFilters[c.id]; return (

{ setDragCol(c.id); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', c.id); } catch (_) {} }} onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (dragOver !== c.id) setDragOver(c.id); }} onDragLeave={() => { if (dragOver === c.id) setDragOver(null); }} onDrop={e => { e.preventDefault(); moveCol(dragCol, c.id); setDragCol(null); setDragOver(null); }} onDragEnd={() => { setDragCol(null); setDragOver(null); }} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '8px 9px', cursor: dragCol ? 'grabbing' : 'grab', justifyContent: c.align === 'right' ? 'flex-end' : c.align === 'center' ? 'center' : 'flex-start' }}> toggleSort(c.id, e.shiftKey)} style={{ cursor: 'pointer', fontSize: 11, fontWeight: 700, color: '#334155', display: 'inline-flex', alignItems: 'center', gap: 3 }} title={c.th + ' · ลากเพื่อย้ายคอลัมน์'}> {c.label} {sortDir === 'asc' && } {sortDir === 'desc' && } {sortIdx >= 0 && state.sort.length > 1 && {sortIdx + 1}}

{openFilter === c.id && setState(s => ({ ...s, colFilters: { ...s.colFilters, [c.id]: f }, page: 1 }))} onClose={() => setOpenFilter(null)} />} { e.preventDefault(); setResizing({ id: c.id, x0: e.clientX, w0: colW(c) }); }} style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 6, cursor: 'col-resize' }} /> ); }; let foff = 0; const frozenOffsets = frozenCols.map(c => { const o = foff; foff += colW(c); return o; }); return (

setOpenFilter(null)}>

{frozenCols.map((c, i) => renderHeader(c, true, frozenOffsets[i]))}{scrollCols.map(c => renderHeader(c, false))} {pageRows.length === 0 && } {pageRows.map((r, ri) => { const cond = PCGrid.rowCondStyle(r, state.cf); return ( onOpenRow(r)} style={{ cursor: 'pointer', borderBottom: '1px solid #f1f5f9' }} onMouseEnter={e => e.currentTarget.style.boxShadow = 'inset 0 0 0 9999px rgba(42,111,219,.035)'} onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}> {frozenCols.map((c, i) => ( ))} {scrollCols.map(c => ( ))} ); })}


{/* ★ ตัวกรองคอลัมน์ถูกจำไว้ (wtp-pc-gridstate-v3) ข้ามการ reload → ถ้ากรองแล้ว ซ่อนทุกแถว จะค้าง "ไม่พบโครงการ" ถาวร หาสาเหตุไม่เจอ → ให้ปุ่มทางออกล้างตัวกรอง */} {rows.length > 0 && Object.values(state.colFilters \|\| {}).some(Boolean) ? ( <> ตัวกรองคอลัมน์กำลังซ่อนโครงการทั้งหมด ({rows.length} รายการถูกกรองออก) ) : 'ไม่พบโครงการตามเงื่อนไข'}
{PcCellRender(c, r)}	{PcCellRender(c, r)}

{/* ★ ตัวกรองคอลัมน์ถูกจำไว้ (wtp-pc-gridstate-v3) ข้ามการ reload → ถ้ากรองแล้ว ซ่อนทุกแถว จะค้าง "ไม่พบโครงการ" ถาวร หาสาเหตุไม่เจอ → ให้ปุ่มทางออกล้างตัวกรอง */} {rows.length > 0 && Object.values(state.colFilters || {}).some(Boolean) ? ( <>

ตัวกรองคอลัมน์กำลังซ่อนโครงการทั้งหมด ({rows.length} รายการถูกกรองออก)

) : 'ไม่พบโครงการตามเงื่อนไข'}

{PcCellRender(c, r)}

{/* pagination */}

แสดง {sorted.length ? ((state.page - 1) * state.pageSize + 1) : 0}–{Math.min(state.page * state.pageSize, sorted.length)} จาก {sorted.length.toLocaleString()}

{state.page} / {totalPages}

); } // ── grid toolbar (columns / density / export / saved view) ────────────────── function PcGridToolbar({ allCols, state, setState, rows, visibleColObjs, scopeLabel, onAdvanced, advCount }) { const [colMenu, setColMenu] = pcSt(false); const [expMenu, setExpMenu] = pcSt(false); const [colSearch, setColSearch] = pcSt(''); const activeFilters = Object.values(state.colFilters).filter(Boolean).length; const gridRows = () => PCGrid.applySort(PCGrid.applyColFilters(rows, allCols, state.colFilters), allCols, state.sort); return (

{colMenu && (() => { const cats = [['', 'หลัก / คำนวณ']].concat((PCU.PC_CAT_ORDER || []).map(c => [c, 'วิศวกร · ' + c])); const q = colSearch.trim().toLowerCase(); const match = c => !q || (c.label + ' ' + (c.th || '')).toLowerCase().includes(q); const setHidden = (id, vis) => setState(s => ({ ...s, hidden: vis ? [...s.hidden, id] : s.hidden.filter(x => x !== id) })); return (

e.stopPropagation()} style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, zIndex: 60, background: '#fff', border: '1px solid #d3dcea', borderRadius: 9, boxShadow: '0 16px 44px rgba(13,31,58,.16)', padding: 8, width: 280, maxHeight: 440, overflow: 'auto' }}> setColSearch(e.target.value)} placeholder="ค้นหาคอลัมน์…" style={{ width: '100%', height: 30, border: '1px solid #d3dcea', borderRadius: 7, padding: '0 9px', fontSize: 11.5, marginBottom: 6, outline: 'none' }} /> {cats.map(([cat, title]) => { const items = allCols.filter(c => (cat === '' ? !c.cat : c.cat === cat) && match(c)); if (!items.length) return null; const allOn = items.every(c => !state.hidden.includes(c.id)); return (

{ if (el) el.indeterminate = !allOn && items.some(c => !state.hidden.includes(c.id)); }} onChange={() => setState(s => { const h = new Set(s.hidden); allOn ? items.forEach(c => h.add(c.id)) : items.forEach(c => h.delete(c.id)); return { ...s, hidden: [...h] }; })} /> {title}({items.length})

{items.map(c => { const vis = !state.hidden.includes(c.id); const fz = state.frozen.includes(c.id); return (

setHidden(c.id, vis)} /> {c.label} {c.freezable && }

); })}

); })()}

{activeFilters > 0 && }

{expMenu && setExpMenu(false)} />}

); } // ── Export modal — เลือกเนื้อหา (สรุป/ละเอียด/ทั้งคู่) × รูปแบบไฟล์ (PDF/Excel/CSV) ── function PcExportModal({ rows, scopeLabel, onClose }) { const [content, setContent] = pcSt('summary'); const [format, setFormat] = pcSt('pdf'); const allCols = pcMemo(() => PCU.buildExportColumns(rows), [rows]); const [sel, setSel] = pcSt(() => new Set(PCU.PC_EXPORT_DEFAULT.filter(k => allCols.some(c => c.key === k)))); const [colSearch, setColSearch] = pcSt(''); // คอลัมน์มีผลเฉพาะตอน export "รายละเอียด/ทั้งคู่" หรือ CSV (สรุปไม่มีตารางรายโครงการ) const needCols = content !== 'summary' || format === 'csv'; const contents = [ { k: 'summary', icon: '📊', title: 'สรุป', desc: 'ภาพรวม KPI · pipeline · cashflow · LG — สำหรับนักลงทุน' }, { k: 'detail', icon: '📋', title: 'รายละเอียด', desc: 'ตารางรายโครงการ · เลือกคอลัมน์ได้' }, { k: 'both', icon: '📑', title: 'สรุป + รายละเอียด', desc: 'รวมทั้งสองส่วนในไฟล์เดียว' }, ]; const formats = [ { k: 'pdf', icon: '📄', title: 'PDF', desc: 'พร้อมโลโก้ Water POG · โทนฟ้า · เปิดหน้าใหม่แล้วสั่งพิมพ์/บันทึก' }, { k: 'xlsx', icon: '📗', title: 'Excel (.xlsx)', desc: 'ตกแต่งสี + format ตัวเลข · ดาวน์โหลดทันที' }, { k: 'csv', icon: '🗒️', title: 'CSV', desc: 'ข้อมูลดิบ เปิดต่อใน Excel/Sheet ได้' }, ]; const selCols = () => allCols.filter(c => sel.has(c.key)); const doExport = () => { if (!rows.length) { alert('ไม่มีโครงการที่จะส่งออก'); return; } if (needCols && sel.size === 0) { alert('เลือกอย่างน้อย 1 คอลัมน์'); return; } const cols = selCols(); if (format === 'pdf') PCU.openReport(content, rows, scopeLabel, cols); else if (format === 'xlsx') PCU.exportXLSX(content, rows, scopeLabel, cols); else PCU.exportCSV(rows, cols, 'project-control-' + PCU.TODAY); onClose(); }; const toggle = (k) => setSel(s => { const n = new Set(s); n.has(k) ? n.delete(k) : n.add(k); return n; }); const filteredCols = colSearch.trim() ? allCols.filter(c => (c.label + ' ' + c.group).toLowerCase().includes(colSearch.trim().toLowerCase())) : allCols; const groups = [['คำนวณ', 'คอลัมน์คำนวณ (จากระบบ)']].concat((PCU.PC_CAT_ORDER || []).map(c => [c, 'วิศวกร · ' + c])); const card = (o, active, onClick) => ( ); const lbl = { fontSize: 11, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: .5, fontWeight: 700, marginBottom: 8 }; const chip = (txt, on, fn) => ( ); return (

e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, width: 'min(680px,97vw)', maxHeight: '90vh', display: 'flex', flexDirection: 'column', boxShadow: '0 24px 60px rgba(13,31,58,.28)', overflow: 'hidden' }}>

ส่งออกรายงาน — เลือกรูปแบบ

{rows.length.toLocaleString()} โครงการ · ขอบเขต: {scopeLabel || 'ทั้งหมด'}

1. เนื้อหา

{contents.map(o => card(o, content === o.k, () => setContent(o.k)))}

2. รูปแบบไฟล์

{formats.map(o => card(o, format === o.k, () => { setFormat(o.k); if (o.k === 'csv' && content === 'summary') setContent('detail'); }))}

{!needCols && (

💡 อยากเลือกคอลัมน์ที่จะส่งออกเอง? กด “รายละเอียด” หรือ “สรุป + รายละเอียด” ด้านบน — จะมีช่องให้เลือกจากคอลัมน์วิศวกรทั้งหมด · (“สรุป” = ภาพรวม KPI ไม่มีตารางรายโครงการ จึงไม่ต้องเลือกคอลัมน์)

)} {needCols && (

3. เลือกคอลัมน์ที่จะส่งออก (จากคอลัมน์วิศวกรทั้งหมด) {sel.size}/{allCols.length}

{chip('เลือกทั้งหมด', false, () => setSel(new Set(allCols.map(c => c.key))))} {chip('ค่าเริ่มต้น', false, () => setSel(new Set(PCU.PC_EXPORT_DEFAULT.filter(k => allCols.some(c => c.key === k)))))} {chip('ล้าง', false, () => setSel(new Set()))}

setColSearch(e.target.value)} placeholder="ค้นหาคอลัมน์…" style={{ width: '100%', height: 32, border: '1px solid #d3dcea', borderRadius: 8, padding: '0 10px', fontSize: 12, marginBottom: 8, outline: 'none' }} />

{groups.map(([g, title]) => { const items = filteredCols.filter(c => c.group === g); if (!items.length) return null; const allOn = items.every(c => sel.has(c.key)); return (

{ if (el) el.indeterminate = !allOn && items.some(c => sel.has(c.key)); }} onChange={() => setSel(s => { const n = new Set(s); allOn ? items.forEach(c => n.delete(c.key)) : items.forEach(c => n.add(c.key)); return n; })} /> {title} ({items.length})

{items.map(c => ( toggle(c.key)} /> {c.label} {c.type !== 'text' && {c.type === 'money' ? '' : c.type === 'date' ? '📅' : '%'}} ))}

); })}

)}

{needCols && ส่งออก {sel.size} คอลัมน์}

); } // ═══════════════════════════════════════════════════════════════════════════ // PROJECT DRAWER (right slide-out) — detail + editable Finance Master // ═══════════════════════════════════════════════════════════════════════════ function PcDrawer({ row, canEdit, canDelete, onClose, onSaveFinance, onSaveRaw, onDeleteProject }) { const [tab, setTab] = pcSt('overview'); const U = PCU; const Field = ({ label, value, mono }) => (

{label}

{value || —}

); return ( <>

{/* header */}

โครงการ · {row.fy ? 'FY' + row.fy : ''}

{row.site || row.contractNo}

{[row.contractNo && !/^(XL|WS)-/i.test(row.contractNo) ? row.contractNo : null, row.province, row.type].filter(Boolean).join(' · ')}

{row.projectStatus}

{/* tabs */}

{[['overview', 'ภาพรวม'], ['installments', 'งวดงาน'], ['finance', 'การเงิน · Finance Master'], ['edit', '✏️ แก้ไขข้อมูล']].map(([k, l]) => ( ))}

{/* body */}

{tab === 'overview' && (

{(() => { const pd = row.progressDetail || { total: 0, delivered: 0, accepted: 0, paid: 0 }; let note; if (row.status === 'ยกเลิก') note = 'โครงการยกเลิก → ความคืบหน้า 0%'; else if (row.status === 'ยังไม่ลงนาม') note = 'ยังไม่ลงนามสัญญา → ความคืบหน้า 0%'; else if (row.status === 'Finish') note = 'รับเงินครบ / ปิดโครงการ → 100% (โครงการจบแล้ว)'; else if (pd.source === 'pog') { const which = (pd.pogStank != null && pd.pogStank > 0) ? `งานหอถัง+ระบบ (POG+STANK) = ${pd.pogStank}%` : (pd.pogDrink != null && pd.pogDrink > 0) ? `งานน้ำดื่ม (POG DRINK) = ${pd.pogDrink}%` : `${pd.pog}%`; note = `ความคืบหน้างานก่อสร้างจริงจากฝ่ายงาน — ${which}`; } else if (pd.total > 0) note = `ไม่มีค่า % งานก่อสร้าง → คำนวณจากงวดงาน ถ่วงน้ำหนักตาม % งวด — ส่งมอบ ${pd.delivered}/${pd.total} งวด · ตรวจรับ ${pd.accepted} งวด · รับเงิน ${pd.paid} งวด (เกณฑ์: ส่งมอบ = 75% · ตรวจรับ = 90% · รับเงิน = 100% ของน้ำหนักงวดนั้น)`; else if (row.received > 0 && row.contractAmt > 0) note = `ไม่มีข้อมูลงวดงาน → คำนวณจาก รับแล้ว ${U.fmtBaht(row.received)} ÷ มูลค่าสัญญา ${U.fmtBaht(row.contractAmt)}`; else note = 'ลงนาม/เริ่มงานแล้ว แต่ยังไม่มีค่า % งานก่อสร้าง → ตั้งต้นที่ระดับเริ่มต้น'; return (

ความคืบหน้า {row.progress == null ? '—' : row.progress + '%'} · ที่มาของตัวเลข

{note}

); })()}

)} {tab === 'installments' && (

{row.installments.length === 0 && (() => { // ตรวจว่าเป็น "ข้อมูลยังไม่ซิงค์" (ชีท 35 คอลัมน์ ไม่มีคอลัมน์งวด) หรือไม่มีงวดจริง const raw = row._raw || {}; const hasInstCols = ('% งวด 1' in raw) || ('Summary Payment 1' in raw) || ('มูลค่า งวด 1' in raw) || ('วันที่ส่งมอบงาน งวด 1' in raw); return hasInstCols ?

ไม่มีข้อมูลงวดงาน

⏳ ข้อมูลงวดยังไม่ซิงค์เข้าระบบ
ชีทกลางยังมีแค่คอลัมน์พื้นฐาน (ยังไม่มีคอลัมน์งวด/ส่งมอบ/Summary) — ทุกโครงการจะแสดงงวดครบพร้อมกันหลัง deploy backend (Code.standalone.gs) + อัปโหลด Excel โครงการอีก 1 รอบ · ไม่ต้องไล่แก้ทีละโครง

; })()} {row.installments.map(i => (

งวด {i.no} {i.percent != null ? · {i.percent}% : ''} {i.mergedFull ? ส่งงวดเดียว 100% · รวมงวดก่อน : ''} {i.absorbed ? 'รวมในงวดสุดท้าย' : i.paid ? 'จ่ายแล้ว' : i.acceptDate ? 'ตรวจรับแล้ว' : i.delivered ? 'ส่งมอบแล้ว' : 'ยังไม่ส่ง'}

{i.absorbed &&

ไม่ได้ส่งงวดนี้แยก — ยกไปรวมจ่ายในงวด {i.absorbedInto} (ส่งงวดเดียว 100%)

}

มูลค่า{i.mergedFull ? ' (จ่ายจริง)' : i.absorbed ? ' (ตามแผน)' : ''}: {U.fmtBaht(i.amount)} ส่งมอบ: {U.fmtDate(i.deliveryDate)} ตรวจรับ: {U.fmtDate(i.acceptDate)} คาดรับเงิน: {U.fmtDate(i.forecastDate)}

{(() => { const iv = i.invoice; const META = (window.WTPData && WTPData.IV_STATUS_META) || {}; if (!iv || !iv.ivNo) return (

🧾 ใบแจ้งหนี้: ยังไม่มี IV ผูกกับงวดนี้

); const sm = META[iv.status] || { label: iv.status || '—', badge: 'b-gray' }; const badgeColor = iv.status === 'paid' ? { bg: '#dcfce7', c: '#15803d' } : iv.status === 'issue' ? { bg: '#fee2e2', c: '#b91c1c' } : iv.status === 'tracking' ? { bg: '#dceaff', c: '#1f56b8' } : { bg: '#fffbeb', c: '#b45309' }; return (

🧾 ใบแจ้งหนี้: {iv.ivNo} สถานะ IV: {sm.label} {iv.invoiceDate && วันที่วางบิล: {U.fmtDate(iv.invoiceDate)}} {iv.receivedNet > 0 ? รับเงินจริง: {U.fmtBaht(iv.receivedNet)}{iv.receivedDate ? · {U.fmtDate(iv.receivedDate)} : ''} : รับเงินจริง: ยังไม่รับ}

); })()}

))}

)} {tab === 'finance' && } {tab === 'edit' && }

); } // Finance Master editor — protected fields, saved to localStorage (survives sync) function PcFinanceEditor({ row, canEdit, onSave }) { const fin = PCU.loadFinanceMaster()[row.contractNo] || {}; const [f, setF] = pcSt({ assignee: fin.assignee != null ? fin.assignee : (row.assignee || ''), lgBank: fin.lgBank || '', lgAmount: fin.lgAmount || '', lgStatus: fin.lgStatus || 'active', lgIssue: fin.lgIssue || '', lgExpiry: fin.lgExpiry || '', outstandingDebt: fin.outstandingDebt || '', debtDeduction: fin.debtDeduction || '', creditTerm: fin.creditTerm != null ? fin.creditTerm : 30, remark: fin.remark || '', manualStatus: fin.manualStatus || '', }); const set = (k, v) => setF(p => ({ ...p, [k]: v })); const lbl = { fontSize: 10.5, color: '#94a3b8', marginBottom: 3, display: 'block' }; const banks = ['', 'KTB', 'KBANK', 'SCB', 'BBL', 'BAY', 'GSB', 'TTB']; const assignees = ['', 'ไม่โอนสิทธิ', 'KTB', 'WCI+STS', 'LIT', 'Funding', 'P2P', 'คุณประกอบ']; return (

🔒 Finance Master — ข้อมูลนี้กรอกโดยฝ่ายการเงิน · จะ ไม่ถูกเขียนทับ เมื่อ upload Excel ใหม่

สถานะโครงการ (Override) — เผื่อระบบตีความจาก Excel ผิด เช่น คอลัมน์ที่มีคำว่า "ยกเลิก" แต่ไม่ได้หมายถึงยกเลิกโครงการจริง {f.manualStatus &&

⚠ กำหนดเองอยู่ — จะทับสถานะที่คำนวณอัตโนมัติ (รวมถึง progress/ยอดค้างรับที่คำนวณต่อจากสถานะนี้) จนกว่าจะเลือก "ใช้ค่าที่ระบบคำนวณอัตโนมัติ" อีกครั้ง

}

ผู้รับโอนสิทธิ (Assignment of Claim)

Credit Term (วัน) set('creditTerm', e.target.value)} style={pcInp} />

LG Bank

LG Amount set('lgAmount', e.target.value)} style={pcInp} />

LG ออกเมื่อ set('lgIssue', e.target.value)} style={pcInp} />

LG หมดอายุ set('lgExpiry', e.target.value)} style={pcInp} />

ภาระหนี้คงค้าง (Outstanding Debt) set('outstandingDebt', e.target.value)} style={pcInp} />

หักหนี้ (Debt Deduction) set('debtDeduction', e.target.value)} style={pcInp} />

Remark

set('remark', e.target.value)} rows={2} style={{ ...pcInp, height: 'auto', padding: 8, resize: 'vertical' }} /></div>
      </div>
      {canEdit && <button onClick={() => onSave(row.contractNo, f)} style={{ ...pcBtn, background: 'var(--brand-600)', color: '#fff', border: 'none', height: 34 }}>💾 บันทึก Finance Master</button>}
      {!canEdit && <div style={{ fontSize: 11, color: '#94a3b8' }}>สิทธิ์อ่านอย่างเดียว — ไม่สามารถแก้ไขได้</div>}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// RAW EDITOR — แก้ไขข้อมูลโครงการรายช่อง (ทุกคอลัมน์ที่มาจาก Excel) + ลบโครงการ
// ═══════════════════════════════════════════════════════════════════════════
// เขียนกลับเข้า data.projects (คอลัมน์จริงในตาราง projects) → ค่าที่ระบบ derive ต่อ
// (สถานะ · ความคืบหน้า · งวดงาน · คาดรับเงิน) คำนวณใหม่ให้เองทันทีหลังบันทึก
// ส่วนที่ derive แล้วอยากทับเอง (เช่นสถานะ) ทำที่แท็บ Finance Master แทน
function PcRawEditor({ row, canEdit, canDelete, onSave, onDelete }) {
  const U = PCU;
  const raw = row._raw || {};
  const [draft, setDraft] = pcSt({});          // key → ค่าที่พิมพ์ใหม่ (เฉพาะช่องที่แตะ)
  const [q, setQ] = pcSt('');
  const [onlyFilled, setOnlyFilled] = pcSt(false);
  const [openCat, setOpenCat] = pcSt({ 'พื้นฐาน': true });
  const [confirmDel, setConfirmDel] = pcSt(false);

// สลับไปดูโครงการอื่น → ล้างสิ่งที่ค้างไว้ (กันบันทึกผิดโครงการ)
  pcEff(() => { setDraft({}); setConfirmDel(false); setQ(''); }, [row.id]);

const origOf = (k) => (raw[k] == null ? '' : String(raw[k]));
  const valOf = (k) => (draft[k] !== undefined ? draft[k] : origOf(k));
  const setVal = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  // พิมพ์แล้วลบกลับเป็นค่าเดิม = ไม่นับว่าแก้ (ไม่ส่งขึ้น server)
  const dirtyKeys = Object.keys(draft).filter(k => String(draft[k] == null ? '' : draft[k]) !== origOf(k));
  const isDirty = (k) => dirtyKeys.indexOf(k) >= 0;

const save = () => {
    if (!dirtyKeys.length || !canEdit) return;
    const patch = {};
    dirtyKeys.forEach(k => { patch[k] = draft[k]; });
    onSave(row, patch);
    setDraft({});
  };

// คำเตือนเฉพาะช่องที่กระทบการคำนวณของทั้งระบบ
  const hintFor = (key) => {
    if (/ยกเลิก/.test(key)) return 'ช่องนี้ไม่ว่าง (เช่น 1 · x · ❌) = ระบบถือว่า "ยกเลิกโครงการ" — ลบค่าออกถ้าโครงการยังไม่ยกเลิก';
    if (key === 'Contract No.') return 'เปลี่ยนเลขสัญญา = ระบบจะย้ายข้อมูล Finance Master (LG/หนี้/ผู้รับโอนสิทธิ) ตามไปให้ · ใบแจ้งหนี้ที่อ้างเลขเดิมจะไม่ผูกกับโครงการนี้อีก';
    return '';
  };

return (
    <div>
      {/* แถบเครื่องมือ + ปุ่มบันทึก (ติดบนสุดตอนเลื่อน) */}
      <div style={{ position: 'sticky', top: -18, zIndex: 3, margin: '-18px -18px 12px', padding: '12px 18px', background: '#f6f8fb', borderBottom: '1px solid #e6ecf4' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          <input placeholder="ค้นหาชื่อช่อง…" value={q} onChange={e => setQ(e.target.value)} style={{ ...pcInp, width: 190 }} />
          <label style={{ ...pcChk, whiteSpace: 'nowrap' }}>
            <input type="checkbox" checked={onlyFilled} onChange={() => setOnlyFilled(v => !v)} />เฉพาะช่องที่มีข้อมูล
          </label>
          <span style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
            {dirtyKeys.length > 0 && <span style={{ fontSize: 11, fontWeight: 700, color: '#b45309' }}>แก้ไข {dirtyKeys.length} ช่อง</span>}
            {dirtyKeys.length > 0 && <button onClick={() => setDraft({})} style={{ ...pcBtn, color: '#64748b' }}>คืนค่าเดิม</button>}
            <button onClick={save} disabled={!canEdit || !dirtyKeys.length}
              style={{ ...pcBtn, border: 'none', color: '#fff', background: (canEdit && dirtyKeys.length) ? 'var(--brand-600)' : '#cbd5e1', cursor: (canEdit && dirtyKeys.length) ? 'pointer' : 'not-allowed' }}>
              💾 บันทึก
            </button>
          </span>
        </div>
        {!canEdit && <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 6 }}>สิทธิ์อ่านอย่างเดียว — ดูได้ แต่แก้ไม่ได้</div>}
      </div>

<div style={{ background: '#f1f5f9', border: '1px solid #e2e8f0', borderRadius: 10, padding: '9px 12px', fontSize: 11, color: '#475569', lineHeight: 1.6, marginBottom: 12 }}>
        แก้ได้ทุกช่องที่มาจากไฟล์ Excel · <b>สถานะ · ความคืบหน้า · ยอดค้างรับ · คาดรับเงิน</b> ระบบคำนวณจากช่องเหล่านี้ให้เอง
        (อยากกำหนดสถานะเองไปที่แท็บ <b>การเงิน · Finance Master</b>) · ⚠ อัปโหลด Excel รอบใหม่จะเขียนทับค่าที่แก้ที่นี่
      </div>

{cats.length === 0 && <div style={{ padding: 30, textAlign: 'center', color: '#94a3b8', fontSize: 12 }}>ไม่พบช่องที่ตรงกับที่ค้นหา</div>}

{cats.map(cat => {
        const list = byCat[cat];
        const filled = list.filter(s => origOf(s.key).trim()).length;
        return (
          <div key={cat} style={{ ...pcCard, marginBottom: 10, overflow: 'hidden' }}>
            <button onClick={() => setOpenCat(o => ({ ...o, [cat]: !o[cat] }))}
              style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', border: 'none', background: catOpen(cat) ? '#f8fafc' : '#fff', cursor: 'pointer', textAlign: 'left' }}>
              <PcI.chevron size={14} style={{ transform: catOpen(cat) ? 'none' : 'rotate(-90deg)', transition: 'transform .15s', color: '#64748b' }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-900)' }}>{cat}</span>
              <span style={{ fontSize: 10.5, color: '#94a3b8' }}>{filled}/{list.length} ช่องมีข้อมูล</span>
            </button>
            {catOpen(cat) && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 14px', padding: '4px 12px 14px' }}>
                {list.map(s => {
                  const hint = hintFor(s.key);
                  return (
                    <div key={s.key} style={hint ? { gridColumn: '1 / -1' } : undefined}>
                      <label style={{ fontSize: 10.5, color: isDirty(s.key) ? '#b45309' : '#94a3b8', marginBottom: 3, display: 'block' }}>
                        {s.key}{isDirty(s.key) ? ' ✏️' : ''}
                      </label>
                      {renderInput(s.key)}
                      {hint && <div style={{ fontSize: 10, color: '#94a3b8', marginTop: 3, lineHeight: 1.5 }}>{hint}</div>}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        );
      })}

{/* ── โซนอันตราย — ลบโครงการ (ต้องกดยืนยันอีกครั้ง) ─────────────────── */}
      <div style={{ marginTop: 18, border: '1px solid ' + (canDelete ? '#fecaca' : '#e2e8f0'), background: canDelete ? '#fef2f2' : '#f8fafc', borderRadius: 10, padding: '12px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: canDelete ? '#b91c1c' : '#94a3b8' }}>
          <PcI.trash size={14} /> ลบโครงการนี้
        </div>
        {!canDelete ? (
          <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 5 }}>ลบได้เฉพาะสิทธิ์หัวหน้า (manager) เท่านั้น</div>
        ) : !confirmDel ? (
          <>
            <div style={{ fontSize: 11, color: '#7f1d1d', lineHeight: 1.65, margin: '5px 0 10px' }}>
              ลบแถวโครงการออกจากฐานข้อมูลถาวร · ใบแจ้งหนี้/ใบเสร็จที่อ้างเลขสัญญานี้ <b>จะไม่ถูกลบ</b> แต่จะไม่มีโครงการให้ผูก
              · ข้อมูล Finance Master ของเลขสัญญานี้ยังเก็บไว้ (ถ้านำเข้าโครงการเลขเดิมอีกจะกลับมาเอง)
            </div>
            <button onClick={() => setConfirmDel(true)} style={{ ...pcBtn, border: '1px solid #dc2626', color: '#dc2626', background: '#fff' }}>ลบโครงการ…</button>
          </>
        ) : (
          <div style={{ marginTop: 8, background: '#fff', border: '1px solid #fca5a5', borderRadius: 8, padding: '10px 12px' }}>
            <div style={{ fontSize: 12, color: '#7f1d1d', lineHeight: 1.6, marginBottom: 10 }}>
              ยืนยันลบ “<b>{row.site || row.contractNo || '—'}</b>”
              {row.contractNo && !/^(XL|WS)-/i.test(row.contractNo) ? <span className="num"> · {row.contractNo}</span> : null}
              {row.contractAmt > 0 ? <span> · มูลค่าสัญญา {U.fmtBaht(row.contractAmt)}</span> : null}
              <br /><b>การลบนี้ย้อนกลับไม่ได้</b> — กู้คืนได้จากไฟล์สำรองเท่านั้น
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => onDelete(row)} style={{ ...pcBtn, border: 'none', background: '#dc2626', color: '#fff' }}>ยืนยันลบถาวร</button>
              <button onClick={() => setConfirmDel(false)} style={{ ...pcBtn, color: '#64748b' }}>ยกเลิก</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// ADVANCED FILTER (หลายเงื่อนไข AND/OR)
// ═══════════════════════════════════════════════════════════════════════════
function pcAdvFields() {
  return [
    { key: 'assignee', label: 'ผู้รับโอนสิทธิ', type: 'enum', get: r => r.assignee || '' },
    { key: 'status', label: 'สถานะหลัก', type: 'enum', get: r => r.status, fmt: v => (PCU.STATUS_META[v] && PCU.STATUS_META[v].th) || v },
    { key: 'projectStatus', label: 'สถานะย่อย', type: 'enum', get: r => r.projectStatus || '' },
    { key: 'fy', label: 'ปีงบ', type: 'enum', get: r => r.fy ? 'FY' + r.fy : '' },
    { key: 'region', label: 'ภูมิภาค', type: 'enum', get: r => r.regionEn || r.region || '' },
    { key: 'province', label: 'จังหวัด', type: 'enum', get: r => r.province || '' },
    { key: 'type', label: 'ประเภท', type: 'enum', get: r => r.type || '' },
    { key: 'lgBank', label: 'ธนาคาร LG', type: 'enum', get: r => (r.lg && r.lg.bank) || '' },
    { key: 'contractAmt', label: 'มูลค่าสัญญา', type: 'num', get: r => r.contractAmt || 0 },
    { key: 'outstandingAR', label: 'ยอดค้างรับ', type: 'num', get: r => r.outstandingAR || 0 },
    { key: 'received', label: 'รับแล้ว', type: 'num', get: r => r.received || 0 },
    { key: 'progress', label: 'ความคืบหน้า (%)', type: 'num', get: r => r.progress || 0 },
    { key: 'd1', label: 'ส่งมอบงวด 1 แล้ว', type: 'bool', get: r => !!r.d1 },
    { key: 'a1', label: 'ได้ใบตรวจรับ งวด 1', type: 'bool', get: r => !!r.a1 },
    { key: 'p1', label: 'รับเงินงวด 1 แล้ว', type: 'bool', get: r => !!r.p1 },
    { key: 'd2', label: 'ส่งมอบงวด 2 แล้ว', type: 'bool', get: r => !!r.d2 },
    { key: 'a2', label: 'ได้ใบตรวจรับ งวด 2', type: 'bool', get: r => !!r.a2 },
    { key: 'p2', label: 'รับเงินงวด 2 แล้ว', type: 'bool', get: r => !!r.p2 },
  ].concat(pcAdvRawFields());
}
// raw engineer columns ที่ฝ่ายการเงินมาร์กไว้ (web หรือ exp) → ฟิลเตอร์ได้ในขั้นสูง
function pcAdvRawFields() {
  const DUP = { 'Type': 1, 'Region': 1, 'Province': 1, 'มูลค่าสัญญาที่เซ็น (รวมVAT)': 1 };
  return (PCU.PC_COL_SPEC || []).filter(s => (s.web > 0 || s.exp > 0) && !DUP[s.key]).map(s => {
    const kind = PCU.pcColType(s.key);
    const type = (kind === 'money' || kind === 'pct') ? 'num' : kind === 'date' ? 'date' : 'enum';
    return { key: 'raw:' + s.key, label: s.cat + ' · ' + s.key, type, raw: true,
      get: ((kk, knd) => (r) => { const v = (r._raw || {})[kk]; if (knd === 'money' || knd === 'pct') return PCU.toNum(v) || 0; if (knd === 'date') return PCU.isoOf(v) || ''; return v == null ? '' : v; })(s.key, kind) };
  });
}
function pcApplyAdvanced(rows, conds, mode) {
  const active = (conds || []).filter(c => c.field && c.op);
  if (!active.length) return rows;
  const fields = {}; pcAdvFields().forEach(f => fields[f.key] = f);
  const test = (r, c) => {
    const f = fields[c.field]; if (!f) return true;
    const v = f.get(r);
    if (f.type === 'bool') return c.op === 'false' ? v === false : v === true;
    if (f.type === 'num') { const n = +v, t = +c.value; if (c.value === '' || isNaN(t)) return true; return c.op === 'lte' ? n <= t : c.op === 'eq' ? n === t : n >= t; }
    if (f.type === 'date') { if (!c.value) return true; const iso = String(v || ''); if (!iso) return false; return c.op === 'before' ? iso <= c.value : c.op === 'after' ? iso >= c.value : iso === c.value; }
    if (c.value == null || c.value === '') return true;
    return c.op === 'isNot' ? String(v) !== String(c.value) : String(v) === String(c.value);
  };
  return rows.filter(r => mode === 'OR' ? active.some(c => test(r, c)) : active.every(c => test(r, c)));
}
function PcAdvancedFilter({ rows, conds, mode, onApply, onClose }) {
  const fields = pcMemo(() => pcAdvFields(), []);
  const fmap = pcMemo(() => { const m = {}; fields.forEach(f => m[f.key] = f); return m; }, [fields]);
  const [cs, setCs] = pcSt(() => (conds && conds.length ? conds.map(c => ({ ...c })) : [{ field: 'assignee', op: 'is', value: '' }]));
  const [md, setMd] = pcSt(mode || 'AND');
  const optsFor = (fkey) => { const f = fmap[fkey]; if (!f) return []; const s = new Set(); rows.forEach(r => { const v = f.get(r); if (v !== '' && v != null) s.add(String(v)); }); return [...s].sort((a, b) => a.localeCompare(b, 'th')); };
  const opDefault = (t) => t === 'bool' ? 'true' : t === 'num' ? 'gte' : t === 'date' ? 'after' : 'is';
  const setRow = (i, patch) => setCs(cs => cs.map((c, k) => k === i ? { ...c, ...patch } : c));
  const addRow = () => setCs(cs => [...cs, { field: 'assignee', op: 'is', value: '' }]);
  const delRow = (i) => setCs(cs => cs.filter((_, k) => k !== i));
  const preview = pcMemo(() => pcApplyAdvanced(rows, cs, md).length, [rows, cs, md]);
  const sel = { height: 30, fontSize: 11.5, padding: '0 6px', border: '1px solid #d3dcea', borderRadius: 6, background: '#fff', outline: 'none' };
  const usePreset = () => { setMd('AND'); setCs([
    { field: 'assignee', op: 'is', value: 'LIT' }, { field: 'd1', op: 'true', value: '' }, { field: 'a1', op: 'true', value: '' }, { field: 'p1', op: 'false', value: '' },
  ]); };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,18,34,.42)', zIndex: 700, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '6vh 20px 20px' }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, width: 'min(720px,97vw)', maxHeight: '86vh', display: 'flex', flexDirection: 'column', boxShadow: '0 24px 60px rgba(13,31,58,.28)', overflow: 'hidden' }}>
        <div style={{ background: 'linear-gradient(135deg,var(--brand-600),var(--brand-500))', color: '#fff', padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div><div style={{ fontSize: 16, fontWeight: 800 }}>ฟิลเตอร์ขั้นสูง</div><div style={{ fontSize: 10.5, opacity: .85 }}>กรองหลายเงื่อนไขพร้อมกัน · เช่น โอนสิทธิ LIT · ส่งงวด 1 · ได้ใบตรวจรับ · ยังไม่รับเงิน</div></div>
          <button onClick={onClose} style={{ border: 'none', background: 'rgba(255,255,255,.18)', color: '#fff', borderRadius: 8, width: 30, height: 30, display: 'grid', placeItems: 'center', cursor: 'pointer' }}><PcI.close size={16} /></button>
        </div>
        <div style={{ padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid #eef2f7', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 11.5, color: '#64748b', fontWeight: 600 }}>ต้องตรง</span>
          <div style={{ display: 'inline-flex', border: '1px solid #d3dcea', borderRadius: 7, overflow: 'hidden' }}>
            {[['AND', 'ทุกเงื่อนไข'], ['OR', 'เงื่อนไขใดก็ได้']].map(([v, l]) => (
              <button key={v} onClick={() => setMd(v)} style={{ border: 'none', padding: '5px 11px', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', background: md === v ? 'var(--brand-500)' : '#fff', color: md === v ? '#fff' : '#475569' }}>{l}</button>
            ))}
          </div>
          <button onClick={usePreset} style={{ ...pcBtn, marginLeft: 'auto', fontSize: 11 }}>⚡ ตัวอย่าง: LIT ส่งงวด1·ตรวจรับ·ยังไม่รับเงิน</button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {cs.map((c, i) => {
            const f = fmap[c.field] || fields[0];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 11, color: '#94a3b8', width: 26, textAlign: 'right' }}>{i === 0 ? '' : (md === 'OR' ? 'หรือ' : 'และ')}</span>
                <select value={c.field} onChange={e => { const nf = fmap[e.target.value]; setRow(i, { field: e.target.value, op: opDefault(nf.type), value: '' }); }} style={{ ...sel, minWidth: 150 }}>
                  {fields.map(f => <option key={f.key} value={f.key}>{f.label}</option>)}
                </select>
                {f.type === 'bool' && (
                  <select value={c.op} onChange={e => setRow(i, { op: e.target.value })} style={{ ...sel, minWidth: 90 }}><option value="true">ใช่</option><option value="false">ไม่ใช่</option></select>
                )}
                {f.type === 'num' && (<>
                  <select value={c.op} onChange={e => setRow(i, { op: e.target.value })} style={{ ...sel, minWidth: 70 }}><option value="gte">≥</option><option value="lte">≤</option><option value="eq">=</option></select>
                  <input type="number" value={c.value} onChange={e => setRow(i, { value: e.target.value })} placeholder="ค่า" style={{ ...sel, width: 120 }} />
                </>)}
                {f.type === 'date' && (<>
                  <select value={c.op} onChange={e => setRow(i, { op: e.target.value })} style={{ ...sel, minWidth: 90 }}><option value="after">ตั้งแต่</option><option value="before">ก่อน</option><option value="on">ตรงวันที่</option></select>
                  <YmdPicker value={c.value} onChange={v => setRow(i, { value: v })} size="sm" />
                </>)}
                {f.type === 'enum' && (<>
                  <select value={c.op} onChange={e => setRow(i, { op: e.target.value })} style={{ ...sel, minWidth: 100 }}><option value="is">เท่ากับ</option><option value="isNot">ไม่เท่ากับ</option></select>
                  <select value={c.value} onChange={e => setRow(i, { value: e.target.value })} style={{ ...sel, minWidth: 150 }}>
                    <option value="">— เลือก —</option>
                    {optsFor(c.field).map(o => <option key={o} value={o}>{f.fmt ? f.fmt(o) : o}</option>)}
                  </select>
                </>)}
                <button onClick={() => delRow(i)} title="ลบเงื่อนไข" style={{ border: 'none', background: '#fef2f2', color: '#dc2626', borderRadius: 6, width: 28, height: 28, cursor: 'pointer', flex: '0 0 auto' }}>✕</button>
              </div>
            );
          })}
          <button onClick={addRow} style={{ ...pcBtn, alignSelf: 'flex-start', marginTop: 4, color: 'var(--brand-700)', borderColor: 'var(--brand-200)' }}>+ เพิ่มเงื่อนไข</button>
        </div>
        <div style={{ padding: '12px 18px', borderTop: '1px solid #eef2f7', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 12, color: '#64748b' }}>ตรงเงื่อนไข <b className="num" style={{ color: 'var(--brand-700)', fontSize: 15 }}>{preview.toLocaleString()}</b> / {rows.length.toLocaleString()} โครงการ</span>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button onClick={() => { setCs([]); onApply([], 'AND'); }} style={{ ...pcBtn, color: '#dc2626' }}>ล้างทั้งหมด</button>
            <button onClick={() => onApply(cs.filter(c => c.field && c.op), md)} style={{ ...pcBtn, background: 'var(--brand-600)', color: '#fff', border: 'none', padding: '0 18px' }}>ใช้ตัวกรอง</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// UPLOAD DIFF (แจ้งเตือนความเปลี่ยนแปลงหลัง upload Excel)
// ═══════════════════════════════════════════════════════════════════════════
function PcUploadDiff({ diff, stats, onClose }) {
  const groups = [
    { key: 'signed', icon: '✍️', label: 'ลงนามใหม่', color: '#2563eb', bg: '#dceaff', items: diff.signed || [], hint: 'เปลี่ยนจาก “รอลงนาม” → มีเลขสัญญาจริง' },
    { key: 'added', icon: '➕', label: 'โครงการใหม่', color: '#15803d', bg: '#dcfce7', items: diff.added || [], hint: 'เลขสัญญาที่ไม่เคยมีในระบบ' },
    { key: 'cancelled', icon: '🔴', label: 'ยกเลิกเพิ่ม', color: '#b91c1c', bg: '#fee2e2', items: diff.cancelled || [], hint: 'เพิ่งถูกตั้งสถานะยกเลิกในไฟล์นี้' },
    { key: 'missing', icon: '➖', label: 'โครงการหายไป', color: '#b45309', bg: '#ffedd5', items: diff.missing || [], hint: 'มีในระบบเดิม แต่ไม่อยู่ในไฟล์ใหม่ (ยังคงเก็บไว้ ไม่ลบ)' },
  ];
  const [open, setOpen] = pcSt(groups.find(g => g.items.length) ? groups.find(g => g.items.length).key : null);
  const nothing = groups.every(g => !g.items.length);
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,18,34,.42)', zIndex: 720, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, width: 'min(560px,96vw)', maxHeight: '84vh', display: 'flex', flexDirection: 'column', boxShadow: '0 24px 60px rgba(13,31,58,.28)', overflow: 'hidden' }}>
        <div style={{ background: 'linear-gradient(135deg,var(--brand-600),var(--brand-500))', color: '#fff', padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div><div style={{ fontSize: 16, fontWeight: 800 }}>อัปโหลดสำเร็จ · สรุปการเปลี่ยนแปลง</div><div style={{ fontSize: 10.5, opacity: .85 }}>
            {stats.totalRows} โครงการในไฟล์ · คงไว้ {stats.keptCount} · ข้ามแถวว่าง {stats.ghostCount}
            {stats.splitCount > 0 ? ' · ใช้เลขสัญญาซ้ำกันแต่แยกเป็นคนละโครงการ ' + stats.splitCount : ''}
            {stats.noteCount > 0 ? (
              <div style={{ marginTop: 2 }}>ข้ามแถวหมายเหตุ (ไม่มีชื่อโครงการ) {stats.noteCount} — {(stats.noteList || []).join(' · ')}</div>
            ) : null}
          </div></div>
          <button onClick={onClose} style={{ border: 'none', background: 'rgba(255,255,255,.18)', color: '#fff', borderRadius: 8, width: 30, height: 30, display: 'grid', placeItems: 'center', cursor: 'pointer' }}><PcI.close size={16} /></button>
        </div>
        <div style={{ padding: 14, display: 'flex', gap: 8 }}>
          {groups.map(g => (
            <div key={g.key} style={{ flex: 1, background: g.bg, borderRadius: 10, padding: '9px 8px', textAlign: 'center' }}>
              <div style={{ fontSize: 17 }}>{g.icon}</div>
              <div className="num" style={{ fontSize: 19, fontWeight: 800, color: g.color }}>{g.items.length}</div>
              <div style={{ fontSize: 10, color: g.color, fontWeight: 600 }}>{g.label}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '0 14px 14px' }}>
          {nothing && <div style={{ textAlign: 'center', color: '#94a3b8', fontSize: 12.5, padding: 24 }}>ไม่มีการเปลี่ยนแปลงด้านสถานะ · ข้อมูลถูกอัปเดตเรียบร้อย</div>}
          {groups.filter(g => g.items.length).map(g => (
            <div key={g.key} style={{ border: '1px solid #e6ecf4', borderRadius: 10, marginBottom: 8, overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === g.key ? null : g.key)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', border: 'none', background: '#f8fafc', cursor: 'pointer', textAlign: 'left' }}>
                <span>{g.icon}</span><b style={{ fontSize: 12.5, color: g.color }}>{g.label} ({g.items.length})</b>
                <span style={{ marginLeft: 'auto', transform: open === g.key ? 'rotate(180deg)' : 'none', color: '#94a3b8' }}><PcI.chevron size={14} /></span>
              </button>
              {open === g.key && (
                <div style={{ padding: '4px 12px 10px' }}>
                  <div style={{ fontSize: 10.5, color: '#94a3b8', margin: '2px 0 8px' }}>{g.hint}</div>
                  {g.items.map((it, i) => (
                    <div key={i} style={{ display: 'flex', gap: 8, padding: '5px 0', borderBottom: '1px solid #f1f5f9', fontSize: 11.5 }}>
                      <span className="num" style={{ color: 'var(--brand-700)', fontWeight: 600, minWidth: 76, flex: '0 0 auto' }}>{/^(XL|WS)-/i.test(it.code) ? '(ไม่มีเลข)' : it.code}</span>
                      <span style={{ color: 'var(--ink-900)' }}>{it.name.replace(/^[A-Z0-9\-]+ · /, '')}{it.prev ? <span style={{ color: '#94a3b8' }}> · เดิม {it.prev}</span> : ''}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
        <div style={{ padding: '12px 18px', borderTop: '1px solid #eef2f7', textAlign: 'right' }}>
          <button onClick={onClose} style={{ ...pcBtn, background: 'var(--brand-600)', color: '#fff', border: 'none', padding: '0 20px' }}>รับทราบ</button>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// FINANCE TAB — ProjectFinanceGrid
//   มุมมองโฟกัสการเงิน: 1 แถว/โครงการ · โชว์ ผู้รับโอนสิทธิ์ + ภาระหนี้ (ผูก
//   debtMaster.projectCode อัตโนมัติ) + ทุกงวด (ส่งมอบ/มูลค่า/ตรวจรับ + คาดการณ์
//   รับเงิน "การเงินกรอกเอง" → feed cashflow forecast + รายรับสะสมประจำปี ทันที)
//   คลิกผู้รับโอนสิทธิ์ → DebtFormModal (popup เหมือนหน้าภาระหนี้) → save sync
//   ไป debtMaster (โผล่หน้า "ภาระหนี้" + ป้ายในหน้า "ใบแจ้งหนี้" อัตโนมัติ)
// ═══════════════════════════════════════════════════════════════════════════
function PcAssigneeChip({ assignee, debtTotal, hasLink, onClick, canEdit }) {
  const empty = !assignee;
  return (
    <button onClick={onClick} disabled={!canEdit && empty} title={canEdit ? 'คลิกเพื่อแก้/ผูกข้อมูลภาระหนี้' : (empty ? 'ยังไม่มีข้อมูล' : 'ดูข้อมูลภาระหนี้')}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '1px 7px', borderRadius: 100, border: '1px solid ' + (empty ? '#cbd5e1' : (hasLink ? '#86c5ff' : '#fde68a')), background: empty ? '#f8fafc' : (hasLink ? '#eaf3ff' : '#fef9e7'), color: empty ? '#94a3b8' : (hasLink ? '#1e40af' : '#92400e'), fontSize: 10.5, fontWeight: 600, cursor: canEdit ? 'pointer' : 'default', whiteSpace: 'nowrap', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: 1.4 }}>
      {empty ? '+ ระบุ' : (
        <>
          <span style={{ width: 5, height: 5, borderRadius: 10, background: hasLink ? '#2563eb' : '#f59e0b', flexShrink: 0 }} />
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{assignee}</span>
        </>
      )}
      {canEdit && !empty && <span style={{ opacity: .5, fontSize: 9, flexShrink: 0 }}>✎</span>}
    </button>
  );
}

function PcFcDateInput({ value, isManual, canEdit, onChange }) {
  return (
    <input type="date" value={value || ''} disabled={!canEdit}
      onChange={e => onChange(e.target.value || '')}
      title={isManual ? 'การเงินกรอกเอง · ใช้ในการคำนวณรายรับรายเดือน' : (value ? 'คำนวณอัตโนมัติ · กรอกเองได้' : 'ยังไม่มีข้อมูล · กรอกได้')}
      style={{ width: '100%', maxWidth: 110, height: 22, fontSize: 11, border: '1px solid ' + (isManual ? '#86c5ff' : '#e2e8f0'), borderRadius: 5, padding: '0 4px', background: isManual ? '#eaf3ff' : '#fff', color: isManual ? '#1e40af' : '#1e293b', fontWeight: isManual ? 600 : 400, fontVariantNumeric: 'tabular-nums' }} />
  );
}

function ProjectFinanceGrid({ rows, data, setData, canEdit, toast }) {
  const [debtModal, setDebtModal] = pcSt(null);
  const debtMaster = data.debtMaster || [];

// นับงวดสูงสุดในชุดข้อมูล → dynamic columns
  const maxInst = pcMemo(() => {
    let m = 0;
    (rows || []).forEach(r => { const n = (r.installments || []).length; if (n > m) m = n; });
    return Math.max(2, m); // ขั้นต่ำ 2 งวด (ตามคำขอ — รองรับงวดเดียวก็ยังโชว์ 2 คอลัมน์ แต่งวด 2 จะว่าง)
  }, [rows]);

// signed only (ตัดยกเลิก/ยังไม่ลงนาม) + มีมูลค่าสัญญา
  const signedRows = pcMemo(() =>
    (rows || []).filter(r => r.status !== 'ยกเลิก' && r.status !== 'ยังไม่ลงนาม' && r.contractAmt > 0)
  , [rows]);

const finForRow = (r) => {
    const fin = PCU.loadFinanceMaster()[r.contractNo] || {};
    const assignee = fin.assignee || r.assignee || '';
    return PCU.debtForProject(r.contractNo, debtMaster, assignee);
  };

if (!signedRows.length) {
    return (
      <div style={{ background: '#fff', border: '1px solid #e6ecf4', borderRadius: 12, padding: 24, textAlign: 'center', color: '#64748b', fontSize: 13 }}>
        ไม่มีโครงการที่ลงนามแล้วในมุมมองนี้ · ลองเปลี่ยน ปีงบ / ล้างตัวกรอง
      </div>
    );
  }

// header cells per งวด — แคบลงเทียบเดิม (Excel-like compact: ~22-26px / row)
  const ngWidths = { d: 78, v: 96, a: 78, f: 116 };
  const totalWidth = 36 + 232 + 132 + 100 + (ngWidths.d + ngWidths.v + ngWidths.a + ngWidths.f) * maxInst;

return (
    <div style={{ background: '#fff', border: '1px solid #e6ecf4', borderRadius: 10, overflow: 'hidden', boxShadow: '0 4px 12px rgba(13,31,58,.04)' }}>
      <div style={{ padding: '7px 12px', borderBottom: '1px solid #eef2f7', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-900)' }}>💰 ข้อมูลการเงินรายโครงการ · {signedRows.length} โครงการ</span>
        <span style={{ fontSize: 10.5, color: '#64748b' }} title="ภาระหนี้ปัจจุบันผูกอัตโนมัติจาก debtMaster.projectCode">
          <span style={{ background: '#eaf3ff', color: '#1e40af', padding: '1px 5px', borderRadius: 4, fontWeight: 600 }}>หนี้ผูกอัตโนมัติ</span>
        </span>
        <span style={{ fontSize: 10.5, color: '#64748b' }} title="วันคาดการณ์รับเงิน — การเงินกรอกเอง → feed cashflow forecast + รายรับสะสมประจำปี">
          <span style={{ background: '#fef9e7', color: '#92400e', padding: '1px 5px', borderRadius: 4, fontWeight: 600 }}>📅 กรอกเอง</span>
        </span>
        <span style={{ fontSize: 10.5, color: '#64748b' }} title="วิศวกรปรับ % รับจริงผ่าน Payment N (ทับ % งวด เดิม)">
          <span style={{ background: '#eaf3ff', color: '#1e40af', padding: '1px 5px', borderRadius: 4, fontWeight: 600 }}>↻ Payment N</span>
        </span>
        <span style={{ fontSize: 10.5, color: '#64748b' }} title="งวดถูกยกไปรวมในงวดอื่น (ส่งงวดเดียว)">
          <span style={{ background: '#fef3c7', color: '#a16207', padding: '1px 5px', borderRadius: 4, fontWeight: 600 }}>↰ รวมงวด</span>
        </span>
      </div>
      <div style={{ overflow: 'auto', maxHeight: '74vh' }}>
        <table style={{ width: totalWidth, minWidth: totalWidth, borderCollapse: 'collapse', fontSize: 11, fontVariantNumeric: 'tabular-nums', tableLayout: 'fixed' }}>
          <thead style={{ position: 'sticky', top: 0, zIndex: 5, background: '#f8fafc' }}>
            <tr>
              <th rowSpan={2} style={pcFinHCell({ width: 36, left: 0, sticky: true, borderBottom: '2px solid #cbd5e1' })}>#</th>
              <th rowSpan={2} style={pcFinHCell({ width: 232, left: 36, sticky: true, textAlign: 'left', borderBottom: '2px solid #cbd5e1' })}>โครงการ</th>
              <th rowSpan={2} style={pcFinHCell({ width: 132, borderBottom: '2px solid #cbd5e1' })}>ผู้รับโอนสิทธิ์</th>
              <th rowSpan={2} style={pcFinHCell({ width: 100, textAlign: 'right', borderBottom: '2px solid #cbd5e1' })}>ภาระหนี้</th>
              {Array.from({ length: maxInst }).map((_, i) => (
                <th key={'h' + i} colSpan={4} style={pcFinHCell({ width: ngWidths.d + ngWidths.v + ngWidths.a + ngWidths.f, background: i % 2 === 0 ? '#eef2f7' : '#f1f5f9', color: 'var(--brand-700)', fontWeight: 700, fontSize: 11, padding: '4px 6px', borderBottom: '1px solid #cbd5e1' })}>งวด {i + 1}</th>
              ))}
            </tr>
            <tr>
              {Array.from({ length: maxInst }).map((_, i) => (
                <React.Fragment key={'h2' + i}>
                  <th style={pcFinHCell({ width: ngWidths.d, fontSize: 10, color: '#475569', padding: '3px 4px' })}>ส่งมอบ</th>
                  <th style={pcFinHCell({ width: ngWidths.v, textAlign: 'right', fontSize: 10, color: '#475569', padding: '3px 4px' })}>มูลค่า</th>
                  <th style={pcFinHCell({ width: ngWidths.a, fontSize: 10, color: '#475569', padding: '3px 4px' })}>ตรวจรับ</th>
                  <th style={pcFinHCell({ width: ngWidths.f, fontSize: 10, color: 'var(--brand-700)', padding: '3px 4px' })}>📅 คาดรับเงิน</th>
                </React.Fragment>
              ))}
            </tr>
          </thead>
          <tbody>
            {signedRows.map((r, ri) => {
              const info = finForRow(r);
              const finRaw = PCU.loadFinanceMaster()[r.contractNo] || {};
              const fcManualArr = finRaw.fcDates || [];
              const insts = r.installments || [];
              const candCount = info.candidates ? info.candidates.length : 0;
              const projTitle = `${r.contractNo || '—'} · ${r.site || ''} · ${r.type || ''} ${r.province || ''} · มูลค่า ${PCU.fmtBaht(r.contractAmt)}`;
              return (
                <tr key={r.id} style={{ background: ri % 2 === 0 ? '#fff' : '#fafbfd', borderTop: '1px solid #eef2f7' }}>
                  <td style={pcFinCell({ width: 36, left: 0, sticky: true, color: '#94a3b8', textAlign: 'center' })}>{ri + 1}</td>
                  <td style={pcFinCell({ width: 232, left: 36, sticky: true, textAlign: 'left' })} title={projTitle}>
                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: 1.35 }}>
                      <span className="num" style={{ color: 'var(--brand-700)', marginRight: 5 }}>{r.contractNo || '—'}</span>
                      {r.site}
                      <span style={{ color: '#94a3b8', marginLeft: 6, fontSize: 10, fontWeight: 400 }}>· {r.province || '—'}</span>
                    </div>
                  </td>
                  <td style={pcFinCell({ width: 132, textAlign: 'center' })}>
                    <PcAssigneeChip
                      assignee={info.assignee || r.assignee}
                      hasLink={info.debts.length > 0}
                      onClick={() => openDebtModal(r)}
                      canEdit={canEdit}
                    />
                  </td>
                  <td style={pcFinCell({ width: 100, textAlign: 'right' })}
                    title={candCount > 0 ? `สัญญาหนี้ใกล้เคียง ${candCount} — คลิกผู้รับโอนสิทธิ์เพื่อยืนยันผูก` : ''}>
                    <span className="num" style={{ color: info.total > 0 ? '#b91c1c' : '#94a3b8', fontWeight: info.total > 0 ? 600 : 400 }}>
                      {info.total > 0 ? PCU.fmtBaht(info.total) : '—'}
                    </span>
                    {(info.debts.length > 1 || candCount > 0) && (
                      <span style={{ fontSize: 9, color: candCount > 0 ? '#92400e' : '#94a3b8', marginLeft: 4 }}>
                        {info.debts.length > 1 ? `(${info.debts.length})` : ''}
                        {candCount > 0 ? ` +${candCount}?` : ''}
                      </span>
                    )}
                  </td>
                  {Array.from({ length: maxInst }).map((_, i) => {
                    const it = insts[i] || null;
                    // หา "งวดปลายทาง" ของงวด absorbed
                    const absorbTarget = it && it.absorbed
                      ? (insts.find(x => x.paymentOverride && x.paymentN > 0 && !x.absorbed)
                         || insts.find(x => x.summaryPayment > 0 && x.summaryPayment >= r.contractAmt * 0.99))
                      : null;
                    return (
                      <React.Fragment key={'c' + i}>
                        <td style={pcFinCell({ width: ngWidths.d, textAlign: 'center', color: '#475569' })}>
                          {it && it.deliveryDate ? <span className="num">{PCU.fmtDate(it.deliveryDate)}</span> : <span style={{ color: '#cbd5e1' }}>—</span>}
                        </td>
                        <td style={pcFinCell({ width: ngWidths.v, textAlign: 'right' })}>
                          {it && it.absorbed ? (
                            <span title={absorbTarget ? `รวมเข้างวด ${absorbTarget.no} (Payment N)` : 'งวดนี้ไม่รับเงิน (รวมเข้างวดอื่น)'}
                              style={{ fontSize: 10, color: '#a16207', fontWeight: 600 }}>
                              ↰ ง.{absorbTarget ? absorbTarget.no : '?'}
                            </span>
                          ) : it && it.amount > 0 ? (
                            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
                              <span className="num" style={{ color: it.paid ? '#16a34a' : 'var(--ink-900)', fontWeight: it.paid ? 600 : 400 }}>
                                {PCU.fmtBaht(it.amount)}
                              </span>
                              {it.paid && <span title="รับเงินแล้ว" style={{ fontSize: 10, color: '#16a34a' }}>✓</span>}
                              {it.paymentOverride && !it.paid && (
                                <span title={`วิศวกรปรับ % รับจริงผ่าน Payment ${it.no} = ${(it.paymentN * 100).toFixed(0)}% (ทับ % งวด ${it.no} เดิม)`}
                                  style={{ fontSize: 9, color: '#1e40af', fontWeight: 700, background: '#eaf3ff', padding: '0 4px', borderRadius: 3 }}>
                                  ↻{(it.paymentN * 100).toFixed(0)}%
                                </span>
                              )}
                            </span>
                          ) : (
                            <span style={{ color: '#cbd5e1' }}>—</span>
                          )}
                        </td>
                        <td style={pcFinCell({ width: ngWidths.a, textAlign: 'center', color: '#475569' })}>
                          {it && it.acceptDate ? <span className="num">{PCU.fmtDate(it.acceptDate)}</span> : <span style={{ color: '#cbd5e1' }}>—</span>}
                        </td>
                        <td style={pcFinCell({ width: ngWidths.f, textAlign: 'center' })}>
                          {it && !it.paid && !it.absorbed && it.amount > 0 ? (
                            <PcFcDateInput
                              value={fcManualArr[i] || (it.forecastDate || '')}
                              isManual={!!fcManualArr[i]}
                              canEdit={canEdit}
                              onChange={v => saveFcDate(r, i, v)}
                            />
                          ) : it && it.paid ? (
                            <span style={{ fontSize: 10, color: '#16a34a' }}>รับแล้ว</span>
                          ) : it && it.absorbed ? (
                            <span style={{ fontSize: 10, color: '#a16207' }}>—</span>
                          ) : (
                            <span style={{ color: '#cbd5e1' }}>—</span>
                          )}
                        </td>
                      </React.Fragment>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {debtModal && (
        <DebtFormModal
          open={true}
          initial={debtModal.initial}
          isNew={debtModal.isNew}
          onClose={() => setDebtModal(null)}
          onSave={handleDebtSave}
        />
      )}
    </div>
  );
}
function pcFinHCell(extra) {
  return Object.assign({
    background: '#f8fafc', color: '#475569', fontSize: 10.5, fontWeight: 700,
    textAlign: 'center', padding: '4px 6px', borderRight: '1px solid #eef2f7',
    position: extra && extra.sticky ? 'sticky' : 'static', zIndex: extra && extra.sticky ? 3 : 1,
    whiteSpace: 'nowrap',
  }, extra || {});
}
function pcFinCell(extra) {
  return Object.assign({
    padding: '3px 6px', borderRight: '1px solid #f1f5f9', verticalAlign: 'middle',
    position: extra && extra.sticky ? 'sticky' : 'static', zIndex: extra && extra.sticky ? 2 : 0,
    background: extra && extra.sticky ? 'inherit' : undefined,
    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
  }, extra || {});
}

// ═══════════════════════════════════════════════════════════════════════════
// MAIN PAGE
// ═══════════════════════════════════════════════════════════════════════════
const PC_STATE_KEY = 'wtp-pc-gridstate-v4';   // v4: default cols เพิ่ม contractAmt(2 ทศนิยม)+assignee หลังมูลค่าสัญญา
function pcDefaultState() {
  return { order: PCGrid.makeColumns().map(c => c.id), hidden: PCGrid.makeColumns().map(c => c.id).filter(id => !PCGrid.DEFAULT_VISIBLE.includes(id)),
    frozen: PCGrid.DEFAULT_FROZEN.slice(), widths: {}, sort: [], colFilters: {}, page: 1, pageSize: 50, cf: true, density: 'compact' };
}
function pcLoadState() {
  try { const s = JSON.parse(localStorage.getItem(PC_STATE_KEY)); if (s && s.order) return { ...pcDefaultState(), ...s, page: 1 }; } catch (_) {}
  return pcDefaultState();
}

pcEff(() => { const t = setTimeout(() => setSearch(searchInput), 180); return () => clearTimeout(t); }, [searchInput]);
  pcEff(() => { try { localStorage.setItem(PC_STATE_KEY, JSON.stringify(gridState)); } catch (_) {} }, [gridState]);
  pcEff(() => { try { localStorage.setItem('wtp-pc-dash', dashOpen ? '1' : '0'); } catch (_) {} }, [dashOpen]);
  // re-derive เมื่อ Finance Master sync เข้ามา (เครื่องอื่นแก้ → cloud → เห็นเหมือนกัน)
  pcEff(() => {
    const h = (e) => { if (!e.detail || !e.detail.key || String(e.detail.key).indexOf('pcfin.') === 0 || e.detail.key === '*') setFinVer(v => v + 1); };
    window.addEventListener('wtp-override-change', h);
    return () => window.removeEventListener('wtp-override-change', h);
  }, []);

// ★ ยึดข้อมูล server เป็นหลัก + เติมเฉพาะโครงที่ server ไม่มี จาก snapshot ที่ upload
  //   (เดิมเทียบ "ฝั่งไหนแถวเยอะกว่า" → เท่ากันเป๊ะ snapshot ชนะเสมอ และสลับชุดกลางคัน
  //    เมื่อจำนวนแถวขยับ = ตัวเลขเด้ง/โครงการหาย — ดู PCU.mergeProjectSources)
  const baseProjects = PCU.mergeProjectSources(data.projects || [], localProjects || []);
  const allCols = pcMemo(() => PCGrid.makeColumns(), []);
  const allProjects = pcMemo(() => PCU.deriveProjects(baseProjects, data.invoices || [], data.receipts || [], data.debtMaster || []),
    [baseProjects, data.invoices, data.receipts, data.debtMaster, data.manualOverrides, finVer]);

const summary = pcMemo(() => PCU.summarize(topRows), [topRows]);
  const visibleColObjs = pcMemo(() => gridState.order.map(id => allCols.find(c => c.id === id)).filter(c => c && !gridState.hidden.includes(c.id)), [gridState.order, gridState.hidden, allCols]);

const fyCounts = pcMemo(() => { const m = { 67: 0, 68: 0, 69: 0, 70: 0 }; allProjects.forEach(p => { if (m[p.fy] != null) m[p.fy]++; }); return m; }, [allProjects]);

const drawerRow = pcMemo(() => (drawerId == null ? null : (allProjects.find(r => r.id === drawerId) || null)), [drawerId, allProjects]);

const saveFinance = (contractNo, f) => {
    PCU.setFinanceField(contractNo, f);
    setFinVer(v => v + 1);
    toast && toast('บันทึก Finance Master แล้ว · ' + contractNo);
  };

// ── แก้ไขข้อมูลโครงการรายช่อง (จากป๊อปอัป → แท็บแก้ไขข้อมูล) ──────────────
  //   เขียนทั้ง data.projects (sync ขึ้น server) และ snapshot ในเครื่อง เพราะ
  //   baseProjects อาจหยิบจาก snapshot — แก้ที่เดียวจะเห็นค่าเก่าเด้งกลับ
  const saveRawProject = (row, patch) => {
    const rid = (row._raw && row._raw.id != null) ? row._raw.id : row.id;
    if (rid == null) { toast && toast('แถวนี้ไม่มี id — บันทึกไม่ได้'); return; }
    const apply = (arr) => (arr || []).map(p => (p && p.id === rid) ? { ...p, ...patch } : p);
    setData(d => ({ ...d, projects: apply(d.projects) }));
    setLocalProjects(prev => {
      if (!prev || !prev.length) return prev;          // ไม่มี snapshot = ใช้ของ sync อยู่แล้ว
      const next = apply(prev); PCU.saveLocalProjects(next); return next;
    });
    // เปลี่ยนเลขสัญญา → ย้าย Finance Master ตามไป ไม่งั้น LG/หนี้/สถานะที่ตั้งเองหลุดจากโครงการ
    const oldCode = String((row._raw && row._raw['Contract No.']) || row.contractNo || '').trim();
    const newCode = patch['Contract No.'] != null ? String(patch['Contract No.']).trim() : oldCode;
    let moved = false;
    if (newCode && newCode !== oldCode && PCU.renameFinanceKey) moved = PCU.renameFinanceKey(oldCode, newCode);
    setFinVer(v => v + 1);
    toast && toast('บันทึกแล้ว ' + Object.keys(patch).length + ' ช่อง' + (moved ? ' · ย้าย Finance Master ตามเลขสัญญาใหม่' : '') + ' · กำลัง sync');
  };

// ── ลบโครงการ (ยืนยันแล้วจากในป๊อปอัป) ────────────────────────────────────
  //   ลบด้วย id เท่านั้น กันเผลอลบแถวอื่นที่เลขสัญญาซ้ำกัน · forceDeleteRows =
  //   ลบจริงบน server (diff-push ปกติมีเกราะกัน mass-delete)
  const deleteProject = (row) => {
    const rid = (row._raw && row._raw.id != null) ? row._raw.id : row.id;
    if (rid == null) { toast && toast('แถวนี้ไม่มี id — ลบไม่ได้'); return; }
    setData(d => ({ ...d, projects: (d.projects || []).filter(p => p && p.id !== rid) }));
    setLocalProjects(prev => {
      if (!prev || !prev.length) return prev;
      const next = prev.filter(p => p && p.id !== rid); PCU.saveLocalProjects(next); return next;
    });
    if (window.WTPData && typeof WTPData.forceDeleteRows === 'function') WTPData.forceDeleteRows('projects', rid);
    setDrawerId(null);
    toast && toast('ลบโครงการแล้ว · ' + (row.site || row.contractNo || rid));
  };

// บันทึกข้อมูลเต็ม (คอลัมน์ครบ) ลง Supabase ด้วย writeTable (upsert all + delete missing)
  // ใช้ทั้งตอน upload Excel + ปุ่ม forcePushFull
  const pushProjectsToSheet = async (rows, stats) => {
    if (!rows || !rows.length) return;
    setUploadInfo({ status: 'loading', msg: 'กำลังบันทึกข้อมูลโครงการลง Supabase…' });
    try {
      await WTPData.writeTable('projects', rows, r => String(r.id || ''));
      const pre = stats ? `อัปเดต ${stats.totalRows} โครงการ · ` : '';
      try { if (window.WTPData && WTPData.refreshFromServer) WTPData.refreshFromServer(); } catch (_) {}
      setUploadInfo({ status: 'ok', msg: '✅ ' + pre + 'บันทึกลง Supabase สำเร็จ · รีเฟรช (Ctrl+Shift+R) เพื่อให้ทุกเครื่องเห็นงวดงานครบ' });
      toast && toast('บันทึกโครงการลง Supabase สำเร็จ' + (stats ? ' · ' + stats.totalRows + ' โครงการ' : ''));
      setTimeout(() => setUploadInfo(null), 14000);
    } catch (e) {
      setUploadInfo({ status: 'err', msg: 'บันทึกไม่สำเร็จ: ' + (e.message || e) });
      setTimeout(() => setUploadInfo(null), 12000);
    }
  };

// ปุ่ม "ดันคอลัมน์เต็มลง Supabase" — ใช้ snapshot ในเครื่อง (กรณี sync ก่อนหน้าไม่ขึ้น)
  const forcePushFull = async () => {
    const snap = PCU.loadLocalProjects();
    if (!snap || !snap.length) { toast && toast('เครื่องนี้ยังไม่มีข้อมูลเต็ม — กรุณากด Upload Excel ก่อน'); return; }
    const cols = Object.keys(snap[0] || {}).length;
    if (!window.confirm('บันทึกข้อมูลโครงการ ' + snap.length + ' รายการ (' + cols + ' คอลัมน์) ลง Supabase?\n\nจะเขียนทับตาราง projects (Finance Master แยกต่างหาก ไม่ถูกแตะ)')) return;
    setBusy(true);
    try { await pushProjectsToSheet(snap, null); } finally { setBusy(false); }
  };

const scopeLabel = [
    fy.length ? fy.map(x => 'FY' + x).join('/') : 'ทุกปีงบ',
    statusFilter ? (PCU.STATUS_META[statusFilter] && PCU.STATUS_META[statusFilter].th || statusFilter) : null,
    advConds.length ? ('ฟิลเตอร์ขั้นสูง ' + advConds.length + ' เงื่อนไข') : null,
    search ? ('ค้นหา “' + search + '”') : null,
  ].filter(Boolean).join(' · ');

return (
    <div className="page present-page" style={{ maxWidth: 1680, padding: '0 0 40px' }}>
      {/* ===== blue toolbar (page header) ===== */}
      <div style={{ background: 'linear-gradient(135deg,var(--brand-600),var(--brand-500))', borderRadius: 16, padding: '14px 18px', color: '#fff', boxShadow: '0 10px 26px rgba(35,72,150,.22)', marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', flex: '0 0 auto' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="13" width="4" height="8" rx="1" fill="#fff" opacity=".8" /><rect x="10" y="8" width="4" height="13" rx="1" fill="#fff" /><rect x="17" y="4" width="4" height="17" rx="1" fill="#fff" opacity=".7" /></svg>
            </div>
            <div style={{ lineHeight: 1.15 }}>
              <div style={{ fontSize: 15, fontWeight: 800 }}>Project Control</div>
              <div style={{ fontSize: 10.5, opacity: .75 }}>ระบบติดตามโครงการ · Engineering & Finance</div>
            </div>
          </div>
          <div style={{ flex: 1, maxWidth: 460, position: 'relative', minWidth: 200 }}>
            <PcI.search size={15} style={{ position: 'absolute', left: 11, top: '50%', transform: 'translateY(-50%)', color: 'rgba(255,255,255,.6)' }} />
            <input value={searchInput} onChange={e => setSearchInput(e.target.value)} placeholder="ค้นหา โครงการ · เลขสัญญา · จังหวัด · ธนาคาร…"
              style={{ width: '100%', height: 36, background: 'rgba(255,255,255,.15)', border: '1px solid rgba(255,255,255,.22)', borderRadius: 9, color: '#fff', fontSize: 12.5, padding: '0 12px 0 34px', outline: 'none' }} />
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ textAlign: 'right', lineHeight: 1.15 }}>
              <div style={{ fontSize: 9, opacity: .7, textTransform: 'uppercase' }}>ในมุมมอง</div>
              <div className="num" style={{ fontSize: 12, fontWeight: 700 }}>{topRows.length.toLocaleString()} / {allProjects.length.toLocaleString()}</div>
            </div>
            {canEdit && <>
              <input ref={fileRef} type="file" accept=".xlsx" style={{ display: 'none' }} onChange={e => onUpload(e.target.files[0])} />
              <button disabled={busy} onClick={forcePushFull} title="บันทึกข้อมูลคอลัมน์เต็มจากเครื่องนี้ลง Supabase (ใช้เมื่องวดงานยังไม่ขึ้นให้ทีม) — ต้องเคย Upload Excel บนเครื่องนี้ก่อน"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 36, padding: '0 12px', borderRadius: 9, border: '1px solid rgba(255,255,255,.4)', background: 'rgba(255,255,255,.14)', color: '#fff', fontSize: 12, fontWeight: 600, cursor: busy ? 'wait' : 'pointer', opacity: busy ? .7 : 1 }}>
                ⬆️ ดันคอลัมน์เต็มลง Supabase</button>
              <button disabled={busy} onClick={() => fileRef.current.click()} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', borderRadius: 9, border: 'none', background: '#0e9f9a', color: '#fff', fontSize: 12.5, fontWeight: 600, cursor: busy ? 'wait' : 'pointer', opacity: busy ? .7 : 1 }}>
                <PcI.upload size={15} style={busy ? { animation: 'pcspin 1s linear infinite' } : {}} />{busy ? 'กำลังอ่าน…' : 'Upload Excel'}</button>
            </>}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 11, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 10, opacity: .65, textTransform: 'uppercase', letterSpacing: '.5px', fontWeight: 600 }}>ปีงบประมาณ</span>
          <div style={{ display: 'flex', gap: 5 }}>{fyBtn('all', 'ทั้งหมด')}{fyBtn(67, 'FY67')}{fyBtn(68, 'FY68')}{fyBtn(69, 'FY69')}{fyBtn(70, 'FY70')}</div>
          {advConds.length > 0 && <span style={{ fontSize: 11, fontWeight: 600, color: '#fff', background: 'rgba(255,255,255,.22)', borderRadius: 7, padding: '3px 10px', display: 'inline-flex', alignItems: 'center', gap: 5 }}><PcI.filter size={11} />ฟิลเตอร์ขั้นสูง {advConds.length} เงื่อนไข</span>}
          {(statusFilter || search || advConds.length > 0) && <button onClick={() => { setStatusFilter(null); setSearchInput(''); setSearch(''); setAdvConds([]); }} style={{ fontSize: 11, fontWeight: 600, color: '#fff', background: 'rgba(255,255,255,.16)', border: 'none', borderRadius: 7, padding: '3px 10px', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5 }}><PcI.close size={11} />ล้างตัวกรอง{statusFilter ? ' · ' + (PCU.STATUS_META[statusFilter]?.th || statusFilter) : ''}</button>}
        </div>
      </div>

{/* ===== sub-nav: ข้อมูลโครงการ / ข้อมูลการเงิน ===== */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 14, background: '#fff', border: '1px solid #e6ecf4', borderRadius: 10, padding: 4, width: 'fit-content', boxShadow: '0 2px 6px rgba(13,31,58,.04)' }}>
        {[
          { id: 'overview', icon: '📋', label: 'ข้อมูลโครงการ', sub: 'ทุกมิติ · KPI · กราฟ · ทะเบียน' },
          { id: 'finance', icon: '💰', label: 'ข้อมูลการเงิน', sub: 'ผู้รับโอนสิทธิ์ · หนี้ · งวด · คาดการณ์รับเงิน' },
        ].map(t => {
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)}
              style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', borderRadius: 7, border: 'none',
                background: active ? 'linear-gradient(135deg,var(--brand-600),var(--brand-500))' : 'transparent',
                color: active ? '#fff' : 'var(--ink-700)', cursor: 'pointer', fontSize: 12.5, fontWeight: 600,
                boxShadow: active ? '0 4px 12px rgba(35,72,150,.25)' : 'none', transition: 'all .15s' }}>
              <span style={{ fontSize: 14 }}>{t.icon}</span>
              <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
                <div>{t.label}</div>
                <div style={{ fontSize: 9.5, opacity: active ? .85 : .5, fontWeight: 500 }}>{t.sub}</div>
              </div>
            </button>
          );
        })}
      </div>

{/* ===== sections — เฉพาะแท็บ "ข้อมูลโครงการ" ===== */}
      {tab === 'overview' && <>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: dashOpen ? 2 : 8 }}>
          <button onClick={() => setDashOpen(v => !v)} style={{ ...pcBtn, display: 'inline-flex', alignItems: 'center', gap: 6 }}
            title={dashOpen ? 'ซ่อนแดชบอร์ด (KPI/สถานะ/กระแสเงินสด/LG) เพื่อดูตารางโครงการเต็มจอ' : 'แสดงแดชบอร์ด'}>
            {dashOpen ? '▲ ซ่อนแดชบอร์ด' : '▼ แสดงแดชบอร์ด'}
          </button>
        </div>

{dashOpen && <>
          <PcBand n="01" en="Executive KPI" th="ตัวชี้วัดผู้บริหาร" />
          <PcKpiSection summary={summary} filterStatus={statusFilter} onFilterStatus={s => setStatusFilter(p => p === s ? null : s)} />

<div className="pc-row2" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 14, marginTop: 4 }}>
            <div><PcBand n="02" en="Status Funnel" th="สถานะโครงการ" /><PcFunnel rows={topRows} onPick={(th) => setGridState(s => ({ ...s, colFilters: { ...s.colFilters, projectStatus: { kind: 'set', values: [th] } }, page: 1 }))} /></div>
            <div><PcBand n="03" en="Cashflow Forecast" th="กระแสเงินสด" /><PcCashflow rows={topRows} /></div>
          </div>

<PcBand n="04" en="LG Monitoring" th="หลักประกัน" />
          <PcLgSection rows={topRows} />
        </>}

<PcBand n="05" en="Project Register" th="ทะเบียนโครงการ — Excel-grade Data Grid" />
        <div style={{ marginBottom: 8 }}><PcGridToolbar allCols={allCols} state={gridState} setState={setGridState} rows={topRows} visibleColObjs={visibleColObjs} scopeLabel={scopeLabel} onAdvanced={() => setAdvOpen(true)} advCount={advConds.length} /></div>
        <PcGrid rows={topRows} allCols={allCols} state={gridState} setState={setGridState} onOpenRow={r => setDrawerId(r && r.id)} />
      </>}

{/* ===== Finance tab — ข้อมูลการเงิน ===== */}
      {tab === 'finance' && <>
        <PcBand n="F1" en="Project Finance Register" th="ทะเบียนการเงินรายโครงการ" />
        <ProjectFinanceGrid rows={topRows} data={data} setData={setData} canEdit={canEdit} toast={toast} />
      </>}

{drawerRow && <PcDrawer row={drawerRow} canEdit={canEdit} canDelete={canDelete} onClose={() => setDrawerId(null)}
        onSaveFinance={saveFinance} onSaveRaw={saveRawProject} onDeleteProject={deleteProject} />}
      {advOpen && <PcAdvancedFilter rows={allProjects} conds={advConds} mode={advMode} onApply={(c, m) => { setAdvConds(c); setAdvMode(m); setAdvOpen(false); }} onClose={() => setAdvOpen(false)} />}
      {diffModal && <PcUploadDiff diff={diffModal.diff} stats={diffModal.stats} onClose={() => setDiffModal(null)} />}

{uploadInfo && (() => {
        const c = uploadInfo.status === 'ok' ? '#16a34a' : uploadInfo.status === 'err' ? '#dc2626' : 'var(--brand-600)';
        const I = uploadInfo.status === 'ok' ? PcI.check : uploadInfo.status === 'err' ? PcI.alert : PcI.refresh;
        return (
          <div style={{ position: 'fixed', bottom: 22, left: '50%', transform: 'translateX(-50%)', zIndex: 800, background: '#fff', border: '1px solid #d3dcea', borderLeft: '4px solid ' + c, borderRadius: 11, boxShadow: '0 16px 44px rgba(13,31,58,.16)', padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 11, maxWidth: 620 }}>
            <span style={{ color: c, display: 'grid', placeItems: 'center' }}><I size={18} style={uploadInfo.status === 'loading' ? { animation: 'pcspin 1s linear infinite' } : {}} /></span>
            <span style={{ fontSize: 12.5, color: 'var(--ink-900)', fontWeight: 500 }}>{uploadInfo.msg}</span>
          </div>
        );
      })()}
    </div>
  );
}

// responsive
(function () {
  const el = document.createElement('style');
  el.textContent = `@keyframes pcspin{to{transform:rotate(360deg)}}
@media(max-width:1280px){.pc-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1080px){.pc-row2{grid-template-columns:1fr!important}}
@media(max-width:720px){.pc-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}`;
  document.head.appendChild(el);
})();

window.ProjectControlPage = ProjectControlPage;