# Visitor desk 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/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 and can't be invited, the visitor type and arrival location are chosen (a meeting without a location must get one), the registration email stays off unless switched on, and Review lists exactly what would be created before anything is; creating reports each guest's result and retries only the failed ones. The arrival kiosk lets a visitor scan the invitation code or type their name: no camera is said with the name fallback, an expired or unknown invitation never claims entry, missing fields are asked for, then the host's approval is awaited or the visitor is checked in. The registration window opens and closes relative to the visit day in the location's time; the preview reads it back for a visit, says whether it's open now and warns when the clocks change inside it; a window that closes before it opens can't be saved and the saved one stays in force. ## Use it for - Preregistering meeting guests as visitors from a calendar event. - A visitor check-in kiosk and the rules for when visitors can register. ## Not for - Booking desks ([desk-booking](https://beamline.io/components/desk-booking)). - Guest lists for events (event-guests). ## Anatomy - bar: Visitors at the location, today and the time zone; Today or Registration window - invite from the calendar: today's meetings with host and guest count; the chosen meeting's guests to invite (pick, initials, name and email; Can't invite without an email said in place), its colleagues as one line (not visitors); how they're invited as a sentence (visitor type, location, email or not) with Change opening the choices (open by itself when the meeting has no location); Review with what will be created and Nothing has been created or sent yet; each guest's result, Try again for the failed - kiosk, a tablet in its own proportions beside the desk: the location and day; Scan my invitation or Type my name; the camera view with a code field, or no camera; hello with the host and missing fields; waiting for approval, checked in, or not recognised with Type my name or ask at the desk; Start over - registration window: the questionnaire switch, opens and closes (day and time), the time zone; the preview for a visit with open and close times, open now / not yet / closed, a clock-change warning; Save window ## States - guest list loading, colleagues excluded, guest selected, unknown identity (no email), location missing, reviewed draft, partial creation failure - choose method, camera pending, camera unavailable, expired or unknown invitation, missing fields, approval pending, checked in - window not open yet, open, closed, reversed (not saved), questionnaire off, clock change inside, save failed - narrow room: preregistration above the kiosk ## Keyboard - Every choice is a button or field; Tab reaches them in reading order ## Motion Choices ease their colour when pressed. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `location` (required) | `Location` | — | | | `locations` (required) | `Location[]` | — | | | `timezoneLabel` (required) | `string` | — | "Lisbon time". | | `today` (required) | `string` | — | Today in the location, ISO yyyy-mm-dd, and the local time now (yyyy-mm-ddThh:mm). | | `nowLocal` (required) | `string` | — | | | `events` | `CalendarEvent[]` | — | | | `eventsLoading` | `boolean` | — | The calendar is still loading guests. | | `visitorTypes` (required) | `VisitorType[]` | — | | | `registrationWindow` | `RegistrationWindow` | — | | | `defaultRegistrationWindow` | `RegistrationWindow` | — | | | `onRegistrationWindowChange` | `((w: RegistrationWindow) => void)` | — | | | `clockChanges` | `string[]` | — | Days the location's clocks change (ISO), for the window's warning. | | `sampleVisitDay` | `string` | — | A visit day to read the window back against. | | `cameraAvailable` | `boolean` | — | | | `defaultView` | `"today" \| "window"` | — | | | `defaultEventId` | `string` | — | | | `onCreateInvites` | `((draft: Draft) => Promise)` | — | Creates invitations for the reviewed draft; resolve with each guest's result. | | `onLookup` | `((q: { code?: string \| undefined; name?: string \| undefined; }) => Promise)` | — | | | `onCheckIn` | `((inviteId: string, fields: Record) => Promise<{ approval: boolean; }>)` | — | | | `onSaveWindow` | `((w: RegistrationWindow) => Promise)` | — | | | `locale` | `string` | — | | | `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 - [segmented-control](https://beamline.io/components/segmented-control) - checkbox - select - switch - button - input - [time-picker](https://beamline.io/components/time-picker) - skeleton ## Dependencies `lucide-react` ## Import ```tsx import { VisitorDesk } from "@beamline/visitor-desk"; ``` ## Get it Visitor desk 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… - [Issued ticket](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… - [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).