@flowselections/twinfield-authenticatie-module-15-06-2026 1.1.4 → 1.3.1

package/dist-lib/components/settings/TwinfieldAuthSettingsCard.d.ts

@@ -1,4 +1,4 @@
-export declare function TwinfieldAuthSettingsCard({ defaultExpanded }?: {
+export declare function TwinfieldAuthSettingsCard({ defaultExpanded, }?: {
     defaultExpanded?: boolean;
 }): import("react").JSX.Element;
 //# sourceMappingURL=TwinfieldAuthSettingsCard.d.ts.map

package/dist-lib/components/settings/TwinfieldAuthSettingsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwinfieldAuthSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/TwinfieldAuthSettingsCard.tsx"],"names":[],"mappings":"AA6FA,wBAAgB,yBAAyB,CAAC,EAAE,eAAuB,EAAE,GAAE;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAO,+BAuoBxG"}
+{"version":3,"file":"TwinfieldAuthSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/TwinfieldAuthSettingsCard.tsx"],"names":[],"mappings":"AAmTA,wBAAgB,yBAAyB,CAAC,EACxC,eAAsB,GACvB,GAAE;IACD,eAAe,CAAC,EAAE,OAAO,CAAC;CACtB,+BA6UL"}

package/dist-lib/components/settings/TwinfieldAuthSettingsCard.js

@@ -1,22 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { Card, Button, Input, Label, Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
-import { ChevronUp, ChevronDown } from "lucide-react";
+import { Card, Button, Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+import { ChevronUp, ChevronDown, Link2, Unlink } from "lucide-react";
 const twinfieldLogo = "/flowselections-assets/twinfield-authenticatie/twinfield-logo.svg";
-import { saveTwinfieldSettings, getTwinfieldStatus, testTwinfieldConnection, setTwinfieldActiveEnvironment, listTwinfieldOffices, } from "../../lib/twinfield.functions";
+import { startTwinfieldOAuth, syncTwinfieldCentralAccounts, listTwinfieldConnections, disconnectTwinfieldConnection, setTwinfieldConnectionOffice, listTwinfieldOfficesForConnection, } from "../../lib/twinfield.functions";
 import { triggerTwinfieldSync, getTwinfieldSyncState, } from "../../lib/twinfield-sync.functions";
 import { listTwinfieldPushQueue, retryTwinfieldQueueItem, } from "../../lib/twinfield-adapter.functions";
 import { cn } from "../../lib/utils";
-const REDIRECT_URI = "https://twinfield-authenticatie-module-15-06-2026.lovable.app/api/public/twinfield/callback";
-// ----------------------------------------------------------------------------
-// Helpers
-// ----------------------------------------------------------------------------
-function StepNumber({ n }) {
-    return (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", children: n }));
+function hasTwinfieldReturnParams() {
+    if (typeof window === "undefined")
+        return false;
+    const params = new URLSearchParams(window.location.search);
+    return ["success", "code", "state", "accountKey", "account_key", "error"].some((key) => params.has(key));
 }
-function Step({ n, title, description, children, }) {
-    return (_jsxs("div", { className: "flex gap-4", children: [_jsx(StepNumber, { n: n }), _jsxs("div", { className: "flex-1 space-y-3 pt-0.5", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-foreground", children: title }), description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description }))] }), _jsx("div", { children: children })] })] }));
+function clearTwinfieldReturnParams() {
+    if (typeof window === "undefined")
+        return;
+    const url = new URL(window.location.href);
+    const keys = ["success", "code", "state", "accountKey", "account_key", "error"];
+    let changed = false;
+    for (const key of keys) {
+        if (url.searchParams.has(key)) {
+            url.searchParams.delete(key);
+            changed = true;
+        }
+    }
+    if (changed) {
+        window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+    }
 }
 function relativeTime(iso) {
     if (!iso)
@@ -33,272 +45,247 @@ function relativeTime(iso) {
     const d = Math.floor(hr / 24);
     return `${d} dag${d === 1 ? "" : "en"} geleden`;
 }
-// ----------------------------------------------------------------------------
-// Main composed card
-// ----------------------------------------------------------------------------
-export function TwinfieldAuthSettingsCard({ defaultExpanded = false } = {}) {
-    const fetchStatus = useServerFn(getTwinfieldStatus);
-    const saveSettings = useServerFn(saveTwinfieldSettings);
-    const testConnection = useServerFn(testTwinfieldConnection);
-    const setEnv = useServerFn(setTwinfieldActiveEnvironment);
+function ConnectionCard({ conn, onChanged, onDisconnected, }) {
+    const loadOffices = useServerFn(listTwinfieldOfficesForConnection);
+    const saveOffice = useServerFn(setTwinfieldConnectionOffice);
+    const disconnect = useServerFn(disconnectTwinfieldConnection);
     const trigger = useServerFn(triggerTwinfieldSync);
-    const getState = useServerFn(getTwinfieldSyncState);
-    const fetchOffices = useServerFn(listTwinfieldOffices);
-    // Connection state
-    const [clientId, setClientId] = useState("");
-    const [clientSecret, setClientSecret] = useState("");
-    const [environment, setEnvironment] = useState("sandbox");
-    const [administrationCode, setAdministrationCode] = useState("");
-    const [loading, setLoading] = useState(true);
-    const [saving, setSaving] = useState(false);
-    const [savingAdmin, setSavingAdmin] = useState(false);
-    const [testing, setTesting] = useState(false);
-    const [connected, setConnected] = useState(false);
-    const [hasSecret, setHasSecret] = useState(false);
-    const [hasClientId, setHasClientId] = useState(false);
-    const [existingClientId, setExistingClientId] = useState("");
-    // Sync state
-    const [busy, setBusy] = useState(null);
-    const [counts, setCounts] = useState({ customers: 0, invoices: 0 });
-    const [states, setStates] = useState([]);
     const [offices, setOffices] = useState([]);
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-    const fetchPushQueue = useServerFn(listTwinfieldPushQueue);
-    const retryQueueItem = useServerFn(retryTwinfieldQueueItem);
-    const [pushQueue, setPushQueue] = useState([]);
-    const [retrying, setRetrying] = useState(null);
-    const loadPushQueue = async () => {
-        try {
-            const res = await fetchPushQueue();
-            setPushQueue(res.items ?? []);
-        }
-        catch {
-            // stille fout — push-queue is operationeel, niet kritiek voor de UI
-        }
-    };
-    const loadStatus = async () => {
-        try {
-            const res = await fetchStatus();
-            setConnected(!!res.connected);
-            setHasSecret(!!res.has_client_secret);
-            setEnvironment(res.active_environment ?? "sandbox");
-            if (res.settings) {
-                const existing = res.settings.client_id ?? "";
-                setExistingClientId(existing);
-                setHasClientId(!!existing);
-                setClientId("");
-                setAdministrationCode(res.settings.administration_code ?? "");
+    const [loadingOffices, setLoadingOffices] = useState(false);
+    const [savingOffice, setSavingOffice] = useState(false);
+    const [optimisticOffice, setOptimisticOffice] = useState(null);
+    const [disconnecting, setDisconnecting] = useState(false);
+    const [busy, setBusy] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            setLoadingOffices(true);
+            try {
+                const res = await loadOffices({ data: { id: conn.id } });
+                if (!cancelled) {
+                    const list = Array.isArray(res?.offices) ? res.offices : [];
+                    setOffices(list);
+                }
             }
-            else {
-                setExistingClientId("");
-                setHasClientId(false);
-                setClientId("");
-                setAdministrationCode("");
+            catch {
+                /* silent */
             }
-        }
-        catch {
-            toast.error("Status kon niet geladen worden.");
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const loadSyncState = async () => {
-        try {
-            const res = await getState();
-            const safeStates = Array.isArray(res?.states) ? res.states : [];
-            setStates(safeStates);
-            setCounts(res?.counts ?? { customers: 0, invoices: 0 });
-        }
-        catch {
-            // silent
-        }
-    };
-    const loadOffices = async () => {
-        try {
-            const res = await fetchOffices();
-            const list = Array.isArray(res?.offices) ? res.offices : [];
-            setOffices(list);
-            // Auto-vullen wanneer er precies één administratie is en het veld leeg is
-            setAdministrationCode((cur) => !cur && list.length === 1 ? list[0].code : cur);
-        }
-        catch {
-            // silent — handmatig typen blijft mogelijk
-        }
-    };
-    useEffect(() => {
-        loadStatus();
-        loadSyncState();
-        loadPushQueue();
-    }, []);
+            finally {
+                if (!cancelled)
+                    setLoadingOffices(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [conn.id, loadOffices]);
+    // Wanneer server-waarde overeenkomt met optimistische keuze: opruimen.
     useEffect(() => {
-        if (connected)
-            loadOffices();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [connected]);
-    const handleSave = async () => {
-        const effectiveClientId = clientId.trim() || existingClientId;
-        if (!effectiveClientId) {
-            toast.error("Client ID is verplicht");
-            return;
+        if (optimisticOffice && conn.office_code === optimisticOffice.code) {
+            setOptimisticOffice(null);
         }
-        setSaving(true);
+    }, [conn.office_code, optimisticOffice]);
+    const handleOfficeChange = async (code) => {
+        const picked = offices.find((o) => o.code === code);
+        setOptimisticOffice({ code, name: picked?.name ?? null });
+        setSavingOffice(true);
         try {
-            await saveSettings({
-                data: {
-                    client_id: effectiveClientId,
-                    client_secret: clientSecret || undefined,
-                    environment,
-                    administration_code: administrationCode || undefined,
-                },
+            await saveOffice({
+                data: { id: conn.id, office_code: code, company_name: picked?.name ?? null },
             });
-            setClientId("");
-            setClientSecret("");
-            toast.success("Wijzigingen opgeslagen.");
-            await loadStatus();
+            toast.success("Administratie opgeslagen.");
+            await onChanged();
         }
         catch (e) {
-            const msg = e?.message;
-            toast.error(msg && msg.length < 120 ? msg : "Opslaan mislukt.");
+            setOptimisticOffice(null);
+            toast.error(e?.message ?? "Opslaan mislukt.");
         }
         finally {
-            setSaving(false);
+            setSavingOffice(false);
         }
     };
-    const handleSaveAdmin = async () => {
-        if (!existingClientId) {
-            toast.error("Vul eerst je verbindingsgegevens in.");
+    const handleDisconnect = async () => {
+        if (!confirm("Weet je zeker dat je deze Twinfield-koppeling wilt verbreken?"))
             return;
-        }
-        setSavingAdmin(true);
+        setDisconnecting(true);
         try {
-            await saveSettings({
-                data: {
-                    client_id: existingClientId,
-                    environment,
-                    administration_code: administrationCode || undefined,
-                },
-            });
-            toast.success("Instellingen opgeslagen.");
-            await loadStatus();
+            const res = (await disconnect({ data: { id: conn.id } }));
+            if (res?.centralRevokeFailed) {
+                toast.warning(`Lokaal verbroken, maar Central Auth kon niet worden ingetrokken: ${res.centralRevokeMessage ?? "onbekende fout"}. Controleer Central Auth.`);
+            }
+            else {
+                toast.success("Verbinding verbroken.");
+            }
+            await onDisconnected();
         }
         catch (e) {
-            const msg = e?.message;
-            toast.error(msg && msg.length < 120 ? msg : "Opslaan mislukt.");
+            toast.error(e?.message ?? "Verbreken mislukt.");
         }
         finally {
-            setSavingAdmin(false);
+            setDisconnecting(false);
         }
     };
-    const handleTest = async () => {
-        setTesting(true);
+    const runSync = async (entity) => {
+        setBusy(entity);
         try {
-            const res = await testConnection({ data: undefined });
-            if (res.ok)
-                toast.success(res.message);
-            else
-                toast.error(res.message);
+            const res = await trigger({ data: { entity_type: entity } });
+            if (res.ok) {
+                toast.success(`${entity === "customers" ? "Debiteuren" : "Verkoopfacturen"} bijgewerkt (${res.upserted} rij(en)).`);
+            }
+            else {
+                toast.error(`Bijwerken mislukt: ${res.error ?? "onbekende fout"}`);
+            }
+            await onChanged();
         }
-        catch {
-            toast.error("Verbinding testen is mislukt.");
+        catch (e) {
+            toast.error(e?.message ?? "Bijwerken mislukt.");
         }
         finally {
-            setTesting(false);
+            setBusy(null);
         }
     };
-    const handleEnvChange = async (newEnv) => {
-        if (newEnv === environment)
-            return;
-        setEnvironment(newEnv);
+    const effectiveOfficeCode = conn.office_code ?? optimisticOffice?.code ?? null;
+    const effectiveOfficeName = conn.company_name ?? optimisticOffice?.name ?? null;
+    const displayName = effectiveOfficeName ?? effectiveOfficeCode ?? conn.company_code ?? "Nog geen administratie gekozen";
+    return (_jsxs("div", { className: "rounded-lg border p-4 space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "font-semibold text-foreground truncate", children: displayName }), _jsx(Badge, { variant: conn.connected ? "default" : "secondary", className: "font-normal", children: conn.connected ? "Verbonden" : "Onvolledig" }), _jsx(Badge, { variant: "outline", className: "font-normal", children: conn.environment === "sandbox" ? "Test" : "Live" })] }), _jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [effectiveOfficeCode ? (_jsx("span", { className: "font-mono", children: effectiveOfficeCode })) : (_jsx("span", { children: "Kies hieronder een administratie om te kunnen synchroniseren." })), conn.connected_at && (_jsxs("span", { className: "ml-2", children: ["\u00B7 gekoppeld ", relativeTime(conn.connected_at)] }))] })] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: handleDisconnect, disabled: disconnecting, className: "text-muted-foreground hover:text-destructive", children: [_jsx(Unlink, { className: "h-4 w-4 mr-1.5" }), disconnecting ? "Bezig…" : "Verbreken"] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Administratie" }), offices.length > 0 ? (_jsxs(Select, { value: effectiveOfficeCode ?? undefined, onValueChange: handleOfficeChange, disabled: savingOffice, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een administratie", children: (() => {
+                                        const selected = offices.find((o) => o.code === effectiveOfficeCode);
+                                        if (!selected)
+                                            return null;
+                                        return (_jsxs("span", { className: "flex items-baseline gap-2 truncate", children: [_jsx("span", { className: "truncate", children: selected.name ?? selected.code }), _jsx("span", { className: "text-[11px] text-muted-foreground font-mono", children: selected.code })] }));
+                                    })() }) }), _jsx(SelectContent, { children: offices.map((o) => (_jsx(SelectItem, { value: o.code, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: o.name ?? o.code }), _jsx("span", { className: "text-[11px] text-muted-foreground font-mono", children: o.code })] }) }, o.code))) })] })) : (_jsx("div", { className: "text-xs text-muted-foreground", children: loadingOffices ? "Administraties ophalen…" : "Geen administraties gevonden." }))] }), effectiveOfficeCode && (_jsxs("div", { className: "flex flex-wrap gap-2 pt-1", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => runSync("customers"), disabled: busy === "customers", children: busy === "customers" ? "Debiteuren…" : "Debiteuren bijwerken" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => runSync("invoices"), disabled: busy === "invoices", children: busy === "invoices" ? "Facturen…" : "Facturen bijwerken" })] }))] }));
+}
+export function TwinfieldAuthSettingsCard({ defaultExpanded = true, } = {}) {
+    const startOAuth = useServerFn(startTwinfieldOAuth);
+    const syncCentralAccounts = useServerFn(syncTwinfieldCentralAccounts);
+    const listConnections = useServerFn(listTwinfieldConnections);
+    const getSyncState = useServerFn(getTwinfieldSyncState);
+    const fetchPushQueue = useServerFn(listTwinfieldPushQueue);
+    const retryQueueItem = useServerFn(retryTwinfieldQueueItem);
+    const [connections, setConnections] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [checkingCentral, setCheckingCentral] = useState(false);
+    const [centralNotice, setCentralNotice] = useState(null);
+    const [connecting, setConnecting] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const [syncStates, setSyncStates] = useState([]);
+    const [counts, setCounts] = useState({
+        customers: 0,
+        invoices: 0,
+    });
+    const [pushQueue, setPushQueue] = useState([]);
+    const [retrying, setRetrying] = useState(null);
+    const loadAll = async (opts = {}) => {
+        setLoading(true);
+        if (!opts.skipCentralSync)
+            setCheckingCentral(true);
+        setCentralNotice(null);
+        let syncResult = null;
         try {
-            await setEnv({ data: { environment: newEnv } });
-            await loadStatus();
+            if (!opts.skipCentralSync) {
+                try {
+                    syncResult = await syncCentralAccounts({ data: undefined });
+                }
+                catch (e) {
+                    const message = e?.message ?? "Central Auth synchronisatie mislukt.";
+                    setCentralNotice(message);
+                    if (opts.afterOAuthReturn)
+                        toast.error(message);
+                }
+            }
+            const [connRes, stateRes, queueRes] = await Promise.all([
+                listConnections(),
+                getSyncState().catch(() => null),
+                fetchPushQueue().catch(() => null),
+            ]);
+            const list = Array.isArray(connRes?.connections) ? connRes.connections : [];
+            setConnections(list);
+            if (opts.afterOAuthReturn) {
+                if (list.length > 0) {
+                    toast.success("Twinfield-koppeling bijgewerkt.");
+                }
+                else if (syncResult && (syncResult.received ?? 0) === 0) {
+                    setCentralNotice("Twinfield heeft toestemming geregistreerd, maar Central Auth geeft nog geen account terug aan deze module.");
+                }
+                clearTwinfieldReturnParams();
+            }
+            else if (syncResult && syncResult.ok === false && syncResult.error) {
+                setCentralNotice(syncResult.error);
+            }
+            if (stateRes) {
+                setSyncStates(Array.isArray(stateRes.states) ? stateRes.states : []);
+                setCounts(stateRes.counts ?? { customers: 0, invoices: 0 });
+            }
+            if (queueRes) {
+                setPushQueue(queueRes.items ?? []);
+            }
         }
         catch {
-            toast.error("Omgeving wijzigen vereist admin-rechten.");
+            toast.error("Kon Twinfield-status niet laden.");
+        }
+        finally {
+            setCheckingCentral(false);
+            setLoading(false);
         }
     };
-    const handleDelete = () => {
-        setClientId("");
-        setClientSecret("");
-        toast.message("Vul nieuwe verbindingsgegevens in en klik op opslaan om te vervangen.");
-    };
-    const runSync = async (entity) => {
-        setBusy(entity);
+    useEffect(() => {
+        loadAll({ afterOAuthReturn: hasTwinfieldReturnParams() });
+        // Achtergrond-polling elke 30s zonder spinner, zodat de UI live blijft.
+        const iv = setInterval(() => {
+            loadAll({ skipCentralSync: true }).catch(() => { });
+        }, 30000);
+        return () => clearInterval(iv);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleConnect = async () => {
+        setConnecting(true);
         try {
-            const res = await trigger({ data: { entity_type: entity } });
-            if (res.ok)
-                toast.success(`${entity === "customers" ? "Debiteuren" : "Verkoopfacturen"} bijgewerkt (${res.upserted} rij(en)).`);
-            else
-                toast.error(`Bijwerken mislukt: ${res.error ?? "onbekende fout"}`);
-            await loadSyncState();
+            const res = await startOAuth({ data: undefined });
+            if (!res?.url)
+                throw new Error("Kon geen koppelingsverzoek starten.");
+            // Same-tab redirect: Twinfield stuurt via callback terug naar de app
+            window.location.href = res.url;
         }
         catch (e) {
-            const msg = e?.message;
-            toast.error(msg && msg.length < 120 ? msg : "Bijwerken mislukt.");
-        }
-        finally {
-            setBusy(null);
+            toast.error(e?.message ?? "Koppelen niet gelukt.");
+            setConnecting(false);
         }
     };
-    const stateFor = (e) => states.find((s) => s.entity_type === e);
-    const isSandbox = environment === "sandbox";
-    return (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs("div", { className: cn("flex items-start justify-between gap-4 p-6", isExpanded && "border-b"), children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-muted p-2", children: _jsx("img", { src: twinfieldLogo, alt: "Twinfield", className: "h-full w-full object-contain" }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Twinfield koppeling" }), _jsx(Badge, { variant: "secondary", className: "font-normal", children: isSandbox ? "Testomgeving" : "Live omgeving" }), _jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${connected ? "bg-green-500" : "bg-muted-foreground/40"}` }), _jsx("span", { className: connected ? "text-foreground" : "text-muted-foreground", children: loading ? "Laden…" : connected ? "Verbonden" : "Niet verbonden" })] })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Verbind je Twinfield-account om automatisch facturen en debiteuren over te nemen." })] })] }), _jsx("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "shrink-0 p-1 rounded-md hover:bg-muted transition-colors", "aria-label": isExpanded ? "Samenvouwen" : "Uitklappen", children: isExpanded ? (_jsx(ChevronUp, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(ChevronDown, { className: "h-5 w-5 text-muted-foreground" })) })] }), isExpanded && (_jsxs("div", { className: "space-y-8 p-6", children: [_jsx(Step, { n: 1, title: "Kies omgeving", description: "Kies of je wilt testen of live wilt werken.", children: _jsxs("div", { className: "inline-flex rounded-lg border bg-muted/40 p-1", children: [_jsx("button", { type: "button", onClick: () => handleEnvChange("sandbox"), className: `px-4 py-1.5 text-sm rounded-md transition-colors ${isSandbox
-                                        ? "bg-background text-foreground shadow-sm"
-                                        : "text-muted-foreground hover:text-foreground"}`, children: "Testomgeving" }), _jsx("button", { type: "button", onClick: () => handleEnvChange("live"), className: `px-4 py-1.5 text-sm rounded-md transition-colors ${!isSandbox
-                                        ? "bg-background text-foreground shadow-sm"
-                                        : "text-muted-foreground hover:text-foreground"}`, children: "Live omgeving" })] }) }), _jsx(Step, { n: 2, title: "Vul verbindingsgegevens in", description: "", children: _jsxs("div", { className: "rounded-lg border p-5 space-y-5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h4", { className: "font-semibold text-foreground", children: "Verbindingsgegevens" }), hasClientId && (_jsx(Badge, { className: "font-normal", children: "Actief" }))] }), hasClientId && (_jsx("button", { type: "button", onClick: handleDelete, className: "text-sm text-muted-foreground hover:text-foreground", children: "Verwijderen" }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "tw-client-id", children: "Client ID" }), _jsx(Input, { id: "tw-client-id", value: clientId, onChange: (e) => setClientId(e.target.value), placeholder: hasClientId ? "••••••••••••••••" : "", autoComplete: "off" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Te vinden in je Twinfield API-instellingen." }), hasClientId && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "tw-client-secret", children: "Client Secret" }), _jsx(Input, { id: "tw-client-secret", type: "password", value: clientSecret, onChange: (e) => setClientSecret(e.target.value), placeholder: hasSecret ? "••••••••" : "", autoComplete: "new-password" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Houd deze sleutel priv\u00E9." }), hasSecret && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "tw-redirect", children: "Doorverwijs-URL" }), _jsx(Input, { id: "tw-redirect", value: REDIRECT_URI, readOnly: true, className: "font-mono text-xs" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Voeg deze URL toe als toegestane callback in je Twinfield-app." })] }), _jsx("div", { children: _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan…" : "Wijzigingen opslaan" }) })] }) }), _jsx(Step, { n: 3, title: "Test de verbinding", description: "Controleer of je gegevens correct zijn en of de koppeling werkt.", children: _jsx(Button, { variant: "outline", onClick: handleTest, disabled: testing, children: testing ? "Testen…" : "Verbinding testen" }) }), _jsx(Step, { n: 4, title: "Kies administratie", description: "Geef aan uit welke Twinfield-administratie we facturen en debiteuren ophalen.", children: _jsxs("div", { className: "rounded-lg border p-5 space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "tw-admin", children: "Administratiecode" }), offices.length > 0 ? (_jsxs(Select, { value: administrationCode || undefined, onValueChange: setAdministrationCode, children: [_jsx(SelectTrigger, { id: "tw-admin", children: _jsx(SelectValue, { placeholder: offices.length === 0
-                                                            ? "Geen administraties beschikbaar"
-                                                            : "Kies een administratie", children: (() => {
-                                                            const selected = offices.find((o) => o.code === administrationCode);
-                                                            if (!selected)
-                                                                return null;
-                                                            return (_jsxs("span", { className: "flex items-baseline gap-2 truncate", children: [_jsx("span", { className: "truncate", children: selected.name ?? selected.code }), _jsx("span", { className: "text-[11px] text-muted-foreground font-mono", children: selected.code })] }));
-                                                        })() }) }), _jsx(SelectContent, { children: offices.map((o) => (_jsx(SelectItem, { value: o.code, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: o.name ?? o.code }), _jsx("span", { className: "text-[11px] text-muted-foreground font-mono", children: o.code })] }) }, o.code))) })] })) : (_jsx(Input, { id: "tw-admin", value: administrationCode, onChange: (e) => setAdministrationCode(e.target.value), autoComplete: "off", placeholder: "Bijv. 1001" })), _jsx("p", { className: "text-xs text-muted-foreground", children: "De code van de administratie in Twinfield (ook wel \"company\" genoemd)." })] }), _jsx(Button, { onClick: handleSaveAdmin, disabled: savingAdmin, children: savingAdmin ? "Opslaan…" : "Instellingen opslaan" })] }) }), _jsxs(Step, { n: 5, title: "Gegevens up-to-date houden", description: "We halen je Twinfield-gegevens automatisch op en bewaren ze in je werkomgeving. Zo werkt alles effici\u00EBnt & snel.", children: [_jsx("div", { className: "space-y-3", children: ([
-                                    {
-                                        key: "customers",
-                                        label: "Debiteuren",
-                                        cadence: "Wordt elk uur automatisch bijgewerkt.",
-                                        countLabel: "Aantal debiteuren",
-                                    },
-                                    {
-                                        key: "invoices",
-                                        label: "Verkoopfacturen",
-                                        cadence: "Wordt elke 15 minuten automatisch bijgewerkt.",
-                                        countLabel: "Aantal facturen",
-                                    },
-                                ]).map((item) => {
-                                    const s = stateFor(item.key);
-                                    const count = item.key === "customers" ? counts.customers : counts.invoices;
-                                    return (_jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-foreground", children: item.label }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: item.cadence })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => runSync(item.key), disabled: busy === item.key, children: busy === item.key ? "Bezig…" : "Nu bijwerken" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Laatst bijgewerkt" }), _jsx("div", { className: "text-sm font-medium text-foreground mt-0.5", children: relativeTime(s?.last_synced_at ?? null) })] }), _jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: item.countLabel }), _jsx("div", { className: "text-sm font-medium text-foreground mt-0.5", children: count })] })] }), s?.last_error && (() => {
-                                                const isRateLimited = /429|rate.?limit|fair.?use|concurren/i.test(s.last_error);
-                                                return (_jsxs("div", { className: `rounded-md border px-3 py-2 text-xs ${isRateLimited
-                                                        ? "border-orange-200 bg-orange-50 text-orange-900"
-                                                        : "border-amber-200 bg-amber-50 text-amber-900"}`, children: [_jsx("div", { className: "font-medium", children: isRateLimited
-                                                                ? "Twinfield rate-limit bereikt (Fair Use Policy)"
-                                                                : "Laatste automatische poging mislukte tijdelijk" }), _jsx("div", { className: `mt-1 ${isRateLimited ? "text-orange-800" : "text-amber-800"}`, children: isRateLimited
-                                                                ? "Twinfield heeft tijdelijk verzoeken geweigerd wegens te veel verkeer. De sync probeert het automatisch opnieuw op het volgende ingeplande moment."
-                                                                : "Twinfield reageerde niet correct. De volgende geplande update probeert het automatisch opnieuw — je kunt ook nu zelf op \"Nu bijwerken\" klikken." }), _jsxs("details", { className: "mt-1.5", children: [_jsx("summary", { className: `cursor-pointer ${isRateLimited ? "text-orange-700 hover:text-orange-900" : "text-amber-700 hover:text-amber-900"}`, children: "Technische details" }), _jsx("div", { className: `mt-1 font-mono text-[11px] break-all ${isRateLimited ? "text-orange-900/80" : "text-amber-900/80"}`, children: s.last_error })] })] }));
-                                            })()] }, item.key));
-                                }) }), connected && pushQueue.length > 0 && (_jsxs("div", { className: "mt-6 rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-foreground", children: "Uitgaande facturen (push-wachtrij)" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Laatste 20 facturen die vanuit de facturatiemodule naar Twinfield zijn gestuurd." })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: loadPushQueue, children: "Vernieuwen" })] }), _jsx("div", { className: "mt-3 divide-y rounded-md border", children: pushQueue.map((q) => {
-                                            const variant = q.status === "done"
-                                                ? "default"
-                                                : q.status === "dead" || q.status === "error"
-                                                    ? "destructive"
-                                                    : "secondary";
-                                            return (_jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: variant, children: q.status }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["poging ", q.attempts, "/5"] }), q.external_id && (_jsxs("span", { className: "text-xs font-mono text-foreground", children: ["#", q.external_id] }))] }), q.last_error && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground break-all", children: q.last_error })), _jsx("div", { className: "mt-0.5 text-[11px] text-muted-foreground", children: relativeTime(q.updated_at ?? q.created_at) })] }), (q.status === "error" || q.status === "dead") && (_jsx(Button, { size: "sm", variant: "outline", disabled: retrying === q.id, onClick: async () => {
-                                                            setRetrying(q.id);
-                                                            try {
-                                                                await retryQueueItem({ data: { id: q.id } });
-                                                                toast.success("Opnieuw in de wachtrij geplaatst.");
-                                                                await loadPushQueue();
-                                                            }
-                                                            catch (e) {
-                                                                toast.error(e?.message ?? "Opnieuw proberen mislukt");
-                                                            }
-                                                            finally {
-                                                                setRetrying(null);
-                                                            }
-                                                        }, children: retrying === q.id ? "Bezig…" : "Opnieuw" }))] }, q.id));
-                                        }) })] }))] })] })), isExpanded && (_jsx("div", { className: "border-t px-6 py-4 text-center", children: _jsx("a", { href: "https://accounting.twinfield.com/webservices/documentation/", target: "_blank", rel: "noreferrer", className: "text-sm text-primary hover:underline", children: "Waar vind ik deze gegevens in Twinfield?" }) }))] }));
+    const hasAny = connections.length > 0;
+    const anyConnected = connections.some((c) => c.connected);
+    const statusLoading = loading || checkingCentral;
+    const stateFor = (e) => syncStates.find((s) => s.entity_type === e);
+    return (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs("div", { className: cn("flex items-start justify-between gap-4 p-6", isExpanded && "border-b"), children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-muted p-2", children: _jsx("img", { src: twinfieldLogo, alt: "Twinfield", className: "h-full w-full object-contain" }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Twinfield koppeling" }), _jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${anyConnected ? "bg-green-500" : "bg-muted-foreground/40"}` }), _jsx("span", { className: anyConnected ? "text-foreground" : "text-muted-foreground", children: statusLoading
+                                                            ? "Koppeling controleren…"
+                                                            : anyConnected
+                                                                ? "Verbonden"
+                                                                : "Niet verbonden" })] })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "E\u00E9n Twinfield-account per omgeving. Verbreek eerst de huidige koppeling om te wisselen naar een ander account." })] })] }), _jsx("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "shrink-0 p-1 rounded-md hover:bg-muted transition-colors", "aria-label": isExpanded ? "Samenvouwen" : "Uitklappen", children: isExpanded ? (_jsx(ChevronUp, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(ChevronDown, { className: "h-5 w-5 text-muted-foreground" })) })] }), isExpanded && (_jsxs("div", { className: "space-y-6 p-6", children: [centralNotice && (_jsx("div", { className: "rounded-lg border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", "aria-live": "polite", children: centralNotice })), !hasAny && !loading && (_jsxs("div", { className: "rounded-lg border border-dashed p-8 text-center space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-foreground", children: "Nog niet verbonden met Twinfield" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Log in bij Twinfield en geef eenmalig toestemming. Wij bewaren de toegang veilig en verversen tokens automatisch." })] }), _jsxs(Button, { size: "lg", onClick: handleConnect, disabled: connecting, children: [_jsx(Link2, { className: "h-4 w-4 mr-2" }), connecting ? "Koppelen…" : "Verbind met Twinfield"] })] })), hasAny && (_jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-base font-semibold text-foreground", children: "Gekoppelde administratie" }), _jsx("div", { className: "space-y-3", children: connections.map((c) => (_jsx(ConnectionCard, { conn: c, onChanged: () => loadAll(), onDisconnected: async () => {
+                                        // Optimistisch: verwijder rij direct uit UI en sla Central-sync over,
+                                        // anders wordt de rij vanuit Central Auth meteen opnieuw opgehaald.
+                                        setConnections((prev) => prev.filter((row) => row.id !== c.id));
+                                        await loadAll({ skipCentralSync: true });
+                                    } }, c.id))) })] })), anyConnected && (_jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-foreground", children: "Automatische sync" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Debiteuren worden elke 15 minuten en verkoopfacturen elke 10 minuten automatisch bijgewerkt. Incomplete records worden elke 5 minuten aangevuld. Deze weergave ververst zichzelf elke 30 seconden." })] }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: ["customers", "invoices"].map((k) => {
+                                    const s = stateFor(k);
+                                    const count = k === "customers" ? counts.customers : counts.invoices;
+                                    return (_jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: k === "customers" ? "Debiteuren" : "Verkoopfacturen" }), _jsxs("div", { className: "text-sm font-medium text-foreground mt-0.5", children: [count, " \u00B7 laatst ", relativeTime(s?.last_synced_at ?? null)] }), s?.last_error && (_jsx("div", { className: "text-[11px] text-amber-700 mt-1 break-all", children: s.last_error }))] }, k));
+                                }) })] })), anyConnected && pushQueue.length > 0 && (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-foreground", children: "Uitgaande facturen (push-wachtrij)" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Laatste 20 facturen die naar Twinfield zijn gestuurd." })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void loadAll(), children: "Vernieuwen" })] }), _jsx("div", { className: "mt-3 divide-y rounded-md border", children: pushQueue.map((q) => {
+                                    const variant = q.status === "done"
+                                        ? "default"
+                                        : q.status === "dead" || q.status === "error"
+                                            ? "destructive"
+                                            : "secondary";
+                                    return (_jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: variant, children: q.status }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["poging ", q.attempts, "/5"] }), q.external_id && (_jsxs("span", { className: "text-xs font-mono text-foreground", children: ["#", q.external_id] }))] }), q.last_error && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground break-all", children: q.last_error })), _jsx("div", { className: "mt-0.5 text-[11px] text-muted-foreground", children: relativeTime(q.updated_at ?? q.created_at) })] }), (q.status === "error" || q.status === "dead") && (_jsx(Button, { size: "sm", variant: "outline", disabled: retrying === q.id, onClick: async () => {
+                                                    setRetrying(q.id);
+                                                    try {
+                                                        await retryQueueItem({ data: { id: q.id } });
+                                                        toast.success("Opnieuw in de wachtrij geplaatst.");
+                                                        await loadAll();
+                                                    }
+                                                    catch (e) {
+                                                        toast.error(e?.message ?? "Opnieuw proberen mislukt");
+                                                    }
+                                                    finally {
+                                                        setRetrying(null);
+                                                    }
+                                                }, children: retrying === q.id ? "Bezig…" : "Opnieuw" }))] }, q.id));
+                                }) })] }))] }))] }));
 }

package/dist-lib/index.d.ts

@@ -4,8 +4,9 @@ export * from './components/TemplatePage';
 export * from './components/TemplateModulePage';
 export { TemplateModuleLogo } from './components/TemplateModuleLogo';
 export { TemplateModulePage } from "./components/TemplateModulePage";
-export { downloadTwinfieldInvoicePdf, resendTwinfieldInvoice, sendPaymentReminder, duplicateTwinfieldInvoice, } from "./lib/accounting/twinfield/actions.functions";
+export { downloadTwinfieldInvoicePdf, downloadTwinfieldInvoicePdfsBulk, resendTwinfieldInvoice, sendPaymentReminder, duplicateTwinfieldInvoice, } from "./lib/accounting/twinfield/actions.functions";
 export { getTwinfieldConformance } from "./lib/accounting/twinfield/conformance.functions";
+export { createTwinfieldCustomer, createTwinfieldInvoice, checkTwinfieldWritePermissions, } from "./lib/accounting/twinfield/writes.functions";
 export { TwinfieldConformanceCard } from "./components/settings/TwinfieldConformanceCard";
 export declare const twinfieldAuthenticatieModule: FlowModule;
 export declare const myModule: FlowModule;

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAKrE,OAAO,EACL,2BAA2B,EAC3B,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAE1F,eAAO,MAAM,4BAA4B,EAAE,UAa1C,CAAC;AAEF,eAAO,MAAM,QAAQ,YAA+B,CAAC;AACrD,eAAO,MAAM,4BAA4B,YAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAKrE,OAAO,EACL,2BAA2B,EAC3B,gCAAgC,EAChC,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAE1F,eAAO,MAAM,4BAA4B,EAAE,UAY1C,CAAC;AAEF,eAAO,MAAM,QAAQ,YAA+B,CAAC;AACrD,eAAO,MAAM,4BAA4B,YAA+B,CAAC"}