Bỏ qua

Giao diện Hệ thống

Tổng quan Giao diện

Giao diện SaziHotel được thiết kế theo chuẩn Material Design, thân thiện và dễ sử dụng.

Layout Chính

┌─────────────────────────────────────────────────────────┐
│  Header: Logo | Search | Notifications | Profile       │
├──────────┬──────────────────────────────────────────────┤
│          │                                               │
│  Sidebar │         Main Content Area                    │
│  Menu    │                                               │
│          │                                               │
│          │                                               │
└──────────┴──────────────────────────────────────────────┘

Header (Thanh Trên)

1. Logo và Tên Khách sạn

  • Vị trí: Góc trái
  • Click để về Dashboard
  • Hiển thị logo và tên khách sạn hiện tại
  • Icon: 🔍
  • Tìm kiếm nhanh: Booking, Guest, Room
  • Phím tắt: Ctrl + K hoặc Cmd + K

3. Notifications

  • Icon: 🔔
  • Hiển thị thông báo real-time:
  • Đặt phòng mới
  • Check-in sắp tới
  • Nhiệm vụ housekeeping
  • Lỗi đồng bộ OTA

4. Language Switcher

  • Chuyển đổi ngôn ngữ: 🇻🇳 Tiếng Việt / 🇬🇧 English

5. Profile Menu

  • Avatar người dùng
  • Dropdown menu:
  • My Profile: Thông tin cá nhân
  • Settings: Cài đặt
  • Help: Trợ giúp
  • Logout: Đăng xuất

Cấu trúc Menu

Menu được tổ chức theo module chức năng:

📊 Dashboard

  • Tổng quan hệ thống

🏨 Room Management

  • Rooms Overview
  • Room Timeline
  • Room Status
  • Room Types
  • Booking Conflict Resolver
  • Timeline Settings
  • Room Analytics Dashboard

📅 Bookings

  • Bookings Overview
  • New Booking
  • Booking Calendar

🎫 Reception

  • Check In
  • Check Out
  • Enhanced Check In

🧹 Housekeeping

  • Housekeeping Dashboard
  • Cleaning Tasks
  • Advanced Scheduler

👥 Customer Management

  • Guests
  • Loyalty Program
  • Loyalty Members

💼 CRM & Marketing

  • Customer Profiles
  • Customer Analytics
  • Customer Segmentation
  • Marketing Dashboard
  • Feedback & NPS
  • Loyalty Analytics
  • Loyalty Campaigns
  • Points Expiration

🛎️ Guest Services

  • Guest Services Overview
  • Service Bookings
  • Amenity Requests

💰 Financial

  • Invoices
  • Payments
  • Additional Services
  • Payment Gateways

💵 Pricing

  • Quick Setup (Beginner)
  • Room Rates
  • Rate Plans
  • Extra Person Charges
  • Meal Plan Rates
  • Length of Stay Discounts
  • Seasonal Pricing
  • Date-Specific Rates
  • Channel Pricing Config
  • Promotions

📡 Channel Management

  • Channel Dashboard
  • Provider Management
  • Room Mappings
  • Rate Mappings
  • Sync Operations
  • Channel Analytics
  • Error Management
  • OTA Account Management
  • Hotel Chain Configuration

📈 Reports

  • Báo cáo và phân tích

🌐 Platform Management

  • Platform Dashboard
  • Tenant Management
  • Tenant Onboarding
  • Subscriptions
  • Platform Billing
  • Cross-Tenant Analytics
  • System Monitoring
  • System Logs
  • Platform Configuration
  • Platform Users

⚙️ Administration

  • Users
  • Staff Management
  • Tenants
  • Hotels
  • Hotel Chains
  • Hotel Settings

Thu gọn/Mở rộng Menu

  • Click icon ☰ để thu gọn sidebar
  • Menu thu gọn chỉ hiển thị icon
  • Hover để xem label đầy đủ

Main Content Area

Dashboard / Room Management / Room Timeline
- Hiển thị vị trí hiện tại - Click để quay lại cấp trước

Page Header

  • Title: Tiêu đề trang
  • Actions: Nút hành động chính (Create, Export, Filter...)
  • Tabs: Các tab phụ (nếu có)

Content Section

  • Danh sách/Table
  • Forms
  • Charts/Analytics
  • Details view

Pagination

  • Hiển thị ở cuối danh sách
  • Chọn số items per page: 10, 20, 50, 100
  • Điều hướng trang: First, Previous, Next, Last

Responsive Design

Desktop (≥1024px)

  • Full sidebar menu
  • Multi-column layout
  • Hover tooltips
  • Full tables

Tablet (768-1023px)

  • Collapsible sidebar
  • Adapted layout
  • Touch-friendly buttons

Mobile (<768px)

  • Bottom navigation bar
  • Hamburger menu
  • Single column layout
  • Swipe gestures
  • Mobile-optimized tables

Phím tắt

Phím tắt Chức năng
Ctrl/Cmd + K Global search
Ctrl/Cmd + B Toggle sidebar
Ctrl/Cmd + N New booking (trong trang bookings)
Ctrl/Cmd + S Save form
Esc Đóng modal/dialog
Alt + 1-9 Chuyển tab nhanh

Themes

Light Mode

  • Nền trắng, text đen
  • Dễ nhìn trong môi trường sáng

Dark Mode

  • Nền tối, text sáng
  • Giảm mỏi mắt khi làm việc ban đêm
  • Toggle: Click icon ☀️/🌙 ở header

Accessibility

  • Keyboard Navigation: Hỗ trợ đầy đủ phím tắt
  • Screen Reader: Tương thích ARIA labels
  • High Contrast: Tỷ lệ màu sắc chuẩn WCAG 2.1
  • Font Scaling: Hỗ trợ zoom text 200%

Customization

Mỗi user có thể tùy chỉnh:

  1. Theme: Light/Dark mode
  2. Language: Vietnamese/English
  3. Density: Compact/Normal/Comfortable
  4. Default Page: Trang hiển thị sau khi login
  5. Notifications: Bật/tắt từng loại thông báo