shadcn.io is not affiliated with official shadcn/ui
Department Manager CRUD Block for Ark UI
A company's departments as an indented table with a headcount that rolls up through the teams, a Reports to select that refuses a loop, a delete that waits until a department's people have moved, and an Undo for deletes and moves.
Installation
Overview
Keep an org chart honest while people edit it, with this department manager for React with Ark UI. A hairline frame with a plus mark on each corner opens with a strip of three figures, people, departments and the largest team, over a native table in a frame of fixed height: nine departments of Orgmoor, indented by who they report to, each with an Editable name, a Native Select for Reports to, its own people and the people in all of the teams under it. Choosing a department's own team as its parent is refused by name ("Engineering cannot report to Platform, which already reports to it"), and so is a fifth level. A department with people cannot be deleted: its Delete stays on the row with the reason under it, "Move its 7 people first", and pressing it takes you to the Move people band. One without people opens an Alert Dialog first and its teams then report to its parent. A band adds a department (a name nobody uses and who it reports to), and the foot says what changed beside an Undo for deletes and moves of people. Add is the only Shine Button, and the bands are ruled by Guides. For org charts, cost centres, team directories and any hierarchy with counts.
FAQ
How do I fill it with my own departments?
Edit DEPTS. Each has an id, a name, a parent (empty for the top) and people, the number who sit directly in it. The indent, the order of the rows, the rolled-up headcount, the strip and the largest team are all derived from that list, so nothing is typed twice, and new departments take their id from a counter held in state.
What does Reports to refuse?
A department cannot report to itself or to a team that already sits under it, since that would close a loop, and nothing may end up below the fourth level. The refusal names both departments, the select keeps its saved value, and the reason shows in the reserved line under the add form as well as in the polite line. A name that another department already uses is refused the same way when you rename or add.
Why can't I delete a department with people?
Because the people would have nowhere to go. The Delete button stays on the row, marked as unavailable, with the count in words under it; pressing it fills the From select of the Move people band with that department and moves focus there. Once its people are elsewhere, Delete asks first, and the department's own teams then report to its parent.
What does Undo restore?
The departments exactly as they were before the last delete or move of people, including each team's parent. Any other change, such as renaming or changing who a department reports to, replaces the Undo, so it never reaches back further than what you see. Focus returns to the department that was affected.
What stays local, and how do I wire a real save?
The departments live in React state in this tab and a reload brings the original nine back; nothing is sent. In your app call your API in rename, reparent, add, remove and movePeople, read the new list from the response, and keep the loop check on the server too, since a second editor could close a loop you cannot see.
How does it look on a phone?
Each row becomes a small card: the name with its people and rolled-up headcount under it, still indented by its level, then the Reports to select, then Delete with its reason. The frame scrolls inside itself so the page stays short, and the add and move bands stack their fields.