Effective Priority Table Block for React

Edit TICKETS: each has an id, a title, an assignee, a base priority from 1 to 4 and an ISO due date, in the order the tickets arrived. AS_OF is the day every count starts from, and WINDOW is how many days from due lifts a ticket. The rule itself is lifted, one small function, so a different rule (lift only Normal, lift two levels) is a change in one place. The bars, the word, the "raised from" note, the count and the sort order are all worked out from base, due and the switch.

The Priority head sorts by the effective priority, the one after the switch is applied, so a Normal ticket raised to High sorts with the High ones even though its word starts with N. The first press gives highest first, the second lowest first and the third puts the tickets back in the order they arrived. Tickets with the same effective priority are ordered by the earlier due date, then by their number, so the order never depends on the browser. Turning the switch re-ranks the list in the sort that is active.

Everything is in the page and nothing is stored: the switch, the sort and the raised tickets reset on reload. "Due in 2 days" is counted from the typed AS_OF date, never from the clock, so the demo reads the same on any day. In your app pass today's date to daysLeft, and send the switch to your server if the rule should apply to everyone, not just this view.

No colour carries the priority or the raise: a word, a count of bars, an up arrow and the words "raised from Normal" say it. The switch is named by what it does, the Priority head is a real button with aria-sort on its column (none while the tickets are in their arrival order), and a polite status line, present from the start, reads the raised count and the order after each change. The table is native, with a caption, column heads and the ticket as a row header. Nothing moves under the pointer: the order changes on a press.

No. Every priority cell keeps a second line, empty until a ticket is raised, so a row is the same height with the switch on or off, and the rows are rebuilt in their new order rather than sliding past each other. The status line reserves two lines on a phone for its longest sentence.

The table keeps Ticket and Priority. The assignee and the due date fold into the line under the title ("QH-318, Nuala Brightman, due Oct 11"), and the priority cell wraps its "raised from" note instead of truncating it. The switch sits under the header's sentence with its label beside it.