Hotel-Booking/docs/tasks_5_Review_System.md

Review System

Function 1: ReviewPage – User Room Review Page

Objective

Allow users to write reviews for rooms they have successfully booked.

Detailed Tasks

1. Route: /reviews
2. API Calls:

   GET /api/bookings/me → Get list of rooms user has booked.
   POST /api/reviews → Submit review.
   

3. Interface:
   • Display list of booked rooms (name, stay dates, status)
   • "Review" button (shown if room not yet reviewed)
4. When clicking "Review" → open Modal:
   • Input to select star rating (⭐ 1–5)
   • Textarea to enter comment content
   • "Submit Review" button
5. Validation:
   • Rating required (1–5)
   • Comment cannot be empty
6. After successful submission → toast notification "Your review is pending approval".

Expected Results

1. Users only see "Review" button for rooms they have booked.
2. Modal opens and validates correctly.
3. Successful submission → review has status "pending".
4. Toast displays appropriate notification.
5. Clean, intuitive interface, no errors when no rooms booked.

---

Function 2: RoomDetailPage – Display Review List

Objective

Display list of reviews that have been approved by admin for each room.

Detailed Tasks

1. Route: /rooms/:id
2. API:

   GET /api/reviews?roomId={id}&status=approved
   

3. Display review list:
   • Avatar + user name
   • Star rating (⭐)
   • Comment content
   • Post date (createdAt)
4. Calculate and display average rating (e.g.: ⭐ 4.2 / 5)
5. If no reviews → display: "No reviews yet."

Expected Results

1. Review list displays correctly by room.
2. Only reviews with status = approved are rendered.
3. Calculate average rating accurately (rounded to 1 decimal place).
4. Display avatar, name, stars, and date completely.
5. Show "No reviews yet" message when list is empty.

---

Function 3: AdminReviewPage – Review Management Page

Objective

Allow Admin to view, approve or reject reviews submitted by users.

Detailed Tasks

1. Route: /admin/reviews
2. API:

   GET /api/reviews
   PATCH /api/reviews/:id/approve
   PATCH /api/reviews/:id/reject
   

3. Actions: ✅ Approve → review changes to approved ❌ Reject → review changes to rejected
4. After approval → update interface and display toast notification.
5. Filter by status (pending, approved, rejected).

Expected Results

1. Admin sees complete review list.
2. Approve or reject works correctly with API.
3. Table automatically updates when status changes.
4. Toast clearly displays "Approved" or "Rejected".
5. Only approved reviews are displayed publicly to users.

---

Function 4: Security & Display Logic

Objective

Ensure only valid users can submit reviews and system displays correct data.

Detailed Tasks

1. Permission check:
   • User not logged in → redirect /login
   • User has never booked room → don't display "Review" button
2. Logic check:
   • Each person can only review once per room
   • Review default status = pending
3. Authorization:
   • User: can only submit review
   • Admin: approve / reject
   • Staff: view only

Expected Results

1. Users not logged in cannot submit reviews.
2. Each room can only be reviewed once by one user.
3. Data displays correctly according to permissions.
4. Reviews only appear publicly when approved.
5. No logic errors or incorrect status display.

---

Function 5: UX & Overall Display

Objective

Improve user experience and review display interface.

Detailed Tasks

1. Use intuitive star rating component (e.g., react-rating-stars-component).
2. Format creation date using:

   new Date(createdAt).toLocaleDateString('en-US')
   

3. Add light hover effect when displaying review list.
4. Use toast (react-hot-toast) for submit / approve / reject notifications.
5. Loading spinner when waiting for API.

Expected Results

1. Smooth, readable and user-friendly UI.
2. Loading / toast displays correct status.
3. Dates, stars and comments are formatted nicely.
4. Admin and user interfaces have consistent styling.
5. Smooth user experience, no lag or stuttering.

---