# CardStatement

> Statement balance, minimum due, due date, limit and available — the issuer's statement.

Source: https://lopifi.com/components/card-statement
Part of: Lopifi — US GAAP books on autopilot, checked by a CPA (https://lopifi.com)

---

- **Family:** Cards — 
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/02-cards

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/card-statement
```

## Specification

> The issuer's statement summary: what's owed, by when, and how the figure was reached.

```tsx
<CardStatement
  issuer="Fernhill Bank Business Card"
  network="visa"
  last4="4242"
  period={{ start: new Date(2026, 8, 1), end: new Date(2026, 8, 30) }}
  previousBalance={money(384_210)}
  paymentsAndCredits={money(-50_000)}
  purchases={money(162_480)}
  fees={money(0)}
  interest={money(6_812)}
  newBalance={money(503_502)}
  minimumPayment={money(15_100)}
  dueDate={new Date(2026, 9, 25)}
  creditLimit={money(1_000_000)}
  availableCredit={money(496_498)}
  aprs={[{ label: "Purchases", rate: 24.99 }]}
  lateFee={money(4_100)}
  penaltyApr={29.99}
/>
```

**Layer 2:**
```
┌──────────────────────────────────────────────┐
│ [mark]  Issuer  •••• 4242          [Overdue] │  header: issuer, period, currency
├──────────────────────────────────────────────┤
│ New balance   Minimum payment   Due date     │  the three figures a holder acts on
│ $5,035.02     $151.00           25 Oct 2026  │
│ ↑ +$1,192.92 vs previous statement           │
├──────────────────────────────────────────────┤
│ Previous balance                  $3,842.10  │
│ Payments and credits               ($500.00) │
│ Purchases                         $1,624.80  │
│ Fees charged                              —  │
│ Interest charged                     $68.12  │
│                                  ──────────  │
│ New balance                       $5,035.02  │
│                                  ══════════  │
├──────────────────────────────────────────────┤
│ Credit limit · Available credit · APRs       │
├──────────────────────────────────────────────┤
│ Late payment warning.                        │
└──────────────────────────────────────────────┘
```

**The walk ties or says so.** Previous balance, payments and credits, purchases, fees and
interest are footed in minor units and compared with the new balance the issuer printed. A
non-zero difference adds a Difference row, turns the border `--negative` and states the amount.
A holder paying from a figure that doesn't add up should find out before paying.

**Movements are signed, once.** A payment reduces what's owed, so it's passed negative and
renders `($500.00)` with the paren column reserved. There's no "−" beside the label, which would
make it a double negative. The component never negates.

**Polarity is inverted.** The change against the previous statement is a `Delta` with
`polarity="inverted"`: a balance that rose is more owed. A credit balance (negative new balance)
is labelled "Credit balance", not printed as a negative debt.

**States:**
- **Past due:** `pastDue` present and non-zero. An `Overdue` pill in the header, the due date in
  `--negative`, a line saying the past-due amount is included in the minimum, and the late-payment
  warning in `--negative` instead of the routine secondary text.
- **Over limit:** derived from new balance vs. credit limit, with the amount over stated.
  `availableCredit` is the issuer's figure, never recomputed, and `null` renders n/a.
- **Paid in full:** derived when payments and credits cleared the balance brought forward. It's a
  fact the figures prove, so it's stated in one secondary line.

**Late payment warning** prints only when `lateFee` is given, built from the props (due date,
late fee, penalty APR) and never from invented terms. APRs print at two decimals.

**Every figure states its basis:** issuer, masked account, statement period and currency in the
header; the due date is a date, not "in 12 days".

**3 sizes, 2 weights:** caption (meta and labels), body / `figure-sm` (the walk), `figure-md`
(the three figures acted on).

**Motion:** none. A statement is a document.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.