Sistem UI di balik dashboard yang saya bangun.
WAVECORE UI saya rancang dan bangun sendiri, lalu saya pakai sebagai dasar di project dashboard saya: CRM, HR, logistik, ERP, sales, hingga monitoring. Semuanya HTML, CSS, dan JavaScript murni tanpa dependency, satu style.css dan satu style.js berprefix av-, sehingga bisa saya pasang di backend apa pun maupun di Vue dan React.
Satu bahasa desain untuk semua project saya.
- 01
Masalah
Setiap project dashboard yang saya kerjakan, dari CRM sampai sistem gudang, dulu dimulai dengan UI yang berbeda. Tampilannya tidak konsisten, dan komponen yang sama saya tulis ulang berkali-kali.
- 02
Pendekatan
Saya membuat satu sistem UI dengan design token, prefix
av-, dan tanpa dependency, lalu memakainya di setiap project baru. Fokusnya komponen yang selalu saya butuhkan: tabel data, form, select ke server, upload, alert, dan toast. - 03
Peran Saya
Desain UI, design system, pengembangan HTML, CSS, dan JavaScript, library OnvShark (alert, toastify, tags input, text editor, select), serta dokumentasi.
Purpose-built for dashboard.
Jenis project yang memakai WAVECORE UI sebagai dasarnya. Komponennya sama, yang berbeda hanya menu dan datanya.
CRM
Data customer, pipeline, follow-up, dan riwayat transaksi.
HR
Karyawan, absensi, cuti, dan penggajian.
Logistics
Pengiriman, armada, gudang, dan status barang.
ERP
Pembelian, persediaan, aset, dan keuangan antar cabang.
Sales
POS, faktur, target, dan laporan penjualan.
Monitoring
KPI, status mesin, jadwal maintenance, dan peringatan.
Office System
Surat, persetujuan, dokumen, dan tugas tim.
Company Profile
Panel admin untuk konten website perusahaan.
Toko Online
Produk, pesanan, pembayaran, dan stok toko.
Komponen yang selalu saya butuhkan.
Dibangun dari kebutuhan nyata di project dashboard: data, form, dan alur kerja admin, dengan file yang sedikit dan mudah dirawat.
Tabel data untuk ribuan baris
Header dan kolom tetap kiri/kanan, sort, pagination, dan tinggi lewat data-height.
Framework-agnostic
HTML, CSS, dan JavaScript murni tanpa build step. Dipakai langsung di template engine apa pun, atau sebagai lapisan style di Vue dan React.
Prefix av-
Semua class, id, dan variable CSS diawali av-, jadi tidak bentrok dengan CSS lain di project yang sudah ada.
Design token
Warna, font, dan radius diatur lewat --av-* di :root. Ganti satu warna, seluruh tema ikut berubah.
Dark & light mode
Satu tombol mengganti tema seluruh halaman, termasuk sidebar, tabel, modal, dan library.
Select search
ONVSelect: cari ke server, scroll halaman berikutnya, grouping, dan multiple checklist.
Upload file
Drag & drop, validasi tipe dan ukuran, tile dengan preview gambar, tetap terkirim lewat form biasa.
Responsive & aksesibel
Sidebar jadi drawer di mobile. Label, fokus keyboard, dan kontras mengikuti WCAG 2.1 AA.
Halaman dasar setiap project.
Setiap halaman berisi data dummy untuk menunjukkan alur dan komponennya.
- DashboardKPI, grafik SVG, dan ringkasan operasional.
- TablesFreeze header, kolom tetap, sort, dan pagination.
- FormInput, select, checkbox, radio, switch, password, dan validasi.
- POSKasir layar penuh: produk, keranjang, pembayaran, shortcut F2/F9.
- InvoiceFaktur penjualan dengan cek limit kredit, uang muka, dan termin.
- UploadDrop zone dengan tile dan preview gambar.
- SelectSearch, scroll next page, grouping, multiple checklist.
- ModalUkuran default, lg, xl, dan fullscreen.
- LoginPanel brand dan form masuk.
- KomponenAlert, Badge, Button, Toastify, Tags Input, Text Editor, Blank Page.
Detail setiap komponen ada di dokumentasi.
Dipakai di project saya.
Beberapa dashboard yang dibangun di atas WAVECORE UI.
Dibangun dengan teknologi dasar web.
Tanpa dependency dan tanpa build step, sehingga bisa berjalan berdampingan dengan framework lain.
--av-*Have something to discuss?
Whether it is a dashboard, an internal system, or just an idea, I would be glad to hear about it.