Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Resource Allocation Dashboard Block for React Aria

Seven people by six weeks as a table of allocation percentages in foreground weights, outlined and marked Over past 100%, where each cell opens a popover to edit its hours on each project.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Plan who is booked on what, and see the overbooked weeks at a glance, with this resource allocation grid for React with React Aria. A hairline frame with a plus mark on each corner holds a table of seven Staffgrid teammates by six weeks. Each cell shows the share of a 40-hour week as a number, shaded in foreground weights, and past 100% it is outlined and says "Over". Every cell is a button that opens a Popover with that person's hours on four projects, each in a Number Input, and the total under them. Editing an hour re-derives the cell, the header sentence ("5 person-weeks are over 100%, the most in the week of Oct 26") and the status line. It's built from Popover, Number Input, Button and Guides. For resource planning and capacity reviews.

FAQ

How do I fill it with my own people and projects?

Edit PROJECTS, WEEKS and PEOPLE: each person has hours, one row per project with a number for every week. The percentages, the shading, the Over words and the header are worked out from the hours, and WEEK_HOURS is the length of a full week.

How is a cell shaded?

Four steps of solid foreground mix by hours (none, up to 16, up to 28, up to 40) and a ring plus the word Over past 40, so the state never relies on colour. Each cell also reads its hours and, for a screen reader, the person and week, then "Edit hours".

How do the hour fields behave?

Each field takes whole hours from 0 to 60 and updates the cell as you type; anything that is not a number is tidied when the field loses focus, which is also when React Aria commits a typed value. Reset hours puts back the typed plan.

What stays local, and how do I wire it for real?

The hours are typed and your edits stay in the page; nothing is scheduled. To make it real, load the allocations from your planning tool and send each changed project hour from editHours.

How does it look on a phone?

The person column sticks to the start and the six weeks scroll sideways inside a labelled region that you can focus and scroll with the arrow keys. The popover keeps its width and stays on screen.

All 200 dashboard blocks