Consultant Availability Profile Block for React

Edit the constants at the top. CAPACITY is the hours a week she gives clients, and BOOKED lists the hours already booked in each of the next eight weeks, starting from the first Monday after AS_OF. ENGAGEMENTS lists each kind of work with the hours it takes of its first week. The free hours, the weeks that fit, the earliest fit and the counts are all worked out from those, so nothing is typed twice. In a real app read BOOKED from your calendar and set AS_OF from the server's date.

A week fits when the hours still free in it are at least the hours the engagement takes: 12 for a strategy sprint, 4 for a retainer, 8 for a workshop day. Change the engagement and the marks move at once, the count in the heading reads "2 of 8 fit", and a week you had picked that no longer fits is cleared with a line that says why. The foot's "still free" is the week's free hours less the engagement's.

Nothing leaves the page. With a week picked it says Requested in this demo, nothing was sent, in the status line. Without one it says to pick a week with room first and moves focus to the earliest week that fits. The button is marked aria-disabled rather than disabled until a week is picked, so it keeps its place and stays focusable. To make it real, send the engagement and the week's Monday to your own API in the submit handler.

The weeks are native radio buttons in a labelled group, so arrow keys move between the ones with room and the choice is announced as one of the group; weeks that are too full are disabled and read as unavailable. Each cell says "Week of" its date, its free hours and its word, so nothing rests on the bar or on a tone. The bars are decoration and hidden from assistive technology. The status line is a polite live region present from the start.

The eight weeks wrap two across instead of four, so each cell stays at least as wide as a thumb, and the status line and the request stay pinned to the bottom of the screen while you scroll. The date sits first in every cell, so nothing reads in a different order from the layout. The bars keep their direction in a right-to-left layout.