shadcn.io is not affiliated with official shadcn/ui
Project Progress Dashboard Block for React Aria
Six projects as bars on a shared eight-week axis with a tick for the deadline and a rule for today, a status worked out from progress against time, a group-by toggle and a milestones popover.
Installation
Overview
See which projects are behind without reading a table, with this project progress board for React with React Aria. A hairline frame with a plus mark on each corner draws six Spanwright projects as bars on one eight-week axis: the track runs from the start to the deadline tick, the dark fill is progress, and a thin rule marks today in week 5. Each status is worked out from progress against the share of the project's time that has gone and said in words, such as "2 weeks behind", "On track" or "Starts in week 6". A Toggle Group in the header groups the rows by team or by status, and a project's name opens a Popover with its owner and milestones. It's built from Toggle Group, Popover, Button and Guides. For project reviews and weekly stand-ups.
FAQ
How do I fill it with my own projects?
Edit PROJECTS: each has a start and deadline in weeks from the start of the axis, a progress percentage, a team, an owner and its milestones. WEEKS is the length of the axis and TODAY where the rule goes. The bars, the status words and the header counts are worked out from those.
How is the status worked out?
The share of the project's time that has passed is compared with its progress. A gap of three quarters of a week or more is behind, the same the other way is ahead, anything between is on track, and a project that starts after today is not started. The words round the gap to whole weeks.
What does Group by change?
Only the order and the headings: by team the rows sit under Payments, Growth and Platform, by status under Behind, On track or ahead, and Not started. There are three headings and six rows either way, so the panel keeps its height.