feat(admin): add dashboard overview charts and log pagination
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m40s

Enhance the admin panel by introducing visual overview charts for upload and storage trends, along with status bars for system metrics.

Additionally, implement pagination for the admin logs view, allowing users to navigate through log entries with configurable page sizes. Corresponding CSS styles have been added for the new charts, metrics grid, and pagination controls.
This commit is contained in:
2026-06-01 04:22:38 +03:00
parent cc91ce120d
commit ffa2d9636b
9 changed files with 618 additions and 111 deletions

View File

@@ -58,6 +58,55 @@
</article>
</div>
<div class="admin-charts">
<div class="card chart-card">
<div class="card-content">
<h2>Uploads per day</h2>
<p class="muted-copy">New boxes created over the last 14 days.</p>
<div class="bar-chart" role="img" aria-label="Uploads per day for the last 14 days">
{{range .Data.Overview.UploadDays}}
<div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
<span class="bar-chart-value">{{.Value}}</span>
<span class="bar-chart-bar" style="height: {{.Height}}%"></span>
<span class="bar-chart-label">{{.Label}}</span>
</div>
{{end}}
</div>
</div>
</div>
<div class="card chart-card">
<div class="card-content">
<h2>Box status</h2>
<p class="muted-copy">Share of all {{.Data.Stats.TotalBoxes}} boxes.</p>
<div class="stat-bars">
{{range .Data.Overview.StatusBars}}
<div class="stat-bar">
<span>{{.Label}} <strong>{{.Value}}</strong></span>
<span class="stat-bar-track"><span class="stat-bar-fill" style="width: {{.Percent}}%"></span></span>
</div>
{{end}}
</div>
</div>
</div>
</div>
<div class="card chart-card">
<div class="card-content">
<h2>Storage added per day</h2>
<p class="muted-copy">Bytes uploaded over the last 14 days.</p>
<div class="bar-chart" role="img" aria-label="Storage added per day for the last 14 days">
{{range .Data.Overview.StorageDays}}
<div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
<span class="bar-chart-value">{{.Value}}</span>
<span class="bar-chart-bar" style="height: {{.Height}}%"></span>
<span class="bar-chart-label">{{.Label}}</span>
</div>
{{end}}
</div>
</div>
</div>
<div class="card admin-table-card">
<div class="card-content">
<div class="table-header">