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

5.3 KiB Raw Blame History Unescape Escape