VitePress

Appearance

Navigasi Sistem ​

Panduan lengkap navigasi di SiakadAI untuk semua role.

Struktur Navigasi ​

SiakadAI menggunakan sidebar navigation (desktop) dan hamburger menu (mobile).

Navigation Sidebar

Desktop Navigation ​

Lokasi: Sisi kiri layar

Struktur:

Logo SiakadAI
├── 🏠 Dashboard
├── 📁 Section 1
│   ├── Submenu 1.1
│   ├── Submenu 1.2
│   └── Submenu 1.3
├── 📁 Section 2
│   └── ...
└── 👤 Profile Menu

Cara Menggunakan:

  1. Hover/klik section untuk expand submenu
  2. Klik submenu untuk navigasi ke halaman
  3. Section aktif ditandai dengan warna highlight

Mobile Navigation ​

Hamburger Menu (Mobile) ​

Lokasi: Pojok kiri atas (icon ☰)

Mobile Menu

Cara Menggunakan:

  1. Tap icon hamburger (☰)
  2. Sidebar menu akan slide dari kiri
  3. Tap menu yang diinginkan
  4. Menu otomatis close setelah navigasi

Semua halaman menampilkan breadcrumb di atas konten:

Dashboard > Akademik > Kelas > Detail Kelas

Kegunaan:

  • Menunjukkan posisi Anda di sistem
  • Quick navigation ke parent pages
  • Klik nama section untuk kembali

Breadcrumb

Top Bar Navigation ​

Komponen Top Bar ​

Top Bar

Kiri ke Kanan:

  1. Logo - Klik untuk ke Dashboard
  2. Page Title - Judul halaman aktif
  3. Search (jika ada)
  4. Notification Bell
  5. Profile Menu 👤

Notification Center ​

Klik icon bell () untuk melihat notifikasi.

Notification Dropdown

Fitur:

  • Badge merah menunjukkan jumlah unread
  • Scroll untuk lihat semua notifikasi
  • Klik notifikasi untuk detail
  • "Mark all as read" untuk tandai semua sudah dibaca

Profile Menu ​

Klik nama/foto Anda di pojok kanan atas.

Profile Dropdown

Menu:

  • Biodata
  • Ubah Password
  • 🚪 Logout

Admin Navigation ​

Main Sections:

Pembayaran

  • Tambah Bayar (manual payment entry)
  • Konfirmasi Bayar (verify payments)
  • Transaksi Bayar (transaction list)
  • Rekap Bayar (payment reports)

AAIS Regular

  • Program (manage programs)
  • Kelas (manage classes)
  • Absensi (attendance)
  • Ujian (exams)

AAIS Anak

  • Program Anak
  • Kelas Anak
  • Parameter KBM
  • Absensi Anak
  • Ujian Anak

Akademik

  • Level
  • Beasiswa (scholarships)
  • Sertifikat (certificates)
  • Pengumuman (announcements)
  • Placement Test

User

  • Peserta (regular)
  • Peserta Anak
  • Pengajar (teachers)
  • Pendaftar Baru (new applicants)
  • Transfer Peserta

Pengaturan

  • Cabang (branch settings)
  • Notif WA (WhatsApp notifications)
  • Akun Admin (admin accounts - SA only)
  • Metode Pembayaran
  • Log (activity logs)

Pengajar Navigation ​

Main Sections:

Akademik

  • Kelas Regular (Pengajar) - Classes as teacher
  • Kelas Regular (Penguji) - Classes as examiner
  • Kelas Regular Anak
  • Placement Test

Akun 👤

  • Biodata
  • Ubah Password

Peserta Navigation ​

Main Sections:

Pendaftaran Program

  • Pilih Program (browse and register for classes)

Akademik

  • Kelas (enrolled classes)
  • Sertifikat (request certificates)
  • Riwayat Pembayaran (payment history)

Akun 👤

  • Biodata
  • Ubah Password

Orang Tua Navigation ​

Main Sections:

Pendaftaran Program

  • Pilih Program Anak

Akademik

  • Kelas Anak
  • Riwayat Pembayaran

Akun 👤

  • Data Anak
  • Ubah Password

Quick Actions ​

Search Functionality ​

Hampir semua list/table page memiliki search box.

Search Box

Cara Menggunakan:

  1. Ketik keyword di search box
  2. Hasil filter real-time
  3. Clear search untuk reset

Search Tips:

  • Ketik minimal 2 karakter
  • Search by name, NIS, phone, etc.
  • Case-insensitive

Filter & Sort ​

Tabel data memiliki filter dan sort options.

Filter Options

Filter:

  • Dropdown filter (by status, program, level, etc.)
  • Date range picker
  • Multiple filters dapat dikombinasi

Sort:

  • Klik column header untuk sort
  • Ascending ↑ / Descending ↓
  • Default sort biasanya by date (newest first)

Pagination ​

Tabel dengan banyak data menggunakan pagination.

Pagination

Kontrol:

  • Show entries: 10 / 25 / 50 / 100 per page
  • Previous / Next: Navigate pages
  • Page numbers: Jump to specific page
  • Info: "Showing 1 to 10 of 100 entries"

Export Data ​

Admin dan pengajar dapat export data.

Export Buttons

Format:

  • Excel (.xlsx) - For further analysis
  • PDF - For printing/reporting

Yang Bisa Di-export:

  • Daftar peserta
  • Absensi
  • Nilai ujian
  • Laporan pembayaran
  • Transaksi

Keyboard Shortcuts ​

Coming Soon

Keyboard shortcuts akan tersedia di update mendatang untuk mempercepat navigasi.

Planned Shortcuts:

  • Ctrl+/ - Focus search
  • Ctrl+D - Go to Dashboard
  • Ctrl+N - New entry (contextual)
  • Esc - Close modals

Back Navigation ​

Browser Back Button ​

Safe to use - SiakadAI support browser back button

Anda bisa gunakan:

  • Browser back button (←)
  • Alt+← (Windows)
  • Cmd+← (Mac)

Lebih disarankan menggunakan breadcrumb untuk navigasi karena lebih intuitif dan menunjukkan context.

Form Modals ​

Banyak form di SiakadAI menggunakan modal popup.

Modal Form

Cara Close Modal:

  1. Klik tombol "X" di pojok kanan atas
  2. Klik tombol "Batal" / "Cancel"
  3. Klik area di luar modal (backdrop)
  4. Tekan Esc key

Unsaved Changes

Jika Anda close modal sebelum save, perubahan akan hilang. Pastikan klik "Simpan" terlebih dahulu.

Confirmation Dialogs ​

Action penting (delete, confirm payment, etc.) akan menampilkan confirmation dialog.

Confirmation Dialog

Contoh:

Apakah Anda yakin ingin menghapus data ini?
[Batal] [Ya, Hapus]

Tips:

  • Baca pesan dengan teliti
  • Action tidak dapat di-undo (untuk delete)
  • Klik "Batal" jika ragu

Loading States ​

Page Loading ​

Saat navigasi antar halaman, loading indicator akan muncul.

Page Loading

Durasi:

  • Normal: 0.5-2 detik
  • Jika lebih dari 5 detik: Cek koneksi internet

Button Loading ​

Saat submit form, button akan menunjukkan loading state.

Button Loading

Tampilan:

  • Button disabled
  • Spinner icon
  • Text "Memproses..." atau "Loading..."

Jangan Double Click

Jangan klik button submit berkali-kali. Tunggu sampai proses selesai untuk menghindari duplikasi data.

Error Navigation ​

404 - Page Not Found ​

404 Page

Penyebab:

  • URL salah ketik
  • Page sudah dihapus
  • Tidak punya akses

Solusi:

  • Klik "Kembali ke Dashboard"
  • Cek URL yang benar
  • Hubungi admin jika masalah persist

403 - Forbidden ​

403 Page

Penyebab:

  • Tidak punya permission untuk akses page
  • Role tidak sesuai

Solusi:

  • Kembali ke halaman sebelumnya
  • Hubungi admin jika Anda seharusnya punya akses

500 - Server Error ​

500 Page

Penyebab:

  • Server error
  • Database issue
  • Bug di sistem

Solusi:

  1. Refresh page (F5)
  2. Logout dan login kembali
  3. Coba lagi beberapa saat
  4. Hubungi support jika masalah persist

Accessibility ​

Keyboard Navigation ​

SiakadAI mendukung keyboard navigation:

  • Tab - Navigate antar fields/buttons
  • Shift+Tab - Navigate backward
  • Enter - Submit form / activate button
  • Space - Toggle checkbox
  • Esc - Close modal/dropdown
  • Arrow keys - Navigate dropdown options

Screen Reader Support ​

SiakadAI dioptimalkan untuk screen readers dengan:

  • Semantic HTML
  • ARIA labels
  • Alt text untuk images
  • Skip to content link

Mobile Gestures ​

Touch Navigation ​

Gestures:

  • Tap - Click/select
  • Swipe left - Close sidebar (jika terbuka)
  • Pull down - Refresh page (pada beberapa list)
  • Long press - Context menu (pada beberapa items)

Tips Navigasi Efisien ​

Speed Tips ​

  1. Bookmark Pages Favorit

    • Bookmark halaman yang sering diakses di browser
    • Contoh: Admin bookmark "Konfirmasi Bayar"

  2. Gunakan Breadcrumb

    • Lebih cepat daripada klik menu berulang
    • Langsung jump ke parent page

  3. Keyboard Shortcuts

    • Tab untuk navigasi form
    • Enter untuk submit
    • Esc untuk close modal

  4. Search Instead of Scroll

    • Jangan scroll panjang di table
    • Gunakan search box untuk find data cepat

  5. Open in New Tab

    • Right-click menu item → "Open in new tab"
    • Berguna untuk compare data atau multi-tasking

Browser Compatibility ​

Google Chrome (v90+) Mozilla Firefox (v88+) Microsoft Edge (v90+) Safari (v14+)

Features by Browser ​

FeatureChromeFirefoxEdgeSafari
Navigation
Modals
Notifications
File Upload
Export Excel

= Limited support / May have issues

Langkah Selanjutnya ​

Setelah memahami navigasi, pilih panduan sesuai role:

Butuh Bantuan Navigasi?

Jika kesulitan menemukan fitur tertentu, hubungi support kami!