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 больше не показываются