Timeline Phòng¶
Trang Timeline Phòng hiển thị lịch đặt phòng theo dạng trực quan — mỗi hàng là một phòng, trục ngang là thời gian. Nhân viên có thể theo dõi tình trạng toàn bộ phòng và xử lý booking (confirm, check-in, check-out, gia hạn, hủy, dịch vụ) trực tiếp từ timeline.
Tổng Quan¶
Trang gồm 4 khu vực chính:
- Thanh điều khiển — chế độ xem, điều hướng ngày, thống kê nhanh
- Chú thích trạng thái — màu sắc các trạng thái phòng
- Panel đặt phòng chưa phân phòng — các booking chưa được gán phòng cụ thể
- Lưới timeline — danh sách phòng × trục thời gian
Thanh Điều Khiển¶
| # | Điều khiển | Mô tả |
|---|---|---|
| ① | ← / → | Chuyển sang tuần/ngày trước hoặc tiếp theo |
| ② | Date Picker | Chọn ngày bắt đầu hiển thị |
| ③ | Today | Nhảy về ngày hôm nay |
| ④ | Refresh | Làm mới dữ liệu |
| ⑤ | Chế độ xem | Dropdown: Day / Week / Month |
| ⑥ | Kiểu hiển thị | Dropdown: Grid View / Timeline View |
| ⑦ | Settings | Cài đặt timeline (chỉ desktop) |
Thống Kê Nhanh (Desktop)¶
Hàng dưới điều khiển hiển thị 4 chỉ số tức thì:
| Chỉ số | Mô tả |
|---|---|
| Total Rooms | Tổng số phòng trong khách sạn |
| Available | Số phòng đang trống sẵn sàng |
| Occupancy | Tỷ lệ lấp đầy (%) |
| Unassigned | Số booking chưa được gán phòng (cam = có booking chờ) |
Chế Độ Xem¶
Xem Theo Tuần (Week View)¶
Mỗi cột = 1 ngày trong tuần (7 cột: Sun → Sat). Header cột hiển thị tên ngày + ngày tháng (MM/DD) + giờ trả phòng chuẩn ↑12:00. Trục nhỏ bên dưới header đánh dấu các mốc 0:00 / 6:00 / 12:00 / 18:00.
Phù hợp để: Lập kế hoạch tuần, theo dõi tổng thể tỷ lệ phòng.
Xem Theo Ngày (Day View)¶
Mỗi cột = 1 giờ (24 cột: 00:00 → 23:00). Chi tiết cao, thấy rõ giờ check-in / check-out chính xác trong ngày.
Phù hợp để: Quản lý trong ngày, lên kế hoạch dọn phòng theo giờ.
Lưới Timeline¶
Cột Phòng (Sidebar)¶
Mỗi hàng có cột phòng bên trái (160px desktop / 120px mobile) gồm:
| Thông tin | Mô tả |
|---|---|
| Số phòng | Font đậm, màu xanh dương |
| Loại phòng | Text nhỏ, màu xám |
| Trạng thái | Badge màu theo trạng thái hiện tại |
| Tầng | Text nhỏ phía dưới |
Chỉ Báo Thời Gian Hiện Tại¶
Đường đỏ dọc xuất hiện tự động tại vị trí giờ hiện tại — cập nhật mỗi 30 giây. Chỉ hiển thị khi giờ hiện tại nằm trong khoảng đang xem.
Màu Sắc Khối Booking¶
Nhấp vào bất kỳ khối nào để mở modal thao tác.
| Màu | Loại | Ý nghĩa |
|---|---|---|
| 🔵 Xanh dương nhạt | Confirmed | Đã xác nhận, chưa check-in |
| 🟠 Cam nhạt (pulse) | Confirmed Overdue | Đã xác nhận nhưng quá giờ check-in |
| 🔴 Đỏ nhạt | Occupied | Khách đang lưu trú (CHECKED_IN) |
| 🟣 Tím nhạt | Checkout Ready | Sẵn sàng trả phòng |
| 🟡 Vàng nhạt | Pending | Chờ xác nhận |
| 🟢 Xanh lá nhạt | Available | Ô trống sẵn sàng |
| 🟠 Cam sọc chéo | Maintenance | Đang bảo trì |
| 🟡 Viền trái vàng | Cleaning Pending | Chờ dọn phòng |
| 🔵 Viền trái xanh (nhấp nháy) | Cleaning In Progress | Đang dọn |
| 🟢 Viền trái xanh lá | Cleaning Completed | Dọn xong |
Tooltip khi hover (desktop)
Di chuột vào khối để xem: tên khách, thời gian (MM/DD HH:mm – MM/DD HH:mm), số đêm, trạng thái, mã booking. Nếu có special requests, khối hiển thị chấm đỏ góc trên phải.
Panel Đặt Phòng Chưa Phân Phòng¶
Panel xuất hiện phía trên lưới timeline khi có booking chưa được gán phòng cụ thể (unassigned). Viền và nền cam.
| Thành phần | Mô tả |
|---|---|
| Tiêu đề | ⚠️ "Unassigned Bookings" + số lượng |
| Auto Assign All | Tự động gán tất cả booking vào phòng trống phù hợp |
| Thẻ booking | Tên khách · Loại phòng · Thời gian lưu trú · Số khách · Special requests |
Nhấp vào thẻ booking để mở modal gán phòng thủ công.
Modal Hành Động Timeline¶
Nhấp vào bất kỳ khối booking nào trên timeline → modal "Room [số phòng] — Timeline Action" mở ra.
Thông Tin Khối¶
| # | Trường | Mô tả |
|---|---|---|
| ① | Tiêu đề | "Room [số phòng] — Timeline Action" |
| ② | Time Period | Thời gian bắt đầu → kết thúc (MM/DD/YYYY HH:mm) |
| ③ | Status | Tag màu theo trạng thái hiện tại |
| ④ | Guest | Tên khách (nếu có) |
| ⑤ | Booking Number | Mã booking (nếu có) |
| ⑥ | Total Amount | Tổng tiền (nếu có) |
Nhóm Nút Thao Tác Đặt Phòng¶
| # | Nút | Điều kiện hiển thị | Mô tả |
|---|---|---|---|
| ⑦ | Confirm Booking (xanh lá) | PENDING | Xác nhận booking đang chờ |
| ⑧ | Check In (xanh dương) | CONFIRMED | Làm thủ tục nhận phòng |
| ⑨ | Check Out (cam) | CHECKED_IN | Làm thủ tục trả phòng |
| ⑩ | Extend Stay (xanh lá nhạt) | CONFIRMED/CHECKED_IN | Gia hạn thêm ngày lưu trú |
| ⑪ | Modify (xám) | CONFIRMED | Chỉnh sửa thông tin booking |
| ⑫ | Cancel (đỏ) | PENDING/CONFIRMED | Hủy booking |
| ⑬ | View/Hide Details | Luôn hiển thị | Mở/đóng panel thông tin chi tiết |
Nhóm Nút Dịch Vụ & Tiện Ích¶
| # | Nút | Mô tả |
|---|---|---|
| ⑭ | Add Service | Chuyển đến trang dịch vụ bổ sung của booking |
| ⑮ | Invoice | Chuyển đến trang hóa đơn của booking |
| ⑯ | Amenity Request | Tạo yêu cầu tiện nghi cho phòng |
| ⑰ | Room Move | Mở modal chuyển phòng |
| ⑱ | Minibar Check | Mở modal kiểm tra minibar |
| ⑲ | Quick Payment | Mở modal thanh toán nhanh |
Nút ô trống
Khi nhấp vào ô trống (không có booking), modal hiển thị 2 nút: New Booking (tạo booking mới) và Schedule Maintenance (lên lịch bảo trì).
Panel Thông Tin Chi Tiết¶
Nhấn nút View Details (hoặc Hide Details) trong modal để mở/đóng panel thông tin chi tiết. Panel tải dữ liệu thực tế từ API.
| # | Phần | Nội dung |
|---|---|---|
| ① | Payment | Tổng tiền · Đã thanh toán · Còn lại (badge cảnh báo nếu > 0) |
| ② | Additional Services | Danh sách dịch vụ bổ sung và đơn giá |
| ③ | Amenity Requests | Danh sách yêu cầu tiện nghi + tag trạng thái |
| ④ | Minibar | Trạng thái kiểm tra minibar của booking |
Màu sắc số dư thanh toán
- Xanh lá — đã thanh toán đủ (balance = 0)
- Cam cảnh báo — còn nợ (balance > 0)
Form Gia Hạn Lưu Trú (Extend Stay)¶
Nhấn Extend Stay → form hiển thị bên trong modal.
| # | Trường | Bắt buộc | Mô tả |
|---|---|---|---|
| ① | Extend to Date | ✓ | DatePicker + TimePicker — chọn ngày/giờ trả phòng mới |
| ② | Xác nhận | — | Lưu gia hạn |
| ③ | Quay lại | — | Hủy và quay về danh sách nút |
Validation ngày gia hạn
Ngày mới phải sau ngày check-out hiện tại. Hệ thống tự khóa các ngày không hợp lệ trong DatePicker.
Form Yêu Cầu Tiện Nghi (Amenity Request)¶
Nhấn Amenity Request → form hiển thị bên trong modal.
| # | Trường | Bắt buộc | Mô tả |
|---|---|---|---|
| ① | Amenity Type | ✓ | Loại tiện nghi: Towels / Water / Cleaning / Extra Bed / Other |
| ② | Priority | — | Mức ưu tiên: LOW / MEDIUM (mặc định) / HIGH / URGENT |
| ③ | Description | — | Ghi chú thêm về yêu cầu |
| ④ | Xác nhận | — | Gửi yêu cầu |
| ⑤ | Quay lại | — | Hủy và quay về danh sách nút |
Tổng Hợp Các Form Theo Hành Động¶
| Hành động | Trường bắt buộc | Trường tùy chọn |
|---|---|---|
| Confirm | — | Confirmation Notes |
| Check In | Actual Check-in Time | Check-in Notes |
| Check Out | Actual Check-out Time | Check-out Notes |
| Extend Stay | Extend to Date | — |
| Cancel | Cancellation Reason (Guest Request / No Show / Payment Failed / Overbooking / Other) | — |
| Amenity Request | Amenity Type | Priority · Description |
| Schedule Maintenance | Maintenance Type · Description · Scheduled Date | — |
Mẹo & Thực Hành Tốt Nhất¶
Dùng Week View để lập kế hoạch tuần
Chuyển sang Week View vào sáng thứ Hai để xem tổng thể booking 7 ngày tới — dễ nhận ra khoảng trống và điều phối dọn phòng.
Xử lý Unassigned ngay đầu ca
Panel Unassigned màu cam xuất hiện nghĩa là có khách sắp đến mà chưa có phòng. Nhấp Auto Assign All hoặc gán thủ công từng thẻ trước khi khách check-in.
Đường đỏ = thời gian thực
Đường đỏ dọc cho biết vị trí giờ hiện tại trên timeline. Các khối cam (Confirmed Overdue) chứng tỏ khách chưa check-in dù đã qua giờ — cần liên hệ ngay.
View Details để kiểm tra nhanh trước check-out
Trước khi làm thủ tục check-out, nhấn View Details để xem số dư thanh toán và minibar. Nếu còn nợ (hiển thị cam), xử lý thanh toán trước qua nút Quick Payment.
Month View chỉ là Grid View
Chọn Month trong Chế độ xem sẽ hiển thị dạng lưới ô, không phải timeline chi tiết. Để thao tác trực tiếp, dùng Day View hoặc Week View với kiểu Timeline View.
Câu Hỏi Thường Gặp¶
Không thấy booking vừa tạo trên timeline?
Nhấp nút ④ Refresh để làm mới dữ liệu. Nếu vẫn không thấy, kiểm tra ngày check-in của booking — có thể nằm ngoài khoảng tuần/ngày đang hiển thị.
Khối hiển thị cam nhấp nháy là gì?
Đó là Confirmed Overdue — booking đã xác nhận nhưng khách chưa check-in dù đã qua giờ. Cần liên hệ khách hoặc xử lý No Show.
Nút Check In bị ẩn trong action modal?
Nút Check In chỉ hiện khi trạng thái booking là CONFIRMED. Nếu booking đang PENDING, cần nhấp Confirm Booking trước, sau đó mới Check In được.
Làm sao gán phòng cho booking chưa có phòng?
Xem Panel Unassigned phía trên lưới — nhấp vào thẻ booking để gán thủ công, hoặc nhấp Auto Assign All để hệ thống tự phân phòng phù hợp.
Có thể lọc để chỉ xem một loại phòng không?
Hiện tại timeline không có bộ lọc phòng riêng. Dùng trang Trạng Thái Phòng để lọc theo loại phòng hoặc trạng thái.
Panel Details không hiển thị dữ liệu?
Panel Details tải dữ liệu từ API sau khi nhấn View Details. Nếu không có dữ liệu, có thể booking chưa có dịch vụ hoặc yêu cầu tiện nghi nào. Kiểm tra kết nối mạng nếu panel vẫn loading quá lâu.
Nút Extend Stay bị disabled?
Extend Stay chỉ khả dụng với booking ở trạng thái CONFIRMED hoặc CHECKED_IN. Kiểm tra lại trạng thái booking trong phần thông tin của modal.
Liên Kết Liên Quan¶
- Trạng Thái Phòng — Lọc và đổi trạng thái từng phòng
- Danh Sách Phòng — Xem cấu hình chi tiết phòng
- Danh Sách Đặt Phòng — Quản lý booking
- Yêu Cầu Tiện Nghi — Quản lý yêu cầu tiện nghi