> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formepdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expense Report

> An expense report with an itemised claim table, category summary, and a settlement stack that nets company-card charges against the claim.

<Frame caption="Expense Report — rendered output">
  <img src="https://mintcdn.com/dataferry/I-nCXjDKaxTBieX4/images/templates/expense-report/page-1.webp?fit=max&auto=format&n=I-nCXjDKaxTBieX4&q=85&s=d2bb5229fe037878d87be47b7e990f37" alt="Expense Report, page 1" width="1100" height="1424" data-path="images/templates/expense-report/page-1.webp" />
</Frame>

An expense report with an itemised claim table, category summary, and a settlement stack that nets company-card charges against the claim. Change the items and recompute both summaries — category totals and the settlement must both reach 1,089.79 in the sample. The entertainment line carries its business-purpose annotation, as policy requires.

**Engine features exercised:** @page margin boxes with page counters, six-column claim table, split columns via explicit widths, three-slot signature row.

Render it:

```bash theme={null}
npx @formepdf/html templates/expense-report/index.html -o expense-report.pdf
```

<CodeGroup>
  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Expense report EXP-3308 — Northmoor Industrial Group, Inc.</title>
  <link rel="stylesheet" href="../northmoor-shared.css">
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="sheet">
  <div class="atop"></div>
  <div class="pagefill">

  <header>
    <div class="hd">
      <div class="mast-left">
        <div class="mark">N</div>
        <div>
          <div class="wm">Northmoor</div>
          <div class="sub" style="margin-top: 3pt">Finance — Travel &amp; Expense</div>
        </div>
      </div>
      <div class="addr" style="text-align: right">418 Ellingham Road, Suite 300<br>Rochester, NY 14604<br>Form F-22 rev. 4 · Jan 2026</div>
    </div>
    <div class="hr2 mast-divider"></div>

    <div class="dochead">
      <div>
        <div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Travel &amp; expense · form F-22</div>
        <h1 class="dtitle">Expense report</h1>
      </div>
      <div style="text-align: right">
        <div class="lbl" style="margin-bottom: 5.25pt">Report number</div>
        <div class="refnum">EXP-3308</div>
      </div>
    </div>
  </header>

  <div class="meta meta-doc">
    <div><div class="lbl">Employee</div>Dana Whitcomb<br>Accounts Receivable<br>Employee no. 20417</div>
    <div><div class="lbl">Purpose</div>Site visit and collections meeting<br>Brightwater Foods, Cleveland OH</div>
    <div><div class="lbl">Period</div>02–04 September 2026<div class="lbl meta-gap">Submitted</div>07 September 2026</div>
    <div><div class="lbl">Approver</div>M. Okonjo, Controller<div class="lbl meta-gap">Cost centre</div>3100 · Finance</div>
  </div>

  <table class="t items">
    <thead>
      <tr>
        <th scope="col" style="width: 55.5pt">Date</th>
        <th scope="col">Description</th>
        <th scope="col" style="width: 72pt">Category</th>
        <th scope="col" style="width: 55.5pt">Paid by</th>
        <th scope="col" class="num" style="width: 45pt">Qty</th>
        <th scope="col" class="num" style="width: 66pt">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>02 Sep</td><td>Airfare, Rochester–Cleveland return, coach</td><td>Air travel</td><td>Company card</td><td class="num">1</td><td class="num">412.80</td></tr>
      <tr><td>02 Sep</td><td>Taxi, airport to plant</td><td>Ground</td><td>Personal</td><td class="num">1</td><td class="num">38.50</td></tr>
      <tr><td>02 Sep</td><td>Hotel, Ellsworth Inn, two nights at 168.00</td><td>Lodging</td><td>Company card</td><td class="num">2</td><td class="num">336.00</td></tr>
      <tr><td>03 Sep</td><td>Meals, individual, within 60.00 daily cap</td><td>Meals</td><td>Personal</td><td class="num">1</td><td class="num">46.25</td></tr>
      <tr><td>03 Sep</td><td>Parking, plant visitor lot</td><td>Ground</td><td>Personal</td><td class="num">1</td><td class="num">24.00</td></tr>
      <tr><td>03 Sep</td><td>Mileage, personal vehicle, 62 mi at 0.67</td><td>Mileage</td><td>Personal</td><td class="num">62</td><td class="num">41.54</td></tr>
      <tr><td>04 Sep</td><td>Meals, individual</td><td>Meals</td><td>Personal</td><td class="num">1</td><td class="num">51.80</td></tr>
      <tr><td>04 Sep</td><td>Client dinner — M. Reyes, T. Ault, D. Whitcomb<br><span class="dim">Business purpose: payment plan for INV-4102 · itemised receipt attached</span></td><td>Entertainment</td><td>Personal</td><td class="num">3</td><td class="num">138.90</td></tr>
      <tr class="gsub"><td></td><td>Total expenses claimed</td><td></td><td></td><td class="num">8 items</td><td class="num">1,089.79</td></tr>
    </tbody>
  </table>

  <div class="twocol">
    <div style="flex-grow: 1">
      <h2 class="lbl" style="margin: 0 0 5.25pt">Category summary</h2>
      <table class="t mini">
        <tbody>
          <tr><th scope="row" class="rlab">Air travel</th><td class="num">412.80</td></tr>
          <tr><th scope="row" class="rlab">Lodging</th><td class="num">336.00</td></tr>
          <tr><th scope="row" class="rlab">Meals and entertainment</th><td class="num">236.95</td></tr>
          <tr class="pre-total"><th scope="row" class="rlab">Ground and mileage</th><td class="num">104.04</td></tr>
          <tr class="mini-total"><th scope="row" class="rlab">Total</th><td class="num">1,089.79</td></tr>
        </tbody>
      </table>
    </div>
    <div style="flex-grow: 1">
      <table class="tt tt-flush">
        <tbody>
          <tr><td>Total claimed</td><td class="num">1,089.79</td></tr>
          <tr><td>Less charged to company card</td><td class="num">(748.80)</td></tr>
          <tr><td>Less cash advance</td><td class="num">0.00</td></tr>
          <tr class="total"><td>Due to employee</td><td class="num">340.99</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="pagefill-spacer"></div>

  <div class="sigrow sig-exp">
    <div class="sigcell lbl" style="flex-grow: 1">Employee — D. Whitcomb</div>
    <div class="sigcell lbl" style="flex-grow: 1">Approver — M. Okonjo</div>
    <div class="sigcell lbl" style="flex-grow: 0.6">Date</div>
  </div>

  <footer class="foot foot-after-sig">
    <div style="flex-grow: 1"><div class="lbl">Policy</div>Receipts are required for all items above 25.00 and for every entertainment expense regardless of amount. Alcohol is not reimbursable.</div>
    <div style="flex-grow: 1"><div class="lbl">Payment</div>Approved amounts are paid with the next payroll run following approval. Reports submitted more than sixty days after the expense date require an officer's signature.</div>
  </footer>

  </div>
  </div>
  </body>
  </html>
  ```

  ```css style.css theme={null}
  /* expense-report — page geometry and document-specific rules.
   * Spine comes from ../northmoor-shared.css. */

  @page {
    size: Letter;
    margin: 52.5pt 57pt 40.5pt; /* 70px 76px 54px */
    @bottom-left {
      content: "Expense report EXP-3308 · D. Whitcomb · 02–04 Sep 2026";
      font-family: Helvetica, Arial, sans-serif;
      font-size: 5.625pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #8A857E;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-family: Helvetica, Arial, sans-serif;
      font-size: 5.625pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #8A857E;
    }
  }

  /* First-page 4px full-bleed accent head rule (escapes into the margin). */
  .sheet { position: relative; }
  .atop {
    position: absolute;
    top: -52.5pt;
    left: -57pt;
    right: -57pt;
    height: 3pt;
    background-color: #7B2233;
  }
  .meta-doc { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .items { margin-top: 22.5pt; }
  .twocol { display: flex; gap: 27pt; margin-top: 21pt; } /* 36px / 28px */
  .sig-exp { padding-top: 22.5pt; } /* 30px */
  .foot-after-sig { margin-top: 16.5pt; }

  /* Equal/ratio split columns: explicit widths (flex basis is not in
   * the subset; grow alone leaves intrinsic-width columns). */
  .twocol > div { width: 47%; }
  ```
</CodeGroup>

Both files assume [`northmoor-shared.css`](https://github.com/formepdf/forme/blob/main/templates/northmoor-shared.css) alongside them — the set's shared spine (type scale, tables, signature blocks, the accent).

<Accordion title="Sample data (data.json)">
  ```json data.json theme={null}
  {
    "issuer": {
      "name": "Northmoor Industrial Group, Inc.",
      "address": "418 Ellingham Road, Suite 300, Rochester, NY 14604",
      "phone": "(585) 274-0180",
      "ein": "16-1904472",
      "bank": {
        "name": "First Genesee Bank, Rochester NY",
        "account": "8841 002937",
        "routing": "021304559"
      },
      "form": "F-22 rev. 4 · Jan 2026"
    },
    "document": {
      "type": "expense-report",
      "number": "EXP-3308",
      "period": "02–04 September 2026",
      "submitted": "07 September 2026",
      "approver": "M. Okonjo, Controller",
      "costCentre": "3100 · Finance"
    },
    "employee": {
      "name": "Dana Whitcomb",
      "departmentLine": "Accounts Receivable",
      "employeeNo": "20417"
    },
    "purpose": "Site visit and collections meeting — Brightwater Foods, Cleveland OH",
    "items": [
      {
        "date": "02 Sep",
        "description": "Airfare, Rochester–Cleveland return, coach",
        "category": "Air travel",
        "paidBy": "Company card",
        "qty": 1,
        "amount": 412.8
      },
      {
        "date": "02 Sep",
        "description": "Taxi, airport to plant",
        "category": "Ground",
        "paidBy": "Personal",
        "qty": 1,
        "amount": 38.5
      },
      {
        "date": "02 Sep",
        "description": "Hotel, Ellsworth Inn, two nights at 168.00",
        "category": "Lodging",
        "paidBy": "Company card",
        "qty": 2,
        "amount": 336.0
      },
      {
        "date": "03 Sep",
        "description": "Meals, individual, within 60.00 daily cap",
        "category": "Meals",
        "paidBy": "Personal",
        "qty": 1,
        "amount": 46.25
      },
      {
        "date": "03 Sep",
        "description": "Parking, plant visitor lot",
        "category": "Ground",
        "paidBy": "Personal",
        "qty": 1,
        "amount": 24.0
      },
      {
        "date": "03 Sep",
        "description": "Mileage, personal vehicle, 62 mi at 0.67",
        "category": "Mileage",
        "paidBy": "Personal",
        "qty": 62,
        "amount": 41.54
      },
      {
        "date": "04 Sep",
        "description": "Meals, individual",
        "category": "Meals",
        "paidBy": "Personal",
        "qty": 1,
        "amount": 51.8
      },
      {
        "date": "04 Sep",
        "description": "Client dinner — M. Reyes, T. Ault, D. Whitcomb",
        "note": "Business purpose: payment plan for INV-4102 · itemised receipt attached",
        "category": "Entertainment",
        "paidBy": "Personal",
        "qty": 3,
        "amount": 138.9
      }
    ],
    "categorySummary": {
      "airTravel": 412.8,
      "lodging": 336.0,
      "mealsAndEntertainment": 236.95,
      "groundAndMileage": 104.04,
      "total": 1089.79
    },
    "settlement": {
      "totalClaimed": 1089.79,
      "companyCard": -748.8,
      "cashAdvance": 0.0,
      "dueToEmployee": 340.99
    }
  }
  ```
</Accordion>

***

MIT-licensed, free to copy — [source on GitHub](https://github.com/formepdf/forme/tree/main/templates/expense-report). Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.
