@flowselections/mailbox-orders 1.0.55 → 1.0.58

package/dist-lib/components/MailboxSkippedPage.js

@@ -2,28 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { CalendarClock, Filter, MailX, Search } from "lucide-react";
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from "@flowselections/core";
+import { CalendarClock, MailX, Search } from "lucide-react";
+import { Button, toast } from "@flowselections/core";
+import { fmtDayTime } from "../lib/format-date.js";
+import { label, ANALYSIS_STATE, FILTER_OUTCOME } from "../lib/labels.js";
 import { listSkippedMessages, analyzeMessageNow } from "../lib/mailbox.functions.js";
 import { TablePagination } from "./TablePagination.js";
 import { usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
 import { MailboxPageFrame } from "./MailboxPageFrame.js";
-import { DataTable } from "./fs-ui/DataTable.js";
+import { DataTable, CellText } from "./fs-ui/DataTable.js";
+import { FilterPanel, FilterOptions, PERIOD_OPTIONS } from "./fs-ui/FilterPanel.js";
 import { StatusIcon } from "./fs-ui/StatusIcon.js";
 import { EmptyState } from "./fs-ui/EmptyState.js";
-import { InlineAlert } from "./fs-ui/InlineAlert.js";
 import { TableSkeleton } from "./fs-ui/TableSkeleton.js";
 import { Toolbar } from "./fs-ui/Toolbar.js";
 import { SearchInput } from "./fs-ui/SearchInput.js";
 import { FilterChips } from "./fs-ui/FilterChips.js";
 import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
+import { RowMenu } from "./fs-ui/RowMenu.js";
 const statusOf = (m) => m.analysis_state === "wacht"
-    ? { label: "Wacht op uitlezen", tone: "amber" }
-    : m.filter_outcome === "te_oud"
-        ? { label: "Te oud", tone: "grey" }
-        : m.filter_outcome === "geen_bestelling"
-            ? { label: "Geen bestelling", tone: "grey" }
-            : { label: "Overgeslagen", tone: "grey" };
+    ? { label: label(ANALYSIS_STATE, "wacht"), tone: "amber" }
+    : m.filter_outcome === "te_oud" || m.filter_outcome === "geen_bestelling"
+        ? { label: label(FILTER_OUTCOME, m.filter_outcome), tone: "grey" }
+        : { label: "Overgeslagen", tone: "grey" };
 /** Reden in gewone woorden (codes uit de verwerking worden vertaald). */
 const reasonText = (m) => {
     const raw = String(m.analysis_note || m.filter_reason || "");
@@ -33,6 +34,11 @@ const reasonText = (m) => {
         return "Uit een map die niet gevolgd wordt";
     if (/map onbekend/i.test(raw))
         return "Map niet bekend";
+    // Nooit ruwe codes (snake_case, HOOFDLETTERCODES, [haakjes]) in beeld.
+    if (/[a-z]+_[a-z_]+|\b[A-Z]{2,}_[A-Z_]+\b|\[[^\]]*\]/.test(raw)) {
+        console.warn("[mailbox] reden", raw);
+        return "";
+    }
     return raw;
 };
 const PERIOD_LABEL = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
@@ -55,6 +61,7 @@ export function MailboxSkippedPage() {
     const [sortOrder, setSortOrder] = usePersistedState("mailbox-skipped:sort", "date-desc");
     const [cursor, setCursor] = useState(null);
     const [helpOpen, setHelpOpen] = useState(false);
+    const [filtersOpen, setFiltersOpen] = useState(false);
     const searchRef = useRef(null);
     const filtered = useMemo(() => {
         const q = normalizeText(search).trim();
@@ -102,38 +109,43 @@ export function MailboxSkippedPage() {
         }
     };
     useListHotkeys({
-        disabled: helpOpen,
+        disabled: helpOpen || filtersOpen,
         onSearch: () => searchRef.current?.focus(),
         onNext: () => setCursor((c) => (paged.length ? Math.min((c ?? -1) + 1, paged.length - 1) : null)),
         onPrev: () => setCursor((c) => (paged.length ? Math.max((c ?? 1) - 1, 0) : null)),
         onEscape: hasActiveFilters ? clearFilters : undefined,
         onHelp: () => setHelpOpen(true),
     });
-    const actionBtn = (m) => (_jsx(Button, { size: "sm", variant: "outline", className: "h-8", disabled: busyId === m.id, onClick: () => run(m.id), children: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu uitlezen" : "Toch uitlezen" }));
+    const rowAction = (m) => (_jsx(RowMenu, { label: `Acties voor ${m.from_name || m.from_email || "mail"}`, items: [{ label: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu uitlezen" : "Toch uitlezen", disabled: busyId === m.id, onSelect: () => void run(m.id) }] }));
     const columns = [
         {
-            key: "afzender", header: "Afzender", width: "minmax(160px,1.2fr)",
-            cell: (m) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: m.from_name || m.from_email || "Onbekend" }), m.from_name && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.from_email })] })),
+            key: "afzender", header: "Afzender", width: 200,
+            cell: (m) => _jsx(CellText, { primary: m.from_name || m.from_email || "Onbekend", secondary: m.from_name ? m.from_email : undefined, strong: true }),
         },
         {
-            key: "bericht", header: "Bericht", width: "minmax(240px,2.2fr)",
-            cell: (m) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: m.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.preview || "" })] })),
+            key: "bericht", header: "Bericht", width: 300,
+            cell: (m) => _jsx(CellText, { primary: m.subject || "(geen onderwerp)", secondary: m.preview || "" }),
         },
         {
-            key: "datum", header: "Ontvangen", width: "120px", sortable: true,
-            cell: (m) => _jsx("span", { className: "tabular-nums text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "–" }),
+            key: "datum", header: "Ontvangen", width: 132, sortable: true,
+            cell: (m) => _jsx("span", { className: "block truncate tabular-nums", children: fmtDayTime(m.received_at) }),
         },
         {
-            key: "reden", header: "Reden", width: "minmax(180px,1.4fr)",
+            key: "reden", header: "Reden", width: 200,
             cell: (m) => {
                 const st = statusOf(m);
-                return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusIcon, { tone: st.tone === "amber" ? "busy" : "open", label: st.label, detail: reasonText(m) || undefined }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm", children: st.label }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: reasonText(m) })] })] }));
+                return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusIcon, { tone: st.tone === "amber" ? "busy" : "open", label: st.label, detail: reasonText(m) || undefined }), _jsx(CellText, { primary: st.label, secondary: reasonText(m) })] }));
             },
         },
-        { key: "actie", header: "", width: "130px", cell: (m) => actionBtn(m) },
     ];
     const chips = period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : [];
-    return (_jsxs(MailboxPageFrame, { tab: "overgeslagen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, children: [waiting > 0 && (_jsx(InlineAlert, { tone: "warning", title: `${waiting} mail(s) wachten op uitlezen.`, children: "De limiet voor vandaag is bereikt of automatisch uitlezen staat uit. Je kunt een mail ook zelf laten uitlezen." })), _jsx(Toolbar, { chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), right: _jsxs(Select, { value: period, onValueChange: (v) => setPeriod(v), children: [_jsxs(SelectTrigger, { className: "h-9 w-[150px]", "aria-label": "Periode", children: [_jsx(Filter, { className: "mr-1 h-4 w-4" }), _jsx(SelectValue, {})] }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle periodes" }), _jsx(SelectItem, { value: "today", children: "Vandaag" }), _jsx(SelectItem, { value: "7d", children: "Laatste 7 dagen" }), _jsx(SelectItem, { value: "30d", children: "Laatste 30 dagen" })] })] }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op afzender, onderwerp of reden" }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: ["1.2fr", "2.2fr", "120px", "1.4fr", "130px"] })) : error && !data ? (_jsx(InlineAlert, { tone: "error", title: "De lijst kon niet worden geladen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }), children: "Probeer het opnieuw." })) : filtered.length === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
+    const notices = waiting > 0 ? [{
+            key: "waiting",
+            tone: "warning",
+            title: `${waiting} ${waiting === 1 ? "mail wacht" : "mails wachten"} op uitlezen.`,
+            details: "De limiet voor vandaag is bereikt of automatisch uitlezen staat uit. Je kunt een mail ook zelf laten uitlezen.",
+        }] : [];
+    return (_jsxs(MailboxPageFrame, { tab: "overgeslagen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, notices: notices, children: [_jsx(Toolbar, { onOpenFilters: () => setFiltersOpen(true), filterCount: chips.length, chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op afzender, onderwerp of reden" }) }), _jsx(FilterPanel, { open: filtersOpen, onOpenChange: setFiltersOpen, onClear: clearFilters, children: _jsx(FilterOptions, { label: "Periode", value: period, options: PERIOD_OPTIONS, onChange: (v) => setPeriod(v) }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: [200, 300, 132, 200] })) : error && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "De lijst kon niet worden geladen", text: "Probeer het opnieuw.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }) }) })) : filtered.length === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
                     ? _jsx(EmptyState, { icon: _jsx(Search, { className: "h-6 w-6" }), title: "Niets gevonden", text: "Er zijn geen overgeslagen mails die bij je zoekopdracht passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })
-                    : _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "Geen overgeslagen mails", text: "Mails die geen bestelling lijken, verschijnen hier met de reden." }) })) : (_jsx(DataTable, { rows: paged, columns: columns, rowKey: (m) => m.id, activeIndex: cursor, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (m) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate font-semibold", children: m.from_name || m.from_email || "Onbekend" }), _jsx("div", { className: "truncate text-muted-foreground", children: m.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "–", " \u00B7 ", statusOf(m).label] }), _jsx("div", { className: "pt-1", children: actionBtn(m) })] })), footer: _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
+                    : _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "Geen overgeslagen mails", text: "Mails die geen bestelling lijken, verschijnen hier met de reden." }) })) : (_jsx(DataTable, { rows: paged, columns: columns, rowKey: (m) => m.id, activeIndex: cursor, rowAction: rowAction, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (m) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate font-semibold", children: m.from_name || m.from_email || "Onbekend" }), _jsx("div", { className: "truncate text-muted-foreground", children: m.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [fmtDayTime(m.received_at), " \u00B7 ", statusOf(m).label] })] })), footer: _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
 }

package/dist-lib/components/MailboxStatusLine.d.ts

@@ -1,7 +1,11 @@
+import type { ReactNode } from "react";
+import { type MailboxStatus } from "../lib/mailbox.functions.js";
+import type { Notice } from "./fs-ui/NoticeBar.js";
 /** Pad naar de AI-koppelingen in de shell (Instellingen › AI-Authenticatie). */
 export declare const AI_AUTH_PATH = "/ai-authenticatie";
-/** Korte regel onder de paginatitel: wanneer opgehaald, hoeveel wachten. */
-export declare function MailboxStatusMeta(): import("react").JSX.Element | null;
+export declare function useMailboxStatus(): MailboxStatus | null;
+/** Inhoud van de infoballon bij "Bijgewerkt": wanneer opgehaald, hoeveel wachten, adressen. */
+export declare function statusInfo(s: MailboxStatus | null): ReactNode;
 /** Meldingen over het ophalen (alleen als de gebruiker er iets mee moet). */
-export declare function MailboxStatusLine(): import("react").JSX.Element | null;
+export declare function useMailboxStatusNotices(s: MailboxStatus | null): Notice[];
 //# sourceMappingURL=MailboxStatusLine.d.ts.map

package/dist-lib/components/MailboxStatusLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/MailboxStatusLine.tsx"],"names":[],"mappings":"AAMA,gFAAgF;AAChF,eAAO,MAAM,YAAY,sBAAsB,CAAC;AAehD,4EAA4E;AAC5E,wBAAgB,iBAAiB,uCAYhC;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,uCAgChC"}
+{"version":3,"file":"MailboxStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/MailboxStatusLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEhF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,gFAAgF;AAChF,eAAO,MAAM,YAAY,sBAAsB,CAAC;AAEhD,wBAAgB,gBAAgB,IAOL,aAAa,GAAG,IAAI,CAC9C;AAED,+FAA+F;AAC/F,wBAAgB,UAAU,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,CAU7D;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,GAAG,MAAM,EAAE,CA0CzE"}

package/dist-lib/components/MailboxStatusLine.js

@@ -1,13 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useIsSuperadmin } from "@flowselections/core";
 import { getMailboxStatus } from "../lib/mailbox.functions.js";
-import { InlineAlert } from "./fs-ui/InlineAlert.js";
+import { fmtDayTime } from "../lib/format-date.js";
 /** Pad naar de AI-koppelingen in de shell (Instellingen › AI-Authenticatie). */
 export const AI_AUTH_PATH = "/ai-authenticatie";
-const fmt = (iso) => iso ? new Date(iso).toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : null;
-function useMailboxStatus() {
+export function useMailboxStatus() {
     const fetchStatus = useServerFn(getMailboxStatus);
     const { data } = useQuery({
         queryKey: ["mailbox-status"],
@@ -16,31 +15,55 @@ function useMailboxStatus() {
     });
     return (data ?? null);
 }
-/** Korte regel onder de paginatitel: wanneer opgehaald, hoeveel wachten. */
-export function MailboxStatusMeta() {
-    const s = useMailboxStatus();
+/** Inhoud van de infoballon bij "Bijgewerkt": wanneer opgehaald, hoeveel wachten, adressen. */
+export function statusInfo(s) {
     if (!s)
         return null;
     const addresses = Array.isArray(s.addresses) ? s.addresses : [];
-    const parts = [];
-    const last = fmt(s.lastOkAt);
-    parts.push(last ? `Mails opgehaald ${last}` : "Nog geen mails opgehaald");
+    const lines = [];
+    lines.push(s.lastOkAt ? `Mails opgehaald ${fmtDayTime(s.lastOkAt)}` : "Nog geen mails opgehaald");
     if (s.waiting > 0)
-        parts.push(`${s.waiting} wachten op verwerking`);
+        lines.push(`${s.waiting} wachten op verwerking`);
     if (addresses.length > 0)
-        parts.push(addresses.join(", "));
+        lines.push(addresses.join(", "));
     if (s.ignoredNotFollowed > 0)
-        parts.push(`${s.ignoredNotFollowed} uit mappen die niet gevolgd worden`);
+        lines.push(`${s.ignoredNotFollowed} uit mappen die niet gevolgd worden`);
     if (s.ignoredUnknown > 0)
-        parts.push(`${s.ignoredUnknown} uit een onbekende map overgeslagen`);
-    return _jsx("span", { className: "tabular-nums", children: parts.join(" · ") });
+        lines.push(`${s.ignoredUnknown} uit een onbekende map overgeslagen`);
+    return _jsx(_Fragment, { children: lines.map((l) => _jsx("div", { className: "truncate", children: l }, l)) });
 }
 /** Meldingen over het ophalen (alleen als de gebruiker er iets mee moet). */
-export function MailboxStatusLine() {
-    const s = useMailboxStatus();
+export function useMailboxStatusNotices(s) {
     const { isAdmin } = useIsSuperadmin();
     if (!s)
-        return null;
+        return [];
+    const out = [];
     const disconnected = Array.isArray(s.disconnected) ? s.disconnected : [];
-    return (_jsxs(_Fragment, { children: [disconnected.map((d) => (_jsx(InlineAlert, { tone: "info", title: `${d.count} mails van ${d.email} niet verwerkt (adres ontkoppeld)` }, d.email))), s.problem && (_jsxs(InlineAlert, { tone: "error", title: "Er komen mails binnen, maar ze worden nu niet verwerkt.", children: ["We proberen het elke minuut opnieuw. Blijft dit staan, neem dan contact op met je beheerder.", isAdmin && (_jsxs("details", { className: "mt-1 text-xs text-muted-foreground", children: [_jsx("summary", { className: "cursor-pointer", children: "Details" }), s.problem] }))] })), !s.aiAgent && (_jsx(InlineAlert, { tone: "warning", title: "Automatisch uitlezen staat uit.", action: _jsx("a", { href: AI_AUTH_PATH, className: "text-sm font-medium underline underline-offset-2", children: "Naar Instellingen" }), children: "Bestellingen komen wel binnen, maar je vult ze zelf in. Een beheerder kan dit aanzetten bij Instellingen." }))] }));
+    if (disconnected.length > 0) {
+        const n = disconnected.reduce((a, d) => a + (Number(d.count) || 0), 0);
+        out.push({
+            key: "disconnected",
+            tone: "info",
+            title: `${n} mails niet verwerkt: adres ontkoppeld`,
+            details: `Mails van ${disconnected.length === 1 ? "een ontkoppeld adres" : `${disconnected.length} ontkoppelde adressen`} worden niet verwerkt. Koppel het adres opnieuw bij Instellingen.`,
+        });
+    }
+    if (s.problem) {
+        out.push({
+            key: "problem",
+            tone: "error",
+            title: "Er komen mails binnen, maar ze worden nu niet verwerkt.",
+            details: (_jsxs(_Fragment, { children: ["We proberen het elke minuut opnieuw. Blijft dit staan, neem dan contact op met je beheerder.", isAdmin && (_jsxs("details", { className: "mt-1 text-xs text-muted-foreground", children: [_jsx("summary", { className: "cursor-pointer", children: "Details" }), s.problem] }))] })),
+        });
+    }
+    if (!s.aiAgent) {
+        out.push({
+            key: "ai",
+            tone: "warning",
+            title: "Automatisch uitlezen staat uit.",
+            details: "Bestellingen komen wel binnen, maar je vult ze zelf in. Een beheerder kan dit aanzetten bij Instellingen.",
+            action: _jsx("a", { href: AI_AUTH_PATH, className: "text-sm font-medium underline underline-offset-2", children: "Naar Instellingen" }),
+        });
+    }
+    return out;
 }

package/dist-lib/components/TablePagination.d.ts

@@ -6,7 +6,7 @@ type Props = {
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
 };
-/** Paginering onderaan een tabel: "1–14 van 14 · Per pagina · Vorige/Volgende". */
-export declare function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange, }: Props): import("react").JSX.Element;
+/** Paginering exact als Verkooporders: "1–25 van 120" · Per pagina · pijlen met "1 / 5". */
+export declare function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=TablePagination.d.ts.map

package/dist-lib/components/TablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../src/components/TablePagination.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,UAAoB,CAAC;AAEnD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACjB,EAAE,KAAK,+BAqDP"}
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../src/components/TablePagination.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,iBAAiB,UAAoB,CAAC;AAEnD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,EAAE,KAAK,+BAkC/F"}

package/dist-lib/components/TablePagination.js

@@ -1,14 +1,10 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
-export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-/** Paginering onderaan een tabel: "1–14 van 14 · Per pagina · Vorige/Volgende". */
-export function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange, }) {
-    const pageCount = Math.max(1, Math.ceil(total / pageSize));
-    const current = Math.min(Math.max(1, page), pageCount);
-    const from = total === 0 ? 0 : (current - 1) * pageSize + 1;
-    const to = Math.min(current * pageSize, total);
-    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t px-4 py-2 text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [from, "\u2013", to, " van ", total] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => {
-                            onPageSizeChange(Number(v));
-                            onPageChange(1);
-                        }, children: [_jsx(SelectTrigger, { className: "h-8 w-[80px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: current <= 1, onClick: () => onPageChange(current - 1), children: "Vorige" }), _jsxs("span", { className: "text-muted-foreground", children: [current, " / ", pageCount] }), _jsx(Button, { size: "sm", variant: "outline", disabled: current >= pageCount, onClick: () => onPageChange(current + 1), children: "Volgende" })] })] }));
+export const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+/** Paginering exact als Verkooporders: "1–25 van 120" · Per pagina · pijlen met "1 / 5". */
+export function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange }) {
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const current = Math.min(Math.max(1, page), totalPages);
+    return (_jsxs("nav", { "aria-label": "Paginering", className: "shrink-0 flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { className: "tabular-nums", children: total === 0 ? "Geen resultaten" : `${(current - 1) * pageSize + 1}–${Math.min(current * pageSize, total)} van ${total}` }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "hidden items-center gap-2 sm:flex", children: [_jsx("span", { children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => { onPageSizeChange(Number(v)); onPageChange(1); }, children: [_jsx(SelectTrigger, { className: "h-8 w-20", "aria-label": "Resultaten per pagina", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPageChange(Math.max(1, current - 1)), disabled: current <= 1, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "px-2 text-foreground tabular-nums", "aria-current": "page", children: [current, " / ", totalPages] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPageChange(Math.min(totalPages, current + 1)), disabled: current >= totalPages, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] })] }));
 }

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

@@ -2,16 +2,16 @@ import { type ReactNode } from "react";
 export interface DataColumn<T> {
     key: string;
     header: string;
-    /** CSS grid-breedte, bijv. "2fr" of "140px". Schaalt evenredig mee. */
-    width: string;
+    /** Vaste breedte in px (colgroup, table-fixed). */
+    width: number;
     cell: (row: T) => ReactNode;
     /** Klikbare kop voor sorteren. */
     sortable?: boolean;
 }
 /**
- * Tabel in één afgerond vlak. Kop blijft zichtbaar bij scrollen, vaste
- * kolombreedtes, rij 60 px, geselecteerde rij met groene streep links.
- * Onder 768 px als kaarten (mobileCard).
+ * Tabel exact als Verkooporders: eigen <table> met table-fixed en colgroup in px,
+ * kop 40 px die plakt, rij 60 px, geselecteerde rij met 3 px groene streep.
+ * Onder 768 px als kaarten (mobileCard). Paginering (footer) staat onder het vlak.
  */
 export declare function DataTable<T>({ rows, columns, rowKey, onRowClick, activeIndex, mobileCard, sort, onSortChange, footer, rowAction, }: {
     rows: T[];
@@ -26,9 +26,15 @@ export declare function DataTable<T>({ rows, columns, rowKey, onRowClick, active
     } | null;
     onSortChange?: (key: string) => void;
     footer?: ReactNode;
-    /** Extra actie (menu of knop) rechts in de rij; klik opent de rij niet. */
+    /** Rijmenu of knop rechts in de rij; klik opent de rij niet. */
     rowAction?: (row: T) => ReactNode;
 }): import("react").JSX.Element;
+/** Cel met hooguit twee regels: 14 px en 12 px grijs; afkappen met volledige tekst als infoballon. */
+export declare function CellText({ primary, secondary, strong }: {
+    primary: ReactNode;
+    secondary?: ReactNode;
+    strong?: boolean;
+}): import("react").JSX.Element;
 /** Initialen-avatar voor klantnamen. */
 export declare function InitialsAvatar({ name }: {
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CACnC,+BA4EA;AAED,wCAAwC;AACxC,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAQxD"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CACnC,+BA0FA;AAED,sGAAsG;AACtG,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BASvH;AAED,wCAAwC;AACxC,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAQxD"}

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

@@ -1,29 +1,36 @@
-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, useRef } from "react";
 import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
+const TABLE_CLS = "w-full [&_thead_th]:h-10 [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground min-w-[900px] table-fixed caption-bottom text-sm [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-card [&_tbody_tr]:transition-colors";
+/** Kop- en celruimte zijn gelijk, zodat koptekst en celtekst op dezelfde x beginnen. */
+const PAD = "px-2";
 /**
- * Tabel in één afgerond vlak. Kop blijft zichtbaar bij scrollen, vaste
- * kolombreedtes, rij 60 px, geselecteerde rij met groene streep links.
- * Onder 768 px als kaarten (mobileCard).
+ * Tabel exact als Verkooporders: eigen <table> met table-fixed en colgroup in px,
+ * kop 40 px die plakt, rij 60 px, geselecteerde rij met 3 px groene streep.
+ * Onder 768 px als kaarten (mobileCard). Paginering (footer) staat onder het vlak.
  */
 export function DataTable({ rows, columns, rowKey, onRowClick, activeIndex, mobileCard, sort, onSortChange, footer, rowAction, }) {
-    const grid = columns.map((c) => c.width).join(" ") + (rowAction || onRowClick ? " 48px" : "");
+    const hasEnd = !!(rowAction || onRowClick);
     const activeRef = useRef(null);
     useEffect(() => { activeRef.current?.scrollIntoView({ block: "nearest" }); }, [activeIndex]);
-    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden min-h-0 flex-1 overflow-auto overscroll-contain md:block", children: _jsxs("div", { className: "min-w-[900px]", role: "table", children: [_jsxs("div", { role: "row", className: "sticky top-0 z-10 grid h-10 items-center gap-4 border-b border-border bg-card px-4", style: { gridTemplateColumns: grid }, children: [columns.map((c) => {
-                                    const active = sort?.key === c.key;
-                                    const label = _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: c.header });
-                                    return (_jsx("div", { role: "columnheader", className: "min-w-0 truncate text-left", children: c.sortable && onSortChange ? (_jsxs("button", { type: "button", onClick: () => onSortChange(c.key), className: "inline-flex items-center gap-1 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `Sorteer op ${c.header}`, children: [label, active && (sort.dir === "asc" ? _jsx(ArrowUp, { className: "h-3 w-3 text-muted-foreground" }) : _jsx(ArrowDown, { className: "h-3 w-3 text-muted-foreground" }))] })) : label }, c.key));
-                                }), (rowAction || onRowClick) && _jsx("div", {})] }), rows.map((r, i) => {
-                            const active = activeIndex === i;
-                            return (_jsxs("div", { role: "row", ref: active ? activeRef : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, onKeyDown: onRowClick ? (e) => { if (e.key === "Enter" && e.target === e.currentTarget) {
-                                    e.preventDefault();
-                                    onRowClick(r, i);
-                                } } : undefined, className: "group relative grid h-[60px] items-center gap-4 border-b border-border px-4 text-sm text-foreground last:border-0 " +
-                                    "transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring " +
-                                    (onRowClick ? "cursor-pointer hover:bg-muted/50 " : "") +
-                                    (active ? "bg-muted/50 before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary" : ""), style: { gridTemplateColumns: grid }, children: [columns.map((c) => _jsx("div", { role: "cell", className: "min-w-0", children: c.cell(r) }, c.key)), (rowAction || onRowClick) && (_jsx("div", { className: "flex justify-end", onClick: rowAction ? (e) => e.stopPropagation() : undefined, children: rowAction ? rowAction(r) : (_jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": true })) }))] }, rowKey(r)));
-                        })] }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-border overflow-y-auto overscroll-contain md:hidden", children: rows.map((r, i) => (_jsx("div", { role: onRowClick ? "button" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, className: "min-h-11 p-4 text-sm transition-colors active:bg-muted " + (activeIndex === i ? "bg-muted/50" : ""), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: mobileCard(r) }), rowAction && _jsx("div", { onClick: (e) => e.stopPropagation(), children: rowAction(r) })] }) }, rowKey(r)))) }), footer && _jsx("div", { className: "shrink-0 border-t border-border", children: footer })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full min-w-0 flex-col overflow-clip rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden md:block", children: _jsxs("table", { className: TABLE_CLS, children: [_jsxs("colgroup", { children: [columns.map((c) => _jsx("col", { style: { width: `${c.width}px` } }, c.key)), hasEnd && _jsx("col", { style: { width: "56px" } })] }), _jsx("thead", { className: "[&_tr]:border-b", children: _jsxs("tr", { className: "border-b border-border", children: [columns.map((c) => {
+                                                const active = sort?.key === c.key;
+                                                return (_jsx("th", { scope: "col", className: PAD + " text-left align-middle", "aria-sort": active ? (sort.dir === "asc" ? "ascending" : "descending") : undefined, children: c.sortable && onSortChange ? (_jsxs("button", { type: "button", onClick: () => onSortChange(c.key), className: "inline-flex max-w-full items-center gap-1 rounded-sm uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `Sorteer op ${c.header}`, children: [_jsx("span", { className: "truncate", children: c.header }), active && (sort.dir === "asc" ? _jsx(ArrowUp, { className: "h-3 w-3 shrink-0", "aria-hidden": true }) : _jsx(ArrowDown, { className: "h-3 w-3 shrink-0", "aria-hidden": true }))] })) : _jsx("span", { className: "block truncate", children: c.header }) }, c.key));
+                                            }), hasEnd && _jsx("th", { scope: "col", className: PAD, children: _jsx("span", { className: "sr-only", children: "Acties" }) })] }) }), _jsx("tbody", { children: rows.map((r, i) => {
+                                        const active = activeIndex === i;
+                                        return (_jsxs("tr", { ref: active ? activeRef : undefined, tabIndex: onRowClick ? 0 : undefined, "data-state": active ? "selected" : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, onKeyDown: onRowClick ? (e) => { if (e.key === "Enter" && e.target === e.currentTarget) {
+                                                e.preventDefault();
+                                                onRowClick(r, i);
+                                            } } : undefined, style: { height: 60 }, className: "group border-b border-border text-foreground last:border-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring " +
+                                                (onRowClick ? "cursor-pointer hover:bg-muted/50 " : "") +
+                                                (active ? "bg-muted/60" : ""), children: [columns.map((c, ci) => (_jsxs("td", { className: PAD + " relative overflow-hidden py-0 align-middle", children: [ci === 0 && active && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), c.cell(r)] }, c.key))), hasEnd && (_jsx("td", { className: PAD + " py-0 text-right align-middle", onClick: rowAction ? (e) => e.stopPropagation() : undefined, children: rowAction ? rowAction(r) : (_jsx(ChevronRight, { className: "ml-auto h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": true })) }))] }, rowKey(r)));
+                                    }) })] }) }), _jsx("div", { className: "divide-y divide-border md:hidden", children: rows.map((r, i) => (_jsxs("div", { role: onRowClick ? "button" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, className: "relative min-h-11 p-4 text-sm transition-colors active:bg-muted " + (activeIndex === i ? "bg-muted/60" : ""), children: [activeIndex === i && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: mobileCard(r) }), rowAction && _jsx("div", { onClick: (e) => e.stopPropagation(), children: rowAction(r) })] })] }, rowKey(r)))) })] }), footer] }));
+}
+/** Cel met hooguit twee regels: 14 px en 12 px grijs; afkappen met volledige tekst als infoballon. */
+export function CellText({ primary, secondary, strong }) {
+    const t1 = typeof primary === "string" ? primary : undefined;
+    const t2 = typeof secondary === "string" ? secondary : undefined;
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm " + (strong ? "font-medium" : ""), title: t1, children: primary }), secondary != null && secondary !== "" && _jsx("div", { className: "truncate text-xs text-muted-foreground", title: t2, children: secondary })] }));
 }
 /** Initialen-avatar voor klantnamen. */
 export function InitialsAvatar({ name }) {

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

@@ -5,7 +5,7 @@ export interface FilterChip {
     icon?: ReactNode;
     onRemove: () => void;
 }
-/** Actieve filters als ronde chips met kruisje, plus "Alles wissen". */
+/** Actieve filters als FilterChip uit Verkooporders (hele chip wist), plus "Alles wissen". */
 export declare function FilterChips({ chips, onClearAll }: {
     chips: FilterChip[];
     onClearAll?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wEAAwE;AACxE,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAyBlG"}
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAwBlG"}

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

@@ -1,8 +1,8 @@
-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 { X } from "lucide-react";
-/** Actieve filters als ronde chips met kruisje, plus "Alles wissen". */
+/** Actieve filters als FilterChip uit Verkooporders (hele chip wist), plus "Alles wissen". */
 export function FilterChips({ chips, onClearAll }) {
     if (chips.length === 0)
         return null;
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [chips.map((c) => (_jsxs("span", { className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-card pl-3 pr-1 text-xs font-medium text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5", children: [c.icon, c.label, _jsx("button", { type: "button", "aria-label": `Filter ${c.label} weghalen`, onClick: c.onRemove, className: "inline-flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, {}) })] }, c.key))), onClearAll && chips.length > 1 && (_jsx("button", { type: "button", onClick: onClearAll, className: "h-8 rounded-lg px-2 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Alles wissen" }))] }));
+    return (_jsxs(_Fragment, { children: [chips.map((c) => (_jsxs("button", { type: "button", onClick: c.onRemove, "aria-label": `Filter ${c.label} wissen`, className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-muted px-3 text-xs font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:h-3.5 [&_svg]:w-3.5", children: [c.icon, c.label, _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true })] }, c.key))), onClearAll && (_jsx("button", { type: "button", onClick: onClearAll, className: "h-8 rounded-lg px-2 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Alles wissen" }))] }));
 }

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+/** Zijpaneel met álle extra filters (achter de knop "Filters"). */
+export declare function FilterPanel({ open, onOpenChange, onClear, children, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onClear?: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Eén filtergroep in het paneel: titel + keuzeknoppen. */
+export declare function FilterOptions<T extends string>({ label, value, options, onChange, }: {
+    label: string;
+    value: T;
+    options: Array<{
+        value: T;
+        label: string;
+    }>;
+    onChange: (v: T) => void;
+}): import("react").JSX.Element;
+export declare const PERIOD_OPTIONS: ({
+    value: "all";
+    label: string;
+} | {
+    value: "today";
+    label: string;
+} | {
+    value: "7d";
+    label: string;
+} | {
+    value: "30d";
+    label: string;
+})[];
+//# sourceMappingURL=FilterPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAeA;AAED,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC1B,+BAyBA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;IAK1B,CAAC"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@flowselections/core";
+/** Zijpaneel met álle extra filters (achter de knop "Filters"). */
+export function FilterPanel({ open, onOpenChange, onClear, children, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "left-auto right-0 top-0 flex h-dvh max-h-dvh w-full max-w-sm translate-x-0 translate-y-0 flex-col gap-4 rounded-none border-l border-border p-6 sm:rounded-none", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Filters" }) }), _jsx("div", { className: "min-h-0 flex-1 space-y-6 overflow-y-auto", children: children }), _jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border pt-4", children: [onClear ? _jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Alles wissen" }) : _jsx("span", {}), _jsx(Button, { size: "sm", onClick: () => onOpenChange(false), children: "Klaar" })] })] }) }));
+}
+/** Eén filtergroep in het paneel: titel + keuzeknoppen. */
+export function FilterOptions({ label, value, options, onChange, }) {
+    return (_jsxs("fieldset", { className: "space-y-2", children: [_jsx("legend", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((o) => {
+                    const on = o.value === value;
+                    return (_jsx("button", { type: "button", "aria-pressed": on, onClick: () => onChange(o.value), className: "inline-flex h-9 items-center rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                            (on ? "border-primary/30 bg-primary/10 font-semibold text-foreground" : "border-border bg-card text-foreground/80 hover:bg-muted"), children: o.label }, o.value));
+                }) })] }));
+}
+export const PERIOD_OPTIONS = [
+    { value: "all", label: "Alle periodes" },
+    { value: "today", label: "Vandaag" },
+    { value: "7d", label: "Laatste 7 dagen" },
+    { value: "30d", label: "Laatste 30 dagen" },
+];

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

@@ -1,5 +1,5 @@
-import { type ReactNode } from "react";
-/** Melding: zacht vlak, icoon links, actie rechts. Op mobiel ingeklapt tot één regel. */
+import type { ReactNode } from "react";
+/** Losse melding in dezelfde vorm als de NoticeBar (één regel, details uitklapbaar). */
 export declare function InlineAlert({ tone, title, children, action, }: {
     tone?: "warning" | "error" | "info";
     title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/InlineAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BA0BA"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/InlineAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BAEA"}

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

@@ -1,14 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AlertTriangle, Info, XCircle } from "lucide-react";
-/** Melding: zacht vlak, icoon links, actie rechts. Op mobiel ingeklapt tot één regel. */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NoticeRow } from "./NoticeBar.js";
+/** Losse melding in dezelfde vorm als de NoticeBar (één regel, details uitklapbaar). */
 export function InlineAlert({ tone = "warning", title, children, action, }) {
-    const [open, setOpen] = useState(false);
-    const Icon = tone === "error" ? XCircle : tone === "info" ? Info : AlertTriangle;
-    const cls = tone === "error"
-        ? "border-destructive/30 bg-destructive/5 text-foreground [&_.ia-icon]:text-destructive"
-        : tone === "info"
-            ? "border-border bg-muted/50 text-foreground [&_.ia-icon]:text-muted-foreground"
-            : "border-warning/30 bg-warning-soft text-warning-soft-foreground [&_.ia-icon]:text-warning-soft-foreground";
-    return (_jsxs("div", { role: tone === "error" ? "alert" : "status", className: "flex shrink-0 items-start gap-3 rounded-lg border px-3 py-2.5 text-sm " + cls, children: [_jsx(Icon, { className: "ia-icon mt-0.5 h-4 w-4 shrink-0", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { type: "button", onClick: () => setOpen((v) => !v), className: "block w-full text-left font-medium sm:pointer-events-none", "aria-expanded": open, children: _jsx("span", { className: open ? "" : "line-clamp-1 sm:line-clamp-none", children: title }) }), children && _jsx("div", { className: "mt-0.5 text-sm opacity-90 " + (open ? "" : "hidden sm:block"), children: children })] }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+    return _jsx(NoticeRow, { notice: { key: title, tone, title, details: children, action } });
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet, veegbaar op mobiel. */
 export function KpiRow({ children }) {
-    return (_jsx("div", { className: "-mx-4 flex shrink-0 snap-x snap-mandatory gap-3 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " +
+    return (_jsx("div", { className: "-mx-4 flex shrink-0 scroll-px-4 snap-x snap-mandatory gap-3 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " +
             "md:mx-0 md:grid md:grid-cols-2 md:overflow-visible md:px-0 lg:grid-cols-4 " +
             "[&>*]:w-[78%] [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-auto", children: children }));
 }

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface Notice {
+    key: string;
+    tone?: "warning" | "error" | "info";
+    title: string;
+    /** Uitklapbare toelichting (nooit een lijst van items). */
+    details?: ReactNode;
+    action?: ReactNode;
+}
+/** Eén melding op één regel; details klappen uit (stijl NoticeBar uit Verkooporders). */
+export declare function NoticeRow({ notice }: {
+    notice: Notice;
+}): import("react").JSX.Element;
+/** Meldingen direct onder de kop: hooguit 2 zichtbaar, de rest achter "+ n meldingen". */
+export declare function NoticeBar({ notices }: {
+    notices: Notice[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=NoticeBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoticeBar.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/NoticeBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAQD,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,+BAwBvD;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sCAmB3D"}