templates/dashboard.html

{% extends "base.html" %}

{% block title %}Dashboard - Outline VPN{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.11.3/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="logo-container">
            <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Outline VPN" class="logo">
            <span class="logo-text">Outline VPN</span>
        </div>
        <nav class="sidebar-nav">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="#" class="nav-link active">
                        <i class="bi bi-speedometer2"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('logout') }}" class="nav-link text-danger">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">Welcome back, {{ current_user.username }}</h1>
            <button id="sidebar-toggle" class="btn btn-light">
                <i class="bi bi-list"></i>
            </button>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card" data-aos="fade-up">
                <h3 class="stat-title">Connection Status</h3>
                <div class="stat-value">
                    <span class="status-indicator status-active"></span>
                    Connected
                </div>
                <div class="stat-change">
                    <i class="bi bi-arrow-up"></i>
                    Uptime: 12h 30m
                </div>
            </div>

            <div class="stat-card" data-aos="fade-up" data-aos-delay="100">
                <h3 class="stat-title">Data Usage</h3>
                <div class="stat-value" id="data-usage">
                    450.5 GB
                </div>
                <div class="stat-change">
                    <i class="bi bi-arrow-up-right"></i>
                    +2.3% from last week
                </div>
            </div>

            <div class="stat-card" data-aos="fade-up" data-aos-delay="200">
                <h3 class="stat-title">Active Sessions</h3>
                <div class="stat-value" id="active-sessions-count">
                    3
                </div>
                <div class="stat-change">
                    <i class="bi bi-people"></i>
                    Across all devices
                </div>
            </div>

            <div class="stat-card" data-aos="fade-up" data-aos-delay="300">
                <h3 class="stat-title">Network Speed</h3>
                <div class="stat-value" id="network-speed">
                    125 Mbps
                </div>
                <div class="stat-change">
                    <i class="bi bi-speedometer2"></i>
                    Average speed
                </div>
            </div>
        </div>

        <!-- Traffic Chart -->
        <div class="chart-container" data-aos="fade-up">
            <h2 class="h5 mb-4">Traffic Overview</h2>
            <canvas id="traffic-chart"></canvas>
        </div>

        <!-- Active Sessions Table -->
        <div class="dashboard-card" data-aos="fade-up">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h5 mb-0">Active Sessions</h2>
                <button class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-download me-2"></i>Export
                </button>
            </div>
            <div class="table-responsive">
                <table class="data-table table">
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>IP Address</th>
                            <th>Location</th>
                            <th>Connected Since</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for session in active_sessions %}
                        <tr class="fade-in">
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="bi {{ session.device_icon }} me-2"></i>
                                    {{ session.device_name }}
                                </div>
                            </td>
                            <td>{{ session.ip_address }}</td>
                            <td>{{ session.location }}</td>
                            <td>{{ session.connected_since }}</td>
                            <td>
                                <span class="status-indicator status-{{ session.status }}"></span>
                                {{ session.status|title }}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-x-circle"></i>
                                    Disconnect
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="dashboard-card" data-aos="fade-up">
                    <h2 class="h5 mb-4">Quick Actions</h2>
                    <div class="d-grid gap-3">
                        <button class="btn btn-primary">
                            <i class="bi bi-cloud-download me-2"></i>
                            Download Configuration
                        </button>
                        <button class="btn btn-outline-primary">
                            <i class="bi bi-gear me-2"></i>
                            Server Settings
                        </button>
                        <button class="btn btn-outline-secondary">
                            <i class="bi bi-shield-check me-2"></i>
                            Security Scan
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="dashboard-card" data-aos="fade-up">
                    <h2 class="h5 mb-4">System Status</h2>
                    <div class="system-stats">
                        <div class="mb-3">
                            <label class="form-label d-flex justify-content-between">
                                CPU Usage
                                <span class="text-primary">45%</span>
                            </label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 45%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label d-flex justify-content-between">
                                Memory Usage
                                <span class="text-primary">60%</span>
                            </label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 60%"></div>
                            </div>
                        </div>
                        <div>
                            <label class="form-label d-flex justify-content-between">
                                Disk Usage
                                <span class="text-primary">25%</span>
                            </label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 25%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net@1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-title text-muted">Data Upload</h6>
                            <h3 class="card-text mb-0" id="data-sent">0 B</h3>
                            <div class="progress mt-2" style="height: 4px;">
                                <div id="upload-progress" class="progress-bar bg-success" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-title text-muted">Data Download</h6>
                            <h3 class="card-text mb-0" id="data-received">0 B</h3>
                            <div class="progress mt-2" style="height: 4px;">
                                <div id="download-progress" class="progress-bar bg-info" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-title text-muted">Connected Since</h6>
                            <h3 class="card-text" id="connected-time">-</h3>
                            <small id="session-duration" class="text-muted d-block mt-2"></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Sessions -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Active Sessions</h5>
                </div>
                <div class="card-body">
                    <div id="active-sessions" class="row g-3">
                        <!-- Sessions will be populated dynamically -->
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" onclick="downloadConfig()">
                            <i class="bi bi-cloud-download me-2"></i>Download Configuration
                        </button>
                        <button id="offline-toggle" class="btn btn-outline-primary" onclick="toggleOfflineAccess()">
                            <i class="bi bi-wifi-off me-2"></i>
                            <span>Enable Offline Access</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Active Protocols -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Active Protocols</h5>
                </div>
                <div class="card-body">
                    <div id="protocol-badges">
                        <!-- Protocol badges will be populated dynamically -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Session Card Template -->
<template id="session-template">
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h6 class="session-protocol mb-1"></h6>
                        <small class="session-ip text-muted"></small>
                    </div>
                    <span class="session-status badge"></span>
                </div>
                <div class="session-stats small">
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="p-2 border rounded">
                                <div class="text-muted">Upload</div>
                                <div class="session-upload fw-bold"></div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 border rounded">
                                <div class="text-muted">Download</div>
                                <div class="session-download fw-bold"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <small class="session-time text-muted"></small>
                </div>
            </div>
        </div>
    </div>
</template>
{% endblock %}

{% block scripts %}
<script>

function formatBytes(bytes) {

    if (bytes === 0) return '0 B';

    const k = 1024;

    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];

    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];

}



function formatDuration(ms) {

    const seconds = Math.floor(ms / 1000);

    const minutes = Math.floor(seconds / 60);

    const hours = Math.floor(minutes / 60);

    const days = Math.floor(hours / 24);



    if (days > 0) return `${days}d ${hours % 24}h`;

    if (hours > 0) return `${hours}h ${minutes % 60}m`;

    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;

    return `${seconds}s`;

}



function formatDate(isoString) {

    return new Date(isoString).toLocaleString();

}



function updateDashboard(stats) {

    // Update status

    const statusBadge = document.querySelector('#connection-status .badge');

    statusBadge.className = 'badge ' + (

        stats.status === 'active' ? 'bg-success' :

        stats.status === 'offline_available' ? 'bg-warning' :

        'bg-secondary'

    );

    statusBadge.textContent = stats.status.replace('_', ' ').toUpperCase();



    // Update data transfer

    document.getElementById('data-sent').textContent = formatBytes(stats.bytes_sent);

    document.getElementById('data-received').textContent = formatBytes(stats.bytes_received);



    // Calculate progress percentages (assuming 1GB as max for visualization)

    const maxBytes = 1024 * 1024 * 1024;

    document.getElementById('upload-progress').style.width = 

        Math.min((stats.bytes_sent / maxBytes) * 100, 100) + '%';

    document.getElementById('download-progress').style.width = 

        Math.min((stats.bytes_received / maxBytes) * 100, 100) + '%';



    // Update connection time

    if (stats.connected_since) {

        document.getElementById('connected-time').textContent = formatDate(stats.connected_since);

        const duration = Date.now() - new Date(stats.connected_since);

        document.getElementById('session-duration').textContent = 'Duration: ' + formatDuration(duration);

    }



    // Update last seen

    if (stats.last_seen) {

        document.getElementById('last-seen').textContent = 'Last seen: ' + formatDate(stats.last_seen);

    }



    // Update active sessions

    const sessionsContainer = document.getElementById('active-sessions');

    sessionsContainer.innerHTML = '';

    const sessionTemplate = document.getElementById('session-template');



    stats.active_sessions.forEach(session => {

        const sessionElement = document.importNode(sessionTemplate.content, true);



        sessionElement.querySelector('.session-protocol').textContent = session.protocol.toUpperCase();

        sessionElement.querySelector('.session-ip').textContent = session.assigned_ip;

        

        const statusBadge = sessionElement.querySelector('.session-status');

        statusBadge.className = 'badge ' + (session.is_offline ? 'bg-warning' : 'bg-success');

        statusBadge.textContent = session.is_offline ? 'OFFLINE READY' : 'CONNECTED';



        sessionElement.querySelector('.session-upload').textContent = formatBytes(session.bytes_sent);

        sessionElement.querySelector('.session-download').textContent = formatBytes(session.bytes_received);

        sessionElement.querySelector('.session-time').textContent = 

            'Connected: ' + formatDate(session.connected_since);



        sessionsContainer.appendChild(sessionElement);

    });



    // Update protocols

    const protocolsContainer = document.getElementById('protocol-badges');

    protocolsContainer.innerHTML = stats.protocols.map(protocol => 

        `<span class="badge bg-primary me-2 mb-2">${protocol.toUpperCase()}</span>`

    ).join('');



    // Update offline access button

    const offlineButton = document.getElementById('offline-toggle');

    const hasOfflineSession = stats.active_sessions.some(s => s.is_offline);

    offlineButton.classList.toggle('btn-outline-primary', !hasOfflineSession);

    offlineButton.classList.toggle('btn-primary', hasOfflineSession);

    offlineButton.querySelector('span').textContent = 

        hasOfflineSession ? 'Disable Offline Access' : 'Enable Offline Access';

}



async function downloadConfig() {

    try {

        const response = await fetch('/download_config');

        const config = await response.json();

        

        // Create config file

        const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });

        const url = window.URL.createObjectURL(blob);

        

        // Trigger download

        const a = document.createElement('a');

        a.href = url;

        a.download = 'vpn-config.json';

        document.body.appendChild(a);

        a.click();

        document.body.removeChild(a);

        window.URL.revokeObjectURL(url);

    } catch (error) {

        console.error('Error downloading config:', error);

        alert('Failed to download configuration. Please try again.');

    }

}



async function toggleOfflineAccess() {

    try {

        const response = await fetch('/api/toggle_offline', {

            method: 'POST',

            headers: { 'Content-Type': 'application/json' }

        });

        const result = await response.json();

        

        if (result.success) {

            refreshStats();

        } else {

            throw new Error(result.message || 'Failed to toggle offline access');

        }

    } catch (error) {

        console.error('Error:', error);

        alert(error.message);

    }

}



function refreshStats() {

    fetch('/api/stats')

        .then(response => response.json())

        .then(stats => updateDashboard(stats))

        .catch(error => console.error('Error fetching stats:', error));

}



// Initial load and periodic refresh

refreshStats();

setInterval(refreshStats, 5000);

</script>
{% endblock %}
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Usage History</h5>
                <canvas id="usageChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">VPN Configuration</h5>
                <div class="mb-3">
                    <label class="form-label">Server Address</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="server-address" readonly>
                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('server-address')">
                            Copy
                        </button>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Access Key</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="access-key" readonly>
                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('access-key')">
                            Copy
                        </button>
                    </div>
                </div>
                <button class="btn btn-primary" onclick="downloadConfig()">
                    Download Configuration
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Quick Setup Guide</h5>
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item">Download the Outline Client for your device</li>
                    <li class="list-group-item">Copy your access key from this dashboard</li>
                    <li class="list-group-item">Open the Outline Client and paste your access key</li>
                    <li class="list-group-item">Click "Connect" to start using the VPN</li>
                </ol>
                <div class="mt-3">
                    <a href="https://getoutline.org/get-started/" class="btn btn-outline-primary" target="_blank">
                        Download Outline Client
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>

let usageChart;



function formatBytes(bytes) {

    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];

    if (bytes === 0) return '0 B';

    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];

}



function copyToClipboard(elementId) {

    const element = document.getElementById(elementId);

    element.select();

    document.execCommand('copy');

    alert('Copied to clipboard!');

}



function downloadConfig() {

    fetch('/download_config')

        .then(response => response.json())

        .then(config => {

            const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });

            const url = window.URL.createObjectURL(blob);

            const a = document.createElement('a');

            a.href = url;

            a.download = 'outline-config.json';

            document.body.appendChild(a);

            a.click();

            window.URL.revokeObjectURL(url);

            document.body.removeChild(a);

        })

        .catch(error => console.error('Error downloading config:', error));

}



function updateStats() {

    fetch('/api/stats')

        .then(response => response.json())

        .then(stats => {

            document.getElementById('data-sent').textContent = formatBytes(stats.bytes_sent);

            document.getElementById('data-received').textContent = formatBytes(stats.bytes_received);

            document.getElementById('connection-status').innerHTML = 

                `<span class="badge bg-${stats.status === 'active' ? 'success' : 'warning'}">${

                    stats.status.charAt(0).toUpperCase() + stats.status.slice(1)

                }</span>`;

            

            const connectedDate = new Date(stats.connected_since);

            document.getElementById('connected-time').textContent = 

                connectedDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });



            // Update chart data

            if (usageChart) {

                // Add new data point

                const now = new Date();

                usageChart.data.labels.push(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));

                usageChart.data.datasets[0].data.push(stats.bytes_sent / 1024 / 1024);

                usageChart.data.datasets[1].data.push(stats.bytes_received / 1024 / 1024);

                

                // Remove old data points if more than 10

                if (usageChart.data.labels.length > 10) {

                    usageChart.data.labels.shift();

                    usageChart.data.datasets[0].data.shift();

                    usageChart.data.datasets[1].data.shift();

                }

                

                usageChart.update();

            }

        })

        .catch(error => console.error('Error fetching stats:', error));

}



// Initialize usage chart

document.addEventListener('DOMContentLoaded', function() {

    const ctx = document.getElementById('usageChart').getContext('2d');

    usageChart = new Chart(ctx, {

        type: 'line',

        data: {

            labels: [],

            datasets: [{

                label: 'Data Sent (MB)',

                borderColor: 'rgb(75, 192, 192)',

                data: []

            }, {

                label: 'Data Received (MB)',

                borderColor: 'rgb(255, 99, 132)',

                data: []

            }]

        },

        options: {

            responsive: true,

            scales: {

                y: {

                    beginAtZero: true,

                    title: {

                        display: true,

                        text: 'Data (MB)'

                    }

                }

            }

        }

    });



    // Update stats initially and every 5 seconds

    updateStats();

    setInterval(updateStats, 5000);

});

</script>
{% endblock %}