LeaseSchedule
ROU asset and liability on diverging curves.
Implemented
- Status
- Implemented
- Family
- 9 of 13
- Registry
- @lopifi/lease-schedule
npx shadcn@latest add @lopifi/theme @lopifi/lease-scheduleThe component, rendering
Real data, the shipped component. Switch the theme to check the claims the spec makes below.
Preview
The four-layer spec
ROU asset and lease liability as parallel columns — they amortize on different curves and diverge. Discount rate displayed with its source. Operating vs. finance classification labeled, with the correct P&L presentation for each. Maturity analysis (undiscounted by year, reconciled to the discounted liability) as a linked view.
Lifted verbatim from Accounting core (GL). The doc and this page are the same paragraphs, so they cannot disagree.
What lands in your repository
One component is never one file. Everything below is copied into your project, where you own it.
- Files
components/ledger/lease-schedule.tsx
- npm packages
- @base-ui-components/reactclass-variance-authorityclsxtailwind-merge
- Registry entry
- /r/lease-schedule.json
The whole component
No compiled bundle, no black box. This is the file the registry copies, and the file you will edit.
import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";
export type LeasePeriodRow = {
period: string;
payment: MoneyValue;
interest: MoneyValue;
principal: MoneyValue;
/** They amortize on different curves and diverge. Parallel columns. */
liabilityBalance: MoneyValue;
rouAmortization: MoneyValue;
rouBalance: MoneyValue;
};
export interface LeaseScheduleProps extends React.ComponentPropsWithoutRef<"div"> {
classification: "operating" | "finance";
discountedLiability?: MoneyValue;
discountRate: number;
discountRateSource: string;
imputedInterest?: MoneyValue;
leaseName: string;
/** Undiscounted by year, reconciled to the discounted liability. */
maturity?: { year: string; undiscounted: MoneyValue }[];
/** Caps the scroller so the header and the period column can freeze. */
maxHeight?: number;
rows: LeasePeriodRow[];
}
/**
* The ROU asset and the lease liability are parallel columns, because they
* amortize on different curves and diverge — showing one implies the other,
* and the implication is wrong.
*/
export const LeaseSchedule = React.forwardRef<HTMLDivElement, LeaseScheduleProps>(
(
{
className,
leaseName,
classification,
discountRate,
discountRateSource,
rows,
maturity = [],
discountedLiability,
imputedInterest,
maxHeight = 520,
...props
},
ref,
) => {
const scroller = useScrollEdges<HTMLDivElement>();
const basis = (
<>
<span className="capitalize">{classification}</span> lease · discount rate{" "}
<span className="numeric">{discountRate.toFixed(3)}%</span> ({discountRateSource})
{classification === "operating"
? " · single straight-line lease cost in operating expenses"
: " · amortization and interest presented separately"}
</>
);
return (
<div className={cn("space-y-4", className)} ref={ref} {...props}>
<div className="rounded-xl border border-border bg-surface">
<div className="px-6 pb-4 pt-6">
<p className="text-title-sm font-medium">{leaseName}</p>
<p className="text-caption text-text-secondary">{basis}</p>
</div>
<div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
<table className="w-full min-w-[900px]">
<caption className="sr-only">{leaseName} lease schedule</caption>
<thead>
<tr className="border-b border-border-subtle">
<th
className="py-3 pl-6 pr-3 text-left text-label font-medium text-text-secondary"
rowSpan={2}
scope="col"
>
Period
</th>
<th
className="px-3 py-3 text-right text-label font-medium text-text-secondary"
rowSpan={2}
scope="col"
>
Payment
</th>
<th
className="border-l border-border-subtle px-3 py-2 text-center text-label font-medium text-text-secondary"
colSpan={3}
scope="col"
>
Lease liability
</th>
<th
className="border-l border-border-subtle py-2 pl-3 pr-6 text-center text-label font-medium text-text-secondary"
colSpan={2}
scope="col"
>
ROU asset
</th>
</tr>
<tr className="border-b border-border-subtle">
{["Interest", "Principal", "Balance", "Amortization", "Balance"].map((h, i) => (
<th
className={cn(
"px-3 py-2 text-right text-caption text-text-secondary",
(i === 0 || i === 3) && "border-l border-border-subtle",
i === 4 && "pr-6",
)}
/* "Balance" appears under both groups — the index disambiguates. */
key={`${h}-${i}`}
scope="col"
>
{h}
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((r) => (
<tr className="border-b border-border-subtle" key={r.period}>
<th className="numeric py-2 pl-6 pr-3 text-left text-body font-normal" scope="row">
{r.period}
</th>
<td className="px-3 py-2 text-right">
<Money accounting value={r.payment} />
</td>
<td className="border-l border-border-subtle px-3 py-2 text-right">
<Money accounting value={r.interest} />
</td>
<td className="px-3 py-2 text-right">
<Money accounting value={r.principal} />
</td>
<td className="px-3 py-2 text-right">
<Money accounting value={r.liabilityBalance} />
</td>
<td className="border-l border-border-subtle px-3 py-2 text-right">
<Money accounting value={r.rouAmortization} />
</td>
<td className="py-2 pl-3 pr-6 text-right">
<Money accounting value={r.rouBalance} />
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{maturity.length > 0 && discountedLiability && imputedInterest ? (
<div className="rounded-xl border border-border bg-surface p-6">
<h3 className="text-title-sm font-medium">Maturity analysis</h3>
<table className="mt-3 w-full max-w-[420px]">
<tbody>
{maturity.map((m) => (
<tr key={m.year}>
<th className="py-1 text-left text-body font-normal text-text-secondary" scope="row">
{m.year}
</th>
<td className="py-1 text-right">
<Money accounting value={m.undiscounted} />
</td>
</tr>
))}
<tr>
<td />
<td>
<Rule variant="subtotal" />
</td>
</tr>
<tr>
<th className="py-1 text-left text-body font-normal text-text-secondary" scope="row">
Less: imputed interest
</th>
<td className="py-1 text-right">
<Money accounting value={imputedInterest} />
</td>
</tr>
<tr>
<th className="py-1 text-left text-label font-medium" scope="row">
Present value of lease liability
</th>
<td className="py-1 text-right">
<Money accounting size="md" value={discountedLiability} />
</td>
</tr>
<tr>
<td />
<td>
<Rule variant="total" />
</td>
</tr>
</tbody>
</table>
</div>
) : null}
</div>
);
},
);
LeaseSchedule.displayName = "LeaseSchedule";
The accounting it encodes
Concepts this component renders. Each one is defined once, in the lexicon, and used identically in the code and the copy.
- AssetA present right of the entity to an economic benefit (FASB CON 8 ¶E16)
- Lease liabilityThe present value of the lease payments not yet paid, discounted at the rate implicit in the lease or, if not determinable, the incremental borrowing rate
- LiabilityA present obligation of the entity to transfer an economic benefit (FASB CON 8 ¶E37)
- P&LPerformance over a period
- ReconciledMatched to a bank statement line
- Right-of-use assetThe lessee's right to use an underlying asset for the lease term — the lease liability plus prepaid lease payments and initial direct costs, less incentives received
Also in Accounting core (GL)
- JournalEntryDebit and credit as two columns. No signed-column variant.
- JournalEntryFormLine grid with live balance check and dimension capture.
- JournalEntryTableAll entries, with the gapless-numbering check.
- AccountPickerShows the normal balance. Blocks non-postable accounts.
- ChartOfAccountsHierarchy, statement mapping, unsupported-account flags.
- AccountRegisterGL detail with a running balance.
- DimensionPickerEntity always required; renders what the account demands.
- AdjustingEntryFormTemplated by type. Auto-reverse defaults on for accruals.
- RecurringEntryTemplateTemplate editable; instances read-only.
- EntryReversalDialogHold-to-confirm. Never a delete.
- ScheduleTableOne shell, seven presets. Prepaids through debt.
- RollForwardOpening → movements → closing → tie. The universal shape.
- AccountTieOutEvery BS account, proven against its evidence.
- SchedulePreviewWhat the schedules will post, before they post.
- RevenueWaterfallDeferred balance recognizing by future period.
- DepreciationScheduleBook and tax in parallel. In-service date, not purchase date.
- AllowanceRollForwardWith the methodology shown, not just the number.
See also
A component is specified in one place, defined in another, and running in a third. All three, from here.
- Accounting core (GL) — the family specThe four-layer specification this component was built against, before it was written.Doc
- General ledger and accounting coreThe family running, with real figures in it, in both themes and at every density.Live
- CatalogAll 179 components, specified before they are written.Doc
- AssetA present right of the entity to an economic benefit (FASB CON 8 ¶E16)Term
Elsewhere in the system
Where LeaseSchedule sits in the rest of the system — the live section it renders in, the calculators that compute what it displays, and the ledger payloads it is fed from.
- LeaseSchedule, runningThe gl showcase — live, with theme, density, greyscale and reduced-motion switches.Live
- Lease — ASC 842 / IFRS 16PV of the payments at your IBR, the liability unwind and the ROU asset — straight-line for a finance lease, the plug to a level cost for an operating one.Tool
- Accounting core (GL)The general ledger layer. Specs for 18 React components: JournalEntry, JournalEntryForm, JournalEntryTable, AccountPicker and 14 more.Doc
Components are copied into your repository and meant to be edited — rounding policy, fiscal calendar and compliance copy differ per company.
Told when Accounting core (GL) changes
Components are copied into your repo, so a fix here does not reach you on its own. One email when a component in this family changes in a way that needs a migration — and nothing when it does not.