@flowselections/floriday-voorraad 1.0.49 → 1.0.51

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleText.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/CollapsibleText.tsx"],"names":[],"mappings":"AAOA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,KAAS,EAAE,SAAS,EAAE,EAAE,KAAK,+BAmDpE"}
+{"version":3,"file":"CollapsibleText.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/CollapsibleText.tsx"],"names":[],"mappings":"AAOA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,KAAS,EAAE,SAAS,EAAE,EAAE,KAAK,+BA8DpE"}

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

@@ -3,30 +3,33 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Lange tekstvelden die meer dan ~5 regels beslaan kunnen worden ingeklapt.
  * Kortere tekst wordt gewoon volledig getoond, zonder knop.
  */
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 export function CollapsibleText({ text, lines = 5, className }) {
     const value = (text ?? "").trim();
-    const ref = useRef(null);
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
     const [overflowing, setOverflowing] = useState(false);
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        const measure = measureRef.current;
+        if (!container || !measure)
             return;
         const check = () => {
-            // Alleen meten zolang de tekst ingeklapt is; uitgeklapt past hij immers.
-            if (!expanded)
-                setOverflowing(el.scrollHeight > el.clientHeight + 1);
+            const lineHeight = Number.parseFloat(getComputedStyle(measure).lineHeight);
+            if (!Number.isFinite(lineHeight))
+                return;
+            setOverflowing(measure.scrollHeight > lineHeight * lines + 1);
         };
         check();
         if (typeof ResizeObserver !== "undefined") {
             const ro = new ResizeObserver(check);
-            ro.observe(el);
+            ro.observe(container);
             return () => ro.disconnect();
         }
-    }, [value, expanded]);
+    }, [value, lines]);
     if (!value)
         return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
-    return (_jsxs("div", { className: className, children: [_jsx("p", { ref: ref, className: "break-words", style: expanded ? undefined : { WebkitLineClamp: lines, display: "-webkit-box", WebkitBoxOrient: "vertical", overflow: "hidden" }, children: value }), (overflowing || expanded) && (_jsx("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline", children: expanded ? (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "h-3.5 w-3.5" }), " Inklappen"] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5" }), " Meer tonen"] })) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: `relative min-w-0 ${className ?? ""}`, children: [_jsx("p", { ref: measureRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute inset-x-0 top-0 break-words", children: value }), _jsx("p", { className: "break-words", style: expanded ? undefined : { WebkitLineClamp: lines, display: "-webkit-box", WebkitBoxOrient: "vertical", overflow: "hidden" }, children: value }), (overflowing || expanded) && (_jsx("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline", children: expanded ? (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "h-3.5 w-3.5" }), " Inklappen"] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5" }), " Meer tonen"] })) }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"StockMutationHistoryCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/StockMutationHistoryCard.tsx"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AA8CD,wBAAgB,wBAAwB,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,KAAK,+BAmM1E"}
+{"version":3,"file":"StockMutationHistoryCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/StockMutationHistoryCard.tsx"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AA8CD,wBAAgB,wBAAwB,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,KAAK,+BAyN1E"}

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

@@ -1,12 +1,12 @@
-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";
 /**
  * Afboekgeschiedenis: wanneer is er voorraad bij- of afgeboekt en waarom.
  * Leest public.stock_mutation_log op de sleutel van dit artikel (inclusief
  * de groepssleutel wanneer het artikel via een groep wordt afgeboekt).
  */
 import { useEffect, useState } from "react";
-import { Card, CardContent, Badge } from "@flowselections/core";
-import { Loader2, History } from "lucide-react";
+import { Card, CardContent, Badge, Button } from "@flowselections/core";
+import { ChevronDown, ChevronUp, Loader2, History } from "lucide-react";
 import { supabase } from "../../integrations/supabase/client";
 import { CollapsibleText } from "./CollapsibleText";
 const TYPE_LABEL = {
@@ -42,6 +42,7 @@ function formatMoment(v) {
 export function StockMutationHistoryCard({ tradeItemKey, productId }) {
     const [rows, setRows] = useState(null);
     const [error, setError] = useState(null);
+    const [expanded, setExpanded] = useState(false);
     useEffect(() => {
         let cancelled = false;
         const load = async () => {
@@ -119,17 +120,17 @@ export function StockMutationHistoryCard({ tradeItemKey, productId }) {
             supabase.removeChannel(channel);
         };
     }, [tradeItemKey, productId]);
-    return (_jsxs(Card, { children: [_jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-6 py-4", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 bg-primary/10 text-primary", children: _jsx(History, { className: "h-4 w-4" }) }), _jsx("span", { className: "font-medium", children: "Afboekgeschiedenis" }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: rows ? `${rows.length} mutatie${rows.length === 1 ? "" : "s"}` : "" })] }), _jsxs(CardContent, { className: "pt-0", children: [error && (_jsxs("div", { className: "text-sm text-destructive", children: ["Kon voorraadmutaties niet laden: ", error] })), !rows && !error && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Mutaties laden\u2026"] })), rows && rows.length === 0 && !error && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Nog geen voorraadmutaties voor dit artikel." })), rows && rows.length > 0 && (_jsx("div", { className: "overflow-x-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left", children: "Wanneer" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Soort" }), _jsx("th", { className: "px-3 py-2 text-right", children: "Aantal" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Van \u2192 naar" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Order" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Reden" })] }) }), _jsx("tbody", { children: rows.map((r) => {
-                                        const meta = TYPE_LABEL[r.mutation_type] ?? {
-                                            label: r.mutation_type || "Onbekend",
-                                            tone: "bg-slate-100 text-slate-700 border-slate-200",
-                                        };
-                                        const physChanged = r.physical_before !== null &&
-                                            r.physical_after !== null &&
-                                            r.physical_before !== r.physical_after;
-                                        const resChanged = r.reserved_before !== null &&
-                                            r.reserved_after !== null &&
-                                            r.reserved_before !== r.reserved_after;
-                                        return (_jsxs("tr", { className: "border-t align-top", children: [_jsx("td", { className: "whitespace-nowrap px-3 py-2", children: formatMoment(r.created_at) }), _jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: "outline", className: `border ${meta.tone}`, children: meta.label }) }), _jsxs("td", { className: `px-3 py-2 text-right tabular-nums font-medium ${r.qty_delta < 0 ? "text-rose-700" : r.qty_delta > 0 ? "text-emerald-700" : ""}`, children: [r.qty_delta > 0 ? "+" : "", r.qty_delta] }), _jsxs("td", { className: "whitespace-nowrap px-3 py-2 tabular-nums text-muted-foreground", children: [physChanged && (_jsxs("div", { children: ["Liggend ", r.physical_before, " \u2192 ", r.physical_after] })), resChanged && (_jsxs("div", { children: ["Gereserveerd ", r.reserved_before, " \u2192 ", r.reserved_after] })), !physChanged && !resChanged && _jsx("span", { children: "\u2014" })] }), _jsx("td", { className: "whitespace-nowrap px-3 py-2", children: r.order_id ? (_jsx("a", { href: `/floriday-verkoop/verkooporders/${r.order_id}`, className: "text-primary hover:underline", children: r.order_number ?? "Order" })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx("td", { className: "px-3 py-2 text-muted-foreground", children: _jsx(CollapsibleText, { text: r.reason }) })] }, r.id));
-                                    }) })] }) }))] })] }));
+    return (_jsxs(Card, { children: [_jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-6 py-4", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 bg-primary/10 text-primary", children: _jsx(History, { className: "h-4 w-4" }) }), _jsx("span", { className: "font-medium", children: "Afboekgeschiedenis" }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: rows ? `${rows.length} mutatie${rows.length === 1 ? "" : "s"}` : "" })] }), _jsxs(CardContent, { className: "pt-0", children: [error && (_jsxs("div", { className: "text-sm text-destructive", children: ["Kon voorraadmutaties niet laden: ", error] })), !rows && !error && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Mutaties laden\u2026"] })), rows && rows.length === 0 && !error && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Nog geen voorraadmutaties voor dit artikel." })), rows && rows.length > 0 && (_jsxs("div", { className: "overflow-x-auto rounded-md border", children: [_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left", children: "Wanneer" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Soort" }), _jsx("th", { className: "px-3 py-2 text-right", children: "Aantal" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Van \u2192 naar" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Order" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Reden" })] }) }), _jsx("tbody", { children: (expanded ? rows : rows.slice(0, 5)).map((r) => {
+                                            const meta = TYPE_LABEL[r.mutation_type] ?? {
+                                                label: r.mutation_type || "Onbekend",
+                                                tone: "bg-slate-100 text-slate-700 border-slate-200",
+                                            };
+                                            const physChanged = r.physical_before !== null &&
+                                                r.physical_after !== null &&
+                                                r.physical_before !== r.physical_after;
+                                            const resChanged = r.reserved_before !== null &&
+                                                r.reserved_after !== null &&
+                                                r.reserved_before !== r.reserved_after;
+                                            return (_jsxs("tr", { className: "border-t align-top", children: [_jsx("td", { className: "whitespace-nowrap px-3 py-2", children: formatMoment(r.created_at) }), _jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: "outline", className: `border ${meta.tone}`, children: meta.label }) }), _jsxs("td", { className: `px-3 py-2 text-right tabular-nums font-medium ${r.qty_delta < 0 ? "text-rose-700" : r.qty_delta > 0 ? "text-emerald-700" : ""}`, children: [r.qty_delta > 0 ? "+" : "", r.qty_delta] }), _jsxs("td", { className: "whitespace-nowrap px-3 py-2 tabular-nums text-muted-foreground", children: [physChanged && (_jsxs("div", { children: ["Liggend ", r.physical_before, " \u2192 ", r.physical_after] })), resChanged && (_jsxs("div", { children: ["Gereserveerd ", r.reserved_before, " \u2192 ", r.reserved_after] })), !physChanged && !resChanged && _jsx("span", { children: "\u2014" })] }), _jsx("td", { className: "whitespace-nowrap px-3 py-2", children: r.order_id ? (_jsx("a", { href: `/floriday-verkoop/verkooporders/${r.order_id}`, className: "text-primary hover:underline", children: r.order_number ?? "Order" })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx("td", { className: "px-3 py-2 text-muted-foreground", children: _jsx(CollapsibleText, { text: r.reason }) })] }, r.id));
+                                        }) })] }), rows.length > 5 && (_jsx("div", { className: "flex justify-center border-t bg-muted/20 px-3 py-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setExpanded((current) => !current), className: "gap-1.5", children: expanded ? (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "h-4 w-4" }), " Inklappen"] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "h-4 w-4" }), " Meer tonen (", rows.length - 5, ")"] })) }) }))] }))] })] }));
 }