ClubLedger/static/cashier.html
Claude 34b3e88fe2
Fix 1-4: staff dropdown, split pages, print size toggle, receipts
Fix 1: Replace free-text staff name with a dropdown populated from staff.json
  via GET/POST/DELETE /staff endpoints. Staff management panel on cashier page
  (type name, Add button, chip list with × remove). Dropdown remembers last
  selection per session via sessionStorage.

Fix 2: Split single-page app into /cashier (register + top-up + member list +
  staff management) and /bar (charge only). Each page is its own HTML file
  with two plain <a> nav links; / redirects to /cashier. Shared helpers
  extracted to common.js; page logic in cashier.js and bar.js.

Fix 3: Statement view gains an A4/A5 radio toggle that rewrites a dynamic
  <style> @page rule before the browser print dialog opens. Defaults to A4.

Fix 4: POST /topup and POST /charge now return entry_id. Each successful
  transaction opens /receipt/{entry_id} in a new tab — server-rendered HTML
  showing member name/number, type, amount, balance-after (computed as running
  sum up to that entry), staff, note, timestamp. Same A4/A5 print toggle.

https://claude.ai/code/session_01JuRTR5Xjx8emQsyerBgGU7
2026-05-30 06:28:54 +00:00

98 lines
3.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cashier ClubLedger</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<nav>
<span class="brand" id="navBrand">ClubLedger</span>
<a class="nav-link active" href="/cashier">Cashier</a>
<a class="nav-link" href="/bar">Bar</a>
</nav>
<div class="view">
<!-- Register -->
<div class="panel">
<h2>Register New Member</h2>
<form id="registerForm">
<div class="form-row">
<label>Member Number</label>
<input type="text" id="reg-number" placeholder="e.g. 001" required>
</div>
<div class="form-row">
<label>Full Name</label>
<input type="text" id="reg-name" placeholder="Name" required>
</div>
<div class="form-row">
<label>PIN</label>
<input type="password" id="reg-pin" placeholder="Min 4 digits" required>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
<div id="registerMsg" class="msg"></div>
</div>
<!-- Top Up -->
<div class="panel">
<h2>Top Up Account</h2>
<div class="search-row">
<input type="text" id="cashierSearch" placeholder="Search member…">
<button class="btn" onclick="cashierSearchMembers()">Search</button>
</div>
<div id="cashierMemberList" class="member-pick-list"></div>
<div id="cashierForm" class="hidden">
<div class="selected-member-box" id="cashierSelected"></div>
<div class="form-row">
<label>Amount (<span class="currency-unit"></span>)</label>
<input type="number" id="cashierAmount" placeholder="e.g. 1000" min="1" step="1">
</div>
<div class="form-row">
<label>Staff</label>
<select id="cashierStaff"></select>
</div>
<div class="form-row">
<label>Note (optional)</label>
<input type="text" id="cashierNote" placeholder="">
</div>
<button class="btn btn-primary" onclick="doTopup()">Top Up</button>
<button class="btn" onclick="clearCashierSelection()">Cancel</button>
</div>
<div id="cashierMsg" class="msg"></div>
</div>
<!-- Member list -->
<div class="panel">
<h2>Members</h2>
<div class="search-row">
<input type="text" id="memberSearch" placeholder="Search name or number…">
<button class="btn" onclick="searchMembers()">Search</button>
</div>
<table id="memberTable" class="data-table">
<thead><tr><th>#</th><th>Name</th><th>Balance</th><th>Joined</th><th></th></tr></thead>
<tbody></tbody>
</table>
</div>
<!-- Staff management -->
<div class="panel">
<h2>Staff</h2>
<div class="search-row">
<input type="text" id="staffNameInput" placeholder="Staff name" id="staffNameInput">
<button class="btn btn-primary" onclick="addStaff()">Add</button>
</div>
<div id="staffChips" class="staff-chips"></div>
<div id="staffMsg" class="msg"></div>
</div>
</div>
<script src="/static/common.js"></script>
<script src="/static/cashier.js"></script>
</body>
</html>