No Tickets Empty State Block for React

The tickets live in the page's state: a reload empties the queue, and Start over empties it without one. Nothing is sent, and the status line under the page says so ("Created DW-101 in New. Not sent."). To wire it for real, post the subject and priority to your help desk where the code says so, add the ticket from the response, and send each move to your API before the station changes.

Each station shows how many tickets are in its stage. Empty, it is a dashed box; with one ticket it turns solid with a ticket inside, and with two or more a second ticket peeks out behind. The row of labels under the drawing says the same in words ("1 ticket"), because the drawing is hidden from assistive technology. The Solved station fills as tickets are solved, and the same tickets are listed on the Solved page.

It opens a modal dialog with focus in the subject field. An empty subject says "Type a subject first." and keeps the dialog open with focus on the field. A good one adds the ticket to New with the next number (DW-101, DW-102) and the priority you chose, closes the dialog, and moves focus to the new ticket's Move button. The demo holds four tickets; past that the dialog says so, and Start over clears them.

Each open ticket has one button named for the stage it goes to (Move to Assigned, then Waiting, then Solved), and a ticket in Solved shows the word instead of a button. After a move the focus stays on that ticket's button, or goes to the next open ticket when the moved one has left the queue. Moves are one at a time, in order, and cannot be undone except by Start over.

Tab runs the rail, the top bar, the list and its buttons. The rail links are named with their counts, such as Queue, 2 tickets, and the current page is marked. A polite status line at the window's foot says each change, and Escape closes the dialog and gives focus back to Create ticket.

The window keeps its fixed height. The rail becomes a sheet opened from the top bar, the lane scales to the screen's width with its four labels under it, and each Move to button becomes an arrow with the same accessible name. The list scrolls inside the window and nothing scrolls sideways, even at 320 px wide.