multi-controller update

static/index.html

@@ -9,7 +9,7 @@
     :root {
       --bg: #050508; --bg-card: #111113; --gold: #d4af37; --gold-soft: #b89630;
       --text: #f5f5f5; --muted: #888; --danger: #ff4d4f; --success: #2ecc71;
-      --warn: #f39c12; --border: #222;
+      --warn: #f39c12; --border: #222; --blue: #64b4ff;
     }
     body {
       background: radial-gradient(circle at top, #18181c 0%, #050508 55%);
@@ -38,11 +38,11 @@
     .control-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
     .spacer { flex: 1; }
     label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
-    input {
+    input, select {
       background: var(--bg-card); border-radius: 999px; border: 1px solid var(--border);
       padding: 8px 14px; font-size: 0.9rem; color: var(--text); outline: none; min-width: 130px;
     }
-    input:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 1px rgba(212,175,55,0.4); }
+    input:focus, select:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 1px rgba(212,175,55,0.4); }
     button {
       border-radius: 999px; border: 1px solid rgba(212,175,55,0.7);
       background: radial-gradient(circle at top, rgba(212,175,55,0.35), rgba(2,2,4,0.95));
@@ -53,8 +53,10 @@
     button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
     button:active { transform: translateY(1px); box-shadow: none; }
     button:disabled { opacity: 0.45; cursor: default; transform: none; }
-    .sync-btn { border-color: rgba(100,180,255,0.6); background: radial-gradient(circle at top, rgba(100,180,255,0.18), rgba(2,2,4,0.95)); }
-    .reset-btn { border-color: rgba(255,100,100,0.6); background: radial-gradient(circle at top, rgba(255,80,80,0.18), rgba(2,2,4,0.95)); }
+    .sync-btn       { border-color: rgba(100,180,255,0.6); background: radial-gradient(circle at top, rgba(100,180,255,0.18), rgba(2,2,4,0.95)); }
+    .controllers-btn{ border-color: rgba(160,120,255,0.6); background: radial-gradient(circle at top, rgba(160,120,255,0.18), rgba(2,2,4,0.95)); }
+    .reset-btn      { border-color: rgba(255,100,100,0.6); background: radial-gradient(circle at top, rgba(255,80,80,0.18), rgba(2,2,4,0.95)); }
+    .small-btn      { padding: 6px 12px; font-size: 0.75rem; }
     .summary-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; font-size: 0.85rem; }
     .summary-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border-radius: 999px; padding: 6px 14px; border: 1px solid var(--border); color: var(--muted); }
     .dot { width: 9px; height: 9px; border-radius: 50%; }
@@ -73,6 +75,12 @@
     tbody tr:hover { background: rgba(212,175,55,0.04); }
     .name-cell   { font-weight: 500; color: var(--text); }
     .muted-cell  { color: var(--muted); font-size: 0.82rem; }
+    .source-chip {
+      display: inline-block; padding: 3px 10px; border-radius: 999px;
+      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
+      color: var(--blue); background: rgba(100,180,255,0.08);
+      border: 1px solid rgba(100,180,255,0.35);
+    }
     .align-center { text-align: center; }
     .time-first  { color: var(--text); font-weight: 500; }
     .time-latest { color: var(--muted); font-size: 0.85rem; }
@@ -87,29 +95,59 @@
     .chip-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; }
     .empty-state { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 0.9rem; }
     .empty-state span { color: var(--gold-soft); }
-    /* Modal */
+
     .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
     .modal-overlay.open { display: flex; }
-    .modal { background: var(--bg-card); border: 1px solid rgba(255,100,100,0.5); border-radius: 16px; padding: 28px 32px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.8); }
-    .modal h2 { color: var(--danger); font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
-    .modal p { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; line-height: 1.6; }
+    .modal { background: var(--bg-card); border: 1px solid rgba(212,175,55,0.3); border-radius: 16px; padding: 24px; max-width: 720px; width: 92%; box-shadow: 0 24px 60px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; }
+    .modal.danger { border-color: rgba(255,100,100,0.5); max-width: 420px; text-align: center; }
+    .modal h2 { color: var(--gold); font-size: 1.05rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
+    .modal.danger h2 { color: var(--danger); }
+    .modal p { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; line-height: 1.55; }
     .modal p strong { color: var(--text); }
-    .modal-actions { display: flex; gap: 12px; justify-content: center; }
+    .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
+    .modal.danger .modal-actions { justify-content: center; }
     .modal-cancel  { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }
     .modal-confirm { border-color: rgba(255,100,100,0.6); background: rgba(255,80,80,0.18); }
-    /* Toast */
+
+    .ctrl-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
+    .ctrl-row {
+      display: grid; grid-template-columns: 1fr auto;
+      gap: 8px 16px; padding: 12px 14px;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid var(--border); border-radius: 10px; align-items: center;
+    }
+    .ctrl-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+    .ctrl-name { font-weight: 600; color: var(--text); font-size: 0.95rem; }
+    .ctrl-name .disabled-tag { color: var(--muted); font-size: 0.7rem; margin-left: 6px; font-weight: 400; }
+    .ctrl-sub  { font-size: 0.78rem; color: var(--muted); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }
+    .ctrl-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+    .ctrl-actions button { padding: 5px 10px; font-size: 0.7rem; letter-spacing: 0.08em; }
+
+    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
+    .form-grid .full { grid-column: 1 / -1; }
+    .form-grid label { display: block; margin-bottom: 4px; }
+    .form-grid input { width: 100%; min-width: 0; }
+    .form-hint { font-size: 0.78rem; color: var(--muted); margin-top: -4px; margin-bottom: 10px; }
+    .form-error { color: var(--danger); font-size: 0.82rem; margin-bottom: 10px; min-height: 1.1em; }
+
     .toast {
       position: fixed; bottom: 24px; right: 24px; background: var(--bg-card);
       border: 1px solid rgba(212,175,55,0.5); border-radius: 12px; padding: 12px 18px;
       font-size: 0.85rem; color: var(--gold); opacity: 0; transform: translateY(12px);
       transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 200;
+      max-width: 360px;
     }
     .toast.show { opacity: 1; transform: translateY(0); }
+    .toast.error { border-color: rgba(255,100,100,0.6); color: #ffd6d7; }
+
     @media (max-width: 800px) {
       header { flex-direction: column; align-items: flex-start; }
       .controls { flex-direction: column; align-items: stretch; }
-      input, button { width: 100%; }
-      th:nth-child(4), td:nth-child(4) { display: none; }
+      input, select, button { width: 100%; }
+      th:nth-child(5), td:nth-child(5) { display: none; }
+      .form-grid { grid-template-columns: 1fr; }
+      .ctrl-row { grid-template-columns: 1fr; }
+      .ctrl-actions { justify-content: flex-start; }
     }
   </style>
 </head>
@@ -132,10 +170,15 @@
       <label for="cutoff">Badged in by</label>
       <input type="time" id="cutoff" value="09:00">
     </div>
+    <div class="control-group">
+      <label for="controller-filter">Controller</label>
+      <select id="controller-filter"><option value="">All</option></select>
+    </div>
     <div class="spacer"></div>
     <div class="control-group">
       <button id="refresh-btn">&#8635; Refresh</button>
       <button class="sync-btn" id="sync-btn">&#8635; Sync Users</button>
+      <button class="controllers-btn" id="open-controllers-btn">&#9881; Controllers</button>
       <button class="reset-btn" id="reset-btn">&#x2715; Reset Day</button>
     </div>
   </section>
@@ -152,6 +195,7 @@
         <tr>
           <th>#</th>
           <th>Name</th>
+          <th>Source</th>
           <th>First Badge In</th>
           <th>Latest Badge In</th>
           <th>Actor ID</th>
@@ -159,7 +203,7 @@
         </tr>
       </thead>
       <tbody id="table-body">
-        <tr><td colspan="6" class="empty-state">No data yet. <span>Badge into a door</span> and press Refresh.</td></tr>
+        <tr><td colspan="7" class="empty-state">No data yet. <span>Badge into a door</span> and press Refresh.</td></tr>
       </tbody>
     </table>
   </section>
@@ -167,7 +211,7 @@
 
 <!-- Reset confirmation modal -->
 <div class="modal-overlay" id="reset-modal">
-  <div class="modal">
+  <div class="modal danger">
     <h2>&#9888; Reset Day</h2>
     <p>This will permanently delete all badge-in records for <strong id="modal-date-label"></strong>.<br>Use this for testing only.</p>
     <div class="modal-actions">
@@ -177,32 +221,92 @@
   </div>
 </div>
 
+<!-- Controllers management modal -->
+<div class="modal-overlay" id="controllers-modal">
+  <div class="modal">
+    <h2>Controllers</h2>
+    <p>Each controller is a UniFi Access instance reachable from this server.
+       Adding one will register a webhook on that controller automatically.</p>
+
+    <div class="ctrl-list" id="ctrl-list">
+      <div class="empty-state">No controllers configured.</div>
+    </div>
+
+    <h2 style="margin-top: 8px;">Add Controller</h2>
+    <div class="form-grid">
+      <div class="full">
+        <label for="add-name">Name</label>
+        <input type="text" id="add-name" placeholder="e.g. Main Office">
+      </div>
+      <div>
+        <label for="add-host">Host / IP</label>
+        <input type="text" id="add-host" placeholder="10.0.0.1">
+      </div>
+      <div>
+        <label for="add-port">Port</label>
+        <input type="number" id="add-port" value="12445">
+      </div>
+      <div class="full">
+        <label for="add-token">Developer API Token</label>
+        <input type="password" id="add-token" placeholder="paste token from UniFi Access">
+      </div>
+    </div>
+    <div class="form-hint">
+      The dashboard registers its webhook URL with the controller using
+      <span id="base-url-hint" style="color: var(--gold-soft);"></span>.
+      Set the <code>DASHBOARD_BASE_URL</code> env var if the controller can't reach that address.
+    </div>
+    <div class="form-error" id="add-error"></div>
+
+    <div class="modal-actions">
+      <button class="modal-cancel" id="controllers-close">Close</button>
+      <button id="add-controller-btn">Add Controller</button>
+    </div>
+  </div>
+</div>
+
 <div class="toast" id="toast"></div>
 
 <script>
-  function isoToday() {
-    return new Date().toISOString().slice(0, 10);
-  }
+  function isoToday() { return new Date().toISOString().slice(0, 10); }
 
-  function showToast(msg, duration = 3000) {
+  function showToast(msg, isError = false, duration = 3500) {
     const t = document.getElementById('toast');
     t.textContent = msg;
+    t.classList.toggle('error', isError);
     t.classList.add('show');
     clearTimeout(t._timer);
     t._timer = setTimeout(() => t.classList.remove('show'), duration);
   }
 
+  async function loadControllerList() {
+    const sel = document.getElementById('controller-filter');
+    const prev = sel.value;
+    try {
+      const res = await fetch('/api/controllers');
+      const items = await res.json();
+      sel.innerHTML = '<option value="">All controllers</option>' +
+        items.map(c => `<option value="${c.id}">${escapeHtml(c.name)}${c.enabled ? '' : ' (disabled)'}</option>`).join('');
+      if (prev && items.some(c => c.id === prev)) sel.value = prev;
+      return items;
+    } catch {
+      return [];
+    }
+  }
+
   async function loadData() {
     const date   = document.getElementById('date').value   || isoToday();
     const cutoff = document.getElementById('cutoff').value || '09:00';
+    const controllerId = document.getElementById('controller-filter').value;
     const params = new URLSearchParams({ date, cutoff });
+    if (controllerId) params.set('controller_id', controllerId);
 
     let data;
     try {
       const res = await fetch('/api/first-badge-status?' + params.toString());
       data = await res.json();
     } catch {
-      showToast('Could not load data');
+      showToast('Could not load data', true);
       return;
     }
 
@@ -210,7 +314,7 @@
     tbody.innerHTML = '';
 
     if (!data.length) {
-      tbody.innerHTML = '<tr><td colspan="6" class="empty-state">No badge-in records for this day.</td></tr>';
+      tbody.innerHTML = '<tr><td colspan="7" class="empty-state">No badge-in records for this day.</td></tr>';
       ['on-time-count','late-count','total-count'].forEach(id => {
         document.getElementById(id).textContent = '0';
       });
@@ -222,25 +326,28 @@
     data.forEach((row, i) => {
       const tr = document.createElement('tr');
 
-      // # column
       const numTd = document.createElement('td');
       numTd.className = 'muted-cell';
       numTd.textContent = i + 1;
       tr.appendChild(numTd);
 
-      // Name — use row.name directly (server resolves Unknown fallback)
       const nameTd = document.createElement('td');
       nameTd.className = 'name-cell';
       nameTd.textContent = row.name;
       tr.appendChild(nameTd);
 
-      // First badge in
+      const sourceTd = document.createElement('td');
+      const chip = document.createElement('span');
+      chip.className = 'source-chip';
+      chip.textContent = row.source || '—';
+      sourceTd.appendChild(chip);
+      tr.appendChild(sourceTd);
+
       const firstTd = document.createElement('td');
       firstTd.className = 'time-first';
       firstTd.textContent = row.first_ts || '—';
       tr.appendChild(firstTd);
 
-      // Latest badge in
       const latestTd = document.createElement('td');
       if (!row.latest_ts) {
         latestTd.className = 'same-badge';
@@ -251,24 +358,21 @@
       }
       tr.appendChild(latestTd);
 
-      // Actor ID (truncated)
       const idTd = document.createElement('td');
       idTd.className = 'muted-cell';
       idTd.textContent = row.actor_id ? row.actor_id.slice(0, 8) + '...' : '—';
       tr.appendChild(idTd);
 
-      // Status chip
       const statusTd = document.createElement('td');
       statusTd.className = 'align-center';
-      const chip = document.createElement('div');
+      const statusChip = document.createElement('div');
       const isOnTime = row.status === 'ON TIME';
-      chip.className = 'status-chip ' + (isOnTime ? 'status-on' : 'status-off');
-      chip.innerHTML = '<span class="chip-dot"></span>' + (isOnTime ? 'ON TIME' : 'LATE');
-      statusTd.appendChild(chip);
+      statusChip.className = 'status-chip ' + (isOnTime ? 'status-on' : 'status-off');
+      statusChip.innerHTML = '<span class="chip-dot"></span>' + (isOnTime ? 'ON TIME' : 'LATE');
+      statusTd.appendChild(statusChip);
       tr.appendChild(statusTd);
 
       tbody.appendChild(tr);
-
       isOnTime ? onTime++ : late++;
     });
 
@@ -279,56 +383,224 @@
 
   async function syncUsers() {
     const btn = document.getElementById('sync-btn');
-    btn.textContent = 'Syncing…';
-    btn.disabled = true;
+    const orig = btn.innerHTML;
+    btn.textContent = 'Syncing…'; btn.disabled = true;
     try {
       await fetch('/api/sync-users');
-      showToast('User list synced from UniFi Access');
+      showToast('User list synced from all controllers');
       await loadData();
     } catch {
-      showToast('Sync failed — check server logs');
+      showToast('Sync failed — check server logs', true);
     } finally {
-      btn.textContent = '⟳ Sync Users';
-      btn.disabled = false;
+      btn.innerHTML = orig; btn.disabled = false;
     }
   }
 
-  // Reset day modal
+  // -------- Reset day modal --------
   document.getElementById('reset-btn').addEventListener('click', () => {
     const date = document.getElementById('date').value || isoToday();
     document.getElementById('modal-date-label').textContent = date;
     document.getElementById('reset-modal').classList.add('open');
   });
-
   document.getElementById('modal-cancel').addEventListener('click', () => {
     document.getElementById('reset-modal').classList.remove('open');
   });
-
   document.getElementById('modal-confirm').addEventListener('click', async () => {
     document.getElementById('reset-modal').classList.remove('open');
     const date = document.getElementById('date').value || isoToday();
+    const controllerId = document.getElementById('controller-filter').value;
+    const params = new URLSearchParams({ date });
+    if (controllerId) params.set('controller_id', controllerId);
     try {
-      const res  = await fetch('/api/reset-day?date=' + date, { method: 'DELETE' });
+      const res  = await fetch('/api/reset-day?' + params.toString(), { method: 'DELETE' });
       const json = await res.json();
       showToast(`Reset complete — ${json.deleted} record(s) deleted for ${date}`);
       await loadData();
     } catch {
-      showToast('Reset failed — check server logs');
+      showToast('Reset failed — check server logs', true);
     }
   });
-
   document.getElementById('reset-modal').addEventListener('click', e => {
     if (e.target === document.getElementById('reset-modal'))
       document.getElementById('reset-modal').classList.remove('open');
   });
 
+  // -------- Controllers modal --------
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({
+      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
+    }[c]));
+  }
+
+  function fmtDate(iso) {
+    if (!iso) return 'never';
+    const d = new Date(iso);
+    return isNaN(d) ? iso : d.toLocaleString();
+  }
+
+  async function renderControllers() {
+    const list = document.getElementById('ctrl-list');
+    list.innerHTML = '<div class="empty-state">Loading…</div>';
+
+    let items = [];
+    try {
+      const res = await fetch('/api/controllers');
+      items = await res.json();
+    } catch {
+      list.innerHTML = '<div class="empty-state">Failed to load controllers.</div>';
+      return;
+    }
+
+    if (!items.length) {
+      list.innerHTML = '<div class="empty-state">No controllers configured. Add one below to start receiving badge events.</div>';
+      return;
+    }
+
+    list.innerHTML = '';
+    items.forEach(c => {
+      const row = document.createElement('div');
+      row.className = 'ctrl-row';
+      row.innerHTML = `
+        <div class="ctrl-meta">
+          <div class="ctrl-name">
+            ${escapeHtml(c.name)}
+            ${c.enabled ? '' : '<span class="disabled-tag">(disabled)</span>'}
+          </div>
+          <div class="ctrl-sub">${escapeHtml(c.host)}:${c.port} &middot; last sync ${fmtDate(c.last_sync_at)}${c.has_webhook ? '' : ' &middot; <span style="color:var(--danger)">no webhook</span>'}</div>
+        </div>
+        <div class="ctrl-actions">
+          <button class="small-btn sync-btn"  data-act="test"   data-id="${c.id}">Test</button>
+          <button class="small-btn sync-btn"  data-act="sync"   data-id="${c.id}">Sync</button>
+          <button class="small-btn"           data-act="toggle" data-id="${c.id}">${c.enabled ? 'Disable' : 'Enable'}</button>
+          <button class="small-btn reset-btn" data-act="delete" data-id="${c.id}" data-name="${escapeHtml(c.name)}">Remove</button>
+        </div>
+      `;
+      list.appendChild(row);
+    });
+  }
+
+  document.getElementById('open-controllers-btn').addEventListener('click', async () => {
+    document.getElementById('base-url-hint').textContent = window.location.origin;
+    document.getElementById('add-error').textContent = '';
+    document.getElementById('controllers-modal').classList.add('open');
+    await renderControllers();
+  });
+
+  document.getElementById('controllers-close').addEventListener('click', () => {
+    document.getElementById('controllers-modal').classList.remove('open');
+  });
+
+  document.getElementById('controllers-modal').addEventListener('click', e => {
+    if (e.target === document.getElementById('controllers-modal'))
+      document.getElementById('controllers-modal').classList.remove('open');
+  });
+
+  document.getElementById('ctrl-list').addEventListener('click', async e => {
+    const btn = e.target.closest('button[data-act]');
+    if (!btn) return;
+    const id   = btn.dataset.id;
+    const act  = btn.dataset.act;
+    btn.disabled = true;
+    try {
+      if (act === 'test') {
+        const r = await fetch(`/api/controllers/${id}/test`, { method: 'POST' });
+        const j = await r.json();
+        showToast(j.ok
+          ? `Connected — ${j.user_count} users on controller`
+          : `Test failed: ${j.message}`,
+          !j.ok);
+      } else if (act === 'sync') {
+        const r = await fetch(`/api/controllers/${id}/sync`, { method: 'POST' });
+        const j = await r.json();
+        showToast(`Synced ${j.synced} users`);
+        await renderControllers();
+        await loadData();
+      } else if (act === 'toggle') {
+        const isEnabling = btn.textContent.trim().toLowerCase() === 'enable';
+        await fetch(`/api/controllers/${id}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ enabled: isEnabling }),
+        });
+        await renderControllers();
+        await loadControllerList();
+      } else if (act === 'delete') {
+        const name = btn.dataset.name;
+        if (!confirm(`Remove controller "${name}"?\n\nThis deletes its webhook from the controller and removes all its badge events from the dashboard. This cannot be undone.`))
+          return;
+        const r = await fetch(`/api/controllers/${id}`, { method: 'DELETE' });
+        if (!r.ok) {
+          const j = await r.json().catch(() => ({}));
+          showToast(`Remove failed: ${j.error || r.status}`, true);
+          return;
+        }
+        showToast(`Removed ${name}`);
+        await renderControllers();
+        await loadControllerList();
+        await loadData();
+      }
+    } catch (err) {
+      showToast(`Action failed: ${err.message || err}`, true);
+    } finally {
+      btn.disabled = false;
+    }
+  });
+
+  document.getElementById('add-controller-btn').addEventListener('click', async () => {
+    const btn = document.getElementById('add-controller-btn');
+    const err = document.getElementById('add-error');
+    err.textContent = '';
+
+    const body = {
+      name:      document.getElementById('add-name').value.trim(),
+      host:      document.getElementById('add-host').value.trim(),
+      port:      parseInt(document.getElementById('add-port').value, 10) || 12445,
+      api_token: document.getElementById('add-token').value.trim(),
+    };
+    if (!body.name || !body.host || !body.api_token) {
+      err.textContent = 'Name, host, and API token are required.';
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Adding…';
+    try {
+      const r = await fetch('/api/controllers', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const j = await r.json();
+      if (!r.ok) {
+        err.textContent = j.error || 'Failed to add controller.';
+        if (j.response) err.textContent += ` — ${String(j.response).slice(0, 200)}`;
+        return;
+      }
+      document.getElementById('add-name').value  = '';
+      document.getElementById('add-host').value  = '';
+      document.getElementById('add-token').value = '';
+      showToast(`Added ${j.name}`);
+      await renderControllers();
+      await loadControllerList();
+      await loadData();
+    } catch (e) {
+      err.textContent = `Network error: ${e.message || e}`;
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Add Controller';
+    }
+  });
+
+  // -------- Wire up --------
   document.getElementById('refresh-btn').addEventListener('click', loadData);
   document.getElementById('sync-btn').addEventListener('click', syncUsers);
+  document.getElementById('controller-filter').addEventListener('change', loadData);
 
-  window.addEventListener('load', () => {
+  window.addEventListener('load', async () => {
     const dateInput = document.getElementById('date');
     if (!dateInput.value) dateInput.value = isoToday();
-    loadData();
+    await loadControllerList();
+    await loadData();
   });
 </script>
 </body>