Sidebar Kiri Persisten dan Tata Letak Dashboard Multi-Halaman

Pada 2026-06-05, kami membangun ulang heatmapx.com/dashboard dengan tata letak sidebar persisten bergaya Supabase/Vercel penuh (kelanjutan struktural dari desain ulang dashboard penuh yang dirilis pada hari yang sama).

Tata Letak Baru

┌──────────────────────────────────────────────────────┐
│ [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     │                                       │
└──────────────┴───────────────────────────────────────┘

Lima Halaman Khusus

Rute	Halaman	Konten
/dashboard	⌂ Home	Kartu stats (situs / event hari ini / paket saat ini), bilah penggunaan (analisis AI / PV), quick actions
/dashboard/sites	▤ Heatmaps	Daftar tabular situs yang terdaftar. Tambahkan situs baru dari sini
/dashboard/cli	⌘ CLI & Skills	Panduan instalasi berdampingan untuk CLI terminal dan Claude Code Skill
/dashboard/billing	$ Plan & Billing	Ringkasan penggunaan saat ini + tabel perbandingan paket lengkap (Free / Pro / Team / Enterprise)
/dashboard/settings	⚙ Settings	Selektor bahasa (English / 日本語) — pengaturan lainnya segera hadir

Yang Berubah

▤ Sidebar kiri persisten bergaya Supabase

Kelima item navigasi utama selalu terlihat di sidebar kiri, tetap pada posisinya saat scroll sehingga Anda bisa berpindah antar halaman dari mana saja.

• Sorotan halaman aktif: halaman saat ini ditekankan secara visual di menu
• Ikon: setiap item menu memiliki pengenal visual
• Log out: disematkan di bagian bawah sidebar, mengurangi risiko klik tidak sengaja

⌂ Home sebagai ikhtisar sekilas

/dashboard — layar pertama setelah login — kini dirancang untuk memberi Anda gambaran lengkap status akun dalam satu tampilan.

• Kartu stats yang menampilkan jumlah situs, total event hari ini, dan paket Anda saat ini
• Bilah kemajuan untuk penggunaan analisis AI dan PV bulanan (amber di atas 80%, merah di atas 100%)
• Quick actions: "View Heatmaps", "Add Site", "Upgrade", dan "CLI Setup"

⌘ CLI & Skills berdampingan

Kedua cara menggunakan HeatMapX — CLI terminal dan Claude Code Skill — didokumentasikan di satu halaman dalam tata letak dua kolom.

• CLI: langkah demi langkah dari npm install -g heatmapx hingga heatmapx analyze
• Claude Code Skill: instal dengan /plugin install heatmapx-skill@xtv-llc/heatmapx-cli dan panggil HeatMapX langsung dari percakapan
• Contoh perintah ditampilkan dalam bahasa Inggris dan Jepang

$ Perbandingan paket lengkap tersedia

Halaman Plan & Billing kini menyertakan tabel perbandingan Free / Pro / Team / Enterprise yang lengkap sehingga Anda bisa meninjau opsi dan melakukan upgrade tanpa meninggalkan dashboard.

• Toggle bulanan / tahunan (default tahunan; penagihan tahunan menawarkan diskon signifikan vs. bulanan). Untuk harga saat ini, lihat halaman harga
• Paket Anda saat ini ditandai dengan lencana hijau "Current"
• Pro disorot dengan oranye sebagai opsi yang direkomendasikan
• Enterprise menautkan ke heatmapx@xtv.co.jp untuk kontak langsung

⚙ Pemilihan bahasa di Settings

Penggantian bahasa sebelumnya hanya tersedia sebagai toggle dua status di header. Kini juga tersedia sebagai selektor radio eksplisit di Settings. Perubahan diterapkan seketika dan disimpan di browser.

Segera Hadir

Bagian "Coming Soon" di bagian bawah sidebar menampilkan fitur yang akan hadir di rilis mendatang:

Fitur	Deskripsi
🧪 A/B Tests	A/B testing satu klik untuk perubahan teks dan tata letak berdasarkan wawasan heatmap
✨ Dynamic UI	Mesin personalisasi yang mengadaptasi UI berdasarkan atribut dan pola perilaku pengguna

Peningkatan Lainnya

• Sticky header: logo, pengalih tema, dan toggle bahasa tetap terlihat saat scroll
• Sticky sidebar: navigasi selalu dapat diakses saat scroll konten halaman
• Log out dipindahkan: dari pojok kanan atas header ke bagian bawah sidebar (aksi penting namun jarang didorong ke bawah)
• Kompatibel ke belakang: bookmark /dashboard yang ada akan menuju layar Home baru — tidak ada pengalihan yang diperlukan

Cakupan Dampak

Rilis ini hanya pada UI/UX — logika pelacakan, struktur data, dan API tidak berubah. Tracker tag yang sudah terpasang tetap berfungsi seperti semula. Tidak diperlukan pengalihan untuk bookmark /dashboard yang sudah ada.