UI Mockup — Cash Settlement
Local:
http://localhost:9000/prototypes/cash-settlement-management/
3 màn hình
| # | Màn hình | Mockup | Mô tả |
|---|---|---|---|
| 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, bảng lịch sử, export CSV |
| 3 | Chi tiết giao dịch | cash-transaction-detail.html | View-only — thông tin, credit link, audit |
Luồng điều hướng
Super Agent / Agent / Shop detail ──[Sell credits]──► Modal (form)
│
└── submit ──► Chi tiết giao dịch
Danh sách ──[bấm mã GD]──► Chi tiết giao dịch
Dùng chung 3 luồng hierarchy
Cùng modal trên 3 portal — buyer lấy từ trang detail, không có dropdown chọn:
| Portal | Mở từ | Buyer (context) |
|---|---|---|
| Admin | Super Agent detail | Super Agent đang xem |
| Super Agent | Agent detail | Agent đang xem |
| Agent | Shop detail | Shop đang xem |
Field form khớp spec từng luồng:
Màn hình 1 — Sell credits (modal)
Layout: Modal mở từ entity detail — buyer hiển thị read-only ở context bar.
| Section | Nội dung |
|---|---|
| 1. Credit amount | Số credit, cost rate, expected cash (auto) |
| 2. Cash & payment | Số tiền thực thu, hình thức, ngày giờ, currency |
| 3. Trạng thái | Select trạng thái; thêm field nếu "Partially paid" |
| 4. Reference | Mã tham chiếu, ghi chú (tùy chọn) |
Mockup UI dùng tiếng Anh. Implementation: @kioskgaming/ui / portal-cash-settlement.
Màn hình 2 — Danh sách
| Thành phần | Mô tả |
|---|---|
| Summary cards | Tổng GD, tổng phải thu, đã thu đủ, chưa thu / một phần |
| Filter | Tìm kiếm, luồng (Admin→SA / SA→Agent / Agent→Shop), trạng thái, hình thức, khoảng ngày |
| Bảng | Mã GD, luồng, seller, buyer, credit, cost rate, phải thu, thực thu, hình thức, trạng thái, ngày |
| Actions | Export CSV only — sell credits từ entity detail |
Màn hình 3 — Chi tiết (view-only)
| Thành phần | Mô tả |
|---|---|
| Header | Mã GD, badge luồng + trạng thái — không có nút action |
| Summary cards | Credit đã cấp, phải thu, thực thu, ngày nhận tiền |
| Thông tin giao dịch | Key-value toàn bộ field từ form |
| Credit transaction | Thông tin liên kết (read-only, không link/button) |
| Audit log | Timeline — chỉ xem |
Tạm thời không có: cập nhật trạng thái, hủy giao dịch, thêm ghi chú, mở credit transaction.
Phase 2 — Counter deposit (Shop/Cashier → Player)
phase2-counter.html — Deposits tab
| Màn hình | Mô tả |
|---|---|
| Tab Receivable — Deposits | Player nộp cash → nhận credit; margin, receipt |
| Summary | Counter Cash In, Gross margin |
Spec: shop-cashier-to-player · Tasks: tasks-shop-cashier-to-player
Deposit auto-settled khi complete — khác modal Sell credits Phase 1.
Phase 3 — Counter redemption (Player → Shop/Cashier)
phase2-counter.html — Redemptions tab · Shift: phase3-shift.html
| Màn hình | Mô tả |
|---|---|
| Tab Payable — Redemptions | Player đổi credit → cash; pending approval |
| Summary | Counter Cash Out |
| Shift reconciliation | Cash Out trong Expected Closing Cash |
Spec: player-to-shop-cashier · Tasks: tasks-player-to-shop-cashier
Redemption tách Phase 3 vì approval threshold, Cash Out shift, chiều cash ngược deposit.
Phase 1 — Shop payable (hierarchy)
| Màn hình | File |
|---|---|
| Shop trả Agent | shop.html |
File mockup
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