2026-05-01 00:29:06 +03:00
{{ define "admin/dashboard.html" }}
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > WarpBox Admin Dashboard< / title >
< link rel = "icon" type = "image/png" href = "/static/WarpBoxLogo.png" >
< link rel = "stylesheet" href = "/static/css/app.css" >
< link rel = "stylesheet" href = "/static/css/window.css" >
< link rel = "stylesheet" href = "/static/css/dashboard.css" >
< link rel = "stylesheet" href = "/static/css/components/buttons.css" >
< link rel = "stylesheet" href = "/static/css/components/toast.css" >
< link rel = "stylesheet" href = "/static/css/admin.css" >
< / head >
< body >
2026-05-04 10:54:44 +03:00
{{ $d := .Dashboard }}
2026-05-01 00:29:06 +03:00
< div class = "admin-shell" >
< div class = "admin-frame" >
{{ template "admin/header.html" . }}
< div class = "win98-window admin-dashboard-window" role = "main" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< img class = "win98-titlebar-icon" src = "/static/WarpBoxLogo.png" alt = "" aria-hidden = "true" >
< h1 > WarpBox Account Control Panel< / h1 >
< / div >
< div class = "win98-window-controls" aria-hidden = "true" >
< button class = "win98-control" type = "button" > _< / button >
< button class = "win98-control" type = "button" > □< / button >
< button class = "win98-control" type = "button" > x< / button >
< / div >
< / div >
< nav class = "menu-bar" aria-label = "Dashboard toolbar" >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > File< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "refresh" > < span > R< / span > < span > Refresh dashboard< / span > < span class = "shortcut" > F5< / span > < / button >
< button class = "menu-action" type = "button" data-command = "dashboard-snapshot" > < span > S< / span > < span > Export dashboard snapshot< / span > < span > < / span > < / button >
< div class = "menu-separator" > < / div >
< button class = "menu-action" type = "button" data-command = "logout" > < span > Q< / span > < span > Log out< / span > < span > < / span > < / button >
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > View< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-scroll-to = "alerts" > < span > !< / span > < span > Go to alerts< / span > < span class = "shortcut" > Alt+A< / span > < / button >
< button class = "menu-action" type = "button" data-scroll-to = "recent-boxes" > < span > B< / span > < span > Go to recent boxes< / span > < span class = "shortcut" > Alt+B< / span > < / button >
< button class = "menu-action" type = "button" data-scroll-to = "recent-activity" > < span > T< / span > < span > Go to recent activity< / span > < span class = "shortcut" > Alt+R< / span > < / button >
< div class = "menu-separator" > < / div >
< button class = "menu-action" type = "button" data-command = "compact-mode" > < span > C< / span > < span > Toggle compact density< / span > < span > < / span > < / button >
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Boxes< / button >
< div class = "menu-popup" >
2026-05-04 10:54:44 +03:00
< button class = "menu-action" type = "button" data-command = "show-all-boxes" > < span > B< / span > < span > Open boxes page< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "export-boxes" > < span > C< / span > < span > Export visible boxes CSV< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "cleanup-expired" > < span > D< / span > < span > Cleanup expired boxes< / span > < span > < / span > < / button >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Alerts< / button >
< div class = "menu-popup" >
2026-05-04 10:54:44 +03:00
< button class = "menu-action" type = "button" data-command = "show-all-alerts" > < span > !< / span > < span > Open alerts page< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "close-low-alerts" > < span > L< / span > < span > Close low alerts< / span > < span > < / span > < / button >
< button class = "menu-action" type = "button" data-command = "export-alerts" > < span > J< / span > < span > Export visible alerts JSON< / span > < span > < / span > < / button >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Admin< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "open-users" > < span > U< / span > < span > Open user manager< / span > < span > < / span > < / button >
2026-05-04 10:54:44 +03:00
< button class = "menu-action" type = "button" data-command = "open-activity" > < span > A< / span > < span > Open activity log< / span > < span > < / span > < / button >
2026-05-01 00:29:06 +03:00
< button class = "menu-action" type = "button" data-command = "open-settings" > < span > G< / span > < span > Open settings< / span > < span > < / span > < / button >
< / div >
< / div >
< div class = "menu-item" >
< button class = "menu-button" type = "button" aria-expanded = "false" > Help< / button >
< div class = "menu-popup" >
< button class = "menu-action" type = "button" data-command = "shortcuts" > < span > K< / span > < span > Keyboard shortcuts< / span > < span > < / span > < / button >
2026-05-04 10:54:44 +03:00
< button class = "menu-action" type = "button" data-command = "about" > < span > W< / span > < span > About this dashboard< / span > < span > < / span > < / button >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< / nav >
< div class = "dashboard-body" >
< section class = "dashboard-hero raised-panel" aria-labelledby = "dashboardTitle" >
< div class = "hero-copy" >
< h2 id = "dashboardTitle" > Dashboard< / h2 >
2026-05-04 10:54:44 +03:00
< p > Live overview for boxes, alerts, storage, users, and recent account activity.< / p >
2026-05-01 00:29:06 +03:00
< / div >
< div class = "hero-status" aria-label = "System summary" >
2026-05-04 10:54:44 +03:00
< div class = "hero-status-row" > < span > Guest uploads< / span > < strong class = "{{ if eq $d.GuestUploadsLabel " enabled " } } status-ok { { else } } status-danger { { end } } " > {{ $d.GuestUploadsLabel }}< / strong > < / div >
< div class = "hero-status-row" > < span > API uploads< / span > < strong class = "{{ if eq $d.APIUploadsLabel " enabled " } } status-ok { { else } } status-danger { { end } } " > {{ $d.APIUploadsLabel }}< / strong > < / div >
< div class = "hero-status-row" > < span > ZIP downloads< / span > < strong class = "{{ if eq $d.ZipDownloadsLabel " enabled " } } status-ok { { else } } status-warn { { end } } " > {{ $d.ZipDownloadsLabel }}< / strong > < / div >
2026-05-01 00:29:06 +03:00
< / div >
< / section >
< section class = "stats-grid" aria-label = "Dashboard statistics" >
< article class = "stat-card sunken-panel is-info" id = "activeBoxesCard" >
< p class = "stat-label" > Active boxes< / p >
2026-05-04 10:54:44 +03:00
< p class = "stat-value" > {{ $d.ActiveBoxes }}< / p >
< p class = "stat-note" > < span class = "stat-note-pill" > +{{ $d.BoxesCreatedToday }} today< / span > < span class = "stat-note-pill" > {{ $d.PasswordedBoxes }} passworded< / span > < / p >
2026-05-01 00:29:06 +03:00
< / article >
< article class = "stat-card sunken-panel is-info" id = "storageCard" >
< p class = "stat-label" > Storage available< / p >
2026-05-04 10:54:44 +03:00
< p class = "stat-value" > {{ $d.StorageFreeLabel }}< / p >
< p class = "stat-note" > < span class = "stat-note-pill" > {{ $d.StorageUsedLabel }} used< / span > < span class = "stat-note-pill" > {{ $d.StorageCapLabel }} cap< / span > < span class = "stat-note-pill" > {{ $d.StorageBackend }} backend< / span > < / p >
< span class = "meter-track" aria-hidden = "true" > < span class = "meter-bar" style = "--meter: {{ $d.StorageMeter }}" > < / span > < / span >
2026-05-01 00:29:06 +03:00
< / article >
< article class = "stat-card sunken-panel is-warning" id = "alertsCard" >
< p class = "stat-label" > Alerts< / p >
2026-05-04 10:54:44 +03:00
< p class = "stat-value" > < span id = "alertCountValue" > {{ $d.OpenAlerts }}< / span > < / p >
< p class = "stat-note" id = "alertStatNote" > < span class = "stat-note-pill" > {{ $d.HighAlerts }} high< / span > < span class = "stat-note-pill" > {{ $d.MediumAlerts }} medium< / span > < span class = "stat-note-pill" > {{ $d.LowAlerts }} low< / span > < / p >
2026-05-01 00:29:06 +03:00
< / article >
< article class = "stat-card sunken-panel is-ok" id = "usersCard" >
< p class = "stat-label" > Users< / p >
2026-05-04 10:54:44 +03:00
< p class = "stat-value" > {{ $d.TotalUsers }}< / p >
< p class = "stat-note" > < span class = "stat-note-pill" > {{ $d.ActiveUsers }} active< / span > < span class = "stat-note-pill" > {{ $d.DisabledUsers }} disabled< / span > < span class = "stat-note-pill" > {{ $d.APIKeyCount }} API keys< / span > < / p >
2026-05-01 00:29:06 +03:00
< / article >
< / section >
< section class = "dashboard-main-grid" aria-label = "Dashboard panels" >
< article id = "alerts" class = "win98-window section-window" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< span class = "win98-titlebar-icon" > !< / span >
< h2 > Alerts Inbox< / h2 >
< / div >
< div class = "titlebar-actions" >
2026-05-01 00:46:10 +03:00
< a class = "titlebar-link-button" href = "/admin/alerts" > Show all< / a >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< div class = "section-body sunken-panel" >
< div class = "scroll-panel alerts-scroll" aria-label = "Scrollable alerts inbox" >
< div class = "alert-list" >
2026-05-04 10:54:44 +03:00
{{ if $d.Alerts }}
{{ range $d.Alerts }}
< div class = "alert-row" data-alert-id = "{{ .ID }}" data-severity = "{{ .Severity }}" data-alert-title = "{{ .Title }}" data-alert-code = "{{ .Code }}" data-alert-meta = '{{ toJSON .Meta }}' >
< span class = "alert-severity" > {{ .Severity }}< / span >
< div >
< p class = "alert-title" > {{ .Title }}< / p >
< p class = "alert-desc" > {{ .Message }}< / p >
< p class = "alert-trace" > {{ .Code }} {{ .Trace }} · {{ .CreatedAtLabel }} UTC · {{ .Status }}< / p >
< / div >
< div class = "alert-actions" >
< button class = "tiny-button" type = "button" data-view-meta > Meta< / button >
< button class = "tiny-button" type = "button" data-close-alert > Close< / button >
< / div >
< / div >
{{ end }}
{{ else }}
< div class = "dashboard-empty-state" > No open alerts. Nice and boring, which is the good kind of admin dashboard.< / div >
{{ end }}
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< / div >
< / article >
< article id = "recent-activity" class = "win98-window section-window" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< span class = "win98-titlebar-icon" > T< / span >
< h2 > Recent Activity< / h2 >
< / div >
< div class = "titlebar-actions" >
2026-05-04 10:54:44 +03:00
< a class = "titlebar-link-button" href = "/admin/activity" > Show all< / a >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< div class = "section-body sunken-panel" >
< div class = "scroll-panel activity-scroll" aria-label = "Scrollable recent activity list" >
< div class = "activity-list" >
2026-05-04 10:54:44 +03:00
{{ if $d.Events }}
{{ range $d.Events }}
< div class = "activity-row" >
< span class = "activity-time" > {{ .CreatedAtLabel }}< / span >
< div >
< p class = "activity-title" > {{ .Message }}< / p >
< p class = "activity-meta" > {{ .Kind }} · {{ .Method }} {{ .Path }} {{ if .IP }}· {{ .IP }}{{ end }}< / p >
< / div >
< span class = "tag {{ .TagClass }}" > {{ .TagLabel }}< / span >
< / div >
{{ end }}
{{ else }}
< div class = "dashboard-empty-state" > No activity has been recorded yet.< / div >
{{ end }}
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< / div >
< / article >
< article id = "recent-boxes" class = "win98-window section-window dashboard-span-2" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< span class = "win98-titlebar-icon" > B< / span >
< h2 > Recent Boxes< / h2 >
< / div >
< div class = "titlebar-actions" >
2026-05-04 10:54:44 +03:00
< a class = "titlebar-link-button" href = "/admin/boxes" > Show all< / a >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< div class = "section-body sunken-panel" >
< div class = "scroll-panel boxes-scroll" aria-label = "Scrollable recent boxes table" >
< table class = "box-table" >
2026-05-04 10:54:44 +03:00
< thead > < tr > < th > Box< / th > < th > Status< / th > < th > Files< / th > < th > Size< / th > < th > Created< / th > < th > Expires< / th > < th > Flags< / th > < th > Actions< / th > < / tr > < / thead >
2026-05-01 00:29:06 +03:00
< tbody >
2026-05-04 10:54:44 +03:00
{{ if $d.Boxes }}
{{ range $d.Boxes }}
< tr data-box-id = "{{ .ID }}" >
< td > {{ .ID }}< / td >
< td > < span class = "tag {{ .StatusClass }}" > {{ .StatusLabel }}< / span > < / td >
< td > {{ .CompleteFiles }}/{{ .FileCount }}< / td >
< td > {{ .TotalSizeLabel }}< / td >
< td > {{ .CreatedAtLabel }}< / td >
< td > {{ .ExpiresAtLabel }}< / td >
< td >
{{ range .Flags }}< span class = "tag info" > {{ . }}< / span > {{ end }}
{{ if not .Flags }}< span class = "tag ok" > plain< / span > {{ end }}
< / td >
< td > < div class = "box-actions" > < a class = "win98-button box-action-button" href = "{{ .OpenURL }}" > Open< / a > < a class = "win98-button box-action-button" href = "/admin/boxes?q={{ .ID }}" > Manage< / a > < / div > < / td >
< / tr >
{{ end }}
{{ else }}
< tr > < td colspan = "8" > No boxes found yet.< / td > < / tr >
{{ end }}
2026-05-01 00:29:06 +03:00
< / tbody >
< / table >
< / div >
< / div >
< / article >
< / section >
< / div >
< div class = "win98-statusbar admin-dashboard-statusbar" >
< span id = "statusText" > Ready< / span >
2026-05-04 10:54:44 +03:00
< span > {{ $d.OpenAlerts }} open alert(s)< / span >
< span > Live dashboard< / span >
2026-05-01 00:29:06 +03:00
< / div >
< / div >
< / div >
< / div >
< div class = "modal-backdrop" data-modal-backdrop > < / div >
< aside class = "popup-window win98-window" data-alert-modal aria-label = "Alert metadata" aria-hidden = "true" >
< div class = "win98-titlebar" >
< div class = "win98-titlebar-label" >
< span class = "win98-titlebar-icon" > !< / span >
< h2 id = "modalTitle" > Alert Metadata< / h2 >
< / div >
< button class = "win98-control" type = "button" data-close-modal > x< / button >
< / div >
< div class = "popup-body sunken-panel" >
< pre class = "metadata-pre" id = "modalMeta" > {}< / pre >
< / div >
< / aside >
< div class = "toast" id = "toast" role = "status" aria-live = "polite" > < / div >
2026-05-04 10:54:44 +03:00
< script id = "dashboard-data" type = "application/json" > { { toJSON $d } } < / script >
2026-05-01 00:29:06 +03:00
< script src = "/static/js/warpbox-ui.js" > < / script >
< script src = "/static/js/admin/dashboard.js" > < / script >
< / body >
< / html >
{{ end }}
