184 lines
8.1 KiB
PHP
184 lines
8.1 KiB
PHP
|
<?php
|
||
|
|
require_once 'config.php';
|
||
|
|
|
||
|
|
// Access variables from config.php
|
||
|
|
$api_url_analytics = $api_config['analytics_url'];
|
||
|
|
$api_url_certs = $api_config['certificates_url'];
|
||
|
|
|
||
|
|
$timezone_abbr = date('T');
|
||
|
|
?>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>OpenVPN Analytics Dashboard</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
|
|
<link href="css/style.css?v=<?php echo time(); ?>" rel="stylesheet">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
|
|
<script src="js/utils.js?v=<?php echo time(); ?>"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="header">
|
||
|
|
<div class="d-flex justify-content-between align-items-start flex-wrap">
|
||
|
|
<div class="mb-3 mb-md-0">
|
||
|
|
<h1 class="h3 mb-1">Analytics Dashboard</h1>
|
||
|
|
<p class="text-muted mb-0">System performance overview</p>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex align-items-center flex-wrap gap-2">
|
||
|
|
<a href="index.php" class="btn-nav">
|
||
|
|
<i class="fas fa-list me-2"></i>Clients
|
||
|
|
</a>
|
||
|
|
<a href="certificates.php" class="btn-nav">
|
||
|
|
<i class="fas fa-certificate me-2"></i>Certificates
|
||
|
|
</a>
|
||
|
|
<a href="dashboard.php" class="btn-nav active">
|
||
|
|
<i class="fas fa-chart-pie me-2"></i>Analytics
|
||
|
|
</a>
|
||
|
|
<!-- Dashboard doesn't have a specific count badge in header usually, using placeholder or removing if not needed. User asked for identical elements. -->
|
||
|
|
<span class="header-badge">System</span>
|
||
|
|
|
||
|
|
<span class="header-timezone">
|
||
|
|
<i class="fas fa-globe me-1 text-muted"></i><?php echo $timezone_abbr; ?>
|
||
|
|
</span>
|
||
|
|
<button class="btn-header" onclick="toggleTheme()" title="Toggle Theme">
|
||
|
|
<i class="fas fa-moon" id="themeIcon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn-header" onclick="loadData()" title="Refresh">
|
||
|
|
<i class="fas fa-sync-alt" id="refreshIcon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="kpi-grid">
|
||
|
|
<div class="stat-item">
|
||
|
|
<div class="stat-content">
|
||
|
|
<h3 id="kpiMaxClients">-</h3>
|
||
|
|
<p>Concurrent Users (Peak)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stat-item">
|
||
|
|
<div class="stat-content">
|
||
|
|
<h3 id="kpiTotalTraffic">-</h3>
|
||
|
|
<p>Traffic Volume (Total)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stat-item">
|
||
|
|
<div class="stat-content">
|
||
|
|
<h3 id="kpiExpiringCerts">-</h3>
|
||
|
|
<p>Expiring Soon (In 45 Days)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header d-flex justify-content-between align-items-center flex-wrap">
|
||
|
|
<span><i class="fas fa-chart-area me-2"></i>Traffic Overview</span>
|
||
|
|
|
||
|
|
<div class="chart-header-controls">
|
||
|
|
<select class="form-select form-select-sm" style="width:auto;" id="globalRange"
|
||
|
|
onchange="loadData()">
|
||
|
|
<option value="24h" selected>Last 24 Hours</option>
|
||
|
|
<option value="7d">Last 7 Days</option>
|
||
|
|
<option value="30d">Last 1 Month</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<div class="form-check form-switch mb-0">
|
||
|
|
<input class="form-check-input" type="checkbox" role="switch" id="vizToggle"
|
||
|
|
onchange="toggleMainChart()">
|
||
|
|
<label class="form-check-label small fw-bold" style="color: var(--text-heading);"
|
||
|
|
for="vizToggle" id="vizLabel">Speed</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="chart-container">
|
||
|
|
<canvas id="mainChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-7">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<i class="fas fa-trophy me-2"></i>TOP-3 Active Clients
|
||
|
|
</div>
|
||
|
|
<div class="card-body p-0">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Client Name</th>
|
||
|
|
<th>Total Data</th>
|
||
|
|
<th>Activity Share</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="topClientsTable">
|
||
|
|
<tr>
|
||
|
|
<td colspan="3" class="text-center py-4 text-muted">Loading...</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-5">
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||
|
|
<span><i class="fas fa-exclamation-circle me-2"></i>Certificate Alerts</span>
|
||
|
|
<span class="badge bg-secondary" style="font-size: 0.7em;">Next 45 Days</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-body p-3" id="certsList"
|
||
|
|
style="min-height: 120px; max-height: 200px; overflow-y: auto;">
|
||
|
|
<p class="text-muted text-center py-3 mb-0">Checking certificates...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<i class="fas fa-chart-pie me-2"></i>Traffic Distribution
|
||
|
|
</div>
|
||
|
|
<div class="card-body d-flex align-items-center justify-content-around p-4">
|
||
|
|
<div class="pie-container" style="width: 140px; height: 140px; flex: 0 0 auto;">
|
||
|
|
<canvas id="pieChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="ms-3 flex-grow-1">
|
||
|
|
<div class="mb-3">
|
||
|
|
<div class="small text-muted mb-1"><span class="legend-dot"
|
||
|
|
style="background:#3fb950"></span>Download</div>
|
||
|
|
<div class="h5 mb-0" style="color: var(--text-heading);" id="pieRxVal">-</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="small text-muted mb-1"><span class="legend-dot"
|
||
|
|
style="background:#58a6ff"></span>Upload</div>
|
||
|
|
<div class="h5 mb-0" style="color: var(--text-heading);" id="pieTxVal">-</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<script src="js/utils.js"></script>
|
||
|
|
<script>
|
||
|
|
window.AppConfig = {
|
||
|
|
apiAnalytics: '<?php echo $api_url_analytics; ?>',
|
||
|
|
apiCerts: '<?php echo $api_url_certs; ?>'
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script src="js/pages/dashboard.js?v=<?php echo time(); ?>"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|