moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
moex-vibe/docs/features/broker-dashboard-redesign/tasks.md
Sergey Krylov d4d1dd980e feat: replace native date inputs with single DateCalendar field in broker dashboard 
- Replace two MUI DatePicker components with a single visual range field
- Click opens Popover with community DateCalendar (no DateRangePicker/pro)
- First click sets start, second sets end; if end < start, range resets
- Remove isOpen/onToggle props — Popover managed locally
- Add BrokerDashboardTableSkeleton for events/income loading
- Set default weekly range (today-7d / today) for both events and income
- Remove 'Фильтр' label, rename 'Показать' → 'Применить период'
- Install @mui/x-date-pickers@7
- Update tests for new UI and skeleton loading states
- Align spec.md, plan.md, tasks.md with implementation
2026-06-27 11:48:10 +03:00

5.5 KiB
Raw Blame History

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

Дата: 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.
  • Убрать слово Фильтр из пользовательского текста шапки периода в 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.

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.