<details>
  <summary>Shell with work beside the List</summary>
  <div data-kit-density="desk" data-kit-layout="shell" data-kit-holds="side-panel" id="kit-shell">
    <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <nav aria-label="Application" data-kit-region="rail">
    <a href="?destination=main#main" data-kit-region="rail-head" data-kit-role="identity"><span data-kit-mark aria-hidden="true">H</span><span data-kit-wordmark>Hallkeeper</span></a><ul>
      <li><a href="?destination=main#main" data-kit-role="destination"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"></path></svg><span data-kit-region="name">Work</span></a></li></ul><ul data-kit-region="destinations">
      <li><a href="?destination=invoices#main" aria-current="page" data-kit-role="destination" data-kit-state="current"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path></svg><span data-kit-region="name">Invoices</span></a></li>
    </ul>
  </nav>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">H</span><span data-kit-wordmark>Hallkeeper</span></div></div>
  <header data-kit-region="header">
  <div>
    <h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Invoices</h1>
  </div>
</header>
  <main data-kit-region="body" id="main">
      <div data-kit-layout="list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section aria-label="Invoices" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div>
          <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <caption>Invoices awaiting payment</caption>
  <thead data-kit-region="column-headings">
    <tr><th data-kit-column="subject" scope="col">Hirer</th><th data-kit-column="amount" scope="col">Amount due</th></tr>
  </thead>
  <tbody>
      <tr>
        <th data-kit-column="subject" scope="row"><a href="?invoice=oh-inv-003&amp;work=payment#role-side-panel-open" id="role-side-panel-work-oakmere">Oakmere Primary School</a></th>
        <td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td>
      </tr>
      <tr>
        <th data-kit-column="subject" scope="row"><a href="?invoice=oh-inv-004&amp;work=payment#role-side-panel-open">Oakmere Pilates</a></th>
        <td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£126.00</div></td>
      </tr>
      <tr>
        <th data-kit-column="subject" scope="row"><a href="?invoice=oh-inv-005&amp;work=payment#role-side-panel-open">Bell-Whitmore party</a></th>
        <td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£42.00</div></td>
      </tr>
  </tbody>
</table></div>
        </section>
</div>
    </main>
      <aside aria-labelledby="kit-side-panel-heading" data-kit-return-focus="role-side-panel-work-oakmere" data-kit-role="side-panel" id="kit-side-panel">
  <div aria-controls="kit-side-panel" aria-labelledby="kit-side-panel-heading" aria-orientation="vertical" data-kit-role="pane-divider" id="kit-side-panel-divider" role="separator" tabindex="0"><span data-kit-region="grip"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></span></div>
  <div data-kit-region="scroll">
    <div data-kit-region="line">
      <h2 id="kit-side-panel-heading" data-kit-region="heading">Oakmere Primary School</h2>
      <a href="../../../record/" data-kit-region="open" data-kit-role="secondary-action"><span data-kit-region="label">
  Open
</span></a>
      <a href="?invoice=none#role-side-panel-open" aria-label="Close" data-kit-region="close" data-kit-role="icon-action">
  <svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
    </div>
    <div data-kit-region="work">
          <form>
            <div data-kit-role="form-group" data-kit-width="short" id="role-side-panel-amount-form-group">
  <label for="role-side-panel-amount">Amount received</label>
        <input id="role-side-panel-amount" inputmode="decimal" name="amount" type="text" value="84.00">
  <output for="role-side-panel-amount">£84.00</output>
</div>
            <div data-kit-role="action-group">
<button data-kit-role="primary-action" type="submit"><span data-kit-region="label">
  Record payment
</span></button>
</div>
          </form>
        </div>
  </div>
</aside>
  <nav aria-label="Application" data-kit-region="bottom-bar">
    <ul data-kit-region="destinations">
      <li><a href="?destination=main#main" data-kit-role="destination"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"></path></svg><span data-kit-region="name">Work</span></a></li>
      <li><a href="?destination=invoices#main" aria-current="page" data-kit-role="destination" data-kit-state="current"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path></svg><span data-kit-region="name">Invoices</span></a></li>
    </ul>
  </nav>
</div>
</details>