@flowselections/floriday-voorraad 1.0.149 → 1.0.152

package/dist-lib/components/voorraad/TelmomentButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ClipboardCheck } from "lucide-react";
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, toast, } from "@flowselections/core";
 import { supabase } from "../../integrations/supabase/client.js";
@@ -12,8 +12,10 @@ function lokaleInvoer(d) {
  * Telmoment vastleggen: orders vóór de teldag en orders die vóór het telmoment vertrokken
  * zijn tellen niet mee; orders van de teldag die al weg zijn vink je aan.
  */
-export function TelmomentButton({ onSaved }) {
-    const [open, setOpen] = useState(false);
+export function TelmomentButton({ onSaved, open: openVan, onOpenChange, verbergKnop }) {
+    const [openEigen, setOpenEigen] = useState(false);
+    const open = openVan ?? openEigen;
+    const setOpen = (o) => { setOpenEigen(o); onOpenChange?.(o); };
     const [moment, setMoment] = useState(() => lokaleInvoer(new Date()));
     const [regels, setRegels] = useState(null);
     const [alWeg, setAlWeg] = useState(new Set());
@@ -22,7 +24,8 @@ export function TelmomentButton({ onSaved }) {
         setRegels(null);
         const { data, error } = await supabase.rpc("voorraad_telmoment_lijst", { p_telmoment: new Date(m).toISOString(), p_keys: null });
         if (error) {
-            toast.error(error.message);
+            console.warn(error);
+            toast.error("De lijst kon niet geladen worden. Probeer opnieuw.");
             setRegels([]);
             return;
         }
@@ -42,14 +45,18 @@ export function TelmomentButton({ onSaved }) {
             onSaved?.();
         }
         catch (e) {
-            toast.error(e.message);
+            console.warn(e);
+            toast.error("Telmoment opslaan lukt niet. Probeer opnieuw.");
         }
         finally {
             setBusy(false);
         }
     };
+    // Van buitenaf geopend: lijst laden.
+    useEffect(() => { if (openVan)
+        void laden(); }, [openVan]); // eslint-disable-line react-hooks/exhaustive-deps
     const groepen = ["teldag_open", "vertrokken", "voor_teldag"];
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => { setOpen(true); void laden(); }, children: [_jsx(ClipboardCheck, { className: "mr-2 h-4 w-4" }), "Telmoment"] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Telmoment vastleggen" }) }), _jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground space-y-1", children: [_jsx("span", { className: "block", children: "Moment van tellen" }), _jsx(Input, { type: "datetime-local", className: "h-9 w-56", value: moment, onChange: (e) => setMoment(e.target.value) })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void laden(), children: "Ververs lijst" })] }), _jsxs("div", { className: "max-h-[50vh] overflow-y-auto space-y-4 text-sm", children: [regels === null && _jsx("p", { className: "text-muted-foreground", children: "Laden\u2026" }), regels !== null && regels.length === 0 && (_jsx("p", { className: "text-muted-foreground", children: "Geen openstaande orderregels tot en met de teldag." })), regels !== null && groepen.map((g) => {
+    return (_jsxs(_Fragment, { children: [!verbergKnop && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => { setOpen(true); void laden(); }, children: [_jsx(ClipboardCheck, { className: "mr-2 h-4 w-4" }), "Telmoment"] })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Telmoment vastleggen" }) }), _jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground space-y-1", children: [_jsx("span", { className: "block", children: "Moment van tellen" }), _jsx(Input, { type: "datetime-local", className: "h-9 w-56", value: moment, onChange: (e) => setMoment(e.target.value) })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void laden(), children: "Ververs lijst" })] }), _jsxs("div", { className: "max-h-[50vh] overflow-y-auto space-y-4 text-sm", children: [regels === null && _jsx("p", { className: "text-muted-foreground", children: "Laden\u2026" }), regels !== null && regels.length === 0 && (_jsx("p", { className: "text-muted-foreground", children: "Geen openstaande orderregels tot en met de teldag." })), regels !== null && groepen.map((g) => {
                                     const lijst = regels.filter((r) => r.categorie === g);
                                     if (lijst.length === 0)
                                         return null;

package/dist-lib/components/voorraad/ValidationOverviewTable.js

@@ -33,13 +33,14 @@ export function ValidationOverviewTable({ items, connectionId, onChanged, }) {
             else {
                 const total = (res.linked ?? 0) + (res.repaired ?? 0);
                 toast.success(total > 0
-                    ? `${total} product(en) opnieuw gekoppeld aan Floriday`
+                    ? `${total} artikel(en) opnieuw gekoppeld aan Floriday`
                     : "Geen extra koppelingen gevonden");
             }
             await onChanged();
         }
         catch (e) {
-            toast.error(e?.message ?? "Automatisch koppelen mislukt");
+            console.warn(e);
+            toast.error("Automatisch koppelen is niet gelukt. Probeer het later opnieuw.");
         }
         finally {
             setRelinking(false);
@@ -74,25 +75,26 @@ export function ValidationOverviewTable({ items, connectionId, onChanged, }) {
                 floridayLinkError: null,
                 lastFloridaySyncAt: new Date().toISOString(),
             });
-            toast.success("Product staat nu actief op Floriday");
+            toast.success("Artikel staat nu op Floriday");
             await onChanged();
         }
         catch (e) {
-            toast.error(e?.message ?? "Activeren op Floriday mislukt");
+            console.warn(e);
+            toast.error("Op Floriday zetten is niet gelukt. Probeer het later opnieuw.");
             await onChanged();
         }
     };
     const relinkButton = (_jsxs(Button, { size: "sm", variant: "outline", onClick: runRelink, disabled: relinking, children: [relinking ? (_jsx(Loader2, { className: "h-3 w-3 mr-1 animate-spin" })) : (_jsx(Link2, { className: "h-3 w-3 mr-1" })), "Nu opnieuw koppelen"] }));
     if (rows.length === 0) {
-        return (_jsxs("div", { className: "p-8 text-center text-sm text-muted-foreground space-y-3", children: [_jsx("div", { children: "Alle producten staan actief op Floriday." }), _jsx("div", { className: "flex justify-center", children: relinkButton })] }));
+        return (_jsxs("div", { className: "p-8 text-center text-sm text-muted-foreground space-y-3", children: [_jsx("div", { children: "Alle artikelen staan op Floriday." }), _jsx("div", { className: "flex justify-center", children: relinkButton })] }));
     }
-    return (_jsxs("div", { className: "overflow-x-auto", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 p-3 border-b", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Koppelen gebeurt automatisch zodra Floriday-artikelen binnenkomen en elk uur op de achtergrond." }), relinkButton] }), _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left", children: _jsxs("tr", { children: [_jsx("th", { className: "p-3", children: "Artikelcode" }), _jsx("th", { className: "p-3", children: "Artikelnaam" }), _jsx("th", { className: "p-3", children: "Floriday-status" }), _jsx("th", { className: "p-3", children: "Reden" }), _jsx("th", { className: "p-3", children: "Ontbrekende Floriday-velden" }), _jsx("th", { className: "p-3 text-right", children: "Acties" })] }) }), _jsx("tbody", { children: rows.map((it) => {
+    return (_jsxs("div", { className: "overflow-x-auto", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 p-3 border-b", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Koppelen gebeurt automatisch zodra Floriday-artikelen binnenkomen en elk uur op de achtergrond." }), relinkButton] }), _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs font-medium text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "p-3", children: "Artikelcode" }), _jsx("th", { className: "p-3", children: "Artikelnaam" }), _jsx("th", { className: "p-3", children: "Floriday-status" }), _jsx("th", { className: "p-3", children: "Reden" }), _jsx("th", { className: "p-3", children: "Ontbrekende Floriday-velden" }), _jsx("th", { className: "p-3 text-right", children: "Acties" })] }) }), _jsx("tbody", { children: rows.map((it) => {
                             const payload = it.raw?.custom_fields?.floriday_payload ??
                                 it.raw?.floriday_payload ??
                                 it.raw?.data ??
                                 {};
                             const v = validateDraftForPublish(conceptMetArtikel(payload, artikelVan(it)));
-                            return (_jsxs("tr", { className: "border-t align-top", children: [_jsx("td", { className: "p-3 font-mono text-xs", children: it.articleNumber || "—" }), _jsx("td", { className: "p-3", children: it.name }), _jsx("td", { className: "p-3", children: _jsx(Badge, { className: "bg-slate-500/15 text-slate-700 border-slate-500/30", children: "Niet actief op Floriday" }) }), _jsx("td", { className: "p-3 text-xs text-muted-foreground max-w-[260px]", children: reasonFor(it) }), _jsx("td", { className: "p-3", children: v.missing.length === 0 ? (_jsx("span", { className: "text-xs text-emerald-700", children: "Klaar om te activeren" })) : (_jsxs("span", { className: "text-xs text-muted-foreground", title: v.missing.join(", "), children: ["Nog nodig: ", v.missing.slice(0, 3).join(", ").toLowerCase(), v.missing.length > 3 ? ` en nog ${v.missing.length - 3} andere` : "", "."] })) }), _jsx("td", { className: "p-3", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            return (_jsxs("tr", { className: "border-t align-top", children: [_jsx("td", { className: "p-3 text-xs tabular-nums", children: it.articleNumber || "—" }), _jsx("td", { className: "p-3", children: it.name }), _jsx("td", { className: "p-3", children: _jsx(Badge, { variant: "outline", className: "rounded-full border-border bg-muted text-muted-foreground", children: "Niet actief op Floriday" }) }), _jsx("td", { className: "p-3 text-xs text-muted-foreground max-w-[260px]", children: reasonFor(it) }), _jsx("td", { className: "p-3", children: v.missing.length === 0 ? (_jsx("span", { className: "text-xs text-success-text", children: "Klaar om te activeren" })) : (_jsxs("span", { className: "text-xs text-muted-foreground", title: v.missing.join(", "), children: ["Nog nodig: ", v.missing.slice(0, 3).join(", ").toLowerCase(), v.missing.length > 3 ? ` en nog ${v.missing.length - 3} andere` : "", "."] })) }), _jsx("td", { className: "p-3", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                                         const target = it.productId ?? it.localId ?? it.id;
                                                         navigate({ to: "/voorraad/$id", params: { id: target } });
                                                     }, children: [_jsx(Pencil, { className: "h-3 w-3 mr-1" }), "Bewerken"] }), _jsxs(Button, { size: "sm", onClick: () => publish(it), disabled: !v.ok, children: [_jsx(Send, { className: "h-3 w-3 mr-1" }), "Activeer op Floriday"] })] }) })] }, it.id));

package/dist-lib/components/voorraad/ValidationPage.d.ts

@@ -1,2 +1,3 @@
+/** Floriday-controle: artikelen die nog niet op Floriday staan, per pagina van de server (geen limiet van 1000). */
 export declare function ValidationPage(): import("react").JSX.Element;
 //# sourceMappingURL=ValidationPage.d.ts.map

package/dist-lib/components/voorraad/ValidationPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ValidationPage.tsx"],"names":[],"mappings":"AAQA,wBAAgB,cAAc,gCAkC7B"}
+{"version":3,"file":"ValidationPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ValidationPage.tsx"],"names":[],"mappings":"AAiBA,oHAAoH;AACpH,wBAAgB,cAAc,gCA0C7B"}

package/dist-lib/components/voorraad/ValidationPage.js

@@ -1,13 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
 import { Link } from "@tanstack/react-router";
-import { Card } from "@flowselections/core";
+import { Card, Skeleton } from "@flowselections/core";
 import { ArrowLeft } from "lucide-react";
 import { useFloridayConnection } from "../../hooks/useFloridayConnection.js";
-import { useVoorraadData } from "../../hooks/useVoorraadData.js";
+import { supabase } from "../../integrations/supabase/client.js";
+import { productToTradeItem } from "../../hooks/useLocalTradeItems.js";
+import { dbFoutTekst } from "../../lib/db-error-message.js";
 import { ValidationOverviewTable } from "./ValidationOverviewTable.js";
-import { KoppelingStatusPanel } from "./KoppelingStatusPanel.js";
+import { VoorraadPagination } from "./VoorraadPagination.js";
+import { PageHeader } from "../fs-ui/PageHeader.js";
+import { UpdatedAt } from "../fs-ui/UpdatedAt.js";
+import { InlineAlert } from "../fs-ui/InlineAlert.js";
+const GROOTTE = 50;
+/** Floriday-controle: artikelen die nog niet op Floriday staan, per pagina van de server (geen limiet van 1000). */
 export function ValidationPage() {
     const { activeId } = useFloridayConnection();
-    const { items, loading, reload } = useVoorraadData(activeId);
-    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs(Link, { to: "/voorraad", className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Terug naar voorraad"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Floriday-koppeling \u2014 validatie" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Alle artikelen die nog niet succesvol met Floriday gekoppeld zijn." })] }), _jsx(KoppelingStatusPanel, { connectionId: activeId, onChanged: reload }), _jsx(Card, { className: "overflow-hidden", children: loading ? (_jsx("div", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" })) : (_jsx(ValidationOverviewTable, { items: items, connectionId: activeId, onChanged: reload })) })] }));
+    const [pagina, setPagina] = useState(1);
+    const [items, setItems] = useState([]);
+    const [totaal, setTotaal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [fout, setFout] = useState(null);
+    const [bijgewerkt, setBijgewerkt] = useState(null);
+    const reload = useCallback(async () => {
+        const { data, error } = await supabase.rpc("voorraad_validatie_pagina", { p_pagina: pagina, p_grootte: GROOTTE });
+        if (error) {
+            setFout(dbFoutTekst(error));
+            setLoading(false);
+            return;
+        }
+        const r = data;
+        setItems((r.rijen ?? []).map(productToTradeItem));
+        setTotaal(Number(r.totaal ?? 0));
+        setFout(null);
+        setLoading(false);
+        setBijgewerkt(new Date());
+    }, [pagina]);
+    useEffect(() => { void reload(); }, [reload]);
+    return (_jsxs("main", { className: "flex flex-col gap-4 p-4 pb-24 sm:p-6 sm:pb-24", children: [_jsx(PageHeader, { crumb: _jsxs(Link, { to: "/voorraad", className: "inline-flex items-center gap-1 hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), " Voorraad"] }), title: "Floriday-controle", updated: _jsx(UpdatedAt, { at: bijgewerkt }), meta: _jsxs("span", { children: ["Artikelen die nog niet op Floriday staan", loading ? "" : ` · ${totaal.toLocaleString("nl-NL")}`] }) }), fout && _jsx(InlineAlert, { tone: "fout", children: fout }), _jsx(Card, { className: "overflow-hidden rounded-xl shadow-sm", children: loading ? (_jsx("div", { className: "space-y-2 p-4", "aria-busy": "true", children: Array.from({ length: 8 }).map((_, i) => _jsx(Skeleton, { className: "h-10 w-full rounded-lg" }, i)) })) : (_jsx(ValidationOverviewTable, { items: items, connectionId: activeId, onChanged: reload })) }), totaal > GROOTTE && (_jsx(VoorraadPagination, { page: pagina, pageSize: GROOTTE, pageSizeOptions: [GROOTTE], total: totaal, onPageChange: setPagina, onPageSizeChange: () => undefined }))] }));
 }

package/dist-lib/components/voorraad/VoorraadBeheerCard.d.ts

@@ -1,3 +1,6 @@
-/** Inklapbaar blok "Beheer": alleen zichtbaar voor beheerders, alleen informatie plus één knop. */
+/**
+ * "Voorraad — Controle Floriday-artikelen": alleen voor admin en superadmin
+ * (`voorraad_is_beheerder` in de database). Inklapbaar; ververst na de knop en zolang een controle loopt.
+ */
 export declare function VoorraadBeheerCard(): import("react").JSX.Element | null;
 //# sourceMappingURL=VoorraadBeheerCard.d.ts.map

package/dist-lib/components/voorraad/VoorraadBeheerCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoorraadBeheerCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadBeheerCard.tsx"],"names":[],"mappings":"AAuBA,mGAAmG;AACnG,wBAAgB,kBAAkB,uCAwDjC"}
+{"version":3,"file":"VoorraadBeheerCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadBeheerCard.tsx"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,wBAAgB,kBAAkB,uCAoFjC"}

package/dist-lib/components/voorraad/VoorraadBeheerCard.js

@@ -1,28 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
-import { Button, Card, CardContent, CardHeader, CardTitle, toast } from "@flowselections/core";
+import { lazy, Suspense, useCallback, useEffect, useState } from "react";
+import { Button, Card, Skeleton, toast } from "@flowselections/core";
+import { ChevronDown, RefreshCw } from "lucide-react";
 import { supabase } from "../../integrations/supabase/client.js";
 import { dbFoutTekst } from "../../lib/db-error-message.js";
 import { toonVersieBeheer } from "../../lib/floriday-versie-ronde.js";
 import { floridayVersiesControleren } from "../../lib/floriday-versie-ronde.functions.js";
+import { useFloridayConnection } from "../../hooks/useFloridayConnection.js";
+// Zware beheeronderdelen laden pas als je het blok openklapt.
+const KoppelingStatusPanel = lazy(() => import("./KoppelingStatusPanel.js").then((m) => ({ default: m.KoppelingStatusPanel })));
+const StockPushMonitor = lazy(() => import("./StockPushMonitor.js").then((m) => ({ default: m.StockPushMonitor })));
+const FloridayTakeoverPanel = lazy(() => import("./FloridayTakeoverPanel.js").then((m) => ({ default: m.FloridayTakeoverPanel })));
 const STATUS_TEKST = {
     geslaagd: "geslaagd",
     onvolledig: "nog niet compleet (wordt automatisch opnieuw geprobeerd)",
     mislukt: "mislukt (wordt automatisch opnieuw geprobeerd)",
 };
-/** Inklapbaar blok "Beheer": alleen zichtbaar voor beheerders, alleen informatie plus één knop. */
+/**
+ * "Voorraad — Controle Floriday-artikelen": alleen voor admin en superadmin
+ * (`voorraad_is_beheerder` in de database). Inklapbaar; ververst na de knop en zolang een controle loopt.
+ */
 export function VoorraadBeheerCard() {
     const [status, setStatus] = useState(null);
     const [bezig, setBezig] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [versie, setVersie] = useState(0);
+    const conn = useFloridayConnection();
     const laad = useCallback(async () => {
         const { data, error } = await supabase.rpc("voorraad_floriday_versieronde_status");
         if (error) {
+            console.warn("Beheerstatus voorraad niet geladen", error);
             setStatus(null);
             return;
         }
         setStatus(data);
     }, []);
     useEffect(() => { void laad(); }, [laad]);
+    // Stil verversen zolang een controle loopt.
+    useEffect(() => {
+        if (!status?.bezig)
+            return;
+        const t = setInterval(() => void laad(), 5000);
+        return () => clearInterval(t);
+    }, [status?.bezig, laad]);
     if (!toonVersieBeheer(status) || !status?.heeft_koppeling)
         return null;
     const start = async () => {
@@ -30,15 +50,16 @@ export function VoorraadBeheerCard() {
         try {
             await floridayVersiesControleren();
             toast.success("Controle gestart. Dit loopt op de achtergrond.");
-            await laad();
         }
         catch (e) {
             toast.error(dbFoutTekst(e));
         }
         finally {
             setBezig(false);
+            setVersie((v) => v + 1);
+            await laad();
         }
     };
     const l = status.laatste;
-    return (_jsx(Card, { children: _jsxs("details", { children: [_jsx("summary", { className: "cursor-pointer list-none", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Beheer" }) }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsx("p", { className: "font-medium", children: "Controle van Floriday-artikelen" }), _jsx("p", { className: "text-muted-foreground", children: "Loopt vanzelf elke nacht. Oude versies van Floriday-artikelen worden geen zichtbaar artikel." }), _jsxs("p", { children: ["Laatste controle:", " ", l ? `${new Date(l.uitgevoerd_at).toLocaleString("nl-NL")} — ${STATUS_TEKST[l.status] ?? l.status}` : "nog niet uitgevoerd", status.bezig && " · nu bezig"] }), l?.melding && l.status !== "geslaagd" && _jsx("p", { className: "text-muted-foreground", children: l.melding }), _jsxs("p", { children: ["Vervangen in Floriday: ", status.vervangen ?? 0, " \u00B7 Vervallen: ", status.vervallen ?? 0, " \u00B7 Apart gezet (geen antwoord van Floriday): ", status.onbekend ?? 0] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void start(), disabled: bezig || status.bezig, children: bezig ? "Bezig…" : "Nu opnieuw controleren" })] })] }) }));
+    return (_jsxs(Card, { className: "overflow-hidden rounded-xl shadow-sm", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, className: "flex w-full items-center justify-between gap-3 px-5 py-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsxs("div", { children: [_jsx("div", { className: "text-base font-semibold", children: "Voorraad \u2014 Controle Floriday-artikelen" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["Alleen voor beheerders \u00B7 Laatste controle ", l ? new Date(l.uitgevoerd_at).toLocaleString("nl-NL") : "nog niet uitgevoerd"] })] }), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform motion-reduce:transition-none " + (open ? "rotate-180" : ""), "aria-hidden": true })] }), open && (_jsxs("div", { className: "space-y-4 border-t border-border px-5 py-4 text-sm", children: [_jsxs("section", { className: "space-y-2", children: [_jsx("p", { className: "text-muted-foreground", children: "Loopt vanzelf elke nacht. Oude versies van Floriday-artikelen worden geen zichtbaar artikel." }), _jsxs("p", { children: ["Laatste controle:", " ", l ? `${new Date(l.uitgevoerd_at).toLocaleString("nl-NL")} — ${STATUS_TEKST[l.status] ?? "onbekend"}` : "nog niet uitgevoerd", status.bezig && " · nu bezig"] }), l?.melding && l.status !== "geslaagd" && _jsx("p", { className: "text-muted-foreground", children: l.melding }), _jsxs("p", { className: "tabular-nums", children: ["Vervangen in Floriday: ", status.vervangen ?? 0, " \u00B7 Vervallen: ", status.vervallen ?? 0, " \u00B7 Apart gezet (geen antwoord van Floriday): ", status.onbekend ?? 0] }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8", onClick: () => void start(), disabled: bezig || status.bezig, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4 " + (bezig || status.bezig ? "animate-spin motion-reduce:animate-none" : "") }), bezig ? "Bezig…" : "Nu opnieuw controleren"] })] }), _jsx(Suspense, { fallback: _jsx(Skeleton, { className: "h-32 w-full rounded-xl" }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(KoppelingStatusPanel, { connectionId: conn.activeId ?? null, onChanged: () => void laad() }), _jsx(StockPushMonitor, { connectionId: conn.activeId ?? null }), _jsx(FloridayTakeoverPanel, { connectionId: conn.activeId ?? null })] }, versie) })] }))] }));
 }

package/dist-lib/components/voorraad/VoorraadPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoorraadPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadPage.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA2CnD,wBAAgB,YAAY,gCA6M3B"}
+{"version":3,"file":"VoorraadPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadPage.tsx"],"names":[],"mappings":"AAuEA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAsDnD,wBAAgB,YAAY,gCA2N3B"}

package/dist-lib/components/voorraad/VoorraadPage.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { TwijfelKiezen } from "./artikel/TwijfelKiezen.js";
-import { Fragment, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { Link, useNavigate } from "@tanstack/react-router";
-import { Button, Card, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger, Input, } from "@flowselections/core";
-import { AlertTriangle, Columns3, Plus, Search } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@flowselections/core";
+import { AlertTriangle, Archive, ArrowDownToLine, ClipboardCheck, Columns3, Euro, HelpCircle, Layers, Link2Off, ListChecks, MoreHorizontal, Package, PackageSearch, PackageX, Plus, Send, TrendingDown, } from "lucide-react";
 import { supabase } from "../../integrations/supabase/client.js";
 import { pageRequestGuard } from "../../lib/request-guard.js";
 import { useFloridayConnection } from "../../hooks/useFloridayConnection.js";
@@ -19,11 +19,33 @@ import { OPTIONELE_KOLOMMEN, VoorraadLijstTabel } from "./lijst/VoorraadLijstTab
 import { AanpassenDialog, AfboekenDialog } from "./lijst/SnelActieDialogen.js";
 import { LijstExportKnop } from "./lijst/LijstExportKnop.js";
 import { ImporteerKnop } from "./lijst/ImporteerKnop.js";
+import { Kbd, Sneltoetsen } from "./Sneltoetsen.js";
+import { PageHeader } from "../fs-ui/PageHeader.js";
+import { UpdatedAt } from "../fs-ui/UpdatedAt.js";
+import { KpiRow } from "../fs-ui/KpiRow.js";
+import { KpiTile } from "../fs-ui/KpiTile.js";
+import { PillTabs } from "../fs-ui/PillTabs.js";
+import { Toolbar } from "../fs-ui/Toolbar.js";
+import { SearchInput } from "../fs-ui/SearchInput.js";
+import { InlineAlert } from "../fs-ui/InlineAlert.js";
+import { EmptyState } from "../fs-ui/EmptyState.js";
+import { MobilePrimaryAction } from "../fs-ui/MobilePrimaryAction.js";
+import { DataTable } from "../fs-ui/DataTable.js";
 // Bestaande export blijft (tests en andere modules).
 export { countStock } from "../../lib/count-stock.js";
 const EMPTY_TRIPS = [];
 const KOLOMMEN_KEY = "voorraad.lijst.kolommen.v2";
 const STANDAARD_KOLOMMEN = ["inkomend", "prijs"];
+const FILTER_ICON = {
+    alles: _jsx(Layers, {}),
+    onder_minimum: _jsx(TrendingDown, {}),
+    verpakking: _jsx(PackageX, {}),
+    niet_gekoppeld: _jsx(Link2Off, {}),
+    verwijderd_floriday: _jsx(Link2Off, {}),
+    prijs: _jsx(Euro, {}),
+    twijfel: _jsx(HelpCircle, {}),
+    gearchiveerd: _jsx(Archive, {}),
+};
 function useKolommen() {
     const [set, setSet] = useState(new Set(STANDAARD_KOLOMMEN));
     useEffect(() => {
@@ -68,7 +90,6 @@ export function VoorraadPage() {
     const navigate = useNavigate();
     const conn = useFloridayConnection();
     const stockConnId = useStockContextId();
-    const [zoekInvoer, setZoekInvoer] = useState("");
     const [zoek, setZoek] = useState("");
     const [filter, setFilter] = useState("alles");
     const [sorteer, setSorteer] = useState({ sort: "naam", oplopend: true });
@@ -76,34 +97,23 @@ export function VoorraadPage() {
     const [grootte, setGrootte] = useState(25);
     const [selected, setSelected] = useState(new Set());
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const [telmomentOpen, setTelmomentOpen] = useState(false);
     const [aanpassen, setAanpassen] = useState(null);
     const [afboeken, setAfboeken] = useState(null);
     const { kolommen, toggle: toggleKolom } = useKolommen();
     const guardTrips = useSyncExternalStore(pageRequestGuard.subscribe, () => pageRequestGuard.trips(), () => EMPTY_TRIPS);
-    // Zoeken met korte vertraging; nieuwe zoekopdracht of filter begint op pagina 1.
-    useEffect(() => {
-        const t = setTimeout(() => setZoek(zoekInvoer), 300);
-        return () => clearTimeout(t);
-    }, [zoekInvoer]);
+    // Nieuwe zoekopdracht, filter of sortering begint op pagina 1.
     useEffect(() => setPagina(1), [zoek, filter, sorteer, grootte]);
-    // Sneltoets N = nieuw artikel (niet tijdens typen).
-    useEffect(() => {
-        const h = (e) => {
-            const t = e.target;
-            if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable))
-                return;
-            if (e.key === "n" && !e.metaKey && !e.ctrlKey && !e.altKey)
-                navigate({ to: "/voorraad/nieuw" });
-        };
-        window.addEventListener("keydown", h);
-        return () => window.removeEventListener("keydown", h);
-    }, [navigate]);
+    const nieuw = useCallback(() => navigate({ to: "/voorraad/nieuw" }), [navigate]);
     const vraag = { zoek, filter, sort: sorteer.sort, oplopend: sorteer.oplopend, pagina, grootte };
-    const { data, loading, error, reload } = useVoorraadLijst(vraag);
+    const { data, kpi, loading, error, reload } = useVoorraadLijst(vraag);
     const heeftKoppeling = data?.heeft_koppeling ?? false;
     const filters = useMemo(() => zichtbareFilters(heeftKoppeling), [heeftKoppeling]);
     const melding = data ? meldingen(data) : [];
-    const bijgewerkt = data?.bijgewerkt ? new Date(data.bijgewerkt).toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" }) : null;
+    // Twijfelgevallen bestaan alleen bij een koppeling; tonen als er iets te kiezen is of als je er al staat.
+    const tabs = filters
+        .filter((f) => f !== "twijfel" || heeftKoppeling || (data?.tellers?.twijfel ?? 0) > 0 || filter === "twijfel")
+        .map((f) => ({ value: f, label: FILTER_LABEL[f], icon: FILTER_ICON[f], count: data?.tellers?.[f] ?? null }));
     const toggleSelect = (id) => setSelected((cur) => {
         const next = new Set(cur);
         if (next.has(id))
@@ -113,16 +123,20 @@ export function VoorraadPage() {
         return next;
     });
     const toggleAll = (ids) => setSelected((cur) => (ids.length > 0 && ids.every((id) => cur.has(id)) ? new Set() : new Set(ids)));
-    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-[12rem] flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Voorraad" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: bijgewerkt ? `Bijgewerkt ${bijgewerkt}` : "Laden…" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ImporteerKnop, { connectionId: conn.activeId ?? null, onImported: reload }), _jsx(LijstExportKnop, { vraag: { zoek, filter, sort: sorteer.sort, oplopend: sorteer.oplopend } }), _jsx(TelmomentButton, { onSaved: reload }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { to: "/voorraad/validatie", children: "Validatie" }) }), _jsx(Button, { asChild: true, size: "sm", title: "Sneltoets N", children: _jsxs(Link, { to: "/voorraad/nieuw", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuw artikel"] }) })] })] }), guardTrips.length > 0 && (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: "Deze pagina vroeg te vaak gegevens op en is daarmee gestopt. Open de pagina opnieuw." })), _jsx(StockIntegrityAlert, {}), _jsx(FloridayConnectionNotice, { status: conn.status, environment: conn.selectedEnvironment, error: conn.error }), error && (_jsxs("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 text-destructive p-3 text-sm", children: ["Voorraad laden mislukt: ", error] })), melding.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), melding.map((m) => m.filter ? (_jsx("button", { type: "button", className: "underline-offset-2 hover:underline", onClick: () => setFilter(m.filter), children: m.tekst }, m.tekst)) : (_jsx("span", { children: m.tekst }, m.tekst)))] })), _jsxs(Card, { className: "overflow-hidden p-0", children: [_jsx("div", { role: "tablist", "aria-label": "Filter", className: "flex flex-wrap items-center gap-1 border-b px-2", children: filters.map((f) => {
-                            const actief = filter === f;
-                            const n = data?.tellers?.[f];
-                            return (_jsxs("button", { role: "tab", "aria-selected": actief, type: "button", onClick: () => setFilter(f), className: `relative px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors ${actief ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`, children: [FILTER_LABEL[f], _jsx("span", { className: `ml-2 text-xs tabular-nums ${actief ? "text-primary" : "text-muted-foreground/70"}`, children: n == null ? "…" : aantal(n) }), actief && _jsx("span", { className: "absolute left-2 right-2 -bottom-px h-0.5 rounded-full bg-primary" })] }, f));
-                        }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b p-3", children: [_jsxs("div", { className: "relative flex-1 min-w-[220px] max-w-md", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op naam, artikelnummer of barcode\u2026", className: "pl-9", value: zoekInvoer, onChange: (e) => setZoekInvoer(e.target.value), "aria-label": "Zoeken" })] }), _jsx("div", { className: "ml-auto", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Columns3, { className: "mr-2 h-4 w-4" }), "Kolommen"] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: "Kolommen kiezen" }), OPTIONELE_KOLOMMEN.map((c) => (_jsx(DropdownMenuCheckboxItem, { checked: kolommen.has(c.key), onCheckedChange: () => toggleKolom(c.key), children: c.label }, c.key)))] })] }) })] }), selected.size > 0 && filter !== "twijfel" && (_jsxs("div", { className: "flex flex-wrap items-center gap-3 border-b bg-primary/5 px-4 py-2 text-sm", children: [_jsxs("span", { className: "font-medium", children: [selected.size, " gekozen"] }), _jsx(Button, { size: "sm", onClick: () => setDrawerOpen(true), children: "Voorraadsturing instellen" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setSelected(new Set()), children: "Keuze wissen" })] })), _jsx("div", { className: "overflow-x-auto", children: filter === "twijfel" ? (_jsx(TwijfelTabel, { rijen: data?.twijfel_rijen ?? [], loading: loading, onGekozen: () => void reload() })) : (_jsx(VoorraadLijstTabel, { rijen: data?.rijen ?? [], loading: loading, sort: sorteer.sort, oplopend: sorteer.oplopend, onSort: (k) => setSorteer((cur) => volgendeSortering(cur, k)), kolommen: kolommen, selected: selected, onToggleSelect: toggleSelect, onToggleAll: toggleAll, onAanpassen: setAanpassen, onAfboeken: setAfboeken, heeftKoppeling: heeftKoppeling })) }), _jsx(VoorraadPagination, { total: data?.totaal ?? 0, page: pagina, pageSize: grootte, onPageChange: setPagina, onPageSizeChange: setGrootte })] }), _jsx(AanpassenDialog, { rij: aanpassen, onClose: () => setAanpassen(null), onDone: reload }), _jsx(AfboekenDialog, { rij: afboeken, connectionId: stockConnId, onClose: () => setAfboeken(null), onDone: reload }), _jsx(InventorySettingsDrawer, { open: drawerOpen, onOpenChange: setDrawerOpen, connectionId: conn.activeId ?? null, productIds: [...selected], onSaved: reload })] }));
+    const selectieBalk = selected.size > 0 && filter !== "twijfel";
+    const kpiLaden = kpi === null;
+    const leeg = zoek || filter !== "alles" ? (_jsx(EmptyState, { icon: _jsx(PackageSearch, { className: "h-6 w-6" }), title: "Niets gevonden", text: zoek ? `Geen artikelen voor “${zoek}”${filter !== "alles" ? ` in ${FILTER_LABEL[filter].toLowerCase()}` : ""}.` : "Geen artikelen in deze weergave.", action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => { setZoek(""); setFilter("alles"); }, children: "Filters wissen" }) })) : (_jsx(EmptyState, { icon: _jsx(Package, { className: "h-6 w-6" }), title: "Nog geen artikelen", text: "Maak je eerste artikel aan of importeer een lijst.", action: _jsxs(Button, { size: "sm", onClick: nieuw, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuw artikel"] }) }));
+    return (_jsxs("main", { className: "flex flex-col gap-4 p-4 pb-24 sm:p-6 sm:pb-24", children: [_jsx(Sneltoetsen, { onNieuw: nieuw }), _jsx(PageHeader, { title: "Voorraad", updated: _jsx(UpdatedAt, { at: data?.bijgewerkt ?? null }), actions: _jsxs(_Fragment, { children: [_jsx(ImporteerKnop, { connectionId: conn.activeId ?? null, onImported: reload }), _jsx(LijstExportKnop, { vraag: { zoek, filter, sort: sorteer.sort, oplopend: sorteer.oplopend } }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9", "aria-label": "Meer acties", children: [_jsx(MoreHorizontal, { className: "h-4 w-4 sm:mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Meer" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuItem, { onSelect: () => setTelmomentOpen(true), children: [_jsx(ClipboardCheck, { className: "mr-2 h-4 w-4" }), "Telmoment vastleggen"] }), heeftKoppeling && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => navigate({ to: "/voorraad/validatie" }), children: [_jsx(ListChecks, { className: "mr-2 h-4 w-4" }), "Controle koppeling"] }), _jsxs(DropdownMenuItem, { onSelect: () => navigate({ to: "/voorraad/publicaties" }), children: [_jsx(Send, { className: "mr-2 h-4 w-4" }), "Verzonden naar Floriday"] })] }))] })] }), _jsxs(Button, { size: "sm", className: "hidden h-9 md:inline-flex", onClick: nieuw, title: "Sneltoets N", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuw artikel", _jsx(Kbd, { children: "N" })] })] }) }), _jsx(TelmomentButton, { verbergKnop: true, open: telmomentOpen, onOpenChange: setTelmomentOpen, onSaved: reload }), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Artikelen", icon: _jsx(Package, {}), loading: kpiLaden, value: aantal(kpi?.artikelen ?? 0), sub: "Actief, zonder gearchiveerd", onClick: () => setFilter("alles"), active: filter === "alles" }), _jsx(KpiTile, { title: "Onder minimum", icon: _jsx(TrendingDown, {}), tone: (kpi?.onder_minimum ?? 0) > 0 ? "warning" : "default", loading: kpiLaden, value: aantal(kpi?.onder_minimum ?? 0), sub: (kpi?.onder_minimum ?? 0) > 0 ? _jsx("span", { className: "text-destructive", children: "Bijbestellen of bijmaken" }) : "Alles boven het minimum", onClick: () => setFilter("onder_minimum"), active: filter === "onder_minimum" }), _jsx(KpiTile, { title: "Vrij beschikbaar", icon: _jsx(Layers, {}), loading: kpiLaden, value: aantal(kpi?.vrij ?? 0), sub: "Stuks, losse artikelen" }), _jsx(KpiTile, { title: "Inkomend", icon: _jsx(ArrowDownToLine, {}), loading: kpiLaden, value: aantal(kpi?.inkomend ?? 0), sub: "Stuks verwacht" })] }), guardTrips.length > 0 && (_jsx(InlineAlert, { tone: "fout", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => window.location.reload(), children: "Opnieuw laden" }), children: "De pagina is gestopt met laden. Laad de pagina opnieuw." })), _jsx(StockIntegrityAlert, {}), _jsx(FloridayConnectionNotice, { status: conn.status, environment: conn.selectedEnvironment, error: conn.error }), error && (_jsx(InlineAlert, { tone: "fout", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void reload(), children: "Opnieuw proberen" }), children: "De voorraad laden lukt niet. Probeer opnieuw." })), melding.length > 0 && (_jsx(InlineAlert, { tone: "let_op", icon: _jsx(AlertTriangle, {}), children: _jsx("span", { className: "flex flex-wrap gap-x-4 gap-y-1", children: melding.map((m) => m.filter ? (_jsx("button", { type: "button", className: "underline-offset-2 hover:underline", onClick: () => setFilter(m.filter), children: m.tekst }, m.tekst)) : (_jsx("span", { children: m.tekst }, m.tekst))) }) })), _jsx(PillTabs, { tabs: tabs, value: filter, onChange: setFilter, label: "Filter" }), _jsx(Toolbar, { right: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9", "aria-label": "Kolommen kiezen", children: [_jsx(Columns3, { className: "h-4 w-4 sm:mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Kolommen" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: "Kolommen kiezen" }), OPTIONELE_KOLOMMEN.map((c) => (_jsx(DropdownMenuCheckboxItem, { checked: kolommen.has(c.key), onCheckedChange: () => toggleKolom(c.key), children: c.label }, c.key)))] })] }), children: _jsx(SearchInput, { value: zoek, onChange: setZoek, placeholder: "Zoek op naam, artikelnummer of barcode\u2026" }) }), selectieBalk && (_jsxs("div", { className: "sticky top-2 z-20 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-4 py-2 text-sm shadow-lg", children: [_jsxs("span", { className: "font-medium tabular-nums", children: [selected.size, " gekozen"] }), _jsx(Button, { size: "sm", className: "h-8", onClick: () => setDrawerOpen(true), children: "Voorraadsturing instellen" }), _jsx(Button, { size: "sm", variant: "ghost", className: "h-8", onClick: () => setSelected(new Set()), children: "Keuze wissen" })] })), filter === "twijfel" ? (_jsx(TwijfelTabel, { rijen: data?.twijfel_rijen ?? [], loading: loading, onGekozen: () => void reload() })) : (_jsx(VoorraadLijstTabel, { rijen: data?.rijen ?? [], loading: loading, sort: sorteer.sort, oplopend: sorteer.oplopend, onSort: (k) => setSorteer((cur) => volgendeSortering(cur, k)), kolommen: kolommen, selected: selected, onToggleSelect: toggleSelect, onToggleAll: toggleAll, onAanpassen: setAanpassen, onAfboeken: setAfboeken, heeftKoppeling: heeftKoppeling, leeg: leeg })), _jsx(VoorraadPagination, { total: data?.totaal ?? 0, page: pagina, pageSize: grootte, onPageChange: setPagina, onPageSizeChange: setGrootte }), _jsx(AanpassenDialog, { rij: aanpassen, onClose: () => setAanpassen(null), onDone: reload }), _jsx(AfboekenDialog, { rij: afboeken, connectionId: stockConnId, onClose: () => setAfboeken(null), onDone: reload }), _jsx(InventorySettingsDrawer, { open: drawerOpen, onOpenChange: setDrawerOpen, connectionId: conn.activeId ?? null, productIds: [...selected], onSaved: reload }), _jsx(MobilePrimaryAction, { onClick: nieuw, hidden: selectieBalk, icon: _jsx(Plus, {}), children: "Nieuw artikel" })] }));
 }
 function TwijfelTabel({ rijen, loading, onGekozen }) {
     const [open, setOpen] = useState(null);
-    if (!loading && rijen.length === 0) {
-        return _jsx("p", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Geen twijfelgevallen." });
-    }
-    return (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "border-b bg-muted/40 text-xs text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left font-medium", children: "Floriday-artikel" }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: "Reden" }), _jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Mogelijke artikelen" }), _jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Actie" })] }) }), _jsx("tbody", { children: rijen.map((t) => (_jsxs(Fragment, { children: [_jsxs("tr", { className: "border-b", children: [_jsx("td", { className: "px-3 py-2 font-medium", children: t.naam ?? "(naamloos)" }), _jsx("td", { className: "px-3 py-2 text-muted-foreground", children: t.reden ?? "Meerdere mogelijke artikelen; niets aangemaakt" }), _jsx("td", { className: "px-3 py-2 text-right tabular-nums", children: t.kandidaten }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsx(Button, { size: "sm", variant: "outline", onClick: () => setOpen(open === t.floriday_id ? null : t.floriday_id), children: "Zelf kiezen" }) })] }), open === t.floriday_id && (_jsx("tr", { className: "border-b", children: _jsx("td", { colSpan: 4, className: "px-3 py-2", children: _jsx(TwijfelKiezen, { floridayId: t.floriday_id, onGekozen: () => { setOpen(null); onGekozen?.(); } }) }) }))] }, t.floriday_id))) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(DataTable, { rows: rijen, getId: (t) => t.floriday_id, loading: loading, keyboard: false, empty: _jsx(EmptyState, { icon: _jsx(HelpCircle, { className: "h-6 w-6" }), title: "Geen twijfelgevallen", text: "Alle artikelen uit Floriday zijn aan een eigen artikel gekoppeld." }), columns: [
+                    { key: "naam", header: "Artikel in Floriday", width: "36%", render: (t) => _jsx("span", { className: "font-medium", children: t.naam ?? "(naamloos)" }) },
+                    { key: "reden", header: "Reden", width: "36%", render: (t) => _jsx("span", { className: "text-muted-foreground", children: t.reden ?? "Meerdere mogelijke artikelen; niets aangemaakt" }) },
+                    { key: "kandidaten", header: "Mogelijke artikelen", width: "14%", render: (t) => _jsx("span", { className: "tabular-nums", children: t.kandidaten }) },
+                    {
+                        key: "actie", header: "Actie", width: "14%",
+                        render: (t) => (_jsx(Button, { size: "sm", variant: open === t.floriday_id ? "default" : "outline", className: "h-8", onClick: () => setOpen(open === t.floriday_id ? null : t.floriday_id), children: "Zelf kiezen" })),
+                    },
+                ], mobileCard: (t) => (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: t.naam ?? "(naamloos)" }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [t.kandidaten, " mogelijke artikelen"] })] }), _jsx(Button, { size: "sm", variant: "outline", className: "h-10", onClick: (e) => { e.stopPropagation(); setOpen(open === t.floriday_id ? null : t.floriday_id); }, children: "Zelf kiezen" })] })) }), open && (_jsx("div", { className: "rounded-xl border border-border bg-card p-4 shadow-sm", children: _jsx(TwijfelKiezen, { floridayId: open, onGekozen: () => { setOpen(null); onGekozen?.(); } }) }))] }));
 }

package/dist-lib/components/voorraad/VoorraadSturingCard.js

@@ -41,7 +41,7 @@ export function VoorraadSturingCard() {
     };
     const opties = [
         { waarde: "lokaal", titel: "Lokaal", uitleg: "Je eigen voorraad leidt; Floriday wordt niet bijgewerkt tot je dat per artikel aanzet." },
-        { waarde: "floriday", titel: "Floriday volgt", uitleg: "Je eigen voorraad gaat via de gewone wachtrij naar Floriday." },
+        { waarde: "floriday", titel: "Floriday volgt", uitleg: "Je eigen voorraad gaat vanzelf naar Floriday." },
     ];
     return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Standaard voorraadsturing" }), _jsx(CardDescription, { children: "Geldt voor artikelen die automatisch uit Floriday worden aangemaakt. Bestaande artikelen veranderen niet." })] }), _jsx(CardContent, { className: "space-y-3", children: opgeslagen === null ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "radiogroup", className: "space-y-2", children: opties.map((o) => (_jsxs(Label, { className: "flex cursor-pointer items-start gap-2 rounded-md border p-3 font-normal", children: [_jsx("input", { type: "radio", name: "standaard-sturing", className: "mt-1", checked: keuze === o.waarde, onChange: () => setKeuze(o.waarde) }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: o.titel }), _jsx("span", { className: "block text-sm text-muted-foreground", children: o.uitleg })] })] }, o.waarde))) }), _jsxs(Button, { onClick: opslaan, disabled: bezig || keuze === opgeslagen, children: [bezig && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] })] })) })] }));
 }

package/dist-lib/components/voorraad/artikel/ArtikelPagina.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArtikelPagina.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/artikel/ArtikelPagina.tsx"],"names":[],"mappings":"AAwFA,wBAAgB,aAAa,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BA+bnI"}
+{"version":3,"file":"ArtikelPagina.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/artikel/ArtikelPagina.tsx"],"names":[],"mappings":"AAkGA,wBAAgB,aAAa,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAoenI"}