Remove ()

agent.md

@@ -0,0 +1,203 @@
+# Health Routine – Package Scanner
+
+> ALWAYS UPDATE THIS FILE AFTER MAKING CHANGES
+
+## What this is
+A single-page web app (`index.html`) used internally by Health Routine staff to scan **package** barcodes.
+A user selects their name, scans/types a code, and the result is looked up via a webhook and appended to a table.
+Runs in any browser — designed for phones, tablets, and desktop.
+
+## Files
+```
+index.html   — the entire app (HTML + CSS + JS, no build step)
+logo.png     — Health Routine brand logo (used in the header)
+agent.md     — this file
+start        — bash script that launches live-server on localhost:8080
+```
+
+## Design
+Colors are pulled directly from healthroutine.de's CSS variables:
+
+| Token            | Hex       | Usage                               |
+|------------------|-----------|-------------------------------------|
+| `--primary`      | `#005f5a` | Controls bar, table header, buttons |
+| `--primary-dark` | `#004845` | Hover states                        |
+| `--primary-light`| `#e0f0ef` | Row hover, badge backgrounds        |
+| `--bg`           | `#f7f7fa` | Page background                     |
+| `--card`         | `#eaeaf2` | Alternating table rows              |
+| `--sage`         | `#82917d` | (brand footer green, available)     |
+| `--error`        | `#c71b1b` | Error states                        |
+| `--success`      | `#15803d` | Success toasts                      |
+
+Font: system font stack (`-apple-system`, `Segoe UI`, etc.)
+
+## Webhook
+
+**Base URL (scan):** `https://brandize.app.n8n.cloud/webhook/transfer`
+**Base URL (batches):** `https://brandize.app.n8n.cloud/webhook/batch`
+
+### GET — load users
+Called once on page load to populate the user dropdown.
+
+```
+GET <base_url>
+Authorization: Basic <base64>
+```
+
+**Actual response shape** (confirmed via console):
+```json
+{ "Name": ["Oliver", "Luka", "Benni"] }
+```
+
+`buildDropdown()` handles all three shapes n8n may return:
+1. `{ Name: ["Oliver", "Luka", "Benni"] }` — single object, Name is an array (current)
+2. `[ { Name: "Oliver" }, ... ]` — array of objects
+3. `{ Name: "Oliver" }` — single object, Name is a string
+
+### POST — submit scan
+Called automatically when the user types/stops typing for 100ms (debounced).
+
+```
+POST <base_url>
+Authorization: Basic <base64>
+Content-Type: application/json
+
+{ "user": "Oliver", "code": "SCANNED_BARCODE_STRING" }
+```
+
+Success response:
+```json
+{
+  "name":       "Christa Gierdahl, Christa Gierdahl",
+  "producttag": "0-HR-Nail-Care-5",
+  "batch":      "BATCH/25-11-14/06173",
+  "country":    "DE"
+}
+```
+
+Error response (non-2xx **or** 200 with error field):
+```json
+{ "error": "Human-readable error description" }
+```
+
+Fields mapped to table columns:
+- `country`    → **Country** (teal pill badge)
+- `name`       → **Name**
+- `producttag` → **Tag** (monospace pill, truncated with tooltip on hover)
+- `batch`      → received but not displayed in the table
+
+### Authentication
+The webhook requires HTTP Basic Auth.
+
+- On `401` (GET or POST) a modal appears asking for username + password.
+- Credentials are saved to a **cookie** (`hr_auth`, 30-day expiry, `SameSite=Strict`) so the user is not prompted again.
+- On page load, the cookie is read and credentials restored before the first network call.
+- If the modal is triggered again (e.g. wrong password), the fields are **pre-filled** from the cookie and focus lands on the password field for quick confirmation.
+- `saveCreds(user, pass)` — JSON-stringifies, URI-encodes, base64-encodes, writes cookie.
+- `loadCredsFromCookie()` — reverses that; returns `{ user, pass }` or `null`.
+- `clearCredsCookie()` — available but not exposed in UI (call from browser console if needed).
+
+### Error handling (POST)
+Two cases:
+1. **Non-2xx response** — body is parsed; if `errData.error` exists it is shown verbatim; otherwise a generic `HTTP <status>` message is shown.
+2. **200 response with `error` field** — treated as failure: `item.error` is displayed, row is *not* added to the table.
+
+Errors appear in the **persistent status banner** (red, no auto-dismiss) and the scan input is selected so the user can re-scan or correct the code.
+
+### GET — load batches
+Called on page load and when the Batches tab becomes visible.
+
+```
+GET <batch_url>
+Authorization: Basic <base64>
+```
+
+**Response shape:**
+```json
+[
+  {
+    "data": [
+      { "id": 18599, "name": "BATCH/26-06-10/18599", "description": "mix dpd", "carrier": "DPD/AT", "state": "done" },
+      ...
+    ]
+  }
+]
+```
+
+The Batches tab shows a searchable, filterable table with German headers (Chargenname, Transport, Status). Default filter resets to `state != "done"` ("Active") each time the tab opens. Columns are sortable — click Chargenname or Status to toggle ascending/descending. Sorting resets to name-asc when switching tabs.
+
+### NDJSON / response format
+n8n sometimes returns multiple items as NDJSON (one JSON object per line) instead of a proper JSON array. `parseJson(res)` handles all three formats:
+1. Standard JSON array `[...]`
+2. Single JSON object `{...}` — passed through as-is
+3. NDJSON — split on `\n`, each line parsed individually, returned as an array
+
+## UI layout
+
+```
+┌─────────────────────────────────────────────────────┐
+│  [HR logo]  Health Routine  |  Package Scanner       │  ← white brand bar
+├─────────────────────────────────────────────────────┤
+│  [▥ SCAN HERE_____________]  [User ▾]  [✕ Clear]    │  ← teal controls bar
+├─────────────────────────────────────────────────────┤
+│  SCAN LOG                               3 scans ●   │
+│ ┌───────────────────────────────────────────────┐   │
+│ │ COUNTRY  │ NAME                  │ TAG         │   │  ← sticky header
+│ ├──────────┼───────────────────────┼─────────────┤   │
+│ │ DE       │ Christa Gierdahl      │ 0-HR-Nail…  │   │  ← newest row on top
+│ │ AT       │ ...                   │ ...         │   │
+│ │          scrollable area          │             │   │
+│ └───────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────┘
+```
+
+On mobile (< 620 px): scan input goes full-width on its own row; user dropdown and clear button share the row below.
+
+## Key behaviours
+- **On load**: cookie credentials restored → GET webhooks fire (users + batches) → dropdown populated → scan input auto-focused
+- **Scan auto-submit**: scanner input is debounced at 100ms — typing a barcode and pausing auto-submits without needing Enter
+- **Scan auto-switches tab**: submitting a scan automatically switches to the Scan Log tab if the Batches tab is active
+- **Clear button**: empties the table, clears the scan input, resets the scan counter
+- **No user selected**: red toast + highlighted dropdown; does not submit
+- **401 on any request**: modal prompts for credentials (pre-filled from cookie), saves to cookie, retries original call
+- **Webhook error**: `error` field shown verbatim in persistent red banner; input selected for re-scan
+- **Network error**: dismissing error banner; input selected so user can retry
+- **Dropdown error state**: tapping/focusing the dropdown while it shows an error re-triggers `loadUsers()`
+- **NDJSON/array/object**: `parseJson()` normalises all response formats from n8n
+- **Duplicate scan**: `isDuplicate(code)` queries `.col-code` cells (present on pending, resolved, and error rows) before enqueuing
+- **Scan queue**: `scanQueue[]` is a FIFO array of `{ code, user, rowEl }`. `drainQueue()` runs sequentially in the background — one `processItem()` at a time. Scans can be added faster than the webhook responds; each gets its own pending row immediately
+- **Pending row**: shows a spinner + `Processing… <code>` while the item is in-flight; replaced in-place by the resolved row or an error row
+- **Error row**: red background, shows the error message and the raw code; code is still in `.col-code` so it cannot be re-scanned
+- **Queue pill**: teal badge next to the scan counter showing `N pending`; hidden when queue is empty
+- **Auth mid-queue**: if `processItem` gets 401, it returns `"auth"` to `drainQueue`, which pauses (`queueBusy = false`), shows the auth modal with `drainQueue` as the retry callback — queue resumes from the same item after login
+- **Clear**: also drains `scanQueue` and resets `queueBusy`
+
+## Scan flow (sequence)
+```
+Enter key
+  └─ enqueue(code)
+       ├─ validation (user selected? duplicate?)
+       ├─ scanInput.value = ""  ← immediate clear
+       ├─ addPendingRow(code)  ← spinner row in table
+       └─ scanQueue.push(...)  ← add to FIFO
+            └─ drainQueue() if idle
+                 └─ processItem() loop
+                      ├─ fetch POST webhook
+                      ├─ resolveRow()  ← replace spinner with result
+                      └─ rowError()    ← replace spinner with error
+```
+
+## Table columns (DOM)
+| Visible | Header | CSS class | Content |
+|---------|--------|-----------|---------|
+| ✓ | Country | — | `item.country` wrapped in teal badge |
+| ✓ | Name | `name-cell` | `item.name` |
+| ✓ | Tag | — | `item.producttag` in monospace pill |
+| ✗ | Code | `col-code` | Raw scanned code (`display:none`), used for duplicate detection |
+
+## How to run
+Open `index.html` directly in a browser (`file://`) — no server needed for local use.
+Or run the `start` script for live-reload during development:
+```bash
+./start   # requires Node.js; installs live-server globally if missing
+```

app.js

@@ -0,0 +1,613 @@
+"use strict";
+
+// ── Config ──────────────────────────────────────────────────────────────
+const WEBHOOK = "https://brandize.app.n8n.cloud/webhook/transfer";
+const BATCH_WEBHOOK = "https://brandize.app.n8n.cloud/webhook/batch";
+
+// ── State ───────────────────────────────────────────────────────────────────
+let creds = null; // { user, pass }
+let pendingAuthCb = null; // function to retry after auth
+let scanCount = 0;
+const scanQueue = []; // { code, user, rowEl } — FIFO
+let queueBusy = false; // true while drainQueue is running
+
+// Batches
+let allBatches = [];
+let scanDebounceTimer = null;
+let sortField = "name";
+let sortAsc = true;
+
+// ── DOM refs ─────────────────────────────────────────────────────────────
+const scanInput = document.getElementById("scanInput");
+const userSelect = document.getElementById("userSelect");
+const tableBody = document.getElementById("tableBody");
+const emptyState = document.getElementById("emptyState");
+const countPill = document.getElementById("countPill");
+const queuePill = document.getElementById("queuePill");
+const queuePillText = document.getElementById("queuePillText");
+const banner = document.getElementById("statusBanner");
+const authModal = document.getElementById("authModal");
+const authUser = document.getElementById("authUser");
+const authPass = document.getElementById("authPass");
+const authBtn = document.getElementById("authBtn");
+const modalError = document.getElementById("modalError");
+const toast = document.getElementById("toast");
+const scanSearch = document.getElementById("scanSearch");
+const batchSearch = document.getElementById("batchSearch");
+const batchList = document.getElementById("batchList");
+const batchStateFilter = document.getElementById("batchStateFilter");
+const scanPanel = document.getElementById("scanPanel");
+const batchesPanel = document.getElementById("batchesPanel");
+
+// ── Cookie helpers ────────────────────────────────────────────────────────
+function saveCreds(user, pass) {
+  const val = btoa(encodeURIComponent(JSON.stringify({ user, pass })));
+  document.cookie = `hr_auth=${val}; max-age=${30 * 24 * 3600}; SameSite=Strict; path=/`;
+}
+
+function loadCredsFromCookie() {
+  const match = document.cookie.match(/(?:^|;\s*)hr_auth=([^;]+)/);
+  if (match) {
+    try {
+      return JSON.parse(decodeURIComponent(atob(match[1])));
+    } catch (_) {}
+  }
+  return null;
+}
+
+function clearCredsCookie() {
+  document.cookie = "hr_auth=; max-age=0; path=/";
+}
+
+// ── JSON parser (handles array, single object, and NDJSON) ───────────────
+async function parseJson(res) {
+  const text = await res.text();
+  // Standard JSON (array or object)
+  try {
+    const parsed = JSON.parse(text);
+    return parsed;
+  } catch (_) {}
+  // NDJSON — n8n sometimes returns one object per line
+  try {
+    const lines = text
+      .trim()
+      .split("\n")
+      .filter((l) => l.trim());
+    if (lines.length > 0) {
+      return lines.map((l) => JSON.parse(l));
+    }
+  } catch (_) {}
+  throw new Error("Could not parse server response");
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+function esc(str) {
+  return String(str ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function getHeaders(json = true) {
+  const h = {};
+  if (json) h["Content-Type"] = "application/json";
+  if (creds) {
+    h["Authorization"] = "Basic " + btoa(creds.user + ":" + creds.pass);
+  }
+  return h;
+}
+
+// ── Toast ────────────────────────────────────────────────────────────────
+let toastTimer = null;
+function showToast(msg, type = "", ms = 3200) {
+  clearTimeout(toastTimer);
+  toast.textContent = msg;
+  toast.className = "visible " + type;
+  toastTimer = setTimeout(() => {
+    toast.className = "";
+  }, ms);
+}
+
+// ── Status Banner ────────────────────────────────────────────────────────
+let bannerTimer = null;
+function showBanner(msg, type, autohide = 0) {
+  clearTimeout(bannerTimer);
+  banner.textContent = "";
+  if (type === "loading") {
+    const dots = document.createElement("div");
+    dots.className = "dot-spinner";
+    dots.innerHTML = "<span></span><span></span><span></span>";
+    banner.appendChild(dots);
+    const t = document.createTextNode(" " + msg);
+    banner.appendChild(t);
+  } else {
+    banner.textContent = msg;
+  }
+  banner.className = "active " + type;
+  if (autohide) bannerTimer = setTimeout(hideBanner, autohide);
+}
+
+function hideBanner() {
+  banner.className = "";
+  banner.textContent = "";
+}
+
+// ── Auth Modal ───────────────────────────────────────────────────────────
+function needAuth(retryCb) {
+  pendingAuthCb = retryCb;
+  modalError.style.display = "none";
+  // Pre-fill from saved cookie so user only needs to confirm
+  const saved = loadCredsFromCookie();
+  authUser.value = saved?.user || "";
+  authPass.value = saved?.pass || "";
+  authModal.classList.remove("hidden");
+  // Focus password if username already filled, otherwise username
+  setTimeout(() => (saved ? authPass.focus() : authUser.focus()), 50);
+}
+
+function cancelAuth() {
+  authModal.classList.add("hidden");
+  pendingAuthCb = null;
+  showBanner("Authentication cancelled.", "error", 4000);
+}
+
+async function submitAuth() {
+  const u = authUser.value.trim();
+  const p = authPass.value;
+  if (!u || !p) {
+    modalError.textContent = "Please enter both username and password.";
+    modalError.style.display = "block";
+    return;
+  }
+
+  creds = { user: u, pass: p };
+  saveCreds(u, p); // persist to cookie
+  authBtn.classList.add("loading");
+  authBtn.disabled = true;
+  modalError.style.display = "none";
+
+  // Close modal first, then retry
+  authModal.classList.add("hidden");
+  authBtn.classList.remove("loading");
+  authBtn.disabled = false;
+
+  if (pendingAuthCb) {
+    const cb = pendingAuthCb;
+    pendingAuthCb = null;
+    await cb();
+  }
+}
+
+authPass.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") submitAuth();
+});
+
+// ── Load Users ───────────────────────────────────────────────────────────
+async function loadUsers() {
+  showBanner("Loading users…", "loading");
+  try {
+    const res = await fetch(WEBHOOK, {
+      method: "GET",
+      headers: getHeaders(false),
+    });
+
+    if (res.status === 401) {
+      hideBanner();
+      needAuth(loadUsers);
+      return;
+    }
+
+    if (!res.ok) {
+      showBanner(`Could not load users (HTTP ${res.status}).`, "error");
+      userSelect.innerHTML = '<option value="">Error – tap to retry</option>';
+      return;
+    }
+
+    const data = await parseJson(res);
+    console.log("[HR] Users response:", data);
+    buildDropdown(data);
+    hideBanner();
+  } catch (err) {
+    console.error(err);
+    showBanner("Network error – could not reach the server.", "error");
+    userSelect.innerHTML =
+      '<option value="">Offline – check connection</option>';
+  }
+}
+
+function buildDropdown(users) {
+  userSelect.innerHTML = '<option value="">— Select User —</option>';
+
+  // Normalise all shapes n8n may return:
+  //   { Name: ["Oliver", "Luka", "Benni"] }  ← actual format
+  //   [ { Name: "Oliver" }, ... ]            ← standard array
+  //   { Name: "Oliver" }                     ← single object
+  let names = [];
+  if (Array.isArray(users)) {
+    // Array of objects: pull .Name from each
+    names = users.map((u) => u.Name).filter(Boolean);
+  } else if (users && Array.isArray(users.Name)) {
+    // Single object with a Name array
+    names = users.Name.filter(Boolean);
+  } else if (users && users.Name) {
+    // Single object with a single Name string
+    names = [users.Name];
+  }
+
+  names.forEach((name) => {
+    userSelect.appendChild(new Option(name, name));
+  });
+}
+
+// ── Duplicate check ──────────────────────────────────────────────────────
+// Checks both resolved rows and pending rows (all have .col-code)
+function isDuplicate(code) {
+  for (const cell of tableBody.querySelectorAll(".col-code")) {
+    if (cell.textContent === code) return true;
+  }
+  return false;
+}
+
+// ── Queue pill ──────────────────────────────────────────────────────────
+function updateQueuePill() {
+  const n = scanQueue.length;
+  if (n > 0) {
+    queuePillText.textContent = n + (n === 1 ? " pending" : " pending");
+    queuePill.classList.remove("hidden");
+  } else {
+    queuePill.classList.add("hidden");
+  }
+}
+
+// ── Barcode extraction ────────────────────────────────────────────────
+// Scanned codes have 8 space-separated blocks; the 3rd through 6th
+// (0-indexed 2..5) form the real scan code, concatenated without spaces.
+// E.g. "0003 580 0626 5027 3077 23 328 040" → "06265027307723"
+function extractCode(raw) {
+  // Strip parentheses first
+  const cleaned = raw.trim().replace(/[()]/g, "");
+  const parts = cleaned.split(/\s+/);
+  if (parts.length >= 6) {
+    return parts.slice(2, 6).join("");
+  }
+  return cleaned; // fallback: use cleaned input
+}
+
+// ── Enqueue (called immediately on Enter) ──────────────────────────────
+function enqueue(raw) {
+  const code = extractCode(raw);
+  if (!code) return;
+
+  const user = userSelect.value;
+  if (!user) {
+    showToast("Please select a user first!", "fail");
+    userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
+    setTimeout(() => {
+      userSelect.style.outline = "";
+    }, 1200);
+    return;
+  }
+
+  if (isDuplicate(code)) {
+    showToast("⚠️ Already scanned: " + code, "fail", 4000);
+    scanInput.select();
+    return;
+  }
+
+  // Auto-switch to scan log tab
+  switchToScanTab();
+
+  // Clear input immediately so the next scan can happen right away
+  scanInput.value = "";
+  scanInput.focus();
+  hideBanner();
+
+  // Add a pending row to the table (also registers code for dupe detection)
+  const rowEl = addPendingRow(code);
+
+  // Push onto queue
+  scanQueue.push({ code, user, rowEl });
+  updateQueuePill();
+
+  // Kick off the queue processor if it isn't running already
+  if (!queueBusy) drainQueue();
+}
+
+// ── Batch search/filter events ──────────────────────────────────────────
+batchSearch.addEventListener("input", renderBatches);
+batchStateFilter.addEventListener("change", renderBatches);
+
+// ── Queue drain (processes items sequentially in the background) ────────
+async function drainQueue() {
+  if (queueBusy) return;
+  queueBusy = true;
+  while (scanQueue.length > 0) {
+    const item = scanQueue[0]; // peek — only shift after handling
+    const result = await processItem(item);
+    if (result === "auth") {
+      // Credentials needed — pause queue, resume after login
+      queueBusy = false;
+      needAuth(drainQueue);
+      return;
+    }
+    scanQueue.shift();
+    updateQueuePill();
+  }
+  queueBusy = false;
+  updateQueuePill();
+}
+
+// ── Process one queued item ────────────────────────────────────────────
+async function processItem({ code, user, rowEl }) {
+  try {
+    const res = await fetch(WEBHOOK, {
+      method: "POST",
+      headers: getHeaders(true),
+      body: JSON.stringify({ user, code }),
+    });
+
+    if (res.status === 401) return "auth"; // signal caller to pause
+
+    if (!res.ok) {
+      let errMsg = `Scan failed (HTTP ${res.status})`;
+      try {
+        const errData = await parseJson(res);
+        if (errData?.error) errMsg = errData.error;
+      } catch (_) {}
+      rowError(rowEl, errMsg);
+      return "ok";
+    }
+
+    const item = await parseJson(res);
+    if (item?.error) {
+      rowError(rowEl, item.error);
+      return "ok";
+    }
+
+    resolveRow(rowEl, item);
+    return "ok";
+  } catch (err) {
+    console.error(err);
+    rowError(rowEl, "Network error – could not reach server");
+    return "ok";
+  }
+}
+
+// ── Table rows ────────────────────────────────────────────────────────────────
+function addPendingRow(code) {
+  emptyState.style.display = "none";
+  const tr = document.createElement("tr");
+  tr.className = "row-pending";
+  tr.innerHTML = `
+        <td colspan="3" class="pending-cell">
+            <span class="pending-spinner"></span>
+            <span class="pending-label">Processing…</span>
+            <span class="pending-code">${esc(code)}</span>
+        </td>
+        <td class="col-code">${esc(code)}</td>
+      `;
+  tableBody.insertBefore(tr, tableBody.firstChild);
+  return tr;
+}
+
+function resolveRow(rowEl, item) {
+  const code = rowEl.querySelector(".col-code").textContent;
+  rowEl.className = item.gepackt ? "row-already-packed" : "";
+  rowEl.innerHTML = `
+        <td><span class="country-badge">${esc(item.country || "—")}</span></td>
+        <td class="name-cell">${esc(item.name || "—")}</td>
+        <td><span class="tag-pill" title="${esc(item.producttag || "")}">${esc(item.producttag || "—")}</span></td>
+        <td class="col-code">${esc(code)}</td>
+      `;
+  scanCount++;
+  countPill.textContent = scanCount + (scanCount === 1 ? " scan" : " scans");
+  countPill.classList.remove("zero");
+}
+
+function rowError(rowEl, msg) {
+  const code = rowEl.querySelector(".col-code").textContent;
+  rowEl.className = "row-error";
+  rowEl.innerHTML = `
+        <td colspan="3" class="error-cell">
+            <span class="error-icon">✕</span>
+            <span class="error-msg">${esc(msg)}</span>
+            <span class="error-code">${esc(code)}</span>
+        </td>
+        <td class="col-code">${esc(code)}</td>
+      `;
+}
+
+// ── Clear ──────────────────────────────────────────────────────────────────────
+// ── Scan search/filter ──────────────────────────────────────────────────
+scanSearch.addEventListener("input", () => {
+  const q = scanSearch.value.toLowerCase().trim();
+  let visible = 0;
+  for (const row of tableBody.querySelectorAll("tr")) {
+    const txt = row.textContent.toLowerCase();
+    if (!q || txt.includes(q)) {
+      row.style.display = "";
+      visible++;
+    } else {
+      row.style.display = "none";
+    }
+  }
+  // Update the count pill with filtered count
+  countPill.textContent = visible + (visible === 1 ? " scan" : " scans");
+  countPill.classList.toggle("zero", visible === 0);
+});
+
+function clearTable() {
+  const hasContent = scanCount > 0 || scanQueue.length > 0 || scanInput.value;
+  if (!hasContent) return;
+  // Cancel any pending queue items
+  scanQueue.length = 0;
+  queueBusy = false;
+  updateQueuePill();
+  tableBody.innerHTML = "";
+  scanInput.value = "";
+  scanSearch.value = "";
+  scanCount = 0;
+  countPill.textContent = "0 scans";
+  countPill.classList.add("zero");
+  emptyState.style.display = "";
+  scanInput.focus();
+  showToast("Table cleared", "", 2000);
+}
+
+// ── Scan Input (debounced auto-submit) ──────────────────────────────────
+scanInput.addEventListener("input", () => {
+  clearTimeout(scanDebounceTimer);
+  scanDebounceTimer = setTimeout(() => {
+    const v = scanInput.value.trim();
+    if (v) enqueue(v);
+  }, 100);
+});
+
+// ── Tab switching ────────────────────────────────────────────────────────
+function switchTab(tab) {
+  document.body.className = "tab-" + tab;
+  document.querySelectorAll(".tab-btn").forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.tab === tab);
+  });
+  if (tab === "batches") {
+    batchStateFilter.value = "!done";
+    sortField = "name";
+    sortAsc = true;
+    loadBatches();
+  }
+}
+
+// Autoswitch to scan tab when a scan is enqueued
+function switchToScanTab() {
+  if (document.body.classList.contains("tab-batches")) {
+    switchTab("scan");
+  }
+}
+
+// ── Batch webhook ────────────────────────────────────────────────────────
+async function loadBatches() {
+  try {
+    const res = await fetch(BATCH_WEBHOOK, {
+      method: "GET",
+      headers: getHeaders(false),
+    });
+
+    if (res.status === 401) {
+      needAuth(loadBatches);
+      return;
+    }
+
+    if (!res.ok) {
+      batchList.innerHTML =
+        '<div class="empty-state" style="margin:40px 0"><div class="empty-title">Could not load batches</div></div>';
+      return;
+    }
+
+    const data = await parseJson(res);
+    console.log("[HR] Batches response:", data);
+
+    // Response can be { data: [...] } or an array wrapping it
+    if (data && Array.isArray(data.data)) {
+      allBatches = data.data;
+    } else if (
+      Array.isArray(data) &&
+      data.length > 0 &&
+      Array.isArray(data[0].data)
+    ) {
+      allBatches = data[0].data;
+    } else {
+      allBatches = [];
+    }
+
+    renderBatches();
+  } catch (err) {
+    console.error(err);
+    batchList.innerHTML =
+      '<div class="empty-state" style="margin:40px 0"><div class="empty-title">Network error</div></div>';
+  }
+}
+
+function sortBatches(field) {
+  if (sortField === field) {
+    sortAsc = !sortAsc;
+  } else {
+    sortField = field;
+    sortAsc = true;
+  }
+  renderBatches();
+}
+
+function renderBatches() {
+  const query = batchSearch.value.toLowerCase().trim();
+  const stateFilter = batchStateFilter.value;
+
+  let filtered = allBatches.filter((b) => {
+    // State filter
+    if (stateFilter === "!done") {
+      if (b.state === "done") return false;
+    } else if (stateFilter && b.state !== stateFilter) {
+      return false;
+    }
+
+    // Text search
+    if (!query) return true;
+    return (
+      (b.name && b.name.toLowerCase().includes(query)) ||
+      (b.description && b.description.toLowerCase().includes(query)) ||
+      (b.carrier && b.carrier.toLowerCase().includes(query))
+    );
+  });
+
+  // Sort
+  filtered.sort((a, b) => {
+    const aVal = (a[sortField] || "").toLowerCase();
+    const bVal = (b[sortField] || "").toLowerCase();
+    return sortAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+  });
+
+  // Update sort arrows
+  document.getElementById("sortArrowName").textContent =
+    sortField === "name" ? (sortAsc ? "▲" : "▼") : "";
+  document.getElementById("sortArrowState").textContent =
+    sortField === "state" ? (sortAsc ? "▲" : "▼") : "";
+
+  if (filtered.length === 0) {
+    batchList.innerHTML =
+      '<tr><td colspan="4" class="batch-empty">No batches match</td></tr>';
+    return;
+  }
+
+  batchList.innerHTML = filtered
+    .map(
+      (b) => `
+        <tr class="${b.state === "done" ? "batch-row-done" : ""}">
+          <td><span class="batch-charge-cell">${esc(b.name)}</span></td>
+          <td><span class="batch-name-cell">${esc(b.description || "")}</span></td>
+          <td><span class="batch-carrier-cell">${esc(b.carrier || "")}</span></td>
+          <td><span class="batch-state-cell batch-state-${esc(b.state || "open")}">${esc(b.state || "open")}</span></td>
+        </tr>`,
+    )
+    .join("");
+}
+
+// ── Retry on clicking offline dropdown ──────────────────────────────────
+userSelect.addEventListener("focus", () => {
+  if (
+    userSelect.options.length <= 1 &&
+    userSelect.options[0]?.value === "" &&
+    /error|offline/i.test(userSelect.options[0]?.text)
+  ) {
+    loadUsers();
+  }
+});
+
+// ── Init ─────────────────────────────────────────────────────────────────
+window.addEventListener("DOMContentLoaded", () => {
+  // Restore saved credentials before the first network call
+  const saved = loadCredsFromCookie();
+  if (saved) creds = saved;
+  loadUsers();
+  loadBatches();
+  scanInput.focus();
+});