feat: Add SvelteKit web app with scan sessions and import queue

Replaces the Flask/Alpine web app with a SvelteKit 2 + Svelte 5 rewrite under web/, built on adapter-node and Tailwind v4. Same shape as the reference b4l budget app — no auth, stateless pass-through to InvenTree. New "scan session" flow groups mass scans into a session with live counters (scanned / succeeded / pending / failed). Unknown parts in import mode are fed to a worker pool that spawns inventree-part-import (IMPORT_CONCURRENCY, default 3, with 3-retry). Anything that can't be resolved automatically — parse errors, missing qty, invalid location, API errors, or imports that exhaust retries — drops into a Failures panel with a per-item Fix dialog (edit fields / search existing part / retry import). CSV export on the failure list. Layout is two-column on lg+: scanner + activity on the left, pending imports + failures on the right. Light-theme default. SSE on /api/events streams session and import events to the client. Barcode parser ported from the Python/JS versions and hardened for Digi-Key MH10.8.2 barcodes both with and without GS separators (old parser greedy-matched Q's digits and read "Q6" + "11ZPICK" as 611). Import worker also now treats a subprocess failure followed by a successful findPart as a success, so partial imports (part created but a duplicate parameter trips the DB constraint) no longer land in the Failures panel. Deploy artifacts: systemd unit, nginx example (SSE-friendly), and a step-by-step deploy/README. Requires inventree-part-import >= 1.9.2 on the server for InvenTree 1.x API compatibility. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 15:58:57 +07:00
parent ed9a3307ef
commit 379ed232df
50 changed files with 5517 additions and 1 deletions
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { app } from '$lib/stores/app.svelte';
+
+	const items = $derived(app.session?.pendingImports ?? []);
+
+	function locationName(id: number | null): string {
+		if (id == null) return '—';
+		const loc = app.locations.find((l) => l.id === id);
+		return loc ? `${loc.id} — ${loc.name}` : `#${id}`;
+	}
+
+	function elapsed(iso: string): string {
+		const ms = Date.now() - new Date(iso).getTime();
+		if (ms < 1000) return 'just now';
+		const s = Math.floor(ms / 1000);
+		if (s < 60) return `${s}s ago`;
+		const m = Math.floor(s / 60);
+		return `${m}m ${s % 60}s ago`;
+	}
+
+	// Tick every second so "elapsed" stays fresh.
+	let now = $state(Date.now());
+	$effect(() => {
+		const id = setInterval(() => (now = Date.now()), 1000);
+		return () => clearInterval(id);
+	});
+	$effect(() => {
+		// Reference `now` so the template re-computes elapsed strings.
+		void now;
+	});
+</script>
+
+<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
+	<div class="mb-3 flex items-center justify-between">
+		<h2 class="text-lg font-semibold text-slate-800">
+			Pending imports
+			{#if items.length > 0}
+				<span class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700"
+					>{items.length}</span
+				>
+			{/if}
+		</h2>
+		<span class="text-xs text-slate-500">
+			up to {app.importConcurrency} in parallel
+		</span>
+	</div>
+
+	{#if items.length === 0}
+		<p class="text-sm text-slate-500">Nothing in the queue.</p>
+	{:else}
+		<ul class="space-y-2">
+			{#each items as item (item.id)}
+				<li class="rounded-md border border-slate-200 bg-slate-50 p-3">
+					<div class="flex items-center justify-between">
+						<div class="min-w-0 flex-1">
+							<div class="flex items-center gap-2">
+								<span class="relative flex h-2 w-2">
+									<span
+										class="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-70"
+									></span>
+									<span class="relative inline-flex h-2 w-2 rounded-full bg-amber-500"></span>
+								</span>
+								<span class="truncate font-mono text-sm font-medium text-slate-900"
+									>{item.partCode}</span
+								>
+							</div>
+							<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-slate-500">
+								<span>Qty: <span class="text-slate-700">{item.quantity ?? '—'}</span></span>
+								<span>Loc: <span class="text-slate-700">{locationName(item.locationId)}</span></span>
+								<span
+									>Attempt: <span class="text-slate-700">{item.attempts}/3</span></span
+								>
+								<span title={item.queuedAt}>{elapsed(item.queuedAt)}</span>
+							</div>
+							{#if item.lastError}
+								<div class="mt-1 text-xs text-rose-600">
+									Last error: {item.lastError}
+								</div>
+							{/if}
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>