shadcn.io is not affiliated with official shadcn/ui
Shift Planner Volunteer Profile Block for Ark UI
A volunteer profile as a shift planner: a bar toward 200 hours with logged hours solid and planned hours hatched, five upcoming shifts with an I will take it checkbox, bars by cause, and an availability switch.
Installation
Overview
Plan a year of volunteering against a goal, with this volunteer profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the volunteer: initials, name, role, place and an availability Switch that is the profile's status. Three tiles give the hours logged, planned and still to plan. A bar toward 200 hours draws what is logged as a solid fill and what is planned as a hatched one after it, with the total in words beside it. Five upcoming shifts each carry an I'll take it Checkbox; ticking one adds its hours to the planned total, the bar and the bar for its cause, all worked out from the same typed rows. With availability off a tick is refused and the polite status line says why. Nothing is booked. The volunteer, the shifts and every figure are invented samples. For a volunteering app, a charity page or any profile that plans hours toward a goal.
FAQ
How do I fill it with my own shifts?
Edit CAUSES (a label and the hours logged so far), SHIFTS (a title, a cause, a day and the hours) and GOAL. The totals, the bar widths and the bars by cause are worked out from those rows. TAKEN_AT_LOAD lists the shifts that start ticked, and the days are typed, never read from the clock.
What do the solid and hatched parts of the bar mean?
The solid part is the hours already logged and the hatched part is the hours you have planned by ticking shifts. Both are drawn against the yearly goal, so the end of the hatched part is the planned total. The words under the bar and in the tiles say the same numbers, so the picture is never the only source.
What does the availability switch do?
It is the profile's status. With it off the profile says it is not taking shifts: ticking a shift is refused and the status line says to switch availability on, while the shifts already planned stay as they are. Unticking is always allowed.
What stays local in the demo, and how do I wire it for real?
Ticking only changes local state and the status line; nothing is booked or sent. In your own app post the tick to your shifts endpoint, show the server's answer in the status line and put the tick back if it is refused.
Is it accessible, and how does it look on a phone?
Each checkbox is named by the shift and described by its cause and day, the switch is named even when its label is hidden on a phone, the bars are decoration with their figures as text, and the status line is a polite live region present from the start. On a phone the three tiles stay in one row and the shifts stack. Dates and hours keep their reading order in a right-to-left page.