syntaxbullet/AuroraBot-discord
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dashboard mockup and route

Browse Source
This commit is contained in:
syntaxbullet
2026-01-07 13:29:06 +01:00
parent ac4025e179
commit 63f55b6dfd
6 changed files with 307 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/web/routes/dashboard.ts Normal file
View File

@@ -0,0 +1,95 @@
import { BaseLayout } from "../views/layout";
import { AuroraClient } from "@/lib/BotClient";
export function dashboardRoute(): Response {
// Gather real data where possible, mock where not
const guildCount = AuroraClient.guilds.cache.size;
const userCount = AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0); // Approximation
const commandCount = AuroraClient.commands.size;
const ping = AuroraClient.ws.ping;
// In a real app, these would be dynamic charts or lists
const mockedActivity = [
{ time: "10:42:01", type: "info", message: "User 'Syntax' ran /profile" },
{ time: "10:41:55", type: "success", message: "Task 'HourlyCleanup' completed" },
{ time: "10:40:12", type: "warning", message: "API Latency spike detected (150ms)" },
{ time: "10:39:00", type: "info", message: "Bot connected to Gateway" },
];
const content = `
<div class="dashboard-grid">
<!-- Top Stats Row -->
<div class="stat-card">
<h3>Servers</h3>
<div class="stat-value">${guildCount}</div>
</div>
<div class="stat-card">
<h3>Users</h3>
<div class="stat-value">${userCount}</div>
</div>
<div class="stat-card">
<h3>Commands</h3>
<div class="stat-value">${commandCount}</div>
</div>
<div class="stat-card">
<h3>Ping</h3>
<div class="stat-value">${ping < 0 ? "?" : ping}ms</div>
</div>
<!-- Main Content Area -->
<div class="dashboard-main">
<div class="panel activity-panel">
<div class="panel-header">
<h2>Live Activity</h2>
<span class="badge live">LIVE</span>
</div>
<ul class="activity-feed">
${mockedActivity.map(log => `
<li class="activity-item ${log.type}">
<span class="time">${log.time}</span>
<span class="message">${log.message}</span>
</li>
`).join('')}
<li class="activity-item info"><span class="time">--:--:--</span> <span class="message">Waiting for events...</span></li>
</ul>
</div>
<div class="panel metrics-panel">
<div class="panel-header">
<h2>System Metrics</h2>
</div>
<div class="mock-chart-container">
<div class="mock-chart-bar" style="height: 40%"></div>
<div class="mock-chart-bar" style="height: 60%"></div>
<div class="mock-chart-bar" style="height: 30%"></div>
<div class="mock-chart-bar" style="height: 80%"></div>
<div class="mock-chart-bar" style="height: 50%"></div>
<div class="mock-chart-bar" style="height: 90%"></div>
<div class="mock-chart-bar" style="height: 45%"></div>
</div>
<div class="metrics-legend">
<span>CPU Load (Mock)</span>
</div>
</div>
</div>
<!-- Control Panel -->
<div class="panel control-panel">
<div class="panel-header">
<h2>Quick Actions</h2>
</div>
<div class="action-buttons">
<button class="btn btn-secondary" disabled>Clear Cache</button>
<button class="btn btn-secondary" disabled>Reload Commands</button>
<button class="btn btn-danger" disabled>Restart Bot</button>
</div>
</div>
</div>
`;
const html = BaseLayout({ title: "Dashboard", content });
return new Response(html, {
headers: { "Content-Type": "text/html" },
});
}