# Shift briefing A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Hotel & restaurant](https://beamline.io/components/apps/hotel-restaurant) app. Live demo: https://beamline.io/components/shift-briefing A team's pre-shift briefing for a restaurant service (or any shift with bookings): the venue, the service and when its reservation snapshot was read, an old snapshot said in the warning tint ("bookings since aren't in it") until refreshed; covers by quarter hour as bars against the kitchen's pace line, the busiest quarter and how many go over said, with a table twin; guest needs as filters with counts in words (allergies, access, occasions, regulars, first visits), allergies in the danger tint and access in the warning tint first on each booking; only what guests declared (or their visit history) shown as fact, a team note said as a note; and the team's notes for tonight, added on the spot. ## Use it for - Briefing a team before a service: how busy, when, and what each guest needs. - Any shift with bookings where allergies and access must be seen first. ## Not for - Messaging guests about their bookings ([guest-messages](https://beamline.io/components/guest-messages)). - A worker's own shift on their phone ([my-shift](https://beamline.io/components/my-shift)). - Planning who works when ([shift-planner](https://beamline.io/components/shift-planner)). ## Anatomy - header: the product's mark, the service, the venue with bookings and covers, the snapshot's time (stale said) with Refresh - pacing: the busiest quarter and how many go over the kitchen's pace, Chart or Table, the bars with the pace line, or the table of time, bookings and covers - guests: the needs as filters with counts, how many shown, each booking's time, guest, party, table, needs (allergies and access first) and team notes - notes: the team's notes with who wrote them, a new note and Add ## States - snapshot: fresh, stale, refreshing, refresh failed (the earlier one kept); none read - a quarter over the kitchen's pace - filters on: some of the bookings shown - a need declared, a team note (never as the guest's word) - note adding, added, refused (kept in the box) - phone: pacing, guests and notes in one column - right to left: mirrors ## Keyboard - Tab through Refresh, Chart or Table, the need filters, the note and Add ## Motion None of its own. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `venue` (required) | `string` | — | | | `service` (required) | `string` | — | The service in words ("Dinner, Fri Nov 6"). | | `snapshot` (required) | `BriefSnapshot \| null` | — | | | `kitchenPace` | `number` | — | Covers the kitchen paces well per quarter hour; drawn as a line. | | `notes` | `BriefNote[]` | — | | | `onRefresh` | `(() => Promise)` | — | Read the reservations again. | | `onAddNote` | `((text: string) => Promise)` | — | | | `now` | `string` | — | | | `staleAfter` | `number` | — | Older than this many minutes, the snapshot is said to be stale. Default 30. | | `defaultFilters` | `NeedKind[]` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Bar chart](https://beamline.io/components/bar-chart.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Chip group](https://beamline.io/components/chip-group.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Glow](https://beamline.io/components/glow.md) - [Input](https://beamline.io/components/input.md) - [Kbd](https://beamline.io/components/kbd.md) - [Label](https://beamline.io/components/label.md) - [Pagination](https://beamline.io/components/pagination.md) - [Search field](https://beamline.io/components/search-field.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Slot text](https://beamline.io/components/slot-text.md) - [Spinner](https://beamline.io/components/spinner.md) - [Table](https://beamline.io/components/table.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ShiftBriefing } from "@beamline/shift-briefing"; ``` ## Get it Shift briefing 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 Hotel & restaurant - [Reservation desk](https://beamline.io/components/reservation-desk): A front desk's bookings without a room for a night, beside the rooms that could take them: bookings grouped by room type with their stay, party and… - [Table service](https://beamline.io/components/table-service): A restaurant table's service in three places sharing one order. The floor: tables placed on a plan by drag, arrow keys or typed numbers (Shift and an… - [Counter service](https://beamline.io/components/counter-service): A counter and its kitchen. The counter: the order on the left (its name, eat here / takeaway / drive-through, each line with its options and quantity… - [Room readiness](https://beamline.io/components/room-readiness): Housekeeping's rooms for the day: condition, occupancy, the front desk's plan (arriving with its time or not known, departing, staying on), who is… - [Stay folio](https://beamline.io/components/stay-folio): A stay's folio: the chosen folio's lines filtered by kind, posted and pending said, voided lines on request, every row in the ledger's currency; beside… - [Guest messages](https://beamline.io/components/guest-messages): Conversations with guests beside the booking each is about, for a host stand, salon front desk or hotel. Guests waiting for an answer come first with how… - [Map explorer](https://beamline.io/components/map-explorer): A map with one operational layer over real ground (an optional map base: relief, lakes, streams, woods, roads), explored without losing your place; its… - [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More… - [Turntable review](https://beamline.io/components/turntable-review): A 3D asset reviewed on a turntable. The object large at the angle in view with front, side and back said, standing on a plate whose rim shows the twelve… 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).