Report Schedule Onboarding Block for React

From the sender's wall clock. The block takes each day after the fixed “now” in order, picks the first one whose weekday is chosen (for a monthly report, the first one in the next month), and finds the instant at which London's clock reads the chosen hour on that date. Each recipient's column then formats that same instant in their own zone with Intl.DateTimeFormat, so daylight saving is handled by the browser, not by arithmetic in the file.

The send lands before 07:00 on the recipient's clock. The word sits in a slot that is always reserved, hidden when it does not apply, so rows do not change height. Change EARLY_BEFORE for your own quiet hours, or move the send time later to clear the flag.

A schedule with no day would send nothing, so the last chip stays on. Press another day first, then turn the one you want off. For a monthly report the chips mean “the first Monday”, “the first Thursday” and so on.

Intl output can differ between the server and a browser, so the times are worked out after the page loads. Until then the arrival cells show a dash and the sentence under the table is already complete.

Nothing is created: Schedule report only says it was scheduled in this demo and gives the first send. In your app create the schedule on your server where submit says so, with the frequency, the days, the hour and the sender's zone, and keep each recipient's IANA zone with them.

The controls come first, then the table with the zone select under each name, so the time stays visible without a third column. Schedule report is first in the foot and full width, with the status under it.