Escalation Tree

Enterprise
Workflow

Visual hierarchy of approval chain with status indicators for each node in the escalation path. Shows approval progression through organizational levels.

Preview

Approval chain hierarchy visualization

S
Sarah Chen
Team Lead
Approved
M
Mike Johnson
Department Head
Current
E
Emily Davis
VP Operations
Pending

Status Types

Four status states with color-coded indicators

Pending
Current
Approved
Rejected

Props

EscalationTree component API reference

PropTypeDefaultDescription
rootNode*EscalationNode—Root node of the escalation tree
onNodeClick(node: EscalationNode) => void—Callback when a node is clicked
classNamestring—Additional CSS classes for the container

EscalationNode Type

PropTypeDefaultDescription
id*string—Unique node identifier
name*string—Person name
role*string—Person role/title
status*'pending' | 'current' | 'approved' | 'rejected'—Node status
childrenEscalationNode[]—Child nodes for hierarchy

Usage

Import and implementation example

import { EscalationTree } from '@/components/ui/escalation-tree'

export default function Example() {
  const rootNode = {
    id: '1',
    role: 'Team Lead',
    name: 'Sarah Chen',
    status: 'approved',
    children: [
      {
        id: '2',
        role: 'Department Head',
        name: 'Mike Johnson',
        status: 'current',
        children: [
          {
            id: '3',
            role: 'VP Operations',
            name: 'Emily Davis',
            status: 'pending',
          }
        ]
      }
    ]
  }

  return (
    <EscalationTree
      rootNode={rootNode}
      onNodeClick={(node) => showNodeDetails(node)}
    />
  )
}
This block is self-contained (no UI component dependencies)

Features

Built-in functionality

  • Hierarchical visualization: Tree structure shows approval chain levels
  • Status indicators: Dot colors for pending, approved, rejected, and current
  • Clickable nodes: Optional click handler to view node details
  • Avatar initials: Automatic avatar with first letter of name
  • Connecting lines: Visual lines show the escalation path
  • Role display: Shows name and role for each approver
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Nodes can be made clickable with proper button semanticsStatus is shown with both color and text labelAvatar shows first letter of name

Keyboard Navigation

KeyAction
TabNavigate between clickable nodes
Enter / SpaceActivate focused node

Notes

  • Status communicated through both color and text
  • Name and role provide context for each node
  • Connecting lines are decorative
  • Consider adding aria-label for tree structure

Related Components

Escalation TimerApproval GateAudit LogAvatar