Org Hierarchy UI
Component Detail
User Interface
high complexity
frontend
0
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
Next.js admin page rendering an interactive tree view of organizational nodes (national associations, regions, local chapters). Allows admins to create, rename, move, and delete hierarchy nodes and assign users to the correct level within the tree.
org-hierarchy-ui
Sources & reasoning
NHF's 1,400-chapter structure cannot be managed without a dedicated tree UI. Admins must visualize and edit the full parent-child hierarchy, assign users to nodes, and prevent circular references - none of which can be handled through flat list management screens.
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Render collapsible tree view of organization_hierarchy_nodes
- Provide create/edit/delete node forms with parent selection
- Display user assignments per node with role context
- Show validation errors for circular reference attempts
- Navigate deep hierarchy paths via breadcrumb trail
Interfaces
renderHierarchyTree(rootNodes: HierarchyNode[]): JSX
createNode(parentId: string, name: string, level: string): Promise<HierarchyNode>
moveNode(nodeId: string, newParentId: string): Promise<void>
deleteNode(nodeId: string): Promise<void>
assignUserToNode(userId: string, nodeId: string, roleId: string): Promise<void>
listUsersAtNode(nodeId: string): Promise<UserRole[]>
Related Data Entities (2)
Data entities managed by this component