UI_Sự kiện & Giải đấu
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Sự kiện & Giải đấu (OW-05). Xem thêm Tổng quan module · UC · SRS.
Quy tắc tự khoá sân
Khi sự kiện được publish, hệ thống tự khoá slot sân theo khung giờ tổ chức — người dùng không phải thao tác khoá sân thủ công ở màn hình khác; sân tự giải phóng khi sự kiện kết thúc hoặc huỷ.
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 | Danh sách sự kiện | List/grid với tên, loại, ngày giờ, trạng thái, số người đăng ký; bộ lọc & nút tạo |
| MH2 | Form sự kiện & loại vé | Thông tin sự kiện + chọn sân/khung giờ + cấu hình loại vé + banner |
| MH3 | Chi tiết & danh sách đăng ký | Thông tin, tiến độ đăng ký, danh sách người đăng ký kèm trạng thái thanh toán & check-in |
| MH4 | Check-in QR | Quét QR vé hoặc tìm theo tên/SĐT để đánh dấu đã tham dự |
| MH5 | Đăng ký & mua vé (app khách) | Chi tiết sự kiện, chọn loại vé, mã giảm giá, thanh toán, waitlist |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Danh sách sự kiện ⏳ chờ chụp thực tế
Lưới/danh sách card sự kiện; mỗi card có banner, tên, loại, ngày giờ, badge trạng thái và số người đăng ký; thanh công cụ có nút tạo và bộ lọ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 Tạo sự kiện | Button | Click | - | - | Mục đích: mở form tạo sự kiện. Hành vi: chuyển sang MH2 ở chế độ tạo mới |
| 2 | Lọc loại / trạng thái | List | Select | Không | - | Hành vi: lọc theo loại (giải đấu/lớp tập/open play) và trạng thái |
| 3 | Card sự kiện | List | Click | - | - | Mục đích: xem & vào sự kiện. Hành vi: nhấn để mở chi tiết (MH3) |
| 4 | Banner | Label (ảnh) | ReadOnly | - | - | Mục đích: nhận diện sự kiện trực quan |
| 5 | Badge trạng thái | Label | ReadOnly | - | - | Mục đích: hiển thị Nháp / Đã đăng / Đã huỷ / Đã kết thúc |
| 6 | Số người đăng ký | Label | ReadOnly | - | - | Mục đích: hiển thị tiến độ (VD 45/60 slot) |
MH2 — Form sự kiện & loại vé ⏳ chờ chụp thực tế
Form gồm khối thông tin sự kiện, khối chọn sân & khung giờ, khối cấu hình các loại vé và khu tải banner, nút Publish / Lưu nháp.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên sự kiện | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 2 | Loại sự kiện | List | Select | Có | - | Mục đích: giải đấu / lớp tập / open play |
| 3 | Mô tả | Textbox | Text | Không | ≤ 1000 | Mục đích: giới thiệu sự kiện |
| 4 | Ngày giờ tổ chức | Textbox (giờ) | Select | Có | - | Ràng buộc: bắt đầu sớm hơn kết thúc |
| 5 | Sân tổ chức | List | Select | Có | - | Ràng buộc: không trùng booking/sự kiện khác |
| 6 | Sức chứa | Textbox (số) | Text | Có | - | Ràng buộc: số lớn hơn 0 |
| 7 | Loại vé | List | Text/Select | Có | - | Mục đích: mỗi dòng gồm tên + giá + số lượng (VIP/Regular/Early Bird) |
| 8 | Banner | Button (upload) | Click | Không | - | Hành vi: kéo-thả hoặc chọn ảnh tải lên |
| 9 | Nút Publish | Button | Click | - | - | Hành vi: kiểm tra hợp lệ, khoá sân, đồng bộ lên app |
| 10 | Nút Lưu nháp | Button | Click | - | - | Hành vi: lưu nháp, chưa khoá sân & chưa hiển thị trên app |
MH3 — Chi tiết & danh sách đăng ký ⏳ chờ chụp thực tế
Trang chi tiết: khối thông tin & trạng thái sự kiện, thanh tiến độ đăng ký, bảng danh sách người đăng ký kèm trạng thái thanh toán & check-in; nút Check-in và Huỷ sự kiện.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Thông tin sự kiện | Label | ReadOnly | - | - | Mục đích: tên, loại, ngày giờ, sân, trạng thái |
| 2 | Tiến độ đăng ký | Label | ReadOnly | - | - | Mục đích: số slot đã bán / tổng (VD 45/60) |
| 3 | Bảng người đăng ký | List | Click | - | - | Mục đích: tên, loại vé, trạng thái thanh toán & check-in |
| 4 | Nút Check-in | Button | Click | - | - | Hành vi: mở MH4 quét QR |
| 5 | Nút Sửa | Button | Click | - | - | Hành vi: mở MH2 (chỉ khi chưa có người đăng ký) |
| 6 | Nút Huỷ sự kiện | Button | Click | - | - | Hành vi: mở hộp xác nhận, nhập lý do, hoàn vé & giải phóng sân |
MH4 — Check-in QR ⏳ chờ chụp thực tế
Màn hình quét: vùng quét QR, ô tìm theo tên/SĐT, hộp kết quả hiển thị tên & loại vé & trạng thái check-in.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Vùng quét QR | Label (camera) | ReadOnly | - | - | Hành vi: quét mã QR trên vé |
| 2 | Tìm theo tên/SĐT | Textbox | Text | Không | ≤ 50 | Hành vi: tra cứu thủ công khi không có QR |
| 3 | Hộp kết quả | Alert | ReadOnly | - | - | Mục đích: hiển thị tên, loại vé, trạng thái check-in |
| 4 | Nút Xác nhận check-in | Button | Click | - | - | Hành vi: đánh dấu đã tham dự |
MH5 — Đăng ký & mua vé (app khách) ⏳ chờ chụp thực tế
Trang trên app khách: banner & thông tin sự kiện, danh sách loại vé còn lại, ô nhập mã giảm giá, nút đăng ký/thanh toán, tuỳ chọn danh sách chờ khi hết vé.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Thông tin sự kiện | Label | ReadOnly | - | - | Mục đích: banner, tên, ngày giờ, địa điểm |
| 2 | Chọn loại vé | List | Select | Có | - | Mục đích: chọn VIP / Regular / Early Bird còn vé |
| 3 | Mã giảm giá | Textbox | Text | Không | ≤ 30 | Hành vi: áp mã hợp lệ để giảm giá vé |
| 4 | Nút Đăng ký / Thanh toán | Button | Click | - | - | Hành vi: tạo đăng ký, giữ vé tạm và chuyển sang thanh toán |
| 5 | Tham gia danh sách chờ | Button | Click | - | - | Hành vi: hiện khi hết vé; ghi vào waitlist theo thứ tự |
| 6 | Vé & QR sau thanh toán | Label | ReadOnly | - | - | Mục đích: hiển thị vé kèm QR; gửi kèm qua email/SMS |