Seats Full Error Block for React

Everything is derived from a typed list of members, the plan's seat count and a log of what you have done here (members removed, seats added, the invite). The seat cells, the banner sentence, the "5 of 5 seats used" count and the label of the one button are all computed from that, so they can't disagree. Change MEMBERS and PLAN_SEATS to your own.

Because only they have gone quiet: a member is removable when their typed last-active date is more than 30 days before "today", and the line under their name counts the days from the two dates. Active members have no Remove, so the panel never suggests removing someone who is working. In your product, apply your own rule, and ask for confirmation if removing is destructive.

All of it: Remove, Add seats and Send the invite change the panel's state and say so in the status line ("Freed the seat of Ravi Ostrowski.", "Invite recorded. Nothing was sent."). Remove the member through your workspace API where the code says so, raise the seat count with your billing provider, and send the invitation email from your server. Adding a seat shows its price, $12.00 a month, in whole cents; nothing is charged here.

It takes back the last change, one at a time, in the reverse order you made them: the invite, then an added seat, then a removal. It is always on screen and quiet until there is something to undo, so the buttons never move.

To the one button, which has just changed its label to Send the invite to Iselin, because the Remove button you pressed is gone. Add seats and Send the invite keep focus where it is, since the same button stays under it.

The cells stay two across (each is a fixed-height card), and the action foot, with the status line, the one button and Undo, is pinned to the bottom of the screen until you reach it.