@flowselections/twinfield-authenticatie-module-15-06-2026 1.0.5

package/dist-lib/_core-safelist.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_core-safelist.d.ts.map

package/dist-lib/_core-safelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_core-safelist.d.ts","sourceRoot":"","sources":["../src/_core-safelist.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,CAAC"}

package/dist-lib/_core-safelist.js

@@ -0,0 +1,15 @@
+// Forceert Tailwind classes die uit @flowselections/core komen maar niet
+// voorkomen in de eigen broncode van deze module.
+// Zonder dit bestand worden deze classes weggeoptimaliseerd op de
+// Lovable productie build.
+const _safelist = [
+    // Layout — Sidebar en shell structuur
+    'h-full', 'flex-col', 'flex-1', 'min-h-screen', 'ml-64', 'pt-16',
+    'items-start', 'items-center', 'justify-between', 'border-t',
+    'w-64', 'h-screen', 'h-20', 'overflow-y-auto',
+    // Grid — InstellingenPage
+    'grid', 'lg:grid-cols-2', 'gap-6', 'p-6', 'space-y-6',
+    // Toggle/Switch — aan/uit zichtbaarheid
+    'data-[state=checked]:bg-primary', 'data-[state=unchecked]:bg-input',
+];
+export {};

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

@@ -0,0 +1,6 @@
+interface TemplateModuleLogoProps {
+    className?: string;
+}
+export declare function TemplateModuleLogo({ className }: TemplateModuleLogoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TemplateModuleLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateModuleLogo.d.ts","sourceRoot":"","sources":["../../src/components/TemplateModuleLogo.tsx"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAwBxE"}

package/dist-lib/components/TemplateModuleLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TemplateModuleLogo({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "currentColor", opacity: "0.1" }), _jsx("text", { x: "50%", y: "50%", dominantBaseline: "middle", textAnchor: "middle", fontSize: "18", fontWeight: "600", fill: "currentColor", children: "M" })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function TemplateModulePage(): import("react").JSX.Element;
+//# sourceMappingURL=TemplateModulePage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateModulePage.d.ts","sourceRoot":"","sources":["../../src/components/TemplateModulePage.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,kBAAkB,gCAmFjC"}

package/dist-lib/components/TemplateModulePage.js

@@ -0,0 +1,44 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// src/components/TemplateModulePage.tsx — EXAMPLE PAGE COMPONENT
+// ============================================================================
+// Pagina-componenten horen in src/components/, NIET alleen in src/routes/.
+// src/routes/ wordt NIET naar npm gepubliceerd (zie tsconfig.build.json exclude).
+//
+// GEEN <Header /> hier — die zit in _authenticated.tsx via staticData.title
+// ============================================================================
+import { useState, useEffect } from "react";
+import { useAuth, supabase, Button, Card, CardContent, CardHeader, CardTitle, toast, } from "@flowselections/core";
+import { TemplateModuleLogo } from './TemplateModuleLogo';
+export function TemplateModulePage() {
+    // Auth is guaranteed — this user is already logged in
+    const { user, isAdmin } = useAuth();
+    // Example state — replace with your own
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        loadData();
+    }, []);
+    const loadData = async () => {
+        setLoading(true);
+        try {
+            // Example query — replace "products" with your table
+            const { data, error } = await supabase
+                .from("products")
+                .select("*")
+                .limit(10);
+            if (error)
+                throw error;
+            // ✅ Altijd Array.isArray bewaken op server-function data
+            // const safeItems = Array.isArray(data?.items) ? data.items : [];
+            setItems(Array.isArray(data) ? data : []);
+        }
+        catch {
+            toast.error("Fout bij het laden van gegevens");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [isAdmin && (_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Ingelogd als admin: ", user?.email] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Overzicht" }) }), _jsxs(CardContent, { children: [loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen gegevens gevonden." })) : (_jsxs("p", { className: "text-sm", children: [items.length, " items geladen."] })), _jsx(Button, { onClick: loadData, className: "mt-4", disabled: loading, children: "Vernieuwen" })] })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(TemplateModuleLogo, { className: "w-6 h-6 text-primary" }), _jsx("span", { children: "SVG-component (voorkeur voor vector-logo's)" })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function TemplatePage(): import("react").JSX.Element;
+//# sourceMappingURL=TemplatePage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplatePage.d.ts","sourceRoot":"","sources":["../../src/components/TemplatePage.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,gCAS3B"}

package/dist-lib/components/TemplatePage.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TemplatePage() {
+    return (_jsxs("div", { className: "p-6", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Module pagina" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "Vervang dit component met de pagina's van jouw module." })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function MijnModuleSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=MijnModuleSettingsCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MijnModuleSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MijnModuleSettingsCard.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,sBAAsB,gCA+CrC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/settings/MijnModuleSettingsCard.tsx — EXAMPLE SETTINGS CARD
+// ============================================================================
+// This is an example of a settings card for your module.
+// It appears on the main settings page when registered in src/index.ts.
+//
+// RULES:
+//   - Must return a <Card> as its root element
+//   - Handles its own data fetching — no props are passed by the core
+//   - Use the same Card primitives from @flowselections/core
+//
+// WHAT TO DO:
+//   - Rename this file to match your card's purpose
+//   - Add your real settings UI
+//   - Register it in src/index.ts under settingsCards
+//   - Delete this file entirely if your module has no settings
+// ============================================================================
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input, Label, toast, } from "@flowselections/core";
+import { Settings2 } from "lucide-react";
+export function MijnModuleSettingsCard() {
+    // Replace with your real settings state
+    const [setting, setSetting] = useState("");
+    const [saving, setSaving] = useState(false);
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Example: save to a table — replace with your real query
+            // const { error } = await supabase.from("my_settings").upsert({ ... });
+            // if (error) throw error;
+            toast.success("Instellingen opgeslagen");
+        }
+        catch {
+            toast.error("Fout bij het opslaan");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Module Instellingen" }), " "] }), _jsx(CardDescription, { children: "Beheer de instellingen voor deze module " })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "setting", children: "Instelling" }), _jsx(Input, { id: "setting", value: setting, onChange: (e) => setSetting(e.target.value), placeholder: "Waarde..." })] }), _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan..." : "Opslaan" })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function TwinfieldAuthSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=TwinfieldAuthSettingsCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TwinfieldAuthSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/TwinfieldAuthSettingsCard.tsx"],"names":[],"mappings":"AA6FA,wBAAgB,yBAAyB,gCA0nBxC"}

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

@@ -0,0 +1,295 @@
+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";
+const twinfieldLogo = "/flowselections-assets/twinfield-authenticatie/twinfield-logo.svg";
+import { saveTwinfieldSettings, getTwinfieldStatus, testTwinfieldConnection, setTwinfieldActiveEnvironment, listTwinfieldOffices, } 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 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 relativeTime(iso) {
+    if (!iso)
+        return "nog niet";
+    const diff = Date.now() - new Date(iso).getTime();
+    const min = Math.floor(diff / 60000);
+    if (min < 1)
+        return "zojuist";
+    if (min < 60)
+        return `${min} min geleden`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr} uur geleden`;
+    const d = Math.floor(hr / 24);
+    return `${d} dag${d === 1 ? "" : "en"} geleden`;
+}
+// ----------------------------------------------------------------------------
+// Main composed card
+// ----------------------------------------------------------------------------
+export function TwinfieldAuthSettingsCard() {
+    const fetchStatus = useServerFn(getTwinfieldStatus);
+    const saveSettings = useServerFn(saveTwinfieldSettings);
+    const testConnection = useServerFn(testTwinfieldConnection);
+    const setEnv = useServerFn(setTwinfieldActiveEnvironment);
+    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(false);
+    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 ?? "");
+            }
+            else {
+                setExistingClientId("");
+                setHasClientId(false);
+                setClientId("");
+                setAdministrationCode("");
+            }
+        }
+        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();
+    }, []);
+    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;
+        }
+        setSaving(true);
+        try {
+            await saveSettings({
+                data: {
+                    client_id: effectiveClientId,
+                    client_secret: clientSecret || undefined,
+                    environment,
+                    administration_code: administrationCode || undefined,
+                },
+            });
+            setClientId("");
+            setClientSecret("");
+            toast.success("Wijzigingen opgeslagen.");
+            await loadStatus();
+        }
+        catch (e) {
+            const msg = e?.message;
+            toast.error(msg && msg.length < 120 ? msg : "Opslaan mislukt.");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleSaveAdmin = async () => {
+        if (!existingClientId) {
+            toast.error("Vul eerst je verbindingsgegevens in.");
+            return;
+        }
+        setSavingAdmin(true);
+        try {
+            await saveSettings({
+                data: {
+                    client_id: existingClientId,
+                    environment,
+                    administration_code: administrationCode || undefined,
+                },
+            });
+            toast.success("Instellingen opgeslagen.");
+            await loadStatus();
+        }
+        catch (e) {
+            const msg = e?.message;
+            toast.error(msg && msg.length < 120 ? msg : "Opslaan mislukt.");
+        }
+        finally {
+            setSavingAdmin(false);
+        }
+    };
+    const handleTest = async () => {
+        setTesting(true);
+        try {
+            const res = await testConnection({ data: undefined });
+            if (res.ok)
+                toast.success(res.message);
+            else
+                toast.error(res.message);
+        }
+        catch {
+            toast.error("Verbinding testen is mislukt.");
+        }
+        finally {
+            setTesting(false);
+        }
+    };
+    const handleEnvChange = async (newEnv) => {
+        if (newEnv === environment)
+            return;
+        setEnvironment(newEnv);
+        try {
+            await setEnv({ data: { environment: newEnv } });
+            await loadStatus();
+        }
+        catch {
+            toast.error("Omgeving wijzigen vereist admin-rechten.");
+        }
+    };
+    const handleDelete = () => {
+        setClientId("");
+        setClientSecret("");
+        toast.message("Vul nieuwe verbindingsgegevens in en klik op opslaan om te vervangen.");
+    };
+    const runSync = async (entity) => {
+        setBusy(entity);
+        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();
+        }
+        catch (e) {
+            const msg = e?.message;
+            toast.error(msg && msg.length < 120 ? msg : "Bijwerken mislukt.");
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    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 && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900", children: [_jsx("div", { className: "font-medium", children: "Laatste automatische poging mislukte tijdelijk" }), _jsx("div", { className: "mt-1 text-amber-800", children: "Twinfield reageerde niet correct. De volgende geplande update probeert het automatisch opnieuw \u2014 je kunt ook nu zelf op \"Nu bijwerken\" klikken." }), _jsxs("details", { className: "mt-1.5", children: [_jsx("summary", { className: "cursor-pointer text-amber-700 hover:text-amber-900", children: "Technische details" }), _jsx("div", { className: "mt-1 font-mono text-[11px] text-amber-900/80 break-all", 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?" }) }))] }));
+}

package/dist-lib/hooks/useMijnModuleData.d.ts

@@ -0,0 +1,13 @@
+interface MijnItem {
+    id: string;
+    created_at: string;
+    [key: string]: unknown;
+}
+export declare function useMijnModuleData(): {
+    items: MijnItem[];
+    loading: boolean;
+    error: string | null;
+    reload: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=useMijnModuleData.d.ts.map

package/dist-lib/hooks/useMijnModuleData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMijnModuleData.d.ts","sourceRoot":"","sources":["../../src/hooks/useMijnModuleData.ts"],"names":[],"mappings":"AAkBA,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB;;;;;EAkChC"}

package/dist-lib/hooks/useMijnModuleData.js

@@ -0,0 +1,49 @@
+// ============================================================================
+// src/hooks/useMijnModuleData.ts — EXAMPLE DATA HOOK
+// ============================================================================
+// Put your data fetching logic in hooks like this, not directly in components.
+// This keeps your pages clean and makes it easy to reuse data across pages.
+//
+// WHAT TO DO:
+//   - Rename to match your data (e.g. useProducts, useOrders, useSuppliers)
+//   - Replace the example query with your real Supabase query
+//   - Replace MijnItem with your actual table's row type
+//   - Import and use in your page components
+//   - Delete this file if you prefer a different pattern
+// ============================================================================
+import { useState, useEffect, useCallback } from "react";
+import { supabase, toast } from "@flowselections/core";
+export function useMijnModuleData() {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const { data, error } = await supabase
+                .from("products") // ← CHANGE THIS to your table
+                .select("*")
+                .order("created_at", { ascending: false });
+            if (error)
+                throw error;
+            setItems(data ?? []);
+        }
+        catch {
+            setError("Fout bij het laden van gegevens");
+            toast.error("Fout bij het laden van gegevens");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    return {
+        items,
+        loading,
+        error,
+        reload: load,
+    };
+}

package/dist-lib/index.d.ts

@@ -0,0 +1,9 @@
+import type { FlowModule } from "@flowselections/core";
+export * from './_core-safelist';
+export * from './components/TemplatePage';
+export * from './components/TemplateModulePage';
+export { TemplateModuleLogo } from './components/TemplateModuleLogo';
+export { TemplateModulePage } from "./components/TemplateModulePage";
+export declare const myModule: FlowModule;
+export declare const TwinfieldAuthenticatieModule: FlowModule;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAGrE,eAAO,MAAM,QAAQ,EAAE,UAYtB,CAAC;AAEF,eAAO,MAAM,4BAA4B,YAAW,CAAC"}

package/dist-lib/index.js

@@ -0,0 +1,36 @@
+// ============================================================================
+// src/index.ts — MODULE CONTRACT
+// ============================================================================
+// This is the most important file in your module.
+// The shell repo reads this file to know:
+//   - What nav item to show in the sidebar
+//   - What settings cards to add to the settings page
+//   - Your module's identity (id, name, version)
+//
+// WHAT TO DO:
+//   1. Replace all PLACEHOLDER values below with your module's real values
+//   2. Import your real settings card components (if any)
+//   3. Add your nav item — use `children` if you need a dropdown
+//   4. Done! You don't need to touch any other file for registration.
+// ============================================================================
+import { LayoutDashboard } from "lucide-react"; // ← Replace with your icon
+export * from './_core-safelist';
+export * from './components/TemplatePage';
+export * from './components/TemplateModulePage';
+export { TemplateModuleLogo } from './components/TemplateModuleLogo';
+export { TemplateModulePage } from "./components/TemplateModulePage";
+import { TwinfieldAuthSettingsCard } from "./components/settings/TwinfieldAuthSettingsCard";
+export const myModule = {
+    id: "twinfield_authenticatie",
+    name: "Twinfield Authenticatie",
+    version: "1.0.0",
+    nav: {
+        label: "Mijn Module",
+        href: "/mijn-module",
+        icon: LayoutDashboard,
+    },
+    settingsCards: [
+        { component: TwinfieldAuthSettingsCard, order: 10 },
+    ],
+};
+export const TwinfieldAuthenticatieModule = myModule;

package/dist-lib/integrations/supabase/auth-attacher.d.ts

@@ -0,0 +1,2 @@
+export declare const attachSupabaseAuth: import("@tanstack/start-client-core").FunctionMiddlewareAfterClient<{}, unknown, undefined, undefined, undefined>;
+//# sourceMappingURL=auth-attacher.d.ts.map

package/dist-lib/integrations/supabase/auth-attacher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-attacher.d.ts","sourceRoot":"","sources":["../../../src/integrations/supabase/auth-attacher.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,mHAS9B,CAAA"}

package/dist-lib/integrations/supabase/auth-attacher.js

@@ -0,0 +1,13 @@
+// Client-only middleware that attaches the Supabase bearer token to serverFn RPCs.
+// The body runs only on the client (createMiddleware().client(...)). We dynamic-import
+// the supabase client so its module (which touches localStorage) is NEVER evaluated
+// during SSR / loadEntries.
+import { createMiddleware } from '@tanstack/react-start';
+export const attachSupabaseAuth = createMiddleware({ type: 'function' }).client(async ({ next }) => {
+    const { supabase } = await import('./client');
+    const { data } = await supabase.auth.getSession();
+    const token = data.session?.access_token;
+    return next({
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+    });
+});