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_3_Booking_&_Payment.md
+++ b/docs/tasks_3_Booking_&_Payment.md
@@ -1,144 +1,144 @@
 # Booking & Payment

-## Chức năng 1: BookingPage – Form Đặt phòng
+## Function 1: BookingPage – Booking Form

-### Mục tiêu
-    Xây dựng form đặt phòng đầy đủ thông tin, xác thực dữ liệu, tính tổng tiền theo số ngày, và gửi yêu cầu đặt.
+### Objective
+    Build a complete booking form with information, data validation, calculate total by number of days, and send booking request.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route:
    ```
    /booking/:roomId
    ```
-2. Khi user click “Đặt ngay” ở RoomDetailPage → chuyển sang BookingPage.
-3. Hiển thị:
-    - Ảnh phòng, tên phòng, giá/đêm
-    - Thông tin người dùng (tự động điền nếu đã login)
+2. When user clicks "Book Now" on RoomDetailPage → navigate to BookingPage.
+3. Display:
+    - Room image, room name, price/night
+    - User information (auto-fill if logged in)
    - Form:
-        + Ngày check-in / check-out (DateRangePicker)
-        + Số người
-        + Ghi chú
-        + Phương thức thanh toán:
-            1. Thanh toán tại chỗ
-            2. Chuyển khoản (hiển thị QR + hướng dẫn)
-4. Validate bằng Yup + React Hook Form:
+        + Check-in / check-out date (DateRangePicker)
+        + Number of guests
+        + Notes
+        + Payment method:
+            1. Pay at hotel
+            2. Bank transfer (display QR + instructions)
+4. Validate using Yup + React Hook Form:
    - Check-in < Check-out
-    - Không bỏ trống ngày
-    - Có chọn phương thức thanh toán
-5. Tính tổng tiền:
+    - Dates not empty
+    - Payment method selected
+5. Calculate total:
    ```
-    total = room.price * (số ngày ở)
+    total = room.price * (number of nights)
    ```
-6. Nút “Đặt phòng”:
+6. "Book" button:
    - Loading spinner
-    - Disable khi đang submit
+    - Disable when submitting

-7. Nếu chưa đăng nhập → redirect /login.
+7. If not logged in → redirect to /login.

 ---

-## Chức năng 2: Booking API (Giao tiếp backend)
+## Function 2: Booking API (Backend communication)

-### Mục tiêu
-    Kết nối và xử lý API liên quan đến đặt phòng.
+### Objective
+    Connect and handle APIs related to booking.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 🔧 Endpoints:
    ```
-    POST /api/bookings               → Tạo booking
-    GET /api/bookings/me             → Lấy danh sách booking của user
-    PATCH /api/bookings/:id/cancel   → Hủy booking
-    GET /api/bookings/:id            → Chi tiết booking
-    GET /api/bookings/check/:bookingNumber → Tra cứu booking
+    POST /api/bookings               → Create booking
+    GET /api/bookings/me             → Get user's booking list
+    PATCH /api/bookings/:id/cancel   → Cancel booking
+    GET /api/bookings/:id            → Booking details
+    GET /api/bookings/check/:bookingNumber → Look up booking
    ```
-🔄 Luồng xử lý:
-1. Frontend gọi POST /api/bookings
-2. Backend kiểm tra phòng trống:
+🔄 Processing flow:
+1. Frontend calls POST /api/bookings
+2. Backend checks room availability:
    ```
    GET /api/rooms/available?roomId=...&from=...&to=...
    ```
-3. Nếu trống → tạo booking
-    - Nếu trùng lịch → trả 409 “Phòng đã được đặt trong thời gian này”
-4. Gửi email xác nhận booking (nếu cần)
-5. Trả về dữ liệu booking để hiển thị /booking-success/:id.
+3. If available → create booking
+    - If schedule conflict → return 409 "Room already booked during this time"
+4. Send booking confirmation email (if needed)
+5. Return booking data to display /booking-success/:id.

 ---

-## Chức năng 3: BookingSuccess – Trang kết quả sau đặt phòng
+## Function 3: BookingSuccess – Page after booking

-### Mục tiêu
-    Hiển thị kết quả đặt phòng thành công và các hành động tiếp theo.
+### Objective
+    Display successful booking result and next actions.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route: /booking-success/:id
-2. Gọi GET /api/bookings/:id → hiển thị chi tiết
-3. Nút:
-    - “Xem đơn của tôi” → /my-bookings
-    - “Về trang chủ” → /
-4. Nếu phương thức là Chuyển khoản:
-    + Hiển thị QR code ngân hàng
-    + Cho phép upload ảnh xác nhận
-    + Gọi POST /api/notify/payment khi người dùng xác nhận đã chuyển khoản.
+2. Call GET /api/bookings/:id → display details
+3. Buttons:
+    - "View my bookings" → /my-bookings
+    - "Go to home" → /
+4. If payment method is Bank transfer:
+    + Display bank QR code
+    + Allow upload confirmation image
+    + Call POST /api/notify/payment when user confirms transfer.

 --- 

-## Chức năng 4: MyBookingsPage – Danh sách đơn đặt của người
+## Function 4: MyBookingsPage – User's booking list

-### Mục tiêu
-    Hiển thị toàn bộ các đơn đặt của user + cho phép hủy đơn.
+### Objective
+    Display all user's bookings + allow canceling bookings.

-#### Nhiệm vụ chi tiết
+#### Detailed Tasks
 1. Route: /my-bookings
 2. API: GET /api/bookings/me
-3. Hiển thị danh sách booking:
-    - Phòng, ngày nhận/trả, tổng tiền
-    - Trạng thái:
+3. Display booking list:
+    - Room, check-in/check-out dates, total amount
+    - Status:
        🟡 pending
        🟢 confirmed
        🔴 cancelled
-4. Nút “Hủy đặt phòng”:
-    1. window.confirm("Bạn có chắc muốn hủy không?")
-    2. Gọi PATCH /api/bookings/:id/cancel (hoặc DELETE /api/bookings/:id tùy implement)
-    3. Logic hủy:
-        - Giữ 20% giá trị đơn
-        - Hoàn 80% còn lại cho user
-        - Cập nhật trạng thái phòng về available
-    4. Hiển thị toast “Đơn đã được hủy thành công”
-5. Cho phép xem chi tiết booking:
+4. "Cancel booking" button:
+    1. window.confirm("Are you sure you want to cancel?")
+    2. Call PATCH /api/bookings/:id/cancel (or DELETE /api/bookings/:id depending on implementation)
+    3. Cancel logic:
+        - Keep 20% of order value
+        - Refund remaining 80% to user
+        - Update room status to available
+    4. Display toast "Booking cancelled successfully"
+5. Allow viewing booking details:
    - Route: /bookings/:id
-    - Gọi GET /api/bookings/:id
-    - Hiển thị chi tiết phòng, thông tin user, tổng tiền, status.
+    - Call GET /api/bookings/:id
+    - Display room details, user information, total amount, status.

 ---

-## Chức năng 5: Thanh toán (Giả lập Payment)
+## Function 5: Payment (Simulated Payment)

-### Mục tiêu
-    Cho phép người dùng chọn phương thức thanh toán và xác nhận thanh toán.
+### Objective
+    Allow users to select payment method and confirm payment.

-#### Nhiệm vụ chi tiết
- Phương thức:
-    1. Thanh toán tại chỗ
-        - Booking được tạo với status = "pending"
-    2. Chuyển khoản
-        - Hiển thị mã QR ngân hàng (tĩnh hoặc từ API)
-        - Upload ảnh biên lai (image upload)
-        - Sau khi upload → gọi POST /api/notify/payment gửi email xác nhận
-        - Cập nhật status = "confirmed"
+#### Detailed Tasks
+- Payment methods:
+    1. Pay at hotel
+        - Booking created with status = "pending"
+    2. Bank transfer
+        - Display bank QR code (static or from API)
+        - Upload receipt image (image upload)
+        - After upload → call POST /api/notify/payment send confirmation email
+        - Update status = "confirmed"

 ---

-## Chức năng 6: UX & Hiệu năng
+## Function 6: UX & Performance

-### Mục tiêu
-    Cải thiện trải nghiệm người dùng và tính trực quan.
+### Objective
+    Improve user experience and intuitiveness.

-#### Nhiệm vụ chi tiết
-1. Toasts (react-hot-toast hoặc sonner)
-2. Loading spinner rõ ràng
-3. DateRangePicker cho chọn ngày
-4. Form được validate đầy đủ (và báo lỗi chi tiết)
-5. Focus input đầu tiên
-6. Tự động redirect khi đặt thành công / hủy đơn
+#### Detailed Tasks
+1. Toasts (react-hot-toast or sonner)
+2. Clear loading spinner
+3. DateRangePicker for date selection
+4. Form fully validated (and detailed error messages)
+5. Focus first input
+6. Auto redirect when booking succeeds / canceling booking

---
+---