Task Assigned Notification Block for React

Edit TASK, PROJECT, ASSIGNER and ASSIGNED_AT for the facts, SUGGESTED_LEVEL and SUGGESTED_DUE for what is preselected, CHOICES for the priorities and TEAMMATES for the reassign list. AS_OF is the page's fixed now and REACH how many days ahead a due day may be, so the earliest and latest days are worked out from them.

The date field carries a minimum (the day after the page's now) and a maximum, and the page checks the value too: a day outside them, or an empty field when you press Accept, shows the reason ("That day has passed. The first day is Thu 15 Oct."), keeps the answer open and moves focus to the field. A half-typed date is ignored until it is whole, so the reason does not flash while you type.

The answer lives in this page. Accept and Reassign write a sentence ("Reassigned to Zofia Brightwater. Nothing was sent in this demo") and swap the buttons for an Undo in the same place; nothing is created, assigned or sent. In your app send the priority and due day from accept and the teammate from reassign, and keep Undo for as long as your service allows it.

No. The three states, the answer buttons, the reassign picker and the Undo, share one cell as tall as the tallest, and while an answer holds the priority and date are locked so the sentence cannot go stale. Undo unlocks them and moves focus back to Accept task.

The facts come first, then the panel: the priority cells keep their glyph and word and drop their hint, the date field is full width and its reason has room for two lines, and the status sentence sits above the buttons.

Priority is a radio group named by its heading, the date field has a label, a hint and a reason that is read with it, and the teammate picker is a named native select. The one polite status line says what you chose or what was refused, and hidden states are inert, so only the visible buttons are in the tab order.