docs/features/broker-dashboard-redesign/spec.md

@@ -1,6 +1,6 @@
-# Редизайн overview брокерского счёта в инвестиционный дашборд
+# Редизайн обзора брокерского счёта в инвестиционный дашборд
 
-Дата: 2026-06-26
+Дата: 2026-06-26 (обновлено 2026-06-27)
 Статус: согласовано к планированию
 Эпик: [Портфель брокера](../../epics/BrokerPortfolio.md)
 
@@ -9,12 +9,14 @@
 Текущий маршрут `/broker/:accountId` показывает корректный overview выбранного брокерского счёта, но
 визуально остаётся вертикальным набором отдельных блоков: сводка, аллокация, карточки активов,
 ближайшие события и последние операции. Пользователь подготовил прототип `temp.html`, где тот же домен
-представлен как более плотный инвестиционный дашборд: hero KPI, события и доходы рядом, аналитика и
+представлен как более плотный инвестиционный дашборд с hero KPI, компактными таблицами и аналитическими
-аллокация в нижнем ряду.
+карточками.
 
 После обсуждения выбран вариант A: страница `/broker/:accountId` должна стать единым дашбордом,
 используя структуру и плотность прототипа, но сохраняя текущую светлую тему и компоненты
-`@moex-vibe/design-system`. Тёмная тема из прототипа не переносится в первую версию.
+`@moex-vibe/design-system`. Тёмная тема из прототипа не переносится в первую версию. При этом
+двухколоночная desktop-композиция прототипа сознательно не переносится: и на desktop, и на mobile блоки
+dashboard идут по одному на строке в фиксированном порядке.
 
 ## Цель
 
@@ -29,13 +31,13 @@
 - увидеть ближайшие события по счёту в компактной таблице;
 - увидеть последние доходные операции по дивидендам и купонам и итог по ним;
 - оценить вложения, полученные выплаты и доходность по существующей аналитике;
-- увидеть структуру портфеля через donut-диаграмму и легенду;
+- увидеть структуру портфеля через горизонтальные полосы аллокации и подписи к ним;
 - перейти в существующие подробные вкладки `Акции`, `Облигации`, `Операции`, `События` и `Аналитика`
   для drill-down сценариев.
 
 ## Область изменений
 
-Фича относится только к frontend маршруту `/broker/:accountId` и связанным frontend-компонентам
+Фича относится только к frontend-маршруту `/broker/:accountId` и связанным frontend-компонентам
 брокерского overview.
 
 В область входят:
@@ -82,6 +84,7 @@ Hero показывает:
 - дневное изменение из `portfolio.yields.daily` и `portfolio.yields.dailyPercent`, если доступно;
 - всего полученных доходов из `broker analytics.totalReceived`, если аналитика загружена;
 - спокойный fallback `—` для недоступных значений.
+- Все Metric-блоки имеют одинаковую высоту в grid-ряду, даже если у некоторых есть supportingText. Поддерживающий текст остаётся внутри Metric, но все Metrics растягиваются на полную высоту grid-ячейки с выравниванием от верхнего края.
 
 ### 4. Блок `События`
 
@@ -144,10 +147,14 @@ Hero показывает:
 
 ### 7. Блок `Аллокация`
 
-- Используется существующий расчёт `buildBrokerAllocation` и текущая `BrokerAllocationChart` либо её
+- Используется существующий расчёт `buildBrokerAllocation`.
-  dashboard-адаптация.
+- Вместо donut-диаграммы используется горизонтальный bar chart: каждый сектор — полоса с процентом,
-- Блок показывает итоговую стоимость портфеля и ненулевые секторы с названием, суммой и процентом.
+  подписью и суммой.
-- Отрицательные значения отображаются текстом, а не сектором диаграммы.
+- Сверху блока показывается итоговая стоимость портфеля.
+- Каждая полоса содержит: название сектора, долю в процентах, сумму в валюте.
+- Цвета полос соответствуют существующей палитре аллокации (акции, облигации, ETF, деньги, прочие).
+- Отрицательные значения отображаются текстом без полосы.
+- Текст подписей контрастный и читаемый на всех цветах фона.
 - Информация остаётся понятной без различения цветов.
 
 ### 8. Загрузка, ошибки и пустые состояния
@@ -184,12 +191,14 @@ Hero показывает:
 - На мобильном viewport dashboard читаемо перестраивается в одну колонку.
 - Hero показывает стоимость портфеля, доходность или fallback, дневное изменение или fallback, всего
   доходов или fallback.
+- Все Metric-блоки hero имеют одинаковую высоту; supportingText не создаёт перекоса.
 - Блок `События` использует существующие events data и показывает дату, инструмент, тип, сумму и статус.
 - Блок `События` поддерживает multi-select chip-фильтр типов и локальную пагинацию по 10 событий.
 - Блок `Доходы` показывает доходные операции дивидендов и купонов и итог по отображаемым строкам.
 - Блок `Доходы` поддерживает multi-select chip-фильтр типов и cursor-пагинацию по 10 операций.
 - Блок `Аналитика доходности` показывает данные существующего analytics endpoint.
-- Блок `Аллокация` показывает donut/легенду существующей структуры портфеля.
+- Блок `Аллокация` показывает горизонтальные бары секторов с названием, долей и суммой, а также
+  итоговую стоимость портфеля.
 - Ошибка одного вторичного блока не скрывает остальные блоки dashboard.
 - Существующие detailed вкладки остаются доступны из навигации счёта.
 - Первая версия не содержит график истории стоимости портфеля и не добавляет API для него.

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

@@ -1,7 +1,7 @@
-# Редизайн overview брокерского счёта в инвестиционный дашборд — задачи
+# Редизайн обзора брокерского счёта в инвестиционный дашборд — задачи
 
 Дата: 2026-06-26
-Статус: готово к реализации
+Статус: в реализации
 
 ## Документация и pre-flight
 
@@ -26,26 +26,29 @@
 - [x] Перенести навигацию счёта из левой колонки в горизонтальные вкладки над контентом.
 - [x] Перестроить dashboard на один блок на строке для `События`, `Доходы`, `Аналитика доходности`, `Аллокация`.
 - [x] Добавить кликабельные chip-фильтры типов для `События`.
-- [ ] Добавить фильтры периода, пресеты, reset/apply actions для `События`.
+- [ ] Добавить `BrokerDashboardDateFilter` — переиспользуемый expandable-компонент фильтра дат (пресеты 7д/30д/90д/1г/Всё, from/to поля, Сбросить/Показать).
+- [ ] Подключить `BrokerDashboardDateFilter` в `События` с draft/applied состоянием.
 - [x] Добавить локальную пагинацию по 10 событий в `События`.
 - [x] Добавить кликабельные chip-фильтры типов для `Доходы`.
-- [ ] Добавить фильтры периода, пресеты, reset/apply actions для `Доходы`.
+- [ ] Подключить `BrokerDashboardDateFilter` в `Доходы` с draft/applied состоянием.
 - [x] Добавить cursor-пагинацию по 10 операций в `Доходы`.
 - [x] Добавить `BrokerDashboardAnalyticsCard` на основе `useBrokerAnalytics`.
 - [x] Добавить `BrokerDashboardAllocationCard` на основе существующей аллокации.
 - [x] Добавить `BrokerDashboardSkeleton`.
 - [x] Добавить `BrokerDashboard` как top-level composition widget.
-- [x] Заменить текущий vertical overview в `BrokerAccountOverviewPage` на `BrokerDashboard`.
+- [x] Заменить текущий вертикальный обзор в `BrokerAccountOverviewPage` на `BrokerDashboard`.
-- [x] Добавить unit/component tests для helpers и dashboard composition.
+- [x] Добавить unit/component tests для helpers и базовой dashboard composition.
+- [ ] Выровнять hero KPI: все Metric одной высоты, supportingText не раздвигает "Доходность" выше соседей.
+- [ ] Заменить donut-диаграмму аллокации на горизонтальные бары в `BrokerDashboardAllocationCard`.
 - [ ] Проверить desktop layout `/broker/2084014113`.
 - [ ] Проверить mobile layout `/broker/2084014113`.
 
 ## Definition of Done
 
-- [x] `rtk npm run test:frontend` проходит (31 files, 135 tests).
+- [ ] `rtk npm run test:frontend` проходит.
-- [x] `rtk npm run test:design-system` проходит (28 files, 162 tests).
+- [ ] `rtk npm run test:design-system` проходит.
-- [x] `rtk npm run lint -w apps/frontend` проходит.
+- [ ] `rtk npm run lint -w apps/frontend` проходит.
-- [x] `rtk npm run build:frontend` проходит.
+- [ ] `rtk npm run build:frontend` проходит.
-- [x] Dashboard соответствует acceptance criteria из `spec.md`.
+- [ ] Dashboard соответствует acceptance criteria из `spec.md`.
 - [x] Существующие вкладки `Акции`, `Облигации`, `Операции`, `События`, `Аналитика` остаются доступны.
-- [x] `graphify update .` выполнен после code changes.
+- [ ] `graphify update .` выполнен после code changes.