hazo_auth 3.0.4 → 4.0.0

package/dist/components/layouts/user_management/components/roles_matrix.js

@@ -1,4 +1,4 @@
-// file_description: internal reusable component for roles-permissions matrix with data table
+// file_description: internal reusable component for roles-permissions management with tag-based UI
 // section: client_directive
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -10,30 +10,36 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../../ui/dialog";
 import { Input } from "../../../ui/input";
 import { Label } from "../../../ui/label";
-import { Plus, Loader2, CircleCheck, CircleX } from "lucide-react";
+import { Plus, Loader2, CircleCheck, CircleX, Pencil } from "lucide-react";
 import { toast } from "sonner";
 import { Avatar, AvatarImage, AvatarFallback } from "../../../ui/avatar";
 import { useHazoAuthConfig } from "../../../../contexts/hazo_auth_provider";
 // section: component
 /**
- * Roles matrix component - reusable internal component for roles-permissions matrix
- * Shows data table with permissions as columns and roles as rows
- * Checkboxes in cells indicate role-permission mappings
+ * Roles matrix component - reusable internal component for roles-permissions management
+ * Shows roles with permission tags and an edit button to modify permissions via dialog
  * Changes are stored locally and only saved when Save button is pressed
  * @param props - Component props including button enable flags and save callback
  * @returns Roles matrix component
  */
 export function RolesMatrix({ add_button_enabled = true, role_name_selection_enabled = true, permissions_read_only = false, show_save_cancel = true, user_id, onSave, onCancel, onRoleSelection, className, }) {
+    var _a;
     const { apiBasePath } = useHazoAuthConfig();
     const [roles, setRoles] = useState([]);
     const [originalRoles, setOriginalRoles] = useState([]);
     const [permissions, setPermissions] = useState([]);
+    const [permissionsWithDescriptions, setPermissionsWithDescriptions] = useState([]);
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
     const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
     const [newRoleName, setNewRoleName] = useState("");
     const [userInfo, setUserInfo] = useState(null);
     const [userRoleIds, setUserRoleIds] = useState([]);
+    // Edit permissions dialog state
+    const [editPermissionsDialogOpen, setEditPermissionsDialogOpen] = useState(false);
+    const [editingRoleIndex, setEditingRoleIndex] = useState(null);
+    // Track which roles have expanded permission tags (for read-only mode)
+    const [expandedRoles, setExpandedRoles] = useState(new Set());
     // Load roles and permissions on mount
     useEffect(() => {
         const loadData = async () => {
@@ -48,6 +54,44 @@ export function RolesMatrix({ add_button_enabled = true, role_name_selection_ena
                     return;
                 }
                 setPermissions(roles_data.permissions.map((p) => p.permission_name));
+                // Also fetch permission descriptions from the permissions endpoint
+                try {
+                    const perms_response = await fetch(`${apiBasePath}/user_management/permissions`);
+                    const perms_data = await perms_response.json();
+                    if (perms_data.success) {
+                        // Combine DB permissions and config permissions with descriptions
+                        const all_perms_with_desc = [];
+                        // DB permissions have descriptions
+                        if (Array.isArray(perms_data.db_permissions)) {
+                            perms_data.db_permissions.forEach((p) => {
+                                all_perms_with_desc.push({
+                                    permission_name: p.permission_name,
+                                    description: p.description || "",
+                                });
+                            });
+                        }
+                        // Config permissions don't have descriptions in the API
+                        if (Array.isArray(perms_data.config_permissions)) {
+                            perms_data.config_permissions.forEach((name) => {
+                                // Only add if not already in db_permissions
+                                if (!all_perms_with_desc.some(p => p.permission_name === name)) {
+                                    all_perms_with_desc.push({
+                                        permission_name: name,
+                                        description: "",
+                                    });
+                                }
+                            });
+                        }
+                        setPermissionsWithDescriptions(all_perms_with_desc);
+                    }
+                }
+                catch (_a) {
+                    // If we can't get descriptions, use permissions without descriptions
+                    setPermissionsWithDescriptions(roles_data.permissions.map((p) => ({
+                        permission_name: p.permission_name,
+                        description: "",
+                    })));
+                }
                 // Initialize roles with permissions as Sets
                 const roles_with_permissions = roles_data.roles.map((role) => ({
                     role_id: role.role_id,
@@ -105,7 +149,7 @@ export function RolesMatrix({ add_button_enabled = true, role_name_selection_ena
             }
         };
         void loadData();
-    }, [user_id]);
+    }, [user_id, apiBasePath]);
     // Handle checkbox change for role-permission mapping
     const handlePermissionToggle = (role_index, permission_name) => {
         setRoles((prev) => {
@@ -264,6 +308,53 @@ export function RolesMatrix({ add_button_enabled = true, role_name_selection_ena
             setSaving(false);
         }
     };
+    // Handle opening the edit permissions dialog
+    const handleOpenEditPermissions = (role_index) => {
+        setEditingRoleIndex(role_index);
+        setEditPermissionsDialogOpen(true);
+    };
+    // Handle toggling expanded state for a role's permission tags
+    const handleToggleExpandedPermissions = (role_index) => {
+        setExpandedRoles((prev) => {
+            const updated = new Set(prev);
+            if (updated.has(role_index)) {
+                updated.delete(role_index);
+            }
+            else {
+                updated.add(role_index);
+            }
+            return updated;
+        });
+    };
+    // Handle select all permissions for the editing role
+    const handleSelectAllPermissions = () => {
+        if (editingRoleIndex === null)
+            return;
+        setRoles((prev) => {
+            const updated = [...prev];
+            const role = Object.assign({}, updated[editingRoleIndex]);
+            role.permissions = new Set(permissions);
+            updated[editingRoleIndex] = role;
+            return updated;
+        });
+    };
+    // Handle unselect all permissions for the editing role
+    const handleUnselectAllPermissions = () => {
+        if (editingRoleIndex === null)
+            return;
+        setRoles((prev) => {
+            const updated = [...prev];
+            const role = Object.assign({}, updated[editingRoleIndex]);
+            role.permissions = new Set();
+            updated[editingRoleIndex] = role;
+            return updated;
+        });
+    };
+    // Get description for a permission
+    const getPermissionDescription = (permission_name) => {
+        const perm = permissionsWithDescriptions.find(p => p.permission_name === permission_name);
+        return (perm === null || perm === void 0 ? void 0 : perm.description) || "";
+    };
     if (loading) {
         return (_jsx("div", { className: `cls_roles_matrix flex items-center justify-center p-8 ${className || ""}`, children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-slate-400" }) }));
     }
@@ -278,12 +369,46 @@ export function RolesMatrix({ add_button_enabled = true, role_name_selection_ena
         }
         return email.substring(0, 2).toUpperCase();
     };
-    return (_jsxs("div", { className: `cls_roles_matrix flex flex-col gap-4 w-full ${className || ""}`, children: [user_id && userInfo && (_jsxs("div", { className: "cls_roles_matrix_user_info flex items-center gap-4 p-4 border rounded-lg bg-muted/50", children: [_jsxs(Avatar, { className: "cls_roles_matrix_user_avatar h-12 w-12", children: [_jsx(AvatarImage, { src: userInfo.profile_picture_url || undefined, alt: userInfo.name ? `Profile picture of ${userInfo.name}` : "Profile picture", className: "cls_roles_matrix_user_avatar_image" }), _jsx(AvatarFallback, { className: "cls_roles_matrix_user_avatar_fallback bg-slate-200 text-slate-600", children: getUserInitials(userInfo.name, userInfo.email_address) })] }), _jsxs("div", { className: "cls_roles_matrix_user_info_details flex flex-col", children: [_jsx("span", { className: "cls_roles_matrix_user_name font-semibold text-lg", children: userInfo.name || userInfo.email_address }), userInfo.name && (_jsx("span", { className: "cls_roles_matrix_user_email text-sm text-muted-foreground", children: userInfo.email_address }))] })] })), _jsx("div", { className: "cls_roles_matrix_header flex items-center justify-between", children: _jsx("div", { className: "cls_roles_matrix_header_left", children: add_button_enabled && (_jsxs(Button, { onClick: () => setIsAddDialogOpen(true), variant: "default", size: "sm", className: "cls_roles_matrix_add_button", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Add Role"] })) }) }), _jsx("div", { className: "cls_roles_matrix_table_container border rounded-lg overflow-auto w-full", children: _jsxs(Table, { className: "cls_roles_matrix_table w-full", children: [_jsx(TableHeader, { className: "cls_roles_matrix_table_header", children: _jsxs(TableRow, { className: "cls_roles_matrix_table_header_row", children: [role_name_selection_enabled && (_jsx(TableHead, { className: "cls_roles_matrix_table_header_role_checkbox w-12" })), _jsx(TableHead, { className: "cls_roles_matrix_table_header_role_name", children: "Role Name" }), permissions.map((permission_name) => (_jsx(TableHead, { className: "cls_roles_matrix_table_header_permission text-center", children: permission_name }, permission_name)))] }) }), _jsx(TableBody, { className: "cls_roles_matrix_table_body", children: roles.length === 0 ? (_jsx(TableRow, { className: "cls_roles_matrix_table_row_empty", children: _jsx(TableCell, { colSpan: permissions.length + (role_name_selection_enabled ? 2 : 1), className: "text-center text-muted-foreground py-8", children: "No roles found. Add a role to get started." }) })) : (roles.map((role, role_index) => (_jsxs(TableRow, { className: "cls_roles_matrix_table_row", children: [role_name_selection_enabled && (_jsx(TableCell, { className: "cls_roles_matrix_table_cell_role_checkbox text-center", children: _jsx("div", { className: "cls_roles_matrix_role_checkbox_wrapper flex items-center justify-center", children: _jsx(Checkbox, { checked: role.selected, onCheckedChange: () => handleRoleSelectionToggle(role_index), className: "cls_roles_matrix_role_checkbox" }) }) })), _jsx(TableCell, { className: "cls_roles_matrix_table_cell_role_name font-medium", children: role.role_name }), permissions.map((permission_name) => (_jsx(TableCell, { className: "cls_roles_matrix_table_cell_permission text-center", children: _jsx("div", { className: "cls_roles_matrix_permission_checkbox_wrapper flex items-center justify-center", children: _jsx(Checkbox, { checked: role.permissions.has(permission_name), onCheckedChange: () => handlePermissionToggle(role_index, permission_name), disabled: permissions_read_only, className: "cls_roles_matrix_permission_checkbox" }) }) }, permission_name)))] }, role_index)))) })] }) }), show_save_cancel && (_jsxs("div", { className: "cls_roles_matrix_footer flex items-center justify-end gap-2", children: [_jsx(Button, { onClick: handleSave, disabled: saving, variant: "default", size: "sm", className: "cls_roles_matrix_save_button", children: saving ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(CircleCheck, { className: "h-4 w-4 mr-2" }), "Save"] })) }), _jsxs(Button, { onClick: handleCancel, variant: "outline", size: "sm", className: "cls_roles_matrix_cancel_button", children: [_jsx(CircleX, { className: "h-4 w-4 mr-2" }), "Cancel"] })] })), _jsx(Dialog, { open: isAddDialogOpen, onOpenChange: setIsAddDialogOpen, children: _jsxs(DialogContent, { className: "cls_roles_matrix_add_dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add New Role" }), _jsx(DialogDescription, { children: "Enter a name for the new role. You can assign permissions after creating the role." })] }), _jsx("div", { className: "cls_roles_matrix_add_dialog_content flex flex-col gap-4 py-4", children: _jsxs("div", { className: "cls_roles_matrix_add_dialog_field flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "role_name", className: "cls_roles_matrix_add_dialog_label", children: "Role Name" }), _jsx(Input, { id: "role_name", value: newRoleName, onChange: (e) => setNewRoleName(e.target.value), placeholder: "Enter role name", className: "cls_roles_matrix_add_dialog_input", onKeyDown: (e) => {
+    // Number of permission tags to show before truncating
+    const MAX_VISIBLE_TAGS = 4;
+    return (_jsxs("div", { className: `cls_roles_matrix flex flex-col gap-4 w-full ${className || ""}`, children: [user_id && userInfo && (_jsxs("div", { className: "cls_roles_matrix_user_info flex items-center gap-4 p-4 border rounded-lg bg-muted/50", children: [_jsxs(Avatar, { className: "cls_roles_matrix_user_avatar h-12 w-12", children: [_jsx(AvatarImage, { src: userInfo.profile_picture_url || undefined, alt: userInfo.name ? `Profile picture of ${userInfo.name}` : "Profile picture", className: "cls_roles_matrix_user_avatar_image" }), _jsx(AvatarFallback, { className: "cls_roles_matrix_user_avatar_fallback bg-slate-200 text-slate-600", children: getUserInitials(userInfo.name, userInfo.email_address) })] }), _jsxs("div", { className: "cls_roles_matrix_user_info_details flex flex-col", children: [_jsx("span", { className: "cls_roles_matrix_user_name font-semibold text-lg", children: userInfo.name || userInfo.email_address }), userInfo.name && (_jsx("span", { className: "cls_roles_matrix_user_email text-sm text-muted-foreground", children: userInfo.email_address }))] })] })), _jsx("div", { className: "cls_roles_matrix_header flex items-center justify-between", children: _jsx("div", { className: "cls_roles_matrix_header_left", children: add_button_enabled && (_jsxs(Button, { onClick: () => setIsAddDialogOpen(true), variant: "default", size: "sm", className: "cls_roles_matrix_add_button", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Add Role"] })) }) }), _jsx("div", { className: "cls_roles_matrix_table_container border rounded-lg overflow-auto w-full", children: _jsxs(Table, { className: "cls_roles_matrix_table w-full", children: [_jsx(TableHeader, { className: "cls_roles_matrix_table_header", children: _jsxs(TableRow, { className: "cls_roles_matrix_table_header_row", children: [role_name_selection_enabled && (_jsx(TableHead, { className: "cls_roles_matrix_table_header_role_checkbox w-12" })), _jsx(TableHead, { className: "cls_roles_matrix_table_header_role_name w-48", children: "Role Name" }), _jsx(TableHead, { className: "cls_roles_matrix_table_header_permissions", children: "Permissions" }), !permissions_read_only && (_jsx(TableHead, { className: "cls_roles_matrix_table_header_actions w-24 text-center", children: "Actions" }))] }) }), _jsx(TableBody, { className: "cls_roles_matrix_table_body", children: roles.length === 0 ? (_jsx(TableRow, { className: "cls_roles_matrix_table_row_empty", children: _jsx(TableCell, { colSpan: role_name_selection_enabled ? 4 : 3, className: "text-center text-muted-foreground py-8", children: "No roles found. Add a role to get started." }) })) : (roles.map((role, role_index) => {
+                                const permission_array = Array.from(role.permissions);
+                                const is_expanded = expandedRoles.has(role_index);
+                                const visible_permissions = is_expanded
+                                    ? permission_array
+                                    : permission_array.slice(0, MAX_VISIBLE_TAGS);
+                                const remaining_count = permission_array.length - MAX_VISIBLE_TAGS;
+                                return (_jsxs(TableRow, { className: "cls_roles_matrix_table_row", children: [role_name_selection_enabled && (_jsx(TableCell, { className: "cls_roles_matrix_table_cell_role_checkbox text-center", children: _jsx("div", { className: "cls_roles_matrix_role_checkbox_wrapper flex items-center justify-center", children: _jsx(Checkbox, { checked: role.selected, onCheckedChange: () => handleRoleSelectionToggle(role_index), className: "cls_roles_matrix_role_checkbox" }) }) })), _jsx(TableCell, { className: "cls_roles_matrix_table_cell_role_name font-medium", children: role.role_name }), _jsx(TableCell, { className: "cls_roles_matrix_table_cell_permissions", children: _jsx("div", { className: "cls_roles_matrix_permission_tags flex flex-wrap items-center gap-1.5", children: permission_array.length === 0 ? (_jsx("span", { className: "text-muted-foreground text-sm italic", children: "No permissions assigned" })) : (_jsxs(_Fragment, { children: [visible_permissions.map((perm_name) => (_jsx("span", { className: "cls_roles_matrix_permission_tag bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs font-medium", title: getPermissionDescription(perm_name) || perm_name, children: perm_name }, perm_name))), remaining_count > 0 && !is_expanded && (_jsxs("span", { className: "cls_roles_matrix_permission_tag_more bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:bg-slate-200", onClick: () => {
+                                                                if (permissions_read_only) {
+                                                                    handleToggleExpandedPermissions(role_index);
+                                                                }
+                                                                else {
+                                                                    handleOpenEditPermissions(role_index);
+                                                                }
+                                                            }, title: permissions_read_only ? `Click to expand all ${permission_array.length} permissions` : `Click to edit all ${permission_array.length} permissions`, children: ["+", remaining_count, " more"] })), is_expanded && remaining_count > 0 && (_jsx("span", { className: "cls_roles_matrix_permission_tag_collapse bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:bg-slate-200", onClick: () => handleToggleExpandedPermissions(role_index), title: "Click to collapse", children: "Show less" }))] })) }) }), !permissions_read_only && (_jsx(TableCell, { className: "cls_roles_matrix_table_cell_actions text-center", children: _jsx(Button, { onClick: () => handleOpenEditPermissions(role_index), variant: "ghost", size: "sm", className: "cls_roles_matrix_edit_button h-8 w-8 p-0", title: "Edit permissions", children: _jsx(Pencil, { className: "h-4 w-4" }) }) }))] }, role_index));
+                            })) })] }) }), show_save_cancel && (_jsxs("div", { className: "cls_roles_matrix_footer flex items-center justify-end gap-2", children: [_jsx(Button, { onClick: handleSave, disabled: saving, variant: "default", size: "sm", className: "cls_roles_matrix_save_button", children: saving ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(CircleCheck, { className: "h-4 w-4 mr-2" }), "Save"] })) }), _jsxs(Button, { onClick: handleCancel, variant: "outline", size: "sm", className: "cls_roles_matrix_cancel_button", children: [_jsx(CircleX, { className: "h-4 w-4 mr-2" }), "Cancel"] })] })), _jsx(Dialog, { open: isAddDialogOpen, onOpenChange: setIsAddDialogOpen, children: _jsxs(DialogContent, { className: "cls_roles_matrix_add_dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add New Role" }), _jsx(DialogDescription, { children: "Enter a name for the new role. You can assign permissions after creating the role." })] }), _jsx("div", { className: "cls_roles_matrix_add_dialog_content flex flex-col gap-4 py-4", children: _jsxs("div", { className: "cls_roles_matrix_add_dialog_field flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "role_name", className: "cls_roles_matrix_add_dialog_label", children: "Role Name" }), _jsx(Input, { id: "role_name", value: newRoleName, onChange: (e) => setNewRoleName(e.target.value), placeholder: "Enter role name", className: "cls_roles_matrix_add_dialog_input", onKeyDown: (e) => {
                                             if (e.key === "Enter") {
                                                 handleAddRole();
                                             }
                                         } })] }) }), _jsxs(DialogFooter, { className: "cls_roles_matrix_add_dialog_footer", children: [_jsx(Button, { onClick: handleAddRole, variant: "default", className: "cls_roles_matrix_add_dialog_save", children: "Add Role" }), _jsx(Button, { onClick: () => {
                                         setIsAddDialogOpen(false);
                                         setNewRoleName("");
-                                    }, variant: "outline", className: "cls_roles_matrix_add_dialog_cancel", children: "Cancel" })] })] }) })] }));
+                                    }, variant: "outline", className: "cls_roles_matrix_add_dialog_cancel", children: "Cancel" })] })] }) }), _jsx(Dialog, { open: editPermissionsDialogOpen, onOpenChange: setEditPermissionsDialogOpen, children: _jsxs(DialogContent, { className: "cls_roles_matrix_edit_permissions_dialog max-w-lg max-h-[80vh] flex flex-col", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Edit Permissions for: ", editingRoleIndex !== null ? (_a = roles[editingRoleIndex]) === null || _a === void 0 ? void 0 : _a.role_name : ""] }), _jsx(DialogDescription, { children: "Select which permissions to assign to this role." })] }), _jsxs("div", { className: "cls_roles_matrix_edit_permissions_actions flex items-center gap-2 py-2 border-b", children: [_jsx(Button, { onClick: handleSelectAllPermissions, variant: "outline", size: "sm", className: "cls_roles_matrix_select_all_button", children: "Select All" }), _jsx(Button, { onClick: handleUnselectAllPermissions, variant: "outline", size: "sm", className: "cls_roles_matrix_unselect_all_button", children: "Unselect All" })] }), _jsx("div", { className: "cls_roles_matrix_edit_permissions_list flex-1 overflow-y-auto py-2 min-h-0", children: _jsx("div", { className: "flex flex-col gap-3", children: permissionsWithDescriptions.map((perm) => {
+                                    var _a;
+                                    const is_checked = editingRoleIndex !== null && ((_a = roles[editingRoleIndex]) === null || _a === void 0 ? void 0 : _a.permissions.has(perm.permission_name));
+                                    return (_jsxs("div", { className: "cls_roles_matrix_permission_item flex items-start gap-3 p-2 rounded hover:bg-muted/50 cursor-pointer", onClick: () => editingRoleIndex !== null && handlePermissionToggle(editingRoleIndex, perm.permission_name), children: [_jsx(Checkbox, { checked: is_checked, onCheckedChange: () => editingRoleIndex !== null && handlePermissionToggle(editingRoleIndex, perm.permission_name), className: "cls_roles_matrix_permission_checkbox mt-0.5" }), _jsxs("div", { className: "cls_roles_matrix_permission_info flex flex-col gap-0.5", children: [_jsx("span", { className: "cls_roles_matrix_permission_name font-medium text-sm", children: perm.permission_name }), perm.description && (_jsx("span", { className: "cls_roles_matrix_permission_description text-xs text-muted-foreground italic", children: perm.description }))] })] }, perm.permission_name));
+                                }) }) }), _jsxs(DialogFooter, { className: "cls_roles_matrix_edit_permissions_footer border-t pt-4", children: [_jsxs(Button, { onClick: () => setEditPermissionsDialogOpen(false), variant: "default", className: "cls_roles_matrix_edit_permissions_done", children: [_jsx(CircleCheck, { className: "h-4 w-4 mr-2" }), "Done"] }), _jsxs(Button, { onClick: () => {
+                                        // Reset this role's permissions to original state
+                                        if (editingRoleIndex !== null) {
+                                            const original_role = originalRoles.find(r => r.role_name === roles[editingRoleIndex].role_name);
+                                            if (original_role) {
+                                                setRoles((prev) => {
+                                                    const updated = [...prev];
+                                                    updated[editingRoleIndex] = Object.assign(Object.assign({}, updated[editingRoleIndex]), { permissions: new Set(original_role.permissions) });
+                                                    return updated;
+                                                });
+                                            }
+                                        }
+                                        setEditPermissionsDialogOpen(false);
+                                    }, variant: "outline", className: "cls_roles_matrix_edit_permissions_cancel", children: [_jsx(CircleX, { className: "h-4 w-4 mr-2" }), "Cancel"] })] })] }) })] }));
 }

package/dist/components/layouts/user_management/components/scope_hierarchy_tab.d.ts

@@ -0,0 +1,12 @@
+export type ScopeHierarchyTabProps = {
+    className?: string;
+    defaultOrg?: string;
+};
+/**
+ * Scope Hierarchy tab component for managing HRBAC scopes
+ * Displays scopes in a tree view for intuitive hierarchy configuration
+ * @param props - Component props
+ * @returns Scope Hierarchy tab component
+ */
+export declare function ScopeHierarchyTab({ className, defaultOrg, }: ScopeHierarchyTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scope_hierarchy_tab.d.ts.map

package/dist/components/layouts/user_management/components/scope_hierarchy_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope_hierarchy_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/user_management/components/scope_hierarchy_tab.tsx"],"names":[],"mappings":"AA2CA,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA8HF;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,UAAe,GAChB,EAAE,sBAAsB,2CA2fxB"}

package/dist/components/layouts/user_management/components/scope_hierarchy_tab.js

@@ -0,0 +1,291 @@
+// file_description: Scope Hierarchy tab component for managing HRBAC scopes (L1-L7) using tree view
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// section: imports
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { TreeView } from "../../../ui/tree-view";
+import { Button } from "../../../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../../ui/dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../../../ui/alert-dialog";
+import { Input } from "../../../ui/input";
+import { Label } from "../../../ui/label";
+import { Loader2, Plus, Edit, Trash2, CircleCheck, CircleX, Building2, FolderTree, RefreshCw, } from "lucide-react";
+import { toast } from "sonner";
+import { useHazoAuthConfig } from "../../../../contexts/hazo_auth_provider";
+const SCOPE_LEVEL_LABELS = {
+    hazo_scopes_l1: "Level 1",
+    hazo_scopes_l2: "Level 2",
+    hazo_scopes_l3: "Level 3",
+    hazo_scopes_l4: "Level 4",
+    hazo_scopes_l5: "Level 5",
+    hazo_scopes_l6: "Level 6",
+    hazo_scopes_l7: "Level 7",
+};
+// section: helpers
+function getLevelNumber(level) {
+    return parseInt(level.replace("hazo_scopes_l", ""));
+}
+function getChildLevel(level) {
+    const num = getLevelNumber(level);
+    if (num >= 7)
+        return null;
+    return `hazo_scopes_l${num + 1}`;
+}
+// Convert ScopeTreeNode to TreeDataItem format
+function convertToTreeData(nodes, onEdit, onDelete, onAddChild) {
+    return nodes.map((node) => {
+        const levelNum = getLevelNumber(node.level);
+        const hasChildren = node.children && node.children.length > 0;
+        const canHaveChildren = levelNum < 7;
+        const item = {
+            id: node.id,
+            name: `${node.name} (${node.seq})`,
+            icon: Building2,
+            scopeData: node,
+            actions: (_jsxs("div", { className: "flex items-center gap-1", children: [canHaveChildren && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", onClick: (e) => {
+                            e.stopPropagation();
+                            onAddChild(node);
+                        }, title: "Add child scope", children: _jsx(Plus, { className: "h-3 w-3" }) })), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", onClick: (e) => {
+                            e.stopPropagation();
+                            onEdit(node);
+                        }, title: "Edit scope", children: _jsx(Edit, { className: "h-3 w-3" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0 text-destructive hover:text-destructive", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete(node);
+                        }, title: "Delete scope", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })),
+        };
+        if (hasChildren) {
+            item.children = convertToTreeData(node.children, onEdit, onDelete, onAddChild);
+        }
+        return item;
+    });
+}
+// section: component
+/**
+ * Scope Hierarchy tab component for managing HRBAC scopes
+ * Displays scopes in a tree view for intuitive hierarchy configuration
+ * @param props - Component props
+ * @returns Scope Hierarchy tab component
+ */
+export function ScopeHierarchyTab({ className, defaultOrg = "", }) {
+    const { apiBasePath } = useHazoAuthConfig();
+    // State
+    const [tree, setTree] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [actionLoading, setActionLoading] = useState(false);
+    const [org, setOrg] = useState(defaultOrg);
+    const [selectedItem, setSelectedItem] = useState();
+    // Dialog state
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
+    const [editDialogOpen, setEditDialogOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [selectedScope, setSelectedScope] = useState(null);
+    const [addParentScope, setAddParentScope] = useState(null);
+    // Form state
+    const [newName, setNewName] = useState("");
+    const [newOrg, setNewOrg] = useState(defaultOrg);
+    const [editName, setEditName] = useState("");
+    // Load tree data
+    const loadTree = useCallback(async () => {
+        if (!org) {
+            setTree([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({ action: "tree", org });
+            const response = await fetch(`${apiBasePath}/scope_management/scopes?${params}`);
+            const data = await response.json();
+            if (data.success) {
+                setTree(data.tree || []);
+            }
+            else {
+                toast.error(data.error || "Failed to load scope hierarchy");
+                setTree([]);
+            }
+        }
+        catch (error) {
+            toast.error("Failed to load scope hierarchy");
+            setTree([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiBasePath, org]);
+    // Load data when org changes
+    useEffect(() => {
+        void loadTree();
+    }, [loadTree]);
+    // Handle add scope (root level)
+    const handleAddRootScope = () => {
+        setAddParentScope(null);
+        setNewOrg(org || defaultOrg);
+        setNewName("");
+        setAddDialogOpen(true);
+    };
+    // Handle add child scope
+    const handleAddChildScope = (parent) => {
+        setAddParentScope(parent);
+        setNewOrg(parent.org);
+        setNewName("");
+        setAddDialogOpen(true);
+    };
+    // Handle edit scope
+    const openEditDialog = (scope) => {
+        setSelectedScope(scope);
+        setEditName(scope.name);
+        setEditDialogOpen(true);
+    };
+    // Handle delete scope
+    const openDeleteDialog = (scope) => {
+        setSelectedScope(scope);
+        setDeleteDialogOpen(true);
+    };
+    // Create scope
+    const handleCreateScope = async () => {
+        if (!newName.trim()) {
+            toast.error("Name is required");
+            return;
+        }
+        if (!newOrg.trim()) {
+            toast.error("Organization is required");
+            return;
+        }
+        setActionLoading(true);
+        try {
+            const level = addParentScope
+                ? getChildLevel(addParentScope.level)
+                : "hazo_scopes_l1";
+            if (!level) {
+                toast.error("Cannot add children to Level 7 scopes");
+                return;
+            }
+            const body = {
+                level,
+                org: newOrg.trim(),
+                name: newName.trim(),
+            };
+            if (addParentScope) {
+                body.parent_scope_id = addParentScope.id;
+            }
+            const response = await fetch(`${apiBasePath}/scope_management/scopes`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            const data = await response.json();
+            if (data.success) {
+                toast.success("Scope created successfully");
+                setAddDialogOpen(false);
+                setNewName("");
+                setAddParentScope(null);
+                await loadTree();
+            }
+            else {
+                toast.error(data.error || "Failed to create scope");
+            }
+        }
+        catch (error) {
+            toast.error("Failed to create scope");
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    // Update scope
+    const handleUpdateScope = async () => {
+        if (!selectedScope)
+            return;
+        if (!editName.trim()) {
+            toast.error("Name is required");
+            return;
+        }
+        setActionLoading(true);
+        try {
+            const body = {
+                level: selectedScope.level,
+                scope_id: selectedScope.id,
+                name: editName.trim(),
+            };
+            const response = await fetch(`${apiBasePath}/scope_management/scopes`, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            const data = await response.json();
+            if (data.success) {
+                toast.success("Scope updated successfully");
+                setEditDialogOpen(false);
+                setSelectedScope(null);
+                setEditName("");
+                await loadTree();
+            }
+            else {
+                toast.error(data.error || "Failed to update scope");
+            }
+        }
+        catch (error) {
+            toast.error("Failed to update scope");
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    // Delete scope
+    const handleDeleteScope = async () => {
+        if (!selectedScope)
+            return;
+        setActionLoading(true);
+        try {
+            const params = new URLSearchParams({
+                level: selectedScope.level,
+                scope_id: selectedScope.id,
+            });
+            const response = await fetch(`${apiBasePath}/scope_management/scopes?${params}`, {
+                method: "DELETE",
+            });
+            const data = await response.json();
+            if (data.success) {
+                toast.success("Scope deleted successfully");
+                setDeleteDialogOpen(false);
+                setSelectedScope(null);
+                await loadTree();
+            }
+            else {
+                toast.error(data.error || "Failed to delete scope");
+            }
+        }
+        catch (error) {
+            toast.error("Failed to delete scope");
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    // Convert tree to TreeDataItem format
+    const treeData = useMemo(() => {
+        return convertToTreeData(tree, openEditDialog, openDeleteDialog, handleAddChildScope);
+    }, [tree]);
+    // Handle tree item selection
+    const handleSelectChange = (item) => {
+        setSelectedItem(item);
+    };
+    // Get level label for dialog
+    const getAddDialogLevelLabel = () => {
+        if (!addParentScope)
+            return "Level 1";
+        const childLevel = getChildLevel(addParentScope.level);
+        return childLevel ? SCOPE_LEVEL_LABELS[childLevel] : "Unknown";
+    };
+    return (_jsxs("div", { className: `cls_scope_hierarchy_tab flex flex-col gap-4 w-full ${className || ""}`, children: [_jsxs("div", { className: "cls_scope_hierarchy_header flex items-center justify-between gap-4 flex-wrap", children: [_jsxs("div", { className: "cls_scope_hierarchy_header_left flex items-center gap-4", children: [_jsxs("div", { className: "cls_scope_hierarchy_org_filter flex items-center gap-2", children: [_jsx(Label, { htmlFor: "scope_org", className: "text-sm font-medium", children: "Organization:" }), _jsx(Input, { id: "scope_org", value: org, onChange: (e) => setOrg(e.target.value), placeholder: "Enter organization", className: "w-[200px]" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void loadTree(), disabled: loading || !org, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}` }), "Refresh"] })] }), _jsx("div", { className: "cls_scope_hierarchy_header_right", children: _jsxs(Button, { onClick: handleAddRootScope, variant: "default", size: "sm", disabled: !org, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Add Root Scope"] }) })] }), loading ? (_jsx("div", { className: "cls_scope_hierarchy_loading flex items-center justify-center p-8", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-slate-400" }) })) : !org ? (_jsxs("div", { className: "cls_scope_hierarchy_empty flex flex-col items-center justify-center p-8 border rounded-lg border-dashed", children: [_jsx(Building2, { className: "h-12 w-12 text-muted-foreground mb-4" }), _jsx("p", { className: "text-muted-foreground text-center", children: "Enter an organization name to view scope hierarchy" })] })) : tree.length === 0 ? (_jsxs("div", { className: "cls_scope_hierarchy_empty flex flex-col items-center justify-center p-8 border rounded-lg border-dashed", children: [_jsx(FolderTree, { className: "h-12 w-12 text-muted-foreground mb-4" }), _jsxs("p", { className: "text-muted-foreground text-center mb-4", children: ["No scopes found for organization \"", org, "\""] }), _jsxs(Button, { onClick: handleAddRootScope, variant: "outline", size: "sm", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Create First Scope"] })] })) : (_jsx("div", { className: "cls_scope_hierarchy_tree_container border rounded-lg overflow-auto w-full min-h-[300px]", children: _jsx(TreeView, { data: treeData, expandAll: true, defaultNodeIcon: Building2, defaultLeafIcon: Building2, onSelectChange: handleSelectChange, className: "w-full" }) })), (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.scopeData) && (_jsxs("div", { className: "cls_scope_hierarchy_selected_info p-4 border rounded-lg bg-muted/50", children: [_jsx("h4", { className: "font-medium mb-2", children: "Selected Scope" }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Name:" }), " ", selectedItem.scopeData.name] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Seq:" }), " ", selectedItem.scopeData.seq] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Level:" }), " ", SCOPE_LEVEL_LABELS[selectedItem.scopeData.level]] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Org:" }), " ", selectedItem.scopeData.org] })] })] })), _jsx(Dialog, { open: addDialogOpen, onOpenChange: setAddDialogOpen, children: _jsxs(DialogContent, { className: "cls_scope_hierarchy_add_dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: addParentScope
+                                        ? `Add Child Scope to "${addParentScope.name}"`
+                                        : "Add Root Scope" }), _jsxs(DialogDescription, { children: ["Create a new scope at ", getAddDialogLevelLabel(), ".", addParentScope &&
+                                            ` This will be a child of "${addParentScope.name}".`] })] }), _jsxs("div", { className: "flex flex-col gap-4 py-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "new_scope_name", children: "Name *" }), _jsx(Input, { id: "new_scope_name", value: newName, onChange: (e) => setNewName(e.target.value), placeholder: "Enter scope name" })] }), !addParentScope && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "new_scope_org", children: "Organization *" }), _jsx(Input, { id: "new_scope_org", value: newOrg, onChange: (e) => setNewOrg(e.target.value), placeholder: "Enter organization" })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { onClick: handleCreateScope, disabled: actionLoading, variant: "default", children: actionLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), "Creating..."] })) : (_jsxs(_Fragment, { children: [_jsx(CircleCheck, { className: "h-4 w-4 mr-2" }), "Create"] })) }), _jsxs(Button, { onClick: () => setAddDialogOpen(false), variant: "outline", children: [_jsx(CircleX, { className: "h-4 w-4 mr-2" }), "Cancel"] })] })] }) }), _jsx(Dialog, { open: editDialogOpen, onOpenChange: setEditDialogOpen, children: _jsxs(DialogContent, { className: "cls_scope_hierarchy_edit_dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit Scope" }), _jsxs(DialogDescription, { children: ["Update scope: ", selectedScope === null || selectedScope === void 0 ? void 0 : selectedScope.name, " (", selectedScope === null || selectedScope === void 0 ? void 0 : selectedScope.seq, ")"] })] }), _jsx("div", { className: "flex flex-col gap-4 py-4", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "edit_scope_name", children: "Name *" }), _jsx(Input, { id: "edit_scope_name", value: editName, onChange: (e) => setEditName(e.target.value), placeholder: "Enter scope name" })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { onClick: handleUpdateScope, disabled: actionLoading, variant: "default", children: actionLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(CircleCheck, { className: "h-4 w-4 mr-2" }), "Save"] })) }), _jsxs(Button, { onClick: () => {
+                                        setEditDialogOpen(false);
+                                        setSelectedScope(null);
+                                    }, variant: "outline", children: [_jsx(CircleX, { className: "h-4 w-4 mr-2" }), "Cancel"] })] })] }) }), _jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete Scope" }), _jsxs(AlertDialogDescription, { children: ["Are you sure you want to delete \"", selectedScope === null || selectedScope === void 0 ? void 0 : selectedScope.name, "\" (", selectedScope === null || selectedScope === void 0 ? void 0 : selectedScope.seq, ")? This action cannot be undone and will also delete all child scopes."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogAction, { onClick: handleDeleteScope, disabled: actionLoading, children: actionLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), "Deleting..."] })) : ("Delete") }), _jsx(AlertDialogCancel, { onClick: () => {
+                                        setDeleteDialogOpen(false);
+                                        setSelectedScope(null);
+                                    }, children: "Cancel" })] })] }) })] }));
+}

package/dist/components/layouts/user_management/components/scope_labels_tab.d.ts

@@ -0,0 +1,13 @@
+export type ScopeLabelsTabProps = {
+    className?: string;
+    defaultOrg?: string;
+};
+/**
+ * Scope Labels tab component for configuring friendly names for scope levels
+ * Shows all 7 scope levels with their current labels from database
+ * Empty inputs for levels without labels - no placeholders
+ * @param props - Component props
+ * @returns Scope Labels tab component
+ */
+export declare function ScopeLabelsTab({ className, defaultOrg }: ScopeLabelsTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scope_labels_tab.d.ts.map

package/dist/components/layouts/user_management/components/scope_labels_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope_labels_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/user_management/components/scope_labels_tab.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAeF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAe,EAAE,EAAE,mBAAmB,2CA4NjF"}