# Routing Configuration - Testing Guide

## ✅ Function 2 Completed

### Components Created:

1. **ProtectedRoute** - `src/components/auth/ProtectedRoute.tsx`
   - Protects routes requiring authentication
   - Redirects to `/login` if not logged in
   - Saves location to return after login

2. **AdminRoute** - `src/components/auth/AdminRoute.tsx`
   - Protects routes for Admin only
   - Redirects to `/` if not admin
   - Checks `userInfo.role === 'admin'`

3. **Page Components**:
   - `RoomListPage` - Room list (public)
   - `BookingListPage` - Booking history (protected)
   - `DashboardPage` - Personal dashboard (protected)

### Route Structure:

#### Public Routes (No login required):
```
/                  → HomePage
/rooms             → RoomListPage
/about             → About Page
/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 (Login required):
```
/dashboard         → DashboardPage (ProtectedRoute)
/bookings          → BookingListPage (ProtectedRoute)
/profile           → Profile Page (ProtectedRoute)
```

#### Admin Routes (Admin only):
```
/admin             → AdminLayout (AdminRoute)
/admin/dashboard   → Admin Dashboard
/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
```

## 🧪 How to Test

### 1. Start Dev Server:
```bash
cd /d/hotel-booking/client
npm run dev
```

Open `http://localhost:5173`

### 2. Test Public Routes:
- Access `/` → Display HomePage ✅
- Access `/rooms` → Display RoomListPage ✅
- Access `/about` → Display About Page ✅

### 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 (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):
- Ensure logged in (role = customer)
- Access `/admin` → Redirect to `/` ✅
- Access `/admin/dashboard` → Redirect to `/` ✅

### 6. Test Admin Routes (Role = Admin):
- 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 **"🔓 Demo Logout"** button
- Access `/dashboard` → Redirect to `/login` ✅
- Access `/admin` → Redirect to `/` ✅

## 🎯 Expected Results

### ✅ ProtectedRoute:
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. Non-admin users cannot access `/admin/*`
2. Redirect to `/` if not admin
3. Admin can access all admin routes

### ✅ No redirect loop:
1. Redirect only happens once
2. No infinite redirect loop
3. Browser history works correctly (back/forward)

## 📝 Demo Buttons (Temporary)

### 🔒 Demo Login/Logout:
- Click to toggle authentication state
- Simulates login/logout
- Will be replaced by Zustand store in Function 3

### 👑 Switch Role:
- Only displays when logged in
- Toggle between `customer` ↔ `admin`
- Test AdminRoute works correctly

## 🚀 Next Steps

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

```
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
```