h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin page updates

Browse Source
This commit is contained in:
Haelnorr
2026-02-14 14:54:06 +11:00
parent 295e373f37
commit e34bec2f9d
22 changed files with 2136 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
internal/view/adminview/audit_log_detail.templ
View File

@@ -21,7 +21,7 @@ templ AuditLogDetail(log *db.AuditLog) {
>
<!-- Modal content -->
<div
class="bg-base border border-surface1 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
class="bg-base border border-surface1 rounded-lg max-w-5xl w-full max-h-[90vh] overflow-y-auto"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
@@ -30,102 +30,143 @@ templ AuditLogDetail(log *db.AuditLog) {
x-transition:leave-end="opacity-0 scale-95"
>
<!-- Header -->
<div class="flex justify-between items-center p-6 border-b border-surface1">
<h2 class="text-xl font-bold text-text">Audit Log Details</h2>
<button
@click="show = false; setTimeout(() => document.getElementById('modal-container').innerHTML = '', 200)"
class="text-subtext0 hover:text-text transition"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<div class="bg-mantle border-b border-surface1 px-6 py-4">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center gap-3">
<h2 class="text-xl font-bold text-text">Audit Log #{ fmt.Sprintf("%d", log.ID) }</h2>
@resultBadge(log.Result)
</div>
<p class="text-sm text-subtext0 mt-1">{ formatDetailTimestamp(log.CreatedAt) }</p>
</div>
<button
@click="show = false; setTimeout(() => document.getElementById('modal-container').innerHTML = '', 200)"
class="text-subtext0 hover:text-text transition ml-4"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Body -->
<div class="p-6 space-y-4">
<!-- ID -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">ID</label>
<p class="text-text">{ fmt.Sprintf("%d", log.ID) }</p>
</div>
<!-- User -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">User</label>
<p class="text-text">
if log.User != nil {
{ log.User.Username } <span class="text-subtext1 text-sm">(ID: { fmt.Sprintf("%d", log.UserID) })</span>
} else {
<span class="text-subtext1 italic">Unknown User (ID: { fmt.Sprintf("%d", log.UserID) })</span>
}
</p>
</div>
<!-- Timestamp -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Timestamp</label>
<p class="text-text">{ formatDetailTimestamp(log.CreatedAt) }</p>
</div>
<!-- Action -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Action</label>
<p class="text-text font-mono">{ log.Action }</p>
</div>
<!-- Resource Type -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Resource Type</label>
<p class="text-text">{ log.ResourceType }</p>
</div>
<!-- Resource ID -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Resource ID</label>
<p class="text-text font-mono">
if log.ResourceID != nil {
{ *log.ResourceID }
} else {
<span class="text-subtext1 italic">N/A</span>
}
</p>
</div>
<!-- Result -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Result</label>
<div>
@resultBadge(log.Result)
<div class="p-6">
<!-- Main Info Grid -->
<div class="bg-surface0 border border-surface1 rounded-lg p-4 mb-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3">
<!-- User -->
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
<div class="min-w-0">
<div class="text-xs text-subtext0">User</div>
<div class="text-sm text-text font-medium truncate">
if log.User != nil {
{ log.User.Username }
<span class="text-subtext1 font-normal">({ fmt.Sprintf("%d", log.UserID) })</span>
} else {
<span class="text-subtext1 italic">Unknown ({ fmt.Sprintf("%d", log.UserID) })</span>
}
</div>
</div>
</div>
<!-- Action -->
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<div class="min-w-0">
<div class="text-xs text-subtext0">Action</div>
<div class="text-sm text-text font-mono truncate">{ log.Action }</div>
</div>
</div>
<!-- Resource Type -->
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
</svg>
<div class="min-w-0">
<div class="text-xs text-subtext0">Resource Type</div>
<div class="text-sm text-text truncate">{ log.ResourceType }</div>
</div>
</div>
<!-- Resource ID -->
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
<div class="min-w-0">
<div class="text-xs text-subtext0">Resource ID</div>
<div class="text-sm text-text font-mono truncate">
if log.ResourceID != nil {
{ *log.ResourceID }
} else {
<span class="text-subtext1 italic">N/A</span>
}
</div>
</div>
</div>
<!-- IP Address -->
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<div class="min-w-0">
<div class="text-xs text-subtext0">IP Address</div>
<div class="text-sm text-text font-mono truncate">{ log.IPAddress }</div>
</div>
</div>
</div>
</div>
<!-- Error Message (if applicable) -->
if log.ErrorMessage != nil && *log.ErrorMessage != "" {
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Error Message</label>
<div class="bg-red/10 border border-red/30 rounded p-3">
<p class="text-red font-mono text-sm">{ *log.ErrorMessage }</p>
<div class="bg-red/10 border border-red/30 rounded-lg p-4 mb-4">
<div class="flex gap-2">
<svg class="w-5 h-5 text-red flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div class="flex-1 min-w-0">
<div class="text-sm font-semibold text-red mb-1">Error Message</div>
<p class="text-red font-mono text-sm break-words">{ *log.ErrorMessage }</p>
</div>
</div>
</div>
}
<!-- IP Address -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">IP Address</label>
<p class="text-text font-mono">{ log.IPAddress }</p>
</div>
<!-- User Agent -->
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">User Agent</label>
<p class="text-text text-sm break-all">{ log.UserAgent }</p>
<div class="bg-surface0 border border-surface1 rounded-lg p-4 mb-4">
<div class="flex gap-2">
<svg class="w-4 h-4 text-subtext0 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<div class="flex-1 min-w-0">
<div class="text-xs text-subtext0 mb-1">User Agent</div>
<p class="text-sm text-text break-words">{ log.UserAgent }</p>
</div>
</div>
</div>
<!-- Details JSON -->
if log.Details != nil && len(log.Details) > 0 && string(log.Details) != "null" {
<div>
<label class="block text-sm font-semibold text-subtext0 mb-1">Details</label>
<div class="bg-mantle border border-surface1 rounded p-3 overflow-x-auto">
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 px-4 py-2 border-b border-surface1">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-subtext0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
<span class="text-sm font-semibold text-text">Details (JSON)</span>
</div>
</div>
<div class="p-4 overflow-x-auto max-h-96">
<pre class="text-text text-xs font-mono whitespace-pre-wrap">{ formatJSON(log.Details) }</pre>
</div>
</div>
}
</div>
<!-- Footer -->
<div class="flex justify-end gap-2 p-6 border-t border-surface1">
<div class="flex justify-end gap-2 px-6 py-4 border-t border-surface1 bg-mantle">
<button
@click="show = false; setTimeout(() => document.getElementById('modal-container').innerHTML = '', 200)"
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
class="px-4 py-2 bg-blue hover:bg-blue/80 text-mantle rounded font-medium transition hover:cursor-pointer"
>
Close
</button>

341
internal/view/adminview/audit_logs_list.templ
View File

@@ -1,101 +1,65 @@
package adminview
import (
"git.haelnorr.com/h/oslstats/internal/db"
"fmt"
"git.haelnorr.com/h/oslstats/internal/db"
"time"
)
templ AuditLogsList(logs *db.List[db.AuditLog], users []*db.User, actions []string, resourceTypes []string) {
<div class="space-y-4">
<!-- Header -->
<div class="flex justify-between items-center">
<div class="flex justify-between items-center mb-6 px-4">
<h1 class="text-2xl font-bold text-text">Audit Logs</h1>
</div>
<!-- Filters -->
<div class="bg-surface0 border border-surface1 rounded-lg p-4">
<div class="bg-surface0 border border-surface1 rounded-lg p-4 mb-6">
<form
id="audit-filters-form"
hx-post="/admin/audit/filter"
hx-target="#audit-results"
hx-trigger="change from:select, change from:input delay:500ms"
hx-target="#audit-results-container"
hx-trigger="submit"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
<!-- User Filter -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">User</label>
<select
name="user_id"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
>
<option value="">All Users</option>
for _, user := range users {
<option value={ fmt.Sprintf("%d", user.ID) }>{ user.Username }</option>
}
</select>
</div>
<!-- Action Filter -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">Action</label>
<select
name="action"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
>
<option value="">All Actions</option>
for _, action := range actions {
<option value={ action }>{ action }</option>
}
</select>
</div>
<!-- Resource Type Filter -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">Resource Type</label>
<select
name="resource_type"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
>
<option value="">All Resource Types</option>
for _, rt := range resourceTypes {
<option value={ rt }>{ rt }</option>
}
</select>
</div>
<!-- Result Filter -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">Result</label>
<select
name="result"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
>
<option value="">All Results</option>
<option value="success">Success</option>
<option value="denied">Denied</option>
<option value="error">Error</option>
</select>
</div>
<!-- Start Date Filter -->
<!-- User Filter (Custom Multi-select Dropdown) -->
@multiSelectDropdown("user_id", "Users", userOptions(users))
<!-- Action Filter (Custom Multi-select Dropdown) -->
@multiSelectDropdown("action", "Actions", stringOptions(actions))
<!-- Resource Type Filter (Custom Multi-select Dropdown) -->
@multiSelectDropdown("resource_type", "Resource Types", stringOptions(resourceTypes))
<!-- Result Filter (Custom Multi-select Dropdown) -->
@multiSelectDropdown("result", "Results", []selectOption{
{Value: "success", Label: "Success"},
{Value: "denied", Label: "Denied"},
{Value: "error", Label: "Error"},
})
<!-- Start Date Filter (Flatpickr) -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">Start Date</label>
<input
type="date"
type="text"
name="start_date"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
class="flatpickr-date w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
placeholder="DD/MM/YYYY"
onchange="this.form.requestSubmit()"
/>
</div>
<!-- End Date Filter -->
<!-- End Date Filter (Flatpickr) -->
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">End Date</label>
<input
type="date"
type="text"
name="end_date"
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
class="flatpickr-date w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
placeholder="DD/MM/YYYY"
onchange="this.form.requestSubmit()"
/>
</div>
<!-- Clear Filters Button -->
<div class="md:col-span-2 lg:col-span-3">
<div class="md:col-span-2 lg:col-span-3 flex gap-2">
<button
type="button"
onclick="document.getElementById('audit-filters-form').reset(); htmx.trigger('#audit-filters-form', 'change')"
onclick="clearAuditFilters()"
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
>
Clear Filters
@@ -103,32 +67,40 @@ templ AuditLogsList(logs *db.List[db.AuditLog], users []*db.User, actions []stri
</div>
</form>
</div>
<!-- Audit logs results container -->
<div id="audit-results">
<!-- Results container - this gets replaced by HTMX -->
<div id="audit-results-container">
@AuditLogsResults(logs)
</div>
<!-- Modal container for detail view -->
<div id="modal-container"></div>
</div>
<!-- Modal container for detail view -->
<div id="modal-container"></div>
}
templ AuditLogsResults(logs *db.List[db.AuditLog]) {
if len(logs.Items) == 0 {
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
<p class="text-subtext0 text-lg">No audit logs found</p>
</div>
} else {
<div
x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
logs.PageOpts.Page,
logs.PageOpts.PerPage,
logs.PageOpts.Order,
logs.PageOpts.OrderBy) }
>
<!-- Results section -->
if len(logs.Items) == 0 {
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
<p class="text-subtext0 text-lg">No audit logs found</p>
</div>
} else {
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Timestamp</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">User</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Action</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Resource</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Resource ID</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Result</th>
@auditTableHeader("created_at", "Timestamp", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
@auditTableHeader("user_id", "User", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
@auditTableHeader("action", "Action", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
@auditTableHeader("resource_type", "Resource", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
@auditTableHeader("resource_id", "Resource ID", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
@auditTableHeader("result", "Result", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
</tr>
</thead>
@@ -145,7 +117,7 @@ templ AuditLogsResults(logs *db.List[db.AuditLog]) {
<span class="text-subtext1 italic">Unknown</span>
}
</td>
<td class="px-4 py-3 text-sm text-subtext0 font-mono">
<td class="px-4 py-3 text-xs text-subtext0 font-mono">
{ log.Action }
</td>
<td class="px-4 py-3 text-sm text-subtext0">
@@ -176,45 +148,188 @@ templ AuditLogsResults(logs *db.List[db.AuditLog]) {
</table>
</div>
</div>
<!-- Pagination -->
{{
totalPages := (logs.Total + logs.PageOpts.PerPage - 1) / logs.PageOpts.PerPage
if logs.PageOpts.PerPage == 0 {
totalPages = 1
}
}}
if totalPages > 1 {
<div class="flex justify-center gap-2 mt-4">
if logs.PageOpts.Page > 1 {
<button
hx-post={ fmt.Sprintf("/admin/audit/filter?page=%d", logs.PageOpts.Page-1) }
hx-target="#audit-results"
hx-include="#audit-filters-form"
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
<!-- Pagination controls -->
<div class="mt-6 flex flex-col gap-4">
<!-- Page info and per-page selector -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
<div>
if logs.Total > 0 {
Showing { fmt.Sprintf("%d", logs.PageOpts.StartItem()) } - { fmt.Sprintf("%d", logs.PageOpts.EndItem(logs.Total)) } of { fmt.Sprintf("%d", logs.Total) } results
} else {
No results
}
</div>
<div class="flex items-center gap-2">
<label for="per-page-select">Per page:</label>
<select
id="per-page-select"
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
x-model.number="perPage"
@change="submitAuditFilter(page, perPage, order, orderBy)"
>
Previous
</button>
}
<span class="px-4 py-2 text-subtext0">
Page { fmt.Sprintf("%d", logs.PageOpts.Page) } of { fmt.Sprintf("%d", totalPages) }
</span>
if logs.PageOpts.Page < totalPages {
<button
hx-post={ fmt.Sprintf("/admin/audit/filter?page=%d", logs.PageOpts.Page+1) }
hx-target="#audit-results"
hx-include="#audit-filters-form"
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
>
Next
</button>
}
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<!-- Pagination buttons -->
if logs.Total > 0 && logs.PageOpts.TotalPages(logs.Total) > 1 {
<div class="flex flex-wrap justify-center items-center gap-2">
<!-- First button -->
<button
type="button"
@click="submitAuditFilter(1, perPage, order, orderBy)"
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) }
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">First</span>
<span class="sm:hidden">&lt;&lt;</span>
</button>
<!-- Previous button -->
<button
type="button"
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.Page-1) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) }
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Previous</span>
<span class="sm:hidden">&lt;</span>
</button>
<!-- Page numbers -->
for _, pageNum := range logs.PageOpts.GetPageRange(logs.Total, 7) {
<button
type="button"
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", pageNum) }
class={ "px-3 py-2 rounded-lg border transition",
templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == logs.PageOpts.Page),
templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != logs.PageOpts.Page) }
>
{ fmt.Sprintf("%d", pageNum) }
</button>
}
<!-- Next button -->
<button
type="button"
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.Page+1) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) }
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Next</span>
<span class="sm:hidden">&gt;</span>
</button>
<!-- Last button -->
<button
type="button"
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.TotalPages(logs.Total)) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) }
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Last</span>
<span class="sm:hidden">&gt;&gt;</span>
</button>
</div>
}
</div>
}
</div>
}
templ auditTableHeader(field string, label string, currentField string, currentOrder string) {
{{
isActive := currentField == field
baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
arrow := ""
if isActive {
if currentOrder == "ASC" {
arrow = " ↑"
} else {
arrow = " ↓"
}
}
}}
<th class={ baseClasses } @click={ fmt.Sprintf("sortAuditColumn('%s', order, orderBy)", field) }>
{ label }
if arrow != "" {
<span class="text-blue">{ arrow }</span>
}
</th>
}
type selectOption struct {
Value string
Label string
}
func userOptions(users []*db.User) []selectOption {
opts := make([]selectOption, len(users))
for i, u := range users {
opts[i] = selectOption{Value: fmt.Sprintf("%d", u.ID), Label: u.Username}
}
return opts
}
func stringOptions(strs []string) []selectOption {
opts := make([]selectOption, len(strs))
for i, s := range strs {
opts[i] = selectOption{Value: s, Label: s}
}
return opts
}
templ multiSelectDropdown(name string, label string, options []selectOption) {
{{ containerId := name + "-container" }}
<div>
<label class="block text-sm font-medium text-subtext0 mb-1">{ label }</label>
<div
id={ containerId }
class="multi-select-container relative"
>
<!-- Hidden input to store values -->
<input type="hidden" name={ name } value=""/>
<!-- Trigger button -->
<button
type="button"
onclick={ templ.JSUnsafeFuncCall(fmt.Sprintf("toggleMultiSelect('%s')", containerId)) }
class="multi-select-trigger w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text text-left flex justify-between items-center hover:border-surface2 focus:outline-none focus:border-blue"
>
<span class="multi-select-selected">
<span class="text-subtext1">Select...</span>
</span>
<svg class="w-4 h-4 text-subtext0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<!-- Dropdown -->
<div
id={ containerId + "-dropdown" }
class="multi-select-dropdown hidden absolute z-50 w-full mt-1 bg-mantle border border-surface1 rounded shadow-lg max-h-60 overflow-y-auto"
>
for _, opt := range options {
<div
data-value={ opt.Value }
class="multi-select-option px-3 py-2 text-sm text-text cursor-pointer hover:bg-surface1 transition-colors"
onclick={ templ.JSUnsafeFuncCall(fmt.Sprintf("toggleMultiSelectOption('%s', '%s', '%s')", containerId, opt.Value, opt.Label)) }
>
{ opt.Label }
</div>
}
</div>
</div>
</div>
}
templ resultBadge(result string) {
{{
{{
var classes string
switch result {
case "success":

7
internal/view/adminview/dashboard_layout.templ
View File

@@ -4,6 +4,11 @@ import "git.haelnorr.com/h/oslstats/internal/view/baseview"
templ DashboardLayout(activeSection string) {
@baseview.Layout("Admin Dashboard") {
<!-- Flatpickr CSS and JS (loaded globally for admin dashboard) -->
<link rel="stylesheet" href="/static/vendored/flatpickr@4.6.13.min.css"/>
<link rel="stylesheet" href="/static/css/flatpickr-catppuccin.css"/>
<script src="/static/vendored/flatpickr@4.6.13.min.js" defer></script>
<div class="max-w-screen-2xl mx-auto px-2">
<!-- Page Title -->
<h1 class="text-2xl font-bold text-text mb-4">Admin Dashboard</h1>
@@ -25,7 +30,7 @@ templ DashboardLayout(activeSection string) {
</main>
</div>
</div>
<script src="/static/js/admin.js"></script>
<script src="/static/js/admin.js" defer></script>
}
}

115
internal/view/adminview/roles_list.templ
View File

@@ -5,13 +5,20 @@ import (
"git.haelnorr.com/h/oslstats/internal/db"
)
templ RolesList(roles []*db.Role) {
<div class="space-y-4">
templ RolesList(roles *db.List[db.Role]) {
<div
id="roles-list-container"
x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
roles.PageOpts.Page,
roles.PageOpts.PerPage,
roles.PageOpts.Order,
roles.PageOpts.OrderBy) }
>
<!-- Header with Create Button -->
<div class="flex justify-between items-center">
<div class="flex justify-between items-center mb-4">
<h1 class="text-2xl font-bold text-text">Role Management</h1>
<button
class="px-4 py-2 bg-blue text-mantle rounded-lg font-semibold hover:bg-sky transition"
class="px-4 py-2 bg-blue text-mantle rounded-lg font-semibold hover:bg-sky transition hover:cursor-pointer"
hx-get="/admin/roles/create"
hx-target="#role-modal"
hx-swap="innerHTML"
@@ -20,29 +27,68 @@ templ RolesList(roles []*db.Role) {
</button>
</div>
<!-- Roles Table -->
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<table class="w-full">
<thead class="bg-surface1">
<tr>
<th class="px-6 py-3 text-left text-sm font-semibold text-text">Name</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-text">Description</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-text">Type</th>
<th class="px-6 py-3 text-right text-sm font-semibold text-text">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-surface1">
if len(roles) == 0 {
if len(roles.Items) == 0 {
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
<p class="text-subtext0 text-lg">No roles found</p>
</div>
} else {
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<td colspan="4" class="px-6 py-8 text-center text-subtext0">No roles found</td>
@roleTableHeader("display_name", "Name", roles.PageOpts.OrderBy, string(roles.PageOpts.Order))
<th class="px-6 py-3 text-left text-sm font-semibold text-text">Description</th>
@roleTableHeader("is_system", "Type", roles.PageOpts.OrderBy, string(roles.PageOpts.Order))
<th class="px-6 py-3 text-right text-sm font-semibold text-text">Actions</th>
</tr>
} else {
for _, role := range roles {
</thead>
<tbody class="divide-y divide-surface1">
for _, role := range roles.Items {
@roleRow(role)
}
}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
<!-- Pagination controls -->
<div class="mt-6 flex flex-col gap-4">
<!-- Page info and per-page selector -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
<div>
if roles.Total > 0 {
Showing { fmt.Sprintf("%d", roles.PageOpts.StartItem()) } - { fmt.Sprintf("%d", roles.PageOpts.EndItem(roles.Total)) } of { fmt.Sprintf("%d", roles.Total) } roles
} else {
No roles
}
</div>
<div class="flex items-center gap-2">
<label for="roles-per-page-select">Per page:</label>
<select
id="roles-per-page-select"
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
x-model.number="perPage"
@change="submitRolesPage(page, perPage, order, orderBy)"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<!-- Pagination buttons -->
if roles.Total > 0 && roles.PageOpts.TotalPages(roles.Total) > 1 {
<div class="flex flex-wrap justify-center items-center gap-2">
@paginationButton("First", "<<", fmt.Sprintf("submitRolesPage(1, perPage, order, orderBy)"), !roles.PageOpts.HasPrevPage())
@paginationButton("Previous", "<", fmt.Sprintf("submitRolesPage(%d, perPage, order, orderBy)", roles.PageOpts.Page-1), !roles.PageOpts.HasPrevPage())
for _, pageNum := range roles.PageOpts.GetPageRange(roles.Total, 7) {
@pageNumberButton(pageNum, roles.PageOpts.Page, "submitRolesPage")
}
@paginationButton("Next", ">", fmt.Sprintf("submitRolesPage(%d, perPage, order, orderBy)", roles.PageOpts.Page+1), !roles.PageOpts.HasNextPage(roles.Total))
@paginationButton("Last", ">>", fmt.Sprintf("submitRolesPage(%d, perPage, order, orderBy)", roles.PageOpts.TotalPages(roles.Total)), !roles.PageOpts.HasNextPage(roles.Total))
</div>
}
</div>
}
</div>
<!-- Modal Container -->
<div id="role-modal"></div>
@@ -57,6 +103,27 @@ templ RolesList(roles []*db.Role) {
</div>
}
templ roleTableHeader(field string, label string, currentField string, currentOrder string) {
{{
isActive := currentField == field
baseClasses := "px-6 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
arrow := ""
if isActive {
if currentOrder == "ASC" {
arrow = " ↑"
} else {
arrow = " ↓"
}
}
}}
<th class={ baseClasses } @click={ fmt.Sprintf("sortRolesColumn('%s', order, orderBy)", field) }>
{ label }
if arrow != "" {
<span class="text-blue">{ arrow }</span>
}
</th>
}
templ roleRow(role *db.Role) {
<tr class="hover:bg-surface1/50 transition">
<td class="px-6 py-4 text-sm text-text font-semibold">{ role.DisplayName }</td>
@@ -70,7 +137,7 @@ templ roleRow(role *db.Role) {
</td>
<td class="px-6 py-4 text-sm text-right">
<button
class="px-4 py-2 bg-blue text-mantle rounded-lg hover:bg-sky transition text-sm font-semibold"
class="px-4 py-2 bg-blue text-mantle rounded-lg hover:bg-sky transition text-sm font-semibold hover:cursor-pointer"
hx-get={ fmt.Sprintf("/admin/roles/%d/manage", role.ID) }
hx-target="#role-modal"
hx-swap="innerHTML"

2
internal/view/adminview/roles_page.templ
View File

@@ -2,7 +2,7 @@ package adminview
import "git.haelnorr.com/h/oslstats/internal/db"
templ RolesPage(roles []*db.Role) {
templ RolesPage(roles *db.List[db.Role]) {
@DashboardLayout("roles") {
@RolesList(roles)
}

103
internal/view/adminview/user_list.templ
View File

@@ -5,9 +5,16 @@ import "fmt"
import "time"
templ UserList(users *db.List[db.User]) {
<div class="space-y-4">
<div
id="users-list-container"
x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
users.PageOpts.Page,
users.PageOpts.PerPage,
users.PageOpts.Order,
users.PageOpts.OrderBy) }
>
<!-- Header -->
<div class="flex justify-between items-center">
<div class="flex justify-between items-center mb-4">
<h1 class="text-2xl font-bold text-text">User Management</h1>
</div>
<!-- Users table -->
@@ -21,11 +28,11 @@ templ UserList(users *db.List[db.User]) {
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">ID</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Username</th>
@userTableHeader("id", "ID", users.PageOpts.OrderBy, string(users.PageOpts.Order))
@userTableHeader("username", "Username", users.PageOpts.OrderBy, string(users.PageOpts.Order))
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Discord ID</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Roles</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Created</th>
@userTableHeader("created_at", "Created", users.PageOpts.OrderBy, string(users.PageOpts.Order))
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
</tr>
</thead>
@@ -64,10 +71,96 @@ templ UserList(users *db.List[db.User]) {
</table>
</div>
</div>
<!-- Pagination controls -->
<div class="mt-6 flex flex-col gap-4">
<!-- Page info and per-page selector -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
<div>
if users.Total > 0 {
Showing { fmt.Sprintf("%d", users.PageOpts.StartItem()) } - { fmt.Sprintf("%d", users.PageOpts.EndItem(users.Total)) } of { fmt.Sprintf("%d", users.Total) } users
} else {
No users
}
</div>
<div class="flex items-center gap-2">
<label for="users-per-page-select">Per page:</label>
<select
id="users-per-page-select"
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
x-model.number="perPage"
@change="submitUsersPage(page, perPage, order, orderBy)"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<!-- Pagination buttons -->
if users.Total > 0 && users.PageOpts.TotalPages(users.Total) > 1 {
<div class="flex flex-wrap justify-center items-center gap-2">
@paginationButton("First", "<<", fmt.Sprintf("submitUsersPage(1, perPage, order, orderBy)"), !users.PageOpts.HasPrevPage())
@paginationButton("Previous", "<", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page-1), !users.PageOpts.HasPrevPage())
for _, pageNum := range users.PageOpts.GetPageRange(users.Total, 7) {
@pageNumberButton(pageNum, users.PageOpts.Page, "submitUsersPage")
}
@paginationButton("Next", ">", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page+1), !users.PageOpts.HasNextPage(users.Total))
@paginationButton("Last", ">>", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.TotalPages(users.Total)), !users.PageOpts.HasNextPage(users.Total))
</div>
}
</div>
}
</div>
}
templ userTableHeader(field string, label string, currentField string, currentOrder string) {
{{
isActive := currentField == field
baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
arrow := ""
if isActive {
if currentOrder == "ASC" {
arrow = " ↑"
} else {
arrow = " ↓"
}
}
}}
<th class={ baseClasses } @click={ fmt.Sprintf("sortUsersColumn('%s', order, orderBy)", field) }>
{ label }
if arrow != "" {
<span class="text-blue">{ arrow }</span>
}
</th>
}
templ paginationButton(longText string, shortText string, onClick string, disabled bool) {
<button
type="button"
@click={ onClick }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
:disabled={ fmt.Sprintf("%t", disabled) }
:class={ fmt.Sprintf("%t", disabled) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">{ longText }</span>
<span class="sm:hidden">{ shortText }</span>
</button>
}
templ pageNumberButton(pageNum int, currentPage int, funcName string) {
<button
type="button"
@click={ fmt.Sprintf("%s(%d, perPage, order, orderBy)", funcName, pageNum) }
class={ "px-3 py-2 rounded-lg border transition",
templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == currentPage),
templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != currentPage) }
>
{ fmt.Sprintf("%d", pageNum) }
</button>
}
func formatTimestamp(unixTime int64) string {
t := time.Unix(unixTime, 0)
return t.Format("Jan 2, 2006")

44
internal/view/pagination/table.templ Normal file
View File

@@ -0,0 +1,44 @@
package pagination
import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"
// TableColumn defines a sortable column in a paginated table
type TableColumn struct {
Field string // database field name for sorting (e.g., "created_at")
Label string // display label (e.g., "Timestamp")
Sortable bool // whether this column can be sorted
}
// TableHeader renders a table header with sortable columns
// Use this inside <thead><tr>...</tr></thead>
templ TableHeader(opts db.PageOpts, columns []TableColumn) {
for _, col := range columns {
if col.Sortable {
@sortableHeaderCell(col.Field, col.Label, opts.OrderBy, string(opts.Order))
} else {
<th class="px-4 py-3 text-left text-sm font-semibold text-text">{ col.Label }</th>
}
}
}
templ sortableHeaderCell(field string, label string, currentField string, currentOrder string) {
{{
isActive := currentField == field
baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
arrow := ""
if isActive {
if currentOrder == "ASC" {
arrow = " ↑"
} else {
arrow = " ↓"
}
}
}}
<th class={ baseClasses } @click={ fmt.Sprintf("sortByColumn('%s')", field) }>
{ label }
if arrow != "" {
<span class="text-blue">{ arrow }</span>
}
</th>
}