@flowselections/floriday-voorraad 1.0.150 → 1.0.154

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

@@ -1,29 +1,55 @@
-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 { 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";
 import { useEnsureVoorraadDefaults } from "../../hooks/useEnsureVoorraadDefaults.js";
 import { useVoorraadLijst } from "../../hooks/useVoorraadLijst.js";
-import { aantal, FILTER_LABEL, meldingen, volgendeSortering, zichtbareFilters, } from "../../lib/voorraad-lijst.js";
-import { FloridayConnectionNotice } from "./FloridayConnectionNotice.js";
-import { StockIntegrityAlert } from "./StockIntegrityAlert.js";
+import { aantal, FILTER_LABEL, FILTER_HINT, meldingen, volgendeSortering, zichtbareFilters, } from "../../lib/voorraad-lijst.js";
+import { floridayConnectionNotice } from "./FloridayConnectionNotice.js";
+import { useStockIntegrityNotices } from "./StockIntegrityAlert.js";
 import { TelmomentButton } from "./TelmomentButton.js";
-import { VoorraadPagination } from "./VoorraadPagination.js";
 import { InventorySettingsDrawer } from "./InventorySettingsDrawer.js";
 import { OPTIONELE_KOLOMMEN, VoorraadLijstTabel } from "./lijst/VoorraadLijstTabel.js";
 import { AanpassenDialog, AfboekenDialog } from "./lijst/SnelActieDialogen.js";
 import { LijstExportKnop } from "./lijst/LijstExportKnop.js";
 import { ImporteerKnop } from "./lijst/ImporteerKnop.js";
+import { 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 { NoticeBar } from "../fs-ui/NoticeBar.js";
+import { FiltersButton } from "../fs-ui/FiltersButton.js";
+import { FilterChips } from "../fs-ui/FilterChips.js";
+import { FilterPanel, FilterGroup } from "../fs-ui/FilterPanel.js";
+import { Pagination } from "../fs-ui/Pagination.js";
+import { HeaderPrimary } from "../fs-ui/HeaderButton.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 +94,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 +101,25 @@ 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 [filterOpen, setFilterOpen] = useState(false);
+    const integriteit = useStockIntegrityNotices();
     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], hint: FILTER_HINT[f], count: data?.tellers?.[f] ?? null }));
     const toggleSelect = (id) => setSelected((cur) => {
         const next = new Set(cur);
         if (next.has(id))
@@ -113,16 +129,29 @@ 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;
+    // Meldingen: één regel per melding, direct onder de kop.
+    const verbindingTekst = floridayConnectionNotice(conn.status, conn.error);
+    const noticeItems = [
+        ...(guardTrips.length > 0 ? [_jsxs("span", { children: ["De pagina is gestopt met laden. ", _jsx("span", { role: "button", tabIndex: 0, className: "font-medium underline underline-offset-2", onClick: () => window.location.reload(), children: "Opnieuw laden" })] }, "guard")] : []),
+        ...(error ? [_jsxs("span", { children: ["De voorraad laden lukt niet. ", _jsx("span", { role: "button", tabIndex: 0, className: "font-medium underline underline-offset-2", onClick: (e) => { e.stopPropagation(); void reload(); }, children: "Opnieuw proberen" })] }, "err")] : []),
+        ...integriteit.items,
+        ...(verbindingTekst ? [verbindingTekst] : []),
+        ...melding.map((m) => m.filter ? (_jsx("span", { role: "button", tabIndex: 0, className: "underline-offset-2 hover:underline", onClick: (e) => { e.stopPropagation(); setFilter(m.filter); }, children: m.tekst }, m.tekst)) : m.tekst),
+    ];
+    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_HINT[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 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, { 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-10 w-10 p-0 sm:h-9 sm:w-auto sm:px-3", "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"] })] }))] })] }), _jsx(HeaderPrimary, { icon: _jsx(Plus, {}), label: "Nieuw artikel", kbd: "N", onClick: nieuw })] }) }), _jsx(TelmomentButton, { verbergKnop: true, open: telmomentOpen, onOpenChange: setTelmomentOpen, onSaved: reload }), _jsx(NoticeBar, { items: noticeItems }), integriteit.dialog, _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: false }), _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" })] }), _jsx(PillTabs, { tabs: tabs, value: filter, onChange: setFilter, label: "Filter" }), _jsx(Toolbar, { filters: _jsx(FiltersButton, { count: filter !== "alles" ? 1 : 0, onClick: () => setFilterOpen(true) }), chips: _jsx(FilterChips, { chips: filter !== "alles" ? [{ key: "weergave", label: FILTER_HINT[filter], icon: FILTER_ICON[filter], onRemove: () => setFilter("alles") }] : [] }), right: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 px-3", "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" }) }), 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(Pagination, { totalCount: data?.totaal ?? 0, page: pagina, pageSize: grootte, onPage: setPagina, onPageSize: setGrootte }), _jsx(FilterPanel, { open: filterOpen, onOpenChange: setFilterOpen, onClear: () => setFilter("alles"), children: _jsx(FilterGroup, { title: "Weergave", value: filter, onChange: setFilter, options: tabs.map((t) => ({ value: t.value, label: FILTER_HINT[t.value] })) }) }), _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":"AAmGA,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,+BA6enI"}

package/dist-lib/components/voorraad/artikel/ArtikelPagina.js

@@ -1,8 +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 { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link, useBlocker } from "@tanstack/react-router";
-import { Badge, Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, toast, } from "@flowselections/core";
-import { AlertTriangle, ArrowLeft, Loader2, MoreHorizontal, Package, Send } from "lucide-react";
+import { Link, useBlocker, useRouterState } from "@tanstack/react-router";
+import { datum } from "../../../lib/notatie.js";
+import { Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Skeleton, Tabs, TabsContent, toast, } from "@flowselections/core";
+import { AlertTriangle, Archive, ArchiveRestore, ArrowDownToLine, ArrowLeft, Boxes, Layers, Link2, Loader2, Lock, MoreHorizontal, Minus, Package, Send, SlidersHorizontal } from "lucide-react";
 import { supabase } from "../../../integrations/supabase/client.js";
 import { dbFoutTekst } from "../../../lib/db-error-message.js";
 import { ARTIKEL_GEWIJZIGD } from "../../../lib/artikel-gewijzigd.js";
@@ -11,6 +12,14 @@ import { STATUS_INFO, aantal, geld } from "../../../lib/voorraad-lijst.js";
 import { AanpassenDialog, AfboekenDialog } from "../lijst/SnelActieDialogen.js";
 import { TwijfelKiezen } from "./TwijfelKiezen.js";
 import { OpslaanContext } from "./opslaan-context.js";
+import { ArtikelStatusIcoon } from "../lijst/VoorraadLijstTabel.js";
+import { PageHeader } from "../../fs-ui/PageHeader.js";
+import { KpiRow } from "../../fs-ui/KpiRow.js";
+import { KpiTile } from "../../fs-ui/KpiTile.js";
+import { PillTabs } from "../../fs-ui/PillTabs.js";
+import { InlineAlert } from "../../fs-ui/InlineAlert.js";
+import { HoverTip } from "../../fs-ui/HoverTip.js";
+import { MobilePrimaryAction } from "../../fs-ui/MobilePrimaryAction.js";
 // Tabbladinhoud laadt pas als je het tabblad opent.
 const StockMutationHistoryCard = lazy(() => import("../StockMutationHistoryCard.js").then((m) => ({ default: m.StockMutationHistoryCard })));
 const OrderHistoryCard = lazy(() => import("../OrderHistoryCard.js").then((m) => ({ default: m.OrderHistoryCard })));
@@ -21,6 +30,12 @@ const ProductCustomFieldsCard = lazy(() => import("../ProductCustomFieldsCard.js
 const ProductLinkCard = lazy(() => import("../ProductLinkCard.js").then((m) => ({ default: m.ProductLinkCard })));
 const FloridayInfoCard = lazy(() => import("../FloridayInfoCard.js").then((m) => ({ default: m.FloridayInfoCard })));
 const ArtikelWizard = lazy(() => import("../ArtikelWizard.js").then((m) => ({ default: m.ArtikelWizard })));
+const TAB_ICON = {
+    voorraad: _jsx(Package, {}),
+    verpakking: _jsx(Boxes, {}),
+    koppelingen: _jsx(Link2, {}),
+    floriday: _jsx(Send, {}),
+};
 const TAB_LABEL = {
     voorraad: "Voorraad",
     verpakking: "Verpakking en samenstelling",
@@ -28,7 +43,7 @@ const TAB_LABEL = {
     floriday: "Floriday",
 };
 function Laden() {
-    return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden\u2026"] }));
+    return _jsx(Skeleton, { className: "h-40 w-full rounded-xl", "aria-label": "Laden\u2026" });
 }
 function toon(v) {
     if (v === null || v === undefined || v === "")
@@ -239,7 +254,7 @@ export function ArtikelPagina({ id, resumeJobId, onNietGevonden }) {
         if (alleConflicten.length)
             setConflicten(alleConflicten);
         if (opgeslagen)
-            toast.success(alleConflicten.length ? "Deels opgeslagen; kies bij de conflicten." : "Opgeslagen (alleen lokaal).");
+            toast.success(alleConflicten.length ? "Deels opgeslagen; kies bij de conflicten." : detail?.heeft_koppeling ? "Opgeslagen. Niet naar Floriday gestuurd." : "Opgeslagen.");
         await laad();
     }
     /** Conflict: neem hun waarde over voor dat veld en leg de nieuwe stand vast. */
@@ -272,7 +287,7 @@ export function ArtikelPagina({ id, resumeJobId, onNietGevonden }) {
             return;
         }
         setArchief(null);
-        toast.success(archiefKeuze === "floriday" ? "Artikel gearchiveerd. De voorraad op Floriday gaat via de gewone wachtrij naar 0." : "Artikel gearchiveerd. Op Floriday is niets veranderd.");
+        toast.success(archiefKeuze === "floriday" ? "Artikel gearchiveerd. De voorraad op Floriday gaat naar 0 zodra Floriday het verwerkt." : "Artikel gearchiveerd. Op Floriday is niets veranderd.");
         await laad();
     }
     async function terugzetten() {
@@ -284,11 +299,23 @@ export function ArtikelPagina({ id, resumeJobId, onNietGevonden }) {
         toast.success("Artikel staat weer in de voorraad.");
         await laad();
     }
+    // Vanaf de controlepagina: open het overzicht vooraf (er wordt niets verstuurd zonder bevestiging).
+    const vraagOverzicht = useRouterState({ select: (st) => Boolean(st.location.state?.stuurOverzicht) });
+    const overzichtGeopend = useRef(false);
+    useEffect(() => {
+        if (!vraagOverzicht || overzichtGeopend.current || !detail)
+            return;
+        overzichtGeopend.current = true;
+        if (floridayActie(detail)) {
+            setFloridayOpen(true);
+            setTab("floriday");
+        }
+    }, [vraagOverzicht, detail]); // eslint-disable-line react-hooks/exhaustive-deps
     if (fout) {
-        return _jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6 text-sm", children: fout }) });
+        return (_jsxs("main", { className: "flex flex-col gap-4 p-4 pb-24 sm:p-6 sm:pb-24", 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" }), " Voorraad"] }), _jsx(InlineAlert, { tone: "fout", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => { setFout(null); geladen.current = false; void laad(); }, children: "Opnieuw proberen" }), children: fout })] }));
     }
     if (!detail || !nieuw) {
-        return _jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6", children: _jsx(Laden, {}) }) });
+        return (_jsxs("main", { className: "flex flex-col gap-4 p-4 pb-24 sm:p-6 sm:pb-24", "aria-busy": "true", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Skeleton, { className: "h-16 w-16 rounded-xl" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-64" }), _jsx(Skeleton, { className: "h-3 w-32" })] })] }), _jsx(KpiRow, { children: [0, 1, 2, 3].map((i) => _jsx(KpiTile, { title: "", value: "", loading: true }, i)) }), _jsx(Skeleton, { className: "h-9 w-80 rounded-lg" }), _jsx(Skeleton, { className: "h-48 w-full rounded-xl" })] }));
     }
     const status = artikelStatus({ ...detail, velden: nieuw });
     const info = STATUS_INFO[status];
@@ -297,17 +324,13 @@ export function ArtikelPagina({ id, resumeJobId, onNietGevonden }) {
     if (floridayOpen && !tabs.includes("floriday") && actie === "op_floriday")
         tabs.push("floriday");
     const rij = alsLijstRij(detail);
-    return (_jsxs("main", { className: "p-6 space-y-4", 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"] }), _jsx(Card, { className: "p-4", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4", children: [_jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted flex items-center justify-center", children: detail.foto ? _jsx("img", { src: detail.foto, alt: detail.naam, className: "h-full w-full object-cover" }) : _jsx(Package, { className: "h-8 w-8 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0 flex-1 basis-64", children: [_jsx("h1", { className: "text-xl font-semibold leading-tight break-words", children: detail.naam }), _jsx("div", { className: "mt-1 text-sm text-muted-foreground break-words", children: detail.artikelnummer ?? "Geen artikelnummer" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Badge, { variant: status === "ok" ? "secondary" : status === "gearchiveerd" ? "outline" : "destructive", children: info.label }), info.actie && info.tab && tabs.includes(info.tab) && (_jsx("button", { type: "button", className: "underline text-muted-foreground", onClick: () => setTab(info.tab), children: info.actie })), vuil && _jsx("span", { className: "text-muted-foreground", children: "\u00B7 Niet-opgeslagen wijzigingen" })] })] }), _jsx("dl", { className: "grid grid-cols-3 gap-4 text-center sm:grid-cols-5", children: [
-                                ["Liggend", aantal(detail.liggend)],
-                                ["Gereserveerd", aantal(detail.gereserveerd)],
-                                ["Inkomend", aantal(detail.inkomend)],
-                                ["Vrij", aantal(detail.vrij)],
-                                ["Prijs per stuk", geld(detail.velden.sale_price === null ? null : Number(detail.velden.sale_price))],
-                            ].map(([l, v], i) => (_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: l }), _jsx("dd", { className: `text-lg font-semibold tabular-nums ${i === 3 && rij.onder_minimum ? "text-destructive" : ""}`, children: v })] }, l))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { onClick: doeOpslaan, disabled: !vuil || opslaan || Boolean(prijsFout) || Boolean(aantalFout), children: [opslaan && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] }), actie && (_jsxs(Button, { variant: "outline", onClick: () => { setFloridayOpen(true); setTab("floriday"); }, children: [_jsx(Send, { className: "mr-2 h-4 w-4" }), actie === "sturen" ? "Naar Floriday sturen" : "Op Floriday zetten"] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Meer acties", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: detail.gearchiveerd_at
-                                                ? _jsx(DropdownMenuItem, { onClick: terugzetten, children: "Terugzetten in voorraad" })
-                                                : _jsx(DropdownMenuItem, { onClick: () => { setArchiefKeuze("hier"); setArchief({}); }, children: "Archiveren\u2026" }) })] })] })] }) }), detail.gearchiveerd_at && (detail.orders_gearchiveerd ?? 0) > 0 && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { children: ["Dit artikel is gearchiveerd, maar er ", detail.orders_gearchiveerd === 1 ? "is 1 open orderregel" : `zijn ${detail.orders_gearchiveerd} open orderregels`, " binnengekomen. De orders zijn gewoon gekoppeld."] }), _jsx(Button, { size: "sm", variant: "outline", onClick: terugzetten, children: "Terugzetten in voorraad" })] })), _jsx(OpslaanContext.Provider, { value: register, children: _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsx(TabsList, { children: tabs.map((t) => _jsx(TabsTrigger, { value: t, children: TAB_LABEL[t] }, t)) }), _jsxs(TabsContent, { value: "voorraad", forceMount: bezocht.has("voorraad") ? true : undefined, className: "space-y-4 data-[state=inactive]:hidden", children: [_jsxs(Card, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "font-medium", children: "Artikelgegevens" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Opslaan is alleen lokaal; er gaat niets automatisch naar Floriday." })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: ARTIKEL_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `veld-${k}`, children: VELD_LABEL[k] }), _jsx(Input, { id: `veld-${k}`, value: invoer[k] ?? "", inputMode: k === "sale_price" ? "decimal" : undefined, onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) }), k === "sale_price" && prijsFout && _jsx("p", { className: "text-xs text-destructive", children: prijsFout })] }, k))) })] }), _jsxs(Card, { className: "p-4 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "grid w-full gap-3 sm:grid-cols-3", children: [VOORRAAD_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `voorraad-${k}`, children: VOORRAAD_LABEL[k] }), _jsx(Input, { id: `voorraad-${k}`, value: invoer[k] ?? "", inputMode: k === "notes" ? undefined : "numeric", onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) })] }, k))), aantalFout && _jsx("p", { className: "text-xs text-destructive sm:col-span-3", children: aantalFout })] }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "font-medium", children: "Voorraad" }), _jsxs("div", { className: "text-muted-foreground", children: ["Liggend wijzig je met Aanpassen of Afboeken \u00B7 Telmoment ", detail.telmoment ? new Date(detail.telmoment).toLocaleString("nl-NL") : _jsx("span", { className: "text-destructive", children: "ontbreekt" })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setAanpassen(true), disabled: Boolean(detail.gearchiveerd_at), children: "Aanpassen" }), _jsx(Button, { variant: "outline", onClick: () => setAfboeken(true), disabled: Boolean(detail.gearchiveerd_at), children: "Afboeken" })] })] }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(StockMutationHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productId: detail.id, sleutels: detail.controle?.mutatie_sleutels ?? undefined }), _jsx(OrderHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam, productId: detail.id, productIds: detail.controle?.zelfde_sleutel_ids }), _jsx(ProductCustomFieldsCard, { productId: detail.id, beginVelden: detail.eigen_velden?.definities, beginWaarden: detail.eigen_velden?.waarden })] })] }), _jsx(TabsContent, { value: "verpakking", forceMount: bezocht.has("verpakking") ? true : undefined, className: "space-y-4 data-[state=inactive]:hidden", children: _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(ProductStructureCard, { productId: detail.id }), _jsx(ArtikelCompositionCard, { productId: detail.id, floridayId: detail.floriday_id }), _jsx(TrayStickerCard, { productId: detail.id })] }) }), _jsxs(TabsContent, { value: "koppelingen", className: "space-y-4", children: [_jsx(TwijfelKiezen, { productId: detail.id, onGekozen: () => void laad() }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [detail.floriday_id && detail.heeft_koppeling ? (_jsx(FloridayInfoCard, { floridayTradeItemId: detail.floriday_id, local: { name: detail.naam, articleNumber: detail.artikelnummer, gtin: detail.velden.barcode ?? null } })) : (_jsx(Card, { className: "p-4 text-sm text-muted-foreground", children: detail.heeft_koppeling ? (detail.floriday_verwijderd_at ? "Dit artikel is in Floriday verwijderd." : "Dit artikel is niet aan Floriday gekoppeld.") : "Er is geen Floriday-koppeling in deze omgeving; het artikel werkt volledig lokaal." })), _jsx(ProductLinkCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam })] })] }), tabs.includes("floriday") && (_jsx(TabsContent, { value: "floriday", children: _jsx(Suspense, { fallback: _jsx(Laden, {}), children: _jsx(ArtikelWizard, { productId: detail.id, resumeJobId: resumeJobId, embedded: true }) }) }))] }) }), _jsx(AanpassenDialog, { rij: aanpassen ? rij : null, onClose: () => setAanpassen(false), onDone: () => { setAanpassen(false); void laad(); } }), _jsx(AfboekenDialog, { rij: afboeken ? rij : null, connectionId: null, onClose: () => setAfboeken(false), onDone: () => { setAfboeken(false); void laad(); } }), _jsx(Dialog, { open: Boolean(conflicten && conflicten.length), onOpenChange: (o) => !o && setConflicten(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Iemand anders heeft dit ook gewijzigd" }), _jsx(DialogDescription, { children: "Er is niets opgeslagen. Kies per veld welke waarde blijft." })] }), _jsx("div", { className: "space-y-3", children: (conflicten ?? []).map((c) => (_jsxs("div", { className: "rounded-md border p-3 text-sm space-y-2", children: [_jsx("div", { className: "font-medium", children: VELD_LABEL[c.veld] ?? VOORRAAD_LABEL[c.veld] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Jouw wijziging" }), toon(c.jouw)] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Hun wijziging" }), toon(c.hun)] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => houdJouw(c), children: "Mijn waarde houden" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => neemHunOver(c), children: "Hun waarde overnemen" })] })] }, c.veld))) })] }) }), _jsx(Dialog, { open: archief !== null, onOpenChange: (o) => !o && setArchief(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Artikel archiveren" }), _jsx(DialogDescription, { children: "Het artikel wordt nooit verwijderd. Je kunt het later terugzetten." })] }), archief?.waarschuwing && (_jsxs("div", { className: "flex gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-destructive" }), _jsxs("span", { children: ["Let op: er ", archief.waarschuwing.open_orders === 1 ? "is 1 open order" : `zijn ${archief.waarschuwing.open_orders} open orders`, " en ", aantal(archief.waarschuwing.gereserveerd), " gereserveerd. Die blijven bestaan."] })] })), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("label", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "radio", checked: archiefKeuze === "hier", onChange: () => setArchiefKeuze("hier") }), _jsxs("span", { children: [_jsx("strong", { children: detail.floriday_id && detail.heeft_koppeling ? "Alleen hier." : "Archiveren." }), " ", detail.floriday_id && detail.heeft_koppeling && !detail.floriday_verwijderd_at
+    const opslaanUit = !vuil || opslaan || Boolean(prijsFout) || Boolean(aantalFout);
+    const gearchiveerd = Boolean(detail.gearchiveerd_at);
+    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"] }), media: _jsx("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-muted", children: detail.foto ? _jsx("img", { src: detail.foto, alt: detail.naam, className: "h-full w-full object-cover" }) : _jsx(Package, { className: "h-7 w-7 text-muted-foreground" }) }), title: detail.naam, updated: _jsx("span", { className: "block break-words", children: detail.artikelnummer ?? "Geen artikelnummer" }), meta: _jsxs(_Fragment, { children: [_jsx(ArtikelStatusIcoon, { status: status }), _jsx("span", { className: status === "ok" ? "text-muted-foreground" : "font-medium", children: info.label }), info.actie && info.tab && tabs.includes(info.tab) && (_jsx("button", { type: "button", className: "text-primary underline-offset-2 hover:underline", onClick: () => setTab(info.tab), children: info.actie })), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsxs("span", { className: "tabular-nums", children: [geld(detail.velden.sale_price === null ? null : Number(detail.velden.sale_price)), " per stuk"] }), detail.floriday_id && detail.heeft_koppeling && (_jsx(HoverTip, { label: "Gekoppeld met Floriday", content: "Gekoppeld met Floriday", className: "h-5 w-5 text-muted-foreground [&_svg]:h-3.5 [&_svg]:w-3.5", children: _jsx(Link2, {}) })), vuil && _jsx("span", { className: "text-xs font-medium text-warning", children: "Niet opgeslagen" })] }), actions: _jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-10 w-10 p-0 sm:h-9 sm:w-auto sm:px-3", "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, { disabled: gearchiveerd, onSelect: () => setAanpassen(true), children: [_jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }), "Voorraad aanpassen"] }), _jsxs(DropdownMenuItem, { disabled: gearchiveerd, onSelect: () => setAfboeken(true), children: [_jsx(Minus, { className: "mr-2 h-4 w-4" }), "Afboeken"] }), actie && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => { setFloridayOpen(true); setTab("floriday"); }, children: [_jsx(Send, { className: "mr-2 h-4 w-4" }), actie === "sturen" ? "Naar Floriday sturen" : "Op Floriday zetten"] })] })), _jsx(DropdownMenuSeparator, {}), gearchiveerd
+                                            ? _jsxs(DropdownMenuItem, { onSelect: terugzetten, children: [_jsx(ArchiveRestore, { className: "mr-2 h-4 w-4" }), "Terugzetten in voorraad"] })
+                                            : _jsxs(DropdownMenuItem, { onSelect: () => { setArchiefKeuze("hier"); setArchief({}); }, children: [_jsx(Archive, { className: "mr-2 h-4 w-4" }), "Archiveren\u2026"] })] })] }), _jsxs(Button, { size: "sm", className: "hidden sm:inline-flex", onClick: doeOpslaan, disabled: opslaanUit, children: [opslaan && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] })] }) }), gearchiveerd && (detail.orders_gearchiveerd ?? 0) > 0 && (_jsxs(InlineAlert, { tone: "let_op", action: _jsx(Button, { size: "sm", variant: "outline", className: "h-8", onClick: terugzetten, children: "Terugzetten in voorraad" }), children: ["Dit artikel is gearchiveerd, maar er ", detail.orders_gearchiveerd === 1 ? "is 1 open orderregel" : `zijn ${detail.orders_gearchiveerd} open orderregels`, " binnengekomen. De orders zijn gewoon gekoppeld."] })), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Liggend", icon: _jsx(Package, {}), value: aantal(detail.liggend), sub: _jsxs(_Fragment, { children: ["Telmoment ", detail.telmoment ? datum(detail.telmoment) : _jsx("span", { className: "text-destructive", children: "ontbreekt" })] }) }), _jsx(KpiTile, { title: "Gereserveerd", icon: _jsx(Lock, {}), value: aantal(detail.gereserveerd), sub: "Voor open orders" }), _jsx(KpiTile, { title: "Vrij beschikbaar", icon: _jsx(Layers, {}), tone: rij.onder_minimum ? "warning" : "default", value: _jsx("span", { className: rij.onder_minimum ? "text-destructive" : "", children: aantal(detail.vrij) }), sub: detail.minimum > 0 ? (rij.onder_minimum ? _jsxs("span", { className: "text-destructive", children: ["Onder minimum (", aantal(detail.minimum), ")"] }) : `Minimum ${aantal(detail.minimum)}`) : "Geen minimum" }), _jsx(KpiTile, { title: "Inkomend", icon: _jsx(ArrowDownToLine, {}), value: aantal(detail.inkomend), sub: "Stuks verwacht" })] }), _jsx(OpslaanContext.Provider, { value: register, children: _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsx(PillTabs, { tabs: tabs.map((t) => ({ value: t, label: TAB_LABEL[t], icon: TAB_ICON[t] })), value: tab, onChange: setTab, label: "Onderdelen van het artikel" }), _jsxs(TabsContent, { value: "voorraad", forceMount: bezocht.has("voorraad") ? true : undefined, className: "mt-4 space-y-4 data-[state=inactive]:hidden", children: [_jsxs(Card, { className: "space-y-4 rounded-xl p-4 shadow-sm sm:p-5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "text-base font-semibold", children: "Artikelgegevens" }), detail.heeft_koppeling && _jsx("span", { className: "text-xs text-muted-foreground", children: "Opslaan bewaart alleen in je eigen administratie. Naar Floriday sturen doe je apart." })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: ARTIKEL_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `veld-${k}`, children: VELD_LABEL[k] }), _jsx(Input, { id: `veld-${k}`, className: "h-10 rounded-lg text-base sm:h-9 sm:text-sm", value: invoer[k] ?? "", inputMode: k === "sale_price" ? "decimal" : undefined, onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) }), k === "sale_price" && prijsFout && _jsx("p", { className: "text-xs text-destructive", children: prijsFout })] }, k))) })] }), _jsxs(Card, { className: "space-y-4 rounded-xl p-4 shadow-sm sm:p-5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold", children: "Voorraad" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Liggend wijzig je met Aanpassen of Afboeken \u00B7 Telmoment ", detail.telmoment ? new Date(detail.telmoment).toLocaleString("nl-NL") : _jsx("span", { className: "text-destructive", children: "ontbreekt" })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "h-9", onClick: () => setAanpassen(true), disabled: gearchiveerd, children: [_jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }), "Aanpassen"] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-9", onClick: () => setAfboeken(true), disabled: gearchiveerd, children: [_jsx(Minus, { className: "mr-2 h-4 w-4" }), "Afboeken"] })] })] }), _jsxs("div", { className: "grid w-full gap-3 sm:grid-cols-3", children: [VOORRAAD_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `voorraad-${k}`, children: VOORRAAD_LABEL[k] }), _jsx(Input, { id: `voorraad-${k}`, className: "h-10 rounded-lg text-base sm:h-9 sm:text-sm", value: invoer[k] ?? "", inputMode: k === "notes" ? undefined : "numeric", onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) })] }, k))), aantalFout && _jsx("p", { className: "text-xs text-destructive sm:col-span-3", children: aantalFout })] })] }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(StockMutationHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productId: detail.id, sleutels: detail.controle?.mutatie_sleutels ?? undefined }), _jsx(OrderHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam, productId: detail.id, productIds: detail.controle?.zelfde_sleutel_ids }), _jsx(ProductCustomFieldsCard, { productId: detail.id, beginVelden: detail.eigen_velden?.definities, beginWaarden: detail.eigen_velden?.waarden })] })] }), _jsx(TabsContent, { value: "verpakking", forceMount: bezocht.has("verpakking") ? true : undefined, className: "mt-4 space-y-4 data-[state=inactive]:hidden", children: _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(ProductStructureCard, { productId: detail.id }), _jsx(ArtikelCompositionCard, { productId: detail.id, floridayId: detail.floriday_id }), _jsx(TrayStickerCard, { productId: detail.id })] }) }), _jsxs(TabsContent, { value: "koppelingen", className: "mt-4 space-y-4", children: [_jsx(TwijfelKiezen, { productId: detail.id, onGekozen: () => void laad() }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [detail.floriday_id && detail.heeft_koppeling ? (_jsx(FloridayInfoCard, { floridayTradeItemId: detail.floriday_id, local: { name: detail.naam, articleNumber: detail.artikelnummer, gtin: detail.velden.barcode ?? null } })) : detail.heeft_koppeling ? (_jsx(Card, { className: "rounded-xl p-4 text-sm text-muted-foreground shadow-sm", children: detail.floriday_verwijderd_at ? "Dit artikel is in Floriday verwijderd." : "Dit artikel is niet aan Floriday gekoppeld." })) : null, _jsx(ProductLinkCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam })] })] }), tabs.includes("floriday") && (_jsx(TabsContent, { value: "floriday", className: "mt-4", children: _jsx(Suspense, { fallback: _jsx(Laden, {}), children: _jsx(ArtikelWizard, { productId: detail.id, resumeJobId: resumeJobId, embedded: true }) }) }))] }) }), _jsx(MobilePrimaryAction, { onClick: () => void doeOpslaan(), disabled: opslaanUit, children: opslaan ? "Opslaan…" : "Opslaan" }), _jsx(AanpassenDialog, { rij: aanpassen ? rij : null, onClose: () => setAanpassen(false), onDone: () => { setAanpassen(false); void laad(); } }), _jsx(AfboekenDialog, { rij: afboeken ? rij : null, connectionId: null, onClose: () => setAfboeken(false), onDone: () => { setAfboeken(false); void laad(); } }), _jsx(Dialog, { open: Boolean(conflicten && conflicten.length), onOpenChange: (o) => !o && setConflicten(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Iemand anders heeft dit ook gewijzigd" }), _jsx(DialogDescription, { children: "Er is niets opgeslagen. Kies per veld welke waarde blijft." })] }), _jsx("div", { className: "space-y-3", children: (conflicten ?? []).map((c) => (_jsxs("div", { className: "rounded-md border p-3 text-sm space-y-2", children: [_jsx("div", { className: "font-medium", children: VELD_LABEL[c.veld] ?? VOORRAAD_LABEL[c.veld] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Jouw wijziging" }), toon(c.jouw)] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Hun wijziging" }), toon(c.hun)] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => houdJouw(c), children: "Mijn waarde houden" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => neemHunOver(c), children: "Hun waarde overnemen" })] })] }, c.veld))) })] }) }), _jsx(Dialog, { open: archief !== null, onOpenChange: (o) => !o && setArchief(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Artikel archiveren" }), _jsx(DialogDescription, { children: "Het artikel wordt nooit verwijderd. Je kunt het later terugzetten." })] }), archief?.waarschuwing && (_jsxs("div", { className: "flex gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-destructive" }), _jsxs("span", { children: ["Let op: er ", archief.waarschuwing.open_orders === 1 ? "is 1 open order" : `zijn ${archief.waarschuwing.open_orders} open orders`, " en ", aantal(archief.waarschuwing.gereserveerd), " gereserveerd. Die blijven bestaan."] })] })), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("label", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "radio", checked: archiefKeuze === "hier", onChange: () => setArchiefKeuze("hier") }), _jsxs("span", { children: [_jsx("strong", { children: detail.floriday_id && detail.heeft_koppeling ? "Alleen hier." : "Archiveren." }), " ", detail.floriday_id && detail.heeft_koppeling && !detail.floriday_verwijderd_at
                                                     ? "Floriday blijft ongewijzigd: het artikel blijft op Floriday te koop."
                                                     : "Het artikel verdwijnt uit de voorraadlijst en de tellers."] })] }), detail.floriday_id && detail.heeft_koppeling && !detail.floriday_verwijderd_at && (_jsxs("label", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "radio", checked: archiefKeuze === "floriday", onChange: () => setArchiefKeuze("floriday") }), _jsxs("span", { children: [_jsx("strong", { children: "Ook in Floriday." }), " De voorraad op Floriday wordt 0."] })] })), archiefKeuze === "floriday" && (_jsxs("div", { className: "rounded-md border p-3 space-y-1", children: [_jsx("div", { className: "font-medium", children: "Overzicht vooraf" }), _jsx("div", { children: "Voorraad op Floriday: wordt 0 (niet meer te koop)." }), _jsxs("div", { children: ["Je eigen voorraad blijft ", aantal(detail.liggend), " liggend."] }), _jsx("div", { className: "text-muted-foreground", children: detail.floriday_stuurt
-                                                ? "Gaat via de gewone Floriday-wachtrij, met de bestaande schrijfstop."
+                                                ? "Wordt op de gewone manier naar Floriday gestuurd. Staat het versturen naar Floriday stil, dan wacht dit tot het weer aan staat."
                                                 : "Floriday is voor dit artikel leidend: er wordt niets verstuurd tot het systeem de voorraad stuurt." })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setArchief(null), children: "Annuleren" }), _jsx(Button, { variant: "destructive", disabled: bezig, onClick: () => archiveren(Boolean(archief?.waarschuwing)), children: archief?.waarschuwing ? "Toch archiveren" : "Archiveren" })] })] }) })] }));
 }

package/dist-lib/components/voorraad/lijst/ImporteerKnop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImporteerKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/ImporteerKnop.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IAAE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,+BAmBlH"}
+{"version":3,"file":"ImporteerKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/ImporteerKnop.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IAAE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,+BAkBlH"}

package/dist-lib/components/voorraad/lijst/ImporteerKnop.js

@@ -16,5 +16,5 @@ function ImportInhoud({ connectionId, onImported }) {
 }
 export function ImporteerKnop({ connectionId, onImported }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), "Importeren"] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Importeren" }), _jsx(DialogDescription, { children: "Download het sjabloon of kies een bestand. Je krijgt eerst een proefcontrole." })] }), open && _jsx(ImportInhoud, { connectionId: connectionId, onImported: onImported })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), "aria-label": "Importeren", className: "h-10 w-10 p-0 sm:h-9 sm:w-auto sm:px-3", children: [_jsx(Upload, { className: "h-4 w-4 sm:mr-2" }), " ", _jsx("span", { className: "hidden sm:inline", children: "Importeren" })] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Importeren" }), _jsx(DialogDescription, { children: "Download het sjabloon of kies een bestand. Je krijgt eerst een proefcontrole." })] }), open && _jsx(ImportInhoud, { connectionId: connectionId, onImported: onImported })] }) })] }));
 }

package/dist-lib/components/voorraad/lijst/LijstExportKnop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LijstExportKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/LijstExportKnop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGrF,sGAAsG;AACtG,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAA;CAAE,+BAuC3F"}
+{"version":3,"file":"LijstExportKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/LijstExportKnop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGrF,sGAAsG;AACtG,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAA;CAAE,+BAsC3F"}

package/dist-lib/components/voorraad/lijst/LijstExportKnop.js

@@ -39,5 +39,5 @@ export function LijstExportKnop({ vraag }) {
             setBezig(null);
         }
     };
-    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: exporteer, disabled: !!bezig, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), bezig ?? "Exporteren"] }));
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: exporteer, disabled: !!bezig, "aria-label": "Exporteren", className: "h-10 w-10 p-0 sm:h-9 sm:w-auto sm:px-3", children: [_jsx(Download, { className: "h-4 w-4 sm:mr-2" }), " ", _jsx("span", { className: "hidden sm:inline", children: bezig ?? "Exporteren" })] }));
 }

package/dist-lib/components/voorraad/lijst/VoorraadLijstTabel.d.ts

@@ -1,10 +1,14 @@
-import { type LijstRij, type LijstSort } from "../../../lib/voorraad-lijst.js";
+import type { ReactNode } from "react";
+import { type LijstRij, type LijstSort, type LijstStatus } from "../../../lib/voorraad-lijst.js";
 export type OptioneleKolom = "artikelnummer" | "minimum" | "inkomend" | "prijs";
 export declare const OPTIONELE_KOLOMMEN: Array<{
     key: OptioneleKolom;
     label: string;
 }>;
-export declare function VoorraadLijstTabel({ rijen, loading, sort, oplopend, onSort, kolommen, selected, onToggleSelect, onToggleAll, onAanpassen, onAfboeken, heeftKoppeling, }: {
+export declare function ArtikelStatusIcoon({ status }: {
+    status: LijstStatus;
+}): import("react").JSX.Element;
+export declare function VoorraadLijstTabel({ rijen, loading, sort, oplopend, onSort, kolommen, selected, onToggleSelect, onToggleAll, onAanpassen, onAfboeken, heeftKoppeling, leeg, }: {
     heeftKoppeling?: boolean;
     rijen: LijstRij[];
     loading: boolean;
@@ -17,5 +21,7 @@ export declare function VoorraadLijstTabel({ rijen, loading, sort, oplopend, onS
     onToggleAll: (ids: string[]) => void;
     onAanpassen: (r: LijstRij) => void;
     onAfboeken: (r: LijstRij) => void;
+    /** Lege staat (verschilt per filter/zoekopdracht). */
+    leeg?: ReactNode;
 }): import("react").JSX.Element;
 //# sourceMappingURL=VoorraadLijstTabel.d.ts.map

package/dist-lib/components/voorraad/lijst/VoorraadLijstTabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoorraadLijstTabel.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/VoorraadLijstTabel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,SAAS,EAEf,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAChF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC;IAAE,GAAG,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAK5E,CAAC;AA+CF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,UAAU,EACV,cAAsB,GACvB,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,+BAyFA"}
+{"version":3,"file":"VoorraadLijstTabel.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/VoorraadLijstTabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAChF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC;IAAE,GAAG,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAK5E,CAAC;AAmBF,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,WAAW,CAAA;CAAE,+BAGrE;AAmBD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,UAAU,EACV,cAAsB,EACtB,IAAI,GACL,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,+BA6FA"}

package/dist-lib/components/voorraad/lijst/VoorraadLijstTabel.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from "@tanstack/react-router";
-import { Button, Checkbox } from "@flowselections/core";
-import { ArrowDown, ArrowUp, CheckCircle2, Euro, ExternalLink, Link2Off, Minus, Package, PackageX, SlidersHorizontal, } from "lucide-react";
-import floridayLogo from "../../../assets/floriday-logo.png.asset.json";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
+import { CheckCircle2, Euro, Link2, Link2Off, Minus, Package, PackageSearch, PackageX, SlidersHorizontal } from "lucide-react";
+import { DataTable } from "../../fs-ui/DataTable.js";
+import { EmptyState } from "../../fs-ui/EmptyState.js";
+import { HoverTip } from "../../fs-ui/HoverTip.js";
+import { StatusIcon } from "../../fs-ui/StatusIcon.js";
 import { aantal, geld, toonFloridayLabel, onderMinimum, STATUS_INFO, } from "../../../lib/voorraad-lijst.js";
 export const OPTIONELE_KOLOMMEN = [
     { key: "artikelnummer", label: "Artikelnummer" },
@@ -10,30 +12,63 @@ export const OPTIONELE_KOLOMMEN = [
     { key: "inkomend", label: "Inkomend" },
     { key: "prijs", label: "Prijs" },
 ];
-function StatusIcoon({ status }) {
+const STATUS_TONE = {
+    ok: "klaar",
+    verpakking: "fout",
+    verwijderd_floriday: "fout",
+    niet_gekoppeld: "open",
+    prijs: "fout",
+    gearchiveerd: "open",
+};
+const STATUS_ICON = {
+    ok: _jsx(CheckCircle2, {}),
+    verpakking: _jsx(PackageX, {}),
+    verwijderd_floriday: _jsx(Link2Off, {}),
+    niet_gekoppeld: _jsx(Link2Off, {}),
+    prijs: _jsx(Euro, {}),
+    gearchiveerd: _jsx(Minus, {}),
+};
+export function ArtikelStatusIcoon({ status }) {
     const info = STATUS_INFO[status];
-    const titel = info.actie ? `${info.label} — ${info.actie}` : info.label;
-    const cls = "h-4 w-4";
-    const icon = status === "verpakking" ? _jsx(PackageX, { className: `${cls} text-destructive` }) :
-        status === "verwijderd_floriday" ? _jsx(Link2Off, { className: `${cls} text-destructive` }) :
-            status === "niet_gekoppeld" ? _jsx(Link2Off, { className: `${cls} text-muted-foreground` }) :
-                status === "prijs" ? _jsx(Euro, { className: `${cls} text-destructive` }) :
-                    status === "gearchiveerd" ? _jsx(Minus, { className: `${cls} text-muted-foreground` }) :
-                        _jsx(CheckCircle2, { className: `${cls} text-primary` });
-    return (_jsxs("span", { title: titel, "aria-label": titel, className: "inline-flex items-center gap-1.5", children: [icon, status !== "ok" && _jsx("span", { className: "text-xs text-muted-foreground hidden xl:inline", children: info.label })] }));
+    return _jsx(StatusIcon, { tone: STATUS_TONE[status], icon: STATUS_ICON[status], label: info.label, detail: info.actie ?? undefined });
 }
-function Kop({ kolom, label, sort, oplopend, onSort, rechts, }) {
-    const actief = sort === kolom;
-    return (_jsx("th", { className: `px-3 py-2 font-medium ${rechts ? "text-right" : "text-left"}`, "aria-sort": actief ? (oplopend ? "ascending" : "descending") : "none", children: _jsxs("button", { type: "button", onClick: () => onSort(kolom), className: `inline-flex items-center gap-1 hover:text-foreground ${actief ? "text-foreground" : ""}`, children: [label, actief && (oplopend ? _jsx(ArrowUp, { className: "h-3 w-3" }) : _jsx(ArrowDown, { className: "h-3 w-3" }))] }) }));
+function Foto({ r }) {
+    return r.foto ? (_jsx("img", { src: r.foto, alt: "", loading: "lazy", className: "h-9 w-9 shrink-0 rounded-lg bg-muted object-cover" })) : (_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted", children: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }) }));
 }
-export function VoorraadLijstTabel({ rijen, loading, sort, oplopend, onSort, kolommen, selected, onToggleSelect, onToggleAll, onAanpassen, onAfboeken, heeftKoppeling = false, }) {
-    const ids = rijen.map((r) => r.id);
-    const allesGekozen = ids.length > 0 && ids.every((id) => selected.has(id));
+function Koppeling({ r, heeftKoppeling }) {
+    if (!toonFloridayLabel(r, heeftKoppeling))
+        return null;
+    return (_jsx(HoverTip, { label: "Gekoppeld met Floriday", content: "Gekoppeld met Floriday", className: "h-5 w-5 text-muted-foreground [&_svg]:h-3.5 [&_svg]:w-3.5", children: _jsx(Link2, {}) }));
+}
+export function VoorraadLijstTabel({ rijen, loading, sort, oplopend, onSort, kolommen, selected, onToggleSelect, onToggleAll, onAanpassen, onAfboeken, heeftKoppeling = false, leeg, }) {
+    const navigate = useNavigate();
     const k = (s) => kolommen.has(s);
-    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: "w-10 px-3 py-2", children: _jsx(Checkbox, { checked: allesGekozen, onCheckedChange: () => onToggleAll(ids), "aria-label": "Alles op deze pagina kiezen" }) }), _jsx(Kop, { kolom: "naam", label: "Artikel", sort: sort, oplopend: oplopend, onSort: onSort }), k("artikelnummer") && _jsx(Kop, { kolom: "artikelnummer", label: "Artikelnummer", sort: sort, oplopend: oplopend, onSort: onSort }), _jsx(Kop, { kolom: "liggend", label: "Liggend", sort: sort, oplopend: oplopend, onSort: onSort, rechts: true }), _jsx(Kop, { kolom: "gereserveerd", label: "Gereserveerd", sort: sort, oplopend: oplopend, onSort: onSort, rechts: true }), _jsx(Kop, { kolom: "vrij", label: "Vrij", sort: sort, oplopend: oplopend, onSort: onSort, rechts: true }), k("minimum") && _jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Minimum" }), k("inkomend") && _jsx(Kop, { kolom: "inkomend", label: "Inkomend", sort: sort, oplopend: oplopend, onSort: onSort, rechts: true }), k("prijs") && _jsx(Kop, { kolom: "prijs", label: "Prijs", sort: sort, oplopend: oplopend, onSort: onSort, rechts: true }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: "Status" }), _jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Acties" })] }) }), _jsxs("tbody", { children: [loading && rijen.length === 0 &&
-                        Array.from({ length: 6 }).map((_, i) => (_jsx("tr", { className: "border-b", children: _jsx("td", { colSpan: 12, className: "px-3 py-3", children: _jsx("div", { className: "h-6 animate-pulse rounded bg-muted" }) }) }, `s${i}`))), !loading && rijen.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 12, className: "px-3 py-10 text-center text-muted-foreground", children: "Geen artikelen gevonden." }) })), rijen.map((r) => {
-                        const rood = onderMinimum(r);
-                        const gearchiveerd = !!r.gearchiveerd_at;
-                        return (_jsxs("tr", { className: `border-b hover:bg-muted/30 ${loading ? "opacity-60" : ""}`, children: [_jsx("td", { className: "px-3 py-2", children: _jsx(Checkbox, { checked: selected.has(r.id), onCheckedChange: () => onToggleSelect(r.id), "aria-label": `Kies ${r.naam}` }) }), _jsx("td", { className: "px-3 py-2", children: _jsxs(Link, { to: "/voorraad/$id", params: { id: r.id }, className: "flex items-center gap-3 min-w-0", children: [r.foto ? (_jsx("img", { src: r.foto, alt: "", loading: "lazy", className: "h-9 w-9 shrink-0 rounded object-cover bg-muted" })) : (_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded bg-muted", children: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }) })), _jsxs("span", { className: "min-w-0", children: [_jsxs("span", { className: "flex items-center gap-1.5 font-medium text-foreground truncate", children: [r.naam, toonFloridayLabel(r, heeftKoppeling) && _jsx("img", { src: floridayLogo.url, alt: "Floriday", title: "Gekoppeld aan Floriday", className: "h-3.5 w-3.5 shrink-0" })] }), _jsxs("span", { className: "block text-xs text-muted-foreground truncate", children: [r.artikelnummer || "Geen artikelnummer", r.soort === "SET" ? " · Samenstelling" : r.soort === "GROUP" ? " · Productgroep" : ""] })] })] }) }), k("artikelnummer") && _jsx("td", { className: "px-3 py-2 text-muted-foreground", children: r.artikelnummer ?? "—" }), _jsx("td", { className: "px-3 py-2 text-right tabular-nums", children: aantal(r.liggend) }), _jsx("td", { className: "px-3 py-2 text-right tabular-nums text-muted-foreground", children: aantal(r.gereserveerd) }), _jsx("td", { className: `px-3 py-2 text-right tabular-nums font-medium ${rood ? "text-destructive" : ""}`, title: rood ? `Onder minimum (${aantal(r.minimum)})` : undefined, children: aantal(r.vrij) }), k("minimum") && _jsx("td", { className: "px-3 py-2 text-right tabular-nums text-muted-foreground", children: aantal(r.minimum) }), k("inkomend") && _jsx("td", { className: "px-3 py-2 text-right tabular-nums text-muted-foreground", children: aantal(r.inkomend) }), k("prijs") && _jsx("td", { className: "px-3 py-2 text-right tabular-nums", children: geld(r.prijs) }), _jsx("td", { className: "px-3 py-2", children: _jsx(StatusIcoon, { status: r.status }) }), _jsx("td", { className: "px-3 py-2", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", title: "Voorraad aanpassen (+/\u2212)", "aria-label": "Voorraad aanpassen", disabled: gearchiveerd || r.soort === "GROUP", onClick: () => onAanpassen(r), children: _jsx(SlidersHorizontal, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", variant: "ghost", title: r.voorraad_sleutel ? "Afboeken" : "Nog geen voorraad om af te boeken", "aria-label": "Afboeken", disabled: gearchiveerd || !r.voorraad_sleutel || r.liggend <= 0, onClick: () => onAfboeken(r), children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx(Button, { asChild: true, size: "sm", variant: "ghost", title: "Openen", "aria-label": "Openen", children: _jsx(Link, { to: "/voorraad/$id", params: { id: r.id }, children: _jsx(ExternalLink, { className: "h-4 w-4" }) }) })] }) })] }, r.id));
-                    })] })] }));
+    const getal = (n, extra = "") => _jsxs("span", { className: "tabular-nums " + extra, children: [aantal(n), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground", children: "stuks" })] });
+    const kolomDefs = [
+        {
+            key: "naam", header: "Artikel", width: "260px", sortKey: "naam",
+            render: (r) => (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(Foto, { r: r }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-foreground", children: r.naam }), _jsx(Koppeling, { r: r, heeftKoppeling: heeftKoppeling })] }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [r.artikelnummer || "Geen artikelnummer", r.soort === "SET" ? " · Samenstelling" : r.soort === "GROUP" ? " · Productgroep" : ""] })] })] })),
+        },
+        k("artikelnummer") && { key: "artikelnummer", header: "Artikelnummer", width: "132px", sortKey: "artikelnummer", render: (r) => _jsx("span", { className: "text-muted-foreground", children: r.artikelnummer ?? "—" }) },
+        { key: "liggend", header: "Liggend", width: "112px", sortKey: "liggend", render: (r) => getal(r.liggend) },
+        { key: "gereserveerd", header: "Gereserveerd", width: "120px", sortKey: "gereserveerd", render: (r) => getal(r.gereserveerd, "text-muted-foreground") },
+        {
+            key: "vrij", header: "Vrij", width: "112px", sortKey: "vrij",
+            render: (r) => {
+                const rood = onderMinimum(r);
+                return rood ? (_jsx(HoverTip, { label: `Onder minimum (${aantal(r.minimum)})`, content: `Onder minimum (${aantal(r.minimum)})`, className: "rounded-sm", children: getal(r.vrij, "font-semibold text-destructive") })) : getal(r.vrij, "font-medium");
+            },
+        },
+        k("minimum") && { key: "minimum", header: "Minimum", width: "112px", render: (r) => getal(r.minimum, "text-muted-foreground") },
+        k("inkomend") && { key: "inkomend", header: "Inkomend", width: "112px", sortKey: "inkomend", render: (r) => getal(r.inkomend, "text-muted-foreground") },
+        k("prijs") && { key: "prijs", header: "Prijs", width: "104px", sortKey: "prijs", render: (r) => _jsx("span", { className: "tabular-nums", children: geld(r.prijs) }) },
+        { key: "status", header: "Status", width: "76px", render: (r) => _jsx(ArtikelStatusIcoon, { status: r.status }) },
+    ];
+    const columns = kolomDefs.filter(Boolean);
+    const open = (r) => navigate({ to: "/voorraad/$id", params: { id: r.id } });
+    return (_jsx(DataTable, { columns: columns, rows: rijen, getId: (r) => r.id, loading: loading, sort: { key: sort, asc: oplopend }, onSort: (key) => onSort(key), onOpen: open, openLabel: "Artikel openen", selection: { selected, onToggle: onToggleSelect, onToggleAll, label: (r) => r.naam }, empty: leeg ?? _jsx(EmptyState, { icon: _jsx(PackageSearch, { className: "h-6 w-6" }), title: "Geen artikelen gevonden" }), rowActions: (r) => {
+            const gearchiveerd = !!r.gearchiveerd_at;
+            const knop = "inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+            return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: knop, title: "Voorraad aanpassen (+/\u2212)", "aria-label": "Voorraad aanpassen", disabled: gearchiveerd || r.soort === "GROUP", onClick: () => onAanpassen(r), children: _jsx(SlidersHorizontal, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: knop, title: r.voorraad_sleutel ? "Afboeken" : "Nog geen voorraad om af te boeken", "aria-label": "Afboeken", disabled: gearchiveerd || !r.voorraad_sleutel || r.liggend <= 0, onClick: () => onAfboeken(r), children: _jsx(Minus, { className: "h-4 w-4" }) })] }));
+        }, mobileCard: (r) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Foto, { r: r }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate font-medium", children: r.naam }), _jsx(Koppeling, { r: r, heeftKoppeling: heeftKoppeling })] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: r.artikelnummer || "Geen artikelnummer" }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-x-3 text-xs tabular-nums text-muted-foreground", children: [_jsxs("span", { children: ["Liggend ", aantal(r.liggend)] }), _jsxs("span", { className: onderMinimum(r) ? "font-semibold text-destructive" : "text-foreground", children: ["Vrij ", aantal(r.vrij)] }), _jsx("span", { children: geld(r.prijs) })] })] }), _jsx(ArtikelStatusIcoon, { status: r.status })] })) }));
 }