diff --git a/app.js b/app.js
new file mode 100644
index 0000000..021ea7d
--- /dev/null
+++ b/app.js
@@ -0,0 +1,433 @@
+"use strict";
+
+// ── Config ──────────────────────────────────────────────────────────────
+const WEBHOOK =
+ "https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d";
+
+// ── 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
+
+// ── 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");
+
+// ── 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, ">")
+ .replace(/"/g, """);
+}
+
+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 = "";
+ 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 =
+ '';
+ 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 =
+ '';
+ }
+}
+
+function buildDropdown(users) {
+ userSelect.innerHTML = '';
+
+ // 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");
+ }
+}
+
+// ── Enqueue (called immediately on Enter) ──────────────────────────────
+function enqueue(raw) {
+ const code = raw.trim();
+ 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;
+ }
+
+ // 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();
+}
+
+// ── 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 = `
+ |
+
+ Processing…
+ ${esc(code)}
+ |
+ ${esc(code)} |
+ `;
+ 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 = `
+ ${esc(item.country || "—")} |
+ ${esc(item.name || "—")} |
+ ${esc(item.producttag || "—")} |
+ ${esc(code)} |
+ `;
+ 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 = `
+
+ ✕
+ ${esc(msg)}
+ ${esc(code)}
+ |
+ ${esc(code)} |
+ `;
+}
+
+// ── Clear ──────────────────────────────────────────────────────────────────────
+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 = "";
+ scanCount = 0;
+ countPill.textContent = "0 scans";
+ 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);
+ }
+});
+
+// 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();
+ scanInput.focus();
+});
diff --git a/index.html b/index.html
index ef9c137..3485ecb 100644
--- a/index.html
+++ b/index.html
@@ -7,887 +7,7 @@
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
Health Routine – Package Scanner
-
+
@@ -1071,459 +191,6 @@
-
+