@flowselections/floriday-voorraad 1.0.152 → 1.0.154

package/dist-lib/components/fs-ui/Toolbar.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Werkbalk: zoekbalk links, knoppen (Filters, Kolommen) rechts; chips op de regel eronder. */
-export function Toolbar({ children, right, chips }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 basis-60", children: children }), right && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: right })] }), chips] }));
+/**
+ * Werkbalk exact naar Verkooporders: zoekveld, direct rechts "Filters", dan de
+ * actieve chips op dezelfde regel; uiterst rechts alleen "Kolommen".
+ */
+export function Toolbar({ children, filters, chips, right }) {
+    return (_jsxs("div", { className: "shrink-0 flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 sm:flex-none", children: children }), filters, chips, right && _jsx("div", { className: "ml-auto hidden items-center gap-2 md:flex", children: right })] }));
 }

package/dist-lib/components/fs-ui/UpdatedAt.d.ts

@@ -1,6 +1,10 @@
-/** "Bijgewerkt hh:mm" in 12 px grijs; "Laden…" zolang er nog geen tijd is. */
-export declare function UpdatedAt({ at, prefix }: {
+import type { ReactNode } from "react";
+/** "Bijgewerkt hh:mm" met klokicoon (12 px tekst); extra uitleg alleen in de infoballon. */
+export declare function UpdatedAt({ at, prefix, info, stale, }: {
     at: string | Date | null | undefined;
     prefix?: string;
+    /** Extra informatie, alleen zichtbaar in de infoballon. */
+    info?: ReactNode;
+    stale?: boolean;
 }): import("react").JSX.Element | null;
 //# sourceMappingURL=UpdatedAt.d.ts.map

package/dist-lib/components/fs-ui/UpdatedAt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatedAt.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/UpdatedAt.tsx"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,MAAqB,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,sCASjH"}
+{"version":3,"file":"UpdatedAt.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/UpdatedAt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4FAA4F;AAC5F,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,MAAqB,EACrB,IAAI,EACJ,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,sCAgBA"}

package/dist-lib/components/fs-ui/UpdatedAt.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** "Bijgewerkt hh:mm" in 12 px grijs; "Laden…" zolang er nog geen tijd is. */
-export function UpdatedAt({ at, prefix = "Bijgewerkt" }) {
-    if (!at)
-        return _jsx("span", { className: "tabular-nums", children: "Laden\u2026" });
-    const d = typeof at === "string" ? new Date(at) : at;
-    if (Number.isNaN(d.getTime()))
-        return null;
-    return (_jsxs("span", { className: "tabular-nums", children: [prefix, " ", d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" })] }));
+import { Clock } from "lucide-react";
+import { HoverTip } from "./HoverTip.js";
+/** "Bijgewerkt hh:mm" met klokicoon (12 px tekst); extra uitleg alleen in de infoballon. */
+export function UpdatedAt({ at, prefix = "Bijgewerkt", info, stale, }) {
+    let tekst = "Laden…";
+    if (at) {
+        const d = typeof at === "string" ? new Date(at) : at;
+        if (Number.isNaN(d.getTime()))
+            return null;
+        const t = d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" });
+        tekst = stale ? `Niet bijgewerkt sinds ${t}` : `${prefix} ${t}`;
+    }
+    const inhoud = (_jsxs("span", { className: "inline-flex items-center gap-1 tabular-nums " + (stale ? "text-warning" : ""), children: [_jsx(Clock, { className: "h-3.5 w-3.5", "aria-hidden": true }), tekst] }));
+    if (!info)
+        return inhoud;
+    return _jsx(HoverTip, { label: tekst, content: _jsx("div", { className: "max-w-xs text-xs", children: info }), align: "start", children: inhoud });
 }

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

@@ -1,9 +1,10 @@
 import type { ConnectionStatus } from "../../lib/stock-scope.js";
 /**
  * Werkpagina's tonen geen uitnodiging om een koppeling in te stellen (dat hoort bij Instellingen).
- * Alleen als een bestaande koppeling niet geladen kan worden: één rustige melding.
+ * Alleen als een bestaande koppeling niet geladen kan worden: één rustige meldingsregel.
  * De technische reden gaat naar de console.
  */
+export declare function floridayConnectionNotice(status: ConnectionStatus, error: string | null): string | null;
 export declare function FloridayConnectionNotice({ status, error, }: {
     status: ConnectionStatus;
     environment?: string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"FloridayConnectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FloridayConnectionNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,KAAK,GACN,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,sCAQA"}
+{"version":3,"file":"FloridayConnectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FloridayConnectionNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAItG;AAED,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,KAAK,GACN,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,sCAMA"}

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

@@ -1,14 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { InlineAlert } from "../fs-ui/InlineAlert.js";
 /**
  * Werkpagina's tonen geen uitnodiging om een koppeling in te stellen (dat hoort bij Instellingen).
- * Alleen als een bestaande koppeling niet geladen kan worden: één rustige melding.
+ * Alleen als een bestaande koppeling niet geladen kan worden: één rustige meldingsregel.
  * De technische reden gaat naar de console.
  */
-export function FloridayConnectionNotice({ status, error, }) {
+export function floridayConnectionNotice(status, error) {
     if (status !== "fout")
         return null;
     if (error)
         console.warn("Floriday-koppeling laden mislukt:", error);
-    return (_jsx(InlineAlert, { tone: "let_op", children: "De koppeling met Floriday kon niet geladen worden. Je eigen artikelen werken gewoon; probeer het later opnieuw." }));
+    return "De koppeling met Floriday kon niet geladen worden. Je eigen artikelen werken gewoon; probeer het later opnieuw.";
+}
+export function FloridayConnectionNotice({ status, error, }) {
+    const t = floridayConnectionNotice(status, error);
+    if (!t)
+        return null;
+    return (_jsx("div", { role: "status", className: "shrink-0 rounded-lg border border-border bg-warning-soft px-3 py-2 text-sm text-warning-soft-foreground", children: t }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FustenPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FustenPage.tsx"],"names":[],"mappings":"AAqLA,wBAAgB,UAAU,gCAoPzB"}
+{"version":3,"file":"FustenPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FustenPage.tsx"],"names":[],"mappings":"AAmMA,wBAAgB,UAAU,gCAiNzB"}

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

@@ -1,14 +1,33 @@
-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 { useEffect, useMemo, useState } from "react";
-import { Boxes, Minus, Plus, RefreshCw, Search } from "lucide-react";
-import { Button, Card, Input, Badge, toast } from "@flowselections/core";
+import { AlertTriangle, Boxes, CalendarClock, Layers, Minus, Plus, RefreshCw, TrendingDown, PackageX, CircleSlash } from "lucide-react";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, toast } from "@flowselections/core";
+import { fustReden } from "../../lib/labels.js";
+import { datum, getal } from "../../lib/notatie.js";
+import { UpdatedAt } from "../fs-ui/UpdatedAt.js";
+import { NoticeBar } from "../fs-ui/NoticeBar.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 { FiltersButton } from "../fs-ui/FiltersButton.js";
+import { FilterChips } from "../fs-ui/FilterChips.js";
+import { FilterPanel, FilterGroup } from "../fs-ui/FilterPanel.js";
+import { DataTable } from "../fs-ui/DataTable.js";
+import { EmptyState } from "../fs-ui/EmptyState.js";
+import { Pagination } from "../fs-ui/Pagination.js";
+import { HoverTip } from "../fs-ui/HoverTip.js";
+import { RowMenu } from "../fs-ui/RowMenu.js";
+import { HeaderButton } from "../fs-ui/HeaderButton.js";
+import { Sneltoetsen } from "./Sneltoetsen.js";
+const BRON_LABEL = { alles: "Alle bronnen", vbn: "Standaard fust", leverancier: "Leverancier" };
 import { FustStartmomentCard, FustInstellingenCell } from "./FustAdministratie.js";
 import { fustNaam, fustTekorten, saldoBijhouden } from "../../lib/fust-administratie.js";
 import { useFloridayConnection } from "../../hooks/useFloridayConnection.js";
 import { useFusten } from "../../hooks/useFusten.js";
 import { fetchFloricodeFustMap, fetchFloridayCustomPackageMap, fetchFustMutations, formatFustDimensions, resolveFustDimensions, } from "../../lib/fusten.js";
 import { PageHeader } from "../fs-ui/PageHeader.js";
-import { InlineAlert } from "../fs-ui/InlineAlert.js";
 /** Afmetingen tonen en handmatig aanvullen wanneer de catalogus ze niet kent. */
 function DimensionCell({ fust, floricode, customPackages, onSave, }) {
     const [editing, setEditing] = useState(false);
@@ -58,20 +77,20 @@ function MutationHistory({ fust }) {
         }
     };
     return (_jsxs("div", { children: [_jsx("button", { type: "button", onClick: toggle, className: "text-xs text-primary hover:underline", children: open ? "Historie verbergen" : "Historie" }), open && (_jsxs("div", { className: "mt-2 rounded-md border border-border bg-muted/30 p-2 text-xs", children: [rows === null && _jsx("p", { className: "text-muted-foreground", children: "Laden\u2026" }), rows !== null && rows.length === 0 && (_jsx("p", { className: "text-muted-foreground", children: "Nog geen mutaties." })), rows !== null &&
-                        rows.map((m) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: new Date(m.created_at).toLocaleString("nl-NL") }), _jsxs("span", { className: "flex-1 truncate", children: [m.reason === "sale"
-                                            ? "Verkoop"
-                                            : m.reason === "sale_cancelled"
-                                                ? "Order geannuleerd"
-                                                : m.reason === "manual_sale"
-                                                    ? "Handmatige verkoop"
-                                                    : m.reason === "startmoment"
-                                                        ? "Startmoment / beginstand"
-                                                        : "Handmatig", m.note ? ` — ${m.note}` : ""] }), _jsx("span", { className: `tabular-nums font-medium ${m.delta < 0 ? "text-rose-600" : "text-emerald-600"}`, children: m.delta > 0 ? `+${m.delta}` : m.delta })] }, m.id)))] }))] }));
+                        rows.map((m) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: datum(m.created_at, true) }), _jsxs("span", { className: "flex-1 truncate", children: [fustReden(m.reason), m.note ? ` — ${m.note}` : ""] }), _jsx("span", { className: `tabular-nums font-medium ${m.delta < 0 ? "text-destructive" : "text-primary"}`, children: m.delta > 0 ? `+${m.delta}` : m.delta })] }, m.id)))] }))] }));
 }
 export function FustenPage() {
     const { activeId } = useFloridayConnection();
     const { items, loading, syncing, error, sync, adjust, patch } = useFusten(activeId);
     const [search, setSearch] = useState("");
+    const [tab, setTab] = useState("alles");
+    const [bron, setBron] = useState("alles");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [startOpen, setStartOpen] = useState(false);
+    const [detailId, setDetailId] = useState(null);
+    const [pagina, setPagina] = useState(1);
+    const [grootte, setGrootte] = useState(25);
+    const [bijgewerkt, setBijgewerkt] = useState(null);
     const [floricode, setFloricode] = useState(null);
     const [floricodeError, setFloricodeError] = useState(null);
     useEffect(() => {
@@ -86,14 +105,29 @@ export function FustenPage() {
     const [busyId, setBusyId] = useState(null);
     const [amounts, setAmounts] = useState({});
     const negative = useMemo(() => fustTekorten(items), [items]);
+    const onderMin = (f) => f.minimum_stock > 0 && f.stock < f.minimum_stock;
+    const tekort = (f) => saldoBijhouden(f) && f.stock < 0;
     const filtered = useMemo(() => {
         const q = search.trim().toLowerCase();
-        if (!q)
-            return items;
-        return items.filter((f) => f.name.toLowerCase().includes(q) ||
-            String(f.vbn_code ?? "").includes(q) ||
-            f.fust_key.toLowerCase().includes(q));
-    }, [items, search]);
+        return items.filter((f) => {
+            if (tab === "onder_minimum" && !onderMin(f))
+                return false;
+            if (tab === "tekort" && !tekort(f))
+                return false;
+            if (tab === "niet_in_gebruik" && f.in_use)
+                return false;
+            if (bron === "leverancier" && f.source !== "SUPPLIER")
+                return false;
+            if (bron === "vbn" && f.source === "SUPPLIER")
+                return false;
+            if (!q)
+                return true;
+            return fustNaam(f).toLowerCase().includes(q) || f.name.toLowerCase().includes(q) || String(f.vbn_code ?? "").includes(q) || f.fust_key.toLowerCase().includes(q);
+        });
+    }, [items, search, tab, bron]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => setPagina(1), [search, tab, bron, grootte]);
+    useEffect(() => { if (!loading)
+        setBijgewerkt(new Date()); }, [loading, items]);
     const totals = useMemo(() => ({
         types: items.length,
         stock: items.reduce((sum, f) => sum + f.stock, 0),
@@ -116,11 +150,41 @@ export function FustenPage() {
             setBusyId(null);
         }
     };
-    return (_jsxs("main", { className: "flex flex-col gap-4 p-4 pb-24 sm:p-6 sm:pb-24", children: [_jsx(PageHeader, { title: "Fusten", meta: _jsx("span", { children: "Fusttypen komen vanzelf uit de beladingen van je artikelen." }), actions: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9", onClick: () => void sync(), disabled: syncing, children: [_jsx(RefreshCw, { className: `mr-2 h-4 w-4 ${syncing ? "animate-spin motion-reduce:animate-none" : ""}` }), "Bijwerken"] }) }), error && (_jsx(InlineAlert, { tone: "fout", children: "Fusten laden is niet gelukt. Probeer het opnieuw." })), floricodeError && (_jsx(InlineAlert, { tone: "let_op", children: "De standaardmaten van fusten konden niet geladen worden. Alleen zelf ingevoerde maten worden getoond." })), negative.length > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive space-y-1", children: [_jsxs("p", { className: "font-medium", children: [negative.length, " fusttype", negative.length === 1 ? " heeft" : "n hebben", " een tekort."] }), _jsx("p", { className: "text-foreground/80", children: "Er is sinds het startmoment meer uitgeleverd dan ingeboekt. Alleen fusten waarvan je het saldo bijhoudt staan hier. Controleer ontvangsten en retouren, of boek de werkelijke telling bij." }), _jsx("ul", { className: "text-xs text-foreground/80", children: negative.map((n) => (_jsxs("li", { children: [fustNaam(n), ": tekort van ", Math.abs(n.stock).toLocaleString("nl-NL"), " fusten"] }, n.id))) })] })), _jsx(FustStartmomentCard, { items: items, onSaved: () => void sync() }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs(Card, { className: "p-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Fusttypen" }), _jsx("p", { className: "mt-2 text-3xl font-bold tabular-nums", children: totals.types })] }), _jsxs(Card, { className: "p-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Totale fustvoorraad" }), _jsx("p", { className: "mt-2 text-3xl font-bold tabular-nums", children: totals.stock })] }), _jsxs(Card, { className: "p-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Onder minimum" }), _jsx("p", { className: "mt-2 text-3xl font-bold tabular-nums", children: totals.belowMin })] })] }), _jsxs("div", { className: "relative max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Zoek fust\u2026", className: "pl-9" })] }), _jsx(Card, { className: "overflow-hidden", children: loading ? (_jsx("p", { className: "p-6 text-sm text-muted-foreground", children: "Fusten laden\u2026" })) : filtered.length === 0 ? (_jsxs("div", { className: "p-6 text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Boxes, { className: "h-4 w-4" }), "Nog geen fusttypen gevonden. Voeg een belading toe aan een product."] })) : (_jsx("div", { className: "overflow-x-auto", children: _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: "Fust" }), _jsx("th", { className: "p-3", children: "Bron" }), _jsx("th", { className: "p-3", children: "Afmeting (L \u00D7 B \u00D7 H)" }), _jsx("th", { className: "p-3 text-right", children: "Gebruikt door" }), _jsx("th", { className: "p-3 text-right", children: "Voorraad" }), _jsx("th", { className: "p-3 text-right", children: "Minimum" }), _jsx("th", { className: "p-3 text-right", children: "Aanpassen" })] }) }), _jsx("tbody", { children: filtered.map((f) => (_jsxs("tr", { className: "border-t border-border align-top", children: [_jsxs("td", { className: "p-3", children: [_jsx("div", { className: "font-medium", children: fustNaam(f) }), f.eigen_naam?.trim() && _jsx("div", { className: "text-xs text-muted-foreground", children: f.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: f.vbn_code ? `VBN ${f.vbn_code}` : f.fust_key }), !f.in_use && (_jsx(Badge, { variant: "outline", className: "mt-1", children: "Niet meer in gebruik" })), _jsx(FustInstellingenCell, { fust: f, onSaved: () => void sync() }), _jsx("div", { className: "mt-1", children: _jsx(MutationHistory, { fust: f }) })] }), _jsx("td", { className: "p-3", children: f.source === "SUPPLIER" ? "Leverancier" : "VBN" }), _jsx("td", { className: "p-3 text-sm", children: _jsx(DimensionCell, { fust: f, floricode: floricode, customPackages: customPackages, onSave: (v) => patch(f.id, v) }) }), _jsx("td", { className: "p-3 text-right tabular-nums", children: f.used_by_count }), _jsx("td", { className: "p-3 text-right", children: f.stock < 0 && saldoBijhouden(f) ? (_jsxs("span", { className: "tabular-nums font-semibold text-rose-600", title: "Er is meer uitgeleverd dan ingeboekt. Boek ontvangen of geretourneerde fusten bij.", children: ["Tekort van ", Math.abs(f.stock).toLocaleString("nl-NL"), " fusten"] })) : (_jsx("span", { className: `tabular-nums font-semibold ${f.minimum_stock > 0 && f.stock < f.minimum_stock
-                                                    ? "text-rose-600"
-                                                    : ""}`, children: f.stock })) }), _jsx("td", { className: "p-3 text-right", children: _jsx(Input, { type: "number", className: "h-8 w-28 text-right", defaultValue: f.minimum_stock, onBlur: (e) => {
-                                                    const v = Math.max(0, Math.trunc(Number(e.target.value) || 0));
-                                                    if (v !== f.minimum_stock)
-                                                        void patch(f.id, { minimum_stock: v });
-                                                } }) }), _jsx("td", { className: "p-3", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", disabled: busyId === f.id || !(Number(amounts[f.id]) > 0), onClick: () => void mutate(f, -1), children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx(Input, { className: "h-8 w-28 text-center", type: "number", placeholder: "Aantal", value: amounts[f.id] ?? "", onChange: (e) => setAmounts((a) => ({ ...a, [f.id]: e.target.value })) }), _jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", disabled: busyId === f.id || !(Number(amounts[f.id]) > 0), onClick: () => void mutate(f, 1), children: _jsx(Plus, { className: "h-4 w-4" }) })] }) })] }, f.id))) })] }) })) })] }));
+    const tabs = [
+        { value: "alles", label: "Alles", icon: _jsx(Layers, {}), count: items.length },
+        { value: "onder_minimum", label: "Onder minimum", icon: _jsx(TrendingDown, {}), count: totals.belowMin },
+        { value: "tekort", label: "Tekort", icon: _jsx(AlertTriangle, {}), count: negative.length },
+        { value: "niet_in_gebruik", label: "Niet in gebruik", icon: _jsx(CircleSlash, {}), count: items.filter((f) => !f.in_use).length },
+    ];
+    const TAB_ICON = { alles: _jsx(Layers, {}), onder_minimum: _jsx(TrendingDown, {}), tekort: _jsx(AlertTriangle, {}), niet_in_gebruik: _jsx(CircleSlash, {}) };
+    const notices = [
+        ...(error ? ["Fusten laden is niet gelukt. Probeer het opnieuw."] : []),
+        ...(floricodeError ? ["De standaardmaten van fusten konden niet geladen worden. Alleen zelf ingevoerde maten worden getoond."] : []),
+        ...(negative.length > 0 ? [
+            _jsxs("span", { role: "button", tabIndex: 0, className: "hover:underline", onClick: (e) => { e.stopPropagation(); setTab("tekort"); }, children: [negative.length, " fusttype", negative.length === 1 ? " heeft" : "n hebben", " een tekort sinds het startmoment"] }, "tekort"),
+        ] : []),
+    ];
+    const detail = items.find((f) => f.id === detailId) ?? null;
+    const zichtbaar = filtered.slice((pagina - 1) * grootte, pagina * grootte);
+    const chips = [
+        ...(tab !== "alles" ? [{ key: "tab", label: tabs.find((t) => t.value === tab).label, icon: TAB_ICON[tab], onRemove: () => setTab("alles") }] : []),
+        ...(bron !== "alles" ? [{ key: "bron", label: BRON_LABEL[bron], onRemove: () => setBron("alles") }] : []),
+    ];
+    return (_jsxs("main", { className: "flex w-full min-w-0 flex-col gap-4 overflow-x-clip p-4 pb-[calc(7rem+env(safe-area-inset-bottom))] sm:p-6 sm:pb-24", children: [_jsx(Sneltoetsen, {}), _jsx(PageHeader, { title: "Fusten", updated: _jsx(UpdatedAt, { at: bijgewerkt, info: "Fusttypen komen vanzelf uit de beladingen van je artikelen." }), actions: _jsxs(_Fragment, { children: [_jsx(HeaderButton, { icon: _jsx(CalendarClock, {}), label: "Startmoment", onClick: () => setStartOpen(true) }), _jsx(HeaderButton, { icon: _jsx(RefreshCw, { className: syncing ? "animate-spin motion-reduce:animate-none" : "" }), label: "Bijwerken", onClick: () => void sync(), disabled: syncing })] }) }), _jsx(NoticeBar, { items: notices }), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Fusttypen", icon: _jsx(Boxes, {}), loading: loading, value: getal(totals.types), sub: "Uit beladingen", onClick: () => setTab("alles"), active: false }), _jsx(KpiTile, { title: "Totale fustvoorraad", icon: _jsx(Layers, {}), loading: loading, value: getal(totals.stock), sub: "Fust" }), _jsx(KpiTile, { title: "Onder minimum", icon: _jsx(TrendingDown, {}), loading: loading, tone: totals.belowMin > 0 ? "warning" : "default", value: getal(totals.belowMin), sub: "Fusttypen", onClick: () => setTab("onder_minimum"), active: tab === "onder_minimum" }), _jsx(KpiTile, { title: "Tekort", icon: _jsx(PackageX, {}), loading: loading, tone: negative.length > 0 ? "warning" : "default", value: getal(negative.length), sub: "Sinds het startmoment", onClick: () => setTab("tekort"), active: tab === "tekort" })] }), _jsx(PillTabs, { tabs: tabs, value: tab, onChange: setTab, label: "Fusten filteren" }), _jsx(Toolbar, { filters: _jsx(FiltersButton, { count: bron !== "alles" ? 1 : 0, onClick: () => setFilterOpen(true) }), chips: _jsx(FilterChips, { chips: chips, onClearAll: () => { setTab("alles"); setBron("alles"); } }), children: _jsx(SearchInput, { value: search, onChange: setSearch, placeholder: "Zoek fust op naam of code" }) }), _jsx(DataTable, { rows: zichtbaar, getId: (f) => f.id, loading: loading, onOpen: (f) => setDetailId(f.id), openLabel: "Fust openen", empty: _jsx(EmptyState, { icon: _jsx(Boxes, { className: "h-6 w-6" }), title: items.length === 0 ? "Nog geen fusttypen" : "Niets gevonden", text: items.length === 0 ? "Voeg een belading toe aan een artikel; het fust verschijnt dan vanzelf." : "Geen fusten in deze weergave." }), rowActions: (f) => (_jsx(RowMenu, { label: fustNaam(f), items: [
+                        { label: "Details en instellingen", onClick: () => setDetailId(f.id) },
+                    ] })), columns: [
+                    { key: "fust", header: "Fust", width: "240px", render: (f) => (_jsxs("div", { className: "min-w-0", children: [_jsx(HoverTip, { label: fustNaam(f), content: _jsxs("div", { className: "text-xs", children: [fustNaam(f), f.eigen_naam?.trim() ? ` (${f.name})` : "", f.vbn_code ? ` · code ${f.vbn_code}` : ""] }), align: "start", className: "block max-w-full truncate text-left", children: _jsx("span", { className: "block truncate font-medium", children: fustNaam(f) }) }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [f.source === "SUPPLIER" ? "Leverancier" : "Standaard fust", f.in_use ? "" : " · niet meer in gebruik"] })] })) },
+                    { key: "afmeting", header: "Afmeting", width: "160px", render: (f) => {
+                            const r = resolveFustDimensions(f, floricode, customPackages);
+                            const l = formatFustDimensions(r);
+                            return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate " + (l ? "tabular-nums" : "text-muted-foreground"), children: l ?? "Onbekend" }), r.source !== "onbekend" && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: r.source === "floricode" ? "Standaardmaat" : r.source === "floriday" ? "Eigen fust uit Floriday" : "Handmatig" })] }));
+                        } },
+                    { key: "gebruikt", header: "Gebruikt door", width: "128px", render: (f) => _jsxs("span", { className: "tabular-nums", children: [getal(f.used_by_count), " ", _jsx("span", { className: "text-xs text-muted-foreground", children: "artikelen" })] }) },
+                    { key: "voorraad", header: "Voorraad", width: "152px", render: (f) => (_jsxs("div", { className: "min-w-0", children: [tekort(f)
+                                    ? _jsxs("div", { className: "truncate font-semibold tabular-nums text-destructive", children: ["Tekort ", getal(Math.abs(f.stock)), " fust"] })
+                                    : _jsxs("div", { className: "truncate font-semibold tabular-nums " + (onderMin(f) ? "text-destructive" : ""), children: [getal(f.stock), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground", children: "fust" })] }), !saldoBijhouden(f) && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Saldo niet bijgehouden" })] })) },
+                    { key: "minimum", header: "Minimum", width: "120px", render: (f) => (_jsx(Input, { type: "number", "aria-label": `Minimum ${fustNaam(f)}`, className: "h-8 w-24", defaultValue: f.minimum_stock, onClick: (e) => e.stopPropagation(), onBlur: (e) => { const v = Math.max(0, Math.trunc(Number(e.target.value) || 0)); if (v !== f.minimum_stock)
+                                void patch(f.id, { minimum_stock: v }); } })) },
+                    { key: "aanpassen", header: "Aanpassen", width: "184px", render: (f) => (_jsxs("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", "aria-label": "Afboeken", disabled: busyId === f.id || !(Number(amounts[f.id]) > 0), onClick: () => void mutate(f, -1), children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx(Input, { className: "h-8 w-20 text-center", type: "number", placeholder: "Aantal", "aria-label": `Aantal ${fustNaam(f)}`, value: amounts[f.id] ?? "", onChange: (e) => setAmounts((a) => ({ ...a, [f.id]: e.target.value })) }), _jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", "aria-label": "Bijboeken", disabled: busyId === f.id || !(Number(amounts[f.id]) > 0), onClick: () => void mutate(f, 1), children: _jsx(Plus, { className: "h-4 w-4" }) })] })) },
+                ] }), _jsx(Pagination, { page: pagina, pageSize: grootte, totalCount: filtered.length, onPage: setPagina, onPageSize: setGrootte }), _jsx(FilterPanel, { open: filterOpen, onOpenChange: setFilterOpen, onClear: () => setBron("alles"), children: _jsx(FilterGroup, { title: "Bron", value: bron, onChange: setBron, options: Object.keys(BRON_LABEL).map((b) => ({ value: b, label: BRON_LABEL[b] })) }) }), _jsx(Dialog, { open: startOpen, onOpenChange: setStartOpen, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Startmoment" }) }), _jsx(FustStartmomentCard, { items: items, onSaved: () => void sync() })] }) }), _jsx(Dialog, { open: !!detail, onOpenChange: (o) => !o && setDetailId(null), children: _jsxs(DialogContent, { className: "left-auto right-0 top-0 h-[100dvh] max-w-md translate-x-0 translate-y-0 overflow-auto rounded-none sm:rounded-none", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: detail ? fustNaam(detail) : "" }) }), detail && (_jsxs("div", { className: "space-y-5 text-sm", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Naam en saldo" }), _jsx(FustInstellingenCell, { fust: detail, onSaved: () => void sync() })] }), _jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Afmeting" }), _jsx(DimensionCell, { fust: detail, floricode: floricode, customPackages: customPackages, onSave: (v) => patch(detail.id, v) })] }), _jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Boekingen" }), _jsx(MutationHistory, { fust: detail })] })] }))] }) })] }));
 }

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

@@ -4,7 +4,9 @@ interface Props {
     productId?: string | null;
     /** Artikelen met dezelfde voorraadsleutel, uit voorraad_artikel_detail. */
     productIds?: string[];
+    /** Stuks per fust van de hoofdverpakking (voor omrekenen naar stuks). */
+    stuksPerFust?: number | null;
 }
-export declare function OrderHistoryCard({ tradeItemKey, productName, productId, productIds: bekendeIds }: Props): import("react").JSX.Element;
+export declare function OrderHistoryCard({ tradeItemKey, productName, productId, productIds: bekendeIds, stuksPerFust }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=OrderHistoryCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/OrderHistoryCard.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAgDD,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,+BAsKvG"}
+{"version":3,"file":"OrderHistoryCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/OrderHistoryCard.tsx"],"names":[],"mappings":"AAmBA,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAgBD,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,KAAK,+BA6JrH"}

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

@@ -1,49 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Card, CardContent, Badge } from "@flowselections/core";
-import { Loader2, ClipboardList, ExternalLink } from "lucide-react";
-import { supabase } from "../../integrations/supabase/client.js";
-const STATUS_TONE = {
-    "nog te picken": "bg-amber-100 text-amber-800 border-amber-200",
-    "klaar voor verzending": "bg-blue-100 text-blue-800 border-blue-200",
-    verzonden: "bg-emerald-100 text-emerald-800 border-emerald-200",
-    geannuleerd: "bg-rose-100 text-rose-800 border-rose-200",
-    concept: "bg-slate-100 text-slate-700 border-slate-200",
-};
-// Legacy waarden mappen naar de nieuwe fases zolang de backfill/trigger
-// nog niet elke rij heeft omgezet.
-function normalizeStatus(raw) {
-    const s = (raw ?? "").trim().toLowerCase();
-    if (!s)
-        return "Nog te picken";
-    if (["verzonden", "geleverd", "shipped", "delivered"].includes(s))
-        return "Verzonden";
-    if (["nieuw", "open", "new", "pending"].includes(s))
-        return "Nog te picken";
-    if (["ready", "klaar", "klaar voor verzending"].includes(s))
-        return "Klaar voor verzending";
-    if (["geannuleerd", "cancelled", "canceled"].includes(s))
-        return "geannuleerd";
-    if (s === "concept")
-        return "concept";
-    if (s === "nog te picken")
-        return "Nog te picken";
-    return raw ?? "Nog te picken";
-}
-function formatDate(v) {
-    if (!v)
-        return "—";
-    try {
-        const d = new Date(v);
-        if (Number.isNaN(d.getTime()))
-            return v;
-        return d.toLocaleDateString("nl-NL", { day: "2-digit", month: "short", year: "numeric" });
-    }
-    catch {
-        return v;
-    }
+import { Card, CardContent } from "@flowselections/core";
+import { Loader2, ClipboardList, ExternalLink, Circle, CircleDot, CheckCircle2, XCircle, CircleDashed } from "lucide-react";
+import { orderStatus, EENHEID } from "../../lib/labels.js";
+import { datum, getal } from "../../lib/notatie.js";
+import { StatusIcon } from "../fs-ui/StatusIcon.js";
+const TONE = { open: "open", bezig: "bezig", klaar: "klaar", fout: "fout", concept: "open" };
+const ICON = { open: _jsx(Circle, {}), bezig: _jsx(CircleDot, {}), klaar: _jsx(CheckCircle2, {}), fout: _jsx(XCircle, {}), concept: _jsx(CircleDashed, {}) };
+/** Aantal altijd in stuks; fust als tweede regel wanneer de verpakking bekend is. */
+function stuksEnFust(qty, unit, stuksPerFust) {
+    const e = EENHEID[(unit ?? "stuks").trim().toLowerCase()] ?? "stuks";
+    const spf = stuksPerFust && stuksPerFust > 0 ? stuksPerFust : null;
+    if (e === "fust")
+        return { stuks: spf ? qty * spf : null, fust: qty };
+    return { stuks: qty, fust: spf ? Math.round((qty / spf) * 100) / 100 : null };
 }
-export function OrderHistoryCard({ tradeItemKey, productName, productId, productIds: bekendeIds }) {
+import { supabase } from "../../integrations/supabase/client.js";
+export function OrderHistoryCard({ tradeItemKey, productName, productId, productIds: bekendeIds, stuksPerFust }) {
     const [rows, setRows] = useState(null);
     const [error, setError] = useState(null);
     useEffect(() => {
@@ -86,7 +59,7 @@ export function OrderHistoryCard({ tradeItemKey, productName, productId, product
                 }
                 const { data, error } = await supabase
                     .from("order_items")
-                    .select("order_id,quantity,unit,orders!inner(id,order_number,customer_name,order_date,created_at,status,order_source,deleted_at)")
+                    .select("order_id,quantity,unit,plants_per_crate,orders!inner(id,order_number,customer_name,order_date,created_at,status,order_source,deleted_at)")
                     .or(orFilters.join(","))
                     .is("orders.deleted_at", null)
                     .order("created_at", { ascending: false, foreignTable: "orders" })
@@ -102,6 +75,7 @@ export function OrderHistoryCard({ tradeItemKey, productName, productId, product
                     customer_name: r.orders?.customer_name ?? null,
                     quantity: r.quantity ?? 0,
                     unit: r.unit ?? null,
+                    plants_per_crate: r.plants_per_crate == null ? null : Number(r.plants_per_crate),
                     order_date: r.orders?.order_date ?? null,
                     created_at: r.orders?.created_at ?? "",
                     status: r.orders?.status ?? null,
@@ -111,8 +85,10 @@ export function OrderHistoryCard({ tradeItemKey, productName, productId, product
                 setRows(mapped);
             }
             catch (e) {
-                if (!cancelled)
+                if (!cancelled) {
+                    console.warn("Bestelgeschiedenis laden mislukt:", e);
                     setError(e.message);
+                }
             }
         };
         load();
@@ -127,11 +103,11 @@ export function OrderHistoryCard({ tradeItemKey, productName, productId, product
             supabase.removeChannel(channel);
         };
     }, [tradeItemKey, productName, productId, bekendeIds?.join("|")]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (_jsxs(Card, { children: [_jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-6 py-4", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 bg-primary/10 text-primary", children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("span", { className: "font-medium", children: "Bestelgeschiedenis" }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: rows ? `${rows.length} bestelling${rows.length === 1 ? "" : "en"}` : "" })] }), _jsxs(CardContent, { className: "pt-0", children: [error && (_jsxs("div", { className: "text-sm text-destructive", children: ["Kon bestelgeschiedenis niet laden: ", error] })), !rows && !error && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Bestellingen laden\u2026"] })), rows && rows.length === 0 && !error && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Nog geen bestellingen voor dit artikel." })), rows && rows.length > 0 && (_jsx("div", { className: "overflow-x-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left", children: "Ordernummer" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Klant" }), _jsx("th", { className: "px-3 py-2 text-right", children: "Fusten" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Besteldatum" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Status" }), _jsx("th", { className: "px-3 py-2" })] }) }), _jsx("tbody", { children: rows.map((r, i) => {
-                                        const label = normalizeStatus(r.status);
-                                        const tone = STATUS_TONE[label.toLowerCase()] ??
-                                            "bg-slate-100 text-slate-700 border-slate-200";
+    return (_jsxs(Card, { children: [_jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-6 py-4", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 bg-primary/10 text-primary", children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("span", { className: "font-medium", children: "Bestelgeschiedenis" }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: rows ? `${rows.length} bestelling${rows.length === 1 ? "" : "en"}` : "" })] }), _jsxs(CardContent, { className: "pt-0", children: [error && (_jsx("div", { className: "text-sm text-destructive", children: "Bestelgeschiedenis laden lukt niet. Probeer opnieuw." })), !rows && !error && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Bestellingen laden\u2026"] })), rows && rows.length === 0 && !error && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Nog geen bestellingen voor dit artikel." })), rows && rows.length > 0 && (_jsx("div", { className: "overflow-x-auto rounded-md border border-border", children: _jsxs("table", { className: "w-full min-w-[640px] table-fixed text-sm [&_thead_th]:h-10 [&_thead_th]:px-2 [&_thead_th]:text-left [&_thead_th]:align-middle [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "140px" } }), _jsx("col", {}), _jsx("col", { style: { width: "132px" } }), _jsx("col", { style: { width: "120px" } }), _jsx("col", { style: { width: "184px" } }), _jsx("col", { style: { width: "44px" } })] }), _jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { children: "Ordernummer" }), _jsx("th", { children: "Klant" }), _jsx("th", { children: "Aantal" }), _jsx("th", { children: "Besteldatum" }), _jsx("th", { children: "Status" }), _jsx("th", { children: _jsx("span", { className: "sr-only", children: "Openen" }) })] }) }), _jsx("tbody", { children: rows.map((r, i) => {
+                                        const st = orderStatus(r.status);
+                                        const q = stuksEnFust(Number(r.quantity ?? 0), r.unit, r.plants_per_crate ?? stuksPerFust);
                                         const href = `/floriday-verkoop/verkooporders/${r.order_id}`;
-                                        return (_jsxs("tr", { className: "border-t hover:bg-muted/40 cursor-pointer", onClick: () => { window.location.href = href; }, children: [_jsx("td", { className: "px-3 py-2 font-medium", children: _jsx("a", { href: href, className: "text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: r.order_number }) }), _jsx("td", { className: "px-3 py-2", children: r.customer_name ?? "—" }), _jsxs("td", { className: "px-3 py-2 text-right tabular-nums", children: [r.quantity, r.unit ? _jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: r.unit }) : null] }), _jsx("td", { className: "px-3 py-2", children: formatDate(r.order_date ?? r.created_at) }), _jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: "outline", className: `border ${tone}`, children: label }) }), _jsx("td", { className: "px-3 py-2 text-right text-muted-foreground", children: _jsx(ExternalLink, { className: "h-3.5 w-3.5 inline" }) })] }, `${r.order_id}-${i}`));
+                                        const cel = "truncate px-2 py-0 align-middle";
+                                        return (_jsxs("tr", { className: "h-[60px] border-b border-border last:border-0 hover:bg-muted/40", children: [_jsx("td", { className: cel, children: _jsx("a", { href: href, className: "font-medium text-primary hover:underline", children: r.order_number }) }), _jsx("td", { className: cel, children: r.customer_name ?? "—" }), _jsxs("td", { className: cel + " tabular-nums", children: [_jsx("div", { className: "truncate", children: q.stuks == null ? "—" : `${getal(q.stuks)} stuks` }), q.fust != null && _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [getal(q.fust), " fust"] })] }), _jsx("td", { className: cel + " tabular-nums", children: datum(r.order_date ?? r.created_at) }), _jsx("td", { className: cel, children: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx(StatusIcon, { tone: TONE[st.tone], icon: ICON[st.tone], label: st.label }), _jsx("span", { className: "truncate", children: st.label })] }) }), _jsx("td", { className: cel + " text-muted-foreground", children: _jsx("a", { href: href, "aria-label": "Order openen", className: "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted", children: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) }) })] }, `${r.order_id}-${i}`));
                                     }) })] }) }))] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PublicatiesPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/PublicatiesPage.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,eAAe,gCA8I9B"}
+{"version":3,"file":"PublicatiesPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/PublicatiesPage.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,eAAe,gCA0F9B"}

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

@@ -1,27 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
-import { Card, Button } from "@flowselections/core";
-import { ArrowLeft, Check, AlertTriangle, Loader2, RefreshCw } from "lucide-react";
+import { Button } from "@flowselections/core";
+import { ArrowLeft, CheckCircle2, CircleDot, XCircle, CircleDashed, RefreshCw, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import { usePublishJobs } from "../../hooks/usePublishJob.js";
 import { supabase } from "../../integrations/supabase/client.js";
 import { PageHeader } from "../fs-ui/PageHeader.js";
-const STATUS_LABEL = {
-    running: "Bezig",
-    succeeded: "Gepubliceerd",
-    succeeded_with_warnings: "Aandachtspunten",
-    failed: "Actie nodig",
-};
-function StatusChip({ status }) {
-    const tone = status === "succeeded"
-        ? "bg-emerald-100 text-emerald-800"
-        : status === "failed"
-            ? "bg-destructive/10 text-destructive"
-            : status === "running"
-                ? "bg-muted text-muted-foreground"
-                : "bg-amber-100 text-amber-800";
-    return (_jsx("span", { className: `rounded-full px-2 py-0.5 text-xs font-medium ${tone}`, children: STATUS_LABEL[status] ?? status }));
-}
+import { UpdatedAt } from "../fs-ui/UpdatedAt.js";
+import { HeaderButton } from "../fs-ui/HeaderButton.js";
+import { DataTable } from "../fs-ui/DataTable.js";
+import { EmptyState } from "../fs-ui/EmptyState.js";
+import { Pagination } from "../fs-ui/Pagination.js";
+import { StatusIcon } from "../fs-ui/StatusIcon.js";
+import { publicatieStatus } from "../../lib/labels.js";
+import { datum } from "../../lib/notatie.js";
+const TONE = { open: "open", bezig: "bezig", klaar: "klaar", fout: "fout", concept: "open" };
+const ICON = { open: _jsx(CircleDashed, {}), bezig: _jsx(CircleDot, {}), klaar: _jsx(CheckCircle2, {}), fout: _jsx(XCircle, {}), concept: _jsx(CircleDashed, {}) };
 export function PublicatiesPage() {
     const { jobs, loading, reload } = usePublishJobs(50);
     const [stepsByJob, setStepsByJob] = useState({});
@@ -48,22 +42,33 @@ export function PublicatiesPage() {
             cancelled = true;
         };
     }, [jobs]);
-    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: "Naar Floriday gestuurd", meta: _jsx("span", { children: "Artikelen die je naar Floriday hebt gestuurd, met wat er eventueel nog moet gebeuren." }), actions: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9", onClick: () => void reload(), children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), "Vernieuwen"] }) }), loading ? (_jsxs(Card, { className: "p-6 flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Laden\u2026"] })) : jobs.length === 0 ? (_jsx(Card, { className: "p-6 text-sm text-muted-foreground", children: "Er zijn nog geen publicaties." })) : (_jsx("div", { className: "space-y-3", children: jobs.map((job) => {
-                    const target = job.product_id ?? job.trade_item_id;
-                    // Oude "Actie nodig" sluit vanzelf zodra een latere publicatie van
-                    // hetzelfde artikel (op id) wel gelukt is.
-                    const repaired = job.status === "failed" &&
-                        jobs.some((o) => o.id !== job.id &&
-                            (o.product_id ?? o.trade_item_id) === target &&
-                            target != null &&
-                            new Date(o.created_at) > new Date(job.created_at) &&
-                            (o.status === "succeeded" || o.status === "succeeded_with_warnings"));
-                    const steps = stepsByJob[job.id] ?? [];
-                    const failed = repaired ? [] : steps.filter((s) => s.status === "failed");
-                    return (_jsxs(Card, { className: "p-4 space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: job.title || "Product" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [new Date(job.created_at).toLocaleString("nl-NL"), job.environment !== "live" ? " · testomgeving" : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [repaired ? (_jsx("span", { className: "rounded-full px-2 py-0.5 text-xs font-medium bg-emerald-100 text-emerald-800", children: "Hersteld" })) : (_jsx(StatusChip, { status: job.status })), target && failed.length > 0 && (_jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsx(Link, { to: "/voorraad/$id", params: { id: String(target) }, search: { hervat: job.id }, children: "Afronden" }) }))] })] }), steps.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs", children: steps
-                                    .filter((s) => s.status !== "skipped")
-                                    .map((s) => (_jsxs("li", { className: "flex items-center gap-1", children: [s.status === "done" ? (_jsx(Check, { className: "h-3 w-3 text-emerald-600" })) : s.status === "failed" ? (_jsx(AlertTriangle, { className: "h-3 w-3 text-destructive" })) : (_jsx(Loader2, { className: "h-3 w-3 text-muted-foreground" })), _jsx("span", { className: s.status === "failed"
-                                                ? "text-destructive"
-                                                : "text-muted-foreground", children: s.label })] }, s.id))) })), failed.map((s) => (_jsxs("p", { className: "text-xs text-destructive", children: [s.label, ": ", s.error_message] }, `err-${s.id}`)))] }, job.id));
-                }) }))] }));
+    const [pagina, setPagina] = useState(1);
+    const [grootte, setGrootte] = useState(25);
+    const [bijgewerkt, setBijgewerkt] = useState(null);
+    useEffect(() => { if (!loading)
+        setBijgewerkt(new Date()); }, [loading, jobs]);
+    const rijen = jobs.map((job) => {
+        const target = (job.product_id ?? job.trade_item_id);
+        // Oude "Actie nodig" sluit vanzelf zodra een latere publicatie van hetzelfde artikel (op id) wel gelukt is.
+        const repaired = job.status === "failed" &&
+            jobs.some((o) => o.id !== job.id && (o.product_id ?? o.trade_item_id) === target && target != null &&
+                new Date(o.created_at) > new Date(job.created_at) && (o.status === "succeeded" || o.status === "succeeded_with_warnings"));
+        const steps = (stepsByJob[job.id] ?? []).filter((s) => s.status !== "skipped");
+        const failed = repaired ? [] : steps.filter((s) => s.status === "failed");
+        for (const f of failed)
+            if (f.error_message)
+                console.warn("Publicatiestap mislukt:", f.label, f.error_message);
+        return { job, target, repaired, steps, failed };
+    });
+    const zichtbaar = rijen.slice((pagina - 1) * grootte, pagina * grootte);
+    return (_jsxs("main", { className: "flex w-full min-w-0 flex-col gap-4 overflow-x-clip p-4 pb-[calc(7rem+env(safe-area-inset-bottom))] 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: "Naar Floriday gestuurd", updated: _jsx(UpdatedAt, { at: bijgewerkt, info: "Artikelen die je naar Floriday hebt gestuurd, met wat er eventueel nog moet gebeuren." }), actions: _jsx(HeaderButton, { icon: _jsx(RefreshCw, {}), label: "Vernieuwen", onClick: () => void reload() }) }), _jsx(DataTable, { rows: zichtbaar, getId: (r) => r.job.id, loading: loading, keyboard: false, empty: _jsx(EmptyState, { icon: _jsx(Send, { className: "h-6 w-6" }), title: "Nog niets verstuurd", text: "Er zijn nog geen artikelen naar Floriday gestuurd." }), columns: [
+                    { key: "artikel", header: "Artikel", width: "260px", render: (r) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: r.job.title || "Artikel" }), r.job.environment !== "live" && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Testomgeving" })] })) },
+                    { key: "moment", header: "Verstuurd", width: "152px", render: (r) => _jsx("span", { className: "tabular-nums", children: datum(r.job.created_at, true) }) },
+                    { key: "stappen", header: "Stappen", width: "260px", render: (r) => (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "truncate tabular-nums", children: [r.steps.filter((s) => s.status === "done").length, " van ", r.steps.length, " klaar"] }), r.failed.length > 0 && _jsx("div", { className: "truncate text-xs text-destructive", children: r.failed.map((s) => s.label).join(", ") })] })) },
+                    { key: "status", header: "Status", width: "176px", render: (r) => {
+                            const st = publicatieStatus(r.repaired ? "repaired" : r.job.status);
+                            return _jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx(StatusIcon, { tone: TONE[st.tone], icon: ICON[st.tone], label: st.label }), _jsx("span", { className: "truncate", children: st.label })] });
+                        } },
+                    { key: "actie", header: _jsx("span", { className: "sr-only", children: "Actie" }), width: "120px", render: (r) => r.target && r.failed.length > 0 ? (_jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsx(Link, { to: "/voorraad/$id", params: { id: String(r.target) }, search: { hervat: r.job.id }, children: "Afronden" }) })) : null },
+                ] }), _jsx(Pagination, { page: pagina, pageSize: grootte, totalCount: rijen.length, onPage: setPagina, onPageSize: (n) => { setGrootte(n); setPagina(1); } })] }));
 }

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

@@ -7,7 +7,7 @@ export declare function Sneltoetsen({ onNieuw, nieuwLabel }: {
     onNieuw?: () => void;
     nieuwLabel?: string;
 }): import("react").JSX.Element;
-/** Kleine sneltoets-hint in een knop; alleen vanaf tablet. */
+/** Kleine sneltoets-hint in een primaire knop, exact naar Verkooporders. */
 export declare function Kbd({ children }: {
     children: string;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Sneltoetsen.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/Sneltoetsen.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,UAA4B,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwCnH;AAED,8DAA8D;AAC9D,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAErD"}
+{"version":3,"file":"Sneltoetsen.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/Sneltoetsen.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,UAA4B,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,+BAsBnH;AAED,4EAA4E;AAC5E,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAErD"}