UI Mockup — Cash Settlement
Local:
http://localhost:9000/prototypes/cash-settlement-management/
3 screens
| # | Screen | Mockup | Description |
|---|---|---|---|
| 1 | Sell credits (modal) | sell-credit.html | Modal from entity detail — credits, cash, payment, status (no buyer picker) |
| 2 | Cash transactions | cash-transaction-list.html | Summary, filter, history table, export CSV |
| 3 | Transaction detail | cash-transaction-detail.html | View-only — info, credit link, audit |
Navigation flow
Super Agent / Agent / Shop detail ──[Sell credits]──► Modal (form)
│
└── submit ──► Transaction detail
List ──[click tx code]──► Transaction detail
Shared across 3 hierarchy flows
Same modal on 3 portals — buyer from detail page context, no dropdown picker:
| Portal | Open from | Buyer (context) |
|---|---|---|
| Admin | Super Agent detail | Super Agent being viewed |
| Super Agent | Agent detail | Agent being viewed |
| Agent | Shop detail | Shop being viewed |
Form fields match each flow spec:
Screen 1 — Sell credits (modal)
Layout: Modal opened from entity detail — buyer shown read-only in context bar.
| Section | Content |
|---|---|
| 1. Credit amount | Credits, cost rate, expected cash (auto) |
| 2. Cash & payment | Actual amount received, method, date/time, currency |
| 3. Status | Status select; extra fields if "Partially paid" |
| 4. Reference | External reference, note (optional) |
Mockup UI uses English. Implementation: @kioskgaming/ui / portal-cash-settlement.
Screen 2 — List
| Component | Description |
|---|---|
| Summary cards | Total transactions, total due, paid in full, unpaid / partial |
| Filter | Search, flow (Admin→SA / SA→Agent / Agent→Shop), status, method, date range |
| Table | Tx code, flow, seller, buyer, credit, cost rate, due, received, method, status, date |
| Actions | Export CSV only — sell credits from entity detail |
Screen 3 — Detail (view-only)
| Component | Description |
|---|---|
| Header | Tx code, flow + status badge — no action buttons |
| Summary cards | Credits issued, amount due, amount received, payment date |
| Transaction info | Key-value for all form fields |
| Credit transaction | Linked info (read-only, no link/button) |
| Audit log | Timeline — view only |
Temporarily not included: update status, cancel transaction, add note, open credit transaction.
Phase 2 — Counter deposit (Shop/Cashier → Player)
phase2-counter.html — Deposits tab
| Screen | Description |
|---|---|
| Tab Receivable — Deposits | Player pays cash → receives credits; margin, receipt |
| Summary | Counter Cash In, Gross margin |
Spec: shop-cashier-to-player · Tasks: tasks-shop-cashier-to-player
Deposit auto-settled on complete — differs from Phase 1 Sell credits modal.
Phase 3 — Counter redemption (Player → Shop/Cashier)
phase2-counter.html — Redemptions tab · Shift: phase3-shift.html
| Screen | Description |
|---|---|
| Tab Payable — Redemptions | Player redeems credit → cash; pending approval |
| Summary | Counter Cash Out |
| Shift reconciliation | Cash Out in Expected Closing Cash |
Spec: player-to-shop-cashier · Tasks: tasks-player-to-shop-cashier
Redemption is Phase 3 because of approval threshold, shift Cash Out, reversed cash direction vs deposit.
Phase 1 — Shop payable (hierarchy)
| Screen | File |
|---|---|
| Shop pays Agent | shop.html |
Mockup files
site-documents/static/prototypes/cash-settlement-management/
├── index.html
├── sell-credit.html # Phase 1 hierarchy — sell modal
├── cash-transaction-list.html
├── cash-transaction-detail.html
├── shop.html # Phase 1 — shop payable to agent
├── phase2-counter.html # Phase 2 Deposits tab + Phase 3 Redemptions tab
├── phase3-shift.html # Phase 3 — shift / Cash Out context
├── styles.css
└── app.js