UI/UX: Improve the transaction history filters, search, and grouping on /transactions

[Baskarayelu]

Description

The Transactions page (app/transactions/page.tsx) lists TransactionHistoryItems with Download, Filter, and Search controls, but the filtering, search, and grouping experience is underdesigned: there are no visible filter chips, no date grouping, and no clear empty/no-results state distinct from a loading state. Transaction types span Send Money, Smart Split, Bill Payment, and Insurance, which should be filterable and visually distinguishable. We need a redesign of the controls and list grouping. This is distinct from the UX-013 readability/density issue and focuses on filtering, search, and result grouping.

Requirements and context

• UI/UX scope only; do not duplicate UX-013.
• Reference app/transactions/page.tsx, components/Dashboard/TransactionHistoryItem.tsx, and the transaction-history components under app/dashboard/transaction-history/.
• Design filter chips by type/status and an active-filters summary.
• Design date grouping (e.g. Today, This Week, Earlier).
• Provide distinct no-results vs empty states (the design screenshots in app/dashboard/transaction-history/Screenshots/ are references).

Suggested execution

• Branch: uiux/transactions-filters-search-grouping
• Redline the filter/search bar, filter chips, and grouped list.
• Document filter combinations and the no-results state.
• Provide mobile and desktop layouts.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: search/filter labeling, results count announced, focus management.

Example commit message

feat(uiux): improve transaction history filters, search, and grouping

Guidelines

• Document filter behavior and group boundaries.
• Avoid overlap with the UX-013 density/readability work.
• Timeframe: 96 hours