Finance
2 layouts · 9 components
Transaction History
Reconciling balance summary beside a sortable ledger with date and payment-method filters.
1280px
Transactions
Operating account · USD
Balance
$113,360
Opening $128,400
Income
$40,200
12%
settled this period
Expenses
$55,240
4%
settled this period
Pending
$9,600
awaiting settlement
Ledger
8 entries
| Reference | Counterparty | Status | ||
|---|---|---|---|---|
| TXN-9021 | Northwind LtdBank transfer | +$14,800 | Settled | 2024-10-28 |
| TXN-9020 | AWSCard | −$6,240 | Settled | 2024-10-27 |
| TXN-9019 | Lumen AnalyticsBank transfer | +$9,600 | Pending | 2024-10-27 |
| TXN-9018 | Payroll — OctDirect debit | −$41,200 | Settled | 2024-10-25 |
| TXN-9017 | Orbital LabsBank transfer | +$21,200 | Settled | 2024-10-24 |
| TXN-9016 | FigmaCard | −$468 | Failed | 2024-10-23 |
Sample data. Balance counts settled movements only, so pending and failed entries never change it.
Components used
- Badge
- Button
- Card
- DataTable
- DatePicker
- Heading
- Select
- Statistic
- Text
Install
npm install @coloxo/uiThe block imports only from @coloxo/ui and lucide-react. Styling uses the package token layer, so no Tailwind setup is required.