54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
---
|
|
id: TASK-13
|
|
title: Improve transaction category picker
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-06-16 10:08'
|
|
updated_date: '2026-06-23 09:45'
|
|
labels: []
|
|
dependencies: []
|
|
priority: high
|
|
ordinal: 13000
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Replace the cramped inline category Select in the transactions table with a polished popover picker that preserves row height, supports search, and groups categories.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Clicking a transaction category badge opens a compact popover instead of the current narrow Select.
|
|
- [x] #2 The picker supports client-side category search and groups income, fixed expense, and variable expense categories.
|
|
- [x] #3 Long category names are truncated cleanly without increasing table row height.
|
|
- [x] #4 Selecting a category updates the transaction, closes the popover, and reports failures with a toast.
|
|
- [x] #5 The project builds successfully.
|
|
<!-- AC:END -->
|
|
|
|
## Implementation Plan
|
|
|
|
<!-- SECTION:PLAN:BEGIN -->
|
|
1. Extract category grouping/search helpers and cover them with tests
|
|
2. Replace inline category Select with a stable Popover picker
|
|
3. Wire async update handling and failure toast
|
|
4. Verify build and relevant tests
|
|
<!-- SECTION:PLAN:END -->
|
|
|
|
## Implementation Notes
|
|
|
|
<!-- SECTION:NOTES:BEGIN -->
|
|
Implemented CategoryPicker popover with search, grouped category options, selected-state checkmark, truncation, and async update error toast.
|
|
Verification: categoryPickerModel test passes; npm run build passes.
|
|
Lint: changed files pass with one existing TanStack React Compiler warning in TransactionsPage; full npm run lint still fails on pre-existing unrelated project errors.
|
|
Manual browser verification is still open because the in-app browser redirects to /login without the user session.
|
|
|
|
Final verification: npx vitest run src/components/transactions/categoryPickerModel.test.ts passed (2 tests); npm run build passed; targeted eslint on changed files exited 0 with the existing TanStack useReactTable compiler warning only.
|
|
<!-- SECTION:NOTES:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
Shipped a reusable inline CategoryPicker popover for transaction category changes, with grouped searchable categories, truncation for long labels, async update handling, and a regression test for grouping/search behavior.
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|