commit 824eec61907e2fce1262a437bba10a4b348b03a5
Author: Iliyan Angelov <angelov@angeloviliyan.com>
Date:   Sun Nov 16 14:19:13 2025 +0200

    Hotel Booking

diff --git a/client/.env.example b/client/.env.example
new file mode 100644
index 00000000..c366ad67
--- /dev/null
+++ b/client/.env.example
@@ -0,0 +1,5 @@
+# API Configuration
+VITE_API_URL=http://localhost:3000
+
+# Environment
+VITE_ENV=development
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
new file mode 100644
index 00000000..d6c95379
--- /dev/null
+++ b/client/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/client/.gitignore b/client/.gitignore
new file mode 100644
index 00000000..e72dae6e
--- /dev/null
+++ b/client/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.production
diff --git a/client/ROUTING_GUIDE.md b/client/ROUTING_GUIDE.md
new file mode 100644
index 00000000..31fd1790
--- /dev/null
+++ 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
+```
diff --git a/client/ZUSTAND_AUTH_GUIDE.md b/client/ZUSTAND_AUTH_GUIDE.md
new file mode 100644
index 00000000..c834335b
--- /dev/null
+++ b/client/ZUSTAND_AUTH_GUIDE.md
@@ -0,0 +1,305 @@
+# useAuthStore - Zustand Authentication Store
+
+## ✅ Hoàn thành Chức năng 3
+
+### 📦 Files đã tạo:
+
+1. **`src/store/useAuthStore.ts`** - Zustand store quản lý auth
+2. **`src/services/api/apiClient.ts`** - Axios client với interceptors
+3. **`src/services/api/authService.ts`** - Auth API service
+4. **`.env.example`** - Template cho environment variables
+
+### 🎯 Tính năng đã implement:
+
+#### State Management:
+```typescript
+interface AuthState {
+  token: string | null;
+  refreshToken: string | null;
+  userInfo: UserInfo | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+```
+
+#### Actions:
+- ✅ `login(credentials)` - Đăng nhập
+- ✅ `register(data)` - Đăng ký tài khoản mới
+- ✅ `logout()` - Đăng xuất
+- ✅ `setUser(user)` - Cập nhật thông tin user
+- ✅ `refreshAuthToken()` - Làm mới token
+- ✅ `forgotPassword(data)` - Quên mật khẩu
+- ✅ `resetPassword(data)` - Đặt lại mật khẩu
+- ✅ `initializeAuth()` - Khởi tạo auth từ localStorage
+- ✅ `clearError()` - Xóa error message
+
+### 📝 Cách sử dụng:
+
+#### 1. Khởi tạo trong App.tsx:
+```typescript
+import useAuthStore from './store/useAuthStore';
+
+function App() {
+  const { 
+    isAuthenticated, 
+    userInfo, 
+    logout, 
+    initializeAuth 
+  } = useAuthStore();
+
+  useEffect(() => {
+    initializeAuth();
+  }, [initializeAuth]);
+
+  // ...
+}
+```
+
+#### 2. Sử dụng trong Login Form:
+```typescript
+import useAuthStore from '../store/useAuthStore';
+
+const LoginPage = () => {
+  const { login, isLoading, error } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (data) => {
+    try {
+      await login(data);
+      navigate('/dashboard'); // Redirect sau khi login
+    } catch (error) {
+      // Error đã được xử lý bởi store
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Form fields */}
+      {error && <div>{error}</div>}
+      <button disabled={isLoading}>
+        {isLoading ? 'Đang xử lý...' : 'Đăng nhập'}
+      </button>
+    </form>
+  );
+};
+```
+
+#### 3. Sử dụng trong Register Form:
+```typescript
+const RegisterPage = () => {
+  const { register, isLoading } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (data) => {
+    try {
+      await register(data);
+      navigate('/login'); // Redirect về login
+    } catch (error) {
+      // Error được hiển thị qua toast
+    }
+  };
+
+  // ...
+};
+```
+
+#### 4. Logout:
+```typescript
+const Header = () => {
+  const { logout } = useAuthStore();
+
+  const handleLogout = async () => {
+    await logout();
+    // Auto redirect về login nếu cần
+  };
+
+  return <button onClick={handleLogout}>Đăng xuất</button>;
+};
+```
+
+#### 5. Hiển thị thông tin user:
+```typescript
+const Profile = () => {
+  const { userInfo } = useAuthStore();
+
+  return (
+    <div>
+      <h1>Xin chào, {userInfo?.name}</h1>
+      <p>Email: {userInfo?.email}</p>
+      <p>Role: {userInfo?.role}</p>
+    </div>
+  );
+};
+```
+
+### 🔐 LocalStorage Persistence:
+
+Store tự động lưu và đọc từ localStorage:
+- `token` - JWT access token
+- `refreshToken` - JWT refresh token
+- `userInfo` - Thông tin user
+
+Khi reload page, auth state được khôi phục tự động qua `initializeAuth()`.
+
+### 🌐 API Integration:
+
+#### Base URL Configuration:
+Tạo file `.env` trong thư mục `client/`:
+```env
+VITE_API_URL=http://localhost:3000
+VITE_ENV=development
+```
+
+#### API Endpoints được sử dụng:
+- `POST /api/auth/login` - Đăng nhập
+- `POST /api/auth/register` - Đăng ký
+- `POST /api/auth/logout` - Đăng xuất
+- `GET /api/auth/profile` - Lấy profile
+- `POST /api/auth/refresh-token` - Refresh token
+- `POST /api/auth/forgot-password` - Quên mật khẩu
+- `POST /api/auth/reset-password` - Đặt lại mật khẩu
+
+### 🛡️ Security Features:
+
+1. **Auto Token Injection**:
+   - Axios interceptor tự động thêm token vào headers
+   ```typescript
+   Authorization: Bearer <token>
+   ```
+
+2. **Auto Logout on 401**:
+   - Khi token hết hạn (401), tự động logout và redirect về login
+
+3. **Token Refresh**:
+   - Có thể refresh token khi sắp hết hạn
+
+4. **Password Hashing**:
+   - Backend xử lý bcrypt hashing
+
+### 📱 Toast Notifications:
+
+Store tự động hiển thị toast cho các events:
+- ✅ Login thành công
+- ✅ Đăng ký thành công
+- ✅ Logout
+- ❌ Login thất bại
+- ❌ Đăng ký thất bại
+- ❌ API errors
+
+### 🔄 Component Updates:
+
+#### ProtectedRoute:
+```typescript
+// TRƯỚC (với props)
+<ProtectedRoute isAuthenticated={isAuthenticated}>
+  <Dashboard />
+</ProtectedRoute>
+
+// SAU (tự động lấy từ store)
+<ProtectedRoute>
+  <Dashboard />
+</ProtectedRoute>
+```
+
+#### AdminRoute:
+```typescript
+// TRƯỚC (với props)
+<AdminRoute userInfo={userInfo}>
+  <AdminPanel />
+</AdminRoute>
+
+// SAU (tự động lấy từ store)
+<AdminRoute>
+  <AdminPanel />
+</AdminRoute>
+```
+
+#### LayoutMain:
+Vẫn nhận props từ App.tsx để hiển thị Header/Navbar:
+```typescript
+<LayoutMain 
+  isAuthenticated={isAuthenticated}
+  userInfo={userInfo}
+  onLogout={handleLogout}
+/>
+```
+
+### 🧪 Testing:
+
+Để test authentication flow:
+
+1. **Tạo file `.env`**:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. **Ensure backend đang chạy**:
+   ```bash
+   cd server
+   npm run dev
+   ```
+
+3. **Chạy frontend**:
+   ```bash
+   cd client
+   npm run dev
+   ```
+
+4. **Test flow**:
+   - Truy cập `/register` → Đăng ký tài khoản
+   - Truy cập `/login` → Đăng nhập
+   - Truy cập `/dashboard` → Xem dashboard (protected)
+   - Click logout → Xóa session
+   - Reload page → Auth state được khôi phục
+
+### 🚀 Next Steps:
+
+**Chức năng 4: Form Login**
+- Tạo LoginPage với React Hook Form + Yup
+- Tích hợp với useAuthStore
+- UX enhancements (loading, show/hide password, remember me)
+
+**Chức năng 5: Form Register**
+- Tạo RegisterPage với validation
+- Tích hợp với useAuthStore
+
+**Chức năng 6-7: Password Reset Flow**
+- ForgotPasswordPage
+- ResetPasswordPage
+
+### 📚 TypeScript Types:
+
+```typescript
+interface LoginCredentials {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+}
+
+interface RegisterData {
+  name: string;
+  email: string;
+  password: string;
+  phone?: string;
+}
+
+interface UserInfo {
+  id: number;
+  name: string;
+  email: string;
+  phone?: string;
+  avatar?: string;
+  role: string;
+  createdAt?: string;
+}
+```
+
+### ✅ Kết quả đạt được:
+
+1. ✅ Toàn bộ thông tin user được quản lý tập trung
+2. ✅ Duy trì đăng nhập sau khi reload trang
+3. ✅ Dễ dàng truy cập userInfo trong mọi component
+4. ✅ Auto token management
+5. ✅ Type-safe với TypeScript
+6. ✅ Clean code, dễ maintain
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 00000000..aa52639a
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hotel Booking - Management System</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/client/package-lock.json b/client/package-lock.json
new file mode 100644
index 00000000..12a377d2
--- /dev/null
+++ b/client/package-lock.json
@@ -0,0 +1,5098 @@
+{
+  "name": "hotel-booking-client",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hotel-booking-client",
+      "version": "1.0.0",
+      "dependencies": {
+        "@hookform/resolvers": "^3.3.2",
+        "@types/react-datepicker": "^6.2.0",
+        "axios": "^1.6.2",
+        "date-fns": "^2.30.0",
+        "lucide-react": "^0.294.0",
+        "react": "^18.3.1",
+        "react-datepicker": "^8.9.0",
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.48.2",
+        "react-router-dom": "^6.20.0",
+        "react-toastify": "^9.1.3",
+        "yup": "^1.3.3",
+        "zustand": "^4.4.7"
+      },
+      "devDependencies": {
+        "@types/node": "^24.9.2",
+        "@types/react": "^18.3.26",
+        "@types/react-dom": "^18.3.7",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-react": "^4.7.0",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.55.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.3.6",
+        "typescript": "^5.9.3",
+        "vite": "^5.4.21"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
+      "integrity": "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.5.tgz",
+      "integrity": "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.5.tgz",
+      "integrity": "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
+      "integrity": "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.5.tgz",
+      "integrity": "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.5.tgz",
+      "integrity": "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.5.tgz",
+      "integrity": "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.5.tgz",
+      "integrity": "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.5.tgz",
+      "integrity": "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.5.tgz",
+      "integrity": "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.5.tgz",
+      "integrity": "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.5.tgz",
+      "integrity": "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.5.tgz",
+      "integrity": "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.5.tgz",
+      "integrity": "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.5.tgz",
+      "integrity": "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.5.tgz",
+      "integrity": "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.5.tgz",
+      "integrity": "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.5.tgz",
+      "integrity": "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.5.tgz",
+      "integrity": "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.5.tgz",
+      "integrity": "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.5.tgz",
+      "integrity": "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.5.tgz",
+      "integrity": "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.9.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.2.tgz",
+      "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.26",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
+      "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-datepicker": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.2.0.tgz",
+      "integrity": "sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "@types/react": "*",
+        "date-fns": "^3.3.1"
+      }
+    },
+    "node_modules/@types/react-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
+      "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.5.1",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/type-utils": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
+      "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
+      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.1.tgz",
+      "integrity": "sha512-hU4EGxxt+j7TQijx1oYdAjw4xuIp1wRQSsbMFwSthCWeBQur1eF+qJ5iQ5sN3Tw8YRzQNKb8jszgBdMDVqwJcw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz",
+      "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
+      "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.19",
+        "caniuse-lite": "^1.0.30001751",
+        "electron-to-chromium": "^1.5.238",
+        "node-releases": "^2.0.26",
+        "update-browserslist-db": "^1.1.4"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001751",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.243",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.243.tgz",
+      "integrity": "sha512-ZCphxFW3Q1TVhcgS9blfut1PX8lusVi2SvXQgmEEnK4TCmE1JhH2JkjJN+DNt0pJJwfBri5AROBnz2b/C+YU9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
+      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.294.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.294.0.tgz",
+      "integrity": "sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz",
+      "integrity": "sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.9.0.tgz",
+      "integrity": "sha512-yoRsGxjqVRjk8iUBssrW9jcinTeyP9mAfTpuzdKvlESOUjdrY0sfDTzIZWJAn38jvNcxW1dnDmW1CinjiFdxYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.15",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/@floating-ui/react": {
+      "version": "0.27.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
+      "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.65.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
+      "integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
+      "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.52.5",
+        "@rollup/rollup-android-arm64": "4.52.5",
+        "@rollup/rollup-darwin-arm64": "4.52.5",
+        "@rollup/rollup-darwin-x64": "4.52.5",
+        "@rollup/rollup-freebsd-arm64": "4.52.5",
+        "@rollup/rollup-freebsd-x64": "4.52.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.5",
+        "@rollup/rollup-linux-arm64-musl": "4.52.5",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.5",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.5",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.5",
+        "@rollup/rollup-linux-x64-gnu": "4.52.5",
+        "@rollup/rollup-linux-x64-musl": "4.52.5",
+        "@rollup/rollup-openharmony-arm64": "4.52.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.5",
+        "@rollup/rollup-win32-x64-gnu": "4.52.5",
+        "@rollup/rollup-win32-x64-msvc": "4.52.5",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
+      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
+      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yup": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/client/package.json b/client/package.json
new file mode 100644
index 00000000..10eecba0
--- /dev/null
+++ b/client/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "hotel-booking-client",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "@types/react-datepicker": "^6.2.0",
+    "axios": "^1.6.2",
+    "date-fns": "^2.30.0",
+    "lucide-react": "^0.294.0",
+    "react": "^18.3.1",
+    "react-datepicker": "^8.9.0",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.48.2",
+    "react-router-dom": "^6.20.0",
+    "react-toastify": "^9.1.3",
+    "yup": "^1.3.3",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.2",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21"
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
new file mode 100644
index 00000000..7ad39ab3
--- /dev/null
+++ b/client/src/App.tsx
@@ -0,0 +1,338 @@
+import React, { useEffect } from 'react';
+import { 
+  BrowserRouter, 
+  Routes, 
+  Route, 
+  Navigate 
+} from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+// Store
+import useAuthStore from './store/useAuthStore';
+import useFavoritesStore from './store/useFavoritesStore';
+
+// Layout Components
+import { LayoutMain } from './components/layout';
+import AdminLayout from './pages/AdminLayout';
+
+// Auth Components
+import { 
+  ProtectedRoute, 
+  AdminRoute 
+} from './components/auth';
+
+// Pages
+import HomePage from './pages/HomePage';
+import DashboardPage from 
+  './pages/customer/DashboardPage';
+import RoomListPage from 
+  './pages/customer/RoomListPage';
+import RoomDetailPage from 
+  './pages/customer/RoomDetailPage';
+import SearchResultsPage from 
+  './pages/customer/SearchResultsPage';
+import FavoritesPage from 
+  './pages/customer/FavoritesPage';
+import MyBookingsPage from 
+  './pages/customer/MyBookingsPage';
+import BookingPage from 
+  './pages/customer/BookingPage';
+import BookingSuccessPage from 
+  './pages/customer/BookingSuccessPage';
+import BookingDetailPage from 
+  './pages/customer/BookingDetailPage';
+import DepositPaymentPage from 
+  './pages/customer/DepositPaymentPage';
+import PaymentConfirmationPage from 
+  './pages/customer/PaymentConfirmationPage';
+import PaymentResultPage from 
+  './pages/customer/PaymentResultPage';
+import { 
+  LoginPage, 
+  RegisterPage,
+  ForgotPasswordPage,
+  ResetPasswordPage 
+} from './pages/auth';
+
+// Admin Pages
+import {
+  DashboardPage as AdminDashboardPage,
+  RoomManagementPage,
+  UserManagementPage,
+  BookingManagementPage,
+  PaymentManagementPage,
+  ServiceManagementPage,
+  ReviewManagementPage,
+  PromotionManagementPage,
+  CheckInPage,
+  CheckOutPage,
+} from './pages/admin';
+
+// Demo component cho các page chưa có
+const DemoPage: React.FC<{ title: string }> = ({ title }) => (
+  <div className="container mx-auto px-4 py-8">
+    <h1 className="text-3xl font-bold text-gray-800">
+      {title}
+    </h1>
+    <p className="text-gray-600 mt-4">
+      Page này đang được phát triển...
+    </p>
+  </div>
+);
+
+function App() {
+  // Sử dụng Zustand store
+  const { 
+    isAuthenticated, 
+    userInfo, 
+    logout, 
+    initializeAuth 
+  } = useAuthStore();
+  
+  const { 
+    fetchFavorites, 
+    syncGuestFavorites,
+    loadGuestFavorites,
+  } = useFavoritesStore();
+
+  // Khởi tạo auth state khi app load
+  useEffect(() => {
+    initializeAuth();
+  }, [initializeAuth]);
+
+  // Load favorites when authenticated or load guest favorites
+  useEffect(() => {
+    if (isAuthenticated) {
+      // Sync guest favorites first, then fetch
+      syncGuestFavorites().then(() => {
+        fetchFavorites();
+      });
+    } else {
+      // Load guest favorites from localStorage
+      loadGuestFavorites();
+    }
+  }, [
+    isAuthenticated, 
+    fetchFavorites, 
+    syncGuestFavorites,
+    loadGuestFavorites,
+  ]);
+
+  // Handle logout
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public Routes with Main Layout */}
+        <Route 
+          path="/" 
+          element={
+            <LayoutMain 
+              isAuthenticated={isAuthenticated}
+              userInfo={userInfo}
+              onLogout={handleLogout}
+            />
+          }
+        >
+          <Route index element={<HomePage />} />
+          <Route 
+            path="rooms" 
+            element={<RoomListPage />} 
+          />
+          <Route 
+            path="rooms/search" 
+            element={<SearchResultsPage />} 
+          />
+          <Route 
+            path="rooms/:id" 
+            element={<RoomDetailPage />} 
+          />
+          <Route 
+            path="favorites" 
+            element={<FavoritesPage />} 
+          />
+          <Route 
+            path="payment-result" 
+            element={<PaymentResultPage />} 
+          />
+          <Route 
+            path="about" 
+            element={<DemoPage title="Giới thiệu" />} 
+          />
+          
+          {/* Protected Routes - Yêu cầu đăng nhập */}
+          <Route 
+            path="dashboard" 
+            element={
+              <ProtectedRoute>
+                <DashboardPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="booking/:id" 
+            element={
+              <ProtectedRoute>
+                <BookingPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="booking-success/:id" 
+            element={
+              <ProtectedRoute>
+                <BookingSuccessPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="deposit-payment/:bookingId" 
+            element={
+              <ProtectedRoute>
+                <DepositPaymentPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="bookings" 
+            element={
+              <ProtectedRoute>
+                <MyBookingsPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="bookings/:id" 
+            element={
+              <ProtectedRoute>
+                <BookingDetailPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="payment/:id" 
+            element={
+              <ProtectedRoute>
+                <PaymentConfirmationPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="profile" 
+            element={
+              <ProtectedRoute>
+                <DemoPage title="Hồ sơ" />
+              </ProtectedRoute>
+            } 
+          />
+        </Route>
+
+        {/* Auth Routes (no layout) */}
+        <Route 
+          path="/login" 
+          element={<LoginPage />} 
+        />
+        <Route 
+          path="/register" 
+          element={<RegisterPage />} 
+        />
+        <Route 
+          path="/forgot-password" 
+          element={<ForgotPasswordPage />} 
+        />
+        <Route 
+          path="/reset-password/:token" 
+          element={<ResetPasswordPage />} 
+        />
+
+        {/* Admin Routes - Chỉ admin mới truy cập được */}
+        <Route 
+          path="/admin" 
+          element={
+            <AdminRoute>
+              <AdminLayout />
+            </AdminRoute>
+          }
+        >
+          <Route 
+            index 
+            element={<Navigate to="dashboard" replace />} 
+          />
+          <Route path="dashboard" element={<AdminDashboardPage />} />
+          <Route 
+            path="users" 
+            element={<UserManagementPage />} 
+          />
+          <Route 
+            path="rooms" 
+            element={<RoomManagementPage />} 
+          />
+          <Route 
+            path="bookings" 
+            element={<BookingManagementPage />} 
+          />
+          <Route 
+            path="payments" 
+            element={<PaymentManagementPage />} 
+          />
+          <Route 
+            path="services" 
+            element={<ServiceManagementPage />} 
+          />
+          <Route 
+            path="reviews" 
+            element={<ReviewManagementPage />} 
+          />
+          <Route 
+            path="promotions" 
+            element={<PromotionManagementPage />} 
+          />
+          <Route 
+            path="check-in" 
+            element={<CheckInPage />} 
+          />
+          <Route 
+            path="check-out" 
+            element={<CheckOutPage />} 
+          />
+          <Route 
+            path="banners" 
+            element={<DemoPage title="Quản lý banner" />} 
+          />
+          <Route 
+            path="reports" 
+            element={<DemoPage title="Báo cáo" />} 
+          />
+          <Route 
+            path="settings" 
+            element={<DemoPage title="Cài đặt" />} 
+          />
+        </Route>
+
+        {/* 404 Route */}
+        <Route 
+          path="*" 
+          element={<DemoPage title="404 - Không tìm thấy trang" />} 
+        />
+      </Routes>
+      
+      <ToastContainer 
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/client/src/components/auth/AdminRoute.tsx b/client/src/components/auth/AdminRoute.tsx
new file mode 100644
index 00000000..c6c253e0
--- /dev/null
+++ b/client/src/components/auth/AdminRoute.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import useAuthStore from '../../store/useAuthStore';
+
+interface AdminRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AdminRoute - Bảo vệ các route chỉ dành cho Admin
+ * 
+ * Kiểm tra:
+ * 1. User đã đăng nhập chưa → nếu chưa, redirect /login
+ * 2. User có role admin không → nếu không, redirect /
+ */
+const AdminRoute: React.FC<AdminRouteProps> = ({ 
+  children
+}) => {
+  const location = useLocation();
+  const { isAuthenticated, userInfo, isLoading } = useAuthStore();
+  
+  // Đang loading auth state → hiển thị loading
+  if (isLoading) {
+    return (
+      <div 
+        className="min-h-screen flex items-center 
+          justify-center bg-gray-50"
+      >
+        <div className="text-center">
+          <div 
+            className="animate-spin rounded-full h-12 w-12 
+              border-b-2 border-indigo-600 mx-auto"
+          />
+          <p className="mt-4 text-gray-600">
+            Đang xác thực...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Chưa đăng nhập → redirect về /login
+  if (!isAuthenticated) {
+    return (
+      <Navigate 
+        to="/login" 
+        state={{ from: location }} 
+        replace 
+      />
+    );
+  }
+
+  // Đã đăng nhập nhưng không phải admin → redirect về /
+  const isAdmin = userInfo?.role === 'admin';
+  if (!isAdmin) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default AdminRoute;
diff --git a/client/src/components/auth/ProtectedRoute.tsx b/client/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 00000000..3b03ed64
--- /dev/null
+++ b/client/src/components/auth/ProtectedRoute.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import useAuthStore from '../../store/useAuthStore';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * ProtectedRoute - Bảo vệ các route yêu cầu authentication
+ * 
+ * Nếu user chưa đăng nhập, redirect về /login
+ * và lưu location hiện tại để redirect về sau khi login
+ */
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ 
+  children
+}) => {
+  const location = useLocation();
+  const { isAuthenticated, isLoading } = useAuthStore();
+
+  // Đang loading auth state → hiển thị loading
+  if (isLoading) {
+    return (
+      <div 
+        className="min-h-screen flex items-center 
+          justify-center bg-gray-50"
+      >
+        <div className="text-center">
+          <div 
+            className="animate-spin rounded-full h-12 w-12 
+              border-b-2 border-indigo-600 mx-auto"
+          />
+          <p className="mt-4 text-gray-600">
+            Đang tải...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Chưa đăng nhập → redirect về /login
+  if (!isAuthenticated) {
+    return (
+      <Navigate 
+        to="/login" 
+        state={{ from: location }} 
+        replace 
+      />
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
diff --git a/client/src/components/auth/index.ts b/client/src/components/auth/index.ts
new file mode 100644
index 00000000..5b799cbe
--- /dev/null
+++ b/client/src/components/auth/index.ts
@@ -0,0 +1,2 @@
+export { default as ProtectedRoute } from './ProtectedRoute';
+export { default as AdminRoute } from './AdminRoute';
diff --git a/client/src/components/common/EmptyState.tsx b/client/src/components/common/EmptyState.tsx
new file mode 100644
index 00000000..d1735b75
--- /dev/null
+++ b/client/src/components/common/EmptyState.tsx
@@ -0,0 +1,100 @@
+import React, { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  secondaryAction?: {
+    label: string;
+    onClick: () => void;
+  };
+  children?: ReactNode;
+  className?: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  icon: Icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  children,
+  className = '',
+}) => {
+  return (
+    <div 
+      className={`bg-white rounded-lg shadow-sm 
+        p-12 text-center ${className}`}
+    >
+      {Icon && (
+        <div 
+          className="w-24 h-24 bg-gray-100 
+            rounded-full flex items-center 
+            justify-center mx-auto mb-6"
+        >
+          <Icon className="w-12 h-12 text-gray-400" />
+        </div>
+      )}
+
+      <h3 
+        className="text-2xl font-bold 
+          text-gray-900 mb-3"
+      >
+        {title}
+      </h3>
+
+      {description && (
+        <p 
+          className="text-gray-600 mb-6 
+            max-w-md mx-auto"
+        >
+          {description}
+        </p>
+      )}
+
+      {children}
+
+      {(action || secondaryAction) && (
+        <div 
+          className="flex flex-col sm:flex-row 
+            gap-3 justify-center mt-6"
+        >
+          {action && (
+            <button
+              onClick={action.onClick}
+              className="px-6 py-3 bg-indigo-600 
+                text-white rounded-lg 
+                hover:bg-indigo-700 
+                transition-colors font-semibold
+                inline-flex items-center 
+                justify-center gap-2"
+            >
+              {action.label}
+            </button>
+          )}
+
+          {secondaryAction && (
+            <button
+              onClick={secondaryAction.onClick}
+              className="px-6 py-3 border 
+                border-gray-300 text-gray-700 
+                rounded-lg hover:bg-gray-50 
+                transition-colors font-semibold
+                inline-flex items-center 
+                justify-center gap-2"
+            >
+              {secondaryAction.label}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EmptyState;
diff --git a/client/src/components/common/ErrorBoundary.tsx b/client/src/components/common/ErrorBoundary.tsx
new file mode 100644
index 00000000..21a55a4a
--- /dev/null
+++ b/client/src/components/common/ErrorBoundary.tsx
@@ -0,0 +1,143 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen bg-gray-50 
+          flex items-center justify-center p-4"
+        >
+          <div className="max-w-md w-full bg-white 
+            rounded-lg shadow-lg p-8"
+          >
+            <div className="flex items-center 
+              justify-center w-16 h-16 bg-red-100 
+              rounded-full mx-auto mb-4"
+            >
+              <AlertCircle className="w-8 h-8 
+                text-red-600" 
+              />
+            </div>
+
+            <h1 className="text-2xl font-bold 
+              text-gray-900 text-center mb-2"
+            >
+              Đã xảy ra lỗi
+            </h1>
+
+            <p className="text-gray-600 text-center mb-6">
+              Xin lỗi, đã có lỗi xảy ra. Vui lòng thử lại 
+              hoặc liên hệ hỗ trợ nếu vấn đề vẫn tiếp diễn.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && 
+              this.state.error && (
+              <div className="bg-red-50 border 
+                border-red-200 rounded-lg p-4 mb-6"
+              >
+                <p className="text-sm font-mono 
+                  text-red-800 break-all"
+                >
+                  {this.state.error.toString()}
+                </p>
+                {this.state.errorInfo && (
+                  <details className="mt-2">
+                    <summary className="text-sm 
+                      text-red-700 cursor-pointer 
+                      hover:text-red-800"
+                    >
+                      Chi tiết lỗi
+                    </summary>
+                    <pre className="mt-2 text-xs 
+                      text-red-600 overflow-auto 
+                      max-h-40"
+                    >
+                      {this.state.errorInfo.componentStack}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <button
+                onClick={this.handleReset}
+                className="flex-1 flex items-center 
+                  justify-center gap-2 bg-indigo-600 
+                  text-white px-6 py-3 rounded-lg 
+                  hover:bg-indigo-700 transition-colors 
+                  font-semibold"
+              >
+                <RefreshCw className="w-5 h-5" />
+                Tải lại trang
+              </button>
+              <button
+                onClick={() => window.location.href = '/'}
+                className="flex-1 bg-gray-200 
+                  text-gray-700 px-6 py-3 rounded-lg 
+                  hover:bg-gray-300 transition-colors 
+                  font-semibold"
+              >
+                Về trang chủ
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/client/src/components/common/Loading.tsx b/client/src/components/common/Loading.tsx
new file mode 100644
index 00000000..24547833
--- /dev/null
+++ b/client/src/components/common/Loading.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface LoadingProps {
+  size?: 'sm' | 'md' | 'lg';
+  text?: string;
+  fullScreen?: boolean;
+  className?: string;
+}
+
+const Loading: React.FC<LoadingProps> = ({
+  size = 'md',
+  text = 'Loading...',
+  fullScreen = false,
+  className = '',
+}) => {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  const content = (
+    <div className={`flex flex-col items-center 
+      justify-center gap-3 ${className}`}
+    >
+      <Loader2
+        className={`${sizeClasses[size]} 
+          text-indigo-600 animate-spin`}
+      />
+      {text && (
+        <p className={`${textSizeClasses[size]} 
+          text-gray-600 font-medium`}
+        >
+          {text}
+        </p>
+      )}
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="min-h-screen bg-gray-50 
+        flex items-center justify-center"
+      >
+        {content}
+      </div>
+    );
+  }
+
+  return content;
+};
+
+export default Loading;
diff --git a/client/src/components/common/OptimizedImage.tsx b/client/src/components/common/OptimizedImage.tsx
new file mode 100644
index 00000000..8f34778e
--- /dev/null
+++ b/client/src/components/common/OptimizedImage.tsx
@@ -0,0 +1,86 @@
+import React, { 
+  useState, 
+  useEffect, 
+  ImgHTMLAttributes 
+} from 'react';
+
+interface OptimizedImageProps 
+  extends ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+  fallbackSrc?: string;
+  aspectRatio?: string;
+  className?: string;
+}
+
+const OptimizedImage: React.FC<OptimizedImageProps> = ({
+  src,
+  alt,
+  fallbackSrc = '/images/placeholder.jpg',
+  aspectRatio,
+  className = '',
+  ...props
+}) => {
+  const [imageSrc, setImageSrc] = useState<string>(src);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    setImageSrc(src);
+    setIsLoading(true);
+    setHasError(false);
+  }, [src]);
+
+  const handleLoad = () => {
+    setIsLoading(false);
+  };
+
+  const handleError = () => {
+    console.error(`Failed to load image: ${imageSrc}`);
+    setImageSrc(fallbackSrc);
+    setHasError(true);
+    setIsLoading(false);
+  };
+
+  return (
+    <div 
+      className={`relative overflow-hidden 
+        bg-gray-200 ${className}`}
+      style={
+        aspectRatio 
+          ? { aspectRatio } 
+          : undefined
+      }
+    >
+      {isLoading && (
+        <div 
+          className="absolute inset-0 
+            flex items-center justify-center"
+        >
+          <div 
+            className="w-8 h-8 border-4 
+              border-gray-300 border-t-indigo-600 
+              rounded-full animate-spin"
+          />
+        </div>
+      )}
+
+      <img
+        src={imageSrc}
+        alt={alt}
+        loading="lazy"
+        onLoad={handleLoad}
+        onError={handleError}
+        className={`
+          w-full h-full object-cover
+          transition-opacity duration-300
+          ${isLoading ? 'opacity-0' : 'opacity-100'}
+          ${hasError ? 'opacity-50' : ''}
+        `}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default OptimizedImage;
diff --git a/client/src/components/common/Pagination.tsx b/client/src/components/common/Pagination.tsx
new file mode 100644
index 00000000..7c94547d
--- /dev/null
+++ b/client/src/components/common/Pagination.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  totalItems?: number;
+  itemsPerPage?: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  totalItems,
+  itemsPerPage = 5,
+}) => {
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems || 0);
+
+  return (
+    <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
+      {/* Mobile */}
+      <div className="flex flex-1 justify-between sm:hidden">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${
+            currentPage === 1
+              ? 'text-gray-400 cursor-not-allowed'
+              : 'text-gray-700 hover:bg-gray-50'
+          }`}
+        >
+          Trước
+        </button>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${
+            currentPage === totalPages
+              ? 'text-gray-400 cursor-not-allowed'
+              : 'text-gray-700 hover:bg-gray-50'
+          }`}
+        >
+          Sau
+        </button>
+      </div>
+
+      {/* Desktop */}
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm text-gray-700">
+            Hiển thị{' '}
+            <span className="font-medium">{startItem}</span> đến{' '}
+            <span className="font-medium">{endItem}</span> trong tổng số{' '}
+            <span className="font-medium">{totalItems || 0}</span> kết quả
+          </p>
+        </div>
+        <div>
+          <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+            {/* Previous Button */}
+            <button
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              className={`relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 ${
+                currentPage === 1
+                  ? 'cursor-not-allowed bg-gray-100'
+                  : 'hover:bg-gray-50 focus:z-20 focus:outline-offset-0'
+              }`}
+            >
+              <span className="sr-only">Previous</span>
+              <ChevronLeft className="h-5 w-5" aria-hidden="true" />
+            </button>
+
+            {/* Page Numbers */}
+            {getPageNumbers().map((page, index) => {
+              if (page === '...') {
+                return (
+                  <span
+                    key={`ellipsis-${index}`}
+                    className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300"
+                  >
+                    ...
+                  </span>
+                );
+              }
+
+              const pageNum = page as number;
+              return (
+                <button
+                  key={pageNum}
+                  onClick={() => onPageChange(pageNum)}
+                  className={`relative inline-flex items-center px-4 py-2 text-sm font-semibold ${
+                    currentPage === pageNum
+                      ? 'z-10 bg-blue-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600'
+                      : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0'
+                  }`}
+                >
+                  {pageNum}
+                </button>
+              );
+            })}
+
+            {/* Next Button */}
+            <button
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className={`relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 ${
+                currentPage === totalPages
+                  ? 'cursor-not-allowed bg-gray-100'
+                  : 'hover:bg-gray-50 focus:z-20 focus:outline-offset-0'
+              }`}
+            >
+              <span className="sr-only">Next</span>
+              <ChevronRight className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/client/src/components/common/PaymentMethodSelector.tsx b/client/src/components/common/PaymentMethodSelector.tsx
new file mode 100644
index 00000000..f82a0504
--- /dev/null
+++ b/client/src/components/common/PaymentMethodSelector.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { CreditCard, Building2 } from 'lucide-react';
+
+interface PaymentMethodSelectorProps {
+  value: 'cash' | 'bank_transfer';
+  onChange: (value: 'cash' | 'bank_transfer') => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+const PaymentMethodSelector: React.FC<
+  PaymentMethodSelectorProps
+> = ({ value, onChange, error, disabled = false }) => {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold text-gray-900 mb-3">
+        Payment Method
+        <span className="text-red-500 ml-1">*</span>
+      </h3>
+
+      <div className="space-y-3">
+        {/* Cash Payment */}
+        <label
+          className={`flex items-start p-4 border-2 
+            rounded-lg cursor-pointer transition-all
+            ${
+              value === 'cash'
+                ? 'border-indigo-500 bg-indigo-50'
+                : 'border-gray-200 hover:border-indigo-300'
+            }
+            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+          <input
+            type="radio"
+            name="payment_method"
+            value="cash"
+            checked={value === 'cash'}
+            onChange={(e) => 
+              onChange(e.target.value as 'cash')
+            }
+            disabled={disabled}
+            className="mt-1 mr-3"
+          />
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <CreditCard 
+                className="w-5 h-5 text-gray-600" 
+              />
+              <span className="font-medium text-gray-900">
+                Pay at Hotel
+              </span>
+            </div>
+            <p className="text-sm text-gray-600">
+              Pay directly at the hotel when checking in. 
+              Cash and card accepted.
+            </p>
+            <div className="mt-2 text-xs text-gray-500 
+              bg-white rounded px-2 py-1 inline-block"
+            >
+              ⏱️ Payment at check-in
+            </div>
+          </div>
+        </label>
+
+        {/* Bank Transfer */}
+        <label
+          className={`flex items-start p-4 border-2 
+            rounded-lg cursor-pointer transition-all
+            ${
+              value === 'bank_transfer'
+                ? 'border-indigo-500 bg-indigo-50'
+                : 'border-gray-200 hover:border-indigo-300'
+            }
+            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+          <input
+            type="radio"
+            name="payment_method"
+            value="bank_transfer"
+            checked={value === 'bank_transfer'}
+            onChange={(e) =>
+              onChange(e.target.value as 'bank_transfer')
+            }
+            disabled={disabled}
+            className="mt-1 mr-3"
+          />
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <Building2 
+                className="w-5 h-5 text-gray-600" 
+              />
+              <span className="font-medium text-gray-900">
+                Bank Transfer
+              </span>
+              <span className="text-xs bg-green-100 
+                text-green-700 px-2 py-0.5 rounded-full 
+                font-medium"
+              >
+                Recommended
+              </span>
+            </div>
+            <p className="text-sm text-gray-600">
+              Transfer via QR code or account number. 
+              Quick confirmation within 24 hours.
+            </p>
+            <div className="mt-2 text-xs text-gray-500 
+              bg-white rounded px-2 py-1 inline-block"
+            >
+              💳 Confirmation after booking
+            </div>
+          </div>
+        </label>
+      </div>
+
+      {error && (
+        <p className="text-sm text-red-600 mt-2">
+          {error}
+        </p>
+      )}
+
+      {/* Additional Info */}
+      <div className="mt-4 p-3 bg-blue-50 border 
+        border-blue-200 rounded-lg"
+      >
+        <p className="text-xs text-blue-800">
+          💡 <strong>Note:</strong> You will not be 
+          charged immediately. {' '}
+          {value === 'cash'
+            ? 'Payment when checking in.'
+            : 'Transfer after booking confirmation.'}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentMethodSelector;
diff --git a/client/src/components/common/PaymentStatusBadge.tsx b/client/src/components/common/PaymentStatusBadge.tsx
new file mode 100644
index 00000000..d42d68c8
--- /dev/null
+++ b/client/src/components/common/PaymentStatusBadge.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertCircle,
+} from 'lucide-react';
+
+interface PaymentStatusBadgeProps {
+  status: 'pending' | 'completed' | 'failed' | 'unpaid' | 'paid' | 'refunded';
+  size?: 'sm' | 'md' | 'lg';
+  showIcon?: boolean;
+}
+
+const PaymentStatusBadge: React.FC<PaymentStatusBadgeProps> = ({
+  status,
+  size = 'md',
+  showIcon = true,
+}) => {
+  const getStatusConfig = () => {
+    switch (status) {
+      case 'paid':
+      case 'completed':
+        return {
+          icon: CheckCircle,
+          color: 'bg-green-100 text-green-800',
+          text: 'Paid',
+        };
+      case 'unpaid':
+      case 'pending':
+        return {
+          icon: Clock,
+          color: 'bg-yellow-100 text-yellow-800',
+          text: 'Unpaid',
+        };
+      case 'failed':
+        return {
+          icon: XCircle,
+          color: 'bg-red-100 text-red-800',
+          text: 'Payment Failed',
+        };
+      case 'refunded':
+        return {
+          icon: AlertCircle,
+          color: 'bg-gray-100 text-gray-800',
+          text: 'Refunded',
+        };
+      default:
+        return {
+          icon: AlertCircle,
+          color: 'bg-gray-100 text-gray-800',
+          text: status,
+        };
+    }
+  };
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'text-xs px-2 py-1';
+      case 'lg':
+        return 'text-base px-4 py-2';
+      case 'md':
+      default:
+        return 'text-sm px-3 py-1.5';
+    }
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'w-3 h-3';
+      case 'lg':
+        return 'w-5 h-5';
+      case 'md':
+      default:
+        return 'w-4 h-4';
+    }
+  };
+
+  const config = getStatusConfig();
+  const StatusIcon = config.icon;
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 
+        rounded-full font-medium 
+        ${config.color} ${getSizeClasses()}`}
+    >
+      {showIcon && (
+        <StatusIcon className={getIconSize()} />
+      )}
+      {config.text}
+    </span>
+  );
+};
+
+export default PaymentStatusBadge;
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
new file mode 100644
index 00000000..22472eef
--- /dev/null
+++ b/client/src/components/layout/Footer.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { 
+  Hotel, 
+  Facebook, 
+  Twitter, 
+  Instagram, 
+  Mail, 
+  Phone, 
+  MapPin 
+} from 'lucide-react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-900 text-gray-300">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 
+          lg:grid-cols-4 gap-8">
+          {/* Company Info */}
+          <div>
+            <div className="flex items-center space-x-2 mb-4">
+              <Hotel className="w-8 h-8 text-blue-500" />
+              <span className="text-xl font-bold text-white">
+                Hotel Booking
+              </span>
+            </div>
+            <p className="text-sm text-gray-400 mb-4">
+              Leading online hotel management and 
+              booking system.
+            </p>
+            <div className="flex space-x-4">
+              <a 
+                href="#" 
+                className="hover:text-blue-500 
+                  transition-colors"
+                aria-label="Facebook"
+              >
+                <Facebook className="w-5 h-5" />
+              </a>
+              <a 
+                href="#" 
+                className="hover:text-blue-500 
+                  transition-colors"
+                aria-label="Twitter"
+              >
+                <Twitter className="w-5 h-5" />
+              </a>
+              <a 
+                href="#" 
+                className="hover:text-blue-500 
+                  transition-colors"
+                aria-label="Instagram"
+              >
+                <Instagram className="w-5 h-5" />
+              </a>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">
+              Quick Links
+            </h3>
+            <ul className="space-y-2">
+              <li>
+                <Link 
+                  to="/" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/rooms" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Rooms
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/bookings" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Bookings
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/about" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  About
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Support */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">
+              Support
+            </h3>
+            <ul className="space-y-2">
+              <li>
+                <Link 
+                  to="/faq" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  FAQ
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/terms" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Terms of Service
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/privacy" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Privacy Policy
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/contact" 
+                  className="hover:text-blue-500 
+                    transition-colors text-sm"
+                >
+                  Contact
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact Info */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">
+              Contact
+            </h3>
+            <ul className="space-y-3">
+              <li className="flex items-start space-x-3">
+                <MapPin className="w-5 h-5 text-blue-500 
+                  flex-shrink-0 mt-0.5" 
+                />
+                <span className="text-sm">
+                  123 ABC Street, District 1, Ho Chi Minh City
+                </span>
+              </li>
+              <li className="flex items-center space-x-3">
+                <Phone className="w-5 h-5 text-blue-500 
+                  flex-shrink-0" 
+                />
+                <span className="text-sm">
+                  (028) 1234 5678
+                </span>
+              </li>
+              <li className="flex items-center space-x-3">
+                <Mail className="w-5 h-5 text-blue-500 
+                  flex-shrink-0" 
+                />
+                <span className="text-sm">
+                  info@hotelbooking.com
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="border-t border-gray-800 mt-8 
+          pt-4 -mb-8 text-center"
+        >
+          <p className="text-sm text-gray-400">
+            &copy; {new Date().getFullYear()} Hotel Booking. 
+            All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
new file mode 100644
index 00000000..2f89b153
--- /dev/null
+++ b/client/src/components/layout/Header.tsx
@@ -0,0 +1,370 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+  Hotel, 
+  User, 
+  LogOut, 
+  Menu, 
+  X, 
+  LogIn, 
+  UserPlus,
+  Heart,
+} from 'lucide-react';
+
+interface HeaderProps {
+  isAuthenticated?: boolean;
+  userInfo?: {
+    name: string;
+    email: string;
+    avatar?: string;
+    role: string;
+  } | null;
+  onLogout?: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ 
+  isAuthenticated = false, 
+  userInfo = null,
+  onLogout 
+}) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = 
+    useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const toggleUserMenu = () => {
+    setIsUserMenuOpen(!isUserMenuOpen);
+  };
+
+  const handleLogout = () => {
+    if (onLogout) {
+      onLogout();
+    }
+    setIsUserMenuOpen(false);
+    setIsMobileMenuOpen(false);
+  };
+
+  return (
+    <header className="bg-white shadow-md sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <Link 
+            to="/" 
+            className="flex items-center space-x-2 
+              hover:opacity-80 transition-opacity"
+          >
+            <Hotel className="w-8 h-8 text-blue-600" />
+            <span className="text-2xl font-bold text-gray-800">
+              Hotel Booking
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center 
+            space-x-6"
+          >
+            <Link 
+              to="/" 
+              className="text-gray-700 hover:text-blue-600 
+                transition-colors font-medium"
+            >
+              Home
+            </Link>
+            <Link 
+              to="/rooms" 
+              className="text-gray-700 hover:text-blue-600 
+                transition-colors font-medium"
+            >
+              Rooms
+            </Link>
+            <Link 
+              to="/bookings" 
+              className="text-gray-700 hover:text-blue-600 
+                transition-colors font-medium"
+            >
+              Bookings
+            </Link>
+            <Link 
+              to="/favorites" 
+              className="text-gray-700 hover:text-blue-600 
+                transition-colors font-medium flex 
+                items-center gap-1"
+            >
+              <Heart className="w-4 h-4" />
+              Favorites
+            </Link>
+            <Link 
+              to="/about" 
+              className="text-gray-700 hover:text-blue-600 
+                transition-colors font-medium"
+            >
+              About
+            </Link>
+          </nav>
+
+          {/* Desktop Auth Section */}
+          <div className="hidden md:flex items-center 
+            space-x-4"
+          >
+            {!isAuthenticated ? (
+              <>
+                <Link 
+                  to="/login"
+                  className="flex items-center space-x-2 
+                    px-4 py-2 text-blue-600 
+                    hover:text-blue-700 transition-colors 
+                    font-medium"
+                >
+                  <LogIn className="w-4 h-4" />
+                  <span>Login</span>
+                </Link>
+                <Link 
+                  to="/register"
+                  className="flex items-center space-x-2 
+                    px-4 py-2 bg-blue-600 text-white 
+                    rounded-lg hover:bg-blue-700 
+                    transition-colors font-medium"
+                >
+                  <UserPlus className="w-4 h-4" />
+                  <span>Register</span>
+                </Link>
+              </>
+            ) : (
+              <div className="relative">
+                <button
+                  onClick={toggleUserMenu}
+                  className="flex items-center space-x-3 
+                    px-3 py-2 rounded-lg hover:bg-gray-100 
+                    transition-colors"
+                >
+                  {userInfo?.avatar ? (
+                    <img 
+                      src={userInfo.avatar} 
+                      alt={userInfo.name}
+                      className="w-8 h-8 rounded-full 
+                        object-cover"
+                    />
+                  ) : (
+                    <div className="w-8 h-8 bg-blue-500 
+                      rounded-full flex items-center 
+                      justify-center"
+                    >
+                      <span className="text-white 
+                        font-semibold text-sm"
+                      >
+                        {userInfo?.name?.charAt(0)
+                          .toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+                  <span className="font-medium text-gray-700">
+                    {userInfo?.name}
+                  </span>
+                </button>
+
+                {/* User Dropdown Menu */}
+                {isUserMenuOpen && (
+                  <div className="absolute right-0 mt-2 
+                    w-48 bg-white rounded-lg shadow-lg 
+                    py-2 border border-gray-200 z-50"
+                  >
+                    <Link
+                      to="/profile"
+                      onClick={() => setIsUserMenuOpen(false)}
+                      className="flex items-center space-x-2 
+                        px-4 py-2 text-gray-700 
+                        hover:bg-gray-100 transition-colors"
+                    >
+                      <User className="w-4 h-4" />
+                      <span>Profile</span>
+                    </Link>
+                    {userInfo?.role === 'admin' && (
+                      <Link
+                        to="/admin"
+                        onClick={() => 
+                          setIsUserMenuOpen(false)
+                        }
+                        className="flex items-center 
+                          space-x-2 px-4 py-2 text-gray-700 
+                          hover:bg-gray-100 transition-colors"
+                      >
+                        <User className="w-4 h-4" />
+                        <span>Admin</span>
+                      </Link>
+                    )}
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center 
+                        space-x-2 px-4 py-2 text-red-600 
+                        hover:bg-gray-100 transition-colors 
+                        text-left"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      <span>Logout</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={toggleMobileMenu}
+            className="md:hidden p-2 rounded-lg 
+              hover:bg-gray-100 transition-colors"
+          >
+            {isMobileMenuOpen ? (
+              <X className="w-6 h-6" />
+            ) : (
+              <Menu className="w-6 h-6" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden py-4 border-t 
+            border-gray-200 mt-4"
+          >
+            <div className="flex flex-col space-y-2">
+              <Link 
+                to="/"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="px-4 py-2 text-gray-700 
+                  hover:bg-gray-100 rounded-lg 
+                  transition-colors"
+              >
+                Home
+              </Link>
+              <Link 
+                to="/rooms"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="px-4 py-2 text-gray-700 
+                  hover:bg-gray-100 rounded-lg 
+                  transition-colors"
+              >
+                Rooms
+              </Link>
+              <Link 
+                to="/bookings"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="px-4 py-2 text-gray-700 
+                  hover:bg-gray-100 rounded-lg 
+                  transition-colors"
+              >
+                Bookings
+              </Link>
+              <Link 
+                to="/favorites"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="px-4 py-2 text-gray-700 
+                  hover:bg-gray-100 rounded-lg 
+                  transition-colors flex items-center gap-2"
+              >
+                <Heart className="w-4 h-4" />
+                Favorites
+              </Link>
+              <Link 
+                to="/about"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="px-4 py-2 text-gray-700 
+                  hover:bg-gray-100 rounded-lg 
+                  transition-colors"
+              >
+                About
+              </Link>
+              
+              <div className="border-t border-gray-200 
+                pt-2 mt-2"
+              >
+                {!isAuthenticated ? (
+                  <>
+                    <Link 
+                      to="/login"
+                      onClick={() => 
+                        setIsMobileMenuOpen(false)
+                      }
+                      className="flex items-center 
+                        space-x-2 px-4 py-2 text-blue-600 
+                        hover:bg-gray-100 rounded-lg 
+                        transition-colors"
+                    >
+                      <LogIn className="w-4 h-4" />
+                      <span>Login</span>
+                    </Link>
+                    <Link 
+                      to="/register"
+                      onClick={() => 
+                        setIsMobileMenuOpen(false)
+                      }
+                      className="flex items-center 
+                        space-x-2 px-4 py-2 text-blue-600 
+                        hover:bg-gray-100 rounded-lg 
+                        transition-colors"
+                    >
+                      <UserPlus className="w-4 h-4" />
+                      <span>Register</span>
+                    </Link>
+                  </>
+                ) : (
+                  <>
+                    <div className="px-4 py-2 text-sm 
+                      text-gray-500"
+                    >
+                      Hello, {userInfo?.name}
+                    </div>
+                    <Link
+                      to="/profile"
+                      onClick={() => 
+                        setIsMobileMenuOpen(false)
+                      }
+                      className="flex items-center 
+                        space-x-2 px-4 py-2 text-gray-700 
+                        hover:bg-gray-100 rounded-lg 
+                        transition-colors"
+                    >
+                      <User className="w-4 h-4" />
+                      <span>Profile</span>
+                    </Link>
+                    {userInfo?.role === 'admin' && (
+                      <Link
+                        to="/admin"
+                        onClick={() => 
+                          setIsMobileMenuOpen(false)
+                        }
+                        className="flex items-center 
+                          space-x-2 px-4 py-2 
+                          text-gray-700 hover:bg-gray-100 
+                          rounded-lg transition-colors"
+                      >
+                        <User className="w-4 h-4" />
+                        <span>Admin</span>
+                      </Link>
+                    )}
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center 
+                        space-x-2 px-4 py-2 text-red-600 
+                        hover:bg-gray-100 rounded-lg 
+                        transition-colors text-left"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      <span>Logout</span>
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/client/src/components/layout/LayoutMain.tsx b/client/src/components/layout/LayoutMain.tsx
new file mode 100644
index 00000000..2907f1bb
--- /dev/null
+++ b/client/src/components/layout/LayoutMain.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+
+interface LayoutMainProps {
+  isAuthenticated?: boolean;
+  userInfo?: {
+    name: string;
+    email: string;
+    avatar?: string;
+    role: string;
+  } | null;
+  onLogout?: () => void;
+}
+
+const LayoutMain: React.FC<LayoutMainProps> = ({ 
+  isAuthenticated = false,
+  userInfo = null,
+  onLogout
+}) => {
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Header with Navigation and Auth */}
+      <Header 
+        isAuthenticated={isAuthenticated}
+        userInfo={userInfo}
+        onLogout={onLogout}
+      />
+      
+      {/* Main Content Area - Outlet renders child routes */}
+      <main className="flex-1 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <Outlet />
+        </div>
+      </main>
+      
+      {/* Footer */}
+      <Footer />
+    </div>
+  );
+};
+
+export default LayoutMain;
diff --git a/client/src/components/layout/SidebarAdmin.tsx b/client/src/components/layout/SidebarAdmin.tsx
new file mode 100644
index 00000000..1bdb4254
--- /dev/null
+++ b/client/src/components/layout/SidebarAdmin.tsx
@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { 
+  LayoutDashboard, 
+  Users, 
+  Hotel, 
+  Calendar, 
+  CreditCard, 
+  Settings, 
+  FileText, 
+  BarChart3,
+  Tag,
+  Image,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  LogIn,
+  LogOut
+} from 'lucide-react';
+
+interface SidebarAdminProps {
+  isCollapsed?: boolean;
+  onToggle?: () => void;
+}
+
+const SidebarAdmin: React.FC<SidebarAdminProps> = ({ 
+  isCollapsed: controlledCollapsed,
+  onToggle 
+}) => {
+  const [internalCollapsed, setInternalCollapsed] = 
+    useState(false);
+  const location = useLocation();
+  
+  const isCollapsed = 
+    controlledCollapsed !== undefined 
+      ? controlledCollapsed 
+      : internalCollapsed;
+  
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalCollapsed(!internalCollapsed);
+    }
+  };
+
+  const menuItems = [
+    { 
+      path: '/admin/dashboard', 
+      icon: LayoutDashboard, 
+      label: 'Dashboard' 
+    },
+    { 
+      path: '/admin/users', 
+      icon: Users, 
+      label: 'Người dùng' 
+    },
+    { 
+      path: '/admin/rooms', 
+      icon: Hotel, 
+      label: 'Phòng' 
+    },
+    { 
+      path: '/admin/bookings', 
+      icon: Calendar, 
+      label: 'Đặt phòng' 
+    },
+    { 
+      path: '/admin/payments', 
+      icon: CreditCard, 
+      label: 'Thanh toán' 
+    },
+    { 
+      path: '/admin/services', 
+      icon: Settings, 
+      label: 'Dịch vụ' 
+    },
+    { 
+      path: '/admin/promotions', 
+      icon: Tag, 
+      label: 'Khuyến mãi' 
+    },
+    { 
+      path: '/admin/check-in', 
+      icon: LogIn, 
+      label: 'Check-in' 
+    },
+    { 
+      path: '/admin/check-out', 
+      icon: LogOut, 
+      label: 'Check-out' 
+    },
+    { 
+      path: '/admin/reviews', 
+      icon: Star, 
+      label: 'Đánh giá' 
+    },
+    { 
+      path: '/admin/banners', 
+      icon: Image, 
+      label: 'Banner' 
+    },
+    { 
+      path: '/admin/reports', 
+      icon: BarChart3, 
+      label: 'Báo cáo' 
+    },
+    { 
+      path: '/admin/settings', 
+      icon: FileText, 
+      label: 'Cài đặt' 
+    },
+  ];
+
+  const isActive = (path: string) => {
+    return location.pathname === path || 
+      location.pathname.startsWith(`${path}/`);
+  };
+
+  return (
+    <aside 
+      className={`bg-gray-900 text-white 
+        transition-all duration-300 flex flex-col 
+        ${isCollapsed ? 'w-20' : 'w-64'}`}
+    >
+      {/* Sidebar Header */}
+      <div className="p-4 border-b border-gray-800 
+        flex items-center justify-between"
+      >
+        {!isCollapsed && (
+          <h2 className="text-xl font-bold">
+            Admin Panel
+          </h2>
+        )}
+        <button
+          onClick={handleToggle}
+          className="p-2 rounded-lg hover:bg-gray-800 
+            transition-colors ml-auto"
+          aria-label="Toggle sidebar"
+        >
+          {isCollapsed ? (
+            <ChevronRight className="w-5 h-5" />
+          ) : (
+            <ChevronLeft className="w-5 h-5" />
+          )}
+        </button>
+      </div>
+
+      {/* Menu Items */}
+      <nav className="flex-1 overflow-y-auto py-4">
+        <ul className="space-y-1 px-2">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const active = isActive(item.path);
+            
+            return (
+              <li key={item.path}>
+                <Link
+                  to={item.path}
+                  className={`flex items-center 
+                    space-x-3 px-3 py-3 rounded-lg 
+                    transition-colors group 
+                    ${active 
+                      ? 'bg-blue-600 text-white' 
+                      : 'text-gray-300 hover:bg-gray-800 hover:text-white'
+                    }`}
+                  title={isCollapsed ? item.label : undefined}
+                >
+                  <Icon className={`flex-shrink-0 
+                    ${isCollapsed ? 'w-6 h-6' : 'w-5 h-5'}`} 
+                  />
+                  {!isCollapsed && (
+                    <span className="font-medium">
+                      {item.label}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* Sidebar Footer */}
+      <div className="p-4 border-t border-gray-800">
+        {!isCollapsed ? (
+          <div className="text-xs text-gray-400 text-center">
+            <p>Admin Dashboard v1.0</p>
+            <p className="mt-1">
+              © {new Date().getFullYear()}
+            </p>
+          </div>
+        ) : (
+          <div className="flex justify-center">
+            <div className="w-2 h-2 bg-green-500 
+              rounded-full"
+            ></div>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default SidebarAdmin;
diff --git a/client/src/components/layout/index.ts b/client/src/components/layout/index.ts
new file mode 100644
index 00000000..b6e4940c
--- /dev/null
+++ b/client/src/components/layout/index.ts
@@ -0,0 +1,4 @@
+export { default as Header } from './Header';
+export { default as Footer } from './Footer';
+export { default as SidebarAdmin } from './SidebarAdmin';
+export { default as LayoutMain } from './LayoutMain';
diff --git a/client/src/components/rooms/BannerCarousel.tsx b/client/src/components/rooms/BannerCarousel.tsx
new file mode 100644
index 00000000..41f40198
--- /dev/null
+++ b/client/src/components/rooms/BannerCarousel.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Banner } from '../../services/api/bannerService';
+
+interface BannerCarouselProps {
+  banners: Banner[];
+}
+
+const BannerCarousel: React.FC<BannerCarouselProps> = ({ 
+  banners 
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-slide every 5 seconds
+  useEffect(() => {
+    if (banners.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) =>
+        prev === banners.length - 1 ? 0 : prev + 1
+      );
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [banners.length]);
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) =>
+      prev === 0 ? banners.length - 1 : prev - 1
+    );
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) =>
+      prev === banners.length - 1 ? 0 : prev + 1
+    );
+  };
+
+  const goToSlide = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  // Default fallback banner if no banners provided
+  const defaultBanner = {
+    id: 0,
+    title: 'Chào mừng đến với Hotel Booking',
+    image_url: '/images/default-banner.jpg',
+    position: 'home',
+    display_order: 0,
+    is_active: true,
+    created_at: '',
+    updated_at: '',
+  };
+
+  const displayBanners = banners.length > 0 
+    ? banners 
+    : [defaultBanner];
+  const currentBanner = displayBanners[currentIndex];
+
+  return (
+    <div
+      className="relative w-full h-[500px] md:h-[640px] \
+        overflow-hidden rounded-xl shadow-lg"
+    >
+      {/* Banner Image */}
+      <div className="relative w-full h-full">
+        <img
+          src={currentBanner.image_url}
+          alt={currentBanner.title}
+          className="w-full h-full object-cover"
+          onError={(e) => {
+            // Fallback to placeholder if image fails to load
+            e.currentTarget.src = '/images/default-banner.jpg';
+          }}
+        />
+
+        {/* Overlay */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-t 
+            from-black/60 via-black/20 to-transparent"
+        />
+
+        {/* Title */}
+        {currentBanner.title && (
+          <div 
+            className="absolute bottom-8 left-8 right-8 
+              text-white"
+          >
+            <h2 
+              className="text-3xl md:text-5xl font-bold 
+                mb-2 drop-shadow-lg"
+            >
+              {currentBanner.title}
+            </h2>
+          </div>
+        )}
+      </div>
+
+      {/* Navigation Buttons */}
+      {displayBanners.length > 1 && (
+        <>
+          <button
+            onClick={goToPrevious}
+            className="absolute left-4 top-1/2 
+              -translate-y-1/2 bg-white/80 
+              hover:bg-white text-gray-800 p-2 
+              rounded-full shadow-lg transition-all"
+            aria-label="Previous banner"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+
+          <button
+            onClick={goToNext}
+            className="absolute right-4 top-1/2 
+              -translate-y-1/2 bg-white/80 
+              hover:bg-white text-gray-800 p-2 
+              rounded-full shadow-lg transition-all"
+            aria-label="Next banner"
+          >
+            <ChevronRight className="w-6 h-6" />
+          </button>
+        </>
+      )}
+
+      {/* Dots Indicator */}
+      {displayBanners.length > 1 && (
+        <div 
+          className="absolute bottom-4 left-1/2 
+            -translate-x-1/2 flex gap-2"
+        >
+          {displayBanners.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => goToSlide(index)}
+              className={`w-2 h-2 rounded-full 
+                transition-all
+                ${
+                  index === currentIndex
+                    ? 'bg-white w-8'
+                    : 'bg-white/50 hover:bg-white/75'
+                }`}
+              aria-label={`Go to banner ${index + 1}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BannerCarousel;
diff --git a/client/src/components/rooms/BannerSkeleton.tsx b/client/src/components/rooms/BannerSkeleton.tsx
new file mode 100644
index 00000000..1381e224
--- /dev/null
+++ b/client/src/components/rooms/BannerSkeleton.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const BannerSkeleton: React.FC = () => {
+  return (
+    <div
+      className="w-full h-[500px] md:h-[640px] \
+        bg-gray-300 rounded-xl shadow-lg animate-pulse"
+    >
+      <div className="w-full h-full flex items-end p-8">
+        <div className="w-full max-w-xl space-y-3">
+          <div className="h-12 bg-gray-400 rounded w-3/4" />
+          <div className="h-8 bg-gray-400 rounded w-1/2" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BannerSkeleton;
diff --git a/client/src/components/rooms/FavoriteButton.tsx b/client/src/components/rooms/FavoriteButton.tsx
new file mode 100644
index 00000000..2eb0a9b2
--- /dev/null
+++ b/client/src/components/rooms/FavoriteButton.tsx
@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Heart } from 'lucide-react';
+import useFavoritesStore from '../../store/useFavoritesStore';
+
+interface FavoriteButtonProps {
+  roomId: number;
+  size?: 'sm' | 'md' | 'lg';
+  showTooltip?: boolean;
+  className?: string;
+}
+
+const FavoriteButton: React.FC<FavoriteButtonProps> = ({
+  roomId,
+  size = 'md',
+  showTooltip = true,
+  className = '',
+}) => {
+  const {
+    isFavorited,
+    addToFavorites,
+    removeFromFavorites,
+  } = useFavoritesStore();
+  
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showTooltipText, setShowTooltipText] = 
+    useState(false);
+
+  const favorited = isFavorited(roomId);
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'w-6 h-6 p-1',
+    md: 'w-10 h-10 p-2',
+    lg: 'w-12 h-12 p-2.5',
+  };
+
+  const iconSizes = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+  };
+
+  const handleClick = async (
+    e: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isProcessing) return;
+
+    setIsProcessing(true);
+    try {
+      if (favorited) {
+        await removeFromFavorites(roomId);
+      } else {
+        await addToFavorites(roomId);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const tooltipText = favorited
+    ? 'Bỏ yêu thích'
+    : 'Thêm vào yêu thích';
+
+  return (
+    <div className="relative inline-block">
+      <button
+        onClick={handleClick}
+        disabled={isProcessing}
+        onMouseEnter={() => 
+          showTooltip && setShowTooltipText(true)
+        }
+        onMouseLeave={() => setShowTooltipText(false)}
+        className={`
+          ${sizeClasses[size]}
+          rounded-full
+          transition-all
+          duration-200
+          flex
+          items-center
+          justify-center
+          ${
+            favorited
+              ? 'bg-red-50 hover:bg-red-100'
+              : 'bg-white hover:bg-gray-100'
+          }
+          ${
+            isProcessing
+              ? 'opacity-50 cursor-not-allowed'
+              : 'cursor-pointer'
+          }
+          border-2
+          ${
+            favorited
+              ? 'border-red-500'
+              : 'border-gray-300 hover:border-red-500'
+          }
+          shadow-sm
+          hover:shadow-md
+          ${className}
+        `}
+        aria-label={tooltipText}
+      >
+        <Heart
+          size={iconSizes[size]}
+          className={`
+            transition-all
+            duration-200
+            ${
+              favorited
+                ? 'fill-red-500 text-red-500'
+                : 'text-gray-400'
+            }
+            ${isProcessing ? 'animate-pulse' : ''}
+          `}
+        />
+      </button>
+
+      {/* Tooltip */}
+      {showTooltip && showTooltipText && (
+        <div
+          className="absolute bottom-full left-1/2 
+            -translate-x-1/2 mb-2 px-3 py-1 
+            bg-gray-900 text-white text-xs 
+            rounded-lg whitespace-nowrap 
+            pointer-events-none z-50
+            animate-fade-in"
+        >
+          {tooltipText}
+          <div
+            className="absolute top-full left-1/2 
+              -translate-x-1/2 -mt-1 
+              border-4 border-transparent 
+              border-t-gray-900"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FavoriteButton;
diff --git a/client/src/components/rooms/Pagination.tsx b/client/src/components/rooms/Pagination.tsx
new file mode 100644
index 00000000..828f2ad1
--- /dev/null
+++ b/client/src/components/rooms/Pagination.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handlePageChange = (page: number) => {
+    if (page < 1 || page > totalPages) return;
+
+    // Update URL params
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set('page', String(page));
+    setSearchParams(newParams);
+
+    // Callback
+    onPageChange?.(page);
+
+    // Scroll to top
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Generate page numbers to show
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisible = 7; // Max page buttons to show
+
+    if (totalPages <= maxVisible) {
+      // Show all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('...');
+      }
+
+      // Show current page and neighbors
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('...');
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center items-center gap-2 mt-8">
+      {/* Previous Button */}
+      <button
+        onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="px-3 py-2 border border-gray-300 
+          rounded-lg hover:bg-gray-100 
+          disabled:opacity-50 disabled:cursor-not-allowed 
+          transition-colors"
+        aria-label="Previous page"
+      >
+        <ChevronLeft size={18} />
+      </button>
+
+      {/* Page Numbers */}
+      {getPageNumbers().map((page, index) => {
+        if (page === '...') {
+          return (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-3 py-2 text-gray-500"
+            >
+              ...
+            </span>
+          );
+        }
+
+        const pageNum = page as number;
+        const isActive = pageNum === currentPage;
+
+        return (
+          <button
+            key={pageNum}
+            onClick={() => handlePageChange(pageNum)}
+            className={`px-4 py-2 rounded-lg transition-colors 
+              font-medium ${
+                isActive
+                  ? 'bg-blue-600 text-white'
+                  : 'border border-gray-300 hover:bg-gray-100 text-gray-700'
+              }`}
+            aria-label={`Page ${pageNum}`}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            {pageNum}
+          </button>
+        );
+      })}
+
+      {/* Next Button */}
+      <button
+        onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="px-3 py-2 border border-gray-300 
+          rounded-lg hover:bg-gray-100 
+          disabled:opacity-50 disabled:cursor-not-allowed 
+          transition-colors"
+        aria-label="Next page"
+      >
+        <ChevronRight size={18} />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/client/src/components/rooms/RatingStars.tsx b/client/src/components/rooms/RatingStars.tsx
new file mode 100644
index 00000000..0e3a23d8
--- /dev/null
+++ b/client/src/components/rooms/RatingStars.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+interface RatingStarsProps {
+  rating: number;
+  maxRating?: number;
+  size?: 'sm' | 'md' | 'lg';
+  showNumber?: boolean;
+  interactive?: boolean;
+  onRatingChange?: (rating: number) => void;
+}
+
+const RatingStars: React.FC<RatingStarsProps> = ({
+  rating,
+  maxRating = 5,
+  size = 'md',
+  showNumber = false,
+  interactive = false,
+  onRatingChange,
+}) => {
+  const [hoveredRating, setHoveredRating] = 
+    React.useState<number | null>(null);
+
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+  };
+
+  const handleClick = (value: number) => {
+    if (interactive && onRatingChange) {
+      onRatingChange(value);
+    }
+  };
+
+  const handleMouseEnter = (value: number) => {
+    if (interactive) {
+      setHoveredRating(value);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (interactive) {
+      setHoveredRating(null);
+    }
+  };
+
+  const displayRating = hoveredRating ?? rating;
+
+  return (
+    <div className="flex items-center gap-1">
+      {Array.from({ length: maxRating }, (_, index) => {
+        const starValue = index + 1;
+        const isFilled = starValue <= displayRating;
+
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => handleClick(starValue)}
+            onMouseEnter={() => handleMouseEnter(starValue)}
+            onMouseLeave={handleMouseLeave}
+            disabled={!interactive}
+            className={`${
+              interactive
+                ? 'cursor-pointer hover:scale-110 transition-transform'
+                : 'cursor-default'
+            }`}
+            aria-label={`${starValue} star${starValue > 1 ? 's' : ''}`}
+          >
+            <Star
+              className={`${sizeClasses[size]} ${
+                isFilled
+                  ? 'text-yellow-500 fill-yellow-500'
+                  : 'text-gray-300'
+              }`}
+            />
+          </button>
+        );
+      })}
+      {showNumber && (
+        <span className="ml-2 text-sm font-semibold text-gray-700">
+          {rating.toFixed(1)}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default RatingStars;
diff --git a/client/src/components/rooms/ReviewSection.tsx b/client/src/components/rooms/ReviewSection.tsx
new file mode 100644
index 00000000..56efa3fc
--- /dev/null
+++ b/client/src/components/rooms/ReviewSection.tsx
@@ -0,0 +1,312 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import RatingStars from './RatingStars';
+import {
+  getRoomReviews,
+  createReview,
+  type Review,
+} from '../../services/api/reviewService';
+import useAuthStore from '../../store/useAuthStore';
+
+interface ReviewSectionProps {
+  roomId: number;
+}
+
+const reviewSchema = yup.object({
+  rating: yup
+    .number()
+    .min(1, 'Please select a rating')
+    .max(5)
+    .required('Please provide a rating'),
+  comment: yup
+    .string()
+    .min(10, 'Comment must be at least 10 characters')
+    .max(500, 'Comment must not exceed 500 characters')
+    .required('Please enter a comment'),
+});
+
+type ReviewFormData = {
+  rating: number;
+  comment: string;
+};
+
+const ReviewSection: React.FC<ReviewSectionProps> = ({ 
+  roomId 
+}) => {
+  const { isAuthenticated } = useAuthStore();
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [averageRating, setAverageRating] = useState<number>(0);
+  const [totalReviews, setTotalReviews] = useState<number>(0);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+    reset,
+  } = useForm<ReviewFormData>({
+    resolver: yupResolver(reviewSchema),
+    defaultValues: {
+      rating: 0,
+      comment: '',
+    },
+  });
+
+  const rating = watch('rating');
+
+  useEffect(() => {
+    fetchReviews();
+  }, [roomId]);
+
+  const fetchReviews = async () => {
+    try {
+      setLoading(true);
+      const response = await getRoomReviews(roomId);
+      if (response.status === 'success' && response.data) {
+        setReviews(response.data.reviews || []);
+        setAverageRating(response.data.average_rating || 0);
+        setTotalReviews(response.data.total_reviews || 0);
+      }
+    } catch (error) {
+      console.error('Error fetching reviews:', error);
+      toast.error('Unable to load reviews');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSubmit = async (data: ReviewFormData) => {
+    if (!isAuthenticated) {
+      toast.error('Please login to review');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      const response = await createReview({
+        room_id: roomId,
+        rating: data.rating,
+        comment: data.comment,
+      });
+
+      if (response.success) {
+        toast.success(
+          'Your review has been submitted and is pending approval'
+        );
+        reset();
+        fetchReviews();
+      }
+    } catch (error: any) {
+      const message =
+        error.response?.data?.message ||
+        'Unable to submit review';
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Rating Summary */}
+      <div className="bg-gray-50 rounded-lg p-6">
+        <h3 className="text-2xl font-bold text-gray-900 mb-4">
+          Customer Reviews
+        </h3>
+        <div className="flex items-center gap-6">
+          <div className="text-center">
+            <div className="text-5xl font-bold text-gray-900">
+              {averageRating > 0 
+                ? averageRating.toFixed(1) 
+                : 'N/A'}
+            </div>
+            <RatingStars 
+              rating={averageRating} 
+              size="md" 
+            />
+            <div className="text-sm text-gray-600 mt-2">
+              {totalReviews} review{totalReviews !== 1 ? 's' : ''}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Review Form */}
+      {isAuthenticated ? (
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h4 className="text-xl font-semibold mb-4">
+            Write Your Review
+          </h4>
+          <form onSubmit={handleSubmit(onSubmit)} 
+            className="space-y-4"
+          >
+            <div>
+              <label className="block text-sm font-medium 
+                text-gray-700 mb-2"
+              >
+                Your Rating
+              </label>
+              <RatingStars
+                rating={rating}
+                size="lg"
+                interactive
+                onRatingChange={(value) => 
+                  setValue('rating', value)
+                }
+              />
+              {errors.rating && (
+                <p className="text-red-600 text-sm mt-1">
+                  {errors.rating.message}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="comment"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Comment
+              </label>
+              <textarea
+                {...register('comment')}
+                id="comment"
+                rows={4}
+                className="w-full px-4 py-2 border 
+                  border-gray-300 rounded-lg 
+                  focus:ring-2 focus:ring-blue-500 
+                  focus:border-transparent"
+                placeholder="Share your experience..."
+              />
+              {errors.comment && (
+                <p className="text-red-600 text-sm mt-1">
+                  {errors.comment.message}
+                </p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-6 py-3 bg-blue-600 text-white 
+                rounded-lg hover:bg-blue-700 
+                disabled:bg-gray-400 
+                disabled:cursor-not-allowed 
+                transition-colors font-medium"
+            >
+              {submitting ? 'Submitting...' : 'Submit Review'}
+            </button>
+          </form>
+        </div>
+      ) : (
+        <div className="bg-blue-50 border border-blue-200 
+          rounded-lg p-6 text-center"
+        >
+          <p className="text-blue-800">
+            Please{' '}
+            <a
+              href="/login"
+              className="font-semibold underline 
+                hover:text-blue-900"
+            >
+              login
+            </a>{' '}
+            to write a review
+          </p>
+        </div>
+      )}
+
+      {/* Reviews List */}
+      <div>
+        <h4 className="text-xl font-semibold mb-6">
+          All Reviews ({totalReviews})
+        </h4>
+
+        {loading ? (
+          <div className="space-y-4">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={index}
+                className="bg-gray-100 rounded-lg p-6 
+                  animate-pulse"
+              >
+                <div className="h-4 bg-gray-300 
+                  rounded w-1/4 mb-2"
+                />
+                <div className="h-4 bg-gray-300 
+                  rounded w-3/4"
+                />
+              </div>
+            ))}
+          </div>
+        ) : reviews.length === 0 ? (
+          <div className="text-center py-12 bg-gray-50 
+            rounded-lg"
+          >
+            <p className="text-gray-600 text-lg">
+              No reviews yet
+            </p>
+            <p className="text-gray-500 text-sm mt-2">
+              Be the first to review this room!
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {reviews.map((review) => (
+              <div
+                key={review.id}
+                className="bg-white rounded-lg shadow-md 
+                  p-6"
+              >
+                <div className="flex items-start 
+                  justify-between mb-3"
+                >
+                  <div>
+                    <h5 className="font-semibold 
+                      text-gray-900"
+                    >
+                      {review.user?.full_name || 'Guest'}
+                    </h5>
+                    <div className="flex items-center 
+                      gap-2 mt-1"
+                    >
+                      <RatingStars
+                        rating={review.rating}
+                        size="sm"
+                      />
+                      <span className="text-sm 
+                        text-gray-500"
+                      >
+                        {formatDate(review.created_at)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <p className="text-gray-700 leading-relaxed">
+                  {review.comment}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReviewSection;
diff --git a/client/src/components/rooms/RoomAmenities.tsx b/client/src/components/rooms/RoomAmenities.tsx
new file mode 100644
index 00000000..b7ef9643
--- /dev/null
+++ b/client/src/components/rooms/RoomAmenities.tsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import {
+  Wifi,
+  Tv,
+  Wind,
+  Coffee,
+  Utensils,
+  Car,
+  Dumbbell,
+  Waves,
+  UtensilsCrossed,
+  Shield,
+  Cigarette,
+  Bath,
+} from 'lucide-react';
+
+interface RoomAmenitiesProps {
+  amenities: string[];
+}
+
+const RoomAmenities: React.FC<RoomAmenitiesProps> = ({ 
+  amenities 
+}) => {
+  const normalizeAmenities = (input: any): string[] => {
+    if (Array.isArray(input)) return input;
+    if (!input) return [];
+    if (typeof input === 'string') {
+      // Try JSON.parse first (stringified JSON)
+      try {
+        const parsed = JSON.parse(input);
+        if (Array.isArray(parsed)) return parsed;
+      } catch (e) {
+        // ignore
+      }
+
+      // Fallback: comma separated list
+      return input
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+    }
+
+    // If it's an object with values as amenities
+    if (typeof input === 'object') {
+      try {
+        // Convert object values to array if possible
+        const vals = Object.values(input);
+        if (Array.isArray(vals) && vals.length > 0) {
+          // flatten nested arrays
+          return vals.flat().map((v: any) => String(v).trim()).filter(Boolean);
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    return [];
+  };
+
+  const safeAmenities = normalizeAmenities(amenities);
+
+  // Icon mapping for common amenities
+  const amenityIcons: Record<string, React.ReactNode> = {
+    wifi: <Wifi className="w-5 h-5" />,
+    'wi-fi': <Wifi className="w-5 h-5" />,
+    tv: <Tv className="w-5 h-5" />,
+    television: <Tv className="w-5 h-5" />,
+    'air-conditioning': <Wind className="w-5 h-5" />,
+    'air conditioning': <Wind className="w-5 h-5" />,
+    ac: <Wind className="w-5 h-5" />,
+    'mini bar': <Coffee className="w-5 h-5" />,
+    minibar: <Coffee className="w-5 h-5" />,
+    restaurant: <Utensils className="w-5 h-5" />,
+    parking: <Car className="w-5 h-5" />,
+    gym: <Dumbbell className="w-5 h-5" />,
+    fitness: <Dumbbell className="w-5 h-5" />,
+    pool: <Waves className="w-5 h-5" />,
+    'swimming pool': <Waves className="w-5 h-5" />,
+    'room service': <UtensilsCrossed className="w-5 h-5" />,
+    safe: <Shield className="w-5 h-5" />,
+    'no smoking': <Cigarette className="w-5 h-5" />,
+    bathtub: <Bath className="w-5 h-5" />,
+    shower: <Bath className="w-5 h-5" />,
+    breakfast: <Coffee className="w-5 h-5" />,
+    'breakfast included': <Coffee className="w-5 h-5" />,
+    kettle: <Coffee className="w-5 h-5" />,
+    'hair dryer': <Shield className="w-5 h-5" />,
+    hairdryer: <Shield className="w-5 h-5" />,
+    iron: <Shield className="w-5 h-5" />,
+    fridge: <Utensils className="w-5 h-5" />,
+    microwave: <Utensils className="w-5 h-5" />,
+    'private bathroom': <Bath className="w-5 h-5" />,
+    balcony: <Wind className="w-5 h-5" />,
+    '24-hour front desk': <Shield className="w-5 h-5" />,
+    'front desk': <Shield className="w-5 h-5" />,
+    spa: <Waves className="w-5 h-5" />,
+    sauna: <Waves className="w-5 h-5" />,
+    jacuzzi: <Waves className="w-5 h-5" />,
+    'airport shuttle': <Car className="w-5 h-5" />,
+    shuttle: <Car className="w-5 h-5" />,
+    laundry: <Shield className="w-5 h-5" />,
+    pets: <Car className="w-5 h-5" />,
+  };
+
+  const amenityLabels: Record<string, string> = {
+    wifi: 'Wi‑Fi',
+    tv: 'TV',
+    ac: 'Air Conditioning',
+    'air-conditioning': 'Air Conditioning',
+    minibar: 'Mini Bar',
+    'mini bar': 'Mini Bar',
+    restaurant: 'Restaurant',
+    parking: 'Parking',
+    gym: 'Gym',
+    pool: 'Swimming Pool',
+    'room service': 'Room Service',
+    safe: 'Safe',
+    'no smoking': 'No Smoking',
+    bathtub: 'Bathtub',
+    shower: 'Shower',
+    breakfast: 'Breakfast Included',
+    kettle: 'Electric Kettle',
+    hairdryer: 'Hair Dryer',
+    iron: 'Iron',
+    fridge: 'Refrigerator',
+    microwave: 'Microwave',
+    'private bathroom': 'Private Bathroom',
+    balcony: 'Balcony',
+    spa: 'Spa',
+    sauna: 'Sauna',
+    jacuzzi: 'Jacuzzi',
+    laundry: 'Laundry Service',
+    '24-hour front desk': '24/7 Front Desk',
+    'airport shuttle': 'Airport Shuttle',
+    pets: 'Pets Allowed',
+  };
+
+  const amenityDescriptions: Record<string, string> = {
+    wifi: 'Free wireless internet connection',
+    tv: 'TV with cable or satellite',
+    ac: 'Air conditioning system in room',
+    minibar: 'Drinks and snacks in mini bar',
+    pool: 'Outdoor or indoor swimming pool',
+    gym: 'Fitness center/gym',
+    'room service': 'Order food to room',
+    breakfast: 'Breakfast served at restaurant',
+    balcony: 'Private balcony with view',
+    '24-hour front desk': '24-hour front desk service',
+    spa: 'Spa and relaxation services',
+  };
+
+  const getIcon = (amenity: string) => {
+    const key = amenity.toLowerCase().trim();
+    return amenityIcons[key] || (
+      <span className="w-5 h-5 flex items-center 
+        justify-center text-blue-600 font-bold"
+      >
+        ✓
+      </span>
+    );
+  };
+
+  const getLabel = (amenity: string) => {
+    const key = amenity.toLowerCase().trim();
+    if (amenityLabels[key]) return amenityLabels[key];
+    // Fallback: capitalize words and replace dashes/underscores
+    return amenity
+      .toLowerCase()
+      .replace(/[_-]/g, ' ')
+      .split(' ')
+      .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+      .join(' ');
+  };
+
+  const getDescription = (amenity: string) => {
+    const key = amenity.toLowerCase().trim();
+    return amenityDescriptions[key] || '';
+  };
+
+  if (safeAmenities.length === 0) {
+    return (
+      <div className="text-gray-500 text-center py-4">
+        Amenity information is being updated
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 
+      lg:grid-cols-3 gap-4"
+    >
+      {safeAmenities.slice(0, 10).map((amenity, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-3 p-3 
+            bg-gray-50 rounded-lg hover:bg-gray-100 
+            transition-colors"
+          title={getDescription(amenity)}
+        >
+          <div className="text-blue-600">{getIcon(amenity)}</div>
+          <div>
+            <div className="text-gray-800 font-medium">
+              {getLabel(amenity)}
+            </div>
+            {getDescription(amenity) && (
+              <div className="text-xs text-gray-500">
+                {getDescription(amenity)}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RoomAmenities;
diff --git a/client/src/components/rooms/RoomCard.tsx b/client/src/components/rooms/RoomCard.tsx
new file mode 100644
index 00000000..a818a9a1
--- /dev/null
+++ b/client/src/components/rooms/RoomCard.tsx
@@ -0,0 +1,222 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Users,
+  Star,
+  MapPin,
+  Wifi,
+  Tv,
+  Wind,
+  ArrowRight,
+} from 'lucide-react';
+import type { Room } from '../../services/api/roomService';
+import FavoriteButton from './FavoriteButton';
+
+interface RoomCardProps {
+  room: Room;
+}
+
+const RoomCard: React.FC<RoomCardProps> = ({ room }) => {
+  const roomType = room.room_type;
+  
+  if (!roomType) {
+    return null;
+  }
+
+  // Get first image or use placeholder
+  const imageUrl = roomType.images?.[0] || 
+    '/images/room-placeholder.jpg';
+  
+  // Format price
+  const formattedPrice = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'VND',
+  }).format(roomType.base_price);
+
+  // Prefer room-level amenities when available, otherwise use room type
+  const normalizeAmenities = (input: any): string[] => {
+    if (Array.isArray(input)) return input;
+    if (!input) return [];
+    if (typeof input === 'string') {
+      try {
+        const parsed = JSON.parse(input);
+        if (Array.isArray(parsed)) return parsed;
+      } catch {}
+      return input.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    if (typeof input === 'object') {
+      try {
+        const vals = Object.values(input);
+        if (Array.isArray(vals) && vals.length > 0) return vals.flat().map((v: any) => String(v).trim());
+      } catch {}
+    }
+    return [];
+  };
+
+  const amenitiesSource =
+    (room.amenities && normalizeAmenities(room.amenities).length > 0)
+      ? normalizeAmenities(room.amenities)
+      : normalizeAmenities(roomType.amenities);
+
+  // Get amenities (limit to 3 for display)
+  const amenities = amenitiesSource.slice(0, 3);
+
+  // Amenity icons mapping
+  const amenityIcons: Record<string, React.ReactNode> = {
+    wifi: <Wifi className="w-4 h-4" />,
+    tv: <Tv className="w-4 h-4" />,
+    'air-conditioning': <Wind className="w-4 h-4" />,
+  };
+
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md 
+        overflow-hidden hover:shadow-xl 
+        transition-shadow duration-300 group"
+    >
+      {/* Image */}
+      <div className="relative h-48 overflow-hidden 
+        bg-gray-200"
+      >
+        <img
+          src={imageUrl}
+          alt={roomType.name}
+          loading="lazy"
+          className="w-full h-full object-cover 
+            group-hover:scale-110 transition-transform 
+            duration-300"
+          onLoad={(e) => 
+            e.currentTarget.classList.add('loaded')
+          }
+        />
+        
+        {/* Favorite Button */}
+        <div className="absolute top-3 right-3 z-5">
+          <FavoriteButton roomId={room.id} size="md" />
+        </div>
+        
+        {/* Featured Badge */}
+        {room.featured && (
+          <div 
+            className="absolute top-3 left-3 
+              bg-yellow-500 text-white px-3 py-1 
+              rounded-full text-xs font-semibold"
+          >
+            Featured
+          </div>
+        )}
+
+        {/* Status Badge */}
+        <div 
+          className={`absolute bottom-3 left-3 px-3 py-1 
+            rounded-full text-xs font-semibold
+            ${
+              room.status === 'available'
+                ? 'bg-green-500 text-white'
+                : room.status === 'occupied'
+                ? 'bg-red-500 text-white'
+                : 'bg-gray-500 text-white'
+            }`}
+        >
+          {room.status === 'available'
+            ? 'Available'
+            : room.status === 'occupied'
+            ? 'Occupied'
+            : 'Maintenance'}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-5">
+        {/* Room Type Name */}
+        <h3 className="text-xl font-bold text-gray-900 mb-2">
+          {roomType.name}
+        </h3>
+
+        {/* Room Number & Floor */}
+        <div 
+          className="flex items-center text-sm 
+            text-gray-600 mb-3"
+        >
+          <MapPin className="w-4 h-4 mr-1" />
+          <span>
+            Room {room.room_number} - Floor {room.floor}
+          </span>
+        </div>
+
+        {/* Description (truncated) */}
+        <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+          {roomType.description}
+        </p>
+
+        {/* Capacity & Rating */}
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center text-gray-700">
+            <Users className="w-4 h-4 mr-1" />
+            <span className="text-sm">
+              {roomType.capacity} guests
+            </span>
+          </div>
+
+          {room.average_rating != null && (
+            <div className="flex items-center">
+              <Star
+                className="w-4 h-4 text-yellow-500 mr-1"
+                fill="currentColor"
+              />
+              <span className="text-sm font-semibold text-gray-900">
+                {Number(room.average_rating).toFixed(1)}
+              </span>
+              <span className="text-xs text-gray-500 ml-1">
+                ({Number(room.total_reviews || 0)})
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Amenities */}
+        {amenities.length > 0 && (
+          <div className="flex items-center gap-2 mb-4">
+            {amenities.map((amenity, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-1 
+                  text-gray-600 text-xs bg-gray-100 
+                  px-2 py-1 rounded"
+                title={amenity}
+              >
+                {amenityIcons[amenity.toLowerCase()] || 
+                  <span>•</span>}
+                <span className="capitalize">{amenity}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Price & Action */}
+        <div className="flex items-center justify-between pt-3 border-t">
+          <div>
+            <p className="text-xs text-gray-500">From</p>
+            <p className="text-xl font-bold text-indigo-600">
+              {formattedPrice}
+            </p>
+            <p className="text-xs text-gray-500">/ night</p>
+          </div>
+
+          <Link
+            to={`/rooms/${room.id}`}
+            className="flex items-center gap-1 
+              bg-indigo-600 text-white px-4 py-2 
+              rounded-lg hover:bg-indigo-700 
+              transition-colors text-sm font-medium"
+          >
+            View Details
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomCard;
diff --git a/client/src/components/rooms/RoomCardSkeleton.tsx b/client/src/components/rooms/RoomCardSkeleton.tsx
new file mode 100644
index 00000000..ac0494f2
--- /dev/null
+++ b/client/src/components/rooms/RoomCardSkeleton.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+const RoomCardSkeleton: React.FC = () => {
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md 
+        overflow-hidden animate-pulse"
+    >
+      {/* Image Skeleton */}
+      <div className="h-48 bg-gray-300" />
+
+      {/* Content Skeleton */}
+      <div className="p-5">
+        {/* Title */}
+        <div className="h-6 bg-gray-300 rounded w-3/4 mb-2" />
+
+        {/* Room Number */}
+        <div className="h-4 bg-gray-200 rounded w-1/2 mb-3" />
+
+        {/* Description */}
+        <div className="space-y-2 mb-3">
+          <div className="h-3 bg-gray-200 rounded w-full" />
+          <div className="h-3 bg-gray-200 rounded w-5/6" />
+        </div>
+
+        {/* Capacity & Rating */}
+        <div className="flex items-center justify-between mb-3">
+          <div className="h-4 bg-gray-200 rounded w-20" />
+          <div className="h-4 bg-gray-200 rounded w-16" />
+        </div>
+
+        {/* Amenities */}
+        <div className="flex gap-2 mb-4">
+          <div className="h-6 bg-gray-200 rounded w-16" />
+          <div className="h-6 bg-gray-200 rounded w-16" />
+          <div className="h-6 bg-gray-200 rounded w-16" />
+        </div>
+
+        {/* Price & Button */}
+        <div 
+          className="flex items-center justify-between 
+            pt-3 border-t"
+        >
+          <div>
+            <div className="h-3 bg-gray-200 rounded w-12 mb-1" />
+            <div className="h-7 bg-gray-300 rounded w-24 mb-1" />
+            <div className="h-3 bg-gray-200 rounded w-10" />
+          </div>
+          <div className="h-10 bg-gray-300 rounded w-28" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomCardSkeleton;
diff --git a/client/src/components/rooms/RoomFilter.tsx b/client/src/components/rooms/RoomFilter.tsx
new file mode 100644
index 00000000..4728c7a7
--- /dev/null
+++ b/client/src/components/rooms/RoomFilter.tsx
@@ -0,0 +1,444 @@
+import React, { useState, useEffect } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { useSearchParams } from 'react-router-dom';
+// no debounce needed when apply-on-submit is used
+
+interface RoomFilterProps {
+  onFilterChange?: (filters: FilterValues) => void;
+}
+
+export interface FilterValues {
+  type?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  capacity?: number;
+  from?: string;
+  to?: string;
+}
+
+const RoomFilter: React.FC<RoomFilterProps> = ({ onFilterChange }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [filters, setFilters] = useState<FilterValues>({
+    type: searchParams.get('type') || '',
+    minPrice: searchParams.get('minPrice') 
+      ? Number(searchParams.get('minPrice')) 
+      : undefined,
+    maxPrice: searchParams.get('maxPrice')
+      ? Number(searchParams.get('maxPrice'))
+      : undefined,
+    capacity: searchParams.get('capacity')
+      ? Number(searchParams.get('capacity'))
+      : undefined,
+    from: searchParams.get('from') || undefined,
+    to: searchParams.get('to') || undefined,
+  });
+
+  const [availableAmenities, setAvailableAmenities] = useState<string[]>([]);
+  const [selectedAmenities, setSelectedAmenities] = useState<string[]>(
+    searchParams.get('amenities')
+      ? searchParams.get('amenities')!.split(',').map((s) => s.trim())
+      : []
+  );
+
+  const [checkInDate, setCheckInDate] = useState<Date | null>(
+    searchParams.get('from') ? new Date(searchParams.get('from')!) : null
+  );
+  const [checkOutDate, setCheckOutDate] = useState<Date | null>(
+    searchParams.get('to') ? new Date(searchParams.get('to')!) : null
+  );
+
+  // no debounce needed — apply on submit
+
+  // Sync filters with URL on mount and URL changes
+  useEffect(() => {
+    const type = searchParams.get('type') || '';
+    const minPrice = searchParams.get('minPrice')
+      ? Number(searchParams.get('minPrice'))
+      : undefined;
+    const maxPrice = searchParams.get('maxPrice')
+      ? Number(searchParams.get('maxPrice'))
+      : undefined;
+    const capacity = searchParams.get('capacity')
+      ? Number(searchParams.get('capacity'))
+      : undefined;
+    const from = searchParams.get('from') || undefined;
+    const to = searchParams.get('to') || undefined;
+
+    setFilters({ type, minPrice, maxPrice, capacity, from, to });
+
+    // Sync local date state
+    setCheckInDate(from ? new Date(from) : null);
+    setCheckOutDate(to ? new Date(to) : null);
+  }, [searchParams]);
+
+  // Load amenities from API
+  useEffect(() => {
+    let mounted = true;
+    import('../../services/api/roomService').then((mod) => {
+      mod.getAmenities().then((res) => {
+        const list = res.data?.amenities || [];
+        if (mounted) setAvailableAmenities(list.slice(0, 8));
+      }).catch(() => {});
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const parseCurrency = (value: string): number | undefined => {
+    const digits = value.replace(/\D/g, '');
+    if (!digits) return undefined;
+    try {
+      return Number(digits);
+    } catch {
+      return undefined;
+    }
+  };
+
+  const formatCurrency = (n?: number): string => {
+    if (n == null) return '';
+    return new Intl.NumberFormat('en-US').format(n);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+
+    // Room type select
+    if (name === 'type') {
+      setFilters((prev) => ({ ...prev, type: value || '' }));
+      return;
+    }
+
+    // Capacity input
+    if (name === 'capacity') {
+      setFilters((prev) => ({
+        ...prev,
+        capacity: value === '' ? undefined : Number(value),
+      }));
+      return;
+    }
+
+    // Price inputs: allow formatted VN style with dots
+    if (name === 'minPrice' || name === 'maxPrice') {
+      const parsed = parseCurrency(value);
+      setFilters((prev) => ({ ...prev, [name]: parsed }));
+      return;
+    }
+
+    // Fallback numeric parsing
+    setFilters((prev) => ({
+      ...prev,
+      [name]: value === '' ? undefined : Number(value),
+    }));
+  };
+
+  const formatDate = (d: Date) => d.toISOString().split('T')[0];
+
+  // Filters are applied only when user clicks "Áp dụng".
+  // Debounced values are kept for UX but won't auto-submit.
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Build new search params
+    const newParams = new URLSearchParams(searchParams);
+    
+    // Reset page to 1 when filters change
+    newParams.set('page', '1');
+
+    // Update search params with filter values
+    if (filters.type) {
+      newParams.set('type', filters.type);
+    } else {
+      newParams.delete('type');
+    }
+
+    if (filters.minPrice !== undefined && filters.minPrice > 0) {
+      newParams.set('minPrice', String(filters.minPrice));
+    } else {
+      newParams.delete('minPrice');
+    }
+
+    if (filters.maxPrice !== undefined && filters.maxPrice > 0) {
+      newParams.set('maxPrice', String(filters.maxPrice));
+    } else {
+      newParams.delete('maxPrice');
+    }
+
+    if (filters.capacity !== undefined && filters.capacity > 0) {
+      newParams.set('capacity', String(filters.capacity));
+    } else {
+      newParams.delete('capacity');
+    }
+
+    // Dates
+    if (checkInDate) {
+      newParams.set('from', formatDate(checkInDate));
+    } else {
+      newParams.delete('from');
+    }
+
+    if (checkOutDate) {
+      newParams.set('to', formatDate(checkOutDate));
+    } else {
+      newParams.delete('to');
+    }
+    // Amenities
+    if (selectedAmenities.length > 0) {
+      newParams.set('amenities', selectedAmenities.join(','));
+    } else {
+      newParams.delete('amenities');
+    }
+
+    setSearchParams(newParams);
+    onFilterChange?.({
+      ...filters,
+      from: checkInDate ? formatDate(checkInDate) : undefined,
+      to: checkOutDate ? formatDate(checkOutDate) : undefined,
+      // include amenities
+      ...(selectedAmenities.length > 0 ? { amenities: selectedAmenities.join(',') } : {}),
+    });
+  };
+
+  const handleReset = () => {
+    setFilters({
+      type: '',
+      minPrice: undefined,
+      maxPrice: undefined,
+      capacity: undefined,
+      from: undefined,
+      to: undefined,
+    });
+
+    setCheckInDate(null);
+    setCheckOutDate(null);
+    setSelectedAmenities([]);
+
+    // Reset URL params but keep the base /rooms path
+    setSearchParams({});
+    onFilterChange?.({});
+  };
+
+  const toggleAmenity = (amenity: string) => {
+    setSelectedAmenities((prev) => {
+      if (prev.includes(amenity)) return prev.filter((a) => a !== amenity);
+      return [...prev, amenity];
+    });
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4 mb-6">
+      <h2 className="text-xl font-semibold mb-4 text-gray-800">
+        Room Filters
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Room Type */}
+        <div>
+          <label 
+            htmlFor="type" 
+            className="block text-sm font-medium 
+              text-gray-700 mb-1"
+          >
+            Room Type
+          </label>
+          <select
+            id="type"
+            name="type"
+            value={filters.type || ''}
+            onChange={handleInputChange}
+            className="w-full px-4 py-2 border border-gray-300 
+              rounded-lg focus:ring-2 focus:ring-blue-500 
+              focus:border-transparent"
+          >
+            <option value="">All</option>
+            <option value="Standard Room">Standard Room</option>
+            <option value="Deluxe Room">Deluxe Room</option>
+            <option value="Luxury Room">Luxury Room</option>
+            <option value="Family Room">Family Room</option>
+            <option value="Twin Room">Twin Room</option>
+          </select>
+        </div>
+
+        {/* Date Range */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              htmlFor="from"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Check-in Date
+            </label>
+            <DatePicker
+              selected={checkInDate}
+              onChange={(date: Date | null) => setCheckInDate(date)}
+              selectsStart
+              startDate={checkInDate}
+              endDate={checkOutDate}
+              minDate={new Date()}
+              dateFormat="dd/MM/yyyy"
+              placeholderText=""
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="to"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Check-out Date
+            </label>
+            <DatePicker
+              selected={checkOutDate}
+              onChange={(date: Date | null) => setCheckOutDate(date)}
+              selectsEnd
+              startDate={checkInDate}
+              endDate={checkOutDate}
+              minDate={checkInDate || new Date()}
+              dateFormat="dd/MM/yyyy"
+              placeholderText=""
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+            />
+          </div>
+        </div>
+
+        {/* Price Range */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              htmlFor="minPrice"
+              className="block text-sm font-medium 
+                text-gray-700 mb-1"
+            >
+              Min Price
+            </label>
+            <input
+              type="text"
+              id="minPrice"
+              name="minPrice"
+              value={
+                filters.minPrice != null
+                  ? formatCurrency(filters.minPrice)
+                  : ''
+              }
+              onChange={handleInputChange}
+              placeholder="0"
+              inputMode="numeric"
+              pattern="[0-9.]*"
+              className="w-full px-4 py-2 border 
+                border-gray-300 rounded-lg 
+                focus:ring-2 focus:ring-blue-500 
+                focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="maxPrice"
+              className="block text-sm font-medium 
+                text-gray-700 mb-1"
+            >
+              Max Price
+            </label>
+            <input
+              type="text"
+              id="maxPrice"
+              name="maxPrice"
+              value={
+                filters.maxPrice != null
+                  ? formatCurrency(filters.maxPrice)
+                  : ''
+              }
+              onChange={handleInputChange}
+              placeholder="10.000.000"
+              inputMode="numeric"
+              pattern="[0-9.]*"
+              className="w-full px-4 py-2 border 
+                border-gray-300 rounded-lg 
+                focus:ring-2 focus:ring-blue-500 
+                focus:border-transparent"
+            />
+          </div>
+        </div>
+
+        {/* Capacity */}
+        <div>
+          <label
+            htmlFor="capacity"
+            className="block text-sm font-medium 
+              text-gray-700 mb-1"
+          >
+            Number of Guests
+          </label>
+          <input
+            type="number"
+            id="capacity"
+            name="capacity"
+            value={filters.capacity || ''}
+            onChange={handleInputChange}
+            placeholder="1"
+            min="1"
+            max="10"
+            className="w-full px-4 py-2 border 
+              border-gray-300 rounded-lg 
+              focus:ring-2 focus:ring-blue-500 
+              focus:border-transparent"
+          />
+        </div>
+
+        {/* Amenities */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Amenities
+          </label>
+          {availableAmenities.length === 0 ? (
+            <div className="text-sm text-gray-500">Loading amenities...</div>
+          ) : (
+            <div className="flex flex-col gap-2 max-h-40 overflow-auto pr-2">
+              {availableAmenities.map((amenity) => (
+                <label
+                  key={amenity}
+                  className="flex items-center gap-2 text-sm w-full"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedAmenities.includes(amenity)}
+                    onChange={() => toggleAmenity(amenity)}
+                    className="h-4 w-4"
+                  />
+                  <span className="text-gray-700">{amenity}</span>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Buttons */}
+        <div className="flex gap-3 pt-2">
+          <button
+            type="submit"
+            className="flex-1 bg-blue-600 text-white 
+              py-2 px-4 rounded-lg hover:bg-blue-700 
+              transition-colors font-medium"
+          >
+            Apply
+          </button>
+          <button
+            type="button"
+            onClick={handleReset}
+            className="flex-1 bg-gray-200 text-gray-700 
+              py-2 px-4 rounded-lg hover:bg-gray-300 
+              transition-colors font-medium"
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default RoomFilter;
diff --git a/client/src/components/rooms/RoomGallery.tsx b/client/src/components/rooms/RoomGallery.tsx
new file mode 100644
index 00000000..71d95229
--- /dev/null
+++ b/client/src/components/rooms/RoomGallery.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+
+interface RoomGalleryProps {
+  images: string[];
+  roomName: string;
+}
+
+const RoomGallery: React.FC<RoomGalleryProps> = ({ 
+  images, 
+  roomName 
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const safeImages = Array.isArray(images) && images.length > 0
+    ? images
+    : ['/images/room-placeholder.jpg'];
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) =>
+      prev === 0 ? safeImages.length - 1 : prev - 1
+    );
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) =>
+      prev === safeImages.length - 1 ? 0 : prev + 1
+    );
+  };
+
+  const openModal = (index: number) => {
+    setCurrentIndex(index);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      {/* Main Gallery */}
+      <div className="grid grid-cols-4 gap-2 h-96">
+        {/* Main Image */}
+        <div
+          className="col-span-4 md:col-span-3 relative 
+            overflow-hidden rounded-lg cursor-pointer 
+            group"
+          onClick={() => openModal(0)}
+        >
+          <img
+            src={safeImages[0]}
+            alt={`${roomName} - Main`}
+            className="w-full h-full object-cover 
+              transition-transform duration-300 
+              group-hover:scale-110"
+          />
+          <div
+            className="absolute inset-0 bg-black 
+              bg-opacity-0 group-hover:bg-opacity-20 
+              transition-all duration-300 
+              flex items-center justify-center"
+          >
+            <span
+              className="text-white font-medium 
+                opacity-0 group-hover:opacity-100 
+                transition-opacity"
+            >
+              Xem ảnh lớn
+            </span>
+          </div>
+        </div>
+
+        {/* Thumbnail Grid */}
+        <div
+          className="hidden md:flex flex-col gap-2 
+            col-span-1"
+        >
+          {safeImages.slice(1, 4).map((image, index) => (
+            <div
+              key={index + 1}
+              className="relative overflow-hidden 
+                rounded-lg cursor-pointer group 
+                flex-1"
+              onClick={() => openModal(index + 1)}
+            >
+              <img
+                src={image}
+                alt={`${roomName} - ${index + 2}`}
+                className="w-full h-full object-cover 
+                  transition-transform duration-300 
+                  group-hover:scale-110"
+              />
+              {index === 2 && safeImages.length > 4 && (
+                <div
+                  className="absolute inset-0 bg-black 
+                    bg-opacity-60 flex items-center 
+                    justify-center"
+                >
+                  <span className="text-white font-semibold">
+                    +{safeImages.length - 4} ảnh
+                  </span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Modal Lightbox */}
+      {isModalOpen && (
+        <div
+          className="fixed inset-0 z-50 bg-black 
+            bg-opacity-90 flex items-center 
+            justify-center"
+          onClick={closeModal}
+        >
+          <button
+            onClick={closeModal}
+            className="absolute top-4 right-4 
+              text-white hover:text-gray-300 
+              transition-colors z-10"
+            aria-label="Close"
+          >
+            <X className="w-8 h-8" />
+          </button>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              goToPrevious();
+            }}
+            className="absolute left-4 text-white 
+              hover:text-gray-300 transition-colors 
+              z-10"
+            aria-label="Previous image"
+          >
+            <ChevronLeft className="w-12 h-12" />
+          </button>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              goToNext();
+            }}
+            className="absolute right-4 text-white 
+              hover:text-gray-300 transition-colors 
+              z-10"
+            aria-label="Next image"
+          >
+            <ChevronRight className="w-12 h-12" />
+          </button>
+
+          <div
+            className="max-w-6xl max-h-[90vh] relative"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <img
+              src={safeImages[currentIndex]}
+              alt={`${roomName} - ${currentIndex + 1}`}
+              className="max-w-full max-h-[90vh] 
+                object-contain"
+            />
+            <div
+              className="absolute bottom-4 left-1/2 
+                transform -translate-x-1/2 
+                bg-black bg-opacity-50 
+                text-white px-4 py-2 rounded-full"
+            >
+              {currentIndex + 1} / {safeImages.length}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default RoomGallery;
diff --git a/client/src/components/rooms/SearchRoomForm.tsx b/client/src/components/rooms/SearchRoomForm.tsx
new file mode 100644
index 00000000..d6022d19
--- /dev/null
+++ b/client/src/components/rooms/SearchRoomForm.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Search } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+interface SearchRoomFormProps {
+  className?: string;
+}
+
+const SearchRoomForm: React.FC<SearchRoomFormProps> = ({
+  className = '',
+}) => {
+  const navigate = useNavigate();
+  const [checkInDate, setCheckInDate] = useState<Date | null>(null);
+  const [checkOutDate, setCheckOutDate] = useState<Date | null>(null);
+  const [roomType, setRoomType] = useState('');
+  const [guestCount, setGuestCount] = useState<number>(1);
+  const [isSearching, setIsSearching] = useState(false);
+
+  // Set minimum date to today
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validation
+    if (!checkInDate) {
+      toast.error('Please select check-in date');
+      return;
+    }
+
+    if (!checkOutDate) {
+      toast.error('Please select check-out date');
+      return;
+    }
+
+    // Check if check-in is not in the past
+    const checkInStart = new Date(checkInDate);
+    checkInStart.setHours(0, 0, 0, 0);
+    
+    if (checkInStart < today) {
+      toast.error(
+        'Check-in date cannot be in the past'
+      );
+      return;
+    }
+
+    // Check if check-out is after check-in
+    if (checkOutDate <= checkInDate) {
+      toast.error(
+        'Check-out date must be after check-in date'
+      );
+      return;
+    }
+
+    // Format dates to YYYY-MM-DD
+    const formatDate = (date: Date) => {
+      return date.toISOString().split('T')[0];
+    };
+
+    // Build search params
+    const params = new URLSearchParams({
+      from: formatDate(checkInDate),
+      to: formatDate(checkOutDate),
+    });
+
+    if (roomType.trim()) {
+      params.append('type', roomType.trim());
+    }
+
+    // Append guest count (capacity)
+    if (guestCount && guestCount > 0) {
+      params.append('capacity', String(guestCount));
+    }
+
+    // Navigate to search results
+    setIsSearching(true);
+    navigate(`/rooms/search?${params.toString()}`);
+  };
+
+  // Reset helper (kept for potential future use)
+  // const handleReset = () => {
+  //   setCheckInDate(null);
+  //   setCheckOutDate(null);
+  //   setRoomType('');
+  //   setGuestCount(1);
+  // };
+
+  return (
+    <div className={`w-full bg-white rounded-lg shadow-sm p-4 ${className}`}>
+      <div className="flex items-center justify-center gap-3 mb-6">
+        <h3 className="text-xl font-bold text-gray-900">
+          Find Available Rooms
+        </h3>
+      </div>
+
+      <form onSubmit={handleSearch}>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-center">
+          <div className="md:col-span-3">
+            <label className="sr-only">Check-in Date</label>
+            <DatePicker
+              selected={checkInDate}
+              onChange={(date) => setCheckInDate(date)}
+              selectsStart
+              startDate={checkInDate}
+              endDate={checkOutDate}
+              minDate={today}
+              placeholderText="Check-in Date"
+              dateFormat="dd/MM"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+            />
+          </div>
+
+          <div className="md:col-span-3">
+            <label className="sr-only">Check-out Date</label>
+            <DatePicker
+              selected={checkOutDate}
+              onChange={(date) => setCheckOutDate(date)}
+              selectsEnd
+              startDate={checkInDate}
+              endDate={checkOutDate}
+              minDate={checkInDate || today}
+              placeholderText="Check-out Date"
+              dateFormat="dd/MM"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+            />
+          </div>
+
+          <div className="md:col-span-2">
+            <label className="sr-only">Room Type</label>
+            <select
+              value={roomType}
+              onChange={(e) => setRoomType(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+            >
+              <option value="">All Types</option>
+                <option value="Standard Room">Standard Room</option>
+                <option value="Deluxe Room">Deluxe Room</option>
+                <option value="Luxury Room">Luxury Room</option>
+                <option value="Family Room">Family Room</option>
+                <option value="Twin Room">Twin Room</option>
+            </select>
+          </div>
+
+          <div className="md:col-span-2">
+            <label className="sr-only">Number of Guests</label>
+            <select
+              value={guestCount}
+              onChange={(e) => setGuestCount(Number(e.target.value))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+            >
+              {Array.from({ length: 6 }).map((_, i) => (
+                <option key={i} value={i + 1}>{i + 1} guest{i !== 0 ? 's' : ''}</option>
+              ))}
+            </select>
+          </div>
+          <div className="md:col-span-2 flex items-center mt-3 md:mt-0">
+            <button
+              type="submit"
+              disabled={isSearching}
+              className="w-full bg-indigo-600 text-white px-3 py-2 rounded-md text-sm hover:bg-indigo-700 disabled:bg-gray-400"
+            >
+              <span className="inline-flex items-center gap-2 justify-center w-full">
+                <Search className="w-4 h-4" />
+                {isSearching ? 'Searching...' : 'Search Rooms'}
+              </span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default SearchRoomForm;
diff --git a/client/src/components/rooms/index.ts b/client/src/components/rooms/index.ts
new file mode 100644
index 00000000..04ea2374
--- /dev/null
+++ b/client/src/components/rooms/index.ts
@@ -0,0 +1,12 @@
+export { default as RoomCard } from './RoomCard';
+export { default as RoomCardSkeleton } from './RoomCardSkeleton';
+export { default as BannerCarousel } from './BannerCarousel';
+export { default as BannerSkeleton } from './BannerSkeleton';
+export { default as RoomFilter } from './RoomFilter';
+export { default as Pagination } from './Pagination';
+export { default as RoomGallery } from './RoomGallery';
+export { default as RoomAmenities } from './RoomAmenities';
+export { default as RatingStars } from './RatingStars';
+export { default as ReviewSection } from './ReviewSection';
+export { default as SearchRoomForm } from './SearchRoomForm';
+export { default as FavoriteButton } from './FavoriteButton';
diff --git a/client/src/examples/useAuthStoreExamples.tsx b/client/src/examples/useAuthStoreExamples.tsx
new file mode 100644
index 00000000..5864e545
--- /dev/null
+++ b/client/src/examples/useAuthStoreExamples.tsx
@@ -0,0 +1,277 @@
+/**
+ * Example: Cách sử dụng useAuthStore trong components
+ * 
+ * File này chỉ để tham khảo, không được sử dụng 
+ * trong production
+ */
+
+import { useNavigate } from 'react-router-dom';
+import useAuthStore from '../store/useAuthStore';
+
+// ============================================
+// Example 1: Login Component
+// ============================================
+export const LoginExample = () => {
+  const { login, isLoading, error } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleLogin = async (
+    email: string, 
+    password: string
+  ) => {
+    try {
+      await login({ email, password });
+      navigate('/dashboard');
+    } catch (error) {
+      // Error đã được xử lý trong store
+      console.error('Login failed:', error);
+    }
+  };
+
+  return (
+    <div>
+      {error && <p className="text-red-500">{error}</p>}
+      <button 
+        onClick={() => handleLogin(
+          'user@example.com', 
+          'password123'
+        )}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Đang xử lý...' : 'Đăng nhập'}
+      </button>
+    </div>
+  );
+};
+
+// ============================================
+// Example 2: Register Component
+// ============================================
+export const RegisterExample = () => {
+  const { register, isLoading } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleRegister = async () => {
+    try {
+      await register({
+        name: 'John Doe',
+        email: 'john@example.com',
+        password: 'password123',
+        phone: '0123456789'
+      });
+      navigate('/login');
+    } catch (error) {
+      console.error('Register failed:', error);
+    }
+  };
+
+  return (
+    <button 
+      onClick={handleRegister} 
+      disabled={isLoading}
+    >
+      {isLoading ? 'Đang xử lý...' : 'Đăng ký'}
+    </button>
+  );
+};
+
+// ============================================
+// Example 3: User Profile Display
+// ============================================
+export const UserProfileExample = () => {
+  const { userInfo, isAuthenticated } = useAuthStore();
+
+  if (!isAuthenticated) {
+    return <p>Vui lòng đăng nhập</p>;
+  }
+
+  return (
+    <div>
+      <h2>Thông tin người dùng</h2>
+      <p>Tên: {userInfo?.name}</p>
+      <p>Email: {userInfo?.email}</p>
+      <p>Role: {userInfo?.role}</p>
+      {userInfo?.avatar && (
+        <img 
+          src={userInfo.avatar} 
+          alt={userInfo.name} 
+        />
+      )}
+    </div>
+  );
+};
+
+// ============================================
+// Example 4: Logout Button
+// ============================================
+export const LogoutButtonExample = () => {
+  const { logout, isLoading } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  return (
+    <button 
+      onClick={handleLogout} 
+      disabled={isLoading}
+    >
+      {isLoading ? 'Đang xử lý...' : 'Đăng xuất'}
+    </button>
+  );
+};
+
+// ============================================
+// Example 5: Forgot Password
+// ============================================
+export const ForgotPasswordExample = () => {
+  const { forgotPassword, isLoading } = useAuthStore();
+
+  const handleForgotPassword = async (
+    email: string
+  ) => {
+    try {
+      await forgotPassword({ email });
+      // Toast sẽ hiển thị thông báo thành công
+    } catch (error) {
+      console.error('Forgot password failed:', error);
+    }
+  };
+
+  return (
+    <button 
+      onClick={() => 
+        handleForgotPassword('user@example.com')
+      }
+      disabled={isLoading}
+    >
+      Gửi email đặt lại mật khẩu
+    </button>
+  );
+};
+
+// ============================================
+// Example 6: Reset Password
+// ============================================
+export const ResetPasswordExample = () => {
+  const { resetPassword, isLoading } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleResetPassword = async (
+    token: string,
+    password: string
+  ) => {
+    try {
+      await resetPassword({
+        token,
+        password,
+        confirmPassword: password
+      });
+      navigate('/login');
+    } catch (error) {
+      console.error('Reset password failed:', error);
+    }
+  };
+
+  return (
+    <button 
+      onClick={() => 
+        handleResetPassword(
+          'reset-token-123', 
+          'newpassword123'
+        )
+      }
+      disabled={isLoading}
+    >
+      Đặt lại mật khẩu
+    </button>
+  );
+};
+
+// ============================================
+// Example 7: Conditional Rendering by Role
+// ============================================
+export const RoleBasedComponentExample = () => {
+  const { userInfo } = useAuthStore();
+
+  return (
+    <div>
+      {userInfo?.role === 'admin' && (
+        <button>Admin Panel</button>
+      )}
+      {userInfo?.role === 'staff' && (
+        <button>Staff Tools</button>
+      )}
+      {userInfo?.role === 'customer' && (
+        <button>Customer Dashboard</button>
+      )}
+    </div>
+  );
+};
+
+// ============================================
+// Example 8: Auth State Check
+// ============================================
+export const AuthStateCheckExample = () => {
+  const { 
+    isAuthenticated, 
+    isLoading, 
+    token 
+  } = useAuthStore();
+
+  if (isLoading) {
+    return <p>Đang tải...</p>;
+  }
+
+  if (!isAuthenticated || !token) {
+    return <p>Bạn chưa đăng nhập</p>;
+  }
+
+  return <p>Bạn đã đăng nhập</p>;
+};
+
+// ============================================
+// Example 9: Update User Info
+// ============================================
+export const UpdateUserInfoExample = () => {
+  const { userInfo, setUser } = useAuthStore();
+
+  const handleUpdateProfile = () => {
+    if (userInfo) {
+      setUser({
+        ...userInfo,
+        name: 'New Name',
+        avatar: 'https://example.com/avatar.jpg'
+      });
+    }
+  };
+
+  return (
+    <button onClick={handleUpdateProfile}>
+      Cập nhật thông tin
+    </button>
+  );
+};
+
+// ============================================
+// Example 10: Clear Error
+// ============================================
+export const ErrorHandlingExample = () => {
+  const { error, clearError } = useAuthStore();
+
+  if (!error) return null;
+
+  return (
+    <div className="bg-red-100 p-4 rounded">
+      <p className="text-red-800">{error}</p>
+      <button 
+        onClick={clearError}
+        className="mt-2 text-sm text-red-600"
+      >
+        Đóng
+      </button>
+    </div>
+  );
+};
diff --git a/client/src/hooks/useDebounce.ts b/client/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..c8e3fc0f
--- /dev/null
+++ b/client/src/hooks/useDebounce.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook for debouncing values
+ * Delays updating the debounced value until after the delay period
+ * @param value - The value to debounce
+ * @param delay - Delay in milliseconds (default: 500ms)
+ * @returns The debounced value
+ */
+function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Set up the timeout
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Clean up the timeout if value changes before delay
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;
diff --git a/client/src/hooks/usePagePerformance.ts b/client/src/hooks/usePagePerformance.ts
new file mode 100644
index 00000000..db640797
--- /dev/null
+++ b/client/src/hooks/usePagePerformance.ts
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Custom hook for monitoring page performance
+ * Logs page load times in development mode
+ * @param pageName - Name of the page/component to monitor
+ */
+function usePagePerformance(pageName: string) {
+  const startTimeRef = useRef<number>(Date.now());
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      const loadTime = Date.now() - startTimeRef.current;
+      console.log(
+        `[Performance] ${pageName} loaded in ${loadTime}ms`
+      );
+
+      // Report Web Vitals if available
+      if ('performance' in window) {
+        const perfData = window.performance.timing;
+        const pageLoadTime =
+          perfData.loadEventEnd - perfData.navigationStart;
+        console.log(
+          `[Performance] ${pageName} total page load: ` +
+          `${pageLoadTime}ms`
+        );
+      }
+    }
+  }, [pageName]);
+
+  return null;
+}
+
+export default usePagePerformance;
diff --git a/client/src/main.tsx b/client/src/main.tsx
new file mode 100644
index 00000000..d9b0823b
--- /dev/null
+++ b/client/src/main.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import ErrorBoundary from 
+  './components/common/ErrorBoundary.tsx';
+import './styles/index.css';
+import './styles/datepicker.css';
+
+ReactDOM.createRoot(
+  document.getElementById('root')!
+).render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </React.StrictMode>,
+);
diff --git a/client/src/pages/AdminLayout.tsx b/client/src/pages/AdminLayout.tsx
new file mode 100644
index 00000000..6a409720
--- /dev/null
+++ b/client/src/pages/AdminLayout.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SidebarAdmin } from '../components/layout';
+
+const AdminLayout: React.FC = () => {
+  return (
+    <div className="flex h-screen bg-gray-100">
+      {/* Admin Sidebar */}
+      <SidebarAdmin />
+      
+      {/* Admin Content Area */}
+      <div className="flex-1 overflow-auto">
+        <div className="p-6">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminLayout;
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
new file mode 100644
index 00000000..d1c98409
--- /dev/null
+++ b/client/src/pages/HomePage.tsx
@@ -0,0 +1,410 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+  ArrowRight,
+  AlertCircle,
+} from 'lucide-react';
+import {
+  BannerCarousel,
+  BannerSkeleton,
+  RoomCard,
+  RoomCardSkeleton,
+  SearchRoomForm,
+} from '../components/rooms';
+import { 
+  bannerService, 
+  roomService 
+} from '../services/api';
+import type { Banner } from '../services/api/bannerService';
+import type { Room } from '../services/api/roomService';
+
+const HomePage: React.FC = () => {
+  const [banners, setBanners] = useState<Banner[]>([]);
+  const [featuredRooms, setFeaturedRooms] = useState<Room[]>([]);
+  const [newestRooms, setNewestRooms] = useState<Room[]>([]);
+  const [isLoadingBanners, setIsLoadingBanners] = 
+    useState(true);
+  const [isLoadingRooms, setIsLoadingRooms] = useState(true);
+  const [isLoadingNewest, setIsLoadingNewest] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch banners
+  useEffect(() => {
+    const fetchBanners = async () => {
+      try {
+        setIsLoadingBanners(true);
+        const response = await bannerService
+          .getBannersByPosition('home');
+        
+        // Handle both response formats
+        if (
+          response.success || 
+          response.status === 'success'
+        ) {
+          setBanners(response.data?.banners || []);
+        }
+      } catch (err: any) {
+        console.error('Error fetching banners:', err);
+        // Don't show error for banners, just use fallback
+        // Silently fail - banners are not critical for page functionality
+      } finally {
+        setIsLoadingBanners(false);
+      }
+    };
+
+    fetchBanners();
+  }, []);
+
+  // Fetch featured rooms
+  useEffect(() => {
+    const fetchFeaturedRooms = async () => {
+      try {
+        setIsLoadingRooms(true);
+        setError(null);
+        const response = await roomService.getFeaturedRooms({
+          featured: true,
+          limit: 6,
+        });
+
+        // Handle both response formats
+        if (
+          response.success || 
+          response.status === 'success'
+        ) {
+          const rooms = response.data?.rooms || [];
+          setFeaturedRooms(rooms);
+          // If no rooms found but request succeeded, don't show error
+          if (rooms.length === 0) {
+            setError(null);
+          }
+        } else {
+          // Response didn't indicate success
+          setError(
+            response.message || 
+            'Unable to load room list'
+          );
+        }
+      } catch (err: any) {
+        console.error('Error fetching rooms:', err);
+        
+        // Check if it's a rate limit error
+        if (err.response?.status === 429) {
+          setError(
+            'Too many requests. Please wait a moment and refresh the page.'
+          );
+        } else {
+          setError(
+            err.response?.data?.message ||
+            err.message ||
+            'Unable to load room list'
+          );
+        }
+      } finally {
+        setIsLoadingRooms(false);
+      }
+    };
+
+    fetchFeaturedRooms();
+  }, []);
+
+  // Fetch newest rooms
+  useEffect(() => {
+    const fetchNewestRooms = async () => {
+      try {
+        setIsLoadingNewest(true);
+        const response = await roomService.getRooms({
+          page: 1,
+          limit: 6,
+          sort: 'newest',
+        });
+
+        // Handle both response formats
+        if (
+          response.success || 
+          response.status === 'success'
+        ) {
+          setNewestRooms(response.data?.rooms || []);
+        }
+      } catch (err: any) {
+        console.error('Error fetching newest rooms:', err);
+        // Silently fail for newest rooms section - not critical
+      } finally {
+        setIsLoadingNewest(false);
+      }
+    };
+
+    fetchNewestRooms();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Banner Section */}
+      <section className="container mx-auto px-4 pb-8">
+        {isLoadingBanners ? (
+          <BannerSkeleton />
+        ) : (
+          <BannerCarousel banners={banners} />
+        )}
+      </section>
+
+      {/* Search Section */}
+      <section className="container mx-auto px-4 py-8">
+        <SearchRoomForm />
+      </section>
+
+      {/* Featured Rooms Section */}
+      <section className="container mx-auto px-4 py-12">
+        {/* Section Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-3">
+            <div>
+              <h2 
+                className="text-3xl font-bold 
+                  text-gray-900"
+              >
+                Featured Rooms
+              </h2>
+            </div>
+          </div>
+
+          <Link
+            to="/rooms"
+            className="hidden md:flex items-center gap-2 
+              text-indigo-600 hover:text-indigo-700 
+              font-semibold transition-colors"
+          >
+            View All Rooms
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+
+        {/* Loading State */}
+        {isLoadingRooms && (
+          <div 
+            className="grid grid-cols-1 md:grid-cols-2 
+              lg:grid-cols-3 gap-6"
+          >
+            {[...Array(6)].map((_, index) => (
+              <RoomCardSkeleton key={index} />
+            ))}
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !isLoadingRooms && (
+          <div 
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-6 text-center"
+          >
+            <AlertCircle 
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3" 
+            />
+            <p className="text-red-700 font-medium">
+              {error}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="mt-4 px-4 py-2 bg-red-600 
+                text-white rounded-lg 
+                hover:bg-red-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+
+        {/* Rooms Grid */}
+        {!isLoadingRooms && !error && (
+          <>
+            {featuredRooms.length > 0 ? (
+              <div 
+                className="grid grid-cols-1 md:grid-cols-2 
+                  lg:grid-cols-3 gap-6"
+              >
+                {featuredRooms.map((room) => (
+                  <RoomCard key={room.id} room={room} />
+                ))}
+              </div>
+            ) : (
+              <div 
+                className="bg-gray-100 rounded-lg 
+                  p-12 text-center"
+              >
+                <p className="text-gray-600 text-lg">
+                  No featured rooms available
+                </p>
+              </div>
+            )}
+
+            {/* View All Button (Mobile) */}
+            {featuredRooms.length > 0 && (
+              <div className="mt-8 text-center md:hidden">
+                <Link
+                  to="/rooms"
+                  className="inline-flex items-center gap-2 
+                    bg-indigo-600 text-white px-6 py-3 
+                    rounded-lg hover:bg-indigo-700 
+                    transition-colors font-semibold"
+                >
+                  View All Rooms
+                  <ArrowRight className="w-5 h-5" />
+                </Link>
+              </div>
+            )}
+          </>
+        )}
+      </section>
+
+      {/* Newest Rooms Section */}
+      <section className="container mx-auto px-4 py-12">
+        {/* Section Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-3">
+            <div>
+              <h2 
+                className="text-3xl font-bold 
+                  text-gray-900"
+              >
+                Newest Rooms
+              </h2>
+            </div>
+          </div>
+
+          <Link
+            to="/rooms"
+            className="hidden md:flex items-center gap-2 
+              text-indigo-600 hover:text-indigo-700 
+              font-semibold transition-colors"
+          >
+            View All Rooms
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+
+        {/* Loading State */}
+        {isLoadingNewest && (
+          <div 
+            className="grid grid-cols-1 md:grid-cols-2 
+              lg:grid-cols-3 gap-6"
+          >
+            {[...Array(6)].map((_, index) => (
+              <RoomCardSkeleton key={index} />
+            ))}
+          </div>
+        )}
+
+        {/* Rooms Grid */}
+        {!isLoadingNewest && (
+          <>
+            {newestRooms.length > 0 ? (
+              <div 
+                className="grid grid-cols-1 md:grid-cols-2 
+                  lg:grid-cols-3 gap-6"
+              >
+                {newestRooms.map((room) => (
+                  <RoomCard key={room.id} room={room} />
+                ))}
+              </div>
+            ) : (
+              <div 
+                className="bg-gray-100 rounded-lg 
+                  p-12 text-center"
+              >
+                <p className="text-gray-600 text-lg">
+                  No new rooms available
+                </p>
+              </div>
+            )}
+
+            {/* View All Button (Mobile) */}
+            {newestRooms.length > 0 && (
+              <div className="mt-8 text-center md:hidden">
+                <Link
+                  to="/rooms"
+                  className="inline-flex items-center gap-2 
+                    bg-indigo-600 text-white px-6 py-3 
+                    rounded-lg hover:bg-indigo-700 
+                    transition-colors font-semibold"
+                >
+                  View All Rooms
+                  <ArrowRight className="w-5 h-5" />
+                </Link>
+              </div>
+            )}
+          </>
+        )}
+      </section>
+
+      {/* Features Section */}
+      <section 
+        className="container mx-auto px-4 py-12 
+          bg-white rounded-xl shadow-sm mx-4"
+      >
+        <div 
+          className="grid grid-cols-1 md:grid-cols-3 
+            gap-8"
+        >
+          <div className="text-center">
+            <div 
+              className="w-16 h-16 bg-indigo-100 
+                rounded-full flex items-center 
+                justify-center mx-auto mb-4"
+            >
+              <span className="text-3xl">🏨</span>
+            </div>
+            <h3 
+              className="text-xl font-semibold mb-2 
+                text-gray-900"
+            >
+              Easy Booking
+            </h3>
+            <p className="text-gray-600">
+              Search and book rooms with just a few clicks
+            </p>
+          </div>
+
+          <div className="text-center">
+            <div 
+              className="w-16 h-16 bg-green-100 
+                rounded-full flex items-center 
+                justify-center mx-auto mb-4"
+            >
+              <span className="text-3xl">💰</span>
+            </div>
+            <h3 
+              className="text-xl font-semibold mb-2 
+                text-gray-900"
+            >
+              Best Prices
+            </h3>
+            <p className="text-gray-600">
+              Best price guarantee in the market
+            </p>
+          </div>
+
+          <div className="text-center">
+            <div 
+              className="w-16 h-16 bg-blue-100 
+                rounded-full flex items-center 
+                justify-center mx-auto mb-4"
+            >
+              <span className="text-3xl">🎧</span>
+            </div>
+            <h3 
+              className="text-xl font-semibold mb-2 
+                text-gray-900"
+            >
+              24/7 Support
+            </h3>
+            <p className="text-gray-600">
+              Support team always ready to serve
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/client/src/pages/admin/BookingManagementPage.tsx b/client/src/pages/admin/BookingManagementPage.tsx
new file mode 100644
index 00000000..d13b5a34
--- /dev/null
+++ b/client/src/pages/admin/BookingManagementPage.tsx
@@ -0,0 +1,314 @@
+import React, { useEffect, useState } from 'react';
+import { Search, Eye, XCircle, CheckCircle } from 'lucide-react';
+import { bookingService, Booking } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const BookingManagementPage: React.FC = () => {
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [filters, setFilters] = useState({
+    search: '',
+    status: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchBookings();
+  }, [filters, currentPage]);
+
+  const fetchBookings = async () => {
+    try {
+      setLoading(true);
+      const response = await bookingService.getAllBookings({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setBookings(response.data.bookings);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load bookings list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdateStatus = async (id: number, status: string) => {
+    try {
+      await bookingService.updateBooking(id, { status } as any);
+      toast.success('Status updated successfully');
+      fetchBookings();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to update status');
+    }
+  };
+
+  const handleCancelBooking = async (id: number) => {
+    if (!window.confirm('Are you sure you want to cancel this booking?')) return;
+    
+    try {
+      await bookingService.cancelBooking(id);
+      toast.success('Booking cancelled successfully');
+      fetchBookings();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to cancel booking');
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Pending confirmation' },
+      confirmed: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Confirmed' },
+      checked_in: { bg: 'bg-green-100', text: 'text-green-800', label: 'Checked in' },
+      checked_out: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Checked out' },
+      cancelled: { bg: 'bg-red-100', text: 'text-red-800', label: 'Cancelled' },
+    };
+    const badge = badges[status] || badges.pending;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(amount);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Booking Management</h1>
+        <p className="text-gray-500 mt-1">Manage bookings</p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Search by booking number, guest name..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All statuses</option>
+            <option value="pending">Pending confirmation</option>
+            <option value="confirmed">Confirmed</option>
+            <option value="checked_in">Checked in</option>
+            <option value="checked_out">Checked out</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Booking Number
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Customer
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Room
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Check-in/out
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Total Price
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Status
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {bookings.map((booking) => (
+              <tr key={booking.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-blue-600">{booking.booking_number}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{booking.guest_info?.full_name || booking.user?.name}</div>
+                  <div className="text-xs text-gray-500">{booking.guest_info?.email || booking.user?.email}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    Room {booking.room?.room_number} - {booking.room?.room_type?.name}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {new Date(booking.check_in_date).toLocaleDateString('en-US')}
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    to {new Date(booking.check_out_date).toLocaleDateString('en-US')}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-semibold text-gray-900">
+                    {formatCurrency(booking.total_price)}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getStatusBadge(booking.status)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => {
+                      setSelectedBooking(booking);
+                      setShowDetailModal(true);
+                    }}
+                    className="text-blue-600 hover:text-blue-900 mr-2"
+                    title="View details"
+                  >
+                    <Eye className="w-5 h-5" />
+                  </button>
+                  {booking.status === 'pending' && (
+                    <>
+                      <button
+                        onClick={() => handleUpdateStatus(booking.id, 'confirmed')}
+                        className="text-green-600 hover:text-green-900 mr-2"
+                        title="Confirm"
+                      >
+                        <CheckCircle className="w-5 h-5" />
+                      </button>
+                      <button
+                        onClick={() => handleCancelBooking(booking.id)}
+                        className="text-red-600 hover:text-red-900"
+                        title="Cancel"
+                      >
+                        <XCircle className="w-5 h-5" />
+                      </button>
+                    </>
+                  )}
+                  {booking.status === 'confirmed' && (
+                    <button
+                      onClick={() => handleUpdateStatus(booking.id, 'checked_in')}
+                      className="text-green-600 hover:text-green-900"
+                      title="Check-in"
+                    >
+                      <CheckCircle className="w-5 h-5" />
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+
+      {/* Detail Modal */}
+      {showDetailModal && selectedBooking && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">Booking Details</h2>
+              <button onClick={() => setShowDetailModal(false)} className="text-gray-500 hover:text-gray-700">
+                ✕
+              </button>
+            </div>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Booking Number</label>
+                  <p className="text-lg font-semibold">{selectedBooking.booking_number}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Status</label>
+                  <div className="mt-1">{getStatusBadge(selectedBooking.status)}</div>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Customer Information</label>
+                <p className="text-gray-900">{selectedBooking.guest_info?.full_name || selectedBooking.user?.name}</p>
+                <p className="text-gray-600">{selectedBooking.guest_info?.email || selectedBooking.user?.email}</p>
+                <p className="text-gray-600">{selectedBooking.guest_info?.phone || selectedBooking.user?.phone}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Room Information</label>
+                <p className="text-gray-900">Room {selectedBooking.room?.room_number} - {selectedBooking.room?.room_type?.name}</p>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Check-in Date</label>
+                  <p className="text-gray-900">{new Date(selectedBooking.check_in_date).toLocaleDateString('en-US')}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Check-out Date</label>
+                  <p className="text-gray-900">{new Date(selectedBooking.check_out_date).toLocaleDateString('en-US')}</p>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Number of Guests</label>
+                <p className="text-gray-900">{selectedBooking.guest_count} guest(s)</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Total Price</label>
+                <p className="text-2xl font-bold text-green-600">{formatCurrency(selectedBooking.total_price)}</p>
+              </div>
+              {selectedBooking.notes && (
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Notes</label>
+                  <p className="text-gray-900">{selectedBooking.notes}</p>
+                </div>
+              )}
+            </div>
+            <div className="mt-6 flex justify-end">
+              <button
+                onClick={() => setShowDetailModal(false)}
+                className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+              >
+                Đóng
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BookingManagementPage;
diff --git a/client/src/pages/admin/CheckInPage.tsx b/client/src/pages/admin/CheckInPage.tsx
new file mode 100644
index 00000000..95a7babf
--- /dev/null
+++ b/client/src/pages/admin/CheckInPage.tsx
@@ -0,0 +1,402 @@
+import React, { useState } from 'react';
+import { Search, User, Hotel, CheckCircle, AlertCircle } from 'lucide-react';
+import { bookingService, Booking } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+
+interface GuestInfo {
+  name: string;
+  id_number: string;
+  phone: string;
+}
+
+const CheckInPage: React.FC = () => {
+  const [bookingNumber, setBookingNumber] = useState('');
+  const [booking, setBooking] = useState<Booking | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [actualRoomNumber, setActualRoomNumber] = useState('');
+  const [guests, setGuests] = useState<GuestInfo[]>([{ name: '', id_number: '', phone: '' }]);
+  const [extraPersons, setExtraPersons] = useState(0);
+  const [children, setChildren] = useState(0);
+  const [additionalFee, setAdditionalFee] = useState(0);
+
+  const handleSearch = async () => {
+    if (!bookingNumber.trim()) {
+      toast.error('Please enter booking number');
+      return;
+    }
+
+    try {
+      setSearching(true);
+      const response = await bookingService.checkBookingByNumber(bookingNumber);
+      setBooking(response.data.booking);
+      setActualRoomNumber(response.data.booking.room?.room_number || '');
+      toast.success('Booking found');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Booking not found');
+      setBooking(null);
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  const handleAddGuest = () => {
+    setGuests([...guests, { name: '', id_number: '', phone: '' }]);
+  };
+
+  const handleRemoveGuest = (index: number) => {
+    if (guests.length > 1) {
+      setGuests(guests.filter((_, i) => i !== index));
+    }
+  };
+
+  const handleGuestChange = (index: number, field: keyof GuestInfo, value: string) => {
+    const newGuests = [...guests];
+    newGuests[index][field] = value;
+    setGuests(newGuests);
+  };
+
+  const calculateAdditionalFee = () => {
+    // Logic to calculate additional fees: children and extra person
+    const extraPersonFee = extraPersons * 200000; // 200k/person
+    const childrenFee = children * 100000; // 100k/child
+    const total = extraPersonFee + childrenFee;
+    setAdditionalFee(total);
+    return total;
+  };
+
+  const handleCheckIn = async () => {
+    if (!booking) return;
+
+    // Validate
+    if (!actualRoomNumber.trim()) {
+      toast.error('Please enter actual room number');
+      return;
+    }
+
+    const mainGuest = guests[0];
+    if (!mainGuest.name || !mainGuest.id_number || !mainGuest.phone) {
+      toast.error('Please fill in all main guest information');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      // Calculate additional fee
+      calculateAdditionalFee();
+
+      await bookingService.updateBooking(booking.id, {
+        status: 'checked_in',
+        // Can send additional data about guests, room_number, additional_fee
+      } as any);
+
+      toast.success('Check-in successful');
+      
+      // Reset form
+      setBooking(null);
+      setBookingNumber('');
+      setActualRoomNumber('');
+      setGuests([{ name: '', id_number: '', phone: '' }]);
+      setExtraPersons(0);
+      setChildren(0);
+      setAdditionalFee(0);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred during check-in');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Check-in</h1>
+          <p className="text-gray-500 mt-1">Customer check-in process</p>
+        </div>
+      </div>
+
+      {/* Search Booking */}
+      <div className="bg-white p-6 rounded-lg shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">1. Search booking</h2>
+        <div className="flex gap-4">
+          <div className="flex-1 relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              value={bookingNumber}
+              onChange={(e) => setBookingNumber(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
+              placeholder="Enter booking number"
+              className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <button
+            onClick={handleSearch}
+            disabled={searching}
+            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 flex items-center gap-2"
+          >
+            {searching ? 'Searching...' : 'Search'}
+          </button>
+        </div>
+      </div>
+
+      {/* Booking Info */}
+      {booking && (
+        <>
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <CheckCircle className="w-5 h-5 text-green-600" />
+              2. Booking Information
+            </h2>
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Booking Number:</span>
+                    <span className="font-semibold">{booking.booking_number}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Customer:</span>
+                    <span className="font-semibold">{booking.user?.full_name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Email:</span>
+                    <span>{booking.user?.email}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Phone:</span>
+                    <span>{booking.user?.phone_number || 'N/A'}</span>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Room Type:</span>
+                    <span className="font-semibold">{booking.room?.room_type?.name || 'N/A'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Check-in:</span>
+                    <span>{booking.check_in_date ? new Date(booking.check_in_date).toLocaleDateString('en-US') : 'N/A'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Check-out:</span>
+                    <span>{booking.check_out_date ? new Date(booking.check_out_date).toLocaleDateString('en-US') : 'N/A'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Number of Guests:</span>
+                    <span>{booking.guest_count} guest(s)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {booking.status !== 'confirmed' && (
+              <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-2">
+                <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5" />
+                <div>
+                  <p className="text-sm text-yellow-800 font-medium">Warning</p>
+                  <p className="text-sm text-yellow-700">
+                    Booking status: <span className="font-semibold">{booking.status}</span>. 
+                    Only check-in confirmed bookings.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Assign Room */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <Hotel className="w-5 h-5 text-blue-600" />
+              3. Assign Actual Room Number
+            </h2>
+            <div className="max-w-md">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Room Number <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={actualRoomNumber}
+                onChange={(e) => setActualRoomNumber(e.target.value)}
+                placeholder="VD: 101, 202, 305"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                Enter the actual room number to assign to the guest
+              </p>
+            </div>
+          </div>
+
+          {/* Guest Information */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <User className="w-5 h-5 text-purple-600" />
+              4. Guest Information
+            </h2>
+            <div className="space-y-4">
+              {guests.map((guest, index) => (
+                <div key={index} className="p-4 border border-gray-200 rounded-lg">
+                  <div className="flex justify-between items-center mb-3">
+                    <h3 className="font-medium">
+                      {index === 0 ? 'Main Guest' : `Guest ${index + 1}`}
+                      {index === 0 && <span className="text-red-500 ml-1">*</span>}
+                    </h3>
+                    {index > 0 && (
+                      <button
+                        onClick={() => handleRemoveGuest(index)}
+                        className="text-red-600 hover:text-red-800 text-sm"
+                      >
+                        Remove
+                      </button>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div>
+                      <label className="block text-sm text-gray-700 mb-1">
+                        Full Name {index === 0 && <span className="text-red-500">*</span>}
+                      </label>
+                      <input
+                        type="text"
+                        value={guest.name}
+                        onChange={(e) => handleGuestChange(index, 'name', e.target.value)}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        placeholder="Nguyễn Văn A"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm text-gray-700 mb-1">
+                        ID Number {index === 0 && <span className="text-red-500">*</span>}
+                      </label>
+                      <input
+                        type="text"
+                        value={guest.id_number}
+                        onChange={(e) => handleGuestChange(index, 'id_number', e.target.value)}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        placeholder="001234567890"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm text-gray-700 mb-1">
+                        Phone Number {index === 0 && <span className="text-red-500">*</span>}
+                      </label>
+                      <input
+                        type="tel"
+                        value={guest.phone}
+                        onChange={(e) => handleGuestChange(index, 'phone', e.target.value)}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        placeholder="0912345678"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+              <button
+                onClick={handleAddGuest}
+                className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+              >
+                + Add Guest
+              </button>
+            </div>
+          </div>
+
+          {/* Additional Charges */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4">5. Additional Fees (if any)</h2>
+            <div className="grid grid-cols-3 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Extra Persons
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  value={extraPersons}
+                  onChange={(e) => {
+                    setExtraPersons(parseInt(e.target.value) || 0);
+                    calculateAdditionalFee();
+                  }}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                />
+                <p className="text-xs text-gray-500 mt-1">200,000 VND/person</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Number of Children
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  value={children}
+                  onChange={(e) => {
+                    setChildren(parseInt(e.target.value) || 0);
+                    calculateAdditionalFee();
+                  }}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                />
+                <p className="text-xs text-gray-500 mt-1">100,000 VND/child</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Total Additional Fee
+                </label>
+                <div className="px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-lg font-semibold text-blue-600">
+                  {formatCurrency(calculateAdditionalFee())}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Summary & Action */}
+          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200">
+            <div className="flex justify-between items-center">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900">Confirm Check-in</h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  Guest: <span className="font-medium">{booking.user?.full_name}</span> | 
+                  Room: <span className="font-medium">{actualRoomNumber || 'Not assigned'}</span>
+                  {additionalFee > 0 && (
+                    <> | Additional Fee: <span className="font-medium text-red-600">{formatCurrency(additionalFee)}</span></>
+                  )}
+                </p>
+              </div>
+              <button
+                onClick={handleCheckIn}
+                disabled={!actualRoomNumber || !guests[0].name || booking.status !== 'confirmed'}
+                className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold flex items-center gap-2"
+              >
+                <CheckCircle className="w-5 h-5" />
+                Confirm Check-in
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Empty State */}
+      {!booking && !searching && (
+        <div className="bg-gray-50 rounded-lg p-12 text-center">
+          <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
+            No booking selected
+          </h3>
+          <p className="text-gray-600">
+            Please enter booking number above to start check-in process
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CheckInPage;
diff --git a/client/src/pages/admin/CheckOutPage.tsx b/client/src/pages/admin/CheckOutPage.tsx
new file mode 100644
index 00000000..e073f667
--- /dev/null
+++ b/client/src/pages/admin/CheckOutPage.tsx
@@ -0,0 +1,448 @@
+import React, { useState } from 'react';
+import { Search, FileText, DollarSign, CreditCard, Printer, CheckCircle } from 'lucide-react';
+import { bookingService, Booking } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+
+interface ServiceItem {
+  service_name: string;
+  quantity: number;
+  price: number;
+  total: number;
+}
+
+const CheckOutPage: React.FC = () => {
+  const [bookingNumber, setBookingNumber] = useState('');
+  const [booking, setBooking] = useState<Booking | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [services, setServices] = useState<ServiceItem[]>([]);
+  const [paymentMethod, setPaymentMethod] = useState<'cash' | 'bank_transfer' | 'credit_card'>('cash');
+  const [discount, setDiscount] = useState(0);
+  const [showInvoice, setShowInvoice] = useState(false);
+
+  const handleSearch = async () => {
+    if (!bookingNumber.trim()) {
+      toast.error('Please enter booking number');
+      return;
+    }
+
+    try {
+      setSearching(true);
+      const response = await bookingService.checkBookingByNumber(bookingNumber);
+      const foundBooking = response.data.booking;
+      
+      if (foundBooking.status !== 'checked_in') {
+        toast.warning('Only checked-in bookings can be checked out');
+      }
+      
+      setBooking(foundBooking);
+      
+      // Mock services data - in production will fetch from API
+      setServices([
+        { service_name: 'Laundry', quantity: 2, price: 50000, total: 100000 },
+        { service_name: 'Minibar', quantity: 1, price: 150000, total: 150000 },
+      ]);
+      
+      toast.success('Booking found');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Booking not found');
+      setBooking(null);
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  const calculateRoomFee = () => {
+    if (!booking) return 0;
+    return booking.total_price || 0;
+  };
+
+  const calculateServiceFee = () => {
+    return services.reduce((sum, service) => sum + service.total, 0);
+  };
+
+  const calculateAdditionalFee = () => {
+    // Additional fees from check-in (children, extra person)
+    return 0; // In production will get from booking data
+  };
+
+  const calculateDeposit = () => {
+    // Deposit already paid
+    return booking?.total_price ? booking.total_price * 0.3 : 0;
+  };
+
+  const calculateSubtotal = () => {
+    return calculateRoomFee() + calculateServiceFee() + calculateAdditionalFee();
+  };
+
+  const calculateDiscount = () => {
+    return discount;
+  };
+
+  const calculateTotal = () => {
+    return calculateSubtotal() - calculateDiscount();
+  };
+
+  const calculateRemaining = () => {
+    return calculateTotal() - calculateDeposit();
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+  };
+
+  const handleCheckOut = async () => {
+    if (!booking) return;
+
+    if (calculateRemaining() < 0) {
+      toast.error('Invalid refund amount');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      
+      // Update booking status
+      await bookingService.updateBooking(booking.id, {
+        status: 'checked_out',
+      } as any);
+
+      // Create payment record (if needed)
+      // await paymentService.createPayment({...});
+
+      toast.success('Check-out successful');
+      setShowInvoice(true);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred during check-out');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePrintInvoice = () => {
+    window.print();
+  };
+
+  const resetForm = () => {
+    setBooking(null);
+    setBookingNumber('');
+    setServices([]);
+    setDiscount(0);
+    setPaymentMethod('cash');
+    setShowInvoice(false);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Check-out</h1>
+          <p className="text-gray-500 mt-1">Payment and check-out process</p>
+        </div>
+      </div>
+
+      {/* Search Booking */}
+      {!showInvoice && (
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <h2 className="text-lg font-semibold mb-4">1. Search booking</h2>
+          <div className="flex gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                value={bookingNumber}
+                onChange={(e) => setBookingNumber(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
+                placeholder="Enter booking number or room number"
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            <button
+              onClick={handleSearch}
+              disabled={searching}
+              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 flex items-center gap-2"
+            >
+              {searching ? 'Searching...' : 'Search'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Invoice */}
+      {booking && !showInvoice && (
+        <>
+          {/* Booking Info */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4">2. Booking information</h2>
+            <div className="grid grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Booking number:</span>
+                  <span className="font-semibold">{booking.booking_number}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Customer:</span>
+                  <span className="font-semibold">{booking.user?.full_name}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Room number:</span>
+                  <span className="font-semibold">{booking.room?.room_number}</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Check-in:</span>
+                  <span>{booking.check_in_date ? new Date(booking.check_in_date).toLocaleDateString('en-US') : 'N/A'}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Check-out:</span>
+                  <span>{booking.check_out_date ? new Date(booking.check_out_date).toLocaleDateString('en-US') : 'N/A'}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Nights:</span>
+                  <span>
+                    {booking.check_in_date && booking.check_out_date
+                      ? Math.ceil((new Date(booking.check_out_date).getTime() - new Date(booking.check_in_date).getTime()) / (1000 * 60 * 60 * 24))
+                      : 0} night(s)
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Bill Details */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <FileText className="w-5 h-5 text-blue-600" />
+              3. Invoice details
+            </h2>
+            
+            {/* Room Fee */}
+            <div className="mb-4">
+              <h3 className="font-medium text-gray-700 mb-2">Room fee</h3>
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <div className="flex justify-between">
+                  <span>{booking.room?.room_type?.name || 'Room'}</span>
+                  <span className="font-semibold">{formatCurrency(calculateRoomFee())}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Service Fee */}
+            {services.length > 0 && (
+              <div className="mb-4">
+                <h3 className="font-medium text-gray-700 mb-2">Services used</h3>
+                <div className="bg-gray-50 p-4 rounded-lg space-y-2">
+                  {services.map((service, index) => (
+                    <div key={index} className="flex justify-between text-sm">
+                      <span>
+                        {service.service_name} (x{service.quantity})
+                      </span>
+                      <span>{formatCurrency(service.total)}</span>
+                    </div>
+                  ))}
+                  <div className="pt-2 border-t border-gray-200 flex justify-between font-medium">
+                    <span>Total services:</span>
+                    <span>{formatCurrency(calculateServiceFee())}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Additional Fee */}
+            {calculateAdditionalFee() > 0 && (
+              <div className="mb-4">
+                <h3 className="font-medium text-gray-700 mb-2">Additional fees</h3>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <div className="flex justify-between">
+                    <span>Extra person/children fee</span>
+                    <span className="font-semibold">{formatCurrency(calculateAdditionalFee())}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Discount */}
+            <div className="mb-4">
+              <h3 className="font-medium text-gray-700 mb-2">Discount</h3>
+              <div className="flex gap-4">
+                <input
+                  type="number"
+                  value={discount}
+                  onChange={(e) => setDiscount(parseFloat(e.target.value) || 0)}
+                  placeholder="Enter discount amount"
+                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+            </div>
+
+            {/* Summary */}
+            <div className="border-t-2 border-gray-300 pt-4 space-y-2">
+              <div className="flex justify-between text-lg">
+                <span>Subtotal:</span>
+                <span className="font-semibold">{formatCurrency(calculateSubtotal())}</span>
+              </div>
+              {discount > 0 && (
+                <div className="flex justify-between text-red-600">
+                  <span>Discount:</span>
+                  <span>-{formatCurrency(discount)}</span>
+                </div>
+              )}
+              <div className="flex justify-between text-xl font-bold text-blue-600">
+                <span>Total:</span>
+                <span>{formatCurrency(calculateTotal())}</span>
+              </div>
+              <div className="flex justify-between text-gray-600">
+                <span>Deposit paid:</span>
+                <span>-{formatCurrency(calculateDeposit())}</span>
+              </div>
+              <div className="flex justify-between text-2xl font-bold text-green-600 pt-2 border-t border-gray-200">
+                <span>Remaining payment:</span>
+                <span>{formatCurrency(calculateRemaining())}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Payment Method */}
+          <div className="bg-white p-6 rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <CreditCard className="w-5 h-5 text-green-600" />
+              4. Payment method
+            </h2>
+            <div className="grid grid-cols-3 gap-4">
+              <button
+                onClick={() => setPaymentMethod('cash')}
+                className={`p-4 border-2 rounded-lg text-center transition-all ${
+                  paymentMethod === 'cash'
+                    ? 'border-blue-600 bg-blue-50 text-blue-600'
+                    : 'border-gray-300 hover:border-gray-400'
+                }`}
+              >
+                <DollarSign className="w-8 h-8 mx-auto mb-2" />
+                <div className="font-medium">Cash</div>
+              </button>
+              <button
+                onClick={() => setPaymentMethod('bank_transfer')}
+                className={`p-4 border-2 rounded-lg text-center transition-all ${
+                  paymentMethod === 'bank_transfer'
+                    ? 'border-blue-600 bg-blue-50 text-blue-600'
+                    : 'border-gray-300 hover:border-gray-400'
+                }`}
+              >
+                <CreditCard className="w-8 h-8 mx-auto mb-2" />
+                <div className="font-medium">Bank transfer</div>
+              </button>
+              <button
+                onClick={() => setPaymentMethod('credit_card')}
+                className={`p-4 border-2 rounded-lg text-center transition-all ${
+                  paymentMethod === 'credit_card'
+                    ? 'border-blue-600 bg-blue-50 text-blue-600'
+                    : 'border-gray-300 hover:border-gray-400'
+                }`}
+              >
+                <CreditCard className="w-8 h-8 mx-auto mb-2" />
+                <div className="font-medium">Credit card</div>
+              </button>
+            </div>
+          </div>
+
+          {/* Action */}
+          <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-lg border border-green-200">
+            <div className="flex justify-between items-center">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900">Confirm check-out</h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  Total payment: <span className="font-bold text-green-600 text-lg">{formatCurrency(calculateRemaining())}</span>
+                </p>
+              </div>
+              <button
+                onClick={handleCheckOut}
+                disabled={booking.status !== 'checked_in'}
+                className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold flex items-center gap-2"
+              >
+                <CheckCircle className="w-5 h-5" />
+                Confirm payment & Check-out
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Invoice Display */}
+      {showInvoice && booking && (
+        <div className="bg-white p-8 rounded-lg shadow-lg">
+          <div className="text-center mb-6">
+            <h2 className="text-2xl font-bold text-gray-900">PAYMENT INVOICE</h2>
+            <p className="text-gray-600 mt-1">Check-out successful</p>
+          </div>
+
+          <div className="border-t-2 border-b-2 border-gray-300 py-6 mb-6">
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="text-sm text-gray-600">Booking number:</p>
+                <p className="font-semibold">{booking.booking_number}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Check-out date:</p>
+                <p className="font-semibold">{new Date().toLocaleString('en-US')}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Customer:</p>
+                <p className="font-semibold">{booking.user?.full_name}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Payment method:</p>
+                <p className="font-semibold">
+                  {paymentMethod === 'cash' ? 'Cash' : paymentMethod === 'bank_transfer' ? 'Bank transfer' : 'Credit card'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <div className="flex justify-between text-xl font-bold text-green-600 mb-4">
+              <span>Total payment:</span>
+              <span>{formatCurrency(calculateRemaining())}</span>
+            </div>
+          </div>
+
+          <div className="flex gap-4">
+            <button
+              onClick={handlePrintInvoice}
+              className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2"
+            >
+              <Printer className="w-5 h-5" />
+              Print invoice
+            </button>
+            <button
+              onClick={resetForm}
+              className="flex-1 px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700"
+            >
+              Complete
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!booking && !searching && !showInvoice && (
+        <div className="bg-gray-50 rounded-lg p-12 text-center">
+          <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
+            No booking selected
+          </h3>
+          <p className="text-gray-600">
+            Please enter booking number to start check-out process
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CheckOutPage;
diff --git a/client/src/pages/admin/DashboardPage.tsx b/client/src/pages/admin/DashboardPage.tsx
new file mode 100644
index 00000000..e5fdb892
--- /dev/null
+++ b/client/src/pages/admin/DashboardPage.tsx
@@ -0,0 +1,290 @@
+import React, { useEffect, useState } from 'react';
+import { 
+  BarChart3, 
+  Users, 
+  Hotel, 
+  DollarSign,
+  Calendar,
+  TrendingUp
+} from 'lucide-react';
+import { reportService, ReportData } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+
+const DashboardPage: React.FC = () => {
+  const [stats, setStats] = useState<ReportData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [dateRange, setDateRange] = useState({
+    from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+    to: new Date().toISOString().split('T')[0],
+  });
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, [dateRange]);
+
+  const fetchDashboardData = async () => {
+    try {
+      setLoading(true);
+      const response = await reportService.getReports({
+        from: dateRange.from,
+        to: dateRange.to,
+      });
+      setStats(response.data);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load dashboard data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(amount);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <p className="text-gray-500 mt-1">Hotel operations overview</p>
+        </div>
+        
+        {/* Date Range Filter */}
+        <div className="flex gap-3 items-center">
+          <input
+            type="date"
+            value={dateRange.from}
+            onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+            className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          />
+          <span className="text-gray-500">to</span>
+          <input
+            type="date"
+            value={dateRange.to}
+            onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+            className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {/* Total Revenue */}
+        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-500 text-sm font-medium">Total Revenue</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">
+                {formatCurrency(stats?.total_revenue || 0)}
+              </p>
+            </div>
+            <div className="bg-green-100 p-3 rounded-full">
+              <DollarSign className="w-6 h-6 text-green-600" />
+            </div>
+          </div>
+          <div className="flex items-center mt-4 text-sm">
+            <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
+            <span className="text-green-600 font-medium">+12.5%</span>
+            <span className="text-gray-500 ml-2">compared to last month</span>
+          </div>
+        </div>
+
+        {/* Total Bookings */}
+        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-500 text-sm font-medium">Total Bookings</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">
+                {stats?.total_bookings || 0}
+              </p>
+            </div>
+            <div className="bg-blue-100 p-3 rounded-full">
+              <Calendar className="w-6 h-6 text-blue-600" />
+            </div>
+          </div>
+          <div className="flex items-center mt-4 text-sm">
+            <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
+            <span className="text-green-600 font-medium">+8.2%</span>
+            <span className="text-gray-500 ml-2">compared to last month</span>
+          </div>
+        </div>
+
+        {/* Available Rooms */}
+        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-500 text-sm font-medium">Available Rooms</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">
+                {stats?.available_rooms || 0}
+              </p>
+            </div>
+            <div className="bg-purple-100 p-3 rounded-full">
+              <Hotel className="w-6 h-6 text-purple-600" />
+            </div>
+          </div>
+          <div className="flex items-center mt-4 text-sm">
+            <span className="text-gray-500">
+              {stats?.occupied_rooms || 0} rooms in use
+            </span>
+          </div>
+        </div>
+
+        {/* Total Customers */}
+        <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-500 text-sm font-medium">Customers</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">
+                {stats?.total_customers || 0}
+              </p>
+            </div>
+            <div className="bg-orange-100 p-3 rounded-full">
+              <Users className="w-6 h-6 text-orange-600" />
+            </div>
+          </div>
+          <div className="flex items-center mt-4 text-sm">
+            <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
+            <span className="text-green-600 font-medium">+15.3%</span>
+            <span className="text-gray-500 ml-2">new customers</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Revenue Chart */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-gray-900">Daily Revenue</h2>
+            <BarChart3 className="w-5 h-5 text-gray-400" />
+          </div>
+          {stats?.revenue_by_date && stats.revenue_by_date.length > 0 ? (
+            <div className="space-y-3">
+              {stats.revenue_by_date.slice(0, 7).map((item, index) => (
+                <div key={index} className="flex items-center">
+                  <span className="text-sm text-gray-600 w-24">
+                    {new Date(item.date).toLocaleDateString('en-US')}
+                  </span>
+                  <div className="flex-1 mx-3">
+                    <div className="bg-gray-200 rounded-full h-4 overflow-hidden">
+                      <div
+                        className="bg-blue-500 h-4 rounded-full transition-all"
+                        style={{
+                          width: `${Math.min((item.revenue / (stats.revenue_by_date?.[0]?.revenue || 1)) * 100, 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <span className="text-sm font-semibold text-gray-900 w-32 text-right">
+                    {formatCurrency(item.revenue)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-center py-8">Không có dữ liệu</p>
+          )}
+        </div>
+
+        {/* Bookings by Status */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Status</h2>
+          {stats?.bookings_by_status ? (
+            <div className="space-y-4">
+              {Object.entries(stats.bookings_by_status).map(([status, count]) => {
+                const statusColors: Record<string, string> = {
+                  pending: 'bg-yellow-500',
+                  confirmed: 'bg-blue-500',
+                  checked_in: 'bg-green-500',
+                  checked_out: 'bg-gray-500',
+                  cancelled: 'bg-red-500',
+                };
+                const statusLabels: Record<string, string> = {
+                  pending: 'Pending confirmation',
+                  confirmed: 'Confirmed',
+                  checked_in: 'Checked in',
+                  checked_out: 'Checked out',
+                  cancelled: 'Cancelled',
+                };
+                return (
+                  <div key={status} className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-3 h-3 rounded-full ${statusColors[status]}`} />
+                      <span className="text-gray-700">{statusLabels[status]}</span>
+                    </div>
+                    <span className="font-semibold text-gray-900">{count}</span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-center py-8">Không có dữ liệu</p>
+          )}
+        </div>
+      </div>
+
+      {/* Top Rooms and Services */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Top Rooms */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">Top phòng được đặt</h2>
+          {stats?.top_rooms && stats.top_rooms.length > 0 ? (
+            <div className="space-y-3">
+              {stats.top_rooms.map((room, index) => (
+                <div key={room.room_id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <span className="flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded-full font-bold">
+                      {index + 1}
+                    </span>
+                    <div>
+                      <p className="font-medium text-gray-900">Phòng {room.room_number}</p>
+                      <p className="text-sm text-gray-500">{room.bookings} lượt đặt</p>
+                    </div>
+                  </div>
+                  <span className="font-semibold text-green-600">
+                    {formatCurrency(room.revenue)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-center py-8">Không có dữ liệu</p>
+          )}
+        </div>
+
+        {/* Service Usage */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">Dịch vụ được sử dụng</h2>
+          {stats?.service_usage && stats.service_usage.length > 0 ? (
+            <div className="space-y-3">
+              {stats.service_usage.map((service) => (
+                <div key={service.service_id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                  <div>
+                    <p className="font-medium text-gray-900">{service.service_name}</p>
+                    <p className="text-sm text-gray-500">{service.usage_count} lần sử dụng</p>
+                  </div>
+                  <span className="font-semibold text-purple-600">
+                    {formatCurrency(service.total_revenue)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-center py-8">Không có dữ liệu</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;
diff --git a/client/src/pages/admin/PaymentManagementPage.tsx b/client/src/pages/admin/PaymentManagementPage.tsx
new file mode 100644
index 00000000..74f86c5c
--- /dev/null
+++ b/client/src/pages/admin/PaymentManagementPage.tsx
@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from 'react';
+import { Search } from 'lucide-react';
+import { paymentService, Payment } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const PaymentManagementPage: React.FC = () => {
+  const [payments, setPayments] = useState<Payment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState({
+    search: '',
+    method: '',
+    from: '',
+    to: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchPayments();
+  }, [filters, currentPage]);
+
+  const fetchPayments = async () => {
+    try {
+      setLoading(true);
+      const response = await paymentService.getPayments({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setPayments(response.data.payments);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load payments list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(amount);
+  };
+
+  const getMethodBadge = (method: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      cash: { bg: 'bg-green-100', text: 'text-green-800', label: 'Cash' },
+      bank_transfer: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Bank transfer' },
+      credit_card: { bg: 'bg-purple-100', text: 'text-purple-800', label: 'Credit card' },
+    };
+    const badge = badges[method] || badges.cash;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Payment Management</h1>
+        <p className="text-gray-500 mt-1">Track payment transactions</p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Search..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.method}
+            onChange={(e) => setFilters({ ...filters, method: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All methods</option>
+            <option value="cash">Cash</option>
+            <option value="bank_transfer">Bank transfer</option>
+            <option value="credit_card">Credit card</option>
+          </select>
+          <input
+            type="date"
+            value={filters.from}
+            onChange={(e) => setFilters({ ...filters, from: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            placeholder="From date"
+          />
+          <input
+            type="date"
+            value={filters.to}
+            onChange={(e) => setFilters({ ...filters, to: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            placeholder="To date"
+          />
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Transaction ID
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Booking Number
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Customer
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Method
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Amount
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Payment Date
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {payments.map((payment) => (
+              <tr key={payment.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">{payment.transaction_id || `PAY-${payment.id}`}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-blue-600">{payment.booking?.booking_number}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{payment.booking?.user?.name}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getMethodBadge(payment.payment_method)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-semibold text-green-600">
+                    {formatCurrency(payment.amount)}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-500">
+                    {new Date(payment.payment_date || payment.createdAt).toLocaleDateString('en-US')}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+
+      {/* Summary Card */}
+      <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
+        <h3 className="text-lg font-semibold mb-2">Total Revenue</h3>
+        <p className="text-3xl font-bold">
+          {formatCurrency(payments.reduce((sum, p) => sum + p.amount, 0))}
+        </p>
+        <p className="text-sm mt-2 opacity-90">Total {payments.length} transactions</p>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentManagementPage;
diff --git a/client/src/pages/admin/PromotionManagementPage.tsx b/client/src/pages/admin/PromotionManagementPage.tsx
new file mode 100644
index 00000000..c93e0817
--- /dev/null
+++ b/client/src/pages/admin/PromotionManagementPage.tsx
@@ -0,0 +1,488 @@
+import React, { useEffect, useState } from 'react';
+import { Plus, Search, Edit, Trash2, X, Tag } from 'lucide-react';
+import { promotionService, Promotion } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const PromotionManagementPage: React.FC = () => {
+  const [promotions, setPromotions] = useState<Promotion[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingPromotion, setEditingPromotion] = useState<Promotion | null>(null);
+  const [filters, setFilters] = useState({
+    search: '',
+    status: '',
+    type: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  const [formData, setFormData] = useState({
+    code: '',
+    name: '',
+    description: '',
+    discount_type: 'percentage' as 'percentage' | 'fixed',
+    discount_value: 0,
+    min_booking_amount: 0,
+    max_discount_amount: 0,
+    start_date: '',
+    end_date: '',
+    usage_limit: 0,
+    status: 'active' as 'active' | 'inactive' | 'expired',
+  });
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchPromotions();
+  }, [filters, currentPage]);
+
+  const fetchPromotions = async () => {
+    try {
+      setLoading(true);
+      const response = await promotionService.getPromotions({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setPromotions(response.data.promotions);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load promotions list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingPromotion) {
+        await promotionService.updatePromotion(editingPromotion.id, formData);
+        toast.success('Promotion updated successfully');
+      } else {
+        await promotionService.createPromotion(formData);
+        toast.success('Promotion added successfully');
+      }
+      setShowModal(false);
+      resetForm();
+      fetchPromotions();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred');
+    }
+  };
+
+  const handleEdit = (promotion: Promotion) => {
+    setEditingPromotion(promotion);
+    setFormData({
+      code: promotion.code,
+      name: promotion.name,
+      description: promotion.description || '',
+      discount_type: promotion.discount_type,
+      discount_value: promotion.discount_value,
+      min_booking_amount: promotion.min_booking_amount || 0,
+      max_discount_amount: promotion.max_discount_amount || 0,
+      start_date: promotion.start_date?.split('T')[0] || '',
+      end_date: promotion.end_date?.split('T')[0] || '',
+      usage_limit: promotion.usage_limit || 0,
+      status: promotion.status,
+    });
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm('Are you sure you want to delete this promotion?')) return;
+    
+    try {
+      await promotionService.deletePromotion(id);
+      toast.success('Promotion deleted successfully');
+      fetchPromotions();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to delete promotion');
+    }
+  };
+
+  const resetForm = () => {
+    setEditingPromotion(null);
+    setFormData({
+      code: '',
+      name: '',
+      description: '',
+      discount_type: 'percentage',
+      discount_value: 0,
+      min_booking_amount: 0,
+      max_discount_amount: 0,
+      start_date: '',
+      end_date: '',
+      usage_limit: 0,
+      status: 'active',
+    });
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      active: { bg: 'bg-green-100', text: 'text-green-800', label: 'Active' },
+      inactive: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Inactive' },
+    };
+    const badge = badges[status] || badges.active;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Quản lý khuyến mãi</h1>
+          <p className="text-gray-500 mt-1">Quản lý mã giảm giá và chương trình khuyến mãi</p>
+        </div>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2"
+        >
+          <Plus className="w-5 h-5" />
+          Thêm khuyến mãi
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="bg-white p-4 rounded-lg shadow-sm">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="flex-1">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="Tìm theo code hoặc tên..."
+                value={filters.search}
+                onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+          <select
+            value={filters.type}
+            onChange={(e) => setFilters({ ...filters, type: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Tất cả loại</option>
+            <option value="percentage">Phần trăm</option>
+            <option value="fixed">Số tiền cố định</option>
+          </select>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Tất cả trạng thái</option>
+            <option value="active">Hoạt động</option>
+            <option value="inactive">Ngừng</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Mã code
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Tên chương trình
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Giá trị
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Thời gian
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Đã dùng
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Trạng thái
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Thao tác
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {promotions.map((promotion) => (
+              <tr key={promotion.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="flex items-center gap-2">
+                    <Tag className="w-4 h-4 text-blue-600" />
+                    <span className="text-sm font-mono font-bold text-blue-600">{promotion.code}</span>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm font-medium text-gray-900">{promotion.name}</div>
+                  <div className="text-xs text-gray-500">{promotion.description}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {promotion.discount_type === 'percentage' 
+                      ? `${promotion.discount_value}%` 
+                      : formatCurrency(promotion.discount_value)}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-xs text-gray-500">
+                    {promotion.start_date ? new Date(promotion.start_date).toLocaleDateString('en-US') : 'N/A'}
+                    {' → '}
+                    {promotion.end_date ? new Date(promotion.end_date).toLocaleDateString('en-US') : 'N/A'}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {promotion.used_count || 0} / {promotion.usage_limit || '∞'}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getStatusBadge(promotion.status)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => handleEdit(promotion)}
+                    className="text-blue-600 hover:text-blue-900 mr-3"
+                  >
+                    <Edit className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(promotion.id)}
+                    className="text-red-600 hover:text-red-900"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={setCurrentPage}
+        totalItems={totalItems}
+        itemsPerPage={itemsPerPage}
+      />
+
+      {/* Modal */}
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">
+                {editingPromotion ? 'Cập nhật khuyến mãi' : 'Thêm khuyến mãi mới'}
+              </h2>
+              <button onClick={() => setShowModal(false)}>
+                <X className="w-6 h-6 text-gray-500 hover:text-gray-700" />
+              </button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Mã code <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.code}
+                    onChange={(e) => setFormData({ ...formData, code: e.target.value.toUpperCase() })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    placeholder="VD: SUMMER2024"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Tên chương trình <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    placeholder="VD: Giảm giá mùa hè"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Mô tả
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  rows={3}
+                  placeholder="Mô tả chi tiết về chương trình..."
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Loại giảm giá <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    value={formData.discount_type}
+                    onChange={(e) => setFormData({ ...formData, discount_type: e.target.value as 'percentage' | 'fixed' })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  >
+                    <option value="percentage">Phần trăm (%)</option>
+                    <option value="fixed">Số tiền cố định (VND)</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Giá trị giảm <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.discount_value}
+                    onChange={(e) => setFormData({ ...formData, discount_value: parseFloat(e.target.value) })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    min="0"
+                    max={formData.discount_type === 'percentage' ? 100 : undefined}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Giá trị đơn tối thiểu (VND)
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.min_booking_amount}
+                    onChange={(e) => setFormData({ ...formData, min_booking_amount: parseFloat(e.target.value) })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    min="0"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Giảm tối đa (VND)
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.max_discount_amount}
+                    onChange={(e) => setFormData({ ...formData, max_discount_amount: parseFloat(e.target.value) })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    min="0"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Ngày bắt đầu <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.start_date}
+                    onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Ngày kết thúc <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.end_date}
+                    onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Giới hạn lượt dùng (0 = không giới hạn)
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.usage_limit}
+                    onChange={(e) => setFormData({ ...formData, usage_limit: parseInt(e.target.value) })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    min="0"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Trạng thái
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) => setFormData({ ...formData, status: e.target.value as 'active' | 'inactive' })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  >
+                    <option value="active">Hoạt động</option>
+                    <option value="inactive">Ngừng</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
+                >
+                  Hủy
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                >
+                  {editingPromotion ? 'Cập nhật' : 'Thêm mới'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PromotionManagementPage;
diff --git a/client/src/pages/admin/ReviewManagementPage.tsx b/client/src/pages/admin/ReviewManagementPage.tsx
new file mode 100644
index 00000000..ce53858a
--- /dev/null
+++ b/client/src/pages/admin/ReviewManagementPage.tsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import { reviewService, Review } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const ReviewManagementPage: React.FC = () => {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState({
+    status: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchReviews();
+  }, [filters, currentPage]);
+
+  const fetchReviews = async () => {
+    try {
+      setLoading(true);
+      const response = await reviewService.getReviews({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setReviews(response.data.reviews);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load reviews list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleApprove = async (id: number) => {
+    try {
+      await reviewService.approveReview(id);
+      toast.success('Review approved successfully');
+      fetchReviews();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to approve review');
+    }
+  };
+
+  const handleReject = async (id: number) => {
+    if (!window.confirm('Are you sure you want to reject this review?')) return;
+    
+    try {
+      await reviewService.rejectReview(id);
+      toast.success('Review rejected successfully');
+      fetchReviews();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to reject review');
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Pending' },
+      approved: { bg: 'bg-green-100', text: 'text-green-800', label: 'Approved' },
+      rejected: { bg: 'bg-red-100', text: 'text-red-800', label: 'Rejected' },
+    };
+    const badge = badges[status] || badges.pending;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  const renderStars = (rating: number) => {
+    return (
+      <div className="flex items-center">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <span key={star} className={star <= rating ? 'text-yellow-400' : 'text-gray-300'}>
+            ★
+          </span>
+        ))}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Review Management</h1>
+        <p className="text-gray-500 mt-1">Approve and manage customer reviews</p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <select
+          value={filters.status}
+          onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+          className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="">All statuses</option>
+          <option value="pending">Pending</option>
+          <option value="approved">Approved</option>
+          <option value="rejected">Rejected</option>
+        </select>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                User
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Room
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Rating
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Comment
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Created Date
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Status
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {reviews.map((review) => (
+              <tr key={review.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">{review.user?.name}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    Phòng {review.room?.room_number} - {review.room?.room_type?.name}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {renderStars(review.rating)}
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900 max-w-xs truncate">{review.comment}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-500">
+                    {new Date(review.created_at).toLocaleDateString('en-US')}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getStatusBadge(review.status)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  {review.status === 'pending' && (
+                    <>
+                      <button
+                        onClick={() => handleApprove(review.id)}
+                        className="text-green-600 hover:text-green-900 mr-3"
+                        title="Phê duyệt"
+                      >
+                        ✓
+                      </button>
+                      <button
+                        onClick={() => handleReject(review.id)}
+                        className="text-red-600 hover:text-red-900"
+                        title="Từ chối"
+                      >
+                        ✕
+                      </button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReviewManagementPage;
diff --git a/client/src/pages/admin/RoomManagementPage.tsx b/client/src/pages/admin/RoomManagementPage.tsx
new file mode 100644
index 00000000..b766ac98
--- /dev/null
+++ b/client/src/pages/admin/RoomManagementPage.tsx
@@ -0,0 +1,512 @@
+import React, { useEffect, useState } from 'react';
+import { Plus, Search, Edit, Trash2, X, Upload, Image as ImageIcon } from 'lucide-react';
+import { roomService, Room } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+import apiClient from '../../services/api/apiClient';
+
+const RoomManagementPage: React.FC = () => {
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingRoom, setEditingRoom] = useState<Room | null>(null);
+  const [filters, setFilters] = useState({
+    search: '',
+    status: '',
+    type: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  const [formData, setFormData] = useState({
+    room_number: '',
+    floor: 1,
+    room_type_id: 1,
+    status: 'available' as 'available' | 'occupied' | 'maintenance',
+    featured: false,
+  });
+  
+  const [uploadingImages, setUploadingImages] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchRooms();
+  }, [filters, currentPage]);
+
+  const fetchRooms = async () => {
+    try {
+      setLoading(true);
+      const response = await roomService.getRooms({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setRooms(response.data.rooms);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load rooms list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingRoom) {
+        // Update room
+        await roomService.updateRoom(editingRoom.id, formData);
+        toast.success('Room updated successfully');
+      } else {
+        // Create room
+        await roomService.createRoom(formData);
+        toast.success('Room added successfully');
+      }
+      setShowModal(false);
+      resetForm();
+      fetchRooms();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred');
+    }
+  };
+
+  const handleEdit = (room: Room) => {
+    setEditingRoom(room);
+    setFormData({
+      room_number: room.room_number,
+      floor: room.floor,
+      room_type_id: room.room_type_id,
+      status: room.status,
+      featured: room.featured,
+    });
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm('Are you sure you want to delete this room?')) return;
+    
+    try {
+      await roomService.deleteRoom(id);
+      toast.success('Room deleted successfully');
+      fetchRooms();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to delete room');
+    }
+  };
+
+  const resetForm = () => {
+    setEditingRoom(null);
+    setFormData({
+      room_number: '',
+      floor: 1,
+      room_type_id: 1,
+      status: 'available',
+      featured: false,
+    });
+    setSelectedFiles([]);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const files = Array.from(e.target.files);
+      setSelectedFiles(files);
+    }
+  };
+
+  const handleUploadImages = async () => {
+    if (!editingRoom || selectedFiles.length === 0) return;
+
+    try {
+      setUploadingImages(true);
+      const formData = new FormData();
+      selectedFiles.forEach(file => {
+        formData.append('images', file);
+      });
+
+      await apiClient.post(`/rooms/${editingRoom.id}/images`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      toast.success('Images uploaded successfully');
+      setSelectedFiles([]);
+      fetchRooms();
+      
+      // Refresh editing room data
+      const response = await roomService.getRoomById(editingRoom.id);
+      setEditingRoom(response.data.room);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to upload images');
+    } finally {
+      setUploadingImages(false);
+    }
+  };
+
+  const handleDeleteImage = async (imageUrl: string) => {
+    if (!editingRoom) return;
+    if (!window.confirm('Bạn có chắc muốn xóa ảnh này?')) return;
+
+    try {
+      await apiClient.delete(`/rooms/${editingRoom.id}/images`, {
+        data: { imageUrl },
+      });
+
+      toast.success('Xóa ảnh thành công');
+      fetchRooms();
+      
+      // Refresh editing room data
+      const response = await roomService.getRoomById(editingRoom.id);
+      setEditingRoom(response.data.room);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Không thể xóa ảnh');
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      available: { bg: 'bg-green-100', text: 'text-green-800', label: 'Trống' },
+      occupied: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Đang sử dụng' },
+      maintenance: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Bảo trì' },
+    };
+    const badge = badges[status] || badges.available;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Quản lý phòng</h1>
+          <p className="text-gray-500 mt-1">Quản lý thông tin phòng khách sạn</p>
+        </div>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <Plus className="w-5 h-5" />
+          Thêm phòng
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Tìm kiếm phòng..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Tất cả trạng thái</option>
+            <option value="available">Trống</option>
+            <option value="occupied">Đang sử dụng</option>
+            <option value="maintenance">Bảo trì</option>
+          </select>
+          <select
+            value={filters.type}
+            onChange={(e) => setFilters({ ...filters, type: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Tất cả loại phòng</option>
+            <option value="1">Standard</option>
+            <option value="2">Deluxe</option>
+            <option value="3">Suite</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Số phòng
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Loại phòng
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Tầng
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Giá
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Trạng thái
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Nổi bật
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Thao tác
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {rooms.map((room) => (
+              <tr key={room.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">{room.room_number}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{room.room_type?.name || 'N/A'}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">Tầng {room.floor}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {new Intl.NumberFormat('en-US', {
+                      style: 'currency',
+                      currency: 'VND',
+                    }).format(room.room_type?.base_price || 0)}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getStatusBadge(room.status)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {room.featured ? (
+                    <span className="text-yellow-500">⭐</span>
+                  ) : (
+                    <span className="text-gray-400">-</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => handleEdit(room)}
+                    className="text-blue-600 hover:text-blue-900 mr-3"
+                  >
+                    <Edit className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(room.id)}
+                    className="text-red-600 hover:text-red-900"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={setCurrentPage}
+        totalItems={totalItems}
+        itemsPerPage={itemsPerPage}
+      />
+
+      {/* Modal */}
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">
+                {editingRoom ? 'Cập nhật phòng' : 'Thêm phòng mới'}
+              </h2>
+              <button onClick={() => setShowModal(false)}>
+                <X className="w-6 h-6 text-gray-500 hover:text-gray-700" />
+              </button>
+            </div>
+            
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Số phòng
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.room_number}
+                    onChange={(e) => setFormData({ ...formData, room_number: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Tầng
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.floor}
+                    onChange={(e) => setFormData({ ...formData, floor: parseInt(e.target.value) })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                    required
+                    min="1"
+                  />
+                </div>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Loại phòng
+                </label>
+                <select
+                  value={formData.room_type_id}
+                  onChange={(e) => setFormData({ ...formData, room_type_id: parseInt(e.target.value) })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                >
+                  <option value="1">Standard</option>
+                  <option value="2">Deluxe</option>
+                  <option value="3">Suite</option>
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Trạng thái
+                </label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                >
+                  <option value="available">Trống</option>
+                  <option value="occupied">Đang sử dụng</option>
+                  <option value="maintenance">Bảo trì</option>
+                </select>
+              </div>
+              
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="featured"
+                  checked={formData.featured}
+                  onChange={(e) => setFormData({ ...formData, featured: e.target.checked })}
+                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                />
+                <label htmlFor="featured" className="ml-2 text-sm text-gray-700">
+                  Phòng nổi bật
+                </label>
+              </div>
+              
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+                >
+                  Hủy
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                >
+                  {editingRoom ? 'Cập nhật' : 'Thêm'}
+                </button>
+              </div>
+            </form>
+
+            {/* Image Upload Section - Only for editing */}
+            {editingRoom && (
+              <div className="mt-6 pt-6 border-t border-gray-200">
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <ImageIcon className="w-5 h-5" />
+                  Hình ảnh phòng
+                </h3>
+                
+                {/* Current Images */}
+                {editingRoom.room_type?.images && editingRoom.room_type.images.length > 0 && (
+                  <div className="mb-4">
+                    <p className="text-sm text-gray-600 mb-2">Ảnh hiện tại:</p>
+                    <div className="grid grid-cols-3 gap-3">
+                      {editingRoom.room_type.images.map((img, index) => (
+                        <div key={index} className="relative group">
+                          <img
+                            src={`http://localhost:3000${img}`}
+                            alt={`Room ${index + 1}`}
+                            className="w-full h-24 object-cover rounded-lg"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => handleDeleteImage(img)}
+                            className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                            <X className="w-4 h-4" />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Upload New Images */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Thêm ảnh mới (tối đa 5 ảnh):
+                  </label>
+                  <div className="flex gap-3">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      multiple
+                      onChange={handleFileSelect}
+                      className="flex-1 text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+                    />
+                    <button
+                      type="button"
+                      onClick={handleUploadImages}
+                      disabled={selectedFiles.length === 0 || uploadingImages}
+                      className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
+                    >
+                      <Upload className="w-4 h-4" />
+                      {uploadingImages ? 'Đang tải...' : 'Upload'}
+                    </button>
+                  </div>
+                  {selectedFiles.length > 0 && (
+                    <p className="text-sm text-gray-600 mt-2">
+                      {selectedFiles.length} file đã chọn
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RoomManagementPage;
diff --git a/client/src/pages/admin/ServiceManagementPage.tsx b/client/src/pages/admin/ServiceManagementPage.tsx
new file mode 100644
index 00000000..47fc2d1c
--- /dev/null
+++ b/client/src/pages/admin/ServiceManagementPage.tsx
@@ -0,0 +1,336 @@
+import React, { useEffect, useState } from 'react';
+import { Plus, Search, Edit, Trash2, X } from 'lucide-react';
+import { serviceService, Service } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const ServiceManagementPage: React.FC = () => {
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingService, setEditingService] = useState<Service | null>(null);
+  const [filters, setFilters] = useState({
+    search: '',
+    status: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    price: 0,
+    unit: 'lần',
+    status: 'active' as 'active' | 'inactive',
+  });
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchServices();
+  }, [filters, currentPage]);
+
+  const fetchServices = async () => {
+    try {
+      setLoading(true);
+      const response = await serviceService.getServices({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setServices(response.data.services);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load services list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingService) {
+        await serviceService.updateService(editingService.id, formData);
+        toast.success('Service updated successfully');
+      } else {
+        await serviceService.createService(formData);
+        toast.success('Service added successfully');
+      }
+      setShowModal(false);
+      resetForm();
+      fetchServices();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred');
+    }
+  };
+
+  const handleEdit = (service: Service) => {
+    setEditingService(service);
+    setFormData({
+      name: service.name,
+      description: service.description || '',
+      price: service.price,
+      unit: service.unit || 'time',
+      status: service.status,
+    });
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm('Are you sure you want to delete this service?')) return;
+    
+    try {
+      await serviceService.deleteService(id);
+      toast.success('Service deleted successfully');
+      fetchServices();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to delete service');
+    }
+  };
+
+  const resetForm = () => {
+    setEditingService(null);
+    setFormData({
+      name: '',
+      description: '',
+      price: 0,
+      unit: 'time',
+      status: 'active',
+    });
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(amount);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Service Management</h1>
+          <p className="text-gray-500 mt-1">Manage hotel services</p>
+        </div>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+        >
+          <Plus className="w-5 h-5" />
+          Add Service
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Search services..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Tất cả trạng thái</option>
+            <option value="active">Hoạt động</option>
+            <option value="inactive">Tạm dừng</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Tên dịch vụ
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Mô tả
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Giá
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Đơn vị
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Trạng thái
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Thao tác
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {services.map((service) => (
+              <tr key={service.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">{service.name}</div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900 max-w-xs truncate">{service.description}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-semibold text-gray-900">{formatCurrency(service.price)}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{service.unit}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                    service.status === 'active' 
+                      ? 'bg-green-100 text-green-800' 
+                      : 'bg-gray-100 text-gray-800'
+                  }`}>
+                    {service.status === 'active' ? 'Hoạt động' : 'Tạm dừng'}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => handleEdit(service)}
+                    className="text-blue-600 hover:text-blue-900 mr-3"
+                  >
+                    <Edit className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(service.id)}
+                    className="text-red-600 hover:text-red-900"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">
+                {editingService ? 'Cập nhật dịch vụ' : 'Thêm dịch vụ mới'}
+              </h2>
+              <button onClick={() => setShowModal(false)}>
+                <X className="w-6 h-6 text-gray-500 hover:text-gray-700" />
+              </button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Tên dịch vụ
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Mô tả
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  rows={3}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Giá
+                </label>
+                <input
+                  type="number"
+                  value={formData.price}
+                  onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                  min="0"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Đơn vị
+                </label>
+                <input
+                  type="text"
+                  value={formData.unit}
+                  onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  placeholder="VD: lần, giờ, ngày..."
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Trạng thái
+                </label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="active">Hoạt động</option>
+                  <option value="inactive">Tạm dừng</option>
+                </select>
+              </div>
+              <div className="flex gap-3 mt-6">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+                >
+                  Hủy
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                >
+                  {editingService ? 'Cập nhật' : 'Thêm'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServiceManagementPage;
diff --git a/client/src/pages/admin/UserManagementPage.tsx b/client/src/pages/admin/UserManagementPage.tsx
new file mode 100644
index 00000000..dc6c2a5a
--- /dev/null
+++ b/client/src/pages/admin/UserManagementPage.tsx
@@ -0,0 +1,412 @@
+import React, { useEffect, useState } from 'react';
+import { Plus, Search, Edit, Trash2, X } from 'lucide-react';
+import { userService, User } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+import useAuthStore from '../../store/useAuthStore';
+
+const UserManagementPage: React.FC = () => {
+  const { userInfo } = useAuthStore();
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [filters, setFilters] = useState({
+    search: '',
+    role: '',
+    status: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  const [formData, setFormData] = useState({
+    full_name: '',
+    email: '',
+    phone_number: '',
+    password: '',
+    role: 'customer',
+    status: 'active',
+  });
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [filters, currentPage]);
+
+  const fetchUsers = async () => {
+    try {
+      setLoading(true);
+      console.log('Fetching users with filters:', filters, 'page:', currentPage);
+      const response = await userService.getUsers({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      console.log('Users response:', response);
+      setUsers(response.data.users);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      console.error('Error fetching users:', error);
+      toast.error(error.response?.data?.message || 'Unable to load users list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingUser) {
+        // When updating, only send password if changed
+        const updateData: any = {
+          full_name: formData.full_name,
+          email: formData.email,
+          phone_number: formData.phone_number,
+          role: formData.role,
+          status: formData.status,
+        };
+        
+        // Only add password if user entered a new one
+        if (formData.password && formData.password.trim() !== '') {
+          updateData.password = formData.password;
+        }
+        
+        console.log('Updating user:', editingUser.id, 'with data:', updateData);
+        const response = await userService.updateUser(editingUser.id, updateData);
+        console.log('Update response:', response);
+        toast.success('User updated successfully');
+      } else {
+        // When creating new, need complete information
+        if (!formData.password || formData.password.trim() === '') {
+          toast.error('Please enter password');
+          return;
+        }
+        console.log('Creating user with data:', formData);
+        const response = await userService.createUser(formData);
+        console.log('Create response:', response);
+        toast.success('User added successfully');
+      }
+      
+      // Close modal and reset form first
+      setShowModal(false);
+      resetForm();
+      
+      // Reload users list after a bit to ensure DB is updated
+      setTimeout(() => {
+        fetchUsers();
+      }, 300);
+    } catch (error: any) {
+      console.error('Error submitting user:', error);
+      toast.error(error.response?.data?.message || 'An error occurred');
+    }
+  };
+
+  const handleEdit = (user: User) => {
+    setEditingUser(user);
+    setFormData({
+      full_name: user.full_name,
+      email: user.email,
+      phone_number: user.phone_number || '',
+      password: '',
+      role: user.role,
+      status: user.status || 'active',
+    });
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    // Prevent self-deletion
+    if (userInfo?.id === id) {
+      toast.error('You cannot delete your own account');
+      return;
+    }
+
+    if (!window.confirm('Are you sure you want to delete this user?')) return;
+    
+    try {
+      console.log('Deleting user:', id);
+      await userService.deleteUser(id);
+      toast.success('User deleted successfully');
+      fetchUsers();
+    } catch (error: any) {
+      console.error('Error deleting user:', error);
+      toast.error(error.response?.data?.message || 'Unable to delete user');
+    }
+  };
+
+  const resetForm = () => {
+    setEditingUser(null);
+    setFormData({
+      full_name: '',
+      email: '',
+      phone_number: '',
+      password: '',
+      role: 'customer',
+      status: 'active',
+    });
+  };
+
+  const getRoleBadge = (role: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      admin: { bg: 'bg-red-100', text: 'text-red-800', label: 'Admin' },
+      staff: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Staff' },
+      customer: { bg: 'bg-green-100', text: 'text-green-800', label: 'Customer' },
+    };
+    const badge = badges[role] || badges.customer;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
+          <p className="text-gray-500 mt-1">Manage accounts and permissions</p>
+        </div>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+        >
+          <Plus className="w-5 h-5" />
+          Add User
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Search by name, email..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.role}
+            onChange={(e) => setFilters({ ...filters, role: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All roles</option>
+            <option value="admin">Admin</option>
+            <option value="staff">Staff</option>
+            <option value="customer">Customer</option>
+          </select>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All statuses</option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Name
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Email
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Phone
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Role
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Created Date
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {users.map((user) => (
+              <tr key={user.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">{user.full_name}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{user.email}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{user.phone_number || 'N/A'}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getRoleBadge(user.role)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-500">
+                    {user.created_at ? new Date(user.created_at).toLocaleDateString('en-US') : 'N/A'}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => handleEdit(user)}
+                    className="text-blue-600 hover:text-blue-900 mr-3"
+                  >
+                    <Edit className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(user.id)}
+                    className="text-red-600 hover:text-red-900"
+                    disabled={userInfo?.id === user.id}
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">
+                {editingUser ? 'Update User' : 'Add New User'}
+              </h2>
+              <button onClick={() => setShowModal(false)}>
+                <X className="w-6 h-6 text-gray-500 hover:text-gray-700" />
+              </button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.full_name}
+                  onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Phone Number
+                </label>
+                <input
+                  type="tel"
+                  value={formData.phone_number}
+                  onChange={(e) => setFormData({ ...formData, phone_number: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Password {editingUser && '(leave blank if not changing)'}
+                </label>
+                <input
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required={!editingUser}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Role
+                </label>
+                <select
+                  value={formData.role}
+                  onChange={(e) => setFormData({ ...formData, role: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                >
+                  <option value="customer">Customer</option>
+                  <option value="staff">Staff</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Status
+                </label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                  required
+                >
+                  <option value="active">Active</option>
+                  <option value="inactive">Inactive</option>
+                </select>
+              </div>
+              <div className="flex gap-3 mt-6">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                >
+                  {editingUser ? 'Update' : 'Add'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserManagementPage;
diff --git a/client/src/pages/admin/index.ts b/client/src/pages/admin/index.ts
new file mode 100644
index 00000000..ee896122
--- /dev/null
+++ b/client/src/pages/admin/index.ts
@@ -0,0 +1,10 @@
+export { default as DashboardPage } from './DashboardPage';
+export { default as RoomManagementPage } from './RoomManagementPage';
+export { default as UserManagementPage } from './UserManagementPage';
+export { default as BookingManagementPage } from './BookingManagementPage';
+export { default as PaymentManagementPage } from './PaymentManagementPage';
+export { default as ServiceManagementPage } from './ServiceManagementPage';
+export { default as ReviewManagementPage } from './ReviewManagementPage';
+export { default as PromotionManagementPage } from './PromotionManagementPage';
+export { default as CheckInPage } from './CheckInPage';
+export { default as CheckOutPage } from './CheckOutPage';
diff --git a/client/src/pages/auth/ForgotPasswordPage.tsx b/client/src/pages/auth/ForgotPasswordPage.tsx
new file mode 100644
index 00000000..3d7f3ecb
--- /dev/null
+++ b/client/src/pages/auth/ForgotPasswordPage.tsx
@@ -0,0 +1,328 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Link } from 'react-router-dom';
+import {
+  Mail,
+  ArrowLeft,
+  Send,
+  Loader2,
+  CheckCircle,
+  Hotel,
+} from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import {
+  forgotPasswordSchema,
+  ForgotPasswordFormData,
+} from '../../utils/validationSchemas';
+
+const ForgotPasswordPage: React.FC = () => {
+  const { forgotPassword, isLoading, error, clearError } =
+    useAuthStore();
+  
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [submittedEmail, setSubmittedEmail] = useState('');
+
+  // React Hook Form setup
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ForgotPasswordFormData>({
+    resolver: yupResolver(forgotPasswordSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  // Handle form submission
+  const onSubmit = async (data: ForgotPasswordFormData) => {
+    try {
+      clearError();
+      setSubmittedEmail(data.email);
+      await forgotPassword({ email: data.email });
+      
+      // Show success state
+      setIsSuccess(true);
+    } catch (error) {
+      // Error đã được xử lý trong store
+      console.error('Forgot password error:', error);
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen bg-gradient-to-br 
+        from-blue-50 to-indigo-100 flex items-center 
+        justify-center py-12 px-4 sm:px-6 lg:px-8"
+    >
+      <div className="max-w-md w-full space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-blue-600 rounded-full">
+              <Hotel className="w-12 h-12 text-white" />
+            </div>
+          </div>
+          <h2 className="text-3xl font-bold text-gray-900">
+            Forgot Password?
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Enter your email to receive a password reset link
+          </p>
+        </div>
+
+        {/* Form Container */}
+        <div className="bg-white rounded-lg shadow-xl p-8">
+          {isSuccess ? (
+            // Success State
+            <div className="text-center space-y-6">
+              <div className="flex justify-center">
+                <div
+                  className="w-16 h-16 bg-green-100 
+                    rounded-full flex items-center 
+                    justify-center"
+                >
+                  <CheckCircle
+                    className="w-10 h-10 text-green-600"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <h3
+                  className="text-xl font-semibold 
+                    text-gray-900"
+                >
+                  Email Sent!
+                </h3>
+                <p className="text-sm text-gray-600">
+                  We have sent a password reset link to
+                </p>
+                <p className="text-sm font-medium text-blue-600">
+                  {submittedEmail}
+                </p>
+              </div>
+
+              <div
+                className="bg-blue-50 border border-blue-200 
+                  rounded-lg p-4 text-left"
+              >
+                <p className="text-sm text-gray-700">
+                  <strong>Note:</strong>
+                </p>
+                <ul
+                  className="mt-2 space-y-1 text-sm 
+                    text-gray-600 list-disc list-inside"
+                >
+                  <li>Link is valid for 1 hour</li>
+                  <li>Check your Spam/Junk folder</li>
+                  <li>
+                    If you don't receive the email, please try again
+                  </li>
+                </ul>
+              </div>
+
+              <div className="space-y-3">
+                <button
+                  onClick={() => {
+                    setIsSuccess(false);
+                    clearError();
+                  }}
+                  className="w-full flex items-center 
+                    justify-center py-3 px-4 border 
+                    border-gray-300 rounded-lg 
+                    text-sm font-medium text-gray-700 
+                    bg-white hover:bg-gray-50 
+                    focus:outline-none focus:ring-2 
+                    focus:ring-offset-2 
+                    focus:ring-blue-500 
+                    transition-colors"
+                >
+                  <Mail className="-ml-1 mr-2 h-5 w-5" />
+                  Resend Email
+                </button>
+
+                <Link
+                  to="/login"
+                  className="w-full flex items-center 
+                    justify-center py-3 px-4 border 
+                    border-transparent rounded-lg 
+                    text-sm font-medium text-white 
+                    bg-blue-600 hover:bg-blue-700 
+                    focus:outline-none focus:ring-2 
+                    focus:ring-offset-2 
+                    focus:ring-blue-500 
+                    transition-colors"
+                >
+                  <ArrowLeft
+                    className="-ml-1 mr-2 h-5 w-5"
+                  />
+                  Back to Login
+                </Link>
+              </div>
+            </div>
+          ) : (
+            // Form State
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="space-y-6"
+            >
+              {/* Error Message */}
+              {error && (
+                <div
+                  className="bg-red-50 border 
+                    border-red-200 text-red-700 
+                    px-4 py-3 rounded-lg text-sm"
+                >
+                  {error}
+                </div>
+              )}
+
+              {/* Email Field */}
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium 
+                    text-gray-700 mb-2"
+                >
+                  Email
+                </label>
+                <div className="relative">
+                  <div
+                    className="absolute inset-y-0 left-0 
+                      pl-3 flex items-center 
+                      pointer-events-none"
+                  >
+                    <Mail
+                      className="h-5 w-5 text-gray-400"
+                    />
+                  </div>
+                  <input
+                    {...register('email')}
+                    id="email"
+                    type="email"
+                    autoComplete="email"
+                    autoFocus
+                    className={`block w-full pl-10 pr-3 
+                      py-3 border rounded-lg 
+                      focus:outline-none focus:ring-2 
+                      transition-colors
+                      ${
+                        errors.email
+                          ? 'border-red-300 ' +
+                            'focus:ring-red-500'
+                          : 'border-gray-300 ' +
+                            'focus:ring-blue-500'
+                      }`}
+                    placeholder="email@example.com"
+                  />
+                </div>
+                {errors.email && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.email.message}
+                  </p>
+                )}
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full flex items-center 
+                  justify-center py-3 px-4 border 
+                  border-transparent rounded-lg 
+                  shadow-sm text-sm font-medium 
+                  text-white bg-blue-600 
+                  hover:bg-blue-700 focus:outline-none 
+                  focus:ring-2 focus:ring-offset-2 
+                  focus:ring-blue-500 
+                  disabled:opacity-50 
+                  disabled:cursor-not-allowed 
+                  transition-colors"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2
+                      className="animate-spin -ml-1 
+                        mr-2 h-5 w-5"
+                    />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <Send className="-ml-1 mr-2 h-5 w-5" />
+                    Send Reset Link
+                  </>
+                )}
+              </button>
+
+              {/* Back to Login Link */}
+              <div className="text-center">
+                <Link
+                  to="/login"
+                  className="inline-flex items-center 
+                    text-sm font-medium text-blue-600 
+                    hover:text-blue-500 transition-colors"
+                >
+                  <ArrowLeft
+                    className="mr-1 h-4 w-4"
+                  />
+                  Back to Login
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+
+        {/* Footer Info */}
+        {!isSuccess && (
+          <div className="text-center text-sm text-gray-500">
+            <p>
+              Don't have an account?{' '}
+              <Link
+                to="/register"
+                className="font-medium text-blue-600 
+                  hover:underline"
+              >
+                Register now
+              </Link>
+            </p>
+          </div>
+        )}
+
+        {/* Help Section */}
+        <div
+          className="bg-white rounded-lg shadow-sm 
+            border border-gray-200 p-4"
+        >
+          <h3
+            className="text-sm font-semibold text-gray-900 
+              mb-2"
+          >
+            Need Help?
+          </h3>
+          <p className="text-xs text-gray-600">
+            If you're having trouble resetting your password, 
+            please contact our support team via email{' '}
+            <a
+              href="mailto:support@hotel.com"
+              className="text-blue-600 hover:underline"
+            >
+              support@hotel.com
+            </a>{' '}
+            or hotline{' '}
+            <a
+              href="tel:1900-xxxx"
+              className="text-blue-600 hover:underline"
+            >
+              1900-xxxx
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPasswordPage;
diff --git a/client/src/pages/auth/LoginPage.tsx b/client/src/pages/auth/LoginPage.tsx
new file mode 100644
index 00000000..dbefe48c
--- /dev/null
+++ b/client/src/pages/auth/LoginPage.tsx
@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { 
+  Eye, 
+  EyeOff, 
+  LogIn, 
+  Loader2,
+  Mail,
+  Lock,
+  Hotel
+} from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import { 
+  loginSchema, 
+  LoginFormData 
+} from '../../utils/validationSchemas';
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login, isLoading, error, clearError } = 
+    useAuthStore();
+  
+  const [showPassword, setShowPassword] = useState(false);
+
+  // React Hook Form setup
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  // Handle form submission
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      clearError();
+      await login({
+        email: data.email,
+        password: data.password,
+        rememberMe: data.rememberMe,
+      });
+
+      // Redirect về trang trước đó hoặc dashboard
+      const from = location.state?.from?.pathname || 
+        '/dashboard';
+      navigate(from, { replace: true });
+    } catch (error) {
+      // Error đã được xử lý trong store
+      console.error('Login error:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br 
+      from-blue-50 to-indigo-100 flex items-center 
+      justify-center py-12 px-4 sm:px-6 lg:px-8"
+    >
+      <div className="max-w-md w-full space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-blue-600 rounded-full">
+              <Hotel className="w-12 h-12 text-white" />
+            </div>
+          </div>
+          <h2 className="text-3xl font-bold text-gray-900">
+            Login
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Welcome back to Hotel Booking
+          </p>
+        </div>
+
+        {/* Login Form */}
+        <div className="bg-white rounded-lg shadow-xl p-8">
+          <form onSubmit={handleSubmit(onSubmit)} 
+            className="space-y-6"
+          >
+            {/* Error Message */}
+            {error && (
+              <div className="bg-red-50 border border-red-200 
+                text-red-700 px-4 py-3 rounded-lg 
+                text-sm"
+              >
+                {error}
+              </div>
+            )}
+
+            {/* Email Field */}
+            <div>
+              <label 
+                htmlFor="email" 
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Email
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 
+                  pl-3 flex items-center pointer-events-none"
+                >
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('email')}
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  className={`block w-full pl-10 pr-3 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${errors.email 
+                      ? 'border-red-300 focus:ring-red-500' 
+                      : 'border-gray-300 focus:ring-blue-500'
+                    }`}
+                  placeholder="email@example.com"
+                />
+              </div>
+              {errors.email && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+
+            {/* Password Field */}
+            <div>
+              <label 
+                htmlFor="password" 
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Password
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 
+                  pl-3 flex items-center pointer-events-none"
+                >
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('password')}
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  autoComplete="current-password"
+                  className={`block w-full pl-10 pr-10 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${errors.password 
+                      ? 'border-red-300 focus:ring-red-500' 
+                      : 'border-gray-300 focus:ring-blue-500'
+                    }`}
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute inset-y-0 right-0 
+                    pr-3 flex items-center"
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-5 w-5 
+                      text-gray-400 hover:text-gray-600" 
+                    />
+                  ) : (
+                    <Eye className="h-5 w-5 text-gray-400 
+                      hover:text-gray-600" 
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.password.message}
+                </p>
+              )}
+            </div>
+
+            {/* Remember Me & Forgot Password */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  {...register('rememberMe')}
+                  id="rememberMe"
+                  type="checkbox"
+                  className="h-4 w-4 text-blue-600 
+                    focus:ring-blue-500 border-gray-300 
+                    rounded cursor-pointer"
+                />
+                <label 
+                  htmlFor="rememberMe" 
+                  className="ml-2 block text-sm 
+                    text-gray-700 cursor-pointer"
+                >
+                  Remember me
+                </label>
+              </div>
+
+              <Link
+                to="/forgot-password"
+                className="text-sm font-medium 
+                  text-blue-600 hover:text-blue-500 
+                  transition-colors"
+              >
+                Forgot password?
+              </Link>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full flex items-center 
+                justify-center py-3 px-4 border 
+                border-transparent rounded-lg shadow-sm 
+                text-sm font-medium text-white 
+                bg-blue-600 hover:bg-blue-700 
+                focus:outline-none focus:ring-2 
+                focus:ring-offset-2 focus:ring-blue-500 
+                disabled:opacity-50 disabled:cursor-not-allowed 
+                transition-colors"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="animate-spin -ml-1 
+                    mr-2 h-5 w-5" 
+                  />
+                  Processing...
+                </>
+              ) : (
+                <>
+                  <LogIn className="-ml-1 mr-2 h-5 w-5" />
+                  Login
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Register Link */}
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Don't have an account?{' '}
+              <Link
+                to="/register"
+                className="font-medium text-blue-600 
+                  hover:text-blue-500 transition-colors"
+              >
+                Register now
+              </Link>
+            </p>
+          </div>
+        </div>
+
+        {/* Footer Info */}
+        <div className="text-center text-sm text-gray-500">
+          <p>
+            By logging in, you agree to our{' '}
+            <Link 
+              to="/terms" 
+              className="text-blue-600 hover:underline"
+            >
+              Terms of Service
+            </Link>{' '}
+            and{' '}
+            <Link 
+              to="/privacy" 
+              className="text-blue-600 hover:underline"
+            >
+              Privacy Policy
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/client/src/pages/auth/RegisterPage.tsx b/client/src/pages/auth/RegisterPage.tsx
new file mode 100644
index 00000000..3dc36348
--- /dev/null
+++ b/client/src/pages/auth/RegisterPage.tsx
@@ -0,0 +1,517 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  Eye,
+  EyeOff,
+  UserPlus,
+  Loader2,
+  Mail,
+  Lock,
+  User,
+  Phone,
+  Hotel,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import {
+  registerSchema,
+  RegisterFormData,
+} from '../../utils/validationSchemas';
+
+const RegisterPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { register: registerUser, isLoading, error, clearError } =
+    useAuthStore();
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = 
+    useState(false);
+
+  // React Hook Form setup
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<RegisterFormData>({
+    resolver: yupResolver(registerSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      phone: '',
+    },
+  });
+
+  // Watch password để hiển thị password strength
+  const password = watch('password');
+
+  // Password strength checker
+  const getPasswordStrength = (pwd: string) => {
+    if (!pwd) return { strength: 0, label: '', color: '' };
+
+    let strength = 0;
+    if (pwd.length >= 8) strength++;
+    if (/[a-z]/.test(pwd)) strength++;
+    if (/[A-Z]/.test(pwd)) strength++;
+    if (/\d/.test(pwd)) strength++;
+    if (/[@$!%*?&]/.test(pwd)) strength++;
+
+    const labels = [
+      { label: 'Very Weak', color: 'bg-red-500' },
+      { label: 'Weak', color: 'bg-orange-500' },
+      { label: 'Medium', color: 'bg-yellow-500' },
+      { label: 'Strong', color: 'bg-blue-500' },
+      { label: 'Very Strong', color: 'bg-green-500' },
+    ];
+
+    return { strength, ...labels[strength] };
+  };
+
+  const passwordStrength = getPasswordStrength(password || '');
+
+  // Handle form submission
+  const onSubmit = async (data: RegisterFormData) => {
+    try {
+      clearError();
+      await registerUser({
+        name: data.name,
+        email: data.email,
+        password: data.password,
+        phone: data.phone,
+      });
+
+      // Redirect to login page
+      navigate('/login', { replace: true });
+    } catch (error) {
+      // Error đã được xử lý trong store
+      console.error('Register error:', error);
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen bg-gradient-to-br 
+        from-purple-50 to-pink-100 flex items-center 
+        justify-center py-12 px-4 sm:px-6 lg:px-8"
+    >
+      <div className="max-w-md w-full space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-purple-600 rounded-full">
+              <Hotel className="w-12 h-12 text-white" />
+            </div>
+          </div>
+          <h2 className="text-3xl font-bold text-gray-900">
+            Create Account
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Create a new account to book hotel rooms
+          </p>
+        </div>
+
+        {/* Register Form */}
+        <div className="bg-white rounded-lg shadow-xl p-8">
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="space-y-5"
+          >
+            {/* Error Message */}
+            {error && (
+              <div
+                className="bg-red-50 border border-red-200 
+                  text-red-700 px-4 py-3 rounded-lg 
+                  text-sm"
+              >
+                {error}
+              </div>
+            )}
+
+            {/* Name Field */}
+            <div>
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Full Name
+              </label>
+              <div className="relative">
+                <div
+                  className="absolute inset-y-0 left-0 
+                    pl-3 flex items-center 
+                    pointer-events-none"
+                >
+                  <User className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('name')}
+                  id="name"
+                  type="text"
+                  autoComplete="name"
+                  className={`block w-full pl-10 pr-3 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${
+                      errors.name
+                        ? 'border-red-300 focus:ring-red-500'
+                        : 'border-gray-300 ' +
+                          'focus:ring-purple-500'
+                    }`}
+                  placeholder="John Doe"
+                />
+              </div>
+              {errors.name && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.name.message}
+                </p>
+              )}
+            </div>
+
+            {/* Email Field */}
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Email
+              </label>
+              <div className="relative">
+                <div
+                  className="absolute inset-y-0 left-0 
+                    pl-3 flex items-center 
+                    pointer-events-none"
+                >
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('email')}
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  className={`block w-full pl-10 pr-3 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${
+                      errors.email
+                        ? 'border-red-300 focus:ring-red-500'
+                        : 'border-gray-300 ' +
+                          'focus:ring-purple-500'
+                    }`}
+                  placeholder="email@example.com"
+                />
+              </div>
+              {errors.email && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+
+            {/* Phone Field */}
+            <div>
+              <label
+                htmlFor="phone"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Phone Number (Optional)
+              </label>
+              <div className="relative">
+                <div
+                  className="absolute inset-y-0 left-0 
+                    pl-3 flex items-center 
+                    pointer-events-none"
+                >
+                  <Phone className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('phone')}
+                  id="phone"
+                  type="tel"
+                  autoComplete="tel"
+                  className={`block w-full pl-10 pr-3 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${
+                      errors.phone
+                        ? 'border-red-300 focus:ring-red-500'
+                        : 'border-gray-300 ' +
+                          'focus:ring-purple-500'
+                    }`}
+                  placeholder="0123456789"
+                />
+              </div>
+              {errors.phone && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.phone.message}
+                </p>
+              )}
+            </div>
+
+            {/* Password Field */}
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Password
+              </label>
+              <div className="relative">
+                <div
+                  className="absolute inset-y-0 left-0 
+                    pl-3 flex items-center 
+                    pointer-events-none"
+                >
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('password')}
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  autoComplete="new-password"
+                  className={`block w-full pl-10 pr-10 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${
+                      errors.password
+                        ? 'border-red-300 focus:ring-red-500'
+                        : 'border-gray-300 ' +
+                          'focus:ring-purple-500'
+                    }`}
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute inset-y-0 right-0 
+                    pr-3 flex items-center"
+                >
+                  {showPassword ? (
+                    <EyeOff
+                      className="h-5 w-5 text-gray-400 
+                        hover:text-gray-600"
+                    />
+                  ) : (
+                    <Eye
+                      className="h-5 w-5 text-gray-400 
+                        hover:text-gray-600"
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.password.message}
+                </p>
+              )}
+
+              {/* Password Strength Indicator */}
+              {password && password.length > 0 && (
+                <div className="mt-2">
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 h-2 bg-gray-200 
+                      rounded-full overflow-hidden"
+                    >
+                      <div
+                        className={`h-full transition-all 
+                          duration-300 ${passwordStrength.color}`}
+                        style={{
+                          width: `${
+                            (passwordStrength.strength / 5) * 100
+                          }%`,
+                        }}
+                      />
+                    </div>
+                    <span className="text-xs font-medium 
+                      text-gray-600"
+                    >
+                      {passwordStrength.label}
+                    </span>
+                  </div>
+
+                  {/* Password Requirements */}
+                  <div className="mt-2 space-y-1">
+                    <PasswordRequirement
+                      met={password.length >= 8}
+                      text="At least 8 characters"
+                    />
+                    <PasswordRequirement
+                      met={/[a-z]/.test(password)}
+                      text="Lowercase letter (a-z)"
+                    />
+                    <PasswordRequirement
+                      met={/[A-Z]/.test(password)}
+                      text="Uppercase letter (A-Z)"
+                    />
+                    <PasswordRequirement
+                      met={/\d/.test(password)}
+                      text="Number (0-9)"
+                    />
+                    <PasswordRequirement
+                      met={/[@$!%*?&]/.test(password)}
+                      text="Special character (@$!%*?&)"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Confirm Password Field */}
+            <div>
+              <label
+                htmlFor="confirmPassword"
+                className="block text-sm font-medium 
+                  text-gray-700 mb-2"
+              >
+                Confirm Password
+              </label>
+              <div className="relative">
+                <div
+                  className="absolute inset-y-0 left-0 
+                    pl-3 flex items-center 
+                    pointer-events-none"
+                >
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  {...register('confirmPassword')}
+                  id="confirmPassword"
+                  type={
+                    showConfirmPassword ? 'text' : 'password'
+                  }
+                  autoComplete="new-password"
+                  className={`block w-full pl-10 pr-10 py-3 
+                    border rounded-lg focus:outline-none 
+                    focus:ring-2 transition-colors
+                    ${
+                      errors.confirmPassword
+                        ? 'border-red-300 focus:ring-red-500'
+                        : 'border-gray-300 ' +
+                          'focus:ring-purple-500'
+                    }`}
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() =>
+                    setShowConfirmPassword(!showConfirmPassword)
+                  }
+                  className="absolute inset-y-0 right-0 
+                    pr-3 flex items-center"
+                >
+                  {showConfirmPassword ? (
+                    <EyeOff
+                      className="h-5 w-5 text-gray-400 
+                        hover:text-gray-600"
+                    />
+                  ) : (
+                    <Eye
+                      className="h-5 w-5 text-gray-400 
+                        hover:text-gray-600"
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.confirmPassword && (
+                <p className="mt-1 text-sm text-red-600">
+                  {errors.confirmPassword.message}
+                </p>
+              )}
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full flex items-center 
+                justify-center py-3 px-4 border 
+                border-transparent rounded-lg shadow-sm 
+                text-sm font-medium text-white 
+                bg-purple-600 hover:bg-purple-700 
+                focus:outline-none focus:ring-2 
+                focus:ring-offset-2 focus:ring-purple-500 
+                disabled:opacity-50 
+                disabled:cursor-not-allowed 
+                transition-colors"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="animate-spin -ml-1 
+                    mr-2 h-5 w-5"
+                  />
+                  Processing...
+                </>
+              ) : (
+                <>
+                  <UserPlus className="-ml-1 mr-2 h-5 w-5" />
+                  Register
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Login Link */}
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Already have an account?{' '}
+              <Link
+                to="/login"
+                className="font-medium text-purple-600 
+                  hover:text-purple-500 transition-colors"
+              >
+                Login now
+              </Link>
+            </p>
+          </div>
+        </div>
+
+        {/* Footer Info */}
+        <div className="text-center text-sm text-gray-500">
+          <p>
+            By registering, you agree to our{' '}
+            <Link
+              to="/terms"
+              className="text-purple-600 hover:underline"
+            >
+              Terms of Service
+            </Link>{' '}
+            and{' '}
+            <Link
+              to="/privacy"
+              className="text-purple-600 hover:underline"
+            >
+              Privacy Policy
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Helper component for password requirements
+const PasswordRequirement: React.FC<{
+  met: boolean;
+  text: string;
+}> = ({ met, text }) => (
+  <div className="flex items-center gap-2 text-xs">
+    {met ? (
+      <CheckCircle2 className="h-4 w-4 text-green-500" />
+    ) : (
+      <XCircle className="h-4 w-4 text-gray-300" />
+    )}
+    <span className={met ? 'text-green-600' : 'text-gray-500'}>
+      {text}
+    </span>
+  </div>
+);
+
+export default RegisterPage;
diff --git a/client/src/pages/auth/ResetPasswordPage.tsx b/client/src/pages/auth/ResetPasswordPage.tsx
new file mode 100644
index 00000000..fa02287e
--- /dev/null
+++ b/client/src/pages/auth/ResetPasswordPage.tsx
@@ -0,0 +1,531 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import {
+  Eye,
+  EyeOff,
+  Lock,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  AlertCircle,
+  KeyRound,
+  Hotel,
+} from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import {
+  resetPasswordSchema,
+  ResetPasswordFormData,
+} from '../../utils/validationSchemas';
+
+const ResetPasswordPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { token } = useParams<{ token: string }>();
+  const { resetPassword, isLoading, error, clearError } =
+    useAuthStore();
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  // React Hook Form setup
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<ResetPasswordFormData>({
+    resolver: yupResolver(resetPasswordSchema),
+    defaultValues: {
+      password: '',
+      confirmPassword: '',
+    },
+  });
+
+  // Watch password để hiển thị password strength
+  const password = watch('password');
+
+  // Check if token exists
+  useEffect(() => {
+    if (!token) {
+      navigate('/forgot-password', { replace: true });
+    }
+  }, [token, navigate]);
+
+  // Password strength checker
+  const getPasswordStrength = (pwd: string) => {
+    if (!pwd) return { strength: 0, label: '', color: '' };
+
+    let strength = 0;
+    if (pwd.length >= 8) strength++;
+    if (/[a-z]/.test(pwd)) strength++;
+    if (/[A-Z]/.test(pwd)) strength++;
+    if (/\d/.test(pwd)) strength++;
+    if (/[@$!%*?&]/.test(pwd)) strength++;
+
+    const labels = [
+      { label: 'Rất yếu', color: 'bg-red-500' },
+      { label: 'Yếu', color: 'bg-orange-500' },
+      { label: 'Trung bình', color: 'bg-yellow-500' },
+      { label: 'Mạnh', color: 'bg-blue-500' },
+      { label: 'Rất mạnh', color: 'bg-green-500' },
+    ];
+
+    return { strength, ...labels[strength] };
+  };
+
+  const passwordStrength = getPasswordStrength(password || '');
+
+  // Handle form submission
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    if (!token) {
+      return;
+    }
+
+    try {
+      clearError();
+      await resetPassword({
+        token,
+        password: data.password,
+        confirmPassword: data.confirmPassword,
+      });
+
+      // Show success state
+      setIsSuccess(true);
+
+      // Redirect to login after 3 seconds
+      setTimeout(() => {
+        navigate('/login', { replace: true });
+      }, 3000);
+    } catch (error) {
+      // Error đã được xử lý trong store
+      console.error('Reset password error:', error);
+    }
+  };
+
+  // Invalid token error check
+  const isTokenError =
+    error?.includes('token') || error?.includes('expired');
+
+  // New password reuse error check
+  const isReuseError =
+    error?.toLowerCase().includes('must be different') ||
+    error?.toLowerCase().includes('different from old');
+
+  return (
+    <div
+      className="min-h-screen bg-gradient-to-br 
+        from-indigo-50 to-purple-100 flex items-center 
+        justify-center py-12 px-4 sm:px-6 lg:px-8"
+    >
+      <div className="max-w-md w-full space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-indigo-600 rounded-full">
+              <Hotel className="w-12 h-12 text-white" />
+            </div>
+          </div>
+          <h2 className="text-3xl font-bold text-gray-900">
+            {isSuccess ? 'Hoàn tất!' : 'Đặt lại mật khẩu'}
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            {isSuccess
+              ? 'Mật khẩu đã được đặt lại thành công'
+              : 'Nhập mật khẩu mới cho tài khoản của bạn'}
+          </p>
+        </div>
+
+        {/* Form Container */}
+        <div className="bg-white rounded-lg shadow-xl p-8">
+          {isSuccess ? (
+            // Success State
+            <div className="text-center space-y-6">
+              <div className="flex justify-center">
+                <div
+                  className="w-16 h-16 bg-green-100 
+                    rounded-full flex items-center 
+                    justify-center"
+                >
+                  <CheckCircle2
+                    className="w-10 h-10 text-green-600"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <h3
+                  className="text-xl font-semibold 
+                    text-gray-900"
+                >
+                  Đặt lại mật khẩu thành công!
+                </h3>
+                <p className="text-sm text-gray-600">
+                  Mật khẩu của bạn đã được cập nhật.
+                </p>
+                <p className="text-sm text-gray-600">
+                  Bạn có thể đăng nhập bằng mật khẩu mới.
+                </p>
+              </div>
+
+              <div
+                className="bg-blue-50 border border-blue-200 
+                  rounded-lg p-4"
+              >
+                <p className="text-sm text-gray-700">
+                  Đang chuyển hướng đến trang đăng nhập...
+                </p>
+                <div className="mt-2 flex justify-center">
+                  <Loader2
+                    className="animate-spin h-5 w-5 
+                      text-blue-600"
+                  />
+                </div>
+              </div>
+
+              <Link
+                to="/login"
+                className="inline-flex items-center 
+                  justify-center w-full py-3 px-4 
+                  border border-transparent rounded-lg 
+                  text-sm font-medium text-white 
+                  bg-indigo-600 hover:bg-indigo-700 
+                  focus:outline-none focus:ring-2 
+                  focus:ring-offset-2 
+                  focus:ring-indigo-500 
+                  transition-colors"
+              >
+                <KeyRound className="-ml-1 mr-2 h-5 w-5" />
+                Đăng nhập ngay
+              </Link>
+            </div>
+          ) : (
+            // Form State
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="space-y-5"
+            >
+              {/* Error Message */}
+              {error && (
+                <div
+                  className={`border px-4 py-3 rounded-lg 
+                    text-sm flex items-start gap-2
+                    ${
+                      isTokenError
+                        ? 'bg-yellow-50 border-yellow-200 ' +
+                          'text-yellow-800'
+                        : 'bg-red-50 border-red-200 ' +
+                          'text-red-700'
+                    }`}
+                >
+                  <AlertCircle className="h-5 w-5 flex-shrink-0 mt-0.5" />
+                  <div className="flex-1">
+                    <p className="font-medium">
+                      {isReuseError
+                        ? 'Mật khẩu mới phải khác mật khẩu cũ'
+                        : error}
+                    </p>
+                    {isTokenError && (
+                      <Link
+                        to="/forgot-password"
+                        className="mt-2 inline-block text-sm 
+                          font-medium underline 
+                          hover:text-yellow-900"
+                      >
+                        Yêu cầu link mới
+                      </Link>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Password Field */}
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium 
+                    text-gray-700 mb-2"
+                >
+                  Mật khẩu mới
+                </label>
+                <div className="relative">
+                  <div
+                    className="absolute inset-y-0 left-0 
+                      pl-3 flex items-center 
+                      pointer-events-none"
+                  >
+                    <Lock
+                      className="h-5 w-5 text-gray-400"
+                    />
+                  </div>
+                  <input
+                    {...register('password')}
+                    id="password"
+                    type={showPassword ? 'text' : 'password'}
+                    autoComplete="new-password"
+                    autoFocus
+                    className={`block w-full pl-10 pr-10 
+                      py-3 border rounded-lg 
+                      focus:outline-none focus:ring-2 
+                      transition-colors
+                      ${
+                        errors.password
+                          ? 'border-red-300 ' +
+                            'focus:ring-red-500'
+                          : 'border-gray-300 ' +
+                            'focus:ring-indigo-500'
+                      }`}
+                    placeholder="••••••••"
+                  />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setShowPassword(!showPassword)
+                    }
+                    className="absolute inset-y-0 right-0 
+                      pr-3 flex items-center"
+                  >
+                    {showPassword ? (
+                      <EyeOff
+                        className="h-5 w-5 text-gray-400 
+                          hover:text-gray-600"
+                      />
+                    ) : (
+                      <Eye
+                        className="h-5 w-5 text-gray-400 
+                          hover:text-gray-600"
+                      />
+                    )}
+                  </button>
+                </div>
+                {errors.password && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.password.message}
+                  </p>
+                )}
+
+                {/* Password Strength Indicator */}
+                {password && password.length > 0 && (
+                  <div className="mt-2">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="flex-1 h-2 bg-gray-200 
+                          rounded-full overflow-hidden"
+                      >
+                        <div
+                          className={`h-full transition-all 
+                            duration-300 
+                            ${passwordStrength.color}`}
+                          style={{
+                            width: `${
+                              (passwordStrength.strength / 5) *
+                              100
+                            }%`,
+                          }}
+                        />
+                      </div>
+                      <span
+                        className="text-xs font-medium 
+                          text-gray-600"
+                      >
+                        {passwordStrength.label}
+                      </span>
+                    </div>
+
+                    {/* Password Requirements */}
+                    <div className="mt-2 space-y-1">
+                      <PasswordRequirement
+                        met={password.length >= 8}
+                        text="Ít nhất 8 ký tự"
+                      />
+                      <PasswordRequirement
+                        met={/[a-z]/.test(password)}
+                        text="Chữ thường (a-z)"
+                      />
+                      <PasswordRequirement
+                        met={/[A-Z]/.test(password)}
+                        text="Chữ hoa (A-Z)"
+                      />
+                      <PasswordRequirement
+                        met={/\d/.test(password)}
+                        text="Số (0-9)"
+                      />
+                      <PasswordRequirement
+                        met={/[@$!%*?&]/.test(password)}
+                        text="Ký tự đặc biệt (@$!%*?&)"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Confirm Password Field */}
+              <div>
+                <label
+                  htmlFor="confirmPassword"
+                  className="block text-sm font-medium 
+                    text-gray-700 mb-2"
+                >
+                  Xác nhận mật khẩu
+                </label>
+                <div className="relative">
+                  <div
+                    className="absolute inset-y-0 left-0 
+                      pl-3 flex items-center 
+                      pointer-events-none"
+                  >
+                    <Lock
+                      className="h-5 w-5 text-gray-400"
+                    />
+                  </div>
+                  <input
+                    {...register('confirmPassword')}
+                    id="confirmPassword"
+                    type={
+                      showConfirmPassword ? 'text' : 'password'
+                    }
+                    autoComplete="new-password"
+                    className={`block w-full pl-10 pr-10 
+                      py-3 border rounded-lg 
+                      focus:outline-none focus:ring-2 
+                      transition-colors
+                      ${
+                        errors.confirmPassword
+                          ? 'border-red-300 ' +
+                            'focus:ring-red-500'
+                          : 'border-gray-300 ' +
+                            'focus:ring-indigo-500'
+                      }`}
+                    placeholder="••••••••"
+                  />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setShowConfirmPassword(
+                        !showConfirmPassword
+                      )
+                    }
+                    className="absolute inset-y-0 right-0 
+                      pr-3 flex items-center"
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff
+                        className="h-5 w-5 text-gray-400 
+                          hover:text-gray-600"
+                      />
+                    ) : (
+                      <Eye
+                        className="h-5 w-5 text-gray-400 
+                          hover:text-gray-600"
+                      />
+                    )}
+                  </button>
+                </div>
+                {errors.confirmPassword && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.confirmPassword.message}
+                  </p>
+                )}
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full flex items-center 
+                  justify-center py-3 px-4 border 
+                  border-transparent rounded-lg 
+                  shadow-sm text-sm font-medium 
+                  text-white bg-indigo-600 
+                  hover:bg-indigo-700 
+                  focus:outline-none focus:ring-2 
+                  focus:ring-offset-2 
+                  focus:ring-indigo-500 
+                  disabled:opacity-50 
+                  disabled:cursor-not-allowed 
+                  transition-colors"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2
+                      className="animate-spin -ml-1 mr-2 
+                        h-5 w-5"
+                    />
+                    Đang xử lý...
+                  </>
+                ) : (
+                  <>
+                    <KeyRound
+                      className="-ml-1 mr-2 h-5 w-5"
+                    />
+                    Đặt lại mật khẩu
+                  </>
+                )}
+              </button>
+
+              {/* Back to Login Link */}
+              <div className="text-center">
+                <Link
+                  to="/login"
+                  className="text-sm font-medium 
+                    text-indigo-600 hover:text-indigo-500 
+                    transition-colors"
+                >
+                  Quay lại đăng nhập
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+
+        {/* Security Info */}
+        {!isSuccess && (
+          <div
+            className="bg-white rounded-lg shadow-sm 
+              border border-gray-200 p-4"
+          >
+            <h3
+              className="text-sm font-semibold 
+                text-gray-900 mb-2 flex items-center 
+                gap-2"
+            >
+              <Lock className="h-4 w-4" />
+              Bảo mật
+            </h3>
+            <ul
+              className="text-xs text-gray-600 space-y-1 
+                list-disc list-inside"
+            >
+              <li>Link đặt lại chỉ có hiệu lực trong 1 giờ</li>
+              <li>Mật khẩu được mã hóa an toàn</li>
+              <li>
+                Nếu link hết hạn, hãy yêu cầu link mới
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Helper component for password requirements
+const PasswordRequirement: React.FC<{
+  met: boolean;
+  text: string;
+}> = ({ met, text }) => (
+  <div className="flex items-center gap-2 text-xs">
+    {met ? (
+      <CheckCircle2 className="h-4 w-4 text-green-500" />
+    ) : (
+      <XCircle className="h-4 w-4 text-gray-300" />
+    )}
+    <span className={met ? 'text-green-600' : 'text-gray-500'}>
+      {text}
+    </span>
+  </div>
+);
+
+export default ResetPasswordPage;
diff --git a/client/src/pages/auth/index.ts b/client/src/pages/auth/index.ts
new file mode 100644
index 00000000..5a7a6609
--- /dev/null
+++ b/client/src/pages/auth/index.ts
@@ -0,0 +1,4 @@
+export { default as LoginPage } from './LoginPage';
+export { default as RegisterPage } from './RegisterPage';
+export { default as ForgotPasswordPage } from './ForgotPasswordPage';
+export { default as ResetPasswordPage } from './ResetPasswordPage';
diff --git a/client/src/pages/customer/BookingDetailPage.tsx b/client/src/pages/customer/BookingDetailPage.tsx
new file mode 100644
index 00000000..22f649e7
--- /dev/null
+++ b/client/src/pages/customer/BookingDetailPage.tsx
@@ -0,0 +1,644 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  useParams, 
+  useNavigate, 
+  Link 
+} from 'react-router-dom';
+import {
+  ArrowLeft,
+  Calendar,
+  MapPin,
+  Users,
+  CreditCard,
+  User,
+  Mail,
+  Phone,
+  FileText,
+  Building2,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+  XCircle,
+  DoorOpen,
+  DoorClosed,
+  Loader2,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getBookingById,
+  cancelBooking,
+  type Booking,
+} from '../../services/api/bookingService';
+import useAuthStore from '../../store/useAuthStore';
+import Loading from '../../components/common/Loading';
+import PaymentStatusBadge from 
+  '../../components/common/PaymentStatusBadge';
+
+const BookingDetailPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuthStore();
+
+  const [booking, setBooking] = useState<Booking | null>(
+    null
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [cancelling, setCancelling] = useState(false);
+
+  // Redirect if not authenticated
+  useEffect(() => {
+    if (!isAuthenticated) {
+      toast.error(
+        'Vui lòng đăng nhập để xem chi tiết đặt phòng'
+      );
+      navigate('/login', { 
+        state: { from: `/bookings/${id}` } 
+      });
+    }
+  }, [isAuthenticated, navigate, id]);
+
+  // Fetch booking details
+  useEffect(() => {
+    if (id && isAuthenticated) {
+      fetchBookingDetails(Number(id));
+    }
+  }, [id, isAuthenticated]);
+
+  const fetchBookingDetails = async (bookingId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await getBookingById(bookingId);
+
+      if (
+        response.success && 
+        response.data?.booking
+      ) {
+        setBooking(response.data.booking);
+      } else {
+        throw new Error(
+          'Không thể tải thông tin đặt phòng'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error fetching booking:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể tải thông tin đặt phòng';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancelBooking = async () => {
+    if (!booking) return;
+
+    const confirmed = window.confirm(
+      `Bạn có chắc muốn hủy đặt phòng ` +
+      `${booking.booking_number}?\n\n` +
+      `⚠️ Lưu ý:\n` +
+      `- Bạn sẽ bị giữ 20% giá trị đơn\n` +
+      `- 80% còn lại sẽ được hoàn trả\n` +
+      `- Trạng thái phòng sẽ được cập nhật về "available"`
+    );
+
+    if (!confirmed) return;
+
+    try {
+      setCancelling(true);
+
+      const response = await cancelBooking(booking.id);
+
+      if (response.success) {
+        toast.success(
+          `✅ Đã hủy đặt phòng ${booking.booking_number} ` +
+          `thành công!`
+        );
+        
+        // Update local state
+        setBooking((prev) =>
+          prev
+            ? { ...prev, status: 'cancelled' }
+            : null
+        );
+      } else {
+        throw new Error(
+          response.message || 
+          'Không thể hủy đặt phòng'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error cancelling booking:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể hủy đặt phòng. Vui lòng thử lại.';
+      toast.error(message);
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return {
+          icon: Clock,
+          color: 'bg-yellow-100 text-yellow-800',
+          text: 'Chờ xác nhận',
+        };
+      case 'confirmed':
+        return {
+          icon: CheckCircle,
+          color: 'bg-green-100 text-green-800',
+          text: 'Đã xác nhận',
+        };
+      case 'cancelled':
+        return {
+          icon: XCircle,
+          color: 'bg-red-100 text-red-800',
+          text: 'Đã hủy',
+        };
+      case 'checked_in':
+        return {
+          icon: DoorOpen,
+          color: 'bg-blue-100 text-blue-800',
+          text: 'Đã nhận phòng',
+        };
+      case 'checked_out':
+        return {
+          icon: DoorClosed,
+          color: 'bg-gray-100 text-gray-800',
+          text: 'Đã trả phòng',
+        };
+      default:
+        return {
+          icon: AlertCircle,
+          color: 'bg-gray-100 text-gray-800',
+          text: status,
+        };
+    }
+  };
+
+  const canCancelBooking = (booking: Booking) => {
+    return (
+      booking.status === 'pending' || 
+      booking.status === 'confirmed'
+    );
+  };
+
+  if (loading) {
+    return <Loading fullScreen text="Đang tải..." />;
+  }
+
+  if (error || !booking) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          <div
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3"
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error || 'Không tìm thấy đặt phòng'}
+            </p>
+            <button
+              onClick={() => navigate('/bookings')}
+              className="px-6 py-2 bg-red-600 
+                text-white rounded-lg 
+                hover:bg-red-700 transition-colors"
+            >
+              Quay lại danh sách
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const room = booking.room;
+  const roomType = room?.room_type;
+  const statusConfig = getStatusConfig(booking.status);
+  const StatusIcon = statusConfig.icon;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* Back Button */}
+        <Link
+          to="/bookings"
+          className="inline-flex items-center gap-2 
+            text-gray-600 hover:text-gray-900 
+            mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Quay lại danh sách</span>
+        </Link>
+
+        {/* Page Title */}
+        <div className="flex items-center justify-between 
+          mb-6"
+        >
+          <h1 className="text-3xl font-bold text-gray-900">
+            Chi tiết đặt phòng
+          </h1>
+
+          {/* Status Badge */}
+          <div
+            className={`flex items-center gap-2 px-4 
+              py-2 rounded-full font-medium 
+              ${statusConfig.color}`}
+          >
+            <StatusIcon className="w-5 h-5" />
+            {statusConfig.text}
+          </div>
+        </div>
+
+        {/* Booking Number */}
+        <div className="bg-indigo-50 border 
+          border-indigo-200 rounded-lg p-4 mb-6"
+        >
+          <p className="text-sm text-indigo-600 
+            font-medium mb-1"
+          >
+            Mã đặt phòng
+          </p>
+          <p className="text-2xl font-bold text-indigo-900 
+            font-mono"
+          >
+            {booking.booking_number}
+          </p>
+        </div>
+
+        {/* Room Information */}
+        <div className="bg-white rounded-lg shadow-md 
+          p-6 mb-6"
+        >
+          <h2 className="text-xl font-bold text-gray-900 
+            mb-4"
+          >
+            Thông tin phòng
+          </h2>
+
+          {roomType && (
+            <div className="flex flex-col md:flex-row 
+              gap-6"
+            >
+              {/* Room Image */}
+              {roomType.images?.[0] && (
+                <div className="md:w-64 flex-shrink-0">
+                  <img
+                    src={roomType.images[0]}
+                    alt={roomType.name}
+                    className="w-full h-48 md:h-full 
+                      object-cover rounded-lg"
+                  />
+                </div>
+              )}
+
+              {/* Room Details */}
+              <div className="flex-1">
+                <h3 className="text-2xl font-bold 
+                  text-gray-900 mb-2"
+                >
+                  {roomType.name}
+                </h3>
+                <p className="text-gray-600 mb-4">
+                  <MapPin className="w-4 h-4 inline mr-1" />
+                  Phòng {room?.room_number} - 
+                  Tầng {room?.floor}
+                </p>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-gray-500">
+                      Sức chứa
+                    </p>
+                    <p className="font-medium text-gray-900">
+                      Tối đa {roomType.capacity} người
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">
+                      Giá phòng
+                    </p>
+                    <p className="font-medium text-indigo-600">
+                      {formatPrice(roomType.base_price)}/đêm
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Booking Details */}
+        <div className="bg-white rounded-lg shadow-md 
+          p-6 mb-6"
+        >
+          <h2 className="text-xl font-bold text-gray-900 
+            mb-4"
+          >
+            Chi tiết đặt phòng
+          </h2>
+
+          <div className="space-y-4">
+            {/* Dates */}
+            <div className="grid grid-cols-1 md:grid-cols-2 
+              gap-4"
+            >
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <Calendar className="w-4 h-4 inline mr-1" />
+                  Ngày nhận phòng
+                </p>
+                <p className="font-medium text-gray-900">
+                  {formatDate(booking.check_in_date)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <Calendar className="w-4 h-4 inline mr-1" />
+                  Ngày trả phòng
+                </p>
+                <p className="font-medium text-gray-900">
+                  {formatDate(booking.check_out_date)}
+                </p>
+              </div>
+            </div>
+
+            {/* Guest Count */}
+            <div>
+              <p className="text-sm text-gray-600 mb-1">
+                <Users className="w-4 h-4 inline mr-1" />
+                Số người
+              </p>
+              <p className="font-medium text-gray-900">
+                {booking.guest_count} người
+              </p>
+            </div>
+
+            {/* Notes */}
+            {booking.notes && (
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <FileText className="w-4 h-4 inline mr-1" />
+                  Ghi chú
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.notes}
+                </p>
+              </div>
+            )}
+
+            {/* Payment Method */}
+            <div className="border-t pt-4">
+              <p className="text-sm text-gray-600 mb-1">
+                <CreditCard className="w-4 h-4 inline mr-1" />
+                Phương thức thanh toán
+              </p>
+              <p className="font-medium text-gray-900 mb-2">
+                {booking.payment_method === 'cash'
+                  ? '💵 Thanh toán tại chỗ'
+                  : '🏦 Chuyển khoản ngân hàng'}
+              </p>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-gray-500">
+                  Trạng thái:
+                </span>
+                <PaymentStatusBadge 
+                  status={booking.payment_status}
+                  size="sm"
+                />
+              </div>
+            </div>
+
+            {/* Total Price */}
+            <div className="border-t pt-4">
+              <div className="flex justify-between 
+                items-center"
+              >
+                <span className="text-lg font-semibold 
+                  text-gray-900"
+                >
+                  Tổng thanh toán
+                </span>
+                <span className="text-2xl font-bold 
+                  text-indigo-600"
+                >
+                  {formatPrice(booking.total_price)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Guest Information */}
+        {booking.guest_info && (
+          <div className="bg-white rounded-lg shadow-md 
+            p-6 mb-6"
+          >
+            <h2 className="text-xl font-bold text-gray-900 
+              mb-4"
+            >
+              Thông tin khách hàng
+            </h2>
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm text-gray-600">
+                  <User className="w-4 h-4 inline mr-1" />
+                  Họ và tên
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.full_name}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">
+                  <Mail className="w-4 h-4 inline mr-1" />
+                  Email
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.email}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">
+                  <Phone className="w-4 h-4 inline mr-1" />
+                  Số điện thoại
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.phone}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Bank Transfer Info */}
+        {booking.payment_method === 'bank_transfer' && 
+         booking.payment_status === 'unpaid' && (
+          <div
+            className="bg-blue-50 border border-blue-200 
+              rounded-lg p-6 mb-6"
+          >
+            <div className="flex items-start gap-3">
+              <Building2
+                className="w-6 h-6 text-blue-600 
+                  mt-1 flex-shrink-0"
+              />
+              <div className="flex-1">
+                <h3 className="font-bold text-blue-900 mb-2">
+                  Thông tin chuyển khoản
+                </h3>
+                <div className="bg-white rounded p-4 
+                  space-y-2 text-sm"
+                >
+                  <p>
+                    <strong>Ngân hàng:</strong> 
+                    Vietcombank (VCB)
+                  </p>
+                  <p>
+                    <strong>Số tài khoản:</strong> 
+                    0123456789
+                  </p>
+                  <p>
+                    <strong>Chủ tài khoản:</strong> 
+                    KHACH SAN ABC
+                  </p>
+                  <p>
+                    <strong>Số tiền:</strong>{' '}
+                    <span className="text-indigo-600 
+                      font-bold"
+                    >
+                      {formatPrice(booking.total_price)}
+                    </span>
+                  </p>
+                  <p>
+                    <strong>Nội dung:</strong>{' '}
+                    <span className="font-mono 
+                      text-indigo-600"
+                    >
+                      {booking.booking_number}
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Important Notes */}
+        <div
+          className="bg-yellow-50 border border-yellow-200 
+            rounded-lg p-4 mb-6"
+        >
+          <p className="text-sm text-yellow-800 font-medium 
+            mb-2"
+          >
+            ⚠️ Important Notice
+          </p>
+          <ul className="text-sm text-yellow-700 space-y-1 
+            ml-4 list-disc"
+          >
+            <li>
+              Please bring your ID card when checking in
+            </li>
+            <li>
+              Check-in time: 14:00 / 
+              Check-out time: 12:00
+            </li>
+            {canCancelBooking(booking) && (
+              <li>
+                If you cancel the booking, 20% of 
+                the total order value will be charged
+              </li>
+            )}
+          </ul>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          {/* Payment Button for unpaid bank transfer */}
+          {booking.payment_method === 'bank_transfer' && 
+           booking.payment_status === 'unpaid' && (
+            <Link
+              to={`/payment/${booking.id}`}
+              className="flex-1 flex items-center 
+                justify-center gap-2 px-6 py-3 
+                bg-green-600 text-white rounded-lg 
+                hover:bg-green-700 transition-colors 
+                font-semibold"
+            >
+              <CreditCard className="w-5 h-5" />
+              Xác nhận thanh toán
+            </Link>
+          )}
+
+          {canCancelBooking(booking) && (
+            <button
+              onClick={handleCancelBooking}
+              disabled={cancelling}
+              className="flex-1 flex items-center 
+                justify-center gap-2 px-6 py-3 
+                bg-red-600 text-white rounded-lg 
+                hover:bg-red-700 transition-colors 
+                font-semibold disabled:bg-gray-400 
+                disabled:cursor-not-allowed"
+            >
+              {cancelling ? (
+                <>
+                  <Loader2 
+                    className="w-5 h-5 animate-spin" 
+                  />
+                  Đang hủy...
+                </>
+              ) : (
+                <>
+                  <XCircle className="w-5 h-5" />
+                  Hủy đặt phòng
+                </>
+              )}
+            </button>
+          )}
+
+          <Link
+            to="/bookings"
+            className="flex-1 flex items-center 
+              justify-center gap-2 px-6 py-3 
+              bg-gray-600 text-white rounded-lg 
+              hover:bg-gray-700 transition-colors 
+              font-semibold"
+          >
+            Quay lại danh sách
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingDetailPage;
diff --git a/client/src/pages/customer/BookingListPage.tsx b/client/src/pages/customer/BookingListPage.tsx
new file mode 100644
index 00000000..fe5c9f64
--- /dev/null
+++ b/client/src/pages/customer/BookingListPage.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Calendar, Clock, DollarSign } from 'lucide-react';
+
+const BookingListPage: React.FC = () => {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-2">
+          Lịch sử đặt phòng
+        </h1>
+        <p className="text-gray-600">
+          Quản lý và theo dõi các đặt phòng của bạn
+        </p>
+      </div>
+
+      {/* Booking List */}
+      <div className="space-y-4">
+        {[1, 2, 3].map((booking) => (
+          <div key={booking} 
+            className="bg-white rounded-lg shadow-md 
+              p-6 hover:shadow-lg transition-shadow"
+          >
+            <div className="flex flex-col md:flex-row 
+              md:items-center md:justify-between"
+            >
+              <div className="flex-1">
+                <div className="flex items-center 
+                  space-x-3 mb-3"
+                >
+                  <h3 className="text-xl font-semibold 
+                    text-gray-800"
+                  >
+                    Phòng {booking}01 - Deluxe
+                  </h3>
+                  <span className="px-3 py-1 
+                    bg-green-100 text-green-800 
+                    rounded-full text-sm font-medium"
+                  >
+                    Đã xác nhận
+                  </span>
+                </div>
+                
+                <div className="grid grid-cols-1 
+                  md:grid-cols-3 gap-4 text-sm 
+                  text-gray-600"
+                >
+                  <div className="flex items-center 
+                    space-x-2"
+                  >
+                    <Calendar className="w-4 h-4 
+                      text-blue-500" 
+                    />
+                    <span>
+                      Nhận phòng: 15/11/2025
+                    </span>
+                  </div>
+                  <div className="flex items-center 
+                    space-x-2"
+                  >
+                    <Calendar className="w-4 h-4 
+                      text-blue-500" 
+                    />
+                    <span>
+                      Trả phòng: 18/11/2025
+                    </span>
+                  </div>
+                  <div className="flex items-center 
+                    space-x-2"
+                  >
+                    <Clock className="w-4 h-4 
+                      text-blue-500" 
+                    />
+                    <span>3 đêm</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-4 md:mt-0 
+                md:ml-6 flex flex-col items-end 
+                space-y-3"
+              >
+                <div className="flex items-center 
+                  space-x-2"
+                >
+                  <DollarSign className="w-5 h-5 
+                    text-green-600" 
+                  />
+                  <span className="text-2xl font-bold 
+                    text-gray-800"
+                  >
+                    ${booking * 150}
+                  </span>
+                </div>
+                <button className="px-4 py-2 
+                  bg-blue-600 text-white rounded-lg 
+                  hover:bg-blue-700 transition-colors 
+                  text-sm"
+                >
+                  Xem chi tiết
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Empty State */}
+      {/* Uncomment khi không có booking
+      <div className="text-center py-12">
+        <p className="text-gray-500 text-lg">
+          Bạn chưa có đặt phòng nào
+        </p>
+        <button className="mt-4 px-6 py-3 
+          bg-blue-600 text-white rounded-lg 
+          hover:bg-blue-700 transition-colors"
+        >
+          Đặt phòng ngay
+        </button>
+      </div>
+      */}
+    </div>
+  );
+};
+
+export default BookingListPage;
diff --git a/client/src/pages/customer/BookingPage.tsx b/client/src/pages/customer/BookingPage.tsx
new file mode 100644
index 00000000..fadad5c5
--- /dev/null
+++ b/client/src/pages/customer/BookingPage.tsx
@@ -0,0 +1,839 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  useParams, 
+  useNavigate, 
+  Link 
+} from 'react-router-dom';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import DatePicker from 'react-datepicker';
+import { 
+  Calendar,
+  Users,
+  CreditCard,
+  Building2,
+  FileText,
+  ArrowLeft,
+  AlertCircle,
+  Loader2,
+  CheckCircle,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getRoomById, type Room } from 
+  '../../services/api/roomService';
+import { 
+  createBooking,
+  checkRoomAvailability,
+  type BookingData,
+} from '../../services/api/bookingService';
+import useAuthStore from '../../store/useAuthStore';
+import { 
+  bookingValidationSchema, 
+  type BookingFormData 
+} from '../../validators/bookingValidator';
+import Loading from '../../components/common/Loading';
+
+const BookingPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated, userInfo } = useAuthStore();
+
+  const [room, setRoom] = useState<Room | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Redirect if not authenticated
+  useEffect(() => {
+    if (!isAuthenticated) {
+      toast.error(
+        'Please login to make a booking'
+      );
+      navigate('/login', { 
+        state: { from: `/booking/${id}` } 
+      });
+    }
+  }, [isAuthenticated, navigate, id]);
+
+  // Fetch room details
+  useEffect(() => {
+    if (id && isAuthenticated) {
+      fetchRoomDetails(Number(id));
+    }
+  }, [id, isAuthenticated]);
+
+  const fetchRoomDetails = async (roomId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await getRoomById(roomId);
+
+      if (
+        (response.success || 
+          (response as any).status === 'success') && 
+        response.data?.room
+      ) {
+        setRoom(response.data.room);
+      } else {
+        throw new Error('Unable to load room information');
+      }
+    } catch (err: any) {
+      console.error('Error fetching room:', err);
+      const message =
+        err.response?.data?.message ||
+        'Unable to load room information';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Set up form with default values
+  const {
+    control,
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<BookingFormData>({
+    resolver: yupResolver(bookingValidationSchema),
+    defaultValues: {
+      checkInDate: undefined,
+      checkOutDate: undefined,
+      guestCount: 1,
+      notes: '',
+      paymentMethod: 'cash',
+      fullName: userInfo?.name || '',
+      email: userInfo?.email || '',
+      phone: userInfo?.phone || '',
+    },
+  });
+
+  // Watch form values for calculations
+  const checkInDate = watch('checkInDate');
+  const checkOutDate = watch('checkOutDate');
+  const paymentMethod = watch('paymentMethod');
+
+  // Calculate number of nights and total price
+  const numberOfNights =
+    checkInDate && checkOutDate
+      ? Math.ceil(
+          (checkOutDate.getTime() - 
+            checkInDate.getTime()) /
+            (1000 * 60 * 60 * 24)
+        )
+      : 0;
+
+  const roomPrice = 
+    room?.room_type?.base_price || 0;
+  const totalPrice = numberOfNights * roomPrice;
+
+  // Format price
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  // Handle form submission
+  const onSubmit = async (data: BookingFormData) => {
+    if (!room) return;
+
+    try {
+      setSubmitting(true);
+
+      const checkInDateStr = data.checkInDate
+        .toISOString()
+        .split('T')[0];
+      const checkOutDateStr = data.checkOutDate
+        .toISOString()
+        .split('T')[0];
+
+      // Step 1: Check room availability
+      const availability = await checkRoomAvailability(
+        room.id,
+        checkInDateStr,
+        checkOutDateStr
+      );
+
+      if (!availability.available) {
+        toast.error(
+          availability.message || 
+          'Room is already booked during this time'
+        );
+        return;
+      }
+
+      // Step 2: Prepare booking data
+      const bookingData: BookingData = {
+        room_id: room.id,
+        check_in_date: checkInDateStr,
+        check_out_date: checkOutDateStr,
+        guest_count: data.guestCount,
+        notes: data.notes || '',
+        payment_method: data.paymentMethod,
+        total_price: totalPrice,
+        guest_info: {
+          full_name: data.fullName,
+          email: data.email,
+          phone: data.phone,
+        },
+      };
+
+      // Step 3: Create booking
+      const response = await createBooking(bookingData);
+
+      if (
+        response.success && 
+        response.data?.booking
+      ) {
+        const bookingId = response.data.booking.id;
+        
+        toast.success(
+          '🎉 Booking successful!',
+          { icon: <CheckCircle className="text-green-500" /> }
+        );
+        
+        // Navigate to success page
+        navigate(`/booking-success/${bookingId}`);
+      } else {
+        throw new Error(
+          response.message || 
+          'Unable to create booking'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error creating booking:', err);
+      
+      // Handle specific error cases
+      if (err.response?.status === 409) {
+        toast.error(
+          '❌ Room is already booked during this time. ' +
+          'Please select different dates.'
+        );
+      } else if (err.response?.status === 400) {
+        toast.error(
+          err.response?.data?.message || 
+          'Invalid booking information'
+        );
+      } else {
+        const message =
+          err.response?.data?.message ||
+          'Unable to book room. Please try again.';
+        toast.error(message);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return <Loading fullScreen text="Loading..." />;
+  }
+
+  if (error || !room) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <div 
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle 
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3" 
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error || 'Room not found'}
+            </p>
+            <button
+              onClick={() => navigate('/rooms')}
+              className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+            >
+              Back to Room List
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const roomType = room.room_type;
+  if (!roomType) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        {/* Back Button */}
+        <Link
+          to={`/rooms/${room.id}`}
+          className="inline-flex items-center gap-2 
+            text-gray-600 hover:text-gray-900 
+            mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Back to room details</span>
+        </Link>
+
+        {/* Page Title */}
+        <h1 
+          className="text-3xl font-bold text-gray-900 mb-8"
+        >
+          Book Room
+        </h1>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Booking Form */}
+          <div className="lg:col-span-2">
+            <form 
+              onSubmit={handleSubmit(onSubmit)}
+              className="bg-white rounded-lg shadow-md 
+                p-6 space-y-6"
+            >
+              {/* Guest Information */}
+              <div>
+                <h2 
+                  className="text-xl font-bold 
+                    text-gray-900 mb-4"
+                >
+                  Customer Information
+                </h2>
+
+                <div className="space-y-4">
+                  {/* Full Name */}
+                  <div>
+                    <label 
+                      className="block text-sm font-medium 
+                        text-gray-700 mb-1"
+                    >
+                      Full Name
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      {...register('fullName')}
+                      type="text"
+                      className="w-full px-4 py-2 border 
+                        border-gray-300 rounded-lg 
+                        focus:ring-2 focus:ring-indigo-500 
+                        focus:border-indigo-500"
+                      placeholder="Nguyễn Văn A"
+                    />
+                    {errors.fullName && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.fullName.message}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Email & Phone */}
+                  <div className="grid grid-cols-1 
+                    md:grid-cols-2 gap-4"
+                  >
+                    <div>
+                      <label 
+                        className="block text-sm 
+                          font-medium text-gray-700 mb-1"
+                      >
+                        Email
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        {...register('email')}
+                        type="email"
+                        className="w-full px-4 py-2 border 
+                          border-gray-300 rounded-lg 
+                          focus:ring-2 
+                          focus:ring-indigo-500 
+                          focus:border-indigo-500"
+                        placeholder="email@example.com"
+                      />
+                      {errors.email && (
+                        <p className="text-sm text-red-600 
+                          mt-1"
+                        >
+                          {errors.email.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <div>
+                      <label 
+                        className="block text-sm 
+                          font-medium text-gray-700 mb-1"
+                      >
+                        Phone Number
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        {...register('phone')}
+                        type="tel"
+                        className="w-full px-4 py-2 border 
+                          border-gray-300 rounded-lg 
+                          focus:ring-2 
+                          focus:ring-indigo-500 
+                          focus:border-indigo-500"
+                        placeholder="0123456789"
+                      />
+                      {errors.phone && (
+                        <p className="text-sm text-red-600 
+                          mt-1"
+                        >
+                          {errors.phone.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Booking Details */}
+              <div className="border-t pt-6">
+                <h2 
+                  className="text-xl font-bold 
+                    text-gray-900 mb-4"
+                >
+                  Booking Details
+                </h2>
+
+                <div className="space-y-4">
+                  {/* Date Range */}
+                  <div className="grid grid-cols-1 
+                    md:grid-cols-2 gap-4"
+                  >
+                    {/* Check-in Date */}
+                    <div>
+                      <label 
+                        className="block text-sm 
+                          font-medium text-gray-700 mb-1"
+                      >
+                        <Calendar 
+                          className="w-4 h-4 inline mr-1" 
+                        />
+                        Check-in Date
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <Controller
+                        control={control}
+                        name="checkInDate"
+                        render={({ field }) => (
+                          <DatePicker
+                            selected={field.value}
+                            onChange={(date) => 
+                              field.onChange(date)
+                            }
+                            minDate={new Date()}
+                            selectsStart
+                            startDate={checkInDate}
+                            endDate={checkOutDate}
+                            dateFormat="dd/MM/yyyy"
+                            placeholderText="Select check-in date"
+                            className="w-full px-4 py-2 
+                              border border-gray-300 
+                              rounded-lg focus:ring-2 
+                              focus:ring-indigo-500 
+                              focus:border-indigo-500"
+                            wrapperClassName="w-full"
+                          />
+                        )}
+                      />
+                      {errors.checkInDate && (
+                        <p className="text-sm text-red-600 
+                          mt-1"
+                        >
+                          {errors.checkInDate.message}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Check-out Date */}
+                    <div>
+                      <label 
+                        className="block text-sm 
+                          font-medium text-gray-700 mb-1"
+                      >
+                        <Calendar 
+                          className="w-4 h-4 inline mr-1" 
+                        />
+                        Check-out Date
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <Controller
+                        control={control}
+                        name="checkOutDate"
+                        render={({ field }) => (
+                          <DatePicker
+                            selected={field.value}
+                            onChange={(date) => 
+                              field.onChange(date)
+                            }
+                            minDate={
+                              checkInDate || new Date()
+                            }
+                            selectsEnd
+                            startDate={checkInDate}
+                            endDate={checkOutDate}
+                            dateFormat="dd/MM/yyyy"
+                            placeholderText="Select check-out date"
+                            className="w-full px-4 py-2 
+                              border border-gray-300 
+                              rounded-lg focus:ring-2 
+                              focus:ring-indigo-500 
+                              focus:border-indigo-500"
+                            wrapperClassName="w-full"
+                          />
+                        )}
+                      />
+                      {errors.checkOutDate && (
+                        <p className="text-sm text-red-600 
+                          mt-1"
+                        >
+                          {errors.checkOutDate.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Guest Count */}
+                  <div>
+                    <label 
+                      className="block text-sm font-medium 
+                        text-gray-700 mb-1"
+                    >
+                      <Users 
+                        className="w-4 h-4 inline mr-1" 
+                      />
+                      Number of Guests
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      {...register('guestCount')}
+                      type="number"
+                      min="1"
+                      max={roomType.capacity}
+                      className="w-full px-4 py-2 border 
+                        border-gray-300 rounded-lg 
+                        focus:ring-2 focus:ring-indigo-500 
+                        focus:border-indigo-500"
+                      placeholder="1"
+                    />
+                    <p className="text-sm text-gray-500 mt-1">
+                      Maximum capacity: {roomType.capacity} guests
+                    </p>
+                    {errors.guestCount && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.guestCount.message}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Notes */}
+                  <div>
+                    <label 
+                      className="block text-sm font-medium 
+                        text-gray-700 mb-1"
+                    >
+                      <FileText 
+                        className="w-4 h-4 inline mr-1" 
+                      />
+                      Notes (optional)
+                    </label>
+                    <textarea
+                      {...register('notes')}
+                      rows={3}
+                      className="w-full px-4 py-2 border 
+                        border-gray-300 rounded-lg 
+                        focus:ring-2 focus:ring-indigo-500 
+                        focus:border-indigo-500"
+                      placeholder="Special requests..."
+                    />
+                    {errors.notes && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.notes.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Payment Method */}
+              <div className="border-t pt-6">
+                <h2 
+                  className="text-xl font-bold 
+                    text-gray-900 mb-4"
+                >
+                  Payment Method
+                </h2>
+
+                <div className="space-y-3">
+                  {/* Cash */}
+                  <label 
+                    className="flex items-start p-4 
+                      border-2 border-gray-200 
+                      rounded-lg cursor-pointer 
+                      hover:border-indigo-500 
+                      transition-colors"
+                  >
+                    <input
+                      {...register('paymentMethod')}
+                      type="radio"
+                      value="cash"
+                      className="mt-1 mr-3"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center 
+                        gap-2 mb-1"
+                      >
+                        <CreditCard 
+                          className="w-5 h-5 
+                            text-gray-600" 
+                        />
+                        <span className="font-medium 
+                          text-gray-900"
+                        >
+                          Pay on arrival
+                        </span>
+                        <span className="text-xs bg-orange-100 
+                          text-orange-700 px-2 py-0.5 rounded"
+                        >
+                          Requires 20% deposit
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-600 mb-2">
+                        Pay the remaining balance on arrival
+                      </p>
+                      <div className="bg-orange-50 border 
+                        border-orange-200 rounded p-2"
+                      >
+                        <p className="text-xs text-orange-800">
+                          <strong>Note:</strong> You need to pay 
+                          <strong> 20% deposit</strong> via 
+                          bank transfer immediately after booking to 
+                          secure the room. Pay the remaining balance 
+                          on arrival.
+                        </p>
+                      </div>
+                    </div>
+                  </label>
+
+                  {/* Bank Transfer */}
+                  <label 
+                    className="flex items-start p-4 
+                      border-2 border-gray-200 
+                      rounded-lg cursor-pointer 
+                      hover:border-indigo-500 
+                      transition-colors"
+                  >
+                    <input
+                      {...register('paymentMethod')}
+                      type="radio"
+                      value="bank_transfer"
+                      className="mt-1 mr-3"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center 
+                        gap-2 mb-1"
+                      >
+                        <Building2 
+                          className="w-5 h-5 
+                            text-gray-600" 
+                        />
+                        <span className="font-medium 
+                          text-gray-900"
+                        >
+                          Bank Transfer
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-600">
+                        Transfer via QR code or 
+                        account number
+                      </p>
+                    </div>
+                  </label>
+
+                  {errors.paymentMethod && (
+                    <p className="text-sm text-red-600">
+                      {errors.paymentMethod.message}
+                    </p>
+                  )}
+
+                  {/* Bank Transfer Info */}
+                  {paymentMethod === 'bank_transfer' && (
+                    <div 
+                      className="bg-blue-50 border 
+                        border-blue-200 rounded-lg 
+                        p-4 mt-3"
+                    >
+                      <p className="text-sm text-blue-800 
+                        font-medium mb-2"
+                      >
+                        📌 Bank Transfer Information
+                      </p>
+                      <p className="text-sm text-blue-700">
+                        Scan QR code or transfer according to 
+                        the information after confirming the booking.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="border-t pt-6">
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="w-full bg-indigo-600 
+                    text-white py-4 rounded-lg 
+                    hover:bg-indigo-700 
+                    transition-colors font-semibold 
+                    text-lg disabled:bg-gray-400 
+                    disabled:cursor-not-allowed
+                    flex items-center justify-center 
+                    gap-2"
+                >
+                  {submitting ? (
+                    <>
+                      <Loader2 
+                        className="w-5 h-5 animate-spin" 
+                      />
+                      Processing...
+                    </>
+                  ) : (
+                    'Confirm Booking'
+                  )}
+                </button>
+              </div>
+            </form>
+          </div>
+
+          {/* Booking Summary */}
+          <div className="lg:col-span-1">
+            <div 
+              className="bg-white rounded-lg shadow-md 
+                p-6 sticky top-8"
+            >
+              <h2 
+                className="text-xl font-bold 
+                  text-gray-900 mb-4"
+              >
+                Booking Summary
+              </h2>
+
+              {/* Room Info */}
+              <div className="mb-4">
+                {roomType.images?.[0] && (
+                  <img
+                    src={roomType.images[0]}
+                    alt={roomType.name}
+                    className="w-full h-48 object-cover 
+                      rounded-lg mb-3"
+                  />
+                )}
+                <h3 className="font-bold text-gray-900">
+                  {roomType.name}
+                </h3>
+                <p className="text-sm text-gray-600">
+                  Room {room.room_number} - Floor {room.floor}
+                </p>
+              </div>
+
+              {/* Pricing Breakdown */}
+              <div className="border-t pt-4 space-y-2">
+                <div className="flex justify-between 
+                  text-sm"
+                >
+                  <span className="text-gray-600">
+                    Room price/night
+                  </span>
+                  <span className="font-medium">
+                    {formatPrice(roomPrice)}
+                  </span>
+                </div>
+
+                {numberOfNights > 0 && (
+                  <div className="flex justify-between 
+                    text-sm"
+                  >
+                    <span className="text-gray-600">
+                      Nights
+                    </span>
+                    <span className="font-medium">
+                      {numberOfNights} night(s)
+                    </span>
+                  </div>
+                )}
+
+                <div 
+                  className="border-t pt-2 flex 
+                    justify-between text-lg 
+                    font-bold"
+                >
+                  <span>Total</span>
+                  <span className="text-indigo-600">
+                    {numberOfNights > 0
+                      ? formatPrice(totalPrice)
+                      : '---'}
+                  </span>
+                </div>
+
+                {/* Deposit amount for cash payment */}
+                {paymentMethod === 'cash' && numberOfNights > 0 && (
+                  <div className="bg-orange-50 border 
+                    border-orange-200 rounded-lg p-3 mt-2"
+                  >
+                    <div className="flex justify-between 
+                      items-center mb-1"
+                    >
+                      <span className="text-sm font-medium 
+                        text-orange-900"
+                      >
+                        Deposit to pay (20%)
+                      </span>
+                      <span className="text-lg font-bold 
+                        text-orange-700"
+                      >
+                        {formatPrice(totalPrice * 0.2)}
+                      </span>
+                    </div>
+                    <p className="text-xs text-orange-700">
+                      Pay via bank transfer to confirm booking
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Note */}
+              <div 
+                className={`border rounded-lg p-3 mt-4 ${
+                  paymentMethod === 'cash'
+                    ? 'bg-orange-50 border-orange-200'
+                    : 'bg-yellow-50 border-yellow-200'
+                }`}
+              >
+                {paymentMethod === 'cash' ? (
+                  <p className="text-xs text-orange-800">
+                    🔒 <strong>Required:</strong> Pay 20% deposit 
+                    via bank transfer after booking. 
+                    Remaining balance ({formatPrice(totalPrice * 0.8)}) 
+                    to be paid on arrival.
+                  </p>
+                ) : (
+                  <p className="text-xs text-yellow-800">
+                    💡 Scan QR code or transfer according to the information 
+                    after confirming the booking.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingPage;
diff --git a/client/src/pages/customer/BookingSuccessPage.tsx b/client/src/pages/customer/BookingSuccessPage.tsx
new file mode 100644
index 00000000..12311bef
--- /dev/null
+++ b/client/src/pages/customer/BookingSuccessPage.tsx
@@ -0,0 +1,826 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  useParams, 
+  useNavigate, 
+  Link 
+} from 'react-router-dom';
+import {
+  CheckCircle,
+  Home,
+  ListOrdered,
+  Calendar,
+  Users,
+  CreditCard,
+  MapPin,
+  Mail,
+  Phone,
+  User,
+  FileText,
+  Building2,
+  AlertCircle,
+  Copy,
+  Check,
+  Loader2,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getBookingById,
+  generateQRCode,
+  type Booking,
+} from '../../services/api/bookingService';
+import { confirmBankTransfer } from 
+  '../../services/api/paymentService';
+import Loading from '../../components/common/Loading';
+
+const BookingSuccessPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [booking, setBooking] = useState<Booking | null>(
+    null
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [copiedBookingNumber, setCopiedBookingNumber] = 
+    useState(false);
+  const [uploadingReceipt, setUploadingReceipt] = 
+    useState(false);
+  const [receiptUploaded, setReceiptUploaded] = 
+    useState(false);
+  const [selectedFile, setSelectedFile] = 
+    useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = 
+    useState<string | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      fetchBookingDetails(Number(id));
+    }
+  }, [id]);
+
+  const fetchBookingDetails = async (bookingId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await getBookingById(bookingId);
+
+      if (
+        response.success && 
+        response.data?.booking
+      ) {
+        const bookingData = response.data.booking;
+        setBooking(bookingData);
+
+        // Redirect to deposit payment page if required and not yet paid
+        if (
+          bookingData.requires_deposit && 
+          !bookingData.deposit_paid
+        ) {
+          navigate(`/deposit-payment/${bookingId}`, { replace: true });
+          return;
+        }
+      } else {
+        throw new Error(
+          'Không thể tải thông tin đặt phòng'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error fetching booking:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể tải thông tin đặt phòng';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'confirmed':
+        return 'bg-green-100 text-green-800';
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800';
+      case 'checked_in':
+        return 'bg-blue-100 text-blue-800';
+      case 'checked_out':
+        return 'bg-gray-100 text-gray-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'confirmed':
+        return 'Đã xác nhận';
+      case 'pending':
+        return 'Chờ xác nhận';
+      case 'cancelled':
+        return 'Đã hủy';
+      case 'checked_in':
+        return 'Đã nhận phòng';
+      case 'checked_out':
+        return 'Đã trả phòng';
+      default:
+        return status;
+    }
+  };
+
+  const copyBookingNumber = async () => {
+    if (!booking?.booking_number) return;
+
+    try {
+      await navigator.clipboard.writeText(
+        booking.booking_number
+      );
+      setCopiedBookingNumber(true);
+      toast.success('Đã sao chép mã đặt phòng');
+      setTimeout(() => setCopiedBookingNumber(false), 2000);
+    } catch (err) {
+      toast.error('Không thể sao chép');
+    }
+  };
+
+  const handleFileSelect = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      toast.error('Vui lòng chọn file ảnh');
+      return;
+    }
+
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('Kích thước ảnh không được vượt quá 5MB');
+      return;
+    }
+
+    setSelectedFile(file);
+
+    // Create preview
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleUploadReceipt = async () => {
+    if (!selectedFile || !booking) return;
+
+    try {
+      setUploadingReceipt(true);
+
+      // Generate transaction ID based on booking number
+      const transactionId = 
+        `TXN-${booking.booking_number}-${Date.now()}`;
+
+      const response = await confirmBankTransfer(
+        booking.id,
+        transactionId,
+        selectedFile
+      );
+
+      if (response.success) {
+        toast.success(
+          '✅ Đã gửi xác nhận thanh toán thành công! ' +
+          'Chúng tôi sẽ xác nhận trong thời gian sớm nhất.'
+        );
+        setReceiptUploaded(true);
+        
+        // Update booking payment status locally
+        setBooking((prev) =>
+          prev
+            ? { 
+                ...prev, 
+                payment_status: 'paid',
+                status: prev.status === 'pending' 
+                  ? 'confirmed' 
+                  : prev.status 
+              }
+            : null
+        );
+      } else {
+        throw new Error(
+          response.message || 
+          'Không thể xác nhận thanh toán'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error uploading receipt:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể gửi xác nhận thanh toán. ' +
+        'Vui lòng thử lại.';
+      toast.error(message);
+    } finally {
+      setUploadingReceipt(false);
+    }
+  };
+
+  const qrCodeUrl = booking
+    ? generateQRCode(
+        booking.booking_number,
+        booking.total_price
+      )
+    : null;
+
+  if (loading) {
+    return <Loading fullScreen text="Đang tải..." />;
+  }
+
+  if (error || !booking) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          <div
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3"
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error || 'Không tìm thấy đặt phòng'}
+            </p>
+            <button
+              onClick={() => navigate('/rooms')}
+              className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+            >
+              Quay lại danh sách phòng
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const room = booking.room;
+  const roomType = room?.room_type;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* Success Header */}
+        <div
+          className="bg-white rounded-lg shadow-md 
+            p-8 mb-6 text-center"
+        >
+          <div
+            className="w-20 h-20 bg-green-100 
+              rounded-full flex items-center 
+              justify-center mx-auto mb-4"
+          >
+            <CheckCircle 
+              className="w-12 h-12 text-green-600" 
+            />
+          </div>
+          <h1
+            className="text-3xl font-bold text-gray-900 
+              mb-2"
+          >
+            Đặt phòng thành công!
+          </h1>
+          <p className="text-gray-600 mb-4">
+            Cảm ơn bạn đã đặt phòng tại khách sạn của chúng 
+            tôi
+          </p>
+
+          {/* Booking Number */}
+          <div
+            className="inline-flex items-center gap-2 
+              bg-indigo-50 px-6 py-3 rounded-lg"
+          >
+            <span className="text-sm text-indigo-600 
+              font-medium"
+            >
+              Mã đặt phòng:
+            </span>
+            <span className="text-lg font-bold 
+              text-indigo-900"
+            >
+              {booking.booking_number}
+            </span>
+            <button
+              onClick={copyBookingNumber}
+              className="ml-2 p-1 hover:bg-indigo-100 
+                rounded transition-colors"
+              title="Sao chép mã"
+            >
+              {copiedBookingNumber ? (
+                <Check className="w-4 h-4 text-green-600" />
+              ) : (
+                <Copy className="w-4 h-4 text-indigo-600" />
+              )}
+            </button>
+          </div>
+
+          {/* Status Badge */}
+          <div className="mt-4">
+            <span
+              className={`inline-block px-4 py-2 
+                rounded-full text-sm font-medium 
+                ${getStatusColor(booking.status)}`}
+            >
+              {getStatusText(booking.status)}
+            </span>
+          </div>
+        </div>
+
+        {/* Booking Details */}
+        <div className="bg-white rounded-lg shadow-md 
+          p-6 mb-6"
+        >
+          <h2 className="text-xl font-bold text-gray-900 
+            mb-4"
+          >
+            Chi tiết đặt phòng
+          </h2>
+
+          <div className="space-y-4">
+            {/* Room Information */}
+            {roomType && (
+              <div className="border-b pb-4">
+                <div className="flex items-start gap-4">
+                  {roomType.images?.[0] && (
+                    <img
+                      src={roomType.images[0]}
+                      alt={roomType.name}
+                      className="w-24 h-24 object-cover 
+                        rounded-lg"
+                    />
+                  )}
+                  <div className="flex-1">
+                    <h3 className="font-bold text-lg 
+                      text-gray-900"
+                    >
+                      {roomType.name}
+                    </h3>
+                    {room && (
+                      <p className="text-gray-600 text-sm">
+                        <MapPin className="w-4 h-4 
+                          inline mr-1" 
+                        />
+                        Phòng {room.room_number} - 
+                        Tầng {room.floor}
+                      </p>
+                    )}
+                    <p className="text-indigo-600 
+                      font-semibold mt-1"
+                    >
+                      {formatPrice(roomType.base_price)}/đêm
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Dates */}
+            <div className="grid grid-cols-1 md:grid-cols-2 
+              gap-4"
+            >
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <Calendar className="w-4 h-4 inline mr-1" />
+                  Ngày nhận phòng
+                </p>
+                <p className="font-medium text-gray-900">
+                  {formatDate(booking.check_in_date)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <Calendar className="w-4 h-4 inline mr-1" />
+                  Ngày trả phòng
+                </p>
+                <p className="font-medium text-gray-900">
+                  {formatDate(booking.check_out_date)}
+                </p>
+              </div>
+            </div>
+
+            {/* Guest Count */}
+            <div>
+              <p className="text-sm text-gray-600 mb-1">
+                <Users className="w-4 h-4 inline mr-1" />
+                Số người
+              </p>
+              <p className="font-medium text-gray-900">
+                {booking.guest_count} người
+              </p>
+            </div>
+
+            {/* Notes */}
+            {booking.notes && (
+              <div>
+                <p className="text-sm text-gray-600 mb-1">
+                  <FileText className="w-4 h-4 inline mr-1" />
+                  Ghi chú
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.notes}
+                </p>
+              </div>
+            )}
+
+            {/* Payment Method */}
+            <div className="border-t pt-4">
+              <p className="text-sm text-gray-600 mb-1">
+                <CreditCard className="w-4 h-4 inline mr-1" />
+                Phương thức thanh toán
+              </p>
+              <p className="font-medium text-gray-900">
+                {booking.payment_method === 'cash'
+                  ? '💵 Thanh toán tại chỗ'
+                  : '🏦 Chuyển khoản ngân hàng'}
+              </p>
+            </div>
+
+            {/* Total Price */}
+            <div className="border-t pt-4">
+              <div className="flex justify-between 
+                items-center"
+              >
+                <span className="text-lg font-semibold 
+                  text-gray-900"
+                >
+                  Tổng thanh toán
+                </span>
+                <span className="text-2xl font-bold 
+                  text-indigo-600"
+                >
+                  {formatPrice(booking.total_price)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Guest Information */}
+        {booking.guest_info && (
+          <div className="bg-white rounded-lg shadow-md 
+            p-6 mb-6"
+          >
+            <h2 className="text-xl font-bold text-gray-900 
+              mb-4"
+            >
+              Thông tin khách hàng
+            </h2>
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm text-gray-600">
+                  <User className="w-4 h-4 inline mr-1" />
+                  Họ và tên
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.full_name}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">
+                  <Mail className="w-4 h-4 inline mr-1" />
+                  Email
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.email}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">
+                  <Phone className="w-4 h-4 inline mr-1" />
+                  Số điện thoại
+                </p>
+                <p className="font-medium text-gray-900">
+                  {booking.guest_info.phone}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Bank Transfer Instructions */}
+        {booking.payment_method === 'bank_transfer' && (
+          <div
+            className="bg-blue-50 border border-blue-200 
+              rounded-lg p-6 mb-6"
+          >
+            <div className="flex items-start gap-3 mb-4">
+              <Building2 
+                className="w-6 h-6 text-blue-600 
+                  mt-1 flex-shrink-0" 
+              />
+              <div className="flex-1">
+                <h3 className="font-bold text-blue-900 mb-2">
+                  Hướng dẫn chuyển khoản
+                </h3>
+                <div className="space-y-2 text-sm 
+                  text-blue-800"
+                >
+                  <p>
+                    Vui lòng chuyển khoản theo thông tin sau:
+                  </p>
+                  
+                  <div className="grid grid-cols-1 
+                    md:grid-cols-2 gap-4"
+                  >
+                    {/* Bank Info */}
+                    <div className="bg-white rounded-lg 
+                      p-4 space-y-2"
+                    >
+                      <p>
+                        <strong>Ngân hàng:</strong> 
+                        Vietcombank (VCB)
+                      </p>
+                      <p>
+                        <strong>Số tài khoản:</strong> 
+                        0123456789
+                      </p>
+                      <p>
+                        <strong>Chủ tài khoản:</strong> 
+                        KHACH SAN ABC
+                      </p>
+                      <p>
+                        <strong>Số tiền:</strong>{' '}
+                        <span className="text-indigo-600 
+                          font-bold"
+                        >
+                          {formatPrice(booking.total_price)}
+                        </span>
+                      </p>
+                      <p>
+                        <strong>Nội dung:</strong>{' '}
+                        <span className="font-mono 
+                          text-indigo-600"
+                        >
+                          {booking.booking_number}
+                        </span>
+                      </p>
+                    </div>
+
+                    {/* QR Code */}
+                    {qrCodeUrl && (
+                      <div className="bg-white rounded-lg 
+                        p-4 flex flex-col items-center 
+                        justify-center"
+                      >
+                        <p className="text-sm font-medium 
+                          text-gray-700 mb-2"
+                        >
+                          Quét mã QR để chuyển khoản
+                        </p>
+                        <img
+                          src={qrCodeUrl}
+                          alt="QR Code"
+                          className="w-48 h-48 border-2 
+                            border-gray-200 rounded-lg"
+                        />
+                        <p className="text-xs text-gray-500 
+                          mt-2 text-center"
+                        >
+                          Mã QR đã bao gồm đầy đủ thông tin
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  <p className="text-xs italic mt-2">
+                    💡 Lưu ý: Vui lòng ghi đúng mã đặt phòng 
+                    vào nội dung chuyển khoản để chúng tôi 
+                    có thể xác nhận thanh toán của bạn.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Upload Receipt Section */}
+            {!receiptUploaded ? (
+              <div className="border-t border-blue-200 
+                pt-4"
+              >
+                <h4 className="font-semibold text-blue-900 
+                  mb-3"
+                >
+                  📎 Xác nhận thanh toán
+                </h4>
+                <p className="text-sm text-blue-700 mb-3">
+                  Sau khi chuyển khoản, vui lòng tải lên 
+                  ảnh biên lai để chúng tôi xác nhận nhanh 
+                  hơn.
+                </p>
+
+                <div className="space-y-3">
+                  {/* File Input */}
+                  <div>
+                    <label
+                      htmlFor="receipt-upload"
+                      className="block w-full px-4 py-3 
+                        border-2 border-dashed 
+                        border-blue-300 rounded-lg 
+                        text-center cursor-pointer 
+                        hover:border-blue-400 
+                        hover:bg-blue-100/50 
+                        transition-colors"
+                    >
+                      <input
+                        id="receipt-upload"
+                        type="file"
+                        accept="image/*"
+                        onChange={handleFileSelect}
+                        className="hidden"
+                      />
+                      <div className="flex flex-col 
+                        items-center gap-2"
+                      >
+                        {previewUrl ? (
+                          <>
+                            <img
+                              src={previewUrl}
+                              alt="Preview"
+                              className="w-32 h-32 
+                                object-cover rounded"
+                            />
+                            <p className="text-sm 
+                              text-blue-600 font-medium"
+                            >
+                              {selectedFile?.name}
+                            </p>
+                            <p className="text-xs 
+                              text-gray-500"
+                            >
+                              Click để chọn ảnh khác
+                            </p>
+                          </>
+                        ) : (
+                          <>
+                            <FileText 
+                              className="w-8 h-8 
+                                text-blue-400" 
+                            />
+                            <p className="text-sm 
+                              text-blue-600 font-medium"
+                            >
+                              Chọn ảnh biên lai
+                            </p>
+                            <p className="text-xs 
+                              text-gray-500"
+                            >
+                              PNG, JPG, JPEG (Tối đa 5MB)
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </label>
+                  </div>
+
+                  {/* Upload Button */}
+                  {selectedFile && (
+                    <button
+                      onClick={handleUploadReceipt}
+                      disabled={uploadingReceipt}
+                      className="w-full px-4 py-3 
+                        bg-blue-600 text-white 
+                        rounded-lg hover:bg-blue-700 
+                        transition-colors font-semibold 
+                        disabled:bg-gray-400 
+                        disabled:cursor-not-allowed
+                        flex items-center 
+                        justify-center gap-2"
+                    >
+                      {uploadingReceipt ? (
+                        <>
+                          <Loader2 
+                            className="w-5 h-5 
+                              animate-spin" 
+                          />
+                          Đang gửi...
+                        </>
+                      ) : (
+                        <>
+                          <CheckCircle 
+                            className="w-5 h-5" 
+                          />
+                          Xác nhận đã thanh toán
+                        </>
+                      )}
+                    </button>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="border-t border-green-200 
+                pt-4 bg-green-50 rounded-lg p-4"
+              >
+                <div className="flex items-center 
+                  gap-3"
+                >
+                  <CheckCircle 
+                    className="w-6 h-6 text-green-600 
+                      flex-shrink-0" 
+                  />
+                  <div>
+                    <p className="font-semibold 
+                      text-green-900"
+                    >
+                      Payment confirmation sent
+                    </p>
+                    <p className="text-sm text-green-700">
+                      We will confirm your order 
+                      as soon as possible.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Important Notice */}
+        <div
+          className="bg-yellow-50 border border-yellow-200 
+            rounded-lg p-4 mb-6"
+        >
+          <p className="text-sm text-yellow-800">
+            ⚠️ <strong>Important Notice:</strong>
+          </p>
+          <ul className="text-sm text-yellow-700 mt-2 
+            space-y-1 ml-4 list-disc"
+          >
+            <li>
+              Please bring your ID card when checking in
+            </li>
+            <li>
+              Check-in time: 14:00 / 
+              Check-out time: 12:00
+            </li>
+            <li>
+              If you cancel the booking, 20% of 
+              the total order value will be charged
+            </li>
+            {booking.payment_method === 'bank_transfer' && (
+              <li>
+                Please transfer within 24 hours 
+                to secure your room
+              </li>
+            )}
+          </ul>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          <Link
+            to="/bookings"
+            className="flex-1 flex items-center 
+              justify-center gap-2 px-6 py-3 
+              bg-indigo-600 text-white rounded-lg 
+              hover:bg-indigo-700 transition-colors 
+              font-semibold"
+          >
+            <ListOrdered className="w-5 h-5" />
+            Xem đơn của tôi
+          </Link>
+          <Link
+            to="/"
+            className="flex-1 flex items-center 
+              justify-center gap-2 px-6 py-3 
+              bg-gray-600 text-white rounded-lg 
+              hover:bg-gray-700 transition-colors 
+              font-semibold"
+          >
+            <Home className="w-5 h-5" />
+            Về trang chủ
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingSuccessPage;
diff --git a/client/src/pages/customer/DashboardPage.tsx b/client/src/pages/customer/DashboardPage.tsx
new file mode 100644
index 00000000..377b4d63
--- /dev/null
+++ b/client/src/pages/customer/DashboardPage.tsx
@@ -0,0 +1,243 @@
+import React from 'react';
+import { 
+  TrendingUp, 
+  Hotel, 
+  DollarSign,
+  Calendar,
+  Activity
+} from 'lucide-react';
+
+const DashboardPage: React.FC = () => {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-2">
+          Dashboard
+        </h1>
+        <p className="text-gray-600">
+          Tổng quan hoạt động của bạn
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 
+        lg:grid-cols-4 gap-6 mb-8"
+      >
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <div className="flex items-center 
+            justify-between mb-4"
+          >
+            <div className="p-3 bg-blue-100 rounded-lg">
+              <Calendar className="w-6 h-6 
+                text-blue-600" 
+              />
+            </div>
+            <span className="text-sm text-green-600 
+              font-medium"
+            >
+              +12%
+            </span>
+          </div>
+          <h3 className="text-gray-500 text-sm 
+            font-medium mb-1"
+          >
+            Tổng đặt phòng
+          </h3>
+          <p className="text-3xl font-bold text-gray-800">
+            45
+          </p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <div className="flex items-center 
+            justify-between mb-4"
+          >
+            <div className="p-3 bg-green-100 rounded-lg">
+              <DollarSign className="w-6 h-6 
+                text-green-600" 
+              />
+            </div>
+            <span className="text-sm text-green-600 
+              font-medium"
+            >
+              +8%
+            </span>
+          </div>
+          <h3 className="text-gray-500 text-sm 
+            font-medium mb-1"
+          >
+            Tổng chi tiêu
+          </h3>
+          <p className="text-3xl font-bold text-gray-800">
+            $12,450
+          </p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <div className="flex items-center 
+            justify-between mb-4"
+          >
+            <div className="p-3 bg-purple-100 rounded-lg">
+              <Hotel className="w-6 h-6 text-purple-600" />
+            </div>
+            <span className="text-sm text-green-600 
+              font-medium"
+            >
+              Active
+            </span>
+          </div>
+          <h3 className="text-gray-500 text-sm 
+            font-medium mb-1"
+          >
+            Đang ở
+          </h3>
+          <p className="text-3xl font-bold text-gray-800">
+            2
+          </p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <div className="flex items-center 
+            justify-between mb-4"
+          >
+            <div className="p-3 bg-orange-100 rounded-lg">
+              <TrendingUp className="w-6 h-6 
+                text-orange-600" 
+              />
+            </div>
+            <span className="text-sm text-green-600 
+              font-medium"
+            >
+              +15%
+            </span>
+          </div>
+          <h3 className="text-gray-500 text-sm 
+            font-medium mb-1"
+          >
+            Điểm thưởng
+          </h3>
+          <p className="text-3xl font-bold text-gray-800">
+            1,250
+          </p>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 
+        gap-6"
+      >
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <h2 className="text-xl font-semibold 
+            text-gray-800 mb-4"
+          >
+            Hoạt động gần đây
+          </h2>
+          <div className="space-y-4">
+            {[
+              { 
+                action: 'Đặt phòng', 
+                room: 'Phòng 201', 
+                time: '2 giờ trước' 
+              },
+              { 
+                action: 'Check-in', 
+                room: 'Phòng 105', 
+                time: '1 ngày trước' 
+              },
+              { 
+                action: 'Check-out', 
+                room: 'Phòng 302', 
+                time: '3 ngày trước' 
+              },
+            ].map((activity, index) => (
+              <div key={index} 
+                className="flex items-center space-x-4 
+                  pb-4 border-b border-gray-200 
+                  last:border-0"
+              >
+                <div className="p-2 bg-blue-100 
+                  rounded-lg"
+                >
+                  <Activity className="w-5 h-5 
+                    text-blue-600" 
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="font-medium text-gray-800">
+                    {activity.action}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    {activity.room}
+                  </p>
+                </div>
+                <span className="text-sm text-gray-400">
+                  {activity.time}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md 
+          p-6"
+        >
+          <h2 className="text-xl font-semibold 
+            text-gray-800 mb-4"
+          >
+            Đặt phòng sắp tới
+          </h2>
+          <div className="space-y-4">
+            {[
+              { 
+                room: 'Phòng 401', 
+                date: '20/11/2025', 
+                status: 'Đã xác nhận' 
+              },
+              { 
+                room: 'Phòng 203', 
+                date: '25/11/2025', 
+                status: 'Chờ xác nhận' 
+              },
+            ].map((booking, index) => (
+              <div key={index} 
+                className="flex items-center 
+                  justify-between pb-4 border-b 
+                  border-gray-200 last:border-0"
+              >
+                <div>
+                  <p className="font-medium text-gray-800">
+                    {booking.room}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    {booking.date}
+                  </p>
+                </div>
+                <span className={`px-3 py-1 rounded-full 
+                  text-xs font-medium 
+                  ${booking.status === 'Đã xác nhận' 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-yellow-100 text-yellow-800'
+                  }`}
+                >
+                  {booking.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;
diff --git a/client/src/pages/customer/DepositPaymentPage.tsx b/client/src/pages/customer/DepositPaymentPage.tsx
new file mode 100644
index 00000000..a41aa313
--- /dev/null
+++ b/client/src/pages/customer/DepositPaymentPage.tsx
@@ -0,0 +1,546 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import {
+  CheckCircle,
+  AlertCircle,
+  CreditCard,
+  Building2,
+  Copy,
+  Check,
+  Loader2,
+  ArrowLeft,
+  Download,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getBookingById, type Booking } from 
+  '../../services/api/bookingService';
+import {
+  getPaymentsByBookingId,
+  getBankTransferInfo,
+  notifyPaymentCompletion,
+  type Payment,
+  type BankInfo,
+} from '../../services/api/paymentService';
+import Loading from '../../components/common/Loading';
+
+const DepositPaymentPage: React.FC = () => {
+  const { bookingId } = useParams<{ bookingId: string }>();
+  const navigate = useNavigate();
+
+  const [booking, setBooking] = useState<Booking | null>(null);
+  const [depositPayment, setDepositPayment] = useState<Payment | null>(null);
+  const [bankInfo, setBankInfo] = useState<BankInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notifying, setNotifying] = useState(false);
+  const [copiedText, setCopiedText] = useState<string | null>(null);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<
+    'bank_transfer' | null
+    >('bank_transfer');
+
+  useEffect(() => {
+    if (bookingId) {
+      fetchData(Number(bookingId));
+    }
+  }, [bookingId]);
+
+  const fetchData = async (id: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Fetch booking details
+      const bookingResponse = await getBookingById(id);
+      if (!bookingResponse.success || !bookingResponse.data?.booking) {
+        throw new Error('Không tìm thấy booking');
+      }
+
+      const bookingData = bookingResponse.data.booking;
+      setBooking(bookingData);
+
+      // Check if booking requires deposit
+      if (!bookingData.requires_deposit) {
+        toast.info('Booking này không yêu cầu đặt cọc');
+        navigate(`/bookings/${id}`);
+        return;
+      }
+
+      // Fetch payments
+      const paymentsResponse = await getPaymentsByBookingId(id);
+      if (paymentsResponse.success) {
+        const deposit = paymentsResponse.data.payments.find(
+          (p) => p.payment_type === 'deposit'
+        );
+        if (deposit) {
+          setDepositPayment(deposit);
+
+          // If payment is pending, fetch bank info
+          if (deposit.payment_status === 'pending') {
+            const bankInfoResponse = await getBankTransferInfo(deposit.id);
+            if (bankInfoResponse.success && bankInfoResponse.data.bank_info) {
+              setBankInfo(bankInfoResponse.data.bank_info);
+            }
+          }
+        }
+      }
+    } catch (err: any) {
+      console.error('Error fetching data:', err);
+      const message =
+        err.response?.data?.message || 'Không thể tải thông tin thanh toán';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(label);
+      toast.success(`Copied ${label}`);
+      setTimeout(() => setCopiedText(null), 2000);
+    } catch (err) {
+      toast.error('Unable to copy');
+    }
+  };
+
+  // No auto-redirect payment methods. Default to bank transfer.
+
+  const handleNotifyPayment = async () => {
+    if (!depositPayment) return;
+
+    try {
+      setNotifying(true);
+      const response = await notifyPaymentCompletion(
+        depositPayment.id,
+        'Customer has transferred deposit'
+      );
+
+      if (response.success) {
+        toast.success(
+          '✅ Payment notification sent! ' +
+            'We will confirm within 24 hours.'
+        );
+        navigate(`/bookings/${bookingId}`);
+      } else {
+        throw new Error(response.message || 'Unable to send notification');
+      }
+    } catch (err: any) {
+      console.error('Error notifying payment:', err);
+      const message =
+        err.response?.data?.message ||
+        'Unable to send notification. Please try again.';
+      toast.error(message);
+    } finally {
+      setNotifying(false);
+    }
+  };
+
+  // VNPay removed: no online redirect handler
+
+  if (loading) {
+    return <Loading fullScreen text="Loading..." />;
+  }
+
+  if (error || !booking || !depositPayment) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          <div
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-3" />
+            <p className="text-red-700 font-medium mb-4">
+              {error || 'Không tìm thấy thông tin thanh toán'}
+            </p>
+            <Link
+              to="/bookings"
+              className="inline-flex items-center gap-2 px-6 py-2 
+                bg-red-600 text-white rounded-lg hover:bg-red-700 
+                transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Quay lại danh sách booking
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const depositAmount = parseFloat(depositPayment.amount.toString());
+  const remainingAmount = booking.total_price - depositAmount;
+  const isDepositPaid = depositPayment.payment_status === 'completed';
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* Back Button */}
+        <Link
+          to={`/bookings/${bookingId}`}
+          className="inline-flex items-center gap-2 text-gray-600 
+            hover:text-gray-900 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Quay lại chi tiết booking</span>
+        </Link>
+
+        {/* Success Header (if paid) */}
+        {isDepositPaid && (
+          <div
+            className="bg-green-50 border-2 border-green-200 
+              rounded-lg p-6 mb-6"
+          >
+            <div className="flex items-center gap-4">
+              <div
+                className="w-16 h-16 bg-green-100 rounded-full 
+                  flex items-center justify-center"
+              >
+                <CheckCircle className="w-10 h-10 text-green-600" />
+              </div>
+              <div className="flex-1">
+                <h1 className="text-2xl font-bold text-green-900 mb-1">
+                  Đã thanh toán đặt cọc thành công!
+                </h1>
+                <p className="text-green-700">
+                  Booking của bạn đã được xác nhận. 
+                  Phần còn lại thanh toán khi nhận phòng.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Pending Header */}
+        {!isDepositPaid && (
+          <div
+            className="bg-orange-50 border-2 border-orange-200 
+              rounded-lg p-6 mb-6"
+          >
+            <div className="flex items-center gap-4">
+              <div
+                className="w-16 h-16 bg-orange-100 rounded-full 
+                  flex items-center justify-center"
+              >
+                <CreditCard className="w-10 h-10 text-orange-600" />
+              </div>
+              <div className="flex-1">
+                <h1 className="text-2xl font-bold text-orange-900 mb-1">
+                  Thanh toán tiền đặt cọc
+                </h1>
+                <p className="text-orange-700">
+                  Vui lòng thanh toán <strong>20% tiền cọc</strong> để 
+                  xác nhận đặt phòng
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Payment Info */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Payment Summary */}
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <h2 className="text-xl font-bold text-gray-900 mb-4">
+                Thông tin thanh toán
+              </h2>
+
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Tổng tiền phòng</span>
+                  <span className="font-medium">
+                    {formatPrice(booking.total_price)}
+                  </span>
+                </div>
+
+                <div
+                  className="flex justify-between border-t pt-3 
+                    text-orange-600"
+                >
+                  <span className="font-medium">
+                    Tiền cọc cần thanh toán (20%)
+                  </span>
+                  <span className="text-xl font-bold">
+                    {formatPrice(depositAmount)}
+                  </span>
+                </div>
+
+                <div className="flex justify-between text-sm text-gray-500">
+                  <span>Phần còn lại thanh toán khi nhận phòng</span>
+                  <span>{formatPrice(remainingAmount)}</span>
+                </div>
+              </div>
+
+              {isDepositPaid && (
+                <div className="mt-4 bg-green-50 border border-green-200 rounded p-3">
+                  <p className="text-sm text-green-800">
+                    ✓ Đã thanh toán tiền cọc vào:{' '}
+                    {depositPayment.payment_date
+                      ? new Date(depositPayment.payment_date).toLocaleString('en-US')
+                      : 'N/A'}
+                  </p>
+                  {depositPayment.transaction_id && (
+                    <p className="text-xs text-green-700 mt-1">
+                      Mã giao dịch: {depositPayment.transaction_id}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Payment Method Selection */}
+            {!isDepositPaid && (
+              <div className="bg-white rounded-lg shadow-md p-6">
+                <h2 className="text-xl font-bold text-gray-900 mb-6">
+                  Chọn phương thức thanh toán
+                </h2>
+
+                {/* Payment Method Buttons */}
+                <div className="grid grid-cols-2 gap-4 mb-6">
+                  {/* Bank Transfer Button */}
+                  <button
+                    onClick={() => setSelectedPaymentMethod('bank_transfer')}
+                    className={`p-4 border-2 rounded-lg transition-all 
+                      ${
+                        selectedPaymentMethod === 'bank_transfer'
+                          ? 'border-indigo-500 bg-indigo-50'
+                          : 'border-gray-300 bg-white hover:border-indigo-300'
+                      }`}
+                  >
+                    <Building2
+                      className={`w-8 h-8 mx-auto mb-2 ${
+                        selectedPaymentMethod === 'bank_transfer'
+                          ? 'text-indigo-600'
+                          : 'text-gray-600'
+                      }`}
+                    />
+                    <div
+                      className={`font-bold text-sm ${
+                        selectedPaymentMethod === 'bank_transfer'
+                          ? 'text-indigo-900'
+                          : 'text-gray-700'
+                      }`}
+                    >
+                      Chuyển khoản
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">
+                      Chuyển khoản ngân hàng
+                    </div>
+                  </button>
+
+                  {/* VNPay removed */}
+                </div>
+
+                
+              </div>
+            )}
+
+            {/* Bank Transfer Instructions or VNPay panel */}
+            {!isDepositPaid && selectedPaymentMethod === 'bank_transfer' &&
+              bankInfo && (
+              <div className="bg-white rounded-lg shadow-md p-6">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">
+                  <Building2 className="w-5 h-5 inline mr-2" />
+                  Thông tin chuyển khoản
+                </h2>
+
+                <div className="space-y-4">
+                  {/* Bank Info */}
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                      <div>
+                        <div className="text-xs text-gray-500">Ngân hàng</div>
+                        <div className="font-medium">{bankInfo.bank_name}</div>
+                      </div>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(bankInfo.bank_name, 'tên ngân hàng')
+                        }
+                        className="p-2 hover:bg-gray-200 rounded transition-colors"
+                      >
+                        {copiedText === 'tên ngân hàng' ? (
+                          <Check className="w-4 h-4 text-green-600" />
+                        ) : (
+                          <Copy className="w-4 h-4 text-gray-600" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                      <div>
+                        <div className="text-xs text-gray-500">Số tài khoản</div>
+                        <div className="font-medium font-mono">
+                          {bankInfo.account_number}
+                        </div>
+                      </div>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(bankInfo.account_number, 'số tài khoản')
+                        }
+                        className="p-2 hover:bg-gray-200 rounded transition-colors"
+                      >
+                        {copiedText === 'số tài khoản' ? (
+                          <Check className="w-4 h-4 text-green-600" />
+                        ) : (
+                          <Copy className="w-4 h-4 text-gray-600" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                      <div>
+                        <div className="text-xs text-gray-500">Chủ tài khoản</div>
+                        <div className="font-medium">{bankInfo.account_name}</div>
+                      </div>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(bankInfo.account_name, 'chủ tài khoản')
+                        }
+                        className="p-2 hover:bg-gray-200 rounded transition-colors"
+                      >
+                        {copiedText === 'chủ tài khoản' ? (
+                          <Check className="w-4 h-4 text-green-600" />
+                        ) : (
+                          <Copy className="w-4 h-4 text-gray-600" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="flex justify-between items-center p-3 bg-orange-50 border border-orange-200 rounded">
+                      <div>
+                        <div className="text-xs text-orange-700">Số tiền</div>
+                        <div className="text-lg font-bold text-orange-600">
+                          {formatPrice(bankInfo.amount)}
+                        </div>
+                      </div>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(bankInfo.amount.toString(), 'số tiền')
+                        }
+                        className="p-2 hover:bg-orange-100 rounded transition-colors"
+                      >
+                        {copiedText === 'số tiền' ? (
+                          <Check className="w-4 h-4 text-green-600" />
+                        ) : (
+                          <Copy className="w-4 h-4 text-orange-600" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                      <div>
+                        <div className="text-xs text-gray-500">Nội dung chuyển khoản</div>
+                        <div className="font-medium font-mono text-red-600">
+                          {bankInfo.content}
+                        </div>
+                      </div>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(bankInfo.content, 'nội dung')
+                        }
+                        className="p-2 hover:bg-gray-200 rounded transition-colors"
+                      >
+                        {copiedText === 'nội dung' ? (
+                          <Check className="w-4 h-4 text-green-600" />
+                        ) : (
+                          <Copy className="w-4 h-4 text-gray-600" />
+                        )}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="bg-yellow-50 border border-yellow-200 rounded p-3">
+                    <p className="text-sm text-yellow-800">
+                      <strong>⚠️ Lưu ý:</strong> Vui lòng nhập đúng nội dung chuyển khoản để 
+                      hệ thống tự động xác nhận thanh toán.
+                    </p>
+                  </div>
+
+                  {/* Notify Button */}
+                  <button
+                    onClick={handleNotifyPayment}
+                    disabled={notifying}
+                    className="w-full bg-indigo-600 text-white py-3 rounded-lg 
+                      hover:bg-indigo-700 transition-colors font-semibold 
+                      disabled:bg-gray-400 disabled:cursor-not-allowed 
+                      flex items-center justify-center gap-2"
+                  >
+                    {notifying ? (
+                      <>
+                        <Loader2 className="w-5 h-5 animate-spin" />
+                        Đang gửi...
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className="w-5 h-5" />
+                        Tôi đã chuyển khoản
+                      </>
+                    )}
+                  </button>
+                  <p className="text-xs text-center text-gray-500 mt-2">
+                    Sau khi chuyển khoản, nhấn nút trên để thông báo cho chúng tôi
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* VNPay removed */}
+          </div>
+
+          {/* QR Code Sidebar */}
+          {!isDepositPaid && 
+            bankInfo && 
+            selectedPaymentMethod === 'bank_transfer' && (
+            <div className="lg:col-span-1">
+              <div className="bg-white rounded-lg shadow-md p-6 sticky top-8">
+                <h3 className="text-lg font-bold text-gray-900 mb-4 text-center">
+                  Quét mã QR để thanh toán
+                </h3>
+
+                <div className="bg-gray-50 p-4 rounded-lg mb-4">
+                  <img
+                    src={bankInfo.qr_url}
+                    alt="QR Code"
+                    className="w-full h-auto rounded"
+                  />
+                </div>
+
+                <div className="text-center space-y-2">
+                  <p className="text-sm text-gray-600">
+                    Quét mã QR bằng app ngân hàng
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    Thông tin chuyển khoản đã được điền tự động
+                  </p>
+                </div>
+
+                <a
+                  href={bankInfo.qr_url}
+                  download={`deposit-qr-${booking.booking_number}.jpg`}
+                  className="mt-4 w-full inline-flex items-center justify-center 
+                    gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 
+                    text-gray-700 rounded-lg transition-colors"
+                >
+                  <Download className="w-4 h-4" />
+                  Tải mã QR
+                </a>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DepositPaymentPage;
diff --git a/client/src/pages/customer/FavoritesPage.tsx b/client/src/pages/customer/FavoritesPage.tsx
new file mode 100644
index 00000000..331235e5
--- /dev/null
+++ b/client/src/pages/customer/FavoritesPage.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Heart, AlertCircle, ArrowLeft } from 'lucide-react';
+import { RoomCard, RoomCardSkeleton } from 
+  '../../components/rooms';
+import useFavoritesStore from 
+  '../../store/useFavoritesStore';
+import useAuthStore from '../../store/useAuthStore';
+
+const FavoritesPage: React.FC = () => {
+  const { isAuthenticated } = useAuthStore();
+  const { 
+    favorites, 
+    isLoading, 
+    error, 
+    fetchFavorites 
+  } = useFavoritesStore();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchFavorites();
+    }
+  }, [isAuthenticated, fetchFavorites]);
+
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <div 
+            className="bg-yellow-50 border 
+              border-yellow-200 rounded-lg 
+              p-8 text-center"
+          >
+            <AlertCircle 
+              className="w-12 h-12 text-yellow-500 
+                mx-auto mb-3" 
+            />
+            <h3 
+              className="text-xl font-bold 
+                text-gray-900 mb-2"
+            >
+              Vui lòng đăng nhập
+            </h3>
+            <p className="text-gray-600 mb-4">
+              Bạn cần đăng nhập để xem danh sách yêu thích
+            </p>
+            <Link
+              to="/login"
+              className="inline-block px-6 py-3 
+                bg-indigo-600 text-white rounded-lg 
+                hover:bg-indigo-700 transition-colors 
+                font-semibold"
+            >
+              Đăng nhập
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 
+              text-gray-600 hover:text-gray-900 
+              mb-4 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span>Quay lại trang chủ</span>
+          </Link>
+
+          <div className="flex items-center gap-3">
+            <Heart 
+              className="w-8 h-8 text-red-500" 
+              fill="currentColor" 
+            />
+            <div>
+              <h1 
+                className="text-3xl font-bold 
+                  text-gray-900"
+              >
+                Danh sách yêu thích
+              </h1>
+              <p className="text-gray-600 mt-1">
+                {favorites.length > 0
+                  ? `${favorites.length} phòng`
+                  : 'Chưa có phòng yêu thích'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div 
+            className="grid grid-cols-1 md:grid-cols-2 
+              lg:grid-cols-3 gap-6"
+          >
+            {[...Array(6)].map((_, index) => (
+              <RoomCardSkeleton key={index} />
+            ))}
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !isLoading && (
+          <div 
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle 
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3" 
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error}
+            </p>
+            <button
+              onClick={fetchFavorites}
+              className="px-6 py-2 bg-red-600 
+                text-white rounded-lg 
+                hover:bg-red-700 transition-colors"
+            >
+              Thử lại
+            </button>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && 
+          !error && 
+          favorites.length === 0 && (
+          <div 
+            className="bg-white rounded-lg shadow-sm 
+              p-12 text-center"
+          >
+            <div 
+              className="w-24 h-24 bg-gray-100 
+                rounded-full flex items-center 
+                justify-center mx-auto mb-6"
+            >
+              <Heart 
+                className="w-12 h-12 text-gray-400" 
+              />
+            </div>
+            
+            <h3 
+              className="text-2xl font-bold 
+                text-gray-900 mb-3"
+            >
+              Chưa có phòng yêu thích
+            </h3>
+            
+            <p 
+              className="text-gray-600 mb-6 
+                max-w-md mx-auto"
+            >
+              Bạn chưa thêm phòng nào vào danh sách 
+              yêu thích. Hãy khám phá và lưu những 
+              phòng bạn thích!
+            </p>
+
+            <Link
+              to="/rooms"
+              className="inline-block px-6 py-3 
+                bg-indigo-600 text-white rounded-lg 
+                hover:bg-indigo-700 transition-colors 
+                font-semibold"
+            >
+              Khám phá phòng
+            </Link>
+          </div>
+        )}
+
+        {/* Favorites Grid */}
+        {!isLoading && 
+          !error && 
+          favorites.length > 0 && (
+          <div 
+            className="grid grid-cols-1 md:grid-cols-2 
+              lg:grid-cols-3 gap-6"
+          >
+            {favorites.map((favorite) =>
+              favorite.room ? (
+                <RoomCard
+                  key={favorite.id}
+                  room={favorite.room}
+                />
+              ) : null
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FavoritesPage;
diff --git a/client/src/pages/customer/MyBookingsPage.tsx b/client/src/pages/customer/MyBookingsPage.tsx
new file mode 100644
index 00000000..6cb8de50
--- /dev/null
+++ b/client/src/pages/customer/MyBookingsPage.tsx
@@ -0,0 +1,639 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  Calendar,
+  MapPin,
+  Users,
+  CreditCard,
+  Eye,
+  XCircle,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  DoorOpen,
+  DoorClosed,
+  Loader2,
+  Search,
+  Filter,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getMyBookings,
+  cancelBooking,
+  type Booking,
+} from '../../services/api/bookingService';
+import useAuthStore from '../../store/useAuthStore';
+import Loading from '../../components/common/Loading';
+import EmptyState from '../../components/common/EmptyState';
+
+const MyBookingsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuthStore();
+
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [filteredBookings, setFilteredBookings] = 
+    useState<Booking[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [cancellingId, setCancellingId] = 
+    useState<number | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = 
+    useState<string>('all');
+
+  // Redirect if not authenticated
+  useEffect(() => {
+    if (!isAuthenticated) {
+      toast.error('Please login to view your bookings');
+      navigate('/login', { 
+        state: { from: '/bookings' } 
+      });
+    }
+  }, [isAuthenticated, navigate]);
+
+  // Fetch bookings
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchBookings();
+    }
+  }, [isAuthenticated]);
+
+  // Filter bookings
+  useEffect(() => {
+    let filtered = [...bookings];
+
+    // Filter by status
+    if (statusFilter !== 'all') {
+      filtered = filtered.filter(
+        (b) => b.status === statusFilter
+      );
+    }
+
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (b) =>
+          b.booking_number.toLowerCase().includes(query) ||
+          b.room?.room_type?.name
+            .toLowerCase()
+            .includes(query) ||
+          b.room?.room_number
+            .toString()
+            .includes(query)
+      );
+    }
+
+    setFilteredBookings(filtered);
+  }, [bookings, statusFilter, searchQuery]);
+
+  const fetchBookings = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await getMyBookings();
+
+      if (
+        response.success && 
+        response.data?.bookings
+      ) {
+        setBookings(response.data.bookings);
+      } else {
+        throw new Error(
+          'Unable to load bookings list'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error fetching bookings:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể tải danh sách đặt phòng';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancelBooking = async (
+    bookingId: number,
+    bookingNumber: string
+  ) => {
+    const confirmed = window.confirm(
+      `Are you sure you want to cancel booking ${bookingNumber}?\n\n` +
+      `⚠️ Note:\n` +
+      `- You will be charged 20% of the order value\n` +
+      `- The remaining 80% will be refunded\n` +
+      `- Room status will be updated to "available"`
+    );
+
+    if (!confirmed) return;
+
+    try {
+      setCancellingId(bookingId);
+
+      const response = await cancelBooking(bookingId);
+
+      if (response.success) {
+        toast.success(
+          `✅ Successfully cancelled booking ${bookingNumber}!`
+        );
+        
+        // Update local state
+        setBookings((prev) =>
+          prev.map((b) =>
+            b.id === bookingId
+              ? { ...b, status: 'cancelled' }
+              : b
+          )
+        );
+      } else {
+        throw new Error(
+          response.message || 
+          'Unable to cancel booking'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error cancelling booking:', err);
+      const message =
+        err.response?.data?.message ||
+        'Unable to cancel booking. Please try again.';
+      toast.error(message);
+    } finally {
+      setCancellingId(null);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return {
+          icon: Clock,
+          color: 'bg-yellow-100 text-yellow-800',
+          text: 'Pending confirmation',
+        };
+      case 'confirmed':
+        return {
+          icon: CheckCircle,
+          color: 'bg-green-100 text-green-800',
+          text: 'Confirmed',
+        };
+      case 'cancelled':
+        return {
+          icon: XCircle,
+          color: 'bg-red-100 text-red-800',
+          text: 'Cancelled',
+        };
+      case 'checked_in':
+        return {
+          icon: DoorOpen,
+          color: 'bg-blue-100 text-blue-800',
+          text: 'Checked in',
+        };
+      case 'checked_out':
+        return {
+          icon: DoorClosed,
+          color: 'bg-gray-100 text-gray-800',
+          text: 'Checked out',
+        };
+      default:
+        return {
+          icon: AlertCircle,
+          color: 'bg-gray-100 text-gray-800',
+          text: status,
+        };
+    }
+  };
+
+  const canCancelBooking = (booking: Booking) => {
+    // Can only cancel pending or confirmed bookings
+    return (
+      booking.status === 'pending' || 
+      booking.status === 'confirmed'
+    );
+  };
+
+  if (loading) {
+    return <Loading fullScreen text="Loading..." />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 
+            mb-2"
+          >
+            My Bookings
+          </h1>
+          <p className="text-gray-600">
+            Manage and track your bookings
+          </p>
+        </div>
+
+        {/* Filters */}
+        <div className="bg-white rounded-lg shadow-md 
+          p-4 mb-6"
+        >
+          <div className="flex flex-col md:flex-row gap-4">
+            {/* Search */}
+            <div className="flex-1">
+              <div className="relative">
+                <Search 
+                  className="absolute left-3 top-1/2 
+                    -translate-y-1/2 w-5 h-5 
+                    text-gray-400" 
+                />
+                <input
+                  type="text"
+                  placeholder="Search by booking number, room name..."
+                  value={searchQuery}
+                  onChange={(e) => 
+                    setSearchQuery(e.target.value)
+                  }
+                  className="w-full pl-10 pr-4 py-2 border 
+                    border-gray-300 rounded-lg 
+                    focus:ring-2 focus:ring-indigo-500 
+                    focus:border-indigo-500"
+                />
+              </div>
+            </div>
+
+            {/* Status Filter */}
+            <div className="md:w-64">
+              <div className="relative">
+                <Filter 
+                  className="absolute left-3 top-1/2 
+                    -translate-y-1/2 w-5 h-5 
+                    text-gray-400" 
+                />
+                <select
+                  value={statusFilter}
+                  onChange={(e) => 
+                    setStatusFilter(e.target.value)
+                  }
+                  className="w-full pl-10 pr-4 py-2 border 
+                    border-gray-300 rounded-lg 
+                    focus:ring-2 focus:ring-indigo-500 
+                    focus:border-indigo-500 
+                    appearance-none bg-white"
+                >
+                  <option value="all">All statuses</option>
+                  <option value="pending">Pending confirmation</option>
+                  <option value="confirmed">Confirmed</option>
+                  <option value="checked_in">
+                    Checked in
+                  </option>
+                  <option value="checked_out">
+                    Checked out
+                  </option>
+                  <option value="cancelled">Cancelled</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Results count */}
+          <div className="mt-3 text-sm text-gray-600">
+            Showing {filteredBookings.length} / 
+            {bookings.length} bookings
+          </div>
+        </div>
+
+        {/* Error State */}
+        {error && (
+          <div
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-6 mb-6 flex items-start gap-3"
+          >
+            <AlertCircle 
+              className="w-6 h-6 text-red-500 
+                flex-shrink-0 mt-0.5" 
+            />
+            <div>
+              <p className="text-red-700 font-medium">
+                {error}
+              </p>
+              <button
+                onClick={fetchBookings}
+                className="mt-2 text-sm text-red-600 
+                  hover:text-red-800 underline"
+              >
+                Try again
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Bookings List */}
+        {filteredBookings.length === 0 ? (
+          <EmptyState
+            icon={Calendar}
+            title={
+              searchQuery || statusFilter !== 'all'
+                ? 'No bookings found'
+                : 'No bookings yet'
+            }
+            description={
+              searchQuery || statusFilter !== 'all'
+                ? 'Try changing filters or search keywords'
+                : 'Start booking to enjoy your vacation'
+            }
+          >
+            {!searchQuery && statusFilter === 'all' ? (
+              <Link
+                to="/rooms"
+                className="inline-flex items-center 
+                  gap-2 px-6 py-3 bg-indigo-600 
+                  text-white rounded-lg 
+                  hover:bg-indigo-700 
+                  transition-colors font-semibold"
+              >
+                View room list
+              </Link>
+            ) : (
+              <button
+                onClick={() => {
+                  setSearchQuery('');
+                  setStatusFilter('all');
+                }}
+                className="px-6 py-3 bg-gray-600 
+                  text-white rounded-lg 
+                  hover:bg-gray-700 transition-colors 
+                  font-semibold"
+              >
+                Clear filters
+              </button>
+            )}
+          </EmptyState>
+        ) : (
+          <div className="space-y-4">
+            {filteredBookings.map((booking) => {
+              const statusConfig = getStatusConfig(
+                booking.status
+              );
+              const StatusIcon = statusConfig.icon;
+              const room = booking.room;
+              const roomType = room?.room_type;
+
+              return (
+                <div
+                  key={booking.id}
+                  className="bg-white rounded-lg shadow-md 
+                    hover:shadow-lg transition-shadow 
+                    overflow-hidden"
+                >
+                  <div className="p-6">
+                    <div className="flex flex-col 
+                      lg:flex-row gap-6"
+                    >
+                      {/* Room Image */}
+                      {roomType?.images?.[0] && (
+                        <div className="lg:w-48 flex-shrink-0">
+                          <img
+                            src={roomType.images[0]}
+                            alt={roomType.name}
+                            className="w-full h-48 lg:h-full 
+                              object-cover rounded-lg"
+                          />
+                        </div>
+                      )}
+
+                      {/* Booking Info */}
+                      <div className="flex-1 min-w-0">
+                        {/* Header */}
+                        <div className="flex items-start 
+                          justify-between gap-4 mb-3"
+                        >
+                          <div>
+                            <h3 className="text-xl font-bold 
+                              text-gray-900 mb-1"
+                            >
+                              {roomType?.name || 'N/A'}
+                            </h3>
+                            <p className="text-sm 
+                              text-gray-600"
+                            >
+                              <MapPin 
+                                className="w-4 h-4 inline 
+                                  mr-1" 
+                              />
+                              Room {room?.room_number} - 
+                              Floor {room?.floor}
+                            </p>
+                          </div>
+
+                          {/* Status Badge */}
+                          <div
+                            className={`flex items-center 
+                              gap-2 px-3 py-1.5 rounded-full 
+                              text-sm font-medium 
+                              ${statusConfig.color}`}
+                          >
+                            <StatusIcon 
+                              className="w-4 h-4" 
+                            />
+                            {statusConfig.text}
+                          </div>
+                        </div>
+
+                        {/* Details Grid */}
+                        <div className="grid grid-cols-1 
+                          sm:grid-cols-2 gap-3 mb-4"
+                        >
+                          {/* Booking Number */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              Booking number
+                            </p>
+                            <p className="font-medium 
+                              text-gray-900 font-mono"
+                            >
+                              {booking.booking_number}
+                            </p>
+                          </div>
+
+                          {/* Check-in */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              <Calendar 
+                                className="w-3 h-3 inline 
+                                  mr-1" 
+                              />
+                              Check-in date
+                            </p>
+                            <p className="font-medium 
+                              text-gray-900"
+                            >
+                              {formatDate(
+                                booking.check_in_date
+                              )}
+                            </p>
+                          </div>
+
+                          {/* Check-out */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              <Calendar 
+                                className="w-3 h-3 inline 
+                                  mr-1" 
+                              />
+                              Check-out date
+                            </p>
+                            <p className="font-medium 
+                              text-gray-900"
+                            >
+                              {formatDate(
+                                booking.check_out_date
+                              )}
+                            </p>
+                          </div>
+
+                          {/* Guest Count */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              <Users 
+                                className="w-3 h-3 inline 
+                                  mr-1" 
+                              />
+                              Guests
+                            </p>
+                            <p className="font-medium 
+                              text-gray-900"
+                            >
+                              {booking.guest_count} guest(s)
+                            </p>
+                          </div>
+
+                          {/* Payment Method */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              <CreditCard 
+                                className="w-3 h-3 inline 
+                                  mr-1" 
+                              />
+                              Payment
+                            </p>
+                            <p className="font-medium 
+                              text-gray-900"
+                            >
+                              {booking.payment_method === 'cash'
+                                ? 'On-site'
+                                : 'Bank transfer'}
+                            </p>
+                          </div>
+
+                          {/* Total Price */}
+                          <div>
+                            <p className="text-xs text-gray-500 
+                              mb-1"
+                            >
+                              Total price
+                            </p>
+                            <p className="font-bold 
+                              text-indigo-600 text-lg"
+                            >
+                              {formatPrice(booking.total_price)}
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="flex flex-wrap gap-3 
+                          pt-4 border-t"
+                        >
+                          {/* View Details */}
+                          <Link
+                            to={`/bookings/${booking.id}`}
+                            className="inline-flex items-center 
+                              gap-2 px-4 py-2 
+                              bg-indigo-600 text-white 
+                              rounded-lg hover:bg-indigo-700 
+                              transition-colors font-medium 
+                              text-sm"
+                          >
+                            <Eye className="w-4 h-4" />
+                            View details
+                          </Link>
+
+                          {/* Cancel Booking */}
+                          {canCancelBooking(booking) && (
+                            <button
+                              onClick={() =>
+                                handleCancelBooking(
+                                  booking.id,
+                                  booking.booking_number
+                                )
+                              }
+                              disabled={
+                                cancellingId === booking.id
+                              }
+                              className="inline-flex 
+                                items-center gap-2 px-4 py-2 
+                                bg-red-600 text-white 
+                                rounded-lg hover:bg-red-700 
+                                transition-colors font-medium 
+                                text-sm disabled:bg-gray-400 
+                                disabled:cursor-not-allowed"
+                            >
+                              {cancellingId === booking.id ? (
+                                <>
+                                  <Loader2 
+                                    className="w-4 h-4 
+                                      animate-spin" 
+                                  />
+                                  Cancelling...
+                                </>
+                              ) : (
+                                <>
+                                  <XCircle 
+                                    className="w-4 h-4" 
+                                  />
+                                  Cancel booking
+                                </>
+                              )}
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyBookingsPage;
diff --git a/client/src/pages/customer/PaymentConfirmationPage.tsx b/client/src/pages/customer/PaymentConfirmationPage.tsx
new file mode 100644
index 00000000..ae62d05d
--- /dev/null
+++ b/client/src/pages/customer/PaymentConfirmationPage.tsx
@@ -0,0 +1,536 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  useParams, 
+  useNavigate, 
+  Link 
+} from 'react-router-dom';
+import {
+  ArrowLeft,
+  Building2,
+  Upload,
+  CheckCircle,
+  AlertCircle,
+  Loader2,
+  Copy,
+  Check,
+  FileText,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getBookingById,
+  generateQRCode,
+  type Booking,
+} from '../../services/api/bookingService';
+import { confirmBankTransfer } from 
+  '../../services/api/paymentService';
+import useAuthStore from '../../store/useAuthStore';
+import Loading from '../../components/common/Loading';
+import PaymentStatusBadge from 
+  '../../components/common/PaymentStatusBadge';
+
+const PaymentConfirmationPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuthStore();
+
+  const [booking, setBooking] = useState<Booking | null>(
+    null
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadSuccess, setUploadSuccess] = useState(false);
+  const [selectedFile, setSelectedFile] = 
+    useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = 
+    useState<string | null>(null);
+  const [copiedBookingNumber, setCopiedBookingNumber] = 
+    useState(false);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      toast.error(
+        'Please login to confirm payment'
+      );
+      navigate('/login');
+    }
+  }, [isAuthenticated, navigate]);
+
+  useEffect(() => {
+    if (id && isAuthenticated) {
+      fetchBookingDetails(Number(id));
+    }
+  }, [id, isAuthenticated]);
+
+  const fetchBookingDetails = async (bookingId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await getBookingById(bookingId);
+
+      if (
+        response.success && 
+        response.data?.booking
+      ) {
+        const bookingData = response.data.booking;
+        
+        // Check if already paid
+        if (bookingData.payment_status === 'paid') {
+          toast.info('This booking has already been paid');
+          navigate(`/bookings/${bookingId}`);
+          return;
+        }
+        
+        // Check if payment method is cash
+        if (bookingData.payment_method === 'cash') {
+          toast.info(
+            'This booking uses on-site payment method'
+          );
+          navigate(`/bookings/${bookingId}`);
+          return;
+        }
+        
+        setBooking(bookingData);
+      } else {
+        throw new Error(
+          'Unable to load booking information'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error fetching booking:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể tải thông tin đặt phòng';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'VND',
+    }).format(price);
+  };
+
+  const copyBookingNumber = async () => {
+    if (!booking?.booking_number) return;
+
+    try {
+      await navigator.clipboard.writeText(
+        booking.booking_number
+      );
+      setCopiedBookingNumber(true);
+      toast.success('Booking number copied');
+      setTimeout(() => setCopiedBookingNumber(false), 2000);
+    } catch (err) {
+      toast.error('Unable to copy');
+    }
+  };
+
+  const handleFileSelect = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select an image file');
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error(
+        'Image size must not exceed 5MB'
+      );
+      return;
+    }
+
+    setSelectedFile(file);
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleConfirmPayment = async () => {
+    if (!selectedFile || !booking) return;
+
+    try {
+      setUploading(true);
+
+      const transactionId = 
+        `TXN-${booking.booking_number}-${Date.now()}`;
+
+      const response = await confirmBankTransfer(
+        booking.id,
+        transactionId,
+        selectedFile
+      );
+
+      if (response.success) {
+        toast.success(
+          '✅ Payment confirmation sent successfully!'
+        );
+        setUploadSuccess(true);
+        
+        // Redirect after 2 seconds
+        setTimeout(() => {
+          navigate(`/bookings/${booking.id}`);
+        }, 2000);
+      } else {
+        throw new Error(
+          response.message || 
+          'Unable to confirm payment'
+        );
+      }
+    } catch (err: any) {
+      console.error('Error confirming payment:', err);
+      const message =
+        err.response?.data?.message ||
+        'Unable to send payment confirmation';
+      toast.error(message);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  if (loading) {
+    return <Loading fullScreen text="Loading..." />;
+  }
+
+  if (error || !booking) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          <div
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3"
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error || 'Booking not found'}
+            </p>
+            <button
+              onClick={() => navigate('/bookings')}
+              className="px-6 py-2 bg-red-600 
+                text-white rounded-lg 
+                hover:bg-red-700 transition-colors"
+            >
+              Back to list
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const qrCodeUrl = generateQRCode(
+    booking.booking_number,
+    booking.total_price
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* Back Button */}
+        <Link
+          to={`/bookings/${booking.id}`}
+          className="inline-flex items-center gap-2 
+            text-gray-600 hover:text-gray-900 
+            mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Back to booking details</span>
+        </Link>
+
+        {/* Page Title */}
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold text-gray-900 
+            mb-2"
+          >
+            Payment Confirmation
+          </h1>
+          <p className="text-gray-600">
+            Complete payment for your booking
+          </p>
+        </div>
+
+        {/* Booking Info Card */}
+        <div className="bg-white rounded-lg shadow-md 
+          p-6 mb-6"
+        >
+          <div className="flex items-start justify-between 
+            gap-4 mb-4"
+          >
+            <div>
+              <p className="text-sm text-gray-600 mb-1">
+                Booking Number
+              </p>
+              <div className="flex items-center gap-2">
+                <span className="text-xl font-bold 
+                  text-indigo-900 font-mono"
+                >
+                  {booking.booking_number}
+                </span>
+                <button
+                  onClick={copyBookingNumber}
+                  className="p-1 hover:bg-gray-100 
+                    rounded transition-colors"
+                  title="Copy"
+                >
+                  {copiedBookingNumber ? (
+                    <Check className="w-4 h-4 
+                      text-green-600" 
+                    />
+                  ) : (
+                    <Copy className="w-4 h-4 
+                      text-gray-400" 
+                    />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <PaymentStatusBadge
+              status={booking.payment_status}
+              size="md"
+            />
+          </div>
+
+          <div className="border-t pt-4">
+            <div className="flex justify-between 
+              items-center"
+            >
+              <span className="text-gray-600">
+                Total Payment
+              </span>
+              <span className="text-2xl font-bold 
+                text-indigo-600"
+              >
+                {formatPrice(booking.total_price)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {!uploadSuccess ? (
+          <>
+            {/* Bank Transfer Instructions */}
+            <div
+              className="bg-blue-50 border border-blue-200 
+                rounded-lg p-6 mb-6"
+            >
+              <div className="flex items-start gap-3 mb-4">
+                <Building2
+                  className="w-6 h-6 text-blue-600 
+                    mt-1 flex-shrink-0"
+                />
+                <div className="flex-1">
+                  <h3 className="font-bold text-blue-900 
+                    mb-3"
+                  >
+                    Bank Transfer Information
+                  </h3>
+
+                  <div className="grid grid-cols-1 
+                    md:grid-cols-2 gap-4"
+                  >
+                    {/* Bank Info */}
+                    <div className="bg-white rounded-lg 
+                      p-4 space-y-2 text-sm"
+                    >
+                      <p>
+                        <strong>Bank:</strong> 
+                        Vietcombank (VCB)
+                      </p>
+                      <p>
+                        <strong>Account Number:</strong> 
+                        0123456789
+                      </p>
+                      <p>
+                        <strong>Account Holder:</strong> 
+                        KHACH SAN ABC
+                      </p>
+                      <p>
+                        <strong>Amount:</strong>{' '}
+                        <span className="text-indigo-600 
+                          font-bold"
+                        >
+                          {formatPrice(booking.total_price)}
+                        </span>
+                      </p>
+                      <p>
+                        <strong>Content:</strong>{' '}
+                        <span className="font-mono 
+                          text-indigo-600"
+                        >
+                          {booking.booking_number}
+                        </span>
+                      </p>
+                    </div>
+
+                    {/* QR Code */}
+                    <div className="bg-white rounded-lg 
+                      p-4 flex flex-col items-center"
+                    >
+                      <p className="text-sm font-medium 
+                        text-gray-700 mb-2"
+                      >
+                        Scan QR code to transfer
+                      </p>
+                      <img
+                        src={qrCodeUrl}
+                        alt="QR Code"
+                        className="w-48 h-48 border-2 
+                          border-gray-200 rounded-lg"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Upload Receipt Section */}
+            <div className="bg-white rounded-lg shadow-md 
+              p-6 mb-6"
+            >
+              <h3 className="text-xl font-bold 
+                text-gray-900 mb-4"
+              >
+                <Upload className="w-5 h-5 inline mr-2" />
+                Upload Payment Receipt
+              </h3>
+
+              <p className="text-gray-600 mb-4">
+                After transferring, please upload a receipt image 
+                so we can confirm faster.
+              </p>
+
+              <div className="space-y-4">
+                {/* File Input */}
+                <label
+                  htmlFor="receipt-upload"
+                  className="block w-full px-4 py-6 
+                    border-2 border-dashed 
+                    border-gray-300 rounded-lg 
+                    text-center cursor-pointer 
+                    hover:border-indigo-400 
+                    hover:bg-indigo-50 
+                    transition-all"
+                >
+                  <input
+                    id="receipt-upload"
+                    type="file"
+                    accept="image/*"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+
+                  {previewUrl ? (
+                    <div className="flex flex-col 
+                      items-center gap-3"
+                    >
+                      <img
+                        src={previewUrl}
+                        alt="Preview"
+                        className="w-48 h-48 object-cover 
+                          rounded-lg border-2 
+                          border-indigo-200"
+                      />
+                      <p className="text-sm text-indigo-600 
+                        font-medium"
+                      >
+                        {selectedFile?.name}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Click to select another image
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col 
+                      items-center gap-2"
+                    >
+                      <FileText 
+                        className="w-12 h-12 text-gray-400" 
+                      />
+                      <p className="text-sm text-gray-600 
+                        font-medium"
+                      >
+                        Click to select receipt image
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        PNG, JPG, JPEG (Max 5MB)
+                      </p>
+                    </div>
+                  )}
+                </label>
+
+                {/* Upload Button */}
+                {selectedFile && (
+                  <button
+                    onClick={handleConfirmPayment}
+                    disabled={uploading}
+                    className="w-full px-6 py-4 
+                      bg-indigo-600 text-white 
+                      rounded-lg hover:bg-indigo-700 
+                      transition-colors font-semibold 
+                      text-lg disabled:bg-gray-400 
+                      disabled:cursor-not-allowed
+                      flex items-center justify-center 
+                      gap-2"
+                  >
+                    {uploading ? (
+                      <>
+                        <Loader2 
+                          className="w-5 h-5 animate-spin" 
+                        />
+                        Processing...
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className="w-5 h-5" />
+                        Confirm Payment
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="bg-green-50 border 
+            border-green-200 rounded-lg p-8 
+            text-center"
+          >
+            <CheckCircle 
+              className="w-16 h-16 text-green-600 
+                mx-auto mb-4" 
+            />
+            <h3 className="text-2xl font-bold 
+              text-green-900 mb-2"
+            >
+              Confirmation sent successfully!
+            </h3>
+            <p className="text-green-700 mb-4">
+              We will confirm your payment as soon as possible.
+            </p>
+            <p className="text-sm text-green-600">
+              Redirecting...
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PaymentConfirmationPage;
diff --git a/client/src/pages/customer/PaymentResultPage.tsx b/client/src/pages/customer/PaymentResultPage.tsx
new file mode 100644
index 00000000..7dc8326b
--- /dev/null
+++ b/client/src/pages/customer/PaymentResultPage.tsx
@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
+import {
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Home,
+  Receipt,
+  Loader2,
+} from 'lucide-react';
+
+const PaymentResultPage: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [countdown, setCountdown] = useState(10);
+
+  const status = searchParams.get('status');
+  const bookingId = searchParams.get('bookingId');
+  const transactionId = searchParams.get('transactionId');
+  const message = searchParams.get('message');
+
+  useEffect(() => {
+    if (status === 'success' && bookingId) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            navigate(`/bookings/${bookingId}`);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }
+  }, [status, bookingId, navigate]);
+
+  const getStatusContent = () => {
+    switch (status) {
+      case 'success':
+        return {
+          icon: <CheckCircle className="w-20 h-20 text-green-500" />,
+          title: 'Payment Successful!',
+          description: 
+            'Thank you for your payment. Your booking has been confirmed.',
+          bgColor: 'bg-green-50',
+          borderColor: 'border-green-200',
+          textColor: 'text-green-800',
+        };
+      case 'failed':
+        return {
+          icon: <XCircle className="w-20 h-20 text-red-500" />,
+          title: 'Payment Failed',
+          description: message || 
+            'Transaction was not successful. Please try again.',
+          bgColor: 'bg-red-50',
+          borderColor: 'border-red-200',
+          textColor: 'text-red-800',
+        };
+      case 'invalid_signature':
+        return {
+          icon: <AlertCircle className="w-20 h-20 text-orange-500" />,
+          title: 'Authentication Error',
+          description: 
+            'Unable to verify transaction. Please contact support.',
+          bgColor: 'bg-orange-50',
+          borderColor: 'border-orange-200',
+          textColor: 'text-orange-800',
+        };
+      case 'payment_not_found':
+        return {
+          icon: <AlertCircle className="w-20 h-20 text-gray-500" />,
+          title: 'Payment Not Found',
+          description: 
+            'Payment information not found. ' +
+            'Please check again.',
+          bgColor: 'bg-gray-50',
+          borderColor: 'border-gray-200',
+          textColor: 'text-gray-800',
+        };
+      default:
+        return {
+          icon: <AlertCircle className="w-20 h-20 text-gray-500" />,
+          title: 'Unknown Error',
+          description: message || 
+            'An error occurred. Please try again later.',
+          bgColor: 'bg-gray-50',
+          borderColor: 'border-gray-200',
+          textColor: 'text-gray-800',
+        };
+    }
+  };
+
+  const content = getStatusContent();
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="max-w-2xl mx-auto px-4">
+        <div
+          className={`${content.bgColor} border-2 
+            ${content.borderColor} rounded-lg p-8`}
+        >
+          {/* Icon */}
+          <div className="flex justify-center mb-6">
+            {content.icon}
+          </div>
+
+          {/* Title */}
+          <h1
+            className={`text-3xl font-bold text-center 
+              mb-4 ${content.textColor}`}
+          >
+            {content.title}
+          </h1>
+
+          {/* Description */}
+          <p className="text-center text-gray-700 mb-6">
+            {content.description}
+          </p>
+
+          {/* Transaction Details */}
+          {status === 'success' && transactionId && (
+            <div
+              className="bg-white border border-gray-200 
+                rounded-lg p-4 mb-6"
+            >
+              <div className="text-sm space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">
+                    Transaction ID
+                  </span>
+                  <span className="font-medium font-mono">
+                    {transactionId}
+                  </span>
+                </div>
+                {bookingId && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">
+                      Booking ID
+                    </span>
+                    <span className="font-medium">
+                      #{bookingId}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Auto redirect notice for success */}
+          {status === 'success' && bookingId && countdown > 0 && (
+            <div className="text-center mb-6">
+              <div className="flex items-center justify-center gap-2 
+                text-gray-600"
+              >
+                <Loader2 className="w-4 h-4 animate-spin" />
+                <span>
+                  Auto redirecting to booking details in {countdown}s...
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            {status === 'success' && bookingId ? (
+              <>
+                <Link
+                  to={`/bookings/${bookingId}`}
+                  className="flex-1 flex items-center justify-center 
+                    gap-2 px-6 py-3 bg-green-600 text-white 
+                    rounded-lg hover:bg-green-700 
+                    transition-colors font-medium"
+                >
+                  <Receipt className="w-5 h-5" />
+                  View booking details
+                </Link>
+                <Link
+                  to="/"
+                  className="flex-1 flex items-center justify-center 
+                    gap-2 px-6 py-3 bg-white text-gray-700 
+                    border-2 border-gray-300 rounded-lg 
+                    hover:bg-gray-50 transition-colors 
+                    font-medium"
+                >
+                  <Home className="w-5 h-5" />
+                  Go to home
+                </Link>
+              </>
+            ) : status === 'failed' && bookingId ? (
+              <>
+                <Link
+                  to={`/deposit-payment/${bookingId}`}
+                  className="flex-1 px-6 py-3 bg-indigo-600 
+                    text-white rounded-lg hover:bg-indigo-700 
+                    transition-colors font-medium text-center"
+                >
+                  Retry payment
+                </Link>
+                <Link
+                  to="/bookings"
+                  className="flex-1 px-6 py-3 bg-white 
+                    text-gray-700 border-2 border-gray-300 
+                    rounded-lg hover:bg-gray-50 
+                    transition-colors font-medium text-center"
+                >
+                  Booking list
+                </Link>
+              </>
+            ) : (
+              <Link
+                to="/"
+                className="w-full flex items-center 
+                  justify-center gap-2 px-6 py-3 
+                  bg-indigo-600 text-white rounded-lg 
+                  hover:bg-indigo-700 transition-colors 
+                  font-medium"
+              >
+                <Home className="w-5 h-5" />
+                Về trang chủ
+              </Link>
+            )}
+          </div>
+        </div>
+
+        {/* Support Notice */}
+        <div className="mt-6 text-center text-sm text-gray-600">
+          <p>
+            If you have any issues, please contact{' '}
+            <a
+              href="mailto:support@hotel.com"
+              className="text-indigo-600 hover:underline"
+            >
+              support@hotel.com
+            </a>{' '}
+            or call{' '}
+            <a
+              href="tel:1900xxxx"
+              className="text-indigo-600 hover:underline"
+            >
+              1900 xxxx
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentResultPage;
diff --git a/client/src/pages/customer/RoomDetailPage.tsx b/client/src/pages/customer/RoomDetailPage.tsx
new file mode 100644
index 00000000..e40528f8
--- /dev/null
+++ b/client/src/pages/customer/RoomDetailPage.tsx
@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import {
+  Users,
+  MapPin,
+  DollarSign,
+  ArrowLeft,
+} from 'lucide-react';
+import { getRoomById, type Room } from 
+  '../../services/api/roomService';
+import RoomGallery from '../../components/rooms/RoomGallery';
+import RoomAmenities from '../../components/rooms/RoomAmenities';
+import ReviewSection from '../../components/rooms/ReviewSection';
+import RatingStars from '../../components/rooms/RatingStars';
+
+const RoomDetailPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [room, setRoom] = useState<Room | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      fetchRoomDetail(Number(id));
+    }
+  }, [id]);
+
+  const fetchRoomDetail = async (roomId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await getRoomById(roomId);
+      
+      // backend uses `status: 'success'` (not `success`), accept both
+      if ((response as any).success || (response as any).status === 'success') {
+        if (response.data && response.data.room) {
+          setRoom(response.data.room);
+        } else {
+          throw new Error('Failed to fetch room details');
+        }
+      } else {
+        throw new Error('Failed to fetch room details');
+      }
+    } catch (err: any) {
+      console.error('Error fetching room:', err);
+      const message =
+        err.response?.data?.message ||
+        'Không thể tải thông tin phòng';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <div className="animate-pulse space-y-6">
+            <div className="h-96 bg-gray-300 rounded-lg" />
+            <div className="h-8 bg-gray-300 rounded w-1/3" />
+            <div className="h-4 bg-gray-300 rounded w-2/3" />
+            <div className="h-32 bg-gray-300 rounded" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !room) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <div className="bg-red-50 border border-red-200 
+            rounded-lg p-8 text-center"
+          >
+            <p className="text-red-800 font-medium mb-4">
+              {error || 'Room not found'}
+            </p>
+            <button
+              onClick={() => navigate('/rooms')}
+              className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+            >
+              Back to Room List
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const roomType = room.room_type;
+  const formattedPrice = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(roomType?.base_price || 0);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back Button */}
+        <Link
+          to="/rooms"
+          className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Quay lại danh sách phòng</span>
+        </Link>
+
+        {/* Image Gallery */}
+        <div className="mb-8">
+          <RoomGallery
+            images={roomType?.images || []}
+            roomName={roomType?.name || 'Room'}
+          />
+        </div>
+
+        {/* Room Information */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-12">
+          {/* Main Info */}
+          <div className="lg:col-span-8 space-y-6">
+            {/* Title & Basic Info */}
+            <div>
+              <h1 className="text-4xl font-bold 
+                text-gray-900 mb-4"
+              >
+                {roomType?.name}
+              </h1>
+              
+              <div className="flex flex-wrap items-center 
+                gap-6 text-gray-600 mb-4"
+              >
+                <div className="flex items-center gap-2">
+                  <MapPin className="w-5 h-5" />
+                  <span>
+                    Phòng {room.room_number} - Tầng {room.floor}
+                  </span>
+                </div>
+                
+                <div className="flex items-center gap-2">
+                  <Users className="w-5 h-5" />
+                  <span>
+                    {roomType?.capacity || 0} người
+                  </span>
+                </div>
+
+                {room.average_rating != null && (
+                  <div className="flex items-center gap-2">
+                    <RatingStars
+                      rating={Number(room.average_rating)}
+                      size="sm"
+                      showNumber
+                    />
+                    <span className="text-sm text-gray-500">
+                      ({room.total_reviews || 0} đánh giá)
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* Status Badge */}
+              <div
+                className={`inline-block px-4 py-2 
+                  rounded-full text-sm font-semibold
+                  ${
+                    room.status === 'available'
+                      ? 'bg-green-100 text-green-800'
+                      : room.status === 'occupied'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}
+              >
+                {room.status === 'available'
+                  ? 'Còn phòng'
+                  : room.status === 'occupied'
+                  ? 'Đã đặt'
+                  : 'Bảo trì'}
+              </div>
+            </div>
+
+            {/* Description */}
+            {roomType?.description && (
+              <div>
+                <h2 className="text-2xl font-bold 
+                  text-gray-900 mb-4"
+                >
+                  Mô tả phòng
+                </h2>
+                <p className="text-gray-700 leading-relaxed">
+                  {roomType.description}
+                </p>
+              </div>
+            )}
+
+            {/* Amenities */}
+            <div>
+              <h2 className="text-2xl font-bold 
+                text-gray-900 mb-4"
+              >
+                Tiện ích
+              </h2>
+              <RoomAmenities
+                amenities={
+                  (room.amenities && room.amenities.length > 0)
+                    ? room.amenities
+                    : (roomType?.amenities || [])
+                }
+              />
+            </div>
+          </div>
+
+          {/* Booking Card */}
+          <aside className="lg:col-span-4">
+            <div className="bg-white rounded-xl shadow-md p-6 sticky top-6">
+              <div className="flex items-baseline gap-3 mb-4">
+                <DollarSign className="w-5 h-5 text-gray-600" />
+                <div>
+                  <div className="text-3xl font-extrabold text-indigo-600">
+                    {formattedPrice}
+                  </div>
+                  <div className="text-sm text-gray-500">/ đêm</div>
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <Link
+                  to={`/booking/${room.id}`}
+                  className={`block w-full py-3 text-center font-semibold rounded-md transition-colors ${
+                    room.status === 'available'
+                      ? 'bg-indigo-600 text-white hover:bg-indigo-700'
+                      : 'bg-gray-200 text-gray-500 cursor-not-allowed'
+                  }`}
+                  onClick={(e) => {
+                    if (room.status !== 'available') e.preventDefault();
+                  }}
+                >
+                  {room.status === 'available' ? 'Đặt ngay' : 'Không khả dụng'}
+                </Link>
+              </div>
+
+              {room.status === 'available' && (
+                <p className="text-sm text-gray-500 text-center mt-3">
+                  Không bị tính phí ngay — thanh toán tại khách sạn
+                </p>
+              )}
+
+              <hr className="my-4" />
+
+              <div className="text-sm text-gray-700 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span>Loại phòng</span>
+                  <strong>{roomType?.name}</strong>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Số khách</span>
+                  <span>{roomType?.capacity} người</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Số phòng</span>
+                  <span>1</span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        {/* Reviews Section */}
+        <div className="mb-12">
+          <ReviewSection roomId={room.id} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomDetailPage;
diff --git a/client/src/pages/customer/RoomListPage.tsx b/client/src/pages/customer/RoomListPage.tsx
new file mode 100644
index 00000000..d27ab22d
--- /dev/null
+++ b/client/src/pages/customer/RoomListPage.tsx
@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { getRooms } from '../../services/api/roomService';
+import type { Room } from '../../services/api/roomService';
+import RoomFilter from '../../components/rooms/RoomFilter';
+import RoomCard from '../../components/rooms/RoomCard';
+import RoomCardSkeleton from '../../components/rooms/RoomCardSkeleton';
+import Pagination from '../../components/rooms/Pagination';
+import { ArrowLeft } from 'lucide-react';
+
+const RoomListPage: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    limit: 10,
+    totalPages: 1,
+  });
+
+  // Fetch rooms based on URL params
+  useEffect(() => {
+    const fetchRooms = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const params = {
+          type: searchParams.get('type') || undefined,
+          minPrice: searchParams.get('minPrice')
+            ? Number(searchParams.get('minPrice'))
+            : undefined,
+          maxPrice: searchParams.get('maxPrice')
+            ? Number(searchParams.get('maxPrice'))
+            : undefined,
+          capacity: searchParams.get('capacity')
+            ? Number(searchParams.get('capacity'))
+            : undefined,
+          page: searchParams.get('page')
+            ? Number(searchParams.get('page'))
+            : 1,
+          limit: 12,
+        };
+
+        const response = await getRooms(params);
+
+        if (response.status === 'success' && response.data) {
+          setRooms(response.data.rooms || []);
+          if (response.data.pagination) {
+            setPagination(response.data.pagination);
+          }
+        } else {
+          throw new Error('Failed to fetch rooms');
+        }
+      } catch (err) {
+        console.error('Error fetching rooms:', err);
+        setError('Không thể tải danh sách phòng. Vui lòng thử lại.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRooms();
+  }, [searchParams]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Back Button */}
+        <Link
+          to="/"
+          className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Quay lại trang chủ</span>
+        </Link>
+
+        <div className="mb-10">
+          <h1 className="text-3xl text-center font-bold text-gray-900">
+            Danh sách phòng
+          </h1>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+          <aside className="lg:col-span-1">
+            <RoomFilter />
+          </aside>
+
+          <main className="lg:col-span-3">
+            {loading && (
+              <div className="grid grid-cols-1 md:grid-cols-2 
+                xl:grid-cols-3 gap-6"
+              >
+                {Array.from({ length: 6 }).map((_, index) => (
+                  <RoomCardSkeleton key={index} />
+                ))}
+              </div>
+            )}
+
+            {error && !loading && (
+              <div className="bg-red-50 border border-red-200 
+                rounded-lg p-6 text-center"
+              >
+                <svg
+                  className="w-12 h-12 text-red-400 mx-auto mb-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 
+                      9 9 0 0118 0z"
+                  />
+                </svg>
+                <p className="text-red-800 font-medium">{error}</p>
+                <button
+                  onClick={() => window.location.reload()}
+                  className="mt-4 px-4 py-2 bg-red-600 
+                    text-white rounded-lg hover:bg-red-700 
+                    transition-colors"
+                >
+                  Thử lại
+                </button>
+              </div>
+            )}
+
+            {!loading && !error && rooms.length === 0 && (
+              <div className="bg-white rounded-lg shadow-md 
+                p-12 text-center"
+              >
+                <svg
+                  className="w-24 h-24 text-gray-300 mx-auto mb-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 
+                      0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 
+                      4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                  />
+                </svg>
+                <h3 className="text-xl font-semibold 
+                  text-gray-800 mb-2"
+                >
+                  Không tìm thấy phòng phù hợp
+                </h3>
+                <p className="text-gray-600 mb-6">
+                  Vui lòng thử điều chỉnh bộ lọc hoặc tìm kiếm khác
+                </p>
+                <button
+                  onClick={() => window.location.href = '/rooms'}
+                  className="px-6 py-2 bg-blue-600 text-white 
+                    rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Xóa bộ lọc
+                </button>
+              </div>
+            )}
+
+            {!loading && !error && rooms.length > 0 && (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 
+                  xl:grid-cols-2 gap-6"
+                >
+                  {rooms.map((room) => (
+                    <RoomCard key={room.id} room={room} />
+                  ))}
+                </div>
+
+                <Pagination
+                  currentPage={pagination.page}
+                  totalPages={pagination.totalPages}
+                />
+              </>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomListPage;
diff --git a/client/src/pages/customer/SearchResultsPage.tsx b/client/src/pages/customer/SearchResultsPage.tsx
new file mode 100644
index 00000000..0b4fcd52
--- /dev/null
+++ b/client/src/pages/customer/SearchResultsPage.tsx
@@ -0,0 +1,357 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  useSearchParams, 
+  useNavigate, 
+  Link 
+} from 'react-router-dom';
+import { 
+  Search, 
+  Calendar, 
+  AlertCircle, 
+  ArrowLeft,
+  Home,
+  Users,
+} from 'lucide-react';
+import { 
+  RoomCard, 
+  RoomCardSkeleton,
+  Pagination,
+} from '../../components/rooms';
+import { searchAvailableRooms } from 
+  '../../services/api/roomService';
+import type { Room } from '../../services/api/roomService';
+import { toast } from 'react-toastify';
+
+const SearchResultsPage: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    limit: 12,
+    totalPages: 1,
+  });
+
+  // Get search params
+  const from = searchParams.get('from') || '';
+  const to = searchParams.get('to') || '';
+  const type = searchParams.get('type') || '';
+  const capacityParam = searchParams.get('capacity') || '';
+  const capacity = capacityParam ? Number(capacityParam) : undefined;
+  const pageParam = searchParams.get('page') || '';
+  const page = pageParam ? Number(pageParam) : 1;
+
+  useEffect(() => {
+    // Validate required params
+    if (!from || !to) {
+      toast.error(
+        'Missing search information. ' +
+        'Please select check-in and check-out dates.'
+      );
+      navigate('/');
+      return;
+    }
+
+    fetchAvailableRooms();
+  }, [from, to, type, capacity, page]);
+
+  const fetchAvailableRooms = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await searchAvailableRooms({
+        from,
+        to,
+        type: type || undefined,
+        capacity: capacity || undefined,
+        page,
+        limit: 12,
+      });
+
+      if (
+        response.success || 
+        response.status === 'success'
+      ) {
+        setRooms(response.data.rooms || []);
+        if (response.data.pagination) {
+          setPagination(response.data.pagination);
+        } else {
+          // Fallback compute
+          const total = response.data.rooms
+            ? response.data.rooms.length
+            : 0;
+          const limit = 12;
+          setPagination({
+            total,
+            page,
+            limit,
+            totalPages: Math.max(1, Math.ceil(total / limit)),
+          });
+        }
+      } else {
+        throw new Error('Unable to search rooms');
+      }
+    } catch (err: any) {
+      console.error('Error searching rooms:', err);
+      const message =
+        err.response?.data?.message ||
+        'Unable to search available rooms';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Back Button */}
+        <Link
+          to="/"
+          className="inline-flex items-center gap-2 bg-indigo-600 
+            text-white px-3 py-2 rounded-md hover:bg-indigo-700 
+            disabled:bg-gray-400 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span>Back to home</span>
+        </Link>
+
+        {/* Search Info Header */}
+        <div 
+          className="bg-white rounded-lg shadow-sm 
+            p-6 mb-8"
+        >
+          <div className="flex items-start justify-between 
+            flex-wrap gap-4"
+          >
+            <div>
+              <h1 
+                className="text-3xl font-bold 
+                  text-gray-900 mb-4"
+              >
+                Search Results
+              </h1>
+              
+              <div 
+                className="flex flex-wrap items-center 
+                  gap-4 text-gray-700"
+              >
+                <div 
+                  className="flex items-center gap-2"
+                >
+                  <Calendar className="w-5 h-5 
+                    text-indigo-600" 
+                  />
+                  <span>
+                    <strong>Check-in:</strong>{' '}
+                    {formatDate(from)}
+                  </span>
+                </div>
+                
+                <div 
+                  className="flex items-center gap-2"
+                >
+                  <Calendar className="w-5 h-5 
+                    text-indigo-600" 
+                  />
+                  <span>
+                    <strong>Check-out:</strong>{' '}
+                    {formatDate(to)}
+                  </span>
+                </div>
+
+                {type && (
+                  <div 
+                    className="flex items-center gap-2"
+                  >
+                    <Home className="w-5 h-5 
+                      text-indigo-600" 
+                    />
+                    <span>
+                      <strong>Room Type:</strong>{' '}
+                      {type}
+                    </span>
+                  </div>
+                )}
+                {capacity && (
+                  <div className="flex items-center gap-2">
+                    <Users className="w-5 h-5 text-indigo-600" />
+                    <span>
+                      <strong>Guests:</strong>{' '}
+                      {capacity}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <button
+              onClick={() => navigate('/')}
+              className="px-4 py-2 border border-gray-300 
+                bg-indigo-600 text-white rounded-lg 
+                hover:bg-indigo-700 disabled:bg-gray-400 
+                transition-colors flex items-center gap-2"
+            >
+              <Search className="w-4 h-4" />
+              New Search
+            </button>
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {loading && (
+          <div>
+            <p 
+              className="text-gray-600 mb-6 
+                text-center animate-pulse"
+            >
+              Searching for available rooms...
+            </p>
+            <div 
+              className="grid grid-cols-1 md:grid-cols-2 
+                lg:grid-cols-3 gap-6"
+            >
+              {[...Array(6)].map((_, index) => (
+                <RoomCardSkeleton key={index} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !loading && (
+          <div 
+            className="bg-red-50 border border-red-200 
+              rounded-lg p-8 text-center"
+          >
+            <AlertCircle 
+              className="w-12 h-12 text-red-500 
+                mx-auto mb-3" 
+            />
+            <p className="text-red-700 font-medium mb-4">
+              {error}
+            </p>
+            <button
+              onClick={fetchAvailableRooms}
+              className="px-6 py-2 bg-red-600 
+                text-white rounded-lg 
+                hover:bg-red-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+
+        {/* Results */}
+        {!loading && !error && (
+          <>
+            {rooms.length > 0 ? (
+              <>
+                <div 
+                  className="flex items-center 
+                    justify-between mb-6"
+                >
+                </div>
+
+                <div 
+                  className="grid grid-cols-1 
+                    md:grid-cols-2 lg:grid-cols-3 
+                    gap-6"
+                >
+                  {rooms.map((room) => (
+                    <RoomCard key={room.id} room={room} />
+                  ))}
+                </div>
+
+                <Pagination
+                  currentPage={pagination.page}
+                  totalPages={pagination.totalPages}
+                />
+              </>
+            ) : (
+              // Empty State
+              <div 
+                className="bg-white rounded-lg 
+                  shadow-sm p-12 text-center"
+              >
+                <div 
+                  className="w-24 h-24 bg-gray-100 
+                    rounded-full flex items-center 
+                    justify-center mx-auto mb-6"
+                >
+                  <Search 
+                    className="w-12 h-12 text-gray-400" 
+                  />
+                </div>
+                
+                <h3 
+                  className="text-2xl font-bold 
+                    text-gray-900 mb-3"
+                >
+                  No matching rooms found
+                </h3>
+                
+                <p 
+                  className="text-gray-600 mb-6 
+                    max-w-md mx-auto"
+                >
+                  Sorry, there are no available rooms 
+                  for the selected dates. 
+                  Please try searching with different dates 
+                  or room types.
+                </p>
+
+                <div 
+                  className="flex flex-col sm:flex-row 
+                    gap-3 justify-center"
+                >
+                  <button
+                    onClick={() => navigate('/')}
+                    className="px-6 py-3 bg-indigo-600 
+                      text-white rounded-lg 
+                      hover:bg-indigo-700 
+                      transition-colors font-semibold
+                      inline-flex items-center 
+                      justify-center gap-2"
+                  >
+                    <Search className="w-5 h-5" />
+                    Search Again
+                  </button>
+                  
+                  <Link
+                    to="/rooms"
+                    className="px-6 py-3 border 
+                      border-gray-300 text-gray-700 
+                      rounded-lg hover:bg-gray-50 
+                      transition-colors font-semibold
+                      inline-flex items-center 
+                      justify-center gap-2"
+                  >
+                    View All Rooms
+                  </Link>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchResultsPage;
diff --git a/client/src/services/api/apiClient.ts b/client/src/services/api/apiClient.ts
new file mode 100644
index 00000000..deb4673b
--- /dev/null
+++ b/client/src/services/api/apiClient.ts
@@ -0,0 +1,86 @@
+import axios from 'axios';
+
+// Base URL từ environment hoặc mặc định. Ensure it points to the
+// server API root (append '/api' if not provided) so frontend calls
+// like '/bookings/me' resolve to e.g. 'http://localhost:3000/api/bookings/me'.
+const rawBase = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+// Normalize base and ensure a single /api suffix. If the provided
+// VITE_API_URL already points to the API root (contains '/api'),
+// don't append another '/api'.
+const normalized = String(rawBase).replace(/\/$/, '');
+const API_BASE_URL = /\/api(\/?$)/i.test(normalized)
+  ? normalized
+  : normalized + '/api';
+
+// Tạo axios instance
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000,
+  withCredentials: true, // Enable sending cookies
+});
+
+// Request interceptor - Thêm token vào header
+apiClient.interceptors.request.use(
+  (config) => {
+    // Normalize request URL: if a request path accidentally begins
+    // with '/api', strip that prefix so it will be appended to
+    // our baseURL exactly once. This prevents double '/api/api'
+    // when code uses absolute '/api/...' paths.
+    if (config.url && typeof config.url === 'string') {
+      if (config.url.startsWith('/api/')) {
+        config.url = config.url.replace(/^\/api/, '');
+      }
+      // Also avoid accidental double slashes after concatenation
+      config.url = config.url.replace(/\/\/+/, '/');
+    }
+
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - Handle common errors
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // Handle network errors
+    if (!error.response) {
+      console.error('Network error:', error);
+      // You can show a toast notification here
+      return Promise.reject({
+        ...error,
+        message: 'Network error. Please check ' +
+          'your internet connection.',
+      });
+    }
+
+    if (error.response?.status === 401) {
+      // Token expired or invalid
+      localStorage.removeItem('token');
+      localStorage.removeItem('userInfo');
+      window.location.href = '/login';
+    }
+
+    // Handle other HTTP errors
+    if (error.response?.status >= 500) {
+      console.error('Server error:', error);
+      return Promise.reject({
+        ...error,
+        message: 'Server error. Please try again later.',
+      });
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;
diff --git a/client/src/services/api/authService.ts b/client/src/services/api/authService.ts
new file mode 100644
index 00000000..c0815845
--- /dev/null
+++ b/client/src/services/api/authService.ts
@@ -0,0 +1,137 @@
+import apiClient from './apiClient';
+
+// Types
+export interface LoginCredentials {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+}
+
+export interface RegisterData {
+  name: string;
+  email: string;
+  password: string;
+  phone?: string;
+}
+
+export interface AuthResponse {
+  // Server may use `status: 'success'` or boolean `success`
+  status?: string;
+  success?: boolean;
+  message?: string;
+  data?: {
+    token?: string;
+    refreshToken?: string;
+    user?: {
+      id: number;
+      name: string;
+      email: string;
+      phone?: string;
+      avatar?: string;
+      role: string;
+      createdAt?: string;
+    };
+  };
+}
+
+export interface ForgotPasswordData {
+  email: string;
+}
+
+export interface ResetPasswordData {
+  token: string;
+  password: string;
+  confirmPassword: string;
+}
+
+/**
+ * Auth Service - Xử lý các API calls liên quan 
+ * đến authentication
+ */
+const authService = {
+  /**
+   * Đăng nhập
+   */
+  login: async (
+    credentials: LoginCredentials
+  ): Promise<AuthResponse> => {
+    const response = await apiClient.post<AuthResponse>(
+      '/api/auth/login',
+      credentials
+    );
+    return response.data;
+  },
+
+  /**
+   * Đăng ký tài khoản mới
+   */
+  register: async (
+    data: RegisterData
+  ): Promise<AuthResponse> => {
+    const response = await apiClient.post<AuthResponse>(
+      '/api/auth/register',
+      data
+    );
+    return response.data;
+  },
+
+  /**
+   * Đăng xuất
+   */
+  logout: async (): Promise<void> => {
+    try {
+      await apiClient.post('/api/auth/logout');
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  },
+
+  /**
+   * Lấy thông tin user hiện tại
+   */
+  getProfile: async (): Promise<AuthResponse> => {
+    const response = await apiClient.get<AuthResponse>(
+      '/api/auth/profile'
+    );
+    return response.data;
+  },
+
+  /**
+   * Refresh token
+   */
+  refreshToken: async (): Promise<AuthResponse> => {
+    // No need to send refreshToken in body - it's in cookie
+    const response = await apiClient.post<AuthResponse>(
+      '/api/auth/refresh-token'
+    );
+    return response.data;
+  },
+
+  /**
+   * Quên mật khẩu - Gửi email reset
+   */
+  forgotPassword: async (
+    data: ForgotPasswordData
+  ): Promise<{ status?: string; success?: boolean; message?: string }> => {
+    const response = await apiClient.post(
+      '/api/auth/forgot-password',
+      data
+    );
+    return response.data;
+  },
+
+  /**
+   * Đặt lại mật khẩu
+   */
+  resetPassword: async (
+    data: ResetPasswordData
+  ): Promise<{ status?: string; success?: boolean; message?: string }> => {
+    const response = await apiClient.post(
+      '/api/auth/reset-password',
+      data
+    );
+    return response.data;
+  },
+};
+
+export default authService;
diff --git a/client/src/services/api/bannerService.ts b/client/src/services/api/bannerService.ts
new file mode 100644
index 00000000..30a62fba
--- /dev/null
+++ b/client/src/services/api/bannerService.ts
@@ -0,0 +1,54 @@
+import apiClient from './apiClient';
+
+/**
+ * Banner API Service
+ */
+
+export interface Banner {
+  id: number;
+  title: string;
+  image_url: string;
+  link?: string;
+  position: string;
+  display_order: number;
+  is_active: boolean;
+  start_date?: string;
+  end_date?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface BannerListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    banners: Banner[];
+  };
+  message?: string;
+}
+
+/**
+ * Get banners by position
+ */
+export const getBannersByPosition = async (
+  position: string = 'home'
+): Promise<BannerListResponse> => {
+  const response = await apiClient.get('/banners', {
+    params: { position },
+  });
+  return response.data;
+};
+
+/**
+ * Get all active banners
+ */
+export const getActiveBanners = async (): 
+  Promise<BannerListResponse> => {
+  const response = await apiClient.get('/banners');
+  return response.data;
+};
+
+export default {
+  getBannersByPosition,
+  getActiveBanners,
+};
diff --git a/client/src/services/api/bookingService.ts b/client/src/services/api/bookingService.ts
new file mode 100644
index 00000000..814375bf
--- /dev/null
+++ b/client/src/services/api/bookingService.ts
@@ -0,0 +1,314 @@
+import apiClient from './apiClient';
+
+// Types
+export interface BookingData {
+  room_id: number;
+  check_in_date: string; // YYYY-MM-DD
+  check_out_date: string; // YYYY-MM-DD
+  guest_count: number;
+  notes?: string;
+  payment_method: 'cash' | 'bank_transfer';
+  total_price: number;
+  guest_info: {
+    full_name: string;
+    email: string;
+    phone: string;
+  };
+}
+
+export interface Booking {
+  id: number;
+  booking_number: string;
+  user_id: number;
+  room_id: number;
+  check_in_date: string;
+  check_out_date: string;
+  guest_count: number;
+  total_price: number;
+  status: 
+    | 'pending' 
+    | 'confirmed' 
+    | 'cancelled' 
+    | 'checked_in' 
+    | 'checked_out';
+  payment_method: 'cash' | 'bank_transfer';
+  payment_status: 
+    | 'unpaid' 
+    | 'paid' 
+    | 'refunded';
+  deposit_paid?: boolean;
+  requires_deposit?: boolean;
+  notes?: string;
+  guest_info?: {
+    full_name: string;
+    email: string;
+    phone: string;
+  };
+  room?: {
+    id: number;
+    room_number: string;
+    floor: number;
+    status: string;
+    room_type: {
+      id: number;
+      name: string;
+      base_price: number;
+      capacity: number;
+      images?: string[];
+    };
+  };
+  user?: {
+    id: number;
+    name: string;
+    full_name: string;
+    email: string;
+    phone?: string;
+    phone_number?: string;
+  };
+  payments?: Payment[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Payment {
+  id: number;
+  booking_id: number;
+  amount: number;
+  payment_method: string;
+  payment_type: 'full' | 'deposit' | 'remaining';
+  deposit_percentage?: number;
+  payment_status: 'pending' | 'completed' | 'failed' | 'refunded';
+  transaction_id?: string;
+  payment_date?: string;
+  notes?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface BookingResponse {
+  success: boolean;
+  data: {
+    booking: Booking;
+  };
+  message?: string;
+}
+
+export interface BookingsResponse {
+  success: boolean;
+  data: {
+    bookings: Booking[];
+    pagination?: {
+      page: number;
+      limit: number;
+      total: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface CheckBookingResponse {
+  success: boolean;
+  data: {
+    booking: Booking;
+  };
+  message?: string;
+}
+
+/**
+ * Create a new booking
+ * POST /api/bookings
+ */
+export const createBooking = async (
+  bookingData: BookingData
+): Promise<BookingResponse> => {
+  const response = await apiClient.post<BookingResponse>(
+    '/bookings',
+    bookingData
+  );
+  return response.data;
+};
+
+/**
+ * Get all bookings of the current user
+ * GET /api/bookings/me
+ */
+export const getMyBookings = async (): 
+  Promise<BookingsResponse> => {
+  const response = await apiClient.get<BookingsResponse>(
+    '/bookings/me'
+  );
+  return response.data;
+};
+
+/**
+ * Get booking by ID
+ * GET /api/bookings/:id
+ */
+export const getBookingById = async (
+  id: number
+): Promise<BookingResponse> => {
+  const response = await apiClient.get<BookingResponse>(
+    `/bookings/${id}`
+  );
+  return response.data;
+};
+
+/**
+ * Cancel a booking
+ * PATCH /api/bookings/:id/cancel
+ */
+export const cancelBooking = async (
+  id: number
+): Promise<BookingResponse> => {
+  const response = await apiClient.patch<BookingResponse>(
+    `/bookings/${id}/cancel`
+  );
+  return response.data;
+};
+
+/**
+ * Check booking by booking number
+ * GET /api/bookings/check/:bookingNumber
+ */
+export const checkBookingByNumber = async (
+  bookingNumber: string
+): Promise<CheckBookingResponse> => {
+  const response = 
+    await apiClient.get<CheckBookingResponse>(
+      `/bookings/check/${bookingNumber}`
+    );
+  return response.data;
+};
+
+/**
+ * Get all bookings (admin)
+ * GET /api/bookings
+ */
+export const getAllBookings = async (
+  params?: {
+    status?: string;
+    search?: string;
+    page?: number;
+    limit?: number;
+  }
+): Promise<BookingsResponse> => {
+  const response = await apiClient.get<BookingsResponse>('/bookings', { params });
+  return response.data;
+};
+
+/**
+ * Update booking status (admin)
+ * PUT /api/bookings/:id
+ */
+export const updateBooking = async (
+  id: number,
+  data: Partial<Booking>
+): Promise<BookingResponse> => {
+  const response = await apiClient.put<BookingResponse>(`/bookings/${id}`, data);
+  return response.data;
+};
+
+/**
+ * Check room availability (helper function)
+ * GET /api/rooms/available?roomId=...&from=...&to=...
+ */
+export const checkRoomAvailability = async (
+  roomId: number,
+  checkInDate: string,
+  checkOutDate: string
+): Promise<{ available: boolean; message?: string }> => {
+  try {
+    const response = await apiClient.get(
+      '/rooms/available',
+      {
+        params: {
+          roomId,
+          from: checkInDate,
+          to: checkOutDate,
+        },
+      }
+    );
+    return {
+      available: true,
+      message: response.data.message,
+    };
+  } catch (error: any) {
+    if (error.response?.status === 409) {
+      return {
+        available: false,
+        message: 
+          error.response.data.message || 
+          'Phòng đã được đặt trong thời gian này',
+      };
+    }
+    throw error;
+  }
+};
+
+/**
+ * Notify payment (upload payment receipt)
+ * POST /api/notify/payment
+ */
+export const notifyPayment = async (
+  bookingId: number,
+  file?: File
+): Promise<{ success: boolean; message?: string }> => {
+  const formData = new FormData();
+  formData.append('bookingId', bookingId.toString());
+  
+  if (file) {
+    formData.append('receipt', file);
+  }
+
+  const response = await apiClient.post(
+    '/notify/payment',
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    }
+  );
+  
+  return response.data;
+};
+
+/**
+ * Generate QR code URL for bank transfer
+ */
+export const generateQRCode = (
+  bookingNumber: string,
+  amount: number
+): string => {
+  // Using VietQR API format
+  // Bank: Vietcombank (VCB)
+  // Account: 0123456789
+  const bankCode = 'VCB';
+  const accountNumber = '0123456789';
+  const accountName = 'KHACH SAN ABC';
+  const transferContent = bookingNumber;
+  
+  // VietQR format
+  const qrUrl = 
+    `https://img.vietqr.io/image/${bankCode}-` +
+    `${accountNumber}-compact2.jpg?` +
+    `amount=${amount}&` +
+    `addInfo=${encodeURIComponent(transferContent)}&` +
+    `accountName=${encodeURIComponent(accountName)}`;
+  
+  return qrUrl;
+};
+
+export default {
+  createBooking,
+  getMyBookings,
+  getBookingById,
+  cancelBooking,
+  checkBookingByNumber,
+  checkRoomAvailability,
+  notifyPayment,
+  generateQRCode,
+  getAllBookings,
+  updateBooking,
+};
diff --git a/client/src/services/api/favoriteService.ts b/client/src/services/api/favoriteService.ts
new file mode 100644
index 00000000..969dbe15
--- /dev/null
+++ b/client/src/services/api/favoriteService.ts
@@ -0,0 +1,95 @@
+import apiClient from './apiClient';
+import type { Room } from './roomService';
+
+/**
+ * Favorite API Service
+ */
+
+export interface Favorite {
+  id: number;
+  user_id: number;
+  room_id: number;
+  created_at: string;
+  updated_at: string;
+  room?: Room;
+}
+
+export interface FavoriteResponse {
+  success?: boolean;
+  status: string;
+  message?: string;
+  data?: {
+    favorites: Favorite[];
+    total: number;
+  };
+}
+
+export interface FavoriteActionResponse {
+  success?: boolean;
+  status: string;
+  message: string;
+  data?: {
+    favorite: Favorite;
+  };
+}
+
+export interface CheckFavoriteResponse {
+  success?: boolean;
+  status: string;
+  data: {
+    isFavorited: boolean;
+  };
+}
+
+/**
+ * Get user's favorite rooms
+ */
+export const getFavorites = async (): Promise<
+  FavoriteResponse
+> => {
+  const response = await apiClient.get('/api/favorites');
+  return response.data;
+};
+
+/**
+ * Add room to favorites
+ */
+export const addFavorite = async (
+  roomId: number
+): Promise<FavoriteActionResponse> => {
+  const response = await apiClient.post(
+    `/api/favorites/${roomId}`
+  );
+  return response.data;
+};
+
+/**
+ * Remove room from favorites
+ */
+export const removeFavorite = async (
+  roomId: number
+): Promise<FavoriteActionResponse> => {
+  const response = await apiClient.delete(
+    `/api/favorites/${roomId}`
+  );
+  return response.data;
+};
+
+/**
+ * Check if room is favorited
+ */
+export const checkFavorite = async (
+  roomId: number
+): Promise<CheckFavoriteResponse> => {
+  const response = await apiClient.get(
+    `/api/favorites/check/${roomId}`
+  );
+  return response.data;
+};
+
+export default {
+  getFavorites,
+  addFavorite,
+  removeFavorite,
+  checkFavorite,
+};
diff --git a/client/src/services/api/index.ts b/client/src/services/api/index.ts
new file mode 100644
index 00000000..fbfa77a8
--- /dev/null
+++ b/client/src/services/api/index.ts
@@ -0,0 +1,33 @@
+export { default as apiClient } from './apiClient';
+export { default as authService } from './authService';
+export type * from './authService';
+
+export { default as roomService } from './roomService';
+export type * from './roomService';
+
+export { default as bannerService } from './bannerService';
+export type * from './bannerService';
+
+export { default as reviewService } from './reviewService';
+export type * from './reviewService';
+
+export { default as favoriteService } from './favoriteService';
+export type * from './favoriteService';
+
+export { default as bookingService } from './bookingService';
+export type * from './bookingService';
+
+export { default as paymentService } from './paymentService';
+export type * from './paymentService';
+
+export { default as userService } from './userService';
+export type * from './userService';
+
+export { default as serviceService } from './serviceService';
+export type * from './serviceService';
+
+export { default as promotionService } from './promotionService';
+export type * from './promotionService';
+
+export { default as reportService } from './reportService';
+export type * from './reportService';
diff --git a/client/src/services/api/paymentService.ts b/client/src/services/api/paymentService.ts
new file mode 100644
index 00000000..e35394f5
--- /dev/null
+++ b/client/src/services/api/paymentService.ts
@@ -0,0 +1,188 @@
+import apiClient from './apiClient';
+
+// Types
+export interface PaymentData {
+  booking_id: number;
+  amount: number;
+  payment_method: 'cash' | 'bank_transfer';
+  transaction_id?: string;
+  notes?: string;
+}
+
+export interface Payment {
+  id: number;
+  booking_id: number;
+  amount: number;
+  payment_method: 'cash' | 'bank_transfer' | 'credit_card' | 'debit_card' | 'e_wallet';
+  payment_type: 'full' | 'deposit' | 'remaining';
+  deposit_percentage?: number;
+  payment_status: 'pending' | 'completed' | 'failed' | 'refunded';
+  transaction_id?: string;
+  payment_date?: string;
+  notes?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface BankInfo {
+  bank_name: string;
+  bank_code: string;
+  account_number: string;
+  account_name: string;
+  amount: number;
+  content: string;
+  qr_url: string;
+}
+
+export interface PaymentResponse {
+  success: boolean;
+  data: {
+    payment: Payment;
+  };
+  message?: string;
+}
+
+/**
+ * Create a new payment record
+ * POST /api/payments
+ */
+export const createPayment = async (
+  paymentData: PaymentData
+): Promise<PaymentResponse> => {
+  const response = await apiClient.post<PaymentResponse>(
+    '/payments',
+    paymentData
+  );
+  return response.data;
+};
+
+/**
+ * Get payment details by booking ID
+ * GET /api/payments/:bookingId
+ */
+export const getPaymentByBookingId = async (
+  bookingId: number
+): Promise<PaymentResponse> => {
+  const response = await apiClient.get<PaymentResponse>(
+    `/payments/${bookingId}`
+  );
+  return response.data;
+};
+
+/**
+ * Confirm bank transfer payment (with receipt)
+ * POST /api/payments/confirm
+ */
+export const confirmBankTransfer = async (
+  bookingId: number,
+  transactionId?: string,
+  receipt?: File
+): Promise<{ success: boolean; message?: string }> => {
+  const formData = new FormData();
+  formData.append('booking_id', bookingId.toString());
+  
+  if (transactionId) {
+    formData.append('transaction_id', transactionId);
+  }
+  
+  if (receipt) {
+    formData.append('receipt', receipt);
+  }
+
+  const response = await apiClient.post(
+    '/payments/confirm',
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    }
+  );
+  
+  return response.data;
+};
+
+/**
+ * Get bank transfer info with QR code for deposit
+ * GET /api/payments/:paymentId/bank-info
+ */
+export const getBankTransferInfo = async (
+  paymentId: number
+): Promise<{ 
+  success: boolean; 
+  data: { payment: Payment; bank_info: BankInfo }; 
+  message?: string;
+}> => {
+  const response = await apiClient.get(
+    `/payments/${paymentId}/bank-info`
+  );
+  return response.data;
+};
+
+/**
+ * Confirm deposit payment
+ * POST /api/payments/confirm-deposit
+ */
+export const confirmDepositPayment = async (
+  paymentId: number,
+  transactionId?: string
+): Promise<{
+  success: boolean;
+  data: { payment: Payment; booking: any };
+  message?: string;
+}> => {
+  const response = await apiClient.post(
+    '/payments/confirm-deposit',
+    {
+      payment_id: paymentId,
+      transaction_id: transactionId,
+    }
+  );
+  return response.data;
+};
+
+/**
+ * Notify payment completion (for admin verification)
+ * POST /api/payments/notify
+ */
+export const notifyPaymentCompletion = async (
+  paymentId: number,
+  notes?: string
+): Promise<{ success: boolean; message?: string }> => {
+  const response = await apiClient.post(
+    '/payments/notify',
+    {
+      payment_id: paymentId,
+      notes,
+    }
+  );
+  return response.data;
+};
+
+/**
+ * Get payments for a booking
+ * GET /api/payments/booking/:bookingId
+ */
+export const getPaymentsByBookingId = async (
+  bookingId: number
+): Promise<{
+  success: boolean;
+  data: { payments: Payment[] };
+  message?: string;
+}> => {
+  const response = await apiClient.get(
+    `/payments/booking/${bookingId}`
+  );
+  return response.data;
+};
+
+
+export default {
+  createPayment,
+  getPaymentByBookingId,
+  confirmBankTransfer,
+  getBankTransferInfo,
+  confirmDepositPayment,
+  notifyPaymentCompletion,
+  getPaymentsByBookingId,
+};
diff --git a/client/src/services/api/promotionService.ts b/client/src/services/api/promotionService.ts
new file mode 100644
index 00000000..70f73246
--- /dev/null
+++ b/client/src/services/api/promotionService.ts
@@ -0,0 +1,147 @@
+import apiClient from './apiClient';
+
+/**
+ * Promotion API Service
+ */
+
+export interface Promotion {
+  id: number;
+  code: string;
+  name: string;
+  description?: string;
+  discount_type: 'percentage' | 'fixed';
+  discount_value: number;
+  min_booking_amount?: number;
+  max_discount_amount?: number;
+  start_date: string;
+  end_date: string;
+  usage_limit?: number;
+  used_count?: number;
+  status: 'active' | 'inactive' | 'expired';
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface PromotionListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    promotions: Promotion[];
+    pagination?: {
+      total: number;
+      page: number;
+      limit: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface CreatePromotionData {
+  code: string;
+  name: string;
+  description?: string;
+  discount_type: 'percentage' | 'fixed';
+  discount_value: number;
+  min_booking_amount?: number;
+  max_discount_amount?: number;
+  start_date: string;
+  end_date: string;
+  usage_limit?: number;
+  status?: 'active' | 'inactive' | 'expired';
+}
+
+export interface UpdatePromotionData {
+  code?: string;
+  name?: string;
+  description?: string;
+  discount_type?: 'percentage' | 'fixed';
+  discount_value?: number;
+  min_booking_amount?: number;
+  max_discount_amount?: number;
+  start_date?: string;
+  end_date?: string;
+  usage_limit?: number;
+  status?: 'active' | 'inactive' | 'expired';
+}
+
+export interface PromotionSearchParams {
+  status?: string;
+  search?: string;
+  page?: number;
+  limit?: number;
+}
+
+/**
+ * Get all promotions
+ */
+export const getPromotions = async (
+  params: PromotionSearchParams = {}
+): Promise<PromotionListResponse> => {
+  const response = await apiClient.get('/promotions', { params });
+  return response.data;
+};
+
+/**
+ * Get promotion by ID
+ */
+export const getPromotionById = async (
+  id: number
+): Promise<{ success: boolean; data: { promotion: Promotion } }> => {
+  const response = await apiClient.get(`/promotions/${id}`);
+  return response.data;
+};
+
+/**
+ * Create new promotion
+ */
+export const createPromotion = async (
+  data: CreatePromotionData
+): Promise<{ success: boolean; data: { promotion: Promotion }; message: string }> => {
+  const response = await apiClient.post('/promotions', data);
+  return response.data;
+};
+
+/**
+ * Update promotion
+ */
+export const updatePromotion = async (
+  id: number,
+  data: UpdatePromotionData
+): Promise<{ success: boolean; data: { promotion: Promotion }; message: string }> => {
+  const response = await apiClient.put(`/promotions/${id}`, data);
+  return response.data;
+};
+
+/**
+ * Delete promotion
+ */
+export const deletePromotion = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.delete(`/promotions/${id}`);
+  return response.data;
+};
+
+/**
+ * Validate promotion code
+ */
+export const validatePromotion = async (
+  code: string,
+  bookingValue: number
+): Promise<{ success: boolean; data: { promotion: Promotion; discount: number }; message: string }> => {
+  const response = await apiClient.post('/promotions/validate', {
+    code,
+    booking_value: bookingValue,
+  });
+  return response.data;
+};
+
+export default {
+  getPromotions,
+  getPromotionById,
+  createPromotion,
+  updatePromotion,
+  deletePromotion,
+  validatePromotion,
+};
diff --git a/client/src/services/api/reportService.ts b/client/src/services/api/reportService.ts
new file mode 100644
index 00000000..cc48c62f
--- /dev/null
+++ b/client/src/services/api/reportService.ts
@@ -0,0 +1,87 @@
+import apiClient from './apiClient';
+
+/**
+ * Report API Service
+ */
+
+export interface ReportData {
+  total_bookings: number;
+  total_revenue: number;
+  total_customers: number;
+  available_rooms: number;
+  occupied_rooms: number;
+  revenue_by_date?: Array<{
+    date: string;
+    revenue: number;
+    bookings: number;
+  }>;
+  bookings_by_status?: {
+    pending: number;
+    confirmed: number;
+    checked_in: number;
+    checked_out: number;
+    cancelled: number;
+  };
+  top_rooms?: Array<{
+    room_id: number;
+    room_number: string;
+    bookings: number;
+    revenue: number;
+  }>;
+  service_usage?: Array<{
+    service_id: number;
+    service_name: string;
+    usage_count: number;
+    total_revenue: number;
+  }>;
+}
+
+export interface ReportResponse {
+  success: boolean;
+  status?: string;
+  data: ReportData;
+  message?: string;
+}
+
+export interface ReportParams {
+  from?: string;
+  to?: string;
+  type?: 'daily' | 'weekly' | 'monthly' | 'yearly';
+}
+
+/**
+ * Get reports
+ */
+export const getReports = async (
+  params: ReportParams = {}
+): Promise<ReportResponse> => {
+  const response = await apiClient.get('/reports', { params });
+  return response.data;
+};
+
+/**
+ * Get dashboard statistics
+ */
+export const getDashboardStats = async (): Promise<ReportResponse> => {
+  const response = await apiClient.get('/reports/dashboard');
+  return response.data;
+};
+
+/**
+ * Export report to CSV
+ */
+export const exportReport = async (
+  params: ReportParams = {}
+): Promise<Blob> => {
+  const response = await apiClient.get('/reports/export', {
+    params,
+    responseType: 'blob',
+  });
+  return response.data;
+};
+
+export default {
+  getReports,
+  getDashboardStats,
+  exportReport,
+};
diff --git a/client/src/services/api/reviewService.ts b/client/src/services/api/reviewService.ts
new file mode 100644
index 00000000..89d6b3c8
--- /dev/null
+++ b/client/src/services/api/reviewService.ts
@@ -0,0 +1,117 @@
+import apiClient from './apiClient';
+
+/**
+ * Review API Service
+ */
+
+export interface Review {
+  id: number;
+  user_id: number;
+  room_id: number;
+  rating: number;
+  comment: string;
+  status: 'pending' | 'approved' | 'rejected';
+  created_at: string;
+  updated_at: string;
+  user?: {
+    id: number;
+    name: string;
+    full_name: string;
+    email: string;
+  };
+  room?: {
+    id: number;
+    room_number: string;
+    room_type?: {
+      name: string;
+    };
+  };
+}
+
+export interface ReviewListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    reviews: Review[];
+    average_rating?: number;
+    total_reviews?: number;
+    pagination?: {
+      total: number;
+      page: number;
+      limit: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface CreateReviewData {
+  room_id: number;
+  rating: number;
+  comment: string;
+}
+
+/**
+ * Get reviews for a specific room
+ */
+export const getRoomReviews = async (
+  roomId: number
+): Promise<ReviewListResponse> => {
+  const response = await apiClient.get(
+    `/api/rooms/${roomId}/reviews`
+  );
+  return response.data;
+};
+
+/**
+ * Create a new review
+ */
+export const createReview = async (
+  data: CreateReviewData
+): Promise<{ success: boolean; message: string; data?: Review }> => {
+  const response = await apiClient.post('/api/reviews', data);
+  return response.data;
+};
+
+/**
+ * Get all reviews (admin)
+ */
+export const getReviews = async (
+  params?: {
+    status?: string;
+    roomId?: number;
+    page?: number;
+    limit?: number;
+  }
+): Promise<ReviewListResponse> => {
+  const response = await apiClient.get('/reviews', { params });
+  return response.data;
+};
+
+/**
+ * Approve review (admin)
+ */
+export const approveReview = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.patch(`/reviews/${id}/approve`);
+  return response.data;
+};
+
+/**
+ * Reject review (admin)
+ */
+export const rejectReview = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.patch(`/reviews/${id}/reject`);
+  return response.data;
+};
+
+export default {
+  getRoomReviews,
+  createReview,
+  getReviews,
+  approveReview,
+  rejectReview,
+};
diff --git a/client/src/services/api/roomService.ts b/client/src/services/api/roomService.ts
new file mode 100644
index 00000000..9407a1d4
--- /dev/null
+++ b/client/src/services/api/roomService.ts
@@ -0,0 +1,179 @@
+import apiClient from './apiClient';
+
+/**
+ * Room API Service
+ */
+
+export interface Room {
+  id: number;
+  room_type_id: number;
+  room_number: string;
+  floor: number;
+  status: 'available' | 'occupied' | 'maintenance';
+  featured: boolean;
+  images?: string[];
+  amenities?: string[];
+  created_at: string;
+  updated_at: string;
+  room_type?: {
+    id: number;
+    name: string;
+    description: string;
+    base_price: number;
+    capacity: number;
+    amenities: string[];
+    images: string[];
+  };
+  average_rating?: number | string | null;
+  total_reviews?: number | string | null;
+}
+
+export interface RoomListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    rooms: Room[];
+    pagination?: {
+      total: number;
+      page: number;
+      limit: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface FeaturedRoomsParams {
+  featured?: boolean;
+  limit?: number;
+}
+
+export interface RoomSearchParams {
+  type?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  capacity?: number;
+  page?: number;
+  limit?: number;
+  sort?: string;
+}
+
+/**
+ * Get featured rooms for homepage
+ */
+export const getFeaturedRooms = async (
+  params: FeaturedRoomsParams = {}
+): Promise<RoomListResponse> => {
+  const response = await apiClient.get('/rooms', {
+    params: {
+      featured: params.featured ?? true,
+      limit: params.limit ?? 6,
+    },
+  });
+  return response.data;
+};
+
+/**
+ * Get all rooms with filters
+ */
+export const getRooms = async (
+  params: RoomSearchParams = {}
+): Promise<RoomListResponse> => {
+  const response = await apiClient.get('/rooms', {
+    params,
+  });
+  return response.data;
+};
+
+/**
+ * Get room by ID
+ */
+export const getRoomById = async (
+  id: number
+): Promise<{ success: boolean; data: { room: Room } }> => {
+  const response = await apiClient.get(`/rooms/${id}`);
+  return response.data;
+};
+
+/**
+ * Search available rooms
+ */
+export interface AvailableSearchParams {
+  from: string;
+  to: string;
+  type?: string;
+  capacity?: number;
+  page?: number;
+  limit?: number;
+}
+
+export const searchAvailableRooms = async (
+  params: AvailableSearchParams
+): Promise<RoomListResponse> => {
+  const response = await apiClient.get('/rooms/available', {
+    params,
+  });
+  return response.data;
+};
+
+/**
+ * Get available amenities list (unique)
+ */
+export const getAmenities = async (): Promise<{
+  success?: boolean;
+  status?: string;
+  data: { amenities: string[] };
+}> => {
+  const response = await apiClient.get('/rooms/amenities');
+  return response.data;
+};
+
+/**
+ * Create new room
+ */
+export interface CreateRoomData {
+  room_number: string;
+  floor: number;
+  room_type_id: number;
+  status: 'available' | 'occupied' | 'maintenance';
+  featured?: boolean;
+}
+
+export const createRoom = async (
+  data: CreateRoomData
+): Promise<{ success: boolean; data: { room: Room }; message: string }> => {
+  const response = await apiClient.post('/rooms', data);
+  return response.data;
+};
+
+/**
+ * Update room
+ */
+export const updateRoom = async (
+  id: number,
+  data: Partial<CreateRoomData>
+): Promise<{ success: boolean; data: { room: Room }; message: string }> => {
+  const response = await apiClient.put(`/rooms/${id}`, data);
+  return response.data;
+};
+
+/**
+ * Delete room
+ */
+export const deleteRoom = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.delete(`/rooms/${id}`);
+  return response.data;
+};
+
+export default {
+  getFeaturedRooms,
+  getRooms,
+  getRoomById,
+  searchAvailableRooms,
+  getAmenities,
+  createRoom,
+  updateRoom,
+  deleteRoom,
+};
diff --git a/client/src/services/api/serviceService.ts b/client/src/services/api/serviceService.ts
new file mode 100644
index 00000000..9d9392ef
--- /dev/null
+++ b/client/src/services/api/serviceService.ts
@@ -0,0 +1,126 @@
+import apiClient from './apiClient';
+
+/**
+ * Service API Service
+ */
+
+export interface Service {
+  id: number;
+  name: string;
+  description?: string;
+  price: number;
+  unit?: string;
+  status: 'active' | 'inactive';
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface ServiceListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    services: Service[];
+    pagination?: {
+      total: number;
+      page: number;
+      limit: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface CreateServiceData {
+  name: string;
+  description?: string;
+  price: number;
+  unit?: string;
+  status?: 'active' | 'inactive';
+}
+
+export interface UpdateServiceData {
+  name?: string;
+  description?: string;
+  price?: number;
+  unit?: string;
+  status?: 'active' | 'inactive';
+}
+
+export interface ServiceSearchParams {
+  status?: string;
+  search?: string;
+  page?: number;
+  limit?: number;
+}
+
+/**
+ * Get all services
+ */
+export const getServices = async (
+  params: ServiceSearchParams = {}
+): Promise<ServiceListResponse> => {
+  const response = await apiClient.get('/services', { params });
+  return response.data;
+};
+
+/**
+ * Get service by ID
+ */
+export const getServiceById = async (
+  id: number
+): Promise<{ success: boolean; data: { service: Service } }> => {
+  const response = await apiClient.get(`/services/${id}`);
+  return response.data;
+};
+
+/**
+ * Create new service
+ */
+export const createService = async (
+  data: CreateServiceData
+): Promise<{ success: boolean; data: { service: Service }; message: string }> => {
+  const response = await apiClient.post('/services', data);
+  return response.data;
+};
+
+/**
+ * Update service
+ */
+export const updateService = async (
+  id: number,
+  data: UpdateServiceData
+): Promise<{ success: boolean; data: { service: Service }; message: string }> => {
+  const response = await apiClient.put(`/services/${id}`, data);
+  return response.data;
+};
+
+/**
+ * Delete service
+ */
+export const deleteService = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.delete(`/services/${id}`);
+  return response.data;
+};
+
+/**
+ * Use service
+ */
+export const useService = async (data: {
+  booking_id: number;
+  service_id: number;
+  quantity: number;
+}): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.post('/services/use', data);
+  return response.data;
+};
+
+export default {
+  getServices,
+  getServiceById,
+  createService,
+  updateService,
+  deleteService,
+  useService,
+};
diff --git a/client/src/services/api/userService.ts b/client/src/services/api/userService.ts
new file mode 100644
index 00000000..18551daa
--- /dev/null
+++ b/client/src/services/api/userService.ts
@@ -0,0 +1,117 @@
+import apiClient from './apiClient';
+
+/**
+ * User API Service
+ */
+
+export interface User {
+  id: number;
+  full_name: string;
+  email: string;
+  phone_number?: string;
+  avatar?: string;
+  role: string;
+  status?: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface UserListResponse {
+  success: boolean;
+  status?: string;
+  data: {
+    users: User[];
+    pagination?: {
+      total: number;
+      page: number;
+      limit: number;
+      totalPages: number;
+    };
+  };
+  message?: string;
+}
+
+export interface CreateUserData {
+  full_name: string;
+  email: string;
+  password: string;
+  phone_number?: string;
+  role: string;
+  status?: string;
+}
+
+export interface UpdateUserData {
+  full_name?: string;
+  email?: string;
+  phone_number?: string;
+  role?: string;
+  password?: string;
+  status?: string;
+}
+
+export interface UserSearchParams {
+  role?: string;
+  status?: string;
+  search?: string;
+  page?: number;
+  limit?: number;
+}
+
+/**
+ * Get all users
+ */
+export const getUsers = async (
+  params: UserSearchParams = {}
+): Promise<UserListResponse> => {
+  const response = await apiClient.get('/users', { params });
+  return response.data;
+};
+
+/**
+ * Get user by ID
+ */
+export const getUserById = async (
+  id: number
+): Promise<{ success: boolean; data: { user: User } }> => {
+  const response = await apiClient.get(`/users/${id}`);
+  return response.data;
+};
+
+/**
+ * Create new user
+ */
+export const createUser = async (
+  data: CreateUserData
+): Promise<{ success: boolean; data: { user: User }; message: string }> => {
+  const response = await apiClient.post('/users', data);
+  return response.data;
+};
+
+/**
+ * Update user
+ */
+export const updateUser = async (
+  id: number,
+  data: UpdateUserData
+): Promise<{ success: boolean; data: { user: User }; message: string }> => {
+  const response = await apiClient.put(`/users/${id}`, data);
+  return response.data;
+};
+
+/**
+ * Delete user
+ */
+export const deleteUser = async (
+  id: number
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.delete(`/users/${id}`);
+  return response.data;
+};
+
+export default {
+  getUsers,
+  getUserById,
+  createUser,
+  updateUser,
+  deleteUser,
+};
diff --git a/client/src/store/useAuthStore.ts b/client/src/store/useAuthStore.ts
new file mode 100644
index 00000000..659cc740
--- /dev/null
+++ b/client/src/store/useAuthStore.ts
@@ -0,0 +1,275 @@
+import { create } from 'zustand';
+import { toast } from 'react-toastify';
+import authService, { 
+  LoginCredentials, 
+  RegisterData,
+  ForgotPasswordData,
+  ResetPasswordData
+} from '../services/api/authService';
+
+// Types
+interface UserInfo {
+  id: number;
+  name: string;
+  email: string;
+  phone?: string;
+  avatar?: string;
+  role: string;
+  createdAt?: string;
+}
+
+interface AuthState {
+  // State
+  token: string | null;
+  userInfo: UserInfo | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+
+  // Actions
+  login: (credentials: LoginCredentials) => Promise<void>;
+  register: (data: RegisterData) => Promise<void>;
+  logout: () => Promise<void>;
+  setUser: (user: UserInfo) => void;
+  refreshAuthToken: () => Promise<void>;
+  forgotPassword: (
+    data: ForgotPasswordData
+  ) => Promise<void>;
+  resetPassword: (
+    data: ResetPasswordData
+  ) => Promise<void>;
+  initializeAuth: () => void;
+  clearError: () => void;
+}
+
+/**
+ * useAuthStore - Zustand store managing 
+ * authentication state
+ */
+const useAuthStore = create<AuthState>((set, get) => ({
+  // Initial State
+  token: localStorage.getItem('token') || null,
+  userInfo: localStorage.getItem('userInfo')
+    ? JSON.parse(localStorage.getItem('userInfo')!)
+    : null,
+  isAuthenticated: !!localStorage.getItem('token'),
+  isLoading: false,
+  error: null,
+
+  /**
+   * Login - User login
+   */
+  login: async (credentials: LoginCredentials) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await authService.login(credentials);
+
+      // Accept either boolean `success` (client) or `status: 'success'` (server)
+      if (response.success || response.status === 'success') {
+        const token = response.data?.token;
+        const user = response.data?.user ?? null;
+
+        // If we didn't receive a token or user, treat as failure
+        if (!token || !user) {
+          throw new Error(response.message || 'Login failed.');
+        }
+
+        // Save to localStorage (only access token)
+        localStorage.setItem('token', token);
+        localStorage.setItem('userInfo', JSON.stringify(user));
+
+        // Update state
+        set({
+          token,
+          userInfo: user,
+          isAuthenticated: true,
+          isLoading: false,
+          error: null,
+        });
+
+        toast.success('Login successful!');
+      }
+    } catch (error: any) {
+      const errorMessage = 
+        error.response?.data?.message || 
+        'Login failed. Please try again.';
+      
+      set({ 
+        isLoading: false, 
+        error: errorMessage,
+        isAuthenticated: false 
+      });
+      
+      toast.error(errorMessage);
+      throw error;
+    }
+  },
+
+  /**
+   * Register - Register new account
+   */
+  register: async (data: RegisterData) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await authService.register(data);
+      
+  if (response.success || response.status === 'success') {
+        set({ isLoading: false, error: null });
+        toast.success(
+          'Registration successful! Please login.'
+        );
+      }
+    } catch (error: any) {
+      const errorMessage = 
+        error.response?.data?.message || 
+        'Registration failed. Please try again.';
+      
+      set({ isLoading: false, error: errorMessage });
+      toast.error(errorMessage);
+      throw error;
+    }
+  },
+
+  /**
+   * Logout - User logout
+   */
+  logout: async () => {
+    set({ isLoading: true });
+    try {
+      await authService.logout();
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      // Clear localStorage
+      localStorage.removeItem('token');
+      localStorage.removeItem('userInfo');
+
+      // Reset state
+      set({
+        token: null,
+        userInfo: null,
+        isAuthenticated: false,
+        isLoading: false,
+        error: null,
+      });
+
+      toast.info('Logged out');
+    }
+  },
+
+  /**
+   * SetUser - Update user information
+   */
+  setUser: (user: UserInfo) => {
+    localStorage.setItem('userInfo', JSON.stringify(user));
+    set({ userInfo: user });
+  },
+
+  /**
+   * Refresh Token - Refresh authentication token
+   */
+  refreshAuthToken: async () => {
+    try {
+      const response = await authService.refreshToken();
+
+      if (response.success || response.status === 'success') {
+        const token = response.data?.token;
+
+        if (!token) {
+          throw new Error(response.message || 'Unable to refresh token');
+        }
+
+        localStorage.setItem('token', token);
+
+        set({
+          token,
+        });
+      }
+    } catch (error) {
+      // If refresh token fails, logout
+      get().logout();
+      throw error;
+    }
+  },
+
+  /**
+   * Forgot Password - Request password reset
+   */
+  forgotPassword: async (data: ForgotPasswordData) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = 
+        await authService.forgotPassword(data);
+      
+  if (response.success || response.status === 'success') {
+        set({ isLoading: false, error: null });
+        toast.success(
+          response.message || 
+          'Please check your email to reset password.'
+        );
+      }
+    } catch (error: any) {
+      const errorMessage = 
+        error.response?.data?.message || 
+        'An error occurred. Please try again.';
+      
+      set({ isLoading: false, error: errorMessage });
+      toast.error(errorMessage);
+      throw error;
+    }
+  },
+
+  /**
+   * Reset Password - Reset password with token
+   */
+  resetPassword: async (data: ResetPasswordData) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = 
+        await authService.resetPassword(data);
+      
+  if (response.success || response.status === 'success') {
+        set({ isLoading: false, error: null });
+        toast.success(
+          response.message || 
+          'Password reset successful!'
+        );
+      }
+    } catch (error: any) {
+      const errorMessage = 
+        error.response?.data?.message || 
+        'Password reset failed. ' +
+        'Please try again.';
+      
+      set({ isLoading: false, error: errorMessage });
+      toast.error(errorMessage);
+      throw error;
+    }
+  },
+
+  /**
+   * Initialize Auth - Initialize auth state 
+   * when app loads
+   */
+  initializeAuth: () => {
+    const token = localStorage.getItem('token');
+    const userInfo = localStorage.getItem('userInfo');
+
+    if (token && userInfo) {
+      set({
+        token,
+        userInfo: JSON.parse(userInfo),
+        isAuthenticated: true,
+      });
+    }
+  },
+
+  /**
+   * Clear Error - Clear error message
+   */
+  clearError: () => {
+    set({ error: null });
+  },
+}));
+
+export default useAuthStore;
diff --git a/client/src/store/useFavoritesStore.ts b/client/src/store/useFavoritesStore.ts
new file mode 100644
index 00000000..81d78fe3
--- /dev/null
+++ b/client/src/store/useFavoritesStore.ts
@@ -0,0 +1,279 @@
+import { create } from 'zustand';
+import { toast } from 'react-toastify';
+import {
+  getFavorites,
+  addFavorite,
+  removeFavorite,
+} from '../services/api/favoriteService';
+import type { Favorite } from '../services/api/favoriteService';
+
+interface FavoritesState {
+  favorites: Favorite[];
+  favoriteRoomIds: Set<number>;
+  isLoading: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchFavorites: () => Promise<void>;
+  addToFavorites: (roomId: number) => Promise<void>;
+  removeFromFavorites: (roomId: number) => Promise<void>;
+  isFavorited: (roomId: number) => boolean;
+  syncGuestFavorites: () => Promise<void>;
+  clearFavorites: () => void;
+  
+  // Guest favorites (localStorage)
+  loadGuestFavorites: () => void;
+  saveGuestFavorite: (roomId: number) => void;
+  removeGuestFavorite: (roomId: number) => void;
+}
+
+const GUEST_FAVORITES_KEY = 'guestFavorites';
+
+// Helper functions for localStorage
+const getGuestFavorites = (): number[] => {
+  try {
+    const stored = localStorage.getItem(GUEST_FAVORITES_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error('Error loading guest favorites:', error);
+    return [];
+  }
+};
+
+const setGuestFavorites = (roomIds: number[]): void => {
+  try {
+    localStorage.setItem(
+      GUEST_FAVORITES_KEY,
+      JSON.stringify(roomIds)
+    );
+  } catch (error) {
+    console.error('Error saving guest favorites:', error);
+  }
+};
+
+const useFavoritesStore = create<FavoritesState>(
+  (set, get) => ({
+    favorites: [],
+    favoriteRoomIds: new Set(),
+    isLoading: false,
+    error: null,
+
+    // Fetch favorites from server (authenticated users)
+    fetchFavorites: async () => {
+      set({ isLoading: true, error: null });
+      try {
+        const response = await getFavorites();
+        
+        if (
+          response.status === 'success' && 
+          response.data
+        ) {
+          const favorites = response.data.favorites;
+          const roomIds = new Set(
+            favorites.map((f) => f.room_id)
+          );
+          
+          set({
+            favorites,
+            favoriteRoomIds: roomIds,
+            isLoading: false,
+          });
+        }
+      } catch (error: any) {
+        console.error('Error fetching favorites:', error);
+        
+        // If user is not authenticated, load guest favorites
+        if (error.response?.status === 401) {
+          get().loadGuestFavorites();
+        } else {
+          set({
+            error: 
+              error.response?.data?.message ||
+              'Unable to load favorites list',
+            isLoading: false,
+          });
+        }
+      }
+    },
+
+    // Add room to favorites
+    addToFavorites: async (roomId: number) => {
+      try {
+        const response = await addFavorite(roomId);
+        
+        if (response.status === 'success') {
+          // Update state
+          set((state) => {
+            const newFavoriteIds = new Set(
+              state.favoriteRoomIds
+            );
+            newFavoriteIds.add(roomId);
+            
+            return {
+              favoriteRoomIds: newFavoriteIds,
+            };
+          });
+
+          // Re-fetch to get complete data
+          await get().fetchFavorites();
+          
+          toast.success(
+            response.message || 
+            'Added to favorites'
+          );
+        }
+      } catch (error: any) {
+        console.error('Error adding favorite:', error);
+        
+        // If not authenticated, save to guest favorites
+        if (error.response?.status === 401) {
+          get().saveGuestFavorite(roomId);
+          toast.success('Added to favorites');
+        } else {
+          const message =
+            error.response?.data?.message ||
+            'Unable to add to favorites';
+          toast.error(message);
+        }
+      }
+    },
+
+    // Remove room from favorites
+    removeFromFavorites: async (roomId: number) => {
+      try {
+        const response = await removeFavorite(roomId);
+        
+        if (response.status === 'success') {
+          // Update state
+          set((state) => {
+            const newFavoriteIds = new Set(
+              state.favoriteRoomIds
+            );
+            newFavoriteIds.delete(roomId);
+            
+            const newFavorites = state.favorites.filter(
+              (f) => f.room_id !== roomId
+            );
+            
+            return {
+              favorites: newFavorites,
+              favoriteRoomIds: newFavoriteIds,
+            };
+          });
+          
+          toast.success(
+            response.message || 
+            'Removed from favorites'
+          );
+        }
+      } catch (error: any) {
+        console.error('Error removing favorite:', error);
+        
+        // If not authenticated, remove from guest favorites
+        if (error.response?.status === 401) {
+          get().removeGuestFavorite(roomId);
+          toast.success('Removed from favorites');
+        } else {
+          const message =
+            error.response?.data?.message ||
+            'Unable to remove from favorites';
+          toast.error(message);
+        }
+      }
+    },
+
+    // Check if room is favorited
+    isFavorited: (roomId: number) => {
+      return get().favoriteRoomIds.has(roomId);
+    },
+
+    // Sync guest favorites to server after login
+    syncGuestFavorites: async () => {
+      const guestFavorites = getGuestFavorites();
+      
+      if (guestFavorites.length === 0) {
+        return;
+      }
+
+      try {
+        // Add each guest favorite to server
+        await Promise.all(
+          guestFavorites.map((roomId) =>
+            addFavorite(roomId).catch(() => {
+              // Ignore errors (room might already be favorited)
+            })
+          )
+        );
+
+        // Clear guest favorites
+        localStorage.removeItem(GUEST_FAVORITES_KEY);
+        
+        // Fetch updated favorites
+        await get().fetchFavorites();
+        
+        toast.success(
+          'Favorites list synced'
+        );
+      } catch (error) {
+        console.error(
+          'Error syncing guest favorites:', 
+          error
+        );
+      }
+    },
+
+    // Clear all favorites
+    clearFavorites: () => {
+      set({
+        favorites: [],
+        favoriteRoomIds: new Set(),
+        error: null,
+      });
+      localStorage.removeItem(GUEST_FAVORITES_KEY);
+    },
+
+    // Guest favorites management
+    loadGuestFavorites: () => {
+      const guestFavorites = getGuestFavorites();
+      set({
+        favoriteRoomIds: new Set(guestFavorites),
+        isLoading: false,
+      });
+    },
+
+    saveGuestFavorite: (roomId: number) => {
+      const guestFavorites = getGuestFavorites();
+      
+      if (!guestFavorites.includes(roomId)) {
+        const updated = [...guestFavorites, roomId];
+        setGuestFavorites(updated);
+        
+        set((state) => {
+          const newFavoriteIds = new Set(
+            state.favoriteRoomIds
+          );
+          newFavoriteIds.add(roomId);
+          return { favoriteRoomIds: newFavoriteIds };
+        });
+      }
+    },
+
+    removeGuestFavorite: (roomId: number) => {
+      const guestFavorites = getGuestFavorites();
+      const updated = guestFavorites.filter(
+        (id) => id !== roomId
+      );
+      setGuestFavorites(updated);
+      
+      set((state) => {
+        const newFavoriteIds = new Set(
+          state.favoriteRoomIds
+        );
+        newFavoriteIds.delete(roomId);
+        return { favoriteRoomIds: newFavoriteIds };
+      });
+    },
+  })
+);
+
+export default useFavoritesStore;
diff --git a/client/src/styles/datepicker.css b/client/src/styles/datepicker.css
new file mode 100644
index 00000000..04b86692
--- /dev/null
+++ b/client/src/styles/datepicker.css
@@ -0,0 +1,94 @@
+/* React DatePicker Custom Styles */
+
+/* Override default datepicker styles to match Tailwind theme */
+.react-datepicker-wrapper {
+  width: 100%;
+}
+
+.react-datepicker__input-container {
+  width: 100%;
+}
+
+.react-datepicker {
+  font-family: inherit;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.react-datepicker__header {
+  background-color: #4f46e5;
+  border-bottom: none;
+  border-radius: 0.5rem 0.5rem 0 0;
+  padding-top: 0.75rem;
+}
+
+.react-datepicker__current-month,
+.react-datepicker__day-name {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.react-datepicker__day {
+  color: #374151;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.react-datepicker__day:hover {
+  background-color: #e0e7ff;
+  color: #4f46e5;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected {
+  background-color: #4f46e5;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.react-datepicker__day--in-range,
+.react-datepicker__day--in-selecting-range {
+  background-color: #e0e7ff;
+  color: #4f46e5;
+}
+
+.react-datepicker__day--disabled {
+  color: #d1d5db;
+  cursor: not-allowed;
+}
+
+.react-datepicker__day--disabled:hover {
+  background-color: transparent;
+}
+
+.react-datepicker__navigation {
+  top: 0.75rem;
+}
+
+.react-datepicker__navigation--previous {
+  border-right-color: #ffffff;
+}
+
+.react-datepicker__navigation--next {
+  border-left-color: #ffffff;
+}
+
+.react-datepicker__navigation:hover 
+  *::before {
+  border-color: #e0e7ff;
+}
+
+.react-datepicker__month {
+  margin: 0.75rem;
+}
+
+.react-datepicker__day--today {
+  font-weight: 600;
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.react-datepicker__day--today:hover {
+  background-color: #fde68a;
+}
diff --git a/client/src/styles/index.css b/client/src/styles/index.css
new file mode 100644
index 00000000..27c1539b
--- /dev/null
+++ b/client/src/styles/index.css
@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Base styles */
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
+    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 
+    'Courier New', monospace;
+}
+
+/* Custom utilities */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Smooth fade-in animation */
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Slide-in animation */
+  .animate-slide-in {
+    animation: slideIn 0.4s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Scale-in animation */
+  .animate-scale-in {
+    animation: scaleIn 0.3s ease-out;
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  /* Smooth transitions */
+  .transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+/* Image loading optimization */
+img {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+/* Lazy loading optimization */
+img[loading="lazy"] {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+img[loading="lazy"].loaded,
+img[loading="lazy"]:not([src]) {
+  opacity: 1;
+}
diff --git a/client/src/utils/validationSchemas.ts b/client/src/utils/validationSchemas.ts
new file mode 100644
index 00000000..aae5f564
--- /dev/null
+++ b/client/src/utils/validationSchemas.ts
@@ -0,0 +1,95 @@
+import * as yup from 'yup';
+
+/**
+ * Login Validation Schema
+ */
+export const loginSchema = yup.object().shape({
+  email: yup
+    .string()
+    .required('Email is required')
+    .email('Invalid email')
+    .trim(),
+  password: yup
+    .string()
+    .required('Password is required')
+    .min(8, 'Password must be at least 8 characters'),
+  rememberMe: yup
+    .boolean()
+    .optional(),
+});
+
+/**
+ * Register Validation Schema
+ */
+export const registerSchema = yup.object().shape({
+  name: yup
+    .string()
+    .required('Full name is required')
+    .min(2, 'Full name must be at least 2 characters')
+    .max(50, 'Full name must not exceed 50 characters')
+    .trim(),
+  email: yup
+    .string()
+    .required('Email is required')
+    .email('Invalid email')
+    .trim(),
+  password: yup
+    .string()
+    .required('Password is required')
+    .min(8, 'Password must be at least 8 characters')
+    .matches(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/,
+      'Password must contain uppercase, lowercase, ' +
+      'number and special character'
+    ),
+  confirmPassword: yup
+    .string()
+    .required('Please confirm password')
+    .oneOf([yup.ref('password')], 'Passwords do not match'),
+  phone: yup
+    .string()
+    .optional()
+    .matches(
+      /^[0-9]{10,11}$/,
+      'Invalid phone number'
+    ),
+});
+
+/**
+ * Forgot Password Validation Schema
+ */
+export const forgotPasswordSchema = yup.object().shape({
+  email: yup
+    .string()
+    .required('Email is required')
+    .email('Invalid email')
+    .trim(),
+});
+
+/**
+ * Reset Password Validation Schema
+ */
+export const resetPasswordSchema = yup.object().shape({
+  password: yup
+    .string()
+    .required('New password is required')
+    .min(8, 'Password must be at least 8 characters')
+    .matches(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/,
+      'Password must contain uppercase, lowercase, ' +
+      'number and special character'
+    ),
+  confirmPassword: yup
+    .string()
+    .required('Please confirm password')
+    .oneOf([yup.ref('password')], 'Passwords do not match'),
+});
+
+// Types
+export type LoginFormData = yup.InferType<typeof loginSchema>;
+export type RegisterFormData = 
+  yup.InferType<typeof registerSchema>;
+export type ForgotPasswordFormData = 
+  yup.InferType<typeof forgotPasswordSchema>;
+export type ResetPasswordFormData = 
+  yup.InferType<typeof resetPasswordSchema>;
diff --git a/client/src/validators/bookingValidator.ts b/client/src/validators/bookingValidator.ts
new file mode 100644
index 00000000..0f97bf43
--- /dev/null
+++ b/client/src/validators/bookingValidator.ts
@@ -0,0 +1,65 @@
+import * as yup from 'yup';
+
+export const bookingValidationSchema = yup.object().shape({
+  checkInDate: yup
+    .date()
+    .required('Vui lòng chọn ngày nhận phòng')
+    .min(
+      new Date(new Date().setHours(0, 0, 0, 0)),
+      'Ngày nhận phòng không thể là ngày trong quá khứ'
+    )
+    .typeError('Ngày nhận phòng không hợp lệ'),
+
+  checkOutDate: yup
+    .date()
+    .required('Vui lòng chọn ngày trả phòng')
+    .min(
+      yup.ref('checkInDate'),
+      'Ngày trả phòng phải sau ngày nhận phòng'
+    )
+    .typeError('Ngày trả phòng không hợp lệ'),
+
+  guestCount: yup
+    .number()
+    .required('Vui lòng nhập số người')
+    .min(1, 'Số người tối thiểu là 1')
+    .max(10, 'Số người tối đa là 10')
+    .integer('Số người phải là số nguyên')
+    .typeError('Số người phải là số'),
+
+  notes: yup
+    .string()
+    .max(500, 'Ghi chú không được quá 500 ký tự')
+    .optional(),
+
+  paymentMethod: yup
+    .mixed<'cash' | 'bank_transfer'>()
+    .required('Vui lòng chọn phương thức thanh toán')
+    .oneOf(
+      ['cash', 'bank_transfer'],
+      'Phương thức thanh toán không hợp lệ'
+    ),
+
+  fullName: yup
+    .string()
+    .required('Vui lòng nhập họ tên')
+    .min(2, 'Họ tên phải có ít nhất 2 ký tự')
+    .max(100, 'Họ tên không được quá 100 ký tự'),
+
+  email: yup
+    .string()
+    .required('Vui lòng nhập email')
+    .email('Email không hợp lệ'),
+
+  phone: yup
+    .string()
+    .required('Vui lòng nhập số điện thoại')
+    .matches(
+      /^[0-9]{10,11}$/,
+      'Số điện thoại phải có 10-11 chữ số'
+    ),
+});
+
+export type BookingFormData = yup.InferType<
+  typeof bookingValidationSchema
+>;
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
new file mode 100644
index 00000000..b54b4c98
--- /dev/null
+++ b/client/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 00000000..d9ef2d78
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 00000000..f91e3013
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/client/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
new file mode 100644
index 00000000..8821d559
--- /dev/null
+++ b/client/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+})
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..b081d9d6
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,25 @@
+version: '3.8'
+
+services:
+  mysql:
+    image: mysql:8.0
+    container_name: hotel-booking-mysql
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: ""
+      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
+      MYSQL_DATABASE: hotel_booking_dev
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+    command: --default-authentication-plugin=mysql_native_password
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  mysql_data:
+
diff --git a/docs/FORGOT_PASSWORD_COMPLETE.md b/docs/FORGOT_PASSWORD_COMPLETE.md
new file mode 100644
index 00000000..d5b03fbb
--- /dev/null
+++ b/docs/FORGOT_PASSWORD_COMPLETE.md
@@ -0,0 +1,488 @@
+# Chức năng 6: Quên Mật Khẩu (Forgot Password) - Hoàn Thành ✅
+
+## 📦 Files Đã Tạo/Cập Nhật
+
+### Frontend
+1. **`client/src/pages/auth/ForgotPasswordPage.tsx`** - Component form quên mật khẩu
+2. **`client/src/pages/auth/index.ts`** - Export ForgotPasswordPage
+3. **`client/src/App.tsx`** - Route `/forgot-password`
+
+### Backend
+4. **`server/src/controllers/authController.js`** - forgotPassword() & resetPassword()
+5. **`server/src/routes/authRoutes.js`** - Routes cho forgot/reset password
+
+## ✨ Tính Năng Chính
+
+### 1. Form State (Initial)
+```
+┌─────────────────────────────────────┐
+│   🏨 Hotel Icon (Blue)              │
+│   Quên mật khẩu?                    │
+│   Nhập email để nhận link...        │
+├─────────────────────────────────────┤
+│  ┌───────────────────────────────┐  │
+│  │ Email                         │  │
+│  │ [📧 email@example.com     ]   │  │
+│  ├───────────────────────────────┤  │
+│  │  [📤 Gửi link đặt lại MK]     │  │
+│  ├───────────────────────────────┤  │
+│  │ ← Quay lại đăng nhập          │  │
+│  └───────────────────────────────┘  │
+│  Chưa có tài khoản? Đăng ký ngay    │
+└─────────────────────────────────────┘
+```
+
+### 2. Success State (After Submit)
+```
+┌─────────────────────────────────────┐
+│           ✅ Success Icon            │
+│                                     │
+│      Email đã được gửi!             │
+│   Chúng tôi đã gửi link đến         │
+│      user@example.com               │
+├─────────────────────────────────────┤
+│  ℹ️ Lưu ý:                           │
+│  • Link có hiệu lực trong 1 giờ     │
+│  • Kiểm tra cả thư mục Spam/Junk    │
+│  • Nếu không nhận được, thử lại     │
+├─────────────────────────────────────┤
+│  [📧 Gửi lại email]                 │
+│  [← Quay lại đăng nhập]             │
+└─────────────────────────────────────┘
+```
+
+### 3. Two-State Design Pattern
+✅ **Form State** - Nhập email
+✅ **Success State** - Hiển thị xác nhận & hướng dẫn
+
+State management:
+```typescript
+const [isSuccess, setIsSuccess] = useState(false);
+const [submittedEmail, setSubmittedEmail] = useState('');
+```
+
+## 🔧 Features Chi Tiết
+
+### 1. Validation (Yup Schema)
+```typescript
+email:
+  - Required: "Email là bắt buộc"
+  - Valid format: "Email không hợp lệ"
+  - Trim whitespace
+```
+
+### 2. Form Field
+- **Email input** với Mail icon
+- Auto-focus khi load page
+- Validation real-time
+- Error message inline
+
+### 3. Submit Button States
+```tsx
+{isLoading ? (
+  <>
+    <Loader2 className="animate-spin" />
+    Đang xử lý...
+  </>
+) : (
+  <>
+    <Send />
+    Gửi link đặt lại mật khẩu
+  </>
+)}
+```
+
+### 4. Success Features
+✅ **Visual Confirmation**
+- Green checkmark icon
+- Success message
+- Display submitted email
+
+✅ **User Instructions**
+- Link expires in 1 hour
+- Check spam folder
+- Can resend email
+
+✅ **Action Buttons**
+- "Gửi lại email" - Reset to form state
+- "Quay lại đăng nhập" - Navigate to /login
+
+### 5. Help Section
+```tsx
+<div className="bg-white rounded-lg shadow-sm border">
+  <h3>Cần trợ giúp?</h3>
+  <p>
+    Liên hệ: support@hotel.com hoặc 1900-xxxx
+  </p>
+</div>
+```
+
+## 🔗 Backend Integration
+
+### API Endpoint: Forgot Password
+```
+POST /api/auth/forgot-password
+```
+
+**Request Body:**
+```json
+{
+  "email": "user@example.com"
+}
+```
+
+**Response (Success):**
+```json
+{
+  "status": "success",
+  "message": "Password reset link has been sent to your email"
+}
+```
+
+**Implementation:**
+```javascript
+const forgotPassword = async (req, res, next) => {
+  // 1. Find user by email
+  // 2. Generate crypto reset token (32 bytes)
+  // 3. Hash token with SHA256
+  // 4. Save to password_reset_tokens table
+  // 5. Expires in 1 hour
+  // 6. TODO: Send email with reset link
+  // 7. Return success (prevent email enumeration)
+};
+```
+
+### API Endpoint: Reset Password
+```
+POST /api/auth/reset-password
+```
+
+**Request Body:**
+```json
+{
+  "token": "reset_token_from_email",
+  "password": "NewPassword123@"
+}
+```
+
+**Response (Success):**
+```json
+{
+  "status": "success",
+  "message": "Password has been reset successfully"
+}
+```
+
+**Implementation:**
+```javascript
+const resetPassword = async (req, res, next) => {
+  // 1. Hash incoming token
+  // 2. Find valid token in DB (not expired)
+  // 3. Find user by user_id
+  // 4. Hash new password with bcrypt
+  // 5. Update user password
+  // 6. Delete used token
+  // 7. TODO: Send confirmation email
+  // 8. Return success
+};
+```
+
+## 🔐 Security Features
+
+### 1. Token Generation
+```javascript
+// Generate random 32-byte token
+const resetToken = crypto.randomBytes(32).toString('hex');
+
+// Hash with SHA256 before storing
+const hashedToken = crypto
+  .createHash('sha256')
+  .update(resetToken)
+  .digest('hex');
+```
+
+### 2. Token Storage
+- Stored in `password_reset_tokens` table
+- Hashed (SHA256)
+- Expires in 1 hour
+- One token per user (old tokens deleted)
+
+### 3. Email Enumeration Prevention
+```javascript
+// Always return success, even if email not found
+if (!user) {
+  return res.status(200).json({
+    status: 'success',
+    message: 'If email exists, reset link has been sent'
+  });
+}
+```
+
+### 4. Token Validation
+```javascript
+// Check token exists and not expired
+const resetToken = await PasswordResetToken.findOne({
+  where: {
+    token: hashedToken,
+    expires_at: { [Op.gt]: new Date() }
+  }
+});
+```
+
+## 📊 Database Schema
+
+### password_reset_tokens Table
+```sql
+CREATE TABLE password_reset_tokens (
+  id INT PRIMARY KEY AUTO_INCREMENT,
+  user_id INT NOT NULL,
+  token VARCHAR(255) NOT NULL,
+  expires_at DATETIME NOT NULL,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+```
+
+## 🎨 Design & Styling
+
+**Color Scheme:**
+- Primary: blue-600, blue-700
+- Background: gradient from-blue-50 to-indigo-100
+- Success: green-100, green-600
+- Info: blue-50, blue-200
+- Text: gray-600, gray-700, gray-900
+
+**Icons:**
+- 🏨 Hotel - Main logo
+- 📧 Mail - Email input
+- 📤 Send - Submit button
+- ⏳ Loader2 - Loading spinner
+- ✅ CheckCircle - Success state
+- ← ArrowLeft - Back navigation
+
+## 🔄 User Flow
+
+```
+1. User visits /forgot-password
+        ↓
+2. Enter email address
+        ↓
+3. Click "Gửi link đặt lại mật khẩu"
+        ↓
+4. Frontend validation (Yup)
+        ↓
+5. Call useAuthStore.forgotPassword()
+        ↓
+6. API POST /api/auth/forgot-password
+        ↓
+7. Backend:
+   - Generate token
+   - Save to DB
+   - TODO: Send email
+        ↓
+8. Frontend shows success state
+        ↓
+9. User receives email (TODO)
+        ↓
+10. Click link → /reset-password/:token
+        ↓
+11. Enter new password (Chức năng 7)
+```
+
+## 🧪 Test Scenarios
+
+### Test Case 1: Valid email
+```
+Input: email = "user@example.com"
+Expected:
+  - API called successfully
+  - Success state shown
+  - Email displayed correctly
+  - Instructions visible
+```
+
+### Test Case 2: Invalid email format
+```
+Input: email = "notanemail"
+Expected:
+  - Validation error: "Email không hợp lệ"
+  - Form not submitted
+```
+
+### Test Case 3: Empty email
+```
+Input: email = ""
+Expected:
+  - Validation error: "Email là bắt buộc"
+  - Form not submitted
+```
+
+### Test Case 4: Loading state
+```
+Action: Submit form
+Expected:
+  - Button disabled
+  - Spinner shows
+  - Text: "Đang xử lý..."
+```
+
+### Test Case 5: Resend email
+```
+Action: Click "Gửi lại email" in success state
+Expected:
+  - Return to form state
+  - Email field cleared
+  - Error cleared
+```
+
+### Test Case 6: Back to login
+```
+Action: Click "Quay lại đăng nhập"
+Expected:
+  - Navigate to /login
+```
+
+### Test Case 7: Email not found (Backend)
+```
+Input: email = "nonexistent@example.com"
+Expected:
+  - Still return success (security)
+  - No error shown to user
+```
+
+### Test Case 8: Token expiry (Backend)
+```
+Scenario: Token created 2 hours ago
+Expected:
+  - Reset fails
+  - Error: "Invalid or expired reset token"
+```
+
+## 📝 Code Quality
+
+✅ **TypeScript**: Full type safety
+✅ **React Hook Form**: Optimized performance
+✅ **Yup Validation**: Schema-based validation
+✅ **State Management**: Local state for success toggle
+✅ **Error Handling**: Try-catch blocks
+✅ **Security**: Token hashing, email enumeration prevention
+✅ **UX**: Clear instructions, help section
+✅ **Accessibility**: Labels, autocomplete, focus management
+✅ **Responsive**: Mobile-friendly
+✅ **80 chars/line**: Code formatting
+
+## 🔗 Integration Points
+
+### useAuthStore.forgotPassword()
+```typescript
+const { forgotPassword, isLoading, error, clearError } = 
+  useAuthStore();
+
+await forgotPassword({ email: data.email });
+```
+
+### Success Handling
+```typescript
+await forgotPassword({ email: data.email });
+setIsSuccess(true); // Show success state
+```
+
+### Error Handling
+```typescript
+try {
+  await forgotPassword({ email });
+} catch (error) {
+  // Error displayed via store.error
+  console.error('Forgot password error:', error);
+}
+```
+
+## 🚀 Usage
+
+### Test Frontend
+```bash
+URL: http://localhost:5173/forgot-password
+
+Test Data:
+Email: admin@hotel.com (from seed data)
+```
+
+### Test Backend API
+```bash
+curl -X POST http://localhost:3000/api/auth/forgot-password \
+  -H "Content-Type: application/json" \
+  -d '{"email":"admin@hotel.com"}'
+```
+
+Expected response:
+```json
+{
+  "status": "success",
+  "message": "Password reset link has been sent to your email"
+}
+```
+
+Ensure SMTP is configured in `server/.env` and that the server
+is able to send emails. The application must never log raw reset
+tokens or reset URLs in production.
+
+## ⚠️ TODO: Email Service
+
+The project must send real emails via SMTP in production and must
+never expose raw reset tokens in logs. To enable email sending:
+
+1. Install `nodemailer` in the `server` package and configure
+   SMTP credentials in `server/.env` (`MAIL_HOST`, `MAIL_PORT`,
+   `MAIL_USER`, `MAIL_PASS`, `MAIL_FROM`). Do not commit these
+   credentials to source control.
+
+2. Implement a mail helper (e.g. `server/src/utils/mailer.js`) that
+   uses the SMTP settings. Ensure it throws or fails when SMTP
+   credentials are missing so that emails are not silently dropped.
+
+3. Use the mail helper to send the reset email with a link built as
+   `${process.env.CLIENT_URL}/reset-password/${resetToken}`.
+
+4. Important: never log the raw `resetToken` or the reset URL. If
+   email sending fails, log a generic error and surface a safe
+   message to the user.
+
+## ✅ Checklist
+
+- [x] ✅ Create ForgotPasswordPage.tsx
+- [x] ✅ Implement React Hook Form
+- [x] ✅ Add Yup validation
+- [x] ✅ Two-state design (form + success)
+- [x] ✅ Loading state
+- [x] ✅ Error display
+- [x] ✅ Success state with instructions
+- [x] ✅ Resend email button
+- [x] ✅ Back to login navigation
+- [x] ✅ Help section
+- [x] ✅ Integration with useAuthStore
+- [x] ✅ Add route to App.tsx
+- [x] ✅ Backend: forgotPassword() method
+- [x] ✅ Backend: resetPassword() method
+- [x] ✅ Backend: Routes added
+- [x] ✅ Token generation & hashing
+- [x] ✅ Token expiry (1 hour)
+- [x] ✅ Security: Email enumeration prevention
+- [ ] ⏳ TODO: Send actual email (nodemailer)
+- [ ] ⏳ TODO: Email templates
+
+## 📚 Related Files
+
+- `client/src/pages/auth/LoginPage.tsx` - Login form
+- `client/src/pages/auth/RegisterPage.tsx` - Register form
+- `client/src/utils/validationSchemas.ts` - Validation schemas
+- `client/src/store/useAuthStore.ts` - Auth state
+- `server/src/controllers/authController.js` - Auth logic
+- `server/src/routes/authRoutes.js` - Auth routes
+- `server/src/databases/models/PasswordResetToken.js` - Token model
+
+---
+
+**Status:** ✅ Chức năng 6 hoàn thành
+**Next:** Chức năng 7 - Reset Password (form to change password with token)
+**Test URL:** http://localhost:5173/forgot-password
+**API:** POST /api/auth/forgot-password
diff --git a/docs/LAYOUT_IMPLEMENTATION.md b/docs/LAYOUT_IMPLEMENTATION.md
new file mode 100644
index 00000000..15f1ea3b
--- /dev/null
+++ b/docs/LAYOUT_IMPLEMENTATION.md
@@ -0,0 +1,175 @@
+# Layout Components - Chức năng 1
+
+## Tổng quan
+Đã triển khai thành công **Chức năng 1: Layout cơ bản** bao gồm:
+
+### Components đã tạo
+
+#### 1. **Header** (`src/components/layout/Header.tsx`)
+- Logo và tên ứng dụng
+- Sticky header với shadow
+- Responsive design
+- Links cơ bản (Trang chủ, Phòng, Đặt phòng)
+
+#### 2. **Footer** (`src/components/layout/Footer.tsx`)
+- Thông tin công ty
+- Quick links (Liên kết nhanh)
+- Support links (Hỗ trợ)
+- Contact info (Thông tin liên hệ)
+- Social media icons
+- Copyright info
+- Fully responsive (4 columns → 2 → 1)
+
+#### 3. **Navbar** (`src/components/layout/Navbar.tsx`)
+- **Trạng thái chưa đăng nhập**: 
+  - Hiển thị nút "Đăng nhập" và "Đăng ký"
+- **Trạng thái đã đăng nhập**: 
+  - Hiển thị avatar/tên user
+  - Dropdown menu với "Hồ sơ", "Quản trị" (admin), "Đăng xuất"
+- Mobile menu với hamburger icon
+- Responsive cho desktop và mobile
+
+#### 4. **SidebarAdmin** (`src/components/layout/SidebarAdmin.tsx`)
+- Chỉ hiển thị cho role = "admin"
+- Collapsible sidebar (mở/đóng)
+- Menu items: Dashboard, Users, Rooms, Bookings, Payments, Services, Promotions, Banners, Reports, Settings
+- Active state highlighting
+- Responsive design
+
+#### 5. **LayoutMain** (`src/components/layout/LayoutMain.tsx`)
+- Tích hợp Header, Navbar, Footer
+- Sử dụng `<Outlet />` để render nội dung động
+- Props: `isAuthenticated`, `userInfo`, `onLogout`
+- Min-height 100vh với flex layout
+
+### Cấu trúc thư mục
+```
+src/
+├── components/
+│   └── layout/
+│       ├── Header.tsx
+│       ├── Footer.tsx
+│       ├── Navbar.tsx
+│       ├── SidebarAdmin.tsx
+│       ├── LayoutMain.tsx
+│       └── index.ts
+├── pages/
+│   ├── HomePage.tsx
+│   └── AdminLayout.tsx
+├── styles/
+│   └── index.css
+├── App.tsx
+└── main.tsx
+```
+
+### Cách sử dụng
+
+#### 1. Import Layout vào App
+```tsx
+import LayoutMain from './components/layout/LayoutMain';
+
+// Trong Routes
+<Route 
+  path="/" 
+  element={
+    <LayoutMain 
+      isAuthenticated={isAuthenticated}
+      userInfo={userInfo}
+      onLogout={handleLogout}
+    />
+  }
+>
+  <Route index element={<HomePage />} />
+  {/* Các route con khác */}
+</Route>
+```
+
+#### 2. Sử dụng SidebarAdmin cho trang Admin
+```tsx
+import SidebarAdmin from '../components/layout/SidebarAdmin';
+
+const AdminLayout = () => (
+  <div className="flex h-screen">
+    <SidebarAdmin />
+    <div className="flex-1 overflow-auto">
+      <Outlet />
+    </div>
+  </div>
+);
+```
+
+### Tính năng đã hoàn thành ✅
+
+- [x] Tạo thư mục `src/components/layout/`
+- [x] Header.tsx với logo và navigation
+- [x] Footer.tsx với thông tin đầy đủ
+- [x] Navbar.tsx với logic đăng nhập/đăng xuất động
+- [x] SidebarAdmin.tsx chỉ hiển thị với role admin
+- [x] LayoutMain.tsx sử dụng `<Outlet />`
+- [x] Navbar thay đổi theo trạng thái đăng nhập
+- [x] Giao diện responsive, tương thích desktop/mobile
+- [x] Tích hợp TailwindCSS cho styling
+- [x] Export tất cả components qua index.ts
+
+### Demo Routes đã tạo
+
+**Public Routes** (với LayoutMain):
+- `/` - Trang chủ
+- `/rooms` - Danh sách phòng
+- `/bookings` - Đặt phòng
+- `/about` - Giới thiệu
+
+**Auth Routes** (không có layout):
+- `/login` - Đăng nhập
+- `/register` - Đăng ký
+- `/forgot-password` - Quên mật khẩu
+
+**Admin Routes** (với SidebarAdmin):
+- `/admin/dashboard` - 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
+
+### Chạy ứng dụng
+
+```bash
+# Di chuyển vào thư mục client
+cd client
+
+# Cài đặt dependencies (nếu chưa cài)
+npm install
+
+# Chạy development server
+npm run dev
+
+# Mở trình duyệt tại: http://localhost:5173
+```
+
+### Các bước tiếp theo
+
+**Chức năng 2**: Cấu hình Routing (react-router-dom)
+- ProtectedRoute component
+- AdminRoute component
+- Redirect logic
+
+**Chức năng 3**: useAuthStore (Zustand Store)
+- Quản lý authentication state
+- Login/Logout functions
+- Persist state trong localStorage
+
+**Chức năng 4-8**: Auth Forms
+- LoginPage
+- RegisterPage
+- ForgotPasswordPage
+- ResetPasswordPage
+
+### Notes
+- Layout components được thiết kế để tái sử dụng
+- Props-based design cho flexibility
+- Sẵn sàng tích hợp với Zustand store
+- Tailwind classes tuân thủ 80 ký tự/dòng
+- Icons sử dụng lucide-react (đã có trong dependencies)
diff --git a/docs/LOGIN_FORM_GUIDE.md b/docs/LOGIN_FORM_GUIDE.md
new file mode 100644
index 00000000..206d861c
--- /dev/null
+++ b/docs/LOGIN_FORM_GUIDE.md
@@ -0,0 +1,432 @@
+# Chức năng 4: Form Đăng Nhập - Hướng Dẫn Sử Dụng
+
+## 📋 Tổng Quan
+
+Form đăng nhập đã được triển khai đầy đủ với:
+- ✅ Validation form bằng React Hook Form + Yup
+- ✅ Hiển thị/ẩn mật khẩu
+- ✅ Checkbox "Nhớ đăng nhập" (7 ngày)
+- ✅ Loading state trong quá trình đăng nhập
+- ✅ Hiển thị lỗi từ server
+- ✅ Redirect sau khi đăng nhập thành công
+- ✅ UI đẹp với Tailwind CSS và Lucide Icons
+- ✅ Responsive design
+
+## 🗂️ Các File Đã Tạo/Cập Nhật
+
+### 1. **LoginPage.tsx** - Component form đăng nhập
+**Đường dẫn:** `client/src/pages/auth/LoginPage.tsx`
+
+```typescript
+// Các tính năng chính:
+- React Hook Form với Yup validation
+- Show/hide password toggle
+- Remember me checkbox
+- Loading state với spinner
+- Error handling
+- Redirect với location state
+```
+
+### 2. **index.ts** - Export module
+**Đường dẫn:** `client/src/pages/auth/index.ts`
+
+```typescript
+export { default as LoginPage } from './LoginPage';
+```
+
+### 3. **App.tsx** - Đã cập nhật routing
+**Đường dẫn:** `client/src/App.tsx`
+
+```typescript
+// Đã thêm:
+import { LoginPage } from './pages/auth';
+
+// Route:
+<Route path="/login" element={<LoginPage />} />
+```
+
+## 🎨 Cấu Trúc UI
+
+### Layout
+```
+┌─────────────────────────────────────┐
+│   🏨 Hotel Icon                     │
+│   Đăng nhập                         │
+│   Chào mừng bạn trở lại...          │
+├─────────────────────────────────────┤
+│  ┌───────────────────────────────┐  │
+│  │ [Error message if any]        │  │
+│  ├───────────────────────────────┤  │
+│  │ Email                         │  │
+│  │ [📧 email@example.com       ] │  │
+│  ├───────────────────────────────┤  │
+│  │ Mật khẩu                      │  │
+│  │ [🔒 ••••••••            👁️] │  │
+│  ├───────────────────────────────┤  │
+│  │ ☑️ Nhớ đăng nhập              │  │
+│  │              Quên mật khẩu? → │  │
+│  ├───────────────────────────────┤  │
+│  │      [🔐 Đăng nhập]           │  │
+│  └───────────────────────────────┘  │
+│  Chưa có tài khoản? Đăng ký ngay    │
+│                                     │
+│  Điều khoản & Chính sách bảo mật    │
+└─────────────────────────────────────┘
+```
+
+## 🔧 Cách Sử Dụng
+
+### 1. Truy Cập Form
+
+```bash
+# URL
+http://localhost:5173/login
+```
+
+### 2. Các Trường Trong Form
+
+| Trường | Type | Bắt buộc | Validation |
+|--------|------|----------|------------|
+| Email | text | ✅ | Email hợp lệ |
+| Password | password | ✅ | Min 8 ký tự |
+| Remember Me | checkbox | ❌ | Boolean |
+
+### 3. Validation Rules
+
+**Email:**
+```typescript
+- Required: "Email là bắt buộc"
+- Valid email format: "Email không hợp lệ"
+- Trim whitespace
+```
+
+**Password:**
+```typescript
+- Required: "Mật khẩu là bắt buộc"
+- Min 8 characters: "Mật khẩu phải có ít nhất 8 ký tự"
+```
+
+### 4. Luồng Đăng Nhập
+
+```
+1. User nhập email + password
+2. Click "Đăng nhập"
+3. Validation form (client-side)
+4. Nếu valid:
+   - Button disabled + hiển thị loading
+   - Gọi useAuthStore.login()
+   - API POST /api/auth/login
+5. Nếu thành công:
+   - Lưu token vào localStorage
+   - Update Zustand state
+   - Redirect đến /dashboard
+6. Nếu lỗi:
+   - Hiển thị error message
+   - Button enabled lại
+```
+
+## 🎯 Tính Năng Chính
+
+### 1. Show/Hide Password
+
+```typescript
+const [showPassword, setShowPassword] = useState(false);
+
+// Toggle button
+<button onClick={() => setShowPassword(!showPassword)}>
+  {showPassword ? <EyeOff /> : <Eye />}
+</button>
+
+// Input type
+<input type={showPassword ? 'text' : 'password'} />
+```
+
+### 2. Remember Me (7 ngày)
+
+```typescript
+// Checkbox
+<input {...register('rememberMe')} type="checkbox" />
+
+// Logic trong authService.login()
+if (rememberMe) {
+  // Token sẽ được lưu trong localStorage
+  // và không bị xóa khi đóng trình duyệt
+}
+```
+
+### 3. Loading State
+
+```typescript
+// Button disabled khi đang loading
+<button disabled={isLoading}>
+  {isLoading ? (
+    <>
+      <Loader2 className="animate-spin" />
+      Đang xử lý...
+    </>
+  ) : (
+    <>
+      <LogIn />
+      Đăng nhập
+    </>
+  )}
+</button>
+```
+
+### 4. Error Handling
+
+```typescript
+// Error từ Zustand store
+const { error } = useAuthStore();
+
+// Hiển thị error message
+{error && (
+  <div className="bg-red-50 border border-red-200">
+    {error}
+  </div>
+)}
+```
+
+### 5. Redirect Logic
+
+```typescript
+// Lấy location state từ ProtectedRoute
+const location = useLocation();
+
+// Redirect về trang trước đó hoặc dashboard
+const from = location.state?.from?.pathname || '/dashboard';
+navigate(from, { replace: true });
+```
+
+## 🔗 Integration với Zustand Store
+
+```typescript
+// Hook usage
+const { 
+  login,      // Function để login
+  isLoading,  // Loading state
+  error,      // Error message
+  clearError  // Clear error
+} = useAuthStore();
+
+// Login call
+await login({
+  email: 'user@example.com',
+  password: 'password123',
+  rememberMe: true
+});
+```
+
+## 🎨 Styling với Tailwind
+
+### Color Scheme
+```
+- Primary: blue-600, blue-700
+- Background: gradient from-blue-50 to-indigo-100
+- Error: red-50, red-200, red-600, red-700
+- Text: gray-600, gray-700, gray-900
+```
+
+### Responsive Design
+```typescript
+// Container
+className="max-w-md w-full"  // Max width 28rem
+
+// Grid (nếu có)
+className="grid grid-cols-1 md:grid-cols-2"
+```
+
+## 🧪 Testing Scenarios
+
+### 1. Validation Testing
+
+**Test Case 1: Empty form**
+```
+- Input: Submit form trống
+- Expected: Hiển thị lỗi "Email là bắt buộc"
+```
+
+**Test Case 2: Invalid email**
+```
+- Input: Email = "notanemail"
+- Expected: "Email không hợp lệ"
+```
+
+**Test Case 3: Short password**
+```
+- Input: Password = "123"
+- Expected: "Mật khẩu phải có ít nhất 8 ký tự"
+```
+
+### 2. Authentication Testing
+
+**Test Case 4: Valid credentials**
+```
+- Input: Valid email + password
+- Expected: Redirect to /dashboard
+```
+
+**Test Case 5: Invalid credentials**
+```
+- Input: Wrong password
+- Expected: Error message từ server
+```
+
+**Test Case 6: Network error**
+```
+- Input: Server offline
+- Expected: Error message "Có lỗi xảy ra"
+```
+
+### 3. UX Testing
+
+**Test Case 7: Show/hide password**
+```
+- Action: Click eye icon
+- Expected: Password text visible/hidden
+```
+
+**Test Case 8: Remember me**
+```
+- Action: Check "Nhớ đăng nhập"
+- Expected: Token persist sau khi reload
+```
+
+**Test Case 9: Loading state**
+```
+- Action: Submit form
+- Expected: Button disabled, spinner hiển thị
+```
+
+## 🔐 Security Features
+
+### 1. Password Visibility
+```typescript
+// Default: password hidden
+type="password"
+
+// Toggle: user control
+onClick={() => setShowPassword(!showPassword)}
+```
+
+### 2. HTTPS Only (Production)
+```typescript
+// Trong .env
+VITE_API_URL=https://api.yourdomain.com
+```
+
+### 3. Token Storage
+```typescript
+// LocalStorage cho remember me
+if (rememberMe) {
+  localStorage.setItem('token', token);
+}
+
+// SessionStorage cho session only
+else {
+  sessionStorage.setItem('token', token);
+}
+```
+
+## 📝 Best Practices
+
+### 1. Form Validation
+```typescript
+✅ Client-side validation (Yup)
+✅ Server-side validation (Express validator)
+✅ Immediate feedback
+✅ Clear error messages
+```
+
+### 2. Error Handling
+```typescript
+✅ Try-catch blocks
+✅ User-friendly messages
+✅ Clear error state
+✅ Console logging for debugging
+```
+
+### 3. UX
+```typescript
+✅ Loading indicators
+✅ Disabled states
+✅ Auto-focus first field
+✅ Enter key submit
+✅ Remember form state
+```
+
+## 🚀 Next Steps (Chức năng 5-7)
+
+1. **Chức năng 5: Form Register**
+   - Copy structure từ LoginPage
+   - Thêm fields: name, phone, confirmPassword
+   - Use registerSchema
+   - Redirect to /login after success
+
+2. **Chức năng 6: Forgot Password**
+   - Simple form với email only
+   - Send reset link
+   - Success message
+
+3. **Chức năng 7: Reset Password**
+   - Form với password + confirmPassword
+   - Token từ URL params
+   - Redirect to /login after success
+
+## 🐛 Troubleshooting
+
+### Issue 1: "Error: Token expired"
+```typescript
+Solution: Check token expiry time
+- Access token: 1 hour
+- Refresh token: 7 days
+```
+
+### Issue 2: Form không submit
+```typescript
+Solution: Check console for validation errors
+- Open DevTools > Console
+- Look for Yup validation errors
+```
+
+### Issue 3: Redirect không hoạt động
+```typescript
+Solution: Check location state
+console.log(location.state?.from);
+```
+
+### Issue 4: Remember me không work
+```typescript
+Solution: Check localStorage
+- Open DevTools > Application > Local Storage
+- Check "token" và "refreshToken" keys
+```
+
+## 📚 Resources
+
+- [React Hook Form Docs](https://react-hook-form.com/)
+- [Yup Validation](https://github.com/jquense/yup)
+- [Zustand Guide](https://github.com/pmndrs/zustand)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Lucide Icons](https://lucide.dev/)
+
+## ✅ Checklist
+
+- [x] ✅ Create validationSchemas.ts
+- [x] ✅ Create LoginPage.tsx
+- [x] ✅ Add route to App.tsx
+- [x] ✅ Email validation
+- [x] ✅ Password validation
+- [x] ✅ Show/hide password
+- [x] ✅ Remember me checkbox
+- [x] ✅ Loading state
+- [x] ✅ Error display
+- [x] ✅ Redirect after login
+- [x] ✅ Responsive design
+- [x] ✅ Icons integration
+- [ ] ⏳ E2E testing
+
+---
+
+**Status:** ✅ Chức năng 4 hoàn thành
+**Next:** Chức năng 5 - Form Register
diff --git a/docs/REGISTER_FORM_COMPLETE.md b/docs/REGISTER_FORM_COMPLETE.md
new file mode 100644
index 00000000..04b0393c
--- /dev/null
+++ b/docs/REGISTER_FORM_COMPLETE.md
@@ -0,0 +1,486 @@
+# Chức năng 5: Form Đăng Ký - Hoàn Thành ✅
+
+## 📦 Files Đã Tạo/Cập Nhật
+
+### 1. **RegisterPage.tsx** - Component form đăng ký
+**Đường dẫn:** `client/src/pages/auth/RegisterPage.tsx`
+
+### 2. **index.ts** - Export module
+**Đường dẫn:** `client/src/pages/auth/index.ts`
+- Đã thêm export RegisterPage
+
+### 3. **App.tsx** - Cập nhật routing
+**Đường dẫn:** `client/src/App.tsx`
+- Đã thêm route `/register`
+
+## ✨ Tính Năng Chính
+
+### 1. Form Fields (5 fields)
+✅ **Họ và tên** (name)
+- Required, 2-50 ký tự
+- Icon: User
+- Placeholder: "Nguyễn Văn A"
+
+✅ **Email**
+- Required, valid email format
+- Icon: Mail
+- Placeholder: "email@example.com"
+
+✅ **Số điện thoại** (phone) - Optional
+- 10-11 chữ số
+- Icon: Phone
+- Placeholder: "0123456789"
+
+✅ **Mật khẩu** (password)
+- Required, min 8 chars
+- Must contain: uppercase, lowercase, number, special char
+- Show/hide toggle với Eye icon
+- Icon: Lock
+
+✅ **Xác nhận mật khẩu** (confirmPassword)
+- Must match password
+- Show/hide toggle với Eye icon
+- Icon: Lock
+
+### 2. Password Strength Indicator
+✅ **Visual Progress Bar** với 5 levels:
+1. 🔴 Rất yếu (0/5)
+2. 🟠 Yếu (1/5)
+3. 🟡 Trung bình (2/5)
+4. 🔵 Mạnh (3/5)
+5. 🟢 Rất mạnh (5/5)
+
+✅ **Real-time Requirements Checker:**
+- ✅/❌ Ít nhất 8 ký tự
+- ✅/❌ Chữ thường (a-z)
+- ✅/❌ Chữ hoa (A-Z)
+- ✅/❌ Số (0-9)
+- ✅/❌ Ký tự đặc biệt (@$!%*?&)
+
+### 3. Validation Rules (Yup Schema)
+
+```typescript
+name: 
+  - Required: "Họ tên là bắt buộc"
+  - Min 2 chars: "Họ tên phải có ít nhất 2 ký tự"
+  - Max 50 chars: "Họ tên không được quá 50 ký tự"
+  - Trim whitespace
+
+email:
+  - Required: "Email là bắt buộc"
+  - Valid format: "Email không hợp lệ"
+  - Trim whitespace
+
+phone (optional):
+  - Pattern /^[0-9]{10,11}$/
+  - Error: "Số điện thoại không hợp lệ"
+
+password:
+  - Required: "Mật khẩu là bắt buộc"
+  - Min 8 chars
+  - Pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/
+  - Error: "Mật khẩu phải chứa chữ hoa, chữ thường, số và ký tự đặc biệt"
+
+confirmPassword:
+  - Required: "Vui lòng xác nhận mật khẩu"
+  - Must match password: "Mật khẩu không khớp"
+```
+
+### 4. UX Features
+
+✅ **Loading State**
+```tsx
+{isLoading ? (
+  <>
+    <Loader2 className="animate-spin" />
+    Đang xử lý...
+  </>
+) : (
+  <>
+    <UserPlus />
+    Đăng ký
+  </>
+)}
+```
+
+✅ **Show/Hide Password** (2 toggles)
+- Eye/EyeOff icons
+- Separate toggle cho password và confirmPassword
+- Visual feedback khi hover
+
+✅ **Error Display**
+- Inline validation errors dưới mỗi field
+- Global error message ở top của form
+- Red border cho fields có lỗi
+
+✅ **Success Flow**
+```typescript
+1. Submit form
+2. Validation passes
+3. Call useAuthStore.register()
+4. Show toast: "Đăng ký thành công! Vui lòng đăng nhập."
+5. Navigate to /login
+```
+
+### 5. Design & Styling
+
+**Color Scheme:**
+- Primary: purple-600, purple-700
+- Background: gradient from-purple-50 to-pink-100
+- Success: green-500, green-600
+- Error: red-50, red-200, red-600
+- Text: gray-600, gray-700, gray-900
+
+**Layout:**
+```
+┌─────────────────────────────────────┐
+│   🏨 Hotel Icon (Purple)            │
+│   Đăng ký tài khoản                 │
+│   Tạo tài khoản mới để đặt phòng... │
+├─────────────────────────────────────┤
+│  ┌───────────────────────────────┐  │
+│  │ [Error message if any]        │  │
+│  ├───────────────────────────────┤  │
+│  │ Họ và tên                     │  │
+│  │ [👤 Nguyễn Văn A          ]   │  │
+│  ├───────────────────────────────┤  │
+│  │ Email                         │  │
+│  │ [📧 email@example.com     ]   │  │
+│  ├───────────────────────────────┤  │
+│  │ Số điện thoại (Tùy chọn)     │  │
+│  │ [📱 0123456789            ]   │  │
+│  ├───────────────────────────────┤  │
+│  │ Mật khẩu                      │  │
+│  │ [🔒 ••••••••            👁️] │  │
+│  │ ▓▓▓▓▓░░░░░ Rất mạnh          │  │
+│  │ ✅ Ít nhất 8 ký tự            │  │
+│  │ ✅ Chữ thường (a-z)           │  │
+│  │ ✅ Chữ hoa (A-Z)              │  │
+│  │ ✅ Số (0-9)                   │  │
+│  │ ✅ Ký tự đặc biệt             │  │
+│  ├───────────────────────────────┤  │
+│  │ Xác nhận mật khẩu             │  │
+│  │ [🔒 ••••••••            👁️] │  │
+│  ├───────────────────────────────┤  │
+│  │      [👤 Đăng ký]             │  │
+│  └───────────────────────────────┘  │
+│  Đã có tài khoản? Đăng nhập ngay    │
+│                                     │
+│  Điều khoản & Chính sách bảo mật    │
+└─────────────────────────────────────┘
+```
+
+## 🔗 Integration
+
+### API Endpoint
+```
+POST /api/auth/register
+```
+
+### Request Body
+```typescript
+{
+  name: string;      // "Nguyễn Văn A"
+  email: string;     // "user@example.com"
+  password: string;  // "Password123@"
+  phone?: string;    // "0123456789" (optional)
+}
+```
+
+### Response (Success)
+```json
+{
+  "status": "success",
+  "message": "User registered successfully",
+  "data": {
+    "user": {
+      "id": 1,
+      "name": "Nguyễn Văn A",
+      "email": "user@example.com",
+      "phone": "0123456789",
+      "role": "customer"
+    },
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+  }
+}
+```
+
+### useAuthStore Integration
+```typescript
+const { register: registerUser, isLoading, error, clearError } = 
+  useAuthStore();
+
+await registerUser({
+  name: data.name,
+  email: data.email,
+  password: data.password,
+  phone: data.phone,
+});
+
+// After success:
+navigate('/login', { replace: true });
+```
+
+## 🧪 Test Scenarios
+
+### 1. Validation Tests
+
+**Test Case 1: Empty form**
+```
+Action: Submit empty form
+Expected: Show validation errors for name, email, password
+```
+
+**Test Case 2: Invalid email**
+```
+Input: email = "notanemail"
+Expected: "Email không hợp lệ"
+```
+
+**Test Case 3: Short name**
+```
+Input: name = "A"
+Expected: "Họ tên phải có ít nhất 2 ký tự"
+```
+
+**Test Case 4: Weak password**
+```
+Input: password = "abc123"
+Expected: "Mật khẩu phải chứa chữ hoa, chữ thường, số và ký tự đặc biệt"
+Password strength: Yếu/Trung bình
+```
+
+**Test Case 5: Password mismatch**
+```
+Input: 
+  password = "Password123@"
+  confirmPassword = "Password456@"
+Expected: "Mật khẩu không khớp"
+```
+
+**Test Case 6: Invalid phone**
+```
+Input: phone = "123"
+Expected: "Số điện thoại không hợp lệ"
+```
+
+### 2. UX Tests
+
+**Test Case 7: Password strength indicator**
+```
+Input: Type password character by character
+Expected: 
+  - Progress bar animates
+  - Color changes: red → orange → yellow → blue → green
+  - Checkmarks appear as requirements met
+```
+
+**Test Case 8: Show/hide password**
+```
+Action: Click eye icon on password field
+Expected: Password text becomes visible/hidden
+Action: Click eye icon on confirmPassword field
+Expected: Confirm password text becomes visible/hidden
+```
+
+**Test Case 9: Loading state**
+```
+Action: Submit valid form
+Expected: 
+  - Button disabled
+  - Spinner shows
+  - Text changes to "Đang xử lý..."
+```
+
+### 3. Integration Tests
+
+**Test Case 10: Successful registration**
+```
+Input: All valid data
+Expected:
+  1. API POST /api/auth/register called
+  2. Toast: "Đăng ký thành công! Vui lòng đăng nhập."
+  3. Redirect to /login
+```
+
+**Test Case 11: Email already exists**
+```
+Input: email = "existing@example.com"
+Expected: 
+  - Error message: "Email already registered"
+  - Toast error displayed
+  - Form remains on page
+```
+
+**Test Case 12: Network error**
+```
+Scenario: Server offline
+Expected:
+  - Error message: "Đăng ký thất bại. Vui lòng thử lại."
+  - Toast error displayed
+```
+
+## 📊 Password Strength Algorithm
+
+```typescript
+function getPasswordStrength(pwd: string) {
+  let strength = 0;
+  
+  if (pwd.length >= 8) strength++;        // +1
+  if (/[a-z]/.test(pwd)) strength++;      // +1
+  if (/[A-Z]/.test(pwd)) strength++;      // +1
+  if (/\d/.test(pwd)) strength++;         // +1
+  if (/[@$!%*?&]/.test(pwd)) strength++; // +1
+  
+  return {
+    strength: 0-5,
+    label: ['Rất yếu', 'Yếu', 'Trung bình', 'Mạnh', 'Rất mạnh'][strength],
+    color: ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500'][strength]
+  };
+}
+```
+
+## 🎨 Component Structure
+
+```tsx
+RegisterPage/
+├── Header Section
+│   ├── Hotel Icon (purple)
+│   ├── Title: "Đăng ký tài khoản"
+│   └── Subtitle
+│
+├── Form Container (white card)
+│   ├── Error Alert (conditional)
+│   ├── Name Input
+│   ├── Email Input
+│   ├── Phone Input (optional)
+│   ├── Password Input
+│   │   ├── Show/Hide Toggle
+│   │   ├── Strength Indicator
+│   │   └── Requirements Checklist
+│   ├── Confirm Password Input
+│   │   └── Show/Hide Toggle
+│   └── Submit Button (with loading)
+│
+├── Login Link
+│   └── "Đã có tài khoản? Đăng nhập ngay"
+│
+└── Footer Links
+    ├── Terms of Service
+    └── Privacy Policy
+```
+
+## 🔐 Security Features
+
+### 1. Password Validation
+- Min 8 characters
+- Requires: uppercase, lowercase, number, special char
+- Visual feedback for strength
+
+### 2. Confirm Password
+- Must match original password
+- Prevents typos
+
+### 3. Client-side Validation
+- Immediate feedback
+- Prevents invalid API calls
+- Better UX
+
+### 4. Server-side Validation
+- Backend also validates all fields
+- Checks email uniqueness
+- Password hashed with bcrypt
+
+## 📝 Code Quality
+
+✅ **TypeScript**: Full type safety
+✅ **React Hook Form**: Optimized re-renders
+✅ **Yup Validation**: Schema-based validation
+✅ **Component Composition**: Reusable PasswordRequirement component
+✅ **Accessibility**: Proper labels, IDs, autocomplete
+✅ **Error Handling**: Try-catch, user-friendly messages
+✅ **Loading States**: Visual feedback during async operations
+✅ **Responsive Design**: Works on mobile and desktop
+✅ **80 chars/line**: Code formatting standard
+
+## 🚀 Usage
+
+### Navigate to Register Page
+```bash
+http://localhost:5173/register
+```
+
+### Example Registration
+```typescript
+Name: "Nguyễn Văn A"
+Email: "nguyenvana@example.com"
+Phone: "0123456789"
+Password: "Password123@"
+Confirm: "Password123@"
+
+Submit → Success → Redirect to /login
+```
+
+## 🔄 Flow Diagram
+
+```
+User visits /register
+        ↓
+Fill in form fields
+        ↓
+Real-time validation (Yup)
+        ↓
+Password strength updates live
+        ↓
+Submit button clicked
+        ↓
+Frontend validation passes
+        ↓
+Call useAuthStore.register()
+        ↓
+API POST /api/auth/register
+        ↓
+    ┌───────┴───────┐
+    ↓               ↓
+Success         Failure
+    ↓               ↓
+Toast success   Toast error
+    ↓               ↓
+Navigate        Stay on page
+to /login       Show errors
+```
+
+## ✅ Checklist
+
+- [x] ✅ Create RegisterPage.tsx component
+- [x] ✅ Implement React Hook Form
+- [x] ✅ Add Yup validation schema
+- [x] ✅ Add 5 form fields (name, email, phone, password, confirmPassword)
+- [x] ✅ Show/hide password toggle (2 fields)
+- [x] ✅ Password strength indicator
+- [x] ✅ Real-time requirements checker
+- [x] ✅ Loading state
+- [x] ✅ Error display (inline + global)
+- [x] ✅ Integration with useAuthStore
+- [x] ✅ Redirect to /login after success
+- [x] ✅ Toast notifications
+- [x] ✅ Add route to App.tsx
+- [x] ✅ Responsive design
+- [x] ✅ Purple color scheme
+- [x] ✅ Icons integration (Lucide React)
+- [x] ✅ Terms & Privacy links
+
+## 📚 Related Files
+
+- `client/src/pages/auth/LoginPage.tsx` - Login form (same design pattern)
+- `client/src/utils/validationSchemas.ts` - Validation schemas
+- `client/src/store/useAuthStore.ts` - Auth state management
+- `client/src/services/api/authService.ts` - API calls
+- `client/src/App.tsx` - Route configuration
+
+---
+
+**Status:** ✅ Chức năng 5 hoàn thành
+**Next:** Chức năng 6 - Forgot Password
+**Test URL:** http://localhost:5173/register
diff --git a/docs/ROUTE_PROTECTION.md b/docs/ROUTE_PROTECTION.md
new file mode 100644
index 00000000..9cfb8643
--- /dev/null
+++ b/docs/ROUTE_PROTECTION.md
@@ -0,0 +1,484 @@
+# Route Protection Documentation
+
+## Chức năng 8: Phân quyền & Bảo vệ Route
+
+Hệ thống sử dụng 2 component để bảo vệ các route:
+- **ProtectedRoute**: Yêu cầu user phải đăng nhập
+- **AdminRoute**: Yêu cầu user phải là Admin
+
+---
+
+## 1. ProtectedRoute
+
+### Mục đích
+Bảo vệ các route yêu cầu authentication (đăng nhập).
+
+### Cách hoạt động
+```tsx
+// File: client/src/components/auth/ProtectedRoute.tsx
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ 
+  children 
+}) => {
+  const location = useLocation();
+  const { isAuthenticated, isLoading } = useAuthStore();
+
+  // 1. Nếu đang loading → hiển thị spinner
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  // 2. Nếu chưa đăng nhập → redirect /login
+  if (!isAuthenticated) {
+    return (
+      <Navigate 
+        to="/login" 
+        state={{ from: location }}  // Lưu location để quay lại
+        replace 
+      />
+    );
+  }
+
+  // 3. Đã đăng nhập → cho phép truy cập
+  return <>{children}</>;
+};
+```
+
+### Sử dụng trong App.tsx
+```tsx
+import { ProtectedRoute } from './components/auth';
+
+// Route yêu cầu đăng nhập
+<Route 
+  path="/dashboard" 
+  element={
+    <ProtectedRoute>
+      <DashboardPage />
+    </ProtectedRoute>
+  } 
+/>
+
+<Route 
+  path="/bookings" 
+  element={
+    <ProtectedRoute>
+      <BookingListPage />
+    </ProtectedRoute>
+  } 
+/>
+
+<Route 
+  path="/profile" 
+  element={
+    <ProtectedRoute>
+      <ProfilePage />
+    </ProtectedRoute>
+  } 
+/>
+```
+
+### Luồng hoạt động
+1. User chưa đăng nhập truy cập `/dashboard`
+2. ProtectedRoute kiểm tra `isAuthenticated === false`
+3. Redirect về `/login` và lưu `state={{ from: '/dashboard' }}`
+4. Sau khi login thành công, redirect về `/dashboard`
+
+---
+
+## 2. AdminRoute
+
+### Mục đích
+Bảo vệ các route chỉ dành cho Admin (role-based access).
+
+### Cách hoạt động
+```tsx
+// File: client/src/components/auth/AdminRoute.tsx
+
+const AdminRoute: React.FC<AdminRouteProps> = ({ 
+  children 
+}) => {
+  const location = useLocation();
+  const { isAuthenticated, userInfo, isLoading } = useAuthStore();
+
+  // 1. Nếu đang loading → hiển thị spinner
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  // 2. Nếu chưa đăng nhập → redirect /login
+  if (!isAuthenticated) {
+    return (
+      <Navigate 
+        to="/login" 
+        state={{ from: location }} 
+        replace 
+      />
+    );
+  }
+
+  // 3. Nếu không phải admin → redirect /
+  const isAdmin = userInfo?.role === 'admin';
+  if (!isAdmin) {
+    return <Navigate to="/" replace />;
+  }
+
+  // 4. Là admin → cho phép truy cập
+  return <>{children}</>;
+};
+```
+
+### Sử dụng trong App.tsx
+```tsx
+import { AdminRoute } from './components/auth';
+
+// Route chỉ dành cho Admin
+<Route 
+  path="/admin" 
+  element={
+    <AdminRoute>
+      <AdminLayout />
+    </AdminRoute>
+  }
+>
+  <Route path="dashboard" element={<AdminDashboard />} />
+  <Route path="users" element={<UserManagement />} />
+  <Route path="rooms" element={<RoomManagement />} />
+  <Route path="bookings" element={<BookingManagement />} />
+  <Route path="settings" element={<Settings />} />
+</Route>
+```
+
+### Luồng hoạt động
+
+#### Case 1: User chưa đăng nhập
+1. Truy cập `/admin`
+2. AdminRoute kiểm tra `isAuthenticated === false`
+3. Redirect về `/login` với `state={{ from: '/admin' }}`
+4. Sau login thành công → quay lại `/admin`
+5. AdminRoute kiểm tra lại role
+
+#### Case 2: User đã đăng nhập nhưng không phải Admin
+1. Customer (role='customer') truy cập `/admin`
+2. AdminRoute kiểm tra `isAuthenticated === true`
+3. AdminRoute kiểm tra `userInfo.role === 'customer'` (không phải 'admin')
+4. Redirect về `/` (trang chủ)
+
+#### Case 3: User là Admin
+1. Admin (role='admin') truy cập `/admin`
+2. AdminRoute kiểm tra `isAuthenticated === true`
+3. AdminRoute kiểm tra `userInfo.role === 'admin'` ✅
+4. Cho phép truy cập
+
+---
+
+## 3. Cấu trúc Route trong App.tsx
+
+```tsx
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public Routes - Không cần đăng nhập */}
+        <Route path="/" element={<LayoutMain />}>
+          <Route index element={<HomePage />} />
+          <Route path="rooms" element={<RoomListPage />} />
+          <Route path="about" element={<AboutPage />} />
+        </Route>
+
+        {/* Auth Routes - Không cần layout */}
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+        <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
+
+        {/* Protected Routes - Yêu cầu đăng nhập */}
+        <Route path="/" element={<LayoutMain />}>
+          <Route 
+            path="dashboard" 
+            element={
+              <ProtectedRoute>
+                <DashboardPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="bookings" 
+            element={
+              <ProtectedRoute>
+                <BookingListPage />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="profile" 
+            element={
+              <ProtectedRoute>
+                <ProfilePage />
+              </ProtectedRoute>
+            } 
+          />
+        </Route>
+
+        {/* Admin Routes - Chỉ Admin */}
+        <Route 
+          path="/admin" 
+          element={
+            <AdminRoute>
+              <AdminLayout />
+            </AdminRoute>
+          }
+        >
+          <Route index element={<Navigate to="dashboard" replace />} />
+          <Route path="dashboard" element={<AdminDashboard />} />
+          <Route path="users" element={<UserManagement />} />
+          <Route path="rooms" element={<RoomManagement />} />
+          <Route path="bookings" element={<BookingManagement />} />
+          <Route path="payments" element={<PaymentManagement />} />
+          <Route path="services" element={<ServiceManagement />} />
+          <Route path="promotions" element={<PromotionManagement />} />
+          <Route path="banners" element={<BannerManagement />} />
+          <Route path="reports" element={<Reports />} />
+          <Route path="settings" element={<Settings />} />
+        </Route>
+
+        {/* 404 Route */}
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+---
+
+## 4. Tích hợp với Zustand Store
+
+### useAuthStore State
+```tsx
+// File: client/src/store/useAuthStore.ts
+
+const useAuthStore = create<AuthStore>((set) => ({
+  // State
+  token: localStorage.getItem('token') || null,
+  refreshToken: localStorage.getItem('refreshToken') || null,
+  userInfo: JSON.parse(localStorage.getItem('userInfo') || 'null'),
+  isAuthenticated: !!localStorage.getItem('token'),
+  isLoading: false,
+  error: null,
+
+  // Actions
+  login: async (credentials) => { ... },
+  logout: () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    localStorage.removeItem('userInfo');
+    set({
+      token: null,
+      refreshToken: null,
+      userInfo: null,
+      isAuthenticated: false,
+      error: null
+    });
+  },
+  
+  // ... other actions
+}));
+```
+
+### User Roles
+- **admin**: Quản trị viên (full access)
+- **staff**: Nhân viên (limited access)
+- **customer**: Khách hàng (customer features only)
+
+---
+
+## 5. Loading State
+
+Cả 2 component đều xử lý loading state để tránh:
+- Flash of redirect (nhấp nháy khi chuyển trang)
+- Race condition (auth state chưa load xong)
+
+```tsx
+if (isLoading) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 
+          border-b-2 border-indigo-600 mx-auto"
+        />
+        <p className="mt-4 text-gray-600">Đang xác thực...</p>
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## 6. Redirect After Login
+
+### LoginPage implementation
+```tsx
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login, isLoading } = useAuthStore();
+
+  const from = location.state?.from?.pathname || '/dashboard';
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      await login(data);
+      
+      // Redirect về page ban đầu hoặc /dashboard
+      navigate(from, { replace: true });
+      
+      toast.success('Đăng nhập thành công!');
+    } catch (error) {
+      toast.error('Đăng nhập thất bại!');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* ... form fields */}
+    </form>
+  );
+};
+```
+
+### Flow
+1. User truy cập `/bookings` (protected)
+2. Redirect `/login?from=/bookings`
+3. Login thành công
+4. Redirect về `/bookings` (page ban đầu)
+
+---
+
+## 7. Testing Route Protection
+
+### Test Case 1: ProtectedRoute - Unauthenticated
+**Given**: User chưa đăng nhập  
+**When**: Truy cập `/dashboard`  
+**Then**: Redirect về `/login`  
+**And**: Lưu `from=/dashboard` trong location state
+
+### Test Case 2: ProtectedRoute - Authenticated
+**Given**: User đã đăng nhập  
+**When**: Truy cập `/dashboard`  
+**Then**: Hiển thị DashboardPage thành công
+
+### Test Case 3: AdminRoute - Not Admin
+**Given**: User có role='customer'  
+**When**: Truy cập `/admin`  
+**Then**: Redirect về `/` (trang chủ)
+
+### Test Case 4: AdminRoute - Is Admin
+**Given**: User có role='admin'  
+**When**: Truy cập `/admin`  
+**Then**: Hiển thị AdminLayout thành công
+
+### Test Case 5: Loading State
+**Given**: Auth đang initialize  
+**When**: isLoading === true  
+**Then**: Hiển thị loading spinner  
+**And**: Không redirect
+
+---
+
+## 8. Security Best Practices
+
+### ✅ Đã Implement
+1. **Client-side protection**: ProtectedRoute & AdminRoute
+2. **Token persistence**: localStorage
+3. **Role-based access**: Kiểm tra userInfo.role
+4. **Location state**: Lưu "from" để redirect về đúng page
+5. **Loading state**: Tránh flash của redirect
+6. **Replace navigation**: Không lưu lịch sử redirect
+
+### ⚠️ Lưu Ý
+- Client-side protection **không đủ** → Phải có backend validation
+- API endpoints phải kiểm tra JWT + role
+- Middleware backend: `auth`, `adminOnly`
+- Never trust client-side role → Always verify on server
+
+### Backend Middleware Example
+```javascript
+// server/src/middlewares/auth.js
+const auth = async (req, res, next) => {
+  const token = req.headers.authorization?.split(' ')[1];
+  
+  if (!token) {
+    return res.status(401).json({ 
+      message: 'Unauthorized' 
+    });
+  }
+  
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    req.user = await User.findByPk(decoded.userId);
+    next();
+  } catch (error) {
+    res.status(401).json({ message: 'Invalid token' });
+  }
+};
+
+const adminOnly = (req, res, next) => {
+  if (req.user.role !== 'admin') {
+    return res.status(403).json({ 
+      message: 'Forbidden: Admin only' 
+    });
+  }
+  next();
+};
+
+// Usage
+router.get('/admin/users', auth, adminOnly, getUsers);
+```
+
+---
+
+## 9. Troubleshooting
+
+### Vấn đề 1: Infinite redirect loop
+**Nguyên nhân**: ProtectedRoute check sai logic  
+**Giải pháp**: Đảm bảo `replace={true}` trong Navigate
+
+### Vấn đề 2: Flash of redirect
+**Nguyên nhân**: Không handle loading state  
+**Giải pháp**: Thêm check `if (isLoading)` trước check auth
+
+### Vấn đề 3: Lost location state
+**Nguyên nhân**: Không pass `state={{ from: location }}`  
+**Giải pháp**: Luôn lưu location khi redirect
+
+### Vấn đề 4: Admin có thể truy cập nhưng API fail
+**Nguyên nhân**: Backend không verify role  
+**Giải pháp**: Thêm middleware `adminOnly` trên API routes
+
+---
+
+## 10. Summary
+
+### ProtectedRoute
+- ✅ Kiểm tra `isAuthenticated`
+- ✅ Redirect `/login` nếu chưa đăng nhập
+- ✅ Lưu location state để quay lại
+- ✅ Handle loading state
+
+### AdminRoute
+- ✅ Kiểm tra `isAuthenticated` trước
+- ✅ Kiểm tra `userInfo.role === 'admin'`
+- ✅ Redirect `/login` nếu chưa đăng nhập
+- ✅ Redirect `/` nếu không phải admin
+- ✅ Handle loading state
+
+### Kết quả
+- Bảo vệ toàn bộ protected routes
+- UX mượt mà, không flash
+- Role-based access hoạt động chính xác
+- Security tốt (kết hợp backend validation)
+
+---
+
+**Chức năng 8 hoàn thành! ✅**
diff --git a/docs/SERVER_SETUP_COMPLETE.md b/docs/SERVER_SETUP_COMPLETE.md
new file mode 100644
index 00000000..079a70f0
--- /dev/null
+++ b/docs/SERVER_SETUP_COMPLETE.md
@@ -0,0 +1,363 @@
+# ✅ Server Backend - Setup Complete
+
+## 📦 Files Created
+
+### Core Server Files
+1. **`.env`** - Environment configuration (với mật khẩu và secrets)
+2. **`src/server.js`** - Server entry point với database connection
+3. **`src/app.js`** - Express application setup với middleware
+
+### Controllers
+4. **`src/controllers/authController.js`** - Authentication logic
+   - register()
+   - login()
+   - refreshAccessToken()
+   - logout()
+   - getProfile()
+
+### Routes
+5. **`src/routes/authRoutes.js`** - Auth endpoints
+   - POST /api/auth/register
+   - POST /api/auth/login
+   - POST /api/auth/refresh-token
+   - POST /api/auth/logout
+   - GET /api/auth/profile
+
+6. **`src/routes/userRoutes.js`** - User endpoints (placeholder)
+7. **`src/routes/roomRoutes.js`** - Room endpoints (placeholder)
+8. **`src/routes/bookingRoutes.js`** - Booking endpoints (placeholder)
+
+### Middleware
+9. **`src/middlewares/auth.js`** - JWT authentication
+   - authenticateToken()
+   - authorizeRoles()
+
+10. **`src/middlewares/errorHandler.js`** - Global error handling
+11. **`src/middlewares/validate.js`** - Validation middleware
+
+### Validators
+12. **`src/validators/authValidator.js`** - Validation rules
+    - registerValidation
+    - loginValidation
+    - refreshTokenValidation
+
+### Documentation
+13. **`README.md`** - Server documentation
+14. **`QUICK_START.md`** - Quick setup guide
+
+## 🎯 Features Implemented
+
+### Security
+- ✅ JWT authentication (access + refresh tokens)
+- ✅ Password hashing with bcrypt (10 rounds)
+- ✅ Helmet security headers
+- ✅ CORS configuration
+- ✅ Rate limiting (100 req/15min)
+- ✅ Input validation with express-validator
+
+### Authentication Flow
+- ✅ Register with email/password validation
+- ✅ Login with email/password
+- ✅ Remember me (7 days vs 1 day token expiry)
+- ✅ Refresh token mechanism
+- ✅ Logout with token cleanup
+- ✅ Protected routes with JWT
+
+### Error Handling
+- ✅ Global error handler
+- ✅ Sequelize error handling
+- ✅ JWT error handling
+- ✅ Validation error formatting
+- ✅ Development vs production error responses
+
+### Validation Rules
+
+**Register:**
+```javascript
+- name: 2-50 chars, required
+- email: valid email format, required, unique
+- password: min 8 chars, uppercase + lowercase + number
+- phone: 10-11 digits, optional
+```
+
+**Login:**
+```javascript
+- email: valid email format, required
+- password: required
+- rememberMe: boolean, optional
+```
+
+## 🗄️ Database Integration
+
+### Models Used
+- ✅ User model (full_name, email, password, phone, role_id)
+- ✅ Role model (for role-based access)
+- ✅ RefreshToken model (token storage)
+
+### Associations
+- User belongsTo Role
+- User hasMany RefreshToken
+- User hasMany Booking
+
+## 🔐 JWT Configuration
+
+```javascript
+Access Token:
+- Secret: JWT_SECRET
+- Expiry: 1h
+- Payload: { userId }
+
+Refresh Token:
+- Secret: JWT_REFRESH_SECRET
+- Expiry: 7d (remember me) or 1d (normal)
+- Payload: { userId }
+- Stored in database (refresh_tokens table)
+```
+
+## 📡 API Endpoints Ready
+
+### Public Endpoints
+```
+✅ GET  /health                    - Health check
+✅ POST /api/auth/register         - User registration
+✅ POST /api/auth/login            - User login
+✅ POST /api/auth/refresh-token    - Refresh access token
+✅ POST /api/auth/logout           - User logout
+```
+
+### Protected Endpoints
+```
+✅ GET  /api/auth/profile          - Get user profile (JWT required)
+🔜 GET  /api/users                 - Get all users (Admin only)
+🔜 GET  /api/rooms                 - Get rooms (Public)
+🔜 GET  /api/bookings              - Get bookings (User's own)
+```
+
+## 🧪 Request/Response Examples
+
+### Login Request
+```json
+POST /api/auth/login
+{
+  "email": "user@example.com",
+  "password": "Password123",
+  "rememberMe": true
+}
+```
+
+### Login Response (Success)
+```json
+{
+  "status": "success",
+  "message": "Login successful",
+  "data": {
+    "user": {
+      "id": 1,
+      "name": "John Doe",
+      "email": "user@example.com",
+      "phone": "0123456789",
+      "role": "customer"
+    },
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+  }
+}
+```
+
+### Login Response (Error)
+```json
+{
+  "status": "error",
+  "message": "Invalid email or password"
+}
+```
+
+### Validation Error
+```json
+{
+  "status": "error",
+  "message": "Validation failed",
+  "errors": [
+    {
+      "field": "email",
+      "message": "Invalid email format"
+    },
+    {
+      "field": "password",
+      "message": "Password must be at least 8 characters"
+    }
+  ]
+}
+```
+
+## 🔧 Middleware Stack
+
+```javascript
+1. helmet()              - Security headers
+2. compression()         - Response compression
+3. cors()               - CORS handling
+4. express.json()       - JSON body parser
+5. morgan()             - Request logging
+6. rateLimit()          - Rate limiting
+7. Routes               - API routes
+8. errorHandler()       - Global error handler
+```
+
+## ⚙️ Environment Variables
+
+```bash
+# Server
+PORT=3000
+NODE_ENV=development
+
+# Database
+DB_HOST=localhost
+DB_USER=root
+DB_PASS=
+DB_NAME=hotel_db
+
+# JWT
+JWT_SECRET=your-super-secret-jwt-key
+JWT_EXPIRES_IN=1h
+JWT_REFRESH_SECRET=your-refresh-token-secret
+JWT_REFRESH_EXPIRES_IN=7d
+
+# Client
+CLIENT_URL=http://localhost:5173
+```
+
+## 📋 Next Steps (Manual)
+
+### 1. Database Setup
+```bash
+# Tạo database
+mysql -u root -p
+CREATE DATABASE hotel_db;
+
+# Chạy migrations
+cd d:/hotel-booking/server
+npm run migrate
+
+# (Optional) Seed data
+npm run seed
+```
+
+### 2. Start Server
+```bash
+cd d:/hotel-booking/server
+npm run dev
+```
+
+Expected output:
+```
+✅ Database connection established successfully
+📊 Database models synced
+🚀 Server running on port 3000
+🌐 Environment: development
+🔗 API: http://localhost:3000/api
+🏥 Health: http://localhost:3000/health
+```
+
+### 3. Test API
+
+**Health Check:**
+```bash
+curl http://localhost:3000/health
+```
+
+**Register:**
+```bash
+curl -X POST http://localhost:3000/api/auth/register \
+  -H "Content-Type: application/json" \
+  -d '{
+    "name": "Test User",
+    "email": "test@example.com",
+    "password": "Test1234",
+    "phone": "0123456789"
+  }'
+```
+
+**Login:**
+```bash
+curl -X POST http://localhost:3000/api/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{
+    "email": "test@example.com",
+    "password": "Test1234",
+    "rememberMe": true
+  }'
+```
+
+### 4. Test with Frontend
+
+1. Make sure client .env has:
+   ```
+   VITE_API_URL=http://localhost:3000
+   ```
+
+2. Start frontend:
+   ```bash
+   cd d:/hotel-booking/client
+   npm run dev
+   ```
+
+3. Navigate to: http://localhost:5173/login
+
+4. Try to login with credentials from step 3
+
+## 🎯 Integration Checklist
+
+- [ ] MySQL server running
+- [ ] Database `hotel_db` created
+- [ ] Migrations executed successfully
+- [ ] Server running on port 3000
+- [ ] Health endpoint returns 200
+- [ ] Frontend .env configured
+- [ ] Frontend running on port 5173
+- [ ] Login API working with Postman/curl
+- [ ] Frontend login form connects to backend
+- [ ] JWT tokens stored in localStorage
+- [ ] Protected routes work after login
+
+## 🔍 Troubleshooting
+
+### Server won't start
+- Check MySQL is running
+- Check .env database credentials
+- Check port 3000 is not in use
+
+### Login returns 401
+- Check email/password are correct
+- Check user exists in database
+- Check JWT_SECRET in .env
+
+### CORS errors in frontend
+- Check CLIENT_URL in server .env
+- Check frontend is using correct API URL
+- Check server CORS middleware
+
+### Token expired immediately
+- Check JWT_EXPIRES_IN in .env
+- Check system clock is correct
+- Check refresh token mechanism
+
+## 📚 Code Quality
+
+- ✅ Proper error handling with try-catch
+- ✅ Async/await pattern
+- ✅ Input validation before processing
+- ✅ Password never returned in responses
+- ✅ Proper HTTP status codes
+- ✅ Consistent API response format
+- ✅ Environment-based logging
+- ✅ Rate limiting for security
+- ✅ Token expiry management
+- ✅ Database connection pooling
+
+---
+
+**Status:** ✅ Backend Setup Complete  
+**Next:** Run migrations → Start server → Test login from frontend  
+**Time to complete:** ~5 minutes manual setup
+
+🎉 **Congratulations!** Backend API is ready for testing!
diff --git a/docs/TEST_ROUTE_PROTECTION.md b/docs/TEST_ROUTE_PROTECTION.md
new file mode 100644
index 00000000..0281ff3b
--- /dev/null
+++ b/docs/TEST_ROUTE_PROTECTION.md
@@ -0,0 +1,590 @@
+# Test Scenarios - Route Protection (Chức năng 8)
+
+## Test Setup
+
+### Test Users
+```javascript
+// Admin user
+{
+  email: "admin@hotel.com",
+  password: "Admin@123",
+  role: "admin"
+}
+
+// Customer user
+{
+  email: "customer@hotel.com",
+  password: "Customer@123",
+  role: "customer"
+}
+
+// Staff user
+{
+  email: "staff@hotel.com",
+  password: "Staff@123",
+  role: "staff"
+}
+```
+
+---
+
+## Test Case 1: ProtectedRoute - Unauthenticated User
+
+### Objective
+Verify that unauthenticated users cannot access protected routes.
+
+### Steps
+1. Open browser (incognito mode)
+2. Navigate to `http://localhost:5173/dashboard`
+
+### Expected Result
+- ✅ Redirected to `/login`
+- ✅ URL shows `/login`
+- ✅ Login form displayed
+- ✅ No error in console
+- ✅ Location state contains `from: '/dashboard'`
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 2: ProtectedRoute - Authenticated User
+
+### Objective
+Verify that authenticated users can access protected routes.
+
+### Steps
+1. Login as customer (`customer@hotel.com` / `Customer@123`)
+2. Navigate to `http://localhost:5173/dashboard`
+
+### Expected Result
+- ✅ Dashboard page displayed successfully
+- ✅ URL shows `/dashboard`
+- ✅ No redirect to login
+- ✅ Navbar shows user info
+- ✅ Logout button visible
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 3: ProtectedRoute - Redirect After Login
+
+### Objective
+Verify that users are redirected back to original page after login.
+
+### Steps
+1. Logout (if logged in)
+2. Navigate to `http://localhost:5173/bookings` (protected)
+3. Should redirect to `/login`
+4. Login with valid credentials
+5. Observe redirect behavior
+
+### Expected Result
+- ✅ Step 2: Redirected to `/login`
+- ✅ Step 4: Login successful
+- ✅ Step 5: Redirected back to `/bookings` (original page)
+- ✅ URL shows `/bookings`
+- ✅ BookingListPage displayed
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 4: AdminRoute - Unauthenticated User
+
+### Objective
+Verify that unauthenticated users cannot access admin routes.
+
+### Steps
+1. Open browser (incognito mode)
+2. Navigate to `http://localhost:5173/admin`
+
+### Expected Result
+- ✅ Redirected to `/login`
+- ✅ URL shows `/login`
+- ✅ Login form displayed
+- ✅ Location state contains `from: '/admin'`
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 5: AdminRoute - Customer User
+
+### Objective
+Verify that non-admin users (customer) cannot access admin routes.
+
+### Steps
+1. Login as customer (`customer@hotel.com` / `Customer@123`)
+2. Navigate to `http://localhost:5173/admin`
+
+### Expected Result
+- ✅ Redirected to `/` (homepage)
+- ✅ URL shows `/`
+- ✅ Homepage displayed
+- ✅ No admin content visible
+- ✅ Toast message: "Access denied" (optional)
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 6: AdminRoute - Staff User
+
+### Objective
+Verify that staff users cannot access admin routes.
+
+### Steps
+1. Login as staff (`staff@hotel.com` / `Staff@123`)
+2. Navigate to `http://localhost:5173/admin`
+
+### Expected Result
+- ✅ Redirected to `/` (homepage)
+- ✅ URL shows `/`
+- ✅ Homepage displayed
+- ✅ No admin content visible
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 7: AdminRoute - Admin User
+
+### Objective
+Verify that admin users can access admin routes.
+
+### Steps
+1. Login as admin (`admin@hotel.com` / `Admin@123`)
+2. Navigate to `http://localhost:5173/admin`
+
+### Expected Result
+- ✅ Admin dashboard displayed
+- ✅ URL shows `/admin` or `/admin/dashboard`
+- ✅ Admin sidebar visible
+- ✅ Admin navigation menu visible
+- ✅ Can access all admin sub-routes:
+  - `/admin/users`
+  - `/admin/rooms`
+  - `/admin/bookings`
+  - `/admin/payments`
+  - `/admin/services`
+  - `/admin/promotions`
+  - `/admin/banners`
+  - `/admin/reports`
+  - `/admin/settings`
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 8: Loading State - Slow Network
+
+### Objective
+Verify that loading state is displayed during auth check.
+
+### Steps
+1. Open DevTools → Network tab
+2. Set throttling to "Slow 3G"
+3. Refresh page at protected route
+4. Observe loading behavior
+
+### Expected Result
+- ✅ Loading spinner displayed
+- ✅ Text "Đang tải..." or "Đang xác thực..." visible
+- ✅ No flash of redirect
+- ✅ Smooth transition after loading
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 9: Token Expiration
+
+### Objective
+Verify that expired tokens are handled correctly.
+
+### Steps
+1. Login successfully
+2. Manually modify token in localStorage to invalid value:
+   ```javascript
+   localStorage.setItem('token', 'invalid-token')
+   ```
+3. Navigate to protected route `/dashboard`
+4. Observe behavior
+
+### Expected Result
+- ✅ Redirected to `/login`
+- ✅ Toast message: "Session expired" (optional)
+- ✅ Location state saved
+- ✅ Can login again successfully
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 10: Direct URL Access - Admin
+
+### Objective
+Verify that direct URL access to admin routes is blocked for non-admin.
+
+### Steps
+1. Login as customer
+2. Type in address bar: `http://localhost:5173/admin/users`
+3. Press Enter
+
+### Expected Result
+- ✅ Redirected to `/` (homepage)
+- ✅ Cannot access admin/users
+- ✅ No admin content visible
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 11: Nested Admin Routes
+
+### Objective
+Verify that all nested admin routes are protected.
+
+### Steps
+1. Login as admin
+2. Navigate to each admin route:
+   - `/admin/dashboard`
+   - `/admin/users`
+   - `/admin/rooms`
+   - `/admin/bookings`
+   - `/admin/payments`
+   - `/admin/services`
+   - `/admin/promotions`
+   - `/admin/banners`
+   - `/admin/reports`
+   - `/admin/settings`
+
+### Expected Result
+- ✅ All routes accessible
+- ✅ Each page displays correctly
+- ✅ No errors in console
+- ✅ Admin layout consistent
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 12: Public Routes Access
+
+### Objective
+Verify that public routes are accessible without authentication.
+
+### Steps
+1. Logout (if logged in)
+2. Navigate to public routes:
+   - `/` (homepage)
+   - `/rooms`
+   - `/about`
+   - `/login`
+   - `/register`
+   - `/forgot-password`
+
+### Expected Result
+- ✅ All public routes accessible
+- ✅ No redirect to login
+- ✅ Pages display correctly
+- ✅ No errors in console
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 13: Logout Behavior
+
+### Objective
+Verify that logout clears auth and redirects properly.
+
+### Steps
+1. Login as any user
+2. Navigate to protected route `/dashboard`
+3. Click logout button
+4. Observe behavior
+
+### Expected Result
+- ✅ User logged out
+- ✅ Token removed from localStorage
+- ✅ userInfo removed from localStorage
+- ✅ Redirected to `/` or `/login`
+- ✅ Navbar shows "Đăng nhập" button
+- ✅ Cannot access protected routes anymore
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 14: Multiple Tabs - Logout Sync
+
+### Objective
+Verify that logout in one tab affects other tabs.
+
+### Steps
+1. Login in Tab 1
+2. Open Tab 2 with same site
+3. Logout in Tab 1
+4. Switch to Tab 2
+5. Try to access protected route
+
+### Expected Result
+- ✅ Tab 2 detects logout
+- ✅ Redirected to login
+- ✅ Auth state synced across tabs
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 15: Browser Refresh - Auth Persistence
+
+### Objective
+Verify that auth state persists after browser refresh.
+
+### Steps
+1. Login successfully
+2. Navigate to protected route `/dashboard`
+3. Press F5 (refresh)
+4. Observe behavior
+
+### Expected Result
+- ✅ User still logged in
+- ✅ Dashboard displays correctly
+- ✅ No redirect to login
+- ✅ userInfo still available
+- ✅ Token still in localStorage
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 16: Role Change Detection
+
+### Objective
+Verify that role changes are detected and enforced.
+
+### Steps
+1. Login as admin
+2. Access `/admin/dashboard` successfully
+3. Manually change role in localStorage:
+   ```javascript
+   const user = JSON.parse(localStorage.getItem('userInfo'))
+   user.role = 'customer'
+   localStorage.setItem('userInfo', JSON.stringify(user))
+   ```
+4. Refresh page
+5. Try to access `/admin`
+
+### Expected Result
+- ✅ Redirected to `/` (homepage)
+- ✅ Cannot access admin routes
+- ✅ Role validation working
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 17: 404 Route
+
+### Objective
+Verify that non-existent routes show 404 page.
+
+### Steps
+1. Navigate to `http://localhost:5173/non-existent-route`
+
+### Expected Result
+- ✅ 404 page displayed
+- ✅ "404 - Không tìm thấy trang" message
+- ✅ URL shows `/non-existent-route`
+- ✅ No errors in console
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Test Case 18: Remember Me Feature
+
+### Objective
+Verify that "Remember Me" extends token duration.
+
+### Steps
+1. Login with "Remember Me" checked
+2. Check token expiry in localStorage
+3. Close browser
+4. Reopen browser after 1 day
+5. Navigate to protected route
+
+### Expected Result
+- ✅ User still logged in (if < 7 days)
+- ✅ No need to login again
+- ✅ Token valid
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Performance Tests
+
+### Test Case 19: Route Navigation Speed
+
+### Steps
+1. Login as user
+2. Navigate between routes:
+   - `/dashboard` → `/bookings` → `/profile` → `/rooms`
+3. Measure navigation time
+
+### Expected Result
+- ✅ Navigation < 200ms
+- ✅ No flickering
+- ✅ Smooth transitions
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Security Tests
+
+### Test Case 20: XSS in Route Params
+
+### Steps
+1. Navigate to `/reset-password/<script>alert('xss')</script>`
+2. Observe behavior
+
+### Expected Result
+- ✅ No alert popup
+- ✅ Script not executed
+- ✅ Token treated as string
+
+### Actual Result
+- [ ] Pass
+- [ ] Fail (describe issue):
+
+---
+
+## Summary
+
+| Test Case | Status | Notes |
+|-----------|--------|-------|
+| TC-01: ProtectedRoute - Unauth | ⏳ | |
+| TC-02: ProtectedRoute - Auth | ⏳ | |
+| TC-03: Redirect After Login | ⏳ | |
+| TC-04: AdminRoute - Unauth | ⏳ | |
+| TC-05: AdminRoute - Customer | ⏳ | |
+| TC-06: AdminRoute - Staff | ⏳ | |
+| TC-07: AdminRoute - Admin | ⏳ | |
+| TC-08: Loading State | ⏳ | |
+| TC-09: Token Expiration | ⏳ | |
+| TC-10: Direct URL - Admin | ⏳ | |
+| TC-11: Nested Admin Routes | ⏳ | |
+| TC-12: Public Routes | ⏳ | |
+| TC-13: Logout | ⏳ | |
+| TC-14: Multi-tab Sync | ⏳ | |
+| TC-15: Refresh Persistence | ⏳ | |
+| TC-16: Role Change | ⏳ | |
+| TC-17: 404 Route | ⏳ | |
+| TC-18: Remember Me | ⏳ | |
+| TC-19: Performance | ⏳ | |
+| TC-20: XSS Security | ⏳ | |
+
+**Overall Status**: ⏳ Pending Testing
+
+---
+
+## How to Run Tests
+
+### Manual Testing
+```bash
+# 1. Start server
+cd server
+npm run dev
+
+# 2. Start client
+cd client
+npm run dev
+
+# 3. Open browser
+http://localhost:5173
+
+# 4. Follow test cases above
+```
+
+### Automated Testing (Optional - Future)
+```bash
+# Install testing dependencies
+npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event
+
+# Run tests
+npm test
+```
+
+---
+
+## Bug Report Template
+
+```markdown
+### Bug: [Short description]
+
+**Test Case**: TC-XX
+
+**Steps to Reproduce**:
+1. Step 1
+2. Step 2
+3. Step 3
+
+**Expected**: [What should happen]
+
+**Actual**: [What actually happened]
+
+**Environment**:
+- Browser: Chrome 120
+- OS: Windows 11
+- Node: v18.17.0
+
+**Screenshots**: [Attach if applicable]
+
+**Console Errors**: [Copy-paste errors]
+
+**Priority**: High/Medium/Low
+```
diff --git a/docs/VNPAY_QUICK_START.md b/docs/VNPAY_QUICK_START.md
new file mode 100644
index 00000000..d211b68d
--- /dev/null
+++ b/docs/VNPAY_QUICK_START.md
@@ -0,0 +1,2 @@
+VNPay integration docs removed per repository cleanup.
+This file has been replaced with a short note because VNPay is no longer used in this project.
diff --git a/docs/VNPAY_SETUP.md b/docs/VNPAY_SETUP.md
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/tasks-admin.md b/docs/tasks-admin.md
new file mode 100644
index 00000000..7be488ea
--- /dev/null
+++ b/docs/tasks-admin.md
@@ -0,0 +1,207 @@
+# 🏨 Hotel Management & Booking System  
+## Bản Phân Tích Dành Cho Admin (SRS Admin Analysis)
+
+---
+
+## 1. Giới thiệu
+Tài liệu này phân tích các yêu cầu từ SRS của hệ thống **Hotel Management & Booking Online (e-Hotel)**, tập trung hoàn toàn vào phần **Admin / Manager / Staff** (không bao gồm khách hàng).  
+Mục tiêu là nắm rõ các chức năng quản trị, vận hành và bảo mật của hệ thống.
+
+---
+
+# 2. Phân tích chức năng dành cho Admin
+
+---
+
+## 2.1 Setup Module (Thiết lập hệ thống)
+
+### 2.1.1 Setup Rooms (Quản lý phòng)
+**Vai trò sử dụng:** Manager, Admin  
+
+**Các chức năng:**
+- Thêm mới phòng  
+- Chỉnh sửa thông tin phòng  
+- Xoá phòng *(chỉ khi phòng chưa có booking)*  
+- Upload hình ảnh phòng  
+
+**Thông tin phòng gồm:**
+- RoomID  
+- Description  
+- Type (VIP, DELUX, SUITE, …)  
+- Size (Single, Double, …)  
+- Price  
+- Pictures  
+
+**Quy tắc:**
+- Validate toàn bộ dữ liệu khi thêm/sửa  
+- Không cho xoá phòng đã phát sinh booking  
+
+---
+
+### 2.1.2 Setup Services (Quản lý dịch vụ)
+**Vai trò:** Manager, Admin  
+
+**Chức năng:**
+- Thêm dịch vụ  
+- Chỉnh sửa  
+- Xoá dịch vụ  
+
+**Thông tin dịch vụ:**
+- Service ID  
+- Service Name  
+- Description  
+- Unit (giờ, suất, lần,…)  
+- Price  
+
+**Quy tắc:**  
+- Validate tất cả dữ liệu nhập  
+
+---
+
+### 2.1.3 Promotion Management (Quản lý khuyến mãi)
+**Vai trò:** Manager, Admin  
+
+**Chức năng:**
+- Add promotion  
+- Edit promotion  
+- Delete promotion  
+- Promotion có thể áp dụng bằng code hoặc tự động trong booking  
+
+**Thông tin:**
+- ID  
+- Name  
+- Description  
+- Value (phần trăm hoặc số tiền)  
+
+---
+
+# 2.2 Operation Module (Vận hành khách sạn)
+
+---
+
+## 2.2.1 Booking Management
+**Vai trò:** Staff, Manager, Admin  
+
+**Chức năng:**
+- Tìm booking theo tên khách, số booking, ngày đặt  
+- Xem chi tiết booking  
+- Xem bill dịch vụ  
+- Xử lý yêu cầu:
+  - Hủy booking  
+  - Checkout  
+
+---
+
+## 2.2.2 Check-in
+**Vai trò:** Staff, Manager  
+
+**Quy trình check-in:**
+- Khách xuất trình Booking Number  
+- Nhân viên kiểm tra thông tin booking  
+- Nhập thông tin từng khách trong phòng  
+- Gán số phòng thực tế  
+- Thu thêm phí nếu có trẻ em hoặc extra person  
+
+---
+
+## 2.2.3 Use Services (Khách đăng ký sử dụng dịch vụ)
+**Vai trò:** Staff  
+
+**Chức năng:**
+- Đăng ký dịch vụ cho khách dựa trên Room Number  
+- In ticket nếu có yêu cầu  
+
+---
+
+## 2.2.4 Check-out
+**Vai trò:** Staff, Manager  
+
+**Chức năng:**
+- Tính toán:
+  - Phí phòng  
+  - Phí dịch vụ  
+  - Phụ phí khác  
+- Tạo hóa đơn (Invoice)  
+- Khấu trừ tiền đã đặt cọc (booking value)  
+- Khách thanh toán phần còn lại  
+
+---
+
+# 2.3 Report Module (Báo cáo)
+
+**Vai trò:** Manager, Admin  
+
+**Chức năng:**
+- Nhập khoảng thời gian From → To  
+- Liệt kê toàn bộ booking trong khoảng thời gian  
+- Tính tổng doanh thu  
+- Xuất báo cáo:
+  - Excel  
+  - PDF  
+
+**Nội dung báo cáo:**
+- Booking ID  
+- Customer Name  
+- Room  
+- Total Amount  
+- Booking Date  
+- Status  
+- Revenue Summary  
+
+---
+
+# 2.4 System Administration Module (Quản trị hệ thống)
+
+---
+
+## 2.4.1 User Management
+**Vai trò:** Admin  
+
+**Chức năng:**
+- Add user  
+- Edit user  
+- Delete user  
+- View user detail  
+- List tất cả user  
+- Gán role (Admin, Manager, Staff)  
+
+---
+
+## 2.4.2 Security
+**Chức năng bảo mật của hệ thống:**
+
+### Roles được định nghĩa:
+| Role | Quyền |
+|------|-------|
+| **Customer** | Không cần login |
+| **Staff (Sale)** | Truy cập Operation Module |
+| **Manager** | Truy cập Setup Module |
+| **Admin** | Toàn quyền, bao gồm User & Security |
+
+### Quy tắc bảo mật:
+- Nhân viên & admin bắt buộc phải login  
+- Quyền thao tác phụ thuộc vào role  
+- Session timeout sau 30 phút không hoạt động  
+
+---
+
+# 3. Tóm tắt theo góc nhìn Admin
+
+| Module | Quyền Admin | Nội dung |
+|--------|-------------|----------|
+| Room Setup | Full | CRUD phòng |
+| Service Setup | Full | CRUD dịch vụ |
+| Promotion Setup | Full | CRUD khuyến mãi |
+| Booking Management | Full | Xem, duyệt, hủy booking |
+| Check-in / Check-out | Full | Quản lý vận hành |
+| Service Usage | Full | Ghi log dịch vụ |
+| Reports | Full | Thống kê, xuất file |
+| User Management | Full | Quản lý nhân viên |
+| Security | Full | Role, phân quyền |
+
+---
+
+# 4. Kết luận
+Phân tích trên giúp xác định đầy đủ các chức năng cần triển khai cho **Admin / Manager / Staff** trong hệ thống quản lý khách sạn.  
+Tài liệu có thể được sử dụng để xây dựng database, API, UI/UX, và phân quyền hệ thống.
+
diff --git a/docs/tasks_1_Authentication.md b/docs/tasks_1_Authentication.md
new file mode 100644
index 00000000..c501d784
--- /dev/null
+++ b/docs/tasks_1_Authentication.md
@@ -0,0 +1,228 @@
+# Authentication
+
+## Chức năng 1: Layout cơ bản (Header, Footer, Navbar, SidebarAdmin)
+
+### Mục tiêu
+    Tạo layout nền tảng cho toàn bộ hệ thống và cấu trúc render nội dung theo route.
+
+#### Nhiệm vụ chi tiết
+- Tạo thư mục:
+    ```
+    src/components/layouts/
+    ```
+- Bao gồm:
+    + Header.jsx
+    + Footer.jsx
+    + Navbar.jsx
+    + SidebarAdmin.jsx
+    + LayoutMain.jsx
+- Dùng <Outlet /> trong LayoutMain để render nội dung động.
+- Navbar thay đổi tùy trạng thái đăng nhập:
+    + Nếu chưa login → hiển thị nút “Đăng nhập / Đăng ký”.
+    + Nếu đã login → hiển thị avatar, tên user và nút “Đăng xuất”.
+- SidebarAdmin chỉ hiển thị với role = admin.
+
+### Kết quả mong đợi
+1. Layout tổng thể hiển thị ổn định.
+2. Navbar hiển thị nội dung động theo trạng thái người dùng.
+3. Giao diện responsive, tương thích desktop/mobile.
+
+---
+
+## Chức năng 2: Cấu hình Routing (react-router-dom)
+
+### Mục tiêu
+    Thiết lập hệ thống định tuyến chuẩn, có bảo vệ route theo role.
+
+#### Nhiệm vụ chi tiết
+- Cấu trúc route chính:
+    ```
+    <Route path="/" element={<LayoutMain />}>
+        <Route index element={<HomePage />} />
+        <Route path="rooms" element={<RoomListPage />} />
+        <Route path="bookings" element={<BookingListPage />} />
+    </Route>
+
+    <Route path="/login" element={<LoginPage />} />
+    <Route path="/register" element={<RegisterPage />} />
+    <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+    <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
+
+    <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+    <Route path="/admin/*" element={<AdminRoute><AdminModule /></AdminRoute>} />
+    ```
+- Dùng ProtectedRoute và AdminRoute để kiểm tra:
+    + isAuthenticated
+    + role === "admin"
+
+### Kết quả mong đợi
+1. Người dùng không đăng nhập bị redirect về /login.
+2. AdminRoute chỉ cho phép admin truy cập.
+3. Tất cả route hoạt động mượt, không lỗi vòng lặp redirect.
+
+---
+
+## Chức năng 3: useAuthStore (Zustand Store)
+
+### Mục tiêu
+    Quản lý trạng thái xác thực toàn cục (token, userInfo, role).
+
+#### Nhiệm vụ chi tiết
+- Tạo src/stores/useAuthStore.js
+- Cấu trúc:
+    ```
+    const useAuthStore = create((set) => ({
+        token: localStorage.getItem("token") || null,
+        userInfo: JSON.parse(localStorage.getItem("userInfo")) || null,
+        isAuthenticated: !!localStorage.getItem("token"),
+
+        login: async (credentials) => { ... },
+        logout: () => { ... },
+        setUser: (user) => { ... },
+        resetPassword: async (payload) => { ... },
+    }));
+    ```
+- Khi đăng nhập thành công:
+    + Lưu token + userInfo vào localStorage.
+- Khi logout:
+    + Xóa localStorage và reset state.
+
+### Kết quả mong đợi
+1. Toàn bộ thông tin user được quản lý tập trung.
+2. Duy trì đăng nhập sau khi reload trang.
+3. Dễ dàng truy cập userInfo trong mọi component.
+
+--- 
+
+## Chức năng 4: Form Login
+
+### Mục tiêu
+    Cho phép người dùng đăng nhập hệ thống.
+
+#### Nhiệm vụ chi tiết
+- Tạo LoginPage.jsx
+- Dùng React Hook Form + Yup validate:
+    + Email hợp lệ
+    + Mật khẩu ≥ 8 ký tự
+- API:
+    ```
+    POST /api/auth/login
+    ```
+- Sau khi đăng nhập thành công:
+    + Lưu token vào localStorage.
+    + Gọi setUser() để cập nhật Zustand.
+    + Redirect về /dashboard.
+    + Gửi email POST /api/notify/login-success.
+- UX nâng cao:
+    + Nút loading khi đang gửi form.
+    + “Hiện/Ẩn mật khẩu”.
+    + “Nhớ đăng nhập” → lưu 7 ngày.
+
+### Kết quả mong đợi
+1. Đăng nhập hoạt động mượt, hiển thị thông báo lỗi rõ ràng.
+2. Email được gửi khi login thành công.
+3. Chuyển hướng đúng theo vai trò user.
+
+---
+
+## Chức năng 5: Form Register
+
+### Mục tiêu
+    Cho phép người dùng đăng ký tài khoản mới.
+
+#### Nhiệm vụ chi tiết
+- Tạo RegisterPage.jsx
+- Dùng React Hook Form + Yup validate:
+    + Họ tên không rỗng
+    + Email hợp lệ
+    + Mật khẩu ≥ 8 ký tự, có ký tự đặc biệt
+- API:
+    ```
+    POST /api/auth/register
+    ```
+- Sau khi đăng ký thành công:
+    + Hiển thị toast “Đăng ký thành công, vui lòng đăng nhập”.
+    + Redirect về /login.
+
+### Kết quả mong đợi
+1. Người dùng tạo tài khoản mới thành công.
+2. Validate chặt chẽ, UX mượt mà.
+3. Giao diện thống nhất với form login.
+
+---
+
+## Chức năng 6: Quên mật khẩu (Forgot Password)
+
+### Mục tiêu
+    Cung cấp chức năng gửi email reset mật khẩu.
+
+#### Nhiệm vụ chi tiết
+- Tạo ForgotPasswordPage.jsx
+- API:
+    ```
+    POST /api/auth/forgot-password
+    ```
+- Sau khi gửi thành công:
+    + Hiển thị thông báo “Vui lòng kiểm tra email để đặt lại mật khẩu.”
+    + Backend gửi link reset có token dạng:
+        ```
+        https://domain.com/reset-password/:token
+        ```
+
+### Kết quả mong đợi
+1. Gửi email thành công.
+2. UX rõ ràng, có loading và thông báo lỗi.
+3. Giao diện thân thiện.
+
+---
+
+## Chức năng 7: Đặt lại mật khẩu (Reset Password)
+
+### Mục tiêu
+    Cho phép người dùng đổi mật khẩu thông qua link email.
+
+#### Nhiệm vụ chi tiết
+- Tạo ResetPasswordPage.jsx
+- Validate:
+    + Mật khẩu mới ≥ 8 ký tự, chứa ký tự đặc biệt
+    + Nhập lại mật khẩu trùng khớp
+- API:
+    ```
+    POST /api/auth/reset-password
+    ```
+- Sau khi đổi mật khẩu thành công:
+    + Gửi email xác nhận POST /api/notify/reset-success.
+    + Redirect về /login.
+
+### Kết quả mong đợi
+1. Mật khẩu được cập nhật thành công.
+2. Gửi email thông báo thành công.
+3. Bảo vệ token hết hạn (invalid token → redirect về forgot-password).
+
+--- 
+
+## Chức năng 8: Phân quyền & Bảo vệ route (ProtectedRoute / AdminRoute)
+
+### Mục tiêu
+    Chặn truy cập trái phép và bảo vệ các route quan trọng.
+
+#### Nhiệm vụ chi tiết
+- Tạo component ProtectedRoute.jsx:
+    ```
+    const ProtectedRoute = ({ children }) => {
+    const { isAuthenticated } = useAuthStore();
+    const location = useLocation();
+    return isAuthenticated ? children : <Navigate to="/login" state={{ from: location }} replace />;
+    };
+    ```
+
+- Tạo AdminRoute.jsx:
+    ```
+    const AdminRoute = ({ children }) => {
+    const { userInfo } = useAuthStore();
+    return userInfo?.role === "admin" ? children : <Navigate to="/" replace />;
+    };
+    ```
+### Kết quả mong đợi
+1. Chỉ người dùng hợp lệ mới truy cập được route quan trọng.
+2. AdminRoute đảm bảo bảo mật cho module quản trị.
diff --git a/docs/tasks_2_Home_&_RoomSearch.md b/docs/tasks_2_Home_&_RoomSearch.md
new file mode 100644
index 00000000..7d78cc64
--- /dev/null
+++ b/docs/tasks_2_Home_&_RoomSearch.md
@@ -0,0 +1,182 @@
+# Review System
+
+## Chức năng 1: HomePage – Trang chủ hiển thị phòng nổi bật
+
+### Mục tiêu
+    Tạo giao diện trang chủ giới thiệu phòng nổi bật, banner và điều hướng đến danh sách phòng.
+
+#### Nhiệm vụ chi tiết
+1. Route: /
+2. Banner:
+    ```
+    GET /api/banners?position=home
+    ```
+    - Nếu không có banner → hiển thị ảnh mặc định.
+    - Có thể dùng Carousel hoặc ảnh tĩnh.
+3. Phòng nổi bật:
+    ```
+    GET /api/rooms?featured=true
+    ```
+    - Hiển thị 4–6 phòng bằng component RoomCard.
+    - Nút “Xem tất cả phòng” → điều hướng /rooms.
+4. Loading skeleton trong khi chờ dữ liệu.
+
+### Kết quả mong đợi
+1. Trang chủ hiển thị banner và danh sách phòng nổi bật rõ ràng.
+2. Khi không có banner → ảnh fallback được hiển thị.
+3. Phòng nổi bật load từ API, giới hạn 4–6 phòng.
+4. UX mượt, có skeleton khi load.
+5. Nút “Xem tất cả phòng” điều hướng chính xác đến /rooms.
+
+---
+
+## Chức năng 2: RoomListPage – Danh sách & Bộ lọc phòng
+
+### Mục tiêu
+    Hiển thị danh sách phòng, cho phép người dùng lọc theo loại, giá, số người và phân trang.
+
+#### Nhiệm vụ chi tiết
+1. Route: /rooms
+2. Bộ lọc (component RoomFilter):
+    - Trường lọc: loại phòng, giá min–max, số người.
+    - Khi submit → gọi API:
+        ```
+        GET /api/rooms?type=&minPrice=&maxPrice=&capacity=&page=
+        ```
+    - Lưu bộ lọc vào URL query.
+    - Nút “Reset” để xóa toàn bộ bộ lọc.
+3. Phân trang (Pagination component).
+4. Hiển thị danh sách bằng RoomCard.
+
+### Kết quả mong đợi
+1. Danh sách phòng hiển thị chính xác theo filter.
+2. Bộ lọc hoạt động mượt, có thể reset dễ dàng.
+3. Phân trang hiển thị chính xác số trang.
+4. Filter được lưu trong URL (giúp reload không mất).
+5. Giao diện responsive, dễ đọc, không bị vỡ.
+
+---
+
+## Chức năng 3: RoomDetailPage – Chi tiết phòng & Đánh giá
+
+### Mục tiêu
+    Tạo trang chi tiết phòng đầy đủ thông tin, hình ảnh, tiện ích và khu vực đánh giá.
+
+#### Nhiệm vụ chi tiết
+1. Route: /rooms/:id
+2. Phần nội dung:
+    -Thông tin phòng (ảnh, mô tả, giá, tiện ích)
+    - RoomGallery: Carousel ảnh
+    - RoomAmenities: danh sách tiện ích
+    - Nút “Đặt ngay” → điều hướng /booking/:roomId
+3. Review Section:
+    - Lấy danh sách review đã duyệt:
+        ```
+        GET /api/rooms/:id/reviews
+        ```
+    - Nếu người dùng đã từng đặt phòng:
+        ```
+        POST /api/reviews
+        ```
+4. Component RatingStars + ReviewForm.
+5. Nếu chưa đăng nhập → hiển thị “Vui lòng đăng nhập để đánh giá”.
+6. Tính trung bình điểm review.
+7. Loading skeleton khi chờ review.
+
+### Kết quả mong đợi
+1. Hiển thị đầy đủ ảnh, mô tả, tiện ích phòng.
+2. Carousel hoạt động mượt mà.
+3. Review hiển thị đúng, có trung bình số sao.
+4. Người đã đặt có thể viết review (sau duyệt).
+5. Nút “Đặt ngay” điều hướng chính xác đến form booking.
+6. Skeleton hiển thị khi chờ dữ liệu.
+
+--- 
+
+## Chức năng 4: SearchRoom – Tìm phòng trống
+
+### Mục tiêu
+    Cho phép người dùng tìm phòng trống theo ngày và loại phòng.
+
+#### Nhiệm vụ chi tiết
+1. Form tìm kiếm (ở HomePage hoặc RoomListPage):
+    - Input: ngày đến (from), ngày đi (to), loại phòng.
+2. API:
+    ```
+    GET /api/rooms/available?from=&to=&type=
+    ```
+3. Validate:
+    - from < to
+    - from không nhỏ hơn hôm nay.
+4. Kết quả:
+    - Hiển thị danh sách bằng RoomCard.
+    - Nếu không có kết quả → “Không tìm thấy phòng phù hợp”.
+5. Dùng react-datepicker hoặc react-day-picker.
+6. Loading spinner khi đang tìm.
+
+### Kết quả mong đợi
+1. Form tìm phòng hoạt động, validate chính xác.
+2. Khi bấm tìm → hiển thị danh sách phòng trống.
+3. Nếu không có kết quả → thông báo thân thiện.
+4. Loading hiển thị rõ trong lúc chờ.
+5. Tìm theo ngày & loại phòng chính xác từ backend.
+
+---
+
+## Chức năng 5: Wishlist – Danh sách yêu thích
+
+### Mục tiêu
+    Cho phép người dùng thêm, bỏ hoặc xem danh sách phòng yêu thích.
+
+#### Nhiệm vụ chi tiết
+1. API:
+    ```
+    POST /api/favorites/:roomId   # Thêm
+    DELETE /api/favorites/:roomId # Xóa
+    GET /api/favorites            # Lấy danh sách yêu thích
+    ```
+2. UI:
+    - FavoriteButton (icon ❤️):
+        + Nếu yêu thích → tô đỏ
+        + Nếu chưa → viền xám
+    - Tooltip: “Thêm vào yêu thích” / “Bỏ yêu thích”
+3. Nếu chưa đăng nhập:
+    - Lưu tạm trong localStorage (guestFavorites)
+    - Khi đăng nhập → đồng bộ với server.
+4. Toast thông báo khi thêm/bỏ yêu thích.
+
+### Kết quả mong đợi
+1. Nút ❤️ hoạt động đúng trạng thái (đỏ / xám).
+2. Người chưa đăng nhập vẫn có thể lưu tạm yêu thích.
+3. Khi đăng nhập → danh sách đồng bộ với backend.
+4. Toast hiển thị “Đã thêm vào yêu thích” / “Đã bỏ yêu thích”.
+5. API hoạt động đúng, không lỗi 401 khi đăng nhập hợp lệ.
+
+---
+
+## Chức năng 6: Tối ưu UI/UX & Performance
+
+### Mục tiêu
+    Cải thiện trải nghiệm người dùng, tối ưu tốc độ tải và khả năng hiển thị responsive.
+
+#### Nhiệm vụ chi tiết
+1. Loading skeleton khi fetch phòng hoặc review.
+2. Debounce khi nhập giá để tránh gọi API liên tục.
+3. Infinite scroll (tùy chọn) thay cho pagination.
+4. Responsive layout:
+    - Desktop: 3–4 cột
+    - Tablet: 2 cột
+    - Mobile: 1 cột
+5. Empty states:
+    - Không có phòng → hiển thị ảnh minh họa + dòng “Không tìm thấy phòng phù hợp”.
+    - Không có review → “Hãy là người đầu tiên đánh giá!”.
+6. Toast thông báo khi thêm yêu thích, gửi review, lỗi mạng.
+
+### Kết quả mong đợi
+1. Trang hoạt động mượt, có skeleton khi chờ dữ liệu.
+2. Tốc độ phản hồi nhanh (debounce hoạt động).
+3. Responsive trên mọi kích thước màn hình.
+4. Các empty state hiển thị thân thiện.
+5. Toast thông báo rõ ràng, UX thân thiện.
+
+---
diff --git a/docs/tasks_3_Booking_&_Payment.md b/docs/tasks_3_Booking_&_Payment.md
new file mode 100644
index 00000000..0cec9412
--- /dev/null
+++ b/docs/tasks_3_Booking_&_Payment.md
@@ -0,0 +1,144 @@
+# Booking & Payment
+
+## Chức năng 1: BookingPage – Form Đặt phòng
+
+### 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.
+
+#### Nhiệm vụ chi tiết
+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)
+    - 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
+    - Không bỏ trống ngày
+    - Có chọn phương thức thanh toán
+5. Tính tổng tiền:
+    ```
+    total = room.price * (số ngày ở)
+    ```
+6. Nút “Đặt phòng”:
+    - Loading spinner
+    - Disable khi đang submit
+
+7. Nếu chưa đăng nhập → redirect /login.
+
+---
+
+## Chức năng 2: Booking API (Giao tiếp backend)
+
+### Mục tiêu
+    Kết nối và xử lý API liên quan đến đặt phòng.
+
+#### Nhiệm vụ chi tiết
+🔧 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
+    ```
+🔄 Luồng xử lý:
+1. Frontend gọi POST /api/bookings
+2. Backend kiểm tra phòng trống:
+    ```
+    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.
+
+---
+
+## Chức năng 3: BookingSuccess – Trang kết quả sau đặt phòng
+
+### 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.
+
+#### Nhiệm vụ chi tiết
+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.
+
+--- 
+
+## Chức năng 4: MyBookingsPage – Danh sách đơn đặt của người
+
+### Mục tiêu
+    Hiển thị toàn bộ các đơn đặt của user + cho phép hủy đơn.
+
+#### Nhiệm vụ chi tiết
+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:
+        🟡 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:
+    - 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.
+
+---
+
+## Chức năng 5: Thanh toán (Giả lập 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.
+
+#### 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"
+
+---
+
+## Chức năng 6: UX & Hiệu năng
+
+### Mục tiêu
+    Cải thiện trải nghiệm người dùng và tính trực quan.
+
+#### 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
+
+---
\ No newline at end of file
diff --git a/docs/tasks_5_Review_System.md b/docs/tasks_5_Review_System.md
new file mode 100644
index 00000000..85fe416e
--- /dev/null
+++ b/docs/tasks_5_Review_System.md
@@ -0,0 +1,140 @@
+# Review System
+
+## Chức năng 1: ReviewPage – Trang người dùng đánh giá phòng
+
+### Mục tiêu
+    Cho phép người dùng viết đánh giá cho những phòng họ đã đặt thành công.
+
+#### Nhiệm vụ chi tiết
+1. Route: /reviews
+2. Gọi API:
+    ```
+    GET /api/bookings/me → Lấy danh sách phòng người dùng đã đặt.
+    POST /api/reviews → Gửi đánh giá.
+    ```
+3. Giao diện:
+    - Hiển thị danh sách phòng đã đặt (tên, ngày ở, trạng thái)
+    - Nút “Đánh giá” (hiện nếu chưa đánh giá phòng đó)
+4. Khi nhấn “Đánh giá” → mở Modal:
+    - Input chọn số sao (⭐ 1–5)
+    - Textarea nhập nội dung bình luận
+    - Nút “Gửi đánh giá”
+5. Validate:
+    - Rating bắt buộc (1–5)
+    - Comment không để trống
+6. Sau khi gửi thành công → toast thông báo “Đánh giá của bạn đang chờ duyệt”.
+
+### Kết quả mong đợi
+1. Người dùng chỉ thấy nút “Đánh giá” với phòng đã từng đặt.
+2. Modal mở ra và validate chính xác.
+3. Gửi thành công → review có trạng thái "pending".
+4. Toast hiển thị thông báo hợp lý.
+5. Giao diện gọn, trực quan, không lỗi khi chưa có phòng nào đặt.
+
+---
+
+## Chức năng 2: RoomDetailPage – Hiển thị danh sách đánh giá
+
+### Mục tiêu
+    Hiển thị danh sách các đánh giá đã được admin duyệt cho từng phòng.
+
+#### Nhiệm vụ chi tiết
+1. Route: /rooms/:id
+2. API:
+    ```
+    GET /api/reviews?roomId={id}&status=approved
+    ```
+3. Hiển thị danh sách review:
+    - Avatar + tên người dùng
+    - Số sao (⭐)
+    - Nội dung bình luận
+    - Ngày đăng (createdAt)
+4. Tính và hiển thị điểm trung bình rating (VD: ⭐ 4.2 / 5)
+5. Nếu chưa có review → hiển thị: “Chưa có đánh giá nào.”
+
+### Kết quả mong đợi
+1. Danh sách review hiển thị đúng theo phòng.
+2. Chỉ review có status = approved được render.
+3. Tính điểm trung bình chính xác (làm tròn 1 chữ số thập phân).
+4. Hiển thị avatar, tên, sao, và ngày đầy đủ.
+5. Có thông báo “Chưa có đánh giá” khi danh sách trống.
+
+---
+
+## Chức năng 3: AdminReviewPage – Trang quản trị đánh giá
+
+### Mục tiêu
+    Cho phép Admin xem, duyệt hoặc từ chối các đánh giá người dùng gửi lên.
+
+#### Nhiệm vụ chi tiết
+1. Route: /admin/reviews
+2. API:
+    ```
+    GET /api/reviews
+    PATCH /api/reviews/:id/approve
+    PATCH /api/reviews/:id/reject
+    ```
+3. Hành động:
+    ✅ Duyệt → review chuyển sang approved
+    ❌ Từ chối → review chuyển sang rejected
+4. Sau khi duyệt → cập nhật giao diện và hiển thị toast thông báo.
+5. Có filter theo trạng thái (pending, approved, rejected).
+
+### Kết quả mong đợi
+1. Admin thấy đầy đủ danh sách review.
+2. Duyệt hoặc từ chối hoạt động đúng API.
+3. Bảng tự cập nhật khi thay đổi trạng thái.
+4. Toast hiển thị rõ “Đã duyệt” hoặc “Đã từ chối”.
+5. Chỉ review approved mới hiển thị công khai cho người dùng.
+
+--- 
+
+## Chức năng 4: Bảo mật & Logic hiển thị
+
+### Mục tiêu
+    Đảm bảo chỉ người hợp lệ mới có thể gửi đánh giá và hệ thống hiển thị đúng dữ liệu.
+
+#### Nhiệm vụ chi tiết
+1. Kiểm tra quyền:
+    - Người dùng chưa đăng nhập → redirect /login
+    - Người dùng chưa từng đặt phòng → không hiển thị nút “Đánh giá”
+2. Kiểm tra logic:
+    - Mỗi người chỉ được đánh giá 1 lần / phòng
+    - Review mặc định status = pending
+3. Phân quyền:
+    - User: chỉ gửi review
+    - Admin: duyệt / từ chối
+    - Staff: chỉ xem
+
+### Kết quả mong đợi
+1. Người chưa đăng nhập không thể gửi review.
+2. Mỗi phòng chỉ được review 1 lần bởi 1 user.
+3. Dữ liệu hiển thị chính xác theo phân quyền.
+4. Review chỉ xuất hiện công khai khi được duyệt.
+5. Không có lỗi logic hoặc hiển thị sai trạng thái.
+
+---
+
+## Chức năng 5: UX & Hiển thị tổng quan
+
+### Mục tiêu
+    Cải thiện trải nghiệm người dùng và giao diện hiển thị đánh giá.
+
+#### Nhiệm vụ chi tiết
+1. Dùng component đánh giá sao trực quan (ví dụ react-rating-stars-component).
+2. Format ngày tạo bằng:
+    ```
+    new Date(createdAt).toLocaleDateString('vi-VN')
+    ```
+3. Thêm hiệu ứng hover nhẹ khi hiển thị danh sách review.
+4. Dùng toast (react-hot-toast) cho thông báo gửi / duyệt / từ chối.
+5. Loading spinner khi chờ API.
+
+### Kết quả mong đợi
+1. UI mượt mà, dễ đọc và thân thiện.
+2. Loading / toast hiển thị đúng trạng thái.
+3. Ngày tháng, sao và bình luận được format đẹp.
+4. Giao diện quản trị và người dùng thống nhất phong cách.
+5. Trải nghiệm người dùng mượt, không giật lag.
+
+---
diff --git a/docs/vnpay-testing-guide.md b/docs/vnpay-testing-guide.md
new file mode 100644
index 00000000..5956f758
--- /dev/null
+++ b/docs/vnpay-testing-guide.md
@@ -0,0 +1,2 @@
+VNPay testing guide removed per repository cleanup.
+This document was deleted because the project no longer integrates with VNPay.
diff --git a/server/.env.example b/server/.env.example
new file mode 100644
index 00000000..688eb386
--- /dev/null
+++ b/server/.env.example
@@ -0,0 +1,35 @@
+# Environment
+NODE_ENV=development
+
+# Server
+PORT=3000
+HOST=localhost
+
+# Database
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=root
+DB_PASS=
+DB_NAME=hotel_booking_dev
+
+# JWT
+JWT_SECRET=your_super_secret_jwt_key_change_this_in_production
+JWT_EXPIRES_IN=1h
+JWT_REFRESH_SECRET=your_super_secret_refresh_key_change_this_in_production
+JWT_REFRESH_EXPIRES_IN=7d
+
+# Client URL
+CLIENT_URL=http://localhost:5173
+
+# Upload
+MAX_FILE_SIZE=5242880
+ALLOWED_FILE_TYPES=image/jpeg,image/png,image/jpg,image/webp
+
+# Pagination
+DEFAULT_PAGE_SIZE=10
+MAX_PAGE_SIZE=100
+
+# Rate Limiting
+RATE_LIMIT_WINDOW_MS=900000
+RATE_LIMIT_MAX_REQUESTS=100
+
diff --git a/server/.gitignore b/server/.gitignore
new file mode 100644
index 00000000..b8016688
--- /dev/null
+++ b/server/.gitignore
@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+package-lock.json
+yarn.lock
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Uploads
+uploads/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+.nyc_output/
+
+# Build
+dist/
+build/
+
+# Temporary files
+tmp/
+temp/
diff --git a/server/.sequelizerc b/server/.sequelizerc
new file mode 100644
index 00000000..ddf43be7
--- /dev/null
+++ b/server/.sequelizerc
@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  'config': path.resolve('src', 'config', 'database.js'),
+  'models-path': path.resolve('src/databases', 'models'),
+  'seeders-path': path.resolve('src/databases', 'seeders'),
+  'migrations-path': path.resolve('src/databases', 'migrations')
+};
diff --git a/server/QUICK_START.md b/server/QUICK_START.md
new file mode 100644
index 00000000..28a65994
--- /dev/null
+++ b/server/QUICK_START.md
@@ -0,0 +1,165 @@
+# 🚀 QUICK START - Server Setup
+
+## Bước 1: Copy file .env
+```bash
+cd d:/hotel-booking/server
+cp .env.example .env
+```
+> File .env đã được tạo sẵn với cấu hình mặc định
+
+## Bước 2: Tạo Database (nếu chưa có)
+```bash
+# Mở MySQL command line
+mysql -u root -p
+
+# Tạo database
+CREATE DATABASE hotel_db;
+
+# Thoát
+exit;
+```
+
+## Bước 3: Chạy Migrations
+```bash
+cd d:/hotel-booking/server
+npm run migrate
+```
+
+Lệnh này sẽ tạo các bảng:
+- roles
+- users
+- refresh_tokens
+- rooms
+- room_types
+- bookings
+- payments
+- services
+- service_usages
+- promotions
+- checkin_checkout
+- banners
+- password_reset_tokens
+- reviews
+
+## Bước 4: (Optional) Seed Data
+```bash
+npm run seed
+```
+
+Lệnh này sẽ tạo:
+- 3 roles: admin, staff, customer
+- Demo users
+- Demo rooms & room types
+- Demo bookings
+
+## Bước 5: Start Server
+```bash
+npm run dev
+```
+
+Bạn sẽ thấy:
+```
+✅ Database connection established successfully
+📊 Database models synced
+🚀 Server running on port 3000
+🌐 Environment: development
+🔗 API: http://localhost:3000/api
+🏥 Health: http://localhost:3000/health
+```
+
+## Bước 6: Test API
+
+### Health Check
+Mở browser: http://localhost:3000/health
+
+### Test Login (sau khi seed data)
+```bash
+curl -X POST http://localhost:3000/api/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"email":"admin@hotel.com","password":"Admin123"}'
+```
+
+## ⚠️ Troubleshooting
+
+### Lỗi: "Access denied for user 'root'"
+**Giải pháp:** Sửa DB_PASS trong file `.env`
+```bash
+DB_PASS=your_mysql_password
+```
+
+### Lỗi: "Unknown database 'hotel_db'"
+**Giải pháp:** Tạo database thủ công (Bước 2)
+
+### Lỗi: "Port 3000 already in use"
+**Giải pháp:** Đổi PORT trong `.env`
+```bash
+PORT=3001
+```
+
+### Lỗi: "Cannot find module"
+**Giải pháp:** Cài lại dependencies
+```bash
+npm install
+```
+
+## 📝 Next Steps
+
+1. ✅ Server đang chạy
+2. ✅ Database đã setup
+3. ✅ API endpoints sẵn sàng
+4. 🔜 Test với frontend login form
+5. 🔜 Implement các API còn lại
+
+## 🧪 Test với Postman
+
+**Collection:** Hotel Booking API
+
+### 1. Register
+```
+POST http://localhost:3000/api/auth/register
+Body (JSON):
+{
+  "name": "Test User",
+  "email": "test@example.com",
+  "password": "Test1234",
+  "phone": "0123456789"
+}
+```
+
+### 2. Login
+```
+POST http://localhost:3000/api/auth/login
+Body (JSON):
+{
+  "email": "test@example.com",
+  "password": "Test1234",
+  "rememberMe": true
+}
+```
+
+### 3. Get Profile
+```
+GET http://localhost:3000/api/auth/profile
+Headers:
+Authorization: Bearer YOUR_ACCESS_TOKEN
+```
+
+## ✅ Checklist
+
+- [ ] MySQL đang chạy
+- [ ] File .env đã tạo và cấu hình đúng
+- [ ] Database hotel_db đã tạo
+- [ ] Migrations đã chạy thành công
+- [ ] Server đang chạy (port 3000)
+- [ ] Health check trả về 200 OK
+- [ ] Frontend .env đã có VITE_API_URL=http://localhost:3000
+- [ ] Frontend đang chạy (port 5173)
+
+## 🎯 Ready to Test Login!
+
+1. Server: http://localhost:3000 ✅
+2. Client: http://localhost:5173 ✅
+3. Login page: http://localhost:5173/login ✅
+4. API endpoint: http://localhost:3000/api/auth/login ✅
+
+**Tất cả sẵn sàng!** Giờ có thể test login form từ frontend! 🚀
diff --git a/server/README.md b/server/README.md
new file mode 100644
index 00000000..4d1fd1c4
--- /dev/null
+++ b/server/README.md
@@ -0,0 +1,166 @@
+# Hotel Booking Server - Setup Guide
+
+## 🚀 Quick Start
+
+### 1. Install Dependencies
+```bash
+cd server
+npm install
+```
+
+### 2. Configure Environment
+Copy `.env.example` to `.env` and update values:
+```bash
+cp .env.example .env
+```
+
+Edit `.env`:
+```bash
+DB_NAME=hotel_db
+DB_USER=root
+DB_PASS=your_password
+JWT_SECRET=your-secret-key
+```
+
+### 3. Setup Database
+
+**Option A: Using existing MySQL database**
+```bash
+# Create database
+mysql -u root -p
+CREATE DATABASE hotel_db;
+exit;
+
+# Run migrations
+npm run migrate
+
+# (Optional) Seed data
+npm run seed
+```
+
+**Option B: Database will be created automatically**
+- Just run the server
+- Make sure MySQL is running
+- Database will be created on first connection
+
+### 4. Start Server
+```bash
+# Development mode with nodemon
+npm run dev
+
+# Production mode
+npm start
+```
+
+Server will be available at: `http://localhost:3000`
+
+## 📡 API Endpoints
+
+### Health Check
+```bash
+GET http://localhost:3000/health
+```
+
+### Authentication
+```bash
+POST /api/auth/register
+POST /api/auth/login
+POST /api/auth/refresh-token
+POST /api/auth/logout
+GET  /api/auth/profile (Protected)
+```
+
+## 🧪 Test API
+
+### Register New User
+```bash
+curl -X POST http://localhost:3000/api/auth/register \
+  -H "Content-Type: application/json" \
+  -d '{
+    "name": "John Doe",
+    "email": "john@example.com",
+    "password": "Password123",
+    "phone": "0123456789"
+  }'
+```
+
+### Login
+```bash
+curl -X POST http://localhost:3000/api/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{
+    "email": "john@example.com",
+    "password": "Password123"
+  }'
+```
+
+## ✅ Server Features
+
+- ✅ Express.js setup with security middleware
+- ✅ JWT authentication (access + refresh tokens)
+- ✅ Password hashing with bcrypt
+- ✅ Input validation with express-validator
+- ✅ Error handling middleware
+- ✅ Rate limiting
+- ✅ CORS configuration
+- ✅ Request logging with Morgan
+- ✅ Compression middleware
+- ✅ Helmet security headers
+
+## 📁 Project Structure
+```
+server/
+├── src/
+│   ├── config/
+│   │   └── database.js          # Database configuration
+│   ├── controllers/
+│   │   └── authController.js    # Auth logic
+│   ├── databases/
+│   │   ├── migrations/          # Database migrations
+│   │   ├── models/              # Sequelize models
+│   │   └── seeders/             # Seed data
+│   ├── middlewares/
+│   │   ├── auth.js              # JWT verification
+│   │   ├── errorHandler.js     # Global error handler
+│   │   └── validate.js          # Validation middleware
+│   ├── routes/
+│   │   ├── authRoutes.js        # Auth routes
+│   │   ├── userRoutes.js        # User routes
+│   │   ├── roomRoutes.js        # Room routes
+│   │   └── bookingRoutes.js     # Booking routes
+│   ├── validators/
+│   │   └── authValidator.js     # Auth validation rules
+│   ├── app.js                   # Express app setup
+│   └── server.js                # Server entry point
+├── .env                         # Environment variables
+├── .env.example                 # Environment template
+└── package.json
+```
+
+## 🔧 Troubleshooting
+
+### Database Connection Error
+```
+Error: Access denied for user 'root'@'localhost'
+```
+**Solution:** Check DB_USER and DB_PASS in .env
+
+### Port Already in Use
+```
+Error: listen EADDRINUSE: address already in use :::3000
+```
+**Solution:** Change PORT in .env or kill process using port 3000
+
+### JWT Secret Warning
+```
+Warning: Using default JWT secret
+```
+**Solution:** Set JWT_SECRET in .env to a strong random string
+
+## 📝 Notes
+
+- Default customer role_id = 3
+- Access token expires in 1 hour
+- Refresh token expires in 7 days (or 1 day without "Remember Me")
+- Password must contain uppercase, lowercase, and number
+- Password minimum length: 8 characters
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 00000000..98a7b9c9
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "hotel-booking-server",
+  "version": "1.0.0",
+  "description": "Hotel booking backend server",
+  "main": "src/server.js",
+  "scripts": {
+    "start": "node src/server.js",
+    "dev": "nodemon src/server.js",
+    "migrate": "npx sequelize-cli db:migrate",
+    "migrate:undo": "npx sequelize-cli db:migrate:undo",
+    "seed": "npx sequelize-cli db:seed:all",
+    "seed:undo": "npx sequelize-cli db:seed:undo:all"
+  },
+  "keywords": [
+    "hotel",
+    "booking",
+    "management"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "bcryptjs": "^3.0.3",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.7",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.1.5",
+    "express-validator": "^7.0.1",
+    "helmet": "^7.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "morgan": "^1.10.0",
+    "multer": "^1.4.5-lts.1",
+    "mysql2": "^3.6.5",
+    "nodemailer": "^7.0.10",
+    "sequelize": "^6.35.1",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2",
+    "sequelize-cli": "^6.6.3"
+  }
+}
diff --git a/server/src/app.js b/server/src/app.js
new file mode 100644
index 00000000..3209c7b0
--- /dev/null
+++ b/server/src/app.js
@@ -0,0 +1,128 @@
+require('dotenv').config();
+const express = require('express');
+const cors = require('cors');
+const helmet = require('helmet');
+const compression = require('compression');
+const morgan = require('morgan');
+const rateLimit = require('express-rate-limit');
+const cookieParser = require('cookie-parser');
+const path = require('path');
+
+// Import routes
+const authRoutes = require('./routes/authRoutes');
+const userRoutes = require('./routes/userRoutes');
+const roomRoutes = require('./routes/roomRoutes');
+const bookingRoutes = require('./routes/bookingRoutes');
+const paymentRoutes = require('./routes/paymentRoutes');
+const bannerRoutes = require('./routes/bannerRoutes');
+const reviewRoutes = require('./routes/reviewRoutes');
+const favoriteRoutes = require('./routes/favoriteRoutes');
+const serviceRoutes = require('./routes/serviceRoutes');
+const promotionRoutes = require('./routes/promotionRoutes');
+const reportRoutes = require('./routes/reportRoutes');
+
+// Import middleware
+const errorHandler = require('./middlewares/errorHandler');
+
+// Initialize app
+const app = express();
+
+// Security middleware
+app.use(helmet({
+  crossOriginResourcePolicy: { policy: "cross-origin" } // Allow images to be loaded
+}));
+app.use(compression());
+
+// CORS configuration
+const corsOptions = {
+  origin: process.env.CLIENT_URL || 'http://localhost:5173',
+  credentials: true,
+  optionsSuccessStatus: 200
+};
+app.use(cors(corsOptions));
+
+// Serve static files (uploads)
+app.use('/uploads', express.static(path.join(__dirname, '../uploads')));
+
+// Body parser middleware
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true, limit: '10mb' }));
+
+// Cookie parser middleware
+app.use(cookieParser());
+
+// Logging middleware
+if (process.env.NODE_ENV === 'development') {
+  app.use(morgan('dev'));
+} else {
+  app.use(morgan('combined'));
+}
+
+// Rate limiting - completely disabled in development, strict in production
+const isDevelopment = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
+
+if (!isDevelopment) {
+  // Strict rate limit for production only
+  const limiter = rateLimit({
+    windowMs: 15 * 60 * 1000, // 15 minutes
+    max: 100, // limit each IP to 100 requests per windowMs
+    message: 'Too many requests from this IP',
+    standardHeaders: true,
+    legacyHeaders: false,
+  });
+  app.use('/api/', limiter);
+  console.log('🔒 Rate limiting enabled with production settings');
+} else {
+  // No rate limiting middleware applied in development
+  // This allows unlimited requests during development
+  console.log('⚠️  Rate limiting DISABLED for development mode - unlimited requests allowed');
+}
+
+// Disable client-side caching for API responses to avoid 304
+// responses for dynamic endpoints. This forces fresh data for
+// API calls and prevents stale cached responses in browsers.
+app.use('/api', (req, res, next) => {
+  res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+  res.set('Pragma', 'no-cache');
+  res.set('Expires', '0');
+  res.set('Surrogate-Control', 'no-store');
+  next();
+});
+
+// Static files
+app.use('/uploads', express.static('uploads'));
+
+// Health check
+app.get('/health', (req, res) => {
+  res.status(200).json({
+    status: 'success',
+    message: 'Server is running',
+    timestamp: new Date().toISOString()
+  });
+});
+
+// API Routes
+app.use('/api/auth', authRoutes);
+app.use('/api/users', userRoutes);
+app.use('/api/rooms', roomRoutes);
+app.use('/api/bookings', bookingRoutes);
+app.use('/api/payments', paymentRoutes);
+app.use('/api/banners', bannerRoutes);
+app.use('/api/favorites', favoriteRoutes);
+app.use('/api/services', serviceRoutes);
+app.use('/api/promotions', promotionRoutes);
+app.use('/api/reports', reportRoutes);
+app.use('/api/reviews', reviewRoutes);
+
+// 404 handler
+app.use('*', (req, res) => {
+  res.status(404).json({
+    status: 'error',
+    message: `Route ${req.originalUrl} not found`
+  });
+});
+
+// Global error handler
+app.use(errorHandler);
+
+module.exports = app;
diff --git a/server/src/config/database.js b/server/src/config/database.js
new file mode 100644
index 00000000..c1819aec
--- /dev/null
+++ b/server/src/config/database.js
@@ -0,0 +1,70 @@
+require('dotenv').config();
+
+module.exports = {
+  development: {
+    username: process.env.DB_USER || 'root',
+    password: process.env.DB_PASS || '',
+    database: process.env.DB_NAME || 'hotel_db',
+    host: process.env.DB_HOST || 'localhost',
+    port: process.env.DB_PORT || 3306,
+    dialect: 'mysql',
+    logging: console.log,
+    timezone: '+07:00',
+    pool: {
+      max: 5,
+      min: 0,
+      acquire: 30000,
+      idle: 10000
+    },
+    define: {
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  },
+  test: {
+    username: process.env.DB_USER || 'root',
+    password: process.env.DB_PASS || '',
+    database: process.env.DB_NAME_TEST || 'hotel_db_test',
+    host: process.env.DB_HOST || 'localhost',
+    port: process.env.DB_PORT || 3306,
+    dialect: 'mysql',
+    logging: false,
+    timezone: '+07:00',
+    pool: {
+      max: 5,
+      min: 0,
+      acquire: 30000,
+      idle: 10000
+    },
+    define: {
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  },
+  production: {
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT || 3306,
+    dialect: 'mysql',
+    logging: false,
+    timezone: '+07:00',
+    pool: {
+      max: 10,
+      min: 2,
+      acquire: 30000,
+      idle: 10000
+    },
+    define: {
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  }
+};
diff --git a/server/src/controllers/authController.js b/server/src/controllers/authController.js
new file mode 100644
index 00000000..4b42e378
--- /dev/null
+++ b/server/src/controllers/authController.js
@@ -0,0 +1,244 @@
+const authService = require('../services/authService');
+
+/**
+ * Register new user
+ */
+const register = async (req, res, next) => {
+  try {
+    const { name, email, password, phone } = req.body;
+
+    const result = await authService.register({
+      name,
+      email,
+      password,
+      phone
+    });
+
+    // Set refresh token as HttpOnly cookie (default 7 days for new users)
+    const cookieOptions = {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      maxAge: 7 * 24 * 60 * 60 * 1000,
+      path: '/'
+    };
+
+    res.cookie('refreshToken', result.refreshToken, cookieOptions);
+
+    // Don't send refreshToken in response body
+    const { refreshToken, ...dataWithoutRefreshToken } = result;
+
+    res.status(201).json({
+      status: 'success',
+      message: 'User registered successfully',
+      data: dataWithoutRefreshToken
+    });
+  } catch (error) {
+    if (error.message === 'Email already registered') {
+      return res.status(400).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    next(error);
+  }
+};
+
+/**
+ * Login user
+ */
+const login = async (req, res, next) => {
+  try {
+    const { email, password, rememberMe } = req.body;
+
+    const result = await authService.login({
+      email,
+      password,
+      rememberMe
+    });
+
+    // Set refresh token as HttpOnly cookie
+    const cookieOptions = {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      maxAge: rememberMe 
+        ? 7 * 24 * 60 * 60 * 1000 
+        : 1 * 24 * 60 * 60 * 1000,
+      path: '/'
+    };
+
+    res.cookie('refreshToken', result.refreshToken, cookieOptions);
+
+    // Don't send refreshToken in response body
+    const { refreshToken, ...dataWithoutRefreshToken } = result;
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Login successful',
+      data: dataWithoutRefreshToken
+    });
+  } catch (error) {
+    if (error.message === 'Invalid email or password') {
+      return res.status(401).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    next(error);
+  }
+};
+
+/**
+ * Refresh access token
+ */
+const refreshAccessToken = async (req, res, next) => {
+  try {
+    // Get refresh token from cookie instead of body
+    const refreshToken = req.cookies.refreshToken;
+
+    if (!refreshToken) {
+      return res.status(401).json({
+        status: 'error',
+        message: 'Refresh token not found'
+      });
+    }
+
+    const result = await authService.refreshAccessToken(refreshToken);
+
+    res.status(200).json({
+      status: 'success',
+      data: result
+    });
+  } catch (error) {
+    if (error.name === 'TokenExpiredError' || 
+        error.message.includes('token')) {
+      // Clear invalid cookie
+      res.clearCookie('refreshToken');
+      return res.status(401).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    next(error);
+  }
+};
+
+/**
+ * Logout user
+ */
+const logout = async (req, res, next) => {
+  try {
+    // Get refresh token from cookie
+    const refreshToken = req.cookies.refreshToken;
+
+    if (refreshToken) {
+      await authService.logout(refreshToken);
+    }
+
+    // Clear refresh token cookie
+    res.clearCookie('refreshToken', { path: '/' });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Logout successful'
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get current user profile
+ */
+const getProfile = async (req, res, next) => {
+  try {
+    const user = await authService.getProfile(req.user.id);
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        user
+      }
+    });
+  } catch (error) {
+    if (error.message === 'User not found') {
+      return res.status(404).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    next(error);
+  }
+};
+
+/**
+ * Forgot Password - Send reset link
+ */
+const forgotPassword = async (req, res, next) => {
+  try {
+    const { email } = req.body;
+
+    const result = await authService.forgotPassword(email);
+
+    res.status(200).json({
+      status: 'success',
+      message: result.message
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Reset Password - Update password with token
+ */
+const resetPassword = async (req, res, next) => {
+  try {
+    const { token, password } = req.body;
+
+    const result = await authService.resetPassword({
+      token,
+      password
+    });
+
+    res.status(200).json({
+      status: 'success',
+      message: result.message
+    });
+  } catch (error) {
+    if (error.message.includes('token') || 
+        error.message.includes('required')) {
+      return res.status(400).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    if (error.message === 'User not found') {
+      return res.status(404).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    if (
+      error.message.includes('must be different') ||
+      error.message.includes('Mật khẩu mới')
+    ) {
+      return res.status(400).json({
+        status: 'error',
+        message: error.message
+      });
+    }
+    next(error);
+  }
+};
+
+module.exports = {
+  register,
+  login,
+  refreshAccessToken,
+  logout,
+  getProfile,
+  forgotPassword,
+  resetPassword
+};
diff --git a/server/src/controllers/bannerController.js b/server/src/controllers/bannerController.js
new file mode 100644
index 00000000..f3b8ee2d
--- /dev/null
+++ b/server/src/controllers/bannerController.js
@@ -0,0 +1,222 @@
+const { Banner } = require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Get all banners with filters
+ */
+const getBanners = async (req, res, next) => {
+  try {
+    const { position } = req.query;
+
+    const whereClause = {
+      is_active: true,
+    };
+
+    // Filter by position if provided
+    if (position) {
+      whereClause.position = position;
+    }
+
+    // Get current date for filtering active banners
+    const now = new Date();
+    whereClause[Op.or] = [
+      { start_date: null },
+      { start_date: { [Op.lte]: now } },
+    ];
+    whereClause[Op.and] = [
+      {
+        [Op.or]: [
+          { end_date: null },
+          { end_date: { [Op.gte]: now } },
+        ],
+      },
+    ];
+
+    const banners = await Banner.findAll({
+      where: whereClause,
+      order: [
+        ['display_order', 'ASC'],
+        ['created_at', 'DESC'],
+      ],
+    });
+
+    // Ensure image_url is absolute so frontend can load directly
+    const baseUrl = process.env.SERVER_URL || `http://${req.get('host')}`;
+    const mapped = banners.map((b) => {
+      const obj = b.toJSON ? b.toJSON() : b;
+      if (obj.image_url && !/^https?:\/\//i.test(obj.image_url)) {
+        obj.image_url = obj.image_url.startsWith('/')
+          ? `${baseUrl}${obj.image_url}`
+          : `${baseUrl}/${obj.image_url}`;
+      }
+      return obj;
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        banners: mapped,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get banner by ID
+ */
+const getBannerById = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const banner = await Banner.findByPk(id);
+
+    if (!banner) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Banner not found',
+      });
+    }
+
+    // Prefix image_url to full URL for client convenience
+    const baseUrl = process.env.SERVER_URL || `http://${req.get('host')}`;
+    const out = banner.toJSON ? banner.toJSON() : banner;
+    if (out.image_url && !/^https?:\/\//i.test(out.image_url)) {
+      out.image_url = out.image_url.startsWith('/')
+        ? `${baseUrl}${out.image_url}`
+        : `${baseUrl}/${out.image_url}`;
+    }
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        banner: out,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create new banner (Admin only)
+ */
+const createBanner = async (req, res, next) => {
+  try {
+    const {
+      title,
+      image_url,
+      link,
+      position,
+      display_order,
+      start_date,
+      end_date,
+    } = req.body;
+
+    const banner = await Banner.create({
+      title,
+      image_url,
+      link,
+      position: position || 'home',
+      display_order: display_order || 0,
+      is_active: true,
+      start_date,
+      end_date,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Banner created successfully',
+      data: {
+        banner,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Update banner (Admin only)
+ */
+const updateBanner = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const {
+      title,
+      image_url,
+      link,
+      position,
+      display_order,
+      is_active,
+      start_date,
+      end_date,
+    } = req.body;
+
+    const banner = await Banner.findByPk(id);
+
+    if (!banner) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Banner not found',
+      });
+    }
+
+    await banner.update({
+      title,
+      image_url,
+      link,
+      position,
+      display_order,
+      is_active,
+      start_date,
+      end_date,
+    });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Banner updated successfully',
+      data: {
+        banner,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Delete banner (Admin only)
+ */
+const deleteBanner = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const banner = await Banner.findByPk(id);
+
+    if (!banner) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Banner not found',
+      });
+    }
+
+    await banner.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Banner deleted successfully',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  getBanners,
+  getBannerById,
+  createBanner,
+  updateBanner,
+  deleteBanner,
+};
diff --git a/server/src/controllers/bookingController.js b/server/src/controllers/bookingController.js
new file mode 100644
index 00000000..4694e191
--- /dev/null
+++ b/server/src/controllers/bookingController.js
@@ -0,0 +1,363 @@
+const { Booking, Room, RoomType, Payment, User, sequelize, Sequelize } = require('../databases/models');
+const { Op } = require('sequelize');
+
+// Helper to generate a simple booking number
+const generateBookingNumber = () => {
+	const prefix = 'BK';
+	const ts = Date.now();
+	const rand = Math.floor(Math.random() * 9000) + 1000;
+	return `${prefix}-${ts}-${rand}`;
+};
+
+/**
+ * Create a new booking
+ * POST /api/bookings
+ */
+const createBooking = async (req, res, next) => {
+	const t = await sequelize.transaction();
+	try {
+		const user = req.user;
+		const {
+			room_id,
+			check_in_date,
+			check_out_date,
+			guest_count,
+			total_price,
+			notes,
+			payment_method = 'cash',
+		} = req.body;
+
+		if (!room_id || !check_in_date || !check_out_date || !total_price) {
+			return res.status(400).json({
+				status: 'error',
+				message: 'Missing required booking fields',
+			});
+		}
+
+		// Ensure room exists
+		const room = await Room.findByPk(room_id, {
+			include: [{ model: RoomType, as: 'room_type' }],
+		});
+
+		if (!room) {
+			await t.rollback();
+			return res.status(404).json({ status: 'error', message: 'Room not found' });
+		}
+
+		// Check for overlapping bookings (exclude cancelled)
+		const overlapping = await Booking.findOne({
+			where: {
+				room_id,
+				status: { [Op.ne]: 'cancelled' },
+				[Op.and]: [
+					{ check_in_date: { [Op.lt]: new Date(check_out_date) } },
+					{ check_out_date: { [Op.gt]: new Date(check_in_date) } },
+				],
+			},
+		});
+
+		if (overlapping) {
+			await t.rollback();
+			return res.status(409).json({
+				status: 'error',
+				message: 'Room already booked for the selected dates',
+			});
+		}
+
+		const bookingNumber = generateBookingNumber();
+
+		// Determine if deposit is required (cash payment requires 20% deposit)
+		const requiresDeposit = payment_method === 'cash';
+		const depositPercentage = requiresDeposit ? 20 : 0;
+		const depositAmount = requiresDeposit ? (total_price * depositPercentage) / 100 : 0;
+
+		const booking = await Booking.create(
+			{
+				booking_number: bookingNumber,
+				user_id: user.id,
+				room_id,
+				check_in_date: new Date(check_in_date),
+				check_out_date: new Date(check_out_date),
+				num_guests: guest_count || 1,
+				total_price,
+				special_requests: notes || null,
+				status: 'pending',
+				requires_deposit: requiresDeposit,
+				deposit_paid: false,
+			},
+			{ transaction: t }
+		);
+
+		// Create deposit payment record if required
+		if (requiresDeposit) {
+			await Payment.create(
+				{
+					booking_id: booking.id,
+					amount: depositAmount,
+					payment_method: 'bank_transfer', // Deposit must be paid online
+					payment_type: 'deposit',
+					deposit_percentage: depositPercentage,
+					payment_status: 'pending',
+					notes: `Deposit payment (${depositPercentage}%) for booking ${bookingNumber}`,
+				},
+				{ transaction: t }
+			);
+		}
+
+		await t.commit();
+
+		// Fetch booking with payment info
+		const bookingWithPayments = await Booking.findByPk(booking.id, {
+			include: [
+				{ model: Room, as: 'room', include: [{ model: RoomType, as: 'room_type' }] },
+				{ model: Payment, as: 'payments' },
+			],
+		});
+
+		return res.status(201).json({
+			success: true,
+			data: {
+				booking: bookingWithPayments,
+			},
+			message: requiresDeposit
+				? `Booking created. Please pay ${depositPercentage}% deposit to confirm.`
+				: 'Booking created successfully',
+		});
+	} catch (error) {
+		await t.rollback();
+		next(error);
+	}
+};
+
+/**
+ * Get bookings for current user
+ * GET /api/bookings/me
+ */
+const getMyBookings = async (req, res, next) => {
+	try {
+		const user = req.user;
+		const bookings = await Booking.findAll({
+			where: { user_id: user.id },
+			include: [
+				{
+					model: Room,
+					as: 'room',
+					include: [{ model: RoomType, as: 'room_type' }],
+				},
+			],
+			order: [['created_at', 'DESC']],
+		});
+
+		res.status(200).json({ success: true, data: { bookings } });
+	} catch (error) {
+		next(error);
+	}
+};
+
+/**
+ * Get booking by id
+ * GET /api/bookings/:id
+ */
+const getBookingById = async (req, res, next) => {
+	try {
+		const { id } = req.params;
+		const booking = await Booking.findByPk(id, {
+			include: [
+				{ model: Room, as: 'room', include: [{ model: RoomType, as: 'room_type' }] },
+				{ model: Payment, as: 'payments' },
+			],
+		});
+
+			if (!booking) {
+				return res.status(404).json({ success: false, message: 'Booking not found' });
+			}
+
+		// If user is not owner, restrict access (admins may be allowed later)
+		if (req.user && booking.user_id !== req.user.id) {
+			return res.status(403).json({ status: 'error', message: 'Forbidden' });
+		}
+
+		res.status(200).json({ success: true, data: { booking } });
+	} catch (error) {
+		next(error);
+	}
+};
+
+/**
+ * Cancel a booking
+ * PATCH /api/bookings/:id/cancel
+ */
+const cancelBooking = async (req, res, next) => {
+	try {
+		const { id } = req.params;
+		const booking = await Booking.findByPk(id);
+
+		if (!booking) {
+			return res.status(404).json({ success: false, message: 'Booking not found' });
+		}
+
+		if (booking.user_id !== req.user.id) {
+			return res.status(403).json({ status: 'error', message: 'Forbidden' });
+		}
+
+		if (booking.status === 'cancelled') {
+			return res.status(400).json({ status: 'error', message: 'Booking already cancelled' });
+		}
+
+		booking.status = 'cancelled';
+		await booking.save();
+
+		res.status(200).json({ success: true, data: { booking } });
+	} catch (error) {
+		next(error);
+	}
+};
+
+/**
+ * Check booking by booking number
+ * GET /api/bookings/check/:bookingNumber
+ */
+const checkBookingByNumber = async (req, res, next) => {
+	try {
+		const { bookingNumber } = req.params;
+		const booking = await Booking.findOne({
+			where: { booking_number: bookingNumber },
+			include: [{ model: Room, as: 'room' }],
+		});
+
+		if (!booking) {
+			return res.status(404).json({ status: 'error', message: 'Booking not found' });
+		}
+
+		res.status(200).json({ status: 'success', data: { booking } });
+	} catch (error) {
+		next(error);
+	}
+};
+
+/**
+ * Get all bookings (Admin only)
+ * GET /api/bookings
+ */
+const getAllBookings = async (req, res, next) => {
+	try {
+		const {
+			search,
+			status,
+			startDate,
+			endDate,
+			page = 1,
+			limit = 10,
+		} = req.query;
+
+		const whereClause = {};
+
+		// Filter by search (booking_number or user name/email)
+		if (search) {
+			whereClause[Op.or] = [
+				{ booking_number: { [Op.like]: `%${search}%` } },
+			];
+		}
+
+		// Filter by status
+		if (status) {
+			whereClause.status = status;
+		}
+
+		// Filter by date range
+		if (startDate || endDate) {
+			whereClause.check_in_date = {};
+			if (startDate) {
+				whereClause.check_in_date[Op.gte] = new Date(startDate);
+			}
+			if (endDate) {
+				whereClause.check_in_date[Op.lte] = new Date(endDate);
+			}
+		}
+
+		const offset = (parseInt(page) - 1) * parseInt(limit);
+
+		const { count, rows: bookings } = await Booking.findAndCountAll({
+			where: whereClause,
+			include: [
+				{
+					model: User,
+					as: 'user',
+					attributes: ['id', 'full_name', 'email', 'phone'],
+				},
+				{
+					model: Room,
+					as: 'room',
+					attributes: ['id', 'room_number', 'floor'],
+				},
+			],
+			limit: parseInt(limit),
+			offset: offset,
+			order: [['created_at', 'DESC']],
+		});
+
+		res.status(200).json({
+			status: 'success',
+			data: {
+				bookings,
+				pagination: {
+					total: count,
+					page: parseInt(page),
+					limit: parseInt(limit),
+					totalPages: Math.ceil(count / parseInt(limit)),
+				},
+			},
+		});
+	} catch (error) {
+		next(error);
+	}
+};
+
+/**
+ * Update booking status (Admin only)
+ * PUT /api/bookings/:id
+ */
+const updateBooking = async (req, res, next) => {
+	try {
+		const { id } = req.params;
+		const { status } = req.body;
+
+		const booking = await Booking.findByPk(id);
+		if (!booking) {
+			return res.status(404).json({
+				status: 'error',
+				message: 'Booking not found',
+			});
+		}
+
+		// Validate status transition
+		const validStatuses = ['pending', 'confirmed', 'checked_in', 'checked_out', 'cancelled', 'completed'];
+		if (!validStatuses.includes(status)) {
+			return res.status(400).json({
+				status: 'error',
+				message: 'Invalid status',
+			});
+		}
+
+		// Update booking
+		await booking.update({ status });
+
+		res.status(200).json({
+			status: 'success',
+			message: 'Booking updated successfully',
+			data: { booking },
+		});
+	} catch (error) {
+		next(error);
+	}
+};
+
+module.exports = {
+	createBooking,
+	getMyBookings,
+	getBookingById,
+	cancelBooking,
+	checkBookingByNumber,
+	getAllBookings,
+	updateBooking,
+};
diff --git a/server/src/controllers/favoriteController.js b/server/src/controllers/favoriteController.js
new file mode 100644
index 00000000..c123b377
--- /dev/null
+++ b/server/src/controllers/favoriteController.js
@@ -0,0 +1,205 @@
+const { 
+  Favorite, 
+  Room, 
+  RoomType, 
+  Review,
+  Sequelize 
+} = require('../databases/models');
+
+/**
+ * Add room to favorites
+ */
+const addFavorite = async (req, res, next) => {
+  try {
+    const userId = req.user.id;
+    const { roomId } = req.params;
+
+    // Check if room exists
+    const room = await Room.findByPk(roomId);
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Không tìm thấy phòng',
+      });
+    }
+
+    // Check if already favorited
+    const existingFavorite = await Favorite.findOne({
+      where: {
+        user_id: userId,
+        room_id: roomId,
+      },
+    });
+
+    if (existingFavorite) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Phòng đã có trong danh sách yêu thích',
+      });
+    }
+
+    // Create favorite
+    const favorite = await Favorite.create({
+      user_id: userId,
+      room_id: roomId,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Đã thêm vào danh sách yêu thích',
+      data: {
+        favorite,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Remove room from favorites
+ */
+const removeFavorite = async (req, res, next) => {
+  try {
+    const userId = req.user.id;
+    const { roomId } = req.params;
+
+    // Find and delete favorite
+    const favorite = await Favorite.findOne({
+      where: {
+        user_id: userId,
+        room_id: roomId,
+      },
+    });
+
+    if (!favorite) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Không tìm thấy phòng trong danh sách yêu thích',
+      });
+    }
+
+    await favorite.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Đã xóa khỏi danh sách yêu thích',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get user's favorite rooms
+ */
+const getFavorites = async (req, res, next) => {
+  try {
+    const userId = req.user.id;
+
+    // Get all favorites with room details
+    const favorites = await Favorite.findAll({
+      where: { user_id: userId },
+      include: [
+        {
+          model: Room,
+          as: 'room',
+          include: [
+            {
+              model: RoomType,
+              as: 'room_type',
+            },
+          ],
+        },
+      ],
+      order: [['created_at', 'DESC']],
+    });
+
+    // Get ratings for each room
+    const roomsWithRatings = await Promise.all(
+      favorites.map(async (favorite) => {
+        const room = favorite.room;
+        
+        if (!room) {
+          return favorite.toJSON();
+        }
+
+        const reviewStats = await Review.findOne({
+          where: {
+            room_id: room.id,
+            status: 'approved',
+          },
+          attributes: [
+            [
+              Sequelize.fn('AVG', Sequelize.col('rating')),
+              'average_rating',
+            ],
+            [
+              Sequelize.fn('COUNT', Sequelize.col('id')),
+              'total_reviews',
+            ],
+          ],
+          raw: true,
+        });
+
+        return {
+          ...favorite.toJSON(),
+          room: {
+            ...room.toJSON(),
+            average_rating: reviewStats?.average_rating
+              ? Math.round(
+                  parseFloat(reviewStats.average_rating) * 10
+                ) / 10
+              : null,
+            total_reviews: reviewStats?.total_reviews
+              ? parseInt(reviewStats.total_reviews, 10)
+              : 0,
+          },
+        };
+      })
+    );
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        favorites: roomsWithRatings,
+        total: roomsWithRatings.length,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Check if room is favorited by user
+ */
+const checkFavorite = async (req, res, next) => {
+  try {
+    const userId = req.user.id;
+    const { roomId } = req.params;
+
+    const favorite = await Favorite.findOne({
+      where: {
+        user_id: userId,
+        room_id: roomId,
+      },
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        isFavorited: !!favorite,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  addFavorite,
+  removeFavorite,
+  getFavorites,
+  checkFavorite,
+};
diff --git a/server/src/controllers/paymentController.js b/server/src/controllers/paymentController.js
new file mode 100644
index 00000000..6079d9d9
Binary files /dev/null and b/server/src/controllers/paymentController.js differ
diff --git a/server/src/controllers/promotionController.js b/server/src/controllers/promotionController.js
new file mode 100644
index 00000000..6f07d086
--- /dev/null
+++ b/server/src/controllers/promotionController.js
@@ -0,0 +1,353 @@
+const { Promotion } = require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Get all promotions with filters and pagination
+ * GET /api/promotions
+ */
+const getPromotions = async (req, res, next) => {
+  try {
+    const {
+      search,
+      status,
+      type,
+      page = 1,
+      limit = 10,
+    } = req.query;
+
+    const whereClause = {};
+
+    // Filter by search (code or name)
+    if (search) {
+      whereClause[Op.or] = [
+        { code: { [Op.like]: `%${search}%` } },
+        { name: { [Op.like]: `%${search}%` } },
+      ];
+    }
+
+    // Filter by status
+    if (status) {
+      whereClause.status = status;
+    }
+
+    // Filter by type
+    if (type) {
+      whereClause.discount_type = type;
+    }
+
+    const offset = (parseInt(page) - 1) * parseInt(limit);
+
+    const { count, rows: promotions } = await Promotion.findAndCountAll({
+      where: whereClause,
+      limit: parseInt(limit),
+      offset: offset,
+      order: [['created_at', 'DESC']],
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        promotions,
+        pagination: {
+          total: count,
+          page: parseInt(page),
+          limit: parseInt(limit),
+          totalPages: Math.ceil(count / parseInt(limit)),
+        },
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get promotion by ID
+ * GET /api/promotions/:id
+ */
+const getPromotionById = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const promotion = await Promotion.findByPk(id);
+
+    if (!promotion) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Promotion not found',
+      });
+    }
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        promotion,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create new promotion
+ * POST /api/promotions
+ */
+const createPromotion = async (req, res, next) => {
+  try {
+    const {
+      code,
+      name,
+      description,
+      discount_type,
+      discount_value,
+      min_booking_amount,
+      max_discount_amount,
+      start_date,
+      end_date,
+      usage_limit,
+      status = 'active',
+    } = req.body;
+
+    // Check if promotion code already exists
+    const existingPromotion = await Promotion.findOne({ where: { code } });
+    if (existingPromotion) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Promotion code already exists',
+      });
+    }
+
+    // Validate discount value
+    if (discount_type === 'percentage' && discount_value > 100) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Percentage discount cannot exceed 100%',
+      });
+    }
+
+    const promotion = await Promotion.create({
+      code,
+      name,
+      description,
+      discount_type,
+      discount_value,
+      min_booking_amount,
+      max_discount_amount,
+      start_date,
+      end_date,
+      usage_limit,
+      used_count: 0,
+      status,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Promotion created successfully',
+      data: {
+        promotion,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Update promotion
+ * PUT /api/promotions/:id
+ */
+const updatePromotion = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const {
+      code,
+      name,
+      description,
+      discount_type,
+      discount_value,
+      min_booking_amount,
+      max_discount_amount,
+      start_date,
+      end_date,
+      usage_limit,
+      status,
+    } = req.body;
+
+    const promotion = await Promotion.findByPk(id);
+    if (!promotion) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Promotion not found',
+      });
+    }
+
+    // Check if new code already exists (excluding current promotion)
+    if (code && code !== promotion.code) {
+      const existingPromotion = await Promotion.findOne({
+        where: {
+          code,
+          id: { [Op.ne]: id },
+        },
+      });
+      if (existingPromotion) {
+        return res.status(400).json({
+          status: 'error',
+          message: 'Promotion code already exists',
+        });
+      }
+    }
+
+    // Validate discount value
+    if (discount_type === 'percentage' && discount_value > 100) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Percentage discount cannot exceed 100%',
+      });
+    }
+
+    const updateData = {};
+    if (code !== undefined) updateData.code = code;
+    if (name !== undefined) updateData.name = name;
+    if (description !== undefined) updateData.description = description;
+    if (discount_type !== undefined) updateData.discount_type = discount_type;
+    if (discount_value !== undefined) updateData.discount_value = discount_value;
+    if (min_booking_amount !== undefined) updateData.min_booking_amount = min_booking_amount;
+    if (max_discount_amount !== undefined) updateData.max_discount_amount = max_discount_amount;
+    if (start_date !== undefined) updateData.start_date = start_date;
+    if (end_date !== undefined) updateData.end_date = end_date;
+    if (usage_limit !== undefined) updateData.usage_limit = usage_limit;
+    if (status !== undefined) updateData.status = status;
+
+    await promotion.update(updateData);
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Promotion updated successfully',
+      data: {
+        promotion,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Delete promotion
+ * DELETE /api/promotions/:id
+ */
+const deletePromotion = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const promotion = await Promotion.findByPk(id);
+    if (!promotion) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Promotion not found',
+      });
+    }
+
+    await promotion.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Promotion deleted successfully',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Validate and apply promotion
+ * POST /api/promotions/validate
+ */
+const validatePromotion = async (req, res, next) => {
+  try {
+    const { code, booking_amount } = req.body;
+
+    const promotion = await Promotion.findOne({ where: { code } });
+
+    if (!promotion) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Promotion code not found',
+      });
+    }
+
+    // Check if promotion is active
+    if (promotion.status !== 'active') {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Promotion is not active',
+      });
+    }
+
+    // Check date validity
+    const now = new Date();
+    if (now < new Date(promotion.start_date) || now > new Date(promotion.end_date)) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Promotion is not valid at this time',
+      });
+    }
+
+    // Check usage limit
+    if (promotion.usage_limit && promotion.used_count >= promotion.usage_limit) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Promotion usage limit reached',
+      });
+    }
+
+    // Check minimum booking amount
+    if (booking_amount < promotion.min_booking_amount) {
+      return res.status(400).json({
+        status: 'error',
+        message: `Minimum booking amount is ${promotion.min_booking_amount}`,
+      });
+    }
+
+    // Calculate discount
+    let discount_amount = 0;
+    if (promotion.discount_type === 'percentage') {
+      discount_amount = (booking_amount * promotion.discount_value) / 100;
+    } else {
+      discount_amount = promotion.discount_value;
+    }
+
+    // Apply max discount limit
+    if (promotion.max_discount_amount && discount_amount > promotion.max_discount_amount) {
+      discount_amount = promotion.max_discount_amount;
+    }
+
+    const final_amount = booking_amount - discount_amount;
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        promotion: {
+          id: promotion.id,
+          code: promotion.code,
+          name: promotion.name,
+        },
+        original_amount: booking_amount,
+        discount_amount,
+        final_amount,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  getPromotions,
+  getPromotionById,
+  createPromotion,
+  updatePromotion,
+  deletePromotion,
+  validatePromotion,
+};
diff --git a/server/src/controllers/reportController.js b/server/src/controllers/reportController.js
new file mode 100644
index 00000000..fa5911f7
--- /dev/null
+++ b/server/src/controllers/reportController.js
@@ -0,0 +1,425 @@
+const {
+  Booking,
+  Payment,
+  Room,
+  User,
+  Service,
+  BookingService,
+  sequelize,
+  Sequelize,
+} = require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Get dashboard statistics
+ * GET /api/reports/dashboard
+ */
+const getDashboardStats = async (req, res, next) => {
+  try {
+    const { startDate, endDate } = req.query;
+
+    const dateFilter = {};
+    if (startDate || endDate) {
+      dateFilter.created_at = {};
+      if (startDate) {
+        dateFilter.created_at[Op.gte] = new Date(startDate);
+      }
+      if (endDate) {
+        dateFilter.created_at[Op.lte] = new Date(endDate);
+      }
+    }
+
+    // Total revenue
+    const totalRevenue = await Payment.sum('amount', {
+      where: {
+        payment_status: 'completed',
+        ...dateFilter,
+      },
+    });
+
+    // Total bookings
+    const totalBookings = await Booking.count({
+      where: dateFilter,
+    });
+
+    // Available rooms
+    const availableRooms = await Room.count({
+      where: { status: 'available' },
+    });
+
+    // Total customers
+    const totalCustomers = await User.count({
+      where: { role_id: 3 }, // 3 = customer
+    });
+
+    // Revenue by date (last 7 days or date range)
+    const revenueByDate = await Payment.findAll({
+      attributes: [
+        [sequelize.fn('DATE', sequelize.col('payment_date')), 'date'],
+        [sequelize.fn('SUM', sequelize.col('amount')), 'revenue'],
+      ],
+      where: {
+        payment_status: 'completed',
+        ...dateFilter,
+      },
+      group: [sequelize.fn('DATE', sequelize.col('payment_date'))],
+      order: [[sequelize.fn('DATE', sequelize.col('payment_date')), 'ASC']],
+      raw: true,
+    });
+
+    // Bookings by status
+    const bookingsByStatus = await Booking.findAll({
+      attributes: [
+        'status',
+        [sequelize.fn('COUNT', sequelize.col('id')), 'count'],
+      ],
+      where: dateFilter,
+      group: ['status'],
+      raw: true,
+    });
+
+    // Top rooms (by booking count)
+    const topRooms = await Booking.findAll({
+      attributes: [
+        'room_id',
+        [sequelize.fn('COUNT', sequelize.col('Booking.id')), 'booking_count'],
+        [sequelize.fn('SUM', sequelize.col('total_price')), 'total_revenue'],
+      ],
+      include: [
+        {
+          model: Room,
+          as: 'room',
+          attributes: ['id', 'room_number', 'floor'],
+        },
+      ],
+      where: dateFilter,
+      group: ['room_id', 'room.id'],
+      order: [[sequelize.fn('COUNT', sequelize.col('Booking.id')), 'DESC']],
+      limit: 5,
+      raw: true,
+      nest: true,
+    });
+
+    // Service usage statistics
+    const serviceUsage = await BookingService.findAll({
+      attributes: [
+        'service_id',
+        [sequelize.fn('SUM', sequelize.col('quantity')), 'total_quantity'],
+        [sequelize.fn('SUM', sequelize.col('total_price')), 'total_revenue'],
+      ],
+      include: [
+        {
+          model: Service,
+          as: 'service',
+          attributes: ['id', 'name', 'price', 'unit'],
+        },
+      ],
+      group: ['service_id', 'service.id'],
+      order: [[sequelize.fn('SUM', sequelize.col('quantity')), 'DESC']],
+      limit: 5,
+      raw: true,
+      nest: true,
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        summary: {
+          total_revenue: totalRevenue || 0,
+          total_bookings: totalBookings,
+          available_rooms: availableRooms,
+          total_customers: totalCustomers,
+        },
+        revenue_by_date: revenueByDate,
+        bookings_by_status: bookingsByStatus,
+        top_rooms: topRooms,
+        service_usage: serviceUsage,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get detailed reports
+ * GET /api/reports
+ */
+const getReports = async (req, res, next) => {
+  try {
+    const {
+      type = 'revenue',
+      startDate,
+      endDate,
+      from, // Accept 'from' param
+      to,   // Accept 'to' param
+      groupBy = 'day',
+    } = req.query;
+
+    const dateFilter = {};
+    const start = startDate || from;
+    const end = endDate || to;
+    
+    if (start || end) {
+      dateFilter.created_at = {};
+      if (start) {
+        dateFilter.created_at[Op.gte] = new Date(start);
+      }
+      if (end) {
+        dateFilter.created_at[Op.lte] = new Date(end);
+      }
+    }
+
+    let reportData;
+
+    switch (type) {
+      case 'revenue':
+        reportData = await generateRevenueReport(dateFilter, groupBy);
+        break;
+      case 'bookings':
+        reportData = await generateBookingsReport(dateFilter, groupBy);
+        break;
+      case 'rooms':
+        reportData = await generateRoomsReport(dateFilter);
+        break;
+      case 'customers':
+        reportData = await generateCustomersReport(dateFilter);
+        break;
+      default:
+        return res.status(400).json({
+          status: 'error',
+          message: 'Invalid report type',
+        });
+    }
+
+    res.status(200).json({
+      status: 'success',
+      data: reportData,
+    });
+  } catch (error) {
+    console.error('Error in getReports:', error);
+    next(error);
+  }
+};
+
+/**
+ * Export report to CSV
+ * GET /api/reports/export
+ */
+const exportReport = async (req, res, next) => {
+  try {
+    const { type = 'revenue', startDate, endDate } = req.query;
+
+    const dateFilter = {};
+    if (startDate || endDate) {
+      dateFilter.payment_date = {};
+      if (startDate) {
+        dateFilter.payment_date[Op.gte] = new Date(startDate);
+      }
+      if (endDate) {
+        dateFilter.payment_date[Op.lte] = new Date(endDate);
+      }
+    }
+
+    let csvContent = '';
+    let filename = '';
+
+    switch (type) {
+      case 'revenue':
+        const payments = await Payment.findAll({
+          where: {
+            payment_status: 'completed',
+            ...dateFilter,
+          },
+          include: [
+            {
+              model: Booking,
+              as: 'booking',
+              attributes: ['booking_number'],
+              include: [
+                {
+                  model: User,
+                  as: 'user',
+                  attributes: ['full_name', 'email'],
+                },
+              ],
+            },
+          ],
+          order: [['payment_date', 'DESC']],
+        });
+
+        csvContent = 'Date,Booking Number,Customer,Payment Method,Amount\n';
+        payments.forEach((payment) => {
+          csvContent += `${payment.payment_date},${payment.booking.booking_number},${payment.booking.user.full_name},${payment.payment_method},${payment.amount}\n`;
+        });
+        filename = `revenue_report_${Date.now()}.csv`;
+        break;
+
+      case 'bookings':
+        const bookings = await Booking.findAll({
+          where: dateFilter,
+          include: [
+            {
+              model: User,
+              as: 'user',
+              attributes: ['full_name', 'email'],
+            },
+            {
+              model: Room,
+              as: 'room',
+              attributes: ['room_number'],
+            },
+          ],
+          order: [['created_at', 'DESC']],
+        });
+
+        csvContent = 'Booking Number,Customer,Room,Check In,Check Out,Status,Total Price\n';
+        bookings.forEach((booking) => {
+          csvContent += `${booking.booking_number},${booking.user.full_name},${booking.room.room_number},${booking.check_in_date},${booking.check_out_date},${booking.status},${booking.total_price}\n`;
+        });
+        filename = `bookings_report_${Date.now()}.csv`;
+        break;
+
+      default:
+        return res.status(400).json({
+          status: 'error',
+          message: 'Invalid export type',
+        });
+    }
+
+    res.setHeader('Content-Type', 'text/csv');
+    res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+    res.status(200).send(csvContent);
+  } catch (error) {
+    next(error);
+  }
+};
+
+// Helper functions
+const generateRevenueReport = async (dateFilter, groupBy) => {
+  let dateFormat;
+  switch (groupBy) {
+    case 'month':
+      dateFormat = '%Y-%m';
+      break;
+    case 'week':
+      dateFormat = '%Y-%u';
+      break;
+    default:
+      dateFormat = '%Y-%m-%d';
+  }
+
+  const revenue = await Payment.findAll({
+    attributes: [
+      [sequelize.fn('DATE_FORMAT', sequelize.col('payment_date'), dateFormat), 'period'],
+      [sequelize.fn('SUM', sequelize.col('amount')), 'total_revenue'],
+      [sequelize.fn('COUNT', sequelize.col('id')), 'payment_count'],
+    ],
+    where: {
+      payment_status: 'completed',
+      ...dateFilter,
+    },
+    group: [sequelize.fn('DATE_FORMAT', sequelize.col('payment_date'), dateFormat)],
+    order: [[sequelize.fn('DATE_FORMAT', sequelize.col('payment_date'), dateFormat), 'ASC']],
+    raw: true,
+  });
+
+  return { revenue };
+};
+
+const generateBookingsReport = async (dateFilter, groupBy) => {
+  let dateFormat;
+  switch (groupBy) {
+    case 'month':
+      dateFormat = '%Y-%m';
+      break;
+    case 'week':
+      dateFormat = '%Y-%u';
+      break;
+    default:
+      dateFormat = '%Y-%m-%d';
+  }
+
+  const bookings = await Booking.findAll({
+    attributes: [
+      [sequelize.fn('DATE_FORMAT', sequelize.col('created_at'), dateFormat), 'period'],
+      'status',
+      [sequelize.fn('COUNT', sequelize.col('id')), 'count'],
+    ],
+    where: dateFilter,
+    group: [
+      sequelize.fn('DATE_FORMAT', sequelize.col('created_at'), dateFormat),
+      'status',
+    ],
+    order: [[sequelize.fn('DATE_FORMAT', sequelize.col('created_at'), dateFormat), 'ASC']],
+    raw: true,
+  });
+
+  return { bookings };
+};
+
+const generateRoomsReport = async (dateFilter) => {
+  const roomStats = await Room.findAll({
+    attributes: [
+      'id',
+      'room_number',
+      'status',
+      [
+        sequelize.literal(`(
+          SELECT COUNT(*)
+          FROM bookings
+          WHERE bookings.room_id = Room.id
+        )`),
+        'total_bookings',
+      ],
+      [
+        sequelize.literal(`(
+          SELECT SUM(total_price)
+          FROM bookings
+          WHERE bookings.room_id = Room.id
+        )`),
+        'total_revenue',
+      ],
+    ],
+    order: [['room_number', 'ASC']],
+  });
+
+  return { rooms: roomStats };
+};
+
+const generateCustomersReport = async (dateFilter) => {
+  const customerStats = await User.findAll({
+    attributes: [
+      'id',
+      'full_name',
+      'email',
+      [
+        sequelize.literal(`(
+          SELECT COUNT(*)
+          FROM bookings
+          WHERE bookings.user_id = User.id
+        )`),
+        'total_bookings',
+      ],
+      [
+        sequelize.literal(`(
+          SELECT SUM(total_price)
+          FROM bookings
+          WHERE bookings.user_id = User.id
+        )`),
+        'total_spent',
+      ],
+    ],
+    where: { role: 'customer' },
+    order: [[sequelize.literal('total_bookings'), 'DESC']],
+    limit: 50,
+  });
+
+  return { customers: customerStats };
+};
+
+module.exports = {
+  getDashboardStats,
+  getReports,
+  exportReport,
+};
diff --git a/server/src/controllers/reviewController.js b/server/src/controllers/reviewController.js
new file mode 100644
index 00000000..e6fa2660
--- /dev/null
+++ b/server/src/controllers/reviewController.js
@@ -0,0 +1,233 @@
+const { Review, User, Room, Booking } = 
+  require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Get reviews for a specific room
+ */
+const getRoomReviews = async (req, res, next) => {
+  try {
+    // Support both routes: /api/reviews/room/:roomId and /api/rooms/:id/reviews
+    const roomId = req.params.roomId || req.params.id;
+
+    if (!roomId) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'roomId is required',
+      });
+    }
+
+    const reviews = await Review.findAll({
+      where: {
+        room_id: parseInt(roomId, 10),
+        status: 'approved',
+      },
+      include: [
+        {
+          model: User,
+          as: 'user',
+          attributes: ['id', 'full_name', 'email'],
+        },
+      ],
+      order: [['created_at', 'DESC']],
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        reviews,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create a new review (authenticated users only)
+ */
+const createReview = async (req, res, next) => {
+  try {
+    const { room_id, rating, comment } = req.body;
+    const userId = req.user.id;
+
+    // Check if room exists
+    const room = await Room.findByPk(room_id);
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    // Optional: Check if user has booked this room
+    // const hasBooked = await Booking.findOne({
+    //   where: {
+    //     user_id: userId,
+    //     room_id: room_id,
+    //     status: 'completed',
+    //   },
+    // });
+    // if (!hasBooked) {
+    //   return res.status(403).json({
+    //     status: 'error',
+    //     message: 'You can only review rooms you have booked',
+    //   });
+    // }
+
+    // Check if user already reviewed this room
+    const existingReview = await Review.findOne({
+      where: {
+        user_id: userId,
+        room_id: room_id,
+      },
+    });
+
+    if (existingReview) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'You have already reviewed this room',
+      });
+    }
+
+    // Create review
+    const review = await Review.create({
+      user_id: userId,
+      room_id,
+      rating,
+      comment,
+      status: 'pending', // Admin will approve
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Review submitted successfully and is pending approval',
+      data: {
+        review,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Approve review (Admin only)
+ */
+const approveReview = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const review = await Review.findByPk(id);
+    if (!review) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Review not found',
+      });
+    }
+
+    await review.update({ status: 'approved' });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Review approved successfully',
+      data: {
+        review,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Reject review (Admin only)
+ */
+const rejectReview = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const review = await Review.findByPk(id);
+    if (!review) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Review not found',
+      });
+    }
+
+    await review.update({ status: 'rejected' });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Review rejected successfully',
+      data: {
+        review,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get all reviews (Admin only)
+ */
+const getAllReviews = async (req, res, next) => {
+  try {
+    const {
+      status,
+      page = 1,
+      limit = 10,
+    } = req.query;
+
+    const whereClause = {};
+    if (status) {
+      whereClause.status = status;
+    }
+
+    const offset = (parseInt(page) - 1) * parseInt(limit);
+
+    const { count, rows: reviews } = await Review.findAndCountAll({
+      where: whereClause,
+      include: [
+        {
+          model: User,
+          as: 'user',
+          attributes: ['id', 'full_name', 'email', 'phone'],
+        },
+        {
+          model: Room,
+          as: 'room',
+          attributes: ['id', 'room_number'],
+        },
+      ],
+      limit: parseInt(limit),
+      offset: offset,
+      order: [['created_at', 'DESC']],
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        reviews,
+        pagination: {
+          total: count,
+          page: parseInt(page),
+          limit: parseInt(limit),
+          totalPages: Math.ceil(count / parseInt(limit)),
+        },
+      },
+    });
+  } catch (error) {
+    console.error('Error in getAllReviews:', error);
+    next(error);
+  }
+};
+
+module.exports = {
+  getRoomReviews,
+  createReview,
+  approveReview,
+  rejectReview,
+  getAllReviews,
+};
diff --git a/server/src/controllers/roomController.js b/server/src/controllers/roomController.js
new file mode 100644
index 00000000..e77e2083
--- /dev/null
+++ b/server/src/controllers/roomController.js
@@ -0,0 +1,720 @@
+const { Room, RoomType, Review, sequelize, Sequelize } = require('../databases/models');
+const { Op } = require('sequelize');
+const path = require('path');
+const fs = require('fs');
+
+// Normalize image paths stored in DB (relative) to absolute URLs
+const normalizeImages = (images, baseUrl) => {
+  if (!images) return [];
+  let imgs = images;
+  if (typeof images === 'string') {
+    try {
+      imgs = JSON.parse(images);
+    } catch (e) {
+      // comma separated?
+      imgs = images.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+  }
+  if (!Array.isArray(imgs)) return [];
+  return imgs.map((img) => {
+    if (!img) return img;
+    if (/^https?:\/\//i.test(img)) return img;
+    // ensure leading slash
+    const pathPart = img.startsWith('/') ? img : `/${img}`;
+    return `${baseUrl}${pathPart}`;
+  });
+};
+
+/**
+ * Get all rooms with filters
+ */
+const getRooms = async (req, res, next) => {
+  try {
+    const {
+      type,
+      minPrice,
+      maxPrice,
+      capacity,
+      page = 1,
+      limit = 10,
+      sort,
+      featured,
+    } = req.query;
+
+    const whereClause = {};
+    const roomTypeWhere = {};
+
+    // Filter by featured
+    if (featured !== undefined) {
+      whereClause.featured = 
+        featured === 'true' || featured === true;
+    }
+
+    // Filter by room type
+    if (type) {
+      roomTypeWhere.name = { [Op.like]: `%${type}%` };
+    }
+
+    // Filter by capacity
+    if (capacity) {
+      roomTypeWhere.capacity = { [Op.gte]: parseInt(capacity) };
+    }
+
+    // Filter by price
+    if (minPrice || maxPrice) {
+      roomTypeWhere.base_price = {};
+      if (minPrice) {
+        roomTypeWhere.base_price[Op.gte] = 
+          parseFloat(minPrice);
+      }
+      if (maxPrice) {
+        roomTypeWhere.base_price[Op.lte] = 
+          parseFloat(maxPrice);
+      }
+    }
+
+    // Pagination
+    const pageNum = parseInt(page);
+    const limitNum = parseInt(limit);
+    const offset = (pageNum - 1) * limitNum;
+
+    // Sorting: support `sort=newest` to order strictly by created_at
+    // Default: featured first then created_at desc
+    let order = [
+      ['featured', 'DESC'],
+      ['created_at', 'DESC'],
+    ];
+    if (sort === 'newest' || sort === 'created_at') {
+      order = [['created_at', 'DESC']];
+    }
+
+    // Get rooms with room type and reviews
+    const { count, rows: rooms } = await Room.findAndCountAll({
+      where: whereClause,
+      include: [
+        {
+          model: RoomType,
+          as: 'room_type',
+          where: Object.keys(roomTypeWhere).length > 0 
+            ? roomTypeWhere 
+            : undefined,
+          required: true,
+        },
+      ],
+      limit: limitNum,
+      offset,
+      order,
+      distinct: true,
+    });
+
+    // compute base url for images
+    const baseUrl = process.env.SERVER_URL || `http://${req.get('host')}`;
+
+    // Get average rating for each room
+    const roomsWithRatings = await Promise.all(
+      rooms.map(async (room) => {
+        const reviewStats = await Review.findOne({
+          where: {
+            room_id: room.id,
+            status: 'approved',
+          },
+          attributes: [
+              [
+                Sequelize.fn('AVG', Sequelize.col('rating')),
+                'average_rating',
+              ],
+              [
+                Sequelize.fn('COUNT', Sequelize.col('id')),
+                'total_reviews',
+              ],
+          ],
+          raw: true,
+        });
+
+        const item = {
+          ...room.toJSON(),
+          average_rating: reviewStats?.average_rating
+            ? Math.round(parseFloat(reviewStats.average_rating) * 10) / 10
+            : null,
+          total_reviews: reviewStats?.total_reviews
+            ? parseInt(reviewStats.total_reviews, 10)
+            : 0,
+        };
+
+        // Normalize images for room and its room_type
+        try {
+          item.images = normalizeImages(item.images, baseUrl);
+        } catch (e) {
+          item.images = [];
+        }
+        if (item.room_type) {
+          try {
+            item.room_type.images = normalizeImages(
+              item.room_type.images,
+              baseUrl
+            );
+          } catch (e) {
+            item.room_type.images = [];
+          }
+        }
+
+        return item;
+      })
+    );
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        rooms: roomsWithRatings,
+        pagination: {
+          total: count,
+          page: pageNum,
+          limit: limitNum,
+          totalPages: Math.ceil(count / limitNum),
+        },
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get room by ID
+ */
+const getRoomById = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const room = await Room.findByPk(id, {
+      include: [
+        {
+          model: RoomType,
+          as: 'room_type',
+        },
+      ],
+    });
+
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    // Get average rating
+    const reviewStats = await Review.findOne({
+      where: {
+        room_id: room.id,
+        status: 'approved',
+      },
+      attributes: [
+        [
+          Sequelize.fn('AVG', Sequelize.col('rating')),
+          'average_rating',
+        ],
+        [
+          Sequelize.fn('COUNT', Sequelize.col('id')),
+          'total_reviews',
+        ],
+      ],
+      raw: true,
+    });
+
+    const baseUrl = process.env.SERVER_URL || `http://${req.get('host')}`;
+
+    const roomData = {
+      ...room.toJSON(),
+      average_rating: reviewStats?.average_rating
+        ? Math.round(parseFloat(reviewStats.average_rating) * 10) / 10
+        : null,
+      total_reviews: reviewStats?.total_reviews
+        ? parseInt(reviewStats.total_reviews, 10)
+        : 0,
+    };
+
+    // Normalize images
+    try {
+      roomData.images = normalizeImages(roomData.images, baseUrl);
+    } catch (e) {
+      roomData.images = [];
+    }
+    if (roomData.room_type) {
+      try {
+        roomData.room_type.images = normalizeImages(
+          roomData.room_type.images,
+          baseUrl
+        );
+      } catch (e) {
+        roomData.room_type.images = [];
+      }
+    }
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        room: roomData,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get list of unique amenities from room_types and rooms
+ */
+const getAmenities = async (req, res, next) => {
+  try {
+    // Fetch amenities from RoomType and Room
+    const roomTypes = await Room.sequelize.models.RoomType.findAll({
+      attributes: ['amenities'],
+      raw: true,
+    });
+
+    const rooms = await Room.findAll({
+      attributes: ['amenities'],
+      raw: true,
+    });
+
+    const all = [];
+
+    const pushFromValue = (val) => {
+      if (!val) return;
+      if (Array.isArray(val)) {
+        val.forEach((v) => all.push(String(v).trim()));
+      } else if (typeof val === 'string') {
+        try {
+          const parsed = JSON.parse(val);
+          if (Array.isArray(parsed)) {
+            parsed.forEach((v) => all.push(String(v).trim()));
+            return;
+          }
+        } catch (e) {
+          // not JSON
+        }
+        // comma separated
+        val.split(',').forEach((v) => all.push(String(v).trim()));
+      } else if (typeof val === 'object') {
+        Object.values(val).forEach((v) => {
+          if (Array.isArray(v)) v.forEach((x) => all.push(String(x).trim()));
+          else all.push(String(v).trim());
+        });
+      }
+    };
+
+    roomTypes.forEach((rt) => pushFromValue(rt.amenities));
+    rooms.forEach((r) => pushFromValue(r.amenities));
+
+    // unique, filter empty
+    const unique = Array.from(new Set(all.map((s) => s))).filter(Boolean);
+
+    res.status(200).json({ status: 'success', data: { amenities: unique } });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Search available rooms
+ */
+const searchAvailableRooms = async (req, res, next) => {
+  try {
+    const { from, to, type, capacity, page = 1, limit = 12 } = req.query;
+
+    if (!from || !to) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'From and to dates are required',
+      });
+    }
+
+    const checkInDate = new Date(from);
+    const checkOutDate = new Date(to);
+
+    if (checkInDate >= checkOutDate) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Check-out date must be after check-in date',
+      });
+    }
+
+    // Build room type filter
+    const roomTypeWhere = {};
+    if (type) {
+      roomTypeWhere.name = { [Op.like]: `%${type}%` };
+    }
+    if (capacity) {
+      roomTypeWhere.capacity = { [Op.gte]: parseInt(capacity) };
+    }
+
+    // Pagination params
+    const pageNum = parseInt(page, 10) || 1;
+    const limitNum = parseInt(limit, 10) || 12;
+    const offset = (pageNum - 1) * limitNum;
+
+    // Get available rooms with pagination
+    const { count, rows: availableRooms } = await Room.findAndCountAll({
+      where: {
+        status: 'available',
+      },
+      include: [
+        {
+          model: RoomType,
+          as: 'room_type',
+          where: Object.keys(roomTypeWhere).length > 0
+            ? roomTypeWhere
+            : undefined,
+        },
+      ],
+      limit: limitNum,
+      offset,
+      order: [['featured', 'DESC'], ['created_at', 'DESC']],
+      distinct: true,
+    });
+
+    // compute base url for images
+    const baseUrl = process.env.SERVER_URL || `http://${req.get('host')}`;
+
+    // Get ratings for available rooms
+    const roomsWithRatings = await Promise.all(
+      availableRooms.map(async (room) => {
+        const reviewStats = await Review.findOne({
+          where: {
+            room_id: room.id,
+            status: 'approved',
+          },
+          attributes: [
+            [
+              sequelize.fn('AVG', sequelize.col('rating')),
+              'average_rating',
+            ],
+            [
+              sequelize.fn('COUNT', sequelize.col('id')),
+              'total_reviews',
+            ],
+          ],
+          raw: true,
+        });
+
+        const item = {
+          ...room.toJSON(),
+          average_rating: reviewStats?.average_rating
+            ? Math.round(parseFloat(reviewStats.average_rating) * 10) / 10
+            : null,
+          total_reviews: reviewStats?.total_reviews
+            ? parseInt(reviewStats.total_reviews, 10)
+            : 0,
+        };
+
+        // Normalize images
+        try {
+          item.images = normalizeImages(item.images, baseUrl);
+        } catch (e) {
+          item.images = [];
+        }
+        if (item.room_type) {
+          try {
+            item.room_type.images = normalizeImages(
+              item.room_type.images,
+              baseUrl
+            );
+          } catch (e) {
+            item.room_type.images = [];
+          }
+        }
+
+        return item;
+      })
+    );
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        rooms: roomsWithRatings,
+        search: {
+          from,
+          to,
+          type,
+          capacity,
+        },
+        pagination: {
+          total: count,
+          page: pageNum,
+          limit: limitNum,
+          totalPages: Math.ceil(count / limitNum),
+        },
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create new room (Admin only)
+ */
+const createRoom = async (req, res, next) => {
+  try {
+    const {
+      room_type_id,
+      room_number,
+      floor,
+      status,
+      featured,
+    } = req.body;
+
+    // Check if room type exists
+    const roomType = await RoomType.findByPk(room_type_id);
+    if (!roomType) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room type not found',
+      });
+    }
+
+    // Check if room number already exists
+    const existingRoom = await Room.findOne({
+      where: { room_number },
+    });
+
+    if (existingRoom) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Room number already exists',
+      });
+    }
+
+    const room = await Room.create({
+      room_type_id,
+      room_number,
+      floor,
+      status: status || 'available',
+      featured: featured || false,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Room created successfully',
+      data: {
+        room,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Update room (Admin only)
+ */
+const updateRoom = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const {
+      room_type_id,
+      room_number,
+      floor,
+      status,
+      featured,
+    } = req.body;
+
+    const room = await Room.findByPk(id);
+
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    // Check if room type exists if updating
+    if (room_type_id) {
+      const roomType = await RoomType.findByPk(room_type_id);
+      if (!roomType) {
+        return res.status(404).json({
+          status: 'error',
+          message: 'Room type not found',
+        });
+      }
+    }
+
+    await room.update({
+      room_type_id,
+      room_number,
+      floor,
+      status,
+      featured,
+    });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Room updated successfully',
+      data: {
+        room,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Delete room (Admin only)
+ */
+const deleteRoom = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const room = await Room.findByPk(id);
+
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    await room.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Room deleted successfully',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Upload room images
+ * POST /api/rooms/:id/images
+ */
+const uploadRoomImages = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    
+    const room = await Room.findByPk(id, {
+      include: [
+        {
+          model: RoomType,
+          as: 'room_type',
+        },
+      ],
+    });
+
+    if (!room) {
+      // Delete uploaded files if room not found
+      if (req.files) {
+        req.files.forEach(file => {
+          fs.unlinkSync(file.path);
+        });
+      }
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    // Get uploaded file URLs
+    const imageUrls = req.files.map(file => `/uploads/rooms/${file.filename}`);
+    
+    // Get existing images from room_type
+    const existingImages = room.room_type.images || [];
+    
+    // Append new images
+    const updatedImages = [...existingImages, ...imageUrls];
+
+    // Update room_type images
+    await room.room_type.update({
+      images: updatedImages,
+    });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Images uploaded successfully',
+      data: {
+        images: updatedImages,
+      },
+    });
+  } catch (error) {
+    // Clean up uploaded files on error
+    if (req.files) {
+      req.files.forEach(file => {
+        try {
+          fs.unlinkSync(file.path);
+        } catch (err) {
+          console.error('Error deleting file:', err);
+        }
+      });
+    }
+    next(error);
+  }
+};
+
+/**
+ * Delete room image
+ * DELETE /api/rooms/:id/images
+ */
+const deleteRoomImage = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const { imageUrl } = req.body;
+
+    const room = await Room.findByPk(id, {
+      include: [
+        {
+          model: RoomType,
+          as: 'room_type',
+        },
+      ],
+    });
+
+    if (!room) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Room not found',
+      });
+    }
+
+    // Get existing images
+    const existingImages = room.room_type.images || [];
+    
+    // Remove the specified image
+    const updatedImages = existingImages.filter(img => img !== imageUrl);
+
+    // Delete file from disk
+    const filename = path.basename(imageUrl);
+    const filePath = path.join(__dirname, '../../uploads/rooms', filename);
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+    }
+
+    // Update room_type images
+    await room.room_type.update({
+      images: updatedImages,
+    });
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Image deleted successfully',
+      data: {
+        images: updatedImages,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  getRooms,
+  getRoomById,
+  getAmenities,
+  searchAvailableRooms,
+  createRoom,
+  updateRoom,
+  deleteRoom,
+  uploadRoomImages,
+  deleteRoomImage,
+};
diff --git a/server/src/controllers/serviceController.js b/server/src/controllers/serviceController.js
new file mode 100644
index 00000000..4c6a8247
--- /dev/null
+++ b/server/src/controllers/serviceController.js
@@ -0,0 +1,298 @@
+const { Service, BookingService, Booking, sequelize } = require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Get all services with filters and pagination
+ * GET /api/services
+ */
+const getServices = async (req, res, next) => {
+  try {
+    const {
+      search,
+      status,
+      page = 1,
+      limit = 10,
+    } = req.query;
+
+    const whereClause = {};
+
+    // Filter by search (name or description)
+    if (search) {
+      whereClause[Op.or] = [
+        { name: { [Op.like]: `%${search}%` } },
+        { description: { [Op.like]: `%${search}%` } },
+      ];
+    }
+
+    // Filter by status
+    if (status) {
+      whereClause.status = status;
+    }
+
+    const offset = (parseInt(page) - 1) * parseInt(limit);
+
+    const { count, rows: services } = await Service.findAndCountAll({
+      where: whereClause,
+      limit: parseInt(limit),
+      offset: offset,
+      order: [['created_at', 'DESC']],
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        services,
+        pagination: {
+          total: count,
+          page: parseInt(page),
+          limit: parseInt(limit),
+          totalPages: Math.ceil(count / parseInt(limit)),
+        },
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get service by ID
+ * GET /api/services/:id
+ */
+const getServiceById = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const service = await Service.findByPk(id);
+
+    if (!service) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Service not found',
+      });
+    }
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        service,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create new service
+ * POST /api/services
+ */
+const createService = async (req, res, next) => {
+  try {
+    const {
+      name,
+      description,
+      price,
+      unit,
+      status = 'active',
+    } = req.body;
+
+    // Check if service name already exists
+    const existingService = await Service.findOne({ where: { name } });
+    if (existingService) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Service name already exists',
+      });
+    }
+
+    const service = await Service.create({
+      name,
+      description,
+      price,
+      unit,
+      status,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Service created successfully',
+      data: {
+        service,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Update service
+ * PUT /api/services/:id
+ */
+const updateService = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const {
+      name,
+      description,
+      price,
+      unit,
+      status,
+    } = req.body;
+
+    const service = await Service.findByPk(id);
+    if (!service) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Service not found',
+      });
+    }
+
+    // Check if new name already exists (excluding current service)
+    if (name && name !== service.name) {
+      const existingService = await Service.findOne({
+        where: {
+          name,
+          id: { [Op.ne]: id },
+        },
+      });
+      if (existingService) {
+        return res.status(400).json({
+          status: 'error',
+          message: 'Service name already exists',
+        });
+      }
+    }
+
+    const updateData = {};
+    if (name !== undefined) updateData.name = name;
+    if (description !== undefined) updateData.description = description;
+    if (price !== undefined) updateData.price = price;
+    if (unit !== undefined) updateData.unit = unit;
+    if (status !== undefined) updateData.status = status;
+
+    await service.update(updateData);
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Service updated successfully',
+      data: {
+        service,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Delete service
+ * DELETE /api/services/:id
+ */
+const deleteService = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const service = await Service.findByPk(id);
+    if (!service) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Service not found',
+      });
+    }
+
+    // Check if service is used in any active bookings
+    const activeUsage = await BookingService.count({
+      where: { service_id: id },
+      include: [
+        {
+          model: Booking,
+          as: 'booking',
+          where: {
+            status: { [Op.in]: ['pending', 'confirmed', 'checked_in'] },
+          },
+        },
+      ],
+    });
+
+    if (activeUsage > 0) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Cannot delete service that is used in active bookings',
+      });
+    }
+
+    await service.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'Service deleted successfully',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Add service to booking
+ * POST /api/services/use
+ */
+const useService = async (req, res, next) => {
+  try {
+    const {
+      booking_id,
+      service_id,
+      quantity = 1,
+    } = req.body;
+
+    // Check if booking exists
+    const booking = await Booking.findByPk(booking_id);
+    if (!booking) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Booking not found',
+      });
+    }
+
+    // Check if service exists
+    const service = await Service.findByPk(service_id);
+    if (!service || service.status !== 'active') {
+      return res.status(404).json({
+        status: 'error',
+        message: 'Service not found or inactive',
+      });
+    }
+
+    // Calculate total price
+    const total_price = service.price * quantity;
+
+    // Add service to booking
+    const bookingService = await BookingService.create({
+      booking_id,
+      service_id,
+      quantity,
+      price: service.price,
+      total_price,
+    });
+
+    res.status(201).json({
+      status: 'success',
+      message: 'Service added to booking successfully',
+      data: {
+        bookingService,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  getServices,
+  getServiceById,
+  createService,
+  updateService,
+  deleteService,
+  useService,
+};
diff --git a/server/src/controllers/userController.js b/server/src/controllers/userController.js
new file mode 100644
index 00000000..e5915a1b
--- /dev/null
+++ b/server/src/controllers/userController.js
@@ -0,0 +1,320 @@
+const { User, Booking, Role } = require('../databases/models');
+const { Op } = require('sequelize');
+const bcrypt = require('bcryptjs');
+
+/**
+ * Get all users with filters and pagination
+ * GET /api/users
+ */
+const getUsers = async (req, res, next) => {
+  try {
+    const {
+      search,
+      role,
+      status,
+      page = 1,
+      limit = 10,
+    } = req.query;
+
+    const whereClause = {};
+
+    // Filter by search (full_name or email or phone)
+    if (search) {
+      whereClause[Op.or] = [
+        { full_name: { [Op.like]: `%${search}%` } },
+        { email: { [Op.like]: `%${search}%` } },
+        { phone: { [Op.like]: `%${search}%` } },
+      ];
+    }
+
+    // Filter by role - map string to role_id
+    if (role) {
+      const roleMap = { admin: 1, staff: 2, customer: 3 };
+      whereClause.role_id = roleMap[role];
+    }
+
+    // Filter by status - map to is_active
+    if (status) {
+      whereClause.is_active = status === 'active';
+    }
+
+    const offset = (parseInt(page) - 1) * parseInt(limit);
+
+    const { count, rows: users } = await User.findAndCountAll({
+      where: whereClause,
+      attributes: { exclude: ['password'] },
+      include: [
+        {
+          model: Role,
+          as: 'role',
+          attributes: ['name'],
+        },
+      ],
+      limit: parseInt(limit),
+      offset: offset,
+      order: [['created_at', 'DESC']],
+    });
+
+    // Transform users to include role string and status string
+    const transformedUsers = users.map((user) => {
+      const userJson = user.toJSON();
+      return {
+        ...userJson,
+        role: userJson.role?.name || 'customer',
+        status: userJson.is_active ? 'active' : 'inactive',
+        phone_number: userJson.phone, // Map phone to phone_number for frontend
+      };
+    });
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        users: transformedUsers,
+        pagination: {
+          total: count,
+          page: parseInt(page),
+          limit: parseInt(limit),
+          totalPages: Math.ceil(count / parseInt(limit)),
+        },
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Get user by ID
+ * GET /api/users/:id
+ */
+const getUserById = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const user = await User.findByPk(id, {
+      attributes: { exclude: ['password'] },
+      include: [
+        {
+          model: Role,
+          as: 'role',
+          attributes: ['name'],
+        },
+        {
+          model: Booking,
+          as: 'bookings',
+          limit: 5,
+          order: [['created_at', 'DESC']],
+        },
+      ],
+    });
+
+    if (!user) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'User not found',
+      });
+    }
+
+    // Transform user to include role string and status string
+    const userJson = user.toJSON();
+    const transformedUser = {
+      ...userJson,
+      role: userJson.role?.name || 'customer',
+      status: userJson.is_active ? 'active' : 'inactive',
+      phone_number: userJson.phone, // Map phone to phone_number for frontend
+    };
+
+    res.status(200).json({
+      status: 'success',
+      data: {
+        user: transformedUser,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Create new user
+ * POST /api/users
+ */
+const createUser = async (req, res, next) => {
+  try {
+    const {
+      email,
+      password,
+      full_name,
+      phone_number, // Accept phone_number from frontend
+      role = 'customer',
+      status = 'active',
+    } = req.body;
+
+    // Map role string to role_id
+    const roleMap = {
+      admin: 1,
+      staff: 2,
+      customer: 3,
+    };
+    const role_id = roleMap[role] || 3; // Default to customer (3)
+
+    // Check if email already exists
+    const existingUser = await User.findOne({ where: { email } });
+    if (existingUser) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Email already exists',
+      });
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Create user - map phone_number to phone for DB
+    const user = await User.create({
+      email,
+      password: hashedPassword,
+      full_name,
+      phone: phone_number, // Map to DB column 'phone'
+      role_id,
+      is_active: status === 'active',
+    });
+
+    // Remove password from response
+    const userResponse = user.toJSON();
+    delete userResponse.password;
+
+    res.status(201).json({
+      status: 'success',
+      message: 'User created successfully',
+      data: {
+        user: userResponse,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Update user
+ * PUT /api/users/:id
+ */
+const updateUser = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const {
+      full_name,
+      email,
+      phone_number, // Accept phone_number from frontend
+      role,
+      status,
+      password,
+    } = req.body;
+
+    const user = await User.findByPk(id);
+    if (!user) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'User not found',
+      });
+    }
+
+    // Check if email is being changed and if it's already taken
+    if (email && email !== user.email) {
+      const existingUser = await User.findOne({ where: { email } });
+      if (existingUser) {
+        return res.status(400).json({
+          status: 'error',
+          message: 'Email already exists',
+        });
+      }
+    }
+
+    // Map role string to role_id
+    const roleMap = {
+      admin: 1,
+      staff: 2,
+      customer: 3,
+    };
+
+    // Prepare update data - map phone_number to phone
+    const updateData = {};
+    if (full_name !== undefined) updateData.full_name = full_name;
+    if (email !== undefined) updateData.email = email;
+    if (phone_number !== undefined) updateData.phone = phone_number; // Map to DB column
+    if (role !== undefined) updateData.role_id = roleMap[role] || 3;
+    if (status !== undefined) updateData.is_active = status === 'active';
+
+    // Hash password if provided
+    if (password) {
+      updateData.password = await bcrypt.hash(password, 10);
+    }
+
+    await user.update(updateData);
+
+    // Remove password from response
+    const userResponse = user.toJSON();
+    delete userResponse.password;
+
+    res.status(200).json({
+      status: 'success',
+      message: 'User updated successfully',
+      data: {
+        user: userResponse,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Delete user
+ * DELETE /api/users/:id
+ */
+const deleteUser = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+
+    const user = await User.findByPk(id);
+    if (!user) {
+      return res.status(404).json({
+        status: 'error',
+        message: 'User not found',
+      });
+    }
+
+    // Check if user has active bookings
+    const activeBookings = await Booking.count({
+      where: {
+        user_id: id,
+        status: { [Op.in]: ['pending', 'confirmed', 'checked_in'] },
+      },
+    });
+
+    if (activeBookings > 0) {
+      return res.status(400).json({
+        status: 'error',
+        message: 'Cannot delete user with active bookings',
+      });
+    }
+
+    await user.destroy();
+
+    res.status(200).json({
+      status: 'success',
+      message: 'User deleted successfully',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  getUsers,
+  getUserById,
+  createUser,
+  updateUser,
+  deleteUser,
+};
diff --git a/server/src/databases/migrations/20250101000001-create-roles.js b/server/src/databases/migrations/20250101000001-create-roles.js
new file mode 100644
index 00000000..094c0387
--- /dev/null
+++ b/server/src/databases/migrations/20250101000001-create-roles.js
@@ -0,0 +1,40 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('roles', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.STRING(50),
+        allowNull: false,
+        unique: true
+      },
+      description: {
+        type: Sequelize.STRING(255),
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('roles');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000002-create-users.js b/server/src/databases/migrations/20250101000002-create-users.js
new file mode 100644
index 00000000..99415b47
--- /dev/null
+++ b/server/src/databases/migrations/20250101000002-create-users.js
@@ -0,0 +1,74 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('users', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      role_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'roles',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      email: {
+        type: Sequelize.STRING(100),
+        allowNull: false,
+        unique: true
+      },
+      password: {
+        type: Sequelize.STRING(255),
+        allowNull: false
+      },
+      full_name: {
+        type: Sequelize.STRING(100),
+        allowNull: false
+      },
+      phone: {
+        type: Sequelize.STRING(20),
+        allowNull: true
+      },
+      address: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      avatar: {
+        type: Sequelize.STRING(255),
+        allowNull: true
+      },
+      is_active: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('users', ['email']);
+    await queryInterface.addIndex('users', ['role_id']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('users');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000003-create-refresh-tokens.js b/server/src/databases/migrations/20250101000003-create-refresh-tokens.js
new file mode 100644
index 00000000..51f2db2f
--- /dev/null
+++ b/server/src/databases/migrations/20250101000003-create-refresh-tokens.js
@@ -0,0 +1,46 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('refresh_tokens', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      user_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      token: {
+        type: Sequelize.STRING(500),
+        allowNull: false,
+        unique: true
+      },
+      expires_at: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      }
+    });
+
+    await queryInterface.addIndex('refresh_tokens', ['user_id']);
+    await queryInterface.addIndex('refresh_tokens', ['token']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('refresh_tokens');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000004-create-room-types.js b/server/src/databases/migrations/20250101000004-create-room-types.js
new file mode 100644
index 00000000..e34927ca
--- /dev/null
+++ b/server/src/databases/migrations/20250101000004-create-room-types.js
@@ -0,0 +1,52 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('room_types', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.STRING(100),
+        allowNull: false,
+        unique: true
+      },
+      description: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      base_price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      capacity: {
+        type: Sequelize.INTEGER,
+        allowNull: false
+      },
+      amenities: {
+        type: Sequelize.JSON,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('room_types');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000005-create-rooms.js b/server/src/databases/migrations/20250101000005-create-rooms.js
new file mode 100644
index 00000000..0b315ae2
--- /dev/null
+++ b/server/src/databases/migrations/20250101000005-create-rooms.js
@@ -0,0 +1,75 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('rooms', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      room_type_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'room_types',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      room_number: {
+        type: Sequelize.STRING(20),
+        allowNull: false,
+        unique: true
+      },
+      floor: {
+        type: Sequelize.INTEGER,
+        allowNull: false
+      },
+      status: {
+        type: Sequelize.ENUM(
+          'available',
+          'occupied',
+          'maintenance',
+          'cleaning'
+        ),
+        allowNull: false,
+        defaultValue: 'available'
+      },
+      price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      images: {
+        type: Sequelize.JSON,
+        allowNull: true
+      },
+      description: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('rooms', ['room_type_id']);
+    await queryInterface.addIndex('rooms', ['status']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('rooms');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000006-create-bookings.js b/server/src/databases/migrations/20250101000006-create-bookings.js
new file mode 100644
index 00000000..cfe74d5a
--- /dev/null
+++ b/server/src/databases/migrations/20250101000006-create-bookings.js
@@ -0,0 +1,95 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('bookings', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      booking_number: {
+        type: Sequelize.STRING(50),
+        allowNull: false,
+        unique: true
+      },
+      user_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      room_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'rooms',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      check_in_date: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      check_out_date: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      num_guests: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        defaultValue: 1
+      },
+      total_price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      status: {
+        type: Sequelize.ENUM(
+          'pending',
+          'confirmed',
+          'checked_in',
+          'checked_out',
+          'cancelled'
+        ),
+        allowNull: false,
+        defaultValue: 'pending'
+      },
+      special_requests: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('bookings', ['booking_number']);
+    await queryInterface.addIndex('bookings', ['user_id']);
+    await queryInterface.addIndex('bookings', ['room_id']);
+    await queryInterface.addIndex('bookings', ['status']);
+    await queryInterface.addIndex('bookings', ['check_in_date']);
+    await queryInterface.addIndex('bookings', ['check_out_date']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('bookings');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000007-create-payments.js b/server/src/databases/migrations/20250101000007-create-payments.js
new file mode 100644
index 00000000..0337eea6
--- /dev/null
+++ b/server/src/databases/migrations/20250101000007-create-payments.js
@@ -0,0 +1,80 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('payments', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      booking_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'bookings',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      amount: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      payment_method: {
+        type: Sequelize.ENUM(
+          'cash',
+          'credit_card',
+          'debit_card',
+          'bank_transfer',
+          'e_wallet'
+        ),
+        allowNull: false
+      },
+      payment_status: {
+        type: Sequelize.ENUM(
+          'pending',
+          'completed',
+          'failed',
+          'refunded'
+        ),
+        allowNull: false,
+        defaultValue: 'pending'
+      },
+      transaction_id: {
+        type: Sequelize.STRING(100),
+        allowNull: true
+      },
+      payment_date: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      notes: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('payments', ['booking_id']);
+    await queryInterface.addIndex('payments', ['payment_status']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('payments');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000008-create-services.js b/server/src/databases/migrations/20250101000008-create-services.js
new file mode 100644
index 00000000..5552991f
--- /dev/null
+++ b/server/src/databases/migrations/20250101000008-create-services.js
@@ -0,0 +1,54 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('services', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.STRING(100),
+        allowNull: false
+      },
+      description: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      category: {
+        type: Sequelize.STRING(50),
+        allowNull: true
+      },
+      is_active: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('services', ['category']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('services');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000009-create-service-usages.js b/server/src/databases/migrations/20250101000009-create-service-usages.js
new file mode 100644
index 00000000..bf0f33f1
--- /dev/null
+++ b/server/src/databases/migrations/20250101000009-create-service-usages.js
@@ -0,0 +1,76 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('service_usages', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      booking_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'bookings',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      service_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'services',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      quantity: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        defaultValue: 1
+      },
+      unit_price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      total_price: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      usage_date: {
+        type: Sequelize.DATE,
+        allowNull: false,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      notes: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('service_usages', ['booking_id']);
+    await queryInterface.addIndex('service_usages', ['service_id']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('service_usages');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000010-create-promotions.js b/server/src/databases/migrations/20250101000010-create-promotions.js
new file mode 100644
index 00000000..9af8aee5
--- /dev/null
+++ b/server/src/databases/migrations/20250101000010-create-promotions.js
@@ -0,0 +1,85 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('promotions', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      code: {
+        type: Sequelize.STRING(50),
+        allowNull: false,
+        unique: true
+      },
+      name: {
+        type: Sequelize.STRING(100),
+        allowNull: false
+      },
+      description: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      discount_type: {
+        type: Sequelize.ENUM('percentage', 'fixed_amount'),
+        allowNull: false
+      },
+      discount_value: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false
+      },
+      min_booking_amount: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: true
+      },
+      max_discount_amount: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: true
+      },
+      start_date: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      end_date: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      usage_limit: {
+        type: Sequelize.INTEGER,
+        allowNull: true
+      },
+      used_count: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        defaultValue: 0
+      },
+      is_active: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('promotions', ['code']);
+    await queryInterface.addIndex('promotions', ['is_active']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('promotions');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000011-create-checkin-checkout.js b/server/src/databases/migrations/20250101000011-create-checkin-checkout.js
new file mode 100644
index 00000000..9f66e122
--- /dev/null
+++ b/server/src/databases/migrations/20250101000011-create-checkin-checkout.js
@@ -0,0 +1,88 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('checkin_checkout', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      booking_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'bookings',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'RESTRICT'
+      },
+      checkin_time: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      checkout_time: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      checkin_by: {
+        type: Sequelize.INTEGER,
+        allowNull: true,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'SET NULL'
+      },
+      checkout_by: {
+        type: Sequelize.INTEGER,
+        allowNull: true,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'SET NULL'
+      },
+      room_condition_checkin: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      room_condition_checkout: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      additional_charges: {
+        type: Sequelize.DECIMAL(10, 2),
+        allowNull: false,
+        defaultValue: 0
+      },
+      notes: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('checkin_checkout', ['booking_id']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('checkin_checkout');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000012-create-banners.js b/server/src/databases/migrations/20250101000012-create-banners.js
new file mode 100644
index 00000000..cec9ac24
--- /dev/null
+++ b/server/src/databases/migrations/20250101000012-create-banners.js
@@ -0,0 +1,73 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('banners', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      title: {
+        type: Sequelize.STRING(100),
+        allowNull: false
+      },
+      description: {
+        type: Sequelize.TEXT,
+        allowNull: true
+      },
+      image_url: {
+        type: Sequelize.STRING(255),
+        allowNull: false
+      },
+      link_url: {
+        type: Sequelize.STRING(255),
+        allowNull: true
+      },
+      position: {
+        type: Sequelize.STRING(50),
+        allowNull: false,
+        defaultValue: 'home'
+      },
+      display_order: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        defaultValue: 0
+      },
+      is_active: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      },
+      start_date: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      end_date: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        )
+      }
+    });
+
+    await queryInterface.addIndex('banners', ['position']);
+    await queryInterface.addIndex('banners', ['is_active']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('banners');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000013-create-password-reset-tokens.js b/server/src/databases/migrations/20250101000013-create-password-reset-tokens.js
new file mode 100644
index 00000000..eec137cb
--- /dev/null
+++ b/server/src/databases/migrations/20250101000013-create-password-reset-tokens.js
@@ -0,0 +1,59 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('password_reset_tokens', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      user_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      token: {
+        type: Sequelize.STRING(255),
+        allowNull: false,
+        unique: true
+      },
+      expires_at: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      used: {
+        type: Sequelize.BOOLEAN,
+        defaultValue: false
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE
+      }
+    });
+
+    await queryInterface.addIndex(
+      'password_reset_tokens', 
+      ['token']
+    );
+    await queryInterface.addIndex(
+      'password_reset_tokens', 
+      ['user_id']
+    );
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('password_reset_tokens');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000014-add-featured-to-rooms.js b/server/src/databases/migrations/20250101000014-add-featured-to-rooms.js
new file mode 100644
index 00000000..542c4ffb
--- /dev/null
+++ b/server/src/databases/migrations/20250101000014-add-featured-to-rooms.js
@@ -0,0 +1,19 @@
+"use strict";
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn("rooms", "featured", {
+      type: Sequelize.BOOLEAN,
+      allowNull: false,
+      defaultValue: false
+    });
+    // add index to optimize featured queries
+    await queryInterface.addIndex("rooms", ["featured"]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.removeIndex("rooms", ["featured"]).catch(() => {});
+    await queryInterface.removeColumn("rooms", "featured");
+  }
+};
diff --git a/server/src/databases/migrations/20250101000015-create-reviews.js b/server/src/databases/migrations/20250101000015-create-reviews.js
new file mode 100644
index 00000000..30b758f2
--- /dev/null
+++ b/server/src/databases/migrations/20250101000015-create-reviews.js
@@ -0,0 +1,66 @@
+"use strict";
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('reviews', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      user_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      room_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'rooms',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      rating: {
+        type: Sequelize.INTEGER,
+        allowNull: false
+      },
+      comment: {
+        type: Sequelize.TEXT,
+        allowNull: false
+      },
+      status: {
+        type: Sequelize.ENUM('pending', 'approved', 'rejected'),
+        allowNull: false,
+        defaultValue: 'pending'
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP')
+      }
+    });
+
+    await queryInterface.addIndex('reviews', ['room_id']);
+    await queryInterface.addIndex('reviews', ['user_id']);
+    await queryInterface.addIndex('reviews', ['status']);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('reviews');
+  }
+};
diff --git a/server/src/databases/migrations/20250101000016-create-favorites.js b/server/src/databases/migrations/20250101000016-create-favorites.js
new file mode 100644
index 00000000..f66e0368
--- /dev/null
+++ b/server/src/databases/migrations/20250101000016-create-favorites.js
@@ -0,0 +1,61 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.createTable('favorites', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER,
+      },
+      user_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id',
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE',
+      },
+      room_id: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'rooms',
+          key: 'id',
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE',
+      },
+      created_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP'),
+      },
+      updated_at: {
+        allowNull: false,
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal(
+          'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'
+        ),
+      },
+    });
+
+    // Add unique constraint to prevent duplicate favorites
+    await queryInterface.addConstraint('favorites', {
+      fields: ['user_id', 'room_id'],
+      type: 'unique',
+      name: 'unique_user_room_favorite',
+    });
+
+    // Add index for faster queries
+    await queryInterface.addIndex('favorites', ['user_id']);
+    await queryInterface.addIndex('favorites', ['room_id']);
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.dropTable('favorites');
+  },
+};
diff --git a/server/src/databases/migrations/20251113000001-add-amenities-to-rooms.js b/server/src/databases/migrations/20251113000001-add-amenities-to-rooms.js
new file mode 100644
index 00000000..e722c7cc
--- /dev/null
+++ b/server/src/databases/migrations/20251113000001-add-amenities-to-rooms.js
@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn('rooms', 'amenities', {
+      type: Sequelize.JSON,
+      allowNull: true,
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.removeColumn('rooms', 'amenities');
+  },
+};
diff --git a/server/src/databases/migrations/20251114000001-add-deposit-fields-to-payments.js b/server/src/databases/migrations/20251114000001-add-deposit-fields-to-payments.js
new file mode 100644
index 00000000..93e46082
--- /dev/null
+++ b/server/src/databases/migrations/20251114000001-add-deposit-fields-to-payments.js
@@ -0,0 +1,42 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // Add payment_type field to payments table
+    await queryInterface.addColumn('payments', 'payment_type', {
+      type: Sequelize.ENUM('full', 'deposit', 'remaining'),
+      allowNull: false,
+      defaultValue: 'full',
+      after: 'payment_method'
+    });
+
+    // Add deposit_percentage field
+    await queryInterface.addColumn('payments', 'deposit_percentage', {
+      type: Sequelize.INTEGER,
+      allowNull: true,
+      defaultValue: null,
+      comment: 'Percentage of deposit (e.g., 20, 30, 50)',
+      after: 'payment_type'
+    });
+
+    // Add reference to original payment if this is a remaining payment
+    await queryInterface.addColumn('payments', 'related_payment_id', {
+      type: Sequelize.INTEGER,
+      allowNull: true,
+      references: {
+        model: 'payments',
+        key: 'id'
+      },
+      onUpdate: 'CASCADE',
+      onDelete: 'SET NULL',
+      after: 'booking_id'
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.removeColumn('payments', 'related_payment_id');
+    await queryInterface.removeColumn('payments', 'deposit_percentage');
+    await queryInterface.removeColumn('payments', 'payment_type');
+  }
+};
diff --git a/server/src/databases/migrations/20251114000002-add-deposit-tracking-to-bookings.js b/server/src/databases/migrations/20251114000002-add-deposit-tracking-to-bookings.js
new file mode 100644
index 00000000..e7685706
--- /dev/null
+++ b/server/src/databases/migrations/20251114000002-add-deposit-tracking-to-bookings.js
@@ -0,0 +1,26 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // Add deposit tracking fields to bookings table
+    await queryInterface.addColumn('bookings', 'deposit_paid', {
+      type: Sequelize.BOOLEAN,
+      allowNull: false,
+      defaultValue: false,
+      after: 'status'
+    });
+
+    await queryInterface.addColumn('bookings', 'requires_deposit', {
+      type: Sequelize.BOOLEAN,
+      allowNull: false,
+      defaultValue: false,
+      after: 'deposit_paid'
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.removeColumn('bookings', 'requires_deposit');
+    await queryInterface.removeColumn('bookings', 'deposit_paid');
+  }
+};
diff --git a/server/src/databases/models/Banner.js b/server/src/databases/models/Banner.js
new file mode 100644
index 00000000..cdfdbd15
--- /dev/null
+++ b/server/src/databases/models/Banner.js
@@ -0,0 +1,84 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Banner extends Model {
+    static associate(models) {
+      // No associations for Banner
+    }
+
+    isActiveNow() {
+      const now = new Date();
+      if (!this.is_active) return false;
+      if (!this.start_date || !this.end_date) return this.is_active;
+      return now >= this.start_date && now <= this.end_date;
+    }
+  }
+
+  Banner.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      title: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      description: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      image_url: {
+        type: DataTypes.STRING(255),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      link_url: {
+        type: DataTypes.STRING(255),
+        allowNull: true
+      },
+      position: {
+        type: DataTypes.STRING(50),
+        allowNull: false,
+        defaultValue: 'home'
+      },
+      display_order: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        defaultValue: 0
+      },
+      is_active: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      },
+      start_date: {
+        type: DataTypes.DATE,
+        allowNull: true
+      },
+      end_date: {
+        type: DataTypes.DATE,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Banner',
+      tableName: 'banners',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Banner;
+};
diff --git a/server/src/databases/models/Booking.js b/server/src/databases/models/Booking.js
new file mode 100644
index 00000000..f05474af
--- /dev/null
+++ b/server/src/databases/models/Booking.js
@@ -0,0 +1,130 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Booking extends Model {
+    static associate(models) {
+      // Booking belongs to User
+      Booking.belongsTo(models.User, {
+        foreignKey: 'user_id',
+        as: 'user'
+      });
+
+      // Booking belongs to Room
+      Booking.belongsTo(models.Room, {
+        foreignKey: 'room_id',
+        as: 'room'
+      });
+
+      // Booking has many Payments
+      Booking.hasMany(models.Payment, {
+        foreignKey: 'booking_id',
+        as: 'payments'
+      });
+
+      // Booking has many ServiceUsages
+      Booking.hasMany(models.ServiceUsage, {
+        foreignKey: 'booking_id',
+        as: 'service_usages'
+      });
+
+      // Booking has one CheckInCheckOut
+      Booking.hasOne(models.CheckInCheckOut, {
+        foreignKey: 'booking_id',
+        as: 'checkin_checkout'
+      });
+    }
+  }
+
+  Booking.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      booking_number: {
+        type: DataTypes.STRING(50),
+        allowNull: false,
+        unique: true
+      },
+      user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      room_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      check_in_date: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      check_out_date: {
+        type: DataTypes.DATE,
+        allowNull: false,
+        validate: {
+          isAfterCheckIn(value) {
+            if (value <= this.check_in_date) {
+              throw new Error(
+                'Check-out date must be after check-in date'
+              );
+            }
+          }
+        }
+      },
+      num_guests: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        defaultValue: 1,
+        validate: {
+          min: 1
+        }
+      },
+      total_price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      status: {
+        type: DataTypes.ENUM(
+          'pending',
+          'confirmed',
+          'checked_in',
+          'checked_out',
+          'cancelled'
+        ),
+        allowNull: false,
+        defaultValue: 'pending'
+      },
+      deposit_paid: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: false
+      },
+      requires_deposit: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: false
+      },
+      special_requests: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Booking',
+      tableName: 'bookings',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Booking;
+};
diff --git a/server/src/databases/models/CheckInCheckOut.js b/server/src/databases/models/CheckInCheckOut.js
new file mode 100644
index 00000000..73375fa0
--- /dev/null
+++ b/server/src/databases/models/CheckInCheckOut.js
@@ -0,0 +1,88 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class CheckInCheckOut extends Model {
+    static associate(models) {
+      // CheckInCheckOut belongs to Booking
+      CheckInCheckOut.belongsTo(models.Booking, {
+        foreignKey: 'booking_id',
+        as: 'booking'
+      });
+
+      // CheckInCheckOut belongs to User (staff who checked in)
+      CheckInCheckOut.belongsTo(models.User, {
+        foreignKey: 'checkin_by',
+        as: 'checked_in_by'
+      });
+
+      // CheckInCheckOut belongs to User (staff who checked out)
+      CheckInCheckOut.belongsTo(models.User, {
+        foreignKey: 'checkout_by',
+        as: 'checked_out_by'
+      });
+    }
+  }
+
+  CheckInCheckOut.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      booking_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      checkin_time: {
+        type: DataTypes.DATE,
+        allowNull: true
+      },
+      checkout_time: {
+        type: DataTypes.DATE,
+        allowNull: true
+      },
+      checkin_by: {
+        type: DataTypes.INTEGER,
+        allowNull: true
+      },
+      checkout_by: {
+        type: DataTypes.INTEGER,
+        allowNull: true
+      },
+      room_condition_checkin: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      room_condition_checkout: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      additional_charges: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        defaultValue: 0,
+        validate: {
+          min: 0
+        }
+      },
+      notes: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'CheckInCheckOut',
+      tableName: 'checkin_checkout',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return CheckInCheckOut;
+};
diff --git a/server/src/databases/models/Favorite.js b/server/src/databases/models/Favorite.js
new file mode 100644
index 00000000..5e57e8c4
--- /dev/null
+++ b/server/src/databases/models/Favorite.js
@@ -0,0 +1,55 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Favorite extends Model {
+    static associate(models) {
+      // Favorite belongs to User
+      Favorite.belongsTo(models.User, {
+        foreignKey: 'user_id',
+        as: 'user',
+      });
+
+      // Favorite belongs to Room
+      Favorite.belongsTo(models.Room, {
+        foreignKey: 'room_id',
+        as: 'room',
+      });
+    }
+  }
+
+  Favorite.init(
+    {
+      id: {
+        type: DataTypes.INTEGER,
+        primaryKey: true,
+        autoIncrement: true,
+      },
+      user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'users',
+          key: 'id',
+        },
+      },
+      room_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'rooms',
+          key: 'id',
+        },
+      },
+    },
+    {
+      sequelize,
+      modelName: 'Favorite',
+      tableName: 'favorites',
+      underscored: true,
+      timestamps: true,
+    }
+  );
+
+  return Favorite;
+};
diff --git a/server/src/databases/models/PasswordResetToken.js b/server/src/databases/models/PasswordResetToken.js
new file mode 100644
index 00000000..f1788730
--- /dev/null
+++ b/server/src/databases/models/PasswordResetToken.js
@@ -0,0 +1,49 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class PasswordResetToken extends Model {
+    static associate(models) {
+      PasswordResetToken.belongsTo(models.User, {
+        foreignKey: 'user_id',
+        as: 'user'
+      });
+    }
+  }
+
+  PasswordResetToken.init(
+    {
+      id: {
+        type: DataTypes.INTEGER,
+        primaryKey: true,
+        autoIncrement: true
+      },
+      user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      token: {
+        type: DataTypes.STRING,
+        allowNull: false,
+        unique: true
+      },
+      expires_at: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      used: {
+        type: DataTypes.BOOLEAN,
+        defaultValue: false
+      }
+    },
+    {
+      sequelize,
+      modelName: 'PasswordResetToken',
+      tableName: 'password_reset_tokens',
+      underscored: true,
+      timestamps: true
+    }
+  );
+
+  return PasswordResetToken;
+};
diff --git a/server/src/databases/models/Payment.js b/server/src/databases/models/Payment.js
new file mode 100644
index 00000000..3431ef82
--- /dev/null
+++ b/server/src/databases/models/Payment.js
@@ -0,0 +1,106 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Payment extends Model {
+    static associate(models) {
+      // Payment belongs to Booking
+      Payment.belongsTo(models.Booking, {
+        foreignKey: 'booking_id',
+        as: 'booking'
+      });
+      
+      // Self-referencing for deposit/remaining payment relationship
+      Payment.belongsTo(models.Payment, {
+        foreignKey: 'related_payment_id',
+        as: 'related_payment'
+      });
+      Payment.hasMany(models.Payment, {
+        foreignKey: 'related_payment_id',
+        as: 'related_payments'
+      });
+    }
+  }
+
+  Payment.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      booking_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      amount: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      payment_method: {
+        type: DataTypes.ENUM(
+          'cash',
+          'credit_card',
+          'debit_card',
+          'bank_transfer',
+          'e_wallet'
+        ),
+        allowNull: false
+      },
+      payment_type: {
+        type: DataTypes.ENUM('full', 'deposit', 'remaining'),
+        allowNull: false,
+        defaultValue: 'full'
+      },
+      deposit_percentage: {
+        type: DataTypes.INTEGER,
+        allowNull: true,
+        validate: {
+          min: 0,
+          max: 100
+        }
+      },
+      related_payment_id: {
+        type: DataTypes.INTEGER,
+        allowNull: true
+      },
+      payment_status: {
+        type: DataTypes.ENUM(
+          'pending',
+          'completed',
+          'failed',
+          'refunded'
+        ),
+        allowNull: false,
+        defaultValue: 'pending'
+      },
+      transaction_id: {
+        type: DataTypes.STRING(100),
+        allowNull: true
+      },
+      payment_date: {
+        type: DataTypes.DATE,
+        allowNull: true
+      },
+      notes: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Payment',
+      tableName: 'payments',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Payment;
+};
diff --git a/server/src/databases/models/Promotion.js b/server/src/databases/models/Promotion.js
new file mode 100644
index 00000000..0d869492
--- /dev/null
+++ b/server/src/databases/models/Promotion.js
@@ -0,0 +1,151 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Promotion extends Model {
+    static associate(models) {
+      // Associations can be defined here if needed
+    }
+
+    isValid() {
+      const now = new Date();
+      return (
+        this.is_active &&
+        now >= this.start_date &&
+        now <= this.end_date &&
+        (this.usage_limit === null ||
+          this.used_count < this.usage_limit)
+      );
+    }
+
+    calculateDiscount(bookingAmount) {
+      if (!this.isValid()) return 0;
+
+      if (
+        this.min_booking_amount &&
+        bookingAmount < this.min_booking_amount
+      ) {
+        return 0;
+      }
+
+      let discount = 0;
+      if (this.discount_type === 'percentage') {
+        discount = (bookingAmount * this.discount_value) / 100;
+      } else if (this.discount_type === 'fixed_amount') {
+        discount = parseFloat(this.discount_value);
+      }
+
+      if (
+        this.max_discount_amount &&
+        discount > this.max_discount_amount
+      ) {
+        discount = parseFloat(this.max_discount_amount);
+      }
+
+      return discount;
+    }
+  }
+
+  Promotion.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      code: {
+        type: DataTypes.STRING(50),
+        allowNull: false,
+        unique: true,
+        validate: {
+          notEmpty: true
+        }
+      },
+      name: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      description: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      discount_type: {
+        type: DataTypes.ENUM('percentage', 'fixed_amount'),
+        allowNull: false
+      },
+      discount_value: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      min_booking_amount: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: true,
+        validate: {
+          min: 0
+        }
+      },
+      max_discount_amount: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: true,
+        validate: {
+          min: 0
+        }
+      },
+      start_date: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      end_date: {
+        type: DataTypes.DATE,
+        allowNull: false,
+        validate: {
+          isAfterStartDate(value) {
+            if (value <= this.start_date) {
+              throw new Error(
+                'End date must be after start date'
+              );
+            }
+          }
+        }
+      },
+      usage_limit: {
+        type: DataTypes.INTEGER,
+        allowNull: true,
+        validate: {
+          min: 1
+        }
+      },
+      used_count: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        defaultValue: 0,
+        validate: {
+          min: 0
+        }
+      },
+      is_active: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Promotion',
+      tableName: 'promotions',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Promotion;
+};
diff --git a/server/src/databases/models/RefreshToken.js b/server/src/databases/models/RefreshToken.js
new file mode 100644
index 00000000..9dd8d6f7
--- /dev/null
+++ b/server/src/databases/models/RefreshToken.js
@@ -0,0 +1,49 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class RefreshToken extends Model {
+    static associate(models) {
+      // RefreshToken belongs to User
+      RefreshToken.belongsTo(models.User, {
+        foreignKey: 'user_id',
+        as: 'user'
+      });
+    }
+  }
+
+  RefreshToken.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      token: {
+        type: DataTypes.STRING(500),
+        allowNull: false,
+        unique: true
+      },
+      expires_at: {
+        type: DataTypes.DATE,
+        allowNull: false
+      }
+    },
+    {
+      sequelize,
+      modelName: 'RefreshToken',
+      tableName: 'refresh_tokens',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: false
+    }
+  );
+
+  return RefreshToken;
+};
diff --git a/server/src/databases/models/Review.js b/server/src/databases/models/Review.js
new file mode 100644
index 00000000..a8380a5e
--- /dev/null
+++ b/server/src/databases/models/Review.js
@@ -0,0 +1,61 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Review extends Model {
+    static associate(models) {
+      Review.belongsTo(models.User, {
+        foreignKey: 'user_id',
+        as: 'user'
+      });
+
+      Review.belongsTo(models.Room, {
+        foreignKey: 'room_id',
+        as: 'room'
+      });
+    }
+  }
+
+  Review.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      room_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      rating: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      comment: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      status: {
+        type: DataTypes.ENUM('pending', 'approved', 'rejected'),
+        allowNull: false,
+        defaultValue: 'pending'
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Review',
+      tableName: 'reviews',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Review;
+};
diff --git a/server/src/databases/models/Role.js b/server/src/databases/models/Role.js
new file mode 100644
index 00000000..a206e5bf
--- /dev/null
+++ b/server/src/databases/models/Role.js
@@ -0,0 +1,49 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Role extends Model {
+    static associate(models) {
+      // Role has many Users
+      Role.hasMany(models.User, {
+        foreignKey: 'role_id',
+        as: 'users'
+      });
+    }
+  }
+
+  Role.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      name: {
+        type: DataTypes.STRING(50),
+        allowNull: false,
+        unique: true,
+        validate: {
+          notEmpty: true,
+          isIn: [['admin', 'staff', 'customer']]
+        }
+      },
+      description: {
+        type: DataTypes.STRING(255),
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Role',
+      tableName: 'roles',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Role;
+};
diff --git a/server/src/databases/models/Room.js b/server/src/databases/models/Room.js
new file mode 100644
index 00000000..53da0405
--- /dev/null
+++ b/server/src/databases/models/Room.js
@@ -0,0 +1,107 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Room extends Model {
+    static associate(models) {
+      // Room belongs to RoomType
+      Room.belongsTo(models.RoomType, {
+        foreignKey: 'room_type_id',
+        as: 'room_type'
+      });
+
+      // Room has many Bookings
+      Room.hasMany(models.Booking, {
+        foreignKey: 'room_id',
+        as: 'bookings'
+      });
+      
+      // Room has many Reviews
+      Room.hasMany(models.Review, {
+        foreignKey: 'room_id',
+        as: 'reviews'
+      });
+
+      // Room has many Favorites
+      Room.hasMany(models.Favorite, {
+        foreignKey: 'room_id',
+        as: 'favorites'
+      });
+    }
+  }
+
+  Room.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      room_type_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      room_number: {
+        type: DataTypes.STRING(20),
+        allowNull: false,
+        unique: true,
+        validate: {
+          notEmpty: true
+        }
+      },
+      floor: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        validate: {
+          min: 1
+        }
+      },
+      status: {
+        type: DataTypes.ENUM(
+          'available',
+          'occupied',
+          'maintenance',
+          'cleaning'
+        ),
+        allowNull: false,
+        defaultValue: 'available'
+      },
+      price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      featured: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: false
+      },
+      images: {
+        type: DataTypes.JSON,
+        allowNull: true
+      },
+      amenities: {
+        type: DataTypes.JSON,
+        allowNull: true
+      },
+      description: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Room',
+      tableName: 'rooms',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Room;
+};
diff --git a/server/src/databases/models/RoomType.js b/server/src/databases/models/RoomType.js
new file mode 100644
index 00000000..5dd2a4dc
--- /dev/null
+++ b/server/src/databases/models/RoomType.js
@@ -0,0 +1,66 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class RoomType extends Model {
+    static associate(models) {
+      // RoomType has many Rooms
+      RoomType.hasMany(models.Room, {
+        foreignKey: 'room_type_id',
+        as: 'rooms'
+      });
+    }
+  }
+
+  RoomType.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      name: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        unique: true,
+        validate: {
+          notEmpty: true
+        }
+      },
+      description: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      base_price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      capacity: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        validate: {
+          min: 1
+        }
+      },
+      amenities: {
+        type: DataTypes.JSON,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'RoomType',
+      tableName: 'room_types',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return RoomType;
+};
diff --git a/server/src/databases/models/Service.js b/server/src/databases/models/Service.js
new file mode 100644
index 00000000..56e4370f
--- /dev/null
+++ b/server/src/databases/models/Service.js
@@ -0,0 +1,63 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class Service extends Model {
+    static associate(models) {
+      // Service has many ServiceUsages
+      Service.hasMany(models.ServiceUsage, {
+        foreignKey: 'service_id',
+        as: 'service_usages'
+      });
+    }
+  }
+
+  Service.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      name: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      description: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      category: {
+        type: DataTypes.STRING(50),
+        allowNull: true
+      },
+      is_active: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'Service',
+      tableName: 'services',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return Service;
+};
diff --git a/server/src/databases/models/ServiceUsage.js b/server/src/databases/models/ServiceUsage.js
new file mode 100644
index 00000000..420de5b1
--- /dev/null
+++ b/server/src/databases/models/ServiceUsage.js
@@ -0,0 +1,81 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class ServiceUsage extends Model {
+    static associate(models) {
+      // ServiceUsage belongs to Booking
+      ServiceUsage.belongsTo(models.Booking, {
+        foreignKey: 'booking_id',
+        as: 'booking'
+      });
+
+      // ServiceUsage belongs to Service
+      ServiceUsage.belongsTo(models.Service, {
+        foreignKey: 'service_id',
+        as: 'service'
+      });
+    }
+  }
+
+  ServiceUsage.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      booking_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      service_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      quantity: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        defaultValue: 1,
+        validate: {
+          min: 1
+        }
+      },
+      unit_price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      total_price: {
+        type: DataTypes.DECIMAL(10, 2),
+        allowNull: false,
+        validate: {
+          min: 0
+        }
+      },
+      usage_date: {
+        type: DataTypes.DATE,
+        allowNull: false,
+        defaultValue: DataTypes.NOW
+      },
+      notes: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'ServiceUsage',
+      tableName: 'service_usages',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return ServiceUsage;
+};
diff --git a/server/src/databases/models/User.js b/server/src/databases/models/User.js
new file mode 100644
index 00000000..ef7fb481
--- /dev/null
+++ b/server/src/databases/models/User.js
@@ -0,0 +1,121 @@
+'use strict';
+const { Model } = require('sequelize');
+
+module.exports = (sequelize, DataTypes) => {
+  class User extends Model {
+    static associate(models) {
+      // User belongs to Role
+      User.belongsTo(models.Role, {
+        foreignKey: 'role_id',
+        as: 'role'
+      });
+
+      // User has many Bookings
+      User.hasMany(models.Booking, {
+        foreignKey: 'user_id',
+        as: 'bookings'
+      });
+
+      // User has many RefreshTokens
+      User.hasMany(models.RefreshToken, {
+        foreignKey: 'user_id',
+        as: 'refresh_tokens'
+      });
+
+      // User has many CheckInCheckOut records as staff
+      User.hasMany(models.CheckInCheckOut, {
+        foreignKey: 'checkin_by',
+        as: 'checkins_processed'
+      });
+
+      User.hasMany(models.CheckInCheckOut, {
+        foreignKey: 'checkout_by',
+        as: 'checkouts_processed'
+      });
+      
+      // User has many Reviews
+      User.hasMany(models.Review, {
+        foreignKey: 'user_id',
+        as: 'reviews'
+      });
+
+      // User has many Favorites
+      User.hasMany(models.Favorite, {
+        foreignKey: 'user_id',
+        as: 'favorites'
+      });
+    }
+
+    toJSON() {
+      const values = { ...this.get() };
+      delete values.password;
+      return values;
+    }
+  }
+
+  User.init(
+    {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: DataTypes.INTEGER
+      },
+      role_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+      },
+      email: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        unique: true,
+        validate: {
+          isEmail: true,
+          notEmpty: true
+        }
+      },
+      password: {
+        type: DataTypes.STRING(255),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      full_name: {
+        type: DataTypes.STRING(100),
+        allowNull: false,
+        validate: {
+          notEmpty: true
+        }
+      },
+      phone: {
+        type: DataTypes.STRING(20),
+        allowNull: true
+      },
+      address: {
+        type: DataTypes.TEXT,
+        allowNull: true
+      },
+      avatar: {
+        type: DataTypes.STRING(255),
+        allowNull: true
+      },
+      is_active: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: true
+      }
+    },
+    {
+      sequelize,
+      modelName: 'User',
+      tableName: 'users',
+      underscored: true,
+      timestamps: true,
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  );
+
+  return User;
+};
diff --git a/server/src/databases/models/index.js b/server/src/databases/models/index.js
new file mode 100644
index 00000000..c98f476e
--- /dev/null
+++ b/server/src/databases/models/index.js
@@ -0,0 +1,53 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const Sequelize = require('sequelize');
+const process = require('process');
+const basename = path.basename(__filename);
+const env = process.env.NODE_ENV || 'development';
+const config = require(__dirname + '/../../config/database.js')[env];
+const db = {};
+
+let sequelize;
+if (config.use_env_variable) {
+  sequelize = new Sequelize(
+    process.env[config.use_env_variable],
+    config
+  );
+} else {
+  sequelize = new Sequelize(
+    config.database,
+    config.username,
+    config.password,
+    config
+  );
+}
+
+fs.readdirSync(__dirname)
+  .filter((file) => {
+    return (
+      file.indexOf('.') !== 0 &&
+      file !== basename &&
+      file.slice(-3) === '.js' &&
+      file.indexOf('.test.js') === -1
+    );
+  })
+  .forEach((file) => {
+    const model = require(path.join(__dirname, file))(
+      sequelize,
+      Sequelize.DataTypes
+    );
+    db[model.name] = model;
+  });
+
+Object.keys(db).forEach((modelName) => {
+  if (db[modelName].associate) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;
diff --git a/server/src/databases/seeders/20250101000001-seed-roles.js b/server/src/databases/seeders/20250101000001-seed-roles.js
new file mode 100644
index 00000000..c9dce81f
--- /dev/null
+++ b/server/src/databases/seeders/20250101000001-seed-roles.js
@@ -0,0 +1,35 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.bulkInsert('roles', [
+      {
+        id: 1,
+        name: 'admin',
+        description: 'Administrator with full system access',
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 2,
+        name: 'staff',
+        description: 
+          'Staff member handling bookings and operations',
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 3,
+        name: 'customer',
+        description: 'Customer who can book rooms',
+        created_at: new Date(),
+        updated_at: new Date()
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('roles', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000002-seed-users.js b/server/src/databases/seeders/20250101000002-seed-users.js
new file mode 100644
index 00000000..20097a8e
--- /dev/null
+++ b/server/src/databases/seeders/20250101000002-seed-users.js
@@ -0,0 +1,95 @@
+'use strict';
+
+const bcrypt = require('bcrypt');
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const hashedPassword = await bcrypt.hash('password123', 10);
+
+    await queryInterface.bulkInsert('users', [
+      {
+        id: 1,
+        role_id: 1,
+        email: 'admin@hotel.com',
+        password: hashedPassword,
+        full_name: 'Admin User',
+        phone: '0901234567',
+        address: '123 Admin Street, District 1, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 2,
+        role_id: 2,
+        email: 'staff@hotel.com',
+        password: hashedPassword,
+        full_name: 'Staff Member',
+        phone: '0902345678',
+        address: '456 Staff Avenue, District 3, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 3,
+        role_id: 2,
+        email: 'staff2@hotel.com',
+        password: hashedPassword,
+        full_name: 'Staff Member 2',
+        phone: '0903456789',
+        address: '789 Staff Road, District 5, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 4,
+        role_id: 3,
+        email: 'customer1@gmail.com',
+        password: hashedPassword,
+        full_name: 'Nguyen Van A',
+        phone: '0904567890',
+        address: '111 Customer Street, District 7, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 5,
+        role_id: 3,
+        email: 'customer2@gmail.com',
+        password: hashedPassword,
+        full_name: 'Tran Thi B',
+        phone: '0905678901',
+        address: '222 Customer Avenue, District 10, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 6,
+        role_id: 3,
+        email: 'customer3@gmail.com',
+        password: hashedPassword,
+        full_name: 'Le Van C',
+        phone: '0906789012',
+        address: '333 Customer Road, Binh Thanh, HCMC',
+        avatar: null,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('users', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000003-seed-room-types.js b/server/src/databases/seeders/20250101000003-seed-room-types.js
new file mode 100644
index 00000000..6b868423
--- /dev/null
+++ b/server/src/databases/seeders/20250101000003-seed-room-types.js
@@ -0,0 +1,95 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // master amenities pool
+    const masterAmenities = [
+      'King Bed',
+      'Double Bed',
+      'Air Conditioning',
+      'Wi‑Fi',
+      'Smart TV',
+      'Private Bathroom',
+      'Mini Fridge',
+      'Work Desk',
+      'Safe',
+      'Balcony',
+      'Coffee Maker',
+      'Bathtub',
+    ];
+
+    const pick = (pool, min, max) => {
+      const count = Math.floor(Math.random() * (max - min + 1)) + min;
+      const copy = [...pool];
+      const out = [];
+      for (let i = 0; i < count && copy.length; i++) {
+        const idx = Math.floor(Math.random() * copy.length);
+        out.push(copy.splice(idx, 1)[0]);
+      }
+      return out;
+    };
+
+    await queryInterface.bulkInsert('room_types', [
+      {
+        id: 1,
+        name: 'Standard Room',
+        description:
+          'Cozy single room with basic amenities, perfect for solo travelers',
+        base_price: 500000,
+        capacity: 1,
+        amenities: JSON.stringify(pick(masterAmenities, 4, 6)),
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+      {
+        id: 2,
+        name: 'Twin Room',
+        description:
+          'Comfortable double room with modern amenities, perfect for couples or friends',
+        base_price: 800000,
+        capacity: 2,
+        amenities: JSON.stringify(pick(masterAmenities, 5, 7)),
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+      {
+        id: 3,
+        name: 'Deluxe Room',
+        description:
+          'Spacious deluxe room with premium amenities and city view',
+        base_price: 1200000,
+        capacity: 2,
+        amenities: JSON.stringify(pick(masterAmenities, 6, 9)),
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+      {
+        id: 4,
+        name: 'Family Room',
+        description:
+          'Spacious family room with separate living area and multiple beds, perfect for families',
+        base_price: 2000000,
+        capacity: 4,
+        amenities: JSON.stringify(pick(masterAmenities, 7, 10)),
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+      {
+        id: 5,
+        name: 'Luxury Room',
+        description:
+          'Luxurious suite with panoramic views and premium services',
+        base_price: 5000000,
+        capacity: 4,
+        amenities: JSON.stringify(pick(masterAmenities, 8, 11)),
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('room_types', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000004-seed-rooms.js b/server/src/databases/seeders/20250101000004-seed-rooms.js
new file mode 100644
index 00000000..7070dd24
--- /dev/null
+++ b/server/src/databases/seeders/20250101000004-seed-rooms.js
@@ -0,0 +1,173 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const rooms = [];
+    
+    // Standard Single Rooms (Floor 1-2)
+    for (let floor = 1; floor <= 2; floor++) {
+      for (let room = 1; room <= 5; room++) {
+        rooms.push({
+          room_type_id: 1,
+          room_number: `${floor}0${room}`,
+          floor: floor,
+          status: 'available',
+          featured: false,
+          price: 500000,
+          images: JSON.stringify([
+            '/uploads/rooms/standard-single-1.png',
+            '/uploads/rooms/standard-single-2.png'
+          ]),
+          description: 
+            `Standard single room on floor ${floor}`,
+          created_at: new Date(),
+          updated_at: new Date()
+        });
+      }
+    }
+
+    // Standard Double Rooms (Floor 3-4)
+    for (let floor = 3; floor <= 4; floor++) {
+      for (let room = 1; room <= 8; room++) {
+        rooms.push({
+          room_type_id: 2,
+          room_number: `${floor}0${room}`,
+          floor: floor,
+          status: 'available',
+          featured: false,
+          price: 800000,
+          images: JSON.stringify([
+            '/uploads/rooms/standard-double-1.png',
+            '/uploads/rooms/standard-double-2.png',
+            '/uploads/rooms/standard-double-3.png'
+          ]),
+          description: 
+            `Standard double room on floor ${floor}`,
+          created_at: new Date(),
+          updated_at: new Date()
+        });
+      }
+    }
+
+    // Deluxe Rooms (Floor 5-7)
+    for (let floor = 5; floor <= 7; floor++) {
+      for (let room = 1; room <= 6; room++) {
+        rooms.push({
+          room_type_id: 3,
+          room_number: `${floor}0${room}`,
+          floor: floor,
+          status: 'available',
+          featured: false,
+          price: 1200000,
+          images: JSON.stringify([
+            '/uploads/rooms/deluxe-1.png',
+            '/uploads/rooms/deluxe-2.png',
+            '/uploads/rooms/deluxe-3.png',
+            '/uploads/rooms/deluxe-4.png'
+          ]),
+          description: 
+            `Deluxe room on floor ${floor} with city view`,
+          created_at: new Date(),
+          updated_at: new Date()
+        });
+      }
+    }
+
+    // Family Suites (Floor 8-9)
+    for (let floor = 8; floor <= 9; floor++) {
+      for (let room = 1; room <= 4; room++) {
+        rooms.push({
+          room_type_id: 4,
+          room_number: `${floor}0${room}`,
+          floor: floor,
+          status: 'available',
+          featured: false,
+          price: 2000000,
+          images: JSON.stringify([
+            '/uploads/rooms/family-suite-1.png',
+            '/uploads/rooms/family-suite-2.png',
+            '/uploads/rooms/family-suite-3.png',
+            '/uploads/rooms/family-suite-4.png',
+            '/uploads/rooms/family-suite-5.png'
+          ]),
+          description: 
+            `Family suite on floor ${floor}`,
+          created_at: new Date(),
+          updated_at: new Date()
+        });
+      }
+    }
+
+    // Presidential Suites (Floor 10)
+    for (let room = 1; room <= 2; room++) {
+      rooms.push({
+        room_type_id: 5,
+        room_number: `100${room}`,
+        floor: 10,
+        status: 'available',
+        featured: false,
+        price: 5000000,
+        images: JSON.stringify([
+          '/uploads/rooms/presidential-1.png',
+          '/uploads/rooms/presidential-2.png',
+          '/uploads/rooms/presidential-3.png',
+          '/uploads/rooms/presidential-4.png',
+          '/uploads/rooms/presidential-5.png',
+          '/uploads/rooms/presidential-6.png'
+        ]),
+        description: 
+          'Presidential suite with panoramic city view',
+        created_at: new Date(),
+        updated_at: new Date()
+      });
+    }
+
+    // Mark some rooms as occupied for realism
+    rooms[0].status = 'occupied';
+    rooms[5].status = 'occupied';
+    rooms[12].status = 'cleaning';
+    rooms[20].status = 'maintenance';
+
+    // Ensure there are always 10 featured rooms in the seed data.
+    // Strategy: prefer higher-tier room types first (presidential ->
+    // family -> deluxe -> double -> single) and mark rooms until
+    // we reach `desiredFeaturedCount`.
+    const desiredFeaturedCount = 10;
+    let featuredMarked = 0;
+
+    // Helper: mark room at index if exists and not already featured
+    const markIf = (idx) => {
+      if (idx >= 0 && idx < rooms.length && !rooms[idx].featured) {
+        rooms[idx].featured = true;
+        featuredMarked += 1;
+      }
+    };
+
+    // Priority order by room_type_id (higher-tier first)
+    const priority = [5, 4, 3, 2, 1];
+
+    for (const typeId of priority) {
+      if (featuredMarked >= desiredFeaturedCount) break;
+
+      // iterate rooms and pick the first ones of this type
+      for (let i = 0; i < rooms.length; i++) {
+        if (rooms[i].room_type_id === typeId) {
+          markIf(i);
+          if (featuredMarked >= desiredFeaturedCount) break;
+        }
+      }
+    }
+
+    // If still not enough, mark remaining rooms starting from end
+    for (let i = rooms.length - 1; i >= 0 && featuredMarked < desiredFeaturedCount; i--) {
+      markIf(i);
+    }
+
+    await queryInterface.bulkInsert('rooms', rooms);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('rooms', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000005-seed-services.js b/server/src/databases/seeders/20250101000005-seed-services.js
new file mode 100644
index 00000000..2bfeffd2
--- /dev/null
+++ b/server/src/databases/seeders/20250101000005-seed-services.js
@@ -0,0 +1,137 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.bulkInsert('services', [
+      // Food & Beverage
+      {
+        id: 1,
+        name: 'Room Service - Breakfast',
+        description: 'Continental breakfast delivered to room',
+        price: 150000,
+        category: 'Food & Beverage',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 2,
+        name: 'Room Service - Lunch',
+        description: 'Lunch menu delivered to room',
+        price: 250000,
+        category: 'Food & Beverage',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 3,
+        name: 'Room Service - Dinner',
+        description: 'Dinner menu delivered to room',
+        price: 300000,
+        category: 'Food & Beverage',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      // Laundry
+      {
+        id: 4,
+        name: 'Laundry Service - Express',
+        description: 'Same-day laundry service (per kg)',
+        price: 100000,
+        category: 'Laundry',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 5,
+        name: 'Laundry Service - Standard',
+        description: 'Next-day laundry service (per kg)',
+        price: 60000,
+        category: 'Laundry',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 6,
+        name: 'Dry Cleaning',
+        description: 'Professional dry cleaning service',
+        price: 80000,
+        category: 'Laundry',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      // Spa & Wellness
+      {
+        id: 7,
+        name: 'Spa - Traditional Massage',
+        description: 'Traditional 60-minute massage',
+        price: 500000,
+        category: 'Spa & Wellness',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      // Transportation
+      {
+        id: 8,
+        name: 'Airport Pickup',
+        description: 'Private car from airport to hotel',
+        price: 400000,
+        category: 'Transportation',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 9,
+        name: 'Airport Drop-off',
+        description: 'Private car from hotel to airport',
+        price: 400000,
+        category: 'Transportation',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 10,
+        name: 'City Tour - Half Day',
+        description: 'Half-day guided city tour',
+        price: 800000,
+        category: 'Transportation',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 11,
+        name: 'Late Check-out',
+        description: 'Late check-out until 18:00',
+        price: 500000,
+        category: 'Room Amenities',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 12,
+        name: 'Early Check-in',
+        description: 'Early check-in from 06:00',
+        price: 500000,
+        category: 'Room Amenities',
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('services', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000006-seed-promotions.js b/server/src/databases/seeders/20250101000006-seed-promotions.js
new file mode 100644
index 00000000..74076a54
--- /dev/null
+++ b/server/src/databases/seeders/20250101000006-seed-promotions.js
@@ -0,0 +1,140 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const now = new Date();
+    const futureDate = new Date();
+    futureDate.setMonth(futureDate.getMonth() + 6);
+
+    await queryInterface.bulkInsert('promotions', [
+      {
+        id: 1,
+        code: 'WELCOME2025',
+        name: 'Welcome 2025',
+        description: 
+          '20% discount for new customers on first booking',
+        discount_type: 'percentage',
+        discount_value: 20,
+        min_booking_amount: 1000000,
+        max_discount_amount: 500000,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: 100,
+        used_count: 15,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 2,
+        code: 'SUMMER2025',
+        name: 'Summer Special',
+        description: 
+          'Fixed 300,000 VND discount for summer bookings',
+        discount_type: 'fixed_amount',
+        discount_value: 300000,
+        min_booking_amount: 2000000,
+        max_discount_amount: null,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: 50,
+        used_count: 8,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 3,
+        code: 'WEEKEND15',
+        name: 'Weekend Getaway',
+        description: '15% off for weekend bookings',
+        discount_type: 'percentage',
+        discount_value: 15,
+        min_booking_amount: 800000,
+        max_discount_amount: 400000,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: null,
+        used_count: 25,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 4,
+        code: 'FAMILY500',
+        name: 'Family Package',
+        description: 
+          '500,000 VND off for family suite bookings',
+        discount_type: 'fixed_amount',
+        discount_value: 500000,
+        min_booking_amount: 3000000,
+        max_discount_amount: null,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: 30,
+        used_count: 5,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 5,
+        code: 'LONGSTAY25',
+        name: 'Long Stay Discount',
+        description: '25% off for bookings 5 nights or more',
+        discount_type: 'percentage',
+        discount_value: 25,
+        min_booking_amount: 5000000,
+        max_discount_amount: 2000000,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: null,
+        used_count: 3,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 6,
+        code: 'EARLYBIRD10',
+        name: 'Early Bird Special',
+        description: 
+          '10% discount for bookings 30 days in advance',
+        discount_type: 'percentage',
+        discount_value: 10,
+        min_booking_amount: 500000,
+        max_discount_amount: 300000,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: null,
+        used_count: 42,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 7,
+        code: 'VIP1000',
+        name: 'VIP Member Exclusive',
+        description: '1,000,000 VND off for VIP members',
+        discount_type: 'fixed_amount',
+        discount_value: 1000000,
+        min_booking_amount: 10000000,
+        max_discount_amount: null,
+        start_date: now,
+        end_date: futureDate,
+        usage_limit: 10,
+        used_count: 1,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('promotions', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000007-seed-banners.js b/server/src/databases/seeders/20250101000007-seed-banners.js
new file mode 100644
index 00000000..5404f8d4
--- /dev/null
+++ b/server/src/databases/seeders/20250101000007-seed-banners.js
@@ -0,0 +1,94 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const now = new Date();
+    const futureDate = new Date();
+    futureDate.setMonth(futureDate.getMonth() + 6);
+
+    await queryInterface.bulkInsert('banners', [
+      {
+        id: 1,
+        title: 'Welcome to Paradise Hotel',
+        description: 
+          'Experience luxury and comfort in the heart of the city',
+        image_url: '/uploads/banners/banner-1.png',
+        link_url: '/rooms',
+        position: 'home',
+        display_order: 1,
+        is_active: true,
+        start_date: now,
+        end_date: futureDate,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 2,
+        title: 'Located Near City Center',
+        description: 
+          'Book now and save big on your summer vacation',
+        image_url: '/uploads/banners/banner-2.png',
+        link_url: '/promotions',
+        position: 'home',
+        display_order: 2,
+        is_active: true,
+        start_date: now,
+        end_date: futureDate,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 3,
+        title: 'Summer Promotion - Up to 30% Off',
+        description: 
+          'Indulge in ultimate luxury with our ' +
+          'presidential suite',
+        image_url: '/uploads/banners/banner-3.png',
+        link_url: '/rooms/presidential-suite',
+        position: 'home',
+        display_order: 3,
+        is_active: true,
+        start_date: now,
+        end_date: futureDate,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 4,
+        title: 'Presidential Suite',
+        description: 
+          'Relax and rejuvenate at our world-class spa',
+        image_url: '/uploads/banners/banner-4.png',
+        link_url: '/services#spa',
+        position: 'home',
+        display_order: 4,
+        is_active: true,
+        start_date: now,
+        end_date: futureDate,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 5,
+        title: 'Family Package Deal',
+        description: 
+          'Perfect getaway for the whole family with ' +
+          'special rates',
+        image_url: '/uploads/banners/banner-5.png',
+        link_url: '/rooms?type=family',
+        position: 'home',
+        display_order: 5,
+        is_active: true,
+        start_date: now,
+        end_date: futureDate,
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('banners', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000008-seed-bookings.js b/server/src/databases/seeders/20250101000008-seed-bookings.js
new file mode 100644
index 00000000..9023887d
--- /dev/null
+++ b/server/src/databases/seeders/20250101000008-seed-bookings.js
@@ -0,0 +1,124 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    const tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    const nextWeek = new Date(now);
+    nextWeek.setDate(nextWeek.getDate() + 7);
+
+    const inTwoDays = new Date(now);
+    inTwoDays.setDate(inTwoDays.getDate() + 2);
+
+    const inFiveDays = new Date(now);
+    inFiveDays.setDate(inFiveDays.getDate() + 5);
+
+    // Query existing room ids to avoid FK issues if ids differ
+    const [rooms] = await queryInterface.sequelize.query(
+      'SELECT id FROM rooms ORDER BY id ASC'
+    );
+
+    if (!rooms || rooms.length === 0) {
+      throw new Error('No rooms present. Run room seeders before bookings.');
+    }
+
+    const pickRoom = (idx) => rooms[idx % rooms.length].id;
+
+    await queryInterface.bulkInsert('bookings', [
+      // Past booking (checked out)
+      {
+        booking_number: 'BK2025010001',
+        user_id: 4,
+        room_id: pickRoom(0),
+        check_in_date: new Date('2025-01-15T14:00:00'),
+        check_out_date: new Date('2025-01-18T12:00:00'),
+        num_guests: 1,
+        total_price: 1500000,
+        status: 'checked_out',
+        special_requests: null,
+        created_at: new Date('2025-01-10'),
+        updated_at: new Date('2025-01-18'),
+      },
+      // Current booking (checked in)
+      {
+        booking_number: 'BK2025010002',
+        user_id: 5,
+        room_id: pickRoom(1),
+        check_in_date: yesterday,
+        check_out_date: inTwoDays,
+        num_guests: 2,
+        total_price: 2400000,
+        status: 'checked_in',
+        special_requests: 'Late check-out if possible',
+        created_at: new Date('2025-01-20'),
+        updated_at: now,
+      },
+      // Upcoming confirmed booking
+      {
+        booking_number: 'BK2025010003',
+        user_id: 6,
+        room_id: pickRoom(2),
+        check_in_date: inTwoDays,
+        check_out_date: inFiveDays,
+        num_guests: 2,
+        total_price: 3600000,
+        status: 'confirmed',
+        special_requests: 'High floor room with city view',
+        created_at: new Date('2025-01-22'),
+        updated_at: new Date('2025-01-22'),
+      },
+      // Pending booking
+      {
+        booking_number: 'BK2025010004',
+        user_id: 4,
+        room_id: pickRoom(3),
+        check_in_date: tomorrow,
+        check_out_date: inFiveDays,
+        num_guests: 4,
+        total_price: 8000000,
+        status: 'pending',
+        special_requests: 'Need baby cot and extra pillows',
+        created_at: now,
+        updated_at: now,
+      },
+      // Upcoming booking for next week
+      {
+        booking_number: 'BK2025010005',
+        user_id: 5,
+        room_id: pickRoom(4),
+        check_in_date: nextWeek,
+        check_out_date: new Date(nextWeek.getTime() + 3 * 24 * 60 * 60 * 1000),
+        num_guests: 2,
+        total_price: 15000000,
+        status: 'confirmed',
+        special_requests: 'Champagne and flowers for anniversary',
+        created_at: new Date('2025-01-25'),
+        updated_at: new Date('2025-01-25'),
+      },
+      // Cancelled booking
+      {
+        booking_number: 'BK2025010006',
+        user_id: 6,
+        room_id: pickRoom(5),
+        check_in_date: new Date('2025-02-10T14:00:00'),
+        check_out_date: new Date('2025-02-12T12:00:00'),
+        num_guests: 2,
+        total_price: 1600000,
+        status: 'cancelled',
+        special_requests: null,
+        created_at: new Date('2025-01-20'),
+        updated_at: new Date('2025-01-28'),
+      },
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('bookings', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000009-seed-payments.js b/server/src/databases/seeders/20250101000009-seed-payments.js
new file mode 100644
index 00000000..93bf3186
--- /dev/null
+++ b/server/src/databases/seeders/20250101000009-seed-payments.js
@@ -0,0 +1,86 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.bulkInsert('payments', [
+      {
+        id: 1,
+        booking_id: 1,
+        amount: 1500000,
+        payment_method: 'credit_card',
+        payment_status: 'completed',
+        transaction_id: 'TXN2025011501234',
+        payment_date: new Date('2025-01-15T10:30:00'),
+        notes: 'Paid in full at check-in',
+        created_at: new Date('2025-01-15'),
+        updated_at: new Date('2025-01-15')
+      },
+      {
+        id: 2,
+        booking_id: 2,
+        amount: 2400000,
+        payment_method: 'bank_transfer',
+        payment_status: 'completed',
+        transaction_id: 'TXN2025012801567',
+        payment_date: new Date('2025-01-28T09:15:00'),
+        notes: 'Bank transfer confirmed',
+        created_at: new Date('2025-01-28'),
+        updated_at: new Date('2025-01-28')
+      },
+      {
+        id: 3,
+        booking_id: 3,
+        amount: 1800000,
+        payment_method: 'e_wallet',
+        payment_status: 'completed',
+        transaction_id: 'TXN2025012201890',
+        payment_date: new Date('2025-01-22T14:20:00'),
+        notes: '50% deposit paid',
+        created_at: new Date('2025-01-22'),
+        updated_at: new Date('2025-01-22')
+      },
+      {
+        id: 4,
+        booking_id: 4,
+        amount: 8000000,
+        payment_method: 'credit_card',
+        payment_status: 'pending',
+        transaction_id: null,
+        payment_date: null,
+        notes: 'Awaiting payment confirmation',
+        created_at: new Date(),
+        updated_at: new Date()
+      },
+      {
+        id: 5,
+        booking_id: 5,
+        amount: 7500000,
+        payment_method: 'bank_transfer',
+        payment_status: 'completed',
+        transaction_id: 'TXN2025012502345',
+        payment_date: new Date('2025-01-25T11:45:00'),
+        notes: '50% deposit paid, balance due at check-in',
+        created_at: new Date('2025-01-25'),
+        updated_at: new Date('2025-01-25')
+      },
+      {
+        id: 6,
+        booking_id: 6,
+        amount: 1600000,
+        payment_method: 'credit_card',
+        payment_status: 'refunded',
+        transaction_id: 'TXN2025012003456',
+        payment_date: new Date('2025-01-20T16:00:00'),
+        notes: 
+          'Booking cancelled, full refund processed',
+        created_at: new Date('2025-01-20'),
+        updated_at: new Date('2025-01-28')
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('payments', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000010-seed-service-usages.js b/server/src/databases/seeders/20250101000010-seed-service-usages.js
new file mode 100644
index 00000000..7ee24f89
--- /dev/null
+++ b/server/src/databases/seeders/20250101000010-seed-service-usages.js
@@ -0,0 +1,153 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // We'll resolve booking ids and service ids at runtime to avoid FK
+    // issues regardless of auto-increment / insertion order.
+    const usages = [
+      // booking_number, service_name, rest of fields
+      {
+        booking_number: 'BK2025010001',
+        service_name: 'Dịch vụ phòng - Bữa sáng',
+        quantity: 2,
+        unit_price: 150000,
+        total_price: 300000,
+        usage_date: new Date('2025-01-16T07:30:00'),
+        notes: 'Breakfast for 2 days',
+        created_at: new Date('2025-01-16'),
+        updated_at: new Date('2025-01-16'),
+      },
+      {
+        booking_number: 'BK2025010001',
+        service_name: 'Dịch vụ giặt ủi - Thông thường',
+        quantity: 3,
+        unit_price: 60000,
+        total_price: 180000,
+        usage_date: new Date('2025-01-17T10:00:00'),
+        notes: 'Regular laundry service',
+        created_at: new Date('2025-01-17'),
+        updated_at: new Date('2025-01-17'),
+      },
+      {
+        booking_number: 'BK2025010002',
+        service_name: 'Dịch vụ phòng - Bữa sáng',
+        quantity: 1,
+        unit_price: 150000,
+        total_price: 150000,
+        usage_date: new Date('2025-01-29T08:00:00'),
+        notes: 'Room service breakfast',
+        created_at: new Date('2025-01-29'),
+        updated_at: new Date('2025-01-29'),
+      },
+      {
+        booking_number: 'BK2025010002',
+        service_name: 'Spa - Massage truyền thống',
+        quantity: 1,
+        unit_price: 500000,
+        total_price: 500000,
+        usage_date: new Date('2025-01-29T15:00:00'),
+        notes: 'Traditional massage booking',
+        created_at: new Date('2025-01-29'),
+        updated_at: new Date('2025-01-29'),
+      },
+      {
+        booking_number: 'BK2025010002',
+        service_name: 'Trả phòng muộn',
+        quantity: 1,
+        unit_price: 500000,
+        total_price: 500000,
+        usage_date: new Date('2025-01-30T12:00:00'),
+        notes: 'Late check-out requested',
+        created_at: new Date('2025-01-30'),
+        updated_at: new Date('2025-01-30'),
+      },
+      {
+        booking_number: 'BK2025010003',
+        service_name: 'Đón sân bay',
+        quantity: 1,
+        unit_price: 400000,
+        total_price: 400000,
+        usage_date: new Date('2025-01-31'),
+        notes: 'Airport pickup pre-booked',
+        created_at: new Date('2025-01-22'),
+        updated_at: new Date('2025-01-22'),
+      },
+      {
+        booking_number: 'BK2025010005',
+        service_name: 'Đón sân bay',
+        quantity: 1,
+        unit_price: 400000,
+        total_price: 400000,
+        usage_date: new Date('2025-02-05'),
+        notes: 'Airport pickup for anniversary trip',
+        created_at: new Date('2025-01-25'),
+        updated_at: new Date('2025-01-25'),
+      },
+      {
+        booking_number: 'BK2025010005',
+        service_name: 'Spa - Liệu pháp hương thơm',
+        quantity: 1,
+        unit_price: 700000,
+        total_price: 700000,
+        usage_date: new Date('2025-02-06T16:00:00'),
+        notes: 'Aromatherapy session for couple',
+        created_at: new Date('2025-01-25'),
+        updated_at: new Date('2025-01-25'),
+      },
+    ];
+
+    // Resolve bookings and services
+    const bookingNumbers = Array.from(new Set(usages.map((u) => u.booking_number)));
+    const serviceNames = Array.from(new Set(usages.map((u) => u.service_name)));
+
+    const [bookingsRows] = await queryInterface.sequelize.query(
+      `SELECT id, booking_number FROM bookings WHERE booking_number IN (${bookingNumbers
+        .map(() => '?')
+        .join(',')})`,
+      { replacements: bookingNumbers }
+    );
+
+    const [servicesRows] = await queryInterface.sequelize.query(
+      `SELECT id, name FROM services WHERE name IN (${serviceNames.map(() => '?').join(',')})`,
+      { replacements: serviceNames }
+    );
+
+    const bookingIdByNumber = {};
+    bookingsRows.forEach((r) => {
+      bookingIdByNumber[r.booking_number] = r.id;
+    });
+
+    const serviceIdByName = {};
+    servicesRows.forEach((r) => {
+      serviceIdByName[r.name] = r.id;
+    });
+
+    const records = usages
+      .map((u) => {
+        const booking_id = bookingIdByNumber[u.booking_number] || null;
+        const service_id = serviceIdByName[u.service_name] || null;
+        if (!booking_id || !service_id) return null;
+        return {
+          booking_id,
+          service_id,
+          quantity: u.quantity,
+          unit_price: u.unit_price,
+          total_price: u.total_price,
+          usage_date: u.usage_date,
+          notes: u.notes,
+          created_at: u.created_at,
+          updated_at: u.updated_at,
+        };
+      })
+      .filter(Boolean);
+
+    if (records.length > 0) {
+      await queryInterface.bulkInsert('service_usages', records);
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('service_usages', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000011-seed-checkin-checkout.js b/server/src/databases/seeders/20250101000011-seed-checkin-checkout.js
new file mode 100644
index 00000000..01d11920
--- /dev/null
+++ b/server/src/databases/seeders/20250101000011-seed-checkin-checkout.js
@@ -0,0 +1,49 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.bulkInsert('checkin_checkout', [
+      // Completed check-in and check-out (booking 1)
+      {
+        id: 1,
+        booking_id: 1,
+        checkin_time: new Date('2025-01-15T14:30:00'),
+        checkout_time: new Date('2025-01-18T11:45:00'),
+        checkin_by: 2,
+        checkout_by: 3,
+        room_condition_checkin: 
+          'Room in perfect condition. All amenities checked.',
+        room_condition_checkout: 
+          'Room left in good condition. Mini bar consumed ' +
+          '2 items (added to bill).',
+        additional_charges: 50000,
+        notes: 
+          'Guest very satisfied. Requested early breakfast.',
+        created_at: new Date('2025-01-15'),
+        updated_at: new Date('2025-01-18')
+      },
+      // Only checked in (booking 2)
+      {
+        id: 2,
+        booking_id: 2,
+        checkin_time: new Date('2025-01-28T15:15:00'),
+        checkout_time: null,
+        checkin_by: 2,
+        checkout_by: null,
+        room_condition_checkin: 
+          'Room prepared and checked. Welcome package placed.',
+        room_condition_checkout: null,
+        additional_charges: 0,
+        notes: 
+          'Guest requested late check-out. Approved.',
+        created_at: new Date('2025-01-28'),
+        updated_at: new Date('2025-01-30')
+      }
+    ]);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('checkin_checkout', null, {});
+  }
+};
diff --git a/server/src/databases/seeders/20250101000012-seed-reviews.js b/server/src/databases/seeders/20250101000012-seed-reviews.js
new file mode 100644
index 00000000..604aa75e
--- /dev/null
+++ b/server/src/databases/seeders/20250101000012-seed-reviews.js
@@ -0,0 +1,104 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Seeder} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const now = new Date();
+
+    // Fetch some existing room ids to avoid FK constraint errors.
+    const [rooms] = await queryInterface.sequelize.query(
+      'SELECT id FROM rooms ORDER BY id ASC LIMIT 20'
+    );
+
+    if (!rooms || rooms.length === 0) {
+      throw new Error(
+        'No rooms found in database. Please run rooms seeders before seeding reviews.'
+      );
+    }
+
+    // simple helper to pick a room id by index
+    const roomId = (idx) => rooms[idx % rooms.length].id;
+
+    const reviews = [
+      {
+        user_id: 4,
+        room_id: roomId(0),
+        rating: 5,
+        comment: 'Clean room, friendly staff. Great experience!',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 5,
+        room_id: roomId(1),
+        rating: 4,
+        comment: 'Convenient location, small but cozy room.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 6,
+        room_id: roomId(2),
+        rating: 5,
+        comment: 'Beautiful view, delicious breakfast. Will return.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 4,
+        room_id: roomId(3),
+        rating: 3,
+        comment:
+          'Room a bit noisy near elevator, but amenities are complete.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 5,
+        room_id: roomId(4),
+        rating: 4,
+        comment: 'Good service, reasonable prices.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 6,
+        room_id: roomId(5),
+        rating: 5,
+        comment: 'Very spacious suite, perfect for families.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 4,
+        room_id: roomId(6),
+        rating: 2,
+        comment: 'Some old equipment, needs maintenance.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+      {
+        user_id: 5,
+        room_id: roomId(7),
+        rating: 4,
+        comment: 'Reception staff very helpful, quick check-in.',
+        status: 'approved',
+        created_at: now,
+        updated_at: now,
+      },
+    ];
+
+    await queryInterface.bulkInsert('reviews', reviews);
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete('reviews', null, {});
+  },
+};
diff --git a/server/src/databases/seeders/20251113000002-populate-room-amenities.js b/server/src/databases/seeders/20251113000002-populate-room-amenities.js
new file mode 100644
index 00000000..fba63ddf
--- /dev/null
+++ b/server/src/databases/seeders/20251113000002-populate-room-amenities.js
@@ -0,0 +1,44 @@
+'use strict';
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    // Populate room amenities from the room_types table where available
+    // This uses a JOIN update; works on MySQL/MariaDB. If using Postgres,
+    // replace with appropriate UPDATE ... FROM syntax.
+    const dialect = queryInterface.sequelize.getDialect();
+
+    if (dialect === 'mysql' || dialect === 'mariadb') {
+      await queryInterface.sequelize.query(
+        `UPDATE rooms r
+         JOIN room_types rt ON r.room_type_id = rt.id
+         SET r.amenities = rt.amenities
+         WHERE rt.amenities IS NOT NULL`
+      );
+    } else if (dialect === 'postgres') {
+      await queryInterface.sequelize.query(
+        `UPDATE rooms
+         SET amenities = rt.amenities
+         FROM room_types rt
+         WHERE rooms.room_type_id = rt.id
+           AND rt.amenities IS NOT NULL`
+      );
+    } else {
+      // Generic fallback: fetch rows and update individually
+      const [roomTypes] = await queryInterface.sequelize.query(
+        `SELECT id, amenities FROM room_types WHERE amenities IS NOT NULL`
+      );
+
+      for (const rt of roomTypes) {
+        await queryInterface.bulkUpdate(
+          'rooms',
+          { amenities: rt.amenities },
+          { room_type_id: rt.id }
+        );
+      }
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkUpdate('rooms', { amenities: null }, {});
+  },
+};
diff --git a/server/src/middlewares/auth.js b/server/src/middlewares/auth.js
new file mode 100644
index 00000000..3eeb06b7
--- /dev/null
+++ b/server/src/middlewares/auth.js
@@ -0,0 +1,94 @@
+const jwt = require('jsonwebtoken');
+const { User } = require('../databases/models');
+
+/**
+ * Verify JWT token and attach user to request
+ */
+const authenticateToken = async (req, res, next) => {
+  try {
+    // Get token from header
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN
+
+    if (!token) {
+      return res.status(401).json({
+        status: 'error',
+        message: 'Access token is required'
+      });
+    }
+
+    // Verify token
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+
+    // Get user from database
+    const user = await User.findByPk(decoded.userId, {
+      attributes: { exclude: ['password'] }
+    });
+
+    if (!user) {
+      return res.status(401).json({
+        status: 'error',
+        message: 'User not found'
+      });
+    }
+
+    // Attach user to request
+    req.user = user;
+    next();
+  } catch (error) {
+    if (error.name === 'TokenExpiredError') {
+      return res.status(401).json({
+        status: 'error',
+        message: 'Token expired'
+      });
+    }
+
+    if (error.name === 'JsonWebTokenError') {
+      return res.status(401).json({
+        status: 'error',
+        message: 'Invalid token'
+      });
+    }
+
+    next(error);
+  }
+};
+
+/**
+ * Check if user has required role
+ */
+const authorizeRoles = (...roles) => {
+  return async (req, res, next) => {
+    try {
+      if (!req.user) {
+        return res.status(401).json({
+          status: 'error',
+          message: 'Authentication required'
+        });
+      }
+
+      // Get user role
+      const userRole = req.user.role_id;
+      
+      // Map role IDs to role names
+      const roleMap = { 1: 'admin', 2: 'staff', 3: 'customer' };
+      const userRoleName = roleMap[userRole];
+
+      if (!roles.includes(userRoleName)) {
+        return res.status(403).json({
+          status: 'error',
+          message: 'You do not have permission to access this resource'
+        });
+      }
+
+      next();
+    } catch (error) {
+      next(error);
+    }
+  };
+};
+
+module.exports = {
+  authenticateToken,
+  authorizeRoles
+};
diff --git a/server/src/middlewares/errorHandler.js b/server/src/middlewares/errorHandler.js
new file mode 100644
index 00000000..5c6e416d
--- /dev/null
+++ b/server/src/middlewares/errorHandler.js
@@ -0,0 +1,66 @@
+/**
+ * Global Error Handler Middleware
+ */
+const errorHandler = (err, req, res, next) => {
+  // Log error for debugging
+  console.error('Error:', {
+    message: err.message,
+    stack: process.env.NODE_ENV === 'development' ? err.stack : undefined,
+    path: req.path,
+    method: req.method
+  });
+
+  // Default error status
+  const statusCode = err.statusCode || 500;
+  const status = err.status || 'error';
+
+  // Sequelize validation errors
+  if (err.name === 'SequelizeValidationError') {
+    return res.status(400).json({
+      status: 'error',
+      message: 'Validation error',
+      errors: err.errors.map(e => ({
+        field: e.path,
+        message: e.message
+      }))
+    });
+  }
+
+  // Sequelize unique constraint errors
+  if (err.name === 'SequelizeUniqueConstraintError') {
+    return res.status(400).json({
+      status: 'error',
+      message: 'Duplicate entry',
+      errors: err.errors.map(e => ({
+        field: e.path,
+        message: `${e.path} already exists`
+      }))
+    });
+  }
+
+  // JWT errors
+  if (err.name === 'JsonWebTokenError') {
+    return res.status(401).json({
+      status: 'error',
+      message: 'Invalid token'
+    });
+  }
+
+  if (err.name === 'TokenExpiredError') {
+    return res.status(401).json({
+      status: 'error',
+      message: 'Token expired'
+    });
+  }
+
+  // Send error response
+  res.status(statusCode).json({
+    status,
+    message: err.message || 'Internal server error',
+    ...(process.env.NODE_ENV === 'development' && { 
+      stack: err.stack 
+    })
+  });
+};
+
+module.exports = errorHandler;
diff --git a/server/src/middlewares/upload.js b/server/src/middlewares/upload.js
new file mode 100644
index 00000000..4cb90591
--- /dev/null
+++ b/server/src/middlewares/upload.js
@@ -0,0 +1,45 @@
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+
+// Create uploads directory if it doesn't exist
+const uploadsDir = path.join(__dirname, '../../uploads/rooms');
+if (!fs.existsSync(uploadsDir)) {
+  fs.mkdirSync(uploadsDir, { recursive: true });
+}
+
+// Configure storage
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, uploadsDir);
+  },
+  filename: (req, file, cb) => {
+    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
+    const ext = path.extname(file.originalname);
+    cb(null, 'room-' + uniqueSuffix + ext);
+  }
+});
+
+// File filter - only images
+const fileFilter = (req, file, cb) => {
+  const allowedTypes = /jpeg|jpg|png|gif|webp/;
+  const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
+  const mimetype = allowedTypes.test(file.mimetype);
+
+  if (extname && mimetype) {
+    cb(null, true);
+  } else {
+    cb(new Error('Only image files are allowed (jpeg, jpg, png, gif, webp)'));
+  }
+};
+
+// Configure multer
+const upload = multer({
+  storage: storage,
+  fileFilter: fileFilter,
+  limits: {
+    fileSize: 5 * 1024 * 1024, // 5MB max file size
+  }
+});
+
+module.exports = upload;
diff --git a/server/src/middlewares/validate.js b/server/src/middlewares/validate.js
new file mode 100644
index 00000000..8e01d3fe
--- /dev/null
+++ b/server/src/middlewares/validate.js
@@ -0,0 +1,23 @@
+const { validationResult } = require('express-validator');
+
+/**
+ * Middleware to check validation results
+ */
+const validate = (req, res, next) => {
+  const errors = validationResult(req);
+  
+  if (!errors.isEmpty()) {
+    return res.status(400).json({
+      status: 'error',
+      message: 'Validation failed',
+      errors: errors.array().map(err => ({
+        field: err.path || err.param,
+        message: err.msg
+      }))
+    });
+  }
+  
+  next();
+};
+
+module.exports = validate;
diff --git a/server/src/repositories/authRepository.js b/server/src/repositories/authRepository.js
new file mode 100644
index 00000000..4f1d5799
--- /dev/null
+++ b/server/src/repositories/authRepository.js
@@ -0,0 +1,176 @@
+const { 
+  User, 
+  RefreshToken, 
+  Role, 
+  PasswordResetToken 
+} = require('../databases/models');
+const { Op } = require('sequelize');
+
+/**
+ * Auth Repository - Data access layer
+ * Handles database operations related to authentication
+ */
+class AuthRepository {
+  /**
+   * Find user by email
+   */
+  async findUserByEmail(email, includeRole = false, includePassword = false) {
+    const options = { 
+      where: { email } 
+    };
+
+    // Include password for login/authentication purposes
+    if (includePassword) {
+      options.attributes = { exclude: [] }; // Include all attributes including password
+    }
+
+    if (includeRole) {
+      options.include = [{
+        model: Role,
+        as: 'role',
+        attributes: ['id', 'name']
+      }];
+    }
+
+    return await User.findOne(options);
+  }
+
+  /**
+   * Find user by ID
+   */
+  async findUserById(userId, includeRole = false, includePassword = false) {
+    // By default exclude password from returned attributes for safety.
+    const options = {};
+
+    if (!includePassword) {
+      options.attributes = { exclude: ['password'] };
+    }
+
+    if (includeRole) {
+      options.include = [{
+        model: Role,
+        as: 'role',
+        attributes: ['id', 'name']
+      }];
+    }
+
+    return await User.findByPk(userId, options);
+  }
+
+  /**
+   * Create new user
+   */
+  async createUser(userData) {
+    return await User.create(userData);
+  }
+
+  /**
+   * Update user password
+   */
+  async updateUserPassword(userId, hashedPassword) {
+    const user = await User.findByPk(userId);
+    if (!user) {
+      throw new Error('User not found');
+    }
+    return await user.update({ password: hashedPassword });
+  }
+
+  /**
+   * Save refresh token
+   */
+  async saveRefreshToken(userId, token, expiresAt) {
+    return await RefreshToken.create({
+      user_id: userId,
+      token,
+      expires_at: expiresAt
+    });
+  }
+
+  /**
+   * Find refresh token
+   */
+  async findRefreshToken(token, userId) {
+    return await RefreshToken.findOne({
+      where: { 
+        token,
+        user_id: userId
+      }
+    });
+  }
+
+  /**
+   * Delete refresh token
+   */
+  async deleteRefreshToken(token) {
+    return await RefreshToken.destroy({
+      where: { token }
+    });
+  }
+
+  /**
+   * Delete all refresh tokens for user
+   */
+  async deleteAllUserRefreshTokens(userId) {
+    return await RefreshToken.destroy({
+      where: { user_id: userId }
+    });
+  }
+
+  /**
+   * Save password reset token
+   */
+  async savePasswordResetToken(userId, hashedToken, expiresAt) {
+    // Delete old tokens
+    await this.deletePasswordResetTokensByUser(userId);
+
+    // Create new token
+    return await PasswordResetToken.create({
+      user_id: userId,
+      token: hashedToken,
+      expires_at: expiresAt
+    });
+  }
+
+  /**
+   * Find valid password reset token
+   */
+  async findValidPasswordResetToken(hashedToken) {
+    return await PasswordResetToken.findOne({
+      where: {
+        token: hashedToken,
+        expires_at: {
+          [Op.gt]: new Date()
+        }
+      }
+    });
+  }
+
+  /**
+   * Delete password reset token
+   */
+  async deletePasswordResetToken(tokenId) {
+    const token = await PasswordResetToken.findByPk(tokenId);
+    if (token) {
+      return await token.destroy();
+    }
+  }
+
+  /**
+   * Delete all password reset tokens for user
+   */
+  async deletePasswordResetTokensByUser(userId) {
+    return await PasswordResetToken.destroy({
+      where: { user_id: userId }
+    });
+  }
+
+  /**
+   * Check if email exists
+   */
+  async isEmailExists(email) {
+    const user = await User.findOne({ where: { email } });
+    return !!user;
+  }
+}
+
+module.exports = new AuthRepository();
diff --git a/server/src/routes/authRoutes.js b/server/src/routes/authRoutes.js
new file mode 100644
index 00000000..92416a40
--- /dev/null
+++ b/server/src/routes/authRoutes.js
@@ -0,0 +1,77 @@
+const express = require('express');
+const router = express.Router();
+
+const authController = require('../controllers/authController');
+const { authenticateToken } = require('../middlewares/auth');
+const validate = require('../middlewares/validate');
+const {
+  registerValidation,
+  loginValidation,
+  refreshTokenValidation
+} = require('../validators/authValidator');
+
+/**
+ * @route   POST /api/auth/register
+ * @desc    Register new user
+ * @access  Public
+ */
+router.post(
+  '/register',
+  registerValidation,
+  validate,
+  authController.register
+);
+
+/**
+ * @route   POST /api/auth/login
+ * @desc    Login user
+ * @access  Public
+ */
+router.post(
+  '/login',
+  loginValidation,
+  validate,
+  authController.login
+);
+
+/**
+ * @route   POST /api/auth/refresh-token
+ * @desc    Refresh access token
+ * @access  Public
+ */
+router.post(
+  '/refresh-token',
+  refreshTokenValidation,
+  validate,
+  authController.refreshAccessToken
+);
+
+/**
+ * @route   POST /api/auth/logout
+ * @desc    Logout user
+ * @access  Public
+ */
+router.post('/logout', authController.logout);
+
+/**
+ * @route   GET /api/auth/profile
+ * @desc    Get current user profile
+ * @access  Private
+ */
+router.get('/profile', authenticateToken, authController.getProfile);
+
+/**
+ * @route   POST /api/auth/forgot-password
+ * @desc    Send password reset link
+ * @access  Public
+ */
+router.post('/forgot-password', authController.forgotPassword);
+
+/**
+ * @route   POST /api/auth/reset-password
+ * @desc    Reset password with token
+ * @access  Public
+ */
+router.post('/reset-password', authController.resetPassword);
+
+module.exports = router;
diff --git a/server/src/routes/bannerRoutes.js b/server/src/routes/bannerRoutes.js
new file mode 100644
index 00000000..0bc6e0c0
--- /dev/null
+++ b/server/src/routes/bannerRoutes.js
@@ -0,0 +1,34 @@
+const express = require('express');
+const router = express.Router();
+const bannerController = require('../controllers/bannerController');
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+
+/**
+ * Banner Routes
+ */
+
+// Public routes
+router.get('/', bannerController.getBanners);
+router.get('/:id', bannerController.getBannerById);
+
+// Admin routes
+router.post(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin'),
+  bannerController.createBanner
+);
+router.put(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  bannerController.updateBanner
+);
+router.delete(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  bannerController.deleteBanner
+);
+
+module.exports = router;
diff --git a/server/src/routes/bookingRoutes.js b/server/src/routes/bookingRoutes.js
new file mode 100644
index 00000000..db23505c
--- /dev/null
+++ b/server/src/routes/bookingRoutes.js
@@ -0,0 +1,44 @@
+const express = require('express');
+const router = express.Router();
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+const bookingController = require('../controllers/bookingController');
+
+// Get all bookings (Admin/Staff only)
+// GET /api/bookings
+router.get(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  bookingController.getAllBookings
+);
+
+// Create a new booking
+// POST /api/bookings
+router.post('/', authenticateToken, bookingController.createBooking);
+
+// Get bookings for current user
+// GET /api/bookings/me
+router.get('/me', authenticateToken, bookingController.getMyBookings);
+
+// Get booking by id
+// GET /api/bookings/:id
+router.get('/:id', authenticateToken, bookingController.getBookingById);
+
+// Update booking status (Admin/Staff only)
+// PUT /api/bookings/:id
+router.put(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  bookingController.updateBooking
+);
+
+// Cancel booking
+// PATCH /api/bookings/:id/cancel
+router.patch('/:id/cancel', authenticateToken, bookingController.cancelBooking);
+
+// Check booking by booking number
+// GET /api/bookings/check/:bookingNumber
+router.get('/check/:bookingNumber', bookingController.checkBookingByNumber);
+
+module.exports = router;
diff --git a/server/src/routes/favoriteRoutes.js b/server/src/routes/favoriteRoutes.js
new file mode 100644
index 00000000..ae8ba92b
--- /dev/null
+++ b/server/src/routes/favoriteRoutes.js
@@ -0,0 +1,41 @@
+const express = require('express');
+const router = express.Router();
+const favoriteController = require(
+  '../controllers/favoriteController'
+);
+const { authenticateToken } = require('../middlewares/auth');
+
+/**
+ * Favorite Routes
+ * All routes require authentication
+ */
+
+// Get user's favorites
+router.get(
+  '/',
+  authenticateToken,
+  favoriteController.getFavorites
+);
+
+// Check if room is favorited
+router.get(
+  '/check/:roomId',
+  authenticateToken,
+  favoriteController.checkFavorite
+);
+
+// Add room to favorites
+router.post(
+  '/:roomId',
+  authenticateToken,
+  favoriteController.addFavorite
+);
+
+// Remove room from favorites
+router.delete(
+  '/:roomId',
+  authenticateToken,
+  favoriteController.removeFavorite
+);
+
+module.exports = router;
diff --git a/server/src/routes/paymentRoutes.js b/server/src/routes/paymentRoutes.js
new file mode 100644
index 00000000..4c0fdb88
--- /dev/null
+++ b/server/src/routes/paymentRoutes.js
@@ -0,0 +1,41 @@
+const express = require('express');
+const router = express.Router();
+const paymentController = require('../controllers/paymentController');
+const { authenticateToken } = require('../middlewares/auth');
+
+/**
+ * Payment Routes
+ * All routes require authentication
+ */
+
+// Get payments for a booking
+router.get(
+	'/booking/:bookingId',
+	authenticateToken,
+	paymentController.getPaymentByBookingId
+);
+
+// Get bank transfer info (QR code)
+router.get(
+	'/:paymentId/bank-info',
+	authenticateToken,
+	paymentController.getBankTransferInfo
+);
+
+// Confirm deposit payment
+router.post(
+	'/confirm-deposit',
+	authenticateToken,
+	paymentController.confirmDepositPayment
+);
+
+// Notify payment completion
+router.post(
+	'/notify',
+	authenticateToken,
+	paymentController.notifyPayment
+);
+
+// (VNPay integration removed) — VNPay-related routes deleted
+
+module.exports = router;
diff --git a/server/src/routes/promotionRoutes.js b/server/src/routes/promotionRoutes.js
new file mode 100644
index 00000000..3b70acb7
--- /dev/null
+++ b/server/src/routes/promotionRoutes.js
@@ -0,0 +1,65 @@
+const express = require('express');
+const router = express.Router();
+const promotionController = require('../controllers/promotionController');
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+
+/**
+ * GET /api/promotions - Get all promotions (Admin/Staff)
+ */
+router.get(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  promotionController.getPromotions
+);
+
+/**
+ * GET /api/promotions/:id - Get promotion by ID (Admin/Staff)
+ */
+router.get(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  promotionController.getPromotionById
+);
+
+/**
+ * POST /api/promotions - Create new promotion (Admin)
+ */
+router.post(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin'),
+  promotionController.createPromotion
+);
+
+/**
+ * PUT /api/promotions/:id - Update promotion (Admin)
+ */
+router.put(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  promotionController.updatePromotion
+);
+
+/**
+ * DELETE /api/promotions/:id - Delete promotion (Admin)
+ */
+router.delete(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  promotionController.deletePromotion
+);
+
+/**
+ * POST /api/promotions/validate - Validate and apply promotion code (Authenticated)
+ */
+router.post(
+  '/validate',
+  authenticateToken,
+  promotionController.validatePromotion
+);
+
+module.exports = router;
diff --git a/server/src/routes/reportRoutes.js b/server/src/routes/reportRoutes.js
new file mode 100644
index 00000000..6649142a
--- /dev/null
+++ b/server/src/routes/reportRoutes.js
@@ -0,0 +1,36 @@
+const express = require('express');
+const router = express.Router();
+const reportController = require('../controllers/reportController');
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+
+/**
+ * GET /api/reports/dashboard - Get dashboard statistics (Admin/Staff)
+ */
+router.get(
+  '/dashboard',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  reportController.getDashboardStats
+);
+
+/**
+ * GET /api/reports - Get detailed reports (Admin/Staff)
+ */
+router.get(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  reportController.getReports
+);
+
+/**
+ * GET /api/reports/export - Export report to CSV (Admin/Staff)
+ */
+router.get(
+  '/export',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  reportController.exportReport
+);
+
+module.exports = router;
diff --git a/server/src/routes/reviewRoutes.js b/server/src/routes/reviewRoutes.js
new file mode 100644
index 00000000..8d820abc
--- /dev/null
+++ b/server/src/routes/reviewRoutes.js
@@ -0,0 +1,46 @@
+const express = require('express');
+const router = express.Router();
+const reviewController = require('../controllers/reviewController');
+const { 
+  authenticateToken, 
+  authorizeRoles 
+} = require('../middlewares/auth');
+
+/**
+ * Review Routes
+ * Base path: /api/reviews
+ */
+
+// Admin: Get all reviews
+router.get('/', 
+  authenticateToken, 
+  authorizeRoles('admin', 'staff'), 
+  reviewController.getAllReviews
+);
+
+// Protected: Create a new review (authenticated users)
+router.post('/', 
+  authenticateToken, 
+  reviewController.createReview
+);
+
+// Public: Get reviews for a specific room
+router.get('/room/:roomId', 
+  reviewController.getRoomReviews
+);
+
+// Admin: Approve review
+router.patch('/:id/approve', 
+  authenticateToken, 
+  authorizeRoles('admin', 'staff'), 
+  reviewController.approveReview
+);
+
+// Admin: Reject review
+router.patch('/:id/reject', 
+  authenticateToken, 
+  authorizeRoles('admin', 'staff'), 
+  reviewController.rejectReview
+);
+
+module.exports = router;
diff --git a/server/src/routes/roomRoutes.js b/server/src/routes/roomRoutes.js
new file mode 100644
index 00000000..aa0d6f03
--- /dev/null
+++ b/server/src/routes/roomRoutes.js
@@ -0,0 +1,55 @@
+const express = require('express');
+const router = express.Router();
+const roomController = require('../controllers/roomController');
+const reviewController = require('../controllers/reviewController');
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+const upload = require('../middlewares/upload');
+
+/**
+ * Room Routes
+ */
+
+// Public routes
+router.get('/', roomController.getRooms);
+router.get('/amenities', roomController.getAmenities);
+router.get('/available', roomController.searchAvailableRooms);
+router.get('/:id', roomController.getRoomById);
+
+// Public: Get reviews for a specific room (support /api/rooms/:id/reviews)
+router.get('/:id/reviews', reviewController.getRoomReviews);
+// Admin routes
+router.post(
+	'/',
+	authenticateToken,
+	authorizeRoles('admin'),
+	roomController.createRoom
+);
+router.put(
+	'/:id',
+	authenticateToken,
+	authorizeRoles('admin'),
+	roomController.updateRoom
+);
+router.delete(
+	'/:id',
+	authenticateToken,
+	authorizeRoles('admin'),
+	roomController.deleteRoom
+);
+
+// Image upload routes
+router.post(
+	'/:id/images',
+	authenticateToken,
+	authorizeRoles('admin', 'staff'),
+	upload.array('images', 5), // Max 5 images at once
+	roomController.uploadRoomImages
+);
+router.delete(
+	'/:id/images',
+	authenticateToken,
+	authorizeRoles('admin', 'staff'),
+	roomController.deleteRoomImage
+);
+
+module.exports = router;
diff --git a/server/src/routes/serviceRoutes.js b/server/src/routes/serviceRoutes.js
new file mode 100644
index 00000000..42a2a84f
--- /dev/null
+++ b/server/src/routes/serviceRoutes.js
@@ -0,0 +1,56 @@
+const express = require('express');
+const router = express.Router();
+const serviceController = require('../controllers/serviceController');
+const { authenticateToken, authorizeRoles } = require('../middlewares/auth');
+
+/**
+ * GET /api/services - Get all services
+ */
+router.get('/', serviceController.getServices);
+
+/**
+ * GET /api/services/:id - Get service by ID
+ */
+router.get('/:id', serviceController.getServiceById);
+
+/**
+ * POST /api/services - Create new service (Admin/Staff)
+ */
+router.post(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  serviceController.createService
+);
+
+/**
+ * PUT /api/services/:id - Update service (Admin/Staff)
+ */
+router.put(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  serviceController.updateService
+);
+
+/**
+ * DELETE /api/services/:id - Delete service (Admin)
+ */
+router.delete(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  serviceController.deleteService
+);
+
+/**
+ * POST /api/services/use - Add service to booking (Admin/Staff)
+ */
+router.post(
+  '/use',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  serviceController.useService
+);
+
+module.exports = router;
diff --git a/server/src/routes/userRoutes.js b/server/src/routes/userRoutes.js
new file mode 100644
index 00000000..1da80ac3
--- /dev/null
+++ b/server/src/routes/userRoutes.js
@@ -0,0 +1,57 @@
+const express = require('express');
+const router = express.Router();
+const userController = require('../controllers/userController');
+const { authenticateToken, authorizeRoles } = 
+  require('../middlewares/auth');
+
+/**
+ * GET /api/users - Get all users (Admin/Staff)
+ */
+router.get(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  userController.getUsers
+);
+
+/**
+ * GET /api/users/:id - Get user by ID (Admin/Staff)
+ */
+router.get(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin', 'staff'),
+  userController.getUserById
+);
+
+/**
+ * POST /api/users - Create new user (Admin)
+ */
+router.post(
+  '/',
+  authenticateToken,
+  authorizeRoles('admin'),
+  userController.createUser
+);
+
+/**
+ * PUT /api/users/:id - Update user (Admin)
+ */
+router.put(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  userController.updateUser
+);
+
+/**
+ * DELETE /api/users/:id - Delete user (Admin)
+ */
+router.delete(
+  '/:id',
+  authenticateToken,
+  authorizeRoles('admin'),
+  userController.deleteUser
+);
+
+module.exports = router;
diff --git a/server/src/server.js b/server/src/server.js
new file mode 100644
index 00000000..2d76175a
--- /dev/null
+++ b/server/src/server.js
@@ -0,0 +1,47 @@
+const app = require('./app');
+const db = require('./databases/models');
+
+const PORT = process.env.PORT || 3000;
+
+// Test database connection
+const startServer = async () => {
+  try {
+    // Test database connection
+    await db.sequelize.authenticate();
+    console.log('✅ Database connection established successfully');
+
+    // Sync models (only in development)
+    if (process.env.NODE_ENV === 'development') {
+      // await db.sequelize.sync({ alter: true });
+      console.log('📊 Database models synced');
+    }
+
+    // Start server
+    app.listen(PORT, () => {
+      console.log(`🚀 Server running on port ${PORT}`);
+      console.log(
+        `🌐 Environment: ${process.env.NODE_ENV || 'development'}`
+      );
+      console.log(`🔗 API: http://localhost:${PORT}/api`);
+      console.log(`🏥 Health: http://localhost:${PORT}/health`);
+    });
+  } catch (error) {
+    console.error('❌ Unable to start server:', error);
+    process.exit(1);
+  }
+};
+
+// Handle unhandled promise rejections
+process.on('unhandledRejection', (err) => {
+  console.error('❌ Unhandled Rejection:', err);
+  process.exit(1);
+});
+
+// Handle uncaught exceptions
+process.on('uncaughtException', (err) => {
+  console.error('❌ Uncaught Exception:', err);
+  process.exit(1);
+});
+
+// Start the server
+startServer();
diff --git a/server/src/services/authService.js b/server/src/services/authService.js
new file mode 100644
index 00000000..7ccee15b
--- /dev/null
+++ b/server/src/services/authService.js
@@ -0,0 +1,435 @@
+const bcrypt = require('bcrypt');
+const jwt = require('jsonwebtoken');
+const crypto = require('crypto');
+const authRepository = require('../repositories/authRepository');
+const { sendEmail } = require('../utils/mailer');
+
+/**
+ * Auth Service - Business logic layer
+ * Handles authentication business logic
+ */
+class AuthService {
+  /**
+   * Generate JWT tokens
+   */
+  generateTokens(userId) {
+    const accessToken = jwt.sign(
+      { userId },
+      process.env.JWT_SECRET,
+      { expiresIn: process.env.JWT_EXPIRES_IN || '1h' }
+    );
+
+    const refreshToken = jwt.sign(
+      { userId },
+      process.env.JWT_REFRESH_SECRET,
+      { expiresIn: process.env.JWT_REFRESH_EXPIRES_IN || '7d' }
+    );
+
+    return { accessToken, refreshToken };
+  }
+
+  /**
+   * Verify JWT token
+   */
+  verifyAccessToken(token) {
+    return jwt.verify(token, process.env.JWT_SECRET);
+  }
+
+  /**
+   * Verify refresh token
+   */
+  verifyRefreshToken(token) {
+    return jwt.verify(token, process.env.JWT_REFRESH_SECRET);
+  }
+
+  /**
+   * Hash password
+   */
+  async hashPassword(password) {
+    return await bcrypt.hash(password, 10);
+  }
+
+  /**
+   * Compare password
+   */
+  async comparePassword(password, hashedPassword) {
+    return await bcrypt.compare(password, hashedPassword);
+  }
+
+  /**
+   * Format user response
+   */
+  formatUserResponse(user) {
+    return {
+      id: user.id,
+      name: user.full_name,
+      email: user.email,
+      phone: user.phone,
+      role: user.role ? user.role.name : 'customer',
+      createdAt: user.created_at,
+      updatedAt: user.updated_at
+    };
+  }
+
+  /**
+   * Register new user
+   */
+  async register(data) {
+    const { name, email, password, phone } = data;
+
+    // Check if email exists
+    const emailExists = await authRepository.isEmailExists(email);
+    if (emailExists) {
+      throw new Error('Email already registered');
+    }
+
+    // Hash password
+    const hashedPassword = await this.hashPassword(password);
+
+    // Create user (default role_id = 3 for customer)
+    const user = await authRepository.createUser({
+      full_name: name,
+      email,
+      password: hashedPassword,
+      phone,
+      role_id: 3 // Customer role
+    });
+
+    // Generate tokens
+    const { accessToken, refreshToken } = 
+      this.generateTokens(user.id);
+
+    // Save refresh token (expires in 7 days)
+    const expiresAt = new Date(
+      Date.now() + 7 * 24 * 60 * 60 * 1000
+    );
+    await authRepository.saveRefreshToken(
+      user.id, 
+      refreshToken, 
+      expiresAt
+    );
+
+    // Remove password from response
+    const userResponse = user.toJSON();
+    delete userResponse.password;
+
+    // Send welcome email (non-blocking)
+    try {
+      await sendEmail({
+        to: user.email,
+        subject: 'Welcome to Hotel Booking',
+        html: `
+          <div style="font-family: Arial, sans-serif; 
+            max-width: 600px; margin: 0 auto;">
+            <h2 style="color: #4F46E5;">
+              Welcome ${user.full_name}!
+            </h2>
+            <p>Thank you for registering an account at 
+              <strong>Hotel Booking</strong>.</p>
+            <p>Your account has been successfully created with 
+              email: <strong>${user.email}</strong></p>
+            <div style="background-color: #F3F4F6; 
+              padding: 20px; border-radius: 8px; 
+              margin: 20px 0;">
+              <p style="margin: 0;">
+                <strong>You can:</strong>
+              </p>
+              <ul style="margin-top: 10px;">
+                <li>Search and book hotel rooms</li>
+                <li>Manage your bookings</li>
+                <li>Update your personal information</li>
+              </ul>
+            </div>
+            <p>
+              <a href="${process.env.CLIENT_URL}/login" 
+                style="background-color: #4F46E5; 
+                color: white; padding: 12px 24px; 
+                text-decoration: none; border-radius: 6px; 
+                display: inline-block;">
+                Login Now
+              </a>
+            </p>
+            <p style="color: #6B7280; font-size: 14px; 
+              margin-top: 30px;">
+              If you have any questions, please 
+              contact us.
+            </p>
+          </div>
+        `
+      });
+    } catch (err) {
+      console.error('Failed to send welcome email:', err);
+      // Don't fail registration if email fails
+    }
+
+    return {
+      user: userResponse,
+      token: accessToken,
+      refreshToken
+    };
+  }
+
+  /**
+   * Login user
+   */
+  async login(data) {
+    const { email, password, rememberMe } = data;
+
+    // Find user with role and password (needed for authentication)
+    const user = await authRepository.findUserByEmail(
+      email, 
+      true, // includeRole
+      true  // includePassword - needed to verify password
+    );
+
+    if (!user) {
+      throw new Error('Invalid email or password');
+    }
+
+    // Check password
+    const isPasswordValid = await this.comparePassword(
+      password, 
+      user.password
+    );
+    
+    if (!isPasswordValid) {
+      throw new Error('Invalid email or password');
+    }
+
+    // Generate tokens
+    const { accessToken, refreshToken } = 
+      this.generateTokens(user.id);
+
+    // Calculate expiry based on rememberMe
+    const expiryDays = rememberMe ? 7 : 1;
+    const expiresAt = new Date(
+      Date.now() + expiryDays * 24 * 60 * 60 * 1000
+    );
+
+    // Save refresh token
+    await authRepository.saveRefreshToken(
+      user.id,
+      refreshToken,
+      expiresAt
+    );
+
+    // Format user response
+    const userResponse = this.formatUserResponse(user);
+
+    return {
+      user: userResponse,
+      token: accessToken,
+      refreshToken
+    };
+  }
+
+  /**
+   * Refresh access token
+   */
+  async refreshAccessToken(refreshToken) {
+    if (!refreshToken) {
+      throw new Error('Refresh token is required');
+    }
+
+    // Verify refresh token
+    const decoded = this.verifyRefreshToken(refreshToken);
+
+    // Check if refresh token exists in database
+    const storedToken = await authRepository.findRefreshToken(
+      refreshToken,
+      decoded.userId
+    );
+
+    if (!storedToken) {
+      throw new Error('Invalid refresh token');
+    }
+
+    // Check if token is expired
+    if (new Date() > storedToken.expires_at) {
+      await authRepository.deleteRefreshToken(refreshToken);
+      throw new Error('Refresh token expired');
+    }
+
+    // Generate new access token
+    const accessToken = jwt.sign(
+      { userId: decoded.userId },
+      process.env.JWT_SECRET,
+      { expiresIn: process.env.JWT_EXPIRES_IN || '1h' }
+    );
+
+    return { token: accessToken };
+  }
+
+  /**
+   * Logout user
+   */
+  async logout(refreshToken) {
+    if (refreshToken) {
+      await authRepository.deleteRefreshToken(refreshToken);
+    }
+    return true;
+  }
+
+  /**
+   * Get user profile
+   */
+  async getProfile(userId) {
+    const user = await authRepository.findUserById(userId, true);
+
+    if (!user) {
+      throw new Error('User not found');
+    }
+
+    return this.formatUserResponse(user);
+  }
+
+  /**
+   * Generate reset token
+   */
+  generateResetToken() {
+    const resetToken = crypto.randomBytes(32).toString('hex');
+    const hashedToken = crypto
+      .createHash('sha256')
+      .update(resetToken)
+      .digest('hex');
+
+    return { resetToken, hashedToken };
+  }
+
+  /**
+   * Forgot Password - Send reset link
+   */
+  async forgotPassword(email) {
+    // Find user by email
+    const user = await authRepository.findUserByEmail(email);
+
+    // Always return success to prevent email enumeration
+    if (!user) {
+      return {
+        success: true,
+        message: 'If email exists, reset link has been sent'
+      };
+    }
+
+    // Generate reset token
+    const { resetToken, hashedToken } = 
+      this.generateResetToken();
+
+    // Save token (expires in 1 hour)
+    const expiresAt = new Date(Date.now() + 60 * 60 * 1000);
+    await authRepository.savePasswordResetToken(
+      user.id,
+      hashedToken,
+      expiresAt
+    );
+
+    // Build reset URL
+    const resetUrl = 
+      `${process.env.CLIENT_URL}/reset-password/${resetToken}`;
+
+    // Try to send email
+    try {
+      await sendEmail({
+        to: user.email,
+        subject: 'Reset password - Hotel Booking',
+        html: `
+          <p>You (or someone) has requested to reset your password.</p>
+          <p>Click the link below to reset your password 
+             (expires in 1 hour):</p>
+          <p><a href="${resetUrl}">${resetUrl}</a></p>
+        `
+      });
+    } catch (err) {
+      console.error('Failed to send reset email:', err);
+      // Do NOT log the raw reset token or URL in production.
+      // Errors are logged above; token must remain secret.
+    }
+
+    return {
+      success: true,
+      message: 'Password reset link has been sent to your email'
+    };
+  }
+
+  /**
+   * Reset Password - Update password with token
+   */
+  async resetPassword(data) {
+    const { token, password } = data;
+
+    if (!token || !password) {
+      throw new Error('Token and password are required');
+    }
+
+    // Hash the token to compare
+    const hashedToken = crypto
+      .createHash('sha256')
+      .update(token)
+      .digest('hex');
+
+    // Find valid token
+    const resetToken = 
+      await authRepository.findValidPasswordResetToken(
+        hashedToken
+      );
+
+    if (!resetToken) {
+      throw new Error('Invalid or expired reset token');
+    }
+
+    // Find user (include password so we can compare)
+    const user = await authRepository.findUserById(
+      resetToken.user_id,
+      false, // includeRole
+      true // includePassword
+    );
+    
+    if (!user) {
+      throw new Error('User not found');
+    }
+
+    // Check if new password matches old password
+    const isSamePassword = await this.comparePassword(
+      password,
+      user.password
+    );
+
+    if (isSamePassword) {
+      // Return error message to the client
+      throw new Error('New password must be different from the old password');
+    }
+
+    // Hash new password
+    const hashedPassword = await this.hashPassword(password);
+
+    // Update password
+    await authRepository.updateUserPassword(
+      user.id,
+      hashedPassword
+    );
+
+    // Delete used token
+    await authRepository.deletePasswordResetToken(resetToken.id);
+
+    // Send confirmation email (non-blocking)
+    try {
+      await sendEmail({
+        to: user.email,
+        subject: 'Password Changed',
+        html: `
+          <p>The password for account ${user.email} has been changed 
+             successfully.</p>
+        `
+      });
+    } catch (err) {
+      console.error('Failed to send confirmation email:', err);
+    }
+
+    return {
+      success: true,
+      message: 'Password has been reset successfully'
+    };
+  }
+}
+
+module.exports = new AuthService();
diff --git a/server/src/utils/mailer.js b/server/src/utils/mailer.js
new file mode 100644
index 00000000..c3a16025
--- /dev/null
+++ b/server/src/utils/mailer.js
@@ -0,0 +1,50 @@
+const nodemailer = require('nodemailer');
+
+/**
+ * sendEmail helper - production-only SMTP sender
+ * Requires MAIL_HOST, MAIL_USER and MAIL_PASS to be set in env.
+ * This helper intentionally does NOT fallback to Ethereal or
+ * log preview URLs. Raw tokens or reset URLs must never be
+ * printed to logs in production.
+ */
+async function sendEmail({ to, subject, html, text }) {
+  // Require SMTP credentials to be present
+  const hasSmtpConfig = !!(
+    process.env.MAIL_HOST &&
+    process.env.MAIL_USER &&
+    process.env.MAIL_PASS
+  );
+
+  if (!hasSmtpConfig) {
+    throw new Error(
+      'SMTP mailer not configured. Set MAIL_HOST, MAIL_USER and MAIL_PASS in env.'
+    );
+  }
+
+  const transporter = nodemailer.createTransport({
+    host: process.env.MAIL_HOST,
+    port: Number(process.env.MAIL_PORT) || 587,
+    secure: process.env.MAIL_SECURE === 'true',
+    auth: {
+      user: process.env.MAIL_USER,
+      pass: process.env.MAIL_PASS
+    }
+  });
+
+  const fromAddress = process.env.MAIL_FROM ||
+    `no-reply@${(process.env.CLIENT_URL || 'example.com')
+      .replace(/^https?:\/\//, '')}`;
+
+  // Send and let errors bubble up to caller for handling/logging
+  const info = await transporter.sendMail({
+    from: fromAddress,
+    to,
+    subject,
+    text,
+    html
+  });
+
+  return info;
+}
+
+module.exports = { sendEmail };
diff --git a/server/src/utils/vnpayService.js b/server/src/utils/vnpayService.js
new file mode 100644
index 00000000..9d5c433e
--- /dev/null
+++ b/server/src/utils/vnpayService.js
@@ -0,0 +1,18 @@
+/**
+ * VNPay integration removed
+ * This file is intentionally left as a stub to indicate the VNPay
+ * payment gateway has been removed from the project. Any attempt
+ * to require this module should be considered a usage error.
+ */
+
+module.exports = {
+  // No-op placeholders
+  createPaymentUrl: () => {
+    throw new Error('VNPay integration has been removed');
+  },
+  verifyReturn: () => {
+    throw new Error('VNPay integration has been removed');
+  },
+  sortObject: () => ({}),
+  createSignature: () => '',
+};
diff --git a/server/src/validators/authValidator.js b/server/src/validators/authValidator.js
new file mode 100644
index 00000000..7ff49725
--- /dev/null
+++ b/server/src/validators/authValidator.js
@@ -0,0 +1,70 @@
+const { body } = require('express-validator');
+
+/**
+ * Validation rules for user registration
+ */
+const registerValidation = [
+  body('name')
+    .trim()
+    .notEmpty()
+    .withMessage('Name is required')
+    .isLength({ min: 2, max: 50 })
+    .withMessage('Name must be between 2 and 50 characters'),
+
+  body('email')
+    .trim()
+    .notEmpty()
+    .withMessage('Email is required')
+    .isEmail()
+    .withMessage('Invalid email format')
+    .normalizeEmail(),
+
+  body('password')
+    .notEmpty()
+    .withMessage('Password is required')
+    .isLength({ min: 8 })
+    .withMessage('Password must be at least 8 characters')
+    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
+    .withMessage(
+      'Password must contain uppercase, lowercase, and number'
+    ),
+
+  body('phone')
+    .optional()
+    .trim()
+    .matches(/^[0-9]{10,11}$/)
+    .withMessage('Phone must be 10-11 digits')
+];
+
+/**
+ * Validation rules for user login
+ */
+const loginValidation = [
+  body('email')
+    .trim()
+    .notEmpty()
+    .withMessage('Email is required')
+    .isEmail()
+    .withMessage('Invalid email format')
+    .normalizeEmail(),
+
+  body('password')
+    .notEmpty()
+    .withMessage('Password is required')
+];
+
+/**
+ * Validation rules for refresh token
+ * Accept token from request body or HttpOnly cookie
+ */
+const refreshTokenValidation = [
+  body('refreshToken')
+    .notEmpty()
+    .withMessage('Refresh token is required')
+];
+
+module.exports = {
+  registerValidation,
+  loginValidation,
+  refreshTokenValidation
+};
diff --git a/server/test-vnpay.js b/server/test-vnpay.js
new file mode 100644
index 00000000..69700fe2
--- /dev/null
+++ b/server/test-vnpay.js
@@ -0,0 +1,7 @@
+/**
+ * VNPay Integration Test Script
+ * Test từng bước để verify signature và URL generation
+ */
+
+// VNPay test script removed per repository cleanup.
+// This file left intentionally empty.
diff --git a/server/tmp_login.json b/server/tmp_login.json
new file mode 100644
index 00000000..a4aae5f6
--- /dev/null
+++ b/server/tmp_login.json
@@ -0,0 +1 @@
+{"status":"success","message":"Login successful","data":{"user":{"id":4,"name":"Nguyen Van A","email":"customer1@gmail.com","phone":"0904567890","role":"customer","createdAt":"2025-11-14T07:32:28.000Z","updatedAt":"2025-11-14T07:32:28.000Z"},"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjQsImlhdCI6MTc2MzEyNzU0NywiZXhwIjoxNzYzMTMxMTQ3fQ.WpjV_sqePKNeZWOwYees44Qfo-WeErk7dMZ9przeUqQ"}}
\ No newline at end of file