Organization Settings Account Block for React

Edit POWERS (an id, a label, a few words of hint and admin, whether admins can do it) and the constants at the top: EMPLOYER, DOMAIN, DESK for the contact and MANAGED_SINCE. The counts "4 can, 2 cannot" are worked out from POWERS, and the dates are fixed ISO days with AS_OF as today, never the clock. Keep the list true: it is a promise to the person, so list only what your admins really can and cannot do in your product.

Everything. Confirming flips this page to its personal state and says so in the foot; nothing is sent, no account changes and your employer is not told. Undo brings the employer back, which a real service usually can't do without an invitation. To make it real, call your endpoint in confirm, flip the page only when it answers and show a failure in the status line. Decide on the server what happens to shared data, and whether the person keeps the same login.

A small JSON file built from typed data in the page, with the account, who managed it, the day and a note on what stays with the company. It is a real file from DownloadTrigger, but it is a stand-in: replace exportText with a call that prepares the person's actual data, ideally one that shows progress, and keep the button above the confirmation so export always comes first.

Leave and keep a personal account opens an alert dialog. Focus starts on Stay, Escape closes it and focus returns to the button. The action stays disabled until the company's domain is typed exactly, case aside, and the field is marked invalid while what is typed doesn't match. After you confirm, the button stays where it was and becomes "Your account is personal", so focus never leaves it.

The two cells stack, the list first and the facts and the button under it, and the divider becomes a rule. The facts put each name above its value so a long address never overflows. The status line and Undo sit in the foot of the panel. The list rows keep one height, so flipping to the personal state never moves anything.

The list is a real description list: every capability is a term and Can or Cannot is its definition, written as a word with an icon. The facts are a description list too, addresses keep their reading order in a right-to-left page, the dialog is announced as an alert dialog and the status line is a polite live region present from the start.