shadcn.io is not affiliated with official shadcn/ui
HR Manager Open Requisitions Profile Block for Ark UI
An HR manager profile as the open requisitions: headcount, open count and average days open, eight roles with five stage dots and a days-open bar against a 45-day target, a department select and an Offer accepted checkbox that fills a role.
Installation
Overview
Show a head of people what is still open and how long it has been, with this open requisitions profile for React with Ark UI. A compact header holds the title and one sentence, with a department Native Select at its end, and the hairline frame under it opens on the HR manager: initials, name, role and the 45-day target. Three figures sit on shared hairlines: headcount, open requisitions and the average days open, all worked out from the rows and a typed "now". A table lists the eight requisitions with the role and its department, the hiring manager's initials, five stage dots from Applied to Offer with the stage in words, and the days open with a Progress bar that has a tick at the target. Ticking Offer accepted on a Checkbox moves a role to Filled: headcount goes up by one, the open count drops and the average re-derives from what is still open. The table keeps its height when the department narrows it, and the last band, ruled by Guides, says how many are shown. It's built from Native Select, Progress, Checkbox, Badge, Avatar and Guides, with a CSS entrance only. For an HR platform, a hiring dashboard or any list measured against a time target.
FAQ
How do I fill it with my own requisitions?
Edit REQUISITIONS: each has an id, a role, a department, the hiring manager's manager initials, an ISO opened date and the stage reached, from 0 for Applied to 4 for Offer. HEADCOUNT is the staff today, TARGET_DAYS the days a role should take and AS_OF the day the page treats as today. Days open, the bar, the average and the counts are worked out from those. Add a department to DEPARTMENTS for each new one and it appears in the select.
What happens when I tick Offer accepted?
The role moves to Filled: its dots all fill and its stage reads Filled with a tick. Headcount goes up by one, open requisitions drop by one and the average days open is worked out again over the roles that are still open, so it can go up when a fast role fills and down when a slow one does. Unticking puts it back. Nothing is saved, and the status line says what happened.
What does the days-open bar show?
The bar runs to twice the target, so the tick at its middle is the 45-day mark. A role under the target has a lighter fill and says how many days remain; a role over it has a solid fill and says how many days over. The words say the same as the bar, which is drawn for the eye only.
What stays local in this demo?
Everything. The requisitions are typed samples, the select only narrows the page's own list and the ticks change only the page. To make it real, load the roles from your applicant tracking system and write the accepted offer back in the checkbox handler, then re-read the headcount from your HR system.
Is it accessible?
The table has a caption and column headings, each role is a row heading, and each Offer accepted checkbox is named for its role. The select has a visible label, the stage dots are decorative and the stage is written out beside them, and the status line is a polite live region present from the start. Counts keep their order in a right-to-left layout.
How does it look on a phone?
The Manager column and the days bar go, leaving the role, the stage, the number of days and the checkbox, and the three figures stay side by side. The department select drops under the header's sentence. The table keeps the same height for every department, so nothing below it moves.