moex-vibe/docs/features/broker-dashboard-redesign/tasks.md

Редизайн обзора брокерского счёта в инвестиционный дашборд — задачи

Дата: 2026-06-26 (обновлено 2026-06-27) Статус: в реализации, итерация HTML parity

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

• Выбрать scope: /broker/:accountId становится единым дашбордом.
• Выбрать визуальный стиль: структура temp.html, текущая светлая DS-тема.
• Исключить график истории стоимости из первой версии.
• Добавить backlog-задачу на историю стоимости брокерского портфеля.
• Создать ветку codex/broker-dashboard-redesign.
• Запустить baseline: rtk npm run test:backend && rtk npm run test:frontend && rtk npm run test:design-system.
• Написать spec.md.
• Написать plan.md.

Реализация

• Добавить pure helpers для фильтрации и суммирования доходных операций dashboard.
• Добавить helpers для фильтров дат, пресетов, валидации и mapping income types → operationTypes.
• Добавить dashboard presentation helpers для fallback, event labels и statuses.
• Добавить локальный BrokerDashboardCard pattern или точечно расширить DS, если локального pattern недостаточно.
• Добавить BrokerDashboardHero с KPI по portfolio и analytics.
• Добавить BrokerDashboardEventsCard на основе useBrokerEvents.
• Добавить BrokerDashboardIncomeCard на основе useBrokerOperations.
• Перенести навигацию счёта из левой колонки в горизонтальные вкладки над контентом.
• Перестроить dashboard на один блок на строке для События, Доходы, Аналитика доходности, Аллокация.
• Добавить кликабельные chip-фильтры типов для События.
• Добавить BrokerDashboardDateFilter — переиспользуемый expandable-компонент фильтра дат (пресеты 7д/30д/90д/1г/Всё, from/to поля, Сбросить/Показать).
• Подключить BrokerDashboardDateFilter в События с draft/applied состоянием.
• Добавить локальную пагинацию по 10 событий в События.
• Добавить кликабельные chip-фильтры типов для Доходы.
• Подключить BrokerDashboardDateFilter в Доходы с draft/applied состоянием.
• Добавить cursor-пагинацию по 10 операций в Доходы.
• Добавить BrokerDashboardAnalyticsCard на основе useBrokerAnalytics.
• Добавить BrokerDashboardAllocationCard на основе существующей аллокации.
• Добавить BrokerDashboardSkeleton.
• Добавить BrokerDashboard как top-level composition widget.
• Заменить текущий вертикальный обзор в BrokerAccountOverviewPage на BrokerDashboard.
• Добавить unit/component tests для helpers и базовой dashboard composition.
• Выровнять hero KPI: все Metric одной высоты, supportingText не раздвигает "Доходность" выше соседей.
• Заменить donut-диаграмму аллокации на горизонтальные бары в BrokerDashboardAllocationCard.
• Убрать слово Фильтр из пользовательского текста шапки периода в dashboard-карточках.
• Переименовать действие Показать в управлении периодом и визуально улучшить шапку фильтров.
• Заменить native date inputs на одно поле периода с popover и community DateCalendar из @mui/x-date-pickers.
• Не использовать @mui/x-date-pickers-pro и DateRangePicker.
• Настроить default range событий и доходов на сегодня - 7 дней / сегодня.
• Заменить текстовую загрузку События на skeleton таблицы.
• Заменить текстовую загрузку Доходы на skeleton таблицы.
• Обновить component tests под новые тексты, единое поле периода, popover-календарь и skeleton loading states.
• Проверить desktop layout /broker/2084014113.
• Проверить mobile layout /broker/2084014113.

Итерация HTML parity

• Согласовать статический визуальный эталон docs/research/2026-06-27-broker-account-redesign.html.
• Обновить spec.md под HTML parity: компактные заголовки, единый toolbar, бейджи, цвета, подписи инструментов, ₽.
• Обновить plan.md под перенос HTML parity в React-компоненты.
• Добавить apps/frontend/src/widgets/broker-dashboard/lib/dashboardVisual.ts с helpers для money tone, type tone, currency symbol и instrument display.
• Добавить apps/frontend/src/widgets/broker-dashboard/lib/dashboardVisual.test.ts.
• Расширить income helpers так, чтобы строки доходов могли отдавать main/subtitle инструмента без дублирования текста.
• Обновить BrokerDashboardHero: semantic colors для доходности, дневного изменения и всего полученных доходов.
• Обновить BrokerDashboardCard: компактный card heading вместо крупного page-level heading.
• Обновить BrokerDashboardDateFilter: единый toolbar-паттерн и chevron-иконка вместо текстового v.
• Обновить BrokerDashboardEventsCard: thead, двухстрочный инструмент, type badges, semantic amount colors, status badges.
• Обновить BrokerDashboardIncomeCard: thead, двухстрочный инструмент, type badges, semantic amount colors.
• Обновить BrokerDashboardTableSkeleton: общий skeleton-паттерн для событий и доходов с корректной геометрией колонок.
• Обновить BrokerDashboardAnalyticsCard: ₽ для RUB и positive/negative tone карточек.
• Обновить component tests dashboard под HTML parity.
• Проверить, что блок Доходы не расширяет backend/API и остаётся в рамках текущих income-типов.
• Проверить desktop layout /broker/2084014113 против docs/research/2026-06-27-broker-account-redesign.html.
• Проверить mobile layout /broker/2084014113 на viewport 390x844 против docs/research/2026-06-27-broker-account-redesign.html.

Definition of Done

• rtk npm run test:frontend проходит.
• rtk npm run test:design-system проходит.
• rtk npm run lint -w apps/frontend проходит.
• rtk npm run build:frontend проходит.
• Dashboard соответствует acceptance criteria из spec.md.
• Существующие вкладки Акции, Облигации, Операции, События, Аналитика остаются доступны.
• graphify update . выполнен после code changes.

Definition of Done для HTML parity

• rtk npm run test:frontend -- --run src/widgets/broker-dashboard проходит.
• rtk npm run test:frontend проходит после HTML parity изменений.
• rtk npm run lint -w apps/frontend проходит после HTML parity изменений.
• rtk npm run build:frontend проходит после HTML parity изменений.
• На /broker/2084014113 заголовки карточек, toolbar таблиц, бейджи типов, подписи инструментов, цвета сумм, analytics colors и skeleton визуально соответствуют docs/research/2026-06-27-broker-account-redesign.html.
• Нет общего горизонтального overflow на mobile; горизонтальный scroll допускается только внутри таблиц.
• docs/features/broker-dashboard-redesign/tasks.md обновлён по факту выполнения.