feat(fe): integrate amount calculator modal across all forms and resolve type issues (!37) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(fe): integrate amount calculator modal across all forms and resolve type issues

Overview

This pull request brings the transaction calculator functionality to all forms and modals with amount inputs across the FinWise mini-app. It creates a unified, reusable CalculatorModal component and implements adaptive placement rules tailored to different form layouts (2-column grids, currency-adjacent rows, and single-column fields). Additionally, it resolves TypeScript compiler issues related to Array.prototype.flatMap and React Hook Form's setValue.

Key Changes

1. Unified Shared Calculator Component

Created src/components/ui/CalculatorModal.tsx exporting:
- CalculatorButton: Standard Claymorphism button (46px x 46px) matching the app's tactile design system.
- CalculatorModal: Modal supporting keypad input, standard arithmetic (+, -, ×, ÷), rapid trailing-zero appending (85 + 175 = 260 ➔ typing 000 ➔ 260000), dynamic font scaling for large amounts, and an instant "Done" (Xong) action that commits the value into React Hook Form.
Maintained 100% backward compatibility by re-exporting CalculatorModal from src/pages/transactions/components/TransactionCalculatorModal.tsx.

2. Adaptive Layout Placement

Integrated the calculator into all amount-related forms based on specific UX rules:

Two-Column Forms (Type + Amount): Calculator placed in the center between Type and Amount ([Type] ➔ [Calculator] ➔ [Amount]).
- TransactionFormModal.tsx
- RecurringTransactionFormModal.tsx
Currency-Adjacent Forms (Amount/Limit + Currency): Calculator placed after the currency column ([Amount / Limit / Balance] ➔ [Currency] ➔ [Calculator]), keeping amount and currency visually paired.
- BudgetFormModal.tsx
- SavingGoalFormModal.tsx
- WalletFormModal.tsx
Single-Column Forms: Calculator placed at the end of the amount row ([Amount] ➔ [Calculator]).
- TransferFormModal.tsx
- ContributionFormModal.tsx
- SimulationControls.tsx
- AnomalyChecker.tsx

3. Bug Fixes & TypeScript Modernization

tsconfig.json: Upgraded compiler "lib" from legacy ES2018 to ["dom", "dom.iterable", "esnext"] to natively support Array.prototype.flatMap and modern Intl options without TS2550 errors in IDEs.
Safe Tree Flattening: Refactored flattenTree in TransactionFormModal.tsx to use a safe recursive iterative approach with guard checks for null/undefined child nodes.
Missing setValue Destructuring: Fixed Cannot find name 'setValue' (TS2304) by explicitly destructuring setValue from useForm in ContributionFormModal.tsx and AnomalyChecker.tsx.

## Overview
This pull request brings the transaction calculator functionality to **all forms and modals with amount inputs** across the FinWise mini-app. It creates a unified, reusable `CalculatorModal` component and implements adaptive placement rules tailored to different form layouts (2-column grids, currency-adjacent rows, and single-column fields). Additionally, it resolves TypeScript compiler issues related to `Array.prototype.flatMap` and React Hook Form's `setValue`.

---

## Key Changes

### 1. Unified Shared Calculator Component
- Created `src/components/ui/CalculatorModal.tsx` exporting:
  - `CalculatorButton`: Standard Claymorphism button (`46px x 46px`) matching the app's tactile design system.
  - `CalculatorModal`: Modal supporting keypad input, standard arithmetic (`+`, `-`, `×`, `÷`), rapid trailing-zero appending (`85 + 175 = 260` ➔ typing `000` ➔ `260000`), dynamic font scaling for large amounts, and an instant "Done" (`Xong`) action that commits the value into React Hook Form.
- Maintained 100% backward compatibility by re-exporting `CalculatorModal` from `src/pages/transactions/components/TransactionCalculatorModal.tsx`.

### 2. Adaptive Layout Placement
Integrated the calculator into all amount-related forms based on specific UX rules:
- **Two-Column Forms (Type + Amount):** Calculator placed in the center between Type and Amount (`[Type] ➔ [Calculator] ➔ [Amount]`).
  - `TransactionFormModal.tsx`
  - `RecurringTransactionFormModal.tsx`
- **Currency-Adjacent Forms (Amount/Limit + Currency):** Calculator placed after the currency column (`[Amount / Limit / Balance] ➔ [Currency] ➔ [Calculator]`), keeping amount and currency visually paired.
  - `BudgetFormModal.tsx`
  - `SavingGoalFormModal.tsx`
  - `WalletFormModal.tsx`
- **Single-Column Forms:** Calculator placed at the end of the amount row (`[Amount] ➔ [Calculator]`).
  - `TransferFormModal.tsx`
  - `ContributionFormModal.tsx`
  - `SimulationControls.tsx`
  - `AnomalyChecker.tsx`

### 3. Bug Fixes & TypeScript Modernization
- **`tsconfig.json`**: Upgraded compiler `"lib"` from legacy ES2018 to `["dom", "dom.iterable", "esnext"]` to natively support `Array.prototype.flatMap` and modern Intl options without TS2550 errors in IDEs.
- **Safe Tree Flattening**: Refactored `flattenTree` in `TransactionFormModal.tsx` to use a safe recursive iterative approach with guard checks for null/undefined child nodes.
- **Missing `setValue` Destructuring**: Fixed `Cannot find name 'setValue'` (TS2304) by explicitly destructuring `setValue` from `useForm` in `ContributionFormModal.tsx` and `AnomalyChecker.tsx`.