Counter service
A React block (a whole screen) in Beamline's Hotel & restaurant app.
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, the till's own totals), the menu on the right by category with search and sold-out items said; the kitchen sees it as a preview until Send, Send fires it as tickets, and payment is a separate step, so sent is never taken as paid. A ticket at a station: its items selected one by one or all of the station's own, marked done at that station or done and checked at the expo, other stations' items said as theirs, a partly finished ticket staying until every item is checked; a ticket that changed since it was opened is said before anything is marked, and one item's recipe opens to read without touching the ticket.
Use it for
- A quick-service counter: composing an order, sending it to the kitchen and taking payment apart.
- One kitchen ticket at a station: marking items done per station and at the expo, reading a recipe.
Not for
- A whole kitchen display of many tickets (signature track).
- Online store orders (order-composer, orders-admin).
Anatomy
- header: the mark, Counter · Kitchen ticket
- counter: the order (number, name, dining, lines with options, quantity and price, the till's subtotal, tax and total, the preview note, Send, then Take payment) beside the menu (categories, search, item tiles with price, sold out, recipe mark)
- ticket: order and ticket number, fired time and dining, paid or not; Your station (each station, Expo); Select all yours, the count, View recipe; items with their options and a mark per stage (station, expo); how many are finished; Not done and Done (Done and checked at the expo)
- recipe: title, version, ingredients, steps, Close
States
- empty order; draft with options; working out the total; preview; sending; send failed (still a preview); sent and not paid; paying; payment declined; paid; menu unavailable; sold out; no match
- ticket: none selected; some; all of a station's; another station's item; partly finished; every item finished; changed since opened (marking waits); action failed
- recipe: one item with a recipe; none or several selected (the action waits); reading
Keyboard
- menu tiles and ticket rows are buttons and checkboxes; the views and stations are radio groups; the recipe is a dialog that returns focus to View recipe
Motion
A pressed tile dips; nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
menu | MenuItem[] | null | — | null: the menu couldn't be loaded. |
quote | (order) => Quote | null | — | The till's price for an order; null while it works it out. The block never adds up money itself. |
onSend | (order) => Promise<{ tickets, at } | { error }> | — | Send the order to the kitchen; resolve with its tickets, or an error (the order is kept, still a preview). |
onPay | (order, totalMinor) => Promise<{ at } | { error }> | — | Payment is separate from sending; resolve with when it was taken, or an error. |
ticket | KitchenTicket | — | A ticket at the kitchen side. |
onFulfil | (ticketId, itemIds, station, done, revision) => Promise<KitchenTicket | { error }> | — | Mark items done (or not) at a station; resolve with the ticket as it now is, or an error. |
categories (required) | MenuCategory[] | — | |
stations (required) | Record<string, string> | — | Station names by id, in the kitchen's order ("grill": "Grill"); the expediter is always last. |
defaultOrder (required) | CounterOrder | — | |
latestTicket | KitchenTicket | — | The ticket as the kitchen has it now, when it changed since it was opened. |
defaultView | "counter" | "kitchen" | — | |
defaultStation | string | — | |
defaultSelected | string[] | — | |
defaultRecipeOpen | boolean | — | |
defaultSent | { tickets: string[]; at: string; } | null | — | Open on an order already sent (and maybe paid). |
defaultPaidAt | string | null | — | |
timeZone | string | — | |
product | string | — | |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- Avatar
- Button
- Checkbox
- Dialog
- Glow
- Input
- Kbd
- Label
- Search field
- Segmented control
- Select
- Spinner
- Text morph
- Tooltip
Dependencies
lucide-react
Import
import { CounterService } from "@beamline/counter-service";Get it
Counter service is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Hotel & restaurant
- 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: 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…
- 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: 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: 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…
- 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…
- 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: 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: 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…