caliper uidocs
DemoSign inGet Pro

Finance expenses

Pro

Expense approvals with the policy questions answered: no receipt, over the category limit, a weekend, a possible duplicate. Approve one or many; rejecting asks for a reason the employee sees.

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

Expenses

5 claims to approve · €892.48

  • Tomás Ferreira3 · €598.92
  • Priya Raman1 · €248.62
  • Kiara Murayama1 · €44.93
  • Select all
  • Kiara Murayama · 11 OctNo receiptOn a weekend
    £38.40≈ €44.93
  • Priya Raman · 10 OctOver the €150 meals limitOn a weekend
    £212.50≈ €248.62
  • Tomás Ferreira · 8 OctPossible duplicate
    £12.85≈ €15.03
  • Tomás Ferreira · 7 OctPossible duplicate
    £12.85≈ €15.03
  • Tomás Ferreira · 6 Oct
    £486.20≈ €568.85

When to use #

Use it for

  • Spend management and expense products.
  • Any approval queue for money people spent.

Skip it when

  • Approving documents or access; use the approval queue.

Installation #

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

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 FinanceExpenses and expenseFlags.

example.tsx
import { FinanceExpenses, expenseFlags } from "@/components/ui/finance-expenses"

The worked example comes with Pro

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

Checking your licence…

API reference #

FinanceExpenses

component
PropTypeDefaultDescription
data *FinanceData—
entityIdstring—Only this entity's claims; all entities when absent.
onDataChange *(data: FinanceData) => void—
policyReadonly<Record<string, number>>{}
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today, for reimbursements.
classNamestring—

expenseFlags

component
PropTypeDefaultDescription
id *string—
entityId *string—
employee *string—
merchant *string—
category *string—
date *string—
amount *number—
currency *string—
receipt *boolean—Whether a receipt is attached.
notestring—
status *"approved" | "rejected" | "submitted" | "reimbursed"—
reasonstring—
reimbursedAtstring—ISO date it was paid back.

Accessibility #

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

Keyboard and focus handling comes from Radix dialog and popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

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.