added admin page and audit log viewing
This commit is contained in:
156
internal/view/adminview/audit_log_detail.templ
Normal file
156
internal/view/adminview/audit_log_detail.templ
Normal file
@@ -0,0 +1,156 @@
|
||||
package adminview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "fmt"
|
||||
import "time"
|
||||
import "encoding/json"
|
||||
|
||||
templ AuditLogDetail(log *db.AuditLog) {
|
||||
<!-- Modal overlay -->
|
||||
<div
|
||||
class="fixed inset-0 bg-crust/80 flex items-center justify-center z-50 p-4"
|
||||
x-data="{ show: true }"
|
||||
x-show="show"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click.self="show = false; setTimeout(() => document.getElementById('modal-container').innerHTML = '', 200)"
|
||||
>
|
||||
<!-- Modal content -->
|
||||
<div
|
||||
class="bg-base border border-surface1 rounded-lg max-w-2xl 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"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
</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>
|
||||
<!-- 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">
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
func formatDetailTimestamp(unixTime int64) string {
|
||||
t := time.Unix(unixTime, 0)
|
||||
return t.Format("Monday, January 2, 2006 at 3:04:05 PM MST")
|
||||
}
|
||||
|
||||
func formatJSON(raw []byte) string {
|
||||
if len(raw) == 0 || string(raw) == "null" {
|
||||
return "No details available"
|
||||
}
|
||||
// Pretty print the JSON
|
||||
var obj interface{}
|
||||
if err := json.Unmarshal(raw, &obj); err != nil {
|
||||
return string(raw)
|
||||
}
|
||||
pretty, err := json.MarshalIndent(obj, "", " ")
|
||||
if err != nil {
|
||||
return string(raw)
|
||||
}
|
||||
return string(pretty)
|
||||
}
|
||||
234
internal/view/adminview/audit_logs_list.templ
Normal file
234
internal/view/adminview/audit_logs_list.templ
Normal file
@@ -0,0 +1,234 @@
|
||||
package adminview
|
||||
|
||||
import (
|
||||
"git.haelnorr.com/h/oslstats/internal/db"
|
||||
"fmt"
|
||||
"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">
|
||||
<h1 class="text-2xl font-bold text-text">Audit Logs</h1>
|
||||
</div>
|
||||
<!-- Filters -->
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-4">
|
||||
<form
|
||||
id="audit-filters-form"
|
||||
hx-post="/admin/audit/filter"
|
||||
hx-target="#audit-results"
|
||||
hx-trigger="change from:select, change from:input delay:500ms"
|
||||
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 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-subtext0 mb-1">Start Date</label>
|
||||
<input
|
||||
type="date"
|
||||
name="start_date"
|
||||
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Date Filter -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-subtext0 mb-1">End Date</label>
|
||||
<input
|
||||
type="date"
|
||||
name="end_date"
|
||||
class="w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
|
||||
/>
|
||||
</div>
|
||||
<!-- Clear Filters Button -->
|
||||
<div class="md:col-span-2 lg:col-span-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('audit-filters-form').reset(); htmx.trigger('#audit-filters-form', 'change')"
|
||||
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Audit logs results container -->
|
||||
<div id="audit-results">
|
||||
@AuditLogsResults(logs)
|
||||
</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 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>
|
||||
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-surface1">
|
||||
for _, log := range logs.Items {
|
||||
<tr class="hover:bg-surface1 transition-colors">
|
||||
<td class="px-4 py-3 text-sm text-subtext0 whitespace-nowrap">
|
||||
{ formatFullTimestamp(log.CreatedAt) }
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm font-medium text-text">
|
||||
if log.User != nil {
|
||||
{ log.User.Username }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Unknown</span>
|
||||
}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-subtext0 font-mono">
|
||||
{ log.Action }
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-subtext0">
|
||||
{ log.ResourceType }
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-subtext0 font-mono">
|
||||
if log.ResourceID != nil {
|
||||
{ *log.ResourceID }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
@resultBadge(log.Result)
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<button
|
||||
hx-get={ fmt.Sprintf("/admin/audit/%d", log.ID) }
|
||||
hx-target="#modal-container"
|
||||
class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</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">
|
||||
if logs.PageOpts.Page > 1 {
|
||||
<button
|
||||
hx-post={ fmt.Sprintf("/admin/audit?page=%d", logs.PageOpts.Page-1) }
|
||||
hx-target="#admin-content"
|
||||
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
|
||||
>
|
||||
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?page=%d", logs.PageOpts.Page+1) }
|
||||
hx-target="#admin-content"
|
||||
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ resultBadge(result string) {
|
||||
{{
|
||||
var classes string
|
||||
switch result {
|
||||
case "success":
|
||||
classes = "px-2 py-0.5 bg-green/20 text-green rounded text-xs font-medium"
|
||||
case "denied":
|
||||
classes = "px-2 py-0.5 bg-yellow/20 text-yellow rounded text-xs font-medium"
|
||||
case "error":
|
||||
classes = "px-2 py-0.5 bg-red/20 text-red rounded text-xs font-medium"
|
||||
default:
|
||||
classes = "px-2 py-0.5 bg-surface1 text-subtext0 rounded text-xs font-medium"
|
||||
}
|
||||
}}
|
||||
<span class={ classes }>{ result }</span>
|
||||
}
|
||||
|
||||
func formatFullTimestamp(unixTime int64) string {
|
||||
t := time.Unix(unixTime, 0)
|
||||
return t.Format("Jan 2, 2006 15:04:05")
|
||||
}
|
||||
9
internal/view/adminview/audit_page.templ
Normal file
9
internal/view/adminview/audit_page.templ
Normal file
@@ -0,0 +1,9 @@
|
||||
package adminview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ AuditLogsPage(logs *db.List[db.AuditLog], users []*db.User, actions []string, resourceTypes []string) {
|
||||
@DashboardLayout("audit") {
|
||||
@AuditLogsList(logs, users, actions, resourceTypes)
|
||||
}
|
||||
}
|
||||
@@ -2,10 +2,74 @@ package adminview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
|
||||
templ DashboardLayout() {
|
||||
@baseview.Layout("Admin") {
|
||||
<div>
|
||||
{ children... }
|
||||
templ DashboardLayout(activeSection string) {
|
||||
@baseview.Layout("Admin Dashboard") {
|
||||
<div class="max-w-screen-2xl mx-auto px-2">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside
|
||||
class="w-full md:w-64 flex-shrink-0"
|
||||
x-data="{ mobileOpen: false }"
|
||||
>
|
||||
<!-- Mobile toggle button -->
|
||||
<button
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
class="md:hidden w-full bg-surface0 border border-surface1 rounded-lg px-4 py-3 mb-2 flex items-center justify-between hover:bg-surface1 transition"
|
||||
>
|
||||
<span class="font-semibold text-text">Admin Menu</span>
|
||||
<svg
|
||||
class="w-5 h-5 transition-transform"
|
||||
:class="mobileOpen ? 'rotate-180' : ''"
|
||||
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>
|
||||
<!-- Navigation links -->
|
||||
<nav
|
||||
class="bg-surface0 border border-surface1 rounded-lg p-4"
|
||||
:class="mobileOpen ? 'block' : 'hidden md:block'"
|
||||
@click.away="mobileOpen = false"
|
||||
>
|
||||
<h2 class="text-lg font-bold text-text mb-4 px-2">Admin Dashboard</h2>
|
||||
<ul class="space-y-1">
|
||||
@navItem("users", "Users", activeSection)
|
||||
@navItem("roles", "Roles", activeSection)
|
||||
@navItem("permissions", "Permissions", activeSection)
|
||||
@navItem("audit", "Audit Logs", activeSection)
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Main content area -->
|
||||
<main class="flex-1 min-w-0" id="admin-content">
|
||||
{ children... }
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/admin.js"></script>
|
||||
}
|
||||
}
|
||||
|
||||
templ navItem(section string, label string, activeSection string) {
|
||||
{{
|
||||
isActive := section == activeSection
|
||||
baseClasses := "block px-4 py-2 rounded-lg transition-colors cursor-pointer"
|
||||
activeClasses := "bg-blue text-mantle font-semibold"
|
||||
inactiveClasses := "text-subtext0 hover:bg-surface1 hover:text-text"
|
||||
}}
|
||||
<li>
|
||||
<a
|
||||
href={ templ.SafeURL("/admin/" + section) }
|
||||
hx-post={ "/admin/" + section }
|
||||
hx-target="#admin-content"
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url={ "/admin/" + section }
|
||||
class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
|
||||
@click="if (window.innerWidth < 768) mobileOpen = false"
|
||||
>
|
||||
{ label }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ package adminview
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ DashboardPage(users *db.List[db.User]) {
|
||||
@DashboardLayout() {
|
||||
@DashboardLayout("users") {
|
||||
@UserList(users)
|
||||
}
|
||||
}
|
||||
|
||||
14
internal/view/adminview/permissions_list.templ
Normal file
14
internal/view/adminview/permissions_list.templ
Normal file
@@ -0,0 +1,14 @@
|
||||
package adminview
|
||||
|
||||
templ PermissionsList() {
|
||||
<div class="space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-text">Permission Management</h1>
|
||||
</div>
|
||||
<!-- Placeholder content -->
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Permissions management coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
7
internal/view/adminview/permissions_page.templ
Normal file
7
internal/view/adminview/permissions_page.templ
Normal file
@@ -0,0 +1,7 @@
|
||||
package adminview
|
||||
|
||||
templ PermissionsPage() {
|
||||
@DashboardLayout("permissions") {
|
||||
@PermissionsList()
|
||||
}
|
||||
}
|
||||
14
internal/view/adminview/roles_list.templ
Normal file
14
internal/view/adminview/roles_list.templ
Normal file
@@ -0,0 +1,14 @@
|
||||
package adminview
|
||||
|
||||
templ RolesList() {
|
||||
<div class="space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-text">Role Management</h1>
|
||||
</div>
|
||||
<!-- Placeholder content -->
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Roles management coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
7
internal/view/adminview/roles_page.templ
Normal file
7
internal/view/adminview/roles_page.templ
Normal file
@@ -0,0 +1,7 @@
|
||||
package adminview
|
||||
|
||||
templ RolesPage() {
|
||||
@DashboardLayout("roles") {
|
||||
@RolesList()
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,74 @@
|
||||
package adminview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "fmt"
|
||||
import "time"
|
||||
|
||||
templ UserList(users *db.List[db.User]) {
|
||||
<div class="space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-text">User Management</h1>
|
||||
</div>
|
||||
<!-- Users table -->
|
||||
if len(users.Items) == 0 {
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">No users 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">ID</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Username</th>
|
||||
<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>
|
||||
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-surface1">
|
||||
for _, user := range users.Items {
|
||||
<tr class="hover:bg-surface1 transition-colors">
|
||||
<td class="px-4 py-3 text-sm text-subtext0">{ fmt.Sprintf("%d", user.ID) }</td>
|
||||
<td class="px-4 py-3 text-sm font-medium text-text">{ user.Username }</td>
|
||||
<td class="px-4 py-3 text-sm text-subtext0 font-mono">{ user.DiscordID }</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
if len(user.Roles) > 0 {
|
||||
<div class="flex flex-wrap gap-1">
|
||||
for _, role := range user.Roles {
|
||||
<span class="px-2 py-0.5 bg-blue/20 text-blue rounded text-xs font-medium">
|
||||
{ role.DisplayName }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<span class="text-subtext1 text-xs italic">No roles</span>
|
||||
}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-subtext0">
|
||||
{ formatTimestamp(user.CreatedAt) }
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<button
|
||||
class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
|
||||
>
|
||||
Edit Roles
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
func formatTimestamp(unixTime int64) string {
|
||||
t := time.Unix(unixTime, 0)
|
||||
return t.Format("Jan 2, 2006")
|
||||
}
|
||||
|
||||
@@ -187,13 +187,14 @@ func formatDuration(start, end time.Time) string {
|
||||
}
|
||||
|
||||
templ SlapVersionBadge(version string) {
|
||||
if version == "rebound" {
|
||||
<span class="inline-block bg-green px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
Rebound
|
||||
</span>
|
||||
} else if version == "slapshot1" {
|
||||
<span class="inline-block bg-red px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
Slapshot 1
|
||||
</span>
|
||||
switch version {
|
||||
case "rebound":
|
||||
<span class="inline-block bg-green px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
Rebound
|
||||
</span>
|
||||
case "slapshot1":
|
||||
<span class="inline-block bg-red px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
Slapshot 1
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user