enhanced navigation and added coach reassignment

website/js/pages/users.js

@@ -1,5 +1,5 @@
-import { apiGet, apiPost, apiDelete } from '../api.js';
-import { getRole, getUser, showToast } from '../app.js';
+import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
+import { getRole, getUser, pageHeaderHTML, showToast } from '../app.js';
 import { isDevTestUsername, testDataRowClassForUser } from '../test-data.js';
 
 // Roles an admin can create; supervisors can only create coaches
@@ -45,13 +45,10 @@ export async function usersPage() {
     const app = document.getElementById('app');
 
     app.innerHTML = `
-        <div class="page-header">
-            <h1>Users</h1>
-            <div class="actions">
+        ${pageHeaderHTML('Users', `
                 <button class="btn" id="downloadUsersBtn" ${usersList.length ? '' : 'disabled'}>Download CSV</button>
                 <button class="btn btn-primary" id="showCreateFormBtn">+ Create User</button>
-            </div>
-        </div>
+        `)}
         <div id="createUserWrapper" style="display:none"></div>
         <div id="usersContent"><div class="spinner"></div></div>
     `;
@@ -216,13 +213,37 @@ function updateRoleGroupTable(roleKey, myUsername) {
     tbody.querySelectorAll('.delete-user-btn').forEach(btn => {
         btn.addEventListener('click', () => deleteUser(btn.dataset.id, btn.dataset.name));
     });
+    tbody.querySelectorAll('.coach-supervisor-select').forEach(sel => {
+        sel.addEventListener('change', () => reassignCoachSupervisor(sel));
+    });
+}
+
+function supervisorSelectHTML(u) {
+    if (!supervisorsList.length) {
+        return '<span class="data-toolbar-hint">No supervisors</span>';
+    }
+    const cur = u.supervisorID || '';
+    const opts = supervisorsList.map(s => {
+        const label = s.location ? `${s.username} (${s.location})` : s.username;
+        const selected = s.supervisorID === cur ? ' selected' : '';
+        return `<option value="${esc(s.supervisorID)}"${selected}>${esc(label)}</option>`;
+    }).join('');
+    return `<select class="coach-supervisor-select" data-user-id="${esc(u.userID)}"
+        data-username="${esc(u.username)}" data-prev="${esc(cur)}" aria-label="Supervisor for ${esc(u.username)}">
+        ${opts}
+    </select>`;
 }
 
 function userRowHTML(u, myUsername) {
     const isSelf   = u.username === myUsername;
-    const detail   = u.role === 'coach'
-        ? esc(u.supervisorUsername || '—')
-        : esc(u.location || '—');
+    let detail;
+    if (u.role === 'coach') {
+        detail = callerRole === 'admin'
+            ? supervisorSelectHTML(u)
+            : esc(u.supervisorUsername || '—');
+    } else {
+        detail = esc(u.location || '—');
+    }
     const created  = u.createdAt
         ? new Date(parseInt(u.createdAt, 10) * 1000).toLocaleDateString()
         : '—';
@@ -252,6 +273,34 @@ function userRowHTML(u, myUsername) {
         </tr>`;
 }
 
+async function reassignCoachSupervisor(selectEl) {
+    const userID = selectEl.dataset.userId;
+    const username = selectEl.dataset.username || '';
+    const prev = selectEl.dataset.prev || '';
+    const supervisorID = selectEl.value;
+
+    if (supervisorID === prev) {
+        return;
+    }
+
+    selectEl.disabled = true;
+    try {
+        const data = await apiPut('users.php', { userID, supervisorID });
+        const u = usersList.find(x => x.userID === userID);
+        if (u) {
+            u.supervisorID = data.supervisorID ?? supervisorID;
+            u.supervisorUsername = data.supervisorUsername ?? '';
+        }
+        selectEl.dataset.prev = supervisorID;
+        showToast(`Coach "${username}" assigned to ${data.supervisorUsername || 'supervisor'}`, 'success');
+    } catch (e) {
+        selectEl.value = prev;
+        showToast(e.message, 'error');
+    } finally {
+        selectEl.disabled = false;
+    }
+}
+
 async function deleteUser(userID, username) {
     if (!confirm(`Delete user "${username}"? This cannot be undone.`)) return;
     try {