update

client/ROUTING_GUIDE.md

@@ -1,138 +1,138 @@
-# Routing Configuration - Hướng dẫn Test
+# Routing Configuration - Testing Guide
 
-## ✅ Đã hoàn thành Chức năng 2
+## ✅ Function 2 Completed
 
-### Components đã tạo:
+### Components Created:
 
 1. **ProtectedRoute** - `src/components/auth/ProtectedRoute.tsx`
-   - Bảo vệ routes yêu cầu authentication
-   - Redirect về `/login` nếu chưa đăng nhập
-   - Lưu location để quay lại sau khi login
+   - Protects routes requiring authentication
+   - Redirects to `/login` if not logged in
+   - Saves location to return after login
 
 2. **AdminRoute** - `src/components/auth/AdminRoute.tsx`
-   - Bảo vệ routes chỉ dành cho Admin
-   - Redirect về `/` nếu không phải admin
-   - Kiểm tra `userInfo.role === 'admin'`
+   - Protects routes for Admin only
+   - Redirects to `/` if not admin
+   - Checks `userInfo.role === 'admin'`
 
 3. **Page Components**:
-   - `RoomListPage` - Danh sách phòng (public)
-   - `BookingListPage` - Lịch sử đặt phòng (protected)
-   - `DashboardPage` - Dashboard cá nhân (protected)
+   - `RoomListPage` - Room list (public)
+   - `BookingListPage` - Booking history (protected)
+   - `DashboardPage` - Personal dashboard (protected)
 
-### Cấu trúc Routes:
+### Route Structure:
 
-#### Public Routes (Không cần đăng nhập):
+#### Public Routes (No login required):
 ```
 /                  → HomePage
 /rooms             → RoomListPage
 /about             → About Page
-/login             → Login Page (chưa có)
-/register          → Register Page (chưa có)
-/forgot-password   → Forgot Password Page (chưa có)
-/reset-password/:token → Reset Password Page (chưa có)
+/login             → Login Page (not yet)
+/register          → Register Page (not yet)
+/forgot-password   → Forgot Password Page (not yet)
+/reset-password/:token → Reset Password Page (not yet)
 ```
 
-#### Protected Routes (Cần đăng nhập):
+#### Protected Routes (Login required):
 ```
 /dashboard         → DashboardPage (ProtectedRoute)
 /bookings          → BookingListPage (ProtectedRoute)
 /profile           → Profile Page (ProtectedRoute)
 ```
 
-#### Admin Routes (Chỉ Admin):
+#### Admin Routes (Admin only):
 ```
 /admin             → AdminLayout (AdminRoute)
 /admin/dashboard   → Admin Dashboard
-/admin/users       → Quản lý người dùng
-/admin/rooms       → Quản lý phòng
-/admin/bookings    → Quản lý đặt phòng
-/admin/payments    → Quản lý thanh toán
-/admin/services    → Quản lý dịch vụ
-/admin/promotions  → Quản lý khuyến mãi
-/admin/banners     → Quản lý banner
-/admin/reports     → Báo cáo
-/admin/settings    → Cài đặt
+/admin/users       → User Management
+/admin/rooms       → Room Management
+/admin/bookings    → Booking Management
+/admin/payments    → Payment Management
+/admin/services    → Service Management
+/admin/promotions  → Promotion Management
+/admin/banners     → Banner Management
+/admin/reports     → Reports
+/admin/settings    → Settings
 ```
 
-## 🧪 Cách Test
+## 🧪 How to Test
 
-### 1. Khởi động Dev Server:
+### 1. Start Dev Server:
 ```bash
 cd /d/hotel-booking/client
 npm run dev
 ```
 
-Mở `http://localhost:5173`
+Open `http://localhost:5173`
 
 ### 2. Test Public Routes:
-- Truy cập `/` → Hiển thị HomePage ✅
-- Truy cập `/rooms` → Hiển thị RoomListPage ✅
-- Truy cập `/about` → Hiển thị About Page ✅
+- Access `/` → Display HomePage ✅
+- Access `/rooms` → Display RoomListPage ✅
+- Access `/about` → Display About Page ✅
 
-### 3. Test Protected Routes (Chưa login):
-- Truy cập `/dashboard` → Redirect về `/login` ✅
-- Truy cập `/bookings` → Redirect về `/login` ✅
-- Truy cập `/profile` → Redirect về `/login` ✅
+### 3. Test Protected Routes (Not logged in):
+- Access `/dashboard` → Redirect to `/login` ✅
+- Access `/bookings` → Redirect to `/login` ✅
+- Access `/profile` → Redirect to `/login` ✅
 
-### 4. Test Protected Routes (Đã login):
-- Click nút **"🔒 Demo Login"** ở góc dưới phải
-- Truy cập `/dashboard` → Hiển thị Dashboard ✅
-- Truy cập `/bookings` → Hiển thị Booking List ✅
-- Truy cập `/profile` → Hiển thị Profile ✅
+### 4. Test Protected Routes (Logged in):
+- Click **"🔒 Demo Login"** button at bottom right
+- Access `/dashboard` → Display Dashboard ✅
+- Access `/bookings` → Display Booking List ✅
+- Access `/profile` → Display Profile ✅
 
 ### 5. Test Admin Routes (Role = Customer):
-- Đảm bảo đã login (role = customer)
-- Truy cập `/admin` → Redirect về `/` ✅
-- Truy cập `/admin/dashboard` → Redirect về `/` ✅
+- Ensure logged in (role = customer)
+- Access `/admin` → Redirect to `/` ✅
+- Access `/admin/dashboard` → Redirect to `/` ✅
 
 ### 6. Test Admin Routes (Role = Admin):
-- Click nút **"👑 Switch to Admin"**
-- Truy cập `/admin` → Redirect về `/admin/dashboard` ✅
-- Truy cập `/admin/users` → Hiển thị User Management ✅
-- Truy cập `/admin/rooms` → Hiển thị Room Management ✅
-- Click các menu trong SidebarAdmin → Hoạt động bình thường ✅
+- Click **"👑 Switch to Admin"** button
+- Access `/admin` → Redirect to `/admin/dashboard` ✅
+- Access `/admin/users` → Display User Management ✅
+- Access `/admin/rooms` → Display Room Management ✅
+- Click menu items in SidebarAdmin → Works normally ✅
 
 ### 7. Test Logout:
-- Click nút **"🔓 Demo Logout"**
-- Truy cập `/dashboard` → Redirect về `/login` ✅
-- Truy cập `/admin` → Redirect về `/` ✅
+- Click **"🔓 Demo Logout"** button
+- Access `/dashboard` → Redirect to `/login` ✅
+- Access `/admin` → Redirect to `/` ✅
 
-## 🎯 Kết quả mong đợi
+## 🎯 Expected Results
 
 ### ✅ ProtectedRoute:
-1. User chưa login không thể truy cập protected routes
-2. Redirect về `/login` và lưu `state.from` để quay lại sau
-3. User đã login có thể truy cập protected routes bình thường
+1. Users not logged in cannot access protected routes
+2. Redirect to `/login` and save `state.from` to return later
+3. Logged in users can access protected routes normally
 
 ### ✅ AdminRoute:
-1. User không phải admin không thể truy cập `/admin/*`
-2. Redirect về `/` nếu không phải admin
-3. Admin có thể truy cập tất cả admin routes
+1. Non-admin users cannot access `/admin/*`
+2. Redirect to `/` if not admin
+3. Admin can access all admin routes
 
-### ✅ Không có redirect loop:
-1. Redirect chỉ xảy ra 1 lần
-2. Không có vòng lặp redirect vô tận
-3. Browser history hoạt động đúng (back/forward)
+### ✅ No redirect loop:
+1. Redirect only happens once
+2. No infinite redirect loop
+3. Browser history works correctly (back/forward)
 
-## 📝 Demo Buttons (Tạm thời)
+## 📝 Demo Buttons (Temporary)
 
 ### 🔒 Demo Login/Logout:
-- Click để toggle authentication state
-- Mô phỏng login/logout
-- Sẽ được thay bằng Zustand store ở Chức năng 3
+- Click to toggle authentication state
+- Simulates login/logout
+- Will be replaced by Zustand store in Function 3
 
 ### 👑 Switch Role:
-- Chỉ hiển thị khi đã login
-- Toggle giữa `customer` ↔ `admin`
-- Test AdminRoute hoạt động đúng
+- Only displays when logged in
+- Toggle between `customer` ↔ `admin`
+- Test AdminRoute works correctly
 
-## 🚀 Bước tiếp theo
+## 🚀 Next Steps
 
-Chức năng 3: useAuthStore (Zustand Store)
-- Tạo store quản lý auth state toàn cục
-- Thay thế demo state bằng Zustand
-- Tích hợp với localStorage
-- Xóa demo toggle buttons
+Function 3: useAuthStore (Zustand Store)
+- Create store to manage global auth state
+- Replace demo state with Zustand
+- Integrate with localStorage
+- Remove demo toggle buttons
 
 ## 🔧 File Structure