Hotel-Booking/client/ROUTING_GUIDE.md

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:

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