HTML receipt dashboard project: readable before enhancement

Use it for a real task

The finance team needs one page for scanning receipt state. The source order starts with a skip link, then a compact navigation region and one main heading. A captioned table carries the record relationship. A module may add filtering later, but the source page already contains a record link and the key number, so a failed script cannot erase the only route to the receipt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Receipt dashboard | AI Trove</title>
</head>
<body>
  <a href="#content">Skip to dashboard</a>
  <header><nav aria-label="Receipt navigation"><a href="/receipts">All receipts</a></nav></header>
  <main id="content">
    <h1>Receipt dashboard</h1>
    <table>
      <caption>Current review queue</caption>
      <thead><tr><th scope="col">Receipt</th><th scope="col">State</th></tr></thead>
      <tbody><tr><th scope="row"><a href="/receipts/R-47">R-47</a></th><td>Held</td></tr></tbody>
    </table>
  </main>
  <script type="module" src="/assets/dashboard-filter.js"></script>
</body>
</html>

What the markup guarantees

The routes and module must be provided by the application. The HTML is a document prototype, not a deployed dashboard service; a real page also needs server data, access control, error states, and an update path for stale rows.

Cost and limits

The initial table can be fast for a modest queue. As row count grows, server pagination avoids transferring and laying out thousands of records merely to show the first screen.

Common Mistakes

• Do not wait for script execution to reveal the only receipt links.
• Do not publish static sample state as live finance data.
• Do not omit focus visibility for the skip link.

Connected lessons

• HTML skip link: reach main content before repeated navigation
• HTML data tables: name row and column relationships explicitly
• HTML module scripts: load one module without ordering every classic script
• HTML receipt index project: landmarks, links, tables, and a bounded image

Style this pattern

• CSS receipt dashboard project: one layout across cards, rails, and zoom
• CSS grid template areas: name regions without rewriting document order

Rendering decisions

• CSS light-dark: bind component colors to the active scheme