Fix dependencies: Add flag-icons, tailwind directives, and postcss config

docs/id/manual/index.md

@@ -0,0 +1,29 @@
+---
+title: Buku Panduan
+---
+
+# Buku Panduan
+
+Selamat datang di **Buku Panduan MIVO**. Bagian ini mencakup aspek fungsional penggunaan aplikasi untuk mengelola jaringan Anda.
+
+## <Icon name="BookOpen" color="primary" /> Topik
+
+### <Icon name="Settings" color="info" /> [Pengaturan Global](/id/manual/settings/)
+Konfigurasikan pengaturan tingkat sistem:
+- **Manajemen Router**: Hubungkan dan kelola perangkat Mikrotik Anda.
+- **Template Voucher**: Desain dan sesuaikan tata letak voucher Anda.
+- **Logo Brand**: Unggah logo khusus untuk hotspot Anda.
+- **API & CORS**: Ekspos data router Anda dengan aman ke aplikasi pihak ketiga.
+
+### <Icon name="Activity" color="success" /> [Operasional Router](/id/manual/router/)
+Kelola tugas harian router Anda setelah terhubung:
+- **Dashboard**: Pantau traffic real-time dan kesehatan sistem.
+- **Manajemen Hotspot**: Buat user, profil, dan generate voucher.
+- **Laporan**: Lacak penjualan Anda dan lihat log sistem.
+- **Tools Sistem**: Reboot, scheduler, dan manajemen DHCP.
+
+---
+
+> [!TIP]
+> Panduan ini fokus pada **penggunaan** aplikasi. Untuk instalasi dan konfigurasi server, silakan merujuk ke [Panduan](/id/guide/installation).
+

docs/id/manual/router/dashboard.md

@@ -0,0 +1,28 @@
+# Dashboard & Pemantauan
+
+Dashboard berfungsi sebagai pusat kendali real-time untuk router Mikrotik Anda. Fitur ini mengumpulkan data penting dari API Mikrotik untuk memberikan gambaran instan tentang kesehatan jaringan Anda.
+
+## <Icon name="LineChart" color="primary" /> Monitor Traffic Real-time
+
+MIVO dilengkapi dengan monitor trafik langsung yang berkomunikasi langsung dengan interface Mikrotik Anda.
+- **Pemilihan Interface**: Pilih interface fisik atau virtual apa pun (contoh: `ether1`, `wlan1`, `bridge-hotspot`).
+- **Grafik Langsung**: Lihat trafik masuk dan keluar dalam satuan bits/sec atau bytes/sec.
+- **Pelacakan Puncak**: Identifikasi lonjakan bandwidth dengan cepat.
+
+## <Icon name="Cpu" color="warning" /> Sumber Daya Router
+
+Pantau kesehatan fisik perangkat keras Mikrotik Anda:
+- **Beban CPU**: Ditampilkan dalam persentase. Beban CPU yang tinggi mungkin menunjukkan perlunya pemutakhiran perangkat keras atau optimasi konfigurasi.
+- **Memori**: Melacak RAM yang bebas vs total RAM.
+- **Uptime**: Menunjukkan berapa lama router telah berjalan sejak reboot terakhir.
+- **Penyimpanan**: Pantau ruang yang tersedia pada memori flash router Anda.
+
+## <Icon name="Smartphone" color="success" /> Sesi Aktif
+
+Ringkasan cepat pengguna yang saat ini terautentikasi:
+- **Total Online**: Hitungan real-time pengguna yang sedang menggunakan hotspot.
+- **IP/MAC Aktif**: Pantau perangkat yang terhubung secara garis besar.
+
+> [!TIP]
+> Biarkan Dashboard tetap terbuka selama jam sibuk untuk memantau kepadatan atau upaya akses yang tidak sah.
+

docs/id/manual/router/hotspot.md

@@ -0,0 +1,40 @@
+# Manajemen Hotspot
+
+Alat komprehensif untuk mengelola server Hotspot Mikrotik Anda, mulai dari pembuatan user hingga kontrol akses tingkat lanjut.
+
+## <Icon name="Users" color="primary" /> User Hotspot {#users}
+
+Halaman User (`/hotspot/users`) adalah database pusat untuk semua akun wifi Anda.
+- **Pembuatan Manual**: Tambah user tunggal dengan username dan password spesifik.
+- **Cetak Satuan**: Arahkan kursor ke user untuk melihat ikon cetak. Ini menggunakan template default yang ditetapkan pada profil mereka.
+- **Cetak Massal**: Pilih beberapa user dan gunakan menu **Batch Actions** untuk mencetak semuanya sekaligus dalam satu halaman.
+- **Monitor Status**: Lihat apakah user sedang login (Aktif) secara langsung di dalam daftar.
+
+## <Icon name="Layers" color="info" /> Profil User {#profiles}
+
+Profil User (`/hotspot/profiles`) menentukan aturan untuk setiap jenis voucher (contoh: 1 Jam, 1 Hari).
+- **Rate Limit**: Kontrol kecepatan unggah dan unduh (contoh: `512k/1M`).
+- **Shared Users**: Batasi berapa banyak perangkat yang dapat menggunakan akun yang sama secara bersamaan.
+- **Validity**: Atur berapa lama akun tetap aktif setelah login pertama.
+- **Harga**: Simpan harga jual untuk keperluan laporan.
+
+## <Icon name="Ticket" color="success" /> Generator Voucher {#generate}
+
+Generate ratusan voucher dalam hitungan detik (`/hotspot/generate`).
+1. **Jumlah**: Pilih berapa banyak voucher yang akan dibuat.
+2. **Server**: Pilih server hotspot mana yang dituju (biasanya `all`).
+3. **User Mode**: Pilih antara `Username & Password` atau `Username = Password`.
+4. **Prefix**: Tambahkan awalan (prefix) tetap pada setiap username yang dibuat.
+
+## <Icon name="Zap" color="warning" /> Sesi Aktif & Cookies {#active}
+
+Pantau dan kontrol koneksi saat ini (`/hotspot/active` dan `/hotspot/cookies`).
+- **Kick User**: Putuskan sesi user yang sedang aktif secara paksa.
+- **Cookies**: Kelola token 'remember me'. Menghapus cookie memaksa user untuk login kembali pada koneksi berikutnya.
+
+## <Icon name="ShieldCheck" color="danger" /> Keamanan & Akses {#security}
+
+Pengaturan lanjutan untuk akses jaringan tanpa persyaratan voucher biasa.
+- **IP Bindings**: Lewati login hotspot untuk alamat MAC atau IP tertentu (contoh: untuk printer kantor atau server).
+- **Walled Garden**: Izinkan akses ke situs web atau domain tertentu (contoh: portal bank Anda) bahkan sebelum user login.
+

docs/id/manual/router/index.md

@@ -0,0 +1,16 @@
+# Operasional Router
+
+Operasional router adalah tugas-tugas spesifik dalam sesi setelah terhubung ke perangkat Mikrotik. Pengaturan ini bervariasi tergantung pada sesi router mana yang sedang Anda gunakan.
+
+## <Icon name="Activity" color="primary" /> Ikhtisar
+
+Setelah Anda memilih sesi dari sidebar, Anda mendapatkan akses ke alat-alat berikut:
+
+- **[Dashboard](/id/manual/router/dashboard)**: Pemantauan traffic secara real-time.
+- **[Manajemen Hotspot](/id/manual/router/hotspot)**: User, Profil, dan Voucher.
+- **[Laporan](/id/manual/router/reports)**: Laporan penjualan dan log sistem.
+- **[Tools Sistem](/id/manual/router/tools)**: Reboot, Scheduler, dan DHCP.
+
+## <Icon name="Zap" color="warning" /> Sinkronisasi Real-time
+
+MIVO berkomunikasi langsung dengan API Mikrotik Anda. Sebagian besar perubahan akan langsung diterapkan pada perangkat Anda.

docs/id/manual/router/quick-print.md

@@ -0,0 +1,27 @@
+# Cetak Cepat (Quick Print)
+
+Quick Print adalah modul khusus untuk penjualan voucher kecepatan tinggi. Fitur ini memungkinkan Anda untuk menampilkan paket tertentu yang ingin dijual dan mencetaknya dengan satu klik.
+
+## <Icon name="BarChart2" color="primary" /> Dashboard Penjualan
+
+Halaman utama (`/quick-print`) menampilkan "Paket" Anda dalam bentuk kartu besar yang dapat diklik.
+- **Generate Instan**: Mengklik paket akan langsung memerintahkan router untuk membuat user baru.
+- **Cetak Otomatis**: Setelah user dibuat, dialog cetak untuk voucher tersebut akan terbuka secara otomatis.
+
+## <Icon name="Library" color="info" /> Manajemen Paket
+
+Akses bagian **Kelola** (`/quick-print/manage`) untuk mempersonalisasi dashboard penjualan Anda.
+
+### <Icon name="PlusCircle" color="success" /> Menambah Paket
+- **Profil**: Pilih profil user Mikrotik.
+- **Harga**: Tentukan harga tampilan (bisa berbeda dengan komentar di Mikrotik).
+- **Template**: Tetapkan template voucher khusus untuk paket ini.
+
+### <Icon name="Trash2" color="danger" /> Menghapus Paket
+Menghapus paket di sini hanya menghapusnya dari dashboard Quick Print; **tidak** menghapus profil dari router Mikrotik Anda.
+
+## <Icon name="Printer" color="warning" /> Alur Kerja
+1. **Admin** memilih paket dari dashboard.
+2. **MIVO** membuat akun username/password acak di Mikrotik.
+3. **MIVO** mengambil template yang ditentukan dan mengirimkannya ke engine cetak browser.
+

docs/id/manual/router/reports.md

@@ -0,0 +1,28 @@
+# Laporan & Log
+
+Analisis performa bisnis Anda dan pantau aktivitas sistem melalui alat pelaporan yang mendetail.
+
+## <Icon name="BarChart" color="success" /> Laporan Penjualan {#selling}
+
+Halaman Laporan Penjualan (`/reports/selling`) memberikan rincian pendapatan Anda secara mendetail.
+- **Garis Waktu**: Lihat penjualan berdasarkan hari, bulan, atau rentang tanggal khusus.
+- **Detail**: Lihat profil mana yang terjual, stempel waktu (timestamp), dan harganya.
+- **Ekspor**: (Jika tersedia) Ekspor data Anda untuk keperluan akuntansi offline.
+
+## <Icon name="BarChart2" color="primary" /> Resume Penjualan {#resume}
+
+Halaman Resume (`/reports/resume`) menawarkan pandangan tingkat tinggi yang disederhanakan tentang pertumbuhan bisnis Anda.
+- **Total Pendapatan**: Gabungan pendapatan dari seluruh penjualan voucher.
+- **Jumlah Voucher**: Total voucher yang terjual vs yang dibuat (generated).
+- **Perbandingan Sesi**: Bandingkan performa di berbagai sesi router yang berbeda.
+
+## <Icon name="ClipboardList" color="info" /> Log Sistem {#logs}
+
+Pantau peristiwa real-time dari router Mikrotik Anda (`/reports/user-log`).
+- **Peristiwa**: Lacak login user, logout, eksekusi script, dan error sistem.
+- **Pemecahan Masalah**: Gunakan log ini untuk mengidentifikasi mengapa user tidak dapat terhubung atau kapan sesi terputus.
+- **Live Stream**: Log diperbarui secara otomatis saat peristiwa terjadi di router.
+
+> [!NOTE]
+> MIVO mengambil log ini langsung dari circular buffer Mikrotik. Bersihkan log Anda pada terminal Mikrotik jika buffer menjadi terlalu besar.
+

docs/id/manual/router/tools.md

@@ -0,0 +1,26 @@
+# Tools Sistem
+
+Utilitas penting untuk memelihara, menjadwalkan, dan memantau fungsi inti router Mikrotik Anda.
+
+## <Icon name="Network" color="info" /> DHCP Leases
+
+Halaman DHCP Leases (`/network/dhcp`) memungkinkan Anda memantau semua perangkat yang terhubung ke jaringan LAN atau Hotspot Anda, bahkan sebelum mereka login.
+- **Pelacakan Lease**: Lihat penetapan IP, alamat MAC, dan hostname dari perangkat yang terhubung.
+- **Monitor Pra-Login**: Berguna untuk mengidentifikasi perangkat yang terhubung tetapi kesulitan mencapai halaman login hotspot.
+
+## <Icon name="Clock" color="primary" /> Scheduler Router
+
+MIVO menyediakan antarmuka lengkap (`/system/scheduler`) untuk mengelola script dan jadwal internal Mikrotik.
+- **Daftar Tugas**: Lihat semua tugas terjadwal yang aktif dan dinonaktifkan di router Anda.
+- **Kelola Tugas**: Tambah, ubah, atau hapus tugas langsung dari MIVO.
+- **Otomatisasi**: Gunakan ini untuk eksekusi script berkala, seperti menghapus user yang kedaluwarsa atau menghasilkan laporan otomatis.
+
+## <Icon name="Zap" color="warning" /> Tindakan Kritis
+
+Picukan perintah tingkat sistem secara langsung dari antarmuka MIVO:
+- **<Icon name="RefreshCw" color="info" /> Reboot**: Muat ulang perangkat keras Mikrotik Anda dengan aman.
+- **<Icon name="Power" color="danger" /> Shutdown**: Matikan perangkat. Perhatikan bahwa Anda memerlukan akses fisik ke router untuk menghidupkannya kembali.
+
+> [!WARNING]
+> Tindakan ini segera dieksekusi pada router Mikrotik Anda. Pastikan tidak ada operasi kritis yang sedang berjalan sebelum melakukan reboot.
+

docs/id/manual/settings/api-cors.md

@@ -0,0 +1,15 @@
+# API & CORS
+
+MIVO memungkinkan aplikasi eksternal untuk mengakses data router Anda secara aman melalui REST API.
+
+## <Icon name="Unlock" color="warning" /> Kebijakan CORS
+
+Untuk memungkinkan situs web Anda (misal: pengecek status) memanggil API MIVO, Anda harus memasukkan domain tersebut ke daftar putih (whitelist).
+
+1.  Buka **Pengaturan** > **API & CORS**.
+2.  Tambahkan URL situs web Anda (termasuk `https://`).
+3.  Simpan perubahan.
+
+## <Icon name="Terminal" color="info" /> Dokumentasi
+
+Dokumentasi API mendetail tersedia di bagian pengembang.

docs/id/manual/settings/index.md

@@ -0,0 +1,16 @@
+# Pengaturan Global
+
+Pengaturan global mengontrol instance MIVO Anda secara sistem lunak. Ini adalah konfigurasi tingkat sistem yang tidak bergantung pada koneksi Mikrotik tertentu.
+
+## <Icon name="Settings" color="primary" /> Ikhtisar
+
+Akses pengaturan ini dari menu kanan atas atau sidebar utama.
+
+- **[Router](/id/manual/settings/routers)**: Kelola koneksi Mikrotik Anda.
+- **[Template](/id/manual/settings/templates)**: Kustomisasi desain voucher.
+- **[Logo](/id/manual/settings/logos)**: Unggah logo brand.
+- **[API & CORS](/id/manual/settings/api-cors)**: Konfigurasi akses API.
+
+## <Icon name="Shield" color="info" /> Administrasi
+
+Anda juga dapat mengelola administrator MIVO dan perilaku sistem umum (Zona Waktu, Bahasa) di sini.

docs/id/manual/settings/logos.md

@@ -0,0 +1,29 @@
+# Logo Brand
+
+Manajemen Logo memungkinkan Anda untuk mengelola galeri aset brand yang digunakan untuk kustomisasi voucher Hotspot Mikrotik dan antarmuka aplikasi.
+
+## <Icon name="Image" color="primary" /> Tujuan
+
+Dengan mengunggah logo bisnis Anda di sini, Anda dapat menciptakan pengalaman brand yang profesional bagi pelanggan Anda. Logo-logo ini disimpan terpusat dan dapat dipanggil secara dinamis di berbagai bagian MIVO.
+
+## <Icon name="UploadCloud" color="success" /> Proses Mengunggah
+
+1.  Buka **Pengaturan** > **Logo**.
+2.  **Drag & Drop** atau klik area unggah untuk memilih file Anda.
+3.  **Format yang Didukung**: PNG, JPG, SVG, dan GIF didukung. Disarankan menggunakan PNG transparan atau SVG untuk tampilan terbaik di voucher.
+
+## <Icon name="Hash" color="info" /> Logo ID & Fitur Copy
+
+Setiap logo yang Anda unggah akan diberikan **Short ID** yang unik (contoh: `lg01`, `logo_wifi`).
+
+### <Icon name="Copy" color="primary" /> Cara Menggunakan Copy ID
+Di galeri logo, arahkan kursor ke logo apapun untuk memunculkan tombol **Copy ID**.
+- **Fungsi**: Mengklik tombol ini akan menyalin ID unik tersebut ke clipboard Anda.
+- **Integrasi**: Gunakan ID ini di dalam **Voucher Template Editor** (contoh: `&#123;&#123;logo:lg01&#125;&#125;`) untuk menampilkan logo spesifik tersebut pada voucher yang dicetak.
+
+## <Icon name="Trash2" color="danger" /> Manajemen
+
+Anda dapat menghapus logo yang tidak digunakan kapan saja.
+> [!WARNING]
+> Menghapus logo akan menyebabkan template voucher yang mereferensikan ID-nya menampilkan gambar yang rusak (placeholder).
+

docs/id/manual/settings/routers.md

@@ -0,0 +1,28 @@
+# Manajemen Router
+
+Untuk mulai mengelola Mikrotik Anda, pertama-tama Anda perlu menghubungkannya ke MIVO.
+
+## <Icon name="PlusCircle" color="success" /> Menghubungkan Router
+
+1.  Buka **Pengaturan** > **Router**.
+2.  Klik **Tambah Router**.
+3.  Isi detailnya:
+    - **Nama Sesi**: Identitas unik untuk koneksi ini.
+    - **Alamat IP**: IP Mikrotik atau nama DNS Anda.
+    - **Username/Password**: Akun API Mikrotik Anda.
+    - **Port**: Biasanya 8728 (API).
+
+## <Icon name="Activity" color="info" /> Status Koneksi
+
+MIVO akan mencoba terhubung ke router secara real-time. Jika status berwarna hijau, Anda siap memulai pengelolaan!
+
+## <Icon name="Database" color="warning" /> Backup & Restore
+
+Lindungi konfigurasi Anda dengan membuat cadangan (backup) database MIVO Anda.
+
+- **Backup**: Membuat file JSON yang berisi semua sesi router dan pengaturan global.
+- **Restore**: Unggah file cadangan MIVO yang telah disimpan sebelumnya untuk memulihkan data Anda.
+
+> [!CAUTION]
+> Melakukan restore akan menimpa pengaturan dan sesi Anda yang ada saat ini.
+

docs/id/manual/settings/system.md

@@ -0,0 +1,20 @@
+# Pengaturan Sistem
+
+Kelola akun administrator MIVO Anda dan perilaku aplikasi secara global.
+
+## <Icon name="UserCheck" color="primary" /> Akun Admin
+
+Ubah kredensial administrator MIVO Anda untuk menjaga keamanan sistem.
+- **Username**: Nama yang digunakan untuk login.
+- **Password**: Kata sandi aman untuk akses.
+
+## <Icon name="Globe" color="info" /> Konfigurasi Global
+
+Sesuaikan pengaturan lingkungan untuk seluruh aplikasi:
+- **Bahasa**: Pilih bahasa antarmuka pilihan Anda (Inggris/Indonesia).
+- **Zona Waktu**: Atur waktu lokal untuk laporan dan log yang akurat.
+- **Mata Uang**: Tentukan simbol mata uang yang digunakan dalam voucher dan laporan.
+
+## <Icon name="ShieldAlert" color="warning" /> Keamanan
+
+MIVO menggunakan autentikasi berbasis sesi. Pastikan Anda melakukan logout saat menggunakan terminal publik.

docs/id/manual/settings/templates.md

@@ -0,0 +1,14 @@
+# Template Voucher
+
+MIVO memiliki engine template yang mumpuni untuk membuat voucher yang cantik dan siap cetak.
+
+## <Icon name="FileCode" color="primary" /> Kustomisasi Template
+
+Template menggunakan HTML dan placeholder khusus untuk menampilkan data voucher.
+
+- **Variabel**: `{{username}}`, `{{password}}`, `{{price}}`, dll.
+- **Preview**: Uji template Anda secara instan dari editor.
+
+## <Icon name="Printer" color="info" /> Cetak Cepat
+
+Setelah template disimpan, template tersebut akan tersedia di menu **Cetak Cepat** (Quick Print) di dalam sesi router Anda.