Sidebar Trái Cố Định và Layout Dashboard Nhiều Trang

Vào ngày 2026-06-05, chúng tôi đã xây dựng lại heatmapx.com/dashboard với layout sidebar cố định kiểu Supabase/Vercel đầy đủ (tiếp nối cấu trúc từ thiết kế lại dashboard hoàn toàn được triển khai cùng ngày).

Layout Mới

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Sites / Today's Events / Plan       │
│   ⌘ CLI&Skills│                                       │
│   $ Plan&Billing│  AI Analysis Usage [████░]          │
│   ⚙ Settings  │   PV Usage         [██░░░]            │
│               │                                       │
│ COMING SOON   │   Quick Actions                       │
│   🧪 A/B Tests │   [▤ View Heatmaps] [＋Add]          │
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Log out     │                                       │
└──────────────┴───────────────────────────────────────┘

Năm Trang Riêng Biệt

Route	Trang	Nội dung
`/dashboard`	⌂ Home	Các thẻ thống kê (số site / sự kiện hôm nay / gói hiện tại), thanh sử dụng (phân tích AI / PV), quick actions
`/dashboard/sites`	▤ Heatmaps	Danh sách dạng bảng của các site đã đăng ký. Thêm site mới từ đây
`/dashboard/cli`	⌘ CLI & Skills	Hướng dẫn cài đặt cạnh nhau cho CLI terminal và Claude Code Skill
`/dashboard/billing`	$ Plan & Billing	Tóm tắt sử dụng hiện tại + bảng so sánh gói đầy đủ (Free / Pro / Team / Enterprise)
`/dashboard/settings`	⚙ Settings	Bộ chọn ngôn ngữ (English / 日本語) — thêm cài đặt sắp ra mắt

Những Gì Đã Thay Đổi

▤ Sidebar trái cố định kiểu Supabase

Tất cả năm mục điều hướng chính luôn hiển thị trong sidebar trái, cố định khi cuộn để bạn có thể nhảy giữa các trang từ bất cứ đâu.

Highlight trang active: trang hiện tại được nhấn mạnh trực quan trong menu
Icon: mỗi mục menu có một định danh thị giác
Log out: được ghim xuống cuối sidebar, giảm nguy cơ click nhầm

⌂ Home như màn hình tổng quan nhanh

/dashboard — màn hình đầu tiên sau khi đăng nhập — hiện được thiết kế để cho bạn cái nhìn đầy đủ về trạng thái tài khoản chỉ trong một lần xem.

Các thẻ thống kê hiển thị số site, tổng sự kiện hôm nay, và gói hiện tại của bạn
Thanh tiến độ cho sử dụng phân tích AI và PV hàng tháng (hổ phách khi vượt 80%, đỏ khi vượt 100%)
Quick actions: "View Heatmaps", "Add Site", "Upgrade", và "CLI Setup"

⌘ CLI & Skills cạnh nhau

Cả hai cách sử dụng HeatMapX — CLI terminal và Claude Code Skill — đều được tài liệu hóa trên một trang trong layout hai cột.

CLI: hướng dẫn từng bước từ npm install -g heatmapx đến heatmapx analyze
Claude Code Skill: cài đặt với /plugin install heatmapx-skill@xtv-llc/heatmapx-cli và gọi HeatMapX trực tiếp từ cuộc hội thoại
Các lệnh mẫu được hiển thị bằng cả tiếng Anh và tiếng Nhật

$ Bảng so sánh gói đầy đủ được tích hợp sẵn

Trang Plan & Billing hiện bao gồm bảng so sánh Free / Pro / Team / Enterprise đầy đủ để bạn có thể xem xét các tùy chọn và nâng cấp mà không cần rời khỏi dashboard.

Toggle hàng tháng / hàng năm (mặc định hàng năm; thanh toán hàng năm có chiết khấu đáng kể so với hàng tháng). Để biết giá hiện tại, xem trang giá
Gói hiện tại của bạn được đánh dấu bằng huy hiệu xanh lá "Current"
Pro được highlight màu cam là tùy chọn được khuyến nghị
Enterprise liên kết đến heatmapx@xtv.co.jp để liên hệ trực tiếp

⚙ Chọn ngôn ngữ trong Settings

Chuyển đổi ngôn ngữ trước đây chỉ có dưới dạng toggle hai trạng thái trong header. Giờ nó cũng được hiển thị như bộ chọn radio tường minh trong Settings. Các thay đổi áp dụng ngay lập tức và được lưu trong trình duyệt.

Sắp Ra Mắt

Phần "Coming Soon" ở cuối sidebar hiển thị các tính năng sẽ ra mắt trong các phiên bản sắp tới:

Tính năng	Mô tả
🧪 A/B Tests	A/B testing một click cho thay đổi nội dung và layout dựa trên thông tin heatmap
✨ Dynamic UI	Engine cá nhân hóa tự điều chỉnh UI dựa trên thuộc tính và mẫu hành vi người dùng

Cải Tiến Khác

Sticky header: logo, bộ chuyển đổi theme, và toggle ngôn ngữ luôn hiển thị khi cuộn
Sticky sidebar: điều hướng luôn có thể truy cập mọi lúc khi cuộn nội dung trang
Log out được di chuyển: từ góc trên bên phải header sang cuối sidebar (hành động quan trọng nhưng tần suất thấp được đẩy xuống)
Tương thích ngược: bookmark /dashboard hiện có dẫn đến màn hình Home mới — không cần redirect

Phạm Vi Tác Động

Phiên bản này chỉ là UI/UX — logic theo dõi, cấu trúc dữ liệu, và API không thay đổi. Các tracker tag được nhúng hiện có tiếp tục hoạt động như cũ. Không cần redirect cho các bookmark /dashboard hiện có.