Backup Schedule Settings Block for React

Edit the constants at the top. SAVED is the schedule the account has stored when the page opens (frequency, hour, minute, weekday, how many copies to keep and where they go), PLACES lists the destinations with their two-letter tiles, COPY_GB is the size of one copy and VAULT_GB is the space the product's own storage includes. ANCHOR is the moment every next run and every "in 17 h" is counted from; in your app replace it with the current time on the server.

In plain functions on the typed starting moment, in UTC with no daylight saving: an hourly run is the next chosen minute past the hour, a daily one the next time of day, and a weekly one the next chosen weekday at that time, then each further run adds one step. The strip's figures come from the same schedule: the history is the number of copies times the step between runs, and the oldest date is the last run before the next one, minus the copies kept. Nothing reads the clock, so the page shows the same runs on the server and in every time zone.

Because the copies would not fit. On the vault each copy is 3.1 GB and 100 GB is included, so 33 copies or more do not fit; the line under the form says so while you type, the count field is marked invalid when you press Save, and focus moves to it. Choosing a bucket in your own account lifts the limit, since that storage is yours. The figure under "Stored" switches from "of 100 GB" to "in your bucket" accordingly.

Nothing leaves the page and no backup ever runs. The block keeps two copies of the schedule, the saved one and the one being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited schedule to your scheduler in the save handler and update the saved copy from the response. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

They are native radio inputs inside labels, so the whole card is the target, arrow keys move between them and the group is named "Where copies go". The chosen card gets a heavier edge and a tint rather than a color, so it reads without one. Wire each card to the credentials form of its destination in your app; this block only picks where.

The strip stays three figures wide, the form's controls stack, the radio cards stack one under another and the list of runs follows the form with its own rule. The save bar is pinned to the bottom of the screen.