import { useMemo } from 'react'; import { formatIdr } from '@/lib/currencyFormat'; import { useResizableColumns, ColumnResizeGrip } from '@/lib/useResizableColumns'; import { DemoDataBadge } from '@/Components/NetSuite/DemoDataBadge'; const SECTION_CARD = 'flex flex-col overflow-visible rounded-xl border border-border bg-card shadow-sm'; // Resizable-column ids (left→right) + default widths for the table-fixed layout. // // The six aging buckets (NotYet / 30 / 60 / 90 / 120 / >120) used to be six SEPARATE columns. // A row's balance only ever lands in ONE of them — which one is decided by `overdueDays`, the // column right next to it — so five of the six were "Rp 0" on every row by construction. // Measured on Credit Ceiling #21: the table came to 1860px inside a 1306px card, overflowing by // 554px, and what got pushed off the right edge was Amount / Paid / Balance — the figures the // credit decision is actually made on. Collapsed to one `aging` column carrying the bucket label // plus its amount: 14 columns → 9, nothing lost (no per-bucket total is displayed anywhere). const COLS = ['no', 'company', 'invoiceNo', 'dueDate', 'overdue', 'aging', 'amount', 'paid', 'balance']; const COL_W = { no: 70, company: 220, invoiceNo: 130, dueDate: 120, overdue: 100, // aging was 200 to fit "label + amount"; the label alone ("Belum jatuh tempo" is the // longest) needs ~130. Measured on Credit Ceiling #17, that 70px cut the scroll container's // overflow from 44px to 6px — the table renders at 1204px in a 1204px box, and the 6px // residue is border-collapse rounding across nine columns, not clipped content (Balance // still prints in full). Before, the 44px hid the right edge of Amount/Paid/Balance. aging: 130, amount: 140, paid: 130, balance: 140, }; const COL_W_FALLBACK = 150; // The table is sized with minWidth, NOT width. An inline `width` beats the `w-full` class, so // the table stayed pinned at the sum of COL_W (1250px) and left a 164px gutter inside its // 1414px card on Review CS — reported 2026-08-20. With minWidth it fills the card when there // is room and the wrapper's overflow-x-auto still scrolls it when there is not, which is what // every other resizable table in this app does (LwrDenseTable, CreditCeilingTable, the // Projects approval boards, …). /** * Which bucket a row's balance sits in, and how much. Mirrors the six columns this replaced: * the server still sends all six fields, and exactly one of them is non-zero — so the bucket is * READ from the data rather than re-derived from overdueDays, and the two can never disagree. */ function agingBucket(r) { const buckets = [ { label: 'Belum jatuh tempo', value: r.notYet, tone: 'text-muted-foreground' }, { label: '1–30', value: r.balance30, tone: 'text-warning-text' }, { label: '31–60', value: r.balance60, tone: 'text-stat-orange-text' }, { label: '61–90', value: r.balance90, tone: 'text-danger-text' }, { label: '91–120', value: r.balance120, tone: 'text-danger-text' }, { label: '> 120', value: r.balanceThan120, tone: 'text-danger-text' }, ]; const hit = buckets.find((b) => Number(b.value || 0) !== 0); return hit ?? { label: '—', value: 0, tone: 'text-muted-foreground' }; } function band(overdueDays) { if (overdueDays <= 0) return ''; if (overdueDays <= 30) return 'bg-warning/15'; if (overdueDays <= 60) return 'bg-stat-orange-text/15'; return 'bg-danger/15'; } /** * AR - Pending (bucket) — Approval SM / Process to Order. Bahasa desain baru * (kartu shadcn) untuk data kontrak customer-ar.pending.byCompany. * @param {{ data: object|null, loading: boolean }} props */ export function CustomerArPending({ data, loading }) { const rows = data?.rows ?? []; const summary = data?.summary ?? { creditLimit: 0, totalBalance: 0, overLimit: false }; // Resizable columns — drag a header's right edge to resize. const { widthOf, startResize, resizingId } = useResizableColumns(COL_W, COL_W_FALLBACK); const tableWidth = useMemo(() => COLS.reduce((s, id) => s + widthOf(id), 0), [widthOf]); return (

Customer Outstanding

AR - Pending

Credit Limit {formatIdr(summary.creditLimit)}
{/* issue #187 — never let a credit decision rest on fixture rows unlabelled. */} {summary.overLimit && (
AR Company telah melebihi Credit Limit atau sudah Jatuh Tempo!
)}
{COLS.map((id) => )} {loading && ( )} {!loading && rows.length === 0 && ( )} {!loading && rows.map((r) => ( {/* Bucket LABEL only. The bucket's amount used to print here beside it, and it is the Balance column verbatim — a row's balance is what lands in a bucket, so the two can never differ. Measured on Credit Ceiling #17: all four rows had aging === balance, while row 4 (Amount 212.300.000, Paid 40.000.000, Balance 172.300.000) showed the aging figure follows Balance and not Amount. Printing it twice wrapped the cell to two lines; row height is set by the cell padding and did NOT change (44px either way) — what the removal bought is the column width below. */} ))}
No startResize(e, 'no')} active={resizingId === 'no'} /> Company startResize(e, 'company')} active={resizingId === 'company'} /> Inv.No startResize(e, 'invoiceNo')} active={resizingId === 'invoiceNo'} /> Due Date startResize(e, 'dueDate')} active={resizingId === 'dueDate'} /> OverDue startResize(e, 'overdue')} active={resizingId === 'overdue'} /> Aging startResize(e, 'aging')} active={resizingId === 'aging'} /> Amount startResize(e, 'amount')} active={resizingId === 'amount'} /> Paid startResize(e, 'paid')} active={resizingId === 'paid'} /> Balance startResize(e, 'balance')} active={resizingId === 'balance'} />
Memuat AR…
Customer Have No A/R
{r.no} {r.company} {r.invoiceNo} {r.dueDate ?? '—'} {r.overdueDays} {(() => { const b = agingBucket(r); return {b.label}; })()} {formatIdr(r.amount)} {formatIdr(r.paid)} {formatIdr(r.balance)}
Total AR {formatIdr(summary.totalBalance)}
); }