UI_Quản lý Chi nhánh & Sân
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Quản lý Chi nhánh & Sân (OW-03). Xem thêm Tổng quan module · UC · SRS.
Quy tắc khai báo gộp
Chi nhánh và các sân của nó được khai báo trong một form 1 trang — người dùng không phải tạo chi nhánh rồi mới thêm sân ở màn hình khác.
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 chi nhánh | 2 chế độ xem (biểu tượng / danh sách); card có ảnh bìa, địa chỉ, badge trạng thái |
| MH2 | Form chi nhánh & sân | Form 1 trang: thông tin chi nhánh + khai báo nhiều sân + tải ảnh |
| MH3 | Danh sách sân & bộ lọc | Lọc theo Chi nhánh / Loại sân / Bộ môn; 2 chế độ xem; badge "Đang chơi" |
| MH4 | Form sân / Đóng sân | Chỉnh thông tin sân hoặc đóng sân theo khung giờ + lý do |
| MH5 | Bảng giá theo loại sân | Giá mặc định + khuyến mãi; chọn nhiều sân áp dụng |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Danh sách chi nhánh ⏳ chờ chụp thực tế
Lưới card chi nhánh; mỗi card có ảnh bìa, tên, địa chỉ, badge trạng thái; thanh công cụ có nút thêm và nút chuyển chế độ xem.
| 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 Thêm chi nhánh | Button | Click | - | - | Mục đích: mở form tạo chi nhánh. Hành vi: chuyển sang MH2 ở chế độ tạo mới |
| 2 | Chuyển chế độ xem | Button | Click | - | - | Hành vi: đổi giữa xem biểu tượng và danh sách |
| 3 | Card chi nhánh | List | Click | - | - | Mục đích: xem & vào chi nhánh. Hành vi: nhấn để mở danh sách sân (MH3) |
| 4 | Ảnh bìa | Label (ảnh) | ReadOnly | - | - | Mục đích: nhận diện chi nhánh trực quan |
| 5 | Badge trạng thái | Label | ReadOnly | - | - | Mục đích: hiển thị "Đang trống / Có khách" theo realtime |
MH2 — Form chi nhánh & sân ⏳ chờ chụp thực tế
Form một trang: khối thông tin chi nhánh ở trên, khối khai báo danh sách sân ở dưới, khu vực kéo-thả ảnh và nút lưu.
| 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 chi nhánh | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 2 | Địa chỉ | Textbox | Text | Có | ≤ 255 | Ràng buộc: không để trống |
| 3 | Số điện thoại | Textbox | Text | Không | ≤ 20 | Mục đích: liên hệ chi nhánh |
| 4 | Giờ mở - đóng cửa | Textbox (giờ) | Select | Có | - | Ràng buộc: giờ mở sớm hơn giờ đóng |
| 5 | Website | Textbox | Text | Không | ≤ 255 | Mục đích: liên kết trang chi nhánh |
| 6 | Ảnh chi nhánh / sân | Button (upload) | Click | Không | - | Hành vi: kéo-thả hoặc chọn ảnh tải lên |
| 7 | Dòng khai báo sân | List | Text/Select | Có | - | Mục đích: mỗi dòng gồm Tên + Bộ môn + Loại sân; thêm nhiều dòng |
| 8 | Thêm bộ môn / loại sân | Hyperlink | Click | - | - | Hành vi: tự định nghĩa giá trị danh mục mới |
| 9 | Nút Lưu chi nhánh | Button | Click | - | - | Hành vi: kiểm tra hợp lệ rồi lưu, quay về MH1 |
MH3 — Danh sách sân & bộ lọc ⏳ chờ chụp thực tế
Thanh bộ lọc (Chi nhánh / Loại sân / Bộ môn) trên cùng; lưới/danh sách card sân; mỗi card có badge "Đang chơi: còn X phút" và nút thao tá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 | Lọc Chi nhánh | List | Select | Không | - | Hành vi: lọc sân theo chi nhánh |
| 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 Bộ môn | List | Select | Không | - | Hành vi: lọc theo Pickleball / Cầu lông / Tennis |
| 4 | Card sân | List | Click | - | - | Mục đích: xem & chọn sân để sửa |
| 5 | Badge "Đang chơi" | Label | ReadOnly | - | - | Mục đích: hiển thị thời gian còn lại theo realtime |
| 6 | Nút Bảng giá | Button | Click | - | - | Hành vi: mở MH5 |
| 7 | Nút Sửa sân | Button | Click | - | - | Hành vi: mở MH4 |
MH4 — Form sân / Đóng sân ⏳ chờ chụp thực tế
Form chỉnh sân với tuỳ chọn "Đóng sân"; khi bật hiện trường khung giờ Từ-Đến và lý do; hộp cảnh báo booking xung đột nếu 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 | Tên sân | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 2 | Bộ môn | List | Select | Có | - | Ràng buộc: chọn từ danh mục |
| 3 | Loại sân | List | Select | Có | - | Ràng buộc: Trong nhà / Ngoài trời |
| 4 | Bật "Đóng sân" | Checkbox | Check | - | - | Hành vi: hiện khối khung giờ + lý do |
| 5 | Khung giờ đóng (Từ-Đến) | Textbox (giờ) | Select | Có khi đóng | - | Ràng buộc: không nằm trong quá khứ; Từ < Đến |
| 6 | Lý do đóng | Textbox | Text | Có khi đóng | ≤ 255 | Mục đích: hiển thị tooltip trên Gantt |
| 7 | Cảnh báo xung đột | Alert | ReadOnly | - | - | Hành vi: liệt kê booking bị ảnh hưởng, cho huỷ/đổi |
| 8 | Nút Lưu | Button | Click | - | - | Hành vi: lưu thay đổi / xác nhận đóng sân |
MH5 — Bảng giá theo loại sân ⏳ chờ chụp thực tế
Tab theo loại sân; khối giá mặc định và khối giá khuyến mãi; danh sách sân áp dụng có tick chọn; bảng khung giờ - thứ - giá.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tab loại sân | Button | Click | - | - | Hành vi: chuyển bảng giá theo loại sân |
| 2 | Chọn sân áp dụng | Checkbox | Check | Có | - | Hành vi: tick nhiều sân hoặc "Chọn tất cả" |
| 3 | Thêm khung giờ | Button | Click | - | - | Hành vi: thêm dòng Thứ + Khung giờ + Giá |
| 4 | Thứ | List | Select | Có | - | Mục đích: ngày áp dụng giá |
| 5 | Khung giờ | Textbox (giờ) | Select | Có | - | Ràng buộc: không chồng lấn khung giờ khác |
| 6 | Giá | Textbox (số) | Text | Có | - | Ràng buộc: số lớn hơn 0 |
| 7 | Giá khuyến mãi theo khoảng ngày | List | Select/Text | Không | - | Hành vi: đè giá mặc định trong khoảng ngày trùng |
| 8 | Nút Lưu cấu hình | Button | Click | - | - | Hành vi: lưu giá, áp cho booking mới (không hồi tố) |