Persona Host
Audit area /host di CMS
Hasil membaca kode vilacation-cms/src/routes/host dan komponen yang dipakainya. Isinya fakta dari kode, bukan usulan. Usulan token dan komponen Host ada di bagian terakhir dan menunggu keputusan. Host adalah Villa Owner Dashboard.
1. Struktur halaman
Navbar atas memuat tujuh tautan: Overview (dashboard), Reservation, Calendar, Villa Management, Messages, Ratings, Voucher. Menu avatar memuat Profile, Disbursement, dan Bank Account. Rute lain: receipt, ticket, serta sub-halaman Villa Management (register, edit, approval) dan Voucher (create, edit).
Shell berbeda dari Admin. Host memakai navbar atas (sticky, tinggi 80px, putih, border bawah, padding 16px mobile dan 64px mulai md) di atas latar #FCFCFD. Area /management (Admin) memakai sidebar dan topbar sendiri. Jadi kit memang perlu dua pola shell, bukan satu. Tautan navbar Host disembunyikan di bawah md (hidden md:flex) dan tidak ada menu pengganti di Navbar.svelte untuk layar kecil.
2. Token yang sudah dideklarasikan CMS
Hanya sembilan warna di @theme (routes/layout.css). Selebihnya halaman memakai warna Tailwind bawaan langsung.
3. Yang dipakai di halaman Host
| Aspek | Temuan |
|---|---|
| Warna aksen | Keluarga cyan paling sering (border-cyan-400 64x, text-cyan-500 33x), lalu teal (bg-teal-500 21x, border-teal-300 26x). Link navbar aktif teal-500, tombol filter aktif teal-400, warna chart #2DD4BF. |
| Teal berbeda-beda | Ada empat teal untuk fungsi serupa: #00D6B5 (admin-green), #00D1B2 (Button, hover #00B89C), teal-400/500 Tailwind, dan #0DCFB0 (receipt, ticket). |
| Radius | rounded-full 177x, rounded-xl 157x, rounded-2xl 119x, rounded-lg 71x. |
| Shadow | shadow-sm 90x (kartu), shadow-lg 36x (tombol, dropdown). |
| Berat font | bold 265x, semibold 149x, medium 90x; font-black dipakai di Button dan judul modal. |
| Font family | Tidak ada pemuatan font di app.html atau layout.css; opsi chart menyebut Inter. Artinya halaman memakai font bawaan sistem, bukan Fraunces atau Montserrat. |
| Chart | ApexCharts (area, tinggi 320, kurva halus, garis grid putus-putus). Isi gradien tipis 0.4 ke 0.05 di bawah garis. |
| Peta dan galeri | Leaflet ada di dependensi, tapi tidak muncul di halaman Host yang dibaca. |
4. Pola komponen
| Pola | Bentuk di kode | Sumber |
|---|---|---|
| Kartu angka | Empat kartu (Total Transaction, Pending to Disburse, Ready to Disburse, Disbursed): putih, border gray-100, radius xl, padding 16, shadow-sm. Label gray-500 14px, ikon 20px berwarna (teal, orange, blue, green), nilai 24px bold dalam Rupiah. | host/dashboard |
| Filter periode | Pil: Week, 1 Month, 3 Month, plus rentang tanggal kustom. Aktif teal-400 berteks putih, tidak aktif border gray-200. | host/dashboard |
| Tabel | Header bg gray-50, 12px uppercase gray-500; sel px-6 py-4; baris dibatasi divide-gray-100, hover gray-50. Loading: baris skeleton animate-pulse. | dashboard, villa-management, voucher, disbursement, bank-account |
| Badge status (sistem A) | Mengikuti status_color dari backend: orange, blue, cyan, green, red, purple, gray. Teks 600 di latar 100, tanpa border, pil. | dashboard |
| Badge status (sistem B) | Peta tetap per status: waiting-confirmation kuning, confirmed hijau, cancelled merah, completed biru, Waiting For Payment dan Payment In Progress cyan. Teks 700 di latar 50 dengan border 200, pil. | ReservationCard.svelte |
| Button | primary, secondary, danger, ghost. Radius 2xl, padding px-10 py-4, font-black, active:scale-95. Primary berlatar #00D1B2 dengan shadow berwarna. | Button.svelte |
| Modal | Scrim gray-900/60 dengan blur, panel radius lg, lebar default max-w-lg, transisi fade dan scale. Judul 24px font-black #2D3E50. Tombol tutup bulat di pojok. | BaseModal.svelte |
| Notifikasi | Ada panel notifikasi, lonceng, dan toast terpisah. | NotificationPanel, NotificationToast |
| Placeholder | Dashboard menampilkan blok abu-abu berlabel "Banner" setinggi 160px. | host/dashboard |
5. Temuan kontras
Rasio dihitung saat build dari pasangan warna di atas. Ambang AA: 4.5 untuk teks kecil, 3 untuk teks besar (18px tebal atau 24px).
| Pasangan | Ukuran | Rasio | AA teks kecil |
|---|---|---|---|
| Button primary: teks putih di #00D1B2 | text-sm, font-black | 1.95:1 | Gagal |
| Filter periode aktif: putih di teal-400 | text-xs | 1.86:1 | Gagal |
| Link navbar aktif: teal-500 di putih | text-sm | 2.49:1 | Gagal |
| Label sumbu chart: gray-400 di putih | 11-12px | 2.54:1 | Gagal |
| Badge status: orange-600 di orange-100 | text-xs | 3.11:1 | Gagal |
| Badge status: green-600 di green-100 | text-xs | 3.00:1 | Gagal |
| Badge status: cyan-600 di cyan-100 | text-xs | 3.29:1 | Gagal |
| Badge status: red-600 di red-100 | text-xs | 3.95:1 | Gagal |
| Badge status: blue-600 di blue-100 | text-xs | 4.24:1 | Gagal |
| Badge status: purple-600 di purple-100 | text-xs | 4.56:1 | Lulus |
| Badge reservasi: green-700 di green-50 | text-xs | 4.79:1 | Lulus |
| Label kartu angka: gray-500 di putih | text-sm | 4.83:1 | Lulus |
6. Temuan lain
| Temuan | Dampak |
|---|---|
| Dua sistem badge status berdampingan (A dan B) dengan komposisi berbeda. | Status yang sama bisa tampil berbeda antara dashboard dan kartu reservasi. |
| Warna badge sistem A ditentukan backend lewat nama warna. Daftar status dan artinya tidak terdokumentasi di kode frontend. | Kit tidak bisa menetapkan arti warna sebelum daftar status disepakati dengan backend. |
| Empat teal berbeda untuk fungsi yang sama. | Dashboard Host tidak mengikuti satu warna merek. |
| BaseModal.svelte tidak menangani tombol Escape dan tidak memindahkan fokus (dari bacaan file). | Aksesibilitas keyboard lebih lemah dari Modal di kit. |
| Tautan navbar hilang di bawah 768px tanpa pengganti. | Host tidak punya navigasi di layar kecil dari komponen Navbar. |
| Font Fraunces dan Montserrat tidak dimuat di CMS. | Menempelkan token kit ke CMS akan mengubah tampilan teks. Perlu keputusan font untuk Host. |
| Badge teks 12px berwarna 600 di latar 100 gagal AA untuk lima dari enam warna. | Pasangan 700 di latar 50 (sistem B) lebih aman; yang gagal hanya perlu diganti tingkatnya. |
8. Halaman besar: Calendar dan ReservationCard
| Bagian | Temuan |
|---|---|
| Calendar (860 baris) | Panel kiri: properti dan kamar terpilih (chip teal-100, lencana merah bila terblokir) dengan harga dasar, harga akhir pekan, dan penghasilan setelah komisi (harga × (1 − komisi)). Panel kanan: kalender bulanan 7 kolom, sel tinggi 96px berradius xl, nomor hari 20px bold, harga 12px. Akhir pekan (Jumat dan Sabtu) berlatar teal-50 tipis; hari terblokir diberi label "Blocked" (putih di gray-500, 10px). Ada pemilih bulan dan tahun, dan bagian "Set up price". |
| Beda dengan DateRangeCalendar Guest | Guest memilih rentang tanggal dan hanya menandai tidak tersedia. Host mengelola per tanggal: harga khusus, blokir, dan akhir pekan. Ini komponen berbeda (HostCalendar), bukan variasi Guest. Awal pekan di Guest Senin; di CMS tanggal diisi dari Minggu (getDay()). |
| ReservationCard (497 baris) | Kartu yang bisa dibuka: foto kamar, nama villa, tanggal, jumlah tamu, kode dan potongan voucher, harga bersih, serta badge status bergaya sistem B (teks 700, border). Tombol berubah menurut status: "Waiting Respond from Owner" menampilkan terima dan tolak (tolak lewat konfirmasi), "Selesai" menampilkan tombol lain. |
| Tombol aksi | Pil teal-500 dengan teks putih tebal (2.2:1, gagal AA) dan bayangan berwarna; padding px-10 py-3. |
Dua komponen ini belum ada di kit. HostCalendar dan ReservationCard Host adalah pekerjaan berikutnya karena melibatkan aturan bisnis (harga khusus, blokir, komisi) yang perlu dikonfirmasi dengan dev sebelum jadi komponen.
9. Arah yang diusulkan (belum diputuskan)
- Foundation tetap satu. Host memakai token Foundation v0.2 (teal 600/800, ink, line) dan menambah token turunan hanya untuk kebutuhan data: skala status, warna chart, kepadatan tabel.
- Satu sistem badge status dengan pasangan teks 700 di latar 50 (lulus AA), dipakai Host dan Admin. Arti tiap status disepakati dengan backend.
- Komponen Host pertama: StatCard, DataTable (dengan skeleton), StatusBadge, PeriodFilter, TopNav, dan ChartFrame. Modal, Button, Toast, Tabs dan lainnya diambil dari Guest.
- Keputusan untuk Ray: font Host (Fraunces dan Montserrat seperti Guest, atau font sistem agar dashboard terasa data-dense), dan apakah radius mengikuti Guest atau tetap xl dan 2xl khas CMS.