Hotel Booking

docs/tasks_5_Review_System.md

@@ -0,0 +1,140 @@
+# Review System
+
+## Chức năng 1: ReviewPage – Trang người dùng đánh giá phòng
+
+### Mục tiêu
+    Cho phép người dùng viết đánh giá cho những phòng họ đã đặt thành công.
+
+#### Nhiệm vụ chi tiết
+1. Route: /reviews
+2. Gọi API:
+    ```
+    GET /api/bookings/me → Lấy danh sách phòng người dùng đã đặt.
+    POST /api/reviews → Gửi đánh giá.
+    ```
+3. Giao diện:
+    - Hiển thị danh sách phòng đã đặt (tên, ngày ở, trạng thái)
+    - Nút “Đánh giá” (hiện nếu chưa đánh giá phòng đó)
+4. Khi nhấn “Đánh giá” → mở Modal:
+    - Input chọn số sao (⭐ 1–5)
+    - Textarea nhập nội dung bình luận
+    - Nút “Gửi đánh giá”
+5. Validate:
+    - Rating bắt buộc (1–5)
+    - Comment không để trống
+6. Sau khi gửi thành công → toast thông báo “Đánh giá của bạn đang chờ duyệt”.
+
+### Kết quả mong đợi
+1. Người dùng chỉ thấy nút “Đánh giá” với phòng đã từng đặt.
+2. Modal mở ra và validate chính xác.
+3. Gửi thành công → review có trạng thái "pending".
+4. Toast hiển thị thông báo hợp lý.
+5. Giao diện gọn, trực quan, không lỗi khi chưa có phòng nào đặt.
+
+---
+
+## Chức năng 2: RoomDetailPage – Hiển thị danh sách đánh giá
+
+### Mục tiêu
+    Hiển thị danh sách các đánh giá đã được admin duyệt cho từng phòng.
+
+#### Nhiệm vụ chi tiết
+1. Route: /rooms/:id
+2. API:
+    ```
+    GET /api/reviews?roomId={id}&status=approved
+    ```
+3. Hiển thị danh sách review:
+    - Avatar + tên người dùng
+    - Số sao (⭐)
+    - Nội dung bình luận
+    - Ngày đăng (createdAt)
+4. Tính và hiển thị điểm trung bình rating (VD: ⭐ 4.2 / 5)
+5. Nếu chưa có review → hiển thị: “Chưa có đánh giá nào.”
+
+### Kết quả mong đợi
+1. Danh sách review hiển thị đúng theo phòng.
+2. Chỉ review có status = approved được render.
+3. Tính điểm trung bình chính xác (làm tròn 1 chữ số thập phân).
+4. Hiển thị avatar, tên, sao, và ngày đầy đủ.
+5. Có thông báo “Chưa có đánh giá” khi danh sách trống.
+
+---
+
+## Chức năng 3: AdminReviewPage – Trang quản trị đánh giá
+
+### Mục tiêu
+    Cho phép Admin xem, duyệt hoặc từ chối các đánh giá người dùng gửi lên.
+
+#### Nhiệm vụ chi tiết
+1. Route: /admin/reviews
+2. API:
+    ```
+    GET /api/reviews
+    PATCH /api/reviews/:id/approve
+    PATCH /api/reviews/:id/reject
+    ```
+3. Hành động:
+    ✅ Duyệt → review chuyển sang approved
+    ❌ Từ chối → review chuyển sang rejected
+4. Sau khi duyệt → cập nhật giao diện và hiển thị toast thông báo.
+5. Có filter theo trạng thái (pending, approved, rejected).
+
+### Kết quả mong đợi
+1. Admin thấy đầy đủ danh sách review.
+2. Duyệt hoặc từ chối hoạt động đúng API.
+3. Bảng tự cập nhật khi thay đổi trạng thái.
+4. Toast hiển thị rõ “Đã duyệt” hoặc “Đã từ chối”.
+5. Chỉ review approved mới hiển thị công khai cho người dùng.
+
+--- 
+
+## Chức năng 4: Bảo mật & Logic hiển thị
+
+### Mục tiêu
+    Đảm bảo chỉ người hợp lệ mới có thể gửi đánh giá và hệ thống hiển thị đúng dữ liệu.
+
+#### Nhiệm vụ chi tiết
+1. Kiểm tra quyền:
+    - Người dùng chưa đăng nhập → redirect /login
+    - Người dùng chưa từng đặt phòng → không hiển thị nút “Đánh giá”
+2. Kiểm tra logic:
+    - Mỗi người chỉ được đánh giá 1 lần / phòng
+    - Review mặc định status = pending
+3. Phân quyền:
+    - User: chỉ gửi review
+    - Admin: duyệt / từ chối
+    - Staff: chỉ xem
+
+### Kết quả mong đợi
+1. Người chưa đăng nhập không thể gửi review.
+2. Mỗi phòng chỉ được review 1 lần bởi 1 user.
+3. Dữ liệu hiển thị chính xác theo phân quyền.
+4. Review chỉ xuất hiện công khai khi được duyệt.
+5. Không có lỗi logic hoặc hiển thị sai trạng thái.
+
+---
+
+## Chức năng 5: UX & Hiển thị tổng quan
+
+### Mục tiêu
+    Cải thiện trải nghiệm người dùng và giao diện hiển thị đánh giá.
+
+#### Nhiệm vụ chi tiết
+1. Dùng component đánh giá sao trực quan (ví dụ react-rating-stars-component).
+2. Format ngày tạo bằng:
+    ```
+    new Date(createdAt).toLocaleDateString('vi-VN')
+    ```
+3. Thêm hiệu ứng hover nhẹ khi hiển thị danh sách review.
+4. Dùng toast (react-hot-toast) cho thông báo gửi / duyệt / từ chối.
+5. Loading spinner khi chờ API.
+
+### Kết quả mong đợi
+1. UI mượt mà, dễ đọc và thân thiện.
+2. Loading / toast hiển thị đúng trạng thái.
+3. Ngày tháng, sao và bình luận được format đẹp.
+4. Giao diện quản trị và người dùng thống nhất phong cách.
+5. Trải nghiệm người dùng mượt, không giật lag.
+
+---