@flowselections/pick-schermen-kwekers 1.0.2 → 1.0.3

package/dist-lib/components/PickPublicPage.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    slug: string;
+}
+/** Openbaar pickscherm, bereikbaar via /pickstation/<slug>. */
+export declare function PickPublicPage({ slug }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PickPublicPage.d.ts.map

package/dist-lib/components/PickPublicPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickPublicPage.d.ts","sourceRoot":"","sources":["../../src/components/PickPublicPage.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,+BA2B7C"}

package/dist-lib/components/PickPublicPage.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { pickApi } from "../lib/pickApi";
+import { PickScherm } from "./pick/PickScherm";
+/** Openbaar pickscherm, bereikbaar via /pickstation/<slug>. */
+export function PickPublicPage({ slug }) {
+    const { data: station, isLoading } = useQuery({
+        queryKey: ["pick", "station", slug],
+        queryFn: () => pickApi.stationBySlug(slug),
+    });
+    if (isLoading) {
+        return (_jsx("div", { className: "flex min-h-screen items-center justify-center bg-background", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }) }));
+    }
+    if (!station) {
+        return (_jsx("div", { className: "flex min-h-screen items-center justify-center bg-background", children: _jsx("p", { className: "text-muted-foreground", children: "Pickstation niet gevonden of niet actief." }) }));
+    }
+    return (_jsx("div", { className: "min-h-screen bg-background p-6", children: _jsx(PickScherm, { station: station }) }));
+}

package/dist-lib/components/PickstationsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickstationsPage.d.ts","sourceRoot":"","sources":["../../src/components/PickstationsPage.tsx"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,gCA+E/B"}
+{"version":3,"file":"PickstationsPage.d.ts","sourceRoot":"","sources":["../../src/components/PickstationsPage.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,gBAAgB,gCAkL/B"}

package/dist-lib/components/PickstationsPage.js

@@ -1,18 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from "@tanstack/react-router";
-import { Badge, Button, Card, CardContent } from "@flowselections/core";
-import { Gauge, Loader2, Settings2 } from "lucide-react";
-import { usePickScreens, usePickStations, usePickTasks } from "../hooks/usePickConfig";
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Card, CardContent, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Switch, Textarea, toast, } from "@flowselections/core";
+import { Copy, ExternalLink, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
+import { pickApi } from "../lib/pickApi";
+import { usePickStations } from "../hooks/usePickConfig";
+const emptyDraft = { name: "", description: "", active: true };
+function publicUrl(slug) {
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    return `${origin}/pickstation/${slug ?? ""}`;
+}
 export function PickstationsPage() {
     const { data: stations, isLoading } = usePickStations();
-    const { data: screens } = usePickScreens();
-    const { data: tasks } = usePickTasks();
-    const safeStations = (Array.isArray(stations) ? stations : []).filter((s) => s.active);
-    const safeScreens = Array.isArray(screens) ? screens : [];
-    const safeTasks = Array.isArray(tasks) ? tasks : [];
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Pickstations" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Kies een pickstation om te beginnen met picken en printen." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsxs(Link, { to: "/pickstations/dashboard", children: [_jsx(Gauge, { className: "mr-2 h-4 w-4" }), " Live dashboard"] }) }), _jsx(Button, { variant: "outline", asChild: true, children: _jsxs(Link, { to: "/pickstations/beheer", children: [_jsx(Settings2, { className: "mr-2 h-4 w-4" }), " Beheer"] }) })] })] }), isLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden..."] })) : safeStations.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen pickstations. Maak er een aan via Beheer." })) : (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: safeStations.map((station) => {
-                    const stationScreens = safeScreens.filter((s) => s.station_id === station.id && s.active);
-                    const task = safeTasks.find((t) => t.id === station.task_id);
-                    return (_jsx(Link, { to: "/pickstations/$stationId", params: { stationId: station.id }, className: "block", children: _jsx(Card, { className: "h-full border-2 transition-all hover:border-primary hover:shadow-lg", children: _jsxs(CardContent, { className: "space-y-3 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: station.name }), _jsx("p", { className: "text-sm text-muted-foreground", children: station.description })] }), _jsx("span", { className: "h-10 w-10 shrink-0 rounded-lg", style: { backgroundColor: station.color ?? "#3b82f6" } })] }), _jsxs("div", { className: "flex flex-wrap gap-2 text-xs", children: [task && _jsx(Badge, { variant: "secondary", children: task.name }), station.location && _jsx(Badge, { variant: "outline", children: station.location }), station.department && _jsx(Badge, { variant: "outline", children: station.department }), _jsxs(Badge, { variant: "outline", children: [stationScreens.length, " schermen"] })] })] }) }) }, station.id));
-                }) }))] }));
+    const queryClient = useQueryClient();
+    const [draft, setDraft] = useState(null);
+    const safeStations = Array.isArray(stations) ? stations : [];
+    const save = useMutation({
+        mutationFn: async (d) => {
+            await pickApi.upsert("pick_stations", {
+                ...(d.id ? { id: d.id } : {}),
+                name: d.name.trim(),
+                description: d.description.trim() || null,
+                active: d.active,
+            });
+        },
+        onSuccess: () => {
+            toast.success("Pickstation opgeslagen.");
+            setDraft(null);
+            queryClient.invalidateQueries({ queryKey: ["pick", "stations"] });
+        },
+        onError: (e) => toast.error(e instanceof Error ? e.message : "Opslaan mislukt."),
+    });
+    const remove = useMutation({
+        mutationFn: (id) => pickApi.remove("pick_stations", id),
+        onSuccess: () => {
+            toast.success("Pickstation verwijderd.");
+            queryClient.invalidateQueries({ queryKey: ["pick", "stations"] });
+        },
+        onError: (e) => toast.error(e instanceof Error ? e.message : "Verwijderen mislukt."),
+    });
+    const copyLink = async (station) => {
+        const url = publicUrl(station.slug);
+        try {
+            await navigator.clipboard.writeText(url);
+            toast.success("Link gekopieerd.");
+        }
+        catch {
+            toast.error(url);
+        }
+    };
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Pickstations" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Beheer je pickstations en hun openbare link. Alle logica komt uit de Logistiek Engine." })] }), _jsxs(Button, { onClick: () => setDraft({ ...emptyDraft }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuw pickstation"] })] }), isLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden..."] })) : safeStations.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen pickstations." })) : (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: safeStations.map((station) => (_jsx(Card, { className: "border-2", children: _jsxs(CardContent, { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: station.name }), _jsx("p", { className: "text-sm text-muted-foreground", children: station.description })] }), _jsx("span", { className: "rounded-full px-2 py-1 text-xs font-medium " +
+                                            (station.active
+                                                ? "bg-primary/10 text-primary"
+                                                : "bg-muted text-muted-foreground"), children: station.active ? "Actief" : "Inactief" })] }), _jsx("code", { className: "block truncate rounded bg-muted px-2 py-1 text-xs text-muted-foreground", children: publicUrl(station.slug) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { className: "flex-1", asChild: true, children: _jsxs("a", { href: publicUrl(station.slug), target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Open pickstation"] }) }), _jsxs(Button, { variant: "outline", onClick: () => copyLink(station), children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), " Link kopi\u00EBren"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setDraft({
+                                            id: station.id,
+                                            name: station.name,
+                                            description: station.description ?? "",
+                                            active: station.active,
+                                        }), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Wijzigen"] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive", onClick: () => remove.mutate(station.id), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }) }, station.id))) })), _jsx(Dialog, { open: draft !== null, onOpenChange: (open) => !open && setDraft(null), children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: draft?.id ? "Pickstation wijzigen" : "Nieuw pickstation" }) }), draft && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-name", children: "Naam" }), _jsx(Input, { id: "station-name", value: draft.name, onChange: (e) => setDraft({ ...draft, name: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-desc", children: "Omschrijving (optioneel)" }), _jsx(Textarea, { id: "station-desc", value: draft.description, onChange: (e) => setDraft({ ...draft, description: e.target.value }) })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Label, { htmlFor: "station-active", children: "Actief" }), _jsx(Switch, { id: "station-active", checked: draft.active, onCheckedChange: (v) => setDraft({ ...draft, active: v }) })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setDraft(null), children: "Annuleren" }), _jsxs(Button, { disabled: !draft.name.trim() || save.isPending, onClick: () => save.mutate(draft), children: [save.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Opslaan"] })] })] }))] }) })] }));
 }

package/dist-lib/components/pick/LanguageTiles.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onSelect: (code: string) => void;
+    selected?: string | null;
+}
+/** Taalkeuze — zelfde tegel-uitstraling en bediening als de oude landselectie. */
+export declare function LanguageTiles({ onSelect, selected }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LanguageTiles.d.ts.map

package/dist-lib/components/pick/LanguageTiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageTiles.d.ts","sourceRoot":"","sources":["../../../src/components/pick/LanguageTiles.tsx"],"names":[],"mappings":"AAGA,UAAU,KAAK;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,+BAuB1D"}

package/dist-lib/components/pick/LanguageTiles.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@flowselections/core";
+import { PICK_LANGUAGES } from "../../lib/pickI18n";
+/** Taalkeuze — zelfde tegel-uitstraling en bediening als de oude landselectie. */
+export function LanguageTiles({ onSelect, selected }) {
+    return (_jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: PICK_LANGUAGES.map((l) => (_jsxs(Card, { role: "button", tabIndex: 0, onClick: () => onSelect(l.code), onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ")
+                    onSelect(l.code);
+            }, className: "cursor-pointer select-none border-2 p-6 text-center transition-all hover:border-primary hover:shadow-lg focus:border-primary focus:outline-none active:scale-[0.98] " +
+                (selected === l.code ? "border-primary bg-primary/5" : ""), children: [_jsx("div", { className: "text-5xl leading-none", children: l.flag }), _jsx("div", { className: "mt-3 text-lg font-semibold text-foreground", children: l.label })] }, l.code))) }));
+}

package/dist-lib/components/pick/PickScherm.d.ts

@@ -1,10 +1,12 @@
-import type { PickScreen, PickStation } from "../../lib/pickTypes";
+import type { PickStation } from "../../lib/pickTypes";
 interface Props {
     station: PickStation;
-    screen: PickScreen;
     onBack?: () => void;
-    kiosk?: boolean;
 }
-export declare function PickScherm({ station, screen, onBack, kiosk }: Props): import("react").JSX.Element;
+/**
+ * Pickscherm. De Logistiek Engine bepaalt welke documenten zichtbaar zijn en
+ * in welke volgorde; dit scherm toont uitsluitend wat de wachtrij teruggeeft.
+ */
+export declare function PickScherm({ station, onBack }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PickScherm.d.ts.map

package/dist-lib/components/pick/PickScherm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickScherm.d.ts","sourceRoot":"","sources":["../../../src/components/pick/PickScherm.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAiB,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAelF,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,+BAgQnE"}
+{"version":3,"file":"PickScherm.d.ts","sourceRoot":"","sources":["../../../src/components/pick/PickScherm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAiB,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAUtE,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,+BAmVpD"}

package/dist-lib/components/pick/PickScherm.js

@@ -1,114 +1,198 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
-import { Badge, Button, Card, CardContent, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, toast, } from "@flowselections/core";
-import { ArrowLeft, Eye, Loader2, Printer, RefreshCw, Search, WifiOff } from "lucide-react";
-import { CountryTiles } from "./CountryTiles";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Button, Card, CardContent, Input, toast } from "@flowselections/core";
+import { ArrowLeft, Globe, Loader2, Printer, RefreshCw, Search, WifiOff } from "lucide-react";
+import { LanguageTiles } from "./LanguageTiles";
 import { QueueTable } from "./QueueTable";
 import { getSessionId, pickApi } from "../../lib/pickApi";
-import { defaultFilters, usePickCountryCounts, usePickHeartbeat, usePickQueue, } from "../../hooks/usePickQueue";
-import { usePickCountries, usePickDocumentTypes, usePickPrinters, usePickStatuses, } from "../../hooks/usePickConfig";
-export function PickScherm({ station, screen, onBack, kiosk }) {
+import { completeLogisticsTaskForItem, documentTypeOf, EmptyLayoutError, MissingLayoutError, printQueueItem, } from "../../lib/pickPrint";
+import { getPickTranslator } from "../../lib/pickI18n";
+import { defaultFilters, usePickHeartbeat, usePickQueue, } from "../../hooks/usePickQueue";
+import { usePickDocumentTypes, usePickStatuses } from "../../hooks/usePickConfig";
+const LANG_STORAGE_KEY = "pick.language";
+/**
+ * Pickscherm. De Logistiek Engine bepaalt welke documenten zichtbaar zijn en
+ * in welke volgorde; dit scherm toont uitsluitend wat de wachtrij teruggeeft.
+ */
+export function PickScherm({ station, onBack }) {
     const sessionId = getSessionId();
-    const [country, setCountry] = useState(station.require_country_selection ? null : "");
+    const [lang, setLang] = useState(null);
     const [filters, setFilters] = useState(defaultFilters);
     const [busyId, setBusyId] = useState(null);
-    const [preview, setPreview] = useState(false);
-    const { data: countries } = usePickCountries();
+    const [pending, setPending] = useState(null);
+    const autoFetched = useRef(false);
     const { data: statuses } = usePickStatuses();
     const { data: documentTypes } = usePickDocumentTypes();
-    const { data: printers } = usePickPrinters();
-    const { data: counts } = usePickCountryCounts(screen.id);
-    const { online } = usePickHeartbeat(station.id, screen.id, sessionId);
-    const effectiveFilters = useMemo(() => ({
-        ...filters,
-        country: country || null,
-        sortRules: (screen.sort_rules?.length ? screen.sort_rules : station.sort_rules) ?? [],
-    }), [filters, country, screen.sort_rules, station.sort_rules]);
-    const { items, total, loading, lockedIds, refresh } = usePickQueue({
+    const { online } = usePickHeartbeat(station.id, null, sessionId);
+    const t = useMemo(() => getPickTranslator(lang ?? "nl"), [lang]);
+    const layoutMissingMessage = useCallback((documentType) => t.lang === "nl"
+        ? `Geen layout ingesteld voor ${documentType}. Stel deze in in de Layout maker (pakbonnen, verzendbrieven, extra).`
+        : `No layout configured for ${documentType}. Set it up in the Layout maker.`, [t]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const stored = window.localStorage.getItem(LANG_STORAGE_KEY);
+        if (stored)
+            setLang(stored);
+    }, []);
+    const chooseLang = useCallback((code) => {
+        setLang(code);
+        if (typeof window !== "undefined")
+            window.localStorage.setItem(LANG_STORAGE_KEY, code);
+    }, []);
+    const effectiveFilters = useMemo(() => ({ ...filters, country: null, sortRules: [] }), [filters]);
+    const { items, total, loading, lockedIds, refresh, pendingCount, printedCount } = usePickQueue({
         stationId: station.id,
-        screenId: screen.id,
         filters: effectiveFilters,
-        enabled: country !== null,
+        enabled: lang !== null,
     });
-    const printerId = screen.printer_id ?? station.default_printer_id ?? null;
-    const printer = (Array.isArray(printers) ? printers : []).find((p) => p.id === printerId);
     const runPrint = useCallback(async (item) => {
-        if (preview) {
-            toast.info(`Voorbeeldmodus: ${item.document_number} zou nu geprint worden.`);
+        const printed = await printQueueItem(item, t.locale);
+        await pickApi.completePrint(item.id, null, sessionId);
+        await completeLogisticsTaskForItem(item, printed);
+        toast.success(`${item.document_number ?? t("document")} ${t("sentToPrinter")}`);
+        refresh();
+    }, [sessionId, refresh, t]);
+    /** Zet een printfout om in een begrijpelijke melding, zonder ooit zelf op te maken. */
+    const showPrintError = useCallback((e, item) => {
+        if (e instanceof EmptyLayoutError) {
+            toast.error(t.lang === "nl"
+                ? `Layout heeft nog geen inhoud (${e.layoutName}).`
+                : `Layout has no content yet (${e.layoutName}).`);
             return;
         }
-        if (printer && printer.status !== "online" && printer.status !== "unknown") {
-            toast.error(`Printer ${printer.name} is niet beschikbaar (${printer.status}).`);
-            await pickApi.releaseLock(item.id);
+        if (e instanceof MissingLayoutError) {
+            toast.error(layoutMissingMessage(e.documentType || documentTypeOf(item)));
             return;
         }
-        await pickApi.completePrint(item.id, printerId, sessionId);
-        toast.success(`${item.document_number} verstuurd naar ${printer?.name ?? "printer"}.`);
-        refresh();
-    }, [preview, printer, printerId, sessionId, refresh]);
+        toast.error(e instanceof Error ? e.message : t("notAvailable"));
+    }, [layoutMissingMessage, t]);
     const handlePick = useCallback(async (item) => {
         setBusyId(item.id);
         try {
             const claimed = await pickApi.claim({
                 itemId: item.id,
                 stationId: station.id,
-                screenId: screen.id,
+                screenId: null,
                 sessionId,
-                timeout: station.lock_timeout_seconds,
+                timeout: station.lock_timeout_seconds ?? 120,
             });
             await runPrint(claimed ?? item);
         }
         catch (e) {
-            const message = e instanceof Error ? e.message : "Dit document is zojuist verwerkt.";
-            toast.error(message);
-            // Als claim wel is gelukt maar runPrint faalde, geef de lock vrij zodat
-            // het document niet minutenlang geblokkeerd blijft voor andere schermen.
+            showPrintError(e, item);
             try {
                 await pickApi.releaseLock(item.id);
             }
             catch {
-                // Lock is mogelijk al opgeruimd of van een andere sessie; negeren.
+                // lock al opgeruimd of van een andere sessie
             }
             refresh();
         }
         finally {
             setBusyId(null);
         }
-    }, [station.id, station.lock_timeout_seconds, screen.id, sessionId, runPrint, refresh]);
-    const handleNext = useCallback(async () => {
+    }, [station.id, station.lock_timeout_seconds, sessionId, runPrint, refresh, showPrintError]);
+    /** Vraagt de Logistiek Engine om de volgende opdracht en laat deze ter bevestiging zien. */
+    /** Print een al geprint document opnieuw, zonder de wachtrijstatus te wijzigen. */
+    const handleReprint = useCallback(async (item) => {
+        setBusyId(item.id);
+        try {
+            await printQueueItem(item, t.locale);
+            toast.success(`${item.document_number ?? t("document")} ${t("sentToPrinter")}`);
+        }
+        catch (e) {
+            showPrintError(e, item);
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [t, showPrintError]);
+    const fetchNext = useCallback(async () => {
         setBusyId("next");
-        let claimed = null;
         try {
-            claimed = await pickApi.claimNext({
+            const claimed = await pickApi.claimNext({
                 stationId: station.id,
-                screenId: screen.id,
-                country: country || null,
+                screenId: null,
+                country: null,
                 sessionId,
-                timeout: station.lock_timeout_seconds,
+                timeout: station.lock_timeout_seconds ?? 120,
             });
-            await runPrint(claimed);
+            if (!claimed)
+                throw new Error(t("noDocument"));
+            setPending(claimed);
+            return claimed;
         }
         catch (e) {
-            const message = e instanceof Error ? e.message : "Geen document beschikbaar.";
+            const message = e instanceof Error ? e.message : t("noDocument");
             toast.error(message);
-            if (claimed?.id) {
-                try {
-                    await pickApi.releaseLock(claimed.id);
-                }
-                catch {
-                    // Negeren; lock wordt toch door heartbeat opgeruimd.
-                }
-            }
+            setPending(null);
             refresh();
+            return null;
         }
         finally {
             setBusyId(null);
         }
-    }, [station.id, station.lock_timeout_seconds, screen.id, country, sessionId, runPrint, refresh]);
-    // Stap 1 — landselectie
-    if (country === null) {
-        return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-foreground", children: screen.name }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Kies eerst een land om verder te gaan." })] }), onBack && !kiosk && (_jsxs(Button, { variant: "outline", onClick: onBack, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Terug"] }))] }), _jsx(CountryTiles, { countries: Array.isArray(countries) ? countries : [], counts: counts ?? {}, onSelect: setCountry })] }));
+    }, [station.id, station.lock_timeout_seconds, sessionId, refresh, t]);
+    /** Bevestigt de opdracht, print deze en haalt direct de volgende op. */
+    const confirmPending = useCallback(async () => {
+        const item = pending;
+        if (!item)
+            return;
+        setBusyId("confirm");
+        try {
+            await runPrint(item);
+            setPending(null);
+            setBusyId(null);
+            await fetchNext();
+        }
+        catch (e) {
+            showPrintError(e, item);
+            try {
+                await pickApi.releaseLock(item.id);
+            }
+            catch {
+                // heartbeat ruimt de lock alsnog op
+            }
+            setPending(null);
+            refresh();
+            setBusyId(null);
+        }
+    }, [pending, runPrint, fetchNext, refresh, showPrintError]);
+    const cancelPending = useCallback(async () => {
+        const item = pending;
+        setPending(null);
+        if (item) {
+            try {
+                await pickApi.releaseLock(item.id);
+            }
+            catch {
+                // lock verloopt automatisch
+            }
+        }
+        refresh();
+    }, [pending, refresh]);
+    /** Zet automatisch de volgende opdracht klaar, zodat één klik op printen volstaat. */
+    useEffect(() => {
+        if (lang === null || loading)
+            return;
+        if (pending !== null || busyId !== null)
+            return;
+        if (autoFetched.current)
+            return;
+        if (items.length === 0)
+            return;
+        autoFetched.current = true;
+        void fetchNext();
+    }, [lang, loading, pending, busyId, items.length, fetchNext]);
+    /** Na een lege of mislukte poging opnieuw proberen zodra de wachtrij wijzigt. */
+    useEffect(() => {
+        autoFetched.current = false;
+    }, [items.length]);
+    // Stap 1 — taalselectie
+    if (lang === null) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-foreground", children: station.name }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("chooseLanguageHint") })] }), onBack && (_jsxs(Button, { variant: "outline", onClick: onBack, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " ", t("back")] }))] }), _jsx(LanguageTiles, { onSelect: chooseLang })] }));
     }
     const totalPages = Math.max(1, Math.ceil(total / filters.pageSize));
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { variant: "outline", size: "lg", onClick: () => setCountry(null), children: [_jsx(ArrowLeft, { className: "mr-2 h-5 w-5" }), " Land wijzigen"] }), _jsxs("div", { children: [_jsxs("h2", { className: "text-xl font-bold text-foreground", children: [screen.name, " \u2014 ", country || "alle landen"] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [total, " document", total === 1 ? "" : "en", " in wachtrij \u00B7 printer: ", printer?.name ?? "geen", printer && printer.status !== "online" ? ` (${printer.status})` : ""] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [!online && (_jsxs(Badge, { className: "bg-destructive text-destructive-foreground", children: [_jsx(WifiOff, { className: "mr-1 h-3.5 w-3.5" }), " Offline"] })), _jsxs("div", { className: "flex items-center gap-2 rounded-md border px-3 py-2", children: [_jsx(Eye, { className: "h-4 w-4 text-muted-foreground" }), _jsx("span", { className: "text-sm", children: "Voorbeeld" }), _jsx(Switch, { checked: preview, onCheckedChange: setPreview })] }), _jsx(Button, { variant: "outline", size: "icon", onClick: refresh, "aria-label": "Vernieuwen", children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsxs(Button, { size: "lg", className: "h-14 px-8 text-lg", onClick: handleNext, disabled: busyId !== null, children: [busyId === "next" ? (_jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-5 w-5" })), "Volgende uitprinten"] })] })] }), _jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-wrap items-center gap-3 p-4", children: [_jsxs("div", { className: "relative min-w-64 flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek op order, document, klant, referentie of barcode", value: filters.search, onChange: (e) => setFilters((f) => ({ ...f, search: e.target.value, page: 0 })) })] }), _jsxs(Select, { value: filters.documentTypeId ?? "all", onValueChange: (v) => setFilters((f) => ({ ...f, documentTypeId: v === "all" ? null : v, page: 0 })), children: [_jsx(SelectTrigger, { className: "w-56", children: _jsx(SelectValue, { placeholder: "Documenttype" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle documenttypes" }), (Array.isArray(documentTypes) ? documentTypes : []).map((d) => (_jsx(SelectItem, { value: d.id, children: d.name }, d.id)))] })] }), _jsxs("div", { className: "flex items-center gap-2 rounded-md border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: "Alleen spoed" }), _jsx(Switch, { checked: filters.urgentOnly, onCheckedChange: (v) => setFilters((f) => ({ ...f, urgentOnly: v, page: 0 })) })] })] }) }), loading ? (_jsxs("div", { className: "flex items-center justify-center py-16 text-muted-foreground", children: [_jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }), " Wachtrij laden..."] })) : (_jsx(QueueTable, { items: items, lockedIds: lockedIds, statuses: Array.isArray(statuses) ? statuses : [], documentTypes: Array.isArray(documentTypes) ? documentTypes : [], busyId: busyId, onPick: handlePick })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Pagina ", filters.page + 1, " van ", totalPages] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", disabled: filters.page === 0, onClick: () => setFilters((f) => ({ ...f, page: Math.max(0, f.page - 1) })), children: "Vorige" }), _jsx(Button, { variant: "outline", disabled: filters.page + 1 >= totalPages, onClick: () => setFilters((f) => ({ ...f, page: f.page + 1 })), children: "Volgende" })] })] })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { variant: "outline", size: "lg", onClick: () => setLang(null), children: [_jsx(Globe, { className: "mr-2 h-5 w-5" }), " ", t("changeLanguage")] }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-bold text-foreground", children: station.name }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [pendingCount, " ", t("statusToPrint"), " \u00B7 ", printedCount, " ", t("statusPrinted")] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [!online && (_jsxs(Badge, { className: "bg-destructive text-destructive-foreground", children: [_jsx(WifiOff, { className: "mr-1 h-3.5 w-3.5" }), " ", t("offline")] })), _jsx(Button, { variant: "outline", size: "icon", onClick: refresh, "aria-label": t("refresh"), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsxs(Button, { size: "lg", className: "h-14 px-8 text-lg", onClick: () => (pending ? confirmPending() : fetchNext()), disabled: busyId !== null, children: [busyId !== null ? (_jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-5 w-5" })), t("printNext"), pending?.document_number ? ` · ${pending.document_number}` : ""] })] })] }), pending && (_jsx(Card, { className: "border-2 border-primary", children: _jsxs(CardContent, { className: "flex flex-wrap items-center justify-between gap-4 p-5", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("confirmPrintTitle") }), _jsx("p", { className: "text-2xl font-bold text-foreground", children: pending.document_number ?? t("document") }), _jsx("p", { className: "text-sm text-muted-foreground", children: [pending.order_number, pending.customer_name].filter(Boolean).join(" · ") })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "lg", onClick: cancelPending, disabled: busyId !== null, children: t("cancel") }), _jsxs(Button, { size: "lg", className: "h-14 px-8 text-lg", onClick: confirmPending, disabled: busyId !== null, children: [busyId === "confirm" ? (_jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-5 w-5" })), t("print")] })] })] }) })), _jsx(Card, { children: _jsx(CardContent, { className: "flex flex-wrap items-center gap-3 p-4", children: _jsxs("div", { className: "relative min-w-64 flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: t("search"), value: filters.search, onChange: (e) => setFilters((f) => ({ ...f, search: e.target.value, page: 0 })) })] }) }) }), loading ? (_jsxs("div", { className: "flex items-center justify-center py-16 text-muted-foreground", children: [_jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }), " ", t("loadingQueue")] })) : (_jsx(QueueTable, { items: items, lockedIds: lockedIds, statuses: Array.isArray(statuses) ? statuses : [], documentTypes: Array.isArray(documentTypes) ? documentTypes : [], busyId: busyId, onPick: handlePick, onReprint: handleReprint, t: t })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: [t("page"), " ", filters.page + 1, " ", t("of"), " ", totalPages] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", disabled: filters.page === 0, onClick: () => setFilters((f) => ({ ...f, page: Math.max(0, f.page - 1) })), children: t("previous") }), _jsx(Button, { variant: "outline", disabled: filters.page + 1 >= totalPages, onClick: () => setFilters((f) => ({ ...f, page: f.page + 1 })), children: t("next") })] })] })] }));
 }

package/dist-lib/components/pick/QueueTable.d.ts

@@ -1,4 +1,5 @@
 import type { PickDocumentType, PickQueueItem, PickStatus } from "../../lib/pickTypes";
+import { type PickTranslator } from "../../lib/pickI18n";
 interface Props {
     items: PickQueueItem[];
     lockedIds: Set<string>;
@@ -6,8 +7,10 @@ interface Props {
     documentTypes: PickDocumentType[];
     busyId: string | null;
     onPick: (item: PickQueueItem) => void;
+    onReprint?: (item: PickQueueItem) => void;
     readOnly?: boolean;
+    t?: PickTranslator;
 }
-export declare function QueueTable({ items, lockedIds, statuses, documentTypes, busyId, onPick, readOnly, }: Props): import("react").JSX.Element;
+export declare function QueueTable({ items, lockedIds, statuses, documentTypes, busyId, onPick, onReprint, readOnly, t: translator, }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=QueueTable.d.ts.map

package/dist-lib/components/pick/QueueTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueueTable.d.ts","sourceRoot":"","sources":["../../../src/components/pick/QueueTable.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGvF,UAAU,KAAK;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,GACT,EAAE,KAAK,+BAsGP"}
+{"version":3,"file":"QueueTable.d.ts","sourceRoot":"","sources":["../../../src/components/pick/QueueTable.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEvF,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE5E,UAAU,KAAK;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,CAAC,EAAE,cAAc,CAAC;CACpB;AASD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,CAAC,EAAE,UAAU,GACd,EAAE,KAAK,+BA8GP"}

package/dist-lib/components/pick/QueueTable.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
-import { AlertTriangle, Lock, Printer } from "lucide-react";
+import { AlertTriangle, Lock, Printer, RotateCcw } from "lucide-react";
 import { sinceLabel } from "../../lib/pickTypes";
+import { getPickTranslator } from "../../lib/pickI18n";
 function priorityTone(priority, urgent) {
     if (urgent)
         return "bg-destructive text-destructive-foreground";
@@ -11,19 +12,19 @@ function priorityTone(priority, urgent) {
         return "bg-secondary text-secondary-foreground";
     return "bg-muted text-muted-foreground";
 }
-export function QueueTable({ items, lockedIds, statuses, documentTypes, busyId, onPick, readOnly, }) {
+export function QueueTable({ items, lockedIds, statuses, documentTypes, busyId, onPick, onReprint, readOnly, t: translator, }) {
+    const t = translator ?? getPickTranslator("nl");
     const safeItems = Array.isArray(items) ? items : [];
-    const statusById = new Map((Array.isArray(statuses) ? statuses : []).map((s) => [s.id, s]));
     const docById = new Map((Array.isArray(documentTypes) ? documentTypes : []).map((d) => [d.id, d]));
-    return (_jsx("div", { className: "overflow-x-auto rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Document" }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { className: "hidden lg:table-cell", children: "Afleveradres" }), _jsx(TableHead, { className: "text-right", children: "Regels" }), _jsx(TableHead, { className: "text-right", children: "Karren" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Prioriteit" }), _jsx(TableHead, { children: "Aangemeld" }), _jsx(TableHead, { children: "Wachttijd" }), _jsx(TableHead, { className: "text-right", children: "Actie" })] }) }), _jsxs(TableBody, { children: [safeItems.map((item) => {
-                            const locked = lockedIds.has(item.id);
-                            const status = item.status_id ? statusById.get(item.status_id) : undefined;
+    return (_jsx("div", { className: "overflow-x-auto rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t("document") }), _jsx(TableHead, { children: t("order") }), _jsx(TableHead, { children: t("customer") }), _jsx(TableHead, { className: "hidden lg:table-cell", children: t("deliveryAddress") }), _jsx(TableHead, { className: "text-right", children: t("lines") }), _jsx(TableHead, { className: "text-right", children: t("carts") }), _jsx(TableHead, { children: t("status") }), _jsx(TableHead, { children: t("priority") }), _jsx(TableHead, { children: t("announced") }), _jsx(TableHead, { children: t("waiting") }), _jsx(TableHead, { className: "text-right", children: t("action") })] }) }), _jsxs(TableBody, { children: [safeItems.map((item) => {
+                            const printed = !!item.printed_at;
+                            const locked = !printed && lockedIds.has(item.id);
                             const doc = item.document_type_id ? docById.get(item.document_type_id) : undefined;
                             const warnings = Array.isArray(item.warnings) ? item.warnings : [];
-                            return (_jsxs(TableRow, { className: locked ? "opacity-50" : undefined, children: [_jsxs(TableCell, { className: "font-medium", children: [_jsxs("div", { className: "flex items-center gap-2", children: [item.document_number, warnings.length > 0 && (_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive", "aria-label": "Waarschuwing" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: doc?.name ?? "-" })] }), _jsx(TableCell, { children: item.order_number }), _jsx(TableCell, { children: item.customer_name }), _jsx(TableCell, { className: "hidden max-w-56 truncate lg:table-cell", children: item.delivery_address }), _jsx(TableCell, { className: "text-right", children: item.line_count }), _jsx(TableCell, { className: "text-right", children: item.cart_count }), _jsx(TableCell, { children: _jsx(Badge, { style: status?.color ? { backgroundColor: status.color, color: "#fff" } : undefined, children: status?.name ?? "-" }) }), _jsx(TableCell, { children: _jsx("span", { className: "rounded px-2 py-1 text-xs font-semibold " +
-                                                priorityTone(item.priority, item.is_urgent), children: item.is_urgent ? "SPOED" : item.priority }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm", children: new Date(item.announced_at).toLocaleTimeString("nl-NL", {
+                            return (_jsxs(TableRow, { className: locked || printed ? "opacity-60" : undefined, children: [_jsxs(TableCell, { className: "font-medium", children: [_jsxs("div", { className: "flex items-center gap-2", children: [item.document_number, warnings.length > 0 && (_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive", "aria-label": t("warning") }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: doc?.name ?? "-" })] }), _jsx(TableCell, { children: item.order_number }), _jsx(TableCell, { children: item.customer_name }), _jsx(TableCell, { className: "hidden max-w-56 truncate lg:table-cell", children: item.delivery_address }), _jsx(TableCell, { className: "text-right", children: item.line_count }), _jsx(TableCell, { className: "text-right", children: item.cart_count }), _jsx(TableCell, { children: _jsx(Badge, { variant: printed ? "secondary" : "default", children: printed ? t("statusPrinted") : t("statusToPrint") }) }), _jsx(TableCell, { children: _jsx("span", { className: "rounded px-2 py-1 text-xs font-semibold " +
+                                                priorityTone(item.priority, item.is_urgent), children: item.is_urgent ? t("urgent") : item.priority }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm", children: new Date(item.announced_at).toLocaleTimeString(t.locale, {
                                             hour: "2-digit",
                                             minute: "2-digit",
-                                        }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm", children: sinceLabel(item.announced_at) }), _jsx(TableCell, { className: "text-right", children: locked ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), " In behandeling"] })) : (_jsxs(Button, { size: "sm", variant: "outline", disabled: readOnly || busyId === item.id, onClick: () => onPick(item), children: [_jsx(Printer, { className: "mr-1 h-4 w-4" }), "Printen"] })) })] }, item.id));
-                        }), safeItems.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 11, className: "py-10 text-center text-muted-foreground", children: "Geen documenten in de wachtrij." }) }))] })] }) }));
+                                        }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm", children: sinceLabel(item.announced_at) }), _jsx(TableCell, { className: "text-right", children: printed ? (_jsxs(Button, { size: "sm", variant: "ghost", disabled: readOnly || busyId === item.id, onClick: () => (onReprint ?? onPick)(item), children: [_jsx(RotateCcw, { className: "mr-1 h-4 w-4" }), t("print")] })) : locked ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), " ", t("inProgress")] })) : (_jsxs(Button, { size: "sm", variant: "outline", disabled: readOnly || busyId === item.id, onClick: () => onPick(item), children: [_jsx(Printer, { className: "mr-1 h-4 w-4" }), t("print")] })) })] }, item.id));
+                        }), safeItems.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 11, className: "py-10 text-center text-muted-foreground", children: t("emptyQueue") }) }))] })] }) }));
 }

package/dist-lib/hooks/usePickQueue.d.ts

@@ -21,6 +21,9 @@ export declare function usePickQueue(args: {
 }): {
     items: PickQueueItem[];
     total: number;
+    pickDay: string | null;
+    pendingCount: number;
+    printedCount: number;
     loading: boolean;
     error: string | null;
     lockedIds: Set<string>;
@@ -30,5 +33,8 @@ export declare function usePickQueue(args: {
 export declare function usePickHeartbeat(stationId?: string, screenId?: string | null, sessionId?: string): {
     online: boolean;
 };
-export declare function usePickCountryCounts(screenId?: string): import("@tanstack/react-query").UseQueryResult<NoInfer<Record<string, number>>, Error>;
+export declare function usePickCountryCounts(args: {
+    stationId?: string;
+    screenId?: string;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<Record<string, number>>, Error>;
 //# sourceMappingURL=usePickQueue.d.ts.map

package/dist-lib/hooks/usePickQueue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePickQueue.d.ts","sourceRoot":"","sources":["../../src/hooks/usePickQueue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAY,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG9E,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,YAQ5B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;;;;;;;EAkEA;AAED,qEAAqE;AACrE,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM;;EAuBhG;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,0FAOrD"}
+{"version":3,"file":"usePickQueue.d.ts","sourceRoot":"","sources":["../../src/hooks/usePickQueue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAY,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG9E,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,YAQ5B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;;;;;;;;;;EA0GA;AAED,qEAAqE;AACrE,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM;;EAuBhG;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,0FAOnF"}