| Server IP : 3.111.61.48 / Your IP : 216.73.216.67 Web Server : Apache System : Linux ip-10-0-5-176 6.8.0-1057-aws #60~22.04.1-Ubuntu SMP Wed May 27 08:16:59 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.2.31 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/vhost/itmtrsrv.arukustech.com/public/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monthly Reports - Server Monitor</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary:#2563eb;
--bg:#f1f5f9;
--sidebar:#0f172a;
--header-bg:#1e293b;
--card:#ffffff;
--text-main:#1e293b;
--text-muted:#94a3b8;
--border:#e2e8f0;
}
body {
font-family:'Inter',system-ui,sans-serif;
background:var(--bg);
margin:0;
display:flex;
min-height:100vh;
}
/* HEADER */
header {
position:fixed;
top:0; left:0; right:0;
height:60px;
background:var(--header-bg);
color:white;
padding:0 2.5rem;
display:flex;
align-items:center;
z-index:1100;
}
/* SIDEBAR */
.sidebar {
width: 260px;
height: 100vh;
background: linear-gradient(180deg,#111827,#1f2937);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
z-index: 1000;
padding-top: 0;
transition: transform 0.3s ease;
box-shadow: 3px 5px 4px rgba(0,0,0,.2);
}
.nav-category {
padding:24px 24px 8px;
font-size:.7rem;
text-transform:uppercase;
color:var(--text-muted);
font-weight:700;
}
.nav-item {
padding:12px 20px;
margin:4px 16px;
display:flex;
gap:12px;
color:#94a3b8;
text-decoration:none;
border-radius:8px;
}
.nav-item:hover { background:rgba(255,255,255,.05); color:white; }
.nav-item.active { background:var(--primary); color:white; }
/* MAIN */
.main-wrapper {
margin-left:260px;
margin-top:60px;
padding:40px;
width:calc(100% - 260px);
}
.card {
background:white;
border-radius:12px;
padding:20px;
border:1px solid var(--border);
box-shadow:0 1px 3px rgba(0,0,0,.05);
min-height:420px; /* ?? FIX */
}
.controls {
display:flex;
gap:16px;
margin-bottom:20px;
}
select,input,button {
padding:9px 14px;
border-radius:6px;
border:1px solid var(--border);
font-size:14px;
}
button {
background:var(--primary);
color:white;
border:none;
cursor:pointer;
}
/* FOOTER */
footer {
position:fixed;
bottom:0;
left:260px;
right:0;
height:45px;
background:white;
border-top:1px solid var(--border);
display:flex;
align-items:center;
justify-content:flex-end;
padding:0 40px;
font-size:.8rem;
color:#64748b;
}
@media (max-width: 768px) {
header {
padding: 0 12px;
height: 60px;
}
header h2 {
font-size: 1rem;
display: flex;
align-items: center;
}
.sidebar {
width: 250px !important;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1200;
top: 0;
left: 0;
}
.sidebar.active {
transform: translateX(0);
}
.nav-item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 18px;
margin: 6px 12px;
}
.nav-item i {
width: 20px;
margin-right: 10px;
}
.nav-item span {
display: inline !important;
}
.nav-category {
display: block !important;
}
.main-wrapper {
margin-left: 0 !important;
width: 100% !important;
padding: 80px 15px 80px;
}
.controls {
flex-direction: column;
}
select,
input,
button {
width: 100%;
box-sizing: border-box;
}
.card {
min-height: 350px;
overflow-x: auto;
}
footer {
left: 0 !important;
justify-content: center;
padding: 0 10px;
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<header>
<h2>
<i class="fas fa-bars menu-toggle" onclick="toggleSidebar()" style="cursor:pointer;margin-right:10px;"></i>
<i class="fas fa-chart-line"></i>
Monthly Server Reports
</h2>
</header>
<nav class="sidebar">
<!-- Top Section -->
<div>
<!-- Logo / Brand -->
<div style="padding:28px 24px;border-bottom:1px solid rgba(255,255,255,0.08);">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">
<i class="fas fa-network-wired" style="color:#60a5fa;"></i>
InfraPanel
</h2>
<p style="margin:8px 0 0;color:#9ca3af;font-size:13px;">
Infrastructure Monitoring
</p>
</div>
<!-- Navigation -->
<div style="padding:20px 14px;">
<!-- Main -->
<div style="margin-bottom:10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Main
</div>
<a href="index.html"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.35);">
<i class="fas fa-th-large" style="font-size:18px;"></i>
<span>Dashboard</span>
</a>
<!-- Operations -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Operations
</div>
<a href="admin.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-server" style="font-size:17px;color:#60a5fa;"></i>
<span>Manage Servers</span>
</a>
<a href="user.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-users-cog" style="font-size:17px;color:#34d399;"></i>
<span>User Management</span>
</a>
<!-- Reports -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Reports
</div>
<a href="alerts.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-history" style="font-size:17px;color:#fbbf24;"></i>
<span>Alert History</span>
</a>
<a href="reports.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-chart-line" style="font-size:17px;color:#c084fc;"></i>
<span>Reports</span>
</a>
</div>
</div>
<!-- Bottom Logout -->
<div style="padding:18px;border-top:1px solid rgba(255,255,255,0.08);">
<a href="#"
onclick="logout()"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(239,68,68,0.12);color:#f87171;text-decoration:none;font-weight:600;">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</nav>
<div class="main-wrapper">
<h2 style="margin-top:0;">Usage Analytics</h2>
<div class="controls">
<select id="serverSelect"></select>
<input type="month" id="monthPicker">
<button onclick="loadReport()">Generate</button>
</div>
<div class="card">
<canvas id="reportChart"></canvas>
<div id="noData" style="display:none;text-align:center;color:#94a3b8;margin-top:140px;">
No data available for selected period
</div>
</div>
</div>
<footer>
© 2026 | Designed by <strong>Company Pvt. Ltd.</strong>
</footer>
<script>
const token = localStorage.getItem("token");
if (!token) window.location.href = "login.html";
function logout(){
localStorage.removeItem("token");
window.location.href="login.html";
}
let chart = null;
/* Load servers */
async function loadServers(){
const res = await fetch("/api/v1/servers", {
headers:{Authorization:"Bearer "+token}
});
if(res.status===401) return logout();
const servers = await res.json();
const sel = document.getElementById("serverSelect");
sel.innerHTML = "";
servers.forEach(s=>{
const o=document.createElement("option");
o.value=s.id;
o.textContent=s.server_name;
sel.appendChild(o);
});
if (servers.length) loadReport(); // ?? auto-load
}
/* Load report */
async function loadReport(){
const server=document.getElementById("serverSelect").value;
const month=document.getElementById("monthPicker").value;
if(!server||!month) return;
const res = await fetch(`/api/v1/reports/monthly?server_id=${server}&month=${month}`,{
headers:{Authorization:"Bearer "+token}
});
if(res.status===401) return logout();
const data = await res.json();
console.log("Monthly report:", data);
if (!data.length) {
document.getElementById("noData").style.display="block";
if(chart) chart.destroy();
return;
}
document.getElementById("noData").style.display="none";
renderChart(
data.map(d=>d.day),
data.map(d=>d.cpu),
data.map(d=>d.ram),
data.map(d=>d.disk)
);
}
/* Chart */
function renderChart(labels,cpu,ram,disk){
if(chart) chart.destroy();
chart=new Chart(document.getElementById("reportChart"),{
type:"line",
data:{
labels,
datasets:[
{label:"CPU %",data:cpu,borderColor:"#3b82f6",tension:.4},
{label:"RAM %",data:ram,borderColor:"#f59e0b",tension:.4},
{label:"Disk %",data:disk,borderColor:"#10b981",tension:.4}
]
},
options:{
responsive:true,
maintainAspectRatio:false,
scales:{y:{min:0,max:100,ticks:{callback:v=>v+"%"}}}
}
});
}
/* Init */
document.getElementById("monthPicker").value =
new Date().toISOString().slice(0,7);
loadServers();
function toggleSidebar() {
document.querySelector(".sidebar").classList.toggle("active");
}
</script>
</body>
</html>