Marketplace payout statement

{#- Marketplace payout statement: German number and date formatting with English labels.
    Gross sales, refunds and fees are derived from the order and fee lines; fees are grouped by type. -#}
{%- set locale = statement.locale | default("de-DE") -%}
{%- set currency = statement.currency -%}
{%- set date_fmt = "%d.%m.%Y" -%}
{%- set gross = orders | sum_by("gross") -%}
{%- set refunds = orders | sum_by("refunded") -%}
{%- set total_fees = fees | sum_by("amount") -%}
{%- set net = gross - refunds - total_fees -%}
{%- set fee_groups = fees | sort(attribute="type") | group_by("type") -%}
{%- set net_share = (net / gross * 100) if gross else 0 -%}
{%- set fee_share = (total_fees / gross * 100) if gross else 0 -%}
{%- set refund_share = (refunds / gross * 100) if gross else 0 -%}

{%- macro money(value) -%}{{ value | format_currency(currency, locale) }}{%- endmacro -%}

<header class="masthead">
  <div class="brand">
    <svg class="logo" viewBox="0 0 40 40" aria-hidden="true">
      <rect width="40" height="40" rx="10" fill="#5a3fd1"/>
      <path d="M10 14h20M10 20h20M10 26h20" stroke="#cfc5f7" stroke-width="3" stroke-linecap="round"/>
      <path d="M15 9v22M25 9v22" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-dasharray="4 2"/>
    </svg>
    <div>
      <p class="brand-name">{{ marketplace.name }}</p>
      <p class="brand-meta">{{ marketplace.legal_name }} · {{ marketplace.address }} · VAT ID {{ marketplace.vat_id }}</p>
    </div>
  </div>
  <div class="doc">
    <h1>Payout statement</h1>
    <p class="doc-meta">{{ statement.period_start | format_date(date_fmt, locale) }} – {{ statement.period_end | format_date(date_fmt, locale) }}</p>
    <p class="doc-meta">No. {{ statement.number }}</p>
  </div>
</header>

<section class="top">
  <div class="seller">
    <p class="label">Seller</p>
    <p class="shop">{{ seller.shop_name }}</p>
    <p>{{ seller.owner }}</p>
    <p>{{ seller.address | nl2br }}</p>
    <p class="muted">Seller ID {{ seller.seller_id }} · VAT ID {{ seller.vat_id }}</p>
  </div>

  <div class="payout-card">
    <p class="label">Net payout</p>
    <p class="payout-amount">{{ money(net) }}</p>
    <dl>
      <dt>Payout date</dt><dd>{{ statement.payout_date | format_date(date_fmt, locale) }}</dd>
      <dt>Account holder</dt><dd>{{ payout_account.holder }}</dd>
      <dt>IBAN</dt><dd class="mono">{{ payout_account.iban }}</dd>
      <dt>BIC · Bank</dt><dd><span class="mono">{{ payout_account.bic }}</span> · {{ payout_account.bank }}</dd>
    </dl>
  </div>
</section>

<section class="summary">
  <div class="summary-table">
    <table>
      <tr><th scope="row">Gross sales <span class="muted">({{ orders | length }} orders, {{ orders | sum_by("items") | int }} items)</span></th><td class="num">{{ money(gross) }}</td></tr>
      <tr><th scope="row">Refunds to buyers</th><td class="num">−{{ money(refunds) }}</td></tr>
      {%- for group in fee_groups %}
      <tr class="fee-row"><th scope="row">{{ group.grouper }}</th><td class="num">−{{ money(group.list | sum_by("amount")) }}</td></tr>
      {%- endfor %}
      <tr class="net"><th scope="row">Net payout</th><td class="num">{{ money(net) }}</td></tr>
    </table>
  </div>

  <figure class="split" aria-labelledby="split-caption split-legend">
    <figcaption class="label" id="split-caption">Where your gross sales went</figcaption>
    <svg viewBox="0 0 100 10" preserveAspectRatio="none" role="img" aria-label="Share of gross sales">
      <rect x="0" y="0" width="{{ net_share | round(2) }}" height="10" fill="#177a4b"/>
      <rect x="{{ net_share | round(2) }}" y="0" width="{{ fee_share | round(2) }}" height="10" fill="#5a3fd1"/>
      <rect x="{{ (net_share + fee_share) | round(2) }}" y="0" width="{{ refund_share | round(2) }}" height="10" fill="#c3bcd9"/>
    </svg>
    <ul class="legend" id="split-legend">
      <li><span class="swatch net-swatch"></span>Paid out <strong>{{ (net / gross) | format_percent(locale, 1) }}</strong></li>
      <li><span class="swatch fee-swatch"></span>Fees <strong>{{ (total_fees / gross) | format_percent(locale, 1) }}</strong></li>
      <li><span class="swatch refund-swatch"></span>Refunds <strong>{{ (refunds / gross) | format_percent(locale, 1) }}</strong></li>
    </ul>
  </figure>
</section>

<h2 class="section-title">Orders in this period</h2>
<table class="data">
  <thead>
    <tr>
      <th scope="col">Order</th>
      <th scope="col">Date</th>
      <th class="num" scope="col">Items</th>
      <th scope="col">Ship to</th>
      <th scope="col">Status</th>
      <th class="num" scope="col">Gross</th>
      <th class="num" scope="col">Refunded</th>
    </tr>
  </thead>
  <tbody>
    {%- for order in orders %}
    <tr>
      <td class="mono">{{ order.number }}</td>
      <td>{{ order.date | format_date(date_fmt, locale) }}</td>
      <td class="num">{{ order.items }}</td>
      <td>{{ order.ship_to }}</td>
      <td>
        {%- if order.refunded >= order.gross %}<span class="status refunded">Refunded</span>
        {%- elif order.refunded > 0 %}<span class="status partial">Partly refunded</span>
        {%- else %}<span class="status done">Completed</span>{% endif -%}
      </td>
      <td class="num">{{ money(order.gross) }}</td>
      <td class="num">{% if order.refunded %}−{{ money(order.refunded) }}{% else %}<span class="muted">–</span>{% endif %}</td>
    </tr>
    {%- endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="5" scope="row">Total</th>
      <td class="num">{{ money(gross) }}</td>
      <td class="num">−{{ money(refunds) }}</td>
    </tr>
  </tfoot>
</table>

<h2 class="section-title fees-title">Fee details</h2>
<table class="data fees">
  <thead>
    <tr>
      <th scope="col">Reference</th>
      <th scope="col">Calculation</th>
      <th class="num" scope="col">Amount</th>
    </tr>
  </thead>
  {%- for group in fee_groups %}
  <tbody class="fee-group">
    <tr class="group-head">
      <td colspan="3">{{ group.grouper }} <span class="count">{{ group.list | length }} {{ "line" if group.list | length == 1 else "lines" }}</span></td>
    </tr>
    {%- for fee in group.list %}
    <tr>
      <td class="mono">{{ fee.reference }}</td>
      <td>
        {%- if fee.description %}{{ fee.description }}{% endif %}
        {%- if fee.description and fee.rate %} · {% endif %}
        {%- if fee.rate %}{{ fee.rate | format_percent(locale) }} of {{ money(fee.basis | abs) }}{% if fee.fixed %} + {{ money(fee.fixed) }}{% endif %}{% endif -%}
      </td>
      <td class="num{{ ' credit' if fee.amount < 0 else '' }}">{{ money(fee.amount) }}</td>
    </tr>
    {%- endfor %}
    <tr class="group-total">
      <td colspan="2">Subtotal {{ group.grouper | lower }}</td>
      <td class="num">{{ money(group.list | sum_by("amount")) }}</td>
    </tr>
  </tbody>
  {%- endfor %}
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total fees</th>
      <td class="num">{{ money(total_fees) }}</td>
    </tr>
  </tfoot>
</table>

<section class="notes">
  {{ notes | markdown }}
  <p>Seller support: {{ marketplace.support_email }}</p>
</section>

<title>Payout statement {{ statement.number }} – {{ seller.shop_name }}</title>
<style>
  :root {
    --ink: #1f1b2e;
    --muted: #686379;
    --rule: #e3e0ec;
    --violet: #5a3fd1;
    --violet-dark: #3f2aa0;
    --lilac: #f1eefc;
    --green: #177a4b;
    --green-soft: #e4f3ea;
    --amber-soft: #fdf1dc;
  }
  * { box-sizing: border-box; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body {
    margin: 0;
    color: var(--ink);
    font-family: "Noto Sans", "Liberation Sans", Arial, sans-serif;
    font-size: 8.6pt;
    line-height: 1.42;
  }
  p, h1, h2, figure { margin: 0; }
  .muted { color: var(--muted); }
  .mono { font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 7.8pt; }
  .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .label {
    margin-bottom: 1.2mm;
    font-family: "Montserrat", "Liberation Sans", Arial, sans-serif;
    font-size: 6.6pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .masthead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 5mm; border-bottom: 0.3mm solid var(--rule); }
  .brand { display: flex; align-items: center; gap: 3mm; }
  .logo { width: 11mm; height: 11mm; }
  .brand-name { font-family: "Montserrat", "Liberation Sans", Arial, sans-serif; font-size: 13pt; font-weight: 700; line-height: 1.2; color: var(--violet); }
  .brand-meta { font-size: 7.2pt; color: var(--muted); }
  .doc { text-align: right; }
  .doc h1 { font-family: "Montserrat", "Liberation Sans", Arial, sans-serif; font-size: 17pt; font-weight: 700; line-height: 1.15; }
  .doc-meta { font-size: 8pt; color: var(--muted); }

  .top { display: grid; grid-template-columns: 1fr 88mm; gap: 10mm; margin-top: 6mm; }
  .shop { font-family: "Montserrat", "Liberation Sans", Arial, sans-serif; font-size: 11pt; font-weight: 700; }
  .seller .muted { margin-top: 1.5mm; font-size: 7.6pt; }
  .payout-card { padding: 4mm 5mm; border-radius: 3mm; background: var(--violet); color: #ffffff; }
  .payout-card .label { color: #d9d1fb; }
  .payout-amount { font-family: "Montserrat", "Liberation Sans", Arial, sans-serif; font-size: 22pt; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .payout-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5mm 3mm; margin: 2.5mm 0 0; padding-top: 2.5mm; border-top: 0.25mm solid #7d67e0; font-size: 7.8pt; }
  .payout-card dt { color: #d9d1fb; }
  .payout-card dd { margin: 0; }
  .payout-card .mono { font-size: 7.4pt; }

  .summary { display: grid; grid-template-columns: 1fr 70mm; gap: 10mm; align-items: start; margin: 6mm 0 7mm; }
  .summary table { width: 100%; border-collapse: collapse; }
  .summary td, .summary th { padding: 1.1mm 0; border-bottom: 0.2mm solid var(--rule); }
  .summary th { font-weight: inherit; text-align: left; }
  .summary .fee-row th { padding-left: 4mm; color: var(--muted); }
  .summary .net td, .summary .net th { padding-top: 2mm; border-top: 0.4mm solid var(--ink); border-bottom: none; font-size: 10.5pt; font-weight: 700; color: var(--green); }
  .split { padding: 3.5mm 4mm; border-radius: 2mm; background: var(--lilac); }
  .split svg { display: block; width: 100%; height: 6mm; margin: 1mm 0 2.5mm; border-radius: 1mm; }
  .legend { margin: 0; padding: 0; list-style: none; font-size: 7.8pt; }
  .legend li { display: flex; align-items: center; gap: 2mm; margin-bottom: 0.8mm; }
  .legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
  .swatch { display: inline-block; width: 3mm; height: 3mm; border-radius: 0.6mm; }
  .net-swatch { background: var(--green); }
  .fee-swatch { background: var(--violet); }
  .refund-swatch { background: #c3bcd9; }

  .section-title {
    margin: 0 0 2mm;
    font-family: "Montserrat", "Liberation Sans", Arial, sans-serif;
    font-size: 10.5pt;
    font-weight: 700;
    break-after: avoid;
    page-break-after: avoid;
  }
  .fees-title { margin-top: 8mm; }

  table.data { width: 100%; border-collapse: collapse; }
  table.data thead { display: table-header-group; }
  /* Totals print once, under the last row: a footer group would repeat at the bottom of every page. */
  table.data tfoot { display: table-row-group; }
  table.data thead th {
    padding: 1.6mm 2mm;
    background: var(--lilac);
    font-family: "Montserrat", "Liberation Sans", Arial, sans-serif;
    font-size: 6.6pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    color: var(--violet-dark);
  }
  table.data thead th.num { text-align: right; }
  table.data td, table.data tfoot th { padding: 1.6mm 2mm; border-bottom: 0.2mm solid var(--rule); vertical-align: top; }
  table.data tr { break-inside: avoid; page-break-inside: avoid; }
  table.data tfoot td, table.data tfoot th { padding-top: 2.2mm; border-top: 0.4mm solid var(--ink); border-bottom: none; font-weight: 700; }
  table.data tfoot th { text-align: left; }
  .status { display: inline-block; padding: 0 1.8mm; border-radius: 2mm; font-size: 6.8pt; font-weight: 600; }
  .status.done { background: var(--green-soft); color: var(--green); }
  .status.partial { background: var(--amber-soft); color: #8a5a00; }
  .status.refunded { background: #eeeef2; color: var(--muted); }

  .fees .group-head td { padding-top: 3mm; border-bottom: 0.3mm solid var(--violet); font-family: "Montserrat", "Liberation Sans", Arial, sans-serif; font-weight: 700; color: var(--violet-dark); }
  .fees .count { margin-left: 1.5mm; font-family: "Noto Sans", "Liberation Sans", Arial, sans-serif; font-size: 7pt; font-weight: 400; color: var(--muted); }
  .fees td.mono { width: 34mm; }
  .fees .credit { color: var(--green); }
  .fees .group-total td { border-bottom: none; font-weight: 600; color: var(--muted); }
  .fees .group-total td.num { color: var(--ink); }
  /* A group's heading stays with its first line, its subtotal with its last. */
  .fees .group-head { break-after: avoid; page-break-after: avoid; }
  .fees .group-total { break-before: avoid; page-break-before: avoid; }

  .notes { margin-top: 7mm; padding-top: 3mm; border-top: 0.25mm solid var(--rule); font-size: 7.8pt; color: var(--muted); break-inside: avoid; page-break-inside: avoid; }
  .notes p { margin: 0 0 1.2mm; }
  .notes strong { color: var(--ink); }
</style>

{
  "header": {
    "enabled": false
  },
  "footer": {
    "enabled": true,
    "html": "<div style=\"box-sizing:border-box;width:100%;padding-bottom:7mm;display:flex;justify-content:space-between;font-family:'Noto Sans','Liberation Sans',Arial,sans-serif;font-size:7pt;color:#686379\"><span>{{ marketplace.name }} · Payout statement {{ statement.number }} · Seller {{ seller.seller_id }}</span><span>Page <span class=\"page\"></span> of <span class=\"pages\"></span></span></div>",
    "height": "10mm"
  }
}