feat(fe): implement transaction management module and refactor Select component (!10) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(fe): implement transaction management module and refactor Select component

Key Changes

1. Core Transaction Module

Service Layer: Created transaction.service.ts to define API requests for transactions (CRUD, upload/delete receipt, download receipt).
State & Hooks: Added use-transactions.ts utilizing TanStack Query for queries and mutations with proper cache invalidation for transactions and wallets.
Types: Added TypeScript interfaces for transaction entities, payloads, and queries in transaction.ts.
Views: Implemented TransactionsPage (under transactions/index.tsx) displaying a list of transactions grouped by date, detailed view modal, creation/edition form modal, advanced filtering (by wallets, categories, type, amount, date), sorting, and receipt image attachments.

2. Component Refactoring & Enhancements

Select Component: Refactored Select component using React.forwardRef to support standard ref integration (e.g. for form integrations).
Category Display Name: Updated getCategoryDisplayName function to handle categories where isSystem is optional or undefined by checking their fallback system name keys.
Style Guide: Added a back navigation button in style-guide.tsx to return to the home screen.
Navigation & Layout: Registered the transaction page route in layout.tsx and added a link to transactions in index.tsx.

3. Localization & Memory

Added Vietnamese and English localization keys for the transactions feature in vi.json and en.json.
Documented key design system decisions and transaction feature details in memory.md.

## Key Changes
### 1. Core Transaction Module
- **Service Layer**: Created `transaction.service.ts` to define API requests for transactions (CRUD, upload/delete receipt, download receipt).
- **State & Hooks**: Added `use-transactions.ts` utilizing TanStack Query for queries and mutations with proper cache invalidation for transactions and wallets.
- **Types**: Added TypeScript interfaces for transaction entities, payloads, and queries in `transaction.ts`.
- **Views**: Implemented `TransactionsPage` (under `transactions/index.tsx`) displaying a list of transactions grouped by date, detailed view modal, creation/edition form modal, advanced filtering (by wallets, categories, type, amount, date), sorting, and receipt image attachments.
### 2. Component Refactoring & Enhancements
- **Select Component**: Refactored `Select` component using `React.forwardRef` to support standard ref integration (e.g. for form integrations).
- **Category Display Name**: Updated `getCategoryDisplayName` function to handle categories where `isSystem` is optional or undefined by checking their fallback system name keys.
- **Style Guide**: Added a back navigation button in `style-guide.tsx` to return to the home screen.
- **Navigation & Layout**: Registered the transaction page route in `layout.tsx` and added a link to transactions in `index.tsx`.
### 3. Localization & Memory
- Added Vietnamese and English localization keys for the transactions feature in `vi.json` and `en.json`.
- Documented key design system decisions and transaction feature details in `memory.md`.