UX enhancements on data views

2026-05-26 17:07:18 +02:00
parent 9d783b60a9
commit ea3a423186
8 changed files with 558 additions and 43 deletions
--- a/website/css/style.css
+++ b/website/css/style.css
@ -258,13 +258,16 @@ body {
    border-top: 1px solid var(--border);
 }

-/* Tables */
+/* Tables — scroll inside wrapper so sticky headers stay visible */
 .table-wrapper {
-    overflow-x: auto;
+    overflow: auto;
+    max-height: min(72vh, calc(100vh - 220px));
+    -webkit-overflow-scrolling: touch;
 }
 table.data-table {
    width: 100%;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
    font-size: .875rem;
 }
 table.data-table th,
@ -282,11 +285,42 @@ table.data-table th {
    background: #f8fafc;
    position: sticky;
    top: 0;
-    z-index: 1;
+    z-index: 2;
+    box-shadow: 0 1px 0 var(--border);
 }
 table.data-table tr:hover td {
    background: #f8fafc;
 }
+table.data-table tbody tr.row-test-data td {
+    background: #fffde7;
+}
+table.data-table tbody tr.row-test-data:hover td {
+    background: #fff9c4;
+}
+#qdb-table tbody tr.row-test-data td {
+    background: #fffde7;
+}
+#qdb-table tbody tr.row-test-data:hover td {
+    background: #fff9c4;
+}
+table.data-table .sticky-col {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--surface);
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
+}
+table.data-table thead th.sticky-col {
+    z-index: 5;
+    top: 0;
+    background: #f8fafc;
+}
+table.data-table tbody tr.row-test-data td.sticky-col {
+    background: #fffde7;
+}
+table.data-table tbody tr.row-test-data:hover td.sticky-col {
+    background: #fff9c4;
+}
 th.sortable { cursor: pointer; user-select: none; }
 th.sortable::after { content: ' \2195'; opacity: .4; }
 th.sort-asc::after { content: ' \2191'; opacity: 1; }
@ -484,6 +518,42 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
    font-size: .85rem;
    background: var(--surface);
 }
+.filter-bar input[type="search"],
+.filter-bar input[type="text"].filter-search {
+    min-width: 180px;
+}
+.pagination-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 12px;
+    font-size: .85rem;
+    color: var(--text-secondary);
+}
+.pagination-bar .btn {
+    min-width: 2.5rem;
+}
+.data-toolbar-hint {
+    font-size: .8rem;
+    color: var(--text-secondary);
+}
+#qdb-table th.col-key {
+    font-size: .75rem;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: 0;
+    max-width: 140px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#qdb-table thead tr:nth-child(1) th[data-id] {
+    font-size: .7rem;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

 /* Empty state */
 .empty-state {
--- a/website/js/pages/assignments.js
+++ b/website/js/pages/assignments.js
@ -1,5 +1,6 @@
 import { apiGet, apiPost } from '../api.js';
 import { showToast } from '../app.js';
+import { isDevTestClientCode, isDevTestUsername, testDataRowClassForClient } from '../test-data.js';

 let coaches = [];
 let clients = [];
@ -61,8 +62,9 @@ function renderAssignments() {
                <ul class="coach-list" id="coachList">
                    ${coaches.map(c => {
                        const count = (clientsByCoach[c.coachID] || []).length;
+                        const coachTest = isDevTestUsername(c.username) ? ' row-test-data' : '';
                        return `
-                        <li class="coach-list-item" data-id="${c.coachID}">
+                        <li class="coach-list-item${coachTest}" data-id="${c.coachID}">
                            <div class="coach-name">${esc(c.username)}</div>
                            ${c.supervisorUsername
                                ? `<div class="coach-supervisor">${esc(c.supervisorUsername)}</div>`
@ -88,6 +90,11 @@ function renderAssignments() {
                                    ).join('')}
                                </select>
                                <input type="text" id="clientSearch" placeholder="Search client code..." style="width:160px">
+                                <select id="clientTestFilter">
+                                    <option value="">All clients</option>
+                                    <option value="test">Test only</option>
+                                    <option value="hide-test">Hide test</option>
+                                </select>
                            </div>
                        </div>
                        <div style="display:flex;gap:6px">
@ -95,7 +102,7 @@ function renderAssignments() {
                            <button class="btn btn-sm" id="clearSelBtn">Clear</button>
                        </div>
                    </div>
-                    <div class="table-wrapper" style="max-height:420px;overflow-y:auto">
+                    <div class="table-wrapper" style="max-height:420px">
                        <table class="data-table">
                            <thead>
                                <tr>
@ -141,6 +148,7 @@ function renderAssignments() {
    // Wire filters
    document.getElementById('filterByCoach').addEventListener('change', renderClientRows);
    document.getElementById('clientSearch').addEventListener('input', renderClientRows);
+    document.getElementById('clientTestFilter').addEventListener('change', renderClientRows);

    // Wire select all / clear
    document.getElementById('selectAllBtn').addEventListener('click', () => {
@ -166,6 +174,7 @@ function renderClientRows() {
    const body       = document.getElementById('clientTableBody');
    const coachFilter = document.getElementById('filterByCoach').value;
    const search     = document.getElementById('clientSearch').value.trim().toLowerCase();
+    const testMode   = document.getElementById('clientTestFilter')?.value || '';

    let visible = clients;
    if (coachFilter === '__unassigned__') {
@ -176,6 +185,11 @@ function renderClientRows() {
    if (search) {
        visible = visible.filter(c => c.clientCode.toLowerCase().includes(search));
    }
+    if (testMode === 'test') {
+        visible = visible.filter(c => isDevTestClientCode(c.clientCode));
+    } else if (testMode === 'hide-test') {
+        visible = visible.filter(c => !isDevTestClientCode(c.clientCode));
+    }

    if (!visible.length) {
        body.innerHTML = `<tr><td colspan="3" style="text-align:center;color:var(--text-secondary);padding:24px">No clients match the current filter</td></tr>`;
@ -184,7 +198,7 @@ function renderClientRows() {
    }

    body.innerHTML = visible.map(c => `
-        <tr>
+        <tr class="${testDataRowClassForClient(c.clientCode).trim()}">
            <td><input type="checkbox" class="client-cb" data-code="${esc(c.clientCode)}" value="${esc(c.clientCode)}"></td>
            <td><strong>${esc(c.clientCode)}</strong></td>
            <td>${c.coachUsername ? esc(c.coachUsername) : '<span style="color:var(--text-secondary);font-style:italic">Unassigned</span>'}</td>
--- a/website/js/pages/clients.js
+++ b/website/js/pages/clients.js
@ -1,8 +1,14 @@
 import { apiGet, apiPost, apiDelete } from '../api.js';
 import { showToast } from '../app.js';
+import { isDevTestClientCode, testDataRowClassForClient } from '../test-data.js';
+
+const PAGE_SIZE = 50;

 let clientsList = [];
 let coachesList = [];
+let filterSearch = '';
+let filterTestData = '';
+let page = 0;

 export async function clientsPage() {
    const app = document.getElementById('app');
@ -62,6 +68,15 @@ function renderClients() {

    container.innerHTML = `
        <div class="card">
+            <div class="filter-bar">
+                <input type="search" id="clientListSearch" class="filter-search" placeholder="Search client code…" value="${esc(filterSearch)}">
+                <select id="clientTestFilter">
+                    <option value="">All clients</option>
+                    <option value="test" ${filterTestData === 'test' ? 'selected' : ''}>Test data only</option>
+                    <option value="hide-test" ${filterTestData === 'hide-test' ? 'selected' : ''}>Hide test data</option>
+                </select>
+                <span class="data-toolbar-hint" id="clientListCount"></span>
+            </div>
            <div class="table-wrapper">
                <table class="data-table">
                    <thead>
@ -71,16 +86,76 @@ function renderClients() {
                            <th>Actions</th>
                        </tr>
                    </thead>
-                    <tbody>
-                        ${clientsList.map(c => clientRowHTML(c)).join('')}
-                    </tbody>
+                    <tbody id="clientsTableBody"></tbody>
                </table>
            </div>
+            <div class="pagination-bar" id="clientsPagination"></div>
        </div>`;

-    container.querySelectorAll('.delete-client-btn').forEach(btn => {
-        btn.addEventListener('click', () => deleteClient(btn.dataset.code));
+    document.getElementById('clientListSearch').addEventListener('input', (e) => {
+        filterSearch = e.target.value.trim();
+        page = 0;
+        renderClientTableBody();
    });
+    document.getElementById('clientTestFilter').addEventListener('change', (e) => {
+        filterTestData = e.target.value;
+        page = 0;
+        renderClientTableBody();
+    });
+
+    renderClientTableBody();
+}
+
+function getFilteredClientsList() {
+    let list = clientsList;
+    if (filterSearch) {
+        const q = filterSearch.toLowerCase();
+        list = list.filter(c => (c.clientCode || '').toLowerCase().includes(q));
+    }
+    if (filterTestData === 'test') {
+        list = list.filter(c => isDevTestClientCode(c.clientCode));
+    } else if (filterTestData === 'hide-test') {
+        list = list.filter(c => !isDevTestClientCode(c.clientCode));
+    }
+    return list;
+}
+
+function renderClientTableBody() {
+    const body = document.getElementById('clientsTableBody');
+    const countEl = document.getElementById('clientListCount');
+    const filtered = getFilteredClientsList();
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    if (page >= totalPages) page = totalPages - 1;
+    const slice = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
+    if (countEl) {
+        countEl.textContent = `${filtered.length} client${filtered.length === 1 ? '' : 's'}`;
+    }
+
+    if (!slice.length) {
+        body.innerHTML = `<tr><td colspan="3" style="text-align:center;color:var(--text-secondary);padding:24px">No clients match</td></tr>`;
+    } else {
+        body.innerHTML = slice.map(c => clientRowHTML(c)).join('');
+        body.querySelectorAll('.delete-client-btn').forEach(btn => {
+            btn.addEventListener('click', () => deleteClient(btn.dataset.code));
+        });
+    }
+
+    const pag = document.getElementById('clientsPagination');
+    if (!pag) return;
+    if (filtered.length <= PAGE_SIZE) {
+        pag.innerHTML = '';
+        return;
+    }
+    const from = page * PAGE_SIZE + 1;
+    const to = Math.min((page + 1) * PAGE_SIZE, filtered.length);
+    pag.innerHTML = `
+        <button type="button" class="btn btn-sm" id="clientsPagePrev" ${page <= 0 ? 'disabled' : ''}>Prev</button>
+        <span>Rows ${from}–${to} of ${filtered.length}</span>
+        <button type="button" class="btn btn-sm" id="clientsPageNext" ${page >= totalPages - 1 ? 'disabled' : ''}>Next</button>
+    `;
+    document.getElementById('clientsPagePrev')?.addEventListener('click', () => { page--; renderClientTableBody(); });
+    document.getElementById('clientsPageNext')?.addEventListener('click', () => { page++; renderClientTableBody(); });
 }

 function clientRowHTML(c) {
@ -89,7 +164,7 @@ function clientRowHTML(c) {
        : `<span style="color:var(--text-secondary);font-style:italic">Unassigned</span>`;

    return `
-        <tr>
+        <tr class="${testDataRowClassForClient(c.clientCode).trim()}">
            <td><strong>${esc(c.clientCode)}</strong></td>
            <td>${coach}</td>
            <td>
@ -104,7 +179,8 @@ async function deleteClient(clientCode) {
        await apiDelete('clients.php', { clientCode });
        clientsList = clientsList.filter(c => c.clientCode !== clientCode);
        showToast(`Client "${clientCode}" deleted`, 'success');
-        renderClients();
+        if (!clientsList.length) renderClients();
+        else renderClientTableBody();
    } catch (e) {
        showToast(e.message, 'error');
    }
--- a/website/js/pages/results.js
+++ b/website/js/pages/results.js
@ -1,5 +1,12 @@
 import { apiGet } from '../api.js';
 import { showToast } from '../app.js';
+import {
+    isDevTestClientCode,
+    questionLocalKey,
+    testDataRowClassForClient,
+} from '../test-data.js';
+
+const PAGE_SIZE = 50;

 let sortCol = null;
 let sortDir = 'asc';
@ -11,6 +18,10 @@ let filterSupervisor = '';
 let filterStatus = '';
 let filterDateFrom = '';
 let filterDateTo = '';
+let filterSearch = '';
+let filterTestData = '';
+let filterQuestion = '';
+let page = 0;

 export async function resultsPage(params) {
    const app = document.getElementById('app');
@ -21,6 +32,10 @@ export async function resultsPage(params) {
    filterStatus = '';
    filterDateFrom = '';
    filterDateTo = '';
+    filterSearch = '';
+    filterTestData = '';
+    filterQuestion = '';
+    page = 0;

    app.innerHTML = `
        <div class="page-header">
@ -78,47 +93,93 @@ function renderResults() {
                    to
                    <input type="date" id="filterDateTo" value="${esc(filterDateTo)}">
                </label>
+                <input type="search" id="filterSearch" class="filter-search" placeholder="Search client code…" value="${esc(filterSearch)}">
+                <select id="filterTestData">
+                    <option value="">All clients</option>
+                    <option value="test" ${filterTestData === 'test' ? 'selected' : ''}>Test data only</option>
+                    <option value="hide-test" ${filterTestData === 'hide-test' ? 'selected' : ''}>Hide test data</option>
+                </select>
+                <input type="search" id="filterQuestion" placeholder="Go to question key…" value="${esc(filterQuestion)}" style="min-width:160px" list="questionKeyList">
+                <datalist id="questionKeyList"></datalist>
+                <button type="button" class="btn btn-sm" id="gotoQuestionBtn">Go to column</button>
                <button type="button" class="btn btn-sm" id="clearFiltersBtn">Clear filters</button>
                <span style="margin-left:auto;font-size:.85rem;color:var(--text-secondary)" id="resultCount"></span>
                <a id="exportCsvLink" class="btn btn-sm" href="#">Export CSV</a>
            </div>
+            <p class="data-toolbar-hint" style="margin-top:8px">Question columns show keys; hover headers for full text. Test rows (DEV-CL-*) have a yellow background.</p>
        </div>
        <div class="card">
-            <div class="table-wrapper">
+            <div class="table-wrapper" id="resultsTableWrap">
                <table class="data-table" id="resultsTable">
                    <thead><tr id="resultsHead"></tr></thead>
                    <tbody id="resultsBody"></tbody>
                </table>
            </div>
+            <div class="pagination-bar" id="paginationBar"></div>
        </div>
    `;

+    const qKeyList = document.getElementById('questionKeyList');
+    qKeyList.innerHTML = questionsDef
+        .map(q => `<option value="${esc(questionLocalKey(q.questionID, q.defaultText))}"></option>`)
+        .join('');
+
    document.getElementById('filterSupervisor').addEventListener('change', (e) => {
        filterSupervisor = e.target.value;
+        page = 0;
        renderTableRows();
    });
    document.getElementById('filterCoach').addEventListener('change', (e) => {
        filterCoach = e.target.value;
+        page = 0;
        renderTableRows();
    });
    document.getElementById('filterStatus').addEventListener('change', (e) => {
        filterStatus = e.target.value;
+        page = 0;
        renderTableRows();
    });
    document.getElementById('filterDateFrom').addEventListener('change', (e) => {
        filterDateFrom = e.target.value;
+        page = 0;
        renderTableRows();
    });
    document.getElementById('filterDateTo').addEventListener('change', (e) => {
        filterDateTo = e.target.value;
+        page = 0;
        renderTableRows();
    });
+    document.getElementById('filterSearch').addEventListener('input', (e) => {
+        filterSearch = e.target.value.trim();
+        page = 0;
+        renderTableRows();
+    });
+    document.getElementById('filterTestData').addEventListener('change', (e) => {
+        filterTestData = e.target.value;
+        page = 0;
+        renderTableRows();
+    });
+    document.getElementById('gotoQuestionBtn').addEventListener('click', () => {
+        filterQuestion = document.getElementById('filterQuestion').value.trim();
+        scrollToQuestionColumn(filterQuestion);
+    });
+    document.getElementById('filterQuestion').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            filterQuestion = e.target.value.trim();
+            scrollToQuestionColumn(filterQuestion);
+        }
+    });
    document.getElementById('clearFiltersBtn').addEventListener('click', () => {
        filterCoach = '';
        filterSupervisor = '';
        filterStatus = '';
        filterDateFrom = '';
        filterDateTo = '';
+        filterSearch = '';
+        filterTestData = '';
+        filterQuestion = '';
+        page = 0;
        renderResults();
    });
    document.getElementById('exportCsvLink').addEventListener('click', (e) => {
@ -140,17 +201,24 @@ function renderTableHead() {
        { key: 'sumPoints', label: 'Score' },
        { key: 'completedAt', label: 'Completed' },
    ];
-    const questionCols = questionsDef.map(q => ({
-        key: `q_${q.questionID}`,
-        label: q.defaultText,
-        questionID: q.questionID,
-    }));
+    const questionCols = questionsDef.map(q => {
+        const qKey = questionLocalKey(q.questionID, q.defaultText);
+        return {
+            key: `q_${q.questionID}`,
+            label: qKey,
+            title: q.defaultText || qKey,
+            questionID: q.questionID,
+            questionKey: qKey,
+        };
+    });
    const allCols = [...fixedCols, ...questionCols];

-    head.innerHTML = allCols.map(col => {
+    head.innerHTML = allCols.map((col, idx) => {
        let cls = 'sortable';
        if (sortCol === col.key) cls += sortDir === 'asc' ? ' sort-asc' : ' sort-desc';
-        return `<th class="${cls}" data-key="${col.key}" title="${esc(col.label)}">${esc(col.label)}</th>`;
+        if (idx === 0) cls += ' sticky-col';
+        const title = col.title ? ` title="${esc(col.title)}"` : '';
+        return `<th class="${cls}" data-key="${col.key}"${title}>${esc(col.label)}</th>`;
    }).join('');

    head.querySelectorAll('th.sortable').forEach(th => {
@ -158,12 +226,31 @@ function renderTableHead() {
            const key = th.dataset.key;
            if (sortCol === key) sortDir = sortDir === 'asc' ? 'desc' : 'asc';
            else { sortCol = key; sortDir = 'asc'; }
+            page = 0;
            renderTableHead();
            renderTableRows();
        });
    });
 }

+function scrollToQuestionColumn(query) {
+    if (!query) return;
+    const q = query.toLowerCase();
+    const th = [...document.querySelectorAll('#resultsHead th')].find(el => {
+        const key = (el.dataset.key || '').toLowerCase();
+        const text = (el.textContent || '').trim().toLowerCase();
+        const title = (el.getAttribute('title') || '').toLowerCase();
+        return text === q || title === q || key.endsWith(q) || text.includes(q);
+    });
+    if (!th) {
+        showToast(`No column matching "${query}"`, 'error');
+        return;
+    }
+    th.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    th.style.outline = '2px solid var(--primary)';
+    setTimeout(() => { th.style.outline = ''; }, 2000);
+}
+
 function getCoachFilterOptions() {
    const map = new Map();
    allClients.forEach(c => {
@ -203,9 +290,49 @@ function getFilteredClients() {
            return true;
        });
    }
+    if (filterSearch) {
+        const q = filterSearch.toLowerCase();
+        clients = clients.filter(c => (c.clientCode || '').toLowerCase().includes(q));
+    }
+    if (filterTestData === 'test') {
+        clients = clients.filter(c => isDevTestClientCode(c.clientCode));
+    } else if (filterTestData === 'hide-test') {
+        clients = clients.filter(c => !isDevTestClientCode(c.clientCode));
+    }
    return clients;
 }

+function renderPagination(totalRows) {
+    const bar = document.getElementById('paginationBar');
+    if (!bar) return;
+    const totalPages = Math.max(1, Math.ceil(totalRows / PAGE_SIZE));
+    if (page >= totalPages) page = totalPages - 1;
+    if (page < 0) page = 0;
+
+    if (totalRows <= PAGE_SIZE) {
+        bar.innerHTML = totalRows
+            ? `<span>${totalRows} row${totalRows === 1 ? '' : 's'}</span>`
+            : '';
+        return;
+    }
+
+    const from = page * PAGE_SIZE + 1;
+    const to = Math.min((page + 1) * PAGE_SIZE, totalRows);
+    bar.innerHTML = `
+        <button type="button" class="btn btn-sm" id="pagePrev" ${page <= 0 ? 'disabled' : ''}>Prev</button>
+        <span>Rows ${from}–${to} of ${totalRows} (page ${page + 1}/${totalPages})</span>
+        <button type="button" class="btn btn-sm" id="pageNext" ${page >= totalPages - 1 ? 'disabled' : ''}>Next</button>
+    `;
+    document.getElementById('pagePrev')?.addEventListener('click', () => {
+        page--;
+        renderTableRows();
+    });
+    document.getElementById('pageNext')?.addEventListener('click', () => {
+        page++;
+        renderTableRows();
+    });
+}
+
 function dateInputToUnixStart(yyyyMmDd) {
    const [y, m, d] = yyyyMmDd.split('-').map(Number);
    return Math.floor(new Date(y, m - 1, d).getTime() / 1000);
@ -237,11 +364,17 @@ function renderTableRows() {

    document.getElementById('resultCount').textContent = `${clients.length} client${clients.length === 1 ? '' : 's'}`;

+    renderPagination(clients.length);
+
    if (!clients.length) {
        body.innerHTML = `<tr><td colspan="99" style="text-align:center;color:var(--text-secondary);padding:30px">No results found</td></tr>`;
        return;
    }

+    const totalPages = Math.max(1, Math.ceil(clients.length / PAGE_SIZE));
+    if (page >= totalPages) page = totalPages - 1;
+    clients = clients.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
    // Build option text lookup
    const optionMap = {};
    questionsDef.forEach(q => {
@ -269,8 +402,8 @@ function renderTableRows() {
            return '<td>—</td>';
        }).join('');

-        return `<tr>
-            <td>${esc(c.clientCode)}</td>
+        return `<tr class="${testDataRowClassForClient(c.clientCode).trim()}">
+            <td class="sticky-col">${esc(c.clientCode)}</td>
            <td>${esc(coachDisplayName(c))}</td>
            <td>${esc(supervisorDisplayName(c))}</td>
            <td>${statusBadge}</td>
@ -313,7 +446,7 @@ function exportCSV() {
    });

    const headers = ['clientCode', 'coach', 'supervisor', 'status', 'sumPoints', 'completedAt',
-        ...questionsDef.map(q => q.defaultText)];
+        ...questionsDef.map(q => questionLocalKey(q.questionID, q.defaultText))];

    const rows = clients.map(c => {
        const base = [
--- a/website/js/pages/users.js
+++ b/website/js/pages/users.js
@ -1,5 +1,6 @@
 import { apiGet, apiPost, apiDelete } from '../api.js';
 import { getRole, getUser, showToast } from '../app.js';
+import { isDevTestUsername, testDataRowClassForUser } from '../test-data.js';

 // Roles an admin can create; supervisors can only create coaches
 const CREATEABLE_ROLES = {
@ -10,6 +11,8 @@ const CREATEABLE_ROLES = {
 let usersList       = [];
 let supervisorsList = [];
 let callerRole      = '';
+let filterSearch    = '';
+let filterTestData  = '';

 export async function usersPage() {
    callerRole = getRole();
@ -86,8 +89,19 @@ function renderUsers() {
            { label: 'Coaches',     key: 'coach'       },
          ];

-    container.innerHTML = groups.map(group => {
-        const users = byRole[group.key] || [];
+    container.innerHTML = `
+        <div class="card" style="margin-bottom:16px">
+            <div class="filter-bar">
+                <input type="search" id="userListSearch" class="filter-search" placeholder="Search username…" value="${esc(filterSearch)}">
+                <select id="userTestFilter">
+                    <option value="">All users</option>
+                    <option value="test" ${filterTestData === 'test' ? 'selected' : ''}>Test data only (dev_*)</option>
+                    <option value="hide-test" ${filterTestData === 'hide-test' ? 'selected' : ''}>Hide test data</option>
+                </select>
+            </div>
+        </div>
+    ` + groups.map(group => {
+        const users = filterUsers(byRole[group.key] || []);
        if (!users.length) return '';
        return `
        <div class="card" style="margin-bottom:16px">
@ -111,11 +125,34 @@ function renderUsers() {
        </div>`;
    }).join('');

+    document.getElementById('userListSearch')?.addEventListener('input', (e) => {
+        filterSearch = e.target.value.trim();
+        renderUsers();
+    });
+    document.getElementById('userTestFilter')?.addEventListener('change', (e) => {
+        filterTestData = e.target.value;
+        renderUsers();
+    });
+
    container.querySelectorAll('.delete-user-btn').forEach(btn => {
        btn.addEventListener('click', () => deleteUser(btn.dataset.id, btn.dataset.name));
    });
 }

+function filterUsers(users) {
+    let list = users;
+    if (filterSearch) {
+        const q = filterSearch.toLowerCase();
+        list = list.filter(u => (u.username || '').toLowerCase().includes(q));
+    }
+    if (filterTestData === 'test') {
+        list = list.filter(u => isDevTestUsername(u.username));
+    } else if (filterTestData === 'hide-test') {
+        list = list.filter(u => !isDevTestUsername(u.username));
+    }
+    return list;
+}
+
 function userRowHTML(u, myUsername) {
    const isSelf   = u.username === myUsername;
    const detail   = u.role === 'coach'
@ -134,7 +171,7 @@ function userRowHTML(u, myUsername) {
    );

    return `
-        <tr>
+        <tr class="${testDataRowClassForUser(u.username).trim()}">
            <td>
                <strong>${esc(u.username)}</strong>
                ${isSelf ? '<span class="badge badge-you">You</span>' : ''}
--- a/website/js/test-data.js
+++ b/website/js/test-data.js
@ -0,0 +1,34 @@
+/** Dev fixture prefixes (import script / dev_fixture.php). */
+export function isDevTestClientCode(code) {
+    const c = String(code ?? '').trim();
+    return c.toUpperCase().startsWith('DEV-CL-');
+}
+
+export function isDevTestUsername(username) {
+    return String(username ?? '').trim().toLowerCase().startsWith('dev_');
+}
+
+export function testDataRowClassForClient(clientCode) {
+    return isDevTestClientCode(clientCode) ? ' row-test-data' : '';
+}
+
+export function testDataRowClassForUser(username) {
+    return isDevTestUsername(username) ? ' row-test-data' : '';
+}
+
+/** Local question key from full questionID (hash__q5 → q5). */
+export function questionLocalKey(questionID, fallback = '') {
+    const id = String(questionID ?? '');
+    const sep = id.lastIndexOf('__');
+    if (sep >= 0) return id.slice(sep + 2);
+    return fallback || id;
+}
+
+/** header_order.json column id → question key (questionnaire_x-y → y). */
+export function headerColumnQuestionKey(headerId) {
+    const id = String(headerId ?? '');
+    if (id === 'client_code') return 'client_code';
+    const dash = id.indexOf('-');
+    if (dash < 0) return id;
+    return id.slice(dash + 1);
+}