Export Schedule Settings Block for React

Edit COLUMNS. Each has an id (the name written in the file), a hint, whether it is a number (written unquoted in JSON Lines) and its sample: its value in the three preview rows. KEY names the column that is always in the file. SAVED is the setup the account has stored when the page opens: the order, which columns are on, the format, the frequency and both destinations' fields. The preview, the header line and the next file's address are all computed from these.

Each button swaps the column with its neighbour, says where it went in the status line ("sku moved to position 2 of 9") and keeps keyboard focus on the button you pressed, even though its row has moved. The buttons at the ends stay focusable and say the column is already first or last. Dragging would need a pointer, so it isn't the baseline here; add it on top if your product wants it, and keep these buttons for the keyboard.

The exact first line of the file for the chosen format: the column names joined by a comma or a semicolon, or, for JSON Lines, the first record as one line of JSON with numbers unquoted. Copy puts that text on the clipboard, and the status line says so. It always matches the table above it, since both come from the same list.

Because a bucket means nothing to an SFTP server. Both pairs are always in the layout, one of them hidden and inert, so switching destination never moves the page, and each keeps what you typed. Save checks the visible pair: a bucket name has to be 3 to 63 lowercase letters, digits, dots or hyphens, a prefix has no leading slash, a host looks like a host name and a path starts with a slash. The error appears under the field in words, the field is marked invalid, and focus goes to it.

Nothing leaves the page and no export ever runs. The block keeps two copies of the setup, the saved one and the one being edited, and counts how many settings differ, so the status line can say "4 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. The next file's name uses the typed starting moment, not the clock. To make it real, send the setup to your scheduler in the save handler, and keep credentials out of this form.

The checklist comes first with its buttons at the end of each row, the preview follows with its own rule and scrolls sideways inside its frame when there are many columns, and the destination fields stack. The save bar stays pinned to the bottom of the screen.