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

docs/manual/index.md

@@ -0,0 +1,29 @@
+---
+title: User Manual
+---
+
+# User Manual
+
+Welcome to the **MIVO User Manual**. This section covers the functional aspects of using the application to manage your network.
+
+## <Icon name="BookOpen" color="primary" /> Topics
+
+### <Icon name="Settings" color="info" /> [Global Settings](/manual/settings/)
+Configure your system-wide settings:
+- **Managing Routers**: Connect and manage your Mikrotik devices.
+- **Voucher Templates**: Design and customize your voucher layouts.
+- **Brand Logos**: Upload custom logos for your hotspot.
+- **API & CORS**: Securely expose your router data to 3rd party apps.
+
+### <Icon name="Activity" color="success" /> [Router Operations](/manual/router/)
+Manage your everyday router tasks after connecting:
+- **Dashboard**: Monitor real-time traffic and system health.
+- **Hotspot Management**: Create users, profiles, and generate vouchers.
+- **Reports**: Track your sales and view system logs.
+- **System Tools**: Reboot, scheduler, and DHCP management.
+
+---
+
+> [!TIP]
+> This manual focuses on **using** the application. For installation and server configuration, please refer to the [Guide](/guide/installation).
+

docs/manual/router/dashboard.md

@@ -0,0 +1,28 @@
+# Dashboard & Monitoring
+
+The Dashboard provides a real-time command center for your Mikrotik router. It aggregates critical data from the Mikrotik API to give you an immediate overview of your network's health.
+
+## <Icon name="LineChart" color="primary" /> Real-time Traffic Monitor
+
+MIVO features a live traffic monitor that communicates directly with your Mikrotik interfaces.
+- **Interface Selection**: Choose any physical or virtual interface (e.g., `ether1`, `wlan1`, `bridge-hotspot`).
+- **Live Graphing**: View incoming and outgoing traffic in bits/sec or bytes/sec.
+- **Peak Tracking**: Quickly identify bandwidth spikes.
+
+## <Icon name="Cpu" color="warning" /> Router Resources
+
+Monitor the physical health of your Mikrotik hardware:
+- **CPU Load**: Displayed as a percentage. High CPU load may indicate the need for hardware upgrades or configuration optimization.
+- **Memory**: Tracks free vs. total RAM.
+- **Uptime**: Shows how long the router has been running since the last reboot.
+- **Disk/Storage**: Monitor available space on your router's flash memory.
+
+## <Icon name="Smartphone" color="success" /> Active Sessions
+
+A quick summary of currently authenticated users:
+- **Total Online**: Real-time count of users currently using the hotspot.
+- **Active IP/MAC**: Monitor connected devices on a high level.
+
+> [!TIP]
+> Keep the Dashboard open during peak hours to monitor for congestion or unauthorized access attempts.
+

docs/manual/router/hotspot.md

@@ -0,0 +1,40 @@
+# Hotspot Management
+
+Comprehensive tools to manage your Mikrotik Hotspot server, from user creation to advanced access control.
+
+## <Icon name="Users" color="primary" /> Hotspot Users {#users}
+
+The Users page (`/hotspot/users`) is the central database for all your wifi accounts.
+- **Manual Creation**: Add individual users with specific usernames and passwords.
+- **Individual Printing**: Hover over a user to see the print icon. It uses the default template assigned to their profile.
+- **Batch Printing**: Select multiple users and use the **Batch Actions** menu to print them all at once on a single page.
+- **Status Monitor**: See if a user is currently logged in (Active) directly in the list.
+
+## <Icon name="Layers" color="info" /> User Profiles {#profiles}
+
+User Profiles (`/hotspot/profiles`) define the rules for each type of voucher (e.g., 1 Hour, 1 Day).
+- **Rate Limit**: Control upload and download speeds (e.g., `512k/1M`).
+- **Shared Users**: Limit how many devices can use the same account simultaneously.
+- **Validity**: Set how long the account remains active after the first login.
+- **Price**: Store the selling price for reporting purposes.
+
+## <Icon name="Ticket" color="success" /> Voucher Generator {#generate}
+
+Generate hundreds of vouchers in seconds (`/hotspot/generate`).
+1. **Quantity**: Choose how many vouchers to create.
+2. **Server**: Select which hotspot server to target (usually `all`).
+3. **User Mode**: Choose between `Username & Password` or `Username = Password`.
+4. **Prefix**: Add a constant prefix to every generated username.
+
+## <Icon name="Zap" color="warning" /> Active Sessions & Cookies {#active}
+
+Monitor and control current connections (`/hotspot/active` and `/hotspot/cookies`).
+- **Kick User**: Forcefully disconnect an active user session.
+- **Cookies**: Manage 'remember me' tokens. Deleting a cookie forces the user to log in again on their next connection.
+
+## <Icon name="ShieldCheck" color="danger" /> Security & Access {#security}
+
+Advanced settings for network access without typical voucher requirements.
+- **IP Bindings**: Bypass the hotspot login for specific MAC or IP addresses (e.g., for office printers or servers).
+- **Walled Garden**: Allow access to specific websites or domains (e.g., your bank's portal) even before users log in.
+

docs/manual/router/index.md

@@ -0,0 +1,16 @@
+# Router Operations
+
+Router operations are session-specific tasks performed once connected to a Mikrotik device. These settings vary depending on which router session you are currently in.
+
+## <Icon name="Activity" color="primary" /> Overview
+
+Once you select a session from the sidebar, you gain access to these tools:
+
+- **[Dashboard](/manual/router/dashboard)**: Real-time traffic monitoring.
+- **[Hotspot Management](/manual/router/hotspot)**: Users, Profiles, and Vouchers.
+- **[Reports](/manual/router/reports)**: Sales reports and system logs.
+- **[System Tools](/manual/router/tools)**: Reboot, Scheduler, and DHCP.
+
+## <Icon name="Zap" color="warning" /> Real-time Sync
+
+MIVO communicates directly with your Mikrotik API. Most changes take effect immediately on your device.

docs/manual/router/quick-print.md

@@ -0,0 +1,27 @@
+# Quick Print
+
+Quick Print is a specialized module for high-speed voucher vending. It allows you to display only the specific packages you want to sell and print them with a single click.
+
+## <Icon name="BarChart2" color="primary" /> Vending Dashboard
+
+The main page (`/quick-print`) displays your "Packets" as large, clickable cards.
+- **Instant Generation**: Clicking a packet immediately requests the router to create a new user.
+- **Auto-Print**: Once the user is created, the print dialog for that voucher opens automatically.
+
+## <Icon name="Library" color="info" /> Packet Management
+
+Access the **Manage** section (`/quick-print/manage`) to customize your vending dashboard.
+
+### <Icon name="PlusCircle" color="success" /> Adding Packets
+- **Profile**: Choose a Mikrotik user profile.
+- **Price**: Set the display price (can differ from Mikrotik comment).
+- **Template**: Assign a specific voucher template for this packet.
+
+### <Icon name="Trash2" color="danger" /> Removing Packets
+Deleting a packet here only removes it from the Quick Print dashboard; it does **not** delete the profile from your Mikrotik router.
+
+## <Icon name="Printer" color="warning" /> Workflow
+1. **Admin** chooses a packet from the dashboard.
+2. **MIVO** creates a random username/password account on the Mikrotik.
+3. **MIVO** fetches the assigned template and sends it to the browser's print engine.
+

docs/manual/router/reports.md

@@ -0,0 +1,28 @@
+# Reports & Logs
+
+Analyze your business performance and monitor system activity through detailed reporting tools.
+
+## <Icon name="BarChart" color="success" /> Selling Reports {#selling}
+
+The Selling Reports page (`/reports/selling`) provides a detailed breakdown of your revenue.
+- **Timeline**: View sales by day, month, or a custom date range.
+- **Details**: See which profile was sold, the timestamp, and the price.
+- **Export**: (If available) Export your data for offline accounting.
+
+## <Icon name="BarChart2" color="primary" /> Sales Resume {#resume}
+
+The Resume page (`/reports/resume`) offers a simplified high-level view of your business growth.
+- **Total Income**: Combined revenue from all voucher sales.
+- **Voucher Count**: Total number of vouchers sold vs. generated.
+- **Session Comparison**: Compare performance across different router sessions.
+
+## <Icon name="ClipboardList" color="info" /> System Logs {#logs}
+
+Monitor real-time events from your Mikrotik router (`/reports/user-log`).
+- **Events**: Track user logins, logouts, script executions, and system errors.
+- **Troubleshooting**: Use these logs to identify why a user cannot connect or when a session was disconnected.
+- **Live Stream**: The logs update automatically as events occur on the router.
+
+> [!NOTE]
+> MIVO fetches these logs directly from the Mikrotik circular buffer. Clear your logs on the Mikrotik terminal if the buffer becomes too large.
+

docs/manual/router/tools.md

@@ -0,0 +1,26 @@
+# System Tools
+
+Essential utilities for maintaining, scheduling, and monitoring your Mikrotik router's core functions.
+
+## <Icon name="Network" color="info" /> DHCP Leases
+
+The DHCP Leases page (`/network/dhcp`) allows you to monitor all devices connected to your LAN or Hotspot network, even before they log in.
+- **Lease Tracking**: View IP assignments, MAC addresses, and hostnames of connected devices.
+- **Pre-Login Monitor**: Useful for identifying devices that are connected but having trouble reaching the hotspot login page.
+
+## <Icon name="Clock" color="primary" /> Router Scheduler
+
+MIVO provides a full interface (`/system/scheduler`) to manage Mikrotik's internal scripts and schedules.
+- **Tasks List**: View all active and disabled scheduled tasks on your router.
+- **Manage Tasks**: Add, edit, or delete tasks directly from MIVO.
+- **Automation**: Use this for periodic script execution, such as clearing expired users or generating automated reports.
+
+## <Icon name="Zap" color="warning" /> Critical Actions
+
+Directly trigger system-level commands from the MIVO interface:
+- **<Icon name="RefreshCw" color="info" /> Reboot**: Safely restart your Mikrotik hardware.
+- **<Icon name="Power" color="danger" /> Shutdown**: Power off the device. Note that you will need physical access to the router to turn it back on.
+
+> [!WARNING]
+> These actions are executed immediately on your Mikrotik router. Ensure no critical operations are running before rebooting.
+

docs/manual/settings/api-cors.md

@@ -0,0 +1,15 @@
+# API & CORS
+
+MIVO allows external applications to securely access your router data via a REST API.
+
+## <Icon name="Unlock" color="warning" /> CORS Policy
+
+To allow your website (e.g., a status checker) to call the MIVO API, you must whitelist its domain.
+
+1.  Go to **Settings** > **API & CORS**.
+2.  Add your website URL (including `https://`).
+3.  Save changes.
+
+## <Icon name="Terminal" color="info" /> Documentation
+
+Detailed API documentation is available in the developers section.

docs/manual/settings/index.md

@@ -0,0 +1,16 @@
+# Global Settings
+
+Global settings control your MIVO instance across all sessions. These are system-wide configurations that don't depend on a specific Mikrotik connection.
+
+## <Icon name="Settings" color="primary" /> Overview
+
+Access these settings from the top-right menu or the main sidebar.
+
+- **[Routers](/manual/settings/routers)**: Manage your Mikrotik connections.
+- **[Templates](/manual/settings/templates)**: Customize voucher designs.
+- **[Logos](/manual/settings/logos)**: Upload brand logos.
+- **[API & CORS](/manual/settings/api-cors)**: Configure API access.
+
+## <Icon name="Shield" color="info" /> Administration
+
+You can also manage your MIVO administrators and general system behavior (Timezones, Language) here.

docs/manual/settings/logos.md

@@ -0,0 +1,29 @@
+# Brand Logos
+
+Logo Management allows you to maintain a gallery of brand assets used for customizing your Mikrotik Hotspot vouchers and the application interface.
+
+## <Icon name="Image" color="primary" /> Purpose
+
+By uploading your business logos here, you can create a professional brand experience for your customers. These logos are centrally stored and can be referenced dynamically in various parts of MIVO.
+
+## <Icon name="UploadCloud" color="success" /> Uploading Process
+
+1.  Navigate to **Settings** > **Logos**.
+2.  **Drag & Drop** or click the upload area to select your file.
+3.  **Supported Formats**: PNG, JPG, SVG, and GIF are supported. Transparent PNG or SVG is recommended for the best look on vouchers.
+
+## <Icon name="Hash" color="info" /> Logo ID & Copy Feature
+
+Every logo you upload is assigned a unique **Short ID** (e.g., `lg01`, `wifi_logo`).
+
+### <Icon name="Copy" color="primary" /> How to use Copy ID
+In the logo gallery, hover over any logo to reveal the **Copy ID** button.
+- **Function**: Clicking this button copies the unique ID to your clipboard.
+- **Integration**: Use this ID inside the **Voucher Template Editor** (e.g., `&#123;&#123;logo:lg01&#125;&#125;`) to display the specific logo on your printed vouchers.
+
+## <Icon name="Trash2" color="danger" /> Management
+
+You can delete unused logos at any time. 
+> [!WARNING]
+> Deleting a logo will cause any voucher templates referencing its ID to show a broken image placeholder.
+

docs/manual/settings/routers.md

@@ -0,0 +1,28 @@
+# Managing Routers
+
+To start managing your Mikrotik, you first need to connect it to MIVO.
+
+## <Icon name="PlusCircle" color="success" /> Connecting a Router
+
+1.  Go to **Settings** > **Routers**.
+2.  Click **Add Router**.
+3.  Fill in the details:
+    - **Session Name**: A unique identifier for this connection.
+    - **IP Address**: Your Mikrotik IP or DNS name.
+    - **Username/Password**: Your Mikrotik API credentials.
+    - **Port**: Usually 8728 (API).
+
+## <Icon name="Activity" color="info" /> Connection Status
+
+MIVO will attempt to connect to the router in real-time. If the status is green, you're ready to start managing!
+
+## <Icon name="Database" color="warning" /> Backup & Restore
+
+Protect your configuration by creating backups of your MIVO database.
+
+- **Backup**: Creates a JSON file containing all router sessions and global settings.
+- **Restore**: Upload a previously saved MIVO backup file to recover your data.
+
+> [!CAUTION]
+> Restoring a backup will overwrite your current settings and sessions.
+

docs/manual/settings/system.md

@@ -0,0 +1,20 @@
+# System Settings
+
+Manage your MIVO administrator account and global application behavior.
+
+## <Icon name="UserCheck" color="primary" /> Admin Account
+
+Change your MIVO administrator credentials to ensure system security.
+- **Username**: The name used for login.
+- **Password**: Secure password for access.
+
+## <Icon name="Globe" color="info" /> Global Config
+
+Adjust the environment settings for the entire application:
+- **Language**: Choose your preferred interface language (English/Indonesian).
+- **Timezone**: Set the local time for accurate reports and logs.
+- **Currency**: Define the currency symbol used in vouchers and reports.
+
+## <Icon name="ShieldAlert" color="warning" /> Security
+
+MIVO uses session-based authentication. Ensure you log out when using public terminals.

docs/manual/settings/templates.md

@@ -0,0 +1,14 @@
+# Voucher Templates
+
+MIVO features a powerful template engine to create beautiful, printable vouchers.
+
+## <Icon name="FileCode" color="primary" /> Customizing Templates
+
+Templates use HTML and specialized placeholders to display voucher data.
+
+- **Variables**: `{{username}}`, `{{password}}`, `{{price}}`, etc.
+- **Preview**: Test your template instantly from the editor.
+
+## <Icon name="Printer" color="info" /> Quick Print
+
+Once a template is saved, it becomes available in the **Quick Print** menu within your router sessions.