Tutor Lesson Planner Profile Block for React

Edit the constants at the top. SUBJECTS lists each subject with its levels, its rate per lesson and the weekly times on offer (a weekday, 0 for Sunday, and a time). LENGTHS lists the blocks with their discount, and TAKEN lists lessons already booked so the free times skip them. AS_OF is the day the page treats as today, so the first free time is always the next one after it. In a real app set it from the server's date and read the taken lessons from your calendar.

Lessons are the weekly count times the weeks. The price is the lessons times the rate, the discount is a share of that price rounded to the cent, and the total is the price less the discount. The month figure is the total spread over the weeks in groups of four, so the 8-week block shows half its total. Every line comes from the same few numbers, so nothing is typed twice and the lines always add up.

Nothing leaves the page. It records the request in the page and the status line says so: Requested in this demo, nothing was sent. Changing the subject, the lessons, the length or the time clears that line, because the request no longer matches what you see. To make it real, send the subject, the plan and the chosen time to your own API in the submit handler and show its answer in the same status line.

They're worked out, not typed: from the day after AS_OF the block walks forward up to four weeks, keeps the weekly times that fall on a day the tutor teaches and have not been taken, and lists the first two. Pick the other one and the choice stays until you change the subject. The two times are native radio buttons, so arrow keys move between them and the choice is announced as one of two.

Every control is named: the subject menu by its label, the slider as Lessons a week with the value read out as "2 lessons a week", the length group by its heading and the trial times as a radio group. The working is a description list, so each figure is read with its label, and the status line is a polite live region present from the start. Prices keep their order in a right-to-left layout. Here the slider is named by its label through aria-labelledby.

The bands stack: the slider above the length chips, the working under them, the two trial times one over the other. The action foot stays pinned to the bottom of the screen while the panel scrolls, so the request is always in reach, and settles at the panel's end from the medium breakpoint. The status line stays on one line.