Simple Admin v1.3.0

Simple Admin v1.3.0

Tabel data tanpa library, invoice siap cetak, dan halaman error yang lengkap.

Yang baru

Tabel data

Modul baru assets/js/datatable.js mengubah array data menjadi tabel lengkap tanpa jQuery atau DataTables:

• Sort kolom dengan klik atau keyboard
• Paginasi dengan pilihan 5, 10, atau 25 baris
• Pencarian dan filter dari luar (misalnya tab status)
• Pilih banyak baris dengan aksi massal
• Ekspor CSV untuk semua baris atau hanya yang dipilih

const table = saDataTable(document.getElementById("myTable"), {
  rows: allOrders,
  columns: [
    { key: "id", label: "No. Pesanan" },
    { key: "total", label: "Total", align: "end", render: (o) => rupiah(o.total) },
  ],
  pageSize: 5,
  selectable: true,
  csvName: "pesanan.csv",
});

Halaman Pesanan sekarang memakai modul ini, lengkap dengan aksi massal "Tandai lunas" dan tombol "Ekspor CSV" yang benar-benar mengunduh file. Dokumentasi dan contohnya ada di Plugin › Tabel data.

Detail pesanan dan invoice

Klik nomor pesanan di Dashboard atau Pesanan untuk membuka pages/order-detail.html?id=…:

• Invoice berisi item, ongkir, total, alamat, dan kurir
• Garis waktu status pesanan dan aksi yang sesuai (tandai lunas, salin resi, kirim ulang tautan pembayaran)
• Tombol Cetak invoice yang hanya mencetak invoice, tanpa sidebar dan topbar, selalu dalam mode terang

Halaman error

Selain 404, kini ada 500 Kesalahan server dan Maintenance, dikelompokkan di menu Halaman › Error.

Perubahan lain

• Item menu bisa ikut aktif di halaman turunan lewat properti match di nav.js.
• Data rincian pesanan (orderDetails) ditambahkan ke data.js.

Upgrade dari v1.2.0

1. Salin folder assets/ dan file baru di pages/ (order-detail.html, error-500.html, maintenance.html, plugins/datatable.html).
2. Untuk memakai tabel data di halaman Anda, muat assets/js/datatable.js setelah data.js, lalu panggil saDataTable().

Riwayat lengkap ada di CHANGELOG.md.

Simple Admin v1.2.0

Simple Admin v1.2.0

Kerangka halaman kini sepenuhnya diatur dari satu file, semua ikon memakai Bootstrap Icons, dan grafik memakai Chart.js yang warnanya ikut tema.

Yang baru

Topbar dari konfigurasi

Seperti sidebar di v1.1.0, topbar sekarang dirender dari assets/js/nav.js. Nama pengguna, peran, isi menu akun, dan teks kolom pencarian cukup diubah di satu tempat:

const saUser = { name: "Satria Eza", role: "Administrator" };
const saAccountMenu = [
  { text: "Profil saya", href: "pages/settings.html" },
  { divider: true },
  { text: "Keluar", logout: true },
];

Setiap halaman aplikasi kini hanya berisi <aside id="saSidebar"> dan <header id="saTopbar"> yang kosong. Tidak ada lagi markup kerangka yang perlu disalin ke setiap file.

Bootstrap Icons

Semua ikon memakai Bootstrap Icons 1.11.3. Pilih ikon dari katalognya, lalu tulis:

<i class="bi bi-house" aria-hidden="true"></i>

Di nav.js, cukup icon: "house".

Grafik dengan Chart.js

• Grafik pendapatan Dashboard kini memakai Chart.js 4.4.6.
• Halaman Laporan mendapat grafik donat penjualan per kategori dan grafik batang metode pembayaran.
• Halaman baru Plugin › Grafik berisi contoh garis, batang, dan donat yang bisa langsung disalin.

Helper saChart() di assets/js/charts.js mengambil warna dari token tema, menggambar ulang grafik saat mode gelap diaktifkan, mematikan animasi saat reduce motion aktif, dan memformat angka gaya Indonesia (1.400).

saChart(document.getElementById("myChart"), (c) => ({
  type: "bar",
  data: { labels: ["Sen", "Sel"], datasets: [{ data: [42, 38], backgroundColor: c.accent }] },
}));

Perubahan lain

• Data grafik dipindah ke assets/js/data.js (revenue, salesByCategory, paymentMethods).
• Token warna kategori grafik baru: --sa-chart-1 sampai --sa-chart-5.
• Menu "Keluar" memakai warna token agar kontras di mode gelap.

Upgrade dari v1.1.0

1. Salin folder assets/ yang baru.
2. Tambahkan Bootstrap Icons di <head> setiap halaman, setelah CSS Bootstrap:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

3. Di setiap halaman aplikasi, ganti seluruh <header class="sa-topbar">…</header> dengan:

   <header class="sa-topbar" id="saTopbar"></header>

4. Di nav.js, ganti nama ikon lama dengan nama Bootstrap Icons (home → house, user → person, alert → exclamation-circle, file → file-earmark).
5. Di halaman bergrafik, muat https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.js setelah SweetAlert2 dan assets/js/charts.js setelah data.js.

Riwayat lengkap ada di CHANGELOG.md.

Simple Admin v1.1.0

Simple Admin v1.1.0

Template kini menjelaskan dirinya sendiri: ada bagian UI Toolkit berisi contoh komponen yang bisa langsung disalin, panduan Memulai di dalam template, dan menu yang cukup diubah di satu file.

Yang baru

Menu dari satu konfigurasi

Seluruh sidebar (nama brand, grup, item, submenu, badge, ikon, dan kartu bawah) sekarang diatur di assets/js/nav.js. Tidak perlu lagi mengedit tujuh file HTML untuk menambah satu menu. Menu aktif dan submenu yang terbuka ditentukan otomatis dari alamat halaman.

{ text: "Kategori", href: "pages/categories.html", icon: "box" }

UI Toolkit

Lima halaman dokumentasi interaktif di pages/ui/:

• Tombol: utama/sekunder, dengan ikon, ukuran, tombol ikon, segmen, memuat, toast dan konfirmasi
• Form: input, select, checkbox/radio/saklar, input group, validasi, form dalam panel
• Tabel: tabel dasar, kolom pengguna, keadaan kosong, dan tabel dari data dengan pencarian
• Status & badge: status pill, badge hitungan, perubahan KPI, avatar, progress
• Modal & alert: alert di halaman, toast, dialog konfirmasi, modal form

Setiap contoh menampilkan preview langsung dan kode HTML siap salin. Kodenya diambil otomatis dari preview, jadi selalu sama dengan yang tampil.

Panduan dan halaman kosong

• Panduan › Memulai menjelaskan cara menjalankan, struktur folder, menambah halaman, mengubah menu, mengganti warna, dan mengambil data dari API.
• Halaman kosong (pages/blank.html) siap disalin sebagai titik awal halaman baru.

Komponen dan helper baru

• .sa-alert (info, success, warning, danger), .sa-modal, dan .sa-badge
• escapeHtml() di common.js untuk menampilkan data dari API dengan aman

Perubahan

• Markup sidebar dihapus dari setiap file HTML. Jika Anda sudah mengubah menu di v1.0.0, pindahkan perubahan itu ke assets/js/nav.js.
• Halaman aplikasi sekarang memuat nav.js sebelum shell.js.
• Badge menu memakai .sa-badge agar teksnya kontras di mode gelap.

Upgrade dari v1.0.0

1. Salin folder assets/ yang baru.
2. Di setiap halaman aplikasi Anda, ganti seluruh <aside class="sa-sidebar">…</aside> dengan:

   <aside class="sa-sidebar offcanvas-lg offcanvas-start" tabindex="-1" id="saSidebar" aria-labelledby="saSidebarLabel"></aside>

3. Tambahkan <script src="assets/js/nav.js"></script> tepat sebelum shell.js (sesuaikan ../ dengan kedalaman folder).
4. Daftarkan menu Anda di assets/js/nav.js.

Riwayat lengkap ada di CHANGELOG.md.

Simple Admin v1.0.0

Simple Admin v1.0.0

Rilis pertama Simple Admin: template dashboard admin berbahasa Indonesia dengan HTML, CSS, dan JavaScript murni di atas Bootstrap 5.3.3. Tanpa build tool. Unduh, ekstrak, lalu buka index.html di browser.

Isi rilis

• 7 halaman aplikasi: Dashboard, Pesanan, Produk, Pelanggan, Laporan, Pengguna & Akses, dan Pengaturan, dengan data contoh toko fiktif "Toko Satria".
• 3 halaman auth: Masuk, Daftar, dan Lupa Kata Sandi dengan validasi form, meter kekuatan kata sandi, dan tombol login Google, GitHub, Microsoft (simulasi).
• Halaman 404 yang menampilkan alamat yang dicari dan pintasan ke halaman populer.
• Mode gelap yang mengikuti pengaturan sistem, tersimpan di browser, dan tidak berkedip saat dimuat.
• Grafik pendapatan SVG tanpa library, dengan rentang 6 atau 12 bulan.
• Tabel interaktif dengan filter dan pencarian.
• Notifikasi, toast, dan dialog konfirmasi (SweetAlert2) yang mengikuti tema.
• Responsif: sidebar menjadi offcanvas di layar kecil.
• Ramah aksesibilitas: fokus keyboard terlihat, label ARIA, dan animasi yang mati saat reduce motion aktif.
• Mudah dikustomisasi: semua warna adalah variabel CSS di awal assets/css/style.css.

Mulai

python -m http.server 8000
# buka http://localhost:8000

Panduan lengkap ada di README.md. Token dan komponen visual dijelaskan di docs/design-system.md.

Dependensi (via CDN)

• Bootstrap 5.3.3
• SweetAlert2 11.14.5
• Plus Jakarta Sans dan JetBrains Mono (Google Fonts)

Keterbatasan yang diketahui

• Belum ada backend atau penyimpanan. Perubahan data hilang saat halaman dimuat ulang.
• Halaman auth hanya simulasi: login apa pun berhasil, login sosial belum terhubung ke OAuth, dan halaman aplikasi tidak dijaga.
• 404.html memakai path relatif dari root, jadi aset hanya termuat benar untuk URL salah di tingkat root.
• Sidebar dan topbar ditulis ulang di setiap file HTML, jadi mengubah menu berarti mengedit ketujuh file.
• Pencarian global di topbar belum mencari apa pun.
• Halaman Laporan dan Pengaturan masih statis.
• Tombol Ekspor, Unduh PDF, dan Undang Pengguna hanya menampilkan toast.
• Membutuhkan internet karena aset dimuat dari CDN.

Sebelum memakai data sungguhan, baca bagian "Hal yang perlu diperhatikan" di SECURITY.md.

Lisensi

MIT. Bebas dipakai untuk proyek pribadi maupun komersial.