update

2025-11-16 15:12:43 +02:00
parent 824eec6190
commit 93d4c1df80
54 changed files with 1606 additions and 1612 deletions
--- a/docs/tasks_2_Home_&_RoomSearch.md
+++ b/docs/tasks_2_Home_&_RoomSearch.md
@@ -1,182 +1,182 @@
 # Review System

-## Chức năng 1: HomePage – Trang chủ hiển thị phòng nổi bật
+## Function 1: HomePage – Homepage displaying featured rooms

-### Mục tiêu
-    Tạo giao diện trang chủ giới thiệu phòng nổi bật, banner và điều hướng đến danh sách phòng.
+### Objective
+    Create a homepage interface introducing featured rooms, banner and navigation to room list.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route: /
 2. Banner:
    ```
    GET /api/banners?position=home
    ```
-    - Nếu không có banner → hiển thị ảnh mặc định.
-    - Có thể dùng Carousel hoặc ảnh tĩnh.
-3. Phòng nổi bật:
+    - If no banner → display default image.
+    - Can use Carousel or static image.
+3. Featured rooms:
    ```
    GET /api/rooms?featured=true
    ```
-    - Hiển thị 4–6 phòng bằng component RoomCard.
-    - Nút “Xem tất cả phòng” → điều hướng /rooms.
-4. Loading skeleton trong khi chờ dữ liệu.
+    - Display 4–6 rooms using RoomCard component.
+    - "View all rooms" button → navigate to /rooms.
+4. Loading skeleton while waiting for data.

-### Kết quả mong đợi
-1. Trang chủ hiển thị banner và danh sách phòng nổi bật rõ ràng.
-2. Khi không có banner → ảnh fallback được hiển thị.
-3. Phòng nổi bật load từ API, giới hạn 4–6 phòng.
-4. UX mượt, có skeleton khi load.
-5. Nút “Xem tất cả phòng” điều hướng chính xác đến /rooms.
+### Expected Results
+1. Homepage displays banner and featured room list clearly.
+2. When no banner → fallback image is displayed.
+3. Featured rooms load from API, limited to 4–6 rooms.
+4. Smooth UX, with skeleton when loading.
+5. "View all rooms" button navigates correctly to /rooms.

 ---

-## Chức năng 2: RoomListPage – Danh sách & Bộ lọc phòng
+## Function 2: RoomListPage – Room List & Filters

-### Mục tiêu
-    Hiển thị danh sách phòng, cho phép người dùng lọc theo loại, giá, số người và phân trang.
+### Objective
+    Display room list, allow users to filter by type, price, number of guests and pagination.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route: /rooms
-2. Bộ lọc (component RoomFilter):
-    - Trường lọc: loại phòng, giá min–max, số người.
-    - Khi submit → gọi API:
+2. Filters (RoomFilter component):
+    - Filter fields: room type, min–max price, number of guests.
+    - On submit → call API:
        ```
        GET /api/rooms?type=&minPrice=&maxPrice=&capacity=&page=
        ```
-    - Lưu bộ lọc vào URL query.
-    - Nút “Reset” để xóa toàn bộ bộ lọc.
-3. Phân trang (Pagination component).
-4. Hiển thị danh sách bằng RoomCard.
+    - Save filters to URL query.
+    - "Reset" button to clear all filters.
+3. Pagination (Pagination component).
+4. Display list using RoomCard.

-### Kết quả mong đợi
-1. Danh sách phòng hiển thị chính xác theo filter.
-2. Bộ lọc hoạt động mượt, có thể reset dễ dàng.
-3. Phân trang hiển thị chính xác số trang.
-4. Filter được lưu trong URL (giúp reload không mất).
-5. Giao diện responsive, dễ đọc, không bị vỡ.
+### Expected Results
+1. Room list displays accurately according to filter.
+2. Filters work smoothly, can reset easily.
+3. Pagination displays correct page numbers.
+4. Filters saved in URL (helps reload without losing).
+5. Responsive interface, easy to read, no breakage.

 ---

-## Chức năng 3: RoomDetailPage – Chi tiết phòng & Đánh giá
+## Function 3: RoomDetailPage – Room Details & Reviews

-### Mục tiêu
-    Tạo trang chi tiết phòng đầy đủ thông tin, hình ảnh, tiện ích và khu vực đánh giá.
+### Objective
+    Create a complete room detail page with information, images, amenities and review section.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route: /rooms/:id
-2. Phần nội dung:
-    -Thông tin phòng (ảnh, mô tả, giá, tiện ích)
-    - RoomGallery: Carousel ảnh
-    - RoomAmenities: danh sách tiện ích
-    - Nút “Đặt ngay” → điều hướng /booking/:roomId
+2. Content section:
+    - Room information (images, description, price, amenities)
+    - RoomGallery: Image carousel
+    - RoomAmenities: amenities list
+    - "Book Now" button → navigate to /booking/:roomId
 3. Review Section:
-    - Lấy danh sách review đã duyệt:
+    - Get approved review list:
        ```
        GET /api/rooms/:id/reviews
        ```
-    - Nếu người dùng đã từng đặt phòng:
+    - If user has booked the room before:
        ```
        POST /api/reviews
        ```
-4. Component RatingStars + ReviewForm.
-5. Nếu chưa đăng nhập → hiển thị “Vui lòng đăng nhập để đánh giá”.
-6. Tính trung bình điểm review.
-7. Loading skeleton khi chờ review.
+4. RatingStars + ReviewForm component.
+5. If not logged in → display "Please login to review".
+6. Calculate average review rating.
+7. Loading skeleton when waiting for reviews.

-### Kết quả mong đợi
-1. Hiển thị đầy đủ ảnh, mô tả, tiện ích phòng.
-2. Carousel hoạt động mượt mà.
-3. Review hiển thị đúng, có trung bình số sao.
-4. Người đã đặt có thể viết review (sau duyệt).
-5. Nút “Đặt ngay” điều hướng chính xác đến form booking.
-6. Skeleton hiển thị khi chờ dữ liệu.
+### Expected Results
+1. Displays complete images, description, room amenities.
+2. Carousel works smoothly.
+3. Reviews display correctly, with average star rating.
+4. Users who have booked can write reviews (after approval).
+5. "Book Now" button navigates correctly to booking form.
+6. Skeleton displays when waiting for data.

 --- 

-## Chức năng 4: SearchRoom – Tìm phòng trống
+## Function 4: SearchRoom – Find available rooms

-### Mục tiêu
-    Cho phép người dùng tìm phòng trống theo ngày và loại phòng.
+### Objective
+    Allow users to find available rooms by date and room type.

-#### Nhiệm vụ chi tiết
-1. Form tìm kiếm (ở HomePage hoặc RoomListPage):
-    - Input: ngày đến (from), ngày đi (to), loại phòng.
+#### Detailed Tasks
+1. Search form (on HomePage or RoomListPage):
+    - Input: arrival date (from), departure date (to), room type.
 2. API:
    ```
    GET /api/rooms/available?from=&to=&type=
    ```
-3. Validate:
+3. Validation:
    - from < to
-    - from không nhỏ hơn hôm nay.
-4. Kết quả:
-    - Hiển thị danh sách bằng RoomCard.
-    - Nếu không có kết quả → “Không tìm thấy phòng phù hợp”.
-5. Dùng react-datepicker hoặc react-day-picker.
-6. Loading spinner khi đang tìm.
+    - from not less than today.
+4. Results:
+    - Display list using RoomCard.
+    - If no results → "No matching rooms found".
+5. Use react-datepicker or react-day-picker.
+6. Loading spinner while searching.

-### Kết quả mong đợi
-1. Form tìm phòng hoạt động, validate chính xác.
-2. Khi bấm tìm → hiển thị danh sách phòng trống.
-3. Nếu không có kết quả → thông báo thân thiện.
-4. Loading hiển thị rõ trong lúc chờ.
-5. Tìm theo ngày & loại phòng chính xác từ backend.
+### Expected Results
+1. Room search form works, validates correctly.
+2. When clicking search → displays available room list.
+3. If no results → friendly message.
+4. Loading displays clearly while waiting.
+5. Search by date & room type accurately from backend.

 ---

-## Chức năng 5: Wishlist – Danh sách yêu thích
+## Function 5: Wishlist – Favorites list

-### Mục tiêu
-    Cho phép người dùng thêm, bỏ hoặc xem danh sách phòng yêu thích.
+### Objective
+    Allow users to add, remove or view favorite rooms list.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. API:
    ```
-    POST /api/favorites/:roomId   # Thêm
-    DELETE /api/favorites/:roomId # Xóa
-    GET /api/favorites            # Lấy danh sách yêu thích
+    POST /api/favorites/:roomId   # Add
+    DELETE /api/favorites/:roomId # Remove
+    GET /api/favorites            # Get favorites list
    ```
 2. UI:
    - FavoriteButton (icon ❤️):
-        + Nếu yêu thích → tô đỏ
-        + Nếu chưa → viền xám
-    - Tooltip: “Thêm vào yêu thích” / “Bỏ yêu thích”
-3. Nếu chưa đăng nhập:
-    - Lưu tạm trong localStorage (guestFavorites)
-    - Khi đăng nhập → đồng bộ với server.
-4. Toast thông báo khi thêm/bỏ yêu thích.
+        + If favorited → filled red
+        + If not → gray border
+    - Tooltip: "Add to favorites" / "Remove from favorites"
+3. If not logged in:
+    - Save temporarily in localStorage (guestFavorites)
+    - When logged in → sync with server.
+4. Toast notification when adding/removing favorites.

-### Kết quả mong đợi
-1. Nút ❤️ hoạt động đúng trạng thái (đỏ / xám).
-2. Người chưa đăng nhập vẫn có thể lưu tạm yêu thích.
-3. Khi đăng nhập → danh sách đồng bộ với backend.
-4. Toast hiển thị “Đã thêm vào yêu thích” / “Đã bỏ yêu thích”.
-5. API hoạt động đúng, không lỗi 401 khi đăng nhập hợp lệ.
+### Expected Results
+1. ❤️ button works correctly (red / gray).
+2. Unauthenticated users can still save favorites temporarily.
+3. When logged in → list syncs with backend.
+4. Toast displays "Added to favorites" / "Removed from favorites".
+5. API works correctly, no 401 error when logged in validly.

 ---

-## Chức năng 6: Tối ưu UI/UX & Performance
+## Function 6: UI/UX & Performance Optimization

-### Mục tiêu
-    Cải thiện trải nghiệm người dùng, tối ưu tốc độ tải và khả năng hiển thị responsive.
+### Objective
+    Improve user experience, optimize loading speed and responsive display capability.

-#### Nhiệm vụ chi tiết
-1. Loading skeleton khi fetch phòng hoặc review.
-2. Debounce khi nhập giá để tránh gọi API liên tục.
-3. Infinite scroll (tùy chọn) thay cho pagination.
+#### Detailed Tasks
+1. Loading skeleton when fetching rooms or reviews.
+2. Debounce when entering price to avoid continuous API calls.
+3. Infinite scroll (optional) instead of pagination.
 4. Responsive layout:
-    - Desktop: 3–4 cột
-    - Tablet: 2 cột
-    - Mobile: 1 cột
+    - Desktop: 3–4 columns
+    - Tablet: 2 columns
+    - Mobile: 1 column
 5. Empty states:
-    - Không có phòng → hiển thị ảnh minh họa + dòng “Không tìm thấy phòng phù hợp”.
-    - Không có review → “Hãy là người đầu tiên đánh giá!”.
-6. Toast thông báo khi thêm yêu thích, gửi review, lỗi mạng.
+    - No rooms → display illustration + "No matching rooms found" message.
+    - No reviews → "Be the first to review!".
+6. Toast notifications when adding favorites, submitting reviews, network errors.

-### Kết quả mong đợi
-1. Trang hoạt động mượt, có skeleton khi chờ dữ liệu.
-2. Tốc độ phản hồi nhanh (debounce hoạt động).
-3. Responsive trên mọi kích thước màn hình.
-4. Các empty state hiển thị thân thiện.
-5. Toast thông báo rõ ràng, UX thân thiện.
+### Expected Results
+1. Page works smoothly, has skeleton when waiting for data.
+2. Fast response speed (debounce works).
+3. Responsive on all screen sizes.
+4. Empty states display friendly.
+5. Toast notifications clear, friendly UX.

 ---