UI_Đặt sân & Lịch
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Đặt sân & Lịch (OW-02). Xem thêm Tổng quan module · UC · SRS.
Quy tắc thao tác inline
Mọi thao tác trên một booking (check-in, gia hạn, ghi chú, huỷ) đều thực hiện qua popup inline ngay dưới slot — người dùng không phải rời khỏi lịch Gantt.
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 | Trang Đặt sân & Lịch | Bộ lọc + 4 card thống kê + lịch Gantt theo ngày với slot màu trạng thái |
| MH2 | Popup chi tiết booking | Popup inline dưới slot; nút theo trạng thái (check-in/gia hạn/ghi chú/huỷ) |
| MH3 | Panel chờ duyệt online | Danh sách card booking online; badge đếm, countdown, duyệt/từ chối |
| MH4 | Hộp thoại lý do | Nhập lý do dùng chung cho từ chối booking online và huỷ booking |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Trang Đặt sân & Lịch ⏳ chờ chụp thực tế
Thanh bộ lọc trên cùng, hàng 4 card thống kê, bên dưới là lịch Gantt theo ngày với trục giờ và danh sách sân; slot tô màu theo trạng thái.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Lọc Chi nhánh | List | Select | Không | - | Hành vi: lọc lịch theo chi nhánh được phân công |
| 2 | Lọc Loại sân | List | Select | Không | - | Hành vi: lọc theo Trong nhà / Ngoài trời |
| 3 | Lọc Thời gian | List | Select | Không | - | Hành vi: chọn Ngày / Tháng / Năm |
| 4 | 4 card thống kê | Label | ReadOnly | - | - | Mục đích: sân trống, sân hoạt động, lượt đặt (badge chờ duyệt), doanh thu |
| 5 | Lịch Gantt | List | Click | - | - | Mục đích: trục giờ × sân; slot màu theo trạng thái |
| 6 | Slot booking | Label | Click | - | - | Hành vi: nhấn để mở popup chi tiết (MH2) |
| 7 | Slot khoá | Label | ReadOnly | - | - | Mục đích: hiện tooltip lý do bảo trì, không thao tác |
MH2 — Popup chi tiết booking ⏳ chờ chụp thực tế
Popup nhỏ hiện ngay dưới slot; phần đầu hiển thị thông tin khách & khung giờ, phần dưới là các nút thao tác theo trạng thái booking.
| 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 booking | Label | ReadOnly | - | - | Mục đích: khách, sân, khung giờ, trạng thái |
| 2 | Nút Check-in | Button | Click | - | - | Hành vi: xác nhận khách đến, slot chuyển "Đang chơi" |
| 3 | Gia hạn (+30p / +1h) | Button | Click | - | - | Hành vi: chọn thời lượng, hiện giá gia hạn theo bảng giá |
| 4 | Giá gia hạn | Label | ReadOnly | - | - | Mục đích: hiển thị giá theo bảng giá loại sân |
| 5 | Ghi chú nội bộ | Textbox | Text | Không | ≤ 255 | Mục đích: lưu ghi chú cho ca sau |
| 6 | Nút Huỷ | Button | Click | - | - | Hành vi: mở hộp thoại lý do (MH4) |
MH3 — Panel chờ duyệt online ⏳ chờ chụp thực tế
Cột danh sách card booking online chờ duyệt; mỗi card có badge đếm, đồng hồ đếm ngược và nút Duyệt / Từ chối / Xem chi tiết.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Badge đếm chờ duyệt | Label | ReadOnly | - | - | Mục đích: số booking online đang chờ |
| 2 | Card yêu cầu | List | Click | - | - | Mục đích: thông tin khách, sân, khung giờ |
| 3 | Đồng hồ đếm ngược | Label | ReadOnly | - | - | Mục đích: thời gian còn lại trong 30 phút |
| 4 | Nút Duyệt | Button | Click | - | - | Hành vi: xác nhận booking, slot chuyển "Đã đặt" |
| 5 | Nút Từ chối | Button | Click | - | - | Hành vi: mở hộp thoại lý do (MH4) |
| 6 | Nút Xem chi tiết | Button | Click | - | - | Hành vi: xem đầy đủ thông tin yêu cầu |
MH4 — Hộp thoại lý do ⏳ chờ chụp thực tế
Hộp thoại nhỏ với ô nhập lý do và nút xác nhận / đóng; dùng chung cho từ chối booking online và huỷ booking.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Ô lý do | Textbox | Text | Có | ≤ 255 | Ràng buộc: không để trống |
| 2 | Nút Xác nhận | Button | Click | - | - | Hành vi: lưu lý do, cập nhật trạng thái, thông báo khách |
| 3 | Nút Đóng | Button | Click | - | - | Hành vi: đóng hộp thoại, không thay đổi |