108 lines
6.4 KiB
Markdown
108 lines
6.4 KiB
Markdown
# profile-dashboard
|
||
|
||
## Purpose
|
||
|
||
Единый раздел «личного кабинета» на `/profile`: боковое меню (25%) и контент (75%) с вложенной маршрутизацией по разделам. Объединяет блоки профиля (данные, безопасность, мнемоника) и транзакции в одну точку входа, с закреплённой сводкой профиля и состоянием загрузки контента.
|
||
|
||
## Requirements
|
||
|
||
### Requirement: Two-column dashboard layout
|
||
|
||
The profile section SHALL be presented as a two-column layout: a left menu column occupying approximately 25% of the available width and a right content column occupying approximately 75%. On viewports narrower than 1024px the two columns SHALL collapse into a single stacked column.
|
||
|
||
#### Scenario: Wide viewport shows two columns
|
||
- **WHEN** an authenticated user opens the profile section on a viewport ≥ 1024px wide
|
||
- **THEN** the left menu column (~25%) and the right content column (~75%) are displayed side by side
|
||
|
||
#### Scenario: Narrow viewport stacks columns
|
||
- **WHEN** an authenticated user opens the profile section on a viewport < 1024px wide
|
||
- **THEN** the menu and the content are stacked vertically in a single column
|
||
|
||
### Requirement: Pinned profile summary
|
||
|
||
The left menu column SHALL display the profile summary (`ProfileSummary` — avatar and identity) pinned at the top, above the menu navigation, and it SHALL remain visible regardless of which menu item is active. On desktop the avatar and the "Добавить фото" button SHALL span the full width of the menu column.
|
||
|
||
#### Scenario: Summary visible on every item
|
||
- **WHEN** the user switches between any menu items
|
||
- **THEN** the profile summary remains displayed at the top of the left column
|
||
|
||
### Requirement: Menu items for profile sections and transactions
|
||
|
||
The left menu SHALL list selectable items for: Данные профиля (`ProfileDetails`), Безопасность (`SecuritySection`), Транзакции (transactions content), and Мнемоническая фраза (last item). Selecting an item SHALL render its content in the right column, and the currently active item SHALL be visually highlighted.
|
||
|
||
#### Scenario: Selecting a menu item shows its content
|
||
- **WHEN** the user clicks a menu item
|
||
- **THEN** the right column renders that item's content and the clicked item is marked as active
|
||
|
||
#### Scenario: Transactions appears as a menu item
|
||
- **WHEN** the user views the profile menu
|
||
- **THEN** a «Транзакции» item is present alongside the profile section items, and selecting it renders the transactions content (list plus the «Транзакции / Заявки» tabs for legal-entity accounts)
|
||
|
||
### Requirement: Mobile navigation via select
|
||
|
||
On viewports narrower than 1024px the left menu navigation SHALL be presented as a single select control (the shared `Select` component) instead of the full list, so only the chosen section is shown. Changing the select SHALL navigate to the corresponding section.
|
||
|
||
#### Scenario: Mobile uses a select
|
||
- **WHEN** an authenticated user opens the profile section on a viewport < 1024px wide
|
||
- **THEN** the section navigation is a select control reflecting the active section
|
||
|
||
#### Scenario: Changing the select navigates
|
||
- **WHEN** the user picks another section in the select
|
||
- **THEN** the app navigates to that section's URL and renders its content
|
||
|
||
### Requirement: Mnemonic reveal requires explicit action
|
||
|
||
The «Мнемоническая фраза» item SHALL show the seed-phrase content inline (12-word grid with show/hide and copy), but the mnemonic SHALL be fetched only after the user explicitly requests it via a "Показать мнемонику" button. Until then no mnemonic request is made.
|
||
|
||
#### Scenario: Mnemonic gated behind a button
|
||
- **WHEN** the user opens the «Мнемоническая фраза» item
|
||
- **THEN** a warning and a "Показать мнемонику" button are shown, and no mnemonic request has been sent
|
||
|
||
#### Scenario: Revealing fetches and shows the seed phrase
|
||
- **WHEN** the user clicks "Показать мнемонику"
|
||
- **THEN** the mnemonic is fetched (a loading indicator is shown) and the seed-phrase content is rendered inline
|
||
|
||
### Requirement: Per-item routing with default redirect
|
||
|
||
Each menu item SHALL have its own URL under `/profile` (`/profile/details`, `/profile/security`, `/profile/mnemonic`, `/profile/transactions`) so that the browser Back button and direct links select the corresponding item. Navigating to `/profile` SHALL redirect to the default item `/profile/details`.
|
||
|
||
#### Scenario: Direct link opens the matching item
|
||
- **WHEN** the user navigates directly to `/profile/transactions`
|
||
- **THEN** the transactions item is active and its content is shown in the right column
|
||
|
||
#### Scenario: Bare profile path redirects to default
|
||
- **WHEN** the user navigates to `/profile`
|
||
- **THEN** the app redirects to `/profile/details` and shows the profile data item
|
||
|
||
#### Scenario: Back button restores previous item
|
||
- **WHEN** the user selects one item and then another, and then presses the browser Back button
|
||
- **THEN** the previously active item is restored
|
||
|
||
### Requirement: Legacy transactions route redirect
|
||
|
||
The legacy route `/transactions` SHALL redirect to `/profile/transactions` so existing links and bookmarks continue to work.
|
||
|
||
#### Scenario: Old transactions URL redirects
|
||
- **WHEN** the user navigates to `/transactions`
|
||
- **THEN** the app redirects to `/profile/transactions`
|
||
|
||
### Requirement: KYC banner placement
|
||
|
||
The KYC banner (`KycBanner`) SHALL be displayed above the content in the right column.
|
||
|
||
#### Scenario: KYC banner shown above content
|
||
- **WHEN** the profile section is displayed and the KYC banner is applicable
|
||
- **THEN** the banner appears above the active item's content in the right column
|
||
|
||
### Requirement: Loading state for content
|
||
|
||
While the data for the active menu item is loading, the right column SHALL show a loading indicator (the shared `Spinner`) while the left menu remains interactive.
|
||
|
||
#### Scenario: Spinner while data loads
|
||
- **WHEN** the active item's data is still loading
|
||
- **THEN** a loading indicator is shown in the right column and the user can still navigate to other menu items
|
||
|
||
#### Scenario: Content replaces spinner when ready
|
||
- **WHEN** the active item's data finishes loading
|
||
- **THEN** the loading indicator is replaced by the item's content
|