moex-vibe/docs/features/broker-account-overview-html-parity/tasks.md

Финальный редизайн брокерского overview по HTML — задачи

Дата: 2026-06-27 Статус: реализация завершена

Документация и pre-flight

• Создать docs/features/broker-account-overview-html-parity/spec.md.
• Создать docs/features/broker-account-overview-html-parity/plan.md.
• Создать docs/features/broker-account-overview-html-parity/tasks.md.
• Зафиксировать canonical visual reference: docs/research/frontend-overview-redesign/example.html.
• Зафиксировать, что docs/research/2026-06-27-broker-account-redesign.html не является source of truth для этой итерации.
• Зафиксировать финальный порядок блоков: Заголовок счёта → Стоимость портфеля за 6 месяцев → Аналитика доходности → Структура → Последние события.
• Зафиксировать, что production UI не переносит demo-toggle Данные / Загрузка.
• Перед началом реализации убедиться, что работа идёт в feature branch.
• Перед началом реализации запустить baseline checks текущей ветки.

Backend contract

• Расширить BrokerAnalyticsDto полями totalFees и totalTaxesPaid.
• Обновить BrokerAnalyticsService: считать комиссии из executed операций категории fee.
• Обновить BrokerAnalyticsService: считать уплаченные налоги из executed операций категории tax.
• Обновить broker-analytics.service.spec.ts для новых агрегатов и округления.
• Добавить DTO для BrokerPortfolioHistoryData.
• Добавить envelope DTO для portfolio history endpoint.
• Добавить BrokerPortfolioHistoryService.
• Добавить endpoint GET /api/v1/broker/accounts/:accountId/portfolio/history?months=6.
• Покрыть portfolio history default months и response shape тестами.
• Добавить categories?: string в BrokerOperationQueryDto.
• Обновить BrokerOperationsService: применять category filtering для operations response.
• Покрыть categories=income,tax,fee и неизвестные категории тестами.
• Обновить TBankController и tbank.controller.spec.ts под новый endpoint/DTO.

OpenAPI и frontend data layer

• Запустить backend dev server для Swagger JSON.
• Выполнить npm run codegen -w apps/frontend.
• Проверить, что generated types содержат totalFees, totalTaxesPaid и portfolio history schemas.
• Экспортировать новый BrokerPortfolioHistory alias из apps/frontend/src/shared/api/index.ts.
• Добавить getBrokerPortfolioHistory.
• Добавить useBrokerPortfolioHistory.
• Добавить categories в frontend BrokerOperationQuery.
• Не редактировать apps/frontend/src/shared/api/types.ts вручную.

Frontend composition

• Перестроить BrokerDashboard на финальный порядок блоков.
• Убрать BrokerDashboardHero из overview-render path.
• Перенести compact yield UI в заголовок счёта рядом с Брокерский счёт.
• Убедиться, что page title loading state не показывает skeleton-полосы.
• Создать BrokerPortfolioHistoryCard.
• Подключить useBrokerPortfolioHistory(accountId, { months: 6 }).
• Заменить overview BrokerDashboardIncomeCard на BrokerPortfolioHistoryCard.
• Обновить BrokerDashboardSkeleton под финальный порядок и стабильные высоты.

Frontend visual parity

• Карточка Стоимость портфеля за 6 месяцев: зелёный градиентный фон и зелёная рамка.
• График стоимости: 6 месячных значений, 6 подписей месяцев, плавная линия без visible markers.
• График стоимости: первая точка у левого края, последняя у правого края.
• Loading графика: chart-like indicator (meta skel + dashed guide + shimmer area).
• Заголовок/yield: skeleton-полосы при загрузке портфеля (label, value, daily).
• Analytics loading: 2 summary карточки + 6 detail карточек со skel барами.
• Events loading: skeleton-table со структурой строк дата/инструмент/тип/сумма.
• Analytics summary: только Стоимость портфеля и Всего доходов.
• Analytics detail grid: Пополнения, Выводы, Дивиденды, Купоны, Комиссия, Уплаченные налоги.
• Analytics overview не показывает Нетто и Всего получено.
• Комиссия и Уплаченные налоги отображаются как отрицательные UI-суммы.
• Карточка структуры называется Структура.
• Карточка структуры не показывает subtitle Структура портфеля.
• Карточка структуры показывает итоговую стоимость под заголовком.
• Карточка структуры показывает бары Акции, Облигации, Деньги.
• Карточка последних событий называется Последние события.
• Последние события используют executed operations, а не calendar events.
• Последние события отсортированы новые → старые.
• Последние события не показывают toolbar, count badge, footer summary и колонку Статус.
• Инструмент в последних событиях: название сверху жирным, ticker/ISIN снизу серым.
• Налоги/комиссии/списания отображаются красным и с корректным бейджем типа.
• На mobile нет page-level horizontal overflow.

Tests

• Backend targeted: npm run test -w apps/backend -- src/modules/tbank/services/broker-analytics.service.spec.ts src/modules/tbank/tbank.controller.spec.ts
• Frontend targeted: npm run test -w apps/frontend -- --run src/widgets/broker-dashboard
• Full frontend: npm run test:frontend
• Frontend lint: npm run lint -w apps/frontend
• Frontend build: npm run build:frontend
• Проверить OpenAPI/codegen после backend изменений.

Visual QA

• Проверить /broker/:accountId на desktop против docs/research/frontend-overview-redesign/example.html (ручная проверка)
• Проверить /broker/:accountId на viewport 390x844 (ручная проверка)

Definition of Done

• Все acceptance criteria из spec.md выполнены.
• Backend tests проходят (34 files, 161 passed).
• Frontend targeted tests проходят.
• npm run test:frontend проходит (32 files, 168 passed).
• npm run lint -w apps/frontend проходит.
• npm run build:frontend проходит.
• Generated OpenAPI types обновлены через codegen.
• Visual QA desktop/mobile выполнена (ручная проверка).
• Существующие detailed вкладки Акции, Облигации, Операции, События, Аналитика остаются доступны.
• tasks.md обновлён по факту выполнения.

Дополнительные улучшения (после основной реализации)

• Бейдж событий перевести с MUI Chip на кастомный Badge с цветами эталона.
• Пагинация событий: wire useState + handlers, API limit поднят до 100.
• Подписи месяцев на графике: первая left-aligned, последняя right-aligned.
• BrokerAnalyticsService переписан на прямой вызов T-Bank API:
  • убран Prisma для analytics;
  • GetOperationsByCursor с пагинацией за всю историю (без ограничения по from);
  • GetPortfolio.expectedYield используется как totalReturnPercent.
• Структурные skeletons для chart/analytics/title-yield совпадают с эталоном.