Compliance Review Notification Block for React

Edit ACTIONS (an id, a title and a detail line), START (who owns each and whether it is done), OWNERS and DUE. The overdue days are the calendar days between DUE and the page's fixed now, the count, the bar and the stage are worked out from the list of done actions, and the words under the steps change with them. Replace the example actions with your own policies; the block claims nothing about what any of them means.

A review should not be completed with something open, but a disabled button hides why. So the button keeps its place, looks quiet and stays pressable: pressed early it says what is still open ("Still open: Review the supplier list, and 2 more."), opens nothing and moves focus to the first open row's Mark done. When all five are done it turns into the normal primary.

In the demo the review closes on this page: the label becomes "Review completed", the third step is marked and the status line says nothing was submitted. Reopen, or changing any row after that, opens it again and says so. In your app send the acknowledgements to your server in complete and record who completed it.

No. They are the catalog Steps with no triggers, a read-out of where the review is: acknowledging while any action is open, ready to submit once all five are done, closed after Complete review. Nobody can press a step, and a screen reader hears "Done:" before the finished ones.

It is a native table with real headers on a wide screen. Below the medium breakpoint the same markup becomes a stack of cards: the action and its detail, the owner select, and the status with its button; the header row is kept for screen readers. Each action keeps one height in both states, so nothing moves when you mark one done.

Each owner select and button names its action ("Owner of: Review the supplier list", "Mark done: Review the supplier list"). Status is a word and a shape (an open ring or a ticked one), never colour alone; the only status colour is the dot beside the overdue words, which are in the text colour. One polite status line says each result.