Hotel-Booking/docs/LAYOUT_IMPLEMENTATION.md

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

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

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 ✅

• Tạo thư mục src/components/layout/
• Header.tsx với logo và navigation
• Footer.tsx với thông tin đầy đủ
• Navbar.tsx với logic đăng nhập/đăng xuất động
• SidebarAdmin.tsx chỉ hiển thị với role admin
• LayoutMain.tsx sử dụng <Outlet />
• Navbar thay đổi theo trạng thái đăng nhập
• Giao diện responsive, tương thích desktop/mobile
• Tích hợp TailwindCSS cho styling
• 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

# 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)