Hierarchy Management Page
Component Detail
Description
Admin portal page that renders the full organizational hierarchy as an interactive tree view. Supports expand/collapse controls, drill-down navigation into sub-organizations, inline editing of parent-child relationships, and drag-to-reorder with a keyboard-accessible fallback for WCAG 2.2 compliance.
hierarchy-management-page
Responsibilities
- Render recursive tree view of organization hierarchy with expand/collapse controls
- Enable drag-and-drop reordering of sub-organizations with keyboard alternative
- Provide inline editing of organization relationships and node properties
- Display breadcrumb trail for current hierarchy position and drill-down navigation
- Show aggregated statistics rollup for each hierarchy node
Interfaces
renderHierarchyTree(rootOrgId)
onNodeExpand(orgId)
onNodeCollapse(orgId)
onDragMove(sourceOrgId, targetParentOrgId, position)
onKeyboardMove(orgId, direction)
onInlineEdit(orgId, field, value)
onCreateChildOrganization(parentOrgId)
onDeleteOrganization(orgId)
refreshHierarchy()
setSearchFilter(query)
Relationships
Dependencies (2)
Components this component depends on
Sub-Components (2)
Recursive React component representing a single organization node in the tree. Renders organization name, member count, statistics badge, and child nodes. Supports accessible keyboard navigation and focus management.
- Render individual organization node with metadata
- Handle expand/collapse state for child nodes
- Support drag handle and keyboard move interactions
- +1 more
Search input that filters the hierarchy tree to locate specific organizations by name, region, or identifier. Highlights matching nodes and auto-expands their ancestor path.
- Accept search query input with debounce
- Filter hierarchy tree nodes by name or identifier
- Auto-expand ancestor path to matching nodes