/** * Statement HTML renderer — customer-statement (wave-16, spec 183). * * Produces a complete HTML document for the customer statement PDF. * RTL/Hebrew-aware: emits `` for locale='he'. * Colors use CSS custom properties from packages/ui tokens. * All untrusted strings are escaped via esc(). */ import type { CustomerStatement } from '@zync/types' const UI_TOKENS_CSS = `:root { --bg: oklch(100% 0 0); --surface: oklch(95% 0.016 195); --ink: oklch(12% 0.04 240); --ink-soft: oklch(22% 0.045 240); --ink-faint: oklch(43% 0.035 235); --line: oklch(90% 0.03 195); --danger: oklch(44% 0.19 25); }` function esc(s: unknown): string { return String(s ?? '') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, ''') } function fmtNumber(n: number): string { return n.toLocaleString('he-IL', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } function fmtDate(d: string): string { // Accepts ISO date string YYYY-MM-DD or full ISO timestamp return d.slice(0, 10) } export function renderStatementHtml( statement: CustomerStatement, locale: 'he' | 'en', ): string { const isRtl = locale === 'he' const dir = isRtl ? 'rtl' : 'ltr' const lang = isRtl ? 'he' : 'en' const t = { title: isRtl ? 'כרטסת לקוח' : 'Statement of Account', customer: isRtl ? 'לקוח' : 'Customer', period: isRtl ? 'תקופה' : 'Period', to: isRtl ? 'עד' : 'to', openingBalance: isRtl ? 'יתרת פתיחה' : 'Opening Balance', closingBalance: isRtl ? 'יתרת סגירה' : 'Closing Balance', date: isRtl ? 'תאריך' : 'Date', document: isRtl ? 'מסמך' : 'Document', reference: isRtl ? 'אסמכתא' : 'Reference', debit: isRtl ? 'חובה' : 'Debit', credit: isRtl ? 'זכות' : 'Credit', balance: isRtl ? 'יתרה' : 'Balance', agingTitle: isRtl ? 'פירוט גיל' : 'Aging Summary', d0_30: isRtl ? '0-30 ימים' : '0-30 days', d31_60: isRtl ? '31-60 ימים' : '31-60 days', d61_90: isRtl ? '61-90 ימים' : '61-90 days', d90plus: isRtl ? '90+ ימים' : '90+ days', noData: isRtl ? 'אין עסקאות בתקופה זו' : 'No transactions in this period', } const groupsHtml = statement.groups.map((group) => { const rowsHtml = group.rows.length === 0 ? `

${t.noData}

` : group.rows.map((row) => `

${esc(fmtDate(row.date))}

${esc(row.documentType)}${row.documentNumber ? ' #' + esc(row.documentNumber) : ''}

${row.reference ? esc(row.reference) : ''}

${row.debit > 0 ? fmtNumber(row.debit) : ''}

${row.credit > 0 ? fmtNumber(row.credit) : ''}

${fmtNumber(row.runningBalance)}

`).join('') return `

${esc(group.currency)}

${t.date}

${t.document}

${t.reference}

${t.debit}

${t.credit}

${t.balance}

${t.openingBalance}

${fmtNumber(group.openingBalance)}

${rowsHtml}

${t.closingBalance}

${fmtNumber(group.closingBalance)}

` }).join('') const agingSummary = statement.aging const agingHtml = `

${t.agingTitle}

${t.d0_30}

${t.d31_60}

${t.d61_90}

${t.d90plus}

${fmtNumber(agingSummary.d0_30)}

${fmtNumber(agingSummary.d31_60)}

${fmtNumber(agingSummary.d61_90)}

${fmtNumber(agingSummary.d90plus)}

` return ` ${t.title} — ${esc(statement.customerName)}

${t.title}

${t.customer}: ${esc(statement.customerName)} | ${t.period}: ${esc(statement.from)} ${t.to} ${esc(statement.to)}

${groupsHtml} ${agingHtml} ` }