<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WAN Command Center</title>
<!-- Include Chart.js for interactive graphs -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--bg-color: #0f111a;
--panel-bg: #1e2130;
--text-main: #e0e0e0;
--text-muted: #8b92a5;
--accent-blue: #00d2ff;
--rag-green: #00d26a;
--rag-amber: #ffaa00;
--rag-red: #f84444;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
h1, h2, h3 { margin-top: 0; font-weight: 500; }
h2 { font-size: 1.1rem; color: #fff; border-bottom: 1px solid #2a2e40; padding-bottom: 10px; margin-bottom: 15px; }
/* Dashboard Grid Layout */
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.panel {
background-color: var(--panel-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
border: 1px solid #2a2e40;
}
/* Span rules for responsiveness */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
/* Interactive Clickable Elements */
.clickable {
color: var(--accent-blue);
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
font-size: 0.9em;
}
.clickable:hover {
text-shadow: 0 0 10px var(--accent-blue);
color: #fff;
}
/* Metric Highlights */
.metric-big { font-size: 2.5rem; font-weight: bold; margin: 10px 0; }
.red-text { color: var(--rag-red); }
.green-text { color: var(--rag-green); }
/* Provider Table */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #2a2e40; }
th { color: var(--text-muted); font-weight: 500; }
/* RAG Badges */
.rag-badge {
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: bold;
color: #000;
text-align: center;
display: inline-block;
min-width: 40px;
}
.bg-green { background-color: var(--rag-green); }
.bg-amber { background-color: var(--rag-amber); }
.bg-red { background-color: var(--rag-red); color: #fff; }
/* Inventory Grid */
.inventory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-item { background: #2a2e40; padding: 10px; border-radius: 6px; text-align: center; border: 1px solid transparent; transition: border 0.2s; cursor: pointer;}
.inv-item:hover { border: 1px solid var(--accent-blue); box-shadow: 0 0 10px rgba(0, 210, 255, 0.2); }
.inv-item span { display: block; font-size: 1.2rem; font-weight: bold; }
/* Chart Containers */
.chart-container { position: relative; height: 150px; width: 100%; margin-bottom: 15px;}
.chart-container-large { position: relative; height: 250px; width: 100%; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
</style>
</head>
<body>
<h1 style="margin-bottom: 20px;">ENTERPRISE WAN COMMAND CENTER</h1>
<div class="dashboard">
<!-- ACTIVE ALERTS -->
<div class="panel col-3">
<h2>Active Alerts</h2>
<div class="metric-big">14</div>
<p class="text-muted">Total active alerts</p>
<div style="display: flex; gap: 20px; margin-top: 20px;">
<div>
<div style="color: var(--text-muted); font-size: 0.9rem;">Critical Vulnerabilities</div>
<div class="metric-big red-text">3</div>
</div>
<div>
<div style="color: var(--text-muted); font-size: 0.9rem;">Avg MTTR</div>
<div class="metric-big green-text">2.4h</div>
</div>
</div>
</div>
<!-- CONNECTIVITY HEALTH -->
<div class="panel col-3">
<h2>Connectivity Health</h2>
<div class="metric-big green-text">98.2%</div>
<p style="color: var(--text-muted); margin-bottom: 20px;">Global Uptime</p>
<div class="chart-container">
<canvas id="healthChart"></canvas>
</div>
</div>
<!-- INVENTORY SUMMARY -->
<div class="panel col-3">
<h2>Inventory Summary</h2>
<div class="inventory-grid">
<div class="inv-item" onclick="openModal('Premium+ Sites')">Premium+ <span class="clickable">150</span></div>
<div class="inv-item" onclick="openModal('Premium Sites')">Premium <span class="clickable">420</span></div>
<div class="inv-item" onclick="openModal('Standard Sites')">Standard <span class="clickable">480</span></div>
<div class="inv-item" onclick="openModal('Basic Sites')">Basic <span class="clickable">190</span></div>
<div class="inv-item" onclick="openModal('Fenix Compliant Sites')" style="border-left: 4px solid var(--rag-green);">Fenix Comp <span class="clickable">1080</span></div>
<div class="inv-item" onclick="openModal('Non-Fenix Sites')" style="border-left: 4px solid var(--rag-amber);">Non-Fenix <span class="clickable">160</span></div>
</div>
</div>
<!-- DELIVERY -->
<div class="panel col-3">
<h2>Delivery</h2>
<div style="margin-bottom: 20px;">
<span style="color: var(--text-muted);">ISR In Delivery:</span>
<span class="metric-big" style="margin-left: 10px; font-size: 1.8rem;">22</span>
</div>
<div class="flex-between">
<span style="font-size: 0.9rem;">Delivered ISR over time</span>
</div>
<div class="chart-container">
<canvas id="deliveryChart"></canvas>
</div>
</div>
<!-- PROVIDER RISK SCORECARD -->
<div class="panel col-8">
<h2>Provider Risk Scorecard</h2>
<table>
<thead>
<tr>
<th>Provider</th>
<th>Number of Sites <br><span class="clickable" onclick="openModal('Cost Breakdown by Site')">(click to cost)</span></th>
<th>Health <br><span style="font-size: 0.8rem; color: #666;">(Calc)</span></th>
<th>SLA <br><span class="clickable" onclick="openModal('SLA Details by Site')">(click to site)</span></th>
<th>Cost /y <br><span class="clickable" onclick="openModal('Annual Cost by Site')">(click to site)</span></th>
<th>Cost M/b <br><span class="clickable" onclick="openModal('Cost per Mb by Site')">(click to site)</span></th>
<th>Risk (RAG)</th>
<th>Contract Health <br><span class="clickable" onclick="openModal('Provider Contract Details')">(click to detail)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Vodafone</td>
<td>320</td>
<td><span class="rag-badge bg-green">98%</span></td>
<td>99.9%</td>
<td>£1.2M</td>
<td>£4.20</td>
<td><span class="rag-badge bg-green">LOW</span></td>
<td><span class="rag-badge bg-green">OK</span></td>
</tr>
<tr>
<td>BT Enterprise</td>
<td>450</td>
<td><span class="rag-badge bg-green">96%</span></td>
<td>99.95%</td>
<td>£1.8M</td>
<td>£3.80</td>
<td><span class="rag-badge bg-amber">MED</span></td>
<td><span class="rag-badge bg-amber">RENEWAL</span></td>
</tr>
<tr>
<td>Lumen</td>
<td>270</td>
<td><span class="rag-badge bg-amber">88%</span></td>
<td>99.8%</td>
<td>£950k</td>
<td>£4.50</td>
<td><span class="rag-badge bg-amber">MED</span></td>
<td><span class="rag-badge bg-green">OK</span></td>
</tr>
<tr>
<td>Colt</td>
<td>200</td>
<td><span class="rag-badge bg-red">76%</span></td>
<td>99.5%</td>
<td>£720k</td>
<td>£3.50</td>
<td><span class="rag-badge bg-red">HIGH</span></td>
<td><span class="rag-badge bg-red">AT RISK</span></td>
</tr>
</tbody>
</table>
</div>
<!-- EXEC SUMMARY & AI INSIGHTS -->
<div class="panel col-4">
<h2>Exec Summary & AI Insights</h2>
<div style="background: rgba(0, 210, 255, 0.1); border-left: 4px solid var(--accent-blue); padding: 15px; margin-bottom: 15px;">
<h3 style="color: var(--accent-blue); margin-bottom: 5px; font-size: 1rem;">WHAT CHANGED?</h3>
<ul style="margin: 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.6;">
<li>EMEA traffic increased by 22% this week.</li>
<li>Firewall utilization on standard sites increased by 15%.</li>
</ul>
</div>
<div style="background: rgba(248, 68, 68, 0.1); border-left: 4px solid var(--rag-red); padding: 15px; margin-bottom: 15px;">
<h3 style="color: var(--rag-red); margin-bottom: 5px; font-size: 1rem;">PREDICTED RISKS</h3>
<ul style="margin: 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.6;">
<li>Colt capacity saturation predicted in 45 days.</li>
<li>Security remediation backlog growing beyond SLA.</li>
</ul>
</div>
<div style="background: rgba(0, 210, 106, 0.1); border-left: 4px solid var(--rag-green); padding: 15px;">
<h3 style="color: var(--rag-green); margin-bottom: 5px; font-size: 1rem;">RECOMMENDED ACTIONS</h3>
<ul style="margin: 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.6;">
<li>Upgrade Colt ExpressRoute capacity.</li>
<li>Accelerate vulnerability patching on Non-Fenix sites.</li>
</ul>
</div>
</div>
<!-- RELIABILITY AND OPERATIONS -->
<div class="panel col-6">
<div class="flex-between" style="margin-bottom: 15px; border-bottom: 1px solid #2a2e40; padding-bottom: 10px;">
<h2 style="border: none; margin: 0; padding: 0;">Reliability & Operation</h2>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<div>
<div class="flex-between">
<span style="color: var(--text-muted); font-size: 0.9rem;">Availability</span>
<span class="clickable" onclick="openModal('Availability Details/List')">List/Graph</span>
</div>
<div class="metric-big">99.85%</div>
</div>
<div>
<div class="flex-between">
<span style="color: var(--text-muted); font-size: 0.9rem;">Open Tickets (P1-P4)</span>
<span class="clickable" onclick="openModal('Ticket Backlog Details')">List/Graph</span>
</div>
<div class="metric-big" style="color: var(--rag-amber);">45 <span style="font-size: 0.9rem; color: var(--text-muted); font-weight: normal;">(1 P1, 4 P2)</span></div>
</div>
</div>
<div style="margin-top: 15px;">
<div class="flex-between">
<span style="font-size: 0.9rem;">Incident Trend (Over Time)</span>
<span class="clickable" onclick="openModal('Historical Incident Data')">Enlarge Graph</span>
</div>
<div class="chart-container-large">
<canvas id="incidentChart"></canvas>
</div>
</div>
</div>
<!-- CAPACITY -->
<div class="panel col-6">
<h2>Capacity</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px;">
<div>
<div class="flex-between">
<span style="color: var(--text-muted); font-size: 0.9rem;">Total Bandwidth</span>
<span class="clickable" onclick="openModal('Bandwidth Utilization Graph')">Graph</span>
</div>
<div class="metric-big">450 <span style="font-size: 1rem;">Gbps</span></div>
</div>
<div>
<div style="display: flex; gap: 20px; margin-top: 10px;">
<div class="inv-item" style="flex: 1;" onclick="openModal('Oversized Sites List')">
Oversized <span class="clickable">34</span>
</div>
<div class="inv-item" style="flex: 1; border-color: var(--rag-amber);" onclick="openModal('Undersized Sites List')">
Undersized <span class="clickable" style="color: var(--rag-amber);">18</span>
</div>
</div>
</div>
</div>
<div style="margin-top: 15px;">
<div class="flex-between">
<span style="font-size: 0.9rem;">Capacity Forecast</span>
<span class="clickable" onclick="openModal('Per Site Capacity Forecast')">Per Site Details</span>
</div>
<div class="chart-container-large">
<canvas id="capacityChart"></canvas>
</div>
</div>
</div>
</div>
<script>
// Interactive Click Handler
function openModal(title) {
alert("Interactive Drill-Down Triggered:\n\nOpening detailed view for -> " + title + "\n\n(In production, this would open a dynamic modal, table, or route to a specific site detail page.)");
}
// --- Chart.js Configurations ---
Chart.defaults.color = '#8b92a5';
Chart.defaults.font.family = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { grid: { display: false, drawBorder: false } },
y: { grid: { color: '#2a2e40', drawBorder: false }, beginAtZero: true }
},
interaction: { mode: 'index', intersect: false }
};
// 1. Health Trend Line Chart (Mini)
new Chart(document.getElementById('healthChart'), {
type: 'line',
data: {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6'],
datasets: [{
data: [96, 96.5, 95, 97.2, 98, 98.2],
borderColor: '#00d26a',
borderWidth: 2,
tension: 0.4,
pointRadius: 0
}]
},
options: { ...commonOptions, scales: { x: {display: false}, y: {display: false, min: 90} } }
});
// 2. Delivery Bar Chart
new Chart(document.getElementById('deliveryChart'), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
data: [5, 12, 18, 14, 25, 22],
backgroundColor: '#00d2ff',
borderRadius: 4
}]
},
options: { ...commonOptions, scales: { x: {display: true}, y: {display: false} } }
});
// 3. Incident Trend Line Chart
new Chart(document.getElementById('incidentChart'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{ label: 'P1/P2', data: [12, 19, 8, 15, 6, 5], borderColor: '#f84444', tension: 0.4 },
{ label: 'P3/P4', data: [45, 38, 52, 29, 34, 40], borderColor: '#ffaa00', tension: 0.4 }
]
},
options: commonOptions
});
// 4. Capacity Forecast Chart
new Chart(document.getElementById('capacityChart'), {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4 (FC)', 'Q1 25 (FC)'],
datasets: [
{
label: 'Total Capacity',
data: [500, 500, 550, 600, 600],
borderColor: '#00d26a',
borderDash: [5, 5],
tension: 0.1
},
{
label: 'Utilization',
data: [380, 410, 450, 520, 580],
borderColor: '#00d2ff',
backgroundColor: 'rgba(0, 210, 255, 0.1)',
fill: true,
tension: 0.4
}
]
},
options: commonOptions
});
</script>
</body>
</html>