Persona Host · v0.2
Host: Villa Owner Dashboard
Komponen untuk dashboard pemilik villa. Memakai Foundation v0.2 dan font yang sama dengan Guest (Fraunces dan Montserrat). Komponen lain (Button, Modal, Toast, Tabs, Badge, Checkbox) diambil dari Guest v0.5. Dasarnya ada di halaman Audit Host. Semua angka dan nama di sini adalah placeholder.
TopNav
Mengikuti navbar CMS: putih, border bawah, tautan aktif teal. Perbedaannya: di bawah 768px tautan dilipat ke menu (CMS lama menyembunyikannya tanpa pengganti). Tautan aktif memakai teal-800 untuk teks (teal-500 di CMS hanya 2.49:1). Kirim current dari rute aktif.
StatCard dan PeriodFilter
Empat label mengikuti dashboard. Empat kolom mulai 768px, dua kolom di bawahnya. Periode terpilih: week. Rentang tanggal kustom belum ada di kit (CMS punya); akan memakai DateRangeCalendar dari Guest.
DataTable
| Villa name | Room | Status | Date | Net price |
|---|---|---|---|---|
| Villa name A | Room 1 | Selesai | 00 Mon 0000 | Rp 0 |
| Villa name B | Room 2 | Menunggu Konfirmasi | 00 Mon 0000 | Rp 0 |
| Villa name C | Room 1 | Dibatalkan Owner | 00 Mon 0000 | Rp 0 |
Header 12px huruf kapital, sel 16 dan 12px, hover latar ink-50, loading berupa skeleton, keadaan kosong bawaan. Status memakai StatusBadge (di bawah), yang membaca label dan warna dari backend.
StatusBadge
| Status backend | Label | Warna backend | Tampil |
|---|---|---|---|
| Waiting Respond from Owner | Menunggu Konfirmasi | orange | Menunggu Konfirmasi |
| Waiting For Payment | Menunggu Pembayaran | blue | Menunggu Pembayaran |
| Payment In Progress | Pembayaran Diproses | blue | Pembayaran Diproses |
| Payment Expired | Pembayaran Kadaluarsa | gray | Pembayaran Kadaluarsa |
| Paid | Mendatang | cyan | Mendatang |
| Paid (setelah tanggal check-out) | Selesai | green | Selesai |
| Failed | Gagal | red | Gagal |
| Payment Canceled By User | Dibatalkan | gray | Dibatalkan |
| Refund | Refund | purple | Refund |
| Cancel By Owner | Dibatalkan Owner | red | Dibatalkan Owner |
| Canceled By System | Dibatalkan Sistem | gray | Dibatalkan Sistem |
| pending (disbursement) | Pending | orange | Pending |
| approved (disbursement) | Approved | green | Approved |
| disbursed (disbursement) | Disbursed | green | Disbursed |
| rejected (disbursement) | Rejected | red | Rejected |
| failed (disbursement) | Failed | red | Failed |
Daftar diambil dari backend (cmsBookingStatus di s_cms_user.go dan peta disbursement di s_cms_dashboard.go); "Selesai" muncul saat status Paid dan tanggal check-out sudah lewat. Backend sudah mengirim label dan nama warna, jadi aplikasi cukup meneruskan keduanya. Usulan pemetaan warna ke tone (lulus AA): orange ke warning, blue dan cyan ke info, green ke success, red ke error, purple dan gray ke neutral. Label selalu tampil, jadi biru dan cyan yang kini sama tetap bisa dibedakan lewat teks. Yang perlu dikonfirmasi: apakah "Mendatang" (cyan) dan "Menunggu Pembayaran" (blue) perlu tampil berbeda.
ChartFrame
Revenue
import { ChartFrame, chartTheme } from '@vilacation/designkit';
const t = chartTheme(); // warna dibaca dari token --vc-*
// ApexCharts (dipakai CMS)
options = {
chart: { type: 'area', fontFamily: t.fontFamily },
colors: [t.colors[0]],
grid: { borderColor: t.gridColor, strokeDashArray: 4 },
xaxis: { labels: { style: { colors: t.labelColor } } },
yaxis: { labels: { style: { colors: t.labelColor } } }
}Bingkai kartu (radius 20, padding 24, tinggi minimum 350 seperti CMS) dengan judul, slot aksi, dan keadaan memuat atau kosong. Kit tidak membundel chart; chartTheme() mengambil warna dari token. Perbedaan dari CMS: garis teal-600 (bukan #2DD4BF), label sumbu ink-600 (kontras 7:1, bukan gray-400 yang hanya 2.54:1), dan font Montserrat (bukan Inter). Tidak ada grafik contoh karena belum ada data nyata.