Compliance Controls Settings Block for React

Edit START: each policy has a name, its last-reviewed day (ISO), the cadence in months, an owner from OWNERS, the frameworks it serves and how many members have acknowledged it. The next review is the last review plus the cadence, with the day pulled back to the month's last day when the month is shorter, and everything is measured from the typed AS_OF date in UTC, so the words never follow the clock. The rail groups are derived: overdue before that date, due soon within 30 days of it, current after.

It sets the chosen policy's last review to the typed date. Its next review moves a cadence on, the policy moves to the Current group, the rail sorts itself again and the status line at the foot says when the next review falls and which group it is in, adding that nothing is certified. Focus stays on the button, so you can choose the next policy and mark that too.

The next review is worked out again from the last one: switching an annual policy to six months can make it overdue at once, and the other way can make an overdue policy current. The rail and the badge follow, and the status line says where the policy stands now.

Everything, and nothing is sent: owners, cadence, reviews and reminders live in this page's state and return to their starting values on reload. Remind queues nothing and says so. To make it real, store the policies and the acknowledgements with your account, send the reminder through your mail service and record who marked a policy reviewed and when; certifications come from an auditor, never from this button.

Each policy in the rail is a real button marked as current; choosing one moves focus to its name when the rail is hidden. On a phone the window keeps its height and shows one pane at a time: the rail first, then the policy under a Back button that returns to the row you left, with Mark reviewed shown only while a policy is open. The status line is a polite live region present from the start.