shadcn.io is not affiliated with official shadcn/ui
Deadline Notification Block for React Aria
A board pack due tomorrow evening in two hairline cells: a risk word, a progress bar and the working hours to go on one side, subtask checkboxes with their hours on the other, so ticking one recomputes the risk, plus a popover to request an extension.
Installation
Overview
Show whether a deadline is still safe, with this deadline notification for React with React Aria. It is Duemoor, a deadline tracker, warning that the Q3 board pack is due on Thursday 15 October at 17:00 UTC. Two cells share a hairline. The first says where it stands: a risk word ("At risk" or "On track") with the hours it is short or has to spare, a Progress bar, the time to go worked out from the page's fixed now, the working hours to go (9:00 to 17:00 on weekdays) in a Data List, who is on it as an Avatar group, and Request extension, an outline button that opens a Popover. The second lists six subtasks as Checkboxes, each with its hours: tick one and the bar, the hours still to do and the risk word all follow. The pack starts at risk and turns on track once enough is done. Guides draw the outer frame. For project deadlines, filing dates, release dates and any date that depends on a list of work.
FAQ
How do I fill it with my own deadline?
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.
How is the risk worked out?
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.
What does Request extension do?
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.
Does anything move when I tick a subtask?
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.
Is it accessible?
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.