Summary
Build a global search feature accessible from the topbar that lets users quickly find transactions, navigate to pages, or look up currency rates — all from one place. This is a major UX improvement for power users.
What Needs to Be Done
1. components/shared/global-search.tsx
- Search icon button in topbar → opens a full-width search overlay
- Keyboard shortcut:
Ctrl+K / Cmd+K to open
- Close on Escape or clicking outside
2. Search categories and results
Pages (instant, no API call):
- Match against a static list of routes: Dashboard, Transactions, Convert, Deposit, Withdraw, Settings, Support
- Show page icon + name + path
- Click → navigate to page
Transactions (search GET /transactions?search={query}):
- Show up to 5 matching transactions: type badge, amount, currency, date
- Click → open transaction detail modal
Currency rates (search against known currency pairs):
- If query matches a currency code (e.g. "USD", "EUR", "NGN") → show current rate card inline
- e.g. searching "USD" → shows "1 USD = 1,721 NGN" directly in the results
3. Search UX
- Results grouped by category: Pages / Transactions / Rates
- Keyboard navigable: arrow keys to move through results, Enter to select
- "No results found for [query]" empty state
- Debounce: 300ms before firing API call
- Loading spinner during transaction search
4. Recent searches
- Store last 5 searches in localStorage
- Show "Recent" section when search input is empty
- "Clear recent" button
Acceptance Criteria
⚠️ IMPORTANT — READ BEFORE SUBMITTING YOUR PR
Your pull request MUST target the v2 branch.
PRs targeting main or any other branch will not be reviewed and will not be merged.
Base branch: v2 ✅
Base branch: main ❌ → will be closed without review
Complexity: High — 200 points
Summary
Build a global search feature accessible from the topbar that lets users quickly find transactions, navigate to pages, or look up currency rates — all from one place. This is a major UX improvement for power users.
What Needs to Be Done
1.
components/shared/global-search.tsxCtrl+K/Cmd+Kto open2. Search categories and results
Pages (instant, no API call):
Transactions (search
GET /transactions?search={query}):Currency rates (search against known currency pairs):
3. Search UX
4. Recent searches
Acceptance Criteria
Cmd+K/Ctrl+Kopens search overlaynpm run buildandnpm run lintpassComplexity: High — 200 points