caliper uidocs
DemoSign inGet Pro

Finance reports

Pro

Profit and loss by month from invoices, bills and expenses, who owes what by how late, cash by entity over a quarter, and the matching rules that teach reconciliation, each showing what it would match now.

Installs components/ui/finance-reports.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/finance-reports

Reports

Halden Ltd · in GBP

Profit and loss

LineMay 26Jun 26Jul 26Aug 26Sept 26Oct 26Total
Revenue–£3,600£17,785£7,660£16,123£5,299£50,466
Audit and legal–––––(£12,500)(£12,500)
Equipment––––(£1,349)–(£1,349)
Hosting–––(£2,105)(£2,318)–(£4,423)
Rent–––(£4,200)(£4,200)(£4,200)(£12,600)
Software–––(£864)(£540)(£755)(£2,159)
Travel––––(£460)–(£460)
Uncategorised–––––(£318)(£318)
Net£0£3,600£17,785£491£7,255(£12,474)£16,657

Revenue by invoice date; costs from bills and approved expenses. Costs in brackets.

Who owes what

CustomerNot yet due1–30 days31–60 daysOver 60 days
Palisade Hotels£5,299–––
Ostra Freight–£4,103––
Brightwell–£3,600––
Fieldnote–––£1,400
Kestrel Bio£1,250–––
Lumen Labs–£490––
Cash by entity in EUR, last 90 days

Cash by entity in EUR, last 90 days
PeriodHalden LtdHalden PortugalHalden BVTotal
16 Jul20556710143841232348237
17 Jul20580610152341647348976
18 Jul20583210173642038349606
19 Jul20567110206242393350126
20 Jul20536410247942704350547
21 Jul20495610295842965350879
22 Jul20450110347143171351143
23 Jul20405110398443322351357
24 Jul20366310446543420351548
25 Jul20338710488443471351742
26 Jul20326910521443481351964
27 Jul20334510543243460352237
28 Jul20364010552143420352581
29 Jul20416910547343373353015
30 Jul20493510528543333353553
31 Jul20592510496343311354199
1 Aug20711710451943319354955
2 Aug20847710397243367355816
3 Aug20996210334843462356772
4 Aug21152210267643611357809
5 Aug21310210198643814358902
6 Aug21465010131244072360034
7 Aug21611110068544380361176
8 Aug21743710013441453359024
9 Aug2185859136441842351791
10 Aug2174659103442256350755
11 Aug2041399083945964340942
12 Aug2046139910346391350107
13 Aug2069189918646807352911
14 Aug2209879939747198367582
15 Aug2208309972147554368105
16 Aug22052410013647866368526
17 Aug22011810061548127368860
18 Aug21966310112748335369125
19 Aug21921410164148487369342
20 Aug21882410212348586369533
21 Aug21854610254348637369726
22 Aug21842410287548647369946
23 Aug21849610309548627370218
24 Aug21878710318648588370561
25 Aug21931210314148541370994
26 Aug22007410295548500371529
27 Aug22106010263548478372173
28 Aug22224910219348485372927
29 Aug22360610164848532373786
30 Aug22509010102648627374743
31 Aug22664710035448774375775
1 Sept2282299966448977376870
2 Sept2297779898949234378000
3 Sept2312419836149541379143
4 Sept2325689780849894380270
5 Sept2337219735650282381359
6 Sept2346669702550696382387
7 Sept2353829682747843380052
8 Sept2358628844948271372582
9 Sept2340498852948686371264
10 Sept2200428873852358361138
11 Sept2198879738052715369982
12 Sept2216459779453027372466
13 Sept2352809827253290386842
14 Sept2348259878453498387107
15 Sept2343749929753651387322
16 Sept2339849978053751387515
17 Sept23370310020253803387708
18 Sept23357910053553814387928
19 Sept23364610075753795388198
20 Sept23393310085253755388540
21 Sept23445510080853709388972
22 Sept23521110062553668389504
23 Sept23619510030753645390147
24 Sept2373819986753652390900
25 Sept2387359932453698391757
26 Sept2402169870353792392711
27 Sept2417749803153938393743
28 Sept2433549734254139394835
29 Sept2449059666654395395966
30 Sept2463699603754702397108
1 Oct2477009548355054398237
2 Oct2488559502955442399326
3 Oct2498059469555855400355
4 Oct2505269449556282401303
5 Oct2510109443456710402154
6 Oct2512619451257126402899
7 Oct2512979471954238400254
8 Oct2511468671954595392460
9 Oct2487848713154909390824
10 Oct2343418760858452380401
11 Oct2338879644058662388989
12 Oct2354979695458816391267
13 Oct2491449743858917405499

When to use #

Use it for

  • The reports area of an accounting product.

Skip it when

  • Exploring arbitrary data; use the pivot table.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/finance-reports

Adds its 14 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from FinanceReports and FinanceRules.

example.tsx
import { FinanceReports, FinanceRules } from "@/components/ui/finance-reports"

The worked example comes with Pro

The 150-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

FinanceReports

component
PropTypeDefaultDescription
data *FinanceData—
entityId *string—
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
classNamestring—

FinanceRules

component
PropTypeDefault
data *FinanceData—
onDataChange *(data: FinanceData) => void—
classNamestring—

Accessibility #

It exposes status semantics, with aria-label, aria-invalid, aria-describedby, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.