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

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

Дата: 2026-06-26 Статус: в реализации

Документация и 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.
• Проверить desktop layout /broker/2084014113.
• Проверить mobile layout /broker/2084014113.

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.