feat(data): implement backup import merge, QR/OTP account handover, and layout standardization (!52) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(data): implement backup import merge, QR/OTP account handover, and layout standardization

Title: feat(data): implement backup import merge, QR/OTP account handover, and layout standardization

Overview

This Merge Request delivers comprehensive user interfaces for data migration and ownership portability, alongside application-wide visual refinements and header safe-area buffer optimizations for the FinWise Zalo Mini App.

Key Features & Technical Details

1. File-based Backup Import & Smart Merge (`/data-management`)

Step-by-Step Wizard:
- Upload & Decrypt: Secure JSON file picker with client-side SHA-256 integrity check and AES-256-GCM password decryption prompt.
- Preview & Validation: Summarizes total records across wallets, categories, transactions, budgets, and saving goals with potential conflict warnings.
- Conflict Resolution: Allows user selection between Smart Merge (auto-harmonize duplicate categories and rename colliding wallets) and Skip Existing.
- Execution & Summary: Progress tracker with detailed transfer breakdown and instant ledger cache invalidation.
Design System: Fully adheres to Claymorphism guidelines with clay-raised cards, soft inner bevels, and animated progress feedback.

2. Real-time Account Handover UI (`/account-handover`)

Dual-Party Handshake Protocol:
- Source Device (Transferor): Displays session status, a 15-minute countdown timer, dynamic QR code rendered on a clay-embossed pedestal, a high-contrast 6-digit numeric PIN card with copy-to-clipboard, and an OTP confirmation dialog upon target device connection.
- Target Device (Recipient): Offers camera-based QR scanning via Zalo Mini App SDK (zaui-camera) or manual 6-digit PIN entry, followed by a live polling waiting screen during OTP verification.
Security & Auto-Decommissioning:
- Automatically clears local session and redirects the transferor to the login screen upon completion.
- Immediately refreshes user financial store and redirects the recipient to Dashboard.

3. Layout & Side-Margin Standardization (Admin Center & Integrations)

Problem Fixed: The .page class in app.scss already has built-in mobile/responsive padding (14px/16px). Redundant nested px-4 pt-6 wrappers previously doubled side margins to 32px+, causing content squeezing on mobile devices.
Standardization:
- Refactored all 8 Admin Center pages (/admin, /admin/users, /admin/users/:id, /admin/settings, /admin/roles, /admin/notifications, /admin/audit-logs, /admin/ai) and the Integrations page (/admin/integrations).
- Standardized root layout hierarchy to: <Page className="page"> -> <Header ... /> -> <IconGradients /> -> <main className="mx-auto mt-4 flex w-full max-w-5xl flex-col gap-5 pb-12">.

4. Header Controls Safe-Area Positioning (`.finwise-header-controls`)

Zalo Native Capsule Buffer:
- Adjusted right offset of the floating header controls (Language Switcher, Theme Toggle, Notification Bell) from 88px to 104px on mobile (max-width: 480px) and 96px to 108px on desktop.
- Prevents the Language Switcher button from touching or overlapping Zalo's native capsule buttons (... and x).
- Adjusted .zaui-header padding right to 224px (mobile) and 248px (desktop) to ensure page titles never truncate under the action icons.

5. Bilingual Localization (i18n)

Added full Vietnamese (vi.json) and English (en.json) translations for all backup import steps, handover states, errors, tooltips, and confirmation dialogs.

## Title: feat(data): implement backup import merge, QR/OTP account handover, and layout standardization

### Overview
This Merge Request delivers comprehensive user interfaces for data migration and ownership portability, alongside application-wide visual refinements and header safe-area buffer optimizations for the FinWise Zalo Mini App.

---

### Key Features & Technical Details

#### 1. File-based Backup Import & Smart Merge (`/data-management`)
- **Step-by-Step Wizard**:
  - `Upload & Decrypt`: Secure JSON file picker with client-side SHA-256 integrity check and AES-256-GCM password decryption prompt.
  - `Preview & Validation`: Summarizes total records across wallets, categories, transactions, budgets, and saving goals with potential conflict warnings.
  - `Conflict Resolution`: Allows user selection between `Smart Merge` (auto-harmonize duplicate categories and rename colliding wallets) and `Skip Existing`.
  - `Execution & Summary`: Progress tracker with detailed transfer breakdown and instant ledger cache invalidation.
- **Design System**: Fully adheres to Claymorphism guidelines with clay-raised cards, soft inner bevels, and animated progress feedback.

#### 2. Real-time Account Handover UI (`/account-handover`)
- **Dual-Party Handshake Protocol**:
  - **Source Device (Transferor)**: Displays session status, a 15-minute countdown timer, dynamic QR code rendered on a clay-embossed pedestal, a high-contrast 6-digit numeric PIN card with copy-to-clipboard, and an OTP confirmation dialog upon target device connection.
  - **Target Device (Recipient)**: Offers camera-based QR scanning via Zalo Mini App SDK (`zaui-camera`) or manual 6-digit PIN entry, followed by a live polling waiting screen during OTP verification.
- **Security & Auto-Decommissioning**:
  - Automatically clears local session and redirects the transferor to the login screen upon completion.
  - Immediately refreshes user financial store and redirects the recipient to Dashboard.

#### 3. Layout & Side-Margin Standardization (Admin Center & Integrations)
- **Problem Fixed**: The `.page` class in `app.scss` already has built-in mobile/responsive padding (`14px`/`16px`). Redundant nested `px-4 pt-6` wrappers previously doubled side margins to 32px+, causing content squeezing on mobile devices.
- **Standardization**:
  - Refactored all 8 Admin Center pages (`/admin`, `/admin/users`, `/admin/users/:id`, `/admin/settings`, `/admin/roles`, `/admin/notifications`, `/admin/audit-logs`, `/admin/ai`) and the Integrations page (`/admin/integrations`).
  - Standardized root layout hierarchy to:
    `<Page className="page">` -> `<Header ... />` -> `<IconGradients />` -> `<main className="mx-auto mt-4 flex w-full max-w-5xl flex-col gap-5 pb-12">`.

#### 4. Header Controls Safe-Area Positioning (`.finwise-header-controls`)
- **Zalo Native Capsule Buffer**:
  - Adjusted right offset of the floating header controls (Language Switcher, Theme Toggle, Notification Bell) from `88px` to `104px` on mobile (`max-width: 480px`) and `96px` to `108px` on desktop.
  - Prevents the Language Switcher button from touching or overlapping Zalo's native capsule buttons (`...` and `x`).
  - Adjusted `.zaui-header` padding right to `224px` (mobile) and `248px` (desktop) to ensure page titles never truncate under the action icons.

#### 5. Bilingual Localization (i18n)
- Added full Vietnamese (`vi.json`) and English (`en.json`) translations for all backup import steps, handover states, errors, tooltips, and confirmation dialogs.