{% extends "base.html" %}{% block title %}Dashboard{% endblock %}{% block body %}
<div class="head"><div><small>CONTROL CENTER</small><h1>Dashboard</h1><p>Fast overview of hosting, system health and live operations.</p></div><div class="action-row"><a class="soft" href="/admin/monitor">Live Monitor</a><a class="btn" href="/admin/websites">Manage Websites</a></div></div>
<div class="stats"><div class="card stat"><small>HOSTING ACCOUNTS</small><strong>{{counts['Hosting Accounts']}}</strong><span>Customer accounts</span></div><div class="card stat"><small>WEBSITES</small><strong>{{counts['Websites']}}</strong><span>Managed domains</span></div><div class="card stat"><small>PACKAGES</small><strong>{{counts['Packages']}}</strong><span>Hosting plans</span></div><div class="card stat"><small>DATABASES</small><strong>{{counts['Databases']}}</strong><span>Managed databases</span></div></div>
<section class="card"><div class="cardhead"><div><small>OPERATIONS</small><h2>Control Center</h2></div><span class="tag">v{{version}}</span></div><div class="quick"><a href="/admin/tasks">⚡ Task Center <small class="muted">Jobs & live processes</small></a><a href="/admin/monitor">◉ Monitor <small class="muted">Charts & health</small></a><a href="/admin/services">⚙ Services <small class="muted">System controls</small></a><a href="/admin/store">▣ App Store <small class="muted">Install software</small></a><a href="/admin/websites">⌂ Websites <small class="muted">Nginx / Apache</small></a></div></section>
<section class="monitor-layout"><div class="card"><div class="cardhead"><div><small>LIVE RESOURCES</small><h2>Server pulse</h2></div><a class="soft" href="/admin/monitor">Open full monitor →</a></div><div class="info"><div><small>CPU</small><b id="dash-cpu">—</b></div><div><small>RAM</small><b id="dash-ram">—</b></div><div><small>DISK</small><b id="dash-disk">—</b></div><div><small>LOAD</small><b id="dash-load">—</b></div></div><div class="monitor-chart" style="height:190px;margin-top:16px"><canvas id="dash-chart"></canvas></div></div><div class="card"><div class="cardhead"><div><small>SYSTEM</small><h2>Server identity</h2></div><span class="ok">● Online</span></div><div class="info" style="grid-template-columns:1fr 1fr"><div><small>Hostname</small><b>{{hostname}}</b></div><div><small>OS</small><b>{{osname}}</b></div><div><small>Admin</small><b>scroot</b></div><div><small>Version</small><b>{{version}}</b></div></div></div></section>
<script>
const dc=document.getElementById('dash-chart'),dctx=dc.getContext('2d'),dh=[];function resizeDash(){dc.width=dc.clientWidth*devicePixelRatio;dc.height=dc.clientHeight*devicePixelRatio;dctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0)}function drawDash(){const w=dc.clientWidth,h=dc.clientHeight;dctx.clearRect(0,0,w,h);dctx.strokeStyle='#e7edf6';dctx.lineWidth=1;for(let i=1;i<4;i++){let y=i*h/4;dctx.beginPath();dctx.moveTo(0,y);dctx.lineTo(w,y);dctx.stroke()}if(dh.length<2)return;dctx.strokeStyle='#2d6df6';dctx.lineWidth=2.5;dctx.beginPath();dh.forEach((v,i)=>{let x=i*(w-8)/(dh.length-1)+4,y=h-5-(Math.min(100,v)/100)*(h-10);i?dctx.lineTo(x,y):dctx.moveTo(x,y)});dctx.stroke()}resizeDash();addEventListener('resize',()=>{resizeDash();drawDash()});async function dashPoll(){try{const d=await fetch('/api/monitor',{cache:'no-store'}).then(r=>r.json());dashCpu.textContent=d.cpu_percent+'%';dashRam.textContent=d.memory.percent+'%';dashDisk.textContent=d.disk.percent+'%';dashLoad.textContent=d.load['1m'].toFixed(2);dh.push(d.cpu_percent);if(dh.length>30)dh.shift();drawDash()}catch(e){}}const dashCpu=document.getElementById('dash-cpu'),dashRam=document.getElementById('dash-ram'),dashDisk=document.getElementById('dash-disk'),dashLoad=document.getElementById('dash-load');dashPoll();setInterval(dashPoll,4000);
</script>{% endblock %}