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