Policy Compliance Status Account Block for React

Edit RULES: each has a title, whether it is base met, the ok sentence, the label of its Fix button and its width from md (the wide cell is the one that usually needs action). The deadline is DEADLINE, the password's last change is CHANGED with MAX_AGE, and "now" is AS_OF; the days to go and the password's age are worked out from those, never from the clock, so the page never goes stale.

In this demo it marks the rule met, moves the figure and the segmented bar, changes the sentence to "Every rule is met. Access stays as it is." and says so in the status line. Nothing is changed in the account. To make it real, send the user to the place that fixes the rule (the password form, the token list) and set the state from what your server reports when they come back.

Every cell says Met or Action needed in words with a glyph, the figure and the bar both say how many of five are met, and the deadline sentence is plain text. Status colour is not used on any text or surface.

Every cell holds a reserved line for its reason and a reserved row for its button, so a rule that becomes met changes its words and loses its button without changing size. The wide cell stays wide and a quiet cell appears beside the last row when all five are met, so nothing reflows.

Everything is local and a reload starts again. Undo walks back the last fix and says what it undid, which also lets you reach the Action needed state again. Focus moves to the cell you fixed, so a keyboard or screen reader user lands on its new state.

On a phone the cells are one column with the rule that needs action first, so its Fix button is on the first screen, and the foot with Undo stays pinned. The rules are a real list, each Fix button names its rule ("Change password: Password under 90 days"), and the status line is a polite live region present from the start. Dates keep their reading order in a right-to-left page.