Batches

agent.md

@@ -33,7 +33,8 @@ Font: system font stack (`-apple-system`, `Segoe UI`, etc.)
 
 ## Webhook
 
-**Base URL:** `https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d`
+**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.
@@ -54,7 +55,7 @@ Authorization: Basic <base64>
 3. `{ Name: "Oliver" }` — single object, Name is a string
 
 ### POST — submit scan
-Called when the user presses Enter in the scan input.
+Called automatically when the user types/stops typing for 100ms (debounced).
 
 ```
 POST <base_url>
@@ -103,6 +104,28 @@ Two cases:
 
 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 `[...]`
@@ -131,8 +154,9 @@ n8n sometimes returns multiple items as NDJSON (one JSON object per line) instea
 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 webhook fires → dropdown populated → scan input auto-focused
+- **On load**: cookie credentials restored → GET webhooks fire (users + batches) → dropdown populated → scan input auto-focused
-- **Enter key**: trims input → duplicate check → clears input **immediately** → adds pending row → pushed onto FIFO queue → `drainQueue()` starts if idle
+- **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

app.js

@@ -1,8 +1,8 @@
 "use strict";
 
 // ── Config ──────────────────────────────────────────────────────────────
-const WEBHOOK =
+const WEBHOOK = "https://brandize.app.n8n.cloud/webhook/transfer";
-    "https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d";
+const BATCH_WEBHOOK = "https://brandize.app.n8n.cloud/webhook/batch";
 
 // ── State ───────────────────────────────────────────────────────────────────
 let creds = null; // { user, pass }
@@ -11,6 +11,12 @@ 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");
@@ -26,328 +32,340 @@ 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 })));
+  const val = btoa(encodeURIComponent(JSON.stringify({ user, pass })));
-    document.cookie = `hr_auth=${val}; max-age=${30 * 24 * 3600}; SameSite=Strict; path=/`;
+  document.cookie = `hr_auth=${val}; max-age=${30 * 24 * 3600}; SameSite=Strict; path=/`;
 }
 
 function loadCredsFromCookie() {
-    const match = document.cookie.match(/(?:^|;\s*)hr_auth=([^;]+)/);
+  const match = document.cookie.match(/(?:^|;\s*)hr_auth=([^;]+)/);
-    if (match) {
+  if (match) {
-        try {
+    try {
-            return JSON.parse(decodeURIComponent(atob(match[1])));
+      return JSON.parse(decodeURIComponent(atob(match[1])));
-        } catch (_) {}
+    } catch (_) {}
-    }
+  }
-    return null;
+  return null;
 }
 
 function clearCredsCookie() {
-    document.cookie = "hr_auth=; max-age=0; path=/";
+  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();
+  const text = await res.text();
-    // Standard JSON (array or object)
+  // Standard JSON (array or object)
-    try {
+  try {
-        const parsed = JSON.parse(text);
+    const parsed = JSON.parse(text);
-        return parsed;
+    return parsed;
-    } catch (_) {}
+  } catch (_) {}
-    // NDJSON — n8n sometimes returns one object per line
+  // NDJSON — n8n sometimes returns one object per line
-    try {
+  try {
-        const lines = text
+    const lines = text
-            .trim()
+      .trim()
-            .split("\n")
+      .split("\n")
-            .filter((l) => l.trim());
+      .filter((l) => l.trim());
-        if (lines.length > 0) {
+    if (lines.length > 0) {
-            return lines.map((l) => JSON.parse(l));
+      return lines.map((l) => JSON.parse(l));
-        }
+    }
-    } catch (_) {}
+  } catch (_) {}
-    throw new Error("Could not parse server response");
+  throw new Error("Could not parse server response");
 }
 
 // ── Helpers ──────────────────────────────────────────────────────────────
 function esc(str) {
-    return String(str ?? "")
+  return String(str ?? "")
-        .replace(/&/g, "&")
+    .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
+    .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
+    .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
+    .replace(/"/g, "&quot;");
 }
 
 function getHeaders(json = true) {
-    const h = {};
+  const h = {};
-    if (json) h["Content-Type"] = "application/json";
+  if (json) h["Content-Type"] = "application/json";
-    if (creds) {
+  if (creds) {
-        h["Authorization"] = "Basic " + btoa(creds.user + ":" + creds.pass);
+    h["Authorization"] = "Basic " + btoa(creds.user + ":" + creds.pass);
-    }
+  }
-    return h;
+  return h;
 }
 
 // ── Toast ────────────────────────────────────────────────────────────────
 let toastTimer = null;
 function showToast(msg, type = "", ms = 3200) {
-    clearTimeout(toastTimer);
+  clearTimeout(toastTimer);
-    toast.textContent = msg;
+  toast.textContent = msg;
-    toast.className = "visible " + type;
+  toast.className = "visible " + type;
-    toastTimer = setTimeout(() => {
+  toastTimer = setTimeout(() => {
-        toast.className = "";
+    toast.className = "";
-    }, ms);
+  }, ms);
 }
 
 // ── Status Banner ────────────────────────────────────────────────────────
 let bannerTimer = null;
 function showBanner(msg, type, autohide = 0) {
-    clearTimeout(bannerTimer);
+  clearTimeout(bannerTimer);
-    banner.textContent = "";
+  banner.textContent = "";
-    if (type === "loading") {
+  if (type === "loading") {
-        const dots = document.createElement("div");
+    const dots = document.createElement("div");
-        dots.className = "dot-spinner";
+    dots.className = "dot-spinner";
-        dots.innerHTML = "<span></span><span></span><span></span>";
+    dots.innerHTML = "<span></span><span></span><span></span>";
-        banner.appendChild(dots);
+    banner.appendChild(dots);
-        const t = document.createTextNode(" " + msg);
+    const t = document.createTextNode(" " + msg);
-        banner.appendChild(t);
+    banner.appendChild(t);
-    } else {
+  } else {
-        banner.textContent = msg;
+    banner.textContent = msg;
-    }
+  }
-    banner.className = "active " + type;
+  banner.className = "active " + type;
-    if (autohide) bannerTimer = setTimeout(hideBanner, autohide);
+  if (autohide) bannerTimer = setTimeout(hideBanner, autohide);
 }
 
 function hideBanner() {
-    banner.className = "";
+  banner.className = "";
-    banner.textContent = "";
+  banner.textContent = "";
 }
 
 // ── Auth Modal ───────────────────────────────────────────────────────────
 function needAuth(retryCb) {
-    pendingAuthCb = retryCb;
+  pendingAuthCb = retryCb;
-    modalError.style.display = "none";
+  modalError.style.display = "none";
-    // Pre-fill from saved cookie so user only needs to confirm
+  // Pre-fill from saved cookie so user only needs to confirm
-    const saved = loadCredsFromCookie();
+  const saved = loadCredsFromCookie();
-    authUser.value = saved?.user || "";
+  authUser.value = saved?.user || "";
-    authPass.value = saved?.pass || "";
+  authPass.value = saved?.pass || "";
-    authModal.classList.remove("hidden");
+  authModal.classList.remove("hidden");
-    // Focus password if username already filled, otherwise username
+  // Focus password if username already filled, otherwise username
-    setTimeout(() => (saved ? authPass.focus() : authUser.focus()), 50);
+  setTimeout(() => (saved ? authPass.focus() : authUser.focus()), 50);
 }
 
 function cancelAuth() {
-    authModal.classList.add("hidden");
+  authModal.classList.add("hidden");
-    pendingAuthCb = null;
+  pendingAuthCb = null;
-    showBanner("Authentication cancelled.", "error", 4000);
+  showBanner("Authentication cancelled.", "error", 4000);
 }
 
 async function submitAuth() {
-    const u = authUser.value.trim();
+  const u = authUser.value.trim();
-    const p = authPass.value;
+  const p = authPass.value;
-    if (!u || !p) {
+  if (!u || !p) {
-        modalError.textContent = "Please enter both username and password.";
+    modalError.textContent = "Please enter both username and password.";
-        modalError.style.display = "block";
+    modalError.style.display = "block";
-        return;
+    return;
-    }
+  }
 
-    creds = { user: u, pass: p };
+  creds = { user: u, pass: p };
-    saveCreds(u, p); // persist to cookie
+  saveCreds(u, p); // persist to cookie
-    authBtn.classList.add("loading");
+  authBtn.classList.add("loading");
-    authBtn.disabled = true;
+  authBtn.disabled = true;
-    modalError.style.display = "none";
+  modalError.style.display = "none";
 
-    // Close modal first, then retry
+  // Close modal first, then retry
-    authModal.classList.add("hidden");
+  authModal.classList.add("hidden");
-    authBtn.classList.remove("loading");
+  authBtn.classList.remove("loading");
-    authBtn.disabled = false;
+  authBtn.disabled = false;
 
-    if (pendingAuthCb) {
+  if (pendingAuthCb) {
-        const cb = pendingAuthCb;
+    const cb = pendingAuthCb;
-        pendingAuthCb = null;
+    pendingAuthCb = null;
-        await cb();
+    await cb();
-    }
+  }
 }
 
 authPass.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") submitAuth();
+  if (e.key === "Enter") submitAuth();
 });
 
 // ── Load Users ───────────────────────────────────────────────────────────
 async function loadUsers() {
-    showBanner("Loading users…", "loading");
+  showBanner("Loading users…", "loading");
-    try {
+  try {
-        const res = await fetch(WEBHOOK, {
+    const res = await fetch(WEBHOOK, {
-            method: "GET",
+      method: "GET",
-            headers: getHeaders(false),
+      headers: getHeaders(false),
-        });
+    });
 
-        if (res.status === 401) {
+    if (res.status === 401) {
-            hideBanner();
+      hideBanner();
-            needAuth(loadUsers);
+      needAuth(loadUsers);
-            return;
+      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>';
     }
+
+    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>';
+  userSelect.innerHTML = '<option value="">— Select User —</option>';
 
-    // Normalise all shapes n8n may return:
+  // Normalise all shapes n8n may return:
-    //   { Name: ["Oliver", "Luka", "Benni"] }  ← actual format
+  //   { Name: ["Oliver", "Luka", "Benni"] }  ← actual format
-    //   [ { Name: "Oliver" }, ... ]            ← standard array
+  //   [ { Name: "Oliver" }, ... ]            ← standard array
-    //   { Name: "Oliver" }                     ← single object
+  //   { Name: "Oliver" }                     ← single object
-    let names = [];
+  let names = [];
-    if (Array.isArray(users)) {
+  if (Array.isArray(users)) {
-        // Array of objects: pull .Name from each
+    // Array of objects: pull .Name from each
-        names = users.map((u) => u.Name).filter(Boolean);
+    names = users.map((u) => u.Name).filter(Boolean);
-    } else if (users && Array.isArray(users.Name)) {
+  } else if (users && Array.isArray(users.Name)) {
-        // Single object with a Name array
+    // Single object with a Name array
-        names = users.Name.filter(Boolean);
+    names = users.Name.filter(Boolean);
-    } else if (users && users.Name) {
+  } else if (users && users.Name) {
-        // Single object with a single Name string
+    // Single object with a single Name string
-        names = [users.Name];
+    names = [users.Name];
-    }
+  }
 
-    names.forEach((name) => {
+  names.forEach((name) => {
-        userSelect.appendChild(new Option(name, 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")) {
+  for (const cell of tableBody.querySelectorAll(".col-code")) {
-        if (cell.textContent === code) return true;
+    if (cell.textContent === code) return true;
-    }
+  }
-    return false;
+  return false;
 }
 
 // ── Queue pill ──────────────────────────────────────────────────────────
 function updateQueuePill() {
-    const n = scanQueue.length;
+  const n = scanQueue.length;
-    if (n > 0) {
+  if (n > 0) {
-        queuePillText.textContent = n + (n === 1 ? " pending" : " pending");
+    queuePillText.textContent = n + (n === 1 ? " pending" : " pending");
-        queuePill.classList.remove("hidden");
+    queuePill.classList.remove("hidden");
-    } else {
+  } else {
-        queuePill.classList.add("hidden");
+    queuePill.classList.add("hidden");
-    }
+  }
 }
 
 // ── Enqueue (called immediately on Enter) ──────────────────────────────
 function enqueue(raw) {
-    const code = raw.trim();
+  const code = raw.trim();
-    if (!code) return;
+  if (!code) return;
 
-    const user = userSelect.value;
+  const user = userSelect.value;
-    if (!user) {
+  if (!user) {
-        showToast("Please select a user first!", "fail");
+    showToast("Please select a user first!", "fail");
-        userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
+    userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
-        setTimeout(() => {
+    setTimeout(() => {
-            userSelect.style.outline = "";
+      userSelect.style.outline = "";
-        }, 1200);
+    }, 1200);
-        return;
+    return;
-    }
+  }
 
-    if (isDuplicate(code)) {
+  if (isDuplicate(code)) {
-        showToast("⚠️ Already scanned: " + code, "fail", 4000);
+    showToast("⚠️ Already scanned: " + code, "fail", 4000);
-        scanInput.select();
+    scanInput.select();
-        return;
+    return;
-    }
+  }
 
-    // Clear input immediately so the next scan can happen right away
+  // Auto-switch to scan log tab
-    scanInput.value = "";
+  switchToScanTab();
-    scanInput.focus();
-    hideBanner();
 
-    // Add a pending row to the table (also registers code for dupe detection)
+  // Clear input immediately so the next scan can happen right away
-    const rowEl = addPendingRow(code);
+  scanInput.value = "";
+  scanInput.focus();
+  hideBanner();
 
-    // Push onto queue
+  // Add a pending row to the table (also registers code for dupe detection)
-    scanQueue.push({ code, user, rowEl });
+  const rowEl = addPendingRow(code);
-    updateQueuePill();
 
-    // Kick off the queue processor if it isn't running already
+  // Push onto queue
-    if (!queueBusy) drainQueue();
+  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;
+  if (queueBusy) return;
-    queueBusy = true;
+  queueBusy = true;
-    while (scanQueue.length > 0) {
+  while (scanQueue.length > 0) {
-        const item = scanQueue[0]; // peek — only shift after handling
+    const item = scanQueue[0]; // peek — only shift after handling
-        const result = await processItem(item);
+    const result = await processItem(item);
-        if (result === "auth") {
+    if (result === "auth") {
-            // Credentials needed — pause queue, resume after login
+      // Credentials needed — pause queue, resume after login
-            queueBusy = false;
+      queueBusy = false;
-            needAuth(drainQueue);
+      needAuth(drainQueue);
-            return;
+      return;
-        }
-        scanQueue.shift();
-        updateQueuePill();
     }
-    queueBusy = false;
+    scanQueue.shift();
     updateQueuePill();
+  }
+  queueBusy = false;
+  updateQueuePill();
 }
 
 // ── Process one queued item ────────────────────────────────────────────
 async function processItem({ code, user, rowEl }) {
-    try {
+  try {
-        const res = await fetch(WEBHOOK, {
+    const res = await fetch(WEBHOOK, {
-            method: "POST",
+      method: "POST",
-            headers: getHeaders(true),
+      headers: getHeaders(true),
-            body: JSON.stringify({ user, code }),
+      body: JSON.stringify({ user, code }),
-        });
+    });
 
-        if (res.status === 401) return "auth"; // signal caller to pause
+    if (res.status === 401) return "auth"; // signal caller to pause
 
-        if (!res.ok) {
+    if (!res.ok) {
-            let errMsg = `Scan failed (HTTP ${res.status})`;
+      let errMsg = `Scan failed (HTTP ${res.status})`;
-            try {
+      try {
-                const errData = await parseJson(res);
+        const errData = await parseJson(res);
-                if (errData?.error) errMsg = errData.error;
+        if (errData?.error) errMsg = errData.error;
-            } catch (_) {}
+      } catch (_) {}
-            rowError(rowEl, errMsg);
+      rowError(rowEl, errMsg);
-            return "ok";
+      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";
     }
+
+    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";
+  emptyState.style.display = "none";
-    const tr = document.createElement("tr");
+  const tr = document.createElement("tr");
-    tr.className = "row-pending";
+  tr.className = "row-pending";
-    tr.innerHTML = `
+  tr.innerHTML = `
         <td colspan="3" class="pending-cell">
             <span class="pending-spinner"></span>
             <span class="pending-label">Processing…</span>
@@ -355,28 +373,28 @@ function addPendingRow(code) {
         </td>
         <td class="col-code">${esc(code)}</td>
       `;
-    tableBody.insertBefore(tr, tableBody.firstChild);
+  tableBody.insertBefore(tr, tableBody.firstChild);
-    return tr;
+  return tr;
 }
 
 function resolveRow(rowEl, item) {
-    const code = rowEl.querySelector(".col-code").textContent;
+  const code = rowEl.querySelector(".col-code").textContent;
-    rowEl.className = item.gepackt ? "row-already-packed" : "";
+  rowEl.className = item.gepackt ? "row-already-packed" : "";
-    rowEl.innerHTML = `
+  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++;
+  scanCount++;
-    countPill.textContent = scanCount + (scanCount === 1 ? " scan" : " scans");
+  countPill.textContent = scanCount + (scanCount === 1 ? " scan" : " scans");
-    countPill.classList.remove("zero");
+  countPill.classList.remove("zero");
 }
 
 function rowError(rowEl, msg) {
-    const code = rowEl.querySelector(".col-code").textContent;
+  const code = rowEl.querySelector(".col-code").textContent;
-    rowEl.className = "row-error";
+  rowEl.className = "row-error";
-    rowEl.innerHTML = `
+  rowEl.innerHTML = `
         <td colspan="3" class="error-cell">
             <span class="error-icon">✕</span>
             <span class="error-msg">${esc(msg)}</span>
@@ -387,47 +405,195 @@ function rowError(rowEl, msg) {
 }
 
 // ── Clear ──────────────────────────────────────────────────────────────────────
-function clearTable() {
+// ── Scan search/filter ──────────────────────────────────────────────────
-    const hasContent = scanCount > 0 || scanQueue.length > 0 || scanInput.value;
+scanSearch.addEventListener("input", () => {
-    if (!hasContent) return;
+  const q = scanSearch.value.toLowerCase().trim();
-    // Cancel any pending queue items
+  let visible = 0;
-    scanQueue.length = 0;
+  for (const row of tableBody.querySelectorAll("tr")) {
-    queueBusy = false;
+    const txt = row.textContent.toLowerCase();
-    updateQueuePill();
+    if (!q || txt.includes(q)) {
-    tableBody.innerHTML = "";
+      row.style.display = "";
-    scanInput.value = "";
+      visible++;
-    scanCount = 0;
+    } else {
-    countPill.textContent = "0 scans";
+      row.style.display = "none";
-    countPill.classList.add("zero");
-    emptyState.style.display = "";
-    scanInput.focus();
-    showToast("Table cleared", "", 2000);
-}
-
-// ── Scan Input Enter ──────────────────────────────────────────────────────────
-scanInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") {
-        const v = scanInput.value.trim();
-        if (v) enqueue(v);
     }
+  }
+  // Update the count pill with filtered count
+  countPill.textContent = visible + (visible === 1 ? " scan" : " scans");
+  countPill.classList.toggle("zero", visible === 0);
 });
 
-// Retry on clicking offline dropdown
+function clearTable() {
-userSelect.addEventListener("focus", () => {
+  const hasContent = scanCount > 0 || scanQueue.length > 0 || scanInput.value;
-    if (
+  if (!hasContent) return;
-        userSelect.options.length <= 1 &&
+  // Cancel any pending queue items
-        userSelect.options[0]?.value === "" &&
+  scanQueue.length = 0;
-        /error|offline/i.test(userSelect.options[0]?.text)
+  queueBusy = false;
-    ) {
+  updateQueuePill();
-        loadUsers();
+  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
+  // Restore saved credentials before the first network call
-    const saved = loadCredsFromCookie();
+  const saved = loadCredsFromCookie();
-    if (saved) creds = saved;
+  if (saved) creds = saved;
-    loadUsers();
+  loadUsers();
-    scanInput.focus();
+  loadBatches();
+  scanInput.focus();
 });

index.html

@@ -9,7 +9,7 @@
         <title>Health Routine – Package Scanner</title>
         <link rel="stylesheet" href="styles.css" />
     </head>
-    <body>
+    <body class="tab-scan">
         <!-- Brand bar -->
         <div class="brand-bar">
             <div class="brand-logo-wrap">
@@ -73,34 +73,63 @@
             </div>
         </div>
 
+        <!-- Tab bar -->
+        <div class="tab-bar">
+            <button
+                class="tab-btn active"
+                data-tab="scan"
+                onclick="switchTab('scan')"
+            >
+                Scan Log
+            </button>
+            <button
+                class="tab-btn"
+                data-tab="batches"
+                onclick="switchTab('batches')"
+            >
+                Batches
+            </button>
+        </div>
+
         <!-- Status banner -->
         <div id="statusBanner"></div>
 
-        <!-- Main content -->
+        <!-- Scan Log panel -->
-        <main>
+        <main id="scanPanel">
-            <div class="table-meta">
+            <div class="scan-search-wrap">
-                <span class="table-label">Scan Log</span>
+                <svg
-                <div style="display: flex; align-items: center; gap: 8px">
+                    class="scan-search-icon"
-                    <span class="queue-pill hidden" id="queuePill">
+                    viewBox="0 0 24 24"
-                        <span
+                    width="16"
-                            class="pending-spinner"
+                    height="16"
-                            style="
+                    fill="none"
-                                width: 10px;
+                    stroke="currentColor"
-                                height: 10px;
+                    stroke-width="2"
-                                border-width: 1.5px;
+                    stroke-linecap="round"
-                            "
+                >
-                        ></span>
+                    <circle cx="11" cy="11" r="8" />
-                        <span id="queuePillText">0 pending</span>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-                    </span>
+                </svg>
-                    <span class="count-pill zero" id="countPill">0 scans</span>
+                <input
-                </div>
+                    type="text"
+                    id="scanSearch"
+                    placeholder="Filter scans…"
+                    autocomplete="off"
+                />
+                <span class="count-pill zero" id="countPill">0 scans</span>
+                <span class="queue-pill hidden" id="queuePill">
+                    <span
+                        class="pending-spinner"
+                        style="width: 10px; height: 10px; border-width: 1.5px"
+                    ></span>
+                    <span id="queuePillText">0 pending</span>
+                </span>
             </div>
-
             <div class="table-wrapper" id="tableWrapper">
                 <table id="scanTable">
                     <thead>
                         <tr>
-                            <th>Country</th>
+                            <th>Land</th>
                             <th>Name</th>
                             <th>Tag</th>
                             <th class="col-code">Code</th>
@@ -188,6 +217,73 @@
             </div>
         </div>
 
+        <!-- Batches panel -->
+        <div class="tab-panel" id="batchesPanel" style="display: none">
+            <div class="batch-search-wrap">
+                <svg
+                    class="batch-search-icon"
+                    viewBox="0 0 24 24"
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                >
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input
+                    type="text"
+                    id="batchSearch"
+                    placeholder="Search batches…"
+                    autocomplete="off"
+                />
+                <select id="batchStateFilter">
+                    <option value="!done">Active</option>
+                    <option value="">All</option>
+                    <option value="done">Done</option>
+                    <option value="open">Open</option>
+                </select>
+            </div>
+            <div class="batch-table-wrap">
+                <table class="batch-table">
+                    <thead>
+                        <tr>
+                            <th>Charge</th>
+                            <th
+                                class="batch-th-sort"
+                                onclick="sortBatches('name')"
+                            >
+                                Name
+                                <span class="sort-arrow" id="sortArrowName"
+                                    >▲</span
+                                >
+                            </th>
+                            <th>Transport</th>
+                            <th
+                                class="batch-th-sort"
+                                onclick="sortBatches('state')"
+                            >
+                                Status
+                                <span
+                                    class="sort-arrow"
+                                    id="sortArrowState"
+                                ></span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody id="batchList">
+                        <tr>
+                            <td colspan="4" class="batch-empty">
+                                Loading batches…
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
         <!-- Toast notification -->
         <div id="toast"></div>
 

styles.css

@@ -97,6 +97,65 @@ body {
     font-weight: 400;
 }
 
+/* ── Tab Bar ─────────────────────────────────────────── */
+.tab-bar {
+    background: var(--primary-dark);
+    display: flex;
+    gap: 0;
+    padding: 0 20px;
+    flex-shrink: 0;
+}
+
+.tab-btn {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.55);
+    font-size: 13px;
+    font-weight: 600;
+    padding: 10px 20px;
+    cursor: pointer;
+    position: relative;
+    transition: color 0.15s;
+    letter-spacing: 0.3px;
+}
+
+.tab-btn:hover {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.tab-btn.active {
+    color: #fff;
+}
+
+.tab-btn.active::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 8px;
+    right: 8px;
+    height: 3px;
+    background: #fff;
+    border-radius: 3px 3px 0 0;
+}
+
+.tab-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+
+body.tab-scan #batchesPanel {
+    display: none;
+}
+body.tab-batches main {
+    display: none;
+}
+body.tab-batches #batchesPanel {
+    display: flex !important;
+}
+
 /* ── Controls Bar ────────────────────────────────────── */
 .controls-bar {
     background: var(--primary);
@@ -295,14 +354,49 @@ body {
     }
 }
 
+/* ── Scan search bar ─────────────────────────────────── */
+.scan-search-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: var(--white);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.scan-search-icon {
+    flex-shrink: 0;
+    color: var(--text-muted);
+}
+
+#scanSearch {
+    flex: 1;
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    padding: 8px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    background: var(--bg);
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+#scanSearch:focus {
+    border-color: var(--primary);
+}
+
+.scan-search-wrap .count-pill {
+    flex-shrink: 0;
+}
+
 /* ── Main / Table ────────────────────────────────────── */
 main {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 0;
-    padding: 16px 20px 20px;
+    padding: 0;
-    gap: 10px;
     overflow: hidden;
 }
 
@@ -338,6 +432,13 @@ main {
 }
 
 /* Table wrapper — this scrolls */
+.scan-header-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 2px 0;
+}
+
 .table-wrapper {
     flex: 1;
     min-height: 0;
@@ -364,19 +465,19 @@ thead {
 }
 
 thead tr {
-    background: var(--primary);
+    background: var(--white);
 }
 
 thead th {
-    padding: 13px 18px;
+    padding: 14px 18px 6px;
     text-align: left;
     font-size: 11px;
     font-weight: 700;
-    letter-spacing: 1.2px;
+    letter-spacing: 0.8px;
     text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--text-muted);
     white-space: nowrap;
-    border-bottom: 2px solid var(--primary-dark);
+    border-bottom: 2px solid var(--border);
 }
 
 thead th:first-child {
@@ -884,7 +985,211 @@ tbody td {
     }
 }
 
-/* Scrollbar styling */
+/* ── Batch List ──────────────────────────────────────── */
+.batch-search-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: var(--white);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.batch-search-icon {
+    flex-shrink: 0;
+    color: var(--text-muted);
+}
+
+#batchSearch {
+    flex: 1;
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    padding: 8px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    background: var(--bg);
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+#batchSearch:focus {
+    border-color: var(--primary);
+}
+
+#batchStateFilter {
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    padding: 8px 10px;
+    font-size: 13px;
+    font-family: inherit;
+    background: var(--bg);
+    color: var(--text);
+    outline: none;
+    cursor: pointer;
+}
+
+#batchStateFilter:focus {
+    border-color: var(--primary);
+}
+
+.batch-table-wrap {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 20px 20px;
+    background: var(--white);
+}
+
+.batch-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 4px;
+}
+
+.batch-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+}
+
+.batch-table thead tr {
+    background: var(--white);
+}
+
+.batch-table thead th {
+    padding: 14px 18px 6px;
+    text-align: left;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    white-space: nowrap;
+    border-bottom: 2px solid var(--border);
+}
+
+.batch-th-sort {
+    cursor: pointer;
+    user-select: none;
+}
+
+.batch-th-sort:hover {
+    color: var(--text);
+}
+
+.sort-arrow {
+    font-size: 10px;
+    margin-left: 3px;
+    opacity: 0.7;
+}
+
+.batch-table tbody td {
+    padding: 12px;
+    background: var(--bg);
+    border-radius: 0;
+    font-size: 14px;
+    vertical-align: middle;
+}
+
+.batch-table tbody tr {
+    border-radius: var(--r-md);
+    overflow: hidden;
+    transition: opacity 0.15s;
+}
+
+.batch-table tbody tr:hover td {
+    background: var(--primary-light);
+}
+
+.batch-table tbody tr:first-child td:first-child {
+    border-radius: var(--r-md) 0 0 var(--r-md);
+}
+
+.batch-table tbody tr:first-child td:last-child {
+    border-radius: 0 var(--r-md) var(--r-md) 0;
+}
+
+.batch-row-done td {
+    opacity: 0.5;
+}
+
+.batch-row-done .batch-name-cell {
+    text-decoration: line-through;
+}
+
+.batch-charge-cell {
+    font-weight: 600;
+    color: var(--text);
+    font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+
+.batch-name-cell {
+    color: var(--text);
+    font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+}
+
+.batch-carrier-cell {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--primary);
+    background: var(--primary-light);
+    padding: 2px 8px;
+    border-radius: 99px;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.batch-state-cell {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 3px 10px;
+    border-radius: 99px;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.batch-state-done {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.batch-state-open {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.batch-empty {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 40px 0 !important;
+    font-size: 14px;
+}
+
+@media (max-width: 620px) {
+    .batch-table tbody td {
+        padding: 8px 6px;
+        font-size: 12px;
+    }
+    .batch-charge-cell {
+        max-width: 120px;
+    }
+    .batch-name-cell {
+        max-width: 100px;
+    }
+}
+
+/* ── Scrollbar styling ───────────────────────────────── */
 .table-wrapper::-webkit-scrollbar {
     width: 6px;
     height: 6px;