176 lines
4.7 KiB
Markdown
176 lines
4.7 KiB
Markdown
# 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)
|