Hotel Booking

2025-11-16 14:19:13 +02:00
commit 824eec6190
203 changed files with 37696 additions and 0 deletions
--- a/docs/LAYOUT_IMPLEMENTATION.md
+++ 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)