Editable Organization Chart
Drag, Connect, Re-parent
ใช้ React Flow สำหรับลาก node, ลากเส้นจากด้านล่างของ parent ไปด้านบนของ child เพื่อเปลี่ยน parent, เพิ่ม/ลบ node และจัด layout อัตโนมัติ
React Flow canvas
7 roles, 6 reporting lines
@xyflow/react + dagre
Selection
Select a node to edit it.
Drag from a bottom handle to a top handle to assign a new parent.
Drag nodes anywhere on the canvas, then use Auto layout when you want to normalize the tree.
Rules
Each employee can have only one parent.
Connecting a new parent replaces the old parent edge.
The CEO node is protected from delete.