Time Off Approved Success Block for React

Nothing was approved or switched on. The approver, the dates, the allowance and the three automations are typed sample data, and a switch only changes this page, saying so in a polite status line ("Chat status is on in this demo. Nothing was changed."). To wire it, build the leave dates, the approver and the allowance (in half days) from your leave record and send each switch's change to the service it controls.

It is a native table with a caption, column headings with the weekday's full name and one cell per day, drawn from a typed year and month, so it reads the same everywhere. It is read-only on purpose: nothing in it takes focus. A screen reader hears each day's number, and the marked days are followed by "time off" or "first day back"; the marks are never only a shade, because the first day back is outlined, not filled, and the legend is in words. The page does not use the catalog Calendar, which is for picking days.

From three typed numbers in half days: the year's allowance (50), what was used before (13) and what this leave books, counted as the working days between the first and last day off (4 days, so 8). The days left are the allowance minus the other two, the bar's parts are their shares and the sentence under it repeats them in words. The bar is hidden from assistive technology on purpose, since the text carries the same numbers.

Each is a real Switch with a name, and flipping it updates the count beside the heading ("2 of 3 on") and the status line. Nothing is sent: they stand for the settings you would keep for each automation. In the demo the out-of-office reply and the team calendar start on and the chat status starts off.

The primary is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

The primary stays right under the heading and is full width, so it is on the first screen, and the calendar goes under it and above the balance and the switches, as in the reading order. The short list of facts is left out, since the heading's sentence already says who approved it and the dates. Each automation keeps its name and switch and drops its description on a phone, and the month's days get a little shorter so all five weeks fit.