Permit fees

A React block (a whole screen) in Beamline's Government & legal app.

An applicant's permit fees on a city's portal. What's owed across how many permits and how much of it is overdue; every unpaid invoice with its permit and address, due date or how many days overdue, and what it holds back until it's paid. Invoices chosen one by one or all, paid together: each with the fee lines it covers, by card (with its 2.5% fee) or bank transfer (no fee), the total said before paying. Afterwards the receipt's address and what the payment released, and the invoices moved to paid with the date. Three figures lead: owed across permits, overdue with how many are late, and how many invoices hold work back. The paid list says its total; the payment stays in view as the invoices scroll and says where the receipt goes. On a phone the figures are short rows.

Use it for

Paying several public fees or invoices in one go, seeing what each covers and what it unblocks.
Any portal where unpaid invoices hold up other steps.

Not for

A business's accounts receivable (invoices).
One order's checkout.

Anatomy

metrics: owed across permits; overdue
invoices: choose all; each with permit, address, number, due or overdue, what it holds back, amount; paid ones with their date
paying: the receipt and what was released; each chosen invoice's lines; pay by; card fee or none; total; Pay

States

overdue
holding something back
nothing chosen
paid
nothing owed

Keyboard

Tab through the invoices, the method and Pay

Props

Prop	Type	Default	Description
`defaultInvoices` (required)	`PermitInvoice[]`	—
`today` (required)	`number`	—	Today, for what's overdue.
`email` (required)	`string`	—	Where the receipt goes.
`defaultChosen`	`string[]`	—
`onPay`	`((o: { invoices: string[]; method: PayMethod; total: number; }) => void)`	—
`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

checkbox
segmented-control
button

Dependencies

lucide-react

Import

import { PermitFees } from "@beamline/permit-fees";

Get it

Permit fees 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

Permit feesComplete system · $49

An applicant's permit fees on a city's portal.

Paying this week's fees

Brightline Builders owes six fees on six permits. Two are late, and three hold something back until they're paid: the garage's plan review, the kitchen permit and the deck's framing inspection. Those three are chosen to pay together.

0 × 0full

About Permit fees

← Permit services Permit record →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.