@flowselections/pick-schermen-kwekers 1.0.1

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

@@ -0,0 +1,114 @@
+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 { 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 }) {
+    const sessionId = getSessionId();
+    const [country, setCountry] = useState(station.require_country_selection ? null : "");
+    const [filters, setFilters] = useState(defaultFilters);
+    const [busyId, setBusyId] = useState(null);
+    const [preview, setPreview] = useState(false);
+    const { data: countries } = usePickCountries();
+    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({
+        stationId: station.id,
+        screenId: screen.id,
+        filters: effectiveFilters,
+        enabled: country !== 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.`);
+            return;
+        }
+        if (printer && printer.status !== "online" && printer.status !== "unknown") {
+            toast.error(`Printer ${printer.name} is niet beschikbaar (${printer.status}).`);
+            await pickApi.releaseLock(item.id);
+            return;
+        }
+        await pickApi.completePrint(item.id, printerId, sessionId);
+        toast.success(`${item.document_number} verstuurd naar ${printer?.name ?? "printer"}.`);
+        refresh();
+    }, [preview, printer, printerId, sessionId, refresh]);
+    const handlePick = useCallback(async (item) => {
+        setBusyId(item.id);
+        try {
+            const claimed = await pickApi.claim({
+                itemId: item.id,
+                stationId: station.id,
+                screenId: screen.id,
+                sessionId,
+                timeout: station.lock_timeout_seconds,
+            });
+            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.
+            try {
+                await pickApi.releaseLock(item.id);
+            }
+            catch {
+                // Lock is mogelijk al opgeruimd of van een andere sessie; negeren.
+            }
+            refresh();
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [station.id, station.lock_timeout_seconds, screen.id, sessionId, runPrint, refresh]);
+    const handleNext = useCallback(async () => {
+        setBusyId("next");
+        let claimed = null;
+        try {
+            claimed = await pickApi.claimNext({
+                stationId: station.id,
+                screenId: screen.id,
+                country: country || null,
+                sessionId,
+                timeout: station.lock_timeout_seconds,
+            });
+            await runPrint(claimed);
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : "Geen document beschikbaar.";
+            toast.error(message);
+            if (claimed?.id) {
+                try {
+                    await pickApi.releaseLock(claimed.id);
+                }
+                catch {
+                    // Negeren; lock wordt toch door heartbeat opgeruimd.
+                }
+            }
+            refresh();
+        }
+        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 })] }));
+    }
+    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" })] })] })] }));
+}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+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 { sinceLabel } from "../../lib/pickTypes";
+function priorityTone(priority, urgent) {
+    if (urgent)
+        return "bg-destructive text-destructive-foreground";
+    if (priority <= 10)
+        return "bg-primary text-primary-foreground";
+    if (priority <= 20)
+        return "bg-secondary text-secondary-foreground";
+    return "bg-muted text-muted-foreground";
+}
+export function QueueTable({ items, lockedIds, statuses, documentTypes, busyId, onPick, readOnly, }) {
+    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;
+                            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", {
+                                            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." }) }))] })] }) }));
+}

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function MijnModuleSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=MijnModuleSettingsCard.d.ts.map

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MijnModuleSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MijnModuleSettingsCard.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,sBAAsB,gCA+CrC"}

package/dist-lib/components/settings/MijnModuleSettingsCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/settings/MijnModuleSettingsCard.tsx — EXAMPLE SETTINGS CARD
+// ============================================================================
+// This is an example of a settings card for your module.
+// It appears on the main settings page when registered in src/index.ts.
+//
+// RULES:
+//   - Must return a <Card> as its root element
+//   - Handles its own data fetching — no props are passed by the core
+//   - Use the same Card primitives from @flowselections/core
+//
+// WHAT TO DO:
+//   - Rename this file to match your card's purpose
+//   - Add your real settings UI
+//   - Register it in src/index.ts under settingsCards
+//   - Delete this file entirely if your module has no settings
+// ============================================================================
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input, Label, toast, } from "@flowselections/core";
+import { Settings2 } from "lucide-react";
+export function MijnModuleSettingsCard() {
+    // Replace with your real settings state
+    const [setting, setSetting] = useState("");
+    const [saving, setSaving] = useState(false);
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Example: save to a table — replace with your real query
+            // const { error } = await supabase.from("my_settings").upsert({ ... });
+            // if (error) throw error;
+            toast.success("Instellingen opgeslagen");
+        }
+        catch {
+            toast.error("Fout bij het opslaan");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Module Instellingen" }), " "] }), _jsx(CardDescription, { children: "Beheer de instellingen voor deze module " })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "setting", children: "Instelling" }), _jsx(Input, { id: "setting", value: setting, onChange: (e) => setSetting(e.target.value), placeholder: "Waarde..." })] }), _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan..." : "Opslaan" })] })] }));
+}

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

@@ -0,0 +1,13 @@
+interface MijnItem {
+    id: string;
+    created_at: string;
+    [key: string]: unknown;
+}
+export declare function useMijnModuleData(): {
+    items: MijnItem[];
+    loading: boolean;
+    error: string | null;
+    reload: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=useMijnModuleData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMijnModuleData.d.ts","sourceRoot":"","sources":["../../src/hooks/useMijnModuleData.ts"],"names":[],"mappings":"AAkBA,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB;;;;;EAkChC"}

package/dist-lib/hooks/useMijnModuleData.js

@@ -0,0 +1,49 @@
+// ============================================================================
+// src/hooks/useMijnModuleData.ts — EXAMPLE DATA HOOK
+// ============================================================================
+// Put your data fetching logic in hooks like this, not directly in components.
+// This keeps your pages clean and makes it easy to reuse data across pages.
+//
+// WHAT TO DO:
+//   - Rename to match your data (e.g. useProducts, useOrders, useSuppliers)
+//   - Replace the example query with your real Supabase query
+//   - Replace MijnItem with your actual table's row type
+//   - Import and use in your page components
+//   - Delete this file if you prefer a different pattern
+// ============================================================================
+import { useState, useEffect, useCallback } from "react";
+import { supabase, toast } from "@flowselections/core";
+export function useMijnModuleData() {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const { data, error } = await supabase
+                .from("products") // ← CHANGE THIS to your table
+                .select("*")
+                .order("created_at", { ascending: false });
+            if (error)
+                throw error;
+            setItems(data ?? []);
+        }
+        catch {
+            setError("Fout bij het laden van gegevens");
+            toast.error("Fout bij het laden van gegevens");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    return {
+        items,
+        loading,
+        error,
+        reload: load,
+    };
+}

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

@@ -0,0 +1,9 @@
+export declare function usePickCountries(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickCountry[]>, Error>;
+export declare function usePickStatuses(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickStatus[]>, Error>;
+export declare function usePickPrinters(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickPrinter[]>, Error>;
+export declare function usePickDocumentTypes(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickDocumentType[]>, Error>;
+export declare function usePickStationTypes(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickStationType[]>, Error>;
+export declare function usePickTasks(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickTask[]>, Error>;
+export declare function usePickStations(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickStation[]>, Error>;
+export declare function usePickScreens(stationId?: string): import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").PickScreen[]>, Error>;
+//# sourceMappingURL=usePickConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePickConfig.d.ts","sourceRoot":"","sources":["../../src/hooks/usePickConfig.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,+FAE/B;AACD,wBAAgB,eAAe,8FAE9B;AACD,wBAAgB,eAAe,+FAE9B;AACD,wBAAgB,oBAAoB,oGAEnC;AACD,wBAAgB,mBAAmB,mGAElC;AACD,wBAAgB,YAAY,4FAE3B;AACD,wBAAgB,eAAe,+FAE9B;AACD,wBAAgB,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,6FAKhD"}

package/dist-lib/hooks/usePickConfig.js

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { pickApi } from "../lib/pickApi";
+export function usePickCountries() {
+    return useQuery({ queryKey: ["pick", "countries"], queryFn: pickApi.countries });
+}
+export function usePickStatuses() {
+    return useQuery({ queryKey: ["pick", "statuses"], queryFn: pickApi.statuses });
+}
+export function usePickPrinters() {
+    return useQuery({ queryKey: ["pick", "printers"], queryFn: pickApi.printers });
+}
+export function usePickDocumentTypes() {
+    return useQuery({ queryKey: ["pick", "documentTypes"], queryFn: pickApi.documentTypes });
+}
+export function usePickStationTypes() {
+    return useQuery({ queryKey: ["pick", "stationTypes"], queryFn: pickApi.stationTypes });
+}
+export function usePickTasks() {
+    return useQuery({ queryKey: ["pick", "tasks"], queryFn: pickApi.tasks });
+}
+export function usePickStations() {
+    return useQuery({ queryKey: ["pick", "stations"], queryFn: pickApi.stations });
+}
+export function usePickScreens(stationId) {
+    return useQuery({
+        queryKey: ["pick", "screens", stationId ?? "all"],
+        queryFn: () => pickApi.screens(stationId),
+    });
+}

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

@@ -0,0 +1,34 @@
+import type { PickQueueItem, PickSortRule } from "../lib/pickTypes";
+export interface QueueFilters {
+    country: string | null;
+    search: string;
+    documentTypeId: string | null;
+    urgentOnly: boolean;
+    page: number;
+    pageSize: number;
+    sortRules: PickSortRule[];
+}
+export declare const defaultFilters: QueueFilters;
+/**
+ * Realtime wachtrij. Elke wijziging in pick_queue of pick_queue_locks laat
+ * alle geopende schermen direct opnieuw laden — zonder handmatige refresh.
+ */
+export declare function usePickQueue(args: {
+    stationId?: string;
+    screenId?: string;
+    filters: QueueFilters;
+    enabled?: boolean;
+}): {
+    items: PickQueueItem[];
+    total: number;
+    loading: boolean;
+    error: string | null;
+    lockedIds: Set<string>;
+    refresh: () => void;
+};
+/** Houdt bij dat dit scherm online is en ruimt verlopen locks op. */
+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>;
+//# sourceMappingURL=usePickQueue.d.ts.map

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

@@ -0,0 +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"}

package/dist-lib/hooks/usePickQueue.js

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { pickApi, pickDb } from "../lib/pickApi";
+import { safeArray } from "../lib/pickTypes";
+export const defaultFilters = {
+    country: null,
+    search: "",
+    documentTypeId: null,
+    urgentOnly: false,
+    page: 0,
+    pageSize: 25,
+    sortRules: [],
+};
+/**
+ * Realtime wachtrij. Elke wijziging in pick_queue of pick_queue_locks laat
+ * alle geopende schermen direct opnieuw laden — zonder handmatige refresh.
+ */
+export function usePickQueue(args) {
+    const queryClient = useQueryClient();
+    const { stationId, screenId, filters } = args;
+    const enabled = args.enabled !== false;
+    const key = useMemo(() => ["pick", "queue", stationId ?? "-", screenId ?? "-", filters], [stationId, screenId, filters]);
+    const queueQuery = useQuery({
+        queryKey: key,
+        enabled,
+        queryFn: () => pickApi.queue({
+            stationId,
+            screenId,
+            country: filters.country,
+            search: filters.search.trim() || undefined,
+            documentTypeId: filters.documentTypeId,
+            urgentOnly: filters.urgentOnly,
+            sortRules: filters.sortRules,
+            page: filters.page,
+            pageSize: filters.pageSize,
+        }),
+    });
+    const locksQuery = useQuery({
+        queryKey: ["pick", "locks", stationId ?? "-"],
+        enabled,
+        queryFn: () => pickApi.locks(stationId),
+        refetchInterval: 5000,
+    });
+    const invalidate = useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: ["pick", "queue"] });
+        queryClient.invalidateQueries({ queryKey: ["pick", "locks"] });
+        queryClient.invalidateQueries({ queryKey: ["pick", "countryCounts"] });
+        queryClient.invalidateQueries({ queryKey: ["pick", "dashboard"] });
+    }, [queryClient]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const channel = pickDb
+            .channel(`pick-queue-${stationId ?? "all"}`)
+            .on("postgres_changes", { event: "*", schema: "public", table: "pick_queue" }, invalidate)
+            .on("postgres_changes", { event: "*", schema: "public", table: "pick_queue_locks" }, invalidate)
+            .subscribe();
+        return () => {
+            pickDb.removeChannel(channel);
+        };
+    }, [enabled, stationId, invalidate]);
+    const lockedIds = useMemo(() => new Set(safeArray(locksQuery.data).map((l) => l.queue_item_id)), [locksQuery.data]);
+    return {
+        items: safeArray(queueQuery.data?.items),
+        total: queueQuery.data?.total ?? 0,
+        loading: queueQuery.isLoading,
+        error: queueQuery.error instanceof Error ? queueQuery.error.message : null,
+        lockedIds,
+        refresh: invalidate,
+    };
+}
+/** Houdt bij dat dit scherm online is en ruimt verlopen locks op. */
+export function usePickHeartbeat(stationId, screenId, sessionId) {
+    const timer = useRef(null);
+    const [online, setOnline] = useState(true);
+    useEffect(() => {
+        if (!stationId || !sessionId)
+            return;
+        const beat = async () => {
+            try {
+                await pickApi.heartbeat({ stationId, screenId: screenId ?? null, sessionId });
+                await pickDb.rpc("pick_release_expired_locks");
+                setOnline(true);
+            }
+            catch {
+                setOnline(false);
+            }
+        };
+        beat();
+        timer.current = setInterval(beat, 10000);
+        return () => {
+            if (timer.current)
+                clearInterval(timer.current);
+        };
+    }, [stationId, screenId, sessionId]);
+    return { online };
+}
+export function usePickCountryCounts(screenId) {
+    return useQuery({
+        queryKey: ["pick", "countryCounts", screenId ?? "-"],
+        enabled: !!screenId,
+        queryFn: () => pickApi.countryCounts(screenId),
+        refetchInterval: 20000,
+    });
+}

package/dist-lib/index.d.ts

@@ -0,0 +1,20 @@
+import type { FlowModule } from "@flowselections/core";
+export * from './_core-safelist';
+export * from './components/TemplatePage';
+export * from './components/TemplateModulePage';
+export { TemplateModuleLogo } from './components/TemplateModuleLogo';
+export * from './lib/pickTypes';
+export * from './lib/pickApi';
+export * from './hooks/usePickConfig';
+export * from './hooks/usePickQueue';
+export { CountryTiles } from './components/pick/CountryTiles';
+export { QueueTable } from './components/pick/QueueTable';
+export { PickScherm } from './components/pick/PickScherm';
+export { ConfigCrud } from './components/pick/ConfigCrud';
+export { PickstationsPage } from './components/PickstationsPage';
+export { PickstationDetailPage } from './components/PickstationDetailPage';
+export { PickDashboardPage } from './components/PickDashboardPage';
+export { PickBeheerPage } from './components/PickBeheerPage';
+export { PickKioskPage } from './components/PickKioskPage';
+export declare const pickSchermenModule: FlowModule;
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D,eAAO,MAAM,kBAAkB,EAAE,UAiBhC,CAAC"}

package/dist-lib/index.js

@@ -0,0 +1,53 @@
+// ============================================================================
+// src/index.ts — MODULE CONTRACT
+// ============================================================================
+// This is the most important file in your module.
+// The shell repo reads this file to know:
+//   - What nav item to show in the sidebar
+//   - What settings cards to add to the settings page
+//   - Your module's identity (id, name, version)
+//
+// WHAT TO DO:
+//   1. Replace all PLACEHOLDER values below with your module's real values
+//   2. Import your real settings card components (if any)
+//   3. Add your nav item — use `children` if you need a dropdown
+//   4. Done! You don't need to touch any other file for registration.
+// ============================================================================
+import { Boxes, LayoutDashboard, Settings2, Warehouse } from "lucide-react";
+export * from './_core-safelist';
+export * from './components/TemplatePage';
+export * from './components/TemplateModulePage';
+export { TemplateModuleLogo } from './components/TemplateModuleLogo';
+export * from './lib/pickTypes';
+export * from './lib/pickApi';
+export * from './hooks/usePickConfig';
+export * from './hooks/usePickQueue';
+export { CountryTiles } from './components/pick/CountryTiles';
+export { QueueTable } from './components/pick/QueueTable';
+export { PickScherm } from './components/pick/PickScherm';
+export { ConfigCrud } from './components/pick/ConfigCrud';
+export { PickstationsPage } from './components/PickstationsPage';
+export { PickstationDetailPage } from './components/PickstationDetailPage';
+export { PickDashboardPage } from './components/PickDashboardPage';
+export { PickBeheerPage } from './components/PickBeheerPage';
+export { PickKioskPage } from './components/PickKioskPage';
+// Import your settings cards here (delete if you have none)
+// import { MySettingsCard } from "./components/settings/MySettingsCard";
+// ⚠️ HERNOEM naar een unieke naam, bijv. floridayVerkoopModule
+// De naam 'myModule' veroorzaakt een duplicate identifier bij meerdere modules in één shell.
+export const pickSchermenModule = {
+    id: "pick-schermen",
+    name: "Pickstations",
+    version: "1.0.0",
+    nav: {
+        label: "Pickstations",
+        href: "/pickstations",
+        icon: Warehouse,
+        children: [
+            { label: "Pickstations", href: "/pickstations", icon: Boxes },
+            { label: "Live dashboard", href: "/pickstations/dashboard", icon: LayoutDashboard },
+            { label: "Beheer", href: "/pickstations/beheer", icon: Settings2 },
+        ],
+    },
+    settingsCards: [],
+};

package/dist-lib/integrations/supabase/auth-attacher.d.ts

@@ -0,0 +1,2 @@
+export declare const attachSupabaseAuth: import("@tanstack/start-client-core").FunctionMiddlewareAfterClient<{}, unknown, undefined, undefined, undefined>;
+//# sourceMappingURL=auth-attacher.d.ts.map

package/dist-lib/integrations/supabase/auth-attacher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-attacher.d.ts","sourceRoot":"","sources":["../../../src/integrations/supabase/auth-attacher.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,mHAQ9B,CAAA"}

package/dist-lib/integrations/supabase/auth-attacher.js

@@ -0,0 +1,12 @@
+// This file is automatically generated. Do not edit it directly.
+import { createMiddleware } from '@tanstack/react-start';
+import { supabase } from './client';
+// Must be registered as a global `functionMiddleware` in `src/start.ts`; otherwise
+// the browser never attaches the bearer token to serverFn RPCs.
+export const attachSupabaseAuth = createMiddleware({ type: 'function' }).client(async ({ next }) => {
+    const { data } = await supabase.auth.getSession();
+    const token = data.session?.access_token;
+    return next({
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+    });
+});