nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/AuthorizationPage/components/AuthorizationPage.js

@@ -0,0 +1,841 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { useAuthorizationStore } from "../store";
+gsap.registerPlugin(useGSAP);
+const METHOD_COLORS = {
+    GET: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    POST: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+    PUT: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+    PATCH: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",
+    DELETE: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20"
+};
+export function AuthorizationPage({ title = "Authorization Management", subtitle, className, defaultEntityFilter = "all", defaultMethodFilter = "all", defaultShowAssignedOnly = false, getRolesAction, addRoleAction, updateRoleAction, deleteRoleAction, getClaimsAction, getRoleClaimsAction, addRoleClaimAction, updateRoleClaimAction, deleteRoleClaimAction, onRoleCreated, onRoleDeleted, onClaimToggled }) {
+    const store = useAuthorizationStore();
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [expandedEntities, setExpandedEntities] = useState(new Set());
+    const [localSearch, setLocalSearch] = useState("");
+    useGSAP(()=>{
+        if (!contentRef.current) return;
+        gsap.fromTo(contentRef.current, {
+            opacity: 0,
+            y: 10
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.3,
+            ease: "power2.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const fetchRoles = useEffectEvent(()=>{
+        getRolesAction.start({
+            payload: {
+                page: 1,
+                limit: 100
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) {
+                    store.setRoles(data.data.items);
+                }
+            }
+        });
+    });
+    const fetchClaims = useEffectEvent(()=>{
+        getClaimsAction.start({
+            payload: {
+                page: 1,
+                limit: 1000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) {
+                    store.setClaims(data.data.items);
+                }
+            }
+        });
+    });
+    const fetchRoleClaims = useEffectEvent((roleId)=>{
+        getRoleClaimsAction.start({
+            payload: {
+                page: 1,
+                limit: 1000,
+                filters: [
+                    {
+                        field: "role_id",
+                        operator: "eq",
+                        value: roleId
+                    }
+                ]
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) {
+                    store.setRoleClaims(data.data.items);
+                }
+            }
+        });
+    });
+    useEffect(()=>{
+        fetchRoles();
+        fetchClaims();
+    }, []);
+    const initializeFilters = useEffectEvent(()=>{
+        store.setEntityFilter(defaultEntityFilter);
+        store.setMethodFilter(defaultMethodFilter);
+        store.setShowAssignedOnly(defaultShowAssignedOnly);
+    });
+    useEffect(()=>{
+        initializeFilters();
+    }, []);
+    useEffect(()=>{
+        if (store.selectedRole) {
+            fetchRoleClaims(store.selectedRole.id);
+        } else {
+            store.setRoleClaims([]);
+        }
+    }, [
+        store.selectedRole
+    ]);
+    const handleCreateRole = useEffectEvent(()=>{
+        if (!store.newRoleName.trim()) return;
+        const tempId = `temp-${Date.now()}`;
+        const optimisticRole = {
+            id: tempId,
+            name: store.newRoleName.trim(),
+            description: store.newRoleDescription.trim() || "",
+            createdAt: new Date(),
+            updatedAt: new Date()
+        };
+        store.addRole(optimisticRole);
+        store.resetForm();
+        addRoleAction.start({
+            payload: {
+                name: optimisticRole.name,
+                description: optimisticRole.description || undefined
+            },
+            onAfterHandle: (data)=>{
+                fetchRoles();
+                if (data.data) {
+                    onRoleCreated?.(data.data);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.removeRole(tempId);
+            }
+        });
+    });
+    const handleDeleteRole = useEffectEvent((roleId)=>{
+        const roleToDelete = store.roles.find((r)=>r.id === roleId);
+        if (!roleToDelete) return;
+        store.removeRole(roleId);
+        deleteRoleAction.start({
+            payload: {
+                id: roleId
+            },
+            onAfterHandle: ()=>{
+                fetchRoles();
+                onRoleDeleted?.(roleId);
+            },
+            onErrorHandle: ()=>{
+                if (roleToDelete) {
+                    store.addRole(roleToDelete);
+                }
+            }
+        });
+    });
+    const handleStartEditRole = useEffectEvent((role)=>{
+        store.setEditingRoleId(role.id);
+        store.setEditRoleDescription(role.description || "");
+    });
+    const handleCancelEditRole = useEffectEvent(()=>{
+        store.setEditingRoleId(null);
+    });
+    const handleSaveRoleDescription = useEffectEvent(()=>{
+        const roleId = store.editingRoleId;
+        if (!roleId || !updateRoleAction) return;
+        const role = store.roles.find((r)=>r.id === roleId);
+        if (!role) return;
+        const oldDescription = role.description;
+        const newDescription = store.editRoleDescription;
+        store.updateRole(roleId, {
+            description: newDescription
+        });
+        store.setEditingRoleId(null);
+        updateRoleAction.start({
+            payload: {
+                id: roleId,
+                description: newDescription
+            },
+            onAfterHandle: ()=>{
+                fetchRoles();
+            },
+            onErrorHandle: ()=>{
+                store.updateRole(roleId, {
+                    description: oldDescription
+                });
+            }
+        });
+    });
+    const handleToggleClaim = useEffectEvent((claim, isAssigned)=>{
+        const currentRole = store.selectedRole;
+        if (!currentRole) return;
+        const roleId = currentRole.id;
+        if (isAssigned) {
+            const existingRoleClaim = store.roleClaims.find((rc)=>rc.claimId === claim.id);
+            if (!existingRoleClaim) return;
+            store.removeRoleClaim(existingRoleClaim.id);
+            deleteRoleClaimAction.start({
+                payload: {
+                    id: existingRoleClaim.id
+                },
+                onAfterHandle: ()=>{
+                    fetchRoleClaims(roleId);
+                    onClaimToggled?.(claim, false);
+                },
+                onErrorHandle: ()=>{
+                    store.addRoleClaim(existingRoleClaim);
+                }
+            });
+        } else {
+            const tempId = `temp-${Date.now()}`;
+            const optimisticRoleClaim = {
+                id: tempId,
+                roleId: roleId,
+                claimId: claim.id,
+                scope: "",
+                createdAt: new Date(),
+                updatedAt: new Date()
+            };
+            store.addRoleClaim(optimisticRoleClaim);
+            addRoleClaimAction.start({
+                payload: {
+                    roleId: roleId,
+                    claimId: claim.id
+                },
+                onAfterHandle: ()=>{
+                    fetchRoleClaims(roleId);
+                    onClaimToggled?.(claim, true);
+                },
+                onErrorHandle: ()=>{
+                    store.removeRoleClaim(tempId);
+                }
+            });
+        }
+    });
+    const handleSelectRole = useEffectEvent((role)=>{
+        store.setSelectedRole(role);
+    });
+    const handleSearchChange = useEffectEvent((value)=>{
+        store.setSearchClaim(value);
+    });
+    const handleEntityFilterChange = useEffectEvent((value)=>{
+        store.setEntityFilter(value || "all");
+    });
+    const handleMethodFilterChange = useEffectEvent((value)=>{
+        store.setMethodFilter(value || "all");
+    });
+    const handleAssignedToggle = useEffectEvent((value)=>{
+        store.setShowAssignedOnly(value);
+    });
+    const handleUpdateScope = useEffectEvent((roleClaimId, scope)=>{
+        if (!updateRoleClaimAction || !store.selectedRole) return;
+        store.updateRoleClaimScope(roleClaimId, scope);
+        updateRoleClaimAction.start({
+            payload: {
+                id: roleClaimId,
+                scope
+            },
+            onAfterHandle: ()=>{
+                fetchRoleClaims(store.selectedRole?.id || "");
+            },
+            onErrorHandle: ()=>{
+                fetchRoleClaims(store.selectedRole?.id || "");
+            }
+        });
+    });
+    const getClaimEntity = (action)=>{
+        const parts = action.split(".");
+        if (parts[1] === "bulk") {
+            return parts[2] || "bulk";
+        }
+        return parts[1] || "other";
+    };
+    const normalizedSearch = store.searchClaim.trim().toLowerCase();
+    const entityFilter = store.entityFilter.toLowerCase();
+    const methodFilter = store.methodFilter.toLowerCase();
+    const assignedOnlyActive = store.showAssignedOnly && !!store.selectedRole;
+    const assignedClaimIds = new Set(store.roleClaims.map((rc)=>rc.claimId));
+    const filteredClaims = store.claims.filter((claim)=>{
+        const matchesSearch = normalizedSearch ? claim.action.toLowerCase().includes(normalizedSearch) || claim.description.toLowerCase().includes(normalizedSearch) : true;
+        const claimEntity = getClaimEntity(claim.action).toLowerCase();
+        const matchesEntity = entityFilter === "all" || claimEntity === entityFilter;
+        const matchesMethod = methodFilter === "all" || claim.method.toLowerCase() === methodFilter;
+        const matchesAssigned = assignedOnlyActive ? assignedClaimIds.has(claim.id) : true;
+        return matchesSearch && matchesEntity && matchesMethod && matchesAssigned;
+    });
+    const entityOptions = [
+        {
+            value: "all",
+            label: "All Entities"
+        },
+        ...Array.from(new Set(store.claims.map((claim)=>getClaimEntity(claim.action)))).sort((a, b)=>a.localeCompare(b)).map((entity)=>({
+                value: entity,
+                label: entity
+            }))
+    ];
+    const methodOptions = [
+        {
+            value: "all",
+            label: "All Methods"
+        },
+        {
+            value: "get",
+            label: "GET"
+        },
+        {
+            value: "post",
+            label: "POST"
+        },
+        {
+            value: "put",
+            label: "PUT"
+        },
+        {
+            value: "patch",
+            label: "PATCH"
+        },
+        {
+            value: "delete",
+            label: "DELETE"
+        }
+    ];
+    const groupedFilteredClaims = filteredClaims.reduce((acc, claim)=>{
+        const entity = getClaimEntity(claim.action);
+        if (!acc[entity]) acc[entity] = [];
+        acc[entity].push(claim);
+        return acc;
+    }, {});
+    const sortedEntities = Object.keys(groupedFilteredClaims).sort((a, b)=>a.localeCompare(b));
+    const toggleEntity = (entity)=>{
+        setExpandedEntities((prev)=>{
+            const next = new Set(prev);
+            if (next.has(entity)) {
+                next.delete(entity);
+            } else {
+                next.add(entity);
+            }
+            return next;
+        });
+    };
+    const expandAll = ()=>{
+        setExpandedEntities(new Set(sortedEntities));
+    };
+    const collapseAll = ()=>{
+        setExpandedEntities(new Set());
+    };
+    const handleBulkAssign = (entity, assign)=>{
+        const entityClaims = groupedFilteredClaims[entity] || [];
+        for (const claim of entityClaims){
+            const isAssigned = assignedClaimIds.has(claim.id);
+            if (assign && !isAssigned) {
+                handleToggleClaim(claim, false);
+            } else if (!assign && isAssigned) {
+                handleToggleClaim(claim, true);
+            }
+        }
+    };
+    const getEntityAssignedCount = (entity)=>{
+        const entityClaims = groupedFilteredClaims[entity] || [];
+        return entityClaims.filter((c)=>assignedClaimIds.has(c.id)).length;
+    };
+    const getRoleClaimForClaim = (claimId)=>store.roleClaims.find((rc)=>rc.claimId === claimId);
+    const handleScopeSubmit = (roleClaimId)=>{
+        if (updateRoleClaimAction && store.scopeInputValue !== undefined) {
+            handleUpdateScope(roleClaimId, store.scopeInputValue);
+            store.setEditingScopeClaimId(null);
+        }
+    };
+    const startEditingScope = (claimId, currentScope)=>{
+        store.setScopeInputValue(currentScope || "");
+        store.setEditingScopeClaimId(claimId);
+    };
+    return /*#__PURE__*/ _jsx("main", {
+        ref: containerRef,
+        className: cn("min-h-screen bg-zinc-50 dark:bg-zinc-950 p-4 sm:p-6 lg:p-8", className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            ref: contentRef,
+            className: "max-w-[1600px] mx-auto",
+            children: [
+                /*#__PURE__*/ _jsxs("header", {
+                    className: "mb-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-zinc-100",
+                            children: title
+                        }),
+                        subtitle && /*#__PURE__*/ _jsx("p", {
+                            className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400",
+                            children: subtitle
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "grid grid-cols-1 xl:grid-cols-[320px_1fr] gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsxs("aside", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("h2", {
+                                            className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-3",
+                                            children: "Roles"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "space-y-2 mb-4",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "text",
+                                                    value: store.newRoleName,
+                                                    onChange: (e)=>store.setNewRoleName(e.target.value),
+                                                    placeholder: "New role name",
+                                                    className: "w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    onClick: handleCreateRole,
+                                                    disabled: !store.newRoleName.trim() || addRoleAction.state.isPending,
+                                                    className: "w-full px-3 py-2 text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors",
+                                                    children: addRoleAction.state.isPending ? "Creating..." : "Create Role"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "space-y-1 max-h-[300px] overflow-y-auto",
+                                            children: store.roles.map((role)=>/*#__PURE__*/ _jsxs("div", {
+                                                    className: cn("w-full text-left px-3 py-2 rounded-lg text-sm transition-colors group", role.id.startsWith("temp-") && "opacity-50", store.selectedRole?.id === role.id ? "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-900 dark:text-emerald-100" : "hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-300"),
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex items-center justify-between",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("button", {
+                                                                    type: "button",
+                                                                    onClick: ()=>handleSelectRole(role),
+                                                                    disabled: role.id.startsWith("temp-"),
+                                                                    className: "flex-1 text-left truncate disabled:cursor-not-allowed font-medium",
+                                                                    children: role.name
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs("div", {
+                                                                    className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+                                                                    children: [
+                                                                        role.name !== "godmin" && !role.id.startsWith("temp-") && updateRoleAction && /*#__PURE__*/ _jsx("button", {
+                                                                            type: "button",
+                                                                            onClick: ()=>handleStartEditRole(role),
+                                                                            className: "p-1 text-zinc-500 hover:text-emerald-600 transition-colors",
+                                                                            title: "Edit description",
+                                                                            children: /*#__PURE__*/ _jsx("svg", {
+                                                                                className: "w-4 h-4",
+                                                                                fill: "none",
+                                                                                stroke: "currentColor",
+                                                                                viewBox: "0 0 24 24",
+                                                                                "aria-hidden": "true",
+                                                                                children: /*#__PURE__*/ _jsx("path", {
+                                                                                    strokeLinecap: "round",
+                                                                                    strokeLinejoin: "round",
+                                                                                    strokeWidth: 2,
+                                                                                    d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                                                                                })
+                                                                            })
+                                                                        }),
+                                                                        role.name !== "godmin" && !role.id.startsWith("temp-") && /*#__PURE__*/ _jsx("button", {
+                                                                            type: "button",
+                                                                            onClick: ()=>handleDeleteRole(role.id),
+                                                                            className: "p-1 text-red-500 hover:text-red-700 transition-colors",
+                                                                            title: "Delete role",
+                                                                            children: /*#__PURE__*/ _jsx("svg", {
+                                                                                className: "w-4 h-4",
+                                                                                fill: "none",
+                                                                                stroke: "currentColor",
+                                                                                viewBox: "0 0 24 24",
+                                                                                "aria-hidden": "true",
+                                                                                children: /*#__PURE__*/ _jsx("path", {
+                                                                                    strokeLinecap: "round",
+                                                                                    strokeLinejoin: "round",
+                                                                                    strokeWidth: 2,
+                                                                                    d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                                                                })
+                                                                            })
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        store.editingRoleId === role.id ? /*#__PURE__*/ _jsxs("div", {
+                                                            className: "mt-2 space-y-2",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("textarea", {
+                                                                    value: store.editRoleDescription,
+                                                                    onChange: (e)=>store.setEditRoleDescription(e.target.value),
+                                                                    placeholder: "Enter description...",
+                                                                    rows: 2,
+                                                                    className: "w-full px-2 py-1.5 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 resize-none"
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs("div", {
+                                                                    className: "flex gap-2",
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("button", {
+                                                                            type: "button",
+                                                                            onClick: handleSaveRoleDescription,
+                                                                            className: "flex-1 px-2 py-1 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded transition-colors",
+                                                                            children: "Save"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("button", {
+                                                                            type: "button",
+                                                                            onClick: handleCancelEditRole,
+                                                                            className: "flex-1 px-2 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded transition-colors",
+                                                                            children: "Cancel"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }) : role.description && /*#__PURE__*/ _jsx("p", {
+                                                            className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400 truncate",
+                                                            children: role.description
+                                                        })
+                                                    ]
+                                                }, role.id))
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("h2", {
+                                            className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-3",
+                                            children: "Filters"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "space-y-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("label", {
+                                                            htmlFor: "claim-search",
+                                                            className: "block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1",
+                                                            children: "Search"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("input", {
+                                                            id: "claim-search",
+                                                            type: "text",
+                                                            value: localSearch,
+                                                            onChange: (e)=>{
+                                                                setLocalSearch(e.target.value);
+                                                                handleSearchChange(e.target.value);
+                                                            },
+                                                            placeholder: "Search claims...",
+                                                            className: "w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("label", {
+                                                            htmlFor: "entity-filter",
+                                                            className: "block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1",
+                                                            children: "Entity"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("select", {
+                                                            id: "entity-filter",
+                                                            value: store.entityFilter,
+                                                            onChange: (e)=>handleEntityFilterChange(e.target.value),
+                                                            className: "w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100",
+                                                            children: entityOptions.map((opt)=>/*#__PURE__*/ _jsx("option", {
+                                                                    value: opt.value,
+                                                                    children: opt.label
+                                                                }, opt.value))
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("label", {
+                                                            htmlFor: "method-filter",
+                                                            className: "block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1",
+                                                            children: "Method"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("select", {
+                                                            id: "method-filter",
+                                                            value: store.methodFilter,
+                                                            onChange: (e)=>handleMethodFilterChange(e.target.value),
+                                                            className: "w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100",
+                                                            children: methodOptions.map((opt)=>/*#__PURE__*/ _jsx("option", {
+                                                                    value: opt.value,
+                                                                    children: opt.label
+                                                                }, opt.value))
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("label", {
+                                                    className: "flex items-center gap-2 cursor-pointer",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("input", {
+                                                            type: "checkbox",
+                                                            checked: store.showAssignedOnly,
+                                                            onChange: (e)=>handleAssignedToggle(e.target.checked),
+                                                            disabled: !store.selectedRole,
+                                                            className: "w-4 h-4 rounded border-zinc-300 dark:border-zinc-600 text-emerald-600 focus:ring-emerald-500 disabled:opacity-50"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: cn("text-sm", !store.selectedRole ? "text-zinc-400" : "text-zinc-700 dark:text-zinc-300"),
+                                                            children: "Show assigned only"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                store.selectedRole && /*#__PURE__*/ _jsxs("div", {
+                                    className: "bg-emerald-50 dark:bg-emerald-900/20 rounded-xl border border-emerald-200 dark:border-emerald-800 p-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "text-sm font-medium text-emerald-900 dark:text-emerald-100",
+                                            children: store.selectedRole.name
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-1",
+                                            children: store.roleClaims.length
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "text-xs text-emerald-700 dark:text-emerald-300",
+                                            children: "claims assigned"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("section", {
+                            className: "bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "p-4 border-b border-zinc-200 dark:border-zinc-800 flex flex-wrap items-center justify-between gap-3",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h2", {
+                                                    className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100",
+                                                    children: "Claims"
+                                                }),
+                                                /*#__PURE__*/ _jsxs("p", {
+                                                    className: "text-sm text-zinc-500 dark:text-zinc-400",
+                                                    children: [
+                                                        filteredClaims.length,
+                                                        " of ",
+                                                        store.claims.length,
+                                                        " claims •",
+                                                        " ",
+                                                        sortedEntities.length,
+                                                        " entities"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    onClick: expandAll,
+                                                    className: "px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 border border-zinc-200 dark:border-zinc-700 rounded-lg transition-colors",
+                                                    children: "Expand All"
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    onClick: collapseAll,
+                                                    className: "px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 border border-zinc-200 dark:border-zinc-700 rounded-lg transition-colors",
+                                                    children: "Collapse All"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "max-h-[calc(100vh-280px)] overflow-y-auto",
+                                    children: sortedEntities.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                                        className: "p-8 text-center text-zinc-500 dark:text-zinc-400",
+                                        children: "No claims match your filters"
+                                    }) : sortedEntities.map((entity)=>{
+                                        const entityClaims = groupedFilteredClaims[entity] || [];
+                                        const isExpanded = expandedEntities.has(entity);
+                                        const assignedCount = getEntityAssignedCount(entity);
+                                        const allAssigned = assignedCount === entityClaims.length;
+                                        return /*#__PURE__*/ _jsxs("div", {
+                                            className: "border-b border-zinc-100 dark:border-zinc-800 last:border-b-0",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    className: "w-full flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors text-left",
+                                                    onClick: ()=>toggleEntity(entity),
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center gap-3",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("svg", {
+                                                                className: cn("w-4 h-4 text-zinc-400 transition-transform", isExpanded && "rotate-90"),
+                                                                fill: "none",
+                                                                stroke: "currentColor",
+                                                                viewBox: "0 0 24 24",
+                                                                "aria-hidden": "true",
+                                                                children: /*#__PURE__*/ _jsx("path", {
+                                                                    strokeLinecap: "round",
+                                                                    strokeLinejoin: "round",
+                                                                    strokeWidth: 2,
+                                                                    d: "M9 5l7 7-7 7"
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "font-medium text-zinc-900 dark:text-zinc-100",
+                                                                children: entity
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("span", {
+                                                                className: "text-xs text-zinc-500 dark:text-zinc-400",
+                                                                children: [
+                                                                    entityClaims.length,
+                                                                    " claims"
+                                                                ]
+                                                            }),
+                                                            store.selectedRole && /*#__PURE__*/ _jsxs("span", {
+                                                                className: cn("text-xs px-2 py-0.5 rounded-full", allAssigned ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : assignedCount > 0 ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400" : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"),
+                                                                children: [
+                                                                    assignedCount,
+                                                                    "/",
+                                                                    entityClaims.length
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                store.selectedRole && store.selectedRole.name !== "godmin" && /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-2 px-4 pb-2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("button", {
+                                                            type: "button",
+                                                            onClick: ()=>handleBulkAssign(entity, true),
+                                                            className: "px-2 py-1 text-xs font-medium text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 border border-emerald-200 dark:border-emerald-800 rounded",
+                                                            children: "Assign All"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("button", {
+                                                            type: "button",
+                                                            onClick: ()=>handleBulkAssign(entity, false),
+                                                            className: "px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 border border-red-200 dark:border-red-800 rounded",
+                                                            children: "Remove All"
+                                                        })
+                                                    ]
+                                                }),
+                                                isExpanded && /*#__PURE__*/ _jsx("div", {
+                                                    className: "px-4 pb-3",
+                                                    children: /*#__PURE__*/ _jsx("div", {
+                                                        className: "bg-zinc-50 dark:bg-zinc-800/50 rounded-lg divide-y divide-zinc-100 dark:divide-zinc-700/50",
+                                                        children: entityClaims.map((claim)=>{
+                                                            const isAssigned = assignedClaimIds.has(claim.id);
+                                                            const roleClaim = getRoleClaimForClaim(claim.id);
+                                                            const isEditingScope = store.editingScopeClaimId === claim.id;
+                                                            const currentScope = roleClaim?.scope || "";
+                                                            const isTemp = claim.id.startsWith("temp-") || roleClaim?.id.startsWith("temp-");
+                                                            return /*#__PURE__*/ _jsx("div", {
+                                                                className: cn("p-3 transition-colors", isAssigned && "bg-emerald-50/50 dark:bg-emerald-900/10"),
+                                                                children: /*#__PURE__*/ _jsxs("div", {
+                                                                    className: "flex items-start gap-3",
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("input", {
+                                                                            type: "checkbox",
+                                                                            checked: isAssigned,
+                                                                            onChange: ()=>handleToggleClaim(claim, isAssigned),
+                                                                            disabled: !store.selectedRole || store.selectedRole.name === "godmin" || isTemp || addRoleClaimAction.state.isPending || deleteRoleClaimAction.state.isPending,
+                                                                            className: "mt-1 w-4 h-4 rounded border-zinc-300 dark:border-zinc-600 text-emerald-600 focus:ring-emerald-500 disabled:opacity-50"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsxs("div", {
+                                                                            className: "flex-1 min-w-0",
+                                                                            children: [
+                                                                                /*#__PURE__*/ _jsxs("div", {
+                                                                                    className: "flex items-center gap-2 flex-wrap",
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ _jsx("code", {
+                                                                                            className: "text-sm text-zinc-900 dark:text-zinc-100",
+                                                                                            children: claim.action
+                                                                                        }),
+                                                                                        /*#__PURE__*/ _jsx("span", {
+                                                                                            className: cn("px-1.5 py-0.5 text-xs font-medium rounded border", METHOD_COLORS[claim.method] || "bg-zinc-100 text-zinc-600"),
+                                                                                            children: claim.method
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx("p", {
+                                                                                    className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5",
+                                                                                    children: claim.description
+                                                                                }),
+                                                                                isAssigned && roleClaim && !isTemp && /*#__PURE__*/ _jsx("div", {
+                                                                                    className: "mt-2",
+                                                                                    children: isEditingScope ? /*#__PURE__*/ _jsxs("div", {
+                                                                                        className: "flex items-center gap-2",
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ _jsx("input", {
+                                                                                                type: "text",
+                                                                                                value: store.scopeInputValue,
+                                                                                                onChange: (e)=>store.setScopeInputValue(e.target.value),
+                                                                                                placeholder: "e.g. user_id=123&tenant_id=456",
+                                                                                                className: "flex-1 px-2 py-1 text-xs border border-zinc-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
+                                                                                            }),
+                                                                                            /*#__PURE__*/ _jsx("button", {
+                                                                                                type: "button",
+                                                                                                onClick: ()=>handleScopeSubmit(roleClaim.id),
+                                                                                                className: "px-2 py-1 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded transition-colors",
+                                                                                                children: "Save"
+                                                                                            }),
+                                                                                            /*#__PURE__*/ _jsx("button", {
+                                                                                                type: "button",
+                                                                                                onClick: ()=>store.setEditingScopeClaimId(null),
+                                                                                                className: "px-2 py-1 text-xs font-medium text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors",
+                                                                                                children: "Cancel"
+                                                                                            })
+                                                                                        ]
+                                                                                    }) : /*#__PURE__*/ _jsx("button", {
+                                                                                        type: "button",
+                                                                                        onClick: ()=>startEditingScope(claim.id, currentScope),
+                                                                                        className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors",
+                                                                                        children: currentScope ? /*#__PURE__*/ _jsxs("span", {
+                                                                                            className: "font-mono bg-zinc-200 dark:bg-zinc-700 px-1.5 py-0.5 rounded",
+                                                                                            children: [
+                                                                                                "scope: ",
+                                                                                                currentScope
+                                                                                            ]
+                                                                                        }) : /*#__PURE__*/ _jsx("span", {
+                                                                                            className: "italic hover:underline",
+                                                                                            children: "+ Add scope filter"
+                                                                                        })
+                                                                                    })
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }, claim.id);
+                                                        })
+                                                    })
+                                                })
+                                            ]
+                                        }, entity);
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}