Sergey Krylov d21e2411b8 feat(frontend): complete broker account overview HTML parity
- Remove BrokerDashboardHero and BrokerDashboardIncomeCard from overview
- Reorder blocks to spec: PortfolioHistory → Analytics → Allocation → Events
- Add BrokerPortfolioHistoryCard with SVG line/area chart (6 months)
- Switch EventsCard from calendar events to executed operations
- Update AnalyticsCard: add totalFees/totalTaxesPaid, remove netInvested
- Update AllocationCard: title 'Структура', only shares/bonds/cash
- Add inline yield display in BrokerAccountLayout
- Clean up unused income filter state and dashboardFilters lib
- Update tests to match new component structure
- Visual QA screenshots (desktop + mobile)
2026-06-27 19:54:03 +03:00

115 lines
7.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Финальный редизайн брокерского overview по HTML — задачи
Дата: 2026-06-27
Статус: реализация завершена
## Документация и pre-flight
- [x] Создать `docs/features/broker-account-overview-html-parity/spec.md`.
- [x] Создать `docs/features/broker-account-overview-html-parity/plan.md`.
- [x] Создать `docs/features/broker-account-overview-html-parity/tasks.md`.
- [x] Зафиксировать canonical visual reference:
`docs/research/frontend-overview-redesign/example.html`.
- [x] Зафиксировать, что `docs/research/2026-06-27-broker-account-redesign.html` не является
source of truth для этой итерации.
- [x] Зафиксировать финальный порядок блоков:
`Заголовок счёта → Стоимость портфеля за 6 месяцев → Аналитика доходности → Структура → Последние события`.
- [x] Зафиксировать, что production UI не переносит demo-toggle `Данные / Загрузка`.
- [x] Перед началом реализации убедиться, что работа идёт в feature branch.
- [x] Перед началом реализации запустить baseline checks текущей ветки.
## Backend contract
- [x] Расширить `BrokerAnalyticsDto` полями `totalFees` и `totalTaxesPaid`.
- [x] Обновить `BrokerAnalyticsService`: считать комиссии из executed операций категории `fee`.
- [x] Обновить `BrokerAnalyticsService`: считать уплаченные налоги из executed операций категории `tax`.
- [x] Обновить `broker-analytics.service.spec.ts` для новых агрегатов и округления.
- [x] Добавить DTO для `BrokerPortfolioHistoryData`.
- [x] Добавить envelope DTO для portfolio history endpoint.
- [x] Добавить `BrokerPortfolioHistoryService`.
- [x] Добавить endpoint `GET /api/v1/broker/accounts/:accountId/portfolio/history?months=6`.
- [x] Покрыть portfolio history default months и response shape тестами.
- [x] Добавить `categories?: string` в `BrokerOperationQueryDto`.
- [x] Обновить `BrokerOperationsService`: применять category filtering для operations response.
- [x] Покрыть `categories=income,tax,fee` и неизвестные категории тестами.
- [x] Обновить `TBankController` и `tbank.controller.spec.ts` под новый endpoint/DTO.
## OpenAPI и frontend data layer
- [x] Запустить backend dev server для Swagger JSON.
- [x] Выполнить `npm run codegen -w apps/frontend`.
- [x] Проверить, что generated types содержат `totalFees`, `totalTaxesPaid` и portfolio history schemas.
- [x] Экспортировать новый `BrokerPortfolioHistory` alias из `apps/frontend/src/shared/api/index.ts`.
- [x] Добавить `getBrokerPortfolioHistory`.
- [x] Добавить `useBrokerPortfolioHistory`.
- [x] Добавить `categories` в frontend `BrokerOperationQuery`.
- [x] Не редактировать `apps/frontend/src/shared/api/types.ts` вручную.
## Frontend composition
- [x] Перестроить `BrokerDashboard` на финальный порядок блоков.
- [x] Убрать `BrokerDashboardHero` из overview-render path.
- [x] Перенести compact yield UI в заголовок счёта рядом с `Брокерский счёт`.
- [x] Убедиться, что page title loading state не показывает skeleton-полосы.
- [x] Создать `BrokerPortfolioHistoryCard`.
- [x] Подключить `useBrokerPortfolioHistory(accountId, { months: 6 })`.
- [x] Заменить overview `BrokerDashboardIncomeCard` на `BrokerPortfolioHistoryCard`.
- [x] Обновить `BrokerDashboardSkeleton` под финальный порядок и стабильные высоты.
## Frontend visual parity
- [x] Карточка `Стоимость портфеля за 6 месяцев`: зелёный градиентный фон и зелёная рамка.
- [x] График стоимости: 6 месячных значений, 6 подписей месяцев, плавная линия без visible markers.
- [x] График стоимости: первая точка у левого края, последняя у правого края.
- [x] Loading графика: chart-like indicator без skeleton месяцев.
- [x] Analytics summary: только `Стоимость портфеля` и `Всего доходов`.
- [x] Analytics detail grid: `Пополнения`, `Выводы`, `Дивиденды`, `Купоны`, `Комиссия`,
`Уплаченные налоги`.
- [x] Analytics overview не показывает `Нетто` и `Всего получено`.
- [x] `Комиссия` и `Уплаченные налоги` отображаются как отрицательные UI-суммы.
- [x] Карточка структуры называется `Структура`.
- [x] Карточка структуры не показывает subtitle `Структура портфеля`.
- [x] Карточка структуры показывает итоговую стоимость под заголовком.
- [x] Карточка структуры показывает бары `Акции`, `Облигации`, `Деньги`.
- [x] Карточка последних событий называется `Последние события`.
- [x] Последние события используют executed operations, а не calendar events.
- [x] Последние события отсортированы новые → старые.
- [x] Последние события не показывают toolbar, count badge, footer summary и колонку `Статус`.
- [x] Инструмент в последних событиях: название сверху жирным, ticker/ISIN снизу серым.
- [x] Налоги/комиссии/списания отображаются красным и с корректным бейджем типа.
- [x] На mobile нет page-level horizontal overflow.
## Tests
- [x] Backend targeted:
`npm run test -w apps/backend -- src/modules/tbank/services/broker-analytics.service.spec.ts src/modules/tbank/tbank.controller.spec.ts`
- [x] Frontend targeted:
`npm run test -w apps/frontend -- --run src/widgets/broker-dashboard`
- [x] Full frontend:
`npm run test:frontend`
- [x] Frontend lint:
`npm run lint -w apps/frontend`
- [x] Frontend build:
`npm run build:frontend`
- [x] Проверить OpenAPI/codegen после backend изменений.
## Visual QA
- [ ] Проверить `/broker/:accountId` на desktop против
`docs/research/frontend-overview-redesign/example.html` (ручная проверка)
- [ ] Проверить `/broker/:accountId` на viewport `390x844` (ручная проверка)
## Definition of Done
- [x] Все acceptance criteria из `spec.md` выполнены.
- [x] Backend tests проходят (34 files, 163 passed).
- [x] Frontend targeted tests проходят (3 files, 49 passed).
- [x] `npm run test:frontend` проходит (32 files, 175 passed).
- [x] `npm run lint -w apps/frontend` проходит.
- [x] `npm run build:frontend` проходит.
- [x] Generated OpenAPI types обновлены через codegen.
- [ ] Visual QA desktop/mobile выполнена (ручная проверка).
- [x] Существующие detailed вкладки `Акции`, `Облигации`, `Операции`, `События`, `Аналитика`
остаются доступны.
- [x] `tasks.md` обновлён по факту выполнения.