UI_Thanh toán & Giao dịch
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Thanh toán & Giao dịch (CORE-08). Xem thêm Tổng quan module · UC · SRS.
Quy tắc hai nửa nghiệp vụ
Module gồm hai nửa: Thanh toán (kết nối nhà cung cấp, thu tiền, trạng thái thời gian thực) và Tài chính (tài khoản/ví, voucher, sổ cái). Màn hình được phân nhóm theo hai nửa này.
Trạng thái ảnh chụp
Pickleball hiện chưa có ứng dụng/màn hình thật trong workspace nên các ảnh chụp dưới đây ⏳ chờ chụp thực tế. Các bảng hạng mục được mô tả từ năng lực đã chốt ở Tổng quan module; cần cập nhật ảnh khi có môi trường dev.
1/ Danh sách màn hình
| Mã | Màn hình | Mô tả |
|---|---|---|
| MH1 | Cài đặt phương thức thanh toán | Danh sách phương thức + form thông tin xác thực + đăng ký webhook |
| MH2 | Thu thanh toán & trạng thái | Chọn phương thức, hiển thị QR/hướng dẫn, badge trạng thái thời gian thực |
| MH3 | Tài khoản & Ví | Danh sách tài khoản (CASH/BANK/QR/POS) kèm số dư + form tạo tài khoản |
| MH4 | Sổ cái giao dịch | Danh sách voucher, số dư tài khoản, lịch sử dòng tiền |
| MH5 | Form voucher thủ công | Tạo / phát hành / huỷ voucher với bảng dòng tiền cân đối |
| MH6 | Nhóm thu/chi | 14 nhóm hệ thống + nhóm tùy chỉnh có phân cấp cha |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Cài đặt phương thức thanh toán ⏳ chờ chụp thực tế
Danh sách phương thức thanh toán theo sân kèm trạng thái kết nối; form nhập thông tin xác thực (che bớt) và khu vực đăng ký webhook.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Nút Kết nối nhà cung cấp | Button | Click | - | - | Hành vi: mở form nhập thông tin xác thực |
| 2 | Loại nhà cung cấp | List | Select | Có | - | Mục đích: QR VNPAY · thẻ ngân hàng · POS di động |
| 3 | Thông tin xác thực | Textbox | Text | Có | ≤ 255 | Ràng buộc: lưu mã hóa, hiển thị che bớt |
| 4 | Trạng thái kết nối | Label | ReadOnly | - | - | Mục đích: đã kết nối / tạm ngưng |
| 5 | Endpoint webhook | Textbox | Text | Không | ≤ 255 | Hành vi: địa chỉ nhận sự kiện thanh toán |
| 6 | Loại sự kiện & số lần thử lại | List | Select | Không | - | Mục đích: cấu hình đăng ký webhook |
| 7 | Nút Lưu kết nối | Button | Click | - | - | Hành vi: kiểm tra hợp lệ rồi lưu theo sân |
MH2 — Thu thanh toán & trạng thái ⏳ chờ chụp thực tế
Bề mặt thu tiền cho đơn POS: chọn phương thức, hiển thị mã QR hoặc hướng dẫn, badge trạng thái cập nhật thời gian thực.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Nút Nhận thanh toán | Button | Click | - | - | Hành vi: khởi tạo khoản thanh toán cho đơn |
| 2 | Chọn phương thức | List | Select | Có | - | Mục đích: tiền mặt · QR VNPAY · thẻ · ví |
| 3 | Mã QR / hướng dẫn | Label (ảnh) | ReadOnly | - | - | Mục đích: để khách quét hoặc thao tác trả |
| 4 | Badge trạng thái | Label | ReadOnly | - | - | Mục đích: pending → paid / failed / expired theo thời gian thực |
| 5 | Số tiền | Label (số) | ReadOnly | - | - | Mục đích: hiển thị số tiền cần thu |
MH3 — Tài khoản & Ví ⏳ chờ chụp thực tế
Danh sách tài khoản nơi tiền nằm kèm số dư hiện hành; form tạo tài khoản với số dư đầu kỳ; đánh dấu tài khoản mặc định nhận thu bán hàng.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Nút Tạo tài khoản | Button | Click | - | - | Hành vi: mở form tạo tài khoản |
| 2 | Tên tài khoản | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 3 | Loại tài khoản | List | Select | Có | - | Mục đích: CASH · BANK · QR · POS di động |
| 4 | Số dư đầu kỳ | Textbox (số) | Text | Không | - | Mục đích: số dư khởi tạo của tài khoản |
| 5 | Số dư hiện hành | Label (số) | ReadOnly | - | - | Mục đích: cập nhật theo các dòng sổ cái |
| 6 | Tài khoản mặc định | Checkbox | Check | - | - | Hành vi: nhận khoản thu bán hàng ghi tự động |
| 7 | Nút Lưu | Button | Click | - | - | Hành vi: kiểm tra hợp lệ rồi lưu |
MH4 — Sổ cái giao dịch ⏳ chờ chụp thực tế
Tổng quan sổ cái ghi sổ kép: bảng voucher với bộ lọc, số dư tài khoản và lịch sử dòng tiền; lối vào tạo voucher và quản lý nhóm.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Bộ lọc sổ cái | List | Select | Không | - | Hành vi: lọc theo tài khoản · loại voucher · khoảng thời gian |
| 2 | Bảng voucher | List | Click | - | - | Mục đích: mỗi dòng gồm loại · số · ngày · trạng thái |
| 3 | Số dư tài khoản | Label (số) | ReadOnly | - | - | Mục đích: khớp tổng các dòng sổ cái đã ghi |
| 4 | Nhãn voucher tự động | Label | ReadOnly | - | - | Mục đích: đánh dấu voucher ghi tự động từ sự kiện |
| 5 | Nút Tạo voucher | Button | Click | - | - | Hành vi: mở MH5 |
| 6 | Nút Nhóm | Button | Click | - | - | Hành vi: mở MH6 |
MH5 — Form voucher thủ công ⏳ chờ chụp thực tế
Form tạo voucher: chọn loại, bảng dòng tiền chỉnh sửa được, tổng kiểm tra cân đối, nút phát hành và banner huỷ.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Loại voucher | List | Select | Có | - | Mục đích: RECEIPT · PAYMENT · TRANSFER · ADJUSTMENT |
| 2 | Dòng tiền | List | Text/Select | Có | - | Mục đích: tài khoản · ghi nợ/ghi có · số tiền · nhóm |
| 3 | Số tiền dòng | Textbox (số) | Text | Có | - | Ràng buộc: số lớn hơn 0 |
| 4 | Nhóm thu/chi | List | Select | Không | - | Mục đích: phân loại dòng tiền |
| 5 | Tổng cân đối | Label (số) | ReadOnly | - | - | Ràng buộc: tổng DEBIT phải bằng tổng CREDIT |
| 6 | Nút Phát hành | Button | Click | - | - | Hành vi: kiểm tra cân đối, cấp số, ghi voucher |
| 7 | Banner Huỷ | Alert | Click | - | - | Hành vi: huỷ bằng bút toán đảo ngược, giữ bản gốc |
MH6 — Nhóm thu/chi ⏳ chờ chụp thực tế
Danh sách nhóm thu/chi: 14 nhóm hệ thống tạo sẵn (được bảo vệ) và các nhóm tùy chỉnh theo sân với phân cấp cha.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Danh sách nhóm | List | Click | - | - | Mục đích: xem nhóm hệ thống và nhóm tùy chỉnh |
| 2 | Nhãn nhóm hệ thống | Label | ReadOnly | - | - | Mục đích: đánh dấu nhóm được bảo vệ, không gỡ được |
| 3 | Nút Thêm nhóm | Button | Click | - | - | Hành vi: mở form thêm nhóm tùy chỉnh |
| 4 | Tên nhóm | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 5 | Kiểu nhóm | List | Select | Có | - | Mục đích: INCOME hoặc EXPENSE |
| 6 | Nhóm cha | List | Select | Không | - | Hành vi: đặt nhóm con dưới một nhóm cha |
| 7 | Nút Lưu | Button | Click | - | - | Hành vi: lưu nhóm tùy chỉnh theo sân |