Archived Project Restore Error Block for React

From the typed PROJECT at the top of the file: the day it was archived, who did it, how many people worked on it and the day it was last active. The page's "today" is a typed constant, AS_OF, so the server and the browser agree: days inactive is the days from the last activity to it, the archive is deleted one year after it was archived, and the months that remain and the meter's fill are worked out from the same dates, never typed twice. In your app, pass the real dates and the real day.

In the example it changes the page to its restored state: the mark, the heading and the sentence say the project is active again, the meter row says nothing is scheduled for deletion, and a polite status message says it was restored in this demo and nothing was changed. The same button then reads "Undo restore" as an outline button, so you can run it twice. For a real product, call your API on press, wait for it, and only then change the page; if restoring can't be undone, drop the second state.

Yes. The Download Trigger saves quayside-road-extension-archive.json, a small file built in the browser from the typed project: its name, who archived it and when, how many people worked on it, when it was last active and the day it will be deleted. For a real archive, set data to a request for your export (the trigger takes text, a Blob or a promise of either) and name the file after the project.

How much of the year the archive has used, as a bar that starts at the day it was archived and ends at the day it will be deleted, with a tick at today. It is drawn by hand so the tick sits exactly on the fill, and it stays left-to-right on a right-to-left page, as a time line should. The bar is hidden from assistive technology; the sentence above it gives the months that remain, and a hidden line gives the days used of the year.

No. The heading, the sentence and the meter row each reserve their lines for both states, the button keeps its width when its words change, and the meter's labels swap in place, so the page never moves.

The four cells go two across, the meter keeps one row and its two dates, and the buttons stack and span the width, with Restore project first and on the first screen.