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

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.