@flowselections/mailbox-orders 1.0.53 → 1.0.57

package/dist-lib/components/MailboxSkippedPage.js

@@ -1,34 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { Badge, Button, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, 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 { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { MailboxPageFrame } from "./MailboxPageFrame.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 { 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";
 const statusOf = (m) => m.analysis_state === "wacht"
-    ? { label: "Wacht op analyse", 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 || "");
+    if (m.filter_outcome === "te_oud")
+        return "Te oud bij eerste ophalen";
+    if (/niet uit een gevolgde map/i.test(raw))
+        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" };
 export function MailboxSkippedPage() {
     const qc = useQueryClient();
     const fetchList = useServerFn(listSkippedMessages);
     const analyze = useServerFn(analyzeMessageNow);
-    const { data, isLoading, error } = useQuery({
+    const { data, isLoading, error, refetch } = useQuery({
         queryKey: ["mailbox-skipped"],
         queryFn: () => fetchList(),
         refetchInterval: 60000,
+        placeholderData: (prev) => prev,
     });
     const items = Array.isArray(data?.items) ? data.items : [];
     const [busyId, setBusyId] = useState(null);
     const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25);
+    const [pageSize, setPageSize] = useState(50);
     const [search, setSearch] = usePersistedState("mailbox-skipped:search", "");
     const [period, setPeriod] = usePersistedState("mailbox-skipped:period", "all");
     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();
         return items
@@ -44,30 +77,75 @@ export function MailboxSkippedPage() {
             : String(a.received_at ?? "").localeCompare(String(b.received_at ?? "")));
     }, [items, search, period, sortOrder]);
     const waiting = items.filter((m) => m.analysis_state === "wacht").length;
+    useEffect(() => { setPage(1); setCursor(null); }, [search, period, sortOrder]);
     const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
     const current = Math.min(page, pageCount);
     const paged = filtered.slice((current - 1) * pageSize, current * pageSize);
+    const hasActiveFilters = !!search || period !== "all";
+    const clearFilters = () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); };
     const run = async (id) => {
         setBusyId(id);
         try {
             const res = await analyze({ data: { messageId: id } });
             if (res?.ok) {
-                toast.success("Mail geanalyseerd. Je vindt hem nu bij Voorstellen.");
+                toast.success("Mail uitgelezen. Je vindt hem nu bij Te controleren.");
                 void qc.invalidateQueries({ queryKey: ["mailbox-skipped"] });
                 void qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                void qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
+            }
+            else {
+                if (res?.error)
+                    console.warn("[mailbox] toch uitlezen", res.error);
+                toast.error(res?.error === "Deze mail wordt al geanalyseerd." ? "Deze mail wordt al uitgelezen." : "Uitlezen lukt niet. Probeer het opnieuw.");
             }
-            else
-                toast.error(res?.error ?? "Analyseren mislukt");
         }
         catch (e) {
-            toast.error(e?.message ?? "Analyseren mislukt");
+            console.warn("[mailbox] toch uitlezen", e);
+            toast.error("Uitlezen lukt niet. Probeer het opnieuw.");
         }
         finally {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "flex h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] max-h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] min-h-0 w-full flex-col gap-4 overflow-hidden p-6", children: [_jsxs("div", { className: "shrink-0", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Overgeslagen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Mails die niet automatisch zijn geanalyseerd, met de reden. Klopt het niet? Gebruik \"Toch analyseren\"." })] }), waiting > 0 && (_jsxs("div", { className: "shrink-0 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [waiting, " mail(s) wachten op analyse, omdat de limiet is bereikt of automatisch analyseren uit staat."] })), items.length > 0 && (_jsx(MailboxFilterBar, { search: search, onSearchChange: setSearch, period: period, onPeriodChange: setPeriod, sortOrder: sortOrder, onSortOrderChange: setSortOrder, filteredCount: filtered.length, totalCount: items.length, countLabel: "mails", onClear: () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); }, hasActiveFilters: !!search || period !== "all" || sortOrder !== "date-desc" })), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : error ? (_jsx("p", { className: "text-destructive text-sm", children: "De lijst kon niet worden opgehaald." })) : filtered.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen overgeslagen mails." })) : (_jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Bericht" }), _jsx(TableHead, { children: "Ontvangen" }), _jsx(TableHead, { children: "Reden" }), _jsx(TableHead, {})] }) }), _jsx(TableBody, { children: paged.map((m) => {
-                                            const st = statusOf(m);
-                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-sm", children: m.from_name || m.from_email || "Onbekend" }), _jsxs(TableCell, { className: "max-w-sm", children: [_jsx("div", { className: "truncate text-sm font-medium", children: m.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.preview || "" })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "-" }), _jsxs(TableCell, { className: "max-w-xs", children: [_jsx(Badge, { variant: "outline", className: st.tone === "amber" ? "border-amber-300 bg-amber-50 text-amber-800" : "", children: st.label }), _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: m.analysis_note || m.filter_reason })] }), _jsx(TableCell, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: busyId === m.id, onClick: () => run(m.id), children: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu analyseren" : "Toch analyseren" }) })] }, m.id));
-                                        }) })] }), _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] }) })) })] }));
+    useListHotkeys({
+        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 columns = [
+        {
+            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: 300,
+            cell: (m) => _jsx(CellText, { primary: m.subject || "(geen onderwerp)", secondary: m.preview || "" }),
+        },
+        {
+            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: 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 }), _jsx(CellText, { primary: st.label, secondary: reasonText(m) })] }));
+            },
+        },
+        { key: "actie", header: "Actie", width: 136, cell: (m) => actionBtn(m) },
+    ];
+    const chips = period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : [];
+    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, 136] })) : 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: [fmtDayTime(m.received_at), " \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 }) }))] }));
 }

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

@@ -1,5 +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";
-/** Kleine statusregel: laatste geslaagde ronde, wachtende mails, problemen in gewone taal. */
-export declare function MailboxStatusLine(): 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 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":"AAKA,gFAAgF;AAChF,eAAO,MAAM,YAAY,sBAAsB,CAAC;AAKhD,8FAA8F;AAC9F,wBAAgB,iBAAiB,uCAuChC"}
+{"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,23 +1,69 @@
-import { jsxs as _jsxs, jsx as _jsx } 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 { AlertTriangle } from "lucide-react";
+import { useIsSuperadmin } from "@flowselections/core";
 import { getMailboxStatus } from "../lib/mailbox.functions.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" }) : "nog geen";
-/** Kleine statusregel: laatste geslaagde ronde, wachtende mails, problemen in gewone taal. */
-export function MailboxStatusLine() {
+export function useMailboxStatus() {
     const fetchStatus = useServerFn(getMailboxStatus);
     const { data } = useQuery({
         queryKey: ["mailbox-status"],
         queryFn: () => fetchStatus(),
         refetchInterval: 60000,
     });
-    const s = (data ?? null);
+    return (data ?? null);
+}
+/** Inhoud van de infoballon bij "Bijgewerkt": wanneer opgehaald, hoeveel wachten, adressen. */
+export function statusInfo(s) {
     if (!s)
         return null;
-    const disconnected = Array.isArray(s.disconnected) ? s.disconnected : [];
     const addresses = Array.isArray(s.addresses) ? s.addresses : [];
-    return (_jsxs("div", { className: "shrink-0 space-y-2", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Laatste ronde ", fmt(s.lastOkAt), " \u00B7 ", s.waiting, " wachtend", addresses.length > 0 ? ` · ${addresses.join(", ")}` : "", s.ignoredNotFollowed > 0 ? ` · ${s.ignoredNotFollowed} mails buiten de gevolgde mappen genegeerd` : "", s.ignoredUnknown > 0 ? ` · ${s.ignoredUnknown} mails overgeslagen (map onbekend)` : ""] }), disconnected.map((d) => (_jsxs("div", { className: "text-xs text-muted-foreground", children: [d.count, " mails van ", d.email, " niet verwerkt (adres ontkoppeld)"] }, d.email))), s.problem && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: s.problem })] })), !s.aiAgent && (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [_jsx("span", { children: "Automatisch uitlezen staat uit: koppel een AI-agent bij Instellingen \u203A AI-Authenticatie" }), _jsx("a", { href: AI_AUTH_PATH, className: "shrink-0 underline font-medium", children: "Naar AI-Authenticatie" })] }))] }));
+    const lines = [];
+    lines.push(s.lastOkAt ? `Mails opgehaald ${fmtDayTime(s.lastOkAt)}` : "Nog geen mails opgehaald");
+    if (s.waiting > 0)
+        lines.push(`${s.waiting} wachten op verwerking`);
+    if (addresses.length > 0)
+        lines.push(addresses.join(", "));
+    if (s.ignoredNotFollowed > 0)
+        lines.push(`${s.ignoredNotFollowed} uit mappen die niet gevolgd worden`);
+    if (s.ignoredUnknown > 0)
+        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 useMailboxStatusNotices(s) {
+    const { isAdmin } = useIsSuperadmin();
+    if (!s)
+        return [];
+    const out = [];
+    const disconnected = Array.isArray(s.disconnected) ? s.disconnected : [];
+    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

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export interface DataColumn<T> {
+    key: string;
+    header: string;
+    /** Vaste breedte in px (colgroup, table-fixed). */
+    width: number;
+    cell: (row: T) => ReactNode;
+    /** Klikbare kop voor sorteren. */
+    sortable?: boolean;
+}
+/**
+ * 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[];
+    columns: DataColumn<T>[];
+    rowKey: (row: T) => string;
+    onRowClick?: (row: T, index: number) => void;
+    activeIndex?: number | null;
+    mobileCard: (row: T) => ReactNode;
+    sort?: {
+        key: string;
+        dir: "asc" | "desc";
+    } | null;
+    onSortChange?: (key: string) => void;
+    footer?: ReactNode;
+    /** 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;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,40 @@
+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-4";
+/**
+ * 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 hasEnd = !!(rowAction || onRowClick);
+    const activeRef = useRef(null);
+    useEffect(() => { activeRef.current?.scrollIntoView({ block: "nearest" }); }, [activeIndex]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-clip 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("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: "min-h-0 flex-1 divide-y divide-border overflow-y-auto overscroll-contain 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 }) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    const ini = ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
+    return (_jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary", "aria-hidden": true, children: ini }));
+}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export declare function EmptyState({ icon, title, text, action, }: {
+    icon: ReactNode;
+    title: string;
+    text?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BAaA"}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export function EmptyState({ icon, title, text, action, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-4 py-14 text-center", children: [_jsx("span", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground", "aria-hidden": true, children: icon }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-foreground", children: title }), text && _jsx("div", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: text })] }), action] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface FilterChip {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    onRemove: () => void;
+}
+/** Actieve filters als FilterChip uit Verkooporders (hele chip wist), plus "Alles wissen". */
+export declare function FilterChips({ chips, onClearAll }: {
+    chips: FilterChip[];
+    onClearAll?: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=FilterChips.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+/** 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(_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/HoverTip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export declare function HoverTip({ content, label, children, side, align, className, }: {
+    align?: "start" | "center" | "end";
+    content: ReactNode;
+    label: string;
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HoverTip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTip.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/HoverTip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAY,EACZ,KAAgB,EAChB,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4CA"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export function HoverTip({ content, label, children, side = "top", align = "center", className = "", }) {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(null);
+    const show = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        setOpen(true);
+    };
+    const hide = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), 80);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { type: "button", "aria-label": label, onPointerEnter: show, onPointerLeave: hide, onFocus: show, onBlur: hide, onClick: (e) => e.stopPropagation(), className: "inline-flex shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                    className, children: children }), _jsx(PopoverContent, { side: side, align: align, avoidCollisions: true, collisionPadding: 8, onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onPointerEnter: show, onPointerLeave: hide, onClick: (e) => e.stopPropagation(), className: "w-auto min-w-[14rem] max-w-[20rem] rounded-lg p-3 text-xs leading-snug shadow-lg motion-reduce:animate-none", children: content })] }));
+}

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

@@ -0,0 +1,9 @@
+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;
+    children?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=InlineAlert.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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, }) {
+    return _jsx(NoticeRow, { notice: { key: title, tone, title, details: children, action } });
+}