# Улучшение 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` не удаляется — он всё ещё используется в сигнатуре `moneyColor(impact: 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 больше не показываются