Lease renewals

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

Leases coming up for renewal. The window leads: every tracked lease placed on the days ahead at its end date, coloured by whose step it is (yours, the tenant's, renewed, moving out) with those counts, the rent at stake and the closest lease waiting on you; a mark opens its stage and points at its row. Below, the leases by where each renewal stands (upcoming, offers out, signing, renewed and moving out, each with its count): a row keeps the unit and its occupants, the days left drawn on the term's last months, the rent now, where it stands in words and its one next step. An offer is composed in a sheet: one occupant who answers, an answer date, up to three options (term, rent with the change from now) to copy or remove, and the choice as the tenant will read it; once sent it is locked and can only be canceled. An answer never reads as a signed contract, a contract started before an answer says so, and only a lease your app holds as ready can be activated. Leases that run month to month or renew by themselves are listed apart, with why. A lease can carry its move-in condition photos; its offer shows one room large with the others to switch to, dated from move-in.

Use it for

Working through contracts that are running out (leases, memberships, service agreements, subscriptions sold by hand) where each needs an offer, an answer and signatures before it renews.
Anywhere an answer, a contract and an activation must stay separate steps your app confirms.

Not for

Setting up a new lease (lease-setup).
Self-serve plan changes (billing, plan-comparison).
A sales pipeline of new deals (crm).

Anatomy

header: the product's mark, the title, the date and the window
window: how many leases end inside the window and their rent a month; whose step it is (need you, with tenants, renewed, moving out) with counts; the closest lease waiting on you; an axis from today with the first of each month, every lease a mark at its end date in its step's colour, labels stacked on lanes so none overlap (dots only when narrow); a mark opens its stage and marks its row
tabs: Upcoming, Offers out, Signing, Renewed, Moving out, each with its count
row: unit and property, occupants; time left (a thin runway of the term's last 120 days filled to today, days left and the end date); rent now; where it stands in words (answer date, who chose what, signatures so far, renewed to); the next step (Make offer, Continue offer, View offer, Create contract, Send for signatures, Activate renewal) and, on an unanswered offer, a menu with Create contract before an answer
a failed step: an alert under its row with the reason
not in renewals: a fold listing month-to-month and self-renewing leases with why
offer sheet: the lease now; who answers and the answer date; options with their new end, term, rent and its change from now, Copy and Remove (up to three); what the respondent chooses between; Save draft and Send; sent: the options read-only, sent date, who answers by when, the chosen option marked with an answer-not-contract line, Cancel offer

States

upcoming, offer draft, offer open, response accepted, contract draft, signatures pending, ready to activate, renewed, moving out
window: marks per step colour; a picked mark and its row marked; labels read back from the dot at the window's far end; empty steps left out of the counts
filtered out: month to month and self-renewing leases apart, with why
offer: one option, alternatives, month to month (no end), missing respondent, date or rent said, sending, send failed (kept as a draft), sent and locked, accepted, canceled
a step refused: the reason under the row, the stage unchanged
loading: shaped skeletons; empty per tab
phone: a row stacks lease, time, stage and step
right to left: the runway fills from the right; arrows mirror
reduced motion: through the tokens

Keyboard

Arrow keys move between tabs; Tab through rows' steps and menus
In the sheet: Tab through fields; the rent field scrubs with arrows; Escape closes

Motion

Tabs and the sheet use their own parts' motion; the fold's chevron turns; a picked row's mark arrives at once and leaves over the motion token. Nothing runs at rest.

Props

Prop	Type	Default	Description
`leases`	`RenewalLease[]`	—
`defaultLeases`	`RenewalLease[]`	—
`onLeasesChange`	`((leases: RenewalLease[]) => void)`	—
`today`	`string`	—	Today in the portfolio's calendar ("2026-11-02"); default the device's.
`window`	`number`	—	How far ahead a lease's end counts as upcoming, in days. Default 120.
`onOffer`	`((leaseId: string, offer: RenewalOffer, send: boolean) => Promise<RenewalLease>)`	—	Save or send an offer. Resolve with the lease as your app now has it. Reject: kept as it was, said.
`onAction`	`((leaseId: string, action: RenewalAction) => Promise<RenewalLease>)`	—	A step on a renewal (create the contract, send it for signatures, activate, cancel the offer). Resolve with the lease as your app now has it; reject with an Error to keep it, the reason said.
`defaultTab`	`"leaving" \| "offers" \| "renewed" \| "signing" \| "upcoming"`	—
`defaultOffer`	`string`	—	Open this lease's offer composer at first.
`currency`	`string`	—
`loading`	`boolean`	—
`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

Dependencies

lucide-react

Import

import { LeaseRenewals, useWords } from "@beamline/lease-renewals";

Get it

Lease renewals 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

Lease renewalsComplete system · $49

Leases coming up for renewal.

Renewals queue

Alder Row Homes' leases ending in the next 120 days: each one sits on the window at its end date, coloured by whose step it is, and a mark opens its stage. Make offer on Unit 2B opens the composer: up to three options, each with its term and rent (drag the rent's number sideways or type it), who answers and by when; Send locks it. Unit 1A runs month to month and 2A renews by itself: both listed apart with why.

0 × 0full

About Lease renewals

← Applicant projects Queue display →

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.