Persona Admin
Audit area /management di CMS
Hasil membaca vilacation-cms/src/routes/management (40 halaman, sekitar 16.500 baris) dan komponen shell-nya. Fakta dari kode; usulan ada di bagian terakhir. Admin adalah CMS internal tim Vilacation.
1. Struktur menu
| Grup sidebar | Halaman |
|---|---|
| Dashboard | Overview, Villa Performance |
| Villa Management | Active Villa, Approval, Pricing & Commission, Settings |
| User Management | Users, Villa Owner |
| Booking & Transaction | Booking Status, Reconciliation, Voucher, KOL & Affiliate |
| Communication | Broadcast, Management Banner, Management TikTok |
| System & Security | Activity Logs, Role Management, Abuse Report |
| Analytics & Report | Monthly Reports, Booking Trends |
2. Shell
Topbar tetap (tinggi 74px, putih) berisi logo, kolom cari, lonceng notifikasi, dan avatar. Sidebar tetap 320px, putih, dengan bayangan lembut; tiap grup adalah tombol lipat berlatar #FCFCFD dan anak menunya berlatar sama, item aktif berlatar #00D6B5 dengan teks putih. Konten bergeser dengan pl-84 (336px) dan pt-25, latar #F7F8FA.
Layout memakai ukuran tetap tanpa titik patah responsif: sidebar selalu tampil dan konten selalu bergeser 336px, sehingga di layar sempit konten terjepit. Kolom cari selebar tetap 320px (w-80). Avatar topbar memuat gambar dari domain luar (api.dicebear.com). Fungsi lipat sidebar masih memanggil console.log (sisa debug).
3. Yang dipakai di halaman Admin
| Aspek | Temuan |
|---|---|
| Warna merek | admin-green #00D6B5 dominan (border 67x, teks 50x, latar 46x), lalu bg-teal-50 (46x). Tombol utama masih #00D1B2 (sama dengan Host). admin-primary #1BB3C5 dipakai di beberapa grafik. |
| Warna status | Emerald untuk sukses, orange untuk inactive, merah untuk suspended atau bahaya, amber untuk peringatan. Dipakai langsung sebagai kelas Tailwind per halaman. |
| Radius | rounded-full 261x, rounded-xl 194x, rounded-lg 117x, rounded-2xl 85x. |
| Shadow | shadow-sm 104x, shadow-md 35x, shadow 35x, shadow-lg 31x. |
| Halaman terbesar | Detail villa aktif (1.164 baris), approval villa (1.071), booking status (1.071), edit voucher (882), detail user (870). Banyak logika dan markup dalam satu file. |
| Komponen bersama | Hanya BaseModal dan Button; ConfirmModal dipakai 12x. Tabel, kartu angka, filter, dan badge ditulis ulang di tiap halaman (16 halaman memiliki tabel sendiri). |
4. Pola yang berulang
| Pola | Bentuk di kode |
|---|---|
| Header halaman | h1 24px bold gray-900, di kanannya filter periode berbentuk pil (Week, 1 Month, 3 Month, kustom) seperti Host. |
| Kartu angka dengan tren | Putih, border gray-100, radius xl, padding 20, shadow-sm. Ikon 20px dalam kotak teal-50 berwarna admin-green. Nilai 24px bold, lalu persentase naik atau turun (hijau atau merah) dibanding periode lalu. Loading berupa blok abu-abu berdenyut. |
| Daftar dengan filter | Judul "Listing ...", kolom cari berpil, dropdown status berpil, lalu tabel dan penomoran. |
| Tabel | Judul kolom 12px huruf kapital gray-400 dengan garis bawah; sel px-4 py-3. Berbeda dari Host (header berlatar gray-50, sel px-6 py-4). |
| Penomoran | Ringkasan "x–y of z" di kiri; tombol sebelumnya, jendela lima nomor, berikutnya di kanan. |
| Badge status | Teks 500 di latar 50, tanpa border (emerald, orange, merah). Booking status mengikuti warna dari backend seperti dashboard Host. |
| Konfirmasi | ConfirmModal: judul, pesan, tombol batal dan simpan berbentuk pil. |
5. Temuan kontras
| Pasangan | Ukuran | Rasio | AA teks kecil |
|---|---|---|---|
| Item sidebar aktif: putih di #00D6B5 (admin-green) | text-sm, medium | 1.86:1 | Gagal |
| Judul kolom tabel: gray-400 di putih | text-xs | 2.54:1 | Gagal |
| Status Active: emerald-600 di emerald-50 | text-xs | 3.58:1 | Gagal |
| Status Inactive: orange-500 di orange-50 | text-xs | 2.64:1 | Gagal |
| Status Suspended: red-500 di red-50 | text-xs | 3.44:1 | Gagal |
| Teks admin-green di putih (ikon, tautan) | 14-16px | 1.86:1 | Gagal |
| Teks admin-dark-gray di putih | text-sm | 4.68:1 | Lulus |
| Putih di admin-gray-3 (tombol gelap) | text-sm | 14.61:1 | Lulus |
Halaman besar: approval dan detail villa
Halaman approval/[id] (1.071 baris) dan active-villa/[id] (1.164 baris) bukan form panjang, melainkan halaman review: bagian "Detail Informasi", "Tipe Kamar", dan "Alamat Properti", masing-masing judul 18px bold lalu pasangan label (14px semibold abu-abu) di atas nilai. Aksinya terima atau tolak, dengan konfirmasi "Tolak Pengajuan?". Kit menyediakan DetailSection untuk pola ini dan FormSection untuk halaman edit.
6. Perbedaan Admin dan Host
| Hal | Host | Admin |
|---|---|---|
| Shell | Navbar atas | Topbar dan sidebar |
| Kartu angka | Padding 16, tanpa tren | Padding 20, ikon di kotak, ada tren persen |
| Header tabel | Latar gray-50, gray-500 | Tanpa latar, gray-400 |
| Padding sel | 24 dan 16 | 16 dan 12 |
| Badge | 600 di 100 (dashboard) atau 700 di 50 dengan border (kartu reservasi) | 500 di 50 tanpa border |
| Tombol dan modal | Button dan BaseModal yang sama | Button dan BaseModal yang sama, plus ConfirmModal |
7. Arah yang diusulkan (belum diputuskan)
- Admin dan Host berbagi komponen data (StatCard, DataTable, Badge, PeriodFilter, Pagination). Perbedaan padding diatur lewat satu kepadatan, bukan dua komponen.
- Admin menambah AdminShell (topbar dan sidebar yang responsif: sidebar jadi laci di bawah 1024px), Pagination, dan ConfirmDialog.
- Item sidebar aktif tetap hijau CMS #00D6B5, tapi dengan teks gelap (putih hanya 1.86:1).
- Keputusan untuk Ray: apakah hijau #00D6B5 menjadi warna merek Admin saja (membedakannya dari Guest yang memakai teal-600) atau dilipat ke Foundation.