krsyer-server-monitor-pro 1.0.31 → 1.0.32

package/lib/public/script.js

@@ -0,0 +1,1180 @@
+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;
+    }
+}