Tokodash adalah admin dashboard starter-kit e-commerce dengan mode gelap & terang plus 5 pilihan warna aksen (Violet, Toscha, Oranye, Biru, Emerald), dibangun dengan Tailwind CSS (Play CDN) dan Alpine.js — satu-satunya tema di katalog IndoKoding yang tidak memakai Bootstrap. Selain manajemen toko standar (pesanan, produk dengan setup varian, pelanggan), Tokodash juga punya manajemen Produk Digital (source code/theme/e-book) dan Kursus bergaya LMS, dengan struktur kolom yang mengikuti pola admin Course & Product di IndoKoding Platform. Dilengkapi juga halaman umum bergaya Tabler.io: Landing Page & Harga untuk marketing, alur Daftar/Lupa Sandi, dan Invoice siap cetak.
Halaman
| File | Keterangan |
|---|---|
index.html |
Dashboard – Bento grid: kartu pendapatan besar dengan chart tren, 4 kartu statistik, tabel pesanan terbaru, produk terlaris |
orders.html |
Pesanan – Tabel dengan filter tab status |
order-detail.html |
Detail Pesanan – Timeline status 4 langkah, item, info pelanggan/alamat/pembayaran |
products.html |
Produk – Tabel dengan thumbnail, modal tambah produk |
product-edit.html |
Edit Produk – Halaman dedicated dengan setup Varian Produk (ukuran/warna, SKU & stok per kombinasi) |
customers.html |
Pelanggan – Tabel dengan status VIP/Aktif/Baru/Nonaktif |
reports.html |
Laporan – 4 KPI card + 3 chart (tren, kategori, trafik) |
digital-products.html |
Produk Digital – Tabel source code/theme/e-book dengan versi, tag, pembeli |
digital-product-create.html |
Tambah Produk Digital – Halaman dedicated: Informasi Produk + Publikasikan/Harga/Cover/Tags |
digital-product-edit.html |
Edit Produk Digital – Seperti create, plus tabel Versi (modal unggah) dan Pembelian Terbaru |
courses.html |
Kursus – Tabel dengan kategori, bagian/pelajaran/siswa, modal buat kursus |
course-edit.html |
Edit Kursus – Halaman dedicated: tab Info, Kurikulum (accordion bagian & pelajaran), Bundle Produk Digital |
posts.html |
Postingan – Tabel artikel blog dengan kategori/status/filter tab, modal tulis/edit |
pages.html |
Halaman – Tabel halaman statis dengan slug URL, modal tambah/edit |
settings.html |
Pengaturan – Tab Profil, Langganan, Preferensi |
login.html |
Login – Form dengan state loading |
register.html |
Daftar – Form akun baru dengan persetujuan syarat & ketentuan |
forgot-password.html |
Lupa Sandi – Form kirim tautan reset + state konfirmasi |
landing.html |
Landing Page – Hero, statistik, grid fitur, CTA, FAQ, footer |
pricing.html |
Harga – Toggle Bulanan/Tahunan, 3 paket harga |
invoice.html |
Invoice – Dokumen tagihan siap cetak, ditautkan dari Detail Pesanan |
404.html |
Halaman 404 custom |
Fitur
- Tailwind CSS via Play CDN + Alpine.js, tanpa build step
- Mode gelap & terang — toggle di topbar, tersimpan di localStorage, tanpa flash saat reload
- 5 warna aksen (Violet, Toscha, Oranye, Biru, Emerald) — dipilih di Pengaturan atau floating theme customizer, berlaku instan ke seluruh UI dan diikuti Chart.js
- Floating theme customizer — tombol mengambang di pojok kanan bawah pada semua halaman untuk ganti mode gelap/terang dan warna aksen dengan cepat
- Sidebar icon-rail collapsible (76px ↔ 256px) dengan state localStorage
- Bento grid dashboard — kartu pendapatan besar (2×2) + 4 kartu statistik
- Chart.js dengan tema yang mengikuti mode gelap/terang otomatis (line, doughnut, bar)
- Manajemen produk: modal tambah produk, halaman dedicated untuk edit dengan setup Varian Produk (ukuran/warna, SKU & stok per kombinasi)
- Manajemen konten: Postingan (artikel blog) dan Halaman (halaman statis)
- Manajemen Produk Digital: source code/theme/e-book dengan versi, tag, jumlah pembeli, harga coret — tambah/edit lewat halaman dedicated (bukan modal), lengkap dengan tabel Versi & Pembelian Terbaru
- Manajemen Kursus: tabel dengan kategori, harga, jumlah bagian/pelajaran/siswa; edit kursus lewat halaman dedicated dengan tab Info/Kurikulum/Bundle Produk Digital — kurikulum berupa accordion bagian & pelajaran (durasi, preview gratis) dengan modal tambah bagian/pelajaran
- Modal tambah/edit di sebagian besar halaman manajemen; filter tab status; toggle switch notifikasi
- Dropdown profil admin & dropdown notifikasi di topbar
- Alur autentikasi lengkap: Login, Daftar, Lupa Sandi (saling terhubung)
- Landing Page & halaman Harga untuk marketing publik (top nav sendiri, di luar chrome dashboard)
- Invoice siap cetak dengan stylesheet khusus print
- Tipografi Sora (Google Fonts)
- Fully responsive dengan overlay sidebar mobile
- No jQuery, no Bootstrap
Warna
Palet sebagai CSS custom properties (gelap default, terang via [data-theme="light"]):
--c-bg: #0B0E17 /* Latar utama (gelap) */
--c-surface: #131826 /* Card, sidebar (gelap) */
--c-primary: #8B5CF6 /* Aksen violet — tombol, active state */
Untuk ganti warna tema, edit variabel di assets/css/style.css — otomatis berlaku ke kedua mode di semua halaman.
Dependensi (CDN)
Tailwind CSS Play CDN (JIT, latest)
Alpine.js 3.14.1
Chart.js 4.4.4
Google Fonts Sora
Semua dependensi dimuat via CDN — tidak perlu instalasi npm.
Struktur Folder
tokodash/
├── index.html
├── orders.html
├── order-detail.html
├── products.html
├── product-edit.html
├── customers.html
├── reports.html
├── digital-products.html
├── digital-product-create.html
├── digital-product-edit.html
├── courses.html
├── course-edit.html
├── posts.html
├── pages.html
├── settings.html
├── login.html
├── register.html
├── forgot-password.html
├── landing.html
├── pricing.html
├── invoice.html
├── 404.html
└── assets/
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── screenshot.png
Cara Penggunaan
- Download folder
tokodash/ - Buka
index.htmldi browser - Edit data dummy (pesanan, produk, pelanggan, postingan, halaman, produk digital, kursus) sesuai kebutuhan
- Ganti warna aksen di
assets/css/style.cssuntuk branding sendiri - Hubungkan tabel, modal, dan form ke backend/API sendiri
Target pengguna: Pemilik toko online, penjual produk digital, atau penyedia kursus online yang butuh starter-kit admin dashboard siap pakai, khususnya yang lebih familiar dengan Tailwind CSS + Alpine.js dibanding Bootstrap.
