@nuxt-customer-portal/invoices 0.3.0

package/server/utils/invoice-email.ts

@@ -0,0 +1,240 @@
+import { createHash } from 'node:crypto'
+import { getClientEmailLocale } from '@nuxt-customer-portal/clients/server/utils/client-email-locale'
+import { and, desc, eq } from 'drizzle-orm'
+import { nanoid } from 'nanoid'
+import { db } from '@nuxt-customer-portal/core/server/portal'
+import {
+  getPortalEmailProviderStatus,
+  renderPortalEmail,
+  sendPortalEmail
+} from '@nuxt-customer-portal/core/server/utils/portal-email'
+import {
+  invoice,
+  invoiceAttachment,
+  invoiceEmailDelivery,
+  invoiceHistory
+} from '@nuxt-customer-portal/invoices/server/db/schema/invoices'
+import type { InvoiceEmailPreviewDto, InvoiceEmailPurpose } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+import { invoicesFeature } from '@nuxt-customer-portal/invoices/shared/feature'
+import { generateInvoicePdf } from './invoice-pdf'
+import { getInvoice, getOrganizationInvoiceProfile } from './invoice-repository'
+
+export const MAX_EMAIL_ATTACHMENT_SIZE = 40 * 1024 * 1024
+const domainFor = (email: string) => email.split('@')[1]?.toLowerCase() ?? ''
+const emailDefinition = (purpose: InvoiceEmailPurpose) => {
+  const id = purpose === 'REMINDER' ? 'payment-reminder' : 'invoice'
+  const definition = invoicesFeature.emails?.find((item) => item.id === id)
+  if (!definition) {
+    throw new Error(`Missing invoice email definition: ${id}`)
+  }
+  return definition
+}
+const htmlToPlainText = (value: string) =>
+  value
+    .replace(/<br\s*\/?\s*>/gi, '\n')
+    .replace(/<[^>]+>/g, '')
+    .trim()
+
+export const getInvoiceEmailPreview = async (
+  organizationId: string,
+  id: string,
+  _localeOverride?: string,
+  purpose: InvoiceEmailPurpose = 'INVOICE'
+): Promise<InvoiceEmailPreviewDto> => {
+  const [selected, sender, files, providerStatus] = await Promise.all([
+    getInvoice(organizationId, id),
+    getOrganizationInvoiceProfile(organizationId),
+    db.select().from(invoiceAttachment).where(eq(invoiceAttachment.invoiceId, id)),
+    getPortalEmailProviderStatus()
+  ])
+  if (!sender.invoiceEmail) {
+    throw createError({ statusCode: 409, message: 'Configure the company invoice email first' })
+  }
+  if (purpose === 'REMINDER' && !selected.isOverdue) {
+    throw createError({ statusCode: 409, message: 'Only overdue invoices can receive payment reminders' })
+  }
+  const locale = await getClientEmailLocale(
+    selected.clientOrganizationId,
+    selected.recipientLocale === 'en' ? 'en' : 'nl'
+  )
+  const pdf = await generateInvoicePdf(selected, locale)
+  const pdfName = `${locale === 'nl' ? 'factuur' : 'invoice'}-${selected.number.replace(/[^a-z0-9._-]+/gi, '-')}.pdf`
+  const senderDomain = domainFor(sender.invoiceEmail)
+  const date = new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(
+    new Date(`${selected.dueDate}T12:00:00Z`)
+  )
+  const outstanding = new Intl.NumberFormat(locale, { style: 'currency', currency: selected.currency }).format(
+    selected.outstandingMinor / 100
+  )
+  const values = {
+    invoice_number: selected.number,
+    sender_name: selected.senderName,
+    recipient_name: selected.recipientName,
+    due_date: date,
+    outstanding_amount: outstanding
+  }
+  const rendered = await renderPortalEmail({
+    moduleId: invoicesFeature.id,
+    definition: emailDefinition(purpose),
+    locale,
+    values
+  })
+  return {
+    to: selected.recipientEmail ?? '',
+    cc: [],
+    locale,
+    subject: rendered.subject,
+    body: htmlToPlainText(rendered.body),
+    senderEmail: sender.invoiceEmail,
+    senderDomain,
+    emailProviderConfigured: providerStatus.configured,
+    senderDomainVerified: providerStatus.verifiedDomains.includes(senderDomain),
+    attachments: [
+      { fileName: pdfName, size: pdf.length },
+      ...files.map((file) => ({ fileName: file.fileName, size: file.size }))
+    ],
+    totalAttachmentSize: pdf.length + files.reduce((sum, file) => sum + file.size, 0),
+    maximumAttachmentSize: MAX_EMAIL_ATTACHMENT_SIZE
+  }
+}
+
+export const deliverInvoiceEmail = async (
+  organizationId: string,
+  actorUserId: string,
+  id: string,
+  input: { to: string; cc: string[]; locale: 'nl' | 'en'; subject: string; body: string },
+  issue: boolean,
+  purpose: InvoiceEmailPurpose = 'INVOICE'
+) => {
+  const selected = await getInvoice(organizationId, id)
+  if (purpose === 'REMINDER' && !selected.isOverdue) {
+    throw createError({ statusCode: 409, message: 'Only overdue invoices can receive payment reminders' })
+  }
+  if (issue ? selected.status !== 'DRAFT' : !['ISSUED', 'PAID'].includes(selected.status)) {
+    throw createError({
+      statusCode: 409,
+      message: issue ? 'Only draft invoices can be issued' : 'Only issued invoices can be resent'
+    })
+  }
+  const preview = await getInvoiceEmailPreview(organizationId, id, input.locale, purpose)
+  input = { ...input, locale: preview.locale === 'en' ? 'en' : 'nl' }
+  if (!preview.emailProviderConfigured) {
+    throw createError({ statusCode: 409, message: 'The organization email provider is not configured' })
+  }
+  if (!preview.senderDomainVerified) {
+    throw createError({ statusCode: 409, message: `The sending domain ${preview.senderDomain} is not verified` })
+  }
+  if (preview.totalAttachmentSize > MAX_EMAIL_ATTACHMENT_SIZE) {
+    throw createError({
+      statusCode: 413,
+      message: `Email attachments exceed 40 MB: ${preview.attachments.map((file) => file.fileName).join(', ')}`
+    })
+  }
+  const payloadHash = createHash('sha256').update(JSON.stringify({ purpose, input })).digest('hex')
+  const currentInvoice = await getInvoice(organizationId, id)
+  if (purpose === 'REMINDER' && !currentInvoice.isOverdue) {
+    throw createError({ statusCode: 409, message: 'Only overdue invoices can receive payment reminders' })
+  }
+  const [pending] = await db
+    .select()
+    .from(invoiceEmailDelivery)
+    .where(and(eq(invoiceEmailDelivery.invoiceId, id), eq(invoiceEmailDelivery.status, 'PENDING')))
+    .orderBy(desc(invoiceEmailDelivery.createdAt))
+    .limit(1)
+  if (pending && pending.payloadHash !== payloadHash) {
+    throw createError({ statusCode: 409, message: 'A different email delivery is already pending' })
+  }
+  const delivery =
+    pending ??
+    (
+      await db
+        .insert(invoiceEmailDelivery)
+        .values({
+          id: nanoid(),
+          invoiceId: id,
+          actorUserId,
+          purpose,
+          status: 'PENDING',
+          recipientEmail: input.to,
+          ccEmails: JSON.stringify(input.cc),
+          locale: input.locale,
+          subject: input.subject,
+          body: input.body,
+          payloadHash
+        })
+        .returning()
+    )[0]!
+  const pdf = await generateInvoicePdf(currentInvoice, input.locale)
+  const storedFiles = await db.select().from(invoiceAttachment).where(eq(invoiceAttachment.invoiceId, id))
+  let result: { id: string }
+  try {
+    const locale = input.locale
+    const dueDate = new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(
+      new Date(`${currentInvoice.dueDate}T12:00:00Z`)
+    )
+    const outstandingAmount = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currentInvoice.currency
+    }).format(currentInvoice.outstandingMinor / 100)
+    result = await sendPortalEmail({
+      moduleId: invoicesFeature.id,
+      definition: emailDefinition(purpose),
+      locale,
+      values: {
+        invoice_number: currentInvoice.number,
+        sender_name: currentInvoice.senderName,
+        recipient_name: currentInvoice.recipientName,
+        due_date: dueDate,
+        outstanding_amount: outstandingAmount
+      },
+      fromEmail: preview.senderEmail,
+      fromName: currentInvoice.senderName,
+      to: input.to,
+      cc: input.cc,
+      text: { subject: input.subject, body: input.body.replaceAll('\n', '<br>') },
+      attachments: [
+        { filename: preview.attachments[0]!.fileName, content: Buffer.from(pdf), contentType: 'application/pdf' },
+        ...storedFiles.map((file) => ({
+          filename: file.fileName,
+          content: Buffer.from(file.contentBase64, 'base64'),
+          contentType: file.contentType
+        }))
+      ],
+      idempotencyKey: delivery.id
+    })
+  } catch (error) {
+    await db
+      .update(invoiceEmailDelivery)
+      .set({
+        status: 'FAILED',
+        errorMessage: error instanceof Error ? error.message : String(error)
+      })
+      .where(eq(invoiceEmailDelivery.id, delivery.id))
+    throw createError({ statusCode: 502, message: 'The invoice email could not be sent', cause: error })
+  }
+  await db.transaction(async (tx) => {
+    const finalized = await tx
+      .update(invoiceEmailDelivery)
+      .set({ status: 'SENT', providerMessageId: result.id, sentAt: new Date(), errorMessage: null })
+      .where(and(eq(invoiceEmailDelivery.id, delivery.id), eq(invoiceEmailDelivery.status, 'PENDING')))
+      .returning({ id: invoiceEmailDelivery.id })
+    if (!finalized.length) {
+      return
+    }
+    if (issue) {
+      await tx
+        .update(invoice)
+        .set({ status: 'ISSUED', issuedAt: new Date() })
+        .where(and(eq(invoice.id, id), eq(invoice.status, 'DRAFT')))
+      await tx.insert(invoiceHistory).values({ id: nanoid(), invoiceId: id, action: 'ISSUED', actorUserId })
+    }
+    await tx.insert(invoiceHistory).values({
+      id: nanoid(),
+      invoiceId: id,
+      action: purpose === 'REMINDER' ? 'REMINDER_SENT' : 'EMAIL_SENT',
+      actorUserId,
+      attachmentName: input.to
+    })
+  })
+  return { deliveryId: delivery.id, status: 'SENT' as const, providerMessageId: result.id, to: input.to, cc: input.cc }
+}

package/server/utils/invoice-listing.ts

@@ -0,0 +1,71 @@
+import type { ClientInvoiceSummaryDto, InvoiceDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+import type { ClientInvoiceListQuery, InvoiceListQuery } from './invoice-validation'
+import { listClientInvoices, listInvoices } from './invoice-repository'
+
+const compare = (a: string | null | undefined, b: string | null | undefined) =>
+  (a ?? '').localeCompare(b ?? '', undefined, { sensitivity: 'base', numeric: true })
+const direction = (value: number, dir: 'asc' | 'desc') => (dir === 'asc' ? value : -value)
+const paginate = <T>(items: T[], page: number, pageSize: number) => {
+  const total = items.length
+  const pageCount = Math.ceil(total / pageSize)
+  const safePage = pageCount ? Math.min(page, pageCount) : 1
+  return {
+    items: items.slice((safePage - 1) * pageSize, safePage * pageSize),
+    pagination: { total, page: safePage, pageSize, pageCount }
+  }
+}
+const includes = (value: string | null | undefined, search: string) =>
+  (value ?? '').toLocaleLowerCase().includes(search)
+export const listInvoicesPage = async (organizationId: string, query: InvoiceListQuery) => {
+  const search = query.search?.toLocaleLowerCase() ?? ''
+  const rows = (await listInvoices(organizationId))
+    .filter(
+      (item) => !search || [item.number, item.recipientName, item.subject].some((value) => includes(value, search))
+    )
+    .filter((item) => !query.status || item.status === query.status)
+    .filter((item) => !query.clientOrganizationId || item.clientOrganizationId === query.clientOrganizationId)
+    .filter((item) => query.overdue === undefined || item.isOverdue === query.overdue)
+    .sort(
+      (a, b) =>
+        direction(
+          query.sortBy === 'number'
+            ? compare(a.number, b.number)
+            : query.sortBy === 'dueDate'
+              ? compare(a.dueDate, b.dueDate)
+              : query.sortBy === 'totalMinor'
+                ? a.totalMinor - b.totalMinor
+                : compare(a.issueDate, b.issueDate),
+          query.sortDir
+        ) || compare(a.id, b.id)
+    )
+  return paginate<InvoiceDto>(rows, query.page, query.pageSize)
+}
+export const listClientInvoicesPage = async (
+  organizationId: string,
+  userId: string,
+  isAdmin: boolean,
+  query: ClientInvoiceListQuery
+) => {
+  const search = query.search?.toLocaleLowerCase() ?? ''
+  const rows = (await listClientInvoices(organizationId, userId, isAdmin))
+    .filter(
+      (item) => !search || [item.number, item.supplierName, item.subject].some((value) => includes(value, search))
+    )
+    .filter((item) => !query.status || item.status === query.status)
+    .filter((item) => !query.accessId || item.accessId === query.accessId)
+    .filter((item) => query.overdue === undefined || item.isOverdue === query.overdue)
+    .sort(
+      (a, b) =>
+        direction(
+          query.sortBy === 'number'
+            ? compare(a.number, b.number)
+            : query.sortBy === 'dueDate'
+              ? compare(a.dueDate, b.dueDate)
+              : query.sortBy === 'totalMinor'
+                ? a.totalMinor - b.totalMinor
+                : compare(a.issueDate, b.issueDate),
+          query.sortDir
+        ) || compare(a.id, b.id)
+    )
+  return paginate<ClientInvoiceSummaryDto>(rows, query.page, query.pageSize)
+}

package/server/utils/invoice-pdf.ts

@@ -0,0 +1,358 @@
+import { PDFDocument, StandardFonts, rgb, type PDFFont, type PDFPage } from 'pdf-lib'
+import type { ClientInvoiceDto, InvoiceDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+type InvoicePdfLocale = 'en' | 'nl'
+
+const labels = {
+  en: {
+    title: 'INVOICE',
+    from: 'From',
+    to: 'Invoice to',
+    number: 'Invoice number',
+    issueDate: 'Invoice date',
+    dueDate: 'Due date',
+    description: 'Description',
+    quantity: 'Quantity',
+    unitPrice: 'Unit price',
+    vat: 'VAT',
+    amount: 'Amount',
+    subtotal: 'Subtotal',
+    paid: 'Paid',
+    total: 'Total payable',
+    notes: 'Notes',
+    page: 'Page'
+  },
+  nl: {
+    title: 'FACTUUR',
+    from: 'Van',
+    to: 'Factuur aan',
+    number: 'Factuurnummer',
+    issueDate: 'Factuurdatum',
+    dueDate: 'Vervaldatum',
+    description: 'Omschrijving',
+    quantity: 'Aantal',
+    unitPrice: 'Prijs / eenheid',
+    vat: 'Btw',
+    amount: 'Bedrag',
+    subtotal: 'Subtotaal',
+    paid: 'Betaald',
+    total: 'Totaal te betalen',
+    notes: 'Opmerkingen',
+    page: 'Pagina'
+  }
+} as const
+
+const width = 595.28
+const height = 841.89
+const margin = 48
+const ink = rgb(0.12, 0.14, 0.17)
+const muted = rgb(0.42, 0.45, 0.5)
+const rule = rgb(0.86, 0.87, 0.89)
+const accent = rgb(0.12, 0.45, 0.68)
+
+const normalize = (value: string) =>
+  value
+    .replace(/\r/g, '')
+    .replace(/[\u2010-\u2015]/g, '-')
+    .replace(/\u2212/g, '-')
+    .split('')
+    .map((character) => {
+      const code = character.codePointAt(0) ?? 0
+      return character === '\n' || character === '\t' || (code >= 32 && code <= 255) || code === 8364 ? character : '?'
+    })
+    .join('')
+
+const wrap = (font: PDFFont, text: string, size: number, maxWidth: number) => {
+  const lines: string[] = []
+  for (const paragraph of normalize(text).split('\n')) {
+    const words = paragraph.split(/\s+/).filter(Boolean)
+    if (!words.length) {
+      lines.push('')
+      continue
+    }
+    let line = words.shift()!
+    for (const word of words) {
+      if (font.widthOfTextAtSize(`${line} ${word}`, size) <= maxWidth) {
+        line += ` ${word}`
+      } else {
+        lines.push(line)
+        line = word
+      }
+    }
+    lines.push(line)
+  }
+  return lines
+}
+
+export async function generateInvoicePdf(invoice: InvoiceDto | ClientInvoiceDto, requestedLocale?: string) {
+  const locale: InvoicePdfLocale = (requestedLocale || invoice.recipientLocale)?.toLowerCase().startsWith('nl')
+    ? 'nl'
+    : 'en'
+  const l = labels[locale]
+  const pdf = await PDFDocument.create()
+  const regular = await pdf.embedFont(StandardFonts.Helvetica)
+  const bold = await pdf.embedFont(StandardFonts.HelveticaBold)
+  const money = (minor: number) =>
+    new Intl.NumberFormat(locale === 'nl' ? 'nl-NL' : 'en-GB', {
+      style: 'currency',
+      currency: invoice.currency
+    }).format(minor / 100)
+  const number = (milli: number) =>
+    new Intl.NumberFormat(locale === 'nl' ? 'nl-NL' : 'en-GB', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 3
+    }).format(milli / 1000)
+  const date = (value: string) =>
+    new Intl.DateTimeFormat(locale === 'nl' ? 'nl-NL' : 'en-GB', { dateStyle: 'medium', timeZone: 'UTC' }).format(
+      new Date(`${value}T12:00:00Z`)
+    )
+  let page!: PDFPage
+  let y = 0
+
+  const addPage = () => {
+    page = pdf.addPage([width, height])
+    y = height - margin
+    page.drawText(invoice.number, { x: margin, y: 25, size: 8, font: regular, color: muted })
+    return page
+  }
+  const text = (value: string, x: number, size = 9, font = regular, color = ink) =>
+    page.drawText(normalize(value), { x, y, size, font, color })
+  const multiline = (
+    value: string,
+    x: number,
+    maxWidth: number,
+    size = 9,
+    font = regular,
+    lineHeight = 13,
+    color = ink
+  ) => {
+    for (const line of wrap(font, value, size, maxWidth)) {
+      if (y < margin + lineHeight) {
+        addPage()
+      }
+      text(line, x, size, font, color)
+      y -= lineHeight
+    }
+  }
+  const divider = () =>
+    page.drawLine({ start: { x: margin, y }, end: { x: width - margin, y }, thickness: 0.7, color: rule })
+
+  addPage()
+  const headingTop = y
+  let logoDrawn = false
+  let senderLogo = invoice.senderLogo
+  if (!senderLogo) {
+    const { resolvePortalEmailBranding } = await import('@nuxt-customer-portal/core/server/utils/portal-email')
+    const branding = await resolvePortalEmailBranding()
+    if (branding.brandName.trim().toLowerCase() === invoice.senderName.trim().toLowerCase()) {
+      senderLogo = branding.brandIconLight || branding.brandIconDark || null
+    }
+  }
+  if (senderLogo?.startsWith('data:image/')) {
+    try {
+      const [, meta, data] = senderLogo.match(/^data:(image\/(?:png|jpeg|jpg));base64,(.+)$/i) ?? []
+      if (meta && data) {
+        const bytes = Buffer.from(data, 'base64')
+        const image = meta.toLowerCase() === 'image/png' ? await pdf.embedPng(bytes) : await pdf.embedJpg(bytes)
+        const scale = Math.min(150 / image.width, 55 / image.height, 1)
+        page.drawImage(image, {
+          x: margin,
+          y: y - image.height * scale + 4,
+          width: image.width * scale,
+          height: image.height * scale
+        })
+        logoDrawn = true
+      }
+    } catch {
+      /* A malformed optional logo must not prevent invoice generation. */
+    }
+  }
+  if (!logoDrawn) {
+    text(invoice.senderName, margin, 16, bold, accent)
+  }
+  page.drawText(l.title, {
+    x: width - margin - bold.widthOfTextAtSize(l.title, 22),
+    y,
+    size: 22,
+    font: bold,
+    color: ink
+  })
+  y -= 28
+  page.drawText(l.from, {
+    x: width - margin - regular.widthOfTextAtSize(l.from, 8),
+    y,
+    size: 8,
+    font: regular,
+    color: muted
+  })
+  y -= 14
+  for (const line of wrap(regular, `${invoice.senderName}\n${invoice.senderAddress}`, 9, 205)) {
+    text(line, width - margin - regular.widthOfTextAtSize(line, 9))
+    y -= 12
+  }
+  const addressBottom = y
+  y = headingTop - 78
+  const senderDetails = [
+    ['IBAN', invoice.senderIban],
+    ['BIC', invoice.senderBic],
+    [locale === 'nl' ? 'KVK-nr' : 'Registration no.', invoice.senderRegistration],
+    [locale === 'nl' ? 'BTW-nr' : 'VAT no.', invoice.senderVatNumber]
+  ].filter(([, value]) => Boolean(value))
+  const labelWidth = Math.max(0, ...senderDetails.map(([label]) => regular.widthOfTextAtSize(`${label}:`, 8))) + 10
+  for (const [label, value] of senderDetails) {
+    text(`${label}:`, margin, 8, regular, muted)
+    multiline(value!, margin + labelWidth, 245 - labelWidth, 8, regular, 13, muted)
+  }
+  y = Math.min(y, addressBottom) - 55
+
+  const partiesY = y
+  text(l.to, margin, 8, bold, muted)
+  y -= 15
+  multiline(
+    `${invoice.recipientName}\n${invoice.recipientAddress}${invoice.recipientContactName ? `\n${invoice.recipientContactName}` : ''}${invoice.recipientEmail ? `\n${invoice.recipientEmail}` : ''}`,
+    margin,
+    235,
+    9,
+    regular,
+    12
+  )
+  y = partiesY
+  const metaX = 355
+  for (const [label, value] of [
+    [l.number, invoice.number],
+    [l.issueDate, date(invoice.issueDate)],
+    [l.dueDate, date(invoice.dueDate)]
+  ]) {
+    text(label!, metaX, 8, regular, muted)
+    page.drawText(normalize(value!), {
+      x: width - margin - regular.widthOfTextAtSize(normalize(value!), 9),
+      y,
+      size: 9,
+      font: regular,
+      color: ink
+    })
+    y -= 17
+  }
+  y = Math.min(y, partiesY - 85)
+  if (invoice.subject) {
+    multiline(invoice.subject, margin, width - margin * 2, 10, regular, 14)
+    y -= 20
+  }
+  y -= 8
+
+  const cols = [margin, 304, 365, 431, width - margin]
+  const tableHeader = () => {
+    text(l.description, cols[0]!, 8, bold, muted)
+    for (const [label, right] of [
+      [l.quantity, cols[2]! - 8],
+      [l.unitPrice, cols[3]! - 8],
+      [l.vat, cols[4]! - 74],
+      [l.amount, cols[4]!]
+    ]) {
+      page.drawText(label as string, {
+        x: (right as number) - bold.widthOfTextAtSize(label as string, 8),
+        y,
+        size: 8,
+        font: bold,
+        color: muted
+      })
+    }
+    y -= 10
+    divider()
+    y -= 13
+  }
+  tableHeader()
+  for (const line of invoice.lines) {
+    const description = wrap(regular, line.description, 8.5, cols[1]! - cols[0]! - 12)
+    const rowHeight = Math.max(24, description.length * 11 + 8)
+    if (y - rowHeight < 155) {
+      addPage()
+      y -= 22
+      tableHeader()
+    }
+    const rowTop = y
+    description.forEach((value, index) =>
+      page.drawText(value, { x: cols[0]!, y: rowTop - index * 11, size: 8.5, font: regular, color: ink })
+    )
+    const values = [
+      number(line.quantityMilli),
+      money(line.unitPriceMinor),
+      new Intl.NumberFormat(locale, { style: 'percent', minimumFractionDigits: 2 }).format(
+        line.vatRateBasisPoints / 10000
+      ),
+      money(line.amountMinor)
+    ]
+    const rights = [cols[2]! - 8, cols[3]! - 8, cols[4]! - 74, cols[4]!]
+    values.forEach((value, index) =>
+      page.drawText(normalize(value), {
+        x: rights[index]! - regular.widthOfTextAtSize(normalize(value), 8.5),
+        y: rowTop,
+        size: 8.5,
+        font: regular,
+        color: ink
+      })
+    )
+    y -= rowHeight
+    divider()
+    y -= 10
+  }
+  if (y < 160) {
+    addPage()
+  }
+  const summaryX = 340
+  const summary: Array<[string, number]> = [
+    [l.subtotal, invoice.subtotalMinor],
+    [l.vat, invoice.vatMinor]
+  ]
+  if (invoice.paidMinor) {
+    summary.push([l.paid, -invoice.paidMinor])
+  }
+  for (const [label, value] of summary) {
+    text(label, summaryX, 9, regular, muted)
+    const formatted = money(value)
+    page.drawText(normalize(formatted), {
+      x: width - margin - regular.widthOfTextAtSize(normalize(formatted), 9),
+      y,
+      size: 9,
+      font: regular,
+      color: ink
+    })
+    y -= 17
+  }
+  page.drawLine({ start: { x: summaryX, y }, end: { x: width - margin, y }, thickness: 0.7, color: rule })
+  y -= 18
+  text(l.total, summaryX, 10, bold)
+  const total = money(invoice.outstandingMinor)
+  page.drawText(normalize(total), {
+    x: width - margin - bold.widthOfTextAtSize(normalize(total), 10),
+    y,
+    size: 10,
+    font: bold,
+    color: ink
+  })
+  y -= 34
+  if (invoice.notes) {
+    if (y < 95) {
+      addPage()
+    }
+    text(l.notes, margin, 8, bold, muted)
+    y -= 15
+    multiline(invoice.notes, margin, width - margin * 2, 8.5, regular, 12)
+  }
+
+  const pages = pdf.getPages()
+  pages.forEach((pdfPage, index) => {
+    const value = `${l.page} ${index + 1} / ${pages.length}`
+    pdfPage.drawText(value, {
+      x: width - margin - regular.widthOfTextAtSize(value, 8),
+      y: 25,
+      size: 8,
+      font: regular,
+      color: muted
+    })
+  })
+  pdf.setTitle(`${l.title} ${invoice.number}`)
+  pdf.setAuthor(invoice.senderName)
+  pdf.setCreator('Ludu Customer Portal')
+  return pdf.save()
+}