diff --git a/docs/superpowers/specs/2026-06-17-broker-operations-ui-improvements.md b/docs/superpowers/specs/2026-06-17-broker-operations-ui-improvements.md new file mode 100644 index 0000000..7c02599 --- /dev/null +++ b/docs/superpowers/specs/2026-06-17-broker-operations-ui-improvements.md @@ -0,0 +1,68 @@ +# Улучшение UI операций и пагинации в брокерском портфеле + +Дата: 2026-06-17 +Статус: черновик + +## Контекст + +Страница брокерского счета (`BrokerAccountDetailPage.tsx`) показывает таблицу операций и таблицы позиций. +Текущая реализация имеет несколько UI-недостатков, описанных ниже. + +Изменения затрагивают только frontend. Бэкенд, OpenAPI-контракт, DTO и codegen не меняются. + +## Изменения + +### 1. Убрать бейджи impact из таблицы "Операции" + +**Проблема:** В колонке "Тип" операции показывается label (напр. "Покупка") и под ним цветной бейдж с текстом "Пополняет", "Списывает", "Перекладка" или "Неясно". Это визуальный шум — пользователю достаточно знать тип операции и сумму. + +**Решение:** Удалить `OperationType`-компонент, который рендерит бейдж. Вместо него в ячейке "Тип" отображать только `getBrokerOperationTypeLabel(operation)`. + +**Удаляемый код:** +- Компонент `OperationType` (строки 87-108) +- Объект `impactStyles` (строки 30-47) +- Импорт `getBrokerOperationImpactLabel` (не используется больше) +- Импорт `type BrokerOperationImpact` (не используется больше) + +**Сохраняется:** +- `getBrokerOperationImpact()` — всё ещё нужна для `moneyColor()` (цвет суммы) +- `moneyColor()` и `formatMoney()` — без изменений + +### 2. Префикс "+" для положительных сумм + +**Проблема:** Отрицательные суммы уже отображаются с минусом ("−11,00 ₽"), а положительные без знака ("90,00 ₽"). Визуально неочевидно, что это приход. + +**Решение:** В функции `formatMoney()` в `BrokerOperationsTable.tsx` добавить префикс `'+'` если `value > 0`. + +Цвет суммы по-прежнему определяется через `moneyColor(impact)`. + +### 3. Пагинация: keepPreviousData и стилизация + +**Проблема (скачок):** При нажатии "Вперед" `isLoading` становится `true` → таблица исчезает, показывается "Загрузка операций..." → затем таблица возвращается с новыми данными. + +**Решение:** Использовать `placeholderData: keepPreviousData` из TanStack Query v5 в `useBrokerOperations.ts`. + +**Проблема (стили кнопок):** Кнопки "Назад" / "Вперед" используют браузерные стили по умолчанию, выглядят неаккуратно. При `disabled` состоянии визуально не отличить от активного. + +**Решение:** Добавить inline-стили для кнопок пагинации с padding, border, background, hover, disabled state. + +### 4. "Другие инструменты" + +Текущая реализация корректна: в эту секцию попадают позиции с `instrumentType !== 'share' && !== 'bond'` (ETF, валюты, фьючерсы и т.д.). Пока таких позиций нет — секция скрыта. Изменений не требуется. + +## Файлы для изменения + +| Файл | Что меняется | +|---|---| +| `apps/frontend/src/pages/broker/BrokerOperationsTable.tsx` | Удалить `OperationType`, `impactStyles`. Модифицировать `formatMoney` с "+". Стилизовать кнопки пагинации | +| `apps/frontend/src/hooks/useBrokerOperations.ts` | Добавить `placeholderData: keepPreviousData` | +| `apps/frontend/src/pages/broker/brokerDisplay.ts` | Удалить `getBrokerOperationImpactLabel` (становится dead code). `BrokerOperationImpact` сохраняется — используется в типе возврата `getBrokerOperationImpact` и параметре `moneyColor` | +| `apps/frontend/src/pages/broker/brokerDisplay.test.ts` | Удалить тест `getBrokerOperationImpactLabel` | +| `apps/frontend/src/pages/broker/BrokerPages.test.tsx` | Убрать проверки бейджей "Пополняет"/"Списывает". Обновить тест пагинации для новых стилей | + +## Тестирование + +- `npm run test:frontend` — существующие тесты должны проходить с учётом изменений +- Проверить, что пагинация не дёргает интерфейс при переключении страниц +- Проверить, что положительные суммы отображаются с "+" +- Проверить, что бейджи impact больше не показываются