141 lines
4.1 KiB
Markdown
141 lines
4.1 KiB
Markdown
# 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.
|
||
|
||
---
|