@flowselections/admin-installatietechniek 1.0.1

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/AdminForInstallatieTechniek.d.ts

@@ -0,0 +1,12 @@
+export interface AdminModuleInput {
+    id: string;
+    name: string;
+}
+export interface AdminForInstallatieTechniekProps {
+    /** Modules die deze shell heeft geladen; worden automatisch geregistreerd. */
+    modules?: AdminModuleInput[];
+    /** Optionele naam van de shell, voor het opruimen van oude modules. */
+    shellId?: string;
+}
+export declare function AdminForInstallatieTechniek({ modules, shellId }?: AdminForInstallatieTechniekProps): import("react").JSX.Element;
+//# sourceMappingURL=AdminForInstallatieTechniek.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminForInstallatieTechniek.d.ts","sourceRoot":"","sources":["../../src/components/AdminForInstallatieTechniek.tsx"],"names":[],"mappings":"AAgEA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gCAAgC;IAC/C,8EAA8E;IAC9E,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiDD,wBAAgB,2BAA2B,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAE,gCAAqC,+BAy0BtG"}

package/dist-lib/components/AdminForInstallatieTechniek.js

@@ -0,0 +1,359 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useAuth, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, Card, CardContent, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Badge, toast, } from "@flowselections/core";
+import { Copy, FlaskConical, Shield, Trash2, UserPlus, UserX } from "lucide-react";
+import { assignRole, createTestUser, deleteUser, getModulePermissions, getUserModulePermissions, getUsersWithRoles, inviteUser, removeRole, setModulePermission, setUserModulePermission, syncModuleRegistry, } from "../lib/admin.functions";
+import { useDiscoveredModules } from "../lib/moduleDiscovery";
+import { supabase } from "../integrations/supabase/client";
+const PERMISSION_LABELS = {
+    none: "Geen toegang",
+    view: "Bekijken",
+    edit: "Aanpassen",
+};
+const USER_PERMISSION_LABELS = {
+    inherit: "Volg rol",
+    none: "Geen toegang",
+    view: "Bekijken",
+    edit: "Aanpassen",
+};
+const getErrorMessage = (error, fallback) => {
+    if (error instanceof Error && error.message) {
+        if (/permission denied|row-level security|rls|forbidden|not authorized/i.test(error.message)) {
+            return "Geen rechten voor deze actie.";
+        }
+        return error.message;
+    }
+    return fallback;
+};
+async function refreshOwnSessionIfSelf(targetUserId, currentUserId) {
+    if (currentUserId && targetUserId === currentUserId) {
+        // Nieuwe access-token ophalen zodat de user_roles JWT-claim direct actueel is.
+        await supabase.auth.refreshSession();
+    }
+}
+export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
+    const auth = useAuth();
+    const { isAdmin, user } = auth;
+    const authRoles = Array.isArray(auth.roles)
+        ? auth.roles
+        : [];
+    const isAdministratie = authRoles.includes("administratie");
+    const canAccess = isAdmin || isAdministratie;
+    const currentUserId = user?.id;
+    const [users, setUsers] = useState([]);
+    const [availableRoles, setAvailableRoles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [selectedUser, setSelectedUser] = useState("");
+    const [selectedRole, setSelectedRole] = useState("planner");
+    const [submitting, setSubmitting] = useState(false);
+    const [permRoles, setPermRoles] = useState([]);
+    const [permModules, setPermModules] = useState([]);
+    const [permMatrix, setPermMatrix] = useState({});
+    const [permLoading, setPermLoading] = useState(true);
+    const [inviteOpen, setInviteOpen] = useState(false);
+    const [inviteName, setInviteName] = useState("");
+    const [inviteEmail, setInviteEmail] = useState("");
+    const [inviteRole, setInviteRole] = useState("monteur");
+    const [inviting, setInviting] = useState(false);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleting, setDeleting] = useState(false);
+    const [testOpen, setTestOpen] = useState(false);
+    const [testName, setTestName] = useState("");
+    const [testRole, setTestRole] = useState("monteur");
+    const [testCreating, setTestCreating] = useState(false);
+    const [testCredentials, setTestCredentials] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [roleFilter, setRoleFilter] = useState("all");
+    const [sortBy, setSortBy] = useState("name-asc");
+    const [permUserId, setPermUserId] = useState("");
+    const [userPermModules, setUserPermModules] = useState([]);
+    const [userPermMap, setUserPermMap] = useState({});
+    const [userPermLoading, setUserPermLoading] = useState(false);
+    const permKey = (role, moduleId) => `${role}::${moduleId}`;
+    const discoveredModules = useDiscoveredModules();
+    const shellModules = useMemo(() => {
+        const source = Array.isArray(modules) && modules.length > 0 ? modules : discoveredModules;
+        return source.filter((m) => Boolean(m?.id) && Boolean(m?.name));
+    }, [modules, discoveredModules]);
+    const effectiveShellId = shellId ?? (typeof window !== "undefined" ? window.location.host : "unknown-shell");
+    const shellModulesKey = shellModules.map((m) => `${m.id}:${m.name}`).join("|");
+    const loadUsers = async () => {
+        setLoading(true);
+        try {
+            const result = await getUsersWithRoles();
+            setUsers(Array.isArray(result?.users) ? result.users : []);
+            setAvailableRoles(Array.isArray(result?.availableRoles) ? result.availableRoles : []);
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Fout bij het laden van gebruikers en rollen"));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const loadPermissions = async () => {
+        setPermLoading(true);
+        try {
+            const result = await getModulePermissions();
+            const roles = Array.isArray(result?.roles) ? result.roles : [];
+            const mods = Array.isArray(result?.modules) ? result.modules : [];
+            const perms = Array.isArray(result?.permissions) ? result.permissions : [];
+            setPermRoles(roles);
+            setPermModules(mods);
+            const matrix = {};
+            for (const r of roles) {
+                for (const m of mods) {
+                    matrix[permKey(r, m.id)] = "none";
+                }
+            }
+            for (const p of perms) {
+                matrix[permKey(p.role, p.moduleId)] = p.permission;
+            }
+            setPermMatrix(matrix);
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Fout bij het laden van module-machtigingen"));
+        }
+        finally {
+            setPermLoading(false);
+        }
+    };
+    const loadUserPermissions = async (userId) => {
+        if (!userId) {
+            setUserPermModules([]);
+            setUserPermMap({});
+            return;
+        }
+        setUserPermLoading(true);
+        try {
+            const result = await getUserModulePermissions({ data: { userId } });
+            const mods = Array.isArray(result?.modules) ? result.modules : [];
+            const overrides = Array.isArray(result?.overrides) ? result.overrides : [];
+            setUserPermModules(mods);
+            const map = {};
+            for (const m of mods)
+                map[m.id] = "inherit";
+            for (const o of overrides)
+                map[o.moduleId] = o.permission;
+            setUserPermMap(map);
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Fout bij het laden van persoonlijke rechten"));
+        }
+        finally {
+            setUserPermLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (!canAccess)
+            return;
+        let cancelled = false;
+        (async () => {
+            // Modules die deze shell heeft geladen automatisch registreren.
+            if (isAdmin && shellModules.length > 0) {
+                try {
+                    await syncModuleRegistry({ data: { modules: shellModules, shellId: effectiveShellId } });
+                }
+                catch (error) {
+                    console.error("Module-registratie mislukt", error);
+                }
+            }
+            if (cancelled)
+                return;
+            loadUsers();
+            // Module-machtigingen zijn strikt admin-only.
+            if (isAdmin) {
+                loadPermissions();
+            }
+            else {
+                setPermLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canAccess, isAdmin, shellModulesKey, effectiveShellId]);
+    useEffect(() => {
+        if (!canAccess)
+            return;
+        loadUserPermissions(permUserId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [permUserId, canAccess]);
+    const handleUserPermChange = async (moduleId, permission) => {
+        if (!permUserId)
+            return;
+        const prev = userPermMap[moduleId] ?? "inherit";
+        setUserPermMap((m) => ({ ...m, [moduleId]: permission }));
+        try {
+            await setUserModulePermission({ data: { userId: permUserId, moduleId, permission } });
+            toast.success("Persoonlijk recht opgeslagen");
+        }
+        catch (error) {
+            setUserPermMap((m) => ({ ...m, [moduleId]: prev }));
+            toast.error(getErrorMessage(error, "Opslaan mislukt"));
+        }
+    };
+    const handleAssign = async () => {
+        if (!selectedUser || !selectedRole)
+            return;
+        setSubmitting(true);
+        try {
+            await assignRole({ data: { userId: selectedUser, role: selectedRole } });
+            await refreshOwnSessionIfSelf(selectedUser, currentUserId);
+            toast.success("Rol toegekend");
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Fout bij het toekennen van rol"));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleRemove = async (userId, role) => {
+        try {
+            await removeRole({ data: { userId, role } });
+            await refreshOwnSessionIfSelf(userId, currentUserId);
+            toast.success("Rol verwijderd");
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Fout bij het verwijderen van rol"));
+        }
+    };
+    const handlePermChange = async (role, moduleId, permission) => {
+        const prev = permMatrix[permKey(role, moduleId)];
+        setPermMatrix((m) => ({ ...m, [permKey(role, moduleId)]: permission }));
+        try {
+            await setModulePermission({ data: { role, moduleId, permission } });
+            toast.success("Machtiging opgeslagen");
+        }
+        catch (error) {
+            setPermMatrix((m) => ({ ...m, [permKey(role, moduleId)]: prev ?? "none" }));
+            toast.error(getErrorMessage(error, "Fout bij het opslaan van machtiging"));
+        }
+    };
+    const handleInvite = async () => {
+        if (!inviteEmail.trim() || !inviteName.trim())
+            return;
+        setInviting(true);
+        try {
+            await inviteUser({
+                data: { email: inviteEmail.trim(), displayName: inviteName.trim(), role: inviteRole },
+            });
+            toast.success(`Uitnodiging verstuurd naar ${inviteEmail.trim()}`);
+            setInviteOpen(false);
+            setInviteName("");
+            setInviteEmail("");
+            setInviteRole("monteur");
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Uitnodigen mislukt"));
+        }
+        finally {
+            setInviting(false);
+        }
+    };
+    const handleDelete = async () => {
+        if (!deleteTarget)
+            return;
+        setDeleting(true);
+        try {
+            await deleteUser({ data: { userId: deleteTarget.id } });
+            toast.success(`Account ${deleteTarget.email} verwijderd`);
+            setDeleteTarget(null);
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Verwijderen mislukt"));
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    const handleCreateTestUser = async () => {
+        if (!testName.trim())
+            return;
+        setTestCreating(true);
+        try {
+            const result = await createTestUser({
+                data: { displayName: testName.trim(), role: testRole },
+            });
+            setTestCredentials({ email: result.email, password: result.password });
+            setTestOpen(false);
+            setTestName("");
+            setTestRole("monteur");
+            toast.success("Testaccount aangemaakt");
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Aanmaken mislukt"));
+        }
+        finally {
+            setTestCreating(false);
+        }
+    };
+    const copyToClipboard = async (value, label) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            toast.success(`${label} gekopieerd`);
+        }
+        catch {
+            toast.error("Kopiëren mislukt");
+        }
+    };
+    const selectedUserHasRole = users.some((user) => user.id === selectedUser && user.roles.includes(selectedRole));
+    const filteredUsers = useMemo(() => {
+        const query = searchQuery.trim().toLowerCase();
+        let list = users.filter((user) => {
+            const matchesQuery = !query ||
+                user.displayName.toLowerCase().includes(query) ||
+                user.email.toLowerCase().includes(query);
+            const matchesRole = roleFilter === "all" ||
+                (roleFilter === "none" ? user.roles.length === 0 : user.roles.includes(roleFilter));
+            return matchesQuery && matchesRole;
+        });
+        list = [...list].sort((a, b) => {
+            switch (sortBy) {
+                case "name-asc":
+                    return a.displayName.localeCompare(b.displayName);
+                case "name-desc":
+                    return b.displayName.localeCompare(a.displayName);
+                case "role-asc": {
+                    const roleA = a.roles[0] ?? "";
+                    const roleB = b.roles[0] ?? "";
+                    return roleA.localeCompare(roleB);
+                }
+                case "role-desc": {
+                    const roleA = a.roles[0] ?? "";
+                    const roleB = b.roles[0] ?? "";
+                    return roleB.localeCompare(roleA);
+                }
+                default:
+                    return 0;
+            }
+        });
+        return list;
+    }, [users, searchQuery, roleFilter, sortBy]);
+    const hasActiveFilters = searchQuery.trim() !== "" || roleFilter !== "all";
+    // Administratie mag de adminrol niet toekennen of verwijderen.
+    const baseRoles = availableRoles.length > 0 ? availableRoles : ["admin", "planner", "monteur", "administratie"];
+    const assignableRoles = isAdmin ? baseRoles : baseRoles.filter((r) => r !== "admin");
+    const canManageUser = (target) => isAdmin || !target.roles.includes("admin");
+    if (!canAccess) {
+        return (_jsx("main", { className: "p-6", children: _jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: _jsx("p", { className: "text-muted-foreground", children: "Je hebt geen toegang tot deze pagina." }) }) }) }));
+    }
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsxs(Tabs, { defaultValue: "users", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "users", children: "Gebruikers & rollen" }), isAdmin && _jsx(TabsTrigger, { value: "permissions", children: "Module-machtigingen" }), _jsx(TabsTrigger, { value: "user-permissions", children: "Rechten per gebruiker" })] }), _jsx(TabsContent, { value: "users", className: "mt-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Gebruikersrollen beheren" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setTestOpen(true), size: "sm", children: [_jsx(FlaskConical, { className: "h-4 w-4 mr-2" }), "Testaccount aanmaken"] }), _jsxs(Button, { onClick: () => setInviteOpen(true), size: "sm", children: [_jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Account aanmaken"] })] })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end", children: [_jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Gebruiker" }), _jsxs(Select, { value: selectedUser, onValueChange: setSelectedUser, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer een gebruiker" }) }), _jsx(SelectContent, { children: users.map((user) => (_jsxs(SelectItem, { value: user.id, children: [user.displayName, " (", user.email, ")"] }, user.id))) })] })] }), _jsxs("div", { className: "w-full sm:w-48 space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Rol" }), _jsxs(Select, { value: selectedRole, onValueChange: (value) => setSelectedRole(value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: assignableRoles.map((role) => (_jsx(SelectItem, { value: role, children: role }, role))) })] })] }), _jsx(Button, { onClick: handleAssign, disabled: !selectedUser || submitting || loading || selectedUserHasRole, children: submitting ? "Toekennen..." : selectedUserHasRole ? "Rol bestaat al" : "Rol toekennen" })] }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end", children: [_jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-sm font-medium", children: "Zoeken" }), _jsx(Input, { placeholder: "Zoek op naam of e-mail", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value) })] }), _jsxs("div", { className: "w-full sm:w-48 space-y-2", children: [_jsx(Label, { className: "text-sm font-medium", children: "Filter op rol" }), _jsxs(Select, { value: roleFilter, onValueChange: (value) => setRoleFilter(value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle rollen" }), availableRoles.map((role) => (_jsx(SelectItem, { value: role, children: role }, role))), _jsx(SelectItem, { value: "none", children: "Geen rollen" })] })] })] }), _jsxs("div", { className: "w-full sm:w-48 space-y-2", children: [_jsx(Label, { className: "text-sm font-medium", children: "Sorteren" }), _jsxs(Select, { value: sortBy, onValueChange: (value) => setSortBy(value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "name-asc", children: "Naam A-Z" }), _jsx(SelectItem, { value: "name-desc", children: "Naam Z-A" }), _jsx(SelectItem, { value: "role-asc", children: "Rol A-Z" }), _jsx(SelectItem, { value: "role-desc", children: "Rol Z-A" })] })] })] })] }), loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : filteredUsers.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: hasActiveFilters ? "Geen gebruikers gevonden met de huidige filters." : "Geen gebruikers gevonden." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Gebruiker" }), _jsx(TableHead, { children: "E-mail" }), _jsx(TableHead, { children: "Rollen" }), _jsx(TableHead, { className: "w-24" })] }) }), _jsx(TableBody, { children: filteredUsers.map((user) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: user.displayName }), !user.emailConfirmed && (_jsx(Badge, { variant: "outline", className: "text-xs", children: "Wacht op verificatie" })), user.isTestAccount && (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "Test" }))] }) }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: _jsx("div", { className: "flex flex-wrap gap-2", children: user.roles.length === 0 ? (_jsx("span", { className: "text-sm text-muted-foreground", children: "Geen rollen" })) : (user.roles.map((role) => (_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [role, !(role === "admin" && !isAdmin) && (_jsx("button", { onClick: () => handleRemove(user.id, role), className: "ml-1 rounded-sm hover:text-destructive", "aria-label": `Verwijder rol ${role}`, children: _jsx(Trash2, { className: "h-3 w-3" }) }))] }, `${user.id}-${role}`)))) }) }), _jsx(TableCell, { className: "text-right", children: _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive hover:bg-destructive/10", disabled: user.id === currentUserId || !canManageUser(user), title: user.id === currentUserId
+                                                                        ? "Je kunt je eigen account niet verwijderen."
+                                                                        : !canManageUser(user)
+                                                                            ? "Alleen een admin kan een adminaccount verwijderen."
+                                                                            : "Verwijder account", onClick: () => setDeleteTarget(user), "aria-label": `Verwijder account ${user.email}`, children: _jsx(UserX, { className: "h-4 w-4" }) }) })] }, user.id))) })] }))] })] }) }), isAdmin && (_jsx(TabsContent, { value: "permissions", className: "mt-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Module-machtigingen per rol" })] }) }), _jsx(CardContent, { children: permLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Module" }), permRoles.map((role) => (_jsx(TableHead, { className: "capitalize", children: role }, role)))] }) }), _jsx(TableBody, { children: permModules.map((mod) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: mod.name }), permRoles.map((role) => {
+                                                            const value = permMatrix[permKey(role, mod.id)] ?? "none";
+                                                            return (_jsx(TableCell, { children: _jsxs(Select, { value: value, onValueChange: (v) => handlePermChange(role, mod.id, v), children: [_jsx(SelectTrigger, { className: "w-40", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.keys(PERMISSION_LABELS).map((p) => (_jsx(SelectItem, { value: p, children: PERMISSION_LABELS[p] }, p))) })] }) }, role));
+                                                        })] }, mod.id))) })] })) })] }) })), _jsx(TabsContent, { value: "user-permissions", className: "mt-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Rechten per gebruiker" })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "w-full sm:w-96 space-y-2", children: [_jsx(Label, { className: "text-sm font-medium", children: "Gebruiker" }), _jsxs(Select, { value: permUserId, onValueChange: setPermUserId, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer een gebruiker" }) }), _jsx(SelectContent, { children: users.map((u) => (_jsxs(SelectItem, { value: u.id, children: [u.displayName, " (", u.email, ")"] }, u.id))) })] })] }), !permUserId ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Kies een gebruiker om persoonlijke uitzonderingen in te stellen. \"Volg rol\" gebruikt het recht dat via de rollen van deze gebruiker geldt." })) : userPermLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : userPermModules.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn nog geen modules geregistreerd voor deze shell." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Module" }), _jsx(TableHead, { className: "w-56", children: "Recht" })] }) }), _jsx(TableBody, { children: userPermModules.map((mod) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: mod.name }), _jsx(TableCell, { children: _jsxs(Select, { value: userPermMap[mod.id] ?? "inherit", onValueChange: (v) => handleUserPermChange(mod.id, v), children: [_jsx(SelectTrigger, { className: "w-48", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.keys(USER_PERMISSION_LABELS).map((p) => (_jsx(SelectItem, { value: p, children: USER_PERMISSION_LABELS[p] }, p))) })] }) })] }, mod.id))) })] }))] })] }) })] }), _jsx(Dialog, { open: inviteOpen, onOpenChange: setInviteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Nieuw account aanmaken" }), _jsx(DialogDescription, { children: "De gebruiker ontvangt een uitnodigingsmail en kiest zelf een wachtwoord." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "invite-name", children: "Naam" }), _jsx(Input, { id: "invite-name", value: inviteName, onChange: (e) => setInviteName(e.target.value), placeholder: "Jan Jansen", disabled: inviting })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "invite-email", children: "E-mail" }), _jsx(Input, { id: "invite-email", type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), placeholder: "jan@voorbeeld.nl", disabled: inviting })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Rol" }), _jsxs(Select, { value: inviteRole, onValueChange: (v) => setInviteRole(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: assignableRoles.map((r) => (_jsx(SelectItem, { value: r, children: r }, r))) })] })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setInviteOpen(false), disabled: inviting, children: "Annuleren" }), _jsx(Button, { onClick: handleInvite, disabled: inviting || !inviteEmail.trim() || !inviteName.trim(), children: inviting ? "Versturen..." : "Uitnodiging versturen" })] })] }) }), _jsx(Dialog, { open: testOpen, onOpenChange: (open) => !testCreating && setTestOpen(open), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Testaccount aanmaken" }), _jsx(DialogDescription, { children: "Maakt direct een geverifieerd account met een automatisch wachtwoord \u2014 geen e-mail nodig." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "test-name", children: "Naam" }), _jsx(Input, { id: "test-name", value: testName, onChange: (e) => setTestName(e.target.value), placeholder: "Test Monteur", disabled: testCreating })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Rol" }), _jsxs(Select, { value: testRole, onValueChange: (v) => setTestRole(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: assignableRoles.map((r) => (_jsx(SelectItem, { value: r, children: r }, r))) })] })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setTestOpen(false), disabled: testCreating, children: "Annuleren" }), _jsx(Button, { onClick: handleCreateTestUser, disabled: testCreating || !testName.trim(), children: testCreating ? "Aanmaken..." : "Aanmaken" })] })] }) }), _jsx(Dialog, { open: testCredentials !== null, onOpenChange: (open) => !open && setTestCredentials(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Testaccount aangemaakt" }), _jsx(DialogDescription, { children: "Kopieer de inloggegevens nu \u2014 het wachtwoord wordt maar \u00E9\u00E9n keer getoond." })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "E-mail" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { readOnly: true, value: testCredentials?.email ?? "" }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => testCredentials && copyToClipboard(testCredentials.email, "E-mail"), "aria-label": "Kopieer e-mail", children: _jsx(Copy, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Wachtwoord" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { readOnly: true, value: testCredentials?.password ?? "", className: "font-mono" }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => testCredentials && copyToClipboard(testCredentials.password, "Wachtwoord"), "aria-label": "Kopieer wachtwoord", children: _jsx(Copy, { className: "h-4 w-4" }) })] })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: () => setTestCredentials(null), children: "Sluiten" }) })] }) }), _jsx(AlertDialog, { open: deleteTarget !== null, onOpenChange: (open) => !open && !deleting && setDeleteTarget(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Account verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["Weet je zeker dat je", " ", _jsx("strong", { children: deleteTarget?.displayName || deleteTarget?.email }), " ", "wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: deleting, children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: (e) => {
+                                        e.preventDefault();
+                                        handleDelete();
+                                    }, disabled: deleting, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: deleting ? "Verwijderen..." : "Verwijderen" })] })] }) })] }));
+}

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/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,
+    };
+}