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
Trên thanh header có dropdown Chi nhánh; mở dropdown rồi chọn [+ Thêm chi nhánh] để hiện form "Thêm chi nhánh" (MH2) — form 1 trang khai báo gộp thông tin chi nhánh và danh sách sân (Tên + Bộ môn + Loại sân + ảnh sân), bắt buộc ít nhất một sân. Website & ảnh chi nhánh là tùy chọn. Ngoài ra, sau khi đã có chi nhánh vẫn có thể bổ sung sân riêng qua nút [+ Thêm sân] trên danh sách sân (MH4).
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 | Hộp thoại từ nút header: thông tin chi nhánh + danh sách sân inline + ả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"; nút [+ Thêm sân] |
| MH4 | Form sân / Đóng sân | Khai báo sân mới hoặc chỉnh sân; tải ảnh sân; đó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 | Dropdown Chi nhánh (header) | List | Click | - | - | Mục đích: menu chi nhánh trên thanh header; chứa nút [+ Thêm chi nhánh]. Hành vi: chọn [+ Thêm chi nhánh] để mở 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 "Thêm chi nhánh" mở từ dropdown Chi nhánh trên header (nút [+ Thêm chi nhánh]). Khối thông tin chi nhánh ở trên, khối Danh sách sân (bắt buộc ≥ 1 sân) inline ở giữa, khu vực Website & ảnh chi nhánh ở dưới (tùy chọn), footer [Huỷ] / [Lưu chi nhánh].
| 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 | Có | ≤ 20 | Ràng buộc: không để trống |
| 4 | Giờ mở cửa - Giờ đóng cửa | Textbox (giờ) | Select | Có | - | Ràng buộc: bắt buộc nhập; giờ mở sớm hơn giờ đóng |
| 5 | Dòng khai báo sân | List | Text/Select | Có (≥ 1) | - | Mục đích: mỗi dòng gồm Tên sân + Bộ môn (sổ xuống) + Loại sân (sổ xuống) + ảnh sân + nút xoá; phải có ít nhất một sân |
| 6 | Nút Thêm sân | Button | Click | - | - | Hành vi: thêm một dòng sân mới vào danh sách |
| 7 | Nút Thêm bộ môn | Button | Click | - | - | Hành vi: tạo bộ môn mới khi danh sách sổ xuống chưa có |
| 8 | Nút Thêm loại sân | Button | Click | - | - | Hành vi: tạo loại sân mới khi danh sách sổ xuống chưa có |
| 9 | Nút Thêm ảnh sân | Button (upload) | Click | Không | - | Hành vi: gắn ảnh riêng cho từng dòng sân; JPG/PNG ≤ 5MB |
| 10 | Website | Textbox | Text | Không | ≤ 255 | Mục đích: liên kết trang chi nhánh (tùy chọn) |
| 11 | Hình ảnh chi nhánh | Button (upload) | Click | Không | - | Hành vi: kéo-thả hoặc chọn ảnh (tùy chọn); hỗ trợ JPG/PNG, tối đa 5MB mỗi ảnh |
| 12 | Nút Huỷ | Button | Click | - | - | Hành vi: đóng form, không lưu |
| 13 | Nút Lưu chi nhánh | Button | Click | - | - | Hành vi: kiểm tra hợp lệ rồi lưu chi nhánh kèm danh sách sân, 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 | Nút Thêm sân | Button | Click | - | - | Mục đích: khai báo sân mới. Hành vi: mở MH4 ở chế độ tạo mới |
| 5 | Card sân | List | Click | - | - | Mục đích: xem & chọn sân để sửa |
| 6 | Badge "Đang chơi" | Label | ReadOnly | - | - | Mục đích: hiển thị thời gian còn lại theo realtime |
| 7 | Nút Bảng giá | Button | Click | - | - | Hành vi: mở MH5 |
| 8 | Nút Sửa sân | Button | Click | - | - | Hành vi: mở MH4 ở chế độ chỉnh |
MH4 — Form sân / Đóng sân ⏳ chờ chụp thực tế
Form 1 trang để khai báo sân mới hoặc chỉnh sân — tương tự form chi nhánh: tên sân, Loại sân, Bộ môn, ảnh sân; kèm tuỳ chọn "Đóng sân" 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, không trùng trong cùng chi nhánh |
| 2 | Loại sân | List | Select | Có | - | Ràng buộc: chọn từ danh mục (Trong nhà / Ngoài trời) |
| 3 | Bộ môn | List | Select | Có | - | Ràng buộc: chọn từ danh mục (Pickleball / Cầu lông / Tennis) |
| 4 | Thêm loại sân / bộ môn | Hyperlink | Click | - | - | Hành vi: tự định nghĩa giá trị danh mục mới nếu chưa có |
| 5 | Ảnh sân | Button (upload) | Click | Không | - | Hành vi: kéo-thả hoặc chọn ảnh tải lên |
| 6 | Bật "Đóng sân" | Checkbox | Check | - | - | Hành vi: hiện khối khung giờ + lý do |
| 7 | Khung giờ đóng (Từ-Đến) | Textbox (giờ) | Select | Có khi đóng | - | Ràng buộc: không nằm trong quá khứ; Từ < Đến |
| 8 | Lý do đóng | Textbox | Text | Có khi đóng | ≤ 255 | Mục đích: hiển thị tooltip trên Gantt |
| 9 | Cảnh báo xung đột | Alert | ReadOnly | - | - | Hành vi: liệt kê booking bị ảnh hưởng, cho huỷ/đổi |
| 10 | Nút Lưu sân | Button | Click | - | - | Hành vi: lưu khai báo / thay đổi sân, hoặc 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ố) |