feat(customers): sortable table columns + default ascending ID order

- Customer list now defaults to ascending ID order instead of newest-first,
  so the table starts at customer #1 instead of the highest ID
- Add sort_by/sort_order query params to GET /customers (whitelisted column
  map to prevent SQL injection via arbitrary column names)
- Make ID/Name/Subdomain/Status/Devices/Created column headers clickable,
  toggling asc/desc with a visual arrow indicator

Co-Authored-By: Claude Sonnet 5 <[email protected]>

static/css/styles.css

@@ -1,5 +1,25 @@
 /* NetBird MSP Appliance - Custom Styles */
 
+/* Sortable table headers */
+.sortable-th {
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.sortable-th:hover {
+    color: var(--bs-primary);
+}
+
+.sortable-th .sort-icon {
+    opacity: 0.35;
+}
+
+.sortable-th.sort-asc .sort-icon,
+.sortable-th.sort-desc .sort-icon {
+    opacity: 1;
+}
+
 /* i18n FOUC prevention */
 body.i18n-loading #login-page,
 body.i18n-loading #app-page {

static/index.html

@@ -254,13 +254,13 @@
                         <table class="table table-hover mb-0">
                             <thead class="table-light">
                                 <tr>
-                                    <th data-i18n="dashboard.thId">ID</th>
-                                    <th data-i18n="dashboard.thName">Name</th>
-                                    <th data-i18n="dashboard.thSubdomain">Subdomain</th>
-                                    <th data-i18n="dashboard.thStatus">Status</th>
+                                    <th class="sortable-th" data-sort-col="id" onclick="setCustomerSort('id')"><span data-i18n="dashboard.thId">ID</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
+                                    <th class="sortable-th" data-sort-col="name" onclick="setCustomerSort('name')"><span data-i18n="dashboard.thName">Name</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
+                                    <th class="sortable-th" data-sort-col="subdomain" onclick="setCustomerSort('subdomain')"><span data-i18n="dashboard.thSubdomain">Subdomain</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
+                                    <th class="sortable-th" data-sort-col="status" onclick="setCustomerSort('status')"><span data-i18n="dashboard.thStatus">Status</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
                                     <th data-i18n="dashboard.thDashboard">Dashboard</th>
-                                    <th data-i18n="dashboard.thDevices">Devices</th>
-                                    <th data-i18n="dashboard.thCreated">Created</th>
+                                    <th class="sortable-th" data-sort-col="max_devices" onclick="setCustomerSort('max_devices')"><span data-i18n="dashboard.thDevices">Devices</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
+                                    <th class="sortable-th" data-sort-col="created_at" onclick="setCustomerSort('created_at')"><span data-i18n="dashboard.thCreated">Created</span><i class="bi bi-arrow-down-up sort-icon ms-1"></i></th>
                                     <th data-i18n="dashboard.thActions">Actions</th>
                                 </tr>
                             </thead>

static/js/app.js

@@ -12,6 +12,8 @@ let currentPage = 'dashboard';
 let currentCustomerId = null;
 let currentCustomerData = null;
 let customersPage = 1;
+let customersSortBy = 'id';
+let customersSortOrder = 'asc';
 let brandingData = { branding_name: 'NetBird MSP Appliance', branding_logo_path: null, version: 'alpha-1.1' };
 let azureConfig = { azure_enabled: false };
 
@@ -458,7 +460,7 @@ async function loadStats() {
 async function loadCustomers() {
     const search = document.getElementById('search-input').value;
     const status = document.getElementById('status-filter').value;
-    let url = `/customers?page=${customersPage}&per_page=25`;
+    let url = `/customers?page=${customersPage}&per_page=25&sort_by=${customersSortBy}&sort_order=${customersSortOrder}`;
     if (search) url += `&search=${encodeURIComponent(search)}`;
     if (status) url += `&status=${encodeURIComponent(status)}`;
 
@@ -470,7 +472,32 @@ async function loadCustomers() {
     }
 }
 
+function setCustomerSort(column) {
+    if (customersSortBy === column) {
+        customersSortOrder = customersSortOrder === 'asc' ? 'desc' : 'asc';
+    } else {
+        customersSortBy = column;
+        customersSortOrder = 'asc';
+    }
+    customersPage = 1;
+    loadCustomers();
+}
+
+function updateSortHeaders() {
+    document.querySelectorAll('.sortable-th').forEach(th => {
+        const col = th.getAttribute('data-sort-col');
+        const icon = th.querySelector('.sort-icon');
+        th.classList.remove('sort-asc', 'sort-desc');
+        if (icon) icon.className = 'bi bi-arrow-down-up sort-icon ms-1';
+        if (col === customersSortBy) {
+            th.classList.add(customersSortOrder === 'asc' ? 'sort-asc' : 'sort-desc');
+            if (icon) icon.className = `bi bi-arrow-${customersSortOrder === 'asc' ? 'up' : 'down'} sort-icon ms-1`;
+        }
+    });
+}
+
 function renderCustomersTable(data) {
+    updateSortHeaders();
     const tbody = document.getElementById('customers-table-body');
     if (!data.items || data.items.length === 0) {
         tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">${t('dashboard.noCustomers')}</td></tr>`;