@design.estate/dees-document 3.2.0 → 3.4.0

package/ts_web/elements/contentinvoice.ts

@@ -61,6 +61,14 @@ const accountingDocContents: Record<
     requestsPayment: true,
     printsRelatedDocuments: false,
   },
+  // a complete invoice in place of one that lacked a detail or stated one
+  // incorrectly (§ 31 Abs. 5 UStDV); it names that invoice in its own block,
+  // renderCorrection(), not among the related documents
+  "corrected-invoice": {
+    introStatement: "invoice@@introStatement",
+    requestsPayment: true,
+    printsRelatedDocuments: false,
+  },
   // reduces what the recipient owes: nothing to pay, and it names the document it corrects
   creditnote: {
     introStatement: "creditnote@@introStatement",
@@ -97,6 +105,160 @@ const relatedDocumentLabels: Record<
   references: "relatedDocument.references",
 };
 
+/** A column that takes the width of its widest cell. */
+interface IFittedColumn {
+  /** the cells of the column, the header included */
+  cellSelector: string;
+  /** the custom property the grid reads the column's width from */
+  widthProperty: string;
+  /** the width the column never goes below, in px */
+  minWidth: number;
+}
+
+/** The fitted columns of a table and the room the rest of a row takes. */
+interface IColumnLayout {
+  columns: IFittedColumn[];
+  /** the columns of fixed width, together, in px */
+  fixedWidth: number;
+  /** the least room the flexible column (the description) keeps, in px */
+  flexibleMinWidth: number;
+}
+
+/**
+ * The positions: number 40 px and VAT rate 50 px fixed, the description
+ * flexible with at least 120 px (as the grid in the styles declares); the
+ * last column is the one the sums line up with.
+ */
+const positionColumns: IColumnLayout = {
+  columns: [
+    { cellSelector: ".quantityCell", widthProperty: "--quantity-column-width", minWidth: 50 },
+    { cellSelector: ".unitCell", widthProperty: "--unit-column-width", minWidth: 50 },
+    { cellSelector: ".unitPriceCell", widthProperty: "--unit-price-column-width", minWidth: 100 },
+    { cellSelector: ".amountCell", widthProperty: "--amount-column-width", minWidth: 100 },
+  ],
+  fixedWidth: 90,
+  flexibleMinWidth: 120,
+};
+
+/**
+ * A reminder's claims, and its charges and sums, which share the last column;
+ * the document label is flexible with at least 150 px (as the grid in the
+ * styles declares).
+ */
+const reminderColumns: IColumnLayout = {
+  columns: [
+    { cellSelector: ".issueDateCell", widthProperty: "--issue-date-column-width", minWidth: 80 },
+    { cellSelector: ".dueDateCell", widthProperty: "--due-date-column-width", minWidth: 80 },
+    { cellSelector: ".grossCell", widthProperty: "--gross-column-width", minWidth: 100 },
+    { cellSelector: ".amountCell", widthProperty: "--amount-column-width", minWidth: 100 },
+  ],
+  fixedWidth: 0,
+  flexibleMinWidth: 150,
+};
+
+/** The smallest font a cell is set in to fit its column, in px. */
+const MIN_FITTED_FONT_SIZE = 8;
+
+/**
+ * The width a cell's text needs, its padding included, measured on the text
+ * itself, so it is the same whether the text fits its column or overflows it.
+ */
+const neededWidth = (cellArg: HTMLElement): number => {
+  const range = document.createRange();
+  range.selectNodeContents(cellArg);
+  const style = getComputedStyle(cellArg);
+  return Math.ceil(
+    range.getBoundingClientRect().width +
+      parseFloat(style.paddingLeft) +
+      parseFloat(style.paddingRight)
+  );
+};
+
+/**
+ * Widths for columns that want `wantedArg` and get at least `minimumsArg`,
+ * within `availableArg`: what is left above the minimums is granted in equal
+ * shares, a column never getting more than it wants.
+ */
+const shareWidth = (
+  wantedArg: number[],
+  minimumsArg: number[],
+  availableArg: number
+): number[] => {
+  const widths = [...minimumsArg];
+  let remaining =
+    availableArg - minimumsArg.reduce((sumArg, widthArg) => sumArg + widthArg, 0);
+  let open = widths.map((_, index) => index).filter((index) => wantedArg[index] > widths[index]);
+  while (open.length > 0 && remaining >= 1) {
+    const share = remaining / open.length;
+    for (const index of open) {
+      const grant = Math.min(share, wantedArg[index] - widths[index]);
+      widths[index] += grant;
+      remaining -= grant;
+    }
+    open = open.filter((index) => wantedArg[index] - widths[index] >= 1);
+  }
+  return widths.map((widthArg) => Math.floor(widthArg));
+};
+
+/**
+ * Sets a cell whose text is wider than its column in a smaller font, down to
+ * `MIN_FITTED_FONT_SIZE`, and lets it wrap within the column when even that
+ * is too wide.
+ */
+const fitCellText = (cellArg: HTMLElement, columnWidthArg: number): void => {
+  const needed = neededWidth(cellArg);
+  if (needed <= columnWidthArg) {
+    return;
+  }
+  const style = getComputedStyle(cellArg);
+  const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const fontSize =
+    (parseFloat(style.fontSize) * (columnWidthArg - padding)) / (needed - padding);
+  if (fontSize >= MIN_FITTED_FONT_SIZE) {
+    cellArg.style.fontSize = `${Math.floor(fontSize * 10) / 10}px`;
+    return;
+  }
+  cellArg.style.fontSize = `${MIN_FITTED_FONT_SIZE}px`;
+  cellArg.style.whiteSpace = "normal";
+  cellArg.style.overflowWrap = "anywhere";
+};
+
+/** The kind of a reminded document, as the claims table names it. */
+const claimDocumentLabels: Record<
+  plugins.tsclass.finance.TPaymentReminderClaim["documentType"],
+  plugins.shared.translation.TranslationKey
+> = {
+  invoice: "paymentReminder@@claim.invoice",
+  "corrected-invoice": "paymentReminder@@claim.correctedInvoice",
+  debitnote: "paymentReminder@@claim.debitnote",
+};
+
+/** The words for a detail of § 14 Abs. 4 Satz 1 UStG a corrected invoice supplies or corrects. */
+const correctionDetailLabels: Record<
+  plugins.tsclass.finance.TInvoiceMandatoryDetail,
+  plugins.shared.translation.TranslationKey
+> = {
+  parties: "correctedInvoice.detail.parties",
+  "supplier-tax-number": "correctedInvoice.detail.supplierTaxNumber",
+  "issue-date": "correctedInvoice.detail.issueDate",
+  "invoice-number": "correctedInvoice.detail.invoiceNumber",
+  "supply-description": "correctedInvoice.detail.supplyDescription",
+  "supply-date": "correctedInvoice.detail.supplyDate",
+  "net-amount": "correctedInvoice.detail.netAmount",
+  tax: "correctedInvoice.detail.tax",
+  "retention-note": "correctedInvoice.detail.retentionNote",
+  "special-case-detail": "correctedInvoice.detail.specialCaseDetail",
+};
+
+/** What was done with a detail: supplied when it was missing, corrected when it was incorrect. */
+const correctionDefectLabels: Record<
+  plugins.tsclass.finance.TInvoiceCorrection["defect"],
+  plugins.shared.translation.TranslationKey
+> = {
+  missing: "correctedInvoice.defect.missing",
+  incorrect: "correctedInvoice.defect.incorrect",
+};
+
 @customElement("dedocument-contentinvoice")
 export class DeContentInvoice extends DeesElement {
   public static demo = () => html`
@@ -135,6 +297,18 @@ export class DeContentInvoice extends DeesElement {
       : null;
   }
 
+  /** The payment reminder this content prints, or null. */
+  private get paymentReminder(): plugins.tsclass.finance.TPaymentReminder | null {
+    return plugins.shared.isPaymentReminder(this.letterData)
+      ? this.letterData
+      : null;
+  }
+
+  /** The currency of the letter's amounts: an accounting document's or a reminder's. */
+  private get currency(): string | undefined {
+    return this.accountingDoc?.currency ?? this.paymentReminder?.currency;
+  }
+
   /**
    * The document builds this element for every letter; one that is no
    * accounting document, and one of a type this version does not know, keep
@@ -174,7 +348,7 @@ export class DeContentInvoice extends DeesElement {
 
       .grid {
         display: grid;
-        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+        grid-template-columns: 40px minmax(120px, 1fr) var(--quantity-column-width, 50px) var(--unit-column-width, 50px) var(--unit-price-column-width, 100px) 50px var(--amount-column-width, 100px);
       }
 
       .topLine {
@@ -194,6 +368,16 @@ export class DeContentInvoice extends DeesElement {
         border-right: none;
       }
 
+      /*
+       * the description takes the room the other columns leave, at least its
+       * minimum, and wraps within it, so a long one never widens the table
+       * beyond the page
+       */
+      .lineItem.descriptionCell {
+        white-space: normal;
+        overflow-wrap: anywhere;
+      }
+
       .value.rightAlign,
       .lineItem.rightAlign {
         text-align: right;
@@ -211,6 +395,36 @@ export class DeContentInvoice extends DeesElement {
         box-sizing: content-box;
       }
 
+      .claimGrid {
+        display: grid;
+        grid-template-columns: minmax(150px, 1fr) var(--issue-date-column-width, 80px) var(--due-date-column-width, 80px) var(--gross-column-width, 100px) var(--amount-column-width, 100px);
+      }
+
+      .chargeGrid {
+        display: grid;
+        grid-template-columns: auto var(--amount-column-width, 100px);
+      }
+
+      .chargeGrid.dataHeader {
+        margin-top: 12px;
+      }
+
+      /* a charge's description and basis wrap: the basis of default interest is longer than a line */
+      .lineItem.chargeText {
+        white-space: normal;
+      }
+
+      .chargeBasis {
+        margin-top: 2px;
+        font-size: 11px;
+        color: #555;
+      }
+
+      /* a provision is not split across lines */
+      .citation {
+        white-space: nowrap;
+      }
+
       .sums {
         margin-top: 5px;
         font-size: 12px;
@@ -220,7 +434,7 @@ export class DeContentInvoice extends DeesElement {
       .sums .sumline {
         margin-top: 3px;
         display: grid;
-        grid-template-columns: auto 100px;
+        grid-template-columns: auto var(--amount-column-width, 100px);
       }
 
       .sums .sumline .label {
@@ -238,6 +452,21 @@ export class DeContentInvoice extends DeesElement {
         font-weight: bold;
       }
 
+      /* the tax an advance payment contains is stated, not added up */
+      .sums .sumline--contained .label,
+      .sums .sumline--contained .value {
+        font-weight: normal;
+        font-size: 11px;
+      }
+
+      .advancePayment {
+        margin-top: 2px;
+        padding-left: 20%;
+        font-size: 11px;
+        text-align: right;
+        color: #555;
+      }
+
       .divider {
         margin-top: 8px;
         border-top: 1px dotted #ccc;
@@ -264,6 +493,19 @@ export class DeContentInvoice extends DeesElement {
         margin-top: 4px;
       }
 
+      .correction {
+        margin-bottom: 12px;
+      }
+
+      .correctionTitle {
+        font-weight: bold;
+      }
+
+      .correctionDetails ul {
+        margin: 2px 0 0 0;
+        padding-left: 18px;
+      }
+
       .relatedDocuments .label {
         font-weight: bold;
       }
@@ -294,7 +536,7 @@ export class DeContentInvoice extends DeesElement {
    * an unknown or missing currency falls back to a plain decimal number.
    */
   protected formatPrice(value: number): string {
-    const currency = this.accountingDoc?.currency;
+    const currency = this.currency;
     const locale = localeForLanguage(this.documentSettings?.languageCode);
     if (currency) {
       try {
@@ -306,6 +548,39 @@ export class DeContentInvoice extends DeesElement {
     return new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
   }
 
+  /**
+   * Formats a quantity in the document's language with every decimal it
+   * carries: 12.5 prints as "12,5" in German and "12.5" in English, and no
+   * stated quantity is rounded. The decimals are those of the shortest
+   * representation of the number, the one `String()` gives, as the unit name
+   * counts them for its singular or plural.
+   */
+  protected formatQuantity(quantityArg: number): string {
+    const fractionDigits = plugins.shared.quantityFractionDigits(quantityArg);
+    return new Intl.NumberFormat(
+      localeForLanguage(this.documentSettings?.languageCode),
+      {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+      }
+    ).format(quantityArg);
+  }
+
+  /** Formats a rate in percent, with as many decimals as it states, up to four. */
+  protected formatPercent(percentArg: number): string {
+    return new Intl.NumberFormat(
+      localeForLanguage(this.documentSettings?.languageCode),
+      { style: "percent", maximumFractionDigits: 4 }
+    ).format(percentArg / 100);
+  }
+
+  /** Formats a day in the document's language and date style. */
+  protected formatDay(timestampArg: number): string {
+    return new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+      dateStyle: this.documentSettings.dateStyle,
+    }).format(new Date(timestampArg));
+  }
+
   public getTotalNet = (): number => {
     let totalNet = 0;
 
@@ -485,24 +760,33 @@ export class DeContentInvoice extends DeesElement {
     }
   }
 
-  /** The due date, which only an accounting document has: it counts from its date. */
-  private renderPaymentTerms(
-    accountingDocArg: plugins.tsclass.finance.TAccountingDoc
-  ): TemplateResult {
+  /**
+   * The due date, which only an accounting document and a payment reminder
+   * have: it counts `dueInDays` from the letter's date. A document that
+   * states a paid amount names the amount due, since the total is not what
+   * remains to be paid.
+   */
+  private renderPaymentTerms(optionsArg: {
+    date: number;
+    dueInDays: number;
+    labelKey: plugins.shared.translation.TranslationKey;
+    textKey: plugins.shared.translation.TranslationKey;
+    /** the amount due, when the document states a paid amount */
+    amountDue?: number;
+  }): TemplateResult {
     return html`<div class="infoBox">
       <div>
         <div>
-          <div class="label">
-            ${this.translateKey("invoice@@payment.terms")}
-          </div>
+          <div class="label">${this.translateKey(optionsArg.labelKey)}</div>
           <span>
-            ${this.translateKey("invoice@@payment.terms.direct")}
-            ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
-              dateStyle: this.documentSettings.dateStyle,
-            }).format(
-              new Date(accountingDocArg.date).setDate(
-                new Date(accountingDocArg.date).getDate() +
-                  accountingDocArg.dueInDays
+            ${optionsArg.amountDue === undefined
+              ? this.translateKey(optionsArg.textKey)
+              : html`${this.translateKey("payment.amountDue")}:
+                ${this.formatPrice(optionsArg.amountDue)}
+                ${this.translateKey("payment.terms.amountDue")}`}
+            ${this.formatDay(
+              new Date(optionsArg.date).setDate(
+                new Date(optionsArg.date).getDate() + optionsArg.dueInDays
               )
             )}
           </span>
@@ -516,15 +800,21 @@ export class DeContentInvoice extends DeesElement {
    * code: a euro amount to the sender's IBAN, which a document in another
    * currency or without the sender's IBAN does not have.
    */
-  private renderPaymentInfo(
-    accountingDocArg: plugins.tsclass.finance.TAccountingDoc
-  ): TemplateResult | null {
-    const bic = accountingDocArg.from.sepaConnection?.bic;
-    const name = accountingDocArg.from.name;
-    const iban = accountingDocArg.from.sepaConnection?.iban;
-    const currency = accountingDocArg.currency;
-    const totalGross = this.getTotalGross();
-    const reference = accountingDocArg.id;
+  private renderPaymentInfo(optionsArg: {
+    /** the sender, who is paid */
+    from: plugins.tsclass.business.TContact;
+    currency: string;
+    /** the amount to pay */
+    amount: number;
+    /** the number of the letter, the remittance information */
+    reference: string;
+  }): TemplateResult | null {
+    const bic = optionsArg.from.sepaConnection?.bic;
+    const name = optionsArg.from.name;
+    const iban = optionsArg.from.sepaConnection?.iban;
+    const currency = optionsArg.currency;
+    const totalGross = optionsArg.amount;
+    const reference = optionsArg.reference;
     if (
       typeof iban !== "string" ||
       plugins.shared.buildEpcQrPayload({
@@ -557,6 +847,115 @@ export class DeContentInvoice extends DeesElement {
     </div>`;
   }
 
+  /**
+   * The paid amount and the amount due, below the gross total, when the
+   * document states a paid amount (EN 16931 BT-113 and BT-115). The advance
+   * payments a final invoice deducts are deducted as the gross total received,
+   * with the tax it contains stated per rate, as Abschnitt 14.8 Abs. 7 Satz 3
+   * UStAE allows: "Statt der vorausgezahlten Entgelte oder Teilentgelte und
+   * der Steuerbeträge können auch die Gesamtbeträge der Voraus- oder
+   * Anzahlungen abgesetzt und die darin enthaltenen Steuerbeträge zusätzlich
+   * angegeben werden." More paid than the total prints as a credit balance.
+   */
+  private renderPaidAmountSums(
+    summaryArg: plugins.shared.IPaidAmountSummary
+  ): TemplateResult {
+    return html`<div class="sumline">
+        <div class="label">${this.translateKey("payment.paid")}</div>
+        <div class="value rightAlign amountCell">
+          ${this.formatPrice(summaryArg.paidAmount)}
+        </div>
+      </div>
+      ${summaryArg.advancePaymentTaxes.map(
+        (taxArg) => html`<div class="sumline sumline--contained">
+          <div class="label">
+            ${this.translateKey("advancePayment.vat")} ${taxArg.percentage}%
+          </div>
+          <div class="value rightAlign amountCell">
+            ${this.formatPrice(taxArg.vat)}
+          </div>
+        </div>`
+      )}
+      <div class="sumline">
+        <div class="label">
+          ${this.translateKey(
+            summaryArg.amountDue < 0 ? "payment.creditBalance" : "payment.amountDue"
+          )}
+        </div>
+        <div class="value value--total rightAlign amountCell">
+          ${this.formatPrice(Math.abs(summaryArg.amountDue))}
+        </div>
+      </div>`;
+  }
+
+  /**
+   * The advance payments the paid amount deducts, one line each, by the
+   * advance invoice's number and date and the day the payment was received,
+   * as far as the document states them. Each line is its own block, so a long
+   * list flows across pages.
+   */
+  private renderAdvancePayments(
+    summaryArg: plugins.shared.IPaidAmountSummary
+  ): TemplateResult[] {
+    return summaryArg.advancePayments.map(
+      (paymentArg) => html`<div class="advancePayment">
+        ${this.translateKey("advancePayment.title")}${paymentArg.invoice
+          ? html` ${this.translateKey("advancePayment.invoice")}
+            ${paymentArg.invoice.documentId}${paymentArg.invoice.issueDate !== undefined
+              ? html` ${this.translateKey("advancePayment.invoiceDate")}
+                ${this.formatDay(paymentArg.invoice.issueDate)}`
+              : null}`
+          : null}${paymentArg.receivedOn !== undefined
+          ? html`, ${this.translateKey("advancePayment.received")}
+            ${this.formatDay(paymentArg.receivedOn)}`
+          : null}
+      </div>`
+    );
+  }
+
+  /**
+   * What the document asks to be paid: the payment terms and the QR pay box
+   * for the gross total, or for the amount due when the document states a
+   * paid amount. When nothing is due, it says so, and names the credit
+   * balance when more was paid than the total; there are no terms and no QR
+   * pay box then.
+   */
+  private renderPaymentRequest(
+    accountingDocArg: plugins.tsclass.finance.TAccountingDoc,
+    summaryArg: plugins.shared.IPaidAmountSummary | null
+  ): TemplateResult {
+    if (summaryArg && summaryArg.amountDue <= 0) {
+      return html`<div class="infoBox">
+        <div>
+          <div>
+            <div class="label">${this.translateKey("invoice@@payment.terms")}</div>
+            <span>
+              ${summaryArg.amountDue === 0
+                ? this.translateKey("payment.nothingDue")
+                : html`${this.translateKey("payment.nothingDue.creditBalance")}
+                  ${this.formatPrice(-summaryArg.amountDue)}.`}
+            </span>
+          </div>
+        </div>
+      </div>`;
+    }
+    return html`
+      ${this.renderPaymentTerms({
+        date: accountingDocArg.date,
+        dueInDays: accountingDocArg.dueInDays,
+        labelKey: "invoice@@payment.terms",
+        textKey: "invoice@@payment.terms.direct",
+        amountDue: summaryArg?.amountDue,
+      })}
+      ${this.renderPaymentInfo({
+        from: accountingDocArg.from,
+        currency: accountingDocArg.currency,
+        amount: summaryArg ? summaryArg.amountDue : this.getTotalGross(),
+        reference: accountingDocArg.id,
+      })}
+    `;
+  }
+
   /**
    * The reverse-charge statement. § 14a UStG requires the words
    * "Steuerschuldnerschaft des Leistungsempfängers": Abs. 5 for a domestic
@@ -577,6 +976,46 @@ export class DeContentInvoice extends DeesElement {
     </div>`;
   }
 
+  /**
+   * What makes a corrected invoice a correction (§ 31 Abs. 5 UStDV): its
+   * title, the invoice it corrects by number and issue date when the document
+   * states them ("spezifisch und eindeutig", Satz 2), and the details it
+   * supplies or corrects, in words. A received corrected invoice may name
+   * neither; then only the title is printed, and no reference is made up.
+   */
+  private renderCorrection(): TemplateResult | null {
+    const accountingDoc = this.accountingDoc;
+    if (accountingDoc?.accountingDocType !== "corrected-invoice") {
+      return null;
+    }
+    const reference = accountingDoc.correctedInvoice;
+    const corrections = accountingDoc.corrections ?? [];
+    return html`<div class="correction">
+      <div class="correctionTitle">
+        ${this.translateKey("correctedInvoice.title")}${reference
+          ? html` ${this.translateKey("correctedInvoice.reference")}
+            ${reference.documentId}${reference.issueDate !== undefined
+              ? html` ${this.translateKey("correctedInvoice.referenceDate")}
+                ${this.formatDay(reference.issueDate)}`
+              : null}`
+          : null}
+      </div>
+      ${corrections.length > 0
+        ? html`<div class="correctionDetails">
+            <div>${this.translateKey("correctedInvoice.corrections")}:</div>
+            <ul>
+              ${corrections.map(
+                (correctionArg) => html`<li>
+                  ${this.translateKey(correctionDetailLabels[correctionArg.detail])}:
+                  ${this.translateKey(correctionDefectLabels[correctionArg.defect])}
+                </li>`
+              )}
+            </ul>
+          </div>`
+        : null}
+    </div>`;
+  }
+
   /** The earlier documents a correction answers, by number and, when known, by date. */
   private renderRelatedDocuments(): TemplateResult | null {
     const relatedDocuments = this.accountingDoc?.relatedDocuments;
@@ -610,8 +1049,8 @@ export class DeContentInvoice extends DeesElement {
    * pages and cannot split one, so a note is handed over token by token: a
    * paragraph in one piece could be taller than a page and would never fit.
    */
-  private renderNotes(): TemplateResult | null {
-    const notes = (this.accountingDoc?.notes ?? [])
+  private renderNotes(notesArg: string[] | undefined): TemplateResult | null {
+    const notes = (notesArg ?? [])
       .filter((noteArg): noteArg is string => typeof noteArg === "string")
       .map((noteArg) => noteArg.replace(/\r\n?/g, "\n").trim())
       .filter((noteArg) => noteArg.length > 0);
@@ -626,6 +1065,240 @@ export class DeContentInvoice extends DeesElement {
     )}`;
   }
 
+  /**
+   * The document a reminder claims, as the claims table and the charges name
+   * it: its kind and its number.
+   */
+  private claimLabel(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder,
+    documentIdArg: string
+  ): string {
+    const claim = reminderArg.claims.find(
+      (claimArg) => claimArg.documentId === documentIdArg
+    );
+    if (!claim) {
+      return documentIdArg;
+    }
+    // a kind this version does not know is named as an invoice, as the letterhead and the content do
+    const label =
+      claimDocumentLabels[claim.documentType] ?? claimDocumentLabels.invoice;
+    return `${this.translateKey(label)} ${documentIdArg}`;
+  }
+
+  /**
+   * The ground of the claim: every reminded document with its number, its
+   * date, the date it fell due when it stated one, its gross total and what is
+   * still open on it.
+   */
+  private renderReminderClaims(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult {
+    return html`<div class="claimGrid topLine dataHeader">
+        <div class="lineItem descriptionCell">
+          ${this.translateKey("paymentReminder@@claim.document")}
+        </div>
+        <div class="lineItem rightAlign issueDateCell">
+          ${this.translateKey("paymentReminder@@claim.issueDate")}
+        </div>
+        <div class="lineItem rightAlign dueDateCell">
+          ${this.translateKey("paymentReminder@@claim.dueDate")}
+        </div>
+        <div class="lineItem rightAlign grossCell">
+          ${this.translateKey("paymentReminder@@claim.totalGross")}
+        </div>
+        <div class="lineItem rightAlign amountCell">
+          ${this.translateKey("paymentReminder@@claim.outstanding")}
+        </div>
+      </div>
+      ${reminderArg.claims.map(
+        (claimArg) => html`<div class="claimGrid needsDataHeader">
+          <div class="lineItem descriptionCell">
+            ${this.claimLabel(reminderArg, claimArg.documentId)}
+          </div>
+          <div class="lineItem rightAlign issueDateCell">
+            ${this.formatDay(claimArg.issueDate)}
+          </div>
+          <div class="lineItem rightAlign dueDateCell">
+            ${claimArg.dueDate !== undefined
+              ? this.formatDay(claimArg.dueDate)
+              : "–"}
+          </div>
+          <div class="lineItem rightAlign grossCell">
+            ${this.formatPrice(claimArg.totalGross)}
+          </div>
+          <div class="lineItem rightAlign amountCell">
+            ${this.formatPrice(claimArg.outstandingAmount)}
+          </div>
+        </div>`
+      )}`;
+  }
+
+  /**
+   * What a charge rests on, as the reminder states it: default interest its
+   * computation (principal, rate a year with the base rate and the surcharge
+   * points of § 288 Abs. 1 or 2 BGB, first and last day), the default lump sum
+   * its provision, and every charge the claim it accrues on. A cost with lump
+   * sums credited against it lists them (§ 288 Abs. 5 Satz 3 BGB); its amount
+   * is already the cost less them.
+   */
+  private renderChargeBasis(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder,
+    chargeArg: plugins.tsclass.finance.TPaymentReminderCharge
+  ): TemplateResult | null {
+    switch (chargeArg.chargeType) {
+      case "default-interest": {
+        const interest = chargeArg.interest;
+        return html`<div class="chargeBasis">
+          ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)}:
+          ${this.formatPrice(interest.principal)} ×
+          ${this.formatPercent(interest.ratePercent)}
+          ${this.translateKey("paymentReminder@@interest.perYear")}
+          (${this.translateKey("paymentReminder@@interest.baseRate")}
+          ${this.formatPercent(interest.baseRatePercent)}
+          ${this.translateKey("paymentReminder@@interest.plus")}
+          ${interest.surchargePoints}
+          ${this.translateKey("paymentReminder@@interest.points")},
+          <span class="citation"
+            >${plugins.shared.defaultInterestCitations[interest.legalBasis]}</span
+          >),
+          ${this.formatDay(interest.from)} – ${this.formatDay(interest.to)}
+        </div>`;
+      }
+      case "default-lump-sum":
+        return html`<div class="chargeBasis">
+          ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)},
+          <span class="citation"
+            >${plugins.shared.DEFAULT_LUMP_SUM_CITATION}</span
+          >
+        </div>`;
+      case "reminder-fee":
+      case "other-cost": {
+        const offsets = chargeArg.lumpSumOffsets ?? [];
+        if (chargeArg.claimDocumentId === undefined && offsets.length === 0) {
+          return null;
+        }
+        return html`${chargeArg.claimDocumentId !== undefined
+          ? html`<div class="chargeBasis">
+              ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)}
+            </div>`
+          : null}
+        ${offsets.map(
+          (offsetArg) => html`<div class="chargeBasis">
+            ${this.translateKey("paymentReminder@@charge.lumpSumOffset")}
+            ${this.claimLabel(reminderArg, offsetArg.claimDocumentId)}:
+            ${this.formatPrice(offsetArg.amount)}
+            (<span class="citation"
+              >${plugins.shared.LUMP_SUM_OFFSET_CITATION}</span
+            >)
+          </div>`
+        )}`;
+      }
+    }
+  }
+
+  /** One row per charge: its description, what it rests on, and its amount. */
+  private renderReminderCharges(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult | null {
+    if (reminderArg.charges.length === 0) {
+      return null;
+    }
+    return html`<div class="chargeGrid topLine dataHeader">
+        <div class="lineItem">
+          ${this.translateKey("paymentReminder@@charge.description")}
+        </div>
+        <div class="lineItem rightAlign amountCell">
+          ${this.translateKey("paymentReminder@@charge.amount")}
+        </div>
+      </div>
+      ${reminderArg.charges.map(
+        (chargeArg) => html`<div class="chargeGrid needsDataHeader">
+          <div class="lineItem chargeText">
+            <div>${chargeArg.description}</div>
+            ${this.renderChargeBasis(reminderArg, chargeArg)}
+          </div>
+          <div class="lineItem rightAlign amountCell">
+            ${this.formatPrice(chargeArg.amount)}
+          </div>
+        </div>`
+      )}`;
+  }
+
+  /** The sums of a reminder: the open claims, the charges and the total payable, without VAT. */
+  private renderReminderSums(
+    totalsArg: plugins.shared.IPaymentReminderTotals,
+    hasChargesArg: boolean
+  ): TemplateResult {
+    return html`<div class="sums">
+      <div class="sumline">
+        <div class="label">
+          ${this.translateKey("paymentReminder@@paymentReminder.sum.claims")}
+        </div>
+        <div class="value rightAlign amountCell">
+          ${this.formatPrice(totalsArg.claimsOutstanding)}
+        </div>
+      </div>
+      ${hasChargesArg
+        ? html`<div class="sumline">
+            <div class="label">
+              ${this.translateKey("paymentReminder@@paymentReminder.sum.charges")}
+            </div>
+            <div class="value rightAlign amountCell">
+              ${this.formatPrice(totalsArg.charges)}
+            </div>
+          </div>`
+        : null}
+      <div class="sumline">
+        <div class="label">
+          ${this.translateKey("paymentReminder@@paymentReminder.sum.payable")}
+        </div>
+        <div class="value value--total rightAlign amountCell">
+          ${this.formatPrice(totalsArg.payable)}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  /**
+   * A payment reminder: the issuer's intro or the standard one, the reminded
+   * documents, the charges, the sums, the notes, the new payment deadline and
+   * the QR pay box for the total payable with the reminder's number.
+   */
+  private renderPaymentReminder(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult {
+    const totals = plugins.shared.getPaymentReminderTotals(reminderArg);
+    return html`
+      <div>
+        ${reminderArg.topText ??
+        this.translateKey("paymentReminder@@introStatement")}
+      </div>
+      ${this.renderReminderClaims(reminderArg)}
+      ${this.renderReminderCharges(reminderArg)}
+      ${this.renderReminderSums(totals, reminderArg.charges.length > 0)}
+      <div class="divider"></div>
+
+      <!-- NOTES -->
+      ${this.renderNotes(reminderArg.notes)}
+
+      <!-- PAYMENT DEADLINE -->
+      ${this.renderPaymentTerms({
+        date: reminderArg.date,
+        dueInDays: reminderArg.dueInDays,
+        labelKey: "paymentReminder@@paymentReminder.deadline",
+        textKey: "paymentReminder@@paymentReminder.deadline.text",
+      })}
+
+      <!-- PAYMENT INFO -->
+      ${this.renderPaymentInfo({
+        from: reminderArg.from,
+        currency: reminderArg.currency,
+        amount: totals.payable,
+        reference: reminderArg.id,
+      })}
+    `;
+  }
+
   private renderReferencedContract(): TemplateResult | null {
     return null;
     // return this.documentSettings.enableInvoiceContractRefSection &&
@@ -648,29 +1321,46 @@ export class DeContentInvoice extends DeesElement {
 
   public async attachInvoiceDom() {
     const contentNodes = await this.getContentNodes();
+    const paymentReminder = this.paymentReminder;
+    if (paymentReminder) {
+      render(this.renderPaymentReminder(paymentReminder), contentNodes.currentContent);
+      this.fitColumns(
+        contentNodes.currentContent,
+        ".claimGrid.dataHeader",
+        reminderColumns
+      );
+      return;
+    }
     const accountingDoc = this.accountingDoc;
+    // throws when the advance payments do not add up to the paid amount
+    const paidAmountSummary = accountingDoc
+      ? plugins.shared.getPaidAmountSummary(accountingDoc, this.getTotalGross())
+      : null;
     render(
       html`
+        ${this.renderCorrection()}
         <div>${this.translateKey(this.docContent.introStatement)}</div>
         ${this.renderRelatedDocuments()}
         <div class="grid topLine dataHeader">
           <div class="lineItem rightAlign">
             ${this.translateKey("invoice@@item.position")}
           </div>
-          <div class="lineItem">
+          <div class="lineItem descriptionCell">
             ${this.translateKey("invoice@@description")}
           </div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem rightAlign quantityCell">
             ${this.translateKey("invoice@@quantity")}
           </div>
-          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem unitCell">
+            ${this.translateKey("invoice@@unit.type")}
+          </div>
+          <div class="lineItem rightAlign unitPriceCell">
             ${this.translateKey("invoice@@price.unit.net")}
           </div>
           <div class="lineItem rightAlign">
             ${this.translateKey("invoice@@vat.short")}
           </div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem rightAlign amountCell">
             ${this.translateKey("invoice@@price.total.net")}
           </div>
         </div>
@@ -678,16 +1368,24 @@ export class DeContentInvoice extends DeesElement {
           (invoiceItem, index) => html`
             <div class="grid needsDataHeader">
               <div class="lineItem rightAlign">${index + 1}</div>
-              <div class="lineItem">${invoiceItem.name}</div>
-              <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
-              <div class="lineItem">${invoiceItem.unitType}</div>
-              <div class="lineItem rightAlign">
+              <div class="lineItem descriptionCell">${invoiceItem.name}</div>
+              <div class="lineItem rightAlign quantityCell">
+                ${this.formatQuantity(invoiceItem.unitQuantity)}
+              </div>
+              <div class="lineItem unitCell">
+                ${plugins.shared.unitName(
+                  this.documentSettings.languageCode,
+                  invoiceItem.unitType,
+                  invoiceItem.unitQuantity
+                )}
+              </div>
+              <div class="lineItem rightAlign unitPriceCell">
                 ${this.formatPrice(invoiceItem.unitNetPrice)}
               </div>
               <div class="lineItem rightAlign">
                 ${invoiceItem.vatPercentage}%
               </div>
-              <div class="lineItem rightAlign">
+              <div class="lineItem rightAlign amountCell">
                 ${this.formatPrice(
                   invoiceItem.unitQuantity * invoiceItem.unitNetPrice
                 )}
@@ -700,7 +1398,7 @@ export class DeContentInvoice extends DeesElement {
             <div class="label">
               ${this.translateKey("invoice@@sum.total.net")}
             </div>
-            <div class="value value--total rightAlign">
+            <div class="value value--total rightAlign amountCell">
               ${this.formatPrice(this.getTotalNet())}
             </div>
           </div>
@@ -722,7 +1420,7 @@ export class DeContentInvoice extends DeesElement {
                       `
                     : html``}
                 </div>
-                <div class="value rightAlign">
+                <div class="value rightAlign amountCell">
                   ${this.formatPrice(vatGroupArg.vatAmountSum)}
                 </div>
               </div>
@@ -730,11 +1428,13 @@ export class DeContentInvoice extends DeesElement {
           })}
           <div class="sumline">
             <div class="label">${this.translateKey("invoice@@totalGross")}</div>
-            <div class="value value--total rightAlign">
+            <div class="value value--total rightAlign amountCell">
               ${this.formatPrice(this.getTotalGross())}
             </div>
           </div>
+          ${paidAmountSummary ? this.renderPaidAmountSums(paidAmountSummary) : null}
         </div>
+        ${paidAmountSummary ? this.renderAdvancePayments(paidAmountSummary) : null}
         <div class="divider"></div>
 
         ${accountingDoc?.reverseCharge ? this.renderReverseChargeNote() : ``}
@@ -743,19 +1443,72 @@ export class DeContentInvoice extends DeesElement {
         ${this.renderReferencedContract()}
 
         <!-- NOTES -->
-        ${this.renderNotes()}
+        ${this.renderNotes(accountingDoc?.notes)}
 
-        <!-- PAYMENT TERMS -->
+        <!-- PAYMENT TERMS AND PAYMENT INFO -->
         ${accountingDoc && this.docContent.requestsPayment
-          ? this.renderPaymentTerms(accountingDoc)
-          : null}
-
-        <!-- PAYMENT INFO -->
-        ${accountingDoc && this.docContent.requestsPayment
-          ? this.renderPaymentInfo(accountingDoc)
+          ? this.renderPaymentRequest(accountingDoc, paidAmountSummary)
           : null}
       `,
       contentNodes.currentContent
     );
+    this.fitColumns(
+      contentNodes.currentContent,
+      ".grid.dataHeader",
+      positionColumns
+    );
+  }
+
+  /**
+   * Sizes the columns of a table to their widest cell. Every row is a grid of
+   * its own, so the rows only line up when a column has one width for all of
+   * them; each page renders every row before it is trimmed, so every page
+   * measures the same widths.
+   *
+   * A column is never narrower than its minimum. The widths the columns ask
+   * for beyond their minimums are granted out of the row's width less its
+   * fixed columns and the minimum of its flexible column (the description),
+   * in equal shares, so the table always fits the page. A cell whose text is
+   * still wider than its column, such as an amount beyond hundreds of
+   * billions, is set in a smaller font, down to 8 px, and wraps inside its
+   * column once that is not enough, so it never runs into its neighbour.
+   */
+  private fitColumns(
+    containerArg: HTMLElement,
+    headerRowSelectorArg: string,
+    layoutArg: IColumnLayout
+  ): void {
+    const cellsOf = (columnArg: IFittedColumn): HTMLElement[] =>
+      Array.from(containerArg.querySelectorAll<HTMLElement>(columnArg.cellSelector));
+    for (const column of layoutArg.columns) {
+      this.style.removeProperty(column.widthProperty);
+      for (const cell of cellsOf(column)) {
+        cell.style.removeProperty("font-size");
+        cell.style.removeProperty("white-space");
+        cell.style.removeProperty("overflow-wrap");
+      }
+    }
+    const headerRow = containerArg.querySelector<HTMLElement>(headerRowSelectorArg);
+    if (!headerRow || headerRow.clientWidth === 0) {
+      // not laid out: the columns keep their minimums
+      return;
+    }
+    const wanted = layoutArg.columns.map((columnArg) =>
+      cellsOf(columnArg).reduce(
+        (widestArg, cellArg) => Math.max(widestArg, neededWidth(cellArg)),
+        columnArg.minWidth
+      )
+    );
+    const widths = shareWidth(
+      wanted,
+      layoutArg.columns.map((columnArg) => columnArg.minWidth),
+      headerRow.clientWidth - layoutArg.fixedWidth - layoutArg.flexibleMinWidth
+    );
+    layoutArg.columns.forEach((columnArg, index) => {
+      this.style.setProperty(columnArg.widthProperty, `${widths[index]}px`);
+      for (const cell of cellsOf(columnArg)) {
+        fitCellText(cell, widths[index]);
+      }
+    });
   }
 }