Urgent Page Acknowledgement Notification Block for React

Edit PAGES. Each has an id, a level of critical or high, a title, a service, an ISO since, an escalates number (minutes after the page's "now") and, when a teammate already took it, takenBy and takenAt. AS_OF is the page's fixed "now" in UTC, so every time reads the same on the server and in every visitor's time zone. In your app replace it with the alert's own timestamps and your escalation policy.

It marks the alert in this tab: a receipt with a time, the escalation line gone, an Undo, and a status message. The stamp is a demo clock (a minute after "now" for the first acknowledgement, two for the second), not a reading of your clock, and nothing is paged, sent or saved: a reload brings every alert back. In your app call your paging service from acknowledge, show the time it returns, and make Undo your service's own un-acknowledge.

No. The escalation time is fixed text worked out once from AS_OF and each alert's escalates, because a persistent alert should not hide behind a timer that can run out while you read it. If you want a live countdown, compute it on your server and pass the result in.

The panel has one primary action: the next alert that needs an answer. It sits on the first alert still waiting, so after you acknowledge the first, the button on the second becomes the Shine Button and the first shows its receipt. Everything else is outline or ghost.

By a word, a glyph and a weight: Critical has a solid badge, a circle-alert glyph, a semibold title and a bar at the start of the row; High has an outline badge, a triangle glyph and a medium title. Only the critical glyph takes the destructive status colour, and the Status dot beside the count is a second, redundant mark next to the words.

Each Acknowledge button names its alert, so several rows can share the same visible word. After a press focus moves to that row's Undo, and after Undo back to Acknowledge. A single polite status message says what changed ("Acknowledged ... 1 needs acknowledgement"). Times are real time elements that keep their own direction inside right-to-left text.