Trip budget
A React block (a whole screen) in Beamline's Events & bookings app.
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 what's left or over, with the bar and its words green under budget, orange near it and red over; what the total leaves out is named instead of counted as zero (costs with no amount yet, costs in another currency with no rate). The expenses list each cost with its amount in its own currency and in the trip's; a foreign cost asks for its rate in its row and is counted once it has one; a cost not known yet is hatched. Spending by category in one hue, longest for the most. A new expense (what, category, amount or left empty when not known, currency, who paid) is added below; a refused add keeps the form.
Use it for
- A traveller or a group keeping a trip's costs against a budget, with costs in several currencies and some not known yet.
- Any small project budget with a few people paying (an event, a renovation) where unknown costs must not count as zero.
Not for
- A household's monthly budget by category (budget-month).
- Invoices to clients (invoices).
Anatomy
- summary: Budget (Set a budget or the amount with Change), Spent, Left or Over, the currency; the bar with the over mark and its words, or the no-budget note; what the total leaves out
- expenses: date, what, category, paid by, amount in its currency, amount in the trip's (or Needs a rate with its field, or —)
- add an expense: one quiet button by the ledger's title, opening the entry (what, category, amount, currency, paid by, Add, Cancel) under it; the refusal keeps it open with what was typed
- by category: each category's total, a bar in one hue, its share of spent
States
- budget unset
- under budget
- near budget
- over budget
- empty expenses
- unknown cost
- needs a rate
- saving
- save error
Keyboard
- Tab through Change budget, the rate fields, the add form (Enter adds) and its button
Props
| Prop | Type | Default | Description |
|---|---|---|---|
currency (required) | string | — | The trip's currency; every total is in it. |
budget (required) | number | null | — | The budget in the trip's currency; null when not set. |
onBudgetChange | ((budget: number) => void | Promise<unknown>) | — | Saves a new budget; a rejection is said and the field keeps what was typed. |
expenses (required) | TripExpense[] | — | |
onExpenseAdd | ((e: NewExpense) => void | Promise<unknown>) | — | Adds an expense; a rejection is said and the form keeps what was typed. |
onRateChange | ((id: string, rate: number) => void | Promise<unknown>) | — | Sets a foreign cost's rate to the trip currency. |
categories (required) | string[] | — | |
travellers (required) | string[] | — | |
currencies | string[] | — | Currencies offered for a new expense; the trip's first. |
now | number | — | "Today" (ms), the new expense's date. |
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<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- number-field
- input
- select
- button
Dependencies
lucide-react
Import
import { TripBudget } from "@beamline/trip-budget";Get it
Trip budget 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 Events & bookings
- 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: 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: 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: 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: 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: 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: 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: 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: 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…
- 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: 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…
- 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: 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…