shadcn.io is not affiliated with official shadcn/ui
Swimlane Projects Team Block for React Aria
One person's next twelve weeks as swimlanes: three projects as bars with the role inside and a status word at the end, a shaded column for this week and a last lane that adds up the time per week, with a table of the same facts on a phone.
Installation
Overview
A project-assignments section for React with React Aria, for Aislaby, a roster optimiser, about one person. A start-aligned header with the person at its end names the busiest stretch, worked out from the data ("Weeks 7 to 8 go over a full load, at 110%"). Under it, a framed figure with + marks on its corners draws three swimlanes over twelve numbered weeks: each project is a bar across the weeks it runs, carrying the person's role in it and, at its end, a word with an icon for where it stands (On track, Done or Planned). A dashed outline is work that has not started, the shaded column is this week, and a last lane adds up the time for each week: weeks over a full load are solid and carry a warning icon. Below md the drawing gives way to a table with the same facts, so nothing needs sideways scrolling. It's built from Avatar and Guides. For people pages, resourcing reviews and one-to-ones.
FAQ
How do I change the projects and the weeks?
Edit PROJECTS, WEEKS and NOW at the top of the file. A project is a name, the person's part in it, the first and last week it runs (start, end), the allocation it takes while it runs and a state (active, done or planned). The bars' places, every week's total, the busiest stretch in the header and the table are computed from those, so adding a project adds a lane and a row.
Why are the weeks numbered instead of dated?
A dated plan goes stale the day after it is installed. The weeks are "1 to 12" of the plan and NOW says which one it is; the shaded column and the "Now" label follow it. Replace the labels with your own calendar if you want dates.
What does a screen reader get, and what does a phone show?
The drawing is hidden from assistive technology; the table holds the same facts (project, role, weeks, time and status, with the busiest stretch as its last line). From md the table is visually hidden but in the page, so screen readers always read it; below md it is the visible version, with the role under the project name and the time under the weeks.
How is the total lane worked out, and what does over a full load look like?
For each week it adds the allocation of every project that is running in it. Under 80% is a light tint, 80% to 100% a step darker, and anything over 100% is solid with a warning triangle and the number in bold. The header says in words which weeks those are, so the lane never has to be decoded by tone alone.
Why are the bars not coloured by status?
Bars keep to foreground tones: a solid bar is work in progress, a light one is finished, a dashed outline is planned. Each also says its status in a word with an icon at its end (a check in a circle, a check, a clock), so the status reads in greyscale and in every theme.