shadcn.io is not affiliated with official shadcn/ui
Support Access Account Block for Ark UI
Rows of four support tickets with a switch each for what support can see (profile, sign-in history for 7 days and devices), an end date written from the as-of day, what turning one off may slow, a count of tickets that can see sign-in history, and Close and Reopen.
Installation
Overview
Let people decide what support can see on each ticket, with this support access panel for React with Ark UI. A hairline frame with a plus mark on each corner holds a list of four tickets. Each row has the ticket number in mono, its subject, its state (Open, Waiting for you or Closed) and the day of the last update. Under it three Switches say what support may see on that ticket: your profile, your sign-in history for the last 7 days and your devices, with the day the access ends written from the as-of day, 21 Oct, or when the ticket closes. Turning one off says what help it may slow. Close ticket switches all three off in the same press, and Reopen brings the ticket back with nothing shared. A line at the foot counts from the rows, "2 tickets can see sign-in history, 1 can see devices." It's built from Switch, Badge, Button and Guides, with a CSS entrance only, and has no primary button because every switch applies at once. For the account or privacy page of a product with a help desk.
FAQ
How do I change the tickets and what support can see?
Edit the constants at the top. TICKETS holds each ticket's number, subject, state, day of last update and its three grants; KINDS lists what support can be shown, each with the sentence that says what turning it off may slow; AS_OF is today and DAYS how long access lasts. The end date, the counts and the foot line are all worked out from those.
What does closing a ticket do?
It switches all three grants off in the same press, disables the switches and changes the line above them to "Closed: support can see nothing on this ticket." The same button then reads Reopen ticket and keeps its place, so focus stays on it. Reopening starts with nothing shared: each switch has to be turned on again on purpose, and the status line says so.
Why does turning a switch off explain a consequence?
Because the choice is real: support can still help without your sign-in history, but a sign-in problem takes longer. The foot says which help it may slow, in plain words, at the moment you turn it off, and the same line is read out to screen readers. Nothing is blocked and nothing asks twice.
What stays local, and how do I make it real?
All of it. Switching, closing and reopening change this page's state and say so; no ticket is touched and no one at a help desk is told. To make it real, send each change from the handlers to your API, check the grants server-side whenever an agent opens the account, and expire the access on the date the block shows.
Is it accessible, and how does it look on a phone?
Every switch is named with what it shares and the ticket, every row's button says which ticket it closes, the three switches sit in a fieldset whose legend gives the end date, and the foot is a polite live region. State is written in words, not colour. On a phone the three switches stack under the subject, one to a line, and the rows keep their order.