Care Hours Planner Contact Block for React

Each ticked kind of help has hours a week between 1 and 14, starting from a typical figure (bathing 3, meals 4, medication reminders 2, mobility 3, companionship 2). The panel sums them, draws the sum against a 40-hour week and shows the visits as the total divided by two hours, rounded up. Change NEEDS, WEEK and VISIT at the top of the file. It's a sum of what you chose, not an assessment.

All five lines are always in the panel: a line that isn't needed reads "Not needed" in the quiet text colour instead of disappearing. The sentence under the number keeps a line of its own either way. A hidden status region present from the start tells a screen reader the new total after each change, such as "3 kinds of help, 9 hours a week, about 5 visits of 2 hours".

Each row has a minus and a plus button with names such as "More hours of meals", and the hours between them. They stay at 1 and 14 instead of disabling themselves, so keyboard focus never drops. The stepper is invisible and inert until its box is ticked, and it keeps its space so the row doesn't resize.

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your coordinator's inbox: details holds who the care is for, the hours for each kind of help, the name and the email. The confirmation repeats them so a typo is easy to spot.

The label above it names the select's button for screen readers, and focus can land on it when the choice is missing. The trigger takes the id, and the label points to it with htmlFor.

The three cells stack with a hairline between them: the checklist, then the panel, then your details and the button. Each checklist row keeps its box and words on one side and the stepper on the other, and at 320 pixels the words wrap rather than push the stepper off. The number and the phone link keep their digits in order in a right-to-left layout.