Chore: Bump version to v1.1.0 and implement automated release system

app/Config/SiteConfig.php

@@ -3,7 +3,7 @@ namespace App\Config;
 
 class SiteConfig {
     const APP_NAME = 'MIVO';
-    const APP_VERSION = 'v1.0';
+    const APP_VERSION = 'v1.1.0';
     const APP_FULL_NAME = 'MIVO - Mikrotik Voucher';
     const CREDIT_NAME = 'DyzulkDev';
     const CREDIT_URL = 'https://dyzulk.com';

app/Controllers/ApiController.php

@@ -32,7 +32,8 @@ class ApiController extends Controller {
             $configModel = new Config();
             $session = $configModel->getSessionById($id);
             if ($session && !empty($session['password'])) {
-                $pass = EncryptionHelper::decrypt($session['password']);
+                // Config::getSessionById already decrypts the password
+                $pass = $session['password'];
             }
         }
 

app/Controllers/DashboardController.php

@@ -10,7 +10,7 @@ use App\Core\Middleware;
 class DashboardController extends Controller {
     
     public function __construct() {
-        Middleware::auth();
+        // Auth handled by Router Middleware
     }
     
     public function index($session) {
@@ -101,6 +101,7 @@ class DashboardController extends Controller {
                     'hotspot_users' => 'Hotspot Users',
                     'hotspot_users' => 'Hotspot Users',
                 ],
+                'reload_interval' => $creds['reload'] ?? 5, // Default 5s if not set
                 'interface' => $creds['interface'] ?? 'ether1'
             ];
             // Pass Users Link (Optional: could be part of layout or card link)
@@ -108,7 +109,9 @@ class DashboardController extends Controller {
             return $this->view('dashboard', $data);
 
         } else {
-             echo "Connection Failed to " . $creds['ip'];
+             \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+             header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/'));
+             exit;
         }
     }
 }

app/Controllers/DhcpController.php

@@ -26,7 +26,10 @@ class DhcpController extends Controller
         if ($API->connect($config['ip_address'], $config['username'], $config['password'])) {
             // Fetch DHCP Leases
             $leases = $API->comm("/ip/dhcp-server/lease/print");
-            $API->disconnect();
+        } else {
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $config['ip_address']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         // Add index for viewing

app/Controllers/GeneratorController.php

@@ -34,8 +34,9 @@ class GeneratorController extends Controller {
 
             $this->view('hotspot/generate', $data);
         } else {
-            // Handle connection error (flash message ideally, but for now redirect or show error)
-            echo "Connection failed to " . $creds['ip']; 
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
     }
 

app/Controllers/HotspotController.php

@@ -25,6 +25,7 @@ class HotspotController extends Controller {
 
         $userId = $session; // For view context
         $users = [];
+        $servers = [];
         $error = null;
 
         $API = new RouterOSAPI();
@@ -40,17 +41,20 @@ class HotspotController extends Controller {
             // Get all hotspot users
             $users = $API->comm("/ip/hotspot/user/print");
             
-            // Get active users to mark status (optional, can be done later for optimization)
-            // $active = $API->comm("/ip/hotspot/active/print");
+            // Get servers for dropdown
+            $servers = $API->comm("/ip/hotspot/server/print");
 
             $API->disconnect();
         } else {
-            $error = "Connection Failed to " . $creds['ip'];
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         $data = [
             'session' => $session,
             'users' => $users,
+            'servers' => $servers,
             'error' => $error
         ];
 
@@ -389,7 +393,9 @@ class HotspotController extends Controller {
             $items = $API->comm("/ip/hotspot/active/print");
             $API->disconnect();
         } else {
-            $error = "Connection Failed to " . $creds['ip'];
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         $data = [
@@ -451,7 +457,9 @@ class HotspotController extends Controller {
             $items = $API->comm("/ip/hotspot/host/print");
             $API->disconnect();
         } else {
-            $error = "Connection Failed to " . $creds['ip'];
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         $data = [
@@ -484,7 +492,9 @@ class HotspotController extends Controller {
             $items = $API->comm("/ip/hotspot/ip-binding/print");
             $API->disconnect();
         } else {
-            $error = "Connection Failed to " . $creds['ip'];
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         $data = [
@@ -606,7 +616,9 @@ class HotspotController extends Controller {
             $items = $API->comm("/ip/hotspot/walled-garden/ip/print");
             $API->disconnect();
         } else {
-            $error = "Connection Failed to " . $creds['ip'];
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         $data = [
@@ -837,8 +849,9 @@ class HotspotController extends Controller {
                 $templateContent = $tpl['content'];
                 $viewName = 'print/custom';
             } else {
-                // Fallback if ID invalid
-                $currentTemplate = 'default';
+                \App\Helpers\FlashHelper::set('error', 'Template Not Found', 'The selected print template could not be found.');
+                header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/hotspot/users'));
+                exit;
             }
         }
 

app/Controllers/LogController.php

@@ -44,7 +44,10 @@ class LogController extends Controller
                 $logs = array_reverse($logs);
             }
 
-            $API->disconnect();
+        } else {
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $config['ip_address']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
 
         return $this->view('reports/user_log', [

app/Controllers/ProfileController.php

@@ -21,6 +21,21 @@ class ProfileController extends Controller
         // Use default port 8728 if not specified
         if ($API->connect($creds['ip'], $creds['user'], $creds['password'])) {
             $profiles = $API->comm('/ip/hotspot/user/profile/print');
+            
+            // Fetch Pools & Queues for the Modal Form
+            $pools = $API->comm('/ip/pool/print');
+            $simple = $API->comm('/queue/simple/print');
+            $tree = $API->comm('/queue/tree/print');
+            
+            $queues = [];
+            foreach ($simple as $q) {
+                if(isset($q['name'])) $queues[] = $q['name'];
+            }
+            foreach ($tree as $q) {
+                 if(isset($q['name'])) $queues[] = $q['name'];
+            }
+            sort($queues);
+
             $API->disconnect();
 
             // Process profiles to add metadata from on-login script
@@ -33,15 +48,14 @@ class ProfileController extends Controller
             $this->view('hotspot/profiles/index', [
                 'session' => $session,
                 'profiles' => $profiles,
+                'pools' => $pools,
+                'queues' => $queues,
                 'title' => 'User Profiles'
             ]);
         } else {
-            $this->view('hotspot/profiles/index', [
-                'session' => $session,
-                'profiles' => [],
-                'error' => 'Connection Failed to ' . $creds['ip'],
-                'title' => 'User Profiles'
-            ]);
+            \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+            header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/dashboard'));
+            exit;
         }
     }
 

app/Controllers/PublicStatusController.php

@@ -14,14 +14,9 @@ class PublicStatusController extends Controller {
     // View: Show Search Page
     public function index($session) {
         // Just verify session existence to display Hotspot Name
+        // Session verified by RouterCheckMiddleware
         $configModel = new Config();
         $creds = $configModel->getSession($session);
-        
-        if (!$creds) {
-            // If session invalid, maybe show 404 or generic error
-            echo "Session not found.";
-            return;
-        }
 
         $data = [
             'session' => $session,
@@ -92,9 +87,6 @@ class PublicStatusController extends Controller {
         if (!empty($user)) {
             $u = $user[0];
             
-            // DEBUG: Log the user data to see raw values
-            error_log("Status Debug: " . json_encode($u));
-
             // --- SECURITY CHECK: Hide Unused Vouchers ---
             $uptimeRaw = $u['uptime'] ?? '0s';
             $bytesIn = intval($u['bytes-in'] ?? 0);

app/Controllers/QuickPrintController.php

@@ -19,7 +19,14 @@ class QuickPrintController extends Controller {
     // Dashboard: List Cards
     public function index($session) {
         $qpModel = new QuickPrintModel();
-        $packages = $qpModel->getAllBySession($session);
+        
+        $configModel = new Config();
+        $creds = $configModel->getSession($session);
+        $routerId = $creds['id'] ?? null;
+        
+        // If no ID (Legacy), fallback to empty list or handle gracefully.
+        // For now, we assume ID exists as per migration plan.
+        $packages = $routerId ? $qpModel->getAllByRouterId($routerId) : [];
 
         $data = [
             'session' => $session,
@@ -32,11 +39,12 @@ class QuickPrintController extends Controller {
     // List/Manage Packages (CRUD)
     public function manage($session) {
         $qpModel = new QuickPrintModel();
-        $packages = $qpModel->getAllBySession($session);
-
-        // Need profiles for the Add/Edit Modal
+        
         $configModel = new Config();
         $creds = $configModel->getSession($session);
+        $routerId = $creds['id'] ?? null;
+
+        $packages = $routerId ? $qpModel->getAllByRouterId($routerId) : [];
         $profiles = [];
         if ($creds) {
             $API = new RouterOSAPI();
@@ -63,7 +71,13 @@ class QuickPrintController extends Controller {
         if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
         
         $session = $_POST['session'] ?? '';
+        
+        $configModel = new Config();
+        $creds = $configModel->getSession($session);
+        $routerId = $creds['id'] ?? 0;
+
         $data = [
+            'router_id' => $routerId,
             'session_name' => $session,
             'name' => $_POST['name'] ?? 'Package',
             'server' => $_POST['server'] ?? 'all',
@@ -71,6 +85,7 @@ class QuickPrintController extends Controller {
             'prefix' => $_POST['prefix'] ?? '',
             'char_length' => $_POST['char_length'] ?? 4,
             'price' => $_POST['price'] ?? 0,
+            'selling_price' => $_POST['selling_price'] ?? ($_POST['price'] ?? 0),
             'time_limit' => $_POST['time_limit'] ?? '',
             'data_limit' => $_POST['data_limit'] ?? '',
             'comment' => $_POST['comment'] ?? '',
@@ -85,6 +100,40 @@ class QuickPrintController extends Controller {
         exit;
     }
 
+    // CRUD: Update
+    public function update() {
+        if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
+        
+        $session = $_POST['session'] ?? '';
+        $id = $_POST['id'] ?? '';
+
+        if (empty($id)) {
+            \App\Helpers\FlashHelper::set('error', 'common.error', 'toasts.error_missing_id', [], true);
+            header("Location: /" . $session . "/quick-print/manage");
+            exit;
+        }
+
+        $data = [
+            'name' => $_POST['name'] ?? 'Package',
+            'profile' => $_POST['profile'] ?? 'default',
+            'prefix' => $_POST['prefix'] ?? '',
+            'char_length' => $_POST['char_length'] ?? 4,
+            'price' => $_POST['price'] ?? 0,
+            'selling_price' => $_POST['selling_price'] ?? ($_POST['price'] ?? 0),
+            'time_limit' => $_POST['time_limit'] ?? '',
+            'data_limit' => $_POST['data_limit'] ?? '',
+            'comment' => $_POST['comment'] ?? '',
+            'color' => $_POST['color'] ?? 'bg-blue-500'
+        ];
+
+        $qpModel = new QuickPrintModel();
+        $qpModel->update($id, $data); // Assuming update method exists in simple JSON model
+
+        \App\Helpers\FlashHelper::set('success', 'toasts.package_updated', 'toasts.package_updated_desc', [], true);
+        header("Location: /" . $session . "/quick-print/manage");
+        exit;
+    }
+
     // CRUD: Delete
     public function delete() {
         if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
@@ -158,7 +207,9 @@ class QuickPrintController extends Controller {
             $API->comm("/ip/hotspot/user/add", $userData);
             $API->disconnect();
          } else {
-             die("Connection failed");
+             \App\Helpers\FlashHelper::set('error', 'Connection Failed', 'Could not connect to router at ' . $creds['ip']);
+             header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/' . $session . '/quick-print/manage'));
+             exit;
          }
 
 

app/Controllers/SettingsController.php

@@ -10,7 +10,7 @@ use App\Helpers\FormatHelper;
 class SettingsController extends Controller {
     
     public function __construct() {
-        Middleware::auth();
+        // Auth handled by Router Middleware
     }
 
     public function system() {
@@ -33,10 +33,6 @@ class SettingsController extends Controller {
         return $this->view('settings/index', ['routers' => $routers]);
     }
 
-    public function add() {
-        return $this->view('settings/form');
-    }
-
     // ... (Existing Store methods) ...
     public function store() {
         // Sanitize Session Name (Duplicate Frontend Logic)
@@ -102,33 +98,7 @@ class SettingsController extends Controller {
     }
 
 
-    public function edit() {
-        // ID passed via query param or route param? 
-        // Our router supports {id} but let's check how we handle it.
-        // Router: /settings/edit/{id}
-        // In Router.php, params are passed to method.
-        // So method signature should be edit($id)
-        
-        // Wait, Router.php passes matches as params array to invokeCallback.
-        // So we need to capture arguments here.
-        $args = func_get_args();
-        $id = $args[0] ?? null;
 
-        if (!$id) {
-            header('Location: /settings/routers');
-            exit;
-        }
-
-        $configModel = new Config();
-        $session = $configModel->getSessionById($id);
-
-        if (!$session) {
-            header('Location: /settings/routers');
-            exit;
-        }
-
-        return $this->view('settings/form', ['router' => $session]);
-    }
 
     public function update() {
         $id = $_POST['id'];
@@ -316,7 +286,7 @@ class SettingsController extends Controller {
         // Restore Logos
         if (isset($json['logos'])) {
             $logoModel = new \App\Models\Logo();
-            $uploadDir = ROOT . '/public/assets/img/logos/';
+            $uploadDir = ROOT . '/public/uploads/logos/';
             if (!file_exists($uploadDir)) {
                 mkdir($uploadDir, 0777, true);
             }
@@ -341,7 +311,7 @@ class SettingsController extends Controller {
                                 ON CONFLICT(id) DO UPDATE SET name=excluded.name, path=excluded.path, type=excluded.type, size=excluded.size", [
                         'id' => $logo['id'],
                         'name' => $logo['name'],
-                        'path' => '/assets/img/logos/' . $filename,
+                        'path' => '/uploads/logos/' . $filename,
                         'type' => $extension,
                         'size' => $logo['size']
                     ]);
@@ -371,22 +341,24 @@ class SettingsController extends Controller {
     }
 
     public function uploadLogo() {
-        if (!isset($_FILES['logo_file'])) {
+        if (!isset($_FILES['logo_file']) || $_FILES['logo_file']['error'] !== UPLOAD_ERR_OK) {
+             \App\Helpers\FlashHelper::set('error', 'toasts.upload_failed', 'toasts.no_file_selected', [], true);
              header('Location: /settings/logos');
              exit;
         }
 
         $logoModel = new \App\Models\Logo();
         try {
-            $logoModel->add($_FILES['logo_file']);
+            $result = $logoModel->add($_FILES['logo_file']);
+            if ($result) {
+                \App\Helpers\FlashHelper::set('success', 'toasts.logo_uploaded', 'toasts.logo_uploaded_desc', [], true);
+            } else {
+                 \App\Helpers\FlashHelper::set('error', 'toasts.upload_failed', 'Generic upload error', [], true);
+            }
         } catch (\Exception $e) {
-            // Ideally flash error message to session
-            // For now, redirect (logging error via debug or ignoring as per simple req)
-            // session_start() is implicit in Middleware usually or index
-            // $_SESSION['error'] = $e->getMessage();
+            \App\Helpers\FlashHelper::set('error', 'toasts.upload_failed', $e->getMessage(), [], true);
         }
 
-        \App\Helpers\FlashHelper::set('success', 'toasts.logo_uploaded', 'toasts.logo_uploaded_desc', [], true);
         header('Location: /settings/logos');
     }
 

app/Controllers/VoucherTemplateController.php

@@ -6,7 +6,7 @@ use App\Core\Controller;
 use App\Models\VoucherTemplateModel;
 use App\Core\Middleware;
 
-class TemplateController extends Controller {
+class VoucherTemplateController extends Controller {
 
     public function __construct() {
         Middleware::auth();
@@ -19,7 +19,7 @@ class TemplateController extends Controller {
         $data = [
             'templates' => $templates
         ];
-        return $this->view('settings/templates/index', $data);
+        return $this->view('settings/voucher_templates/index', $data);
     }
 
     public function preview($id) {
@@ -48,7 +48,7 @@ class TemplateController extends Controller {
         $data = [
             'logoMap' => $logoMap
         ];
-        return $this->view('settings/templates/add', $data); // Note: add.php likely includes edit.php or is alias. View above says 'Template Editor (Shared)'
+        return $this->view('settings/voucher_templates/add', $data); 
     }
 
     public function store() {
@@ -62,6 +62,7 @@ class TemplateController extends Controller {
         // I will use 'global' for templates created in Settings.
         
         $data = [
+            'router_id' => 0, // Global templates
             'session_name' => 'global',
             'name' => $name,
             'content' => $content
@@ -71,7 +72,7 @@ class TemplateController extends Controller {
         $templateModel->add($data);
 
         \App\Helpers\FlashHelper::set('success', 'toasts.template_created', 'toasts.template_created_desc', ['name' => $name], true);
-        header("Location: /settings/templates");
+        header("Location: /settings/voucher-templates");
         exit;
     }
 
@@ -80,7 +81,7 @@ class TemplateController extends Controller {
         $template = $templateModel->getById($id);
 
         if (!$template) {
-             header("Location: /settings/templates");
+             header("Location: /settings/voucher-templates");
              exit;
         }
 
@@ -95,7 +96,7 @@ class TemplateController extends Controller {
             'template' => $template,
             'logoMap' => $logoMap
         ];
-        return $this->view('settings/templates/edit', $data);
+        return $this->view('settings/voucher_templates/edit', $data);
     }
 
     public function update() {
@@ -114,7 +115,7 @@ class TemplateController extends Controller {
         $templateModel->update($id, $data);
 
         \App\Helpers\FlashHelper::set('success', 'toasts.template_updated', 'toasts.template_updated_desc', ['name' => $name], true);
-        header("Location: /settings/templates");
+        header("Location: /settings/voucher-templates");
         exit;
     }
 
@@ -126,7 +127,7 @@ class TemplateController extends Controller {
         $templateModel->delete($id);
 
         \App\Helpers\FlashHelper::set('success', 'toasts.template_deleted', 'toasts.template_deleted_desc', [], true);
-        header("Location: /settings/templates");
+        header("Location: /settings/voucher-templates");
         exit;
     }
 }

app/Core/Console.php

@@ -45,7 +45,7 @@ class Console {
 
     private function printBanner() {
         echo "\n";
-        echo self::COLOR_BOLD . "  MIVO Helper " . self::COLOR_RESET . self::COLOR_GRAY . "v1.0" . self::COLOR_RESET . "\n\n";
+        echo self::COLOR_BOLD . "  MIVO Helper " . self::COLOR_RESET . self::COLOR_GRAY . "v1.1.0" . self::COLOR_RESET . "\n\n";
     }
 
     private function commandServe($args) {

app/Core/Migrations.php

@@ -61,6 +61,7 @@ class Migrations {
         // 6. Quick Prints (Voucher Printing Profiles)
         $pdo->exec("CREATE TABLE IF NOT EXISTS quick_prints (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
+            router_id INTEGER,
             session_name TEXT NOT NULL,
             name TEXT NOT NULL,
             server TEXT NOT NULL,
@@ -68,6 +69,7 @@ class Migrations {
             prefix TEXT DEFAULT '',
             char_length INTEGER DEFAULT 4,
             price INTEGER DEFAULT 0,
+            selling_price INTEGER DEFAULT 0,
             time_limit TEXT DEFAULT '',
             data_limit TEXT DEFAULT '',
             comment TEXT DEFAULT '',
@@ -79,6 +81,7 @@ class Migrations {
         // 7. Voucher Templates
         $pdo->exec("CREATE TABLE IF NOT EXISTS voucher_templates (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
+            router_id INTEGER,
             session_name TEXT NOT NULL,
             name TEXT NOT NULL,
             content TEXT NOT NULL,

app/Core/Router.php

@@ -4,13 +4,91 @@ namespace App\Core;
 
 class Router {
     protected $routes = [];
+    protected $currentGroupMiddleware = [];
+    protected $lastRouteKey = null;
 
+    protected $middlewareAliases = [
+        'auth' => \App\Middleware\AuthMiddleware::class,
+        'cors' => \App\Middleware\CorsMiddleware::class,
+        'router.valid' => \App\Middleware\RouterCheckMiddleware::class,
+    ];
+
+    /**
+     * Add a GET route
+     */
     public function get($path, $callback) {
-        $this->routes['GET'][$path] = $callback;
+        return $this->addRoute('GET', $path, $callback);
     }
 
+    /**
+     * Add a POST route
+     */
     public function post($path, $callback) {
-        $this->routes['POST'][$path] = $callback;
+        return $this->addRoute('POST', $path, $callback);
+    }
+
+    /**
+     * Add route to collection and return $this for chaining
+     */
+    protected function addRoute($method, $path, $callback) {
+        $path = $this->normalizePath($path);
+        
+        $this->routes[$method][$path] = [
+            'callback' => $callback,
+            'middleware' => $this->currentGroupMiddleware // Inherit group middleware
+        ];
+        
+        $this->lastRouteKey = ['method' => $method, 'path' => $path];
+        
+        return $this;
+    }
+
+    /**
+     * Attach middleware to the last defined route
+     */
+    public function middleware($names) {
+        if (!$this->lastRouteKey) return $this;
+
+        $method = $this->lastRouteKey['method'];
+        $path = $this->lastRouteKey['path'];
+
+        $middlewares = is_array($names) ? $names : [$names];
+        
+        // Merge with existing middleware (from groups)
+        $this->routes[$method][$path]['middleware'] = array_merge(
+            $this->routes[$method][$path]['middleware'],
+            $middlewares
+        );
+
+        return $this;
+    }
+
+    /**
+     * Define a route group with shared attributes (middleware, prefix, etc.)
+     */
+    public function group($attributes, callable $callback) {
+        $previousGroupMiddleware = $this->currentGroupMiddleware;
+
+        if (isset($attributes['middleware'])) {
+            $newMiddleware = is_array($attributes['middleware']) 
+                ? $attributes['middleware'] 
+                : [$attributes['middleware']];
+                
+            $this->currentGroupMiddleware = array_merge(
+                $this->currentGroupMiddleware, 
+                $newMiddleware
+            );
+        }
+
+        // Execute the callback with $this router instance
+        $callback($this);
+
+        // Restore previous state
+        $this->currentGroupMiddleware = $previousGroupMiddleware;
+    }
+
+    protected function normalizePath($path) {
+        return '/' . trim($path, '/');
     }
 
     public function dispatch($uri, $method) {
@@ -21,27 +99,24 @@ class Router {
         if (strpos($path, $scriptName) === 0) {
             $path = substr($path, strlen($scriptName));
         }
-        $path = '/' . trim($path, '/');
+        $path = $this->normalizePath($path);
 
-        // Global Install Check: Redirect if database is missing
+        // Global Install Check
         $dbPath = ROOT . '/app/Database/database.sqlite';
         if (!file_exists($dbPath)) {
-            // Whitelist /install route and assets to prevent infinite loop
             if ($path !== '/install' && strpos($path, '/assets/') !== 0) {
                 header('Location: /install');
                 exit;
             }
         }
 
-        // Check exact match first
+        // 1. Try Exact Match
         if (isset($this->routes[$method][$path])) {
-            $callback = $this->routes[$method][$path];
-            return $this->invokeCallback($callback);
+            return $this->runRoute($this->routes[$method][$path], []);
         }
 
-        // Check dynamic routes
-        foreach ($this->routes[$method] as $route => $callback) {
-            // Convert route syntax to regex
+        // 2. Try Dynamic Routes (Regex)
+        foreach ($this->routes[$method] as $route => $config) {
             // e.g. /dashboard/{session} -> #^/dashboard/([^/]+)$#
             $pattern = preg_replace('/\{([a-zA-Z0-9_]+)\}/', '([^/]+)', $route);
             $pattern = "#^" . $pattern . "$#";
@@ -49,13 +124,43 @@ class Router {
             if (preg_match($pattern, $path, $matches)) {
                 array_shift($matches); // Remove full match
                 $matches = array_map('urldecode', $matches);
-                return $this->invokeCallback($callback, $matches);
+                return $this->runRoute($config, $matches);
             }
         }
 
         \App\Helpers\ErrorHelper::show(404);
     }
 
+    protected function runRoute($routeConfig, $params) {
+        $callback = $routeConfig['callback'];
+        $middlewares = $routeConfig['middleware'];
+        
+        // Pipeline Runner
+        $pipeline = array_reduce(
+            array_reverse($middlewares),
+            function ($nextStack, $middlewareName) {
+                return function ($request) use ($nextStack, $middlewareName) {
+                    // Resolve Middleware Class
+                    $class = $this->middlewareAliases[$middlewareName] ?? $middlewareName;
+                    
+                    if (!class_exists($class)) {
+                        throw new \Exception("Middleware class '$class' not found.");
+                    }
+                    
+                    $instance = new $class();
+                    return $instance->handle($request, $nextStack);
+                };
+            },
+            function ($request) use ($callback, $params) {
+                // Final destination: The Controller
+                return $this->invokeCallback($callback, $params);
+            }
+        );
+
+        // Start the pipeline with the current request (mock object or just null/path)
+        return $pipeline($_SERVER);
+    }
+
     protected function invokeCallback($callback, $params = []) {
         if (is_array($callback)) {
             $controller = new $callback[0]();

app/Helpers/ErrorHelper.php

@@ -7,21 +7,26 @@ class ErrorHelper {
     public static function show($code = 404, $message = 'Page Not Found', $description = null) {
         http_response_code($code);
         
-        // Provide default descriptions for common codes
+        // Provide default translation keys for common codes
         if ($description === null) {
             switch ($code) {
                 case 403:
-                    $description = "You do not have permission to access this resource.";
+                    $message = ($message === 'Page Not Found') ? 'errors.403_title' : $message; // Override default if simple
+                    $description = "errors.403_desc";
                     break;
                 case 500:
-                    $description = "Something went wrong on our end. Please try again later.";
+                    $message = ($message === 'Page Not Found') ? 'errors.500_title' : $message;
+                    $description = "errors.500_desc";
                     break;
                 case 503:
-                    $description = "Service Unavailable. The server is currently unable to handle the request due to maintenance or overload.";
+                    $message = ($message === 'Page Not Found') ? 'errors.503_title' : $message;
+                    $description = "errors.503_desc";
                     break;
                 case 404:
                 default:
-                    $description = "The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.";
+                    // If message is generic default, use key
+                    if ($message === 'Page Not Found') $message = 'errors.404_title';
+                    $description = "errors.404_desc";
                     break;
             }
         }

app/Middleware/AuthMiddleware.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Middleware;
+
+class AuthMiddleware implements MiddlewareInterface {
+    public function handle($request, \Closure $next) {
+        // Assume session is started in index.php
+        if (!isset($_SESSION['user_id'])) {
+            header('Location: /login');
+            exit;
+        }
+
+        return $next($request);
+    }
+}

app/Middleware/CorsMiddleware.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Middleware;
+
+use App\Core\Database;
+
+class CorsMiddleware implements MiddlewareInterface {
+    public function handle($request, \Closure $next) {
+        $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
+        
+        // Always allow if no origin (e.g. server-to-server or same-origin strict)
+        // Check generic logic: if valid origin, try to match DB
+        if (!empty($origin)) {
+            $db = Database::getInstance();
+            $stmt = $db->query("SELECT * FROM api_cors WHERE origin = ? OR origin = '*' LIMIT 1", [$origin]);
+            $rule = $stmt->fetch();
+
+            if ($rule) {
+                header("Access-Control-Allow-Origin: " . ($rule['origin'] === '*' ? '*' : $origin));
+                
+                $methods = json_decode($rule['methods'], true) ?: ['GET', 'POST'];
+                header("Access-Control-Allow-Methods: " . implode(', ', $methods));
+
+                $headers = json_decode($rule['headers'], true) ?: ['*'];
+                header("Access-Control-Allow-Headers: " . implode(', ', $headers));
+
+                header("Access-Control-Max-Age: " . ($rule['max_age'] ?? 3600));
+
+                // Handle preflight requests
+                if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+                    http_response_code(200);
+                    exit();
+                }
+            }
+        }
+
+        return $next($request);
+    }
+}

app/Middleware/MiddlewareInterface.php

@@ -0,0 +1,7 @@
+<?php
+
+namespace App\Middleware;
+
+interface MiddlewareInterface {
+    public function handle($request, \Closure $next);
+}

app/Middleware/RouterCheckMiddleware.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Middleware;
+
+use App\Models\Config;
+
+class RouterCheckMiddleware implements MiddlewareInterface {
+    public function handle($request, \Closure $next) {
+        // We need to extract the session from the URI
+        // Pattern: /{session}/...
+        
+        $path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+        $scriptName = dirname($_SERVER['SCRIPT_NAME']);
+        if (strpos($path, $scriptName) === 0) {
+            $path = substr($path, strlen($scriptName));
+        }
+        $path = '/' . trim($path, '/');
+
+        // Regex to grab first segment
+        if (preg_match('#^/([^/]+)#', $path, $matches)) {
+            $session = $matches[1];
+            
+            // Exclude system routes that might mimic this pattern if any (like 'settings')
+            // But 'settings' is usually top level. 
+            // If the user name their router "settings", it would conflict anyway.
+            // Let's assume standard routing structure.
+            
+            if ($session === 'login' || $session === 'logout' || $session === 'settings' || $session === 'install' || $session === 'api') {
+                return $next($request);
+            }
+
+            $configModel = new Config();
+            if ($session !== 'demo' && !$configModel->getSession($session)) {
+                 // Router NOT FOUND
+                 \App\Helpers\ErrorHelper::show(404, 'errors.router_not_found_title', 'errors.router_not_found_desc');
+            }
+        }
+
+        return $next($request);
+    }
+}

app/Models/Config.php

@@ -20,6 +20,7 @@ class Config {
 
             if ($router) {
                 return [
+                    'id' => $router['id'],
                     'ip' => $router['ip_address'],
                     'ip_address' => $router['ip_address'], // Alias
                     'user' => $router['username'],

app/Models/Logo.php

@@ -74,7 +74,7 @@ class Logo {
             $exists = $this->getById($id);
         } while ($exists);
 
-        $uploadDir = ROOT . '/public/assets/img/logos/';
+        $uploadDir = ROOT . '/public/uploads/logos/';
         if (!file_exists($uploadDir)) {
             mkdir($uploadDir, 0777, true);
         }
@@ -86,7 +86,7 @@ class Logo {
             $this->db->query("INSERT INTO {$this->table} (id, name, path, type, size) VALUES (:id, :name, :path, :type, :size)", [
                 'id' => $id,
                 'name' => $file['name'], 
-                'path' => '/assets/img/logos/' . $filename,
+                'path' => '/uploads/logos/' . $filename,
                 'type' => $extension,
                 'size' => $file['size']
             ]);
@@ -98,7 +98,7 @@ class Logo {
 
     public function syncFiles() {
         // One-time sync: scan folder, if file not in DB, add it.
-        $logoDir = ROOT . '/public/assets/img/logos/';
+        $logoDir = ROOT . '/public/uploads/logos/';
         if (!file_exists($logoDir)) return;
 
         $files = [];
@@ -112,7 +112,7 @@ class Logo {
             $extension = pathinfo($filename, PATHINFO_EXTENSION);
             
             // Check if file is registered (maybe by path match)
-            $webPath = '/assets/img/logos/' . $filename;
+            $webPath = '/uploads/logos/' . $filename;
             $stmt = $this->db->query("SELECT COUNT(*) FROM {$this->table} WHERE path = :path", ['path' => $webPath]);
             
             if ($stmt->fetchColumn() == 0) {

app/Models/QuickPrintModel.php

@@ -6,9 +6,9 @@ use App\Core\Database;
 
 class QuickPrintModel {
 
-    public function getAllBySession($sessionName) {
+    public function getAllByRouterId($routerId) {
         $db = Database::getInstance();
-        $stmt = $db->query("SELECT * FROM quick_prints WHERE session_name = ?", [$sessionName]);
+        $stmt = $db->query("SELECT * FROM quick_prints WHERE router_id = ?", [$routerId]);
         return $stmt->fetchAll();
     }
 
@@ -20,17 +20,22 @@ class QuickPrintModel {
 
     public function add($data) {
         $db = Database::getInstance();
-        $sql = "INSERT INTO quick_prints (session_name, name, server, profile, prefix, char_length, price, time_limit, data_limit, comment, color) 
-                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+        // Insert router_id. session_name is kept for legacy/redundancy if needed, or we can drop it.
+        // Let's write both for now to be safe during transition, or user requirement "diubah saja" implies replacement using ID.
+        // But the table still has session_name column (we added router_id, didn't drop session_name).
+        $sql = "INSERT INTO quick_prints (router_id, session_name, name, server, profile, prefix, char_length, price, selling_price, time_limit, data_limit, comment, color) 
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
         
         return $db->query($sql, [
-            $data['session_name'],
+            $data['router_id'],
+            $data['session_name'], // Keep filling it for now
             $data['name'],
-            $data['server'],
+            $data['server'] ?? 'all',
             $data['profile'],
             $data['prefix'] ?? '',
             $data['char_length'] ?? 4,
             $data['price'] ?? 0,
+            $data['selling_price'] ?? ($data['price'] ?? 0),
             $data['time_limit'] ?? '',
             $data['data_limit'] ?? '',
             $data['comment'] ?? '',
@@ -40,15 +45,15 @@ class QuickPrintModel {
 
     public function update($id, $data) {
         $db = Database::getInstance();
-        $sql = "UPDATE quick_prints SET name=?, server=?, profile=?, prefix=?, char_length=?, price=?, time_limit=?, data_limit=?, comment=?, color=?, updated_at=CURRENT_TIMESTAMP WHERE id=?";
+        $sql = "UPDATE quick_prints SET name=?, profile=?, prefix=?, char_length=?, price=?, selling_price=?, time_limit=?, data_limit=?, comment=?, color=?, updated_at=CURRENT_TIMESTAMP WHERE id=?";
         
         return $db->query($sql, [
             $data['name'],
-            $data['server'],
             $data['profile'],
             $data['prefix'] ?? '',
             $data['char_length'] ?? 4,
             $data['price'] ?? 0,
+            $data['selling_price'] ?? ($data['price'] ?? 0),
             $data['time_limit'] ?? '',
             $data['data_limit'] ?? '',
             $data['comment'] ?? '',

app/Models/VoucherTemplateModel.php

@@ -12,10 +12,9 @@ class VoucherTemplateModel {
         return $stmt->fetchAll();
     }
     
-    public function getBySession($sessionName) {
-        // Templates can be global or session specific, but allow session filtering
+    public function getAllByRouterId($routerId) {
         $db = Database::getInstance();
-        $stmt = $db->query("SELECT * FROM voucher_templates WHERE session_name = ? OR session_name = 'global'", [$sessionName]);
+        $stmt = $db->query("SELECT * FROM voucher_templates WHERE router_id = ?", [$routerId]);
         return $stmt->fetchAll();
     }
 
@@ -27,8 +26,9 @@ class VoucherTemplateModel {
 
     public function add($data) {
         $db = Database::getInstance();
-        $sql = "INSERT INTO voucher_templates (session_name, name, content) VALUES (?, ?, ?)";
+        $sql = "INSERT INTO voucher_templates (router_id, session_name, name, content) VALUES (?, ?, ?, ?)";
         return $db->query($sql, [
+            $data['router_id'],
             $data['session_name'],
             $data['name'],
             $data['content']

app/Views/dashboard.php

@@ -322,7 +322,8 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
         // Init
         fetchInterfaces().then(() => {
             // Start Polling after interfaces loaded
-            setInterval(fetchTraffic, 5000); // Every 5 seconds
+            const reloadInterval = <?= ($reload_interval ?? 5) * 1000 ?>; // Convert sec to ms
+            setInterval(fetchTraffic, reloadInterval); 
             fetchTraffic();
         });
     });

app/Views/errors/default.php

@@ -16,17 +16,21 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
         </div>
         
         <h1 class="text-6xl font-extrabold tracking-tighter mb-4 text-foreground"><?= $errorCode ?></h1>
-        <h2 class="text-2xl font-bold mb-4 text-foreground"><?= $errorMessage ?></h2>
         
-        <p class="text-accents-5 max-w-md mx-auto mb-8">
+        <!-- Use data-i18n if message looks like a key (starts with errors.), otherwise show raw -->
+        <h2 class="text-2xl font-bold mb-4 text-foreground" <?= (strpos($errorMessage, 'errors.') === 0) ? 'data-i18n="'.$errorMessage.'"' : '' ?>>
+            <?= $errorMessage ?>
+        </h2>
+        
+        <p class="text-accents-5 max-w-md mx-auto mb-8" <?= (strpos($errorDescription, 'errors.') === 0) ? 'data-i18n="'.$errorDescription.'"' : '' ?>>
             <?= $errorDescription ?>
         </p>
         
         <div class="flex flex-col sm:flex-row justify-center gap-4 w-full sm:w-auto">
-            <a href="/" class="btn btn-primary w-full sm:w-auto">
+            <a href="/" class="btn btn-primary w-full sm:w-auto" data-i18n="errors.return_home">
                 Return Home
             </a>
-            <button onclick="history.back()" class="btn btn-secondary w-full sm:w-auto">
+            <button onclick="history.back()" class="btn btn-secondary w-full sm:w-auto" data-i18n="errors.go_back">
                 Go Back
             </button>
         </div>

app/Views/hotspot/profiles/add.php

@@ -1,236 +0,0 @@
-<?php
-$title = "Add User Profile";
-require_once ROOT . '/app/Views/layouts/header_main.php';
-?>
-
-<div class="max-w-5xl mx-auto">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
-        <div>
-            <h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_profiles.form.add_title">Add Profile</h1>
-            <p class="text-accents-5" data-i18n="hotspot_profiles.form.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Create a new hotspot user profile for: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
-        </div>
-        <a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back
-        </a>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Main Form Column -->
-        <div class="lg:col-span-2">
-            <div class="card p-6 border-accents-2 shadow-sm">
-                <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
-                    <div class="p-2 bg-primary/10 rounded-lg text-primary">
-                        <i data-lucide="settings" class="w-5 h-5"></i>
-                    </div>
-                    <span data-i18n="hotspot_profiles.form.settings">New Profile Settings</span>
-                </h3>
-
-                <form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/store" method="POST" class="space-y-6">
-                    <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
-
-                    <!-- General Settings Section -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.general">General</h4>
-                        
-                        <!-- Name -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6"><span data-i18n="common.name">Name</span> <span class="text-red-500">*</span></label>
-                            <input type="text" name="name" required class="form-input w-full" data-i18n-placeholder="hotspot_profiles.form.name_placeholder" placeholder="e.g. 1Hour-Package">
-                        </div>
-
-                        <!-- Pools & Shared Users -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.address_pool">Address Pool</label>
-                                <select name="address-pool" class="custom-select w-full" data-search="true">
-                                    <option value="none" data-i18n="common.forms.none">none</option>
-                                    <?php foreach ($pools as $pool): ?>
-                                        <?php if(isset($pool['name'])): ?>
-                                        <option value="<?= htmlspecialchars($pool['name']) ?>"><?= htmlspecialchars($pool['name']) ?></option>
-                                        <?php endif; ?>
-                                    <?php endforeach; ?>
-                                </select>
-                            </div>
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.shared_users">Shared Users</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="users" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="shared-users" value="1" min="1" class="form-input pl-10 w-full" placeholder="1">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Limits Section -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.limits_queues">Limits & Queues</h4>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <!-- Rate Limit -->
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.rate_limit">Rate Limit (Rx/Tx)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="activity" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="text" name="rate-limit" class="form-input pl-10 w-full" data-i18n-placeholder="hotspot_profiles.form.rate_limit_help" placeholder="e.g. 512k/1M">
-                                </div>
-                            </div>
-
-                            <!-- Parent Queue -->
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.parent_queue">Parent Queue</label>
-                                <select name="parent-queue" class="custom-select w-full" data-search="true">
-                                    <option value="none" data-i18n="common.forms.none">none</option>
-                                    <?php foreach ($queues as $q): ?>
-                                        <option value="<?= htmlspecialchars($q) ?>"><?= htmlspecialchars($q) ?></option>
-                                    <?php endforeach; ?>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Pricing & Validity -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.pricing_validity">Pricing & Validity</h4>
-
-                        <!-- Expired Mode -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.expired_mode">Expired Mode</label>
-                            <select name="expired_mode" id="expired-mode" class="custom-select w-full">
-                                <option value="none" data-i18n="common.forms.none" selected>none</option>
-                                <option value="rem">Remove</option>
-                                <option value="ntf">Notice</option>
-                                <option value="remc">Remove & Record</option>
-                                <option value="ntfc">Notice & Record</option>
-                            </select>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.expired_mode_help">Action when validity expires.</p>
-                        </div>
-
-                        <!-- Validity (Hidden by default unless mode selected) -->
-                        <div id="validity-group" class="hidden space-y-1 transition-all duration-300">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.validity">Validity</label>
-                            <div class="flex w-full">
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
-                                    <input type="number" name="validity_d" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
-                                    <input type="number" name="validity_h" min="0" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
-                                    <input type="number" name="validity_m" min="0" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                            </div>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.validity_help">Days / Hours / Minutes</p>
-                        </div>
-
-                        <!-- Prices -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.price">Price (Rp)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="tag" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="price" class="form-input pl-10 w-full" placeholder="e.g. 5000">
-                                </div>
-                            </div>
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.selling_price">Selling Price (Rp)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="shopping-bag" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="selling_price" class="form-input pl-10 w-full" placeholder="e.g. 7000">
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Lock User -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.lock_user">Lock User</label>
-                            <select name="lock_user" class="custom-select w-full">
-                                <option value="Disable" data-i18n="common.forms.disabled">Disable</option>
-                                <option value="Enable" data-i18n="common.forms.enabled">Enable</option>
-                            </select>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.lock_user_help">Lock user to one specific MAC address.</p>
-                        </div>
-                    </div>
-
-                    <div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
-                        <a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
-                        <button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
-                            <i data-lucide="save" class="w-4 h-4 mr-2"></i>
-                            <span data-i18n="hotspot_profiles.form.save">Save Profile</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Sticky Quick Tips Column -->
-        <div class="lg:col-span-1">
-            <div class="sticky top-6 space-y-6">
-                <div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
-                    <h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_profiles.form.quick_tips">
-                        <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i> 
-                        Quick Tips
-                    </h3>
-                    <ul class="text-sm text-accents-5 space-y-3">
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_rate_limit"><strong>Rate Limit</strong>: Rx/Tx (Upload/Download). Example: <code>512k/1M</code></span>
-                        </li>
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_expired_mode"><strong>Expired Mode</strong>: Select 'Remove' or 'Notice' to enable Validity.</span>
-                        </li>
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_parent_queue"><strong>Parent Queue</strong>: Assigns users to a specific parent queue for bandwidth management.</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    // Custom Select Init
-    if (typeof CustomSelect !== 'undefined') {
-        document.querySelectorAll('.custom-select').forEach(select => {
-            new CustomSelect(select);
-        });
-    }
-
-    // Validity Toggle Logic
-    const modeSelect = document.getElementById('expired-mode');
-    const validityGroup = document.getElementById('validity-group');
-
-    function toggleValidity() {
-        if (!modeSelect || !validityGroup) return;
-        
-        // Show validity ONLY if mode != none
-        if (modeSelect.value === 'none') {
-            validityGroup.classList.add('hidden');
-        } else {
-            validityGroup.classList.remove('hidden');
-        }
-    }
-
-    if (modeSelect) {
-        // Initial check
-        toggleValidity();
-        // Listen for changes
-        modeSelect.addEventListener('change', toggleValidity);
-    }
-});
-</script>

app/Views/hotspot/profiles/edit.php

@@ -1,241 +0,0 @@
-<?php
-$title = "Edit User Profile";
-require_once ROOT . '/app/Views/layouts/header_main.php';
-?>
-
-<div class="max-w-5xl mx-auto">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
-        <div>
-            <h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_profiles.form.edit_title">Edit Profile</h1>
-            <p class="text-accents-5" data-i18n="hotspot_profiles.form.edit_subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($profile['name'] ?? '') ?>"}'>Edit hotspot user profile: <span class="text-foreground font-medium"><?= htmlspecialchars($profile['name'] ?? '') ?></span></p>
-        </div>
-        <a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back
-        </a>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Main Form Column -->
-        <div class="lg:col-span-2">
-            <div class="card p-6 border-accents-2 shadow-sm">
-                <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
-                    <div class="p-2 bg-primary/10 rounded-lg text-primary">
-                        <i data-lucide="edit" class="w-5 h-5"></i>
-                    </div>
-                    <span data-i18n="hotspot_profiles.form.edit_title">Edit Profile</span>
-                </h3>
-
-                <form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/update" method="POST" class="space-y-6">
-                    <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
-                    <input type="hidden" name="id" value="<?= htmlspecialchars($profile['.id']) ?>">
-                    
-                    <!-- General Settings Section -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.general">General</h4>
-                        
-                        <!-- Name -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6"><span data-i18n="common.name">Name</span> <span class="text-red-500">*</span></label>
-                            <input type="text" name="name" value="<?= htmlspecialchars($profile['name'] ?? '') ?>" required class="form-input w-full" data-i18n-placeholder="hotspot_profiles.form.name_placeholder" placeholder="e.g. 1Hour-Package">
-                        </div>
-
-                        <!-- Pools & Shared Users -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.address_pool">Address Pool</label>
-                                <select name="address-pool" class="custom-select w-full" data-search="true">
-                                    <option value="none" data-i18n="common.forms.none" <?= ($profile['address-pool'] ?? 'none') === 'none' ? 'selected' : '' ?>>none</option>
-                                    <?php foreach ($pools as $pool): ?>
-                                        <?php if(isset($pool['name'])): ?>
-                                        <option value="<?= htmlspecialchars($pool['name']) ?>" <?= ($profile['address-pool'] ?? '') === $pool['name'] ? 'selected' : '' ?>>
-                                            <?= htmlspecialchars($pool['name']) ?>
-                                        </option>
-                                        <?php endif; ?>
-                                    <?php endforeach; ?>
-                                </select>
-                            </div>
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.shared_users">Shared Users</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="users" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="shared-users" value="<?= htmlspecialchars($profile['shared-users'] ?? '1') ?>" min="1" class="form-input pl-10 w-full" placeholder="1">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Limits Section -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.limits_queues">Limits & Queues</h4>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <!-- Rate Limit -->
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.rate_limit">Rate Limit (Rx/Tx)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="activity" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="text" name="rate-limit" value="<?= htmlspecialchars($profile['rate-limit'] ?? '') ?>" class="form-input pl-10 w-full" data-i18n-placeholder="hotspot_profiles.form.rate_limit_help" placeholder="e.g. 512k/1M">
-                                </div>
-                            </div>
-
-                            <!-- Parent Queue -->
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.parent_queue">Parent Queue</label>
-                                <select name="parent-queue" class="custom-select w-full" data-search="true">
-                                    <option value="none" data-i18n="common.forms.none" <?= ($profile['parent-queue'] ?? 'none') === 'none' ? 'selected' : '' ?>>none</option>
-                                    <?php foreach ($queues as $q): ?>
-                                        <option value="<?= htmlspecialchars($q) ?>" <?= ($profile['parent-queue'] ?? '') === $q ? 'selected' : '' ?>>
-                                            <?= htmlspecialchars($q) ?>
-                                        </option>
-                                    <?php endforeach; ?>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Pricing & Validity -->
-                    <div class="space-y-4">
-                        <h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.pricing_validity">Pricing & Validity</h4>
-
-                        <!-- Expired Mode -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.expired_mode">Expired Mode</label>
-                            <?php $exMode = $profile['meta']['expired_mode'] ?? 'none'; ?>
-                            <select name="expired_mode" id="expired-mode" class="custom-select w-full">
-                                <option value="none" data-i18n="common.forms.none" <?= ($exMode === 'none' || $exMode === '') ? 'selected' : '' ?>>none</option>
-                                <option value="rem" <?= $exMode === 'rem' ? 'selected' : '' ?>>Remove</option>
-                                <option value="ntf" <?= $exMode === 'ntf' ? 'selected' : '' ?>>Notice</option>
-                                <option value="remc" <?= $exMode === 'remc' ? 'selected' : '' ?>>Remove & Record</option>
-                                <option value="ntfc" <?= $exMode === 'ntfc' ? 'selected' : '' ?>>Notice & Record</option>
-                            </select>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.expired_mode_help">Action when validity expires.</p>
-                        </div>
-
-                        <!-- Validity (Hidden by default unless mode selected) -->
-                        <div id="validity-group" class="hidden space-y-1 transition-all duration-300">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.validity">Validity</label>
-                            <div class="flex w-full">
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
-                                    <input type="number" name="validity_d" value="<?= htmlspecialchars($profile['val_d'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
-                                    <input type="number" name="validity_h" value="<?= htmlspecialchars($profile['val_h'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
-                                    <input type="number" name="validity_m" value="<?= htmlspecialchars($profile['val_m'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                            </div>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.validity_help">Days / Hours / Minutes</p>
-                        </div>
-
-                        <!-- Prices -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.price">Price (Rp)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="tag" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="price" value="<?= htmlspecialchars($profile['meta']['price'] ?? '') ?>" class="form-input pl-10 w-full" placeholder="e.g. 5000">
-                                </div>
-                            </div>
-                            <div class="space-y-1">
-                                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.selling_price">Selling Price (Rp)</label>
-                                <div class="relative group">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                        <i data-lucide="shopping-bag" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="selling_price" value="<?= htmlspecialchars($profile['meta']['selling_price'] ?? '') ?>" class="form-input pl-10 w-full" placeholder="e.g. 7000">
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Lock User -->
-                        <div class="space-y-1">
-                            <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.lock_user">Lock User</label>
-                            <?php $lock = $profile['meta']['lock_user'] ?? 'Disable'; ?>
-                            <select name="lock_user" class="custom-select w-full">
-                                <option value="Disable" data-i18n="common.forms.disabled" <?= $lock === 'Disable' ? 'selected' : '' ?>>Disable</option>
-                                <option value="Enable" data-i18n="common.forms.enabled" <?= $lock === 'Enable' ? 'selected' : '' ?>>Enable</option>
-                            </select>
-                            <p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.lock_user_help">Lock user to one specific MAC address.</p>
-                        </div>
-                    </div>
-
-                    <div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
-                        <a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
-                        <button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
-                            <i data-lucide="save" class="w-4 h-4 mr-2"></i>
-                            <span data-i18n="common.forms.save_changes">Save Changes</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Sticky Quick Tips Column -->
-        <div class="lg:col-span-1">
-            <div class="sticky top-6 space-y-6">
-                <div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
-                    <h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_profiles.form.quick_tips">
-                        <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i> 
-                        Quick Tips
-                    </h3>
-                    <ul class="text-sm text-accents-5 space-y-3">
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_rate_limit"><strong>Rate Limit</strong>: Rx/Tx (Upload/Download). Example: <code>512k/1M</code></span>
-                        </li>
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_expired_mode"><strong>Expired Mode</strong>: Select 'Remove' or 'Notice' to enable Validity.</span>
-                        </li>
-                        <li class="flex gap-2">
-                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                            <span data-i18n="hotspot_profiles.form.tip_parent_queue"><strong>Parent Queue</strong>: Assigns users to a specific parent queue for bandwidth management.</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    // Custom Select Init
-    if (typeof CustomSelect !== 'undefined') {
-        document.querySelectorAll('.custom-select').forEach(select => {
-            new CustomSelect(select);
-        });
-    }
-
-    // Validity Toggle Logic
-    const modeSelect = document.getElementById('expired-mode');
-    const validityGroup = document.getElementById('validity-group');
-
-    function toggleValidity() {
-        if (!modeSelect || !validityGroup) return;
-        
-        // Show validity ONLY if mode != none
-        if (modeSelect.value === 'none') {
-            validityGroup.classList.add('hidden');
-        } else {
-            validityGroup.classList.remove('hidden');
-        }
-    }
-
-    // Initial check
-    toggleValidity();
-    // Listen for changes
-    modeSelect.addEventListener('change', toggleValidity);
-});
-</script>

app/Views/hotspot/profiles/index.php

@@ -22,9 +22,9 @@ sort($uniqueModes);
         <a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
             <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
         </a>
-        <a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/add" class="btn btn-primary">
+        <button onclick="openProfileModal('add')" class="btn btn-primary">
             <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="hotspot_profiles.add_profile">Add Profile</span>
-        </a>
+        </button>
     </div>
 </div>
 
@@ -79,8 +79,21 @@ sort($uniqueModes);
             <tbody id="table-body">
                 <?php if (!empty($profiles)): ?>
                     <?php foreach ($profiles as $profile): ?>
-                    <tr class="table-row-item" 
-                        data-name="<?= strtolower($profile['name'] ?? '') ?>"
+                    <tr class="table-row-item group-row" 
+                        data-id="<?= $profile['.id'] ?>"
+                        data-name="<?= htmlspecialchars($profile['name'] ?? '') ?>"
+                        data-shared-users="<?= htmlspecialchars($profile['shared-users'] ?? '1') ?>"
+                        data-rate-limit="<?= htmlspecialchars($profile['rate-limit'] ?? '') ?>"
+                        data-address-pool="<?= htmlspecialchars($profile['address-pool'] ?? 'none') ?>"
+                        data-parent-queue="<?= htmlspecialchars($profile['parent-queue'] ?? 'none') ?>"
+                        data-expired-mode="<?= htmlspecialchars($profile['meta']['expired_mode'] ?? 'none') ?>"
+                        data-val-d="<?= htmlspecialchars($profile['val_d'] ?? '') ?>"
+                        data-val-h="<?= htmlspecialchars($profile['val_h'] ?? '') ?>"
+                        data-val-m="<?= htmlspecialchars($profile['val_m'] ?? '') ?>"
+                        data-price="<?= htmlspecialchars($profile['meta']['price'] ?? '') ?>"
+                        data-selling-price="<?= htmlspecialchars($profile['meta']['selling_price'] ?? '') ?>"
+                        data-lock-user="<?= htmlspecialchars($profile['meta']['lock_user'] ?? 'Disable') ?>"
+                        data-search-name="<?= strtolower($profile['name'] ?? '') ?>"
                         data-mode="<?= htmlspecialchars($profile['meta']['expired_mode_formatted'] ?? '') ?>">
                         
                         <td>
@@ -89,9 +102,9 @@ sort($uniqueModes);
                                     <i data-lucide="ticket" class="w-4 h-4"></i>
                                 </div>
                                 <div class="text-sm font-medium text-foreground">
-                                    <a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/edit/<?= $profile['.id'] ?>" class="hover:underline hover:text-purple-600 dark:hover:text-purple-400">
+                                    <button onclick="openProfileModal('edit', this)" class="hover:underline hover:text-purple-600 dark:hover:text-purple-400 text-left">
                                         <?= htmlspecialchars($profile['name'] ?? '-') ?>
-                                    </a>
+                                    </button>
                                 </div>
                             </div>
                         </td>
@@ -129,9 +142,9 @@ sort($uniqueModes);
                         
                         <td class="text-right text-sm font-medium">
                             <div class="flex items-center justify-end gap-2 table-actions-reveal">
-                                <a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/edit/<?= $profile['.id'] ?>" class="btn bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 border-transparent h-8 px-2 rounded transition-colors" title="Edit">
+                                <button onclick="openProfileModal('edit', this)" class="btn bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 border-transparent h-8 px-2 rounded transition-colors" title="Edit">
                                     <i data-lucide="edit-2" class="w-4 h-4"></i>
-                                </a>
+                                </button>
                                 <form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('hotspot_profiles.title') : 'Delete Profile?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to delete profile <?= $profile['name'] ?>?', window.i18n ? window.i18n.t('common.delete') : 'Delete', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
                                     <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
                                     <input type="hidden" name="id" value="<?= $profile['.id'] ?>">
@@ -238,7 +251,7 @@ sort($uniqueModes);
 
         update() {
             this.filteredRows = this.allRows.filter(row => {
-                const name = row.dataset.name || '';
+                const name = row.dataset.searchName || '';
                 const mode = row.dataset.mode || '';
                 
                 if (this.filters.search && !name.includes(this.filters.search)) return false;
@@ -307,5 +320,201 @@ sort($uniqueModes);
         
         const rows = document.querySelectorAll('.table-row-item');
         new TableManager(rows, 10);
-    });
+    }); 
+
+    function openProfileModal(mode, btn = null) {
+        const template = document.getElementById('profile-form-template').innerHTML;
+        
+        let title = window.i18n ? window.i18n.t('hotspot_profiles.form.add_title') : 'Add Profile';
+        let saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
+        
+        if (mode === 'edit') {
+            title = window.i18n ? window.i18n.t('hotspot_profiles.form.edit_title') : 'Edit Profile';
+            saveBtn = window.i18n ? window.i18n.t('common.forms.save_changes') : 'Save Changes';
+        }
+
+        const preConfirmFn = () => {
+             const form = Swal.getHtmlContainer().querySelector('form');
+             if(form.reportValidity()) {
+                 form.submit();
+                 return true;
+             }
+             return false;
+        };
+
+        const onOpenedFn = (popup) => {
+             const form = popup.querySelector('form');
+             
+             // Validity Toggle Logic for Modal
+             const modeSelect = form.querySelector('#expired-mode');
+             const validityGroup = form.querySelector('#validity-group');
+
+             function toggleValidity() {
+                 if (!modeSelect || !validityGroup) return;
+                 if (modeSelect.value === 'none') {
+                     validityGroup.classList.add('hidden');
+                 } else {
+                     validityGroup.classList.remove('hidden');
+                 }
+             }
+
+             if (modeSelect) {
+                 modeSelect.addEventListener('change', toggleValidity);
+             }
+
+             if (mode === 'edit' && btn) {
+                 const row = btn.closest('tr');
+                 
+                 form.action = "/<?= htmlspecialchars($session) ?>/hotspot/profile/update";
+                 
+                 // Populate Hidden ID
+                 const idInput = form.querySelector('#form-id');
+                 idInput.disabled = false;
+                 idInput.value = row.dataset.id;
+
+                 // Populate Fields
+                 form.querySelector('[name="name"]').value = row.dataset.name || '';
+                 form.querySelector('[name="shared-users"]').value = row.dataset.sharedUsers || '1';
+                 form.querySelector('[name="rate-limit"]').value = row.dataset.rateLimit || '';
+                 
+                 // Selects
+                 if(form.querySelector('[name="address-pool"]')) form.querySelector('[name="address-pool"]').value = row.dataset.addressPool;
+                 if(form.querySelector('[name="parent-queue"]')) form.querySelector('[name="parent-queue"]').value = row.dataset.parentQueue;
+                 if(form.querySelector('[name="expired_mode"]')) form.querySelector('[name="expired_mode"]').value = row.dataset.expiredMode;
+                 if(form.querySelector('[name="lock_user"]')) form.querySelector('[name="lock_user"]').value = row.dataset.lockUser;
+
+                 // Validity
+                 form.querySelector('[name="validity_d"]').value = row.dataset.valD || '';
+                 form.querySelector('[name="validity_h"]').value = row.dataset.valH || '';
+                 form.querySelector('[name="validity_m"]').value = row.dataset.valM || '';
+
+                 // Prices
+                 form.querySelector('[name="price"]').value = row.dataset.price || '';
+                 form.querySelector('[name="selling_price"]').value = row.dataset.sellingPrice || '';
+
+                 // Initial Toggle Check
+                 toggleValidity();
+             }
+        };
+
+        Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn, 'swal-wide');
+    }
 </script>
+
+<template id="profile-form-template">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 text-left">
+        <!-- Form Column -->
+        <div class="lg:col-span-2">
+            <form id="profile-form" action="/<?= htmlspecialchars($session) ?>/hotspot/profile/store" method="POST" class="space-y-4">
+                <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
+                <input type="hidden" name="id" id="form-id" disabled>
+
+                <!-- Name -->
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="common.name">Name</label>
+                    <input type="text" name="name" required class="w-full" data-i18n-placeholder="hotspot_profiles.form.name_placeholder" placeholder="e.g. 1Hour-Package">
+                </div>
+
+                <!-- Pools & Shared Users -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.address_pool">Address Pool</label>
+                        <select name="address-pool" class="w-full">
+                            <option value="none" data-i18n="common.forms.none">none</option>
+                            <?php foreach ($pools as $pool): ?>
+                                <?php if(isset($pool['name'])): ?>
+                                <option value="<?= htmlspecialchars($pool['name']) ?>"><?= htmlspecialchars($pool['name']) ?></option>
+                                <?php endif; ?>
+                            <?php endforeach; ?>
+                        </select>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.shared_users">Shared Users</label>
+                        <input type="number" name="shared-users" value="1" min="1" class="w-full" placeholder="1">
+                    </div>
+                </div>
+
+                <!-- Rate Limit & Parent Queue -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.rate_limit">Rate Limit (Rx/Tx)</label>
+                        <input type="text" name="rate-limit" class="w-full" data-i18n-placeholder="hotspot_profiles.form.rate_limit_help" placeholder="e.g. 512k/1M">
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.parent_queue">Parent Queue</label>
+                        <select name="parent-queue" class="w-full">
+                            <option value="none" data-i18n="common.forms.none">none</option>
+                            <?php foreach ($queues as $q): ?>
+                                <option value="<?= htmlspecialchars($q) ?>"><?= htmlspecialchars($q) ?></option>
+                            <?php endforeach; ?>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Expired Mode & Validity -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.expired_mode">Expired Mode</label>
+                        <select name="expired_mode" id="expired-mode" class="w-full">
+                            <option value="none" data-i18n="common.forms.none" selected>none</option>
+                            <option value="rem">Remove</option>
+                            <option value="ntf">Notice</option>
+                            <option value="remc">Remove & Record</option>
+                            <option value="ntfc">Notice & Record</option>
+                        </select>
+                    </div>
+                    <div id="validity-group" class="hidden space-y-1 transition-all">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.validity">Validity</label>
+                        <div class="flex w-full">
+                             <input type="number" name="validity_d" min="0" class="w-full text-center rounded-r-none border-r-0" placeholder="0D">
+                             <input type="number" name="validity_h" min="0" class="w-full text-center rounded-none border-r-0" placeholder="0H">
+                             <input type="number" name="validity_m" min="0" class="w-full text-center rounded-l-none" placeholder="0M">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Prices -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.price">Price (Rp)</label>
+                        <input type="number" name="price" class="w-full" placeholder="e.g. 5000">
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_profiles.form.selling_price">Selling Price (Rp)</label>
+                        <input type="number" name="selling_price" class="w-full" placeholder="e.g. 7000">
+                    </div>
+                </div>
+
+                <!-- Lock User -->
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="hotspot_profiles.form.lock_user">Lock User</label>
+                    <select name="lock_user" class="w-full">
+                        <option value="Disable" data-i18n="common.forms.disabled">Disable</option>
+                        <option value="Enable" data-i18n="common.forms.enabled">Enable</option>
+                    </select>
+                </div>
+                
+                <div class="h-12"></div> <!-- Spacer for selects -->
+            </form>
+        </div>
+
+        <!-- Tips Column -->
+        <div class="hidden lg:block space-y-4 border-l border-white/10 pl-6">
+            <h3 class="text-sm font-bold text-foreground flex items-center gap-2">
+                <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
+                <span data-i18n="hotspot_profiles.form.quick_tips">Quick Tips</span>
+            </h3>
+            <ul class="text-xs text-accents-5 space-y-3 list-disc pl-4">
+                <li data-i18n="hotspot_profiles.form.tip_rate_limit">
+                    <strong>Rate Limit</strong>: Rx/Tx (Upload/Download). Example: <code>512k/1M</code>
+                </li>
+                <li data-i18n="hotspot_profiles.form.tip_expired_mode">
+                    <strong>Expired Mode</strong>: Select 'Remove' or 'Notice' to enable Validity.
+                </li>
+                <li data-i18n="hotspot_profiles.form.tip_parent_queue">
+                    <strong>Parent Queue</strong>: Assigns users to a specific parent queue for bandwidth management.
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>

app/Views/hotspot/users/add.php

@@ -1,171 +0,0 @@
-<?php
-$title = "Add User";
-require_once ROOT . '/app/Views/layouts/header_main.php';
-?>
-
-<div class="max-w-5xl mx-auto">
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
-        <div>
-            <h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_users.form.add_title">Add User</h1>
-            <p class="text-accents-5" data-i18n="hotspot_users.form.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Generate a new voucher/user for session: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
-        </div>
-        <a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.back">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back to List
-        </a>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <div class="lg:col-span-2 space-y-6">
-            <div class="card p-6 border-accents-2 shadow-sm">
-                <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
-                    <div class="p-2 bg-primary/10 rounded-lg text-primary">
-                        <i data-lucide="user-plus" class="w-5 h-5"></i>
-                    </div>
-                    <span data-i18n="hotspot_users.form.subtitle">User Details</span>
-                </h3>
-                
-                <form action="/<?= htmlspecialchars($session) ?>/hotspot/store" method="POST" class="space-y-6">
-                    <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <!-- Name & Password -->
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.username">Name (Username)</label>
-                            <div class="relative group">
-                                <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                    <i data-lucide="user" class="w-4 h-4"></i>
-                                </span>
-                                <input type="text" name="name" required class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.username_placeholder" placeholder="e.g. voucher123">
-                            </div>
-                            <p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.username_help">Unique username for login.</p>
-                        </div>
-
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.password">Password</label>
-                            <div class="relative group">
-                                <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                    <i data-lucide="key" class="w-4 h-4"></i>
-                                </span>
-                                <input type="text" name="password" required class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.password_placeholder" placeholder="e.g. 123456">
-                            </div>
-                             <p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.password_help">Strong password for security.</p>
-                        </div>
-
-                        <!-- Profile -->
-                        <div class="space-y-2 col-span-1 md:col-span-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.profile">Profile</label>
-                             <!-- Searchable Dropdown -->
-                            <select name="profile" class="custom-select w-full" data-search="true">
-                                <?php foreach ($profiles as $profile): ?>
-                                    <?php if(!empty($profile['name'])): ?>
-                                        <option value="<?= htmlspecialchars($profile['name']) ?>"><?= htmlspecialchars($profile['name']) ?></option>
-                                    <?php endif; ?>
-                                <?php endforeach; ?>
-                            </select>
-                            <p class="text-xs text-accents-4 mt-1" data-i18n="hotspot_users.form.profile_help">Profile determines speed limit and shared user policy.</p>
-                        </div>
-
-                        <!-- Time Limit (Split) -->
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.time_limit">Time Limit</label>
-                            <div class="flex w-full">
-                                <!-- Day -->
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
-                                    <input type="number" name="timelimit_d" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <!-- Hour -->
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
-                                    <input type="number" name="timelimit_h" min="0" max="23" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                                <!-- Minute -->
-                                <div class="relative flex-1 group">
-                                    <span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
-                                    <input type="number" name="timelimit_m" min="0" max="59" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                                </div>
-                            </div>
-                            <p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.time_limit_help">Total allowed uptime (Days, Hours, Minutes).</p>
-                        </div>
-
-                        <!-- Data Limit (Unit) -->
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.data_limit">Data Limit</label>
-                            <div class="flex relative w-full">
-                                <div class="relative flex-grow z-0 focus-within:z-10">
-                                    <span class="absolute left-3 top-2.5 text-accents-6 z-10 transition-colors pointer-events-none">
-                                        <i data-lucide="database" class="w-4 h-4"></i>
-                                    </span>
-                                    <input type="number" name="datalimit_val" min="0" class="form-input w-full pl-10 rounded-r-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="0">
-                                </div>
-                                <div class="relative -ml-px w-24 z-0 focus-within:z-10">
-                                    <select name="datalimit_unit" class="custom-select form-input w-full rounded-l-none bg-accents-1 focus:ring-2 focus:ring-primary/20 cursor-pointer font-medium text-accents-6 text-center">
-                                        <option value="MB" selected>MB</option>
-                                        <option value="GB">GB</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.data_limit_help">Limit data usage (0 for unlimited).</p>
-                        </div>
-
-                        <!-- Comment -->
-                         <div class="space-y-2 col-span-1 md:col-span-2">
-                            <label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.comment">Comment</label>
-                             <div class="relative group">
-                                <span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
-                                    <i data-lucide="message-square" class="w-4 h-4"></i>
-                                </span>
-                                 <input type="text" name="comment" class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.comment_placeholder" placeholder="Optional note for this user">
-                            </div>
-                             <p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.comment_help">Additional notes or contact info.</p>
-                        </div>
-                    </div>
-
-                    <div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
-                        <a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
-                        <button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
-                            <i data-lucide="save" class="w-4 h-4 mr-2"></i>
-                            <span data-i18n="hotspot_users.form.save">Save User</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Quick Help / Info -->
-        <div class="space-y-6">
-            <div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
-                <h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_users.form.quick_tips">
-                    <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i> 
-                    Quick Tips
-                </h3>
-                <ul class="text-sm text-accents-5 space-y-3">
-                    <li class="flex gap-2">
-                        <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                        <span data-i18n="hotspot_users.form.tip_profiles"><strong>Profiles</strong> define the default speed limits, session timeout, and shared users policy.</span>
-                    </li>
-                    <li class="flex gap-2">
-                        <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                        <span data-i18n="hotspot_users.form.tip_time_limit"><strong>Time Limit</strong> is the total accumulated uptime allowed for this user.</span>
-                    </li>
-                    <li class="flex gap-2">
-                        <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
-                        <span data-i18n="hotspot_users.form.tip_data_limit"><strong>Data Limit</strong> will override the profile's data limit settings if specified here. Set to 0 to use profile default.</span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        // Initialize Custom Selects with Search
-        if (typeof CustomSelect !== 'undefined') {
-            document.querySelectorAll('.custom-select').forEach(select => {
-                new CustomSelect(select);
-            });
-        }
-    });
-</script>

app/Views/hotspot/users/edit.php

@@ -1,134 +0,0 @@
-<?php require_once ROOT . '/app/Views/layouts/header_main.php'; ?>
-<?php require_once ROOT . '/app/Views/layouts/sidebar_session.php'; ?>
-
-<!-- Content Inside max-w-7xl -->
-<!-- Header -->
-<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
-    <div>
-        <h1 class="text-2xl font-bold tracking-tight text-foreground" data-i18n="hotspot_users.form.edit_title">Edit Hotspot User</h1>
-        <p class="text-sm text-accents-5" data-i18n="hotspot_users.form.edit_subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($user['name']) ?>"}'>Update user details for: <span class="font-medium text-foreground"><?= htmlspecialchars($user['name']) ?></span></p>
-    </div>
-    <a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
-        <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-        Cancel
-    </a>
-</div>
-
-<div class="card bg-background border border-accents-2 rounded-lg shadow-sm">
-    <form action="/<?= htmlspecialchars($session) ?>/hotspot/update" method="POST" class="p-6 space-y-6">
-        <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
-        <input type="hidden" name="id" value="<?= htmlspecialchars($user['.id']) ?>">
-        
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Username -->
-            <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.username">Username</label>
-                <div class="relative">
-                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <i data-lucide="user" class="w-4 h-4 text-accents-4"></i>
-                    </div>
-                    <input type="text" name="name" class="form-input pl-10 w-full" 
-                           value="<?= htmlspecialchars($user['name'] ?? '') ?>" required>
-                </div>
-            </div>
-
-            <!-- Password -->
-            <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.password">Password</label>
-                <div class="relative">
-                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <i data-lucide="lock" class="w-4 h-4 text-accents-4"></i>
-                    </div>
-                    <input type="text" name="password" class="form-input pl-10 w-full"
-                           value="<?= htmlspecialchars($user['password'] ?? '') ?>">
-                </div>
-            </div>
-
-            <!-- Profile -->
-            <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.profile">Profile</label>
-                <select name="profile" class="custom-select w-full">
-                    <?php foreach ($profiles as $profile): ?>
-                        <option value="<?= htmlspecialchars($profile['name']) ?>" 
-                            <?= (isset($user['profile']) && $user['profile'] === $profile['name']) ? 'selected' : '' ?>>
-                            <?= htmlspecialchars($profile['name']) ?>
-                        </option>
-                    <?php endforeach; ?>
-                </select>
-            </div>
-
-            <!-- Server -->
-             <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.server">Server</label>
-                <select name="server" class="custom-select w-full">
-                    <option value="all" <?= (isset($user['server']) && $user['server'] === 'all') ? 'selected' : '' ?>>all</option>
-                    <!-- Ideally fetch servers like in generate, but keeping it simple for now -->
-                </select>
-            </div>
-
-            <!-- Time Limit -->
-            <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.time_limit">Time Limit</label>
-                <div class="flex w-full">
-                    <!-- Day -->
-                    <div class="relative flex-1 group">
-                        <span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">D</span>
-                        <input type="number" name="timelimit_d" value="<?= htmlspecialchars($user['time_d'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                    </div>
-                    <!-- Hour -->
-                    <div class="relative flex-1 group">
-                        <span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">H</span>
-                        <input type="number" name="timelimit_h" value="<?= htmlspecialchars($user['time_h'] ?? '') ?>" min="0" max="23" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                    </div>
-                    <!-- Minute -->
-                    <div class="relative flex-1 group">
-                        <span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">M</span>
-                        <input type="number" name="timelimit_m" value="<?= htmlspecialchars($user['time_m'] ?? '') ?>" min="0" max="59" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
-                    </div>
-                </div>
-            </div>
-
-            <!-- Data Limit -->
-            <div class="space-y-1">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.data_limit">Data Limit</label>
-                 <div class="flex relative w-full">
-                    <div class="relative flex-grow z-0 focus-within:z-10">
-                        <span class="absolute left-3 top-2.5 text-accents-4 transition-colors pointer-events-none">
-                            <i data-lucide="database" class="w-4 h-4"></i>
-                        </span>
-                        <input type="number" name="datalimit_val" value="<?= htmlspecialchars($user['data_val'] ?? '') ?>" min="0" class="form-input w-full pl-10 rounded-r-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="0">
-                    </div>
-                    <div class="relative -ml-px w-24 z-0 focus-within:z-10">
-                        <select name="datalimit_unit" class="custom-select form-input w-full rounded-l-none bg-accents-1 focus:ring-2 focus:ring-primary/20 cursor-pointer font-medium text-accents-6 text-center">
-                            <option value="MB" <?= ($user['data_unit'] ?? 'MB') === 'MB' ? 'selected' : '' ?>>MB</option>
-                            <option value="GB" <?= ($user['data_unit'] ?? 'MB') === 'GB' ? 'selected' : '' ?>>GB</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-            
-             <!-- Comment -->
-            <div class="space-y-1 col-span-2">
-                <label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.comment">Comment</label>
-                <div class="relative">
-                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <i data-lucide="message-square" class="w-4 h-4 text-accents-4"></i>
-                    </div>
-                    <input type="text" name="comment" class="form-input pl-10 w-full"
-                          value="<?= htmlspecialchars($user['comment'] ?? '') ?>">
-                </div>
-            </div>
-        </div>
-
-        <!-- Actions -->
-        <div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
-             <a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
-            <button type="submit" class="btn btn-primary">
-                <i data-lucide="save" class="w-4 h-4 mr-2"></i>
-                <span data-i18n="common.forms.save_changes">Save Changes</span>
-            </button>
-        </div>
-    </form>
-</div>
-
-<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>

app/Views/hotspot/users/users.php

@@ -15,6 +15,10 @@ if (!empty($users)) {
     }
 }
 sort($uniqueProfiles);
+
+// $servers is passed from controller
+if (!isset($servers)) $servers = [];
+
 sort($uniqueComments);
 ?>
 
@@ -27,9 +31,9 @@ sort($uniqueComments);
         <a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
             <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
         </a>
-        <a href="/<?= htmlspecialchars($session) ?>/hotspot/add" class="btn btn-primary">
+        <button onclick="openUserModal('add')" class="btn btn-primary">
             <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="hotspot_users.add_user">Add User</span>
-        </a>
+        </button>
     </div>
 </div>
 
@@ -107,13 +111,38 @@ sort($uniqueComments);
             <tbody id="table-body">
                 <?php if (!empty($users)): ?>
                     <?php foreach ($users as $user): ?>
+                    <?php
+                        // Helper to split time limit for editing (Simple parsing or raw passing)
+                        // Assuming time limit format from router is like 1d2h3m or just 1h
+                        // We will pass the raw string if we can't easily split, OR rely on a JS parser.
+                        // For now let's pass raw limit-uptime.
+                        
+                        // Just prepare some safe values
+                        $id = $user['.id'];
+                        $name = $user['name'] ?? '';
+                        $profile = $user['profile'] ?? 'default';
+                        $comment = $user['comment'] ?? '';
+                        $server = $user['server'] ?? 'all';
+                        $password = $user['password'] ?? '';
+                        
+                        // Limits
+                        $limitUptime = $user['limit-uptime'] ?? '';
+                        $limitBytes = $user['limit-bytes-total'] ?? '';
+                    ?>
                     <tr class="table-row-item" 
-                        data-name="<?= strtolower($user['name'] ?? '') ?>" 
-                        data-profile="<?= $user['profile'] ?? 'default' ?>" 
-                        data-comment="<?= htmlspecialchars($user['comment'] ?? '') ?>">
+                        data-id="<?= htmlspecialchars($id) ?>"
+                        data-name="<?= strtolower($name) ?>" 
+                        data-rawname="<?= htmlspecialchars($name) ?>"
+                        data-profile="<?= htmlspecialchars($profile) ?>" 
+                        data-comment="<?= htmlspecialchars($comment) ?>"
+                        data-comment-raw="<?= htmlspecialchars($comment) ?>"
+                        data-password="<?= htmlspecialchars($password) ?>"
+                        data-server="<?= htmlspecialchars($server) ?>"
+                        data-limit-uptime="<?= htmlspecialchars($limitUptime) ?>"
+                        data-limit-bytes-total="<?= htmlspecialchars($limitBytes) ?>">
                         
                         <td class="px-4 py-4">
-                            <input type="checkbox" name="selected_users[]" value="<?= htmlspecialchars($user['.id']) ?>" class="user-checkbox checkbox">
+                            <input type="checkbox" name="selected_users[]" value="<?= htmlspecialchars($id) ?>" class="user-checkbox checkbox">
                         </td>
                         <td>
                             <div class="flex items-center w-full">
@@ -122,19 +151,19 @@ sort($uniqueComments);
                                 </div>
                                 <div class="flex-1 min-w-0">
                                     <div class="flex items-center justify-between gap-4">
-                                        <div class="text-sm font-medium text-foreground truncate"><?= htmlspecialchars($user['name'] ?? '-') ?></div>
+                                        <div class="text-sm font-medium text-foreground truncate"><?= htmlspecialchars($name) ?></div>
                                         <?php 
                                             $status = \App\Helpers\HotspotHelper::getUserStatus($user);
                                             echo \App\Helpers\ViewHelper::badge($status);
                                         ?>
                                     </div>
-                                    <div class="text-xs text-accents-5"><?= htmlspecialchars($user['password'] ?? '******') ?></div>
+                                    <div class="text-xs text-accents-5"><?= htmlspecialchars($password) ?></div>
                                 </div>
                             </div>
                         </td>
                         <td>
                             <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
-                                <?= htmlspecialchars($user['profile'] ?? 'default') ?>
+                                <?= htmlspecialchars($profile) ?>
                             </span>
                         </td>
                         <td>
@@ -148,19 +177,19 @@ sort($uniqueComments);
                             </div>
                         </td>
                         <td>
-                            <div class="text-sm text-accents-5 italic"><?= htmlspecialchars($user['comment'] ?? '-') ?></div>
+                            <div class="text-sm text-accents-5 italic"><?= htmlspecialchars($comment) ?></div>
                         </td>
                         <td class="text-right text-sm font-medium">
                             <div class="flex items-center justify-end gap-2 table-actions-reveal">
-                                <button onclick="printUser('<?= htmlspecialchars($user['.id']) ?>')" class="btn-icon" title="Print">
+                                <button onclick="printUser('<?= htmlspecialchars($id) ?>')" class="btn-icon" title="Print">
                                     <i data-lucide="printer" class="w-4 h-4"></i>
                                 </button>
-                                <a href="/<?= htmlspecialchars($session) ?>/hotspot/user/edit/<?= urlencode($user['.id']) ?>" class="btn-icon inline-flex items-center justify-center" title="Edit">
+                                <button onclick="openUserModal('edit', this)" class="btn-icon inline-flex items-center justify-center" title="Edit">
                                     <i data-lucide="edit-2" class="w-4 h-4"></i>
-                                </a>
-                                <form action="/<?= htmlspecialchars($session) ?>/hotspot/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Delete User?', 'Are you sure you want to delete user <?= htmlspecialchars($user['name'] ?? '') ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
+                                </button>
+                                <form action="/<?= htmlspecialchars($session) ?>/hotspot/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Delete User?', 'Are you sure you want to delete user <?= htmlspecialchars($name) ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
                                     <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
-                                    <input type="hidden" name="id" value="<?= $user['.id'] ?>">
+                                    <input type="hidden" name="id" value="<?= $id ?>">
                                     <button type="submit" class="btn-icon-danger" title="Delete">
                                         <i data-lucide="trash-2" class="w-4 h-4"></i>
                                     </button>
@@ -188,6 +217,133 @@ sort($uniqueComments);
 </div>
 
 <?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
+<!-- Add/Edit User Template -->
+<template id="user-form-template">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 text-left">
+        <!-- Form Column -->
+        <div class="lg:col-span-2">
+            <form id="user-form" action="/<?= htmlspecialchars($session) ?>/hotspot/store" method="POST" class="space-y-4">
+                <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
+                <input type="hidden" name="id" id="form-id" disabled> <!-- Disabled for Add -->
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <!-- Name & Password -->
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.username">Username</label>
+                        <div class="input-group">
+                            <span class="input-icon"><i data-lucide="user" class="w-4 h-4"></i></span>
+                            <input type="text" name="name" required class="pl-10 w-full" data-i18n-placeholder="hotspot_users.form.username_placeholder" placeholder="e.g. voucher123">
+                        </div>
+                    </div>
+
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.password">Password</label>
+                        <div class="input-group">
+                            <span class="input-icon"><i data-lucide="key" class="w-4 h-4"></i></span>
+                            <input type="text" name="password" required class="pl-10 w-full" data-i18n-placeholder="hotspot_users.form.password_placeholder" placeholder="e.g. 123456">
+                        </div>
+                    </div>
+
+                     <!-- Profile -->
+                    <div class="space-y-1 col-span-1 md:col-span-2">
+                        <label class="form-label" data-i18n="hotspot_users.form.profile">Profile</label>
+                        <select name="profile" class="w-full" data-search="true">
+                            <?php foreach($uniqueProfiles as $p): ?>
+                                <option value="<?= htmlspecialchars($p) ?>"><?= htmlspecialchars($p) ?></option>
+                            <?php endforeach; ?>
+                        </select>
+                    </div>
+
+                    <!-- Server -->
+                     <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.server">Server</label>
+                        <select name="server" class="w-full">
+                            <option value="all">all</option>
+                            <?php 
+                            if (!empty($servers)):
+                                foreach($servers as $s): 
+                                    $sName = $s['name'] ?? '';
+                                    if ($sName === 'all' || empty($sName)) continue; 
+                            ?>
+                                <option value="<?= htmlspecialchars($sName) ?>"><?= htmlspecialchars($sName) ?></option>
+                            <?php 
+                                endforeach; 
+                            endif;
+                            ?>
+                        </select>
+                    </div>
+
+                    <!-- Comment -->
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.comment">Comment</label>
+                        <div class="input-group">
+                            <span class="input-icon"><i data-lucide="message-square" class="w-4 h-4"></i></span>
+                            <input type="text" name="comment" class="pl-10 w-full" placeholder="Optional note">
+                        </div>
+                    </div>
+                    
+                     <!-- Time Limit -->
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.time_limit">Time Limit</label>
+                        <div class="flex w-full">
+                            <div class="relative flex-1">
+                                <span class="absolute right-2 top-2 text-xs font-bold text-accents-4 pointer-events-none">D</span>
+                                <input type="number" name="timelimit_d" min="0" class="w-full pr-6 rounded-r-none border-r-0 text-center" placeholder="0">
+                            </div>
+                            <div class="relative flex-1">
+                                <span class="absolute right-2 top-2 text-xs font-bold text-accents-4 pointer-events-none">H</span>
+                                <input type="number" name="timelimit_h" min="0" max="23" class="w-full pr-6 rounded-none border-r-0 text-center" placeholder="0">
+                            </div>
+                            <div class="relative flex-1">
+                                <span class="absolute right-2 top-2 text-xs font-bold text-accents-4 pointer-events-none">M</span>
+                                <input type="number" name="timelimit_m" min="0" max="59" class="w-full pr-6 rounded-l-none text-center" placeholder="0">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Data Limit -->
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="hotspot_users.form.data_limit">Data Limit</label>
+                        <div class="flex relative w-full">
+                            <div class="relative flex-grow z-0">
+                                <span class="input-icon"><i data-lucide="database" class="w-4 h-4"></i></span>
+                                <input type="number" name="datalimit_val" min="0" class="form-input w-full pl-10 rounded-r-none" placeholder="0">
+                            </div>
+                            <div class="relative -ml-px w-20 z-0">
+                                <select name="datalimit_unit" class="w-full rounded-l-none bg-accents-1 text-center font-medium">
+                                    <option value="MB" selected>MB</option>
+                                    <option value="GB">GB</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Spacer for dropdowns -->
+                <div class="h-24"></div>
+            </form>
+        </div>
+
+        <!-- Tips Column -->
+        <div class="hidden lg:block space-y-4 border-l border-white/10 pl-6">
+            <h3 class="text-sm font-bold text-foreground flex items-center gap-2">
+                <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-400"></i>
+                <span data-i18n="hotspot_users.form.quick_tips">Quick Tips</span>
+            </h3>
+            <ul class="text-xs text-accents-5 space-y-3 list-disc pl-4">
+                <li data-i18n="hotspot_users.form.tip_profiles">
+                    <strong>Profiles</strong> define the default speed limits, session timeout, and shared users policy.
+                </li>
+                <li data-i18n="hotspot_users.form.tip_time_limit">
+                    <strong>Time Limit</strong> is the total accumulated uptime allowed for this user.
+                </li>
+                <li data-i18n="hotspot_users.form.tip_data_limit">
+                    <strong>Data Limit</strong> will override the profile's data limit settings if specified here. Set to 0 to use profile default.
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
 <script>
     class TableManager {
         constructor(rows, itemsPerPage = 10) {
@@ -244,9 +400,7 @@ sort($uniqueComments);
                 }
             });
             
-            // Custom Select Listener (Mutation Observer or custom event if we emitted one, 
-            // but for now relying on underlying SELECT change or custom-select class behavior)
-            // Since CustomSelect updates the original Select, we listen to change on original select
+            // Filters
             document.getElementById('filter-profile').addEventListener('change', (e) => {
                 this.filters.profile = e.target.value;
                 this.currentPage = 1;
@@ -258,11 +412,8 @@ sort($uniqueComments);
                 this.currentPage = 1;
                 this.update();
             });
-            
-            // Re-bind actions when external CustomSelect updates the select value
-            // CustomSelect triggers 'change' event on original select, so standard listener works!
 
-             // Listen for language change to update pagination text
+             // Listen for language change
              window.addEventListener('languageChanged', () => {
                 this.render();
             });
@@ -272,10 +423,10 @@ sort($uniqueComments);
             // Apply Filters
             this.filteredRows = this.allRows.filter(row => {
                 const name = row.dataset.name || '';
-                const comment = (row.dataset.comment || '').toLowerCase(); // dataset comment value
+                const comment = (row.dataset.comment || '').toLowerCase();
                 const profile = row.dataset.profile || '';
                 
-                // 1. Search (Name or Comment)
+                // 1. Search
                 if (this.filters.search) {
                      const matchName = name.includes(this.filters.search);
                      const matchComment = comment.includes(this.filters.search);
@@ -285,7 +436,7 @@ sort($uniqueComments);
                 // 2. Profile
                 if (this.filters.profile && profile !== this.filters.profile) return false;
                 
-                // 3. Comment (Exact match for dropdown)
+                // 3. Comment
                 if (this.filters.comment && row.dataset.comment !== this.filters.comment) return false;
                 
                 return true;
@@ -303,7 +454,7 @@ sort($uniqueComments);
             const start = (this.currentPage - 1) * this.itemsPerPage;
             const end = Math.min(start + this.itemsPerPage, total);
             
-            // Update Text (Use Translation)
+            // Update Text
             if (window.i18n) {
                 const text = window.i18n.t('common.table.showing', {
                     start: total === 0 ? 0 : start + 1,
@@ -312,9 +463,9 @@ sort($uniqueComments);
                 });
                 document.getElementById('pagination-text').textContent = text;
             } else {
-                 this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
-                 this.elements.endIdx.textContent = end;
-                 this.elements.totalCount.textContent = total;
+                 // Fallback
+                 const el = document.getElementById('pagination-text');
+                 el.innerHTML = `Showing <span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span> to <span class="font-medium text-foreground">${end}</span> of <span class="font-medium text-foreground">${total}</span> users`;
             }
             
             // Clear & Append Rows
@@ -332,118 +483,177 @@ sort($uniqueComments);
                 this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
             }
 
-            // Re-init Icons for new rows
-            if (typeof lucide !== 'undefined') {
-                lucide.createIcons();
-            }
+            // Re-init Icons
+            if (typeof lucide !== 'undefined') lucide.createIcons();
             
-            // Update Checkbox Logic (Select All should act on visible?)
-            // We usually reset "Select All" check when page changes
+            // Reset "Select All"
             document.getElementById('select-all').checked = false;
         }
     }
 
-    document.addEventListener('DOMContentLoaded', () => {
-        // Init Custom Selects
-        if (typeof CustomSelect !== 'undefined') {
-            document.querySelectorAll('.custom-select').forEach(select => {
-                new CustomSelect(select);
-            });
-        }
+    // --- Modal Logic ---
+    function openUserModal(mode, btn = null) {
+        const template = document.getElementById('user-form-template').innerHTML;
         
+        let title = window.i18n ? window.i18n.t('hotspot_users.add_user') : 'Add User';
+        let saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
+        
+        if (mode === 'edit') {
+            title = window.i18n ? window.i18n.t('hotspot_users.edit_user') : 'Edit User';
+            saveBtn = window.i18n ? window.i18n.t('common.forms.save_changes') : 'Save Changes';
+        }
+
+        const preConfirmFn = () => {
+             const form = Swal.getHtmlContainer().querySelector('form');
+             if(form.reportValidity()) {
+                 form.submit();
+                 return true;
+             }
+             return false;
+        };
+
+        const onOpenedFn = (popup) => {
+             const form = popup.querySelector('form');
+             
+             if (mode === 'edit' && btn) {
+                 const row = btn.closest('tr');
+                 
+                 form.action = "/<?= htmlspecialchars($session) ?>/hotspot/update";
+                 
+                 // Populate Hidden ID
+                 const idInput = form.querySelector('#form-id');
+                 idInput.disabled = false;
+                 idInput.value = row.dataset.id; // Ensure data-id is set on TR!
+
+                 // Populate Fields (Assuming data attributes or simple values)
+                 // NOTE: For full data (limits, etc), we might need to fetch OR put all in data attributes
+                 // Let's rely on data attributes for speed, but need to add them to TR first
+                 form.querySelector('[name="name"]').value = row.dataset.rawname || '';
+                 form.querySelector('[name="password"]').value = row.dataset.password || '';
+                 form.querySelector('[name="comment"]').value = row.dataset.commentRaw || '';
+                 
+                 // Selects
+                 const profileSel = form.querySelector('[name="profile"]');
+                 if(profileSel) profileSel.value = row.dataset.profile;
+                 
+                 const serverSel = form.querySelector('[name="server"]');
+                 if(serverSel) serverSel.value = row.dataset.server || 'all';
+
+                 // Limits (Parsing from data attributes)
+                 // Time Limit
+                 const tLimit = row.dataset.limitUptime || '';
+                 // Simple regex parsing for 1d2h3m (Mikrotik format)
+                 // This is complex to parse perfectly from string back to split fields without a helper
+                 // For now, let's just leave 0 or try best effort if available
+                 // Ideally, we pass split values in data attributes from PHP
+                 if (row.dataset.timeD) form.querySelector('[name="timelimit_d"]').value = row.dataset.timeD;
+                 if (row.dataset.timeH) form.querySelector('[name="timelimit_h"]').value = row.dataset.timeH;
+                 if (row.dataset.timeM) form.querySelector('[name="timelimit_m"]').value = row.dataset.timeM;
+
+                 // Data Limit
+                 if (row.dataset.limitBytesTotal) {
+                     const bytes = parseInt(row.dataset.limitBytesTotal);
+                     if (bytes > 0) {
+                         if (bytes >= 1073741824) { // GB
+                             form.querySelector('[name="datalimit_val"]').value = (bytes / 1073741824).toFixed(0); // integer prefer
+                             form.querySelector('[name="datalimit_unit"]').value = 'GB';
+                         } else { // MB
+                             form.querySelector('[name="datalimit_val"]').value = (bytes / 1048576).toFixed(0);
+                             form.querySelector('[name="datalimit_unit"]').value = 'MB';
+                         }
+                     }
+                 }
+             }
+        };
+
+        Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn, 'swal-wide');
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        // Init Checkboxes & Table methods
+        const selectAll = document.getElementById('select-all');
+        const toolbar = document.getElementById('batch-toolbar');
+        const countSpan = document.getElementById('selected-count');
+        const tableBody = document.getElementById('table-body');
+        
+        // Init Custom Selects on Filter Bar
+        if (typeof CustomSelect !== 'undefined') {
+            document.querySelectorAll('.custom-select.form-filter').forEach(s => new CustomSelect(s));
+        }
+
         // Init Table
         const rows = document.querySelectorAll('.table-row-item');
         const manager = new TableManager(rows, 10);
         
-        // --- Toolbar Logic (Copied/Adapted) ---
-        const selectAll = document.getElementById('select-all');
-        const toolbar = document.getElementById('batch-toolbar');
-        const countSpan = document.getElementById('selected-count');
-        const tableBody = document.getElementById('table-body'); // Dynamic body
-
+        // Toolbar Logic
         function updateToolbar() {
             const checked = document.querySelectorAll('.user-checkbox:checked');
             countSpan.textContent = checked.length;
-            
-            if (checked.length > 0) {
-                toolbar.classList.remove('translate-y-20', 'opacity-0');
-            } else {
-                toolbar.classList.add('translate-y-20', 'opacity-0');
-            }
+            if (checked.length > 0) toolbar.classList.remove('translate-y-20', 'opacity-0');
+            else toolbar.classList.add('translate-y-20', 'opacity-0');
         }
 
-        selectAll.addEventListener('change', (e) => {
-            const isChecked = e.target.checked;
-            // Only select visible rows on current page
-            const visibleCheckboxes = tableBody.querySelectorAll('.user-checkbox');
-            visibleCheckboxes.forEach(cb => cb.checked = isChecked);
-            updateToolbar();
-        });
-
-        // Event Delegation for dynamic rows
-        tableBody.addEventListener('change', (e) => {
-            if (e.target.classList.contains('user-checkbox')) {
+        if(selectAll) {
+            selectAll.addEventListener('change', (e) => {
+                const isChecked = e.target.checked;
+                // Only select visible rows
+                const visibleCheckboxes = tableBody.querySelectorAll('.user-checkbox');
+                visibleCheckboxes.forEach(cb => cb.checked = isChecked);
                 updateToolbar();
-                if (!e.target.checked) selectAll.checked = false;
-            }
-        });
+            });
+        }
+
+        if(tableBody) {
+             tableBody.addEventListener('change', (e) => {
+                if (e.target.classList.contains('user-checkbox')) {
+                    updateToolbar();
+                    if (!e.target.checked) selectAll.checked = false;
+                }
+            });
+        }
     });
-    
+
     // Actions
     function printUser(id) {
-        const width = 400;
-        const height = 600;
+        const width = 400; const height = 600;
         const left = (window.innerWidth - width) / 2;
         const top = (window.innerHeight - height) / 2;
         const session = '<?= htmlspecialchars($session) ?>';
-        const url = `/${session}/hotspot/print/${encodeURIComponent(id)}`;
-        window.open(url, `PrintUser`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
+        window.open(`/${session}/hotspot/print/${encodeURIComponent(id)}`, `PrintUser`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
     }
     
     function printSelected() {
         const selected = Array.from(document.querySelectorAll('.user-checkbox:checked')).map(cb => cb.value);
-        if (selected.length === 0) return alert(window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "No users selected.");
+        if (selected.length === 0) return Mivo.alert('info', 'No selection', window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "No users selected.");
         
-        const width = 800;
-        const height = 600;
+        const width = 800; const height = 600;
         const left = (window.innerWidth - width) / 2;
         const top = (window.innerHeight - height) / 2;
         const session = '<?= htmlspecialchars($session) ?>';
         const ids = selected.map(id => encodeURIComponent(id)).join(',');
-        const url = `/${session}/hotspot/print-batch?ids=${ids}`;
-        window.open(url, `PrintBatch`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
+        window.open(`/${session}/hotspot/print-batch?ids=${ids}`, `PrintBatch`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
     }
     
     function deleteSelected() {
         const selected = Array.from(document.querySelectorAll('.user-checkbox:checked')).map(cb => cb.value);
-        if (selected.length === 0) return alert(window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "Please select at least one user.");
+        if (selected.length === 0) return Mivo.alert('info', 'No selection', window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "Please select at least one user.");
         
         const title = window.i18n ? window.i18n.t('common.delete') : 'Delete Users?';
         const msg = window.i18n ? window.i18n.t('common.confirm_delete') : `Are you sure you want to delete ${selected.length} users?`;
         
         Mivo.confirm(title, msg, window.i18n.t('common.delete'), window.i18n.t('common.cancel')).then(res => {
             if (!res) return;
-
-            // Create a form to submit
             const form = document.createElement('form');
             form.method = 'POST';
-            form.action = '/<?= htmlspecialchars($session) ?>/hotspot/delete'; // Re-uses the delete endpoint
-            
-            const sessionInput = document.createElement('input');
-            sessionInput.type = 'hidden';
-            sessionInput.name = 'session';
-            sessionInput.value = '<?= htmlspecialchars($session) ?>';
-            form.appendChild(sessionInput);
-            
+            form.action = '/<?= htmlspecialchars($session) ?>/hotspot/delete'; 
+            const sInput = document.createElement('input');
+            sInput.type = 'hidden'; sInput.name = 'session'; sInput.value = '<?= htmlspecialchars($session) ?>';
+            form.appendChild(sInput);
             const idInput = document.createElement('input');
-            idInput.type = 'hidden';
-            idInput.name = 'id';
-            idInput.value = selected.join(','); // Comma separated IDs
+            idInput.type = 'hidden'; idInput.name = 'id'; idInput.value = selected.join(',');
             form.appendChild(idInput);
-            
             document.body.appendChild(form);
             form.submit();
-            document.body.removeChild(form);
         });
     }
 </script>

app/Views/layouts/footer_main.php

@@ -6,9 +6,26 @@
     <?php else: ?>
     </div> <!-- /.container (Navbar Global) -->
     
-    <footer class="border-t border-accents-2 bg-background mt-auto transition-colors duration-200">
-        <div class="max-w-7xl mx-auto px-4 py-6 text-center text-sm text-accents-5">
-            <p><?= \App\Config\SiteConfig::getFooter() ?></p>
+    <footer class="border-t border-accents-2 bg-background mt-auto transition-colors duration-200 py-8 text-center space-y-4">
+        <!-- Links Row -->
+        <div class="flex justify-center items-center gap-6 text-sm font-medium text-accents-5">
+            <a href="https://docs.mivo.dyzulk.com" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="book-open" class="w-4 h-4"></i>
+                <span>Docs</span>
+            </a>
+            <a href="https://github.com/dyzulk/mivo/issues" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="message-circle" class="w-4 h-4"></i>
+                <span>Community</span>
+            </a>
+            <a href="https://github.com/dyzulk/mivo" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="github" class="w-4 h-4"></i>
+                <span>Repo</span>
+            </a>
+        </div>
+
+        <!-- Copyright Row -->
+        <div class="text-xs text-accents-4 opacity-50">
+            <?= \App\Config\SiteConfig::getFooter() ?>
         </div>
     </footer>
     <?php endif; ?>
@@ -129,20 +146,67 @@
     </script>
     <script>
         // Global Dropdown & Sidebar Logic
+        let menuTimeout;
+
         function toggleMenu(menuId, button) {
+            if (menuTimeout) clearTimeout(menuTimeout);
+            
             const menu = document.getElementById(menuId);
             if (!menu) return;
             
-            // Handle Dropdowns (IDs start with 'lang-' or 'session-')
-            if (menuId.startsWith('lang-') || menuId === 'session-dropdown') {
-                if (menu.classList.contains('invisible')) {
+            // Handle Dropdowns (IDs start with 'lang-', 'session-', or is 'notification-')
+            if (menuId.startsWith('lang-') || menuId === 'session-dropdown' || menuId === 'notification-dropdown') {
+                const sidebarHeader = document.getElementById('sidebar-header');
+                const isOpening = menu.classList.contains('invisible');
+
+                if (isOpening) {
+                    // Smart Positioning Logic
+                    // 1. Reset to base state (remove specific overrides to measure natural/preferred state)
+                    // But we want to preserve 'absolute' etc. The HTML has 'left-1/2 -translate-x-1/2' by default for sidebar.
+                    // We'll calculate based on button rect and assumed menu width (w-48 = 12rem = 192px approx, or measure)
+                    
+                    const btnRect = button.getBoundingClientRect();
+                    const menuWidth = 192; // Approx w-48 standard. Better to measure if possible, but invisible elements have width.
+                    // Actually, if we make it visible but opacity-0 first, we can measure.
+                    // But simpler math:
+                    const centerX = btnRect.left + (btnRect.width / 2);
+                    const leftEdge = centerX - (menuWidth / 2);
+                    const rightEdge = centerX + (menuWidth / 2);
+                    
+                    // Remove conflicting positioning classes first to ensure a clean slate if we need to override
+                    menu.classList.remove('left-0', 'right-0', 'left-1/2', '-translate-x-1/2', 'origin-top-left', 'origin-top-right', 'origin-top', 'left-3');
+
+                    // Decision Tree
+                    if (leftEdge < 10) { 
+                        // overflow left -> Align Left
+                        menu.classList.add('left-0', 'origin-top-left');
+                    } else if (rightEdge > window.innerWidth - 10) { 
+                        // overflow right -> Align Right
+                        menu.classList.add('right-0', 'origin-top-right');
+                    } else {
+                        // Safe to Center
+                        menu.classList.add('left-1/2', '-translate-x-1/2', 'origin-top');
+                    }
+                    
                     // Open
                     menu.classList.remove('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
                     menu.classList.add('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
+                    
+                    // Special Case: Sidebar Lang Dropdown needs overflow visible on header
+                    if (menuId === 'lang-dropdown-sidebar' && sidebarHeader) {
+                        sidebarHeader.classList.remove('overflow-hidden');
+                        sidebarHeader.classList.add('overflow-visible');
+                    }
                 } else {
                     // Close
                     menu.classList.add('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
                     menu.classList.remove('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
+                    
+                    // Revert Overflow
+                    if (menuId === 'lang-dropdown-sidebar' && sidebarHeader) {
+                        sidebarHeader.classList.add('overflow-hidden');
+                        sidebarHeader.classList.remove('overflow-visible');
+                    }
                 }
                 return;
             }
@@ -175,20 +239,22 @@
 
         // Close dropdowns when clicking outside
         document.addEventListener('click', function(event) {
-            const dropdowns = document.querySelectorAll('[id^="lang-dropdown"], #session-dropdown');
+            const dropdowns = document.querySelectorAll('[id^="lang-dropdown"], #session-dropdown, #notification-dropdown');
             dropdowns.forEach(dropdown => {
+                const sidebarHeader = document.getElementById('sidebar-header');
+
                 if (!dropdown.classList.contains('invisible')) {
-                    // Find the trigger button (previous sibling usually)
-                    // Robust way: check if click is inside dropdown OR inside the button that toggles it
-                    // Since button calls toggleMenu, we just need to ignore clicks inside dropdown and button?
-                    // Actually, simpler: just check if click is OUTSIDE dropdown.
-                    // But if click is on button, let button handler toggle it (don't double toggle).
-                    
                     const button = document.querySelector(`button[onclick*="'${dropdown.id}'"]`);
                     
                     if (!dropdown.contains(event.target) && (!button || !button.contains(event.target))) {
                          dropdown.classList.add('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
                          dropdown.classList.remove('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
+
+                         // Revert Sidebar Overflow if needed
+                         if (dropdown.id === 'lang-dropdown-sidebar' && sidebarHeader) {
+                             sidebarHeader.classList.add('overflow-hidden');
+                             sidebarHeader.classList.remove('overflow-visible');
+                         }
                     }
                 }
             });
@@ -209,18 +275,36 @@
                 if (data.success) {
                     Mivo.toast('success', title.replace('?', ''), 'The command has been sent to the router.');
                 } else {
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'Action Failed',
-                        text: data.error || 'Unknown error occurred.',
-                        background: 'rgba(255, 255, 255, 0.8)',
-                        backdrop: 'rgba(0,0,0,0.1)'
-                    });
+                    Mivo.alert('error', 'Action Failed', data.error || 'Unknown error occurred.');
                 }
             } catch (err) {
                 Mivo.toast('error', 'Connection Error', 'Failed to reach the server.');
             }
         }
+
+        // Auto-Close Helper with Debounce
+        function closeMenu(menuId) {
+            if (menuTimeout) clearTimeout(menuTimeout);
+            
+            // Notification dropdown is more "sticky" (800ms vs 300ms elsewhere)
+            const delay = (menuId === 'notification-dropdown') ? 800 : 300;
+            
+            menuTimeout = setTimeout(() => {
+                const menu = document.getElementById(menuId);
+                const sidebarHeader = document.getElementById('sidebar-header');
+                
+                if (menu && !menu.classList.contains('invisible')) {
+                    menu.classList.add('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
+                    menu.classList.remove('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
+                    
+                    // Revert Overflow if needed
+                    if (menuId === 'lang-dropdown-sidebar' && sidebarHeader) {
+                        sidebarHeader.classList.add('overflow-hidden');
+                        sidebarHeader.classList.remove('overflow-visible');
+                    }
+                }
+            }, 300); // 300ms delay to prevent accidental closure
+        }
     </script>
 </body>
 </html>

app/Views/layouts/footer_public.php

@@ -1,5 +1,23 @@
-    <footer class="mt-auto py-6 text-center text-xs text-accents-5 opacity-60">
-        <?= \App\Config\SiteConfig::getFooter() ?>
+    <footer class="mt-auto py-8 text-center space-y-4">
+        <div class="flex justify-center items-center gap-6 text-sm font-medium text-accents-5">
+            <a href="https://docs.mivo.dyzulk.com" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="book-open" class="w-4 h-4"></i>
+                <span>Docs</span>
+            </a>
+            <a href="https://github.com/dyzulk/mivo/issues" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="message-circle" class="w-4 h-4"></i>
+                <span>Community</span>
+            </a>
+            <a href="https://github.com/dyzulk/mivo" target="_blank" class="hover:text-foreground transition-colors flex items-center gap-2">
+                <i data-lucide="github" class="w-4 h-4"></i>
+                <span>Repo</span>
+            </a>
+        </div>
+
+        <!-- Copyright Row -->
+        <div class="text-xs text-accents-4 opacity-50">
+            <?= \App\Config\SiteConfig::getFooter() ?>
+        </div>
     </footer>
 
     <script>
@@ -38,34 +56,17 @@
 
                     // Use Custom Toasts for most notifications (Success, Info, Error)
                     // Only use Modal (Swal) for specific heavy warnings or questions if needed
+                    // Use Toasts for standard notifications
                     if (['success', 'info', 'error', 'warning'].includes(type)) {
-                        // Assuming Mivo.toast is available globally or via another script check
                         if (window.Mivo && window.Mivo.toast) {
                              Mivo.toast(type, title, message);
-                        } else {
-                             console.log('Toast:', title, message);
                         }
                     } else {
-                        // Use Swal for 'question' or fallback
-                        if (typeof Swal !== 'undefined') {
-                            Swal.fire({
-                                iconHtml: `<i data-lucide="${config.icon}" class="w-12 h-12 ${config.color}"></i>`,
-                                title: title,
-                                text: message,
-                                confirmButtonText: 'OK',
-                                customClass: {
-                                    popup: 'swal2-premium-card',
-                                    confirmButton: 'btn btn-primary',
-                                    cancelButton: 'btn btn-secondary',
-                                },
-                                buttonsStyling: false,
-                                heightAuto: false,
-                                didOpen: () => {
-                                    lucide.createIcons();
-                                }
-                            });
-                        } else {
-                             alert(`${title}\n${message}`);
+                        // For questions or other types, use Modal Alert
+                        if (window.Mivo && window.Mivo.alert) {
+                            Mivo.alert(type || 'info', title, message);
+                        } else if (typeof Swal !== 'undefined') {
+                            Swal.fire(title, message, type);
                         }
                     }
                 };

app/Views/layouts/header_main.php

@@ -54,12 +54,16 @@ $title = isset($title) ? $title : \App\Config\SiteConfig::APP_NAME;
     </script>
     <script src="/assets/js/jquery.min.js"></script>
     <script src="/assets/js/lucide.min.js"></script>
-    <script src="/assets/js/custom-select.js" defer></script>
-    <script src="/assets/js/datatable.js" defer></script>
+    <script>
+        window.currentVersion = '<?= \App\Config\SiteConfig::APP_VERSION ?>';
+    </script>
+    <script src="/assets/js/mivo.js" defer></script>
+    <script src="/assets/js/modules/updater.js" defer></script>
+    <script src="/assets/js/components/select.js" defer></script>
+    <script src="/assets/js/components/datatable.js" defer></script>
     <script src="/assets/js/sweetalert2.all.min.js" defer></script>
-    <script src="/assets/js/alert-helper.js" defer></script>
-    <script src="/assets/js/i18n.js" defer></script>
-    <script src="/assets/js/i18n.js" defer></script>
+    <script src="/assets/js/modules/alert.js" defer></script>
+    <script src="/assets/js/modules/i18n.js" defer></script>
     
     <style>
         /* Global Form Input Style - Matches Vercel Design System */

app/Views/layouts/header_public.php

@@ -8,8 +8,9 @@
     <link rel="stylesheet" href="/assets/css/styles.css">
     <script src="/assets/js/lucide.min.js"></script>
     <script src="/assets/js/sweetalert2.all.min.js" defer></script>
-    <script src="/assets/js/alert-helper.js" defer></script>
-    <script src="/assets/js/i18n.js" defer></script>
+    <script src="/assets/js/mivo.js" defer></script>
+    <script src="/assets/js/modules/alert.js" defer></script>
+    <script src="/assets/js/modules/i18n.js" defer></script>
     <style>
         /* Custom Keyframes */
         @keyframes fade-in-up {
@@ -39,30 +40,126 @@
         <div class="absolute top-[30%] -right-[15%] w-[60vw] h-[60vw] rounded-full bg-purple-500/20 dark:bg-purple-500/5 blur-[100px] animate-pulse" style="animation-duration: 6s; animation-delay: 1s;"></div>
     </div>
 
-    <!-- Floating Theme Toggle (Bottom Right) -->
-    <button id="theme-toggle" class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-background border border-accents-2 shadow-lg text-accents-5 hover:text-foreground hover:border-foreground transition-all duration-300 group" style="position: fixed; bottom: 1.5rem; right: 1.5rem;">
-        <i data-lucide="moon" class="w-5 h-5 block dark:hidden group-hover:scale-110 transition-transform"></i>
-        <i data-lucide="sun" class="w-5 h-5 hidden dark:block group-hover:scale-110 transition-transform"></i>
-    </button>
+    <!-- Top Right Controls (Pill Theme Toggle & Lang Switcher) -->
+    <div class="fixed top-4 right-4 z-50 flex items-center space-x-3">
+         <!-- Language Switcher -->
+         <div class="relative group">
+            <button onclick="toggleMenu('lang-dropdown-public', this)" class="h-9 px-3 rounded-full bg-background/50 backdrop-blur-md border border-accents-2 hover:border-foreground/20 text-accents-5 hover:text-foreground transition-all flex items-center shadow-sm">
+                <i data-lucide="globe" class="w-4 h-4 mr-2"></i>
+                <span class="text-xs font-semibold uppercase tracking-wider" id="current-lang-label">EN</span>
+                <i data-lucide="chevron-down" class="w-3 h-3 ml-2 opacity-50"></i>
+            </button>
+            <!-- Dropdown -->
+            <div id="lang-dropdown-public" class="hidden absolute right-0 mt-2 w-32 bg-background/95 backdrop-blur-2xl border border-white/10 rounded-xl shadow-2xl py-1 z-50 transform origin-top-right transition-all duration-200" onmouseleave="closeMenu('lang-dropdown-public')">
+                <button onclick="changeLanguage('en')" class="w-full text-left px-4 py-2 text-xs font-medium text-accents-5 hover:text-foreground hover:bg-white/5 flex items-center group">
+                    <span class="mr-2 text-lg">🇺🇸</span> English
+                </button>
+                <button onclick="changeLanguage('id')" class="w-full text-left px-4 py-2 text-xs font-medium text-accents-5 hover:text-foreground hover:bg-white/5 flex items-center group">
+                    <span class="mr-2 text-lg">🇮🇩</span> Indonesia
+                </button>
+            </div>
+        </div>
+
+        <!-- Theme Toggle Pill -->
+        <div class="h-9 p-1 bg-accents-2/50 backdrop-blur-md border border-accents-2 rounded-full flex items-center relative" id="theme-pill">
+            <!-- Gliding Background -->
+            <div class="absolute top-1 bottom-1 w-[calc(50%-4px)] bg-background rounded-full shadow-sm transition-all duration-300 ease-spring" id="theme-glider" style="left: 4px;"></div>
+            
+            <button onclick="setTheme('light')" class="relative z-10 w-8 h-full flex items-center justify-center text-accents-5 hover:text-foreground transition-colors rounded-full" id="btn-light">
+                <i data-lucide="sun" class="w-4 h-4"></i>
+            </button>
+            <button onclick="setTheme('dark')" class="relative z-10 w-8 h-full flex items-center justify-center text-accents-5 hover:text-foreground transition-colors rounded-full" id="btn-dark">
+                <i data-lucide="moon" class="w-4 h-4"></i>
+            </button>
+        </div>
+    </div>
 
     <script>
+        // Toggle Menu Helper (Reuse or define for public if main footer not loaded)
+        // Public footer includes site config footer, but maybe not main JS.
+        // Let's define simple toggle for public page to be safe and independent.
+        function toggleMenu(id, btn) {
+            const el = document.getElementById(id);
+            if (!el) return;
+            const isHidden = el.classList.contains('hidden');
+            
+            // Close others if needed (optional)
+            
+            if (isHidden) {
+                el.classList.remove('hidden', 'scale-95', 'opacity-0');
+                el.classList.add('scale-100', 'opacity-100');
+            } else {
+                closeMenu(id);
+            }
+        }
+
+        function closeMenu(id) {
+            const el = document.getElementById(id);
+            if (el && !el.classList.contains('hidden')) {
+                el.classList.remove('scale-100', 'opacity-100');
+                el.classList.add('hidden', 'scale-95', 'opacity-0');
+            }
+        }
+    
         document.addEventListener('DOMContentLoaded', () => {
             lucide.createIcons();
 
-            // Theme Toggle Logic
-            const themeToggleBtn = document.getElementById('theme-toggle');
+            // Theme Logic
+            const glider = document.getElementById('theme-glider');
+            const btnLight = document.getElementById('btn-light');
+            const btnDark = document.getElementById('btn-dark');
             const htmlElement = document.documentElement;
 
-            if(themeToggleBtn){
-                themeToggleBtn.addEventListener('click', () => {
-                    if (htmlElement.classList.contains('dark')) {
-                        htmlElement.classList.remove('dark');
-                        localStorage.theme = 'light';
-                    } else {
-                        htmlElement.classList.add('dark');
-                        localStorage.theme = 'dark';
-                    }
-                });
+            window.setTheme = (theme) => {
+                if (theme === 'dark') {
+                    htmlElement.classList.add('dark');
+                    localStorage.theme = 'dark';
+                    glider.style.transform = 'translateX(100%)'; 
+                    // adjustment: logic depends on width. 
+                    // container is w-8+w-8+padding. 
+                    // simplest is just left/right toggle classes or transform.
+                    // using transform translateX(100%) works if width is exactly 50% parent minus padding.
+                    // padding is 1 (4px). buttons are w-8 (32px).
+                    // let's use explicit left style or class-based positioning if easier.
+                    // Tailwind 'translate-x-full' moves 100% of own width.
+                    // If glider is w-[calc(50%-4px)], moving 100% of itself is almost correct but includes gap.
+                    // Let's rely on simple pixel math or percentage relative to parent?
+                    // actually `left: 4px` vs `left: calc(100% - width - 4px)`.
+                    glider.style.left = 'auto';
+                    glider.style.right = '4px';
+                } else {
+                    htmlElement.classList.remove('dark');
+                    localStorage.theme = 'light';
+                    glider.style.right = 'auto';
+                    glider.style.left = '4px';
+                }
+                
+                // Update Active Colors
+                if (theme === 'dark') {
+                    btnDark.classList.add('text-foreground');
+                    btnLight.classList.remove('text-foreground');
+                } else {
+                    btnLight.classList.add('text-foreground');
+                    btnDark.classList.remove('text-foreground');
+                }
+            };
+
+            // Init
+            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                setTheme('dark');
+            } else {
+                setTheme('light');
             }
+
+            // Language Init (Mock)
+            const currentLang = localStorage.getItem('mivo_lang') || 'en';
+            const langLabel = document.getElementById('current-lang-label');
+            if(langLabel) langLabel.innerText = currentLang.toUpperCase();
+            
+            window.changeLanguage = (lang) => {
+                 localStorage.setItem('mivo_lang', lang);
+                 // Reload or use i18n module to reload
+                 location.reload(); 
+            };
         });
     </script>

app/Views/layouts/navbar_main.php

@@ -15,28 +15,46 @@ $uri = $_SERVER['REQUEST_URI'] ?? '/';
                 </a>
 
                 <!-- Desktop Navigation Links (Hidden on Mobile) -->
+                <?php if(isset($_SESSION['user_id'])): ?>
                 <div class="hidden md:flex items-center gap-6 text-sm font-medium">
                     <a href="/" class="relative py-1 <?= ($uri == '/' || $uri == '/home') ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-foreground' : 'text-accents-5 hover:text-foreground transition-colors' ?>">Home</a>
                     <a href="/settings" class="relative py-1 <?= (strpos($uri, '/settings') === 0) ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-foreground' : 'text-accents-5 hover:text-foreground transition-colors' ?>">Settings</a>
                 </div>
+                <?php endif; ?>
             </div>
             
             <!-- Right side controls -->
             <div class="flex items-center gap-3">
                 <!-- Desktop Control Pill (Hidden on Mobile) -->
                 <div class="hidden md:flex control-pill scale-95 hover:scale-100 transition-transform">
-                    <!-- Language Switcher -->
-                    <div class="relative group">
-                        <button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-nav', this)" title="Change Language">
-                             <i data-lucide="languages" class="w-4 h-4 !text-black dark:!text-white" stroke-width="2.5"></i>
+                    <!-- Notification Bell -->
+                    <div class="relative group" onmouseleave="closeMenu('notification-dropdown')">
+                        <button id="notification-bell" type="button" class="pill-lang-btn relative" onclick="toggleMenu('notification-dropdown', this)" title="Notifications">
+                             <i data-lucide="bell" class="w-4 h-4"></i>
+                             <span id="update-badge" class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full hidden animate-pulse"></span>
                         </button>
-                         <div id="lang-dropdown-nav" class="absolute right-0 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50">
+                        <div id="notification-dropdown" class="absolute right-0 top-full mt-3 w-64 bg-background/95 backdrop-blur-2xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50 dropdown-bridge">
+                            <div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="notifications.title">Notifications</div>
+                            <div id="notification-content" class="p-4 text-sm text-accents-5 text-center" data-i18n="notifications.empty">
+                                No new notifications
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="pill-divider"></div>
+
+                    <!-- Language Switcher -->
+                    <div class="relative group" onmouseleave="closeMenu('lang-dropdown-desktop')">
+                        <button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-desktop', this)" title="Change Language">
+                             <i data-lucide="languages" class="w-4 h-4"></i>
+                        </button>
+                         <div id="lang-dropdown-desktop" class="absolute right-0 top-full mt-3 w-48 bg-background/95 backdrop-blur-2xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50 dropdown-bridge">
                             <div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
                             <?php 
                             $languages = \App\Helpers\LanguageHelper::getAvailableLanguages();
                             foreach ($languages as $lang): 
                             ?>
-                            <button onclick="changeLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang">
+                            <button onclick="Mivo.modules.I18n.loadLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang">
                                 <span class="fi fi-<?= $lang['flag'] ?> rounded-sm shadow-sm transition-transform group-hover/lang:scale-110"></span>
                                 <span><?= $lang['name'] ?></span>
                             </button>
@@ -44,8 +62,6 @@ $uri = $_SERVER['REQUEST_URI'] ?? '/';
                         </div>
                     </div>
 
-                    <div class="pill-divider"></div>
-
                     <!-- Theme Toggle (Segmented) -->
                     <div class="segmented-switch theme-toggle" title="Toggle Theme">
                         <div class="segmented-switch-slider"></div>
@@ -88,6 +104,7 @@ $uri = $_SERVER['REQUEST_URI'] ?? '/';
     <div id="mobile-navbar-menu" class="md:hidden border-t border-accents-2 bg-background/95 backdrop-blur-xl transition-all duration-300 ease-in-out max-h-0 opacity-0 invisible overflow-hidden">
         <div class="px-4 pt-4 pb-6 space-y-4">
             <!-- Nav Links -->
+            <?php if(isset($_SESSION['user_id'])): ?>
             <div class="flex flex-col gap-1">
                 <a href="/" class="flex items-center gap-3 px-4 py-3 rounded-xl <?= ($uri == '/' || $uri == '/home') ? 'bg-foreground/5 text-foreground font-bold' : 'text-accents-5 hover:bg-accents-1' ?>">
                     <i data-lucide="home" class="w-5 h-5 !text-black dark:!text-white" stroke-width="2.5"></i>
@@ -98,6 +115,7 @@ $uri = $_SERVER['REQUEST_URI'] ?? '/';
                     <span>Settings</span>
                 </a>
             </div>
+            <?php endif; ?>
 
             <!-- Mobile Controls Overlay -->
             <div class="p-4 rounded-2xl bg-accents-1/50 border border-accents-2 space-y-4">

app/Views/layouts/sidebar_session.php

@@ -3,7 +3,7 @@
 $uri = $_SERVER['REQUEST_URI'] ?? '/';
 $isDashboard = strpos($uri, '/dashboard') !== false;
 $isGenerate = strpos($uri, '/hotspot/generate') !== false;
-$isTemplates = strpos($uri, '/settings/templates') !== false;
+$isTemplates = strpos($uri, '/settings/voucher-templates') !== false;
 $isSettings = ($uri === '/settings' || strpos($uri, '/settings/') !== false) && !$isTemplates;
 
 // Hotspot Group Active Check
@@ -106,7 +106,7 @@ $getInitials = function($name) {
     <aside id="sidebar" class="w-64 flex-shrink-0 border-r border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-[40px] fixed md:static inset-y-0 left-0 z-40 transform -translate-x-full md:translate-x-0 transition-transform duration-200 flex flex-col h-full">
         <!-- Sidebar Header -->
         <!-- Sidebar Header -->
-        <div class="group flex flex-col items-center py-5 border-b border-accents-2 flex-shrink-0 relative cursor-default overflow-hidden">
+        <div id="sidebar-header" class="group flex flex-col items-center py-5 border-b border-accents-2 flex-shrink-0 relative cursor-default overflow-hidden">
             <div class="relative w-full h-10 flex items-center justify-center">
                 <!-- Brand (Slides out to the Left) -->
                 <div class="flex items-center gap-2 font-bold text-2xl tracking-tighter transition-all duration-500 ease-in-out group-hover:-translate-x-full group-hover:opacity-0">
@@ -119,17 +119,19 @@ $getInitials = function($name) {
                 <div class="absolute inset-0 hidden md:flex items-center justify-center transition-all duration-500 ease-in-out translate-x-full opacity-0 group-hover:translate-x-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto z-10">
                     <div class="control-pill scale-90 transition-transform hover:scale-100 shadow-lg bg-white/10 dark:bg-black/20 backdrop-blur-md">
                         <!-- Language Switcher -->
-                        <div class="relative group/lang">
+                        <!-- Language Switcher (Mivo Component) -->
+                        <!-- Language Switcher -->
+                        <div class="relative group/lang" onmouseleave="closeMenu('lang-dropdown-sidebar')">
                             <button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-sidebar', this)" title="Change Language">
                                 <i data-lucide="languages" class="w-4 h-4 !text-black dark:!text-white" stroke-width="2.5"></i>
                             </button>
-                            <div id="lang-dropdown-sidebar" class="absolute left-1/2 -translate-x-1/2 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none z-50">
+                            <div id="lang-dropdown-sidebar" class="absolute left-1/2 -translate-x-1/2 top-full mt-3 w-48 bg-background/95 backdrop-blur-2xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none z-50 dropdown-bridge" onmouseenter="if(typeof menuTimeout !== 'undefined') clearTimeout(menuTimeout)">
                                 <div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
                                 <?php 
                                 $languages = \App\Helpers\LanguageHelper::getAvailableLanguages();
                                 foreach ($languages as $lang): 
                                 ?>
-                                <button onclick="changeLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang-item">
+                                <button onclick="Mivo.modules.I18n.loadLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang-item">
                                     <span class="fi fi-<?= $lang['flag'] ?> rounded-sm shadow-sm transition-transform group-hover/lang-item:scale-110"></span>
                                     <span><?= $lang['name'] ?></span>
                                 </button>
@@ -163,7 +165,7 @@ $getInitials = function($name) {
         <div class="flex-1 overflow-y-auto" style="direction: rtl;">
             <div class="py-4 px-3 space-y-1" style="direction: ltr;">
             <!-- Session Switcher -->
-            <div class="px-3 mb-6 relative">
+            <div class="px-3 mb-6 relative" onmouseleave="closeMenu('session-dropdown')">
                 <button type="button" class="w-full group grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-2.5 rounded-xl bg-white/50 dark:bg-white/5 border border-accents-2 dark:border-white/10 hover:bg-white/80 dark:hover:bg-white/10 transition-all decoration-0 overflow-hidden shadow-sm" onclick="toggleMenu('session-dropdown', this)">
                     <!-- Initials -->
                     <div class="h-8 w-8 rounded-lg bg-accents-2/50 group-hover:bg-accents-2 flex items-center justify-center text-xs font-bold text-accents-6 group-hover:text-foreground transition-colors flex-shrink-0">
@@ -185,7 +187,7 @@ $getInitials = function($name) {
                 </button>
 
                 <!-- Dropdown -->
-                <div id="session-dropdown" class="absolute top-full left-3 w-[calc(100%-1.5rem)] z-50 mt-1 bg-background border border-accents-2 rounded-lg shadow-lg overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none">
+                <div id="session-dropdown" class="absolute top-full left-3 w-[calc(100%-1.5rem)] z-50 mt-1 bg-background border border-accents-2 rounded-lg shadow-lg overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none dropdown-bridge" onmouseenter="if(typeof menuTimeout !== 'undefined') clearTimeout(menuTimeout)">
                     <div class="py-1 max-h-60 overflow-y-auto">
                         <div class="px-3 py-2 text-xs font-semibold text-accents-5 uppercase tracking-wider bg-accents-1/50 border-b border-accents-2" data-i18n="sidebar.switch_session">
                             Switch Session
@@ -377,11 +379,37 @@ $getInitials = function($name) {
             </a>
 
             <!-- Voucher Templates -->
-            <a href="/settings/templates" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= $isTemplates ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
+            <a href="/settings/voucher-templates" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= $isTemplates ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
                  <i data-lucide="file-code" class="w-4 h-4"></i>
                  <span data-i18n="sidebar.templates">Templates</span>
             </a>
 
+            <!-- Support Separator -->
+            <div class="pt-4 pb-1 px-3">
+                <div class="text-xs font-semibold text-accents-5 uppercase tracking-wider" data-i18n="sidebar.support">Support</div>
+            </div>
+
+            <!-- Docs -->
+            <a href="https://docs.mivo.dyzulk.com" target="_blank" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-6 hover:text-foreground hover:bg-white/5">
+                 <i data-lucide="book-open" class="w-4 h-4"></i>
+                 <span data-i18n="sidebar.docs">Documentation</span>
+                 <i data-lucide="external-link" class="w-3 h-3 ml-auto opacity-50"></i>
+            </a>
+
+            <!-- Community -->
+            <a href="https://github.com/dyzulk/mivo/issues" target="_blank" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-6 hover:text-foreground hover:bg-white/5">
+                 <i data-lucide="message-circle" class="w-4 h-4"></i>
+                 <span data-i18n="sidebar.community">Community</span>
+                 <i data-lucide="external-link" class="w-3 h-3 ml-auto opacity-50"></i>
+            </a>
+
+            <!-- Repo -->
+            <a href="https://github.com/dyzulk/mivo" target="_blank" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-6 hover:text-foreground hover:bg-white/5">
+                 <i data-lucide="github" class="w-4 h-4"></i>
+                 <span data-i18n="sidebar.repo">Repository</span>
+                 <i data-lucide="external-link" class="w-3 h-3 ml-auto opacity-50"></i>
+            </a>
+
         </div>
 
         <!-- Sidebar Footer -->
@@ -435,7 +463,7 @@ $getInitials = function($name) {
                         <button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-mobile', this)" title="Change Language">
                              <i data-lucide="languages" class="w-4 h-4"></i>
                         </button>
-                         <div id="lang-dropdown-mobile" class="absolute right-0 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50">
+                         <div id="lang-dropdown-mobile" class="absolute right-0 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50 dropdown-bridge" onmouseenter="if(typeof menuTimeout !== 'undefined') clearTimeout(menuTimeout)">
                             <div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
                             <?php 
                             $languages = \App\Helpers\LanguageHelper::getAvailableLanguages();

app/Views/layouts/sidebar_settings.php

@@ -11,7 +11,7 @@ function isActive($path, $current) {
 $menu = [
     ['label' => 'routers_title', 'url' => '/settings', 'namespace' => 'settings'],
     ['label' => 'system', 'url' => '/settings/system', 'namespace' => 'settings'],
-    ['label' => 'templates_title', 'url' => '/settings/templates', 'namespace' => 'settings'],
+    ['label' => 'templates_title', 'url' => '/settings/voucher-templates', 'namespace' => 'settings'],
     ['label' => 'logos_title', 'url' => '/settings/logos', 'namespace' => 'settings'],
     ['label' => 'api_cors_title', 'url' => '/settings/api-cors', 'namespace' => 'settings'],
 ];

app/Views/public/status.php

@@ -35,7 +35,7 @@
                                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
                                     <i data-lucide="ticket" class="h-4 w-4 text-accents-5"></i>
                                 </div>
-                                <input type="text" id="voucher-code" class="form-input pl-10 h-11 text-lg font-mono tracking-wide" placeholder="Ex: QWASZX" required autofocus autocomplete="off">
+                                <input type="text" id="voucher-code" class="form-input pl-10 h-11 text-lg font-mono tracking-wide" placeholder="Ex: QWASZX" data-i18n="status.code_placeholder" required autofocus autocomplete="off">
                             </div>
                         </div>
                         
@@ -55,13 +55,6 @@
 
     <!-- Logic Script -->
     <script>
-        // Initialize Input placeholder
-        document.addEventListener('DOMContentLoaded', () => {
-             const inp = document.getElementById('voucher-code');
-             if(inp && window.i18n) {
-                  inp.placeholder = window.i18n.t('status.code_placeholder');
-             }
-        });
 
         async function checkStatus(e) {
             e.preventDefault();
@@ -110,7 +103,7 @@
                             <!-- Header -->
                             <div class="relative p-5 md:p-6 border-b border-white/10 flex justify-between items-center bg-white/10 dark:bg-black/20">
                                 <div>
-                                    <span class="text-[10px] text-accents-5 font-bold uppercase tracking-widest block mb-0.5">Voucher Code</span>
+                                    <span class="text-[10px] text-accents-5 font-bold uppercase tracking-widest block mb-0.5">${window.i18n.t('status.code')}</span>
                                     <span class="font-mono text-xl md:text-2xl font-black tracking-tighter text-foreground">${d.username}</span>
                                 </div>
                                 <div class="px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.15em] border ${statusColor} shadow-sm backdrop-blur-sm bg-opacity-80">
@@ -121,7 +114,7 @@
                             <!-- Data Usage Bar -->
                             <div class="relative p-5 md:p-6 pb-2">
                                 <div class="flex justify-between items-end mb-2">
-                                    <span class="text-xs font-bold text-accents-5 uppercase tracking-wide">Data Remaining</span>
+                                    <span class="text-xs font-bold text-accents-5 uppercase tracking-wide">${window.i18n.t('status.data_remaining')}</span>
                                     <span class="text-lg font-black text-blue-600 dark:text-blue-400 font-mono tracking-tight">${d.data_left}</span>
                                 </div>
                                 <div class="w-full h-2.5 bg-accents-2 rounded-full overflow-hidden shadow-inner ring-1 ring-black/5 dark:ring-white/5">
@@ -130,7 +123,7 @@
                                     </div> 
                                 </div>
                                 <div class="text-right mt-1.5">
-                                     <span class="text-[10px] font-semibold text-accents-4 uppercase tracking-wider">Used: <span class="text-foreground">${d.data_used}</span></span>
+                                     <span class="text-[10px] font-semibold text-accents-4 uppercase tracking-wider">${window.i18n.t('status.used')}: <span class="text-foreground">${d.data_used}</span></span>
                                 </div>
                             </div>
 
@@ -139,19 +132,19 @@
                                 <table class="w-full text-sm text-left">
                                     <tbody class="divide-y divide-white/10">
                                         <tr>
-                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Package</td>
+                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">${window.i18n.t('status.package')}</td>
                                             <td class="py-3 text-right font-bold text-foreground font-mono">${d.profile}</td>
                                         </tr>
                                         <tr>
-                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Validity</td>
+                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">${window.i18n.t('status.validity')}</td>
                                             <td class="py-3 text-right font-bold text-foreground font-mono">${d.validity}</td>
                                         </tr>
                                         <tr>
-                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Uptime</td>
+                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">${window.i18n.t('status.uptime')}</td>
                                             <td class="py-3 text-right font-medium text-foreground font-mono">${d.uptime_used}</td>
                                         </tr>
                                         <tr>
-                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Expires</td>
+                                            <td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">${window.i18n.t('status.expires')}</td>
                                             <td class="py-3 text-right font-medium text-foreground font-mono">${d.expiration}</td>
                                         </tr>
                                     </tbody>
@@ -160,44 +153,32 @@
                         </div>
                     `;
 
-                    Swal.fire({
-                        title: 'Voucher Details',
-                        html: htmlContent,
-                        icon: 'success', // Using success icon for positive result
-                        confirmButtonText: 'OK',
-                        customClass: {
-                            popup: 'swal2-premium-card w-full max-w-md', // Ensure good width
-                            confirmButton: 'btn btn-primary w-full',
-                        },
-                        buttonsStyling: false
+                    Mivo.alert('success', window.i18n.t('status.details_title'), htmlContent, {
+                        customClass: { popup: 'w-full max-w-md' } // Override width only, others merged
                     });
 
                 } else {
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'Voucher Not Found',
-                        text: json.message || "The voucher code you entered does not exist.",
-                        confirmButtonText: 'Try Again',
-                        customClass: {
-                            popup: 'swal2-premium-card',
-                            confirmButton: 'btn btn-primary',
-                        },
-                        buttonsStyling: false,
-                        didClose: () => {
-                             setTimeout(() => {
-                                 const el = document.getElementById('voucher-code');
-                                 if(el) { el.focus(); el.select(); }
-                             }, 100);
+                    Mivo.alert('error', 
+                        window.i18n.t('status.not_found_title'), 
+                        json.message && json.message !== 'Voucher Not Found' ? json.message : window.i18n.t('status.not_found_desc'),
+                        {
+                            confirmButtonText: window.i18n.t('status.try_again'),
+                            didClose: () => {
+                                 setTimeout(() => {
+                                     const el = document.getElementById('voucher-code');
+                                     if(el) { el.focus(); el.select(); }
+                                 }, 100);
+                            }
                         }
-                    });
+                    );
                 }
 
             } catch (err) {
                 console.error(err);
                 Swal.fire({
                     icon: 'error',
-                    title: 'System Error',
-                    text: 'Unable to connect to the server.',
+                    title: window.i18n.t('errors.500_title'),
+                    text: window.i18n.t('errors.500_desc'),
                     confirmButtonText: 'Close',
                     customClass: {
                         popup: 'swal2-premium-card',

app/Views/quick_print/list.php

@@ -54,8 +54,18 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                 <?php else: ?>
                     <?php foreach ($packages as $pkg): ?>
                     <tr class="table-row-item group"
-                        data-name="<?= strtolower($pkg['name']) ?>"
-                        data-price="<?= $pkg['price'] ?>">
+                        data-id="<?= htmlspecialchars($pkg['id']) ?>"
+                        data-name="<?= htmlspecialchars($pkg['name']) ?>"
+                        data-profile="<?= htmlspecialchars($pkg['profile']) ?>"
+                        data-prefix="<?= htmlspecialchars($pkg['prefix']) ?>"
+                        data-price="<?= htmlspecialchars($pkg['price']) ?>"
+                        data-selling-price="<?= htmlspecialchars($pkg['selling_price'] ?? $pkg['price']) ?>"
+                        data-time-limit="<?= htmlspecialchars($pkg['time_limit']) ?>"
+                        data-data-limit="<?= htmlspecialchars($pkg['data_limit']) ?>"
+                        data-char-length="<?= htmlspecialchars($pkg['char_length']) ?>"
+                        data-color="<?= htmlspecialchars($pkg['color']) ?>"
+                        data-comment="<?= htmlspecialchars($pkg['comment']) ?>">
+                        
                         <td class="font-medium text-foreground">
                             <div class="flex items-center gap-2">
                                 <div class="w-3 h-3 rounded-full <?= htmlspecialchars($pkg['color']) ?>"></div>
@@ -76,7 +86,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                                         <i data-lucide="trash-2" class="w-4 h-4"></i>
                                     </button>
                                 </form>
-                                 <button type="button" class="btn-icon" title="Edit">
+                                 <button type="button" onclick="openModal('edit', this)" class="btn-icon" title="Edit">
                                     <i data-lucide="edit-3" class="w-4 h-4"></i>
                                 </button>
                             </div>
@@ -101,96 +111,84 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
     </div>
 </div>
 
-<!-- Add/Edit Modal -->
-<div id="modal-overlay" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center opacity-0 transition-opacity duration-200">
-<div id="modal-content" class="card w-full max-w-lg mx-4 transform scale-95 transition-transform duration-200 overflow-hidden p-0">
-        <div class="flex items-center justify-between px-6 py-4 border-b border-accents-2 bg-accents-1/30">
-            <h3 class="text-lg font-bold text-foreground" id="modal-title" data-i18n="quick_print.add_package">Add Package</h3>
-            <button onclick="closeModal()" class="text-accents-5 hover:text-foreground">
-                <i data-lucide="x" class="w-5 h-5"></i>
-            </button>
-        </div>
+<!-- Template for Add/Edit Package Form -->
+<template id="package-form-template">
+    <form id="qp-form" action="/<?= htmlspecialchars($session) ?>/quick-print/store" method="POST" class="space-y-4 text-left">
+         <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
+         <!-- Hidden ID for Edit Mode (will be disabled/removed for Add) -->
+         <input type="hidden" name="id" id="form-id" disabled> 
         
-        <form action="/<?= htmlspecialchars($session) ?>/quick-print/store" method="POST" class="p-6 space-y-4">
-             <input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
+        <!-- Quick Inputs Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="col-span-1 md:col-span-2">
+                <label class="form-label" data-i18n="quick_print.package_name">Package Name</label>
+                <input type="text" name="name" required class="w-full" placeholder="e.g. 3 Hours Voucher">
+            </div>
             
-            <!-- Quick Inputs Grid -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div class="col-span-1 md:col-span-2">
-                    <label class="form-label" data-i18n="quick_print.package_name">Package Name</label>
-                    <input type="text" name="name" required class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-accents-3" placeholder="e.g. 3 Hours Voucher">
-                </div>
-                
-                <div>
-                     <label class="form-label" data-i18n="quick_print.select_profile">Select Profile</label>
-                     <select name="profile" class="custom-select w-full" data-search="true">
-                        <?php foreach($profiles as $p): ?>
-                            <option value="<?= htmlspecialchars($p['name']) ?>"><?= htmlspecialchars($p['name']) ?></option>
-                        <?php endforeach; ?>
-                     </select>
-                </div>
-
-                 <div>
-                    <label class="form-label" data-i18n="quick_print.card_color">Card Color</label>
-                    <select name="color" class="custom-select w-full">
-                        <option value="bg-blue-500" data-i18n="colors.blue">Blue</option>
-                        <option value="bg-red-500" data-i18n="colors.red">Red</option>
-                        <option value="bg-green-500" data-i18n="colors.green">Green</option>
-                        <option value="bg-yellow-500" data-i18n="colors.yellow">Yellow</option>
-                        <option value="bg-purple-500" data-i18n="colors.purple">Purple</option>
-                        <option value="bg-pink-500" data-i18n="colors.pink">Pink</option>
-                        <option value="bg-indigo-500" data-i18n="colors.indigo">Indigo</option>
-                        <option value="bg-gray-800" data-i18n="colors.dark">Dark</option>
-                    </select>
-                </div>
-
-                <div>
-                    <label class="form-label" data-i18n="quick_print.price">Price (Rp)</label>
-                    <input type="number" name="price" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="5000">
-                </div>
-
-                 <div>
-                    <label class="form-label" data-i18n="quick_print.selling_price">Selling Price</label>
-                    <input type="number" name="selling_price" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Default same">
-                </div>
-
-                <div>
-                    <label class="form-label" data-i18n="quick_print.prefix">Prefix</label>
-                    <input type="text" name="prefix" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Example: VIP-">
-                </div>
-
-                <div>
-                    <label class="form-label" data-i18n="quick_print.char_length">Char Length</label>
-                    <select name="char_length" class="custom-select w-full">
-                        <option value="4" selected data-i18n="common.char_length" data-i18n-params='{"n": 4}'>4 Characters</option>
-                        <option value="6" data-i18n="common.char_length" data-i18n-params='{"n": 6}'>6 Characters</option>
-                        <option value="8" data-i18n="common.char_length" data-i18n-params='{"n": 8}'>8 Characters</option>
-                    </select>
-                </div>
-                
-                 <div>
-                    <label class="form-label" data-i18n="quick_print.time_limit">Time Limit</label>
-                    <input type="text" name="time_limit" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="3h">
-                </div>
-
-                 <div>
-                    <label class="form-label" data-i18n="quick_print.data_limit">Data Limit</label>
-                     <input type="text" name="data_limit" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="500M (Optional)">
-                </div>
-
-                 <div class="col-span-1 md:col-span-2">
-                    <label class="form-label" data-i18n="system_tools.comment">Comment</label>
-                    <input type="text" name="comment" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Description or Note">
-                </div>
+            <div>
+                 <label class="form-label" data-i18n="quick_print.select_profile">Select Profile</label>
+                 <select name="profile" class="w-full" data-search="true">
+                    <?php foreach($profiles as $p): ?>
+                        <option value="<?= htmlspecialchars($p['name']) ?>"><?= htmlspecialchars($p['name']) ?></option>
+                    <?php endforeach; ?>
+                 </select>
             </div>
 
-            <div class="flex justify-end gap-3 pt-4 border-t border-accents-2 mt-4">
-                <button type="button" onclick="closeModal()" class="btn btn-secondary" data-i18n="common.cancel">Cancel</button>
-                <button type="submit" class="btn btn-primary" data-i18n="quick_print.save_package">Save Package</button>
+             <div>
+                <label class="form-label" data-i18n="quick_print.card_color">Card Color</label>
+                <select name="color" class="w-full">
+                    <option value="bg-blue-500" data-i18n="colors.blue">Blue</option>
+                    <option value="bg-red-500" data-i18n="colors.red">Red</option>
+                    <option value="bg-green-500" data-i18n="colors.green">Green</option>
+                    <option value="bg-yellow-500" data-i18n="colors.yellow">Yellow</option>
+                    <option value="bg-purple-500" data-i18n="colors.purple">Purple</option>
+                    <option value="bg-pink-500" data-i18n="colors.pink">Pink</option>
+                    <option value="bg-indigo-500" data-i18n="colors.indigo">Indigo</option>
+                    <option value="bg-gray-800" data-i18n="colors.dark">Dark</option>
+                </select>
             </div>
-        </form>
-    </div>
-</div>
+
+            <div>
+                <label class="form-label" data-i18n="quick_print.price">Price (Rp)</label>
+                <input type="number" name="price" class="w-full" placeholder="5000">
+            </div>
+
+             <div>
+                <label class="form-label" data-i18n="quick_print.selling_price">Selling Price</label>
+                <input type="number" name="selling_price" class="w-full" placeholder="Default same">
+            </div>
+
+            <div>
+                <label class="form-label" data-i18n="quick_print.prefix">Prefix</label>
+                <input type="text" name="prefix" class="w-full" placeholder="Example: VIP-">
+            </div>
+
+            <div>
+                <label class="form-label" data-i18n="quick_print.char_length">Char Length</label>
+                <select name="char_length" class="w-full">
+                    <option value="4" selected data-i18n="common.char_length" data-i18n-params='{"n": 4}'>4 Characters</option>
+                    <option value="6" data-i18n="common.char_length" data-i18n-params='{"n": 6}'>6 Characters</option>
+                    <option value="8" data-i18n="common.char_length" data-i18n-params='{"n": 8}'>8 Characters</option>
+                </select>
+            </div>
+            
+             <div>
+                <label class="form-label" data-i18n="quick_print.time_limit">Time Limit</label>
+                <input type="text" name="time_limit" class="w-full" placeholder="3h">
+            </div>
+
+             <div>
+                <label class="form-label" data-i18n="quick_print.data_limit">Data Limit</label>
+                 <input type="text" name="data_limit" class="w-full" placeholder="500M (Optional)">
+            </div>
+
+             <div class="col-span-1 md:col-span-2">
+                <label class="form-label" data-i18n="system_tools.comment">Comment</label>
+                <input type="text" name="comment" class="w-full" placeholder="Description or Note">
+            </div>
+        </div>
+    </form>
+</template>
 
 <script>
     class TableManager {
@@ -298,27 +296,63 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
         }
     }
 
-    const overlay = document.getElementById('modal-overlay');
-    const content = document.getElementById('modal-content');
+    function openModal(mode, btn = null) {
+        const template = document.getElementById('package-form-template').innerHTML;
+        
+        let title = window.i18n ? window.i18n.t('quick_print.add_package') : 'Add Package';
+        let saveBtn = window.i18n ? window.i18n.t('quick_print.save_package') : 'Save Package';
+        
+        // Validation Callback
+        const preConfirmFn = () => {
+             const form = Swal.getHtmlContainer().querySelector('form');
+             if(form.reportValidity()) {
+                 form.submit();
+             } else {
+                 return false;
+             }
+        };
 
-    function openModal(mode) {
-        overlay.classList.remove('hidden');
-        // Trigger reflow
-        void overlay.offsetWidth;
-        
-        overlay.classList.remove('opacity-0');
-        content.classList.add('open');
-        
-        if (typeof lucide !== 'undefined') lucide.createIcons();
-    }
+        // Population Callback (Runs BEFORE CustomSelect init)
+        const onOpenedFn = (popup) => {
+             if (mode === 'edit' && btn) {
+                 const row = btn.closest('tr');
+                 const form = popup.querySelector('form');
+                 
+                 // Update Route Logic Here if needed, or rely on Hidden ID
+                 // For now backend handles update if ID is present
+                 form.action = "/<?= htmlspecialchars($session) ?>/quick-print/update"; 
 
-    function closeModal() {
-        overlay.classList.add('opacity-0');
-        content.classList.remove('open');
+                 // Populate inputs
+                 form.querySelector('[name="id"]').value = row.dataset.id;
+                 form.querySelector('[name="id"]').disabled = false; 
+                 
+                 form.querySelector('[name="name"]').value = row.dataset.name;
+                 form.querySelector('[name="price"]').value = row.dataset.price;
+                 form.querySelector('[name="selling_price"]').value = row.dataset.sellingPrice;
+                 form.querySelector('[name="prefix"]').value = row.dataset.prefix;
+                 form.querySelector('[name="time_limit"]').value = row.dataset.timeLimit;
+                 form.querySelector('[name="data_limit"]').value = row.dataset.dataLimit;
+                 form.querySelector('[name="comment"]').value = row.dataset.comment;
+                 
+                 // Selects (Just setting value works because CustomSelect hasn't init yet!)
+                 const profileSel = form.querySelector('[name="profile"]');
+                 if(profileSel) profileSel.value = row.dataset.profile;
+                 
+                 const colorSel = form.querySelector('[name="color"]');
+                 if(colorSel) colorSel.value = row.dataset.color;
+                 
+                 const charSel = form.querySelector('[name="char_length"]');
+                 if(charSel) charSel.value = row.dataset.charLength;
+             }
+        };
+
+        if (mode === 'edit' && btn) {
+            title = window.i18n ? 'Edit Package' : 'Edit Package';
+            saveBtn = window.i18n ? 'Update Package' : 'Update Package';
+        }
         
-        setTimeout(() => {
-            overlay.classList.add('hidden');
-        }, 300);
+        // Pass callbacks to helper
+        Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn);
     }
     
     document.addEventListener('DOMContentLoaded', () => {

app/Views/settings/api_cors.php

@@ -21,7 +21,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                  <!-- Spacer -->
             </div>
             <div class="flex gap-2 w-full md:w-auto">
-                <button onclick="openModal('addModal')" class="btn btn-primary w-full md:w-auto">
+                <button onclick="openCorsModal()" class="btn btn-primary w-full md:w-auto">
                     <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="settings.add_rule">Add CORS Rule</span>
                 </button>
             </div>
@@ -40,7 +40,12 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                 <tbody id="table-body">
                     <?php if (!empty($rules)): ?>
                         <?php foreach ($rules as $rule): ?>
-                        <tr class="table-row-item">
+                        <tr class="table-row-item" 
+                            data-rule-id="<?= $rule['id'] ?>"
+                            data-origin="<?= htmlspecialchars($rule['origin']) ?>"
+                            data-headers="<?= htmlspecialchars(implode(', ', $rule['headers_arr'])) ?>"
+                            data-max-age="<?= $rule['max_age'] ?>"
+                            data-methods='<?= json_encode($rule['methods_arr']) ?>'>
                             <td>
                                 <div class="text-sm font-medium text-foreground"><?= htmlspecialchars($rule['origin']) ?></div>
                                 <div class="text-xs text-accents-4">Max Age: <?= $rule['max_age'] ?>s</div>
@@ -57,7 +62,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                             </td>
                             <td class="text-right text-sm font-medium">
                                 <div class="flex items-center justify-end gap-2 table-actions-reveal">
-                                    <button onclick="editRule(<?= htmlspecialchars(json_encode($rule)) ?>)" class="btn-icon" title="Edit">
+                                    <button onclick="openCorsModal(this.closest('tr'))" class="btn-icon" title="Edit">
                                         <i data-lucide="edit-2" class="w-4 h-4"></i>
                                     </button>
                                     <form action="/settings/api-cors/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('settings.cors_rule_deleted') : 'Delete CORS Rule?', 'Are you sure you want to delete the CORS rule for <?= htmlspecialchars($rule['origin']) ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
@@ -85,136 +90,71 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
         </div>
     </div>
 
-<!-- Add Modal -->
-<div id="addModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
-    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('addModal')"></div>
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
-        <div class="card shadow-2xl">
-            <div class="flex items-center justify-between mb-6">
-                <h3 class="text-lg font-bold" data-i18n="settings.add_rule">Add CORS Rule</h3>
-                <button onclick="closeModal('addModal')" class="text-accents-5 hover:text-foreground">
-                    <i data-lucide="x" class="w-5 h-5"></i>
-                </button>
-            </div>
-            <form action="/settings/api-cors/store" method="POST" class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
-                    <input type="text" name="origin" class="form-control" placeholder="https://example.com or *" required>
-                    <p class="text-xs text-orange-500 dark:text-orange-400 mt-1 font-medium">Use * for all origins (not recommended for production).</p>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
-                    <div class="grid grid-cols-3 gap-2">
-                        <?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
-                        <label class="flex items-center space-x-2 cursor-pointer">
-                            <input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox" <?= in_array($m, ['GET', 'POST']) ? 'checked' : '' ?>>
-                            <span class="text-sm"><?= $m ?></span>
-                        </label>
-                        <?php endforeach; ?>
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
-                    <input type="text" name="headers" class="form-control" value="*" placeholder="Content-Type, Authorization, *">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
-                    <input type="number" name="max_age" class="form-control" value="3600">
-                </div>
-                <div class="flex justify-end pt-4">
-                    <button type="button" onclick="closeModal('addModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
-                    <button type="submit" class="btn btn-primary" data-i18n="common.save">Save</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Edit Modal -->
-<div id="editModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
-    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('editModal')"></div>
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
-        <div class="card shadow-2xl">
-            <div class="flex items-center justify-between mb-6">
-                <h3 class="text-lg font-bold" data-i18n="settings.edit_rule">Edit CORS Rule</h3>
-                <button onclick="closeModal('editModal')" class="text-accents-5 hover:text-foreground">
-                    <i data-lucide="x" class="w-5 h-5"></i>
-                </button>
-            </div>
-            <form action="/settings/api-cors/update" method="POST" class="space-y-4">
-                <input type="hidden" name="id" id="edit_id">
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
-                    <input type="text" name="origin" id="edit_origin" class="form-control" required>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
-                    <div class="grid grid-cols-3 gap-2" id="edit_methods_container">
-                        <?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
-                        <label class="flex items-center space-x-2 cursor-pointer">
-                            <input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox edit-method-check" data-method="<?= $m ?>">
-                            <span class="text-sm"><?= $m ?></span>
-                        </label>
-                        <?php endforeach; ?>
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
-                    <input type="text" name="headers" id="edit_headers" class="form-control">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
-                    <input type="number" name="max_age" id="edit_max_age" class="form-control">
-                </div>
-                <div class="flex justify-end pt-4">
-                    <button type="button" onclick="closeModal('editModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
-                    <button type="submit" class="btn btn-primary" data-i18n="common.save">Save Changes</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
 <script>
-function openModal(id) {
-    const modal = document.getElementById(id);
-    const content = modal.querySelector('.modal-content');
-    modal.classList.remove('hidden');
-    
-    // Use double requestAnimationFrame to ensure the browser has painted the hidden->block change
-    // before we trigger the opacity/transform transitions.
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-            modal.classList.remove('opacity-0');
-            content.classList.remove('scale-95', 'opacity-0');
-            content.classList.add('scale-100', 'opacity-100');
-        });
-    });
-}
+    async function openCorsModal(row = null) {
+        const isEdit = !!row;
+        const title = isEdit ? (window.i18n ? window.i18n.t('settings.edit_rule') : 'Edit CORS Rule') : (window.i18n ? window.i18n.t('settings.add_rule') : 'Add CORS Rule');
+        const template = document.getElementById('cors-form-template').innerHTML;
+        const saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
 
-function closeModal(id) {
-    const modal = document.getElementById(id);
-    const content = modal.querySelector('.modal-content');
-    modal.classList.add('opacity-0');
-    content.classList.remove('scale-100', 'opacity-100');
-    content.classList.add('scale-95', 'opacity-0');
-    setTimeout(() => { modal.classList.add('hidden'); }, 300);
-}
+        const preConfirmFn = () => {
+            const form = document.getElementById('cors-form');
+            if (!form.checkValidity()) {
+                form.reportValidity();
+                return false;
+            }
+            form.submit();
+            return true;
+        };
 
-function editRule(rule) {
-    document.getElementById('edit_id').value = rule.id;
-    document.getElementById('edit_origin').value = rule.origin;
-    document.getElementById('edit_headers').value = rule.headers_arr.join(', ');
-    document.getElementById('edit_max_age').value = rule.max_age;
-    
-    // Clear and check checkboxes
-    const methods = rule.methods_arr;
-    document.querySelectorAll('.edit-method-check').forEach(cb => {
-        cb.checked = methods.includes(cb.dataset.method);
-    });
-    
-    openModal('editModal');
-}
+        const onOpenedFn = (popup) => {
+            const form = popup.querySelector('#cors-form');
+            if (isEdit) {
+                form.action = '/settings/api-cors/update';
+                form.querySelector('[name="id"]').value = row.dataset.ruleId;
+                form.querySelector('[name="origin"]').value = row.dataset.origin;
+                form.querySelector('[name="headers"]').value = row.dataset.headers;
+                form.querySelector('[name="max_age"]').value = row.dataset.maxAge;
+                
+                const methods = JSON.parse(row.dataset.methods || '[]');
+                form.querySelectorAll('[name="methods[]"]').forEach(cb => {
+                    cb.checked = methods.includes(cb.value);
+                });
+            }
+        };
+
+        Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn);
+    }
 </script>
 
+<template id="cors-form-template">
+    <form action="/settings/api-cors/store" method="POST" id="cors-form" class="space-y-4 text-left">
+        <input type="hidden" name="id">
+        <div>
+            <label class="form-label" data-i18n="settings.origin">Origin</label>
+            <input type="text" name="origin" class="w-full" placeholder="https://example.com or *" required>
+            <p class="text-[10px] text-orange-500 dark:text-orange-400 mt-1 font-medium">Use * for all origins (not recommended for production).</p>
+        </div>
+        <div>
+            <label class="form-label" data-i18n="settings.methods">Allowed Methods</label>
+            <div class="grid grid-cols-3 gap-2">
+                <?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="methods[]" value="<?= $m ?>" class="checkbox" <?= in_array($m, ['GET', 'POST']) ? 'checked' : '' ?>>
+                    <span class="text-sm font-medium"><?= $m ?></span>
+                </label>
+                <?php endforeach; ?>
+            </div>
+        </div>
+        <div>
+            <label class="form-label" data-i18n="settings.headers">Allowed Headers</label>
+            <input type="text" name="headers" class="w-full" value="*" placeholder="Content-Type, Authorization, *">
+        </div>
+        <div>
+            <label class="form-label" data-i18n="settings.max_age">Max Age (seconds)</label>
+            <input type="number" name="max_age" class="w-full" value="3600">
+        </div>
+    </form>
+</template>
+
 <?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>

app/Views/settings/form.php

@@ -1,123 +0,0 @@
-<?php
-// Use $router variable instead of $session to avoid conflict with header.php logic
-$router = $router ?? null;
-$title = $router ? "Edit Router" : "Add Router";
-require_once ROOT . '/app/Views/layouts/header_main.php';
-
-// Safe access helper
-$val = function($key) use ($router) {
-    return isset($router) && isset($router[$key]) ? htmlspecialchars($router[$key]) : '';
-};
-?>
-
-<div class="w-full max-w-5xl mx-auto mb-16">
-    <div class="mb-8">
-        <a href="/settings/routers" class="inline-flex items-center text-sm text-accents-5 hover:text-foreground transition-colors mb-4">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back to Settings
-        </a>
-        <h1 class="text-2xl font-bold tracking-tight"><?= $title ?></h1>
-        <p class="text-accents-5">Connect Mikhmon to your RouterOS device.</p>
-    </div>
-
-    <form autocomplete="off" method="post" action="<?= isset($router) ? '/settings/update' : '/settings/store' ?>">
-        <?php if(isset($router)): ?>
-            <input type="hidden" name="id" value="<?= $router['id'] ?>">
-        <?php endif; ?>
-        
-            <div class="card p-6 md:p-8 space-y-6">
-                <div>
-                    <h2 class="text-base font-semibold mb-4">Session Settings</h2>
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium">Session Name</label>
-                            <input class="form-control w-full" type="text" name="sessname" id="sessname" placeholder="e.g. router-jakarta-1" value="<?= $val('session_name') ?>" required/>
-                            <p class="text-xs text-accents-4">Unique ID. Preview: <span id="sessname-preview" class="font-mono text-primary font-bold">...</span></p>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <input type="checkbox" id="quick_access" name="quick_access" class="checkbox" <?= (isset($router['quick_access']) && $router['quick_access'] == 1) ? 'checked' : '' ?> value="1">
-                            <label for="quick_access" class="text-sm font-medium cursor-pointer select-none">Show in Quick Access (Home Page)</label>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-t border-accents-2 pt-6">
-                    <h2 class="text-base font-semibold mb-4">Connection Details</h2>
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium">IP Address</label>
-                            <input class="form-control w-full" type="text" name="ipmik" placeholder="192.168.88.1" value="<?= $val('ip_address') ?>" required/>
-                        </div>
-                        
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-2">
-                                <label class="text-sm font-medium">Username</label>
-                                <input class="form-control w-full" type="text" name="usermik" placeholder="admin" value="<?= $val('username') ?>" required/>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-sm font-medium">Password</label>
-                                <input class="form-control w-full" type="password" name="passmik" <?= isset($router) ? '' : 'required' ?> />
-                                <?php if(isset($router)): ?>
-                                <p class="text-xs text-accents-4">Leave empty to keep existing password.</p>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-t border-accents-2 pt-6">
-                    <h2 class="text-base font-semibold mb-4">Hotspot Information</h2>
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium">Hotspot Name</label>
-                            <input class="form-control w-full" type="text" name="hotspotname" placeholder="My Hotspot ID" value="<?= $val('hotspot_name') ?>" required/>
-                        </div>
-                        
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="space-y-2">
-                                <label class="text-sm font-medium">DNS Name</label>
-                                <input class="form-control w-full" type="text" name="dnsname" placeholder="hotspot.net" value="<?= $val('dns_name') ?>" required/>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-sm font-medium">Traffic Interface</label>
-                                <div class="flex w-full gap-2">
-                                    <div class="flex-grow">
-                                        <select class="custom-select w-full" name="iface" id="iface" data-search="true" required>
-                                            <option value="<?= $val('interface') ?: 'ether1' ?>"><?= $val('interface') ?: 'ether1' ?></option>
-                                        </select>
-                                    </div>
-                                    <button type="button" id="check-interface-btn" class="btn btn-secondary whitespace-nowrap" title="Check connection and fetch interfaces">
-                                        <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Check
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                             <div class="space-y-2">
-                                <label class="text-sm font-medium">Currency</label>
-                                <input class="form-control w-full" type="text" name="currency" value="<?= $val('currency') ?: 'Rp' ?>" required/>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-sm font-medium">Auto Reload (Sec)</label>
-                                <input class="form-control w-full" type="number" min="10" name="areload" value="<?= $val('reload_interval') ?: 10 ?>" required/>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            <div class="pt-6 flex justify-end gap-3">
-                <a href="/settings/routers" class="btn btn-secondary">Cancel</a>
-                <button type="submit" class="btn btn-secondary" name="action" value="save">
-                    Save
-                </button>
-                <button type="submit" class="btn btn-primary" name="action" value="connect">
-                    Save & Connect
-                </button>
-            </div>
-        </div>
-    </form>
-</div>
-
-<script src="/assets/js/router-form.js"></script>
-
-<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>

app/Views/settings/index.php

@@ -22,9 +22,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                 <div class="hidden md:block">
                      <!-- Spacer or Breadcrumbs if needed -->
                 </div>
-                <a href="/settings/add" class="btn btn-primary w-full md:w-auto">
-                    <i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add Router
-                </a>
+                <button onclick="openRouterModal('add')" class="btn btn-primary w-full md:w-auto">
+                    <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Add Router</span>
+                </button>
             </div>
 
             <?php if (empty($routers)): ?>
@@ -34,9 +34,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                     </div>
                     <h3 class="text-lg font-medium mb-2">No routers configured</h3>
                     <p class="text-accents-5 mb-6 max-w-sm mx-auto">Connect your first MikroTik router to start managing hotspots and vouchers.</p>
-                    <a href="/settings/add" class="btn btn-primary">
-                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> Connect Router
-                    </a>
+                    <button onclick="openRouterModal('add')" class="btn btn-primary">
+                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Connect Router</span>
+                    </button>
                 </div>
             <?php else: ?>
                 <div class="table-container">
@@ -53,7 +53,17 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                         </thead>
                         <tbody>
                             <?php foreach ($routers as $router): ?>
-                            <tr>
+                            <tr class="router-row"
+                                data-id="<?= $router['id'] ?>"
+                                data-sessname="<?= htmlspecialchars($router['session_name']) ?>"
+                                data-ipmik="<?= htmlspecialchars($router['ip_address']) ?>"
+                                data-usermik="<?= htmlspecialchars($router['username']) ?>"
+                                data-hotspotname="<?= htmlspecialchars($router['hotspot_name']) ?>"
+                                data-dnsname="<?= htmlspecialchars($router['dns_name']) ?>"
+                                data-iface="<?= htmlspecialchars($router['interface'] ?? 'ether1') ?>"
+                                data-currency="<?= htmlspecialchars($router['currency'] ?? 'Rp') ?>"
+                                data-areload="<?= htmlspecialchars($router['reload_interval'] ?? '10') ?>"
+                                data-quick-access="<?= $router['quick_access'] ?? 0 ?>">
                                 <td>
                                     <div class="flex items-center">
                                         <div class="h-8 w-8 rounded bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
@@ -80,9 +90,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                                     <a href="/<?= htmlspecialchars($router['session_name']) ?>/dashboard" class="btn btn-secondary btn-sm h-8 px-3">
                                         Open
                                     </a>
-                                    <a href="/settings/edit/<?= $router['id'] ?>" class="btn btn-secondary btn-sm h-8 px-3" title="Edit">
+                                     <button onclick="openRouterModal('edit', this)" class="btn btn-secondary btn-sm h-8 px-3" title="Edit">
                                         <i data-lucide="edit-2" class="w-4 h-4"></i>
-                                    </a>
+                                    </button>
                                     <form action="/settings/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Disconnect Router?', 'Are you sure you want to disconnect <?= htmlspecialchars($router['session_name']) ?>?', 'Disconnect', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
                                         <input type="hidden" name="id" value="<?= $router['id'] ?>">
                                         <button type="submit" class="btn hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 border border-transparent h-8 px-2" title="Delete">
@@ -98,13 +108,239 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                          <div class="text-sm text-accents-5">
                             Showing all <?= count($routers) ?> stored sessions
                          </div>
-                         <a href="/settings/add" class="btn btn-primary btn-sm w-full sm:w-auto justify-center">
-                            <i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add New
-                         </a>
+                          <button onclick="openRouterModal('add')" class="btn btn-primary btn-sm w-full sm:w-auto justify-center">
+                            <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Add New</span>
+                          </button>
                     </div>
                 </div>
             <?php endif; ?>
         </div>
     </div>
 
+<template id="router-form-template">
+    <div class="text-left">
+        <form id="router-form" action="/settings/store" method="POST" class="space-y-6">
+            <input type="hidden" name="id" id="form-id">
+            
+            <!-- Session Settings -->
+            <div>
+                <h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.session_settings">
+                    <i data-lucide="settings" class="w-4 h-4"></i> Session Settings
+                </h2>
+                <div class="max-w-md space-y-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="home.session_name">Session Name</label>
+                        <input class="w-full" type="text" name="sessname" id="sessname" placeholder="e.g. router-jakarta-1" required/>
+                        <p class="text-[10px] text-accents-4 uppercase tracking-tighter mt-1">
+                            <span data-i18n="routers.unique_id">Unique ID:</span> <span id="sessname-preview" class="font-mono text-primary font-bold">...</span>
+                        </p>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input type="checkbox" id="quick_access" name="quick_access" class="checkbox flex-shrink-0" value="1">
+                        <label for="quick_access" class="text-xs font-bold cursor-pointer select-none whitespace-nowrap uppercase tracking-wider" data-i18n="routers.show_quick_access">Show in Quick Access</label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Connection Details -->
+            <div class="border-t border-white/5 pt-6">
+                <h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.connection_details">
+                    <i data-lucide="zap" class="w-4 h-4"></i> Connection Details
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="space-y-1 md:col-span-1">
+                        <label class="form-label" data-i18n="home.ip_address">IP Address</label>
+                        <input class="w-full" type="text" name="ipmik" placeholder="192.168.88.1" required/>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="login.username">Username</label>
+                        <input class="w-full" type="text" name="usermik" placeholder="admin" required/>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="login.password">Password</label>
+                        <input class="w-full" type="password" name="passmik" id="passmik" placeholder="••••••••"/>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Hotspot Information -->
+            <div class="border-t border-white/5 pt-6">
+                <h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.hotspot_info">
+                    <i data-lucide="globe" class="w-4 h-4"></i> Hotspot Information
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="home.hotspot_name">Hotspot Name</label>
+                        <input class="w-full" type="text" name="hotspotname" placeholder="My Hotspot ID" required/>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="routers.dns_name">DNS Name</label>
+                        <input class="w-full" type="text" name="dnsname" placeholder="hotspot.net" required/>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                    <div class="space-y-1">
+                        <label class="form-label" data-i18n="routers.traffic_interface">Traffic Interface</label>
+                        <div class="flex w-full gap-2">
+                            <div class="flex-grow">
+                                <select class="w-full" name="iface" id="iface" data-search="true" required>
+                                    <option value="ether1">ether1</option>
+                                </select>
+                            </div>
+                            <button type="button" id="check-interface-btn" class="btn btn-secondary whitespace-nowrap px-3" title="Check connection">
+                                <i data-lucide="refresh-cw" class="w-4 h-4 mr-1"></i>
+                                <span class="text-xs font-bold uppercase tracking-tight" data-i18n="routers.check_connection">Check Connection</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="space-y-1">
+                            <label class="form-label" data-i18n="routers.currency">Currency</label>
+                            <input class="w-full" type="text" name="currency" value="Rp" required/>
+                        </div>
+                        <div class="space-y-1">
+                            <label class="form-label" data-i18n="routers.auto_reload">Reload (s)</label>
+                            <input class="w-full" type="number" min="2" name="areload" value="10" required/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    function openRouterModal(mode, btn = null) {
+        const template = document.getElementById('router-form-template').innerHTML;
+        
+        let title = window.i18n ? window.i18n.t('routers.add_router_title') : 'Add Router';
+        let saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
+        
+        if (mode === 'edit') {
+            title = window.i18n ? window.i18n.t('routers.edit_router_title') : 'Edit Router';
+            saveBtn = window.i18n ? window.i18n.t('common.forms.save_changes') : 'Save Changes';
+        }
+
+        const preConfirmFn = () => {
+             const form = Swal.getHtmlContainer().querySelector('form');
+             if(form.reportValidity()) {
+                 form.submit();
+                 return true;
+             }
+             return false;
+        };
+
+        const onOpenedFn = (popup) => {
+             const form = popup.querySelector('form');
+             
+             // --- Interface Check Logic ---
+             const checkBtn = form.querySelector('#check-interface-btn');
+             const ifaceSelect = form.querySelector('#iface');
+             
+             if (checkBtn && ifaceSelect) {
+                 checkBtn.addEventListener('click', async () => {
+                    const originalHTML = checkBtn.innerHTML;
+                    checkBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 mr-1 animate-spin"></i><span class="text-xs font-bold uppercase tracking-tight">Checking...</span>';
+                    checkBtn.disabled = true;
+                    if (typeof lucide !== 'undefined') lucide.createIcons();
+
+                    const ip = form.querySelector('[name="ipmik"]').value;
+                    const user = form.querySelector('[name="usermik"]').value;
+                    const pass = form.querySelector('[name="passmik"]').value;
+                    const id = form.querySelector('[name="id"]').value || null;
+
+                    if (!ip || !user) {
+                        Mivo.toast('warning', 'Missing Details', 'IP Address and Username are required');
+                        checkBtn.innerHTML = originalHTML;
+                        checkBtn.disabled = false;
+                        if (typeof lucide !== 'undefined') lucide.createIcons();
+                        return;
+                    }
+
+                    try {
+                        const response = await fetch('/api/router/interfaces', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ ip, user, password: pass, id })
+                        });
+                        const data = await response.json();
+
+                        if (!data.success || !data.interfaces) {
+                            Mivo.toast('error', 'Fetch Failed', data.error || 'Check credentials');
+                        } else {
+                            ifaceSelect.innerHTML = '';
+                            data.interfaces.forEach(iface => {
+                                const opt = document.createElement('option');
+                                opt.value = iface;
+                                opt.textContent = iface;
+                                ifaceSelect.appendChild(opt);
+                            });
+                            
+                            if (window.Mivo && window.Mivo.components.Select) {
+                                const instance = window.Mivo.components.Select.get(ifaceSelect);
+                                if (instance) instance.refresh();
+                            }
+                            Mivo.toast('success', 'Success', 'Interfaces loaded');
+                        }
+                    } catch (err) {
+                        Mivo.toast('error', 'Error', 'Connection failed');
+                    } finally {
+                        checkBtn.innerHTML = originalHTML;
+                        checkBtn.disabled = false;
+                        if (typeof lucide !== 'undefined') lucide.createIcons();
+                    }
+                 });
+             }
+
+             // --- Session Name Formatting ---
+             const sessInput = form.querySelector('[name="sessname"]');
+             const sessPreview = form.querySelector('#sessname-preview');
+             if (sessInput && sessPreview) {
+                 sessInput.addEventListener('input', (e) => {
+                    let val = e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-');
+                    e.target.value = val;
+                    sessPreview.textContent = val || '...';
+                 });
+             }
+
+             if (mode === 'edit' && btn) {
+                 const row = btn.closest('tr');
+                 form.action = "/settings/update";
+                 
+                 const idInput = form.querySelector('#form-id');
+                 idInput.disabled = false;
+                 idInput.value = row.dataset.id;
+
+                 form.querySelector('[name="sessname"]').value = row.dataset.sessname || '';
+                 if(sessPreview) sessPreview.textContent = row.dataset.sessname || '';
+                 
+                 form.querySelector('[name="ipmik"]').value = row.dataset.ipmik || '';
+                 form.querySelector('[name="usermik"]').value = row.dataset.usermik || '';
+                 form.querySelector('[name="hotspotname"]').value = row.dataset.hotspotname || '';
+                 form.querySelector('[name="dnsname"]').value = row.dataset.dnsname || '';
+                 form.querySelector('[name="currency"]').value = row.dataset.currency || 'Rp';
+                 form.querySelector('[name="areload"]').value = row.dataset.areload || '10';
+                 
+                 const quickCheck = form.querySelector('#quick_access');
+                 if(quickCheck) quickCheck.checked = row.dataset.quickAccess == '1';
+
+                 // Handle Interface Select
+                 const currentIface = row.dataset.iface || 'ether1';
+                 ifaceSelect.innerHTML = `<option value="${currentIface}" selected>${currentIface}</option>`;
+                 if (window.Mivo && window.Mivo.components.Select) {
+                    const instance = window.Mivo.components.Select.get(ifaceSelect);
+                    if (instance) instance.refresh();
+                 }
+
+                 // Password is not populated for security, hint is in placeholder
+                 form.querySelector('[name="passmik"]').placeholder = '•••••••• (unchanged)';
+                 form.querySelector('[name="passmik"]').required = false;
+             }
+        };
+
+        Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn, 'swal-wide');
+    }
+</script>
+
 <?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>

app/Views/settings/logos.php

@@ -22,8 +22,8 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
             <!-- Upload Section -->
             <section>
                 <div class="card p-8 border-dashed border-2 bg-accents-1 hover:bg-background transition-colors text-center relative group">
-                    <form action="/settings/logos/upload" method="POST" enctype="multipart/form-data" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
-                        <input type="file" name="logo_file" accept=".png,.jpg,.jpeg,.svg,.gif" onchange="this.form.submit()" class="form-control-file">
+                    <form action="/settings/logos/upload" method="POST" enctype="multipart/form-data" class="absolute inset-0 w-full h-full cursor-pointer z-50">
+                        <input type="file" name="logo_file" accept=".png,.jpg,.jpeg,.svg,.gif" onchange="this.form.submit()" class="block w-full h-full opacity-0 cursor-pointer">
                     </form>
         
         <div class="flex flex-col items-center justify-center pointer-events-none">

app/Views/settings/voucher_templates/edit.php

@@ -16,13 +16,13 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
     <!-- Header -->
     <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 flex-shrink-0">
         <div class="flex items-center gap-4">
-            <a href="/settings/templates" class="text-accents-5 hover:text-foreground transition-colors">
+            <a href="/settings/voucher-templates" class="text-accents-5 hover:text-foreground transition-colors">
                 <i data-lucide="arrow-left" class="w-5 h-5"></i>
             </a>
             <h1 class="text-xl font-bold tracking-tight text-foreground"><?= $title ?></h1>
         </div>
         
-        <form id="templateForm" action="<?= $isEdit ? '/settings/templates/update' : '/settings/templates/store' ?>" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
+        <form id="templateForm" action="<?= $isEdit ? '/settings/voucher-templates/update' : '/settings/voucher-templates/store' ?>" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
             <?php if ($isEdit): ?>
                 <input type="hidden" name="id" value="<?= $template['id'] ?>">
             <?php endif; ?>

app/Views/settings/voucher_templates/index.php

@@ -21,7 +21,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                     <div class="hidden md:block">
                         <!-- Spacer -->
                     </div>
-                    <a href="/settings/templates/add" class="btn btn-primary w-full sm:w-auto justify-center">
+                    <a href="/settings/voucher-templates/add" class="btn btn-primary w-full sm:w-auto justify-center">
                         <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                         <span data-i18n="settings.new_template">New Template</span>
                     </a>
@@ -37,7 +37,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                                 <i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
                             </div>
                             <iframe 
-                                data-src="/settings/templates/preview/default" 
+                                data-src="/settings/voucher-templates/preview/default" 
                                 src="about:blank"
                                 class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
                                 scrolling="no"
@@ -66,7 +66,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                                 <i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
                             </div>
                              <iframe 
-                                data-src="/settings/templates/preview/<?= $tpl['id'] ?>" 
+                                data-src="/settings/voucher-templates/preview/<?= $tpl['id'] ?>" 
                                 src="about:blank"
                                 class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
                                 scrolling="no"
@@ -87,10 +87,10 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                                 <p class="text-sm text-accents-5 mb-4 line-clamp-1">Created: <?= htmlspecialchars($tpl['created_at']) ?></p>
                                 
                                 <div class="flex items-center gap-2 mt-auto">
-                                    <a href="/settings/templates/edit/<?= $tpl['id'] ?>" class="flex-1 btn btn-primary flex justify-center">
+                                    <a href="/settings/voucher-templates/edit/<?= $tpl['id'] ?>" class="flex-1 btn btn-primary flex justify-center">
                                         <i data-lucide="edit-3" class="w-4 h-4 mr-2"></i> <span data-i18n="common.edit">Edit</span>
                                     </a>
-                                    <form action="/settings/templates/delete" method="POST" class="delete-template-form">
+                                    <form action="/settings/voucher-templates/delete" method="POST" class="delete-template-form">
                                         <input type="hidden" name="id" value="<?= $tpl['id'] ?>">
                                         <input type="hidden" name="template_name" value="<?= htmlspecialchars($tpl['name']) ?>">
                                         <button type="submit" class="p-2 btn btn-secondary hover:text-red-600 hover:bg-red-50 transition-colors h-9 w-9 flex items-center justify-center">

app/Views/system/scheduler.php

@@ -12,7 +12,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
          <button onclick="location.reload()" class="btn btn-secondary">
             <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
         </button>
-        <button onclick="openModal('addModal')" class="btn btn-primary">
+        <button onclick="openSchedulerModal('add')" class="btn btn-primary">
             <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="system_tools.add_task">Add Task</span>
         </button>
     </div>
@@ -54,7 +54,14 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                             $status = ($task['disabled'] === 'true') ? 'disabled' : 'enabled';
                     ?>
                     <tr class="table-row-item"
-                            data-name="<?= strtolower($task['name']) ?>"
+                            data-id="<?= $task['.id'] ?>"
+                            data-name="<?= htmlspecialchars($task['name']) ?>"
+                            data-interval="<?= htmlspecialchars($task['interval']) ?>"
+                            data-start-date="<?= htmlspecialchars($task['start-date'] ?? '') ?>"
+                            data-start-time="<?= htmlspecialchars($task['start-time'] ?? '') ?>"
+                            data-on-event="<?= htmlspecialchars($task['on-event']) ?>"
+                            data-comment="<?= htmlspecialchars($task['comment'] ?? '') ?>"
+                            data-search-name="<?= strtolower($task['name']) ?>"
                             data-status="<?= $status ?>">
                         
                         <td>
@@ -72,7 +79,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
                         </td>
                         <td class="text-right text-sm font-medium">
                             <div class="flex items-center justify-end gap-2 table-actions-reveal">
-                                <button onclick="editTask(<?= htmlspecialchars(json_encode($task)) ?>)" class="btn-icon" title="Edit">
+                                <button onclick="openSchedulerModal('edit', this)" class="btn-icon" title="Edit">
                                     <i data-lucide="edit-2" class="w-4 h-4"></i>
                                 </button>
                                 <form action="/<?= $session ?>/system/scheduler/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('system_tools.delete_task') : 'Delete Task?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to delete task <?= htmlspecialchars($task['name']) ?>?', window.i18n ? window.i18n.t('common.delete') : 'Delete', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
@@ -103,104 +110,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
     </div>
 </div>
 
-<!-- Add Modal -->
-<div id="addModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
-    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('addModal')"></div>
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
-        <div class="card shadow-2xl">
-            <div class="flex items-center justify-between mb-6">
-                <h3 class="text-lg font-bold" data-i18n="system_tools.add_title">Add Scheduler Task</h3>
-                <button onclick="closeModal('addModal')" class="text-accents-5 hover:text-foreground">
-                    <i data-lucide="x" class="w-5 h-5"></i>
-                </button>
-            </div>
-            <form action="/<?= $session ?>/system/scheduler/store" method="POST" class="space-y-4">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.name">Name</label>
-                        <input type="text" name="name" class="form-control" required>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.interval">Interval</label>
-                        <input type="text" name="interval" class="form-control" value="1d 00:00:00" placeholder="1d 00:00:00">
-                    </div>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_date">Start Date</label>
-                        <input type="text" name="start_date" class="form-control" value="Jan/01/1970">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_time">Start Time</label>
-                        <input type="text" name="start_time" class="form-control" value="00:00:00">
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="system_tools.on_event">On Event (Script)</label>
-                    <textarea name="on_event" class="form-control font-mono text-xs h-24" placeholder="/system reboot"></textarea>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="system_tools.comment">Comment</label>
-                    <input type="text" name="comment" class="form-control">
-                </div>
-                <div class="flex justify-end pt-4">
-                    <button type="button" onclick="closeModal('addModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
-                    <button type="submit" class="btn btn-primary" data-i18n="system_tools.save_task">Save Task</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 
-<!-- Edit Modal -->
-<div id="editModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
-    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('editModal')"></div>
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
-        <div class="card shadow-2xl">
-            <div class="flex items-center justify-between mb-6">
-                <h3 class="text-lg font-bold" data-i18n="system_tools.edit_title">Edit Scheduler Task</h3>
-                <button onclick="closeModal('editModal')" class="text-accents-5 hover:text-foreground">
-                    <i data-lucide="x" class="w-5 h-5"></i>
-                </button>
-            </div>
-            <form action="/<?= $session ?>/system/scheduler/update" method="POST" class="space-y-4">
-                <input type="hidden" name="id" id="edit_id">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.name">Name</label>
-                        <input type="text" name="name" id="edit_name" class="form-control" required>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.interval">Interval</label>
-                        <input type="text" name="interval" id="edit_interval" class="form-control">
-                    </div>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_date">Start Date</label>
-                        <input type="text" name="start_date" id="edit_start_date" class="form-control">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_time">Start Time</label>
-                        <input type="text" name="start_time" id="edit_start_time" class="form-control">
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="system_tools.on_event">On Event (Script)</label>
-                    <textarea name="on_event" id="edit_on_event" class="form-control font-mono text-xs h-24"></textarea>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1" data-i18n="system_tools.comment">Comment</label>
-                    <input type="text" name="comment" id="edit_comment" class="form-control">
-                </div>
-                <div class="flex justify-end pt-4">
-                    <button type="button" onclick="closeModal('editModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
-                    <button type="submit" class="btn btn-primary" data-i18n="system_tools.update_task">Update Task</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 
 <script>
     class TableManager {
@@ -256,7 +166,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
 
         update() {
             this.filteredRows = this.allRows.filter(row => {
-                const name = row.dataset.name || '';
+                const name = row.dataset.searchName || '';
                 
                 if (this.filters.search && !name.includes(this.filters.search)) return false;
                 
@@ -308,42 +218,49 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
         }
     }
 
-function openModal(id) {
-    const modal = document.getElementById(id);
-    const content = modal.querySelector('.modal-content');
+function openSchedulerModal(mode, btn = null) {
+    const template = document.getElementById('scheduler-form-template').innerHTML;
     
-    modal.classList.remove('hidden');
-    // Force reflow
-    void modal.offsetWidth; 
+    let title = window.i18n ? window.i18n.t('system_tools.add_title') : 'Add Scheduler Task';
+    let saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
     
-    modal.classList.remove('opacity-0');
-    content.classList.remove('scale-95', 'opacity-0');
-    content.classList.add('scale-100', 'opacity-100');
-}
+    if (mode === 'edit') {
+        title = window.i18n ? window.i18n.t('system_tools.edit_title') : 'Edit Scheduler Task';
+        saveBtn = window.i18n ? window.i18n.t('common.forms.save_changes') : 'Save Changes';
+    }
 
-function closeModal(id) {
-    const modal = document.getElementById(id);
-    const content = modal.querySelector('.modal-content');
-    
-    modal.classList.add('opacity-0');
-    content.classList.remove('scale-100', 'opacity-100');
-    content.classList.add('scale-95', 'opacity-0');
-    
-    setTimeout(() => {
-        modal.classList.add('hidden');
-    }, 300); // Match duration-300
-}
+    const preConfirmFn = () => {
+         const form = Swal.getHtmlContainer().querySelector('form');
+         if(form.reportValidity()) {
+             form.submit();
+             return true;
+         }
+         return false;
+    };
 
-function editTask(task) {
-    document.getElementById('edit_id').value = task['.id'];
-    document.getElementById('edit_name').value = task['name'];
-    document.getElementById('edit_interval').value = task['interval'];
-    document.getElementById('edit_start_date').value = task['start-date'];
-    document.getElementById('edit_start_time').value = task['start-time'];
-    document.getElementById('edit_on_event').value = task['on-event'];
-    document.getElementById('edit_comment').value = task['comment'] ?? '';
-    
-    openModal('editModal');
+    const onOpenedFn = (popup) => {
+         const form = popup.querySelector('form');
+         
+         if (mode === 'edit' && btn) {
+             const row = btn.closest('tr');
+             form.action = "/<?= htmlspecialchars($session) ?>/system/scheduler/update";
+             
+             // Populate Hidden ID
+             const idInput = form.querySelector('#form-id');
+             idInput.disabled = false;
+             idInput.value = row.dataset.id;
+
+             // Populate Fields
+             form.querySelector('[name="name"]').value = row.dataset.name || '';
+             form.querySelector('[name="interval"]').value = row.dataset.interval || '';
+             form.querySelector('[name="start_date"]').value = row.dataset.startDate || '';
+             form.querySelector('[name="start_time"]').value = row.dataset.startTime || '';
+             form.querySelector('[name="on_event"]').value = row.dataset.onEvent || '';
+             form.querySelector('[name="comment"]').value = row.dataset.comment || '';
+         }
+    };
+
+    Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn);
 }
 
     document.addEventListener('DOMContentLoaded', () => {
@@ -351,4 +268,40 @@ function editTask(task) {
     });
 </script>
 
+<template id="scheduler-form-template">
+    <div class="text-left">
+        <form action="/<?= $session ?>/system/scheduler/store" method="POST" class="space-y-4">
+            <input type="hidden" name="id" id="form-id" disabled>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="system_tools.name">Name</label>
+                    <input type="text" name="name" class="w-full" required>
+                </div>
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="system_tools.interval">Interval</label>
+                    <input type="text" name="interval" class="w-full" value="1d 00:00:00" placeholder="1d 00:00:00">
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="system_tools.start_date">Start Date</label>
+                    <input type="text" name="start_date" class="w-full" value="Jan/01/1970">
+                </div>
+                <div class="space-y-1">
+                    <label class="form-label" data-i18n="system_tools.start_time">Start Time</label>
+                    <input type="text" name="start_time" class="w-full" value="00:00:00">
+                </div>
+            </div>
+            <div class="space-y-1">
+                <label class="form-label" data-i18n="system_tools.on_event">On Event (Script)</label>
+                <textarea name="on_event" class="w-full font-mono text-xs h-32" placeholder="/system reboot"></textarea>
+            </div>
+            <div class="space-y-1">
+                <label class="form-label" data-i18n="system_tools.comment">Comment</label>
+                <input type="text" name="comment" class="w-full">
+            </div>
+        </form>
+    </div>
+</template>
+
 <?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>