Lịch Đặt Phòng¶
Trang lịch hiển thị toàn bộ đặt phòng theo dạng lịch trực quan. Hỗ trợ chế độ tuần và tháng, kéo thả đặt phòng sang ngày khác, chuyển phòng cho khách, và xem chi tiết từng đặt phòng.
Thanh Điều Khiển¶
| # | Điều khiển | Ý nghĩa |
|---|---|---|
| ① | ← (Trước) | Điều hướng tuần trước / tháng trước |
| ② | Today (Hôm nay) | Quay về tuần / tháng hiện tại |
| ③ | → (Sau) | Điều hướng tuần sau / tháng sau |
| ④ | Chế độ xem | Chọn giữa Week (tuần) và Month (tháng) |
| ⑤ | Lọc theo phòng | Dropdown — chọn phòng cụ thể để lọc lịch |
| ⑥ | Nhãn ngày | Hiển thị tuần hoặc tháng đang xem |
Bảng Chú Giải (Legend)¶
Bên dưới thanh điều khiển có card hiển thị bảng chú giải màu:
- Status: Màu badge theo trạng thái đặt phòng (Pending, Confirmed, Checked In, ...)
- Source: Màu theo kênh đặt phòng (DIRECT, OTA, PHONE, WALK_IN)
Chế Độ Xem¶
Chế Độ Tuần (Mặc Định)¶
Hiển thị lịch 7 ngày với mỗi hàng là một phòng, mỗi cột là một ngày. Ngày bắt đầu từ Chủ Nhật.
- Ô ngày hiện tại được tô nền xanh nhạt
- Mỗi ô hiển thị các booking card được tô màu theo trạng thái
- Booking card hiển thị tên khách, số phòng, ngày check-in/out
- Hover vào booking card để xem tooltip thông tin nhanh
- Kéo thả (desktop) booking card sang ô ngày khác để dời ngày
Chế Độ Tháng¶
Hiển thị lịch tháng đầy đủ (6 tuần × 7 ngày). Mỗi ô ngày:
- Số ngày ở góc trên trái
- Tối đa 3 booking card hiển thị; còn lại hiện "+N more"
- Ngày hôm nay có số in đậm + nền xanh nhạt
- Ngày ngoài tháng hiện tại sẽ mờ hơn
Xem Chi Tiết Đặt Phòng¶
Nhấp vào bất kỳ booking card nào trên lịch để mở modal chi tiết.
Thông Tin Hiển Thị¶
| Trường | Mô tả |
|---|---|
| Tên khách | Họ tên khách lưu trú |
| Email khách | |
| Phòng | Số phòng + loại phòng |
| Check-in / Check-out | Ngày nhận và trả phòng |
| Số đêm | Tổng số đêm lưu trú |
| Trạng thái | Badge màu theo trạng thái đặt phòng |
| Nguồn | Kênh đặt phòng |
| Số khách | Người lớn + trẻ em |
| Tổng tiền | Số tiền đặt phòng (VND) |
Nút Thao Tác Trong Modal¶
| Nút | Điều kiện | Ý nghĩa |
|---|---|---|
| Close | Luôn hiển thị | Đóng modal |
| Transfer Room (↔) | Chỉ với PENDING / CONFIRMED / CHECKED_IN | Mở modal chuyển phòng |
| View Details (👁️) | Luôn hiển thị | Mở trang chi tiết đặt phòng trong tab mới |
Kéo Thả (Drag & Drop)¶
Chỉ dành cho desktop
Tính năng kéo thả không khả dụng trên mobile. Trên mobile, dùng nút Transfer Room trong modal chi tiết để chuyển phòng.
Trên desktop: 1. Click và giữ chuột vào booking card 2. Kéo đến ô ngày mới (cùng hàng phòng hoặc sang hàng phòng khác) 3. Thả chuột — hệ thống tự động cập nhật ngày check-in/check-out và phòng mới
Kéo thả thay đổi cả phòng
Nếu kéo booking card sang hàng phòng khác, hệ thống sẽ cập nhật cả ngày lẫn phòng. Kiểm tra kỹ trước khi thả.
Chuyển Phòng (Transfer Room)¶
- Nhấp vào booking card trên lịch → modal chi tiết mở ra
- Nhấp nút Transfer Room (↔)
- Trong modal chuyển phòng: chọn phòng mới
- Xác nhận — hệ thống cập nhật và làm mới lịch
Điều kiện
Nút Transfer Room chỉ hiển thị với đặt phòng có trạng thái PENDING, CONFIRMED, hoặc CHECKED_IN.
Mẹo & Thực Hành Tốt Nhất¶
Xem phòng cụ thể
Dùng dropdown Lọc theo phòng (⑤) để thu hẹp lịch chỉ hiển thị một phòng. Hữu ích khi kiểm tra lịch trống của phòng đó trước khi nhận đặt phòng mới.
Điều hướng nhanh
Nhấp Today (②) bất kỳ lúc nào để quay lại tuần/tháng hiện tại mà không cần nhấn ← nhiều lần.
Chế độ tháng cho cái nhìn tổng thể
Chuyển sang Month view để thấy toàn bộ tháng và nhanh chóng phát hiện ngày nào còn nhiều phòng trống.
Câu Hỏi Thường Gặp¶
Lịch không hiển thị đặt phòng nào — tại sao?
Kiểm tra: (1) tuần/tháng đang xem có đặt phòng không, (2) bộ lọc phòng có đang chọn phòng không có booking không. Xóa bộ lọc phòng và quay về hôm nay bằng nút Today.
Kéo thả không hoạt động?
Tính năng kéo thả chỉ hoạt động trên desktop. Trên mobile, dùng Transfer Room trong modal chi tiết.
Không thấy nút Transfer Room trong modal?
Nút này chỉ hiển thị với đặt phòng ở trạng thái PENDING, CONFIRMED hoặc CHECKED_IN. Đặt phòng đã CHECKED_OUT, CANCELLED hoặc COMPLETED không thể chuyển phòng từ lịch.
Booking card hiển thị màu gì?
Màu của booking card phụ thuộc vào trạng thái đặt phòng — xem bảng chú giải (Legend) ở đầu trang. Hover vào card để xem tooltip chi tiết bao gồm tên khách, ngày, số tiền.
Liên Kết Liên Quan¶
- Danh Sách Đặt Phòng — Xem đặt phòng dạng bảng
- Tạo Đặt Phòng — Tạo đặt phòng mới
- Chi Tiết Đặt Phòng — Xem và quản lý từng đặt phòng