Expense claim

{#- Employee expense claim. Each line is converted to the company currency (amount × fx_rate, or miles × the mileage
    rate), rounded to the cent; reclaimable VAT is worked out from the converted amount and the line's vat_rate
    (0 when no VAT can be reclaimed). Totals, the summary by category and the amount due after the advance all derive
    from the lines. -#}
{%- set loc = "en-GB" -%}
{%- set cur = company.currency -%}
{%- set symbols = {"GBP": "£", "EUR": "€", "USD": "US$", "CHF": "CHF "} -%}
{%- set ns = namespace(rows=[], total=0.0, vat=0.0) -%}
{%- for line in lines -%}
  {%- if line.miles -%}
    {%- set amount = (line.miles * claim.mileage_rate) | round(2) -%}
  {%- else -%}
    {%- set amount = (line.amount * (line.fx_rate | default(1))) | round(2) -%}
  {%- endif -%}
  {%- set rate = line.vat_rate | default(0) -%}
  {%- set vat = (amount * rate / (100 + rate)) | round(2) -%}
  {%- set ns.rows = ns.rows + [{"category": line.category, "amount": amount, "vat": vat}] -%}
  {%- set ns.total = ns.total + amount -%}
  {%- set ns.vat = ns.vat + vat -%}
{%- endfor -%}
{%- set total = ns.total | round(2) -%}
{%- set vat_total = ns.vat | round(2) -%}
{%- set advance = claim.advance | default(0) -%}
{%- set due = (total - advance) | round(2) -%}
{%- set cns = namespace(max=0.0) -%}
{%- for group in ns.rows | groupby("category") -%}{%- set s = group.list | sum_by("amount") -%}{%- if s > cns.max -%}{%- set cns.max = s -%}{%- endif -%}{%- endfor -%}

{%- macro money(value) -%}{{ value | format_currency(cur, loc) }}{%- endmacro -%}
{%- macro day(value) -%}{{ value | format_date("%-d %b %Y", loc) }}{%- endmacro -%}
{%- macro short_day(value) -%}{{ value | format_date("%-d %b", loc) }}{%- endmacro -%}

<header class="top">
  <div class="brand">
    <svg viewBox="0 0 44 44" aria-hidden="true">
      <rect width="44" height="44" rx="10" fill="#0f6e6e"/>
      <path d="M8 27c4.5-4 9-4 13.5 0s9 4 14.5 0" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
      <path d="M8 19c4.5-4 9-4 13.5 0s9 4 14.5 0" fill="none" stroke="#9fd8d3" stroke-width="3" stroke-linecap="round"/>
    </svg>
    <div>
      <p class="brand-name">{{ company.name }}</p>
      <p class="brand-address">{{ company.address | nl2br }}</p>
    </div>
  </div>
  <div class="doc">
    <h1>Expense claim</h1>
    <p class="number">{{ claim.number }}</p>
  </div>
</header>

<section class="info">
  <div>
    <p class="label">Claimant</p>
    <dl>
      <dt>Name</dt><dd>{{ employee.name }}</dd>
      <dt>Employee no.</dt><dd>{{ employee.number }}</dd>
      <dt>Department</dt><dd>{{ employee.department }}</dd>
      <dt>Cost centre</dt><dd>{{ employee.cost_centre }}</dd>
    </dl>
  </div>
  <div>
    <p class="label">Claim</p>
    <dl>
      <dt>Period</dt><dd>{{ day(claim.period_start) }} – {{ day(claim.period_end) }}</dd>
      <dt>Submitted</dt><dd>{{ day(claim.submitted_on) }}</dd>
      <dt>Purpose</dt><dd>{{ claim.purpose }}</dd>
      <dt>Approver</dt><dd>{{ claim.approver }}</dd>
    </dl>
  </div>
  {% if claim.receipts_url %}
  <div class="receipts">
    {{ claim.receipts_url | qrcode(size=160, margin=0, ecc="M", alt="QR code linking to the receipt images") }}
    Receipt images
  </div>
  {% endif %}
</section>

<section class="summary">
  <div class="tile"><p class="label">Total claimed</p><p class="value">{{ money(total) }}</p></div>
  <div class="tile"><p class="label">VAT reclaimable</p><p class="value">{{ money(vat_total) }}</p></div>
  <div class="tile"><p class="label">Advance received</p><p class="value">{{ money(advance) }}</p></div>
  <div class="tile due"><p class="label">{{ "Due to you" if due >= 0 else "To repay" }}</p><p class="value">{{ money(due | abs) }}</p></div>
</section>

<table class="lines">
  <thead>
    <tr>
      <th class="date" scope="col">Date</th>
      <th class="ref" scope="col">Ref.</th>
      <th class="cat" scope="col">Category</th>
      <th scope="col">Description</th>
      <th class="num original" scope="col">Original</th>
      <th class="num amount" scope="col">Amount</th>
      <th class="num vat" scope="col">VAT</th>
    </tr>
  </thead>
  <tbody>
    {% for line in lines %}
    {%- set row = ns.rows[loop.index0] %}
    <tr>
      <td class="date">{{ short_day(line.date) }}</td>
      <td class="ref">{{ line.receipt | default("–") }}</td>
      <td class="cat"><span class="chip">{{ line.category }}</span></td>
      <td>{{ line.description }}{% if line.project %}<span class="project">Project {{ line.project }}</span>{% endif %}</td>
      <td class="num original">
        {%- if line.miles -%}{{ line.miles | format_number(loc, 0) }} mi × {{ money(claim.mileage_rate) }}
        {%- elif line.currency and line.currency != cur -%}{{ symbols[line.currency] or (line.currency ~ " ") }}{{ line.amount | format_number(loc, 2) }} × {{ line.fx_rate | format_number(loc, 4) }}
        {%- else -%}–{%- endif -%}
      </td>
      <td class="num amount">{{ money(row.amount) }}</td>
      <td class="num vat">{{ money(row.vat) if row.vat else "–" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<section class="bottom">
  <div>
    <p class="label">By category</p>
    {% for group in ns.rows | groupby("category") %}
    {%- set s = group.list | sum_by("amount") %}
    <div class="cat-row">
      <span>{{ group.grouper }}</span>
      <span class="cat-bar"><span style="width: {{ (s / cns.max * 100) | round(1) }}%"></span></span>
      <span class="num">{{ money(s) }}</span>
    </div>
    {% endfor %}
  </div>
  <table class="totals">
    <tr><th scope="row">Expenses ({{ lines | length }} items)</th><td class="num">{{ money(total) }}</td></tr>
    <tr><th scope="row" class="muted">of which reclaimable VAT</th><td class="num muted">{{ money(vat_total) }}</td></tr>
    <tr class="grand"><th scope="row">Total claimed</th><td class="num">{{ money(total) }}</td></tr>
    {% if advance %}<tr><th scope="row">Less advance received</th><td class="num">−{{ money(advance) }}</td></tr>{% endif %}
    <tr class="due"><th scope="row">{{ "Due to you" if due >= 0 else "To repay" }}</th><td class="num">{{ money(due | abs) }}</td></tr>
  </table>
</section>

{% if notes %}<p class="notes">{{ notes }}</p>{% endif %}

<section class="approvals">
  <div class="approval">
    <h2>Claimant</h2>
    <p>I confirm these expenses were incurred on company business and have not been claimed before.</p>
    <div class="sign"></div>
    <div class="sign-meta"><span>{{ employee.name }}</span><span>Date</span></div>
  </div>
  <div class="approval">
    <h2>Approved by</h2>
    <p>{{ claim.approver_role }}: checked against the expenses policy and the project budgets.</p>
    <div class="sign"></div>
    <div class="sign-meta"><span>{{ claim.approver }}</span><span>Date</span></div>
  </div>
  <div class="approval">
    <h2>Finance</h2>
    <p>{% if due >= 0 %}Pay {{ money(due) }} to the account ending {{ employee.bank_account_ending }}.{% else %}Recover {{ money(due | abs) }} through payroll.{% endif %}</p>
    <div class="sign"></div>
    <div class="sign-meta"><span>Paid on</span><span>Initials</span></div>
  </div>
</section>

<title>Expense claim {{ claim.number }} – {{ employee.name }}</title>
<style>
  :root {
    --ink: #17212b;
    --muted: #5e6b78;
    --rule: #dbe1e7;
    --soft: #f2f5f8;
    --teal: #0f6e6e;
    --teal-soft: #e2f1f0;
    --coral: #d0603c;
  }
  * { box-sizing: border-box; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body {
    margin: 0;
    color: var(--ink);
    font-family: "Inter", "Liberation Sans", Arial, sans-serif;
    font-size: 8.6pt;
    line-height: 1.42;
  }
  p, h1, h2 { margin: 0; }
  .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .muted { color: var(--muted); }
  .label { font-size: 6.8pt; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2mm; }

  /* Header */
  .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
  .brand { display: flex; gap: 3mm; align-items: flex-start; }
  .brand svg { width: 11mm; height: 11mm; flex: none; }
  .brand-name { font-size: 11pt; font-weight: 700; }
  .brand-address { margin-top: 0.6mm; font-size: 7.6pt; color: var(--muted); line-height: 1.4; }
  .doc { text-align: right; }
  .doc h1 { font-size: 22pt; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .doc .number { margin-top: 1.6mm; font-size: 9.5pt; font-weight: 600; color: var(--teal); font-variant-numeric: tabular-nums; }

  .info { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 7mm; margin: 6mm 0 5mm; padding: 4mm 0; border-top: 0.4mm solid var(--ink); border-bottom: 0.2mm solid var(--rule); }
  .info dl { display: grid; grid-template-columns: auto 1fr; gap: 0.7mm 3.5mm; margin: 0; }
  .info dt { color: var(--muted); }
  .info dd { margin: 0; font-weight: 600; }
  .receipts { width: 26mm; text-align: center; font-size: 6.8pt; color: var(--muted); line-height: 1.3; }
  .receipts img { display: block; width: 20mm; height: 20mm; margin: 0 auto 1mm; }

  /* Summary */
  .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 6mm; break-inside: avoid; page-break-inside: avoid; }
  .tile { padding: 3mm 3.5mm; border-radius: 1.5mm; background: var(--soft); }
  .tile .value { margin-top: 0.6mm; font-size: 14pt; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .tile.due { background: var(--teal); color: #ffffff; }
  .tile.due .label { color: #cfe8e6; }

  /* Lines */
  table.lines { width: 100%; border-collapse: collapse; }
  table.lines thead { display: table-header-group; }
  table.lines th {
    padding: 1.8mm 1.6mm; border-bottom: 0.35mm solid var(--ink); text-align: left; vertical-align: bottom;
    font-size: 6.6pt; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  table.lines th.num { text-align: right; }
  table.lines td { padding: 1.6mm 1.6mm; border-bottom: 0.2mm solid var(--rule); vertical-align: top; }
  table.lines tr { break-inside: avoid; page-break-inside: avoid; }
  .date { width: 13mm; white-space: nowrap; }
  .ref { width: 10mm; font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 7.4pt; color: var(--muted); }
  .cat { width: 25mm; }
  .chip { display: inline-block; padding: 0.2mm 1.6mm; border-radius: 0.8mm; background: var(--teal-soft); color: var(--teal); font-size: 7pt; font-weight: 600; white-space: nowrap; }
  .project { display: block; margin-top: 0.4mm; font-size: 7pt; color: var(--muted); }
  .original { width: 30mm; font-size: 7.6pt; color: var(--muted); }
  .amount { width: 20mm; font-weight: 600; }
  .vat { width: 16mm; }

  /* Bottom */
  .bottom { display: grid; grid-template-columns: 1fr 78mm; gap: 9mm; margin-top: 6mm; break-inside: avoid; page-break-inside: avoid; }
  .cat-row { display: grid; grid-template-columns: 30mm 1fr 19mm; gap: 2.5mm; align-items: center; padding: 1.1mm 0; }
  .cat-bar { height: 2.2mm; border-radius: 1.1mm; background: #e6ebef; overflow: hidden; }
  .cat-bar span { display: block; height: 100%; border-radius: 1.1mm; background: var(--teal); }
  .totals { width: 100%; border-collapse: collapse; }
  .totals td, .totals th { padding: 1.4mm 2mm; }
  .totals th { font-weight: inherit; text-align: left; }
  .totals .grand td, .totals .grand th { border-top: 0.4mm solid var(--ink); font-size: 10pt; font-weight: 700; }
  .totals .due td, .totals .due th { background: var(--teal-soft); color: var(--teal); font-size: 10pt; font-weight: 700; }
  .notes { margin-top: 5mm; padding: 3mm 4mm; border-left: 0.9mm solid var(--coral); background: #fbf1ed; font-size: 7.8pt; break-inside: avoid; page-break-inside: avoid; }

  /* Approvals */
  .approvals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; margin-top: 7mm; break-inside: avoid; page-break-inside: avoid; }
  .approval { padding: 3.5mm 4mm; border: 0.3mm solid var(--rule); border-radius: 1.5mm; }
  .approval h2 { font-size: 7.2pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
  .approval p { margin-top: 1.2mm; font-size: 7.6pt; }
  .sign { height: 11mm; border-bottom: 0.3mm solid var(--ink); }
  .sign-meta { display: flex; justify-content: space-between; margin-top: 1mm; font-size: 7pt; color: var(--muted); }
</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;gap:6mm;font-family:Inter,'Liberation Sans',Arial,sans-serif;font-size:7pt;color:#5e6b78\"><span>{{ company.name }} · Expense claim {{ claim.number }} · {{ employee.name }}</span><span style=\"white-space:nowrap\">Page <span class=\"page\"></span> of <span class=\"pages\"></span></span></div>",
    "height": "12mm"
  }
}