krsyer-server-monitor-pro 1.0.28 → 1.0.29

package/lib/public/script.js

@@ -1,1180 +0,0 @@
-const API_URL = '/api/server/info';
-
-// --- Charts Configuration ---
-let cpuChart, memChart, diskChart;
-const CHART_POINTS = 30;
-
-function initCharts() {
-    const commonOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: { duration: 0 },
-        scales: {
-            x: { display: false },
-            y: {
-                min: 0,
-                max: 100,
-                ticks: { color: '#94a3b8', font: { size: 10 } },
-                grid: { color: 'rgba(255, 255, 255, 0.05)' }
-            }
-        },
-        plugins: { legend: { display: false } },
-        elements: {
-            point: { radius: 0 },
-            line: { tension: 0.4, borderWidth: 2 }
-        }
-    };
-
-    const createChart = (id, color, bgColor) => {
-        const ctx = document.getElementById(id);
-        if (!ctx) return null;
-        return new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: Array(CHART_POINTS).fill(''),
-                datasets: [{
-                    data: Array(CHART_POINTS).fill(0),
-                    borderColor: color,
-                    backgroundColor: bgColor,
-                    fill: true,
-                    borderWidth: 2
-                }]
-            },
-            options: commonOptions
-        });
-    };
-
-    if (!cpuChart) cpuChart = createChart('cpu-chart', '#8b5cf6', 'rgba(139, 92, 246, 0.15)');
-    if (!memChart) memChart = createChart('mem-chart', '#06b6d4', 'rgba(6, 182, 212, 0.15)');
-    if (!diskChart) diskChart = createChart('disk-chart', '#f43f5e', 'rgba(244, 63, 94, 0.15)');
-}
-
-function updateChartData(chart, value) {
-    if (!chart) return;
-    const data = chart.data.datasets[0].data;
-    data.push(value);
-    if (data.length > CHART_POINTS) data.shift();
-    chart.update('none'); // mode 'none' for performance
-}
-
-
-// Initial Load & Event Listeners
-document.addEventListener('DOMContentLoaded', () => {
-    initCharts(); // Initialize Charts
-    fetchServerData();
-    // Double fetch to ensure data is populated
-    setTimeout(fetchServerData, 500);
-    checkCloudflareStatus();
-
-    // Refresh every 10 seconds
-    setInterval(fetchServerData, 10000);
-
-    // Initial Docker fetch
-    setTimeout(fetchDockerData, 1000);
-
-    // Navigation Logic
-    const navLinks = document.querySelectorAll('.nav-link');
-
-    navLinks.forEach(link => {
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-
-            // Update Active State
-            navLinks.forEach(l => l.classList.remove('active'));
-            link.classList.add('active');
-
-            // Show View
-            const viewId = link.getAttribute('data-target');
-            showView(viewId);
-        });
-    });
-
-    // Default View
-    showView('view-server');
-});
-
-// Navigation Helper
-function showView(viewId) {
-    // Hide all views
-    document.querySelectorAll('.view-section').forEach(el => {
-        el.classList.remove('active');
-    });
-
-    // Show target view
-    const target = document.getElementById(viewId);
-    if (target) {
-        target.classList.add('active');
-
-        // Update Title
-        const titleMap = {
-            'view-server': 'System Infrastructure',
-            'view-network': 'Network Topology',
-            'view-cloudflare': 'Cloudflare Guard',
-            'view-databases': 'Database Clusters',
-            'view-docker': 'Container Environment',
-            'view-apps': 'Application Stack',
-            'view-terminal': 'Web Terminal'
-        };
-        const titleEl = document.getElementById('page-title');
-        if (titleEl) titleEl.textContent = titleMap[viewId] || 'Dashboard';
-    }
-
-    // Initialize Terminal if selected
-    if (viewId === 'view-terminal') {
-        initTerminal();
-    }
-}
-
-// Data Fetching
-async function fetchServerData() {
-    try {
-        const response = await fetch(API_URL);
-        const data = await response.json();
-
-        if (data.status === 'success') {
-            updateDashboard(data);
-            if (data.subscription) {
-                const headerInfo = document.getElementById('license-info-header');
-                const planBadge = document.getElementById('license-plan-badge');
-                const expiryDisplay = document.getElementById('license-expiry-display');
-
-                if (headerInfo && data.subscription.active) {
-                    headerInfo.style.display = 'block';
-                    const expiryText = data.subscription.expiry ? new Date(data.subscription.expiry).toLocaleDateString() : 'Lifetime';
-
-                    if (planBadge) planBadge.textContent = data.subscription.plan;
-                    if (expiryDisplay) expiryDisplay.textContent = 'Valid until: ' + expiryText;
-
-                    // Update Footer as well
-                    const footerPlan = document.getElementById('license-plan');
-                    const footerExpiry = document.getElementById('license-expiry');
-                    if (footerPlan) footerPlan.textContent = data.subscription.plan + ' Plan';
-                    if (footerExpiry) footerExpiry.textContent = 'Valid until: ' + expiryText;
-                }
-            }
-            // Ensure these are called regularly
-            if (window.fetchDockerData) window.fetchDockerData();
-        }
-    } catch (error) {
-        console.error('Error fetching server data:', error);
-    }
-}
-
-function updateDashboard(data) {
-    const { server, cpu, memory, disk } = data;
-
-    // OS Details
-    if (server.os) {
-        safeSetText('os-name', server.os);
-        safeSetText('os-kernel', server.kernel);
-        safeSetText('os-arch', server.architecture);
-    }
-
-    // Hostname, Platform, Node, Uptime
-    safeSetText('server-hostname', server.hostname);
-    if (data.node) safeSetText('node-version', data.node.version);
-    safeSetText('server-platform', `${server.platform} (${server.architecture})`);
-
-    // Uptime
-    const uptimeSeconds = server.uptime.raw || 0;
-    const uptimeHours = (uptimeSeconds / 3600).toFixed(1);
-    safeSetText('server-uptime', `${uptimeHours} Hours`);
-
-    // CPU Usage
-    const cpuLoadVal = cpu.loadAverage.percentage || cpu.loadAverage['1min'];
-    const cpuLoad = parseFloat(cpuLoadVal) || 0;
-    updateChartData(cpuChart, cpuLoad);
-
-    if (cpu.model) safeSetText('cpu-model', cpu.model);
-    if (cpu.cores) safeSetText('cpu-cores', cpu.cores);
-
-
-    // RAM Metrics
-    safeSetText('mem-used', `${memory.used} / ${memory.total}`);
-    const memPercentVal = parseFloat(memory.usagePercentage) || 0;
-    updateChartData(memChart, memPercentVal);
-
-    // Disk Metrics
-    if (disk) {
-        safeSetText('disk-drive', disk.drive);
-        safeSetText('disk-info', `${disk.used} / ${disk.total}`);
-        const diskPercentVal = parseFloat(disk.percent) || 0;
-        updateChartData(diskChart, diskPercentVal);
-    }
-
-    // Network Info
-    if (data.network) {
-        safeSetText('net-public', data.network.publicIP || 'Unavailable');
-        safeSetText('net-local', Array.isArray(data.network.localIPs) ? data.network.localIPs.map(ip => ip.address).join(', ') : (data.network.localIPs || '-'));
-    }
-
-    if (data.applications) updateApplications(data.applications);
-    if (data.hostServices) updateDatabases(data.hostServices);
-}
-
-// Applications List
-// Applications List (PM2)
-function updateApplications(apps) {
-    const list = document.getElementById('apps-list');
-    if (!list) return;
-
-    if (!apps || apps.length === 0) {
-        list.innerHTML = '<tr><td colspan="6" style="text-align:center; color: var(--text-secondary);">No active applications</td></tr>';
-        return;
-    }
-
-    list.innerHTML = apps.map(app => `
-        <tr>
-            <td style="color: var(--primary); font-weight: 500;">${app.name} <span style="font-size:0.7em; opacity:0.6">(${app.user || 'root'})</span></td>
-            <td><span class="status-badge ${app.status === 'online' ? 'status-online' : 'status-offline'}">${app.status}</span></td>
-            <td>${app.memory}</td>
-            <td>${app.cpu}</td>
-            <td>${app.uptime}</td>
-            <td>
-                <button class="action-btn" onclick="restartApp('${app.name}', '${app.user || ''}')" title="Restart">
-                    <ion-icon name="refresh-outline"></ion-icon>
-                </button>
-            </td>
-        </tr>
-    `).join('');
-}
-
-// Database Services & Active Host Services
-function updateDatabases(services) {
-    // 1. Database Services
-    const list = document.getElementById('database-services-list');
-    if (list) {
-        const dbKeywords = ['mysql', 'mysqld', 'mariadb', 'postgres', 'mongod', 'redis'];
-        const dbServices = services.filter(svc => {
-            const cmd = (svc.command || svc.name || '').toLowerCase();
-            return dbKeywords.some(k => cmd.includes(k));
-        });
-
-        if (!dbServices || dbServices.length === 0) {
-            list.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--text-secondary);">No database services found</td></tr>';
-        } else {
-            list.innerHTML = dbServices.map(svc => `
-                <tr>
-                    <td>${svc.command || svc.name || 'Unknown'}</td>
-                    <td><span class="status-badge ${svc.status === 'stopped' ? 'status-offline' : 'status-online'}">${svc.status || 'Active'}</span></td>
-                    <td>${svc.memory || '-'}</td>
-                    <td>${svc.cpu || '-'}</td>
-                    <td>${svc.uptime || '-'}</td>
-                    <td>${svc.port || svc.address}</td>
-                    <td>
-                        ${svc.unit ? `
-                        <button class="action-btn" style="color:var(--accent-color)" onclick="restartService('${svc.unit}')" title="Restart Service">
-                            <ion-icon name="refresh-outline"></ion-icon>
-                        </button>
-                        ${svc.status === 'stopped' ?
-                        `<button class="action-btn" style="color:var(--success)" onclick="startService('${svc.unit}')" title="Start Service"><ion-icon name="play-circle-outline"></ion-icon></button>`
-                        :
-                        `<button class="action-btn" style="color:var(--danger)" onclick="stopService('${svc.unit}')" title="Stop Service"><ion-icon name="stop-circle-outline"></ion-icon></button>`
-                    }
-                        ` : '<span style="color:gray; font-size:0.8rem">N/A</span>'}
-                    </td>
-                </tr>
-            `).join('');
-        }
-    }
-
-    // 2. Active Host Services (Web Apps)
-    const hostList = document.getElementById('host-services-list');
-    if (hostList) {
-        const filterList = ['apache2', 'httpd', 'nginx', 'node', 'pm2', 'python'];
-        const webServices = services.filter(svc => {
-            const cmd = (svc.command || svc.name || '').toLowerCase();
-            return filterList.some(k => cmd.includes(k)) || !!svc.publicUrl;
-        });
-
-        if (!webServices || webServices.length === 0) {
-            hostList.innerHTML = '<tr><td colspan="8" style="text-align:center; color: var(--text-secondary);">No active web services found</td></tr>';
-        } else {
-            hostList.innerHTML = webServices.map(svc => {
-                // Parse Port logic
-                let port = '-';
-                if (svc.address) {
-                    const lastColon = svc.address.lastIndexOf(':');
-                    if (lastColon !== -1) {
-                        port = svc.address.substring(lastColon + 1);
-                    }
-                }
-
-                // Domain Logic
-                let domainDisplay = '-';
-                if (svc.publicUrl) {
-                    domainDisplay = svc.publicUrl.replace(/^https?:\/\//, '').replace(/\/$/, '').toLowerCase();
-                }
-
-                // Construct URL
-                let openUrl = svc.publicUrl;
-                if (!openUrl && port !== '-' && port !== '*') {
-                    openUrl = `${window.location.protocol}//${window.location.hostname}:${port}`;
-                }
-
-                return `
-                <tr>
-                    <td>${svc.command || svc.name || 'Unknown'}</td>
-                    <td><span class="status-badge ${svc.status === 'stopped' ? 'status-offline' : 'status-online'}">${svc.status || 'Active'}</span></td>
-                    <td>${svc.memory || '-'}</td>
-                    <td>${svc.cpu || '-'}</td>
-                    <td style="font-family:monospace; color: #a78bfa;">${domainDisplay}</td>
-                    <td style="font-family:monospace; color: var(--warning);">${port}</td>
-                    <td>
-                        ${openUrl ?
-                        `<a href="${openUrl}" target="_blank" class="action-btn connect-btn" style="text-decoration:none; padding:4px 10px; font-size: 0.8rem;">
-                            <ion-icon name="open-outline" style="vertical-align:middle"></ion-icon> Open
-                         </a>` : '-'}
-                    </td>
-                    <td>
-                        ${svc.unit ? `
-                        <button class="action-btn" style="color:var(--accent-color)" onclick="restartService('${svc.unit}')" title="Restart Service">
-                            <ion-icon name="refresh-outline"></ion-icon>
-                        </button>
-                        <button class="action-btn" style="color:var(--danger)" onclick="stopService('${svc.unit}')" title="Stop Service">
-                            <ion-icon name="stop-circle-outline"></ion-icon>
-                        </button>
-                        ` : '<span style="color:gray; font-size:0.8rem">N/A</span>'}
-                    </td>
-                </tr>
-            `}).join('');
-        }
-    }
-}
-
-// Network List
-async function scanNetwork() {
-    const list = document.getElementById('network-list');
-    const btn = document.getElementById('scan-btn');
-
-    list.innerHTML = '<div style="text-align:center; padding: 1rem; color: var(--text-secondary);"><ion-icon name="sync-outline" class="spin" style="font-size: 1.5rem;"></ion-icon><br>Scanning Subnets...</div>';
-    if (btn) {
-        btn.disabled = true;
-        btn.innerHTML = '<ion-icon name="sync-outline" class="spin"></ion-icon> Scanning';
-    }
-
-    try {
-        const response = await fetch('/api/network/scan');
-        const data = await response.json();
-
-        if (data.status === 'success') {
-            updateNetworkList(data.servers, data.subnets);
-        } else {
-            list.innerHTML = `<div style="text-align:center; color: var(--danger);">Scan failed: ${data.message}</div>`;
-        }
-    } catch (error) {
-        console.error('Network scan error:', error);
-        list.innerHTML = `<div style="text-align:center; color: var(--danger);">Network Error. Check console.</div>`;
-    } finally {
-        if (btn) {
-            btn.disabled = false;
-            btn.innerHTML = '<ion-icon name="scan-outline"></ion-icon> Scan';
-        }
-    }
-}
-
-function updateNetworkList(servers, subnets) {
-    const list = document.getElementById('network-list');
-    if (!list) return;
-
-    const subnetDisplay = Array.isArray(subnets) ? subnets.join(', ') : subnets;
-
-    if (!servers || servers.length === 0) {
-        list.innerHTML = `<div style="text-align:center; color: var(--text-secondary);">No servers found in ${subnetDisplay}</div>`;
-        return;
-    }
-
-    list.innerHTML = servers.map(server => {
-        const isCurrent = server.status === 'current';
-        let link = server.publicUrl || `http://${server.ip}:3010`;
-        // Legacy overrides
-        if (!server.publicUrl) {
-            if (server.ip === '192.168.1.8') link = 'http://monitors1.mulasofttechnologies.com';
-            else if (server.ip === '192.168.1.6') link = 'http://monitor.mulasofttechnologies.com';
-        }
-
-        return `
-            <div class="network-item">
-                <div class="network-info">
-                    <ion-icon name="server-outline" style="color: ${isCurrent ? 'var(--accent-color)' : 'var(--success)'}"></ion-icon>
-                    <div>
-                        <div class="server-ip">${server.ip}</div>
-                        <div class="server-status">${isCurrent ? 'Current Server' : 'Online'}</div>
-                    </div>
-                </div>
-                ${!isCurrent ? `
-                <a href="${link}" target="_blank" class="connect-btn">
-                    View <ion-icon name="open-outline"></ion-icon>
-                </a>` : ''}
-            </div>
-        `;
-    }).join('');
-}
-
-
-// Actions
-async function restartApp(id, user) {
-    if (!confirm(`Restart application ${id}?`)) return;
-    try {
-        const body = user ? JSON.stringify({ user }) : null;
-        const res = await fetch(`/api/server/restart/${id}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: body
-        });
-        const data = await res.json();
-        if (res.ok) {
-            alert(data.message);
-            fetchServerData();
-        } else {
-            alert('Error: ' + data.message);
-        }
-    } catch (e) {
-        alert('Action failed');
-    }
-}
-
-async function restartService(name) {
-    if (!confirm(`Restart system service ${name}?`)) return;
-    try {
-        const res = await fetch(`/api/server/service/restart/${name}`, { method: 'POST' });
-        const data = await res.json();
-        if (res.ok) {
-            alert(data.message);
-            fetchServerData();
-        } else {
-            alert('Error: ' + data.message);
-        }
-    } catch (e) {
-        alert('Action failed');
-    }
-}
-
-async function stopService(name) {
-    if (!confirm(`Stop system service ${name}? WARNING: This may disrupt operations.`)) return;
-    try {
-        const res = await fetch(`/api/server/service/stop/${name}`, { method: 'POST' });
-        const data = await res.json();
-        if (res.ok) {
-            alert(data.message);
-            fetchServerData();
-        } else {
-            alert('Error: ' + data.message);
-        }
-    } catch (e) {
-        alert('Action failed');
-    }
-}
-
-async function startService(name) {
-    if (!confirm(`Start system service ${name}?`)) return;
-    try {
-        const res = await fetch(`/api/server/service/start/${name}`, { method: 'POST' });
-        const data = await res.json();
-        if (res.ok) {
-            alert(data.message);
-            fetchServerData();
-        } else {
-            alert('Error: ' + data.message);
-        }
-    } catch (e) {
-        alert('Action failed');
-    }
-}
-
-
-// Docker Functions
-async function fetchDockerData() {
-    try {
-        const response = await fetch('/api/docker/containers');
-        if (response.status === 401) return;
-        const data = await response.json();
-        if (data.status === 'success') {
-            updateDockerTable(data.containers);
-        }
-    } catch (e) {
-        console.error('Docker fetch error', e);
-    }
-
-    // Also fetch Docker images
-    fetchDockerImages();
-}
-
-async function fetchDockerImages() {
-    try {
-        const response = await fetch('/api/docker/images');
-        if (response.status === 401) return;
-        const data = await response.json();
-        if (data.status === 'success') {
-            updateDockerImagesTable(data.images);
-        }
-    } catch (e) {
-        console.error('Docker images fetch error', e);
-    }
-}
-
-function updateDockerImagesTable(images) {
-    const tbody = document.getElementById('docker-images-list');
-    if (!tbody) return;
-
-    if (!images || images.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color: var(--text-secondary);">No images found</td></tr>';
-        return;
-    }
-
-    tbody.innerHTML = images.map(img => {
-        // Parse size to show in human-readable format
-        // Display Size directly (already formatted by Docker, e.g., "1.2GB")
-        const sizeDisplay = img.Size || '-';
-
-        return `
-        <tr>
-            <td data-label="Repository">${img.Repository || 'none'}</td>
-            <td data-label="Tag" style="font-size:0.85rem;">${img.Tag || 'none'}</td>
-            <td data-label="Image ID" style="font-size:0.85rem; color:var(--text-secondary);">${img.ID ? img.ID.substring(0, 12) : '-'}</td>
-            <td data-label="Size">${sizeDisplay}</td>
-            <td data-label="Actions">
-                <div style="display:flex; gap: 0.5rem; justify-content: flex-end;">
-                    <button class="action-btn" style="color:var(--danger)" onclick="dockerImageAction('remove', '${img.ID}')" title="Remove Image">
-                        <ion-icon name="trash-outline"></ion-icon>
-                    </button>
-                </div>
-            </td>
-        </tr>`;
-    }).join('');
-}
-
-async function dockerImageAction(action, id) {
-    if (action === 'remove') {
-        if (!confirm('Are you sure you want to remove this image?')) return;
-
-        try {
-            const res = await fetch(`/api/docker/image/${id}`, { method: 'DELETE' });
-            const data = await res.json();
-            if (res.ok) {
-                alert(data.message);
-                fetchDockerImages();
-            } else {
-                alert('Error: ' + data.message);
-            }
-        } catch (e) {
-            alert('Action failed');
-        }
-    }
-}
-
-
-function updateDockerTable(containers) {
-    const tbody = document.getElementById('docker-list');
-    if (!tbody) return;
-
-    if (!containers || containers.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color: var(--text-secondary);">No active containers</td></tr>';
-        return;
-    }
-
-    tbody.innerHTML = containers.map(c => {
-        const isRunning = c.State && (c.State === 'running' || c.Status.startsWith('Up'));
-        const statusClass = isRunning ? 'status-online' : 'status-offline';
-
-        return `
-        <tr>
-            <td data-label="Names">${c.Names}</td>
-            <td data-label="Image" style="font-size:0.85rem; color:var(--text-secondary);">${c.Image}</td>
-            <td data-label="Status"><span class="status-badge ${statusClass}">${c.Status}</span></td>
-            <td data-label="Ports" style="font-size:0.85rem;">${c.Ports || '-'}</td>
-            <td data-label="Actions">
-                <div style="display:flex; gap: 0.5rem; justify-content: flex-end;">
-                ${isRunning ?
-                `<button class="action-btn" style="color:var(--warning)" onclick="dockerAction('stop', '${c.ID}')" title="Stop"><ion-icon name="stop-circle-outline"></ion-icon></button>
-                 <button class="action-btn" style="color:var(--accent-color)" onclick="dockerAction('restart', '${c.ID}')" title="Restart"><ion-icon name="refresh-outline"></ion-icon></button>`
-                :
-                `<button class="action-btn" style="color:var(--success)" onclick="dockerAction('start', '${c.ID}')" title="Start"><ion-icon name="play-circle-outline"></ion-icon></button>`
-            }
-                <button class="action-btn" style="color:var(--danger)" onclick="dockerAction('remove', '${c.ID}')" title="Remove"><ion-icon name="trash-outline"></ion-icon></button>
-                </div>
-            </td>
-        </tr>`;
-    }).join('');
-}
-
-async function dockerAction(action, id) {
-    if (!confirm(`Are you sure you want to ${action} this container?`)) return;
-
-    const method = action === 'remove' ? 'DELETE' : 'POST';
-    const url = action === 'remove' ? `/api/docker/${id}` : `/api/docker/${action}/${id}`;
-
-    try {
-        const res = await fetch(url, { method });
-        const data = await res.json();
-        if (res.ok) {
-            alert(data.message);
-            fetchDockerData();
-        } else {
-            alert('Error: ' + data.message);
-        }
-    } catch (e) {
-        alert('Action failed');
-    }
-}
-
-function showCreateContainer() {
-    const el = document.getElementById('create-container-form');
-    if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
-}
-
-async function createContainer() {
-    const image = document.getElementById('docker-image').value;
-    const name = document.getElementById('docker-name').value;
-    const ports = document.getElementById('docker-ports').value;
-    const restart = document.getElementById('docker-restart').value;
-    const network = document.getElementById('docker-network').value;
-    const envRaw = document.getElementById('docker-env').value;
-    const volumesRaw = document.getElementById('docker-volumes').value;
-
-    const logDiv = document.getElementById('docker-creation-logs');
-    const btn = document.querySelector('#create-container-form button.connect-btn');
-
-    if (!image) { alert('Image is required'); return; }
-
-    const env = envRaw.split('\n').map(l => l.trim()).filter(l => l);
-    const volumes = volumesRaw.split('\n').map(l => l.trim()).filter(l => l);
-
-    if (logDiv) {
-        logDiv.style.display = 'block';
-        logDiv.innerHTML = `> Initializing deployment for image: ${image}...\n`;
-        logDiv.innerHTML += `> Contacting Docker daemon...\n`;
-    }
-
-    const originalBtnText = btn.innerHTML;
-    btn.disabled = true;
-    btn.innerHTML = '<ion-icon name="sync-outline" class="spin"></ion-icon> Deploying...';
-
-    try {
-        const res = await fetch('/api/docker/run', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ image, name, ports, restart, network, env, volumes })
-        });
-        const data = await res.json();
-
-        if (res.ok) {
-            if (logDiv) {
-                logDiv.style.display = 'none';
-                logDiv.innerHTML = '';
-            }
-            fetchDockerData();
-
-            // Clear inputs
-            ['docker-image', 'docker-name', 'docker-ports', 'docker-env', 'docker-volumes'].forEach(id => {
-                const el = document.getElementById(id);
-                if (el) el.value = '';
-            });
-
-            alert(`Task Completed: Docker Container Created Successfully.\n\nID: ${data.logs ? data.logs.substring(0, 12) : 'N/A'}`);
-            document.getElementById('create-container-form').style.display = 'none';
-
-        } else {
-            if (logDiv) logDiv.innerHTML += `> ERROR: ${data.message}\n`;
-        }
-    } catch (e) {
-        if (logDiv) logDiv.innerHTML += `> FATAL ERROR: ${e.message}\n`;
-    } finally {
-        btn.disabled = false;
-        btn.innerHTML = originalBtnText;
-    }
-}
-
-
-// Cloudflare Logic
-async function addCloudflareProxy() {
-    const tunnelName = document.getElementById('cf-tunnel').value;
-    const hostname = document.getElementById('cf-hostname').value;
-    const port = document.getElementById('cf-port').value;
-    const ip = document.getElementById('cf-ip').value;
-    let configFilename = document.getElementById('cf-config').value;
-
-    // Use dropdown value if config input is empty
-    const dropdown = document.getElementById('cf-files-dropdown');
-    if (!configFilename && dropdown && dropdown.value) {
-        configFilename = dropdown.value;
-    }
-
-    if (!tunnelName || !hostname || !port) {
-        alert('Please fill Tunnel Name, Hostname, and Port');
-        return;
-    }
-
-    const btn = document.querySelector('#cf-installed-content .connect-btn');
-    const logs = document.getElementById('cf-logs');
-    if (btn) {
-        btn.disabled = true;
-        btn.innerText = 'Adding Route...';
-    }
-    if (logs) {
-        logs.style.display = 'block';
-        logs.innerHTML = '<div>> Initiating...</div>';
-    }
-
-    try {
-        const res = await fetch('/api/cloudflare/add', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ tunnelName, hostname, port, serverIp: ip, configFilename })
-        });
-
-        const contentType = res.headers.get("content-type");
-        if (contentType && contentType.indexOf("application/json") !== -1) {
-            const data = await res.json();
-            if (res.ok) {
-                if (logs) {
-                    logs.style.display = 'none';
-                    logs.innerHTML = '';
-                }
-                const hostInput = document.getElementById('cf-hostname');
-                const portInput = document.getElementById('cf-port');
-                if (hostInput) hostInput.value = '';
-                if (portInput) portInput.value = '';
-
-                alert(`Task Completed: ${data.message}`);
-                fetchCloudflareRoutes(tunnelName, configFilename);
-            } else {
-                if (logs) logs.innerHTML += `> ERROR: ${data.message}\n`;
-            }
-        } else {
-            const text = await res.text();
-            if (logs) logs.innerHTML += `> UNEXPECTED RESPONSE: ${text.substring(0, 200)}...\n`;
-        }
-
-    } catch (e) {
-        if (logs) logs.innerHTML += `> FATAL ERROR: ${e.message}\n`;
-    } finally {
-        if (btn) {
-            btn.disabled = false;
-            btn.innerHTML = 'Add & Restart';
-        }
-    }
-}
-
-async function checkCloudflareStatus() {
-    try {
-        const res = await fetch('/api/cloudflare/status');
-        const data = await res.json();
-
-        const notInstalledDiv = document.getElementById('cf-not-installed');
-        const installedDiv = document.getElementById('cf-installed-content');
-
-        if (data.status === 'success' && data.installed) {
-            if (notInstalledDiv) notInstalledDiv.style.display = 'none';
-            if (installedDiv) installedDiv.style.display = 'block';
-            fetchCloudflareFiles();
-        } else {
-            if (notInstalledDiv) notInstalledDiv.style.display = 'block';
-            if (installedDiv) installedDiv.style.display = 'none';
-        }
-    } catch (e) {
-        console.error('Status check failed', e);
-    }
-}
-
-async function fetchCloudflareFiles() {
-    const listDropdown = document.getElementById('cf-files-dropdown');
-    const tunnelDropdown = document.getElementById('cf-tunnel');
-
-    // 1. Files for Active Routes List
-    if (listDropdown) {
-        try {
-            const res = await fetch('/api/cloudflare/files');
-            const data = await res.json();
-            if (data.status === 'success' && data.files.length > 0) {
-                listDropdown.innerHTML = data.files.map(f => `<option value="${f}">${f}</option>`).join('');
-                const defaultFile = data.files.find(f => f.includes('krsyergroup')) || data.files[0];
-                listDropdown.value = defaultFile;
-                fetchCloudflareRoutes();
-            } else {
-                listDropdown.innerHTML = '<option disabled>No files</option>';
-            }
-        } catch (e) {
-            console.error('Failed to load CF files', e);
-            listDropdown.innerHTML = '<option error>Error</option>';
-        }
-    }
-
-    // 2. Tunnels for Add Route Dropdown (CLI Source)
-    if (tunnelDropdown) {
-        try {
-            const res = await fetch('/api/cloudflare/tunnels');
-            const data = await res.json();
-            if (data.status === 'success' && data.tunnels.length > 0) {
-                tunnelDropdown.innerHTML = data.tunnels.map(name => `<option value="${name}">${name}</option>`).join('');
-                const defaultTunnel = data.tunnels.find(t => t.includes('krsyergroup')) || data.tunnels[0];
-                tunnelDropdown.value = defaultTunnel;
-            } else {
-                tunnelDropdown.innerHTML = '<option disabled>No active tunnels</option>';
-            }
-        } catch (e) {
-            console.error('Failed to load CF tunnels', e);
-            tunnelDropdown.innerHTML = '<option error>Error</option>';
-        }
-    }
-}
-// Add event listener for dropdown change
-document.getElementById('cf-files-dropdown')?.addEventListener('change', () => {
-    fetchCloudflareRoutes();
-});
-
-
-async function fetchCloudflareRoutes(tunnelName, configFile) {
-    const dropdown = document.getElementById('cf-files-dropdown');
-
-    if (typeof tunnelName !== 'string') {
-        tunnelName = document.getElementById('cf-tunnel').value || 'krsyergroup';
-        if (dropdown && dropdown.value) {
-            configFile = dropdown.value;
-        } else {
-            configFile = document.getElementById('cf-config').value;
-        }
-    }
-
-    if (!configFile) configFile = `${tunnelName}.yml`;
-    if (!configFile.endsWith('.yml')) configFile += '.yml';
-
-    const configInput = document.getElementById('cf-config');
-    if (configInput && configFile) configInput.value = configFile;
-
-    const listDiv = document.getElementById('cf-routes-list');
-    listDiv.innerHTML = '<div style="text-align:center; color: var(--text-secondary);">Loading routes...</div>';
-
-    try {
-        const res = await fetch(`/api/cloudflare/config?tunnel=${tunnelName}&file=${configFile}`);
-        const data = await res.json();
-
-        if (data.status === 'success' && data.config.ingress) {
-            const rules = data.config.ingress.filter(r => r.hostname);
-
-            if (rules.length === 0) {
-                listDiv.innerHTML = '<div style="text-align:center; color: var(--text-secondary);">No active routes found.</div>';
-                return;
-            }
-
-            listDiv.innerHTML = rules.map(r => `
-                <div class="network-item">
-                    <div class="network-info">
-                        <ion-icon name="globe" style="color: var(--primary); font-size: 1.5rem;"></ion-icon>
-                        <div>
-                            <div class="host-text">${r.hostname}</div>
-                            <div class="service-text">${r.service}</div>
-                        </div>
-                    </div>
-                    <div class="mobile-actions" style="display:flex; gap:0.75rem;">
-                        <a href="https://${r.hostname}" target="_blank" class="action-btn" title="Open Site" style="color: var(--success)">
-                            <ion-icon name="open-outline"></ion-icon>
-                        </a>
-                        <button class="action-btn" style="color:var(--primary);" onclick="editCloudflareRoute('${r.hostname}', '${r.service}', '${tunnelName}', '${configFile}')" title="Edit Configuration">
-                            <ion-icon name="options-outline"></ion-icon>
-                        </button>
-                        <button class="action-btn" style="color:var(--danger);" onclick="detachCloudflareRoute('${r.hostname}')" title="Delete Route">
-                            <ion-icon name="trash-outline"></ion-icon>
-                        </button>
-                    </div>
-                </div>
-            `).join('');
-        } else {
-            listDiv.innerHTML = `<div style="text-align:center; color: var(--danger);">Failed to load or invalid config (${configFile}).</div>`;
-        }
-    } catch (e) {
-        console.error('CF Config Fetch Error', e);
-        listDiv.innerHTML = `<div style="text-align:center; color: var(--danger);">Error loading routes. Check inputs.</div>`;
-    }
-}
-
-async function detachCloudflareRoute(hostname) {
-    if (!confirm(`Are you sure you want to detach ${hostname}?`)) return;
-
-    const tunnelName = document.getElementById('cf-tunnel').value || 'krsyergroup';
-    let configFile = document.getElementById('cf-config').value;
-
-    const listDiv = document.getElementById('cf-routes-list');
-    const originalHTML = listDiv.innerHTML;
-    listDiv.innerHTML = '<div style="text-align:center; color: var(--text-secondary);"><ion-icon name="sync-outline" class="spin"></ion-icon> Detaching...</div>';
-
-    try {
-        const res = await fetch('/api/cloudflare/delete', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ hostname, tunnelName, configFilename: configFile })
-        });
-
-        const data = await res.json();
-        if (res.ok && data.status === 'success') {
-            fetchCloudflareRoutes(tunnelName, configFile);
-        } else {
-            alert('Error: ' + data.message);
-            listDiv.innerHTML = originalHTML;
-        }
-    } catch (e) {
-        alert('Action failed: ' + e.message);
-        listDiv.innerHTML = originalHTML;
-    }
-}
-
-function editCloudflareRoute(hostname, service, tunnelName, configFilename) {
-    let ip = '';
-    let port = '';
-
-    const match = service.match(/https?:\/\/([^:]+):(\d+)/);
-    if (match) {
-        ip = match[1];
-        port = match[2];
-    } else {
-        const matchSimple = service.match(/https?:\/\/([^:]+)/);
-        if (matchSimple) ip = matchSimple[1];
-    }
-
-    // Populate Fields
-    setInputValue('cf-hostname', hostname);
-    setInputValue('cf-port', port);
-    setInputValue('cf-ip', ip);
-    setInputValue('cf-tunnel', tunnelName);
-    setInputValue('cf-config', configFilename);
-
-    const btn = document.querySelector('#cf-installed-content .connect-btn');
-    if (btn) {
-        btn.innerHTML = 'Update & Restart';
-        btn.classList.add('pulse');
-        setTimeout(() => btn.classList.remove('pulse'), 1000);
-    }
-    document.getElementById('cf-hostname').focus();
-}
-
-// Helper to set text content safely
-function safeSetText(id, text) {
-    const el = document.getElementById(id);
-    if (el) el.textContent = text || '-';
-}
-function setInputValue(id, val) {
-    const el = document.getElementById(id);
-    if (el) el.value = val || '';
-}
-
-// Terminal Logic
-let term;
-let socket;
-let fitAddon;
-
-function initTerminal() {
-    if (term) {
-        fitAddon.fit();
-        term.focus();
-        return;
-    }
-
-    const container = document.getElementById('terminal-container');
-    if (!container) return;
-
-    term = new Terminal({
-        cursorBlink: true,
-        fontFamily: 'Consolas, "Courier New", monospace',
-        fontSize: 14,
-        theme: {
-            background: '#0e0e0e',
-            foreground: '#f0f0f0',
-            cursor: '#4f46e5'
-        },
-        convertEol: true
-    });
-
-    fitAddon = new FitAddon.FitAddon();
-    term.loadAddon(fitAddon);
-    term.open(container);
-    fitAddon.fit();
-
-    socket = io();
-
-    socket.on('connect_error', (err) => {
-        term.write(`\r\n\x1b[31mConnection error: ${err.message}\x1b[0m\r\n`);
-    });
-
-    socket.on('terminal:data', (data) => term.write(data));
-    term.onData((data) => socket.emit('terminal:write', data));
-
-    window.addEventListener('resize', () => {
-        try {
-            fitAddon.fit();
-            if (socket) socket.emit('terminal:resize', { cols: term.cols, rows: term.rows });
-        } catch (e) {
-            console.error('Resize error:', e);
-        }
-    });
-
-    socket.emit('terminal:resize', { cols: term.cols, rows: term.rows });
-    term.focus();
-}
-
-// Search/Filter Functions
-function filterApps() {
-    const search = document.getElementById('search-apps').value.toLowerCase();
-    const rows = document.querySelectorAll('#apps-list tr');
-    rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(search) ? '' : 'none';
-    });
-}
-
-function filterDatabases() {
-    const search = document.getElementById('search-databases').value.toLowerCase();
-    const rows = document.querySelectorAll('#database-services-list tr');
-    rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(search) ? '' : 'none';
-    });
-}
-
-function filterDocker() {
-    const search = document.getElementById('search-docker').value.toLowerCase();
-    const rows = document.querySelectorAll('#docker-list tr');
-    rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(search) ? '' : 'none';
-    });
-}
-
-function filterDockerImages() {
-    const search = document.getElementById('search-docker-images').value.toLowerCase();
-    const rows = document.querySelectorAll('#docker-images-list tr');
-    rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(search) ? '' : 'none';
-    });
-}
-
-function filterHostServices() {
-    const search = document.getElementById('search-host').value.toLowerCase();
-    const rows = document.querySelectorAll('#host-services-list tr');
-    rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(search) ? '' : 'none';
-    });
-}
-
-// Logout Function
-function logout() {
-    if (confirm('Are you sure you want to logout?')) {
-        // Clear any stored authentication
-        sessionStorage.clear();
-        localStorage.clear();
-
-        // Redirect to logout or login page
-        window.location.href = '/logout';
-    }
-}
-
-// --- Password Management ---
-function showChangePasswordModal() {
-    let modal = document.getElementById('password-modal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'password-modal';
-        // Glassmorphism Overlay
-        modal.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; z-index:9999;';
-
-        // CSS for Spin Animation (Injected once)
-        if (!document.getElementById('spin-style')) {
-            const style = document.createElement('style');
-            style.id = 'spin-style';
-            style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; }';
-            document.head.appendChild(style);
-        }
-
-        modal.innerHTML = `
-            <div style="background:#1e293b; padding:2.5rem; border-radius:16px; width:90%; max-width:400px; border:1px solid #334155; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; border-bottom:1px solid #334155; padding-bottom:1rem;">
-                    <h2 style="margin:0; font-size:1.25rem; color:#fff;">Change Password</h2>
-                    <button onclick="closePasswordModal()" style="background:none; border:none; color:#94a3b8; font-size:1.5rem; cursor:pointer;"><ion-icon name="close-outline"></ion-icon></button>
-                </div>
-
-                <div id="pwd-error" style="display:none; background:rgba(239,68,68,0.2); color:#fca5a5; padding:0.75rem; border-radius:8px; margin-bottom:1rem; font-size:0.9rem;"></div>
-
-                <div style="margin-bottom:1rem;">
-                    <label style="display:block; color:#cbd5e1; margin-bottom:0.5rem; font-size:0.9rem;">Current Password</label>
-                    <input type="password" id="current-pass" class="dark-input" style="width:100%; padding:0.75rem; background:#0f172a; border:1px solid #334155; color:white; border-radius:8px;" placeholder="Current Password">
-                </div>
-                
-                <div style="margin-bottom:1.5rem;">
-                    <label style="display:block; color:#cbd5e1; margin-bottom:0.5rem; font-size:0.9rem;">New Password</label>
-                    <input type="password" id="new-pass" class="dark-input" style="width:100%; padding:0.75rem; background:#0f172a; border:1px solid #334155; color:white; border-radius:8px;" placeholder="New Password">
-                </div>
-
-                <div style="display:flex; justify-content:flex-end; gap:1rem;">
-                    <button onclick="closePasswordModal()" style="padding:0.75rem 1.5rem; background:transparent; color:#cbd5e1; border:1px solid #334155; border-radius:8px; cursor:pointer; font-weight:500;">Cancel</button>
-                    <button id="update-pass-btn" onclick="submitNewPassword()" style="padding:0.75rem 1.5rem; background:#3b82f6; color:white; border:none; border-radius:8px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:0.5rem;">
-                        Update Password
-                    </button>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(modal);
-    }
-
-    // Reset fields
-    document.getElementById('current-pass').value = '';
-    document.getElementById('new-pass').value = '';
-    const err = document.getElementById('pwd-error');
-    if (err) err.style.display = 'none';
-
-    const btn = document.getElementById('update-pass-btn');
-    if (btn) {
-        btn.disabled = false;
-        btn.innerHTML = 'Update Password';
-    }
-
-    modal.style.display = 'flex';
-}
-
-function closePasswordModal() {
-    const modal = document.getElementById('password-modal');
-    if (modal) modal.style.display = 'none';
-}
-
-async function submitNewPassword() {
-    const current = document.getElementById('current-pass').value;
-    const newPass = document.getElementById('new-pass').value;
-    const errDiv = document.getElementById('pwd-error');
-    const btn = document.getElementById('update-pass-btn');
-
-    if (!current || !newPass) {
-        errDiv.textContent = 'All fields are required';
-        errDiv.style.display = 'block';
-        return;
-    }
-
-    const originalHtml = btn.innerHTML;
-    btn.disabled = true;
-    btn.innerHTML = '<ion-icon name="sync-outline" class="spin"></ion-icon> Updating...';
-    errDiv.style.display = 'none';
-
-    try {
-        const res = await fetch('/api/change-password', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ currentPassword: current, newPassword: newPass })
-        });
-        const data = await res.json();
-
-        if (res.ok && data.status === 'success') {
-            btn.innerHTML = '<ion-icon name="checkmark-circle-outline"></ion-icon> Success!';
-            setTimeout(async () => {
-                alert('Password updated. Please login again.');
-                await fetch('/logout', { method: 'POST' });
-                window.location.href = '/login';
-            }, 1000);
-        } else {
-            throw new Error(data.message || 'Update failed');
-        }
-    } catch (e) {
-        errDiv.textContent = e.message;
-        errDiv.style.display = 'block';
-        btn.innerHTML = originalHtml;
-        btn.disabled = false;
-    }
-}