@flowselections/admin-installatietechniek 1.0.3 → 1.0.5

package/dist-lib/components/AdminForInstallatieTechniek.js

@@ -1,22 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, 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 { ArrowDown, ArrowUp, Copy, FlaskConical, Shield, Trash2, UserPlus, UserX } from "lucide-react";
-import { assignRole, createTestUser, deleteUser, getModuleOrder, getModulePermissions, getUserModulePermissions, getUsersWithRoles, inviteUser, removeRole, setModuleOrder, setModulePermission, setUserModulePermission, syncModuleRegistry, } from "../lib/admin.functions";
-import { notifyModuleOrderChanged } from "../hooks/useModuleOrder";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useAuth, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, CardHeader, CardTitle, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, toast, } from "@flowselections/core";
+import { ChevronDown, ChevronRight, Copy, FlaskConical, MoreVertical, Plus, Pencil, Shield, UserPlus, UserX, } from "lucide-react";
+import { assignRole, createRole, createTestUser, deleteRole, deleteUser, duplicateRole, getRoles, getUserModulePermissions, getUsersWithRoles, inviteUser, removeRole, setModuleEnforce, setUserModulePermission, syncModuleRegistry, updateRole, updateUserName, } 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 permCellKey = (moduleId, featureId) => `${moduleId}::${featureId}`;
 const getErrorMessage = (error, fallback) => {
     if (error instanceof Error && error.message) {
         if (/permission denied|row-level security|rls|forbidden|not authorized/i.test(error.message)) {
@@ -28,7 +23,6 @@ const getErrorMessage = (error, 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();
     }
 }
@@ -41,26 +35,32 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
     const isAdministratie = authRoles.includes("administratie");
     const canAccess = isAdmin || isAdministratie;
     const currentUserId = user?.id;
+    const [activeTab, setActiveTab] = useState("users");
     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 [renameTarget, setRenameTarget] = useState(null);
+    const [renameValue, setRenameValue] = useState("");
+    const [renaming, setRenaming] = useState(false);
+    const [roles, setRoles] = useState([]);
+    const [roleModules, setRoleModules] = useState([]);
+    const [rolePermissions, setRolePermissions] = useState([]);
+    const [rolesLoading, setRolesLoading] = useState(true);
+    const [editor, setEditor] = useState(null);
+    const [editorSaving, setEditorSaving] = useState(false);
+    const [expandedModules, setExpandedModules] = useState({});
+    const [roleDeleteTarget, setRoleDeleteTarget] = useState(null);
     const [inviteOpen, setInviteOpen] = useState(false);
     const [inviteName, setInviteName] = useState("");
     const [inviteEmail, setInviteEmail] = useState("");
-    const [inviteRole, setInviteRole] = useState("monteur");
+    const [inviteRole, setInviteRole] = useState("");
     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 [testRole, setTestRole] = useState("");
     const [testCreating, setTestCreating] = useState(false);
     const [testCredentials, setTestCredentials] = useState(null);
     const [searchQuery, setSearchQuery] = useState("");
@@ -70,25 +70,25 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
     const [userPermModules, setUserPermModules] = useState([]);
     const [userPermMap, setUserPermMap] = useState({});
     const [userPermLoading, setUserPermLoading] = useState(false);
-    const [orderModules, setOrderModules] = useState([]);
-    const [orderLoading, setOrderLoading] = useState(false);
-    const [orderSaving, setOrderSaving] = useState(false);
-    const [orderSavedAt, setOrderSavedAt] = useState(null);
-    const orderSaveTimer = useRef(null);
-    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 shellModulesKey = shellModules
+        .map((m) => `${m.id}:${m.name}:${(m.features ?? []).map((f) => `${f.id}=${f.name}`).join(",")}`)
+        .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 : []);
+            const roleList = Array.isArray(result?.availableRoles) ? result.availableRoles : [];
+            setAvailableRoles(roleList);
+            const fallback = roleList[0]?.id ?? "";
+            setInviteRole((current) => current || fallback);
+            setTestRole((current) => current || fallback);
         }
         catch (error) {
             toast.error(getErrorMessage(error, "Fout bij het laden van gebruikers en rollen"));
@@ -97,31 +97,19 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             setLoading(false);
         }
     };
-    const loadPermissions = async () => {
-        setPermLoading(true);
+    const loadRoles = async () => {
+        setRolesLoading(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);
+            const result = await getRoles();
+            setRoles(Array.isArray(result?.roles) ? result.roles : []);
+            setRoleModules(Array.isArray(result?.modules) ? result.modules : []);
+            setRolePermissions(Array.isArray(result?.permissions) ? result.permissions : []);
         }
         catch (error) {
-            toast.error(getErrorMessage(error, "Fout bij het laden van module-machtigingen"));
+            toast.error(getErrorMessage(error, "Fout bij het laden van rollen"));
         }
         finally {
-            setPermLoading(false);
+            setRolesLoading(false);
         }
     };
     const loadUserPermissions = async (userId) => {
@@ -137,10 +125,14 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             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;
+            for (const m of mods) {
+                map[permCellKey(m.id, "")] = "inherit";
+                for (const f of m.features ?? [])
+                    map[permCellKey(m.id, f.id)] = "inherit";
+            }
+            for (const o of overrides) {
+                map[permCellKey(o.moduleId, o.featureId ?? "")] = o.permission;
+            }
             setUserPermMap(map);
         }
         catch (error) {
@@ -150,95 +142,11 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             setUserPermLoading(false);
         }
     };
-    const loadModuleOrder = async () => {
-        setOrderLoading(true);
-        try {
-            const result = await getModuleOrder();
-            const saved = Array.isArray(result?.modules) ? result.modules : [];
-            const byId = new Map(saved.map((m) => [m.id, m]));
-            // Standaardvolgorde = de volgorde waarin de shell zijn modules levert.
-            // Opgeslagen posities krijgen voorrang; de rest houdt de bronvolgorde.
-            const base = [];
-            for (const m of shellModules) {
-                const match = byId.get(m.id);
-                base.push({ id: m.id, name: match?.name ?? m.name });
-                byId.delete(m.id);
-            }
-            for (const m of byId.values())
-                base.push({ id: m.id, name: m.name });
-            const positions = new Map();
-            for (const m of saved) {
-                if (typeof m.sortOrder === "number")
-                    positions.set(m.id, m.sortOrder);
-            }
-            const ordered = base
-                .map((mod, index) => ({ mod, index }))
-                .sort((a, b) => {
-                const ao = positions.get(a.mod.id);
-                const bo = positions.get(b.mod.id);
-                if (ao !== undefined && bo !== undefined)
-                    return ao - bo;
-                if (ao !== undefined)
-                    return -1;
-                if (bo !== undefined)
-                    return 1;
-                return a.index - b.index;
-            })
-                .map((e) => e.mod);
-            setOrderModules(ordered);
-        }
-        catch (error) {
-            toast.error(getErrorMessage(error, "Fout bij het laden van de zijbalk-volgorde"));
-        }
-        finally {
-            setOrderLoading(false);
-        }
-    };
-    const persistOrder = useCallback(async (list, previous) => {
-        setOrderSaving(true);
-        try {
-            await setModuleOrder({ data: { moduleIds: list.map((m) => m.id) } });
-            setOrderSavedAt(Date.now());
-            // Zijbalk van de shell direct laten herordenen.
-            notifyModuleOrderChanged();
-        }
-        catch (error) {
-            setOrderModules(previous);
-            toast.error(getErrorMessage(error, "Opslaan van de volgorde mislukt"));
-        }
-        finally {
-            setOrderSaving(false);
-        }
-    }, []);
-    const moveModule = (index, direction) => {
-        const previous = orderModules;
-        const next = [...previous];
-        const target = index + direction;
-        if (target < 0 || target >= next.length)
-            return;
-        const [item] = next.splice(index, 1);
-        next.splice(target, 0, item);
-        setOrderModules(next);
-        // Realtime opslaan: klikken worden kort gebundeld.
-        if (orderSaveTimer.current)
-            clearTimeout(orderSaveTimer.current);
-        orderSaveTimer.current = setTimeout(() => {
-            orderSaveTimer.current = null;
-            void persistOrder(next, previous);
-        }, 400);
-    };
-    useEffect(() => {
-        return () => {
-            if (orderSaveTimer.current)
-                clearTimeout(orderSaveTimer.current);
-        };
-    }, []);
     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 } });
@@ -250,14 +158,7 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             if (cancelled)
                 return;
             loadUsers();
-            // Module-machtigingen zijn strikt admin-only.
-            if (isAdmin) {
-                loadPermissions();
-                loadModuleOrder();
-            }
-            else {
-                setPermLoading(false);
-            }
+            loadRoles();
         })();
         return () => {
             cancelled = true;
@@ -270,27 +171,39 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
         loadUserPermissions(permUserId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [permUserId, canAccess]);
-    const handleUserPermChange = async (moduleId, permission) => {
+    const handleUserPermChange = async (moduleId, featureId, permission) => {
         if (!permUserId)
             return;
-        const prev = userPermMap[moduleId] ?? "inherit";
-        setUserPermMap((m) => ({ ...m, [moduleId]: permission }));
+        const key = permCellKey(moduleId, featureId);
+        const prev = userPermMap[key] ?? "inherit";
+        setUserPermMap((m) => ({ ...m, [key]: permission }));
         try {
-            await setUserModulePermission({ data: { userId: permUserId, moduleId, permission } });
+            await setUserModulePermission({
+                data: { userId: permUserId, moduleId, featureId, permission },
+            });
             toast.success("Persoonlijk recht opgeslagen");
         }
         catch (error) {
-            setUserPermMap((m) => ({ ...m, [moduleId]: prev }));
+            setUserPermMap((m) => ({ ...m, [key]: prev }));
             toast.error(getErrorMessage(error, "Opslaan mislukt"));
         }
     };
-    const handleAssign = async () => {
-        if (!selectedUser || !selectedRole)
-            return;
+    const handleEnforceChange = async (moduleId, enforce) => {
+        setRoleModules((prev) => prev.map((m) => (m.id === moduleId ? { ...m, enforce } : m)));
+        try {
+            await setModuleEnforce({ data: { moduleId, enforce } });
+            toast.success(`Module ${enforce ? "afgedwongen" : "niet langer afgedwongen"}`);
+        }
+        catch (error) {
+            setRoleModules((prev) => prev.map((m) => (m.id === moduleId ? { ...m, enforce: !enforce } : m)));
+            toast.error(getErrorMessage(error, "Afdwingen wijzigen mislukt"));
+        }
+    };
+    const handleAssign = async (userId, roleId) => {
         setSubmitting(true);
         try {
-            await assignRole({ data: { userId: selectedUser, role: selectedRole } });
-            await refreshOwnSessionIfSelf(selectedUser, currentUserId);
+            await assignRole({ data: { userId, roleId } });
+            await refreshOwnSessionIfSelf(userId, currentUserId);
             toast.success("Rol toegekend");
             await loadUsers();
         }
@@ -301,9 +214,9 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             setSubmitting(false);
         }
     };
-    const handleRemove = async (userId, role) => {
+    const handleRemove = async (userId, roleId) => {
         try {
-            await removeRole({ data: { userId, role } });
+            await removeRole({ data: { userId, roleId } });
             await refreshOwnSessionIfSelf(userId, currentUserId);
             toast.success("Rol verwijderd");
             await loadUsers();
@@ -312,31 +225,106 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             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 }));
+    const openRoleEditor = (role) => {
+        const cells = {};
+        for (const m of roleModules) {
+            cells[permCellKey(m.id, "")] = { canView: false, canEdit: false };
+            for (const f of m.features ?? []) {
+                cells[permCellKey(m.id, f.id)] = { canView: false, canEdit: false };
+            }
+        }
+        if (role) {
+            for (const p of rolePermissions.filter((p) => p.roleId === role.id)) {
+                cells[permCellKey(p.moduleId, p.featureId)] = { canView: p.canView, canEdit: p.canEdit };
+            }
+        }
+        setEditor({ roleId: role?.id ?? null, name: role?.name ?? "", cells });
+    };
+    const setCell = (moduleId, featureId, field, value) => {
+        setEditor((state) => {
+            if (!state)
+                return state;
+            const cells = { ...state.cells };
+            const key = permCellKey(moduleId, featureId);
+            const current = cells[key] ?? { canView: false, canEdit: false };
+            const next = { ...current, [field]: value };
+            if (field === "canEdit" && value)
+                next.canView = true;
+            if (field === "canView" && !value)
+                next.canEdit = false;
+            cells[key] = next;
+            // Vinkje op moduleniveau zet alle onderdelen mee.
+            if (featureId === "") {
+                const mod = roleModules.find((m) => m.id === moduleId);
+                for (const f of mod?.features ?? []) {
+                    cells[permCellKey(moduleId, f.id)] = { ...next };
+                }
+            }
+            return { ...state, cells };
+        });
+    };
+    const handleSaveRole = async () => {
+        if (!editor || !editor.name.trim())
+            return;
+        setEditorSaving(true);
         try {
-            await setModulePermission({ data: { role, moduleId, permission } });
-            toast.success("Machtiging opgeslagen");
+            const permissions = Object.entries(editor.cells).map(([key, value]) => {
+                const [moduleId, featureId] = key.split("::");
+                return { moduleId, featureId: featureId ?? "", canView: value.canView, canEdit: value.canEdit };
+            });
+            if (editor.roleId) {
+                await updateRole({ data: { roleId: editor.roleId, name: editor.name.trim(), permissions } });
+                toast.success("Rol bijgewerkt");
+            }
+            else {
+                await createRole({ data: { name: editor.name.trim(), permissions } });
+                toast.success("Rol aangemaakt");
+            }
+            setEditor(null);
+            await Promise.all([loadRoles(), loadUsers()]);
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Opslaan mislukt"));
+        }
+        finally {
+            setEditorSaving(false);
+        }
+    };
+    const handleDuplicateRole = async (role) => {
+        try {
+            await duplicateRole({ data: { roleId: role.id } });
+            toast.success("Rol gedupliceerd");
+            await Promise.all([loadRoles(), loadUsers()]);
         }
         catch (error) {
-            setPermMatrix((m) => ({ ...m, [permKey(role, moduleId)]: prev ?? "none" }));
-            toast.error(getErrorMessage(error, "Fout bij het opslaan van machtiging"));
+            toast.error(getErrorMessage(error, "Dupliceren mislukt"));
+        }
+    };
+    const handleDeleteRole = async () => {
+        if (!roleDeleteTarget)
+            return;
+        try {
+            await deleteRole({ data: { roleId: roleDeleteTarget.id } });
+            toast.success("Rol verwijderd");
+            setRoleDeleteTarget(null);
+            await Promise.all([loadRoles(), loadUsers()]);
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Verwijderen mislukt"));
         }
     };
     const handleInvite = async () => {
-        if (!inviteEmail.trim() || !inviteName.trim())
+        if (!inviteEmail.trim() || !inviteName.trim() || !inviteRole)
             return;
         setInviting(true);
         try {
             await inviteUser({
-                data: { email: inviteEmail.trim(), displayName: inviteName.trim(), role: inviteRole },
+                data: { email: inviteEmail.trim(), displayName: inviteName.trim(), roleId: inviteRole },
             });
             toast.success(`Uitnodiging verstuurd naar ${inviteEmail.trim()}`);
             setInviteOpen(false);
             setInviteName("");
             setInviteEmail("");
-            setInviteRole("monteur");
             await loadUsers();
         }
         catch (error) {
@@ -363,18 +351,38 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             setDeleting(false);
         }
     };
+    const openRename = (target) => {
+        setRenameTarget(target);
+        setRenameValue(target.displayName === "-" ? "" : target.displayName);
+    };
+    const handleRename = async () => {
+        if (!renameTarget || !renameValue.trim())
+            return;
+        setRenaming(true);
+        try {
+            await updateUserName({ data: { userId: renameTarget.id, displayName: renameValue.trim() } });
+            toast.success("Naam bijgewerkt");
+            setRenameTarget(null);
+            await loadUsers();
+        }
+        catch (error) {
+            toast.error(getErrorMessage(error, "Naam wijzigen mislukt"));
+        }
+        finally {
+            setRenaming(false);
+        }
+    };
     const handleCreateTestUser = async () => {
-        if (!testName.trim())
+        if (!testName.trim() || !testRole)
             return;
         setTestCreating(true);
         try {
             const result = await createTestUser({
-                data: { displayName: testName.trim(), role: testRole },
+                data: { displayName: testName.trim(), roleId: testRole },
             });
             setTestCredentials({ email: result.email, password: result.password });
             setTestOpen(false);
             setTestName("");
-            setTestRole("monteur");
             toast.success("Testaccount aangemaakt");
             await loadUsers();
         }
@@ -394,55 +402,73 @@ export function AdminForInstallatieTechniek({ modules, shellId } = {}) {
             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 list = users.filter((u) => {
+            const matchesQuery = !query || u.displayName.toLowerCase().includes(query) || u.email.toLowerCase().includes(query);
             const matchesRole = roleFilter === "all" ||
-                (roleFilter === "none" ? user.roles.length === 0 : user.roles.includes(roleFilter));
+                (roleFilter === "none" ? u.roles.length === 0 : u.roles.some((r) => r.id === roleFilter));
             return matchesQuery && matchesRole;
         });
-        list = [...list].sort((a, b) => {
+        return [...list].sort((a, b) => {
+            const roleA = a.roles[0]?.name ?? "";
+            const roleB = b.roles[0]?.name ?? "";
             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] ?? "";
+                case "role-asc":
                     return roleA.localeCompare(roleB);
-                }
-                case "role-desc": {
-                    const roleA = a.roles[0] ?? "";
-                    const roleB = b.roles[0] ?? "";
+                case "role-desc":
                     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");
+    const assignableRoles = availableRoles;
+    const canManageUser = (target) => isAdmin || !target.roles.some((r) => r.key === "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" }), isAdmin && _jsx(TabsTrigger, { value: "order", children: "Zijbalk volgorde" })] }), _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))) })] }))] })] }) }), isAdmin && (_jsx(TabsContent, { value: "order", 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: "Volgorde van modules in de zijbalk" })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: orderSaving ? "Opslaan..." : orderSavedAt ? "Opgeslagen" : "" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Zet de modules in de gewenste volgorde. Wijzigingen worden direct opgeslagen en meteen toegepast in de zijbalk. De startvolgorde is de volgorde waarin deze shell zijn modules aanlevert; nieuwe modules komen daarin vanzelf op hun plek." }), orderLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : orderModules.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn nog geen modules geregistreerd voor deze shell." })) : (_jsx("ul", { className: "divide-y rounded-md border", children: orderModules.map((mod, index) => (_jsxs("li", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "w-6 text-sm text-muted-foreground", children: [index + 1, "."] }), _jsx("span", { className: "font-medium", children: mod.name })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", "aria-label": `${mod.name} omhoog`, disabled: index === 0, onClick: () => moveModule(index, -1), children: _jsx(ArrowUp, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": `${mod.name} omlaag`, disabled: index === orderModules.length - 1, onClick: () => moveModule(index, 1), children: _jsx(ArrowDown, { className: "h-4 w-4" }) })] })] }, 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) => {
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "space-y-4", children: _jsxs("div", { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Gebruikers & rollen" })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Hier vind je alle gebruikers die toegang hebben en zie je welke rol zij hebben. Ook beheer je hier alle beschikbare rollen." })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [isAdmin && activeTab === "roles" && (_jsxs(Button, { size: "sm", onClick: () => openRoleEditor(), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Nieuwe rol"] })), activeTab === "users" && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setTestOpen(true), children: [_jsx(FlaskConical, { className: "h-4 w-4 mr-2" }), "Testaccount"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setInviteOpen(true), children: [_jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Account aanmaken"] })] }))] })] }) }), _jsx(CardContent, { children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "users", children: "Gebruikers" }), _jsx(TabsTrigger, { value: "roles", children: "Rollen" }), _jsx(TabsTrigger, { value: "user-permissions", children: "Rechten per gebruiker" }), _jsx(TabsTrigger, { value: "modules", children: "Modules" })] }), _jsxs(TabsContent, { value: "users", className: "mt-4 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: "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: setRoleFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle rollen" }), availableRoles.map((role) => (_jsx(SelectItem, { value: role.id, children: role.name }, role.id))), _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: "Rollen" }), _jsx(TableHead, { className: "w-16" })] }) }), _jsx(TableBody, { children: filteredUsers.map((u) => {
+                                                        const manageable = canManageUser(u);
+                                                        const unassigned = assignableRoles.filter((r) => !u.roles.some((ur) => ur.id === r.id));
+                                                        return (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: u.displayName }), !u.emailConfirmed && (_jsx(Badge, { variant: "outline", className: "text-xs", children: "Wacht op verificatie" })), u.isTestAccount && (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "Test" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: u.email })] }), _jsx(TableCell, { children: _jsx("div", { className: "flex flex-wrap gap-2", children: u.roles.length === 0 ? (_jsx("span", { className: "text-sm text-muted-foreground", children: "Geen rollen" })) : (u.roles.map((role) => (_jsx(Badge, { variant: "secondary", children: role.name }, `${u.id}-${role.id}`)))) }) }), _jsx(TableCell, { className: "text-right", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-label": `Acties voor ${u.email}`, disabled: submitting, children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { disabled: !manageable || unassigned.length === 0, children: "Rol toekennen" }), _jsx(DropdownMenuSubContent, { children: unassigned.length === 0 ? (_jsx(DropdownMenuItem, { disabled: true, children: "Geen rollen beschikbaar" })) : (unassigned.map((role) => (_jsx(DropdownMenuItem, { onSelect: () => handleAssign(u.id, role.id), children: role.name }, `assign-${u.id}-${role.id}`)))) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { disabled: u.roles.length === 0, children: "Rol verwijderen" }), _jsx(DropdownMenuSubContent, { children: u.roles.map((role) => (_jsx(DropdownMenuItem, { disabled: role.key === "admin" && !isAdmin, onSelect: () => handleRemove(u.id, role.id), children: role.name }, `remove-${u.id}-${role.id}`))) })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: !manageable, onSelect: () => openRename(u), children: [_jsx(Pencil, { className: "h-4 w-4 mr-2" }), "Naam wijzigen"] }), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", disabled: u.id === currentUserId || !manageable, onSelect: () => setDeleteTarget(u), children: [_jsx(UserX, { className: "h-4 w-4 mr-2" }), "Account verwijderen"] })] })] }) })] }, u.id));
+                                                    }) })] }))] }), _jsx(TabsContent, { value: "roles", className: "mt-4", children: rolesLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden..." })) : roles.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn nog geen rollen aangemaakt." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Rol" }), _jsx(TableHead, { children: "Toegang" }), _jsx(TableHead, { className: "w-16" })] }) }), _jsx(TableBody, { children: roles.map((role) => {
+                                                    const count = rolePermissions.filter((p) => p.roleId === role.id && p.featureId === "" && (p.canView || p.canEdit)).length;
+                                                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [role.name, role.isProtected && (_jsx(Badge, { variant: "outline", className: "text-xs", children: "Beschermd" }))] }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: count === 0 ? "Geen modules" : `${count} module(s)` }), _jsx(TableCell, { className: "text-right", children: isAdmin && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-label": `Acties voor ${role.name}`, children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => openRoleEditor(role), children: "Bewerken" }), _jsx(DropdownMenuItem, { onClick: () => handleDuplicateRole(role), children: "Dupliceren" }), _jsx(DropdownMenuItem, { disabled: role.isProtected, className: "text-destructive", onClick: () => setRoleDeleteTarget(role), children: "Verwijderen" })] })] })) })] }, role.id));
+                                                }) })] })) }), _jsxs(TabsContent, { value: "user-permissions", className: "mt-4 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 / onderdeel" }), _jsx(TableHead, { className: "w-56", children: "Recht" })] }) }), _jsx(TableBody, { children: userPermModules.flatMap((mod) => {
+                                                        const rows = [
+                                                            _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: mod.name }), _jsx(TableCell, { children: _jsxs(Select, { value: userPermMap[permCellKey(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),
+                                                        ];
+                                                        for (const f of mod.features ?? []) {
+                                                            rows.push(_jsxs(TableRow, { children: [_jsx(TableCell, { className: "pl-8 text-sm text-muted-foreground", children: f.name }), _jsx(TableCell, { children: _jsxs(Select, { value: userPermMap[permCellKey(mod.id, f.id)] ?? "inherit", onValueChange: (v) => handleUserPermChange(mod.id, f.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}-${f.id}`));
+                                                        }
+                                                        return rows;
+                                                    }) })] }))] }), _jsxs(TabsContent, { value: "modules", className: "mt-4 space-y-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Schakel \"Toegang afdwingen\" in voor een module om de rollen en gebruikersrechten actief te laten controleren. Modules zonder deze schakelaar blijven voor iedereen toegankelijk (default-allow)." }), roleModules.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn nog geen modules geregistreerd." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Module" }), _jsx(TableHead, { className: "w-48", children: "Toegang afdwingen" })] }) }), _jsx(TableBody, { children: roleModules.map((mod) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: mod.name }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { id: `enforce-${mod.id}`, checked: mod.enforce ?? false, onCheckedChange: (checked) => handleEnforceChange(mod.id, checked), disabled: submitting || !isAdmin }), _jsx(Label, { htmlFor: `enforce-${mod.id}`, className: "text-sm font-normal", children: (mod.enforce ?? false) ? "Ingeschakeld" : "Uitgeschakeld" })] }) })] }, mod.id))) })] }))] })] }) })] }), _jsx(Dialog, { open: editor !== null, onOpenChange: (open) => !open && !editorSaving && setEditor(null), children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: editor?.roleId ? "Rol bewerken" : "Rol toevoegen" }), _jsx(DialogDescription, { children: "Maak hier een rol aan en wijs de gewenste rechten toe. Vink je een onderdeel niet aan? Dan heeft de gebruiker geen toegang tot (een deel van) die pagina." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "role-name", children: "Naam rol" }), _jsx(Input, { id: "role-name", value: editor?.name ?? "", placeholder: "Vul een naam voor de rol in.", onChange: (e) => setEditor((state) => (state ? { ...state, name: e.target.value } : state)), disabled: editorSaving })] }), _jsxs("div", { className: "max-h-[45vh] overflow-y-auto rounded-md border", children: [_jsxs("div", { className: "flex items-center justify-end gap-8 border-b px-4 py-2 text-sm font-medium", children: [_jsx("span", { className: "w-16 text-center", children: "Lezen" }), _jsx("span", { className: "w-16 text-center", children: "Bewerken" })] }), roleModules.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Er zijn nog geen modules geregistreerd voor deze shell." })) : (roleModules.map((mod) => {
+                                            const cell = editor?.cells[permCellKey(mod.id, "")] ?? {
+                                                canView: false,
+                                                canEdit: false,
+                                            };
+                                            const expanded = Boolean(expandedModules[mod.id]);
+                                            const hasFeatures = (mod.features ?? []).length > 0;
+                                            return (_jsxs("div", { className: "border-b last:border-b-0", children: [_jsxs("div", { className: "flex items-center px-4 py-3", children: [_jsxs("button", { type: "button", className: "flex flex-1 items-center gap-2 text-left font-medium", onClick: () => setExpandedModules((s) => ({ ...s, [mod.id]: !s[mod.id] })), disabled: !hasFeatures, children: [hasFeatures ? (expanded ? (_jsx(ChevronDown, { className: "h-4 w-4" })) : (_jsx(ChevronRight, { className: "h-4 w-4" }))) : (_jsx("span", { className: "h-4 w-4" })), mod.name] }), _jsxs("div", { className: "flex items-center gap-8", children: [_jsx("span", { className: "flex w-16 justify-center", children: _jsx(Checkbox, { checked: cell.canView, onCheckedChange: (v) => setCell(mod.id, "", "canView", Boolean(v)), "aria-label": `Lezen ${mod.name}` }) }), _jsx("span", { className: "flex w-16 justify-center", children: _jsx(Checkbox, { checked: cell.canEdit, onCheckedChange: (v) => setCell(mod.id, "", "canEdit", Boolean(v)), "aria-label": `Bewerken ${mod.name}` }) })] })] }), expanded &&
+                                                        (mod.features ?? []).map((f) => {
+                                                            const fcell = editor?.cells[permCellKey(mod.id, f.id)] ?? {
+                                                                canView: false,
+                                                                canEdit: false,
+                                                            };
+                                                            return (_jsxs("div", { className: "flex items-center bg-muted/40 px-4 py-2 pl-10 text-sm", children: [_jsx("span", { className: "flex-1", children: f.name }), _jsxs("div", { className: "flex items-center gap-8", children: [_jsx("span", { className: "flex w-16 justify-center", children: _jsx(Checkbox, { checked: fcell.canView, onCheckedChange: (v) => setCell(mod.id, f.id, "canView", Boolean(v)), "aria-label": `Lezen ${mod.name} ${f.name}` }) }), _jsx("span", { className: "flex w-16 justify-center", children: _jsx(Checkbox, { checked: fcell.canEdit, onCheckedChange: (v) => setCell(mod.id, f.id, "canEdit", Boolean(v)), "aria-label": `Bewerken ${mod.name} ${f.name}` }) })] })] }, f.id));
+                                                        })] }, mod.id));
+                                        }))] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setEditor(null), disabled: editorSaving, children: "Annuleren" }), _jsx(Button, { onClick: handleSaveRole, disabled: editorSaving || !editor?.name.trim(), children: editorSaving ? "Opslaan..." : "Opslaan" })] })] }) }), _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: setInviteRole, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies rol" }) }), _jsx(SelectContent, { children: assignableRoles.map((r) => (_jsx(SelectItem, { value: r.id, children: r.name }, r.id))) })] })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setInviteOpen(false), disabled: inviting, children: "Annuleren" }), _jsx(Button, { onClick: handleInvite, disabled: inviting || !inviteEmail.trim() || !inviteName.trim() || !inviteRole, 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: setTestRole, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies rol" }) }), _jsx(SelectContent, { children: assignableRoles.map((r) => (_jsx(SelectItem, { value: r.id, children: r.name }, r.id))) })] })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setTestOpen(false), disabled: testCreating, children: "Annuleren" }), _jsx(Button, { onClick: handleCreateTestUser, disabled: testCreating || !testName.trim() || !testRole, 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: roleDeleteTarget !== null, onOpenChange: (open) => !open && setRoleDeleteTarget(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Rol verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["Weet je zeker dat je de rol ", _jsx("strong", { children: roleDeleteTarget?.name }), " wilt verwijderen? Gebruikers met deze rol verliezen de bijbehorende rechten."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: (e) => {
+                                        e.preventDefault();
+                                        handleDeleteRole();
+                                    }, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: "Verwijderen" })] })] }) }), _jsx(Dialog, { open: renameTarget !== null, onOpenChange: (open) => !open && setRenameTarget(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Naam wijzigen" }), _jsxs(DialogDescription, { children: ["Pas de weergavenaam van ", renameTarget?.email, " aan."] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "rename-input", children: "Naam" }), _jsx(Input, { id: "rename-input", value: renameValue, onChange: (e) => setRenameValue(e.target.value), placeholder: "Naam van de gebruiker" })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setRenameTarget(null), disabled: renaming, children: "Annuleren" }), _jsx(Button, { onClick: handleRename, disabled: renaming || !renameValue.trim(), children: renaming ? "Opslaan..." : "Opslaan" })] })] }) }), _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" })] })] }) })] }));