Hotel Booking

2025-11-16 14:19:13 +02:00
commit 824eec6190
203 changed files with 37696 additions and 0 deletions
--- a/client/ROUTING_GUIDE.md
+++ b/client/ROUTING_GUIDE.md
@@ -0,0 +1,160 @@
+# Routing Configuration - Hướng dẫn Test
+
+## ✅ Đã hoàn thành Chức năng 2
+
+### Components đã tạo:
+
+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
+
+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'`
+
+3. **Page Components**:
+   - `RoomListPage` - Danh sách phòng (public)
+   - `BookingListPage` - Lịch sử đặt phòng (protected)
+   - `DashboardPage` - Dashboard cá nhân (protected)
+
+### Cấu trúc Routes:
+
+#### Public Routes (Không cần đăng nhập):
+```
+/                  → 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ó)
+```
+
+#### Protected Routes (Cần đăng nhập):
+```
+/dashboard         → DashboardPage (ProtectedRoute)
+/bookings          → BookingListPage (ProtectedRoute)
+/profile           → Profile Page (ProtectedRoute)
+```
+
+#### Admin Routes (Chỉ Admin):
+```
+/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
+```
+
+## 🧪 Cách Test
+
+### 1. Khởi động Dev Server:
+```bash
+cd /d/hotel-booking/client
+npm run dev
+```
+
+Mở `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 ✅
+
+### 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` ✅
+
+### 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 ✅
+
+### 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ề `/` ✅
+
+### 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 ✅
+
+### 7. Test Logout:
+- Click nút **"🔓 Demo Logout"**
+- Truy cập `/dashboard` → Redirect về `/login` ✅
+- Truy cập `/admin` → Redirect về `/` ✅
+
+## 🎯 Kết quả mong đợi
+
+### ✅ 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
+
+### ✅ 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
+
+### ✅ 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)
+
+## 📝 Demo Buttons (Tạm thời)
+
+### 🔒 Demo Login/Logout:
+- Click để toggle authentication state
+- Mô phỏng login/logout
+- Sẽ được thay bằng Zustand store ở Chức năng 3
+
+### 👑 Switch Role:
+- Chỉ hiển thị khi đã login
+- Toggle giữa `customer` ↔ `admin`
+- Test AdminRoute hoạt động đúng
+
+## 🚀 Bước tiếp theo
+
+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
+
+## 🔧 File Structure
+
+```
+src/
+├── components/
+│   ├── auth/
+│   │   ├── ProtectedRoute.tsx
+│   │   ├── AdminRoute.tsx
+│   │   └── index.ts
+│   └── layout/
+│       ├── Header.tsx
+│       ├── Footer.tsx
+│       ├── SidebarAdmin.tsx
+│       ├── LayoutMain.tsx
+│       └── index.ts
+├── pages/
+│   ├── HomePage.tsx
+│   ├── AdminLayout.tsx
+│   └── customer/
+│       ├── RoomListPage.tsx
+│       ├── BookingListPage.tsx
+│       └── DashboardPage.tsx
+└── App.tsx
+```