Aurivo Dash — Template Dashboard Perbankan (Offline)

Halaman yang tersedia

Dashboard

Small box, info box, grafik, timeline, obrolan tim, todo list, tabel transaksi.

Analitik

KPI, area chart, funnel konversi, perangkat, dan sumber pendapatan.

Tabel Data

Cari, sortir, paginasi, pilih massal, sticky head — tanpa plugin.

Formulir

Input, select, switch, rentang, unggah berkas, validasi HTML5.

Grafik

Line, area, bar, stacked, horizontal, donut, radial, sparkline.

Widget & Komponen

Kartu bertools, alert, progress, modal, tabs, accordion, toast.

Papan Kanban

Drag & drop antar kolom, tersimpan di localStorage.

Galeri Ikon

320 ikon dengan pencarian & klik-untuk-salin markup.

Profil Pengguna

Kartu profil, statistik, tab aktivitas, biodata, pengaturan akun.

Invoice

Format siap cetak dengan ringkasan pajak dan status pengiriman.

Masuk / Login

Validasi, lihat sandi, tombol demo (admin@perusahaan.id / admin123).

Daftar Akun

Meter kekuatan kata sandi dan pendaftaran sosial (demo).

Halaman 404

Error page dengan pencarian cepat dan tautan penting.

Report Design

Desainer laporan visual (SatuReport): header, konten berulang, footer, ekspor PDF/XLSX.

Report Viewer

Menampilkan laporan siap cetak dari layout, 13 contoh bawaan, atau file paket di server.

Report Example

Galeri 13 contoh laporan — invoice, slip gaji, surat jalan, pivot, grafik penjualan, sub report.

Selanjutnya milik Anda

Tambahkan berkas baru di src/pages/, jalankan npm run pages.

Yang membuatnya berbeda

Benar-benar offline

Tailwind dikompilasi ke satu berkas CSS; ikon, font, Alpine, dan SortableJS disalin ke assets/. Bisa dibuka lewat file://.

Dark mode & 7 skin

Warna aksen dan warna sidebar diatur lewat CSS variable, bisa diganti langsung dari panel kanan dan disimpan di localStorage.

Grafik tanpa library

± 30 KB modul SVG buatan sendiri: line, area, bar, stacked, horizontal, donut, radial, sparkline — lengkap dengan tooltip dan animasi.

Tabel pintar siap pakai

Pencarian, sortir per kolom, paginasi, dan pilih baris massal — cukup tambahkan atribut data-datatable pada <table>.

Kanban drag & drop

Memakai SortableJS lokal dengan contoh payload onEnd yang siap dikirim ke API Anda.

Asisten AI yang selalu muncul

Widget obrolan melayang di kanan bawah SEMUA halaman (termasuk aplikasi nasabah). Jawaban simulasi berjalan offline; sambungkan model sungguhan lewat window.AIChat.setProvider(fn).

Struktur mudah dipelihara

Halaman disusun dari partial (sidebar.html, navbar.html, dst.) dengan skrip build Node sederhana, hasilnya HTML statis.

Cara memakai

A. Langsung pakai (tanpa Node)

Ekstrak folder template.
Buka pages/index.html (klik dua kali) di peramban.
Selesai — CSS, ikon, dan font sudah ter-compile.

Dibuka lewat file:// semua fitur tampilan jalan. Untuk localStorage dan IntersectionObserver paling stabil, jalankan server statis kecil: npm run serve.

B. Mengubah kode

npm install          # sekali saja
npm run dev          # Tailwind watch → assets/css/app.css
npm run pages        # bangun ulang HTML dari src/pages
npm run icons        # regenerate ikon ke assets/js/icons.js
npm run build        # CSS produksi (minified)
npm run serve        # server statis di :8080

src/input.css — token tema, skin, dan komponen (design system)
src/pages/*.html — isi halaman + front-matter
src/partials/ — sidebar, navbar, footer, panel kontrol, overlay
assets/js/app.js — DataTable, kartu, toast, format angka Indonesia
assets/js/charts.js — mesin grafik SVG

Pintasan keyboard & catatan lisensi

Ctrl + K fokus ke pencarian global
Ctrl + B kecilkan / besarkan sidebar
. ganti mode terang / gelap
Esc tutup menu, modal, atau panel

Tailwind CSS (MIT), Alpine.js (MIT), SortableJS (MIT), Bootstrap Icons (MIT), Source Sans 3 (OFL). Template ini bukan salinan kode AdminLTE — tampilan dan komponennya ditulis ulang memakai utility Tailwind, jadi Anda bebas memodifikasinya.