cmd/oslstats/routes.go

@@ -30,7 +30,7 @@ func addRoutes(
 	audit *auditlog.Logger,
 ) error {
 	// Create the routes
-	pageroutes := []hws.Route{
+	baseRoutes := []hws.Route{
 		{
 			Path:    "/static/",
 			Method:  hws.MethodGET,
@@ -41,6 +41,9 @@ func addRoutes(
 			Method:  hws.MethodGET,
 			Handler: handlers.Index(s),
 		},
+	}
+
+	authRoutes := []hws.Route{
 		{
 			Path:    "/login",
 			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
@@ -61,11 +64,9 @@ func addRoutes(
 			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
 			Handler: auth.LoginReq(handlers.Logout(s, auth, conn, discordAPI)),
 		},
-		{
-			Path:    "/notification-tester",
-			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
-			Handler: perms.RequireAdmin(s)(handlers.NotifyTester(s)),
-		},
+	}
+
+	seasonRoutes := []hws.Route{
 		{
 			Path:    "/seasons",
 			Method:  hws.MethodGET,
@@ -121,6 +122,9 @@ func addRoutes(
 			Method:  hws.MethodPOST,
 			Handler: perms.RequirePermission(s, permissions.TeamsAddToLeague)(handlers.SeasonLeagueAddTeam(s, conn, audit)),
 		},
+	}
+
+	leagueRoutes := []hws.Route{
 		{
 			Path:    "/leagues",
 			Method:  hws.MethodGET,
@@ -136,6 +140,9 @@ func addRoutes(
 			Method:  hws.MethodPOST,
 			Handler: perms.RequirePermission(s, permissions.LeaguesCreate)(handlers.NewLeagueSubmit(s, conn, audit)),
 		},
+	}
+
+	teamRoutes := []hws.Route{
 		{
 			Path:    "/teams",
 			Method:  hws.MethodGET,
@@ -206,6 +213,11 @@ func addRoutes(
 
 	// Admin routes
 	adminRoutes := []hws.Route{
+		{
+			Path:    "/notification-tester",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: perms.RequireAdmin(s)(handlers.NotifyTester(s)),
+		},
 		// Full page routes (for direct navigation and refreshes)
 		{
 			Path:    "/admin",
@@ -288,13 +300,11 @@ func addRoutes(
 			Method:  hws.MethodPOST,
 			Handler: perms.RequireActualAdmin(s)(handlers.AdminPreviewRoleStop(s)),
 		},
-		// Audit log filtering (returns only results table, no URL push)
 		{
 			Path:    "/admin/audit/filter",
 			Method:  hws.MethodPOST,
 			Handler: perms.RequireAdmin(s)(handlers.AdminAuditLogsFilter(s, conn)),
 		},
-		// Audit log detail modal
 		{
 			Path:    "/admin/audit/{id}",
 			Method:  hws.MethodGET,
@@ -302,9 +312,13 @@ func addRoutes(
 		},
 	}
 
-	routes := append(pageroutes, htmxRoutes...)
+	routes := append(baseRoutes, htmxRoutes...)
 	routes = append(routes, wsRoutes...)
+	routes = append(routes, authRoutes...)
 	routes = append(routes, adminRoutes...)
+	routes = append(routes, seasonRoutes...)
+	routes = append(routes, leagueRoutes...)
+	routes = append(routes, teamRoutes...)
 
 	// Register the routes with the server
 	err := s.AddRoutes(routes...)

internal/db/auditlog.go

@@ -69,6 +69,34 @@ func (a *AuditLogFilter) Result(result string) *AuditLogFilter {
 	return a
 }
 
+func (a *AuditLogFilter) UserIDs(ids []int) *AuditLogFilter {
+	if len(ids) > 0 {
+		a.In("al.user_id", ids)
+	}
+	return a
+}
+
+func (a *AuditLogFilter) Actions(actions []string) *AuditLogFilter {
+	if len(actions) > 0 {
+		a.In("al.action", actions)
+	}
+	return a
+}
+
+func (a *AuditLogFilter) ResourceTypes(resourceTypes []string) *AuditLogFilter {
+	if len(resourceTypes) > 0 {
+		a.In("al.resource_type", resourceTypes)
+	}
+	return a
+}
+
+func (a *AuditLogFilter) Results(results []string) *AuditLogFilter {
+	if len(results) > 0 {
+		a.In("al.result", results)
+	}
+	return a
+}
+
 func (a *AuditLogFilter) DateRange(start, end int64) *AuditLogFilter {
 	if start > 0 {
 		a.GreaterEqualThan("al.created_at", start)
@@ -83,7 +111,7 @@ func (a *AuditLogFilter) DateRange(start, end int64) *AuditLogFilter {
 func GetAuditLogs(ctx context.Context, tx bun.Tx, pageOpts *PageOpts, filters *AuditLogFilter) (*List[AuditLog], error) {
 	defaultPageOpts := &PageOpts{
 		Page:    1,
-		PerPage: 15,
+		PerPage: 10,
 		Order:   bun.OrderDesc,
 		OrderBy: "created_at",
 	}
@@ -119,7 +147,7 @@ func GetAuditLogByID(ctx context.Context, tx bun.Tx, id int) (*AuditLog, error)
 	if id <= 0 {
 		return nil, errors.New("id must be positive")
 	}
-	return GetByID[AuditLog](tx, id).Relation("User").Get(ctx)
+	return GetByField[AuditLog](tx, "al.id", id).Relation("User").Get(ctx)
 }
 
 // GetUniqueActions retrieves a list of all unique actions in the audit log

internal/db/getlist.go

@@ -33,6 +33,7 @@ const (
 	LessEqual    Comparator = "<="
 	Greater      Comparator = ">"
 	GreaterEqual Comparator = ">="
+	In           Comparator = "IN"
 )
 
 type ListFilter struct {
@@ -63,6 +64,10 @@ func (f *ListFilter) GreaterEqualThan(field string, value any) {
 	f.filters = append(f.filters, Filter{field, value, GreaterEqual})
 }
 
+func (f *ListFilter) In(field string, values any) {
+	f.filters = append(f.filters, Filter{field, values, In})
+}
+
 func GetList[T any](tx bun.Tx) *listgetter[T] {
 	l := &listgetter[T]{
 		items: new([]*T),
@@ -89,7 +94,11 @@ func (l *listgetter[T]) Relation(name string, apply ...func(*bun.SelectQuery) *b
 
 func (l *listgetter[T]) Filter(filters ...Filter) *listgetter[T] {
 	for _, filter := range filters {
-		l.q = l.q.Where("? ? ?", bun.Ident(filter.Field), bun.Safe(filter.Comparator), filter.Value)
+		if filter.Comparator == In {
+			l.q = l.q.Where("? IN (?)", bun.Ident(filter.Field), bun.In(filter.Value))
+		} else {
+			l.q = l.q.Where("? ? ?", bun.Ident(filter.Field), bun.Safe(filter.Comparator), filter.Value)
+		}
 	}
 	return l
 }

internal/db/role.go

@@ -61,6 +61,17 @@ func ListAllRoles(ctx context.Context, tx bun.Tx) ([]*Role, error) {
 	return GetList[Role](tx).GetAll(ctx)
 }
 
+// GetRoles returns a paginated list of roles
+func GetRoles(ctx context.Context, tx bun.Tx, pageOpts *PageOpts) (*List[Role], error) {
+	defaults := &PageOpts{
+		Page:    1,
+		PerPage: 25,
+		Order:   bun.OrderAsc,
+		OrderBy: "display_name",
+	}
+	return GetList[Role](tx).GetPaged(ctx, pageOpts, defaults)
+}
+
 // CreateRole creates a new role
 func CreateRole(ctx context.Context, tx bun.Tx, role *Role) error {
 	if role == nil {

internal/embedfs/web/css/flatpickr-catppuccin.css

@@ -0,0 +1,151 @@
+/* Flatpickr Catppuccin Mocha Theme */
+/* Override flatpickr colors to match our custom theme */
+
+.flatpickr-calendar {
+  background: #1e1e2e; /* mantle */
+  border: 1px solid #45475a; /* surface1 */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.flatpickr-months {
+  background: #181825; /* base */
+  border-bottom: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-month {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  background: #1e1e2e; /* mantle */
+  color: #cdd6f4; /* text */
+  border: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-current-month input.cur-year {
+  color: #cdd6f4; /* text */
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-current-month input.cur-year:hover {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-prev-month,
+.flatpickr-next-month {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-prev-month:hover,
+.flatpickr-next-month:hover {
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-weekdays {
+  background: #181825; /* base */
+  border-bottom: 1px solid #45475a; /* surface1 */
+}
+
+span.flatpickr-weekday {
+  color: #bac2de; /* subtext0 */
+  font-weight: 600;
+}
+
+.flatpickr-days {
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-day {
+  color: #cdd6f4; /* text */
+  border: 1px solid transparent;
+}
+
+.flatpickr-day.today {
+  border-color: #89b4fa; /* blue */
+  background: #89b4fa20; /* blue with transparency */
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-day.today:hover {
+  background: #89b4fa40; /* blue with more transparency */
+  border-color: #89b4fa; /* blue */
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange {
+  background: #89b4fa; /* blue */
+  border-color: #89b4fa; /* blue */
+  color: #181825; /* base */
+}
+
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover {
+  background: #74a7f9; /* slightly lighter blue */
+  border-color: #74a7f9;
+}
+
+.flatpickr-day:hover {
+  background: #313244; /* surface0 */
+  border-color: #45475a; /* surface1 */
+}
+
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+  color: #585b70; /* surface2 */
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  color: #585b70; /* surface2 */
+  cursor: not-allowed;
+}
+
+.flatpickr-day.inRange {
+  background: #89b4fa30; /* blue with light transparency */
+  border-color: transparent;
+  box-shadow: -5px 0 0 #89b4fa30, 5px 0 0 #89b4fa30;
+}
+
+.flatpickr-time {
+  background: #181825; /* base */
+  border-top: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-time input {
+  color: #cdd6f4; /* text */
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-time input:hover,
+.flatpickr-time input:focus {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .numInputWrapper span:hover {
+  background: #313244; /* surface0 */
+}

internal/embedfs/web/css/input.css

@@ -127,3 +127,74 @@
   font-weight: 700;
   font-style: italic;
 }
+
+/* Custom Scrollbar Styles - Catppuccin Theme */
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface1) var(--mantle);
+}
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--mantle);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+  border: 2px solid var(--mantle);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--overlay0);
+}
+
+/* Specific styling for multi-select dropdowns */
+.multi-select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+
+.multi-select-dropdown::-webkit-scrollbar-track {
+  background: var(--base);
+  border-radius: 3px;
+}
+
+.multi-select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--surface2);
+  border-radius: 3px;
+  border: 1px solid var(--base);
+}
+
+.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--overlay0);
+}
+
+/* Specific styling for modal content */
+.modal-scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-scrollable::-webkit-scrollbar-track {
+  background: var(--base);
+}
+
+.modal-scrollable::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+}
+
+.modal-scrollable::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}

internal/embedfs/web/css/output.css

@@ -37,6 +37,7 @@
     --text-6xl--line-height: 1;
     --text-9xl: 8rem;
     --text-9xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -379,6 +380,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
@@ -440,6 +444,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -664,6 +671,9 @@
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -685,6 +695,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
@@ -913,9 +926,6 @@
   .p-2\.5 {
     padding: calc(var(--spacing) * 2.5);
   }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1051,6 +1061,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1066,6 +1080,9 @@
   .text-wrap {
     text-wrap: wrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .break-all {
     word-break: break-all;
   }
@@ -1144,6 +1161,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1816,6 +1837,57 @@
   font-weight: 700;
   font-style: italic;
 }
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface1) var(--mantle);
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--mantle);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+  border: 2px solid var(--mantle);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
+::-webkit-scrollbar-thumb:active {
+  background: var(--overlay0);
+}
+.multi-select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+.multi-select-dropdown::-webkit-scrollbar-track {
+  background: var(--base);
+  border-radius: 3px;
+}
+.multi-select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--surface2);
+  border-radius: 3px;
+  border: 1px solid var(--base);
+}
+.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--overlay0);
+}
+.modal-scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+.modal-scrollable::-webkit-scrollbar-track {
+  background: var(--base);
+}
+.modal-scrollable::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+}
+.modal-scrollable::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

internal/embedfs/web/js/admin.js

@@ -10,8 +10,236 @@ function formatJSON(json) {
   }
 }
 
-// Handle HTMX navigation for admin sections
+// Initialize flatpickr for all date inputs
+function initFlatpickr() {
+  document.querySelectorAll(".flatpickr-date").forEach(function (input) {
+    if (!input._flatpickr) {
+      flatpickr(input, {
+        dateFormat: "d/m/Y",
+        allowInput: true,
+      });
+    }
+  });
+}
+
+// Submit the audit filter form with specific page/perPage/order params
+function submitAuditFilter(page, perPage, order, orderBy) {
+  const form = document.getElementById("audit-filters-form");
+  if (!form) return;
+
+  // Create hidden inputs for pagination/sorting if they don't exist
+  let pageInput = form.querySelector('input[name="page"]');
+  if (!pageInput) {
+    pageInput = document.createElement("input");
+    pageInput.type = "hidden";
+    pageInput.name = "page";
+    form.appendChild(pageInput);
+  }
+  pageInput.value = page;
+
+  let perPageInput = form.querySelector('input[name="per_page"]');
+  if (!perPageInput) {
+    perPageInput = document.createElement("input");
+    perPageInput.type = "hidden";
+    perPageInput.name = "per_page";
+    form.appendChild(perPageInput);
+  }
+  perPageInput.value = perPage;
+
+  let orderInput = form.querySelector('input[name="order"]');
+  if (!orderInput) {
+    orderInput = document.createElement("input");
+    orderInput.type = "hidden";
+    orderInput.name = "order";
+    form.appendChild(orderInput);
+  }
+  orderInput.value = order;
+
+  let orderByInput = form.querySelector('input[name="order_by"]');
+  if (!orderByInput) {
+    orderByInput = document.createElement("input");
+    orderByInput.type = "hidden";
+    orderByInput.name = "order_by";
+    form.appendChild(orderByInput);
+  }
+  orderByInput.value = orderBy;
+
+  htmx.trigger(form, "submit");
+}
+
+// Sort by column - toggle direction if same column
+function sortAuditColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to DESC
+    newOrder = "DESC";
+    newOrderBy = field;
+  }
+
+  submitAuditFilter(page, perPage, newOrder, newOrderBy);
+}
+
+// Clear all audit filters
+function clearAuditFilters() {
+  const form = document.getElementById("audit-filters-form");
+  if (!form) return;
+
+  form.reset();
+
+  // Clear flatpickr instances
+  document.querySelectorAll(".flatpickr-date").forEach(function (input) {
+    var fp = input._flatpickr;
+    if (fp) fp.clear();
+  });
+
+  // Clear multi-select dropdowns
+  document.querySelectorAll(".multi-select-container").forEach(function (container) {
+    var hiddenInput = container.querySelector('input[type="hidden"]');
+    if (hiddenInput) hiddenInput.value = "";
+    var selectedDisplay = container.querySelector(".multi-select-selected");
+    if (selectedDisplay)
+      selectedDisplay.innerHTML = '<span class="text-subtext1">Select...</span>';
+    container.querySelectorAll(".multi-select-option").forEach(function (opt) {
+      opt.classList.remove("bg-blue", "text-mantle");
+      opt.classList.add("hover:bg-surface1");
+    });
+  });
+
+  // Trigger form submission with reset pagination
+  submitAuditFilter(1, 25, "DESC", "created_at");
+}
+
+// Toggle multi-select dropdown visibility
+function toggleMultiSelect(containerId) {
+  var dropdown = document.getElementById(containerId + "-dropdown");
+  if (dropdown) {
+    dropdown.classList.toggle("hidden");
+  }
+}
+
+// Toggle multi-select option selection
+function toggleMultiSelectOption(containerId, value, label) {
+  var container = document.getElementById(containerId);
+  var hiddenInput = container.querySelector('input[type="hidden"]');
+  var selectedDisplay = container.querySelector(".multi-select-selected");
+
+  var values = hiddenInput.value ? hiddenInput.value.split(",") : [];
+  var index = values.indexOf(value);
+
+  if (index > -1) {
+    values.splice(index, 1);
+  } else {
+    values.push(value);
+  }
+
+  hiddenInput.value = values.join(",");
+
+  var option = container.querySelector('[data-value="' + value + '"]');
+  if (option) {
+    if (index > -1) {
+      option.classList.remove("bg-blue", "text-mantle");
+      option.classList.add("hover:bg-surface1");
+    } else {
+      option.classList.add("bg-blue", "text-mantle");
+      option.classList.remove("hover:bg-surface1");
+    }
+  }
+
+  if (values.length === 0) {
+    selectedDisplay.innerHTML = '<span class="text-subtext1">Select...</span>';
+  } else if (values.length === 1) {
+    selectedDisplay.innerHTML = "<span>" + label + "</span>";
+  } else {
+    selectedDisplay.innerHTML = "<span>" + values.length + " selected</span>";
+  }
+
+  // Trigger form submission
+  document.getElementById("audit-filters-form").requestSubmit();
+}
+
+// Submit the users page with specific page/perPage/order params
+function submitUsersPage(page, perPage, order, orderBy) {
+  const formData = new FormData();
+  formData.append("page", page);
+  formData.append("per_page", perPage);
+  formData.append("order", order);
+  formData.append("order_by", orderBy);
+
+  htmx.ajax("POST", "/admin/users", {
+    target: "#users-list-container",
+    swap: "outerHTML",
+    values: Object.fromEntries(formData),
+  });
+}
+
+// Sort users column - toggle direction if same column
+function sortUsersColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("users-per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to ASC
+    newOrder = "ASC";
+    newOrderBy = field;
+  }
+
+  submitUsersPage(page, perPage, newOrder, newOrderBy);
+}
+
+// Submit the roles page with specific page/perPage/order params
+function submitRolesPage(page, perPage, order, orderBy) {
+  const formData = new FormData();
+  formData.append("page", page);
+  formData.append("per_page", perPage);
+  formData.append("order", order);
+  formData.append("order_by", orderBy);
+
+  htmx.ajax("POST", "/admin/roles", {
+    target: "#roles-list-container",
+    swap: "outerHTML",
+    values: Object.fromEntries(formData),
+  });
+}
+
+// Sort roles column - toggle direction if same column
+function sortRolesColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("roles-per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to ASC
+    newOrder = "ASC";
+    newOrderBy = field;
+  }
+
+  submitRolesPage(page, perPage, newOrder, newOrderBy);
+}
+
+// Handle HTMX navigation and initialization
 document.addEventListener("DOMContentLoaded", function () {
+  // Initialize flatpickr on page load
+  initFlatpickr();
+
   // Update active nav item after HTMX navigation
   document.body.addEventListener("htmx:afterSwap", function (event) {
     if (event.detail.target.id === "admin-content") {
@@ -23,13 +251,40 @@ document.addEventListener("DOMContentLoaded", function () {
       document.querySelectorAll("nav a").forEach(function (link) {
         const href = link.getAttribute("href");
         if (href && href.includes("/" + section)) {
-          link.classList.remove("text-subtext0", "hover:bg-surface1", "hover:text-text");
-          link.classList.add("bg-blue", "text-mantle", "font-semibold");
+          link.classList.remove(
+            "border-transparent",
+            "text-subtext0",
+            "hover:text-text",
+            "hover:border-surface2"
+          );
+          link.classList.add("border-blue", "text-blue", "font-semibold");
         } else {
-          link.classList.remove("bg-blue", "text-mantle", "font-semibold");
-          link.classList.add("text-subtext0", "hover:bg-surface1", "hover:text-text");
+          link.classList.remove("border-blue", "text-blue", "font-semibold");
+          link.classList.add(
+            "border-transparent",
+            "text-subtext0",
+            "hover:text-text",
+            "hover:border-surface2"
+          );
         }
       });
+
+      // Re-initialize flatpickr after content swap
+      initFlatpickr();
+    }
+
+    // Re-initialize flatpickr when audit results are updated
+    if (event.detail.target.id === "audit-results-container") {
+      initFlatpickr();
+    }
+  });
+
+  // Close multi-select dropdowns when clicking outside
+  document.addEventListener("click", function (evt) {
+    if (!evt.target.closest(".multi-select-container")) {
+      document.querySelectorAll(".multi-select-dropdown").forEach(function (d) {
+        d.classList.add("hidden");
+      });
     }
   });
 });

internal/embedfs/web/js/pagination.js

@@ -25,6 +25,19 @@ function paginateData(
       this.submit();
     },
 
+    sortByColumn(field) {
+      if (this.orderBy === field) {
+        // Toggle order if same column
+        this.order = this.order === "ASC" ? "DESC" : "ASC";
+      } else {
+        // New column, default to DESC
+        this.orderBy = field;
+        this.order = "DESC";
+      }
+      this.page = 1; // Reset to first page when sorting
+      this.submit();
+    },
+
     setPerPage(n) {
       this.perPage = n;
       this.page = 1; // Reset to first page when changing per page

internal/embedfs/web/vendored/flatpickr-dark@4.6.13.min.css

@@ -0,0 +1,795 @@
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  background: #3f4458;
+  -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #20222c;
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.arrowRight:before,
+.flatpickr-calendar.rightMost:after,
+.flatpickr-calendar.arrowRight:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar.arrowCenter:before,
+.flatpickr-calendar.arrowCenter:after {
+  left: 50%;
+  right: 50%;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #20222c;
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #3f4458;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #20222c;
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #3f4458;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  background: #3f4458;
+  color: #fff;
+  fill: #fff;
+  height: 34px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  height: 34px;
+  padding: 10px;
+  z-index: 3;
+  color: #fff;
+  fill: #fff;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  display: none;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #eee;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper input::-webkit-outer-spin-button,
+.numInputWrapper input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(255,255,255,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(192,187,167,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(192,187,167,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(255,255,255,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(255,255,255,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(255,255,255,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(192,187,167,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 7.48px 0 0 0;
+  line-height: 1;
+  height: 34px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(192,187,167,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #fff;
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: #fff;
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(255,255,255,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  appearance: menulist;
+  background: #3f4458;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  height: auto;
+  line-height: inherit;
+  margin: -1px 0 0 0;
+  outline: none;
+  padding: 0 0 0 0.5ch;
+  position: relative;
+  vertical-align: initial;
+  -webkit-box-sizing: border-box;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  width: auto;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
+.flatpickr-current-month .flatpickr-monthDropdown-months:active {
+  outline: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: rgba(192,187,167,0.05);
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: #3f4458;
+  outline: none;
+  padding: 0;
+}
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: #3f4458;
+  color: #fff;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 #20222c;
+          box-shadow: -1px 0 0 #20222c;
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: rgba(255,255,255,0.95);
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #646c8c;
+  border-color: #646c8c;
+}
+.flatpickr-day.today {
+  border-color: #eee;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #eee;
+  background: #eee;
+  color: #3f4458;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: -10px 0 0 #80cbc4;
+          box-shadow: -10px 0 0 #80cbc4;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
+          box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(255,255,255,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  cursor: not-allowed;
+  color: rgba(255,255,255,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
+          box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  -webkit-box-shadow: 1px 0 0 #20222c;
+          box-shadow: 1px 0 0 #20222c;
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(255,255,255,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: rgba(255,255,255,0.95);
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: rgba(255,255,255,0.95);
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: rgba(255,255,255,0.95);
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  float: left;
+  line-height: inherit;
+  color: rgba(255,255,255,0.95);
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #6a7395;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}

internal/handlers/admin_audit.go

@@ -11,13 +11,19 @@ import (
 	"git.haelnorr.com/h/oslstats/internal/throw"
 	"git.haelnorr.com/h/oslstats/internal/validation"
 	adminview "git.haelnorr.com/h/oslstats/internal/view/adminview"
+	"git.haelnorr.com/h/timefmt"
 	"github.com/pkg/errors"
 	"github.com/uptrace/bun"
 )
 
-// AdminAuditLogsPage renders the full admin dashboard page with audit logs section
+// AdminAuditLogsPage renders the full admin dashboard page with audit logs section (GET request)
 func AdminAuditLogsPage(s *hws.Server, conn *bun.DB) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		pageOpts := pageOptsFromQuery(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
 		var logs *db.List[db.AuditLog]
 		var users []*db.User
 		var actions []string
@@ -26,12 +32,6 @@ func AdminAuditLogsPage(s *hws.Server, conn *bun.DB) http.Handler {
 		if ok := db.WithReadTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
 
-			// Get page options from query
-			pageOpts := pageOptsFromQuery(s, w, r)
-			if pageOpts == nil {
-				return false, nil
-			}
-
 			// Get filters from query
 			filters, ok := getAuditFiltersFromQuery(s, w, r)
 			if !ok {
@@ -72,9 +72,14 @@ func AdminAuditLogsPage(s *hws.Server, conn *bun.DB) http.Handler {
 	})
 }
 
-// AdminAuditLogsList shows audit logs (HTMX content replacement - full section with filters)
+// AdminAuditLogsList shows the full audit logs list with filters (POST request for HTMX)
 func AdminAuditLogsList(s *hws.Server, conn *bun.DB) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		pageOpts := pageOptsFromForm(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
 		var logs *db.List[db.AuditLog]
 		var users []*db.User
 		var actions []string
@@ -83,15 +88,12 @@ func AdminAuditLogsList(s *hws.Server, conn *bun.DB) http.Handler {
 		if ok := db.WithReadTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
 
-			// Get page options from form
-			pageOpts := pageOptsFromForm(s, w, r)
-			if pageOpts == nil {
+			// Get filters from form
+			filters, ok := getAuditFiltersFromForm(s, w, r)
+			if !ok {
 				return false, nil
 			}
 
-			// No filters for initial section load
-			filters := db.NewAuditLogFilter()
-
 			// Get audit logs
 			logs, err = db.GetAuditLogs(ctx, tx, pageOpts, filters)
 			if err != nil {
@@ -126,20 +128,19 @@ func AdminAuditLogsList(s *hws.Server, conn *bun.DB) http.Handler {
 	})
 }
 
-// AdminAuditLogsFilter handles filter requests and returns only the results table
+// AdminAuditLogsFilter returns only the results container (table + pagination) for HTMX updates
 func AdminAuditLogsFilter(s *hws.Server, conn *bun.DB) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		pageOpts := pageOptsFromForm(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
 		var logs *db.List[db.AuditLog]
 
 		if ok := db.WithReadTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
 
-			// Get page options from form
-			pageOpts := pageOptsFromForm(s, w, r)
-			if pageOpts == nil {
-				return false, nil
-			}
-
 			// Get filters from form
 			filters, ok := getAuditFiltersFromForm(s, w, r)
 			if !ok {
@@ -157,6 +158,7 @@ func AdminAuditLogsFilter(s *hws.Server, conn *bun.DB) http.Handler {
 			return
 		}
 
+		// Return only the results container, not the full page with filters
 		renderSafely(adminview.AuditLogsResults(logs), s, r, w)
 	})
 }
@@ -201,7 +203,8 @@ func AdminAuditLogDetail(s *hws.Server, conn *bun.DB) http.Handler {
 // getAuditFiltersFromQuery extracts audit log filters from query string
 func getAuditFiltersFromQuery(s *hws.Server, w http.ResponseWriter, r *http.Request) (*db.AuditLogFilter, bool) {
 	g := validation.NewQueryGetter(r)
-	return buildAuditFilters(g, s, w, r)
+	filters, ok := buildAuditFilters(g, s, w, r)
+	return filters, ok
 }
 
 // getAuditFiltersFromForm extracts audit log filters from form data
@@ -217,57 +220,38 @@ func getAuditFiltersFromForm(s *hws.Server, w http.ResponseWriter, r *http.Reque
 func buildAuditFilters(g validation.Getter, s *hws.Server, w http.ResponseWriter, r *http.Request) (*db.AuditLogFilter, bool) {
 	filters := db.NewAuditLogFilter()
 
-	// User ID filter (optional)
-	userID := g.Int("user_id").Optional().Min(1).Value
+	userIDs := g.IntList("user_id").Values()
+	actions := g.StringList("action").Values()
+	resourceTypes := g.StringList("resource_type").Values()
+	results := g.StringList("result").Values()
+	format := timefmt.NewBuilder().DayNumeric2().Slash().
+		MonthNumeric2().Slash().Year4().Build()
+	startDate := g.Time("start_date", format).Optional().Value
+	endDate := g.Time("end_date", format).Optional().Value
 
-	// Action filter (optional)
-	action := g.String("action").TrimSpace().Optional().Value
-
-	// Resource Type filter (optional)
-	resourceType := g.String("resource_type").TrimSpace().Optional().Value
-
-	// Result filter (optional)
-	result := g.String("result").TrimSpace().Optional().AllowedValues([]string{"success", "denied", "error"}).Value
-
-	// Date range filter (optional)
-	startDateStr := g.String("start_date").TrimSpace().Optional().Value
-	endDateStr := g.String("end_date").TrimSpace().Optional().Value
-
-	// Validate
 	if !g.ValidateAndError(s, w, r) {
 		return nil, false
 	}
 
-	// Apply filters
-	if userID > 0 {
-		filters.UserID(userID)
+	if len(userIDs) > 0 {
+		filters.UserIDs(userIDs)
+	}
+	if len(actions) > 0 {
+		filters.Actions(actions)
+	}
+	if len(resourceTypes) > 0 {
+		filters.ResourceTypes(resourceTypes)
+	}
+	if len(results) > 0 {
+		filters.Results(results)
 	}
 
-	if action != "" {
-		filters.Action(action)
+	if !startDate.IsZero() {
+		filters.DateRange(startDate.Unix(), 0)
 	}
-
-	if resourceType != "" {
-		filters.ResourceType(resourceType)
-	}
-
-	if result != "" {
-		filters.Result(result)
-	}
-
-	// Parse and apply date range
-	if startDateStr != "" {
-		if startDate, err := time.Parse("2006-01-02", startDateStr); err == nil {
-			filters.DateRange(startDate.Unix(), 0)
-		}
-	}
-
-	if endDateStr != "" {
-		if endDate, err := time.Parse("2006-01-02", endDateStr); err == nil {
-			// Set to end of day
-			endOfDay := endDate.Add(23*time.Hour + 59*time.Minute + 59*time.Second)
-			filters.DateRange(0, endOfDay.Unix())
-		}
+	if !endDate.IsZero() {
+		endOfDay := endDate.Add(23*time.Hour + 59*time.Minute + 59*time.Second)
+		filters.DateRange(0, endOfDay.Unix())
 	}
 
 	return filters, true

internal/handlers/admin_roles.go

@@ -21,12 +21,22 @@ import (
 // AdminRoles renders the full admin dashboard page with roles section
 func AdminRoles(s *hws.Server, conn *bun.DB) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		var rolesList []*db.Role
+		var pageOpts *db.PageOpts
+		if r.Method == "GET" {
+			pageOpts = pageOptsFromQuery(s, w, r)
+		} else {
+			pageOpts = pageOptsFromForm(s, w, r)
+		}
+		if pageOpts == nil {
+			return
+		}
+
+		var rolesList *db.List[db.Role]
 		if ok := db.WithReadTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
-			rolesList, err = db.ListAllRoles(ctx, tx)
+			rolesList, err = db.GetRoles(ctx, tx, pageOpts)
 			if err != nil {
-				return false, errors.Wrap(err, "db.ListAllRoles")
+				return false, errors.Wrap(err, "db.GetRoles")
 			}
 			return true, nil
 		}); !ok {
@@ -64,7 +74,12 @@ func AdminRoleCreate(s *hws.Server, conn *bun.DB, audit *auditlog.Logger) http.H
 			return
 		}
 
-		var rolesList []*db.Role
+		pageOpts := pageOptsFromForm(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
+		var rolesList *db.List[db.Role]
 		var newRole *db.Role
 		if ok := db.WithNotifyTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			newRole = &db.Role{
@@ -80,9 +95,9 @@ func AdminRoleCreate(s *hws.Server, conn *bun.DB, audit *auditlog.Logger) http.H
 				return false, errors.Wrap(err, "db.Insert")
 			}
 
-			rolesList, err = db.ListAllRoles(ctx, tx)
+			rolesList, err = db.GetRoles(ctx, tx, pageOpts)
 			if err != nil {
-				return false, errors.Wrap(err, "db.ListAllRoles")
+				return false, errors.Wrap(err, "db.GetRoles")
 			}
 
 			return true, nil
@@ -162,7 +177,12 @@ func AdminRoleDelete(s *hws.Server, conn *bun.DB, audit *auditlog.Logger) http.H
 			return
 		}
 
-		var rolesList []*db.Role
+		pageOpts := pageOptsFromForm(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
+		var rolesList *db.List[db.Role]
 		if ok := db.WithNotifyTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			// First check if role exists and get its details
 			role, err := db.GetRoleByID(ctx, tx, roleID)
@@ -185,9 +205,9 @@ func AdminRoleDelete(s *hws.Server, conn *bun.DB, audit *auditlog.Logger) http.H
 			}
 
 			// Reload roles
-			rolesList, err = db.ListAllRoles(ctx, tx)
+			rolesList, err = db.GetRoles(ctx, tx, pageOpts)
 			if err != nil {
-				return false, errors.Wrap(err, "db.ListAllRoles")
+				return false, errors.Wrap(err, "db.GetRoles")
 			}
 
 			return true, nil
@@ -289,7 +309,12 @@ func AdminRolePermissionsUpdate(s *hws.Server, conn *bun.DB, audit *auditlog.Log
 			selectedPermIDs[id] = true
 		}
 
-		var rolesList []*db.Role
+		pageOpts := pageOptsFromForm(s, w, r)
+		if pageOpts == nil {
+			return
+		}
+
+		var rolesList *db.List[db.Role]
 		if ok := db.WithWriteTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			// Get role with current permissions
 			role, err := db.GetRoleWithPermissions(ctx, tx, roleID)
@@ -356,9 +381,9 @@ func AdminRolePermissionsUpdate(s *hws.Server, conn *bun.DB, audit *auditlog.Log
 			}
 
 			// Reload roles
-			rolesList, err = db.ListAllRoles(ctx, tx)
+			rolesList, err = db.GetRoles(ctx, tx, pageOpts)
 			if err != nil {
-				return false, errors.Wrap(err, "db.ListAllRoles")
+				return false, errors.Wrap(err, "db.GetRoles")
 			}
 
 			return true, nil

internal/handlers/admin_users.go

@@ -14,10 +14,20 @@ import (
 // AdminUsersPage renders the full admin dashboard page with users section
 func AdminUsersPage(s *hws.Server, conn *bun.DB) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var pageOpts *db.PageOpts
+		if r.Method == "GET" {
+			pageOpts = pageOptsFromQuery(s, w, r)
+		} else {
+			pageOpts = pageOptsFromForm(s, w, r)
+		}
+		if pageOpts == nil {
+			return
+		}
+
 		var users *db.List[db.User]
 		if ok := db.WithReadTx(s, w, r, conn, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
-			users, err = db.GetUsersWithRoles(ctx, tx, nil)
+			users, err = db.GetUsersWithRoles(ctx, tx, pageOpts)
 			if err != nil {
 				return false, errors.Wrap(err, "db.GetUsersWithRoles")
 			}

internal/view/adminview/audit_log_detail.templ

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

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

internal/view/adminview/dashboard_layout.templ

@@ -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>
 	}
 }
 

internal/view/adminview/roles_list.templ

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

internal/view/adminview/roles_page.templ

@@ -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)
 	}

internal/view/adminview/user_list.templ

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

internal/view/pagination/table.templ

@@ -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>
+}