Stay folio
A React block (a whole screen) in Beamline's Hotel & restaurant app.
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 them the balance large, the whole bill as one bar (paid, posted and still owed, not posted yet), then the summary your app computes (fees opened on request), now or as kept before a cancellation, and in another currency only when a rate is known. Products are posted on chosen days in one batch with its total said first (an invalid row or a refused batch posts nothing), or one product is charged on a named terminal: the charge waits for the terminal, a cancel waits for its confirmation, and a lost answer is checked against the same charge before anything is tried again.
Use it for
- A guest's or a member's running account: a hotel stay's folio, a club member's tab, a marina berth's charges, a clinic's patient ledger.
- Where charges post on dates, payments come from a terminal and a cancelled account's figures must stay as they were.
Not for
- A customer's invoices (invoices).
- Taking a gift or tickets at an event (gift-desk).
- A shop's orders and refunds (orders-admin).
Anatomy
- header: the product's mark, guest and reservation, Post products and Charge on a terminal
- ledger: folio (select), Show (all, charges, payments, adjustments), Show voided lines (switch), the ledger's currency, the lines (service date, description, status, amount; voided struck)
- summary (side): Now or Before cancellation, Show totals in (a currency), subtotal, tax, fees (opened into their parts), total, paid, the balance large, what pending adds, the snapshot's day, the rate and its date
- posting panel: a product added from a select, each row's quantity, price and days (chips), the batch's total or why it can't post, Post N lines
- terminal panel: product, quantity, terminal (offline ones disabled), Charge; Waiting for the terminal with Cancel the charge; a lost answer with Check with the terminal; the outcome
States
- pending charges
- posted payment
- filtered empty
- audit trail shown
- multiple folios
- display currency selected, conversion unavailable (no figure)
- summary loading, error
- before cancellation: the snapshot, fee breakdown open, snapshot unavailable
- posting: empty batch, products chosen, several days, 50-line limit, invalid row, posted, refused
- terminal: draft, terminal choice, terminal offline, processing, cancel requested, outcome unknown, reconciled, declined, charged
- phone: the summary under the lines
- right to left: the columns mirror
Keyboard
- Tab through the actions, folio, Show, the switch, the lines and the summary's controls
- Escape closes nothing on its own; the panels have Close
Motion
None of its own: the panels open in place; buttons show their pending states.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
guest (required) | string | — | |
reservation (required) | string | — | |
folios (required) | { id: string; name: string; }[] | — | |
lines (required) | FolioLine[] | — | |
currency (required) | string | — | The ledger's currency. |
figures (required) | "error" | FolioFigures | null | — | The summary now; null while loading, "error" when it failed. |
snapshot | { at: string; figures: FolioFigures; } | null | — | The summary kept when the stay was cancelled or no-showed; null when none was kept. |
displayCurrencies | { code: string; rate: number | null; asOf?: string | undefined; }[] | — | Currencies the summary can be shown in, each with its rate from the ledger currency, or null when no rate. |
products | FolioProduct[] | — | |
stayDays | string[] | — | The stay's days a product can be posted on (ISO dates). |
onPost | ((batch: PostingBatch) => Promise<FolioLine[]>) | — | |
readers | TerminalReader[] | — | |
onCharge | TerminalCharge | — | |
defaultPanel | "post" | "terminal" | null | — | A panel open at the start: posting products or a terminal charge. |
defaultSummaryView | "current" | "snapshot" | — | The summary at the start: now, or as kept before a cancellation. |
product | string | — | Your product's name, shown as its mark. |
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. |
stay | { arrival: string; departure: string; room?: string | undefined; guests?: number | unde… | — | The stay the folio is for, said under the guest's name: dates (YYYY-MM-DD), the room and how many guests. |
Built from
- Avatar
- Button
- Chip group
- Copy button
- Description list
- Empty state
- Label
- Number field
- Segmented control
- Select
- Skeleton
- Spinner
- Switch
- Text morph
- Tooltip
Dependencies
lucide-react
Import
import { StayFolio } from "@beamline/stay-folio";Get it
Stay folio 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…
- 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: 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…
- 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…