Add date-range and type quick-filter chips with empty/no-results UX to Transaction History

[greatest0fallt1me]

Description

This is a UI/UX issue. Transaction History (src/pages/TransactionHistory.tsx) needs fast, discoverable filtering by transaction type and date range, plus a clear no-results state when a filter combination returns nothing. Add accessible filter chips and a distinct empty state separate from the "no transactions at all" state.

Requirements and Context

• Add toggleable filter chips (All/Draw/Repay/Fee/Interest) implemented as a labeled toggle-button group with aria-pressed.
• Add date presets (7d/30d/90d/All) with the same accessible group pattern.
• Show a "No transactions match these filters" empty state with a "Clear filters" action, distinct from the zero-data empty state.
• Announce the filtered result count politely.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/transactions-filter-chips

2. Implement changes
   • src/pages/TransactionHistory.tsx
   • src/pages/TransactionHistory.css
3. Test and commit
   • npm run test
   • Verify keyboard toggling and announcements
   • Include screenshots in the PR

Example commit message

feat: add accessible filter chips and no-results state to transactions

Acceptance Criteria

• Type and date chips toggle with aria-pressed
• No-results state offers "Clear filters"
• Empty (no-data) vs no-results states are distinct
• Result count announced on filter change

Guidelines

• WCAG 2.1 AA: 4.1.2; empty-state UX
• Clear documentation and inline comments
• Timeframe: 96 hours