# Issued ticket A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Events & bookings](https://beamline.io/components/apps/events-bookings) app. Live demo: https://beamline.io/components/issued-ticket One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its code drawn as a scannable QR with Copy (a void ticket's code is blurred and marked Void). Under it, three separate facts in quiet columns, each with its own history. Valid? Valid or void (why, who and when; voiding asks for a reason and changes no order or payment), its payment (paid with its price, refunded, or not known for an imported ticket, the reason on a hint), its order or the reference it was imported with, the order's other tickets one press away (a party arriving together), and when it was issued. Got in? Not checked in, or in (and out) at a door at a time with every scan listed; the one primary action in the head checks in or out from the box office, refused with its reason; a void ticket can't be checked in. Told? The latest message's status in words, where messages go (the attendee, or the buyer when there's no attendee email), each message with its status (sending, delivered, opened with a hint that opened isn't attendance, bounced) and Send the ticket again. Beside it, the night's tickets: found by name, code or seat, narrowed to All, In, Not in or Issues with counts, each row with its last scan, Void, Bounced or Payment?. On a phone the ticket opens first and the list is one step back. ## Use it for - An event's box office or door staff looking at one ticket: is it valid, did its holder get in, were they told. - Any issued pass where validity, use and messages must stay separate (memberships, course seats, parking permits). ## Not for - Setting up ticket types and seats ([ticket-setup](https://beamline.io/components/ticket-setup)). - Shop orders in a support ticket ([ticket-orders](https://beamline.io/components/ticket-orders)). ## Anatomy - list: search (name, code or seat); All · In · Not in · Issues with counts; each ticket (holder or buyer, type and seat, its last scan's time, Void, Bounced, Payment? or Not in) - head: holder or No name given, their email or who bought it; Check in or Check out (the one primary action; none on a void ticket) - ticket: venue, event, date and time; Section, Seat, Admits; the code as a QR, the code in mono and Copy; a void ticket's code blurred under Void; its start edge green when valid, red when void - Valid?: valid or void with why, who and when; payment (and price; Not known with its reason on a hint); order or imported reference; Same order (the order's other tickets, each opens); Issued; Void ticket - Got in?: the state in words; scans newest first (In or Out at a door, who, time) - Told?: the latest message's status in words; who messages go to; each message with its status (Opened's hint: not attendance) and date; Send the ticket again - void dialog: the code, what voiding does and doesn't, the reason, Void it - phone: the ticket opens first with a Tickets back button to the list ## States - issued not checked in - checked in - checked out - void - imported reference - buyer email fallback - communication pending - bounced - unknown payment - action refused ## Keyboard - Tab through the search, the views, the list (Enter opens), Check in or out, Copy code, the hints (focus shows them), the order's other tickets, Void ticket and Send again; the void dialog traps focus and Escape cancels ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `tickets` (required) | `IssuedTicketRecord[]` | — | | | `defaultSelected` | `string` | — | | | `onScan` | `((ticketId: string, kind: "in" \| "out") => void \| Promise)` | — | Records a manual check-in or check-out; a rejection is said and nothing changes. | | `onVoid` | `((ticketId: string, reason: string) => void \| Promise)` | — | | | `onResend` | `((ticketId: string) => void \| Promise)` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [search-field](https://beamline.io/components/search-field) - [segmented-control](https://beamline.io/components/segmented-control) - [qr-code](https://beamline.io/components/qr-code) - [copy-button](https://beamline.io/components/copy-button) - badge - tooltip - [alert-dialog](https://beamline.io/components/alert-dialog) - textarea - button ## Dependencies `lucide-react` ## Import ```tsx import { IssuedTicket } from "@beamline/issued-ticket"; ``` ## Get it Issued ticket is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Events & bookings - [Team calendar](https://beamline.io/components/team-calendar): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of… - [Day agenda](https://beamline.io/components/day-agenda): One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are… - [Crew booking](https://beamline.io/components/crew-booking): Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available… - [Resource booking](https://beamline.io/components/resource-booking): Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken… - [Resource rules](https://beamline.io/components/resource-rules): Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job… - [Desk booking](https://beamline.io/components/desk-booking): Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book… - [Linked appointments](https://beamline.io/components/linked-appointments): A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn… - [Waitlist desk](https://beamline.io/components/waitlist-desk): A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the… - [Visitor desk](https://beamline.io/components/visitor-desk): An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said… - [Itinerary](https://beamline.io/components/itinerary): A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own… - [Trip budget](https://beamline.io/components/trip-budget): A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and… - [Proposal payments](https://beamline.io/components/proposal-payments): A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the… - [Project periods](https://beamline.io/components/project-periods): A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).