{entries.map(([key, val]) => {
const isNil = val === null || val === undefined || val === '' || val === '—';
return (
{key}
{isNil ? '—' : val}
);
})}
);
}
// Two-up label-over-value grid for short values (halves the card height vs rows).
// Keys listed in `wide` span the full width (long free text like Remark).
export function DocGrid({ fields, wide = [] }) {
const entries = Object.entries(fields).filter(([, v]) => v !== undefined);
if (!entries.length) return
Tidak ada data.
;
return (
{entries.map(([key, val]) => {
const isNil = val === null || val === undefined || val === '' || val === '—';
return (
{key}
{isNil ? '—' : val}
);
})}
);
}
export const SectionIcon = ({ children }) => {children};
// Yes/No as a small pill — a visual anchor between the text rows.
export const YesNo = ({ value }) => (
{value ? 'Yes' : 'No'}
);
/**
* Shared detail + action scaffold for the approval stages — restyled 2026-07-17 to the
* Quotation-detail grammar: hero + stats strip (key numbers + history clock popover) +
* three DocList section cards, then the NetSuite AR panels and the sticky decision dock.
* Per-stage flags mirror the legacy field set:
* - showPaymentRating: read-only Payment Rating (SM/CEO/AST). Finance edits it in the panel → false.
* - showApproved: read-only Approved CC/Term/TOP/AddTOP/Special Condition (AST only). CEO edits
* them in the panel; Finance/SM don't show them at all.
* - showPaymentAfterDueDate: the second NetSuite panel (Finance + SM).
* `actionLabel` names the primary button; `initialData` + `renderFields(form)` add the editable inputs.
*/
export function StageDetailPage({
title, backRoute, creditCeiling: cc, canAct, actionRoutes, actionLabel = 'Approve',
initialData = {}, renderFields = null,
showPaymentAfterDueDate = false, showPaymentRating = true, showApproved = false, creditGuard = false,
showArTabs = true, showMetricTable = true,
companyRecordsReadOnly = false,
companyRecordsPreset = 'ccStage',
children = null,
}) {
// Customer Outstanding (AR) — legacy "Detail Invoice" shown on every CC approval stage.
const customerAr = useCustomerAr(cc.companyId ?? null, 'customer-ar.pending.byCompany');
// "Payment after Due" — legacy Finance + SM + CEO. Hook always runs (Rules of Hooks);
// companyId=null when the stage doesn't want it → no fetch.
const paymentDueDate = useCustomerAr(showPaymentAfterDueDate ? (cc.companyId ?? null) : null, 'customer-ar.payment-due-date.byCompany');
// Legacy checkButton (SM/CEO): warn before Approve when AR breaches the credit limit,
// is overdue, or is still outstanding. Null (no warning) until AR data loads or when unset.
const arSummary = customerAr.data?.summary;
const arRows = customerAr.data?.rows ?? [];
const approveWarning = creditGuard && arSummary
&& (arSummary.overLimit || arSummary.totalBalance > 0 || arRows.some((r) => r.overdueDays > 0))
? 'AR Company telah melebihi Credit Limit atau sudah Jatuh Tempo!'
: null;
// History → the clock-popover timeline (Quotation grammar). Request rows carry the
// proposed figures in the comment so no legacy data is lost.
const historyEntries = (cc.history ?? []).map((h) => ({
Status: h.status,
Tanggal: h.tanggal,
User: h.nama,
Comment: [stripHtml(h.remark), h.statusId === 1 ? `Proposed CC ${fmtId(h.proposedCC)} · Proposed TOP ${fmtId(h.proposedTOP)}` : '']
.filter(Boolean).join(' — '),
}));
const tabs = [
{ id: 'ar', label: 'Customer Outstanding' },
];
if (showPaymentAfterDueDate) {
tabs.push({ id: 'payment', label: 'Payment Behaviour' });
}
const [activeTab, setActiveTab] = useState('ar');
return (
{/* Hero */}
{title} #{cc.id}
{cc.status}
{historyEntries.length > 0 && (
)}
Back to List
{/* Header banner — grouped by WHAT the values are, not by where they fit.
Until 2026-08-24 all four of AST Code, NetSuite ID, phone and fax sat in
one "metadata strip" under the address: a 1222px-wide row whose content
stopped around a third of the way across, leaving most of the banner's
right side empty while the left stacked four rows deep.
Now: LEFT is the company and how to reach it (phone and fax join the
address — they are all contact data), RIGHT is the pair of external
system keys. */}
{/* Right: the two external system keys. A 2-column grid rather than
inline label:value pairs so both monospace values start on the
same x — the point of a right-hand key block is that the codes
line up and can be compared at a glance. No justify-items-end:
that aligns their RIGHT edges, which for unequal-length codes
leaves the first characters ragged (measured 1496 vs 1503).
shrink-0 keeps a long address from squeezing them. */}
AST Code
{cc.astCompanyCode || '—'}
NetSuite ID
{cc.nsCustomerId || '—'}
{/* Main Content Layout — REQUEST & DETAILS beside a two-up COMMERCIAL PROFILE.
Every credit-ceiling detail route merges companyProfile() onto its payload,
so this is the only layout. The old lean-payload fallback (one narrow column
that left the right two-thirds of the card blank, and Yes/No pills reading
`undefined` as "No") is gone with the lean payloads it was written for. */}
)}
{cc.companyId > 0 && (
)}
{/* ⚠️ `children` renders LAST on purpose. Its only caller passes a , and
DecisionBar puts an in-flow 112px spacer next to its `fixed` pill to reserve the
clearance the pill would otherwise hover over. Rendered above Company Records —
where this used to sit — that spacer became a 112px hole in the middle of the page
(measured 152px of dead space between the hero and Company Records) while the
clearance it was meant to provide sat in the wrong place entirely. */}
{children}
#{cc.id} · {cc.company} · {cc.status}} />