Approval Request Notification Block for React

Edit REQUEST (title, requester, team, quantity, unit price in cents, the day it is needed, the quote and the note), BUDGET and CHAIN. The total is the quantity times the unit price, and the budget that remains is worked out from the cap, what is spent and this request, all in cents, so the figures can never disagree. The chain is a typed list, and YOU says which link is yours. Dates are fixed ISO values shown in UTC, so they read the same everywhere.

Only this page changes. Approve marks your step done and makes the director's step the current one; Decline marks your step with a cross and the word "Declined" and says the chain stopped; both show a receipt with an Undo and a polite status line that says nothing was sent. No email goes out, no money moves and no record is written. In your app call your server from approve and decline, send the reason along, and let the chain come from what the server says about each approver.

A decline that says nothing leaves the requester guessing, so the demo will not accept an empty one: it needs at least eight characters, otherwise a short message appears under the field, the field is marked invalid and focus goes to it. Escape in the field goes back to the question without losing the text, and the reason you typed is shown in the receipt. Change MIN_REASON to ask for more or less.

It is the catalog Steps as a list with no triggers: nobody can press a step, so the chain cannot be edited from here. Each link has a marker (a number, a tick for done, a cross for your declined step), its role and one line of what it did and when, and a screen reader hears "Done:" before the finished ones. Everything on it is derived from the decision, so there is no second copy to keep in step.

No. The question, the reason form and the receipt are stacked in one cell; the inactive ones are hidden and inert, so the band keeps the height of the tallest and the page below never jumps. After each change focus moves to the next control: the reason field, then the receipt's Undo, then back to Approve or Decline.

The request comes first, then the chain under it, then the decision band, in that order, each full width; the two buttons stack. The chain's link lines stay at most two lines long so the list does not change height when a decision is made.