|
{r.debtCategory || '—'}
|
{r.contractNo || '—'}
|
{r.borrowerName || '—'}
|
{isActive ? 'Active' : r.status || 'Close'}
|
{fmtDate(r.receiveDate || r.startDate) || '—'}
|
{fmtDate(r.maturityDate || r.endDate) || '—'}
|
{fmtNum(principal, 0)} {isUSD && USD}
|
{rate > 0 ? (rate * 100).toFixed(2) + '%' : '—'}
|
0 ? 'var(--bad)' : 'var(--ink-300)' }}>
{fmtNum(balance, 0)}
|
{r.bankName || '—'}
|
{r.projectCode ? {r.projectCode} : null}
{r.projectName || (r.projectCode ? '' : '—')}
|
{r.note || ''}
|
);
}
// ── Main page ─────────────────────────────────────────────────────────────────
function DebtPage({ data }) {
const rawRows = (data?.debtMaster || []);
const [tab, setTab] = React.useState('all'); // all | Active | Close
const [categoryFilter, setCategoryFilter] = React.useState('all');
const [query, setQuery] = React.useState('');
const [view, setView] = React.useState(null); // row to show in popup
const today = new Date().toISOString().slice(0, 10);
// ── KPIs ──────────────────────────────────────────────────────────────────
const activeRows = rawRows.filter(r => r.status === 'Active');
const closedRows = rawRows.filter(r => r.status !== 'Active');
// Only sum THB rows for total (Zigo USD is separate)
const thbActive = activeRows.filter(r => r.currency !== 'USD');
const usdActive = activeRows.filter(r => r.currency === 'USD');
const totalBalanceThb = thbActive.reduce((s, r) => s + (Number(r.balance || r.principalAmount) || 0), 0);
const totalBalanceUsd = usdActive.reduce((s, r) => s + (Number(r.balance || r.principalAmount) || 0), 0);
const totalPrincipal = thbActive.reduce((s, r) => s + (Number(r.principalAmount) || 0), 0);
// Category counts
const categoriesPresent = [...new Set(rawRows.map(r => r.debtCategory).filter(Boolean))];
// ── Filtered rows ─────────────────────────────────────────────────────────
const filtered = React.useMemo(() => {
let rows = rawRows;
if (tab !== 'all') rows = rows.filter(r => r.status === tab);
if (categoryFilter !== 'all') rows = rows.filter(r => r.debtCategory === categoryFilter);
if (query.trim()) {
const q = query.toLowerCase();
rows = rows.filter(r =>
(r.contractNo || '').toLowerCase().includes(q) ||
(r.borrowerName || '').toLowerCase().includes(q) ||
(r.bankName || '').toLowerCase().includes(q) ||
(r.projectName || '').toLowerCase().includes(q) ||
(r.projectCode || '').toLowerCase().includes(q) ||
(r.note || '').toLowerCase().includes(q)
);
}
return rows;
}, [rawRows, tab, categoryFilter, query]);
const { sorted, sort, toggle } = useSortable(filtered, 'debtCategory', 'asc');
// ── Footer totals ─────────────────────────────────────────────────────────
const filtBalance = filtered.reduce((s,r) => s + (Number(r.balance || r.principalAmount)||0), 0);
const filtPrincipal = filtered.reduce((s,r) => s + (Number(r.principalAmount)||0), 0);
const cntAll = rawRows.length;
const cntActive = activeRows.length;
const cntClosed = closedRows.length;
return (
{/* ── Page header ──────────────────────────────────────────────────── */}
ภาระหนี้ทั้งหมด
ณ {fmtDate(today)} · {rawRows.length} สัญญา · Active {cntActive} · ปิดแล้ว {cntClosed}
{/* ── KPI Row ──────────────────────────────────────────────────────── */}
{/* ── Summary by category ──────────────────────────────────────────── */}
{categoriesPresent.map(cat => {
const m = metaFor(cat);
const catRows = rawRows.filter(r => r.debtCategory === cat);
const activeCnt = catRows.filter(r => r.status === 'Active').length;
const activeBal = catRows.filter(r => r.status === 'Active')
.reduce((s, r) => s + (Number(r.balance || r.principalAmount) || 0), 0);
const isUSD = catRows.some(r => r.currency === 'USD');
return (
{m.label}
สัญญา
{catRows.length}
Active {activeCnt}
คงเหลือ
0 ? 'var(--bad)' : 'var(--ink-300)' }}>
{fmtNum(activeBal, 0)} {isUSD && USD}
);
})}
{/* ── Filter bar ───────────────────────────────────────────────────── */}
{categoriesPresent.map(cat => {
const m = metaFor(cat);
const isSelected = categoryFilter === cat;
return (
);
})}
setQuery(e.target.value)}
placeholder="ค้นหา สัญญา / ผู้กู้ / ธนาคาร / โครงการ…"
/>
{/* ── No data ──────────────────────────────────────────────────────── */}
{rawRows.length === 0 && (
📭
ยังไม่มีข้อมูลภาระหนี้
ข้อมูลจะปรากฏเมื่อตาราง debtMaster ใน Google Sheet มีข้อมูล
)}
{/* ── Table ────────────────────────────────────────────────────────── */}
{rawRows.length > 0 && (
| ครบกำหนด |
ธนาคาร |
โครงการ |
หมายเหตุ |
{sorted.length === 0 && (
|
ไม่พบข้อมูลที่ตรงกับเงื่อนไข
|
)}
{sorted.map(r => setView(r)} />)}
{sorted.length > 0 && (
|
รวม ({filtered.length} สัญญา)
|
{fmtNum(filtPrincipal, 0)} |
|
{fmtNum(filtBalance, 0)} |
|
)}
)}
{/* ── Detail Popup (read-only view) ────────────────────────────────── */}
{view && (() => {
const m = metaFor(view.debtCategory);
const isActive= view.status === 'Active';
const isUSD = view.currency === 'USD';
const bal = Number(view.balance || view.principalAmount) || 0;
const princ = Number(view.principalAmount) || 0;
const rate = Number(view.interestRate) || 0;
const paid = princ > 0 ? Math.max(0, princ - bal) : 0;
const paidPct = princ > 0 ? Math.min(100, (paid / princ) * 100) : 0;
const fld = (label, value, opts = {}) => (
);
const Hdr = ({ label, icon }) => (
{label}
);
return (
setView(null)}>
e.stopPropagation()}>
ข้อมูลหนี้ · {view.contractNo || view.borrowerName || '—'}
{/* Hero header — category, balance, repayment progress */}
{view.debtCategory || '—'}
{isActive ? 'Active' : view.status || 'Close'}
ยอดคงเหลือ
0 ? 'var(--bad)' : 'var(--ink-400)', fontVariantNumeric: 'tabular-nums' }}>
{fmtNum(bal, 0)} {isUSD ? 'USD' : '฿'}
{princ > 0 && (
ชำระแล้ว {fmtNum(paid, 0)} / วงเงิน {fmtNum(princ, 0)}
{paidPct.toFixed(1)}%
)}
{/* Field grid */}
{fld('เลขที่สัญญา', view.contractNo, { mono: true, span: 2 })}
{fld('สกุลเงิน', view.currency || 'THB')}
{fld('ผู้กู้ / ผู้รับสินเชื่อ', view.borrowerName, { bold: true, span: 2 })}
{fld('ธนาคาร / เจ้าหนี้', view.bankName)}
{fld('วันที่รับเงิน', fmtDate(view.receiveDate || view.startDate))}
{fld('วันเริ่มสัญญา', fmtDate(view.startDate))}
{fld('วันครบกำหนด', fmtDate(view.maturityDate || view.endDate))}
{fld('วงเงิน (Principal)', fmtNum(princ, 2), { right: true, bold: true })}
{fld('อัตราดอกเบี้ย / ปี', rate > 0 ? (rate * 100).toFixed(4) + ' %' : '—', { right: true })}
{fld('ยอดคงเหลือ (Balance)', fmtNum(bal, 2), { right: true, highlight: bal > 0 })}
{fld('รหัสโครงการ', view.projectCode, { mono: true })}
{fld('ชื่อโครงการ', view.projectName, { span: 2 })}
{view.note && <>
{fld('Note', view.note, { full: true })}
}
);
})()}