feat(component): TransactionList — Credit/Debit History

[bntvllnt]

Summary

Chronological list of financial transactions with credit/debit color coding, date formatting, and subscription line items. Handles empty state, mixed transaction types (credits, debits, subscriptions), and compact row layout. The standard transaction history view for any billing page.

Proposed API

<TransactionList
  transactions={[
    { id: "1", type: "credit", description: "Credit reload", amountCents: 2000, createdAt: 1710547200000 },
    { id: "2", type: "debit", description: "API usage", amountCents: 150, createdAt: 1710460800000 },
  ]}
  emptyMessage="No transactions yet"
>
  {/* Optional pinned item (e.g., active subscription) */}
  <TransactionList.Pinned>
    <TransactionList.SubscriptionRow
      plan="AI OS Pro"
      status="active"
      amountCents={1200}
      renewsAt={1713139200000}
      interval="month"
    />
  </TransactionList.Pinned>
</TransactionList>

Requirements

• Transaction types: credit (green +), debit (red -), initial (green +), refund (blue +)
• Color-coded amounts: positive = green, negative = red
• Formatted currency amounts with sign prefix (+/-)
• Date formatting per row (locale-aware)
• Description text with truncation for long descriptions
• Pinned section for active subscription display (green border, "Active" badge)
• Subscription row: plan name + badge + renewal date + amount/interval
• Empty state: centered message when no transactions
• Compact row layout: description + date left, amount right
• Dark mode: subtle borders, semi-transparent backgrounds
• Accessible: list semantics, amounts have aria-label with full context

Layout

┌──────────────────────────────────────────────────┐
│  ┌── green border ────────────────────────────┐  │
│  │ AI OS Pro Subscription  [Active]   €12/mo  │  │
│  │ Renews Apr 15, 2025 · VAT incl.           │  │
│  └────────────────────────────────────────────┘  │
│                                                  │
│  ┌────────────────────────────────────────────┐  │
│  │ Credit reload              +€20.00 (green) │  │
│  │ Mar 10, 2025                               │  │
│  └────────────────────────────────────────────┘  │
│                                                  │
│  ┌────────────────────────────────────────────┐  │
│  │ API usage - March          -€1.50 (red)    │  │
│  │ Mar 8, 2025                                │  │
│  └────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────┘

Use Cases

• SaaS billing page transaction history
• API platform credit usage log
• Wallet/payment history in fintech apps
• Admin panel user transaction audit

Composes

• Badge, Card

Origin

Extracted from TransactionHistory and SubscriptionTransactionRow in apps/web-ai-os/app/account/billing/billing-client.tsx in vllnt/vllnt monorepo.