admin page updates

internal/view/adminview/audit_logs_list.templ

@@ -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":