@flowselections/floriday-verkoop-module 1.0.41 → 1.0.43

package/dist-lib/components/verkoop/SalesOrdersTable.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
 import type { SalesOrderDTO } from "../../lib/salesorders-mapping";
-export declare function SalesOrdersTable({ orders, loading, onSelectOrder, onDeleteOrder, onEditOrder, onConfirmOrder, }: {
+/** Stabiele rij-id: buffers zijn serverside al samengevouwen tot één rij. */
+export declare function salesOrderRowId(row: SalesOrderDTO): string;
+export declare function SalesOrdersTable({ orders, loading, onSelectOrder, onDeleteOrder, onEditOrder, selectedIds, onSelectionChange, }: {
     orders: SalesOrderDTO[];
     loading?: boolean;
     onSelectOrder?: (order: SalesOrderDTO) => void;
     onDeleteOrder?: (order: SalesOrderDTO) => void;
     onEditOrder?: (order: SalesOrderDTO) => void;
-    onConfirmOrder?: (order: SalesOrderDTO) => void;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=SalesOrdersTable.d.ts.map

package/dist-lib/components/verkoop/SalesOrdersTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAmCnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,WAAW,EACX,cAAc,GACf,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD,qBAwOA"}
+{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAuBjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAmCnE,6EAA6E;AAC7E,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAG1D;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,iBAAiB,GAClB,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC7C,qBAkPA"}

package/dist-lib/components/verkoop/SalesOrdersTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Badge, Checkbox, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
 import { formatLoadUnits } from "../../lib/load-carrier-labels";
 import { useAllowedLoadCarriers } from "../../lib/useAllowedLoadCarriers";
@@ -36,19 +36,33 @@ function StatusTag({ order }) {
     const stage = order.stage ?? "incoming";
     return (_jsx(Badge, { variant: "outline", className: `border-transparent ${orderStageBadgeClass(stage)}`, children: orderStageLabel(stage) }));
 }
-export function SalesOrdersTable({ orders, loading, onSelectOrder, onDeleteOrder, onEditOrder, onConfirmOrder, }) {
-    const [selected, setSelected] = useState(new Set());
+/** Stabiele rij-id: buffers zijn serverside al samengevouwen tot één rij. */
+export function salesOrderRowId(row) {
+    const bufferSize = row.bufferSize ?? 1;
+    return row.bufferId && bufferSize > 1 ? `buf-${row.bufferId}` : row.id;
+}
+export function SalesOrdersTable({ orders, loading, onSelectOrder, onDeleteOrder, onEditOrder, selectedIds, onSelectionChange, }) {
+    const [internalSelected, setInternalSelected] = useState([]);
+    const selected = useMemo(() => new Set(selectedIds ?? internalSelected), [selectedIds, internalSelected]);
     const allowedCarrierCodes = useAllowedLoadCarriers().allowed;
-    const allChecked = orders.length > 0 && selected.size === orders.length;
+    const rowIds = useMemo(() => orders.map(salesOrderRowId), [orders]);
+    const allChecked = rowIds.length > 0 && rowIds.every((id) => selected.has(id));
+    const someChecked = !allChecked && rowIds.some((id) => selected.has(id));
     // Omzetkolom alleen tonen wanneer er daadwerkelijk bedragen bekend zijn.
     const showRevenue = orders.some((o) => (o.revenue ?? 0) > 0);
     const columnCount = showRevenue ? 10 : 9;
-    const toggle = (id) => setSelected((s) => {
-        const n = new Set(s);
-        n.has(id) ? n.delete(id) : n.add(id);
-        return n;
-    });
-    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsx("div", { className: "max-h-[70vh] overflow-y-auto overflow-x-auto overscroll-contain [scrollbar-gutter:stable]", style: { WebkitOverflowScrolling: "touch" }, children: _jsxs(Table, { className: "min-w-[950px] [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-card", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Vervoerder" }), _jsx(TableHead, { children: "Status" }), showRevenue && _jsx(TableHead, { children: "Omzet" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Besteld ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
+    const applySelection = (ids) => {
+        if (onSelectionChange)
+            onSelectionChange(ids);
+        else
+            setInternalSelected(ids);
+    };
+    const toggle = (id) => {
+        const next = new Set(selected);
+        next.has(id) ? next.delete(id) : next.add(id);
+        applySelection(Array.from(next));
+    };
+    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsx("div", { className: "max-h-[70vh] overflow-y-auto overflow-x-auto overscroll-contain [scrollbar-gutter:stable]", style: { WebkitOverflowScrolling: "touch" }, children: _jsxs(Table, { className: "min-w-[950px] [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-card", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { "aria-label": "Alle bestellingen selecteren", checked: allChecked ? true : someChecked ? "indeterminate" : false, onCheckedChange: (v) => applySelection(v === true ? rowIds : []) }) }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Vervoerder" }), _jsx(TableHead, { children: "Status" }), showRevenue && _jsx(TableHead, { children: "Omzet" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Besteld ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
                                 Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: columnCount + 1 }).map((__, j) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-6 w-full" }) }, j))) }, `s-${i}`))), !loading && orders.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columnCount + 1, className: "py-12 text-center text-muted-foreground", children: "Geen verkooporders gevonden." }) })), !loading &&
                                 orders.map((row) => {
                                     // Buffers zijn serverside al samengevouwen tot één rij.
@@ -70,8 +84,8 @@ export function SalesOrdersTable({ orders, loading, onSelectOrder, onDeleteOrder
                                                                         ? "Buffer-orders kunnen niet gebundeld bewerkt worden."
                                                                         : row.isLocal
                                                                             ? undefined
-                                                                            : "FO-orders kunnen niet bewerkt worden.", children: "Bewerken" }), _jsx(DropdownMenuItem, { onClick: () => onSelectOrder?.(row), children: "Details bekijken" }), _jsx(DropdownMenuItem, { onClick: () => onConfirmOrder?.(row), children: "Bevestigen" }), !isBuffer && row.isLocal ? (_jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => onDeleteOrder?.(row), children: "Verwijderen" })) : (_jsxs(DropdownMenuItem, { disabled: true, title: isBuffer
-                                                                        ? "Buffer-orders kunnen niet gebundeld verwijderd worden."
-                                                                        : "FO-orders kunnen niet verwijderd worden.", children: ["Verwijderen", isBuffer ? "" : " (FO)"] }))] })] }) })] }, rowId));
+                                                                            : "FO-orders kunnen niet bewerkt worden.", children: "Bewerken" }), _jsx(DropdownMenuItem, { onClick: () => onSelectOrder?.(row), children: "Details bekijken" }), !isBuffer && row.isLocal ? (_jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => onDeleteOrder?.(row), children: row.stage === "cancelled" ? "Definitief verwijderen" : "Annuleren" })) : (_jsxs(DropdownMenuItem, { disabled: true, title: isBuffer
+                                                                        ? "Buffer-orders kunnen niet gebundeld geannuleerd worden."
+                                                                        : "FO-orders annuleer je in Floriday.", children: ["Annuleren", isBuffer ? "" : " (FO)"] }))] })] }) })] }, rowId));
                                 })] })] }) }) }));
 }

package/dist-lib/components/verkoop/VerkoopOrdersPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AA4DA,wBAAgB,iBAAiB,gCAoahC"}
+{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,iBAAiB,gCA4mBhC"}

package/dist-lib/components/verkoop/VerkoopOrdersPage.js

@@ -1,4 +1,4 @@
-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, useState } from "react";
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
 import { Download, Plus, AlertTriangle, RefreshCw, ChevronLeft, ChevronRight, Filter, } from "lucide-react";
@@ -7,15 +7,15 @@ import { useNavigate } from "@tanstack/react-router";
 import { useQueryClient } from "@tanstack/react-query";
 import { supabase } from "../../integrations/supabase/client";
 import { runSalesOrdersSync } from "../../lib/salesorders.functions";
-import { deleteLocalOrder } from "../../lib/create-order.functions";
+import { cancelLocalOrder, deleteLocalOrder } from "../../lib/create-order.functions";
 import { runTradeItemsSync } from "../../lib/tradeitems.functions";
-import { ordersToCsv, } from "../../lib/salesorders-mapping";
+import { ordersToCsv, parseOrderRowId, } from "../../lib/salesorders-mapping";
 import { listSalesOrders } from "../../lib/salesorders-list.functions";
 import { derivePeriodWindow, useSalesOrdersQuery } from "../../lib/useSalesOrdersQuery";
 import { AnalyticsCards } from "./AnalyticsCards";
 import { SalesOrdersFilters } from "./SalesOrdersFilters";
 import { SalesOrdersFilterPanel, countActiveFilters, } from "./SalesOrdersFilterPanel";
-import { SalesOrdersTable } from "./SalesOrdersTable";
+import { SalesOrdersTable, salesOrderRowId } from "./SalesOrdersTable";
 import { EditLocalOrderDialog } from "./EditLocalOrderDialog";
 import { ORDER_STAGES } from "../../lib/order-status";
 const STATUS_TABS = [
@@ -50,28 +50,109 @@ export function VerkoopOrdersPage() {
     const triggerSync = useServerFn(runSalesOrdersSync);
     const triggerTradeItemsSync = useServerFn(runTradeItemsSync);
     const triggerDeleteOrder = useServerFn(deleteLocalOrder);
-    const [orderPendingDelete, setOrderPendingDelete] = useState(null);
+    const triggerCancelOrder = useServerFn(cancelLocalOrder);
+    const [pendingAction, setPendingAction] = useState(null);
+    const [cancelReason, setCancelReason] = useState("");
     const [deleting, setDeleting] = useState(false);
+    const [deleteProgress, setDeleteProgress] = useState(0);
+    const [selectedRowIds, setSelectedRowIds] = useState([]);
     const [editOrderId, setEditOrderId] = useState(null);
-    const handleDeleteOrder = async () => {
-        if (!orderPendingDelete)
+    // Rijen die daadwerkelijk geraakt worden: bij een samengevouwen buffer alle
+    // onderliggende orders, anders alleen de rij zelf.
+    const deleteTargets = (row) => {
+        const ids = (row.bufferSize ?? 1) > 1 && row.bufferOrderIds?.length
+            ? row.bufferOrderIds
+            : [row.id];
+        return Array.from(new Set(ids));
+    };
+    // Alle order-ids achter een selectie, gesplitst in bruikbaar en overgeslagen
+    // (Floriday-orders kunnen hier niet geannuleerd of verwijderd worden).
+    const collectDeletePlan = (rows) => {
+        const deletable = [];
+        let skipped = 0;
+        const seen = new Set();
+        for (const row of rows) {
+            for (const target of deleteTargets(row)) {
+                if (seen.has(target))
+                    continue;
+                seen.add(target);
+                const parsed = parseOrderRowId(target);
+                if (!parsed || parsed.kind !== "order") {
+                    skipped += 1;
+                    continue;
+                }
+                deletable.push({ id: parsed.uuid, kind: parsed.kind });
+            }
+        }
+        return { deletable, skipped, total: seen.size };
+    };
+    const readableError = (e, mode) => {
+        const msg = typeof e?.message === "string" ? e.message.trim() : "";
+        if (!msg || msg.startsWith("[") || msg.startsWith("{"))
+            return mode === "cancel" ? "Annuleren mislukt" : "Verwijderen mislukt";
+        return msg;
+    };
+    const handleConfirmAction = async () => {
+        if (!pendingAction)
+            return;
+        const mode = pendingAction.mode;
+        const { deletable, skipped } = collectDeletePlan(pendingAction.rows);
+        if (deletable.length === 0) {
+            toast.error(mode === "cancel"
+                ? "Geen van de geselecteerde bestellingen kan geannuleerd worden."
+                : "Geen van de geselecteerde bestellingen kan verwijderd worden.");
+            setPendingAction(null);
             return;
-        const rawId = orderPendingDelete.id.startsWith("local:")
-            ? orderPendingDelete.id.slice("local:".length)
-            : orderPendingDelete.id;
-        try {
-            setDeleting(true);
-            const res = await triggerDeleteOrder({ data: { orderId: rawId } });
-            toast.success(`Bestelling verwijderd — ${res.reversalEntries} voorraadmutatie(s) teruggedraaid`);
-            setOrderPendingDelete(null);
-            await refetch();
         }
-        catch (e) {
-            toast.error(e?.message ?? "Verwijderen mislukt");
+        setDeleting(true);
+        setDeleteProgress(0);
+        let done = 0;
+        let reversals = 0;
+        const failed = [];
+        for (const target of deletable) {
+            try {
+                if (mode === "cancel") {
+                    await triggerCancelOrder({
+                        data: { orderId: target.id, reason: cancelReason.trim() || undefined },
+                    });
+                }
+                else {
+                    const res = await triggerDeleteOrder({ data: { orderId: target.id } });
+                    reversals += res.reversalEntries;
+                }
+                done += 1;
+            }
+            catch (e) {
+                failed.push(readableError(e, mode));
+            }
+            setDeleteProgress((p) => p + 1);
         }
-        finally {
-            setDeleting(false);
+        setDeleting(false);
+        setDeleteProgress(0);
+        if (done > 0) {
+            const extra = [];
+            if (mode === "cancel")
+                extra.push("voorraad teruggeboekt");
+            else
+                extra.push(`${reversals} voorraadmutatie(s) teruggedraaid`);
+            if (skipped > 0)
+                extra.push(`${skipped} overgeslagen`);
+            if (failed.length > 0)
+                extra.push(`${failed.length} mislukt`);
+            const verb = mode === "cancel" ? "geannuleerd" : "verwijderd";
+            toast.success(deletable.length > 1
+                ? `${done} van ${deletable.length} bestelling(en) ${verb} — ${extra.join(", ")}`
+                : `Bestelling ${verb} — ${extra.join(", ")}`);
+        }
+        if (failed.length > 0) {
+            toast.error(Array.from(new Set(failed)).join(" · "));
+        }
+        if (done > 0) {
+            setPendingAction(null);
+            setCancelReason("");
+            setSelectedRowIds([]);
         }
+        await refetch();
     };
     // Serverside gefilterd, gesorteerd en gepagineerd: de browser krijgt alleen
     // de zichtbare pagina plus totalen/tellingen.
@@ -81,6 +162,13 @@ export function VerkoopOrdersPage() {
         pageSize,
     });
     const paged = data?.orders ?? [];
+    // Selectie voor bulkacties: alleen rijen die nu zichtbaar zijn.
+    const selectedRows = paged.filter((o) => selectedRowIds.includes(salesOrderRowId(o)));
+    const selectedPlan = collectDeletePlan(selectedRows);
+    // Selectie leegmaken bij wisselen van tabblad, pagina of filters.
+    useEffect(() => {
+        setSelectedRowIds([]);
+    }, [tab, page, filters]);
     const activeEnvironment = data?.environment ?? "staging";
     const totals = data?.totals ?? {
         revenue: 0,
@@ -182,15 +270,24 @@ export function VerkoopOrdersPage() {
                                         (active
                                             ? "bg-primary text-primary-foreground"
                                             : "bg-muted text-muted-foreground"), children: count })] }, t.id));
-                    }) }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(SalesOrdersFilters, { value: filters, onChange: setFilters }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setFilterPanelOpen(true), "aria-label": "Filters", children: [_jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters", activeFilterCount > 0 && (_jsx("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: activeFilterCount }))] }), _jsx(Button, { variant: "outline", size: "icon", onClick: handleSync, disabled: syncing, "aria-label": "Synchroniseren", title: "Synchroniseren", children: _jsx(RefreshCw, { className: "h-4 w-4 " + (syncing ? "animate-spin" : "") }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), " Exporteren"] }), _jsxs(Button, { size: "sm", onClick: () => navigate({ to: "/floriday-verkoop/verkooporders/nieuw" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Bestelling aanmaken"] })] })] }), _jsx(AnalyticsCards, { totals: totals, loading: isLoading }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-destructive", children: "Floriday gegevens konden niet geladen worden" }), _jsx("div", { className: "mt-1 text-muted-foreground", children: error.message })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => refetch(), disabled: isFetching, children: "Opnieuw proberen" })] })), (warnings.length > 0 || truncated) && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-600" }), _jsxs("div", { className: "space-y-1 text-muted-foreground", children: [warnings.map((w) => (_jsx("div", { children: w }, w))), truncated && (_jsx("div", { children: "Niet alle orders konden worden meegenomen. Kies een kortere periode voor een volledig overzicht." }))] })] })), _jsx(SalesOrdersTable, { orders: paged, loading: isLoading, onSelectOrder: (o) => navigate({
+                    }) }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(SalesOrdersFilters, { value: filters, onChange: setFilters }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setFilterPanelOpen(true), "aria-label": "Filters", children: [_jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters", activeFilterCount > 0 && (_jsx("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: activeFilterCount }))] }), _jsx(Button, { variant: "outline", size: "icon", onClick: handleSync, disabled: syncing, "aria-label": "Synchroniseren", title: "Synchroniseren", children: _jsx(RefreshCw, { className: "h-4 w-4 " + (syncing ? "animate-spin" : "") }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), " Exporteren"] }), _jsxs(Button, { size: "sm", onClick: () => navigate({ to: "/floriday-verkoop/verkooporders/nieuw" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Bestelling aanmaken"] })] })] }), _jsx(AnalyticsCards, { totals: totals, loading: isLoading }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-destructive", children: "Floriday gegevens konden niet geladen worden" }), _jsx("div", { className: "mt-1 text-muted-foreground", children: error.message })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => refetch(), disabled: isFetching, children: "Opnieuw proberen" })] })), (warnings.length > 0 || truncated) && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-600" }), _jsxs("div", { className: "space-y-1 text-muted-foreground", children: [warnings.map((w) => (_jsx("div", { children: w }, w))), truncated && (_jsx("div", { children: "Niet alle orders konden worden meegenomen. Kies een kortere periode voor een volledig overzicht." }))] })] })), selectedRows.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-lg border border-primary/30 bg-primary/5 p-3", children: [_jsxs("div", { className: "text-sm text-foreground", children: [_jsx("span", { className: "font-medium", children: selectedRows.length }), " geselecteerd", selectedPlan.total !== selectedRows.length && (_jsxs("span", { className: "text-muted-foreground", children: [" ", "\u00B7 ", selectedPlan.total, " onderliggende bestelling(en)"] })), selectedPlan.skipped > 0 && (_jsxs("span", { className: "text-muted-foreground", children: [" ", "\u00B7 ", selectedPlan.skipped, " Floriday-order(s) worden overgeslagen"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedRowIds([]), children: "Selectie wissen" }), _jsx(Button, { size: "sm", className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", disabled: selectedPlan.deletable.length === 0, onClick: () => {
+                                    setCancelReason("");
+                                    setPendingAction({
+                                        rows: selectedRows,
+                                        mode: selectedRows.every((r) => r.stage === "cancelled") ? "delete" : "cancel",
+                                    });
+                                }, children: selectedRows.every((r) => r.stage === "cancelled")
+                                    ? "Selectie definitief verwijderen"
+                                    : "Selectie annuleren" })] })] })), _jsx(SalesOrdersTable, { orders: paged, loading: isLoading, selectedIds: selectedRowIds, onSelectionChange: setSelectedRowIds, onSelectOrder: (o) => navigate({
                     to: "/floriday-verkoop/verkooporders/$salesOrderId",
                     params: { salesOrderId: o.id },
                 }), onDeleteOrder: (o) => {
                     if (!o.isLocal) {
-                        toast.error("FO-orders kunnen niet verwijderd worden.");
+                        toast.error("FO-orders kunnen hier niet geannuleerd worden. Annuleer deze in Floriday.");
                         return;
                     }
-                    setOrderPendingDelete(o);
+                    setCancelReason("");
+                    setPendingAction({ rows: [o], mode: o.stage === "cancelled" ? "delete" : "cancel" });
                 }, onEditOrder: (o) => {
                     if (!o.isLocal) {
                         toast.error("FO-orders kunnen niet bewerkt worden.");
@@ -198,10 +295,27 @@ export function VerkoopOrdersPage() {
                     }
                     const rawId = o.id.startsWith("local:") ? o.id.slice("local:".length) : o.id;
                     setEditOrderId(rawId);
-                }, onConfirmOrder: (o) => navigate({
-                    to: "/floriday-verkoop/verkooporders/$salesOrderId",
-                    params: { salesOrderId: o.id },
-                }) }), orderPendingDelete && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", onClick: () => !deleting && setOrderPendingDelete(null), children: _jsxs("div", { className: "w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Bestelling verwijderen?" }), _jsxs("p", { className: "mt-2 text-sm text-muted-foreground", children: ["Weet je zeker dat je bestelling", " ", _jsx("span", { className: "font-medium text-foreground", children: orderPendingDelete.orderNumber || orderPendingDelete.id }), " ", "wilt verwijderen? Alle voorraadmutaties van deze bestelling worden automatisch teruggedraaid."] }), _jsxs("div", { className: "mt-5 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setOrderPendingDelete(null), disabled: deleting, children: "Annuleren" }), _jsx(Button, { size: "sm", onClick: handleDeleteOrder, disabled: deleting, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: deleting ? "Bezig…" : "Verwijderen" })] })] }) })), editOrderId && (_jsx(EditLocalOrderDialog, { orderId: editOrderId, open: !!editOrderId, onOpenChange: (o) => !o && setEditOrderId(null) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { children: totalCount === 0
+                } }), pendingAction && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", onClick: () => !deleting && setPendingAction(null), children: _jsxs("div", { className: "w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [(() => {
+                            const rows = pendingAction.rows;
+                            const isCancel = pendingAction.mode === "cancel";
+                            const plan = collectDeletePlan(rows);
+                            const single = rows[0];
+                            const isBulk = rows.length > 1;
+                            const verb = isCancel ? "annuleren" : "definitief verwijderen";
+                            return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: isBulk
+                                            ? `${rows.length} regels ${verb}?`
+                                            : plan.total > 1
+                                                ? `${plan.total} bestellingen ${verb}?`
+                                                : `Bestelling ${verb}?` }), _jsxs("p", { className: "mt-2 text-sm text-muted-foreground", children: [isBulk ? (_jsxs(_Fragment, { children: ["Weet je zeker dat je", " ", _jsxs("span", { className: "font-medium text-foreground", children: [rows.length, " geselecteerde regels"] }), " ", "wilt ", verb, "? Dit gaat om ", plan.total, " bestelling(en) in totaal."] })) : (_jsxs(_Fragment, { children: ["Weet je zeker dat je ", plan.total > 1 ? "deze buffer met " : "", _jsx("span", { className: "font-medium text-foreground", children: plan.total > 1
+                                                            ? `${plan.total} bestellingen`
+                                                            : single?.orderNumber || single?.id }), " ", "wilt ", verb, "?"] })), isCancel
+                                                ? " De bestelling blijft bewaard onder Geannuleerd, gaat uit de planning en facturatie, en de voorraad wordt teruggeboekt."
+                                                : " De bestelling wordt definitief gewist; resterende voorraadmutaties worden teruggedraaid."] }), isCancel && (_jsxs("label", { className: "mt-4 block text-sm text-foreground", children: ["Reden (optioneel)", _jsx("textarea", { value: cancelReason, onChange: (e) => setCancelReason(e.target.value), rows: 2, maxLength: 500, placeholder: "Bijv. klant heeft geannuleerd", className: "mt-1 w-full rounded-md border border-input bg-background p-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" })] })), plan.skipped > 0 && (_jsxs("p", { className: "mt-2 text-sm text-amber-600", children: [plan.skipped, " van de ", plan.total, " zijn Floriday-orders en worden overgeslagen."] })), plan.deletable.length === 0 && (_jsxs("p", { className: "mt-2 text-sm text-destructive", children: ["Geen van deze regels kan hier ", verb, "."] }))] }));
+                        })(), _jsxs("div", { className: "mt-5 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setPendingAction(null), disabled: deleting, children: "Sluiten" }), _jsx(Button, { size: "sm", onClick: handleConfirmAction, disabled: deleting || collectDeletePlan(pendingAction.rows).deletable.length === 0, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: deleting
+                                        ? `Bezig… ${deleteProgress}/${collectDeletePlan(pendingAction.rows).deletable.length}`
+                                        : pendingAction.mode === "cancel"
+                                            ? "Order annuleren"
+                                            : "Definitief verwijderen" })] })] }) })), editOrderId && (_jsx(EditLocalOrderDialog, { orderId: editOrderId, open: !!editOrderId, onOpenChange: (o) => !o && setEditOrderId(null) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { children: totalCount === 0
                             ? "Geen resultaten"
                             : totalCount === 1
                                 ? "1 resultaat"