Time Restricted Login Block for React

Everything. The hours are typed constants, the five demo times are fixed days counted from a typed AS_OF, and nothing reads the clock or ticks, so the page looks the same on the server and in every time zone. Sending the request waits half a second and says what a real product would do. In a product, check the hours on your server from its own clock and the user's rules, and show this grid from the same data.

From the rules and the demo time only. If the demo time falls in an allowed stretch, the next change is that stretch closing; otherwise the function walks forward day by day, up to a week, to the first stretch that starts later, and the line spells its day, date, clock time and how long it is from the demo time. Saturday afternoon, for example, opens on Monday at 08:00.

The grid is one tab stop. Arrow keys move between hours and days, Home and End jump to the first and last hour of the day, and each cell is a button named with its day, hour and state ("Wed 08:00: allowed"). The readout under the grid follows hover, focus and a tap, and the status line says the result of a tap.

Allowed hours have a solid tone and a bar along their foot; closed hours are plain. The demo time has a heavy outline, which also keeps the bar when its hour is allowed. The legend names all three, and every cell has its state in its name.

It asks for a reason and at least ten characters of details, names the problem under the field and focuses it when one is missing, and says what a real product would do. If the demo time is inside the hours it says no request is needed. Nothing is sent; wire the submit to your own admin queue.

The week scrolls sideways inside its band while the day names stay fixed at the start, so you always know which row you are on. Everything else stacks, and the Request button is pinned to the foot of the screen.