immortal-js 1.0.0

package/examples/invoice-service/src/pdf.ts

@@ -0,0 +1,358 @@
+/**
+ * @file src/pdf.ts
+ * @description Invoice Service Pro v3 — Ultra Premium PDF HTML Generator
+ *
+ * Strategy: Generate a complete, self-contained HTML document styled for
+ * professional print output. Browser Ctrl+P / window.print() → PDF.
+ * No binary dependencies. In production, pipe into Puppeteer for true PDF bytes.
+ */
+
+import type { Invoice, InvoiceTotals, InvoiceCurrency } from "./types.js";
+import { CURRENCY_META } from "./types.js";
+
+// ─── Money ────────────────────────────────────────────────────────────────────
+
+export function formatMoney(cents: number, currency: InvoiceCurrency): string {
+  const meta = CURRENCY_META[currency];
+  const formatted = (cents / 100).toLocaleString("en-US", {
+    minimumFractionDigits: currency === "JPY" ? 0 : 2,
+    maximumFractionDigits: currency === "JPY" ? 0 : 2,
+  });
+  return `${meta.symbol}${formatted}`;
+}
+
+// ─── Totals ───────────────────────────────────────────────────────────────────
+
+export function calculateTotals(invoice: Invoice): InvoiceTotals {
+  const cur = invoice.currency;
+  const globalDiscount = invoice.discount ?? 0;
+  let subtotalCents = 0;
+  let discountCents = 0;
+  let taxCents = 0;
+
+  for (const item of invoice.lineItems) {
+    const lineSubtotal = Math.round(item.quantity * item.unitPrice);
+    const lineDiscount = Math.round(lineSubtotal * (item.discount ?? 0));
+    const lineAfterDiscount = lineSubtotal - lineDiscount;
+    const lineTax = Math.round(lineAfterDiscount * item.taxRate);
+    subtotalCents += lineSubtotal;
+    discountCents += lineDiscount;
+    taxCents += lineTax;
+  }
+
+  const afterLineDiscounts = subtotalCents - discountCents;
+  const globalDiscountAmt  = Math.round(afterLineDiscounts * globalDiscount);
+  const totalDiscountCents = discountCents + globalDiscountAmt;
+  const afterAllDiscounts  = subtotalCents - totalDiscountCents;
+  const totalCents         = afterAllDiscounts + taxCents;
+  const effectiveTax       = afterAllDiscounts > 0 ? (taxCents / afterAllDiscounts) * 100 : 0;
+
+  return {
+    subtotalCents,
+    discountCents: totalDiscountCents,
+    taxCents,
+    totalCents,
+    subtotal: formatMoney(subtotalCents, cur),
+    discount: formatMoney(totalDiscountCents, cur),
+    tax:      formatMoney(taxCents, cur),
+    total:    formatMoney(totalCents, cur),
+    effectiveTaxRate: effectiveTax.toFixed(1) + "%",
+  };
+}
+
+// ─── Status Badge ─────────────────────────────────────────────────────────────
+
+function statusStyle(s: string): { bg: string; color: string; border: string; label: string } {
+  const map: Record<string, { bg: string; color: string; border: string; label: string }> = {
+    draft:     { bg: "#1e293b", color: "#94a3b8", border: "#334155", label: "DRAFT"     },
+    sent:      { bg: "#1e3a8a", color: "#93c5fd", border: "#1d4ed8", label: "SENT"      },
+    paid:      { bg: "#064e3b", color: "#6ee7b7", border: "#059669", label: "PAID"      },
+    overdue:   { bg: "#7f1d1d", color: "#fca5a5", border: "#dc2626", label: "OVERDUE"   },
+    cancelled: { bg: "#1c1917", color: "#78716c", border: "#44403c", label: "CANCELLED" },
+    refunded:  { bg: "#4a1d96", color: "#c4b5fd", border: "#7c3aed", label: "REFUNDED"  },
+  };
+  return map[s] ?? map["draft"]!;
+}
+
+// ─── HTML Escape ──────────────────────────────────────────────────────────────
+
+function esc(v: string | undefined | null): string {
+  if (!v) return "";
+  return String(v)
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// ─── Main Generator ───────────────────────────────────────────────────────────
+
+export function generatePdfHtml(invoice: Invoice): string {
+  const totals = calculateTotals(invoice);
+  const cur    = invoice.currency;
+  const ss     = statusStyle(invoice.status);
+  const meta   = CURRENCY_META[cur];
+
+  const lineItemRows = invoice.lineItems.map((item, idx) => {
+    const lineSubtotal = Math.round(item.quantity * item.unitPrice);
+    const lineDiscount = Math.round(lineSubtotal * (item.discount ?? 0));
+    const lineAfterDisc = lineSubtotal - lineDiscount;
+    const lineTax = Math.round(lineAfterDisc * item.taxRate);
+    const lineTotal = lineAfterDisc + lineTax;
+    const rowBg = idx % 2 === 0 ? "#0f172a" : "#111827";
+    return `
+      <tr style="background:${rowBg};">
+        <td style="padding:12px 16px;border-bottom:1px solid #1e293b;">${esc(item.description)}${item.unit ? `<span style="font-size:11px;color:#475569;margin-left:6px;">/ ${esc(item.unit)}</span>` : ""}</td>
+        <td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:center;font-family:monospace;font-size:13px;">${item.quantity % 1 === 0 ? item.quantity : item.quantity.toFixed(2)}</td>
+        <td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:right;font-family:monospace;">${formatMoney(item.unitPrice, cur)}</td>
+        <td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:center;color:#94a3b8;">${(item.taxRate * 100).toFixed(0)}%</td>
+        ${item.discount ? `<td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:center;color:#f59e0b;">-${(item.discount * 100).toFixed(0)}%</td>` : `<td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:center;color:#475569;">—</td>`}
+        <td style="padding:12px 16px;border-bottom:1px solid #1e293b;text-align:right;font-family:monospace;font-weight:700;color:#e2e8f0;">${formatMoney(lineTotal, cur)}</td>
+      </tr>`;
+  }).join("");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Invoice ${esc(invoice.number)} — ${esc(invoice.to.name)}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"/>
+  <style>
+    *{box-sizing:border-box;margin:0;padding:0;}
+    body{font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#e2e8f0;background:#090e17;padding:0;margin:0;}
+    .page{max-width:900px;margin:40px auto;background:#0f172a;border-radius:20px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.6),0 0 0 1px #1e293b;}
+
+    /* Header */
+    .header{
+      background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);
+      padding:48px 56px;display:flex;justify-content:space-between;align-items:flex-start;
+      border-bottom:1px solid #1e3a5f;position:relative;overflow:hidden;
+    }
+    .header::before{
+      content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;
+      background:radial-gradient(circle,rgba(56,189,248,.08) 0%,transparent 70%);
+      border-radius:50%;
+    }
+    .brand-name{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;}
+    .brand-name span{color:#38bdf8;}
+    .brand-tagline{font-size:12px;color:#475569;margin-top:5px;letter-spacing:0.5px;}
+    .invoice-meta{text-align:right;}
+    .invoice-number{font-size:26px;font-weight:800;font-family:monospace;color:#38bdf8;letter-spacing:1px;}
+    .invoice-dates{margin-top:8px;font-size:12px;color:#64748b;line-height:1.8;}
+    .invoice-dates strong{color:#94a3b8;}
+
+    /* Status bar */
+    .status-bar{
+      background:#111827;padding:14px 56px;display:flex;align-items:center;
+      justify-content:space-between;border-bottom:1px solid #1e293b;
+    }
+    .status-badge{
+      display:inline-flex;align-items:center;gap:6px;
+      background:${ss.bg};color:${ss.color};border:1px solid ${ss.border};
+      padding:5px 14px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1.2px;
+    }
+    .status-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:${ss.color};}
+    .currency-info{font-size:12px;color:#64748b;}
+    .currency-info strong{color:#94a3b8;}
+    .invoice-ref{font-size:12px;color:#475569;}
+    .invoice-ref span{color:#64748b;}
+
+    /* Parties */
+    .parties{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #1e293b;}
+    .party{padding:36px 56px;}
+    .party:first-child{border-right:1px solid #1e293b;}
+    .party-label{font-size:10px;font-weight:800;color:#38bdf8;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;}
+    .party-name{font-size:18px;font-weight:700;color:#f1f5f9;margin-bottom:6px;}
+    .party-detail{font-size:13px;color:#64748b;line-height:1.8;}
+    .party-email{color:#38bdf8;font-size:13px;margin-top:4px;}
+    .party-tax{font-size:11px;color:#475569;margin-top:6px;font-family:monospace;}
+
+    /* Line items table */
+    .table-section{padding:0 40px 32px;}
+    .table-title{font-size:11px;font-weight:700;color:#475569;letter-spacing:1.5px;text-transform:uppercase;padding:24px 16px 12px;}
+    table{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden;border:1px solid #1e293b;}
+    thead tr{background:#1e293b;}
+    thead th{padding:11px 16px;text-align:left;font-size:10px;font-weight:700;color:#64748b;letter-spacing:0.8px;text-transform:uppercase;}
+    thead th:not(:first-child){text-align:center;}
+    thead th:last-child,thead th:nth-child(3){text-align:right;}
+
+    /* Totals */
+    .totals-wrap{margin:0 40px 40px;display:flex;justify-content:flex-end;}
+    .totals{background:#111827;border:1px solid #1e293b;border-radius:12px;padding:24px 32px;min-width:320px;}
+    .totals-row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid #1e293b;}
+    .totals-row:last-child{border-bottom:none;}
+    .totals-label{color:#64748b;}
+    .totals-value{font-family:monospace;font-weight:600;color:#94a3b8;}
+    .totals-row.grand{padding-top:14px;margin-top:4px;font-size:20px;font-weight:800;}
+    .totals-row.grand .totals-label{color:#e2e8f0;}
+    .totals-row.grand .totals-value{color:#38bdf8;}
+
+    /* Notes */
+    .notes-section{margin:0 40px 40px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
+    .notes-block{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:20px;}
+    .notes-label{font-size:10px;font-weight:700;color:#38bdf8;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
+    .notes-text{font-size:13px;color:#64748b;line-height:1.7;}
+
+    /* Footer */
+    .footer{background:#0a0f1a;border-top:1px solid #1e293b;padding:20px 56px;display:flex;justify-content:space-between;align-items:center;}
+    .footer-left{font-size:12px;color:#334155;}
+    .footer-right{font-size:11px;color:#475569;text-align:right;}
+
+    /* Print button */
+    .print-btn{
+      position:fixed;bottom:32px;right:32px;z-index:999;
+      background:linear-gradient(135deg,#0284c7,#0ea5e9);color:#fff;border:none;
+      padding:14px 28px;border-radius:50px;font-size:13px;font-weight:700;
+      cursor:pointer;box-shadow:0 8px 32px rgba(14,165,233,.4);
+      display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;
+      transition:all .2s;letter-spacing:0.3px;
+    }
+    .print-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(14,165,233,.5);}
+    .print-btn svg{width:18px;height:18px;}
+
+    @media print{
+      body{background:#fff;color:#0f172a;}
+      .page{box-shadow:none;border-radius:0;margin:0;max-width:100%;background:#fff;}
+      .header{background:#f8fafc !important;padding:32px 40px;border-bottom:2px solid #e2e8f0;}
+      .brand-name span{color:#0284c7;}
+      .status-bar{background:#f1f5f9;padding:10px 40px;}
+      .parties .party{padding:24px 40px;}
+      .party-detail,.invoice-dates,.currency-info,.invoice-ref,.totals-label,.notes-text{color:#475569;}
+      .brand-tagline,.party-tax,.footer-left,.footer-right{color:#94a3b8;}
+      .party-name{color:#0f172a;}
+      .invoice-number{color:#0284c7;}
+      .party-email{color:#0284c7;}
+      .party-label,.notes-label{color:#0284c7;}
+      table{border-color:#e2e8f0;}
+      thead tr{background:#f1f5f9;}
+      thead th{color:#64748b;}
+      tbody tr{background:#fff !important;}
+      tbody td{border-bottom-color:#f1f5f9;color:#0f172a;}
+      .totals{background:#f8fafc;border-color:#e2e8f0;}
+      .totals-row{border-bottom-color:#e2e8f0;}
+      .totals-value{color:#334155;}
+      .totals-row.grand .totals-value{color:#0284c7;}
+      .totals-row.grand .totals-label{color:#0f172a;}
+      .notes-block{background:#f8fafc;border-color:#e2e8f0;}
+      .notes-text{color:#475569;}
+      .footer{background:#f8fafc;border-top-color:#e2e8f0;}
+      .status-badge{border-color:#94a3b8 !important;color:#0f172a !important;background:#f1f5f9 !important;}
+      .print-btn{display:none !important;}
+      .status-bar{background:#f1f5f9 !important;}
+    }
+  </style>
+</head>
+<body>
+
+<button class="print-btn no-print" onclick="window.print()">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
+  Print / Save PDF
+</button>
+
+<div class="page">
+
+  <!-- Header -->
+  <div class="header">
+    <div>
+      <div class="brand-name">immortal<span>.js</span></div>
+      <div class="brand-tagline">Invoice Service Pro v3 &mdash; Resilient Billing Platform</div>
+    </div>
+    <div class="invoice-meta">
+      <div class="invoice-number">${esc(invoice.number)}</div>
+      <div class="invoice-dates">
+        <strong>Issued:</strong> ${esc(invoice.issuedAt)}<br/>
+        <strong>Due:</strong> ${esc(invoice.dueAt)}
+        ${invoice.paidAt ? `<br/><strong style="color:#10b981;">Paid:</strong> ${esc(invoice.paidAt)}` : ""}
+      </div>
+    </div>
+  </div>
+
+  <!-- Status Bar -->
+  <div class="status-bar">
+    <div style="display:flex;align-items:center;gap:20px;">
+      <span class="status-badge">${esc(ss.label)}</span>
+      <span class="currency-info">Currency: <strong>${esc(invoice.currency)}</strong> &mdash; ${esc(meta.name)}</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:24px;">
+      ${invoice.reference ? `<span class="invoice-ref">Ref: <span>${esc(invoice.reference)}</span></span>` : ""}
+      <code style="font-size:11px;color:#334155;background:#1e293b;padding:3px 10px;border-radius:6px;">${esc(invoice.id)}</code>
+    </div>
+  </div>
+
+  <!-- Parties -->
+  <div class="parties">
+    <div class="party">
+      <div class="party-label">Invoice From</div>
+      <div class="party-name">${esc(invoice.from.name)}</div>
+      <div class="party-detail">${esc(invoice.from.address)}<br/>${esc(invoice.from.city)}, ${esc(invoice.from.country)}</div>
+      ${invoice.from.phone ? `<div class="party-detail">${esc(invoice.from.phone)}</div>` : ""}
+      <div class="party-email">${esc(invoice.from.email)}</div>
+      ${invoice.from.taxId ? `<div class="party-tax">Tax ID: ${esc(invoice.from.taxId)}</div>` : ""}
+    </div>
+    <div class="party">
+      <div class="party-label">Bill To</div>
+      <div class="party-name">${esc(invoice.to.name)}</div>
+      <div class="party-detail">${esc(invoice.to.address)}<br/>${esc(invoice.to.city)}, ${esc(invoice.to.country)}</div>
+      ${invoice.to.phone ? `<div class="party-detail">${esc(invoice.to.phone)}</div>` : ""}
+      <div class="party-email">${esc(invoice.to.email)}</div>
+      ${invoice.to.taxId ? `<div class="party-tax">Tax ID: ${esc(invoice.to.taxId)}</div>` : ""}
+    </div>
+  </div>
+
+  <!-- Line Items -->
+  <div class="table-section">
+    <div class="table-title">Line Items</div>
+    <table>
+      <thead>
+        <tr>
+          <th style="width:38%;">Description</th>
+          <th style="width:8%;text-align:center;">Qty</th>
+          <th style="width:14%;text-align:right;">Unit Price</th>
+          <th style="width:9%;text-align:center;">Tax</th>
+          <th style="width:9%;text-align:center;">Disc.</th>
+          <th style="width:16%;text-align:right;">Amount</th>
+        </tr>
+      </thead>
+      <tbody>${lineItemRows}</tbody>
+    </table>
+  </div>
+
+  <!-- Totals -->
+  <div class="totals-wrap">
+    <div class="totals">
+      <div class="totals-row">
+        <span class="totals-label">Subtotal</span>
+        <span class="totals-value">${totals.subtotal}</span>
+      </div>
+      ${totals.discountCents > 0 ? `<div class="totals-row"><span class="totals-label" style="color:#f59e0b;">Discount</span><span class="totals-value" style="color:#f59e0b;">- ${totals.discount}</span></div>` : ""}
+      <div class="totals-row">
+        <span class="totals-label">Tax (${totals.effectiveTaxRate})</span>
+        <span class="totals-value">${totals.tax}</span>
+      </div>
+      <div class="totals-row grand">
+        <span class="totals-label">Total Due</span>
+        <span class="totals-value">${totals.total}</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Notes & Terms -->
+  ${(invoice.notes || invoice.terms) ? `
+  <div class="notes-section">
+    ${invoice.notes ? `<div class="notes-block"><div class="notes-label">Notes</div><div class="notes-text">${esc(invoice.notes)}</div></div>` : "<div></div>"}
+    ${invoice.terms ? `<div class="notes-block"><div class="notes-label">Terms &amp; Conditions</div><div class="notes-text">${esc(invoice.terms)}</div></div>` : "<div></div>"}
+  </div>` : ""}
+
+  <!-- Footer -->
+  <div class="footer">
+    <div class="footer-left">Generated by <strong style="color:#38bdf8;">Immortal.js Invoice Service Pro v3</strong></div>
+    <div class="footer-right">
+      Generated: ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}<br/>
+      <span style="color:#1e293b;">Built with resilience. Zero downtime.</span>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>`;
+}