Documentation - NusaCore

Layout

Struktur halaman: sidebar kiri, topbar header, dan main container dengan inner content.

CSS Framework

<aside class="sidebar">
  <div class="sidebar-content">...</div>
  <div class="sidebar-footer">...</div>
</aside>

<main class="main-wrapper">
  <div class="main-container">
    <header class="topbar">...</header>
    <div class="inner-content">
      <div class="page-head">
        <h1 class="page-title">Judul</h1>
        <p class="page-desc">Deskripsi</p>
      </div>
    </div>
  </div>
</main>

Collapsed sidebar: tambah class .collapsed ke .sidebar. Beralih via sidebarToggle.

Mobile: .sidebar-backdrop untuk overlay. Sidebar otomatis position:fixed di HP.

Buttons

Tombol dengan class .btn + variant. Bisa <button> atau <a>.

CSS Framework

Preview

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-secondary btn-icon">
  <i class="fa-solid fa-plus"></i>
</button>

Class	Guna
`.btn`	Base (wajib)
`.btn-primary`	Aksi utama
`.btn-secondary`	Aksi kedua
`.btn-success`	Simpan/sukses
`.btn-warning`	Peringatan
`.btn-danger`	Hapus/danger
`.btn-outline`	Outline primary
`.btn-sm`	Ukuran kecil
`.btn-icon`	Icon saja (34×34)

Badges

Label status dengan <span class="badge"> + variant warna.

CSS Framework

Preview

Primary Success Pending Failed Draft Premium

<span class="badge badge-primary">Active</span>
<span class="badge badge-success">Completed</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-danger">Failed</span>
<span class="badge badge-gray">Draft</span>
<span class="badge badge-purple">Premium</span>

Class	Guna
`.badge-primary`	Aktif / default
`.badge-success`	Sukses / selesai
`.badge-warning`	Pending / warning
`.badge-danger`	Error / gagal
`.badge-gray`	Inactive / draft
`.badge-purple`	Premium / spesial

Cards

Wadah konten .card dengan header, body, dan footer opsional.

CSS Framework

<div class="card">
  <div class="card-header">Judul Card</div>
  <div class="card-body">
    Konten utama...
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary">Batal</button>
    <button class="btn btn-primary">Simpan</button>
  </div>
</div>

Header display:flex; justify-content:space-between — bisa diisi select atau badge di kanan.

Footer justify-content:flex-end — tempat tombol aksi.

Stat Cards

Kartu metrik untuk dashboard: icon, judul, value, dan trend.

CSS Framework

Preview

Total User

12.450

▲ 15% vs bulan lalu

Revenue

Rp 45jt

▲ 8,2% vs bulan lalu

<div class="stat-card">
  <div class="stat-header">
    <div>
      <div class="stat-title">Total User</div>
      <div class="stat-value">12.450</div>
    </div>
    <div class="stat-icon blue">
      <i class="fa-solid fa-users"></i>
    </div>
  </div>
  <div class="stat-trend">
    <span class="trend-up">&#9650; 15%</span> vs bulan lalu
  </div>
</div>

Class	Warna icon
`.stat-icon.blue`	Biru (primary)
`.stat-icon.green`	Hijau (success)
`.stat-icon.orange`	Orange (warning)
`.stat-icon.red`	Merah (danger)
`.stat-icon.purple`	Ungu

Form Elements

Input, select, textarea, checkbox, radio, dan switch toggle — semua sudah di-custom.

CSS Framework

Input / Select / Textarea:

<div class="form-group">
  <label class="form-label">Nama</label>
  <input class="form-control" placeholder="...">
  <p class="form-help">Pesan bantuan</p>
</div>

<select class="form-control">
  <option>...</option>
</select>

<textarea class="form-control" rows="3"></textarea>

Custom Checkbox & Radio:

<label class="form-check">
  <input class="form-check-input" type="checkbox">
  <span class="form-check-label">Label</span>
</label>

<label class="form-check">
  <input class="form-check-input" type="radio" name="g">
  <span class="form-check-label">Radio</span>
</label>

Switch Toggle:

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

Focus: .form-control otomatis dapat box-shadow biru saat focus. Dark mode didukung penuh.

Tables

Tabel dengan .table dalam .table-responsive. Mobile card view via .table-card-view.

CSS Framework

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>Nama</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>
          <span class="badge badge-success">Active</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Card view mobile: tambah .table-card-view ke .table-responsive agar tabel jadi kartu di HP. data-label di setiap <td> untuk judul field.

Alerts

Notifikasi in-page dengan .alert + variant. Bisa ditutup via JS.

CSS Framework

Preview

Data berhasil disimpan.

Maintenance pukul 02.00 WIB.

Storage hampir penuh.

Koneksi database gagal.

<div class="alert alert-success">
  <i class="fa-solid fa-check-circle"></i> Sukses!
</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Tombol close: <span class="close-btn" onclick="this.parentElement.remove()"><i class="fa-solid fa-xmark"></i></span> di dalam alert.

Modals

Dialog popup dengan backdrop, header, body, dan footer.

CSS Framework

<div class="modal-backdrop" id="modalSaya">
  <div class="modal">
    <div class="modal-header">
      <h3>Judul</h3>
      <button onclick="closeModal('modalSaya')">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="modal-body">Konten...</div>
    <div class="modal-footer">
      <button class="btn btn-secondary"
        onclick="closeModal('modalSaya')">Batal</button>
      <button class="btn btn-primary">Simpan</button>
    </div>
  </div>
</div>

JS: openModal('id') dan closeModal('id') di app.js. Cukup toggle class .show pada .modal-backdrop.

Animasi: @keyframes modalFadeIn — scale .95 → 1 + fade.

Toasts

Notifikasi popup pojok kanan bawah. Dua mode: simple .toast dan stacked .toast-variant.

CSS Framework

Simple (via JS):

// Panggil dari onclick / JS
showToast('Pesan berhasil');
showToast('Terjadi kesalahan');

Variant (HTML manual):

<div class="toast-variant toast-success">
  <i class="fa-solid fa-check-circle"></i> Tersimpan!
</div>
<div class="toast-variant toast-error">
  <i class="fa-solid fa-circle-xmark"></i> Gagal!
</div>
<div class="toast-variant toast-warning">
  <i class="fa-solid fa-triangle-exclamation"></i> Perhatian!
</div>
<div class="toast-variant toast-info">
  <i class="fa-solid fa-circle-info"></i> Info.
</div>

Animasi: @keyframes slideInToast — slide dari kanan .3s.

Tabs

Navigasi tab horizontal: .tabs berisi .tab-btn. Aktif dengan class .active.

CSS Framework

<div class="tabs">
  <button class="tab-btn active">Tab 1</button>
  <button class="tab-btn">Tab 2</button>
  <button class="tab-btn">Tab 3</button>
</div>

JS: toggle class .active antar tab-btn dan tampilkan .tab-content sesuai data-target. Lihat components.html untuk contoh JS.

Pagination

Navigasi halaman dengan .pagination wrapper dan .page-btn untuk tiap nomor.

CSS Framework

Preview

<div class="pagination">
  <button class="page-btn">
    <i class="fa-solid fa-chevron-left"></i>
  </button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">
    <i class="fa-solid fa-chevron-right"></i>
  </button>
</div>

Gunakan disabled pada prev/next jika di awal/akhir halaman.

Navigation

Item sidebar dengan .nav-item, .nav-icon, .nav-text, .nav-pill, dan .nav-label.

CSS Framework

<a class="nav-item active" href="...">
  <i class="fa-solid fa-users nav-icon"></i>
  <span class="nav-text">Users</span>
  <span class="nav-pill">12</span>
</a>

<div class="nav-label">Menu Utama</div>

States: .active untuk halaman aktif (warna biru). .nav-pill untuk counter. .nav-label untuk pemisah grup menu.

Avatars

Lingkaran inisial user dengan .avatar. Bisa diberi variant warna atau ukuran inline.

CSS Framework

Preview

AH

JD

AK

JD

AH

<div class="avatar">AH</div>
<div class="avatar green">JD</div>
<div class="avatar orange">AH</div>

// Ukuran kustom via inline
<div class="avatar"
  style="width:48px;height:48px;font-size:16px">
  AK
</div>

Default 32×32px. Varian: .green, .orange.

Loading States

Komponen untuk loading, data kosong, dan error. Lihat demo di states.html.

CSS Framework

Loading Spinner:

<div class="loading-spinner"></div>

Skeleton Loading:

<div class="skeleton skeleton-avatar"></div>
<div class="skeleton skeleton-line"
  style="width:70%"></div>
<div class="skeleton skeleton-card"></div>

Empty State:

<div class="empty-state">
  <i class="fa-solid fa-inbox icon-lg mb-3"></i>
  <h3>Data kosong</h3>
  <p class="text-sm text-muted mt-2">
    Belum ada data.</p>
  <button class="btn btn-primary mt-2">
    Tambah Data
  </button>
</div>

Animasi: spinner @keyframes spin .8s, skeleton @keyframes skeleton 1.35s (shimmer).

Progress Bar

Indikator progres dengan .progress (track) dan .progress-fill (bar).

CSS

Preview

Storage78%

Bandwidth45%

<div class="progress">
  <div class="progress-fill"
    style="width:78%"></div>
</div>

// Warna kustom via background
<div class="progress-fill"
  style="width:45%;background:var(--warning)">
</div>

Default biru. Bisa diubah via background inline. CSS ada di components.html (page-specific).

Utility Classes

Helper untuk spacing, alignment, typography, dan layout grid.

CSS Framework

Kategori	Class
Display	`.flex` `.flex-col` `.hidden`
Alignment	`.items-center` `.justify-between` `.justify-end`
Gap	`.gap-1` (3px) – `.gap-4` (12px)
Margin	`.mb-2` (6px) – `.mb-6` (18px), `.mt-2` (6px)
Text	`.text-sm` `.text-xs` `.text-muted` `.font-medium` `.font-bold`
Grid	`.grid-2` `.grid-3` `.grid-4` `.grid-main`
Icon	`.icon-sm` (14px) `.icon-md` (18px) `.icon-lg` (22px)
Responsive	`.hide-mobile` (sembunyi di HP)

Komponen Lain

Komponen pelengkap untuk dashboard dan halaman fungsional.

CSS

Quick Action:

<div class="quick-action">
  <div>
    <b>Tambah User</b>
    <p class="text-xs text-muted">...</p>
  </div>
  <button class="btn btn-primary btn-sm">Buka</button>
</div>

Activity List (timeline):

<div class="activity-item">
  <div class="activity-dot"></div>
  <div>
    <p class="font-bold text-sm">Aktivitas</p>
    <span class="text-xs text-muted">Waktu</span>
  </div>
</div>

Toolbar + Search:

<div class="toolbar">
  <div class="search-box">
    <span><i class="fa-solid fa-search"></i></span>
    <input class="form-control" placeholder="Cari...">
  </div>
  <button class="btn btn-primary">+ Tambah</button>
</div>

Error Preview: .error-preview + .error-code untuk halaman 404/403/500.

Pricing Card: .pricing-card + .featured, .pricing-price, .feature-list.

Notif Card: .notif-card untuk daftar notifikasi.

Command Palette

Pencarian global via shortcut Ctrl+K.

CSS Framework

<div class="command-backdrop" id="commandPalette">
  <div class="command-modal">
    <div class="command-input">
      <i class="fa-solid fa-magnifying-glass"></i>
      <input id="commandSearch" placeholder="Cari...">
    </div>
    <div class="command-list" id="commandList"></div>
    <div class="command-footer">
      <span>Ctrl+K buka/tutup</span>
    </div>
  </div>
</div>

JS: openCommandPalette(), closeCommandPalette(), renderCommandItems() di app.js. Data menu dari array commandItems.

Dark Mode

Tema gelap/terang via toggle class body.dark-mode.

CSS Framework

<button class="theme-toggle"
  onclick="toggleTheme()">
  <i class="fa-solid fa-moon"></i>
  <span>Dark</span>
</button>

JS: toggleTheme() di app.js — toggle class, simpan ke localStorage (admincore-theme), update icon/teks.

Sistem: semua komponen otomatis menyesuaikan karena pakai CSS custom properties (--bg-white, --text-main, --border-normal, dll).

Color System

CSS custom properties untuk palet warna konsisten di seluruh komponen.

CSS Framework

Core Colors

--primary

--success

--danger

--warning

--info

--purple

:root {
  --primary: #2563eb;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #0ea5e9;
  --purple: #7c3aed;
  --bg-body: #eef2f7;
  --bg-white: #fff;
  --text-main: #111827;
  --text-muted: #64748b;
  --border-normal: #e2e8f0;
  --radius: 14px;
}

Semua komponen (badge, btn, alert, stat-icon) menggunakan warna dari variable ini dan menyesuaikan otomatis di dark mode.