feat(transactions): add transaction calculator modal and restore dual account login (!34) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(transactions): add transaction calculator modal and restore dual account login

Summary of Changes

This PR introduces an in-form transaction calculator modal to streamline expense/income entry and restores the credential-based account/password login experience alongside Zalo 1-click login, fully adhering to FinWise's Claymorphism design system.

Key Features & Enhancements

1. Transaction Amount Calculator Modal

Embedded Trigger: Added a Claymorphism calculator button directly between "Transaction Type" and "Amount" in TransactionFormModal.
Keypad & Arithmetic Operations: Supports basic arithmetic (+, −, ×, ÷), decimal input (.), clear (C), backspace (⌫), and a quick-entry 000 button.
Optimized for Vietnamese Currency Habits:
- Automatically preserves and appends zeros when pressing 0 or 000 immediately following an = calculation (e.g., 85 + 175 = 260 ➔ pressing 000 results in 260,000).
- Supports scaling decimal results (e.g., 85.5 + 175 = 260.5 ➔ pressing 000 yields 260,500).
- Pressing digits 1-9 after = starts a new calculation naturally.
One-Tap Apply: The large "Done" (Xong) button calculates any trailing expressions, writes the final amount into the form's amount field with validation triggers, and closes the modal.

2. Account & Password Login Restoration

Dual Login Methods: Restored the account/password login form using react-hook-form and zod validation, side-by-side with Zalo 1-click SDK authentication.
Icon Geometric Alignment: Corrected the SVG Zalo icon centering using exact textAnchor="middle" and dominantBaseline="central" attributes.
Remembered Account & Navigation: Supports remembering email/account identifier in local storage, toggling password visibility, and navigation to /forgot-password and /register.

3. TypeScript & Compatibility Fixes

tsconfig.json: Added "es2018" to the compiler "lib" array to natively recognize Intl.NumberFormat.prototype.formatToParts.
Defensive Separator Fallback: Updated getNumberSeparators with strict type narrowing and runtime fallback via formatter.format(1234.5) matching, ensuring zero TypeScript errors and full compatibility across legacy mobile WebViews.

4. Internationalization (i18n)

Added new localized strings in vi.json and en.json for calculator actions (transaction.calculatorTitle, transaction.calcDone, transaction.calcClear, transaction.calcDelete, and login alternatives).

## Summary of Changes

---

### Key Features & Enhancements

#### 1. Transaction Amount Calculator Modal
- **Embedded Trigger**: Added a Claymorphism calculator button directly between "Transaction Type" and "Amount" in `TransactionFormModal`.
- **Keypad & Arithmetic Operations**: Supports basic arithmetic (`+`, `−`, `×`, `÷`), decimal input (`.`), clear (`C`), backspace (`⌫`), and a quick-entry `000` button.
- **Optimized for Vietnamese Currency Habits**:
  - Automatically preserves and appends zeros when pressing `0` or `000` immediately following an `=` calculation (e.g., `85 + 175 = 260` ➔ pressing `000` results in `260,000`).
  - Supports scaling decimal results (e.g., `85.5 + 175 = 260.5` ➔ pressing `000` yields `260,500`).
  - Pressing digits `1-9` after `=` starts a new calculation naturally.
- **One-Tap Apply**: The large "Done" (`Xong`) button calculates any trailing expressions, writes the final amount into the form's amount field with validation triggers, and closes the modal.

#### 2. Account & Password Login Restoration
- **Dual Login Methods**: Restored the account/password login form using `react-hook-form` and `zod` validation, side-by-side with Zalo 1-click SDK authentication.
- **Icon Geometric Alignment**: Corrected the SVG Zalo icon centering using exact `textAnchor="middle"` and `dominantBaseline="central"` attributes.
- **Remembered Account & Navigation**: Supports remembering email/account identifier in local storage, toggling password visibility, and navigation to `/forgot-password` and `/register`.

#### 3. TypeScript & Compatibility Fixes
- **`tsconfig.json`**: Added `"es2018"` to the compiler `"lib"` array to natively recognize `Intl.NumberFormat.prototype.formatToParts`.
- **Defensive Separator Fallback**: Updated `getNumberSeparators` with strict type narrowing and runtime fallback via `formatter.format(1234.5)` matching, ensuring zero TypeScript errors and full compatibility across legacy mobile WebViews.

#### 4. Internationalization (i18n)
- Added new localized strings in `vi.json` and `en.json` for calculator actions (`transaction.calculatorTitle`, `transaction.calcDone`, `transaction.calcClear`, `transaction.calcDelete`, and login alternatives).