shadcn.io is not affiliated with official shadcn/ui
Renovation Timeline Calendar Block for Solid
Nine renovation jobs on a ten-week ruler that a toggle group regroups by room or by trade, with each lane's subtotal against its budget, the spend so far and the facts of the chosen job.
Installation
Overview
See the same renovation two ways with this renovation timeline for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with the headline "Spent £13,430 of £34,000", worked out by counting the days each job has run up to the fixed 14 October, and a Toggle Group that regroups nine jobs By room (Kitchen, Bathroom, Living room) or By trade (Builders, Electricians, Plumbers, Plasterers, Joiners, Decorators). Each lane opens with its subtotal against its budget, a Progress bar and, when a lane is over, how much by. Under it every job is a row with its name and a bar on a ten-week ruler from Monday 21 September: solid up to today, outlined after, with a line at 14 October. Choosing a bar shows the job's room, trade, dates, quote and state in the panel at the foot, and no bar ever moves when you regroup. The ruler scrolls sideways under the job names on a phone. It's built from Toggle Group, Progress, Badge and Guides, with a CSS entrance only. For renovation planners, builders' quotes and any plan that is read by room one minute and by trade the next.
FAQ
How do I fill it with my own jobs?
Edit JOBS, ROOMS and TRADES. A job has an id, a name, a room, a trade, a start and end date and a cost, and each room and trade has a name and a budget (a room's budget or a trade's quote). The lanes, the subtotals, the spend and the bars are all worked out from those three lists.
How is the amount spent worked out?
For each job it counts the days the job has run up to the fixed "now", both ends included, takes that share of the job's cost and rounds to the nearest ten. A job that hasn't started counts nothing and a finished one counts all of it. It is an estimate by the day, not an invoice; replace spentOf with real payments when you have them.
What does the toggle group change?
Only how the same nine jobs are grouped. The jobs keep their dates and costs, and the list holds the height of the larger grouping so nothing below it moves when you switch. Each lane's subtotal is the sum of its jobs' costs against that room's budget or that trade's quote.