Roster

A people-operations workspace for a fictional 250-person company. A constellation becomes an org chart, with team moves reflected in headcounts, managers, leave coverage and onboarding.

• Best forDevelopers building HR workspaces, organization directories and people-operations tools.

• Organization

  Move between constellation, org-chart and list modes, search people, inspect teams and reassign a team member with an effective date and exact undo.

• People

  Search and filter the directory, choose columns, export selected rows and open profiles with manager, tenure, leave, onboarding and change history.

• Time off

  Review a team calendar, balances and coverage warnings, then approve or decline seeded requests. Overrides require a recorded reason.

• Onboarding

  Follow new hires, progress and overdue tasks, filter checklists by owner and see manager-owned tasks reassigned after an organizational move.

• A constellation with a readable alternative

  A seeded Canvas 2D layout groups people by team and morphs into an org chart. Search, department filters, zoom and a list fallback expose the same organization without a graph-library dependency.

• Moves with consequences and undo

  An effective-dated move recalculates reporting manager, team size, span of control and leave coverage. Open manager-owned onboarding tasks follow the person; undo restores the recorded changes.

• Coverage and leave decisions

  Calendar bars, balances and charts share the same requests. Decisions enforce the demonstration accrual and coverage rules, with recorded reasons for overrides and inline explanations for refusals.

• Directory and onboarding tools

  Profiles, selected-row CSV export, customizable columns, task owners, overdue indicators and first-days timelines are included. Computed notifications lead to the relevant local record.

• Keyboard and smaller screens

  Arrow-key canvas navigation, a searchable Move to menu, phone layouts and hydration-safe reduced motion are included. On phones the menu is the intended reassignment path; no per-country leave engine is provided.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

All people, requests and tasks are fictional, local data. No HRIS, payroll, calendar, identity provider, email or database is connected. Requests come from the seed rather than an employee submission form; a reload resets changes.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsFigtree
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.