feat(profile): enhance user profile UI, add session pagination, and optimize dirty checks (!30) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(profile): enhance user profile UI, add session pagination, and optimize dirty checks

Summary of Changes

This PR enhances the Profile and Role Management interfaces, improves session management UX with pagination, and adds resilient clipboard utilities.

Key Features & Enhancements

Profile Header & Account Info:
- Displays user Account ID with instant one-click copy to clipboard.
- Displays account creation date and badges for assigned roles.
Dedicated Avatar Management:
- Integrated dedicated avatar upload and deletion endpoints.
- Added visual preview, pan/zoom position adjustments, and instant removal action with fallback handling.
Form Dirty Checking:
- Disabled profile submit button when fields are unchanged.
- Added dirty checks to Role Permission Matrix & Role Edit modals to prevent unnecessary network mutations and audit logs.
Active Sessions Pagination:
- Added pagination controls (Previous, Page X of Y, Next) with loading skeletons and total device counters.
Clipboard & Error Handling:
- Added cross-environment fallback clipboard helper (src/lib/clipboard.ts).
- Enhanced error parsing in getErrorMessage.
UI Clean-up & Localization:
- Cleaned up redundant theme toggle card in profile page.
- Added complete English and Vietnamese i18n dictionary keys for new attributes.

## Summary of Changes

This PR enhances the Profile and Role Management interfaces, improves session management UX with pagination, and adds resilient clipboard utilities.

### Key Features & Enhancements
- **Profile Header & Account Info**:
  - Displays user Account ID with instant one-click copy to clipboard.
  - Displays account creation date and badges for assigned roles.
- **Dedicated Avatar Management**:
  - Integrated dedicated avatar upload and deletion endpoints.
  - Added visual preview, pan/zoom position adjustments, and instant removal action with fallback handling.
- **Form Dirty Checking**:
  - Disabled profile submit button when fields are unchanged.
  - Added dirty checks to Role Permission Matrix & Role Edit modals to prevent unnecessary network mutations and audit logs.
- **Active Sessions Pagination**:
  - Added pagination controls (`Previous`, `Page X of Y`, `Next`) with loading skeletons and total device counters.
- **Clipboard & Error Handling**:
  - Added cross-environment fallback clipboard helper (`src/lib/clipboard.ts`).
  - Enhanced error parsing in `getErrorMessage`.
- **UI Clean-up & Localization**:
  - Cleaned up redundant theme toggle card in profile page.
  - Added complete English and Vietnamese i18n dictionary keys for new attributes.