Appearance
Transactions Panel
The largest and most complex panel (~900 lines). Provides a full transaction ledger with virtualized scrolling, inline category assignment, AI-assisted categorisation, and a complete category management sidebar.
What It Shows
A scrollable, searchable table of all transactions. Each row displays the merchant logo, description, recurring/transfer indicators, category badge, date, and amount.
| Column | Content |
|---|---|
| Logo | Merchant logo (cached via merchant-logos.ts) |
| Description | Transaction description text |
| Indicators | Recurring icon, transfer icon (when applicable) |
| Category | Color-coded badge; clickable for inline editing |
| Date | Transaction date |
| Amount | NZD value, color-coded (green positive, red negative) |
Key Features
- Virtualized scrolling -- Handles thousands of transactions smoothly by only rendering what's visible on screen.
- Real-time search -- Filters across description, category, and account fields simultaneously.
- Sort control -- Toggle between newest-first and oldest-first by date.
- Multi-select -- Checkbox selection on individual rows, plus a select-all toggle. Selected transactions can be bulk-assigned to a category.
- Inline category coding -- Click the category area on any row to open a dropdown picker. Choose from existing categories or leave uncoded.
- AI categorise button -- Per-transaction Sparkles icon triggers AI-assisted category suggestion via the Freddy AI layer.
- Uncoded badge -- Header displays a count of transactions without a category assignment.
- Pending transactions -- Pending (uncleared) transactions displayed in a separate strip.
- Recurring payees -- Detected recurring payees listed with frequency information.
- Smooth animations -- Expand/collapse transitions on detail views.
Category Management Sidebar
Opened from within the panel. Provides full CRUD for categories:
| Feature | Detail |
|---|---|
| Create | Name, type, color, icon |
| Edit | Inline rename, change color/icon/type |
| Delete | With confirmation prompt |
| Types | INCOME, EXPENSE, SAVINGS, TRANSFER |
| Colors | 25 preset colors (COLOR_PRESETS) |
| Icons | Full icon picker with search |
Categories are sorted by TYPE_ORDER: Income, Expense, Savings, Transfer.
Data Source
| Store | Fields |
|---|---|
useFinanceStore | transactions, categories, selectedAccountId, updateTransactionCategory |
Respects selectedAccountId set by the Accounts Panel. All currency formatted with formatNZD(), dates with formatDate().
Interactivity
| Action | Result |
|---|---|
| Search | Real-time filter across all text fields |
| Click category badge | Opens inline category picker |
| Click AI sparkle | Triggers AI categorisation for that transaction |
| Checkbox select | Adds to multi-select set |
| Bulk assign | Applies chosen category to all selected transactions |
| Sort toggle | Switches date sort direction |
| Resize handle | Column widths adjustable via onResizeStart |
NZ-Specific Logic
- All amounts in NZD via
formatNZD() - Merchant logos resolved through Akahu merchant data where available
en-NZdate locale
Related Panels
- Accounts Panel -- click-to-filter integration
- Budget Panel -- categories shared between panels
- Spending Panel -- category spending totals