Deadline Notification Block for React

Edit TASKS (an id, a title, hours, the owner's initials and whether it is done), DUE and PEOPLE. AS_OF is the page's fixed "now" and WORK_START and WORK_END are the working day in UTC hours. The time to go, the working hours to go, the hours still to do, the progress and the risk word are all worked out from those, never typed, so a seventh subtask needs nothing else.

From two numbers. The working hours to go are the weekday hours between the page's now and the due time, here 15.5 hours: Wednesday from 09:30 to 17:00 and Thursday from 09:00 to 17:00. The hours still to do are the hours of the subtasks that are not ticked. If the work to do is more than the time to go, the card says "At risk" and how many hours short it is; otherwise "On track" and how many to spare. It is a simple rule, not a forecast: it knows nothing about who is free.

It opens a popover with the next few working days in a native select and a Send request button. Sending records the request on this page: the Extension line of the facts says "Requested: Mon 19 Oct", Withdraw takes it back, and the deadline itself does not move, because a request is not an approval. Nothing is sent. The days are typed instead of coming from a calendar widget, so the choices never depend on the visitor's own date.

No. Rows have a fixed height, the risk word and its icon share one box, the hours line keeps its width, and the status line keeps room for its longest message. A ticked subtask is struck through and slightly quieter, and says so with its checkbox, not with colour.

Each checkbox is named by its subtask's title, the progress bar is decorative beside the "2 of 6 subtasks done" text, and each change is said once in a polite status line with the new risk. The popover is a named dialog; Escape closes it and returns focus to the button that opened it.

The two cells stack, the summary first, and the subtasks follow as full-width rows. The summary's facts sit in two columns.