Backup Complete Notification Block for React

Edit BACKUPS: each has an id, an ISO iso date, its kind (Full or Incremental), its size in gigabytes, how long it took in seconds and the place it is stored in. The weekday and date of each cell, the "days earlier" line and the day the backup is kept until (30 days later, from KEPT_DAYS) are worked out from the date and the page's fixed AS_OF, so it reads the same everywhere. The place names are made up.

Only this page changes. Confirming closes the dialog and a polite line says "Restore queued (demo)" for that day, and that nothing was restored. No database is touched and nothing is sent. In your app call your service from restore with the chosen backup's id, and show the job's progress in the same panel.

A restore replaces live data with older data, so it confirms in an alert dialog that says exactly what will be replaced: the database, the size and the day, and that anything written since is lost. First focus is on Cancel ("Keep current data"), clicking outside does not close it, and the action is a destructive button whose text is mixed toward the foreground so it stays readable in every theme.

The seven cells are one tab stop and the arrow keys move between them; the pressed one is read out with its weekday, date and size ("Wed 14 October, 4.9 GB"). The week is a time axis, so it stays in order from oldest to newest in a right-to-left page as well. Pressing the pressed day again does nothing: one day is always chosen.

Yes. The seven cells share the row and shrink to a weekday over a date, the detail's cells go from three across to two, and the long "Stored in" cell takes the full row. The status line reserves three lines so a long sentence cannot move the button.