Tổng hợpCập nhật 2026-06-30 · UI-INVENTORY.md
UI Inventory — Guest Portal
Production frontend, mock-data backed. Route group app/(guest)/.
| # | Screen | Route | Sections | States |
|---|---|---|---|---|
| 1 | Trang chủ | / | Hero + ListingSearch · Điểm đến phổ biến · Chỗ nghỉ nổi bật · Ưu đãi (#deals) · Vì sao chọn BNG | scroll-reveal |
| 2 | Kết quả tìm kiếm | /search | ListingSearch (compact) · Bộ lọc (sidebar + Sheet mobile) · Sắp xếp · Danh sách kết quả | loading (skeleton), empty, results |
| 3 | Chi tiết chỗ nghỉ | /listings/[slug] | Breadcrumb · Header · Hero Gallery (lightbox) · Điểm nổi bật + mô tả · Chọn phòng + widget đặt phòng sticky · Tiện nghi · Vị trí + lân cận (map) · Chính sách · Đánh giá + phân tích điểm · FAQ · Gợi ý tương tự | loading (skeleton), not-found |
| 4 | Đặt phòng | /reservation | Stepper 3 bước: (1) Xác nhận phòng (2) Thông tin khách + mã giảm giá (3) Thanh toán (mock) · Tóm tắt đơn sticky | empty (chưa chọn phòng) |
| 5 | Thanh toán (mock) | /reservation bước 3 | Chọn phương thức (VNPay/thẻ/chuyển khoản/tại nơi ở) · form thẻ giả · disclaimer | submitting |
| 6 | Xác nhận | /reservation/confirmation | Success animation · Mã đặt phòng · Tóm tắt đơn · Thông tin khách · Tải/Gửi lại | empty (hết phiên) |
| — | 404 | not-found | thông báo + CTA về trang chủ | — |
| — | Lỗi | error.tsx | thông báo + thử lại | — |
Global chrome (route group layout): SiteHeader (logo, nav, theme toggle, brand switcher, mobile Sheet), SiteFooter, dark mode, theme switcher (5 brand).
Partner Portal (app shell: sidebar + topbar, route group (partner)/partner)
| # | Screen | Route | Key sections |
|---|---|---|---|
| PA1 | Tổng quan (Dashboard) | /partner | 4 KPI stat cards, revenue bar chart, today arrivals/departures, recent bookings table, workspace switcher |
| PA2 | Quản lý đặt phòng | /partner/bookings | Status tabs, search, bookings DataTable, detail Sheet with check-in/out/cancel (toast), loading + empty states |
| PA3 | Lịch giá & phòng trống | /partner/rates | Listing + room-type switcher, month nav, editable day grid (price/availability/closed via popover), legend, bulk-edit affordance |
| PA4 | Cơ sở & phòng | /partner/listings | Managed-listing accordion, per-listing inventory DataTable (room types), mock edit/add (toast) |
| PA5 | Doanh thu | /partner/revenue | 3 KPI cards, revenue-by-month bar chart, channel donut, top-performing listings table |
Platform Admin Portal (BNG operator)
| ID | Screen | Route | Sections |
|---|---|---|---|
| PL1 | Tổng quan nền tảng | /platform | 4 KPI (GMV, đối tác hoạt động, khách hàng, đơn), pending-approval callout, GMV-by-month bar chart, channel donut, top-partners table, recent bookings |
| PL2 | Duyệt đối tác & cơ sở | /platform/approvals | Tabs (đối tác/cơ sở), approval cards with Duyệt/Từ chối (toast + local resolve), EmptyState |
| PL3 | Quản lý khách hàng | /platform/customers | Search, customers DataTable (tên/email/đơn/chi tiêu/trạng thái), detail Sheet |
| PL4 | Quản lý cộng tác viên | /platform/affiliates | 3 KPI strip, affiliates DataTable, duyệt payout (mock) |
| PL5 | Giám sát đặt phòng | /platform/bookings | All-partner bookings DataTable (+ Đối tác column), status tabs + channel select + search |
| PL6 | CMS & Phân tích | /platform/cms | 3 analytics KPI, sessions-by-month bar chart, traffic-source donut, CMS entries DataTable |
Customer Portal (end-traveller account, route group (customer)/customer, reuses AppShell + SidebarNav)
| ID | Screen | Route | Sections |
|---|---|---|---|
| CU1 | Tổng quan | /customer | 5 KPI (tổng đơn, sắp tới, voucher, đã lưu, chờ đánh giá), next-upcoming-booking card, CTA tìm chỗ nghỉ |
| CU2 | Đơn của tôi | /customer/bookings | Status tabs, my-bookings DataTable (mã/chỗ nghỉ/ngày/khách/tiền/thanh toán/nguồn/trạng thái), row → detail |
| CU3 | Chi tiết đơn | /customer/bookings/[id] | Booking info, reservation status Timeline, chính sách hủy, PriceSummary, contact/cancel/support (toast), unknown id → empty |
| CU4 | Chỗ nghỉ đã lưu | /customer/wishlist | ListingCard grid + bỏ lưu (mock), EmptyState |
| CU5 | Ưu đãi của tôi | /customer/vouchers | Tabs available/used/expired, VoucherCard grid, dùng-voucher CTA → /search |
| CU6 | Đánh giá | /customer/reviews | Tabs chờ-viết (StarRatingInput + submit toast) / đã-viết (ReviewCard), EmptyState |
| CU7 | Hồ sơ | /customer/profile | Thông tin cá nhân, tùy chọn (ngôn ngữ/tiền tệ/thông báo), bảo mật (đổi mật khẩu/2FA mock), lưu (toast) |
Affiliate Portal (CTV)
| # | Màn hình | Route | Nội dung |
|---|---|---|---|
| AF1 | Affiliate Dashboard | /affiliate | 6 StatCard (click, booking, GMV, hoa hồng tạm tính/đủ điều kiện, payout chờ) + BarChart hoa hồng/tháng + top-listing bán chạy |
| AF2 | Referral Links | /affiliate/links | Link giới thiệu/listing: mã CTV, URL UTM, QR mock, Copy, click/đơn, active/inactive |
| AF3 | Commissions | /affiliate/commissions | DataTable hoa hồng/đơn + Tabs trạng thái (tạm tính/đủ điều kiện/đã TT/đã hủy) + summary tie-out |
| AF4 | Payouts | /affiliate/payouts | StatCard số dư khả dụng/chờ + lịch sử rút + form yêu cầu rút (mock) |
| AF5 | Marketing Materials | /affiliate/materials | Banner, caption mẫu, QR card + copy/download mock |