50 Commits
Author SHA1 Message Date
ksv741 7b2bd8d379 fix: round money to currency minor units without negative zero (WealthLedger/frontend#118)
Frontend verify / commits (pull_request) Successful in 28s
Frontend verify / security (pull_request) Successful in 11s
Frontend verify / verify (pull_request) Successful in 5m22s
Frontend verify / commits (pull_request) Successful in 29s
2026-10-28 08:29:18 +03:00
ksv741 431559be0f feat: show return, cash and structure on account cards (#114)
Frontend verify / commits (pull_request) Successful in 29s
Frontend verify / security (pull_request) Successful in 8s
Frontend verify / verify (pull_request) Successful in 5m25s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m20s
2026-10-27 05:29:11 +03:00
ksv741 0e4bbec2a7 chore: sync brokerage accounts contract (WealthLedger/backend#138) 2026-10-27 05:29:11 +03:00
ksv741 c24704affa feat: make brokerage account list compact (#111) 2026-10-27 05:29:11 +03:00
codex-bot 58b4e12633 test: pin date in all accounts events test (#115)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m7s
2026-10-27 05:27:14 +03:00
codex-bot 3075081df1 feat: replace account page accordion with tabs and show open position result (#112)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 20s
Frontend verify / verify (push) Failing after 6m36s
2026-10-26 20:30:35 +03:00
codex-bot 1a92f023c1 feat: remove top header and rework mobile bottom navigation (#109)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m7s
2026-10-25 18:25:10 +03:00
ksv741 df86b8450f chore(release): 1.2.1
Frontend verify / commits (pull_request) Successful in 40s
Frontend verify / security (pull_request) Successful in 11s
Frontend verify / verify (pull_request) Successful in 7m15s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Successful in 7m48s
Frontend image / publish (push) Successful in 9m17s
2026-10-24 19:15:04 +03:00
ksv741 b5ceb77208 chore(deps): update non-major dependencies #9
Frontend verify / commits (pull_request) Successful in 35s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 6m37s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 6m29s
2026-10-24 18:20:20 +03:00
codex-bot b009101b7b fix: show snapshot time in browser time zone (#101)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Failing after 6m33s
2026-10-24 11:04:50 +03:00
codex-bot 7e6fd95cfa chore: bump test stack and fix npm audit findings (#105)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 5m38s
2026-10-24 10:32:11 +03:00
codex-bot 2cd6b1e72d chore: bump Node to 24.22.1 (WealthLedger/backend#122)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Failing after 7m25s
2026-10-23 16:10:45 +03:00
codex-bot 3af9df0ae2 fix: keep session when refresh fails on network error or 5xx (WealthLedger/frontend#97)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 1m3s
Frontend verify / verify (push) Failing after 7m11s
2026-10-23 15:06:20 +03:00
codex-bot 7b6f34c776 chore: resolve dev dependency audit findings (WealthLedger/frontend#103)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m33s
2026-10-23 14:13:08 +03:00
ksv741 ed811e88fa chore(release): 1.2.0
Frontend verify / commits (pull_request) Successful in 39s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 6m48s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 6m45s
Frontend image / publish (push) Successful in 7m55s
2026-10-18 16:24:32 +03:00
codex-bot eefdde29f8 chore: adopt linear git model in frontend docs (#91)
Frontend verify / commits (push) Skipped
Frontend verify / commits (pull_request) Failing after 39s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m24s
2026-10-17 14:25:51 +03:00
codex-bot 5134106696 test: cover non-retry of INVALID_TBANK_TOKEN reads (WealthLedger/backend#59) (#90)
Frontend verify / commits (push) Skipped
Frontend verify / commits (pull_request) Failing after 44s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m45s
2026-10-16 23:23:12 +03:00
codex-bot ebe92684a7 fix: align password validation with backend ASCII policy (WealthLedger/backend#60) (#89)
Frontend verify / commits (push) Skipped
Frontend verify / commits (pull_request) Failing after 40s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m35s
2026-10-16 10:00:54 +03:00
codex-bot 6f1226b668 Merge pull request 'chore: synchronize release 1.1.0 into develop (WealthLedger/main#30)' (#68) from main into develop
Frontend verify / commits (push) Skipped
Frontend verify / commits (pull_request) Failing after 35s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 6m57s
2026-10-16 08:04:34 +03:00
codex-bot d409a297e5 ci: keep pre-commit proportionate and avoid tool downloads (WealthLedger/frontend#62) (#86)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 6m21s
Frontend verify / commits (pull_request) Failing after 34s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
2026-10-15 06:34:36 +03:00
codex-bot ed63adad94 fix: deliver screener OpenAPI constraints (WealthLedger/backend#70) (#85)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 6m25s
2026-10-15 06:15:53 +03:00
codex-bot bc28973d1a ci: recheck PR title on edited without the full pipeline (WealthLedger/frontend#64)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Successful in 8m12s
2026-10-14 22:46:51 +03:00
codex-bot 20618fb033 Merge pull request 'fix(events): seven-date default period and picker from today (WealthLedger/frontend#63)' (#83) from fix/64-upcoming-events-date-filter into develop
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Successful in 8m18s
2026-10-14 21:34:59 +03:00
ksv741 612ab62509 fix(events): seven-date default period and picker from today (WealthLedger/frontend#63)
Frontend verify / commits (pull_request) Successful in 50s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 7m7s
2026-10-14 21:22:09 +03:00
codex-bot f295dea6a6 fix: respect query eligibility in screen sync (WealthLedger/frontend#54)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Successful in 8m22s
2026-10-14 17:01:53 +03:00
codex-bot f3725c202b test: await client settlement in late-response cases (WealthLedger/frontend#61) (#81)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 7m35s
2026-10-14 14:13:41 +03:00
ksv741 edc7097bd7 Merge pull request 'fix(auth,bank): guard switch-auth nav and surface banking retry (#56, #57)' (#80) from feature/56-57-auth-pending-banking-feedback into develop
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 7m50s
Reviewed-on: #80
2026-10-14 12:01:28 +03:00
ksv741 233680448f fix(bank): break BankFeedback's shared/api edge for stories (#80)
Frontend verify / commits (pull_request) Successful in 42s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 6m36s
BankFeedback lived under entities/bank-card/ui but pulled apiErrorCode
from @/shared/api, which dragged the entire api layer (openapi-fetch,
openapi-react-query, @tanstack/react-query, client, problem-details,
resource-query) into any Storybook story that imported a sibling
view, breaking stories-must-not-reach-application-data.

Move the local 'extract code from unknown' helper into the entity
and consume it from BankFeedback. The shared helper stays in
shared/api for the rest of the app.
2026-10-14 11:25:20 +03:00
ksv741 e38ecd87d6 fix(auth,bank): guard switch-auth nav and surface banking retry
Frontend verify / commits (pull_request) Successful in 39s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Failing after 5m50s
AuthForm disables the switch-auth Link while submit is pending so pointer
click and Enter can no longer leave the auth route and lose the draft/error
context. The form restores a true Link after the request settles.

CardsPage/CardPage distinguish cold vs cached banking failures:
- cold card/section errors expose accessible alert + retry
- cached failures keep the previous data and offer a section GET retry
- summary-only/history-only outages do not hide successful sections
- notFound still skips the retry CTA

Tests cover the pending link guard, cold/cached cards error with retry,
summary failure with retry, and the prerequisite card list recovery.

Closes #56, #57
2026-10-14 10:43:34 +03:00
codex-bot e5f8bbe33c test: cover null events and income envelopes on account pages (#72) (#79)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Successful in 7m11s
2026-10-13 23:15:56 +03:00
codex-bot f7f53ff8e4 test: cover null resource envelopes for account pages (#70) (#71) (#78)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Successful in 7m21s
2026-10-13 22:53:28 +03:00
codex-bot df05c8c7db build: use native openapi-typescript --check (#60) (#77)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Successful in 7m33s
2026-10-13 21:32:33 +03:00
codex-bot e67c47b102 refactor: derive payment-system options from schema tuple (#58) (#75)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Successful in 7m56s
2026-10-13 21:05:07 +03:00
codex-bot 43b0f5574a feat: unify income payment cards and remove comparisons (WealthLedger/main#33) (#74)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 7m18s
feat: unify income payment cards and remove comparisons (WealthLedger/main#33)
2026-10-13 18:17:35 +03:00
ksv741 c7d8d2c8f9 ci: validate release PR commits independently (WealthLedger/main#30)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend image / publish (push) Successful in 6m45s
Frontend verify / verify (push) Successful in 6m7s
Frontend verify / commits (pull_request) Successful in 37s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 5m58s
2026-10-12 23:39:30 +03:00
ksv741 9d900b331a chore(release): 1.1.0
Frontend verify / commits (pull_request) Failing after 42s
Frontend verify / security (pull_request) Skipped
Frontend verify / verify (pull_request) Skipped
2026-10-12 23:19:12 +03:00
codex-bot b357743c10 Merge pull request 'chore: align frontend engineering workflow (WealthLedger/main#27)' (#66) from chore/27-engineering-workflow into develop
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 7m9s
2026-10-12 11:00:35 +03:00
ksv741 0d747cc93e docs: pin frontend workflow reference (WealthLedger/main#27)
Frontend verify / commits (pull_request) Successful in 39s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 6m7s
2026-10-12 10:22:13 +03:00
ksv741 c315f80b1b fix: align frontend workflow rules (WealthLedger/main#27)
Frontend verify / commits (pull_request) Successful in 48s
Frontend verify / security (pull_request) Successful in 11s
Frontend verify / verify (pull_request) Canceled after 1m36s
2026-10-12 10:19:36 +03:00
ksv741 617edfd489 chore: align frontend engineering workflow (WealthLedger/main#27)
Frontend verify / commits (pull_request) Successful in 35s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Failing after 3m11s
2026-10-12 09:20:13 +03:00
codex-bot 9ad3245efe Merge pull request 'docs: clarify frontend verification policy' (#65) from codex/issue-24-process into develop
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 6m56s
2026-10-11 23:23:10 +03:00
ksv741 cac4351bc4 docs: clarify frontend verification policy
Frontend verify / commits (pull_request) Successful in 41s
Frontend verify / security (pull_request) Successful in 11s
Frontend verify / verify (pull_request) Successful in 6m34s
2026-10-11 23:06:51 +03:00
codex-bot 17f5bae69b feat: add stock screener
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Successful in 6m39s
2026-10-11 11:50:39 +03:00
ksv741 c8821200ce ci: skip checks on PR metadata edits
Frontend verify / commits (pull_request) Successful in 34s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 5m37s
2026-10-11 11:36:51 +03:00
ksv741 cec9c6348a fix: preserve latest stock screener result
Frontend verify / commits (pull_request) Successful in 35s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 5m47s
2026-10-11 11:11:58 +03:00
ksv741 a84411df39 feat: add stock screener 2026-10-11 11:11:58 +03:00
ksv741 3c226f8c29 feat: render hourly investment states
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Successful in 7m41s
2026-10-09 21:13:34 +03:00
ksv741 20b2cdfd43 fix: show bank summary totals 2026-10-09 21:13:34 +03:00
codex-bot dcd1e3c278 Merge pull request 'feat: align investment client with hourly sync' (#50) from release/1.0.0 into develop
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Successful in 7m32s
Merge hourly sync frontend client
2026-10-09 09:19:49 +03:00
ksv741 432cca299f feat: align investment client with hourly sync
Frontend verify / commits (pull_request) Successful in 40s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 6m43s
2026-10-09 09:04:45 +03:00
139 changed files with 6919 additions and 5326 deletions
+7 -1
View File
@@ -30,7 +30,8 @@ backend checkout и не проверяют backend runtime OpenAPI; измен
shape/status/route сохраняет shape/status/route сохраняет
публичный контракт предоставленного snapshot. публичный контракт предоставленного snapshot.
Одна UI-модель не требует менять API. `openapi:generate` работает offline от snapshot; Одна UI-модель не требует менять API. `openapi:generate` работает offline от snapshot;
`openapi:check` генерирует во временный каталог и сравнивает, не меняя tracked files. `openapi:check` запускает native `--check` того же CLI и падает при устаревших
generated types, не меняя tracked files.
## Auth и invalidation ## Auth и invalidation
@@ -39,6 +40,11 @@ Authorization. Auth endpoints исключены из Bearer/retry middleware. R
координируется single-flight; после `401` с `UNAUTHORIZED` возможен один retry. координируется single-flight; после `401` с `UNAUTHORIZED` возможен один retry.
Не добавляй собственный refresh/retry loop в caller. Не добавляй собственный refresh/retry loop в caller.
Refresh, завершившийся `401`, очищает session. Сетевая ошибка и `5xx`
(например, деплой backend) не доказывают конец session: она сохраняется,
`unavailable` показывает retry-экран вместо login, а следующий `401` снова
запускает refresh. Retry/backoff внутри refresh не добавляется.
Cookie-writing requests упорядочены только в текущей вкладке. Cross-tab auth Cookie-writing requests упорядочены только в текущей вкладке. Cross-tab auth
synchronization не требуется; допустим reload/re-login. Web Locks и отдельные synchronization не требуется; допустим reload/re-login. Web Locks и отдельные
token stores не добавляются. token stores не добавляются.
+35 -15
View File
@@ -7,11 +7,19 @@
checkout. Внешний API задаётся предоставленным публичным контрактом; checkout. Внешний API задаётся предоставленным публичным контрактом;
исходники или инструкции его реализации не являются зависимостью разработки. исходники или инструкции его реализации не являются зависимостью разработки.
При нехватке требования сообщи, какое решение не определено, до его реализации. При нехватке требования сообщи, какое решение не определено, до его реализации.
При конфликте с общим шаблоном следуй местным правилам и явному запросу
пользователя. Выбирай реализацию самостоятельно, но изменение финансовой
логики, публичного контракта или утверждённой семантики возвращай владельцу
на согласование до зависимой работы.
Начни с результата и affected areas. До edits проследи flow/invariants, найди Начни с результата и affected areas. До edits проследи flow/invariants, найди
owner и 1–3 примера. Код показывает механизм; случайный аналог не меняет контракт. owner и 1–3 примера. Код показывает механизм; случайный аналог не меняет контракт.
Работай напрямую; OpenSpec/SDD lifecycle — только по явному запросу. Выбери lightweight или SDD по [Engineering Workflow](https://git.personal.ksv741.ru/WealthLedger/main/src/commit/03b3b59e6ff2ba391f9dfc42a039a96d0d84c1c9/.ai/conventions/engineering-workflow.md);
Перед Node-командами активируй местную `.nvmrc`: `nvm use --silent`. OpenSpec lifecycle начинай после явного решения Change Owner.
Перед Node-командами активируй местную `.nvmrc`: если `nvm` не загружен в
non-interactive shell, загрузи установленный `$HOME/.nvm/nvm.sh`; затем
выполни `nvm use --silent` из frontend. Если `nvm.sh` недоступен, остановись,
не используй системный Node.
Сохраняй чужие staged/unstaged/untracked изменения и read-only архивы. Сохраняй чужие staged/unstaged/untracked изменения и read-only архивы.
## Change scope ## Change scope
@@ -57,21 +65,33 @@ Peer-конфликт решай совместимыми версиями бе
## Проверки и завершение ## Проверки и завершение
Code/dependency change: `npm ci`, полный `npm run verify` и дополнительные | Когда | Что проверить |
risk checks из местной testing convention. Targeted tests ускоряют итерацию, | --- | --- |
но не заменяют финальный gate. `lint:fix`/format — edits, не proof. | Окружение новое, изменились manifest/lockfile или Node, установка сомнительна | `npm ci` до Node-проверок; одна правка кода переустановки не требует. |
Markdown-only: проверь новые/изменённые тексты, локальные ссылки/якоря, маршруты | Итерация | Адресные тесты, typecheck и lint по затронутому поведению и риску. При изменении поведения добавь/обнови содержательную регрессию, если существующая проверка не ловит её; для косметики не создавай искусственный тест. |
чтения и `git diff --check`; application build ради текста не нужен. | Итоговый code/dependency diff | Перед объявлением готовности и передачей к интеграции выполни один полный `npm run verify` на итоговых входах. Дополнительные risk checks из testing convention и явно утверждённые task checks обязательны; CI проверяет независимо. |
Повтори routing по staged/unstaged/new files. Запиши краткие команды, результаты | Только Markdown | Проверь тексты, ссылки/якоря, маршруты чтения и `git diff --check`; application build не нужен. При изменении verification-контура проверь его работу. |
и ограничения. Зелёный lint не заменяет semantic/security review. | Pre-commit | Hook не скачивает tools: вызывай установленные бинарники из `node_modules/.bin` (не `npx`). Full graph не входит в hook; он выполняется в `npm run verify` и CI. |
Повтори routing по staged/unstaged/new files. В отчёте по задаче/PR запиши
проверенные входы, команду, exit code, результат и ограничения. Повторяй
проверку при изменении значимых входов (включая config, dependencies и
generated artifacts), сомнении в evidence или явном запросе пользователя.
`lint:fix`/format — edits, не proof; lint не заменяет semantic/security review.
## Git и релизы ## Git и релизы
Работа — в `codex/<task>` от актуального `develop`, затем PR в `develop`. Работа — в ветке `<type>/<issue-number>-<slug>` от актуального `develop`,
затем PR в `develop`; для cross-repo ссылки укажи owner/repo#number.
Сохраняй чужие изменения; перед commit просмотри staged paths и diff. Сохраняй чужие изменения; перед commit просмотри staged paths и diff.
Commits и PR titles — Conventional Commits; допустим `spec:`. Каждый commit Commits и PR titles — Conventional Commits с parser-recognized Issue reference (`fix: … (#12)`
содержит одну связанную задачу. При связанной issue добавь её номер в конец или `chore: … (WealthLedger/main#27)`); допустим `spec:`. Каждый commit
заголовка (`fix: … #12`); без issue номер не нужен. Root другого checkout содержит одну связанную задачу. Исключения release и правила ссылки — в
не управляет этим repo. Engineering Workflow из AGENTS. Root другого checkout не управляет этим repo.
Прямой push в `main`, force-push и перенос опубликованных тегов не входят в Прямой push в `main`, force-push и перенос опубликованных тегов не входят в
обычную работу. Перед release/hotfix прочитай местный README, раздел «Релизы». обычную работу. PR сливается squash или rebase-merge; merge-коммит не
используется. `main` обновляется только fast-forward из `develop`, поэтому
`origin/main` всегда предок `origin/develop`:
`git merge-base --is-ancestor origin/main origin/develop`. Срочный fix —
обычная ветка `fix/*` от `develop`; пути hotfix от `main` нет.
Перед релизом прочитай местный README, раздел «Релизы».
+12
View File
@@ -0,0 +1,12 @@
---
name: Bug Report
about: Неверное поведение
---
## Проблема и шаги воспроизведения
## Факт / ожидание
## Acceptance Criteria
- [ ]
## Окружение / ссылки (если применимо)
+10
View File
@@ -0,0 +1,10 @@
---
name: Engineering Task
about: CI, тесты, документация, процесс и прочее
---
## Контекст и результат
## Scope / связанные Issues (если есть)
## Acceptance Criteria
- [ ]
+12
View File
@@ -0,0 +1,12 @@
---
name: Feature Request
about: Новое наблюдаемое поведение
---
## Зачем и какой результат
## Ожидаемое поведение
## Acceptance Criteria
- [ ]
## Зависимости / связанные Issues (если есть)
+12
View File
@@ -0,0 +1,12 @@
---
name: Refactoring / Technical Debt
about: Улучшение без нового поведения
---
## Проблема и результат
## Сохраняемые инварианты / границы
## Acceptance Criteria
- [ ]
## Зависимости / ссылки (если есть)
+11
View File
@@ -0,0 +1,11 @@
## Summary
## Linked Issue
Refs
## Changes
## Verification
- Команда / результат / ограничения:
## Breaking Changes (если есть)
+34
View File
@@ -0,0 +1,34 @@
name: Frontend verify
# Metadata-only: refreshes only the `commits` context after a PR title edit.
# Same workflow name keeps the required context; `security` and `verify`
# statuses of the head revision stay untouched (no skipped overwrite).
on:
pull_request:
types: [edited]
concurrency:
group: frontend-pr-title-${{ gitea.event.pull_request.number }}
cancel-in-progress: true
jobs:
commits:
timeout-minutes: 15
runs-on: ubuntu-latest
steps:
- uses: https://github.com/actions/checkout@v4
with:
ref: ${{ github.event.pull_request.head.sha }}
fetch-depth: 0
- uses: https://github.com/actions/setup-node@v4
with:
node-version-file: .nvmrc
- run: npm ci --ignore-scripts
- name: Check PR title and commits
env:
PR_TITLE: ${{ github.event.pull_request.title }}
BASE_SHA: ${{ github.event.pull_request.base.sha }}
HEAD_SHA: ${{ github.event.pull_request.head.sha }}
run: |
printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
+7 -3
View File
@@ -4,7 +4,7 @@ on:
push: push:
branches: [develop, main] branches: [develop, main]
pull_request: pull_request:
types: [opened, synchronize, reopened, edited] types: [opened, synchronize, reopened]
schedule: schedule:
- cron: '17 5 * * *' - cron: '17 5 * * *'
@@ -34,7 +34,11 @@ jobs:
HEAD_SHA: ${{ github.event.pull_request.head.sha }} HEAD_SHA: ${{ github.event.pull_request.head.sha }}
run: | run: |
printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA" if [[ "$PR_TITLE" =~ ^chore\(release\):\ [0-9]+\.[0-9]+\.[0-9]+$ ]]; then
npm run commitlint -- --strict --from "$HEAD_SHA^" --to "$HEAD_SHA"
else
npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
fi
security: security:
needs: commits needs: commits
@@ -62,7 +66,7 @@ jobs:
- name: Verify pre-commit secret blocking and redaction - name: Verify pre-commit secret blocking and redaction
run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs
- name: Audit runtime and development dependencies - name: Audit runtime and development dependencies
run: npm audit --include=dev --audit-level=low run: npm audit --include=dev --audit-level=moderate
verify: verify:
needs: [commits, security] needs: [commits, security]
+5 -2
View File
@@ -1,3 +1,6 @@
gitleaks git --pre-commit --staged --redact=100 --no-banner || exit $? gitleaks git --pre-commit --staged --redact=100 --no-banner || exit $?
npx lint-staged if [ ! -x node_modules/.bin/lint-staged ]; then
npm run deps echo "lint-staged is not installed; run npm ci" >&2
exit 1
fi
node_modules/.bin/lint-staged
+1 -1
View File
@@ -1 +1 @@
24.21.0 24.22.1
+3
View File
@@ -4,6 +4,9 @@
только его файлы и предоставленные публичные контракты. Перед работой прочитай только его файлы и предоставленные публичные контракты. Перед работой прочитай
[порядок работы](.ai/conventions/engineering.md#граница-и-порядок-работы), затем [порядок работы](.ai/conventions/engineering.md#граница-и-порядок-работы), затем
объединяй triggers задачи и путей; читай активированные темы до решения. объединяй triggers задачи и путей; читай активированные темы до решения.
До edits найди/создай подходящую Gitea Issue, проверь AC и ветку; чтение
допускается без Issue. Общий маршрут — [Engineering Workflow](https://git.personal.ksv741.ru/WealthLedger/main/src/commit/03b3b59e6ff2ba391f9dfc42a039a96d0d84c1c9/.ai/conventions/engineering-workflow.md)
(main#28; после merge — актуальная версия `develop`).
| Решение / сигнал | Читать | | Решение / сигнал | Читать |
| --- | --- | | --- | --- |
+80
View File
@@ -1,5 +1,85 @@
# Changelog # Changelog
## [1.2.1](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.0...v1.2.1) (2026-10-24)
### Bug Fixes
* keep session when refresh fails on network error or 5xx (WealthLedger/frontend[#97](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/97)) ([3af9df0](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3af9df0ae2f0fb314c276504ef7d50a7472de680))
* show snapshot time in browser time zone ([#101](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/101)) ([b009101](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b009101b7b954e8462672a9da859267ebb71edc4))
### Maintenance
* bump Node to 24.22.1 (WealthLedger/backend[#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([2cd6b1e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2cd6b1e72d97117b0c37465aac3d989b0469c1c3))
* bump test stack and fix npm audit findings ([#105](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/105)) ([7e6fd95](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7e6fd95cfaf7d288242fb46ec7091f561e6f3de5))
* **deps:** update non-major dependencies [#9](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/9) ([b5ceb77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b5ceb77208e35a0e389258f3d3c4b85852980042))
* resolve dev dependency audit findings (WealthLedger/frontend[#103](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/103)) ([7b6f34c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7b6f34c776fa3517c93b5c3468e3b277aaa6273f))
## [1.2.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.1.0...v1.2.0) (2026-10-18)
### Features
* unify income payment cards and remove comparisons (WealthLedger/main[#33](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/33)) ([#74](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/74)) ([43b0f55](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/43b0f5574a79e26de0abae35de16d8aa8700f718))
### Bug Fixes
* align password validation with backend ASCII policy (WealthLedger/backend[#60](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/60)) ([#89](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/89)) ([ebe9268](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ebe92684a74b4e2617b04ef00d9406b8a0f674ea))
* **auth,bank:** guard switch-auth nav and surface banking retry ([e38ecd8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e38ecd87d6f69968bb56e6035ceeb6cfda208a3f)), closes [#56](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/56) [#57](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/57)
* **bank:** break BankFeedback's shared/api edge for stories ([#80](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/80)) ([2336804](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/233680448f97dc3ec57d7665ec14c68ac92410e5))
* deliver screener OpenAPI constraints (WealthLedger/backend[#70](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/70)) ([#85](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/85)) ([ed63ada](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ed63adad94f5d0e20f7d0d1446a235f953d10ec2))
* **events:** seven-date default period and picker from today (WealthLedger/frontend[#63](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/63)) ([612ab62](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/612ab6250979bf8d9b57f4feb6e1476ed3d759e4))
* respect query eligibility in screen sync (WealthLedger/frontend[#54](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/54)) ([f295dea](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f295dea6a6a33c597c753b52aff629d5382c963a))
### Refactoring
* derive payment-system options from schema tuple ([#58](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/58)) ([#75](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/75)) ([e67c47b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e67c47b102329877eb5d9c9d8bb4ea7c0bc70883))
### Build
* use native openapi-typescript --check ([#60](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/60)) ([#77](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/77)) ([df05c8c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/df05c8c7dbb5d6816fb95d54ca43cd0d83eecd48))
### CI
* keep pre-commit proportionate and avoid tool downloads (WealthLedger/frontend[#62](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/62)) ([#86](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/86)) ([d409a29](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/d409a297e5f9ae5658d4efa958bda9a012a859a1))
* recheck PR title on edited without the full pipeline (WealthLedger/frontend[#64](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/64)) ([bc28973](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/bc28973d1ad5e15bfbc2e5b73b00ba63449933db))
### Tests
* await client settlement in late-response cases (WealthLedger/frontend[#61](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/61)) ([#81](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/81)) ([f3725c2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f3725c202bd8cef4ba711085df82a921a2da6b7d))
* cover non-retry of INVALID_TBANK_TOKEN reads (WealthLedger/backend[#59](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/59)) ([#90](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/90)) ([5134106](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/513410669680480a1f68f5720744cc85e43c8286))
* cover null events and income envelopes on account pages ([#72](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/72)) ([#79](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/79)) ([e5f8bbe](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e5f8bbe33cd438f432281818c5276abe9a425646))
* cover null resource envelopes for account pages ([#70](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/70)) ([#71](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/71)) ([#78](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/78)) ([f7f53ff](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/f7f53ff8e4de3c1d06fac6063974ff9667145ed6))
### Maintenance
* adopt linear git model in frontend docs ([#91](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/91)) ([eefdde2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/eefdde29f8da269581e90bd797078e10a39e472f))
## [1.1.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.0.0...v1.1.0) (2026-10-12)
### Features
* add stock screener ([a84411d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a84411df39dc131290e9f5b5d9313fed17cc629a))
* align investment client with hourly sync ([432cca2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/432cca299f3a9a9e45b2697527369ee95f2d0adc))
* render hourly investment states ([3c226f8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3c226f8c29efceccb75af0d6424639a757534f39))
### Bug Fixes
* align frontend workflow rules (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([c315f80](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c315f80b1b07ae0888366512ec157b8e29c81d62))
* preserve latest stock screener result ([cec9c63](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cec9c6348a389f16f272dac5533aebc9d12ceae8))
* show bank summary totals ([20b2cdf](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/20b2cdfd432f8b01e447f68657cf5c685a297f1e))
### Documentation
* clarify frontend verification policy ([cac4351](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cac4351bc4abf2cec7c5b6611a74d87bf4ec2f70))
* pin frontend workflow reference (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([0d747cc](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0d747cc93ee08c337cf300c0367612708f45dfb9))
### CI
* skip checks on PR metadata edits ([c882120](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c8821200ce699dab1ce65360d1968d5877a2e78b))
### Maintenance
* align frontend engineering workflow (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([617edfd](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/617edfd489a6a84bb33b57386eca4eb54661f4f0))
## [1.0.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.4.0...v1.0.0) (2026-10-07) ## [1.0.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.4.0...v1.0.0) (2026-10-07)
### ⚠ BREAKING CHANGES ### ⚠ BREAKING CHANGES
+2 -2
View File
@@ -1,4 +1,4 @@
FROM node:24.21.0-bookworm-slim AS dependencies FROM node:24.22.1-bookworm-slim AS dependencies
WORKDIR /app WORKDIR /app
ENV HUSKY=0 ENV HUSKY=0
COPY package.json package-lock.json ./ COPY package.json package-lock.json ./
@@ -19,7 +19,7 @@ COPY . .
ENV VITE_API_BASE_URL="" ENV VITE_API_BASE_URL=""
RUN npm run build RUN npm run build
FROM nginx:1.28.0-alpine AS production FROM nginx:1.31.8-alpine AS production
ARG VERSION ARG VERSION
ARG REVISION ARG REVISION
LABEL org.opencontainers.image.version=$VERSION \ LABEL org.opencontainers.image.version=$VERSION \
+54 -23
View File
@@ -19,8 +19,10 @@ npm run dev
Для commits установите [Gitleaks](https://github.com/gitleaks/gitleaks/releases/tag/v8.30.1) Для commits установите [Gitleaks](https://github.com/gitleaks/gitleaks/releases/tag/v8.30.1)
8.30.1 в `PATH` (macOS: `brew install gitleaks`). Pre-commit сначала проверяет 8.30.1 в `PATH` (macOS: `brew install gitleaks`). Pre-commit сначала проверяет
staged diff с полной редакцией секретов, затем запускает formatting и FSD checks. staged diff с полной редакцией секретов, затем запускает установленный
Находка или отсутствие Gitleaks блокирует commit. `node_modules/.bin/lint-staged` только для staged JS/TS. Hook не скачивает tools и
не запускает full graph: полный `npm run verify` выполняется в CI и перед передачей.
Находка или отсутствие Gitleaks либо lint-staged блокирует commit.
Проверка этого поведения: `node --test scripts/test-pre-commit.mjs`. Проверка этого поведения: `node --test scripts/test-pre-commit.mjs`.
## Контейнерный image ## Контейнерный image
@@ -116,14 +118,17 @@ Chromium при ширинах 375 и 1280 px. Browser project не исполь
Единый `.gitea/workflows/verify.yml` запускает `commits → security → verify` Единый `.gitea/workflows/verify.yml` запускает `commits → security → verify`
последовательно на PR; на push в `develop`/`main` — `security → verify`. последовательно на PR; на push в `develop`/`main` — `security → verify`.
Рабочие ветки проверяются после открытия PR, без дублирующего push-запуска. Рабочие ветки проверяются после открытия PR, без дублирующего push-запуска.
Изменение заголовка PR тоже повторяет проверки Conventional Commits. Изменение заголовка PR запускает `.gitea/workflows/pr-title.yml` (то же имя workflow,
только job `commits`): статусы `security` и `verify` на HEAD не перезаписываются.
Новый запуск отменяет устаревший для того же PR/ветки и типа события Новый запуск отменяет устаревший для того же PR/ветки и типа события
(требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`. (требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
`npm audit --include=dev --audit-level=low`. Любой advisory блокирует security job; `npm audit --include=dev --audit-level=moderate`. Advisory уровня moderate и выше
исключений frontend нет. Локально можно выполнить те же команды: блокирует security job; low не блокирует, т.к. для них часто нет исправленной версии
(например, GHSA-gcqx-w48m-w2h4 в build-only deepmerge). Других исключений нет.
Локально можно выполнить те же команды:
`gitleaks git --log-opts=--all --redact=100 --no-banner` и `gitleaks git --log-opts=--all --redact=100 --no-banner` и
`npm audit --include=dev --audit-level=low`. Audit требует доступа к npm registry; `npm audit --include=dev --audit-level=moderate`. Audit требует доступа к npm registry;
проверка секретов выполняется локально и не выводит их значения. проверка секретов выполняется локально и не выводит их значения.
Имена jobs `commits`, `security`, `verify` сохранены, но Gitea включает имя Имена jobs `commits`, `security`, `verify` сохранены, но Gitea включает имя
@@ -203,7 +208,8 @@ Checkout frontend содержит все входы сборки и прове
локальную копию и не обращаются к исходникам или CI сервера. Доставка новой локальную копию и не обращаются к исходникам или CI сервера. Доставка новой
схемы — явное обновление snapshot с review и `npm run openapi:generate`. схемы — явное обновление snapshot с review и `npm run openapi:generate`.
Runtime URL API задаётся окружением, а не расположением другого репозитория. Runtime URL API задаётся окружением, а не расположением другого репозитория.
Разработка идёт напрямую по задаче пользователя; OpenSpec/SDD — по явному запросу. Разработка начинается с Issue; lightweight или SDD выбирается по критериям
Engineering Workflow из AGENTS. OpenSpec — после явного решения Change Owner.
Knip исключает `conventional-changelog-conventionalcommits`: release-it загружает Knip исключает `conventional-changelog-conventionalcommits`: release-it загружает
preset по имени из `.release-it.json`. Версия preset закреплена напрямую. preset по имени из `.release-it.json`. Версия preset закреплена напрямую.
@@ -211,36 +217,61 @@ preset по имени из `.release-it.json`. Версия preset закреп
## Релизы ## Релизы
Репозиторий выпускается независимо. `develop` — интеграция, `main` — принятые Репозиторий выпускается независимо. `develop` — интеграция, `main` — принятые
релизы. Работа: `codex/<task>` от актуального `develop`, PR в `develop`. релизы. Обычная работа: issue-linked ветка от актуального `develop`, PR в `develop`;
Обычные PR допускают squash; release и обратная синхронизация сохраняют историю. общие правила — в Engineering Workflow по ссылке из AGENTS.
Commits и PR titles — Conventional Commits, включая `spec:`. Версии вручную не повышай. PR сливается squash или rebase-merge; merge-коммит не используется. `main`
обновляется только fast-forward из `develop`, поэтому история линейна:
1. Получи `main`, `develop` и теги: `git fetch origin --tags`. Убедись, что ```text
`develop` содержит последний релиз. Создай `release/<name>` от проверенного <type>/<issue>-<slug> --squash--> develop --ff-only--> main --> tag vX.Y.Z
`develop`; `nvm use --silent`, `npm ci`. Hotfix начинается от `main` в ```
`release/hotfix-<name>` и проходит тот же процесс.
Инвариант: `origin/main` всегда предок `origin/develop`. Проверка:
```bash
git fetch -q origin
git merge-base --is-ancestor origin/main origin/develop && echo ok || echo BROKEN
```
Commits и PR titles — Conventional Commits со ссылкой на Issue (кроме release),
включая `spec:`. Версии вручную не повышай.
1. Получи `main`, `develop` и теги: `git fetch origin --tags`. Проверь
инвариант. Создай `release/X.Y.Z` от проверенного `develop`;
`nvm use --silent`, `npm ci`.
2. На чистой ветке выполни `npm run release:preview`, просмотри версию/changelog, 2. На чистой ветке выполни `npm run release:preview`, просмотри версию/changelog,
затем `npm run release:prepare`. Команда создаёт `chore(release): X.Y.Z`, затем `npm run release:prepare`. Команда создаёт `chore(release): X.Y.Z`,
обновляет manifest/lockfile/CHANGELOG; тег и push не выполняет. Не обходи обновляет manifest/lockfile/CHANGELOG; тег и push не выполняет. Не обходи
guards ветки, чистого дерева, отсутствующих тегов или уже подготовленной версии. guards ветки, чистого дерева, отсутствующих тегов или уже подготовленной версии.
3. Проверь diff и штатные gates этого репозитория. Отправь только release-ветку, 3. Проверь diff и штатные gates этого репозитория. Отправь только release-ветку,
открой PR в `main` с заголовком `chore(release): X.Y.Z`. После зелёных открой PR в **`develop`** с заголовком `chore(release): X.Y.Z`. После зелёных
`verify`, `security`, `commits` выполни fast-forward-only merge. Если `main` `verify`, `security`, `commits` выполни fast-forward-only merge. Если
изменился, согласуй историю и повтори проверки кандидата. `develop` изменился, обнови release-ветку и повтори проверки кандидата.
4. Получи удалённый `main`, сравни его HEAD с проверенным release SHA и версией 4. Открой PR `develop → main` с тем же заголовком и слей fast-forward-only.
5. Получи удалённый `main`, сравни его HEAD с проверенным release SHA и версией
manifest/lockfile. Создай аннотированный `vX.Y.Z` именно на этом SHA: manifest/lockfile. Создай аннотированный `vX.Y.Z` именно на этом SHA:
`git tag -a vX.Y.Z <release-sha> -m "Release X.Y.Z"`, затем отправь только `git tag -a vX.Y.Z <release-sha> -m "Release X.Y.Z"`, затем отправь только
`git push origin refs/tags/vX.Y.Z`. Не запускай release-it повторно на `main`. `git push origin refs/tags/vX.Y.Z`. Не запускай release-it повторно на `main`.
5. Верни release-коммит через PR `main → develop` без squash/rebase; проверь,
что `develop` содержит тег. Опубликованные теги не перемещай. При сбое после Обратная синхронизация не нужна: release-коммит попал в `develop` на шаге 3.
merge создай отсутствующий тег без нового bump; до merge исправь и проверь Опубликованные теги не перемещай. При сбое после merge создай отсутствующий тег
существующий кандидат без повторного повышения версии. без нового bump; до merge исправь и проверь существующий кандидат без
повторного повышения версии.
Freeze релиза не поддерживается: пока открыт релизный PR, `develop` не двигают.
Срочный fix — обычная ветка `fix/*` от `develop` с последующим релизом;
пути от `main` нет, он сделал бы `main` не-предком `develop`. Исключение
требует явного решения: `release/hotfix-<name>` от `main`, PR в `main`, тег,
затем merge `main → develop` для восстановления инварианта.
`feat:` повышает minor, `fix:`/`perf:` и прочие разрешённые типы — patch; `feat:` повышает minor, `fix:`/`perf:` и прочие разрешённые типы — patch;
`!`/`BREAKING CHANGE:` — major, включая версии до 1.0. `chore(release):` `!`/`BREAKING CHANGE:` — major, включая версии до 1.0. `chore(release):`
исключён из рекомендации и changelog. Конфигурация — `.release-it.json`. исключён из рекомендации и changelog. Конфигурация — `.release-it.json`.
В Gitea для `main`/`develop` должны быть запрещены прямой/force push и обход В Gitea для `main`/`develop` должны быть запрещены прямой/force push и обход
администратором, обязательны `verify`, `security`, `commits`; теги `v*` защищены. администратором, включена блокировка устаревшей ветки, обязательны `verify`,
`security`, `commits`; теги `v*` защищены. Линейность обеспечивают merge styles
репозитория: merge-коммиты и rebase `--no-ff` выключены, доступны squash,
rebase-merge и fast-forward-only; стиль по умолчанию — squash.
Workflow сам не включает эти настройки. Отдельное review approval для одного Workflow сам не включает эти настройки. Отдельное review approval для одного
владельца не требуется. Npm publishing, deploy и Gitea Releases не включены. владельца не требуется. Npm publishing, deploy и Gitea Releases не включены.
+6
View File
@@ -1,6 +1,12 @@
module.exports = { module.exports = {
defaultIgnores: false,
extends: ["@commitlint/config-conventional"], extends: ["@commitlint/config-conventional"],
ignores: [
message => /^chore\(release\): \d+\.\d+\.\d+$/.test(message.trim()),
message => /^Merge pull request ['"].+['"] \(#\d+\) from .+ into .+$/.test(message.trim()),
],
rules: { rules: {
"references-empty": [2, "never"],
"type-enum": [ "type-enum": [
2, 2,
"always", "always",
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>WealthLedger</title> <title>WealthLedger</title>
</head> </head>
<body> <body>
+1241 -1291
View File
File diff suppressed because it is too large Load Diff
+56 -51
View File
@@ -1,10 +1,10 @@
{ {
"name": "wealth-ledger-frontend", "name": "wealth-ledger-frontend",
"private": true, "private": true,
"version": "1.0.0", "version": "1.2.1",
"type": "module", "type": "module",
"engines": { "engines": {
"node": "24.21.0" "node": "24.22.1"
}, },
"scripts": { "scripts": {
"dev": "npm run build:packages && vite", "dev": "npm run build:packages && vite",
@@ -20,7 +20,7 @@
"test:coverage": "npm run build:packages && vitest run --coverage", "test:coverage": "npm run build:packages && vitest run --coverage",
"test:lint": "node --test scripts/test-eslint.mjs", "test:lint": "node --test scripts/test-eslint.mjs",
"openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts", "openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts",
"openapi:check": "node scripts/check-openapi.mjs", "openapi:check": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts --check",
"knip": "npm run build:packages && knip", "knip": "npm run build:packages && knip",
"deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long", "deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long",
"verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && eslint . --max-warnings=0 && npm run test:lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry", "verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && eslint . --max-warnings=0 && npm run test:lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry",
@@ -37,89 +37,94 @@
"*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0 --no-warn-ignored" "*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0 --no-warn-ignored"
}, },
"dependencies": { "dependencies": {
"@hookform/resolvers": "5.9.1", "@hookform/resolvers": "5.9.2",
"@mantine/charts": "9.6.1", "@mantine/charts": "9.7.3",
"@mantine/core": "9.6.1", "@mantine/core": "9.7.3",
"@mantine/dates": "9.6.1", "@mantine/dates": "9.7.3",
"@mantine/hooks": "9.6.1", "@mantine/hooks": "9.7.3",
"@mantine/notifications": "9.6.1", "@mantine/notifications": "9.7.3",
"@tanstack/react-query": "5.102.8", "@tanstack/react-query": "5.104.5",
"@wealthledger/icons": "file:packages/icons", "@wealthledger/icons": "file:packages/icons",
"@wealthledger/tokens": "file:packages/tokens", "@wealthledger/tokens": "file:packages/tokens",
"@wealthledger/ui": "file:packages/ui", "@wealthledger/ui": "file:packages/ui",
"dayjs": "1.11.23", "dayjs": "1.11.23",
"i18next": "26.4.2", "i18next": "26.5.10",
"motion": "13.2.0", "motion": "13.5.1",
"openapi-fetch": "0.17.0", "openapi-fetch": "0.17.0",
"openapi-react-query": "0.5.4", "openapi-react-query": "0.5.4",
"react": "19.3.0", "react": "19.3.1",
"react-dom": "19.3.0", "react-dom": "19.3.1",
"react-hook-form": "7.88.0", "react-hook-form": "7.91.0",
"react-i18next": "17.0.14", "react-i18next": "17.1.8",
"react-is": "19.3.0", "react-is": "19.3.1",
"react-router": "8.3.1", "react-router": "8.5.0",
"recharts": "3.10.1", "recharts": "3.10.1",
"zod": "4.6.4" "zod": "4.6.7"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "8.0.5", "@babel/core": "8.0.9",
"@commitlint/cli": "21.2.2", "@commitlint/cli": "21.2.4",
"@commitlint/config-conventional": "21.2.2", "@commitlint/config-conventional": "21.2.4",
"@eslint-react/eslint-plugin": "5.21.0", "@eslint-react/eslint-plugin": "5.28.8",
"@eslint/js": "10.0.1", "@eslint/js": "10.0.1",
"@release-it/conventional-changelog": "12.0.0", "@release-it/conventional-changelog": "12.0.2",
"@rolldown/plugin-babel": "0.2.4", "@rolldown/plugin-babel": "0.2.4",
"@storybook/addon-docs": "10.6.0", "@storybook/addon-docs": "10.6.3",
"@storybook/react-vite": "10.6.0", "@storybook/react-vite": "10.6.3",
"@stylistic/eslint-plugin": "5.10.0", "@stylistic/eslint-plugin": "5.10.0",
"@tanstack/eslint-plugin-query": "5.104.0", "@tanstack/eslint-plugin-query": "5.104.5",
"@testing-library/jest-dom": "7.0.1", "@testing-library/jest-dom": "7.0.1",
"@testing-library/react": "16.3.3", "@testing-library/react": "16.3.3",
"@types/node": "24.13.4", "@types/node": "24.19.2",
"@types/react": "19.3.0", "@types/react": "19.3.0",
"@types/react-dom": "19.3.0", "@types/react-dom": "19.3.0",
"@vitejs/plugin-react": "6.1.1", "@vitejs/plugin-react": "6.1.2",
"@vitest/browser-playwright": "5.0.0", "@vitest/browser": "5.0.5",
"@vitest/coverage-v8": "5.0.0", "@vitest/browser-playwright": "5.0.5",
"@vitest/coverage-v8": "5.0.5",
"@vitest/eslint-plugin": "1.6.27", "@vitest/eslint-plugin": "1.6.27",
"@vitest/ui": "5.0.5",
"babel-plugin-react-compiler": "1.0.0", "babel-plugin-react-compiler": "1.0.0",
"conventional-changelog-conventionalcommits": "10.4.0", "conventional-changelog-conventionalcommits": "10.4.1",
"dependency-cruiser": "18.2.0", "dependency-cruiser": "18.7.0",
"eslint": "10.11.0", "eslint": "10.13.0",
"eslint-import-resolver-typescript": "4.4.5", "eslint-import-resolver-typescript": "4.4.5",
"eslint-plugin-import-x": "4.17.1", "eslint-plugin-import-x": "4.17.1",
"eslint-plugin-jest-dom": "5.10.1", "eslint-plugin-jest-dom": "5.10.1",
"eslint-plugin-no-unsanitized": "4.1.5", "eslint-plugin-no-unsanitized": "4.1.5",
"eslint-plugin-perfectionist": "5.12.1", "eslint-plugin-perfectionist": "5.13.0",
"eslint-plugin-react-hooks": "7.1.1", "eslint-plugin-react-hooks": "7.1.1",
"eslint-plugin-react-refresh": "0.5.7", "eslint-plugin-react-refresh": "0.5.7",
"eslint-plugin-regexp": "3.3.1", "eslint-plugin-regexp": "3.3.1",
"eslint-plugin-security": "4.1.0", "eslint-plugin-security": "4.2.0",
"eslint-plugin-sonarjs": "4.2.1", "eslint-plugin-sonarjs": "4.2.2",
"eslint-plugin-storybook": "10.6.0", "eslint-plugin-storybook": "10.6.3",
"eslint-plugin-testing-library": "7.16.2", "eslint-plugin-testing-library": "7.16.2",
"eslint-plugin-unicorn": "76.0.0", "eslint-plugin-unicorn": "76.0.0",
"globals": "17.12.0", "globals": "17.13.0",
"husky": "9.1.7", "husky": "9.1.7",
"jsdom": "30.0.1", "jsdom": "30.1.3",
"knip": "6.35.1", "knip": "6.43.0",
"lint-staged": "17.5.1", "lint-staged": "17.6.0",
"msw": "2.15.0", "msw": "2.15.0",
"openapi-typescript": "7.13.0", "openapi-typescript": "7.13.0",
"playwright": "1.63.0", "playwright": "1.64.1",
"release-it": "21.0.2", "release-it": "21.1.1",
"storybook": "10.6.0", "storybook": "10.6.3",
"typescript": "5.9.3", "typescript": "5.9.3",
"typescript-eslint": "8.70.1", "typescript-eslint": "8.72.0",
"vite": "8.3.0", "vite": "8.3.5",
"vite-plugin-pwa": "1.3.0", "vite-plugin-pwa": "1.3.0",
"vitest": "5.0.0" "vitest": "5.0.5"
}, },
"overrides": { "overrides": {
"release-it": { "release-it": {
"basic-ftp": "6.2.1", "basic-ftp": "6.2.3",
"undici": "7.29.1" "undici": "8.12.3"
} },
"@vitest/browser": "5.0.5",
"@vitest/ui": "5.0.5",
"@vitest/mocker": "5.0.5"
}, },
"allowScripts": { "allowScripts": {
"esbuild@0.28.2": true, "esbuild@0.28.2": true,
+4 -4
View File
@@ -20,14 +20,14 @@
"build": "vite build && tsc -p tsconfig.json" "build": "vite build && tsc -p tsconfig.json"
}, },
"peerDependencies": { "peerDependencies": {
"react": "19.3.0" "react": "19.3.1"
}, },
"devDependencies": { "devDependencies": {
"@storybook/react-vite": "10.6.0", "@storybook/react-vite": "10.6.3",
"@testing-library/react": "16.3.3", "@testing-library/react": "16.3.3",
"@types/react": "19.3.0", "@types/react": "19.3.0",
"typescript": "5.9.3", "typescript": "5.9.3",
"vite": "8.3.0", "vite": "8.3.5",
"vitest": "5.0.0" "vitest": "5.0.5"
} }
} }
+8 -8
View File
@@ -27,18 +27,18 @@
"@wealthledger/tokens": "0.3.0" "@wealthledger/tokens": "0.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "9.6.1", "@mantine/core": "9.7.3",
"@mantine/hooks": "9.6.1", "@mantine/hooks": "9.7.3",
"react": "19.3.0", "react": "19.3.1",
"react-dom": "19.3.0" "react-dom": "19.3.1"
}, },
"devDependencies": { "devDependencies": {
"@storybook/react-vite": "10.6.0", "@storybook/react-vite": "10.6.3",
"@testing-library/react": "16.3.3", "@testing-library/react": "16.3.3",
"@types/react": "19.3.0", "@types/react": "19.3.0",
"storybook": "10.6.0", "storybook": "10.6.3",
"typescript": "5.9.3", "typescript": "5.9.3",
"vite": "8.3.0", "vite": "8.3.5",
"vitest": "5.0.0" "vitest": "5.0.5"
} }
} }
-45
View File
@@ -1,45 +0,0 @@
import { spawnSync } from "node:child_process";
import { mkdtemp, readFile, rm } from "node:fs/promises";
import { tmpdir } from "node:os";
import nodePath from "node:path";
const temporaryDirectory = await mkdtemp(
nodePath.join(tmpdir(), "wealth-ledger-openapi-"),
);
const generatedPath = nodePath.join(temporaryDirectory, "schema.d.ts");
const committedPath = nodePath.resolve("src/shared/api/generated/schema.d.ts");
const cliPath = nodePath.resolve("node_modules/openapi-typescript/bin/cli.js");
let exitCode = 0;
try {
const generated = spawnSync(
process.execPath,
[cliPath, "src/shared/api/spec/openapi.json", "-o", generatedPath],
{ encoding: "utf8" },
);
if (generated.status === 0) {
const [committed, current] = await Promise.all([
readFile(committedPath, "utf8"),
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
readFile(generatedPath, "utf8"),
]);
if (committed !== current) {
console.error(
"Generated OpenAPI types are stale. Run `npm run openapi:generate` and commit the result.",
);
exitCode = 1;
}
}
else {
process.stderr.write(generated.stderr || generated.stdout);
exitCode = generated.status ?? 1;
}
}
finally {
await rm(temporaryDirectory, { force: true, recursive: true });
}
process.exitCode = exitCode;
+1 -1
View File
@@ -85,7 +85,7 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as
"security/detect-non-literal-regexp", "security/detect-non-literal-regexp",
], ],
[ [
"scripts/check-openapi.mjs", "scripts/test-pre-commit.mjs",
"import { exec } from \"node:child_process\"; exec(process.argv[2]);", "import { exec } from \"node:child_process\"; exec(process.argv[2]);",
"security/detect-child-process", "security/detect-child-process",
], ],
+40
View File
@@ -47,6 +47,12 @@ test("pre-commit scans the index, redacts findings and fails closed", () => {
} }
git("init", "--quiet"); git("init", "--quiet");
// The hook must run the installed lint-staged binary, never download one.
const localBin = nodePath.join(cwd, "node_modules", ".bin");
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
mkdirSync(localBin, { recursive: true });
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
writeFileSync(nodePath.join(localBin, "lint-staged"), "#!/bin/sh\necho ran >> downstream\n", { mode: 0o755 });
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
writeFileSync(nodePath.join(cwd, "sample.txt"), "safe staged content\n"); writeFileSync(nodePath.join(cwd, "sample.txt"), "safe staged content\n");
git("add", "sample.txt"); git("add", "sample.txt");
@@ -77,3 +83,37 @@ test("pre-commit scans the index, redacts findings and fails closed", () => {
rmSync(cwd, { force: true, recursive: true }); rmSync(cwd, { force: true, recursive: true });
} }
}); });
test("pre-commit never downloads tools and blocks when lint-staged is missing", () => {
const hook = nodePath.resolve(".husky/pre-commit");
const cwd = mkdtempSync(nodePath.join(tmpdir(), "frontend-hook-"));
const bin = nodePath.join(cwd, "bin");
const marker = nodePath.join(cwd, "downstream");
try {
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
mkdirSync(bin);
// Gitleaks passes; npx/npm must never be reached, even if present on PATH.
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
writeFileSync(nodePath.join(bin, "gitleaks"), "#!/bin/sh\nexit 0\n", { mode: 0o755 });
for (const command of ["npx", "npm"]) {
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
writeFileSync(nodePath.join(bin, command), "#!/bin/sh\necho ran >> downstream\n", { mode: 0o755 });
}
const result = spawnSync("/bin/sh", ["-e", hook], {
cwd,
encoding: "utf8",
env: { ...process.env, PATH: `${bin}${nodePath.delimiter}${process.env.PATH}` },
});
assert.notEqual(result.status, 0, "missing lint-staged must block commit");
assert.match(result.stderr, /lint-staged is not installed/);
// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
assert.ok(!existsSync(marker), "hook must not invoke npx or npm");
}
finally {
rmSync(cwd, { force: true, recursive: true });
}
});
+49 -15
View File
@@ -11,19 +11,28 @@ import {
} from "@testing-library/react"; } from "@testing-library/react";
import { http, HttpResponse } from "msw"; import { http, HttpResponse } from "msw";
import { MemoryRouter, useLocation } from "react-router"; import { MemoryRouter, useLocation } from "react-router";
import { beforeEach, describe, expect, it } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { BrokerageOperation } from "@/entities/broker-operation"; import type { BrokerageOperation } from "@/entities/broker-operation";
import type { IncomeAnalytics } from "@/entities/income"; import type { IncomeAnalytics } from "@/entities/income";
import type { Portfolio } from "@/entities/portfolio"; import type { Portfolio } from "@/entities/portfolio";
import { AuthProvider } from "@/features/auth"; import { AuthProvider } from "@/features/auth";
import { defaultPeriod, formatDate } from "@/shared/lib";
import { createTestQueryClient } from "@/test/query"; import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource"; import { resource } from "@/test/resource";
import { server } from "@/test/server"; import { server } from "@/test/server";
import { AppRoutes } from "./AppRoutes"; import { AppRoutes } from "./AppRoutes";
// Mantine calendar labels follow dayjs default (English) locale.
function dayLabel(date: string) {
const monthName = new Intl.DateTimeFormat("en", { month: "long" })
.format(new Date(`${date}T12:00:00Z`));
return `${Number(date.slice(8))} ${monthName} ${date.slice(0, 4)}`;
}
const accounts = [ const accounts = [
{ id: "a", name: "Основной" }, { id: "a", name: "Основной" },
{ id: "b", name: "ИИС" }, { id: "b", name: "ИИС" },
@@ -95,10 +104,6 @@ const analytics: IncomeAnalytics
}, },
], ],
period: { from: "2026-08-01", to: "2026-08-31" }, period: { from: "2026-08-01", to: "2026-08-31" },
previous: {
period: { from: "2026-07-01", to: "2026-07-31" },
totalsByCurrency: [],
},
totalsByCurrency: [ totalsByCurrency: [
{ {
coupon: { currency: "RUB", value: "2" }, coupon: { currency: "RUB", value: "2" },
@@ -107,7 +112,6 @@ const analytics: IncomeAnalytics
total: { currency: "RUB", value: "2" }, total: { currency: "RUB", value: "2" },
}, },
], ],
yearComparison: null,
}; };
const CurrentLocation: FC = () => { const CurrentLocation: FC = () => {
@@ -141,6 +145,7 @@ function renderPage(path: string) {
return client; return client;
} }
afterEach(() => vi.useRealTimers());
beforeEach(() => { beforeEach(() => {
server.use( server.use(
http.post("*/api/v1/auth/refresh", () => http.post("*/api/v1/auth/refresh", () =>
@@ -238,7 +243,7 @@ describe("All accounts routes", () => {
); );
}); });
it.each(["operations", "events", "income"])( it.each(["operations", "income"])(
"restores applied dates when switching accounts in %s", "restores applied dates when switching accounts in %s",
async (section) => { async (section) => {
const search = "?from=2026-08-01&to=2026-08-31"; const search = "?from=2026-08-01&to=2026-08-31";
@@ -266,6 +271,33 @@ describe("All accounts routes", () => {
}, },
); );
it("restores applied dates when switching accounts in events", async () => {
vi.useFakeTimers({ toFake: ["Date"] });
vi.setSystemTime(new Date("2026-10-15T12:00:00Z"));
// The events calendar blocks past dates, so pick within selectable dates.
const search = `?from=${defaultPeriod()[0]}&to=${defaultPeriod()[1]}`;
renderPage(`/accounts/all/events${search}`);
const picker = await screen.findByLabelText("Период");
fireEvent.click(picker);
const [fromDate, toDate] = defaultPeriod();
fireEvent.click(
await screen.findByRole("button", { name: dayLabel(fromDate) }),
);
fireEvent.click(
await screen.findByRole("button", { name: dayLabel(toDate) }),
);
expect(screen.getByLabelText("Период")).toHaveTextContent(
`${formatDate(fromDate)} – ${formatDate(toDate)}`,
);
fireEvent.click(screen.getByRole("combobox", { name: "Счёт" }));
fireEvent.click(await screen.findByRole("option", { name: "ИИС" }));
await waitFor(() =>
expect(screen.getByLabelText("Текущий путь")).toHaveTextContent(
`/accounts/b/events${search}`,
),
);
});
it("groups the same security and links its accounts and overview sections", async () => { it("groups the same security and links its accounts and overview sections", async () => {
renderPage("/accounts/all"); renderPage("/accounts/all");
expect(await screen.findAllByText("Сбербанк")).toHaveLength(1); expect(await screen.findAllByText("Сбербанк")).toHaveLength(1);
@@ -274,14 +306,16 @@ describe("All accounts routes", () => {
"href", "href",
`/accounts/${account.id}`, `/accounts/${account.id}`,
); );
for (const suffix of ["operations", "income", "events"])
expect( for (const [suffix, tab] of [
screen ["operations", "Операции"],
.getAllByRole("link") ["income", "Доход"],
.find( ["events", "События"],
link => link.getAttribute("href") === `/accounts/all/${suffix}`, ]) {
), fireEvent.click(screen.getByRole("tab", { name: tab }));
).toBeInTheDocument(); expect(screen.getByRole("link", { name: "Подробнее" }))
.toHaveAttribute("href", `/accounts/all/${suffix}`);
}
}); });
it("switches accounts within operations with applied filters and a fresh cursor", async () => { it("switches accounts within operations with applied filters and a fresh cursor", async () => {
+27 -2
View File
@@ -190,6 +190,30 @@ describe("AppRoutes", () => {
expect(document.title).toBe("Карты — WealthLedger"); expect(document.title).toBe("Карты — WealthLedger");
}); });
it("offers a retry instead of the login form while the server is unreachable, then restores the route", async () => {
let isOutage = true;
server.use(
http.post("*/api/v1/auth/refresh", () =>
isOutage
? new HttpResponse(null, { status: 502 })
: HttpResponse.json({
accessToken: "test-token",
user: { email: "user@example.com", id: "user-1" },
}),
),
);
renderRoutes("/accounts");
expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось подключиться");
expect(screen.queryByRole("heading", { name: "Вход" })).not.toBeInTheDocument();
isOutage = false;
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(
await screen.findByRole("heading", { level: 2, name: "Нет инвестиционных счетов" }),
).toBeVisible();
});
it("lazy-loads the protected shell for an authenticated accounts route", async () => { it("lazy-loads the protected shell for an authenticated accounts route", async () => {
server.use( server.use(
http.post("*/api/v1/auth/refresh", () => http.post("*/api/v1/auth/refresh", () =>
@@ -208,7 +232,8 @@ describe("AppRoutes", () => {
}), }),
).toBeInTheDocument(); ).toBeInTheDocument();
expect( expect(
screen.getByRole("navigation", { name: "WealthLedger" }), screen.getAllByRole("navigation", { name: "Основная навигация" }),
).toBeInTheDocument(); ).toHaveLength(2);
expect(screen.queryByRole("banner")).not.toBeInTheDocument();
}); });
}); });
@@ -10,7 +10,6 @@ import { useAuth } from "@/features/auth";
type BoundaryProps = PropsWithChildren<{ type BoundaryProps = PropsWithChildren<{
authenticated: boolean; authenticated: boolean;
routeKey: string;
}>; }>;
type RouteErrorFallbackProps = { type RouteErrorFallbackProps = {
@@ -26,12 +25,6 @@ class Boundary extends Component<BoundaryProps, State> {
override state: State = { hasError: false }; override state: State = { hasError: false };
override componentDidUpdate(previousProps: BoundaryProps) {
if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
this.setState({ hasError: false });
}
}
override render() { override render() {
return this.state.hasError return this.state.hasError
? <RouteErrorFallback authenticated={this.props.authenticated} /> ? <RouteErrorFallback authenticated={this.props.authenticated} />
@@ -70,10 +63,7 @@ const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
const { user } = useAuth(); const { user } = useAuth();
return ( return (
<Boundary <Boundary authenticated={Boolean(user)} key={`${pathname}${search}:${key}`}>
authenticated={Boolean(user)}
routeKey={`${pathname}${search}:${key}`}
>
{children} {children}
</Boundary> </Boundary>
); );
+18 -1
View File
@@ -1,4 +1,7 @@
import { Button, Container } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { type FC, type PropsWithChildren, useState } from "react"; import { type FC, type PropsWithChildren, useState } from "react";
import { useTranslation } from "react-i18next";
import { Navigate, useLocation } from "react-router"; import { Navigate, useLocation } from "react-router";
import { useAuth } from "@/features/auth"; import { useAuth } from "@/features/auth";
@@ -7,12 +10,26 @@ import { RouteSkeleton } from "./RouteFallback";
const Protected: FC<PropsWithChildren> = (props) => { const Protected: FC<PropsWithChildren> = (props) => {
const { children } = props; const { children } = props;
const { ready, signedOut, user } = useAuth(); const { ready, retry, signedOut, unavailable, user } = useAuth();
const { t } = useTranslation();
const location = useLocation(); const location = useLocation();
const [wasAuthenticated, setWasAuthenticated] = useState(false); const [wasAuthenticated, setWasAuthenticated] = useState(false);
if (user && !wasAuthenticated) setWasAuthenticated(true); if (user && !wasAuthenticated) setWasAuthenticated(true);
if (!ready) return <RouteSkeleton variant="shell" />; if (!ready) return <RouteSkeleton variant="shell" />;
// The server was unreachable (e.g. mid-deploy), so the session is unproven, not gone.
if (!user && unavailable)
return (
<Container py="xl" size={560}>
<StateView
action={<Button onClick={retry}>{t("auth.retry")}</Button>}
error
text={t("auth.unavailableText")}
title={t("auth.unavailableTitle")}
/>
</Container>
);
const loginState = signedOut && wasAuthenticated const loginState = signedOut && wasAuthenticated
? undefined ? undefined
: { returnTo: `${location.pathname}${location.search}` }; : { returnTo: `${location.pathname}${location.search}` };
+84 -18
View File
@@ -1,12 +1,22 @@
.root {
--bottom-nav-height: 56px;
}
.content { .content {
max-width: 1120px; max-width: 1120px;
margin-inline: auto; margin-inline: auto;
} }
.header { .brand {
align-items: center; align-items: center;
border-bottom: 1px solid var(--mantine-color-gray-3);
display: flex; display: flex;
padding: 0 var(--mantine-spacing-md); min-height: 60px;
padding-inline: var(--mantine-spacing-sm);
}
.navList {
padding: var(--mantine-spacing-sm);
} }
.bottomNav { .bottomNav {
@@ -52,29 +62,85 @@
.bottomNav { .bottomNav {
background: var(--mantine-color-white); background: var(--mantine-color-white);
border-top: 1px solid var(--mantine-color-gray-3); border-top: 1px solid var(--mantine-color-gray-3);
bottom: 0; display: grid;
display: flex; grid-template-columns: repeat(5, minmax(0, 1fr));
justify-content: space-around; inset: auto 0 0;
left: 0; min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
padding: var(--mantine-spacing-xs) 2px; padding-bottom: env(safe-area-inset-bottom, 0px);
gap: 2px; padding-inline:
font-size: 11px; max(4px, env(safe-area-inset-left, 0px))
& a { max(4px, env(safe-area-inset-right, 0px));
min-width: 0;
padding: 8px 2px;
text-align: center;
}
position: fixed; position: fixed;
right: 0; z-index: var(--mantine-z-index-app);
z-index: 200; }
.bottomNavItem {
align-items: center;
color: var(--mantine-color-gray-7);
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
min-height: var(--bottom-nav-height);
min-width: 0;
text-decoration: none;
&:active .iconPill {
background-color: var(--mantine-color-gray-1);
}
&:focus-visible {
outline: 2px solid var(--mantine-primary-color-filled);
outline-offset: -2px;
}
}
@media (hover: hover) {
.bottomNavItem:hover .iconPill {
background-color: var(--mantine-color-gray-1);
}
}
.iconPill {
align-items: center;
border-radius: 14px;
display: inline-flex;
height: 28px;
justify-content: center;
width: 48px;
}
.bottomNavLabel {
font-size: 12px;
font-weight: 500;
line-height: 16px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.bottomNavItem,
.iconPill {
transition:
background-color 150ms ease-in-out,
color 150ms ease-in-out;
}
} }
.active { .active {
color: var(--mantine-primary-color-filled); color: var(--mantine-primary-color-filled);
font-weight: 600;
& .iconPill {
background-color: var(--mantine-primary-color-light);
}
} }
.main { .main {
padding-bottom: 5rem; padding-bottom: calc(
var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) +
var(--mantine-spacing-md)
);
} }
} }
+47
View File
@@ -0,0 +1,47 @@
import { MantineProvider } from "@mantine/core";
import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import { AppShell } from "./AppShell";
function renderShell(path: string) {
return render(
<MantineProvider>
<MemoryRouter initialEntries={[path]}>
<AppShell />
</MemoryRouter>
</MantineProvider>,
);
}
describe("AppShell", () => {
it("has no header banner", () => {
renderShell("/cards");
expect(screen.queryByRole("banner")).not.toBeInTheDocument();
});
it("marks only the current bottom navigation item", () => {
renderShell("/cards");
const bottomNav = screen
.getAllByRole("navigation", { name: "Основная навигация" })
.at(-1);
if (!bottomNav) {
throw new Error("Bottom navigation is not rendered");
}
const links = within(bottomNav).getAllByRole("link");
expect(links).toHaveLength(5);
expect(within(bottomNav).getByRole("link", { name: "Карты" })).toHaveAttribute(
"aria-current",
"page",
);
expect(
within(bottomNav).getByRole("link", { name: "Счета" }),
).not.toHaveAttribute("aria-current");
});
});
+49 -42
View File
@@ -17,6 +17,12 @@ type AppShellProps = {
contentAboveOutlet?: ReactNode; contentAboveOutlet?: ReactNode;
}; };
function getBottomNavItemClass({ isActive }: { isActive: boolean }) {
return isActive
? `${classes.bottomNavItem} ${classes.active}`
: classes.bottomNavItem;
}
const AppShell: FC<AppShellProps> = (props) => { const AppShell: FC<AppShellProps> = (props) => {
const { contentAboveOutlet } = props; const { contentAboveOutlet } = props;
const { t } = useTranslation(); const { t } = useTranslation();
@@ -24,31 +30,31 @@ const AppShell: FC<AppShellProps> = (props) => {
const items = [ const items = [
{ {
icon: <PortfolioIcon size={20} />, Icon: PortfolioIcon,
iconClassName: classes.portfolioIcon, iconClassName: classes.portfolioIcon,
label: t("navigation.accounts"), label: t("navigation.accounts"),
to: "/accounts", to: "/accounts",
}, },
{ {
icon: <CardsIcon size={20} />, Icon: CardsIcon,
iconClassName: classes.cardsIcon, iconClassName: classes.cardsIcon,
label: t("navigation.cards"), label: t("navigation.cards"),
to: "/cards", to: "/cards",
}, },
{ {
icon: <StocksIcon size={20} />, Icon: StocksIcon,
iconClassName: classes.stocksIcon, iconClassName: classes.stocksIcon,
label: t("navigation.stocks"), label: t("navigation.stocks"),
to: "/stocks", to: "/stocks",
}, },
{ {
icon: <BondsIcon size={20} />, Icon: BondsIcon,
iconClassName: classes.bondsIcon, iconClassName: classes.bondsIcon,
label: t("navigation.bonds"), label: t("navigation.bonds"),
to: "/bonds", to: "/bonds",
}, },
{ {
icon: <SettingsIcon size={20} />, Icon: SettingsIcon,
iconClassName: classes.settingsIcon, iconClassName: classes.settingsIcon,
label: t("navigation.settings"), label: t("navigation.settings"),
to: "/settings", to: "/settings",
@@ -57,32 +63,32 @@ const AppShell: FC<AppShellProps> = (props) => {
return ( return (
<MantineAppShell <MantineAppShell
header={{ height: 60 }} className={classes.root}
navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }} navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
padding="md" padding="md"
> >
<MantineAppShell.Header className={classes.header}> <MantineAppShell.Navbar aria-label={t("navigation.primary")}>
<Text fw={700}>{t("appName")}</Text> <div className={classes.brand}>
</MantineAppShell.Header> <Text fw={700}>{t("appName")}</Text>
</div>
<MantineAppShell.Navbar p="sm"> <div className={classes.navList}>
{items.map(item => ( {items.map(item => (
<NavLink <NavLink
active={pathname.startsWith(item.to)} active={pathname.startsWith(item.to)}
className={classes.navLink} className={classes.navLink}
component={RouterNavLink} component={RouterNavLink}
key={item.to} key={item.to}
label={item.label} label={item.label}
leftSection={( leftSection={(
<span <span className={`${classes.navIcon} ${item.iconClassName}`}>
className={`${classes.navIcon} ${item.iconClassName ?? ""}`} <item.Icon size={20} />
> </span>
{item.icon} )}
</span> to={item.to}
)} />
to={item.to} ))}
/> </div>
))}
</MantineAppShell.Navbar> </MantineAppShell.Navbar>
<MantineAppShell.Main className={classes.main}> <MantineAppShell.Main className={classes.main}>
@@ -93,22 +99,23 @@ const AppShell: FC<AppShellProps> = (props) => {
</div> </div>
</MantineAppShell.Main> </MantineAppShell.Main>
<nav aria-label={t("appName")} className={classes.bottomNav}> <nav
{items.map((item) => { aria-label={t("navigation.primary")}
const appearanceClass = pathname.startsWith(item.to) className={classes.bottomNav}
? classes.active >
: undefined; {items.map(item => (
<RouterNavLink
className={getBottomNavItemClass}
key={item.to}
to={item.to}
>
<span className={classes.iconPill}>
<item.Icon size={24} />
</span>
return ( <span className={classes.bottomNavLabel}>{item.label}</span>
<RouterNavLink </RouterNavLink>
className={appearanceClass} ))}
key={item.to}
to={item.to}
>
{item.label}
</RouterNavLink>
);
})}
</nav> </nav>
</MantineAppShell> </MantineAppShell>
); );
@@ -0,0 +1,7 @@
function errorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
: undefined;
}
export { errorCode };
+3 -1
View File
@@ -6,6 +6,7 @@ import { calendarDate } from "@/shared/lib";
import { bankToday } from "./form-validation"; import { bankToday } from "./form-validation";
import { moneyCents } from "./money"; import { moneyCents } from "./money";
const MAX_CARD_NAME_LENGTH = 100; const MAX_CARD_NAME_LENGTH = 100;
const paymentSystemValues = ["mir", "visa", "mastercard"] as const;
const MIN_BALANCE_KOPECKS = -9_223_372_036_854_775_808n; const MIN_BALANCE_KOPECKS = -9_223_372_036_854_775_808n;
const MAX_BALANCE_KOPECKS = 9_223_372_036_854_775_807n; const MAX_BALANCE_KOPECKS = 9_223_372_036_854_775_807n;
@@ -63,7 +64,7 @@ const bankCardSchema = z.object({
openingBalance: moneySchema, openingBalance: moneySchema,
openingDate: bankDateSchema, openingDate: bankDateSchema,
paymentSystem: z paymentSystem: z
.enum(["", "mir", "visa", "mastercard"], { .enum(["", ...paymentSystemValues], {
error: validationMessage("bank.validation.paymentSystem"), error: validationMessage("bank.validation.paymentSystem"),
}) })
.optional(), .optional(),
@@ -75,5 +76,6 @@ export {
bankCardSchema, bankCardSchema,
type BankCardValues, type BankCardValues,
bankDateSchema, bankDateSchema,
paymentSystemValues,
positiveMoneySchema, positiveMoneySchema,
}; };
@@ -1,8 +1,7 @@
import { useController, useFormContext } from "react-hook-form"; import { useController, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { BankCardValues } from "../../model/form.schema"; import { type BankCardValues, paymentSystemValues } from "../../model/form.schema";
import { bankDateField } from "../bankDateField"; import { bankDateField } from "../bankDateField";
function useBankCardFieldsVm() { function useBankCardFieldsVm() {
@@ -16,7 +15,7 @@ function useBankCardFieldsVm() {
const { field: openingDateField } = useController({ control, name: "openingDate" }); const { field: openingDateField } = useController({ control, name: "openingDate" });
const { field: paymentSystemField } = useController({ control, name: "paymentSystem" }); const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });
const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({ const paymentSystems = paymentSystemValues.map(value => ({
label: t(`bank.paymentSystems.${value}`), label: t(`bank.paymentSystems.${value}`),
value, value,
})); }));
+2 -2
View File
@@ -3,7 +3,7 @@ import type { FC } from "react";
import { Alert, Button, Group, Text } from "@mantine/core"; import { Alert, Button, Group, Text } from "@mantine/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { apiErrorCode } from "@/shared/api"; import { errorCode } from "../model/error-code";
type BankFeedbackProps = { type BankFeedbackProps = {
cached?: boolean; cached?: boolean;
@@ -14,7 +14,7 @@ type BankFeedbackProps = {
const BankFeedback: FC<BankFeedbackProps> = (props) => { const BankFeedback: FC<BankFeedbackProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const code = apiErrorCode(props.error); const code = errorCode(props.error);
return ( return (
<Alert color="orange" role="alert"> <Alert color="orange" role="alert">
@@ -15,6 +15,28 @@
min-width: 0; min-width: 0;
} }
.totals {
display: flex;
flex-wrap: wrap;
gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
margin: 0;
}
.totals > div {
display: grid;
gap: 0;
}
.totals dt {
color: var(--mantine-color-dimmed);
font-size: var(--mantine-font-size-xs);
}
.totals dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
.categories { .categories {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -0,0 +1,35 @@
import { MantineProvider } from "@mantine/core";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { BankSummaryView } from "./BankSummary.view";
const money = (value: string) => ({ currency: "RUB", value });
describe("BankSummaryView", () => {
it("shows expenses, refunds, and net monthly totals", () => {
render(
<MantineProvider env="test">
<BankSummaryView
data={{
cardId: "card-1",
categories: [],
expenses: money("1000"),
net: money("800"),
refunds: money("200"),
}}
error={false}
fetching={false}
loading={false}
/>
</MantineProvider>,
);
expect(screen.getAllByText("Расходы")).toHaveLength(2);
expect(screen.getByText("Возвращено")).toBeInTheDocument();
expect(screen.getByText("После возвратов")).toBeInTheDocument();
expect(screen.getByText("1 000,00 ₽")).toBeInTheDocument();
expect(screen.getByText("200,00 ₽")).toBeInTheDocument();
expect(screen.getByText("800,00 ₽")).toBeInTheDocument();
});
});
@@ -10,6 +10,7 @@ import { formatMoney } from "@/shared/lib";
import type { BankSummary } from "../../api/types"; import type { BankSummary } from "../../api/types";
import { bankOperationAppearance } from "../../model/operation-appearance"; import { bankOperationAppearance } from "../../model/operation-appearance";
import { BankFeedback } from "../BankFeedback";
import classes from "./BankSummary.module.css"; import classes from "./BankSummary.module.css";
const CATEGORY_COLUMNS = 2; const CATEGORY_COLUMNS = 2;
@@ -17,9 +18,10 @@ const CATEGORY_COLUMNS = 2;
type BankSummaryViewProps = { type BankSummaryViewProps = {
all?: boolean; all?: boolean;
data?: BankSummary; data?: BankSummary;
error: boolean; error: unknown;
fetching: boolean; fetching: boolean;
loading: boolean; loading: boolean;
retry?: () => void;
}; };
const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => { const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
@@ -92,15 +94,44 @@ const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
</Title> </Title>
{props.data && ( {props.data && (
<Text className={classes.total}> <dl className={classes.totals}>
{formatMoney(props.data.net, { withZeroCents: true })} <div>
</Text> <dt>{t("bank.summary")}</dt>
<dd>
{formatMoney(props.data.expenses, { withZeroCents: true })}
</dd>
</div>
<div>
<dt>{t("bank.refunds")}</dt>
<dd>
{formatMoney(props.data.refunds, { withZeroCents: true })}
</dd>
</div>
<div>
<dt>{t("bank.net")}</dt>
<dd className={classes.total}>
{formatMoney(props.data.net, { withZeroCents: true })}
</dd>
</div>
</dl>
)} )}
</div> </div>
<BankSummaryViewCategories {...props} /> <BankSummaryViewCategories {...props} />
{props.error && !props.data && <Text role="alert">{t("bank.error")}</Text>} {Boolean(props.error) && (
<BankFeedback
cached={Boolean(props.data)}
error={props.error}
loadingError={!props.data}
retry={props.retry}
/>
)}
</Stack> </Stack>
); );
}; };
@@ -36,6 +36,12 @@ function entryLabelKey(operation: BrokerageOperation): string {
return `ledger.category.${operation.category}`; return `ledger.category.${operation.category}`;
} }
function isIncomePayment(operation: BrokerageOperation): boolean {
return [OperationType.Coupon, OperationType.Dividend].some(type =>
isOperationType(operation.type, type),
);
}
function isOperationType(value: unknown, expected: OperationType): boolean { function isOperationType(value: unknown, expected: OperationType): boolean {
return value === expected; return value === expected;
} }
@@ -109,4 +115,4 @@ function paymentPresentation(
}; };
} }
export { operationLabelKey, paymentPresentation }; export { isIncomePayment, operationLabelKey, paymentPresentation };
@@ -11,10 +11,11 @@ import {
formatSnapshotTime, formatSnapshotTime,
instrumentLogoUrl, instrumentLogoUrl,
} from "@/shared/lib"; } from "@/shared/lib";
import { PayoutCard } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations"; import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { operationLabelKey, paymentPresentation } from "../model/display"; import { isIncomePayment, operationLabelKey, paymentPresentation } from "../model/display";
type LedgerEntryRowProps = { type LedgerEntryRowProps = {
operation: BrokerageOperation; operation: BrokerageOperation;
@@ -75,6 +76,28 @@ const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
} }
else details = undefined; else details = undefined;
if (isIncomePayment(operation)) {
const extraMetadata = [
instrument,
props.withDetails ? null : operation.account?.name,
].filter(Boolean).join(" · ");
return (
<PayoutCard
details={details}
extraMetadata={extraMetadata}
imageSrc={instrumentLogoUrl(operation.logoName)}
initial={(instrument.trim()[0] ?? "?").toUpperCase()}
kind="executed"
occurredAt={formatSnapshotTime(operation.occurredAt)}
payment={operation.payment}
title={operation.description || t(operationLabelKey(operation.type))}
typeLabel={t(paymentPresentation(operation).label)}
wrap={props.wrap}
/>
);
}
return ( return (
<EntryCard <EntryCard
details={details} details={details}
@@ -4,17 +4,22 @@ const brokerageAccountsQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"); apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts");
const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey; const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey;
const BROKERAGE_ACCOUNTS_STALE_TIME_MS = 1_800_000;
type BrokerageAccount = NonNullable< type BrokerageAccount = NonNullable<
paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"]["data"] paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"]["data"]
>[number]; >[number];
function useBrokerageAccounts() { function useBrokerageAccounts() {
return useResourceQuery({ const query = useResourceQuery({
meta: { accessGroup: "brokerage" }, meta: { accessGroup: "brokerage" },
...brokerageAccountsQueryOptions(), ...brokerageAccountsQueryOptions(),
staleTime: 60_000, staleTime: BROKERAGE_ACCOUNTS_STALE_TIME_MS,
}); });
return {
...query,
};
} }
export { export {
@@ -8,11 +8,15 @@ const VISIBLE_CURRENCY_LIMIT = 2;
type BrokerageAccountCard = { type BrokerageAccountCard = {
account: BrokerageAccount; account: BrokerageAccount;
positionCounts: null positionCounts: null | PositionCounts;
| { bonds: number; stocks: number };
source?: NonNullable<InvestmentResourceMeta["dependencies"]>[number]; source?: NonNullable<InvestmentResourceMeta["dependencies"]>[number];
summary: summary:
| { remainingCurrencyCount: number; state: "available"; totals: Money[] } | {
portfolio: NonNullable<BrokerageAccount["portfolioSummary"]>;
remainingCurrencyCount: number;
state: "available";
totals: Money[];
}
| { state: "empty" } | { state: "empty" }
| { state: "unavailable" }; | { state: "unavailable" };
}; };
@@ -21,6 +25,8 @@ type Money = NonNullable<
BrokerageAccount["portfolioSummary"] BrokerageAccount["portfolioSummary"]
>["totalsByCurrency"][number]; >["totalsByCurrency"][number];
type PositionCounts = { bonds: number; stocks: number; total: number };
function accountTypeKey(type: BrokerageAccount["type"]) { function accountTypeKey(type: BrokerageAccount["type"]) {
return `accounts.types.${type}` as const; return `accounts.types.${type}` as const;
} }
@@ -48,6 +54,7 @@ function brokerageAccountCards(
const positionCounts = { const positionCounts = {
bonds: summary.bondPositionCount, bonds: summary.bondPositionCount,
stocks: summary.stockPositionCount, stocks: summary.stockPositionCount,
total: summary.totalPositionCount,
}; };
if (summary.totalsByCurrency.length === 0) if (summary.totalsByCurrency.length === 0)
@@ -58,6 +65,7 @@ function brokerageAccountCards(
positionCounts, positionCounts,
source, source,
summary: { summary: {
portfolio: summary,
remainingCurrencyCount: Math.max( remainingCurrencyCount: Math.max(
summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT, summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT,
0, 0,
@@ -1,166 +1,144 @@
.list { .list {
display: grid;
width: 100%; width: 100%;
margin: 0;
padding: 0;
gap: var(--mantine-spacing-sm);
list-style: none;
} }
.card { .row {
min-width: 0; display: grid;
gap: var(--mantine-spacing-xl); grid-template-areas:
background: var(--mantine-color-white); "identity balance"
border-color: var(--mantine-color-gray-3); "details balance"
box-shadow: 0 4px 16px rgb(15 23 42 / 3%); "structure structure";
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
align-items: center;
padding: var(--mantine-spacing-lg);
border: 1px solid var(--wl-color-border);
border-left: 3px solid var(--wl-color-primary);
border-radius: var(--mantine-radius-md);
background: var(--wl-color-surface);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
transition: transition: background-color 160ms ease, border-color 160ms ease;
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
} }
.card:hover, .row:hover,
.card:focus-visible { .row:focus-visible {
border-color: var(--mantine-color-blue-3); border-color: var(--wl-color-primary);
box-shadow: 0 12px 28px rgb(15 23 42 / 8%); background: var(--wl-color-subtle);
transform: translateY(-3px);
} }
.card:focus-visible { .row:focus-visible {
outline: 2px solid var(--mantine-color-blue-6); outline: 2px solid var(--wl-color-primary);
outline-offset: 3px; outline-offset: -2px;
} }
.identity { .identity {
grid-area: identity;
min-width: 0; min-width: 0;
} }
.kicker {
padding: 5px 10px;
border-radius: var(--mantine-radius-sm);
background: var(--mantine-color-blue-0);
color: var(--mantine-color-blue-8);
letter-spacing: 0.02em;
}
.accountIcon {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--mantine-color-blue-5);
}
.name { .name {
margin: 0; margin: 0;
font-size: var(--mantine-h3-font-size); color: var(--wl-color-text);
line-height: 1.3; font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-md);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.accountType {
flex-shrink: 0;
align-self: flex-start;
padding: 2px var(--mantine-spacing-xs);
border-radius: var(--mantine-radius-sm);
}
.balance { .balance {
flex: 1; grid-area: balance;
min-width: 0;
text-align: right;
} }
.summary { .summary {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
} }
.total { .total {
font-size: clamp(1.5rem, 2.8vw, 2.25rem); color: var(--wl-color-text);
letter-spacing: -0.035em;
line-height: 1.2;
overflow-wrap: anywhere;
}
.total + .total {
font-size: var(--mantine-font-size-lg); font-size: var(--mantine-font-size-lg);
font-weight: 500; line-height: var(--mantine-line-height-lg);
letter-spacing: 0;
color: var(--mantine-color-gray-7);
} }
.positions { .return,
display: grid; .cashValue {
grid-template-columns: repeat(2, minmax(0, 1fr)); font-variant-numeric: tabular-nums lining-nums;
gap: var(--mantine-spacing-sm); white-space: nowrap;
margin: 0;
} }
.positions > div { .positive {
display: flex; color: var(--wl-color-positive);
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px var(--mantine-spacing-sm);
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
border-radius: var(--mantine-radius-md);
} }
.stocks { .negative {
background: var(--mantine-color-blue-0); color: var(--wl-color-negative);
color: var(--mantine-color-blue-8);
} }
.bonds { .neutral {
background: var(--mantine-color-grape-0); color: var(--wl-color-muted);
color: var(--mantine-color-grape-8);
} }
.positions dt { .cash {
font-size: var(--mantine-font-size-sm); font-variant-numeric: tabular-nums lining-nums;
font-weight: 500;
} }
.positions dd { .details {
margin: 0; grid-area: details;
font-size: 1.75rem; min-width: 0;
font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
font-variant-numeric: tabular-nums;
line-height: 1.25;
overflow-wrap: anywhere;
} }
.footer { .structure {
border-top: 1px solid var(--mantine-color-gray-2); grid-area: structure;
padding-top: var(--mantine-spacing-md);
}
.open {
display: inline-flex;
align-items: center;
gap: var(--mantine-spacing-xs); gap: var(--mantine-spacing-xs);
margin-left: auto;
color: var(--mantine-color-blue-7);
} }
.arrow { .structureBar {
font-size: var(--mantine-font-size-lg); display: flex;
transition: transform 160ms ease; width: 100%;
height: 6px;
overflow: hidden;
border-radius: var(--mantine-radius-xs);
background: var(--wl-color-subtle);
} }
.card:hover .arrow { .structureSection {
transform: translateX(3px); flex: none;
height: 100%;
background: var(--category-color);
} }
@media (max-width: 36em) { @media (max-width: 47.9375em) {
.card { .row {
grid-template-areas:
"identity"
"balance"
"structure"
"details";
grid-template-columns: minmax(0, 1fr);
gap: var(--mantine-spacing-sm);
padding: var(--mantine-spacing-md); padding: var(--mantine-spacing-md);
gap: var(--mantine-spacing-lg);
} }
.positions > div { .balance {
flex-direction: column; text-align: left;
align-items: flex-start;
padding: var(--mantine-spacing-sm);
} }
}
@media (prefers-reduced-motion: reduce) { .balance > div {
.card, justify-content: flex-start;
.arrow {
transition: none;
}
.card:hover,
.card:focus-visible,
.card:hover .arrow {
transform: none;
} }
} }
@@ -2,32 +2,86 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { MemoryRouter } from "react-router"; import { MemoryRouter } from "react-router";
import { resource } from "@/test/resource";
import type { BrokerageAccount } from "../../api/useBrokerageAccounts"; import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
import { brokerageAccountCards } from "../../model/display"; import { brokerageAccountCards } from "../../model/display";
import { BrokerageAccountList } from "./BrokerageAccountList"; import { BrokerageAccountList } from "./BrokerageAccountList";
const syntheticAccount = { type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
id: "storybook-account",
name: "Учебный брокерский счёт", const rubReturn = {
openedOn: "2025-03-15", absolute: "136900",
portfolioSummary: { costBasis: "1103600.50",
bondPositionCount: 12, currency: "RUB",
stockPositionCount: 5, partial: false,
totalsByCurrency: [ percent: "12.40",
{ currency: "RUB", value: "125000.50" }, };
{ currency: "USD", value: "320" },
{ currency: "EUR", value: "210" }, const portfolioSummary = {
], bondPositionCount: 12,
cashBalances: [
{ currency: "RUB", value: "82500.50" },
{ currency: "USD", value: "1500" },
],
fundPositionCount: 2,
stockPositionCount: 5,
structure: {
currencies: [{
categories: [
{ sharePercent: "55.000000", type: "STOCK", value: "682500" },
{ sharePercent: "25.000000", type: "BOND", value: "310500" },
{ sharePercent: "10.000000", type: "OTHER", value: "124200" },
{ sharePercent: "10.000000", type: "CASH", value: "124200" },
],
currency: "RUB",
hasNegativeValues: false,
totalValue: "1241400",
}],
unvaluedCategories: [],
}, },
type: "BROKERAGE", totalPositionCount: 19,
} satisfies BrokerageAccount; totalsByCurrency: [{ currency: "RUB", value: "1240500.50" }],
unrealizedReturnByCurrency: [rubReturn],
} satisfies PortfolioSummary;
function account(
id: string,
name: string,
summary: null | PortfolioSummary = portfolioSummary,
type: BrokerageAccount["type"] = "BROKERAGE",
): BrokerageAccount {
return {
id,
name,
openedOn: "2025-03-15",
portfolioSummary: summary,
type,
};
}
const negativeSummary: PortfolioSummary = {
...portfolioSummary,
unrealizedReturnByCurrency: [{
...rubReturn,
absolute: "-4200",
percent: "-3.05",
}],
};
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
};
const meta = { const meta = {
args: { accounts: brokerageAccountCards([syntheticAccount]) }, args: { accounts: brokerageAccountCards([account("normal", "Основной ИИС")]) },
argTypes: { argTypes: { accounts: { control: false } },
accounts: { control: false },
},
component: BrokerageAccountList, component: BrokerageAccountList,
decorators: [ decorators: [
Story => ( Story => (
@@ -40,7 +94,7 @@ const meta = {
docs: { docs: {
description: { description: {
component: component:
"Карточки счетов WealthLedger со сводкой по валютам и числом наименований акций и облигаций. Используйте на экране выбора счёта; отсутствие сводки и отсутствие сумм имеют разные сообщения. Примеры содержат вымышленные данные. Ссылки меняют только локальный маршрут MemoryRouter; страница назначения в этой истории не отображается.", "Карточки счетов: стоимость и доходность по валютам, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
}, },
}, },
}, },
@@ -52,180 +106,112 @@ export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Available: Story = { export const Normal: Story = {};
name: "Сводка по нескольким валютам",
parameters: { export const MultiCurrency: Story = {
docs: { args: {
description: { accounts: brokerageAccountCards([account("multi", "Мультивалютный", {
story: ...portfolioSummary,
"Показываются первые две валюты и количество остальных. Суммы разных валют не складываются в общий итог.", cashBalances: [
}, { currency: "RUB", value: "82500.50" },
}, { currency: "USD", value: "1500" },
],
totalsByCurrency: [
{ currency: "RUB", value: "1240500.50" },
{ currency: "USD", value: "3200" },
{ currency: "EUR", value: "900" },
],
unrealizedReturnByCurrency: [
...portfolioSummary.unrealizedReturnByCurrency,
{
absolute: "20",
costBasis: "3180",
currency: "USD",
partial: false,
percent: "2.10",
},
{
absolute: "0",
costBasis: "900",
currency: "EUR",
partial: false,
percent: null,
},
],
})]),
}, },
}; };
export const Unavailable: Story export const Negative: Story = {
= { args: {
args: { accounts: brokerageAccountCards([
accounts: brokerageAccountCards([ account("negative", "Просевший портфель", negativeSummary),
{ ...syntheticAccount, openedOn: null, portfolioSummary: null }, ]),
]), },
}, };
name: "Сводка недоступна",
parameters: { export const Partial: Story = {
docs: { args: {
description: { accounts: brokerageAccountCards([account("partial", "Частичные данные", {
story: ...portfolioSummary,
"Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.", unrealizedReturnByCurrency: [{
}, ...rubReturn,
}, partial: true,
}, }],
}; })]),
},
};
export const Empty: Story = { export const Empty: Story = {
args: { args: {
accounts: brokerageAccountCards([ accounts: brokerageAccountCards([
{ account("empty", "Новый пустой счёт", emptySummary),
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 0,
stockPositionCount: 0,
totalsByCurrency: [],
},
},
]), ]),
}, },
name: "Нет текущих сумм", };
parameters: {
docs: { export const Unavailable: Story = {
description: { args: {
story: accounts: brokerageAccountCards([
"Успешно полученная пустая сводка отличается от ошибки получения данных. Карточка сохраняет название, тип счёта и переход.", account("unavailable", "Счёт без сводки", null),
}, ]),
}, },
};
export const Stale: Story = {
args: {
accounts: brokerageAccountCards([
account("stale", "Устаревший портфель"),
], resource([], {
dependencies: [{
availability: "available",
completeness: "complete",
dataRevision: "stale-revision",
freshness: "stale",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: null,
state: "none",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/stale",
}],
freshness: "stale",
lastSuccessfulAt: "2026-08-14T00:00:00Z",
}).meta.dependencies),
}, },
}; };
export const LongName: Story = { export const LongName: Story = {
args: { args: {
accounts: brokerageAccountCards([ accounts: brokerageAccountCards([
{ account(
...syntheticAccount, "long",
name: "Учебный индивидуальный инвестиционный счёт для долгосрочных накоплений", "Очень длинное название индивидуального инвестиционного счёта, которое должно корректно переноситься на узком экране",
type: "INDIVIDUAL_INVESTMENT", portfolioSummary,
}, "INDIVIDUAL_INVESTMENT",
]),
},
name: "Длинное название счёта",
parameters: {
docs: {
description: {
story:
"Проверьте перенос длинного названия на узком экране и доступность всей карточки с клавиатуры.",
},
},
},
};
export const AccountGrid: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
name: "Основной",
portfolioSummary: {
bondPositionCount: 14,
stockPositionCount: 8,
totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }],
},
},
{
...syntheticAccount,
id: "storybook-iis",
name: "Долгосрочные инвестиции",
portfolioSummary: {
bondPositionCount: 6,
stockPositionCount: 0,
totalsByCurrency: [{ currency: "RUB", value: "480250" }],
},
type: "INDIVIDUAL_INVESTMENT",
},
]),
},
name: "Несколько счетов",
};
export const UnvaluedPositions: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 1,
stockPositionCount: 2,
totalsByCurrency: [],
},
},
]),
},
name: "Бумаги без текущей оценки",
};
export const LargeValues: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 105,
stockPositionCount: 21,
totalsByCurrency: [
{ currency: "RUB", value: "1234567890123456789.50" },
{ currency: "USD", value: "-9876543210987654321.50" },
],
},
},
]),
},
name: "Длинные суммы",
};
export const IndependentFreshness: Story
= {
args: {
accounts: brokerageAccountCards(
[
syntheticAccount,
{
...syntheticAccount,
id: "waiting",
name: "Новый счёт",
portfolioSummary: null,
},
],
[
{
availability: "complete",
dataRevision: "1",
freshness: "stale",
lastSuccessfulAt: "2026-09-24T10:30:00Z",
resourceKey: "portfolio/storybook-account",
sync: {
errorCode: "TBANK_UNAVAILABLE",
id: "failed",
state: "failed",
},
},
{
availability: "missing",
dataRevision: "0",
freshness: "unknown",
lastSuccessfulAt: null,
resourceKey: "portfolio/waiting",
sync: { errorCode: null, id: "waiting", state: "running" },
},
],
), ),
}, ]),
name: "Независимая свежесть и ошибка сводок", },
}; };
@@ -5,122 +5,202 @@ import { describe, expect, it } from "vitest";
import { resource } from "@/test/resource"; import { resource } from "@/test/resource";
import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
import { brokerageAccountCards } from "../../model/display"; import { brokerageAccountCards } from "../../model/display";
import { BrokerageAccountList } from "./BrokerageAccountList"; import { BrokerageAccountList } from "./BrokerageAccountList";
describe("BrokerageAccountList", () => { type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
it("renders account details and an account link", () => {
render(
<MantineProvider>
<MemoryRouter>
<BrokerageAccountList
accounts={brokerageAccountCards([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
portfolioSummary: {
bondPositionCount: 12,
stockPositionCount: 5,
totalsByCurrency: [
{ currency: "RUB", value: "1500" },
{ currency: "USD", value: "20" },
{ currency: "EUR", value: "5" },
],
},
type: "BROKERAGE",
}, const portfolioSummary = {
{ bondPositionCount: 12,
id: "account-2", cashBalances: [
name: "Недоступный", { currency: "RUB", value: "82500.5" },
openedOn: null, { currency: "USD", value: "20" },
portfolioSummary: null, ],
type: "BROKERAGE", fundPositionCount: 0,
}, stockPositionCount: 5,
{ structure: {
id: "account-3", currencies: [{
name: "Пустой", categories: [
openedOn: null, { sharePercent: "50.000000", type: "STOCK", value: "100" },
portfolioSummary: { { sharePercent: "30.000000", type: "BOND", value: "60" },
bondPositionCount: 0, { sharePercent: "0.000000", type: "OTHER", value: "0" },
stockPositionCount: 2, { sharePercent: "20.000000", type: "CASH", value: "40" },
totalsByCurrency: [], ],
}, currency: "RUB",
type: "BROKERAGE", hasNegativeValues: false,
}, totalValue: "200",
])} }],
/> unvaluedCategories: [],
</MemoryRouter> },
</MantineProvider>, totalPositionCount: 17,
); totalsByCurrency: [
{ currency: "RUB", value: "123456789012345678901.995" },
{ currency: "USD", value: "20" },
{ currency: "EUR", value: "5" },
],
unrealizedReturnByCurrency: [
{
absolute: "136900",
costBasis: "1000000",
currency: "RUB",
partial: true,
percent: "12.40",
},
{
absolute: "-4.2",
costBasis: "24.2",
currency: "USD",
partial: false,
percent: "-3.05",
},
{
absolute: "0",
costBasis: "5",
currency: "EUR",
partial: false,
percent: null,
},
],
} satisfies PortfolioSummary;
expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute( type BrokerageAccountCardInput = Parameters<typeof BrokerageAccountList>[0][
"href", "accounts"
"/accounts/account-1", ];
);
expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
expect(screen.getByText(/^Открыт /)).toBeInTheDocument();
expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
expect(screen.getByText("20 USD")).toBeInTheDocument();
expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getAllByText("Открыть счет")).toHaveLength(3);
const available = within(screen.getByRole("link", { name: /Основной/ }));
expect(available.getAllByRole("definition")[0]).toHaveTextContent("5");
expect(available.getAllByRole("definition")[1]).toHaveTextContent("12");
const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent("2");
expect(unvalued.getAllByRole("definition")[1]).toHaveTextContent("0");
expect(
within(screen.getByRole("link", { name: /Недоступный/ })).queryByText(
"Акции",
),
).not.toBeInTheDocument();
});
});
it("shows portfolio summary freshness independently for each account", () => { function account(
const accounts = brokerageAccountCards( id: string,
["fresh", "stale"].map( name: string,
summary: null | PortfolioSummary,
): BrokerageAccount {
return {
id,
name,
openedOn: null,
portfolioSummary: summary,
type: "BROKERAGE",
};
}
id => function renderList(accounts: BrokerageAccountCardInput) {
({ return render(
id,
name: id,
openedOn: null,
portfolioSummary: {
bondPositionCount: 0,
stockPositionCount: 1,
totalsByCurrency: [{ currency: "RUB", value: "10" }],
},
type: "BROKERAGE" as const,
}),
),
[
resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" })
.meta,
resource(null, { freshness: "stale", resourceKey: "portfolio/stale" })
.meta,
],
);
render(
<MantineProvider> <MantineProvider>
<MemoryRouter> <MemoryRouter>
<BrokerageAccountList accounts={accounts} /> <BrokerageAccountList accounts={accounts} />
</MemoryRouter> </MemoryRouter>
</MantineProvider>, </MantineProvider>,
); );
expect( }
within(screen.getByRole("link", { name: /stale/ })).getByText(
"Данные требуют обновления", describe("BrokerageAccountList", () => {
), it("renders returns, cash and structure with precise totals", () => {
).toBeVisible(); const nullReturnSummary: PortfolioSummary = {
expect( ...portfolioSummary,
within(screen.getByRole("link", { name: /fresh/ })).queryByText( cashBalances: [],
"Данные требуют обновления", structure: { currencies: [], unvaluedCategories: [] },
), totalsByCurrency: [{ currency: "EUR", value: "5" }],
).not.toBeInTheDocument(); unrealizedReturnByCurrency: [{
absolute: "0",
costBasis: "5",
currency: "EUR",
partial: false,
percent: null,
}],
};
renderList(brokerageAccountCards([
account("account-1", "Основной", portfolioSummary),
account("account-2", "Без доходности", nullReturnSummary),
]));
const link = screen.getByRole("link", { name: /Основной/ });
expect(link).toHaveAttribute("href", "/accounts/account-1");
expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
.toBeInTheDocument();
expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
expect(within(link).getByText("−3,05 %")).toBeInTheDocument();
expect(within(link).getByText("−4,2 USD")).toBeInTheDocument();
const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
expect(within(link).getByText("частично")).toBeInTheDocument();
expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
expect(within(link).getByText("17 позиций")).toBeInTheDocument();
expect(screen.getByRole("img", {
name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
+ "Другие активы 0 %; Свободные деньги 20 %",
})).toBeInTheDocument();
const stockLegend = within(link).getByText(/Акции 50 %/);
expect(stockLegend).toHaveTextContent("● Акции 50 %");
// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
expect(link).toHaveTextContent("По данным брокера");
expect(link).toHaveTextContent("Структура RUB: Акции 100");
});
it("preserves empty, unavailable and stale states", () => {
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
};
const cards = brokerageAccountCards([
account("empty", "Пустой", emptySummary),
account("unavailable", "Недоступный", null),
account("stale", "Устаревший", portfolioSummary),
account("failed", "Ошибка обновления", null),
], resource([], {
dependencies: [{
availability: "available",
completeness: "complete",
dataRevision: "stale-revision",
freshness: "stale",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: null,
state: "none",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/stale",
}, {
availability: "available",
completeness: "complete",
dataRevision: "failed-revision",
freshness: "stale",
lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/failed",
}],
freshness: "stale",
lastSuccessfulAt: "2026-08-14T00:00:00Z",
}).meta.dependencies);
renderList(cards);
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getAllByText("Сводка временно недоступна"))
.toHaveLength(2);
const staleLink = screen.getByRole("link", { name: /Устаревший/ });
expect(within(staleLink).getByText("Данные требуют обновления"))
.toBeInTheDocument();
expect(within(staleLink).getByText(/Данные на/)).toBeInTheDocument();
const failedLink = screen.getByRole("link", { name: /Ошибка обновления/ });
expect(within(failedLink).getByText(
"Не удалось обновить данные. Показаны последние полученные.",
)).toBeInTheDocument();
});
}); });
@@ -1,11 +1,10 @@
import type { FC } from "react"; import type { CSSProperties, FC } from "react";
import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import { Badge, Group, Stack, Text, VisuallyHidden } from "@mantine/core";
import { WalletIcon } from "@wealthledger/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router"; import { Link } from "react-router";
import { formatDate, formatMoney } from "@/shared/lib"; import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui"; import { SourceSyncStatus } from "@/shared/ui";
import type { BrokerageAccountCard } from "../../model/display"; import type { BrokerageAccountCard } from "../../model/display";
@@ -13,12 +12,176 @@ import type { BrokerageAccountCard } from "../../model/display";
import { accountTypeKey } from "../../model/display"; import { accountTypeKey } from "../../model/display";
import classes from "./BrokerageAccountList.module.css"; import classes from "./BrokerageAccountList.module.css";
const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
type AvailableSummary = Extract<
BrokerageAccountCard["summary"],
{ state: "available" }
>;
type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] }; type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };
type BrokerageAccountSummaryProps = { type BrokerageAccountSummaryProps = {
summary: BrokerageAccountCard["summary"]; summary: BrokerageAccountCard["summary"];
}; };
type PortfolioSummary = AvailableSummary["portfolio"];
type ReturnValueProps = {
item: PortfolioSummary["unrealizedReturnByCurrency"][number];
};
type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
function formatPercent(value: null | string) {
if (value === null) return "—";
const formatted = `${value.replace(".", ",")}\u{A0}%`;
if (isZero(value))
return value.startsWith("-") ? formatted.slice(1) : formatted;
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
}
function formatStructurePercent(value: string) {
let trimmed = value;
while (trimmed.includes(".") && trimmed.endsWith("0"))
trimmed = trimmed.slice(0, -1);
if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
return trimmed.replace(".", ",");
}
function isZero(value: string) {
const unsigned = value.startsWith("-") ? value.slice(1) : value;
const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);
return integer.replaceAll("0", "") === ""
&& fraction.replaceAll("0", "") === "";
}
const ReturnValue: FC<ReturnValueProps> = (props) => {
const { t } = useTranslation();
const { item } = props;
const isNegative = item.percent !== null
&& item.percent.startsWith("-")
&& !isZero(item.percent);
const isPositive = item.percent !== null
&& !item.percent.startsWith("-")
&& !isZero(item.percent);
let toneClass = classes.neutral;
if (isNegative) toneClass = classes.negative;
else if (isPositive) toneClass = classes.positive;
return (
<Group className={classes.return} gap="xs" wrap="nowrap">
<Text className={toneClass} fw={700} size="sm">
{formatPercent(item.percent)}
</Text>
<Text className={toneClass} size="sm">
{formatMoney(
{ currency: item.currency, value: item.absolute },
{ withSign: true },
)}
</Text>
{item.partial && (
<Text c="dimmed" size="xs">
{t("accounts.partial")}
</Text>
)}
</Group>
);
};
type StructureBarProps = { item: StructureCurrency };
const StructureBar: FC<StructureBarProps> = (props) => {
const { t } = useTranslation();
const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
const category = props.item.categories.find(item => item.type === type);
return category ? [category] : [];
});
const description = categories.map((category) => {
const label = t(portfolioCategoryPresentation[category.type].label);
const percent = category.sharePercent === null
? null
: formatStructurePercent(category.sharePercent);
return percent === null
? t("accounts.structure.incomplete", { category: label })
: t("accounts.structure.category", { category: label, percent });
}).join("; ");
const label = t("accounts.structure.label", {
currency: props.item.currency,
value: description,
});
const legendCategories = categories.filter(category =>
category.sharePercent === null || !isZero(category.sharePercent));
return (
<Stack gap={4}>
<div
aria-label={label}
className={classes.structureBar}
role="img"
title={label}
>
{categories.map((category) => {
const presentation = portfolioCategoryPresentation[category.type];
const style = {
"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
"width": `${category.sharePercent ?? 0}%`,
} as CSSProperties;
return (
<div
aria-hidden
className={classes.structureSection}
key={category.type}
style={style}
/>
);
})}
</div>
<Group aria-hidden gap="xs" wrap="wrap">
{legendCategories.map((category) => {
const presentation = portfolioCategoryPresentation[category.type];
const categoryLabel = t(presentation.label);
const text = category.sharePercent === null
? categoryLabel
: t("accounts.structure.category", {
category: categoryLabel,
percent: formatStructurePercent(category.sharePercent),
});
return (
<Text c="dimmed" key={category.type} size="xs">
<Text c={presentation.color} component="span">●</Text>
{" "}
{text}
</Text>
);
})}
</Group>
</Stack>
);
};
const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => { const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
const { summary } = props; const { summary } = props;
const { t } = useTranslation(); const { t } = useTranslation();
@@ -36,19 +199,51 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
); );
return ( return (
<Stack className={classes.summary} gap={4}> <Stack className={classes.balance} gap="xs">
{summary.totals.map(total => ( <Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
<Text className={classes.total} fw={700} key={total.currency}> <Stack className={classes.summary} gap={4}>
{formatMoney(total)} {summary.totals.map(total => (
</Text> <Text className={classes.total} fw={700} key={total.currency}>
))} {formatMoney(total, { withRoundedCents: true })}
</Text>
))}
{!!summary.remainingCurrencyCount && ( {!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm"> <Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", { {t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount, count: summary.remainingCurrencyCount,
})}
</Text>
)}
</Stack>
<Stack gap={4}>
{summary.totals.map((total) => {
const item = summary.portfolio.unrealizedReturnByCurrency.find(
returnItem => returnItem.currency === total.currency,
);
return item
? <ReturnValue item={item} key={total.currency} />
: null;
})} })}
</Text> </Stack>
</Group>
{summary.portfolio.cashBalances.length > 0 && (
<Group className={classes.cash} gap="xs" justify="flex-end">
<Text c="dimmed" size="xs">
{t("accounts.cash")}
</Text>
<Stack gap={0}>
{summary.portfolio.cashBalances.map(cash => (
<Text className={classes.cashValue} key={cash.currency} size="sm">
{formatMoney(cash, { withRoundedCents: true })}
</Text>
))}
</Stack>
</Group>
)} )}
</Stack> </Stack>
); );
@@ -61,18 +256,19 @@ type BrokerageAccountSourceStatusProps = {
const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = ( const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
props, props,
) => { ) => {
const { source } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const { source } = props;
const isSyncing = source?.lastAttempt.state === "running";
const isSyncing = source?.sync.state === "running"; const errorText = source?.lastAttempt.state === "failed"
? t("accounts.refreshError")
const errorText : null;
= source?.sync.state === "failed" ? t("accounts.refreshError") : null;
return ( return (
<> <>
<SourceSyncStatus <SourceSyncStatus
errorText={errorText} errorText={errorText}
lastAttempt={source?.lastAttempt}
lastSuccessfulAt={source?.lastSuccessfulAt} lastSuccessfulAt={source?.lastSuccessfulAt}
stale={source?.freshness === "stale"} stale={source?.freshness === "stale"}
/> />
@@ -86,86 +282,110 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
); );
}; };
type AccountDescriptionProps = {
account: BrokerageAccountCard;
};
const AccountDescription: FC<AccountDescriptionProps> = (props) => {
const { t } = useTranslation();
const { account, summary } = props.account;
if (summary.state !== "available") return null;
const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
t("accounts.description.return", {
absolute: formatMoney(
{ currency: item.currency, value: item.absolute },
{ withSign: true },
),
currency: item.currency,
percent: formatPercent(item.percent),
}),
);
const structures = summary.portfolio.structure.currencies.map((item) => {
const categories = item.categories.map(category =>
t("accounts.description.structureCategory", {
category: t(portfolioCategoryPresentation[category.type].label),
value: formatMoney(
{ currency: item.currency, value: category.value },
{ withRoundedCents: true },
),
}),
).join(", ");
return t("accounts.description.structure", {
currency: item.currency,
value: categories,
});
});
const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
item => item.partial,
);
const details = [...returns, ...structures].join(". ");
return (
<VisuallyHidden>
{t("accounts.description.start", {
name: account.name,
type: t(accountTypeKey(account.type)),
})}
{t("accounts.description.currentValue", {
value: summary.portfolio.totalsByCurrency
.map(total => formatMoney(total)).join(", "),
})}
{details ? `${details}. ` : ""}
{hasPartialReturn ? t("accounts.brokerDescription") : ""}
</VisuallyHidden>
);
};
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => { const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
const { accounts } = props;
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<SimpleGrid className={classes.list} cols={1} spacing="lg"> <ul className={classes.list}>
{accounts.map(({ account, positionCounts, source, summary }) => ( {props.accounts.map(({ account, positionCounts, source, summary }) => (
<Card <li key={account.id}>
className={classes.card} <Link className={classes.row} to={`/accounts/${account.id}`}>
component={Link} <Group className={classes.identity} wrap="nowrap">
key={account.id} <h2 className={classes.name}>{account.name}</h2>
padding="xl"
radius="lg" <Badge className={classes.accountType} variant="light">
to={`/accounts/${account.id}`}
withBorder
>
<Stack className={classes.identity} gap="sm">
<Group gap="sm" justify="space-between" wrap="nowrap">
<Text className={classes.kicker} fw={700} size="xs">
{t(accountTypeKey(account.type))} {t(accountTypeKey(account.type))}
</Text> </Badge>
<WalletIcon className={classes.accountIcon} />
</Group> </Group>
<Text className={classes.name} component="h2" fw={700}>
{account.name}
</Text>
</Stack>
<Stack className={classes.balance} gap="xs">
<Text c="dimmed" size="sm">
{t("accounts.currentValue")}
</Text>
<BrokerageAccountSummary summary={summary} /> <BrokerageAccountSummary summary={summary} />
<BrokerageAccountSourceStatus source={source} /> <Stack className={classes.details} gap={2}>
</Stack> {positionCounts && (
<Text c="dimmed" size="xs">
{t("accounts.positions", {
count: positionCounts.total,
})}
</Text>
)}
{!!positionCounts && ( <BrokerageAccountSourceStatus source={source} />
<dl className={classes.positions}> </Stack>
<div className={classes.stocks}>
<dt>{t("accounts.stocks")}</dt>
<dd> {summary.state === "available" && (
{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)} <Stack className={classes.structure} gap={4}>
</dd> {summary.portfolio.structure.currencies.map(item => (
</div> <StructureBar item={item} key={item.currency} />
))}
<div className={classes.bonds}> </Stack>
<dt>{t("accounts.bonds")}</dt>
<dd>
{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
</dd>
</div>
</dl>
)}
<Group className={classes.footer} gap="sm" justify="space-between">
{!!account.openedOn && (
<Text c="dimmed" size="xs">
{t("accounts.openedOn", {
date: formatDate(account.openedOn),
})}
</Text>
)} )}
<Text className={classes.open} component="span" fw={600} size="sm"> <AccountDescription
{t("accounts.openAccount")} account={{ account, positionCounts, source, summary }}
/>
<span aria-hidden="true" className={classes.arrow}> </Link>
→ </li>
</span>
</Text>
</Group>
</Card>
))} ))}
</SimpleGrid> </ul>
); );
}; };
@@ -4,6 +4,7 @@ import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib"; import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
import { PayoutCard } from "@/shared/ui";
import type { BrokerageEvent } from "../api/useBrokerageEvents"; import type { BrokerageEvent } from "../api/useBrokerageEvents";
@@ -15,6 +16,27 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
const date = formatDate(event.date); const date = formatDate(event.date);
if (event.type === "coupon" || event.type === "dividend") {
const title = [t(`events.type.${event.type}`), event.displayName].join(" · ");
const extraMetadata = [event.isin, event.account?.name]
.filter(Boolean)
.join(" · ");
return (
<PayoutCard
date={date}
dateKind={event.dateKind}
extraMetadata={extraMetadata}
imageSrc={instrumentLogoUrl(event.logoName)}
initial={(event.ticker.trim()[0] ?? "?").toUpperCase()}
kind="forecast"
projectedAmount={event.projectedAmount}
title={title}
/>
);
}
const metadata = [ const metadata = [
date, date,
event.dateKind === "registry" event.dateKind === "registry"
@@ -40,7 +62,7 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
title={[t(`events.type.${event.type}`), event.displayName].join(" · ")} title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
tone="neutral" tone="neutral"
value={projectedAmount} value={projectedAmount}
valueLabel={t("events.projectedAmount")} valueLabel={t("payout.forecast")}
/> />
); );
}; };
@@ -12,6 +12,7 @@ import { BrokerageEventCard } from "../BrokerageEventCard";
type BrokerageEventsPreviewProps = { type BrokerageEventsPreviewProps = {
events: BrokerageEventsPreviewState; events: BrokerageEventsPreviewState;
moreLabel?: string;
}; };
type BrokerageEventsPreviewState type BrokerageEventsPreviewState
@@ -51,7 +52,7 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
))} ))}
<Button component={Link} to={events.to} variant="subtle"> <Button component={Link} to={events.to} variant="subtle">
{t("events.open")} {props.moreLabel ?? t("events.open")}
</Button> </Button>
</Stack> </Stack>
); );
-4
View File
@@ -4,9 +4,6 @@ type IncomeAnalytics = NonNullable<
paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"] paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"]
>; >;
type IncomeAnalyticsMeta
= paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["meta"];
type IncomeSummary = NonNullable< type IncomeSummary = NonNullable<
paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"] paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"]
>; >;
@@ -47,7 +44,6 @@ function useIncomeSummary(accountId?: string) {
export { export {
type IncomeAnalytics, type IncomeAnalytics,
type IncomeAnalyticsMeta,
type IncomeSummary, type IncomeSummary,
useIncomeAnalytics, useIncomeAnalytics,
useIncomeSummary, useIncomeSummary,
-1
View File
@@ -1,6 +1,5 @@
export { export {
type IncomeAnalytics, type IncomeAnalytics,
type IncomeAnalyticsMeta,
type IncomeSummary, type IncomeSummary,
useIncomeAnalytics, useIncomeAnalytics,
useIncomeSummary, useIncomeSummary,
+2 -16
View File
@@ -6,10 +6,6 @@ import {
type StockCandles = NonNullable<paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]>; type StockCandles = NonNullable<paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
type StockPosition = NonNullable<paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
const MIN_STOCK_SEARCH_LENGTH = 2;
type StockDividends = NonNullable<paths["/api/v1/stocks/{uid}/dividends"]["get"]["responses"][200]["content"]["application/json"]["data"]>; type StockDividends = NonNullable<paths["/api/v1/stocks/{uid}/dividends"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
type StockPeriod = NonNullable< type StockPeriod = NonNullable<
@@ -18,6 +14,8 @@ type StockPeriod = NonNullable<
>["period"] >["period"]
>; >;
type StockPosition = NonNullable<paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]>;
const STOCK_STALE_TIME_MS = 30_000; const STOCK_STALE_TIME_MS = 30_000;
function useStock(identifier: string) { function useStock(identifier: string) {
@@ -96,18 +94,7 @@ function useStockQuote(uid: string) {
}); });
} }
function useStockSearch(query: string) {
return useResourceQuery({
...apiQueryClient.queryOptions("get", "/api/v1/stocks", {
params: { query: { query } },
}),
enabled: query.length >= MIN_STOCK_SEARCH_LENGTH,
staleTime: STOCK_STALE_TIME_MS,
});
}
export { export {
MIN_STOCK_SEARCH_LENGTH,
type StockCandles, type StockCandles,
type StockDividends, type StockDividends,
type StockPosition, type StockPosition,
@@ -117,5 +104,4 @@ export {
useStockDividends, useStockDividends,
useStockPosition, useStockPosition,
useStockQuote, useStockQuote,
useStockSearch,
}; };
-2
View File
@@ -1,5 +1,4 @@
export { export {
MIN_STOCK_SEARCH_LENGTH,
type StockCandles, type StockCandles,
type StockDividends, type StockDividends,
type StockPosition, type StockPosition,
@@ -9,5 +8,4 @@ export {
useStockDividends, useStockDividends,
useStockPosition, useStockPosition,
useStockQuote, useStockQuote,
useStockSearch,
} from "./api/queries"; } from "./api/queries";
+5
View File
@@ -7,7 +7,12 @@ type AuthContextValue = {
logout: () => Promise<void>; logout: () => Promise<void>;
ready: boolean; ready: boolean;
register: (email: string, password: string) => Promise<void>; register: (email: string, password: string) => Promise<void>;
retry: () => void;
signedOut: boolean; signedOut: boolean;
/**
Refresh failed with a network error or 5xx; the refresh cookie may still be valid.
*/
unavailable: boolean;
user: undefined | User; user: undefined | User;
}; };
@@ -0,0 +1,55 @@
import { describe, expect, it } from "vitest";
import { loginSchema, registerSchema } from "./auth.schema";
const email = "user@example.com";
function canLogIn(password: string) {
return loginSchema.safeParse({ email, password }).success;
}
function canRegister(password: string, confirmation = password) {
return registerSchema.safeParse({
email,
password,
passwordConfirmation: confirmation,
}).success;
}
// Register policy: 8..72 printable ASCII (bcrypt reads 72 bytes, so non-ASCII could be
// truncated). Login stays lenient so accounts created under the old policy still sign in.
describe("auth password policy", () => {
it.each([
["7 chars", "a".repeat(7), false],
["8 chars", "a".repeat(8), true],
["72 chars", "a".repeat(72), true],
["73 chars", "a".repeat(73), false],
["printable symbols and space", "Aa1 !~\"#$%&'()*+,-./:;<=>?@", true],
["Cyrillic, 8+ chars", "пароль-пароль", false],
["emoji", "passw😀rd", false],
["tab", "pass\tword1", false],
["newline", "password1\n", false],
["DEL", "password\u{7F}1", false],
])("register: %s", (_, password, accepted) => {
expect(canRegister(password)).toBe(accepted);
});
it("register compares the raw password with its confirmation", () => {
const padded = " spaced pass ";
expect(canRegister(padded)).toBe(true);
expect(canRegister(padded, padded.trim())).toBe(false);
});
it.each([
["legacy Cyrillic password", "пароль-пароль", true],
["short legacy password", "short", true],
["72 bytes", "a".repeat(72), true],
["73 bytes", "a".repeat(73), false],
["36 Cyrillic letters = 72 bytes", "я".repeat(36), true],
["37 Cyrillic letters = 74 bytes", "я".repeat(37), false],
["empty", "", false],
])("login: %s", (_, password, accepted) => {
expect(canLogIn(password)).toBe(accepted);
});
});
+38 -14
View File
@@ -7,8 +7,10 @@ const EMAIL_PART_COUNT = 2;
const ASCII_SPACE = 32; const ASCII_SPACE = 32;
const ASCII_DELETE = 127; const ASCII_DELETE = 127;
const MAX_EMAIL_LENGTH = 254; const MAX_EMAIL_LENGTH = 254;
const MIN_PASSWORD_BYTES = 12; const MIN_PASSWORD_LENGTH = 8;
const MAX_PASSWORD_BYTES = 72; const MAX_PASSWORD_BYTES = 72;
// Printable ASCII keeps characters == bytes, within the bcrypt 72-byte limit.
const ASCII_TILDE = 126;
function isEmailCharacterInvalid(character: string): boolean { function isEmailCharacterInvalid(character: string): boolean {
const codePoint = character.codePointAt(0); const codePoint = character.codePointAt(0);
@@ -20,6 +22,14 @@ function isEmailCharacterInvalid(character: string): boolean {
); );
} }
function isPrintableAscii(value: string): boolean {
return value.split("").every((character) => {
const code = character.codePointAt(0) ?? 0;
return code >= ASCII_SPACE && code <= ASCII_TILDE;
});
}
const email = z const email = z
.string() .string()
.trim() .trim()
@@ -33,28 +43,42 @@ const email = z
{ error: validationMessage("auth.validation.invalidEmail") }, { error: validationMessage("auth.validation.invalidEmail") },
); );
const password = z // Login stays lenient: accounts created under an older policy must still sign in.
const loginPassword = z
.string() .string()
.min(1)
.refine( .refine(
value => value => new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES,
new TextEncoder().encode(value).length >= MIN_PASSWORD_BYTES { error: validationMessage("auth.validation.passwordTooLong") },
&& new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES,
{ error: validationMessage("auth.validation.invalidPasswordLength") },
); );
const registerPassword = z
.string()
.min(MIN_PASSWORD_LENGTH, {
error: validationMessage("auth.validation.invalidPasswordLength"),
})
.max(MAX_PASSWORD_BYTES, {
error: validationMessage("auth.validation.invalidPasswordLength"),
})
.refine(isPrintableAscii, {
error: validationMessage("auth.validation.invalidPasswordLength"),
});
const loginSchema = z.object({ const loginSchema = z.object({
email, email,
password, password: loginPassword,
passwordConfirmation: z.string().optional(), passwordConfirmation: z.string().optional(),
}); });
const registerSchema = loginSchema.refine( const registerSchema = loginSchema
value => value.password === value.passwordConfirmation, .extend({ password: registerPassword })
{ .refine(
error: validationMessage("auth.validation.passwordsDoNotMatch"), value => value.password === value.passwordConfirmation,
path: ["passwordConfirmation"], {
}, error: validationMessage("auth.validation.passwordsDoNotMatch"),
); path: ["passwordConfirmation"],
},
);
type AuthFormValues = z.input<typeof loginSchema>; type AuthFormValues = z.input<typeof loginSchema>;
+52 -7
View File
@@ -92,8 +92,10 @@ describe("AuthProvider", () => {
); );
}); });
it("settles unauthenticated and clears cached data when cold-start refresh has a transport error", async () => { it("settles unauthenticated and clears cached data when cold-start refresh is rejected with 401", async () => {
server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error())); server.use(http.post("*/api/v1/auth/refresh", () =>
HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
));
const queryClient = createTestQueryClient(); const queryClient = createTestQueryClient();
queryClient.setQueryData(["cached-query"], { value: "stale" }); queryClient.setQueryData(["cached-query"], { value: "stale" });
queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]); queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]);
@@ -103,12 +105,54 @@ describe("AuthProvider", () => {
await waitFor(() => expect(result.current.ready).toBe(true)); await waitFor(() => expect(result.current.ready).toBe(true));
expect(result.current.user).toBeUndefined(); expect(result.current.user).toBeUndefined();
expect(result.current.unavailable).toBe(false);
expect(await requestAuthorization()).toBeNull(); expect(await requestAuthorization()).toBeNull();
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined(); expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined(); expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
}); });
it("keeps the original protected 401 when serialized refresh has a transport error", async () => { it.each([
["a transport error", () => HttpResponse.error()],
["a 502 from the proxy", () => new HttpResponse(null, { status: 502 })],
["a 503 problem", () => HttpResponse.json({ code: "INTERNAL_SERVER_ERROR" }, { status: 503 })],
])("settles as unavailable and keeps cached data when cold-start refresh gets %s", async (_name, failure) => {
server.use(http.post("*/api/v1/auth/refresh", failure));
const queryClient = createTestQueryClient();
queryClient.setQueryData(["cached-query"], { value: "kept" });
const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() => expect(result.current.ready).toBe(true));
expect(result.current.user).toBeUndefined();
expect(result.current.unavailable).toBe(true);
expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "kept" });
});
it("restores the session when retry succeeds after an outage", async () => {
let isOutage = true;
server.use(http.post("*/api/v1/auth/refresh", () =>
isOutage
? new HttpResponse(null, { status: 502 })
: HttpResponse.json({
accessToken: "restored-token",
user: { email: "user@example.com", id: "user-1" },
}),
));
const queryClient = createTestQueryClient();
const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() => expect(result.current.unavailable).toBe(true));
isOutage = false;
act(() => result.current.retry());
await waitFor(() => expect(result.current.user?.id).toBe("user-1"));
expect(result.current.unavailable).toBe(false);
expect(await requestAuthorization()).toBe("Bearer restored-token");
});
it("keeps the original protected 401 and the session when serialized refresh has a transport error", async () => {
let refreshCalls = 0; let refreshCalls = 0;
server.use( server.use(
http.post("*/api/v1/auth/refresh", () => { http.post("*/api/v1/auth/refresh", () => {
@@ -137,10 +181,11 @@ describe("AuthProvider", () => {
const response = await apiClient.GET("/api/v1/brokerage-accounts"); const response = await apiClient.GET("/api/v1/brokerage-accounts");
expect(response.response.status).toBe(401); expect(response.response.status).toBe(401);
await waitFor(() => expect(result.current.user).toBeUndefined()); // An unreachable server does not prove the session ended; the next 401 refreshes again.
expect(await requestAuthorization()).toBeNull(); await waitFor(() => expect(result.current.unavailable).toBe(true));
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined(); expect(result.current.user?.id).toBe("user-1");
expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined(); expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "stale" });
expect(queryClient.getQueryData(bankCardsKey)).toEqual([{ id: "bank-card-1" }]);
}); });
it("clears connection status and financial cache independently on logout", async () => { it("clears connection status and financial cache independently on logout", async () => {
+22 -6
View File
@@ -5,6 +5,9 @@ import { apiClient, configureAuthClient, type paths } from "@/shared/api";
import { type User } from "./auth-context"; import { type User } from "./auth-context";
// A 5xx or network error means the server is unreachable, not that the session ended.
const HTTP_SERVER_ERROR = 500;
type Authentication type Authentication
= paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"]; = paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"];
@@ -32,6 +35,8 @@ function useAuthProviderVm() {
const accessTokenRef = useRef<string | undefined>(undefined); const accessTokenRef = useRef<string | undefined>(undefined);
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [signedOut, setSignedOut] = useState(false); const [signedOut, setSignedOut] = useState(false);
const [unavailable, setUnavailable] = useState(false);
const unavailableRef = useRef(false);
const generationRef = useRef(0); const generationRef = useRef(0);
const userRef = useRef<undefined | User>(undefined); const userRef = useRef<undefined | User>(undefined);
@@ -49,12 +54,18 @@ function useAuthProviderVm() {
return next; return next;
}, []); }, []);
const markUnavailable = useCallback((isUnavailable: boolean) => {
unavailableRef.current = isUnavailable;
setUnavailable(isUnavailable);
}, []);
const applyAuthentication = useCallback( const applyAuthentication = useCallback(
(authentication: Authentication) => { (authentication: Authentication) => {
const changedIdentity const changedIdentity
= userRef.current && userRef.current.id !== authentication.user.id; = userRef.current && userRef.current.id !== authentication.user.id;
setSignedOut(false); setSignedOut(false);
markUnavailable(false);
accessTokenRef.current = authentication.accessToken; accessTokenRef.current = authentication.accessToken;
if (changedIdentity) { if (changedIdentity) {
@@ -67,16 +78,17 @@ function useAuthProviderVm() {
userRef.current = authentication.user; userRef.current = authentication.user;
setUser(authentication.user); setUser(authentication.user);
}, },
[queryClient], [markUnavailable, queryClient],
); );
const clearSession = useCallback(() => { const clearSession = useCallback(() => {
markUnavailable(false);
generationRef.current += 1; generationRef.current += 1;
userRef.current = undefined; userRef.current = undefined;
setUser(undefined); setUser(undefined);
accessTokenRef.current = undefined; accessTokenRef.current = undefined;
queryClient.clear(); queryClient.clear();
}, [queryClient]); }, [markUnavailable, queryClient]);
const refresh = useCallback((): Promise<boolean> => { const refresh = useCallback((): Promise<boolean> => {
if (refreshPromiseRef.current) return refreshPromiseRef.current; if (refreshPromiseRef.current) return refreshPromiseRef.current;
@@ -86,11 +98,12 @@ function useAuthProviderVm() {
if (started !== generationRef.current) return false; if (started !== generationRef.current) return false;
try { try {
const { data } = await apiClient.POST("/api/v1/auth/refresh"); const { data, response } = await apiClient.POST("/api/v1/auth/refresh");
if (started !== generationRef.current) return false; if (started !== generationRef.current) return false;
if (!data) { if (!data) {
clearSession(); if (response.status >= HTTP_SERVER_ERROR) markUnavailable(true);
else clearSession();
return false; return false;
} }
@@ -100,7 +113,7 @@ function useAuthProviderVm() {
return true; return true;
} }
catch { catch {
if (started === generationRef.current) clearSession(); if (started === generationRef.current) markUnavailable(true);
return false; return false;
} }
@@ -112,7 +125,7 @@ function useAuthProviderVm() {
refreshPromiseRef.current = pending; refreshPromiseRef.current = pending;
return pending; return pending;
}, [applyAuthentication, clearSession, serialize]); }, [applyAuthentication, clearSession, markUnavailable, serialize]);
useEffect(() => { useEffect(() => {
void refresh().finally(() => setReady(true)); void refresh().finally(() => setReady(true));
@@ -146,6 +159,7 @@ function useAuthProviderVm() {
clear: clearSession, clear: clearSession,
generation: () => generationRef.current, generation: () => generationRef.current,
refresh, refresh,
unavailable: () => unavailableRef.current,
}); });
}); });
useEffect(() => () => configureAuthClient(), []); useEffect(() => () => configureAuthClient(), []);
@@ -157,7 +171,9 @@ function useAuthProviderVm() {
ready, ready,
register: (email: string, password: string) => register: (email: string, password: string) =>
authenticate("/api/v1/auth/register", email, password), authenticate("/api/v1/auth/register", email, password),
retry: () => void refresh(),
signedOut, signedOut,
unavailable,
user, user,
}; };
@@ -30,4 +30,79 @@ describe("AuthForm", () => {
await waitFor(() => expect(onSubmit).not.toHaveBeenCalled()); await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
expect(await screen.findByText("Пароли не совпадают")).toBeInTheDocument(); expect(await screen.findByText("Пароли не совпадают")).toBeInTheDocument();
}); });
it.each([
["register", "Регистрация", "Уже есть аккаунт? Войти"],
["login", "Вход", "Нет аккаунта? Зарегистрироваться"],
])("blocks the switch-auth link while %s is submitting", async (_mode, submitLabel, linkLabel) => {
const { promise, resolve } = Promise.withResolvers<void>();
const onSubmit = vi.fn(() => promise);
render(
<MantineProvider>
<MemoryRouter>
<AuthForm
onSubmit={onSubmit}
register={_mode === "register"}
/>
</MemoryRouter>
</MantineProvider>,
);
fireEvent.change(screen.getByLabelText("Email"), {
target: { value: "user@example.com" },
});
fireEvent.change(screen.getByLabelText("Пароль"), {
target: { value: "a secure password" },
});
if (_mode === "register") {
fireEvent.change(screen.getByLabelText("Подтвердите пароль"), {
target: { value: "a secure password" },
});
}
fireEvent.click(screen.getByRole("button", { name: submitLabel }));
await waitFor(() => expect(onSubmit).toHaveBeenCalled());
expect(screen.queryByRole("link", { name: linkLabel })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: linkLabel })).toBeDisabled();
resolve();
await screen.findByRole("link", { name: linkLabel });
});
// Register policy is 8..72 printable ASCII; login accepts legacy passwords.
it.each([
["register", "Регистрация", "пароль-пароль", false],
["register", "Регистрация", "passw😀rd", false],
["register", "Регистрация", "a".repeat(7), false],
["register", "Регистрация", "a".repeat(8), true],
["register", "Регистрация", "a".repeat(72), true],
["register", "Регистрация", "a".repeat(73), false],
["login", "Вход", "пароль-пароль", true],
])("%s submits password %j: %s", async (mode, submitLabel, password, submitted) => {
const onSubmit = vi.fn().mockResolvedValue(undefined);
render(
<MantineProvider>
<MemoryRouter>
<AuthForm onSubmit={onSubmit} register={mode === "register"} />
</MemoryRouter>
</MantineProvider>,
);
fireEvent.change(screen.getByLabelText("Email"), { target: { value: "user@example.com" } });
fireEvent.change(screen.getByLabelText("Пароль"), { target: { value: password } });
if (mode === "register") {
fireEvent.change(screen.getByLabelText("Подтвердите пароль"), { target: { value: password } });
}
fireEvent.click(screen.getByRole("button", { name: submitLabel }));
await waitFor(() => expect(
screen.queryByText(/Пароль: от 8 до 72 символов/) === null,
).toBe(submitted));
expect(onSubmit).toHaveBeenCalledTimes(submitted ? 1 : 0);
});
}); });
+21 -5
View File
@@ -1,4 +1,4 @@
import type { FC } from "react"; import type { FC, ReactNode } from "react";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core"; import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
@@ -15,7 +15,7 @@ import {
type AuthFormProps = { type AuthFormProps = {
onSubmit: (email: string, password: string) => Promise<void>; onSubmit: (email: string, password: string) => Promise<void>;
register?: true; register?: boolean;
}; };
const AuthForm: FC<AuthFormProps> = (props) => { const AuthForm: FC<AuthFormProps> = (props) => {
@@ -45,6 +45,24 @@ const AuthForm: FC<AuthFormProps> = (props) => {
}); });
const to = register ? "/login" : "/register"; const to = register ? "/login" : "/register";
const switchLabel = t(register ? "auth.haveAccount" : "auth.noAccount");
let switchLink: ReactNode;
if (isSubmitting) {
switchLink = (
<Button aria-disabled disabled variant="subtle">
{switchLabel}
</Button>
);
}
else {
switchLink = (
<Button component={Link} to={to} variant="subtle">
{switchLabel}
</Button>
);
}
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
@@ -77,9 +95,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
{t(register ? "auth.register" : "auth.login")} {t(register ? "auth.register" : "auth.login")}
</Button> </Button>
<Button component={Link} to={to} variant="subtle"> {switchLink}
{t(register ? "auth.haveAccount" : "auth.noAccount")}
</Button>
</Stack> </Stack>
</Fieldset> </Fieldset>
</form> </form>
@@ -5,20 +5,23 @@ import { resource } from "@/test/resource";
import { section } from "./section"; import { section } from "./section";
describe("instrument source and transport presentation", () => { describe("instrument source and transport presentation", () => {
it.each(["missing", "partial", "complete"] as const)( it.each([
["initial-loading", "incomplete"],
["available", "complete"],
] as const)(
"keeps %s separate from successful transport", "keeps %s separate from successful transport",
(availability) => { (availability, completeness) => {
const data = availability === "missing" ? undefined : { rows: [] }; const data = availability === "initial-loading" ? undefined : { rows: [] };
const state = section({ const state = section({
data, data,
isError: false, isError: false,
meta: resource(data, { availability }).meta, meta: resource(data, { availability, completeness }).meta,
}); });
expect(state.loading).toBe(availability === "missing"); expect(state.loading).toBe(availability === "initial-loading");
expect(state.partial).toBe(availability === "partial"); expect(state.partial).toBe(completeness === "incomplete");
expect(state.hasData).toBe(availability !== "missing"); expect(state.hasData).toBe(availability !== "initial-loading");
}, },
); );
it("preserves empty successful data instead of treating it as missing", () => { it("preserves empty successful data instead of treating it as missing", () => {
@@ -37,7 +40,12 @@ describe("instrument source and transport presentation", () => {
it("preserves a full source when force fails", () => { it("preserves a full source when force fails", () => {
const meta = resource([], { const meta = resource([], {
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" }, lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed",
},
}).meta; }).meta;
const state = section({ data: [], isError: false, meta }); const state = section({ data: [], isError: false, meta });
@@ -53,7 +61,12 @@ describe("instrument source and transport presentation", () => {
data: undefined, data: undefined,
isError: false, isError: false,
meta: resource(null, { meta: resource(null, {
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" }, lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed",
},
}).meta, }).meta,
}); });
@@ -16,14 +16,14 @@ function section(query: {
isError: boolean; isError: boolean;
meta?: InvestmentResourceMeta; meta?: InvestmentResourceMeta;
}): SectionState { }): SectionState {
const isError = query.isError || query.meta?.sync.state === "failed"; const isError = query.isError || query.meta?.lastAttempt.state === "failed";
const hasData = hasSectionData(query.data); const hasData = hasSectionData(query.data);
return { return {
error: isError, error: isError,
hasData, hasData,
loading: !hasData && !isError, loading: !hasData && !isError,
partial: query.meta?.availability === "partial", partial: query.meta?.completeness === "incomplete",
}; };
} }
@@ -13,7 +13,6 @@ function isInvestmentPath(path: string) {
"/api/v1/brokerage-accounts", "/api/v1/brokerage-accounts",
"/api/v1/stocks", "/api/v1/stocks",
"/api/v1/bonds", "/api/v1/bonds",
"/api/v1/tbank-sync",
].some(root => path === root || path.startsWith(`${root}/`)); ].some(root => path === root || path.startsWith(`${root}/`));
} }
@@ -3,14 +3,12 @@ import { http, HttpResponse } from "msw";
import { describe, expect, it, vi } from "vitest"; import { describe, expect, it, vi } from "vitest";
import { useBrokerageAccounts } from "@/entities/brokerage-account"; import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useStockQuote } from "@/entities/stock"; import { configureAuthClient } from "@/shared/api";
import { configureAuthClient, invalidateResourceAccess } from "@/shared/api";
import { createQueryWrapper } from "@/test/query"; import { createQueryWrapper } from "@/test/query";
import { resource } from "@/test/resource"; import { resource } from "@/test/resource";
import { server } from "@/test/server"; import { server } from "@/test/server";
import { useScreenSync } from "../index"; import { useScreenSync } from "../index";
import { commitTbankConnectionBoundary } from "./connection-boundary";
function auth() { function auth() {
configureAuthClient({ configureAuthClient({
@@ -20,364 +18,23 @@ function auth() {
}); });
} }
describe("page-owned screen synchronization", () => { describe("read-only screen synchronization", () => {
it("keeps the current scope when an older sync acceptance arrives last", async () => { it("retries the resource with GET without requesting source observation", async () => {
auth(); auth();
let gets = 0;
const { promise: blocked, resolve: release } const syncModes: (null | string)[] = [];
= Promise.withResolvers<void>();
const posted: string[] = [];
const polled: string[] = [];
server.use(
http.post("*/api/v1/tbank-sync", async ({ request }) => {
const scope = (await request.json()) as {
accountId: string;
screen: "account";
};
posted.push(scope.accountId);
if (scope.accountId === "old") await blocked;
return HttpResponse.json(
{ id: scope.accountId, now: "2026-09-25T00:00:00Z", scope },
{ status: 202 },
);
}),
http.get("*/api/v1/tbank-sync/:id", ({ params }) => {
polled.push(String(params.id));
return HttpResponse.json({
id: params.id,
state: "succeeded",
});
}),
);
const { rerender, result } = renderHook(
({ accountId }) => useScreenSync({ accountId, screen: "account" }, []),
{
initialProps: { accountId: "old" },
wrapper: createQueryWrapper().wrapper,
},
);
let pending!: Promise<void>;
act(() => {
pending = result.current.refresh();
});
await waitFor(() => expect(posted).toEqual(["old"]));
rerender({ accountId: "new" });
await act(() => result.current.refresh());
await waitFor(() => expect(polled).toEqual(["new"]));
await act(async () => {
release();
await pending;
});
expect(polled).toEqual(["new"]);
expect(posted).toEqual(["old", "new"]);
});
it.each([false, true])(
"recovers a failed GET without forcing the source (cached=%s)",
async (cached) => {
auth();
const modes: (null | string)[] = [];
let isUnavailable = !cached;
let posts = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
return isUnavailable
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(
resource([], { dataRevision: String(modes.length) }),
);
}),
http.post("*/api/v1/tbank-sync", () => {
posts += 1;
return new HttpResponse(null, { status: 500 });
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
const disabled = useStockQuote("");
return {
accounts,
disabled,
sync: useScreenSync({ screen: "accounts" }, [accounts, disabled]),
};
},
{ wrapper },
);
if (cached) {
await waitFor(() =>
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
expect(result.current.accounts.isSuccess).toBe(true),
);
isUnavailable = true;
void result.current.accounts.refetch();
}
isUnavailable = false;
await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true));
expect(posts).toBe(0);
expect(modes.every(mode => mode === null)).toBe(true);
expect(result.current.disabled.data).toBeUndefined();
expect(
queryClient
.getQueryCache()
.findAll({ queryKey: ["get", "/api/v1/brokerage-accounts"] }),
).toHaveLength(1);
},
);
it.each([
["logout", true],
["connection", true],
["session", false],
["connection", false],
["access", false],
] as const)(
"discards source recovery after %s changes (HTTP already pending=%s)",
async (boundary, pending) => {
auth();
const { promise: blocked, resolve: release }
= Promise.withResolvers<void>();
let recoveryRequests = 0;
let isChanged = false;
try {
server.use(
http.get("*/api/v1/brokerage-accounts", async () => {
if (isChanged)
return HttpResponse.json(
resource([], { dataRevision: "current" }),
);
if (recoveryRequests > 0) {
recoveryRequests += 1;
await blocked;
return HttpResponse.json(resource([], { dataRevision: "old" }));
}
recoveryRequests += 1;
return HttpResponse.json(
resource(null, {
sync: {
errorCode: "TBANK_UNAVAILABLE",
id: "failed",
state: "failed",
},
}),
);
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const published: unknown[] = [];
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
if (event.type === "updated" && event.action.type === "success")
published.push(event.query.state.data);
});
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper },
);
await waitFor(() =>
expect(result.current.accounts.meta?.sync.state).toBe("failed"),
);
vi.useFakeTimers();
if (pending)
await act(() => vi.advanceTimersByTimeAsync(5000));
expect(recoveryRequests).toBeGreaterThanOrEqual(1);
await act(async () => {
isChanged = true;
switch (boundary) {
case "access": {
invalidateResourceAccess(queryClient, "brokerage", {
code: "FORBIDDEN",
});
break;
}
case "logout": {
configureAuthClient();
queryClient.clear();
break;
}
case "session": {
auth();
queryClient.clear();
break;
}
case "connection": {
commitTbankConnectionBoundary(queryClient, {
connected: true,
connectedAt: "2026-09-27T00:00:00Z",
});
}
}
release();
if (!pending) await vi.advanceTimersByTimeAsync(5000);
});
vi.useRealTimers();
if (boundary === "connection" && !pending)
await waitFor(() =>
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
expect(result.current.accounts.meta?.dataRevision).toBe("current"),
);
expect(published).not.toContainEqual(
expect.objectContaining({
meta: expect.objectContaining({ dataRevision: "old" }) as unknown,
}),
);
unsubscribe();
}
finally {
vi.useRealTimers();
}
},
);
it.each([false, true])(
"recovers an initial GET failure without forced sync (status retry=%s)",
async (retryStatus) => {
auth();
const modes: (null | string)[] = [];
let posts = 0;
let polls = 0;
try {
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
return modes.length === 1
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([]));
}),
http.post("*/api/v1/tbank-sync", () => {
posts += 1;
return HttpResponse.json({ id: "recover" }, { status: 202 });
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls += 1;
return retryStatus && polls === 1
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json({
id: "recover",
state: "succeeded",
});
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
const disabled = useStockQuote("");
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts, disabled]),
};
},
{ wrapper },
);
await waitFor(
() => expect(result.current.accounts.isSuccess).toBe(true),
{ timeout: 3000 },
);
expect(result.current.accounts.data).toEqual([]);
expect(modes).toEqual([null, null]);
expect(posts).toBe(0);
expect(polls).toBe(0);
expect(
queryClient
.getQueryCache()
.findAll({ queryKey: ["get", "/api/v1/brokerage-accounts"] }),
).toHaveLength(1);
}
finally {
vi.useRealTimers();
}
},
);
it("posts only its scope once and observes completion without importing again", async () => {
auth();
const modes: (null | string)[] = [];
const bodies: unknown[] = [];
let isCompleted = false;
let polls = 0;
const meta = () =>
resource([], { dataRevision: isCompleted ? "2" : "1" }).meta;
server.use( server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => { http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync")); gets += 1;
syncModes.push(new URL(request.url).searchParams.get("sync"));
return HttpResponse.json(resource([], meta())); return gets === 1
}), ? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
http.post("*/api/v1/tbank-sync", async ({ request }) => { : HttpResponse.json(resource([]));
bodies.push(await request.json());
isCompleted = true;
return HttpResponse.json(
{
id: "screen",
now: "2026-09-25T00:00:00Z",
scope: { screen: "accounts" },
},
{ status: 202 },
);
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls++;
return HttpResponse.json(
{
errorCode: null,
id: "screen",
now: "2026-09-25T00:00:00Z",
scope: { screen: "accounts" },
state: "succeeded",
},
);
}), }),
); );
const { result, unmount } = renderHook( const { result } = renderHook(
() => { () => {
const accounts = useBrokerageAccounts(); const accounts = useBrokerageAccounts();
@@ -389,382 +46,67 @@ describe("page-owned screen synchronization", () => {
{ wrapper: createQueryWrapper().wrapper }, { wrapper: createQueryWrapper().wrapper },
); );
await waitFor(() => expect(gets).toBe(1));
await act(async () => result.current.sync.retry());
await waitFor(() => expect(result.current.accounts.data).toEqual([])); await waitFor(() => expect(result.current.accounts.data).toEqual([]));
await act(async () => {
await Promise.all([
result.current.sync.refresh(),
result.current.sync.refresh(),
]);
});
await waitFor(() =>
expect(result.current.accounts.meta?.dataRevision).toBe("2"),
);
expect(bodies).toEqual([{ screen: "accounts" }]);
expect(modes).toEqual([null, "observe"]); expect(gets).toBe(2);
vi.useFakeTimers(); expect(syncModes).toEqual([null, null]);
try {
await act(() => vi.advanceTimersByTimeAsync(120_000));
expect(polls).toBe(1);
expect(modes).toEqual([null, "observe"]);
unmount();
await vi.advanceTimersByTimeAsync(120_000);
expect(polls).toBe(1);
}
finally {
vi.useRealTimers();
}
}); });
it.each(["leave", "logout"])(
"publishes completed empty coverage while history runs, then stops on %s",
async (boundary) => {
vi.useFakeTimers();
try { it("refreshes the currently open resources together", async () => {
auth();
let isCompleted = false;
let polls = 0;
const modes: (null | string)[] = [];
const snapshot = () =>
resource(isCompleted ? [] : null, {
dataRevision: isCompleted ? "covered" : "initial",
sync: { errorCode: null, id: "history", state: "running" },
unavailableReason: isCompleted
? undefined
: "CALENDAR_OR_ACCOUNT_HISTORY",
});
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
return HttpResponse.json(snapshot());
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls++;
return HttpResponse.json(
{
errorCode: null,
id: "history",
now: "2026-09-25T00:00:00Z",
scope: null,
state: "running",
},
);
}),
);
const { result, unmount } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper: createQueryWrapper().wrapper },
);
await vi.waitFor(() => expect(modes).toEqual([null, "observe"]));
expect(polls).toBe(1);
expect(result.current.sync.refreshing).toBe(true);
expect(result.current.accounts.data).toBeUndefined();
isCompleted = true;
await act(() => vi.advanceTimersByTimeAsync(5000));
await vi.waitFor(() =>
expect(result.current.accounts.data).toEqual([]),
);
expect(result.current.sync.refreshing).toBe(true);
expect(modes).toEqual([null, "observe", "observe"]);
if (boundary === "leave") unmount();
else act(() => configureAuthClient());
await act(() => vi.advanceTimersByTimeAsync(60_000));
expect(polls).toBe(2);
expect(modes).toHaveLength(3);
}
finally {
vi.useRealTimers();
}
},
);
it("runs the next status poll and observe read only after five seconds", async () => {
auth(); auth();
const modes: (null | string)[] = []; let gets = 0;
const pollGaps: number[] = [];
let polls = 0;
let previousPollAt = 0;
server.use( server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => { http.get("*/api/v1/brokerage-accounts", () => {
modes.push(new URL(request.url).searchParams.get("sync")); gets += 1;
return HttpResponse.json( return HttpResponse.json(resource([]));
resource([], {
sync: { errorCode: null, id: "history", state: "running" },
}),
);
}),
http.get("*/api/v1/tbank-sync/:id", () => {
const now = Date.now();
if (previousPollAt) pollGaps.push(now - previousPollAt);
previousPollAt = now;
polls++;
return HttpResponse.json({
errorCode: null,
id: "history",
now: "2026-09-25T00:00:00Z",
scope: null,
state: "running",
});
}), }),
); );
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return useScreenSync({ screen: "accounts" }, [accounts]);
},
{ wrapper: createQueryWrapper().wrapper },
);
await waitFor(() => expect(gets).toBe(1));
await act(async () => result.current.refresh());
await waitFor(() => expect(gets).toBe(2));
});
it("does not manually refetch disabled resources", async () => {
vi.useFakeTimers(); vi.useFakeTimers();
const refetch = vi.fn(() => Promise.resolve());
const resource = {
isEnabled: false,
isError: true,
isFetching: false,
queryKey: [],
refetch,
};
try { try {
const { unmount } = renderHook( const { result, unmount } = renderHook(() =>
() => { useScreenSync({ screen: "accounts" }, [resource]),
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper: createQueryWrapper().wrapper },
); );
await vi.waitFor(() => expect(modes).toEqual([null, "observe"])); await act(async () => {
expect(polls).toBe(1); await result.current.refresh();
await result.current.retry();
await act(() => vi.advanceTimersByTimeAsync(2500));
expect(polls).toBe(1);
expect(modes).toEqual([null, "observe"]);
await act(() => vi.advanceTimersByTimeAsync(5000));
await vi.waitFor(() => expect(polls).toBe(2));
expect(modes).toEqual([null, "observe", "observe"]);
expect(pollGaps).toHaveLength(1);
expect(pollGaps[0]).toBeGreaterThanOrEqual(5000);
unmount();
await act(() => vi.advanceTimersByTimeAsync(60_000));
expect(polls).toBe(2);
expect(modes).toHaveLength(3);
}
finally {
vi.useRealTimers();
}
});
it("observes resources immediately when a status response turns terminal", async () => {
auth();
const modes: (null | string)[] = [];
let isCompleted = false;
let polls = 0;
const meta = () =>
resource([], {
dataRevision: isCompleted ? "covered" : "initial",
sync: { errorCode: null, id: "history", state: "running" },
}); });
await act(() => vi.advanceTimersByTime(1_800_000));
server.use( expect(refetch).not.toHaveBeenCalled();
http.get("*/api/v1/brokerage-accounts", ({ request }) => { unmount();
modes.push(new URL(request.url).searchParams.get("sync"));
return HttpResponse.json(meta());
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls++;
return HttpResponse.json({
errorCode: null,
id: "history",
now: "2026-09-25T00:00:00Z",
scope: null,
state: isCompleted ? "succeeded" : "running",
});
}),
);
vi.useFakeTimers();
try {
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper: createQueryWrapper().wrapper },
);
await vi.waitFor(() => expect(modes).toEqual([null, "observe"]));
expect(polls).toBe(1);
expect(result.current.sync.refreshing).toBe(true);
isCompleted = true;
await act(() => vi.advanceTimersByTimeAsync(5000));
await vi.waitFor(() => expect(modes).toEqual([null, "observe", "observe"]));
expect(polls).toBe(2);
expect(result.current.accounts.meta?.dataRevision).toBe("covered");
expect(result.current.sync.refreshing).toBe(false);
await act(() => vi.advanceTimersByTimeAsync(60_000));
expect(polls).toBe(2);
expect(modes).toHaveLength(3);
} }
finally { finally {
vi.useRealTimers(); vi.useRealTimers();
} }
}); });
it("clears private snapshots when status confirms access loss", async () => {
auth();
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(
resource(
[],
{
sync: { errorCode: null, id: "revoked", state: "running" },
},
),
),
),
http.get("*/api/v1/tbank-sync/:id", () =>
HttpResponse.json({ code: "INVALID_TBANK_TOKEN" }, { status: 400 }),
),
);
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper: createQueryWrapper().wrapper },
);
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
expect(result.current.accounts.data).toBeUndefined();
});
it("observes a projection when only its dependency reports new coverage", async () => {
auth();
let isObserved = false;
const modes: (null | string)[] = [];
const dependency = resource(
[],
{
dataRevision: isObserved ? "covered" : "initial",
resourceKey: "operations",
sync: {
errorCode: null,
id: "dependency",
state: isObserved ? "idle" : "running",
},
},
).meta;
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
const mode = new URL(request.url).searchParams.get("sync");
modes.push(mode);
if (mode) isObserved = true;
return HttpResponse.json(
resource(
isObserved
? []
: null,
{
dependencies: [
{
...dependency,
dataRevision: isObserved ? "covered" : "initial",
},
],
resourceKey: "projection",
},
),
);
}),
http.get("*/api/v1/tbank-sync/:id", () =>
HttpResponse.json(
{
errorCode: null,
id: "dependency",
now: "2026-09-25T00:00:00Z",
scope: null,
state: "succeeded",
},
),
),
);
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]);
return accounts;
},
{ wrapper: createQueryWrapper().wrapper },
);
await waitFor(() => expect(result.current.data).toEqual([]));
expect(modes).toEqual([null, "observe"]);
});
it("preserves a fresh snapshot and timestamp after a failed force", async () => {
auth();
const saved = resource([], { lastSuccessfulAt: "2026-09-25T01:00:00Z" });
server.use(
http.get("*/api/v1/brokerage-accounts", () => HttpResponse.json(saved)),
http.post("*/api/v1/tbank-sync", () =>
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
),
);
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
};
},
{ wrapper: createQueryWrapper().wrapper },
);
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
await act(() => result.current.sync.refresh());
await waitFor(() => expect(result.current.sync.transportError).toBe(true));
expect(result.current.accounts.meta).toEqual(saved.meta);
});
}); });
@@ -1,269 +1,61 @@
import { import type { QueryKey } from "@tanstack/react-query";
focusManager,
onlineManager,
type QueryKey,
useQueryClient,
} from "@tanstack/react-query";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { import type { InvestmentResourceMeta } from "@/shared/api";
ApiErrorCode,
apiErrorCode,
apiQueryClient,
invalidateResourceAccess,
type InvestmentResourceMeta,
isApiErrorCode,
type paths,
useAuthenticatedQueries,
} from "@/shared/api";
type InvestmentScreen
= paths["/api/v1/tbank-sync"]["post"]["requestBody"]["content"]["application/json"];
type ScreenResource = { type ScreenResource = {
isEnabled: boolean;
isError: boolean; isError: boolean;
isFetching: boolean; isFetching: boolean;
meta?: InvestmentResourceMeta; meta?: InvestmentResourceMeta;
observe: () => Promise<unknown>;
queryKey: QueryKey; queryKey: QueryKey;
refetch: () => Promise<unknown>; refetch: () => Promise<unknown>;
}; };
const STATUS_INTERVAL_MS = 5000; type ScreenScope = {
const FIRST_SOURCE_RECOVERY_DELAY_MS = 5000; [key: string]: unknown;
const SECOND_SOURCE_RECOVERY_DELAY_MS = 15_000; screen: string;
};
function requiresSourceRecovery(meta?: InvestmentResourceMeta): boolean { const READ_INTERVAL_MS = 1_800_000;
if (!meta || meta.unavailableReason) return false;
return ["cancelled", "failed"].includes(meta.sync.state) function useScreenSync(_scope: ScreenScope, resources: ScreenResource[]) {
|| meta.availability === "missing" const resourcesRef = useRef(resources);
|| meta.freshness === "stale" useEffect(() => {
|| (meta.dependencies ?? []).some(dependency => resourcesRef.current = resources;
requiresSourceRecovery(dependency), }, [resources]);
);
}
function sourceRecoveryDelay(attempt: number): number | undefined { useEffect(() => {
switch (attempt) { const timer = setInterval(() => {
case 0: { for (const resource of resourcesRef.current) {
return FIRST_SOURCE_RECOVERY_DELAY_MS; if (!resource.isEnabled || resource.isFetching) continue;
} void resource.refetch().catch(() => {});
}
}, READ_INTERVAL_MS);
case 1: { return () => clearInterval(timer);
return SECOND_SOURCE_RECOVERY_DELAY_MS; }, []);
}
default: { const isRefreshing = resources.some(
return undefined; resource => resource.isEnabled && resource.isFetching,
}
}
}
function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
const mutation = apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
retry: false,
});
const client = useQueryClient();
const deniedRef = useRef(new Set<unknown>());
const scopeKey = JSON.stringify(scope);
const requestInFlightRef = useRef<null | string>(null);
const lifecycleRecoveryRef = useRef(new Set<string>());
const sourceRecoveryRef = useRef(new Map<string, number>());
const sourceTimersRef = useRef(new Set<ReturnType<typeof setTimeout>>());
const isCurrentMutation
= JSON.stringify(mutation.variables?.body) === scopeKey;
const observedRef = useRef("");
const ids = [
...new Set([
...(isCurrentMutation && mutation.data ? [mutation.data.id] : []),
...resources
.flatMap(({ meta }) =>
meta ? [meta, ...(meta.dependencies ?? [])] : [],
)
.flatMap(meta =>
meta.sync.id
&& meta.sync.state === "running"
? [meta.sync.id]
: [],
),
]),
];
const statuses = useAuthenticatedQueries(
ids.map(id => ({
...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", {
params: { path: { id } },
}),
refetchInterval: (query: {
state: { data?: { state: string }; error: unknown };
}) =>
!(
query.state.error
|| (query.state.data && query.state.data.state !== "running")
) && STATUS_INTERVAL_MS,
refetchOnMount: false,
refetchOnWindowFocus: false,
retry: false,
})),
); );
useEffect(() => { const eligible = resources.filter(
for (const status of statuses) { resource => resource.isEnabled && !resource.isFetching,
if (!status.error || deniedRef.current.has(status.error)) { );
continue;
}
deniedRef.current.add(status.error);
if (!isApiErrorCode(apiErrorCode(status.error), ApiErrorCode.NotFound))
invalidateResourceAccess(client, "brokerage", status.error);
}
if (statuses.every(status => !status.data)) return;
const observation = JSON.stringify([
scopeKey,
statuses.map(status => [
status.data?.id,
status.data?.state,
status.dataUpdatedAt,
]),
resources.map(resource => resource.queryKey),
]);
if (observedRef.current === observation) return;
observedRef.current = observation;
const isCompleted = statuses.every(
status => status.data && status.data.state !== "running",
);
for (const resource of resources)
if (isCompleted || !resource.isFetching)
void resource.observe().catch(() => {});
}, [client, statuses, resources, scopeKey]);
useEffect(() => {
const timers = sourceTimersRef.current;
const attempts = sourceRecoveryRef.current;
return () => {
for (const timer of timers) clearTimeout(timer);
timers.clear();
attempts.clear();
};
}, [scopeKey]);
useEffect(() => {
for (const resource of resources) {
if (
!requiresSourceRecovery(resource.meta)
|| resource.isFetching
) continue;
const key = JSON.stringify([scopeKey, resource.queryKey]);
const attempt = sourceRecoveryRef.current.get(key) ?? 0;
const delay = sourceRecoveryDelay(attempt);
if (delay === undefined) continue;
sourceRecoveryRef.current.set(key, attempt + 1);
const timer = setTimeout(() => {
sourceTimersRef.current.delete(timer);
void resource.refetch().catch(() => {});
}, delay);
sourceTimersRef.current.add(timer);
}
}, [resources, scopeKey]);
useEffect(() => {
const recover = () => {
for (const resource of resources) {
if (
!requiresSourceRecovery(resource.meta)
|| resource.isFetching
) continue;
const key = JSON.stringify([scopeKey, resource.queryKey]);
if (lifecycleRecoveryRef.current.has(key)) continue;
sourceRecoveryRef.current.delete(key);
lifecycleRecoveryRef.current.add(key);
void resource.refetch()
.catch(() => {})
.finally(() => lifecycleRecoveryRef.current.delete(key));
}
};
const unsubscribeFocus = focusManager.subscribe((focused) => {
if (focused) recover();
});
const unsubscribeOnline = onlineManager.subscribe((online) => {
if (online) recover();
});
return () => {
unsubscribeFocus();
unsubscribeOnline();
};
}, [resources, scopeKey]);
const isRefreshing
= (isCurrentMutation && mutation.isPending)
|| statuses.some(
status => !status.isError && status.data?.state === "running",
)
|| resources.some(({ meta }) => {
const status = statuses[ids.indexOf(meta?.sync.id ?? "")];
return (
!status?.isError
&& (!status?.data || status.data.state === "running")
&& meta?.sync.state === "running"
);
});
const refresh = async () => { const refresh = async () => {
if (isRefreshing || requestInFlightRef.current === scopeKey) return; if (isRefreshing) return;
requestInFlightRef.current = scopeKey; await Promise.allSettled(eligible.map(resource => resource.refetch()));
try {
await mutation.mutateAsync({ body: scope });
}
catch {
/*
The mutation retains the transport error for presentation.
*/
}
finally {
if (requestInFlightRef.current === scopeKey)
requestInFlightRef.current
= null;
}
}; };
// Retry failed HTTP reads without asking the source to import again. // Retry only the HTTP read; source attempts are reported in resource metadata.
// A source failure (or explicit refresh with no read error) still needs a sync.
const retry = async () => { const retry = async () => {
const failed = resources.filter( const failed = eligible.filter(resource => resource.isError);
resource => resource.isError,
);
const failedStatuses = statuses.filter(status => status.isError); if (failed.length > 0)
if (failed.length > 0 || failedStatuses.length > 0) { await Promise.allSettled(failed.map(resource => resource.refetch()));
await Promise.allSettled([
...failed.map(resource => resource.observe()),
...failedStatuses.map(status => status.refetch()),
]);
}
else await refresh(); else await refresh();
}; };
@@ -271,13 +63,11 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
refresh, refresh,
refreshing: isRefreshing, refreshing: isRefreshing,
retry, retry,
sourceError: sourceError: resources.some(
statuses.some(status => status.data?.state === "failed") ({ meta }) => meta?.lastAttempt.state === "failed",
|| resources.some(({ meta }) => meta?.sync.state === "failed"), ),
transportError: transportError: resources.some(resource => resource.isError),
(isCurrentMutation && mutation.isError)
|| statuses.some(status => status.isError),
}; };
} }
export { type InvestmentScreen, useScreenSync }; export { useScreenSync };
@@ -1,148 +0,0 @@
import { act, renderHook, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { describe, expect, it, vi } from "vitest";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { apiQueryClient, configureAuthClient } from "@/shared/api";
import { createQueryWrapper } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import type { InvestmentScreen } from "./screen-sync";
import { useScreenSync } from "../index";
import { commitTbankConnectionBoundary } from "./connection-boundary";
describe("sync connection and session boundaries", () => {
it.each(["connection", "session"])(
"keeps old status out of the cache after %s changes",
async (boundary) => {
let generation = 0;
configureAuthClient({
accessToken: () => "synthetic",
clear: vi.fn(),
generation: () => generation,
refresh: () => Promise.resolve(true),
});
const { promise: blocked, resolve: release }
= Promise.withResolvers<void>();
const accepted = {
id: "work",
now: "2026-09-25T12:00:00Z",
scope: { screen: "accounts" },
};
let started = 0;
let isChanged = false;
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(resource([], {
sync: { errorCode: null, id: "work", state: "running" },
})),
),
http.post("*/api/v1/tbank-sync", async () => {
started += 1;
await blocked;
return HttpResponse.json(accepted, { status: 202 });
}),
http.get("*/api/v1/tbank-sync/:id", async () => {
const now = isChanged ? "2026-09-25T12:01:00Z" : accepted.now;
started += 1;
await blocked;
return HttpResponse.json(
{
...accepted,
errorCode: null,
now,
state: "succeeded",
},
);
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const published: string[] = [];
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
if (
(event.query.queryKey as readonly unknown[])[1]
!== "/api/v1/tbank-sync/{id}"
) {
return;
}
const data = event.query.state.data as undefined | { now?: string };
if (data?.now) published.push(data.now);
});
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]);
return {
mutation: apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
retry: false,
}),
};
},
{ wrapper },
);
const screen: InvestmentScreen = { screen: "accounts" };
let mutation!: Promise<unknown>;
act(() => {
mutation = result.current.mutation.mutateAsync({ body: screen });
});
// eslint-disable-next-line unicorn/prefer-await -- Handle rejection before changing the boundary and releasing the pending response.
const settled = mutation.catch(() => {});
await waitFor(() => expect(started).toBe(2));
await act(async () => {
isChanged = true;
if (boundary === "connection")
commitTbankConnectionBoundary(
queryClient,
{
connected: false,
connectedAt: null,
},
);
else {
generation += 1;
queryClient.clear();
}
release();
await blocked;
});
await settled;
const key = apiQueryClient.queryOptions(
"get",
"/api/v1/tbank-sync/{id}",
{ params: { path: { id: "work" } } },
).queryKey;
// A new request may start after a successful connection boundary; an old result cannot win it.
if (boundary === "session")
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
expect(queryClient.getQueryData(key)).toBeUndefined();
else
await waitFor(() =>
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
expect(queryClient.getQueryData(key)).toMatchObject({
now: "2026-09-25T12:01:00Z",
}),
);
expect(published).not.toContain(accepted.now);
unsubscribe();
},
);
});
@@ -17,10 +17,10 @@ import {
useLocation, useLocation,
useNavigate, useNavigate,
} from "react-router"; } from "react-router";
import { beforeEach, describe, expect, it, vi } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api"; import { configureAuthClient } from "@/shared/api";
import { defaultPeriod, formatDate } from "@/shared/lib"; import { defaultPeriod, formatDate, moscowDate } from "@/shared/lib";
import { createTestQueryClient } from "@/test/query"; import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource"; import { resource } from "@/test/resource";
import { server } from "@/test/server"; import { server } from "@/test/server";
@@ -72,7 +72,14 @@ function renderEvents(accountId: string, searches: string[]) {
} }
describe("Upcoming event date filters", () => { describe("Upcoming event date filters", () => {
afterEach(() => {
vi.useRealTimers();
});
beforeEach(() => { beforeEach(() => {
// Pin "today": the test picks today + 10 days, which must be inside the visible calendar grid.
// Real dates can push it beyond the grid (e.g. 2026-10-23 -> 2 November).
vi.useFakeTimers({ toFake: ["Date"] });
vi.setSystemTime(new Date("2026-08-10T09:00:00Z"));
configureAuthClient({ configureAuthClient({
accessToken: () => "token", accessToken: () => "token",
clear: vi.fn(), clear: vi.fn(),
@@ -80,6 +87,8 @@ describe("Upcoming event date filters", () => {
}); });
}); });
afterEach(() => vi.useRealTimers());
it("keeps reads and sync disabled without an account scope", async () => { it("keeps reads and sync disabled without an account scope", async () => {
const requests: string[] = []; const requests: string[] = [];
server.use( server.use(
@@ -123,9 +132,10 @@ describe("Upcoming event date filters", () => {
resource( resource(
null, null,
{ {
sync: { lastAttempt: {
errorCode: "TBANK_UNAVAILABLE", finishedAt: "2026-08-14T00:01:00Z",
id: null, problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed", state: "failed",
}, },
}, },
@@ -228,6 +238,10 @@ describe("Upcoming event date filters", () => {
it.each(["account-1", "all"])( it.each(["account-1", "all"])(
"applies dates only on submit, restores URL dates, and resets from empty results for %s", "applies dates only on submit, restores URL dates, and resets from empty results for %s",
async (accountId) => { async (accountId) => {
// Pin "today" mid-month so "today + 10 days" stays in the calendar's
// visible month regardless of the real date.
vi.useFakeTimers({ toFake: ["Date"] });
vi.setSystemTime(new Date("2026-10-15T12:00:00+03:00"));
const [defaultFrom, defaultTo] = defaultPeriod(); const [defaultFrom, defaultTo] = defaultPeriod();
const searches: string[] = []; const searches: string[] = [];
server.use( server.use(
@@ -252,37 +266,58 @@ describe("Upcoming event date filters", () => {
expect(from).toHaveTextContent("01.02.2026 – 28.02.2026"); expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]); expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
fireEvent.click(from);
// The calendar opens on the applied month, so reset to the default
// range first, then pick today and a future date.
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
await waitFor(() => expect(screen.getByLabelText("URL")).toBeEmptyDOMElement());
const picker = await screen.findByLabelText("Период");
const [today] = defaultPeriod();
const [year = 1970, month = 0, day = 1] = today.split("-").map(Number);
const future = moscowDate(new Date(
Date.UTC(year, month - 1, day + 10, 12),
));
// Mantine calendar labels follow dayjs default (English) locale.
const calendarLabel = (date: string) => {
const monthName = new Intl.DateTimeFormat("en", { month: "long" })
.format(new Date(`${date}T12:00:00Z`));
const pattern = `${Number(date.slice(8))} ${monthName} ${date.slice(0, 4)}`;
// Dates are constructed above from validated defaultPeriod output.
// eslint-disable-next-line security/detect-non-literal-regexp -- see comment above
return new RegExp(pattern, "i");
};
fireEvent.click(picker);
fireEvent.click( fireEvent.click(
await screen.findByRole("button", { name: /10 February 2026/i }), await screen.findByRole("button", { name: calendarLabel(today) }),
); );
fireEvent.click( fireEvent.click(
await screen.findByRole("button", { name: /28 February 2026/i }), await screen.findByRole("button", { name: calendarLabel(future) }),
); );
expect(searches).toHaveLength(1); // The reset itself fetched the default range; picking dates applies only on submit.
expect(searches).toEqual([
"?from=2026-02-01&to=2026-02-28",
`?from=${defaultFrom}&to=${defaultTo}`,
]);
fireEvent.click(screen.getByRole("button", { name: "Применить" })); fireEvent.click(screen.getByRole("button", { name: "Применить" }));
await waitFor(() => await waitFor(() =>
expect(searches.at(-1)).toBe("?from=2026-02-10&to=2026-02-28"), expect(searches.at(-1)).toBe(`?from=${today}&to=${future}`),
); );
expect(await screen.findByLabelText("Период")).toHaveTextContent( expect(await screen.findByLabelText("Период")).toHaveTextContent(
"10.02.2026 – 28.02.2026", `${formatDate(today)} – ${formatDate(future)}`,
); );
fireEvent.click(screen.getByRole("button", { name: "History back" })); fireEvent.click(screen.getByRole("button", { name: "History back" }));
await waitFor(() => await waitFor(() =>
expect(screen.getByLabelText("Период")).toHaveTextContent( expect(screen.getByLabelText("Период")).toHaveTextContent(
"01.02.2026 – 28.02.2026", `${formatDate(defaultFrom)} – ${formatDate(defaultTo)}`,
), ),
); );
expect(screen.getByLabelText("URL")).toHaveTextContent( expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
"?from=2026-02-01&to=2026-02-28",
);
fireEvent.click(screen.getByRole("button", { name: "Сбросить" }));
await waitFor(() =>
expect(searches.at(-1)).toBe(`?from=${defaultFrom}&to=${defaultTo}`),
);
expect(await screen.findByLabelText("Период")).toHaveTextContent(
`${formatDate(defaultFrom)} – ${formatDate(defaultTo)}`,
);
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect( expect(
screen.getByText("За выбранный период событий не найдено"), screen.getByText("За выбранный период событий не найдено"),
@@ -309,7 +344,14 @@ it("retains the previous complete forecast when its source refresh fails", async
const snapshot = resource( const snapshot = resource(
{ events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] }, { events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] },
{ sync: { errorCode: "TBANK_UNAVAILABLE", id: "failed", state: "failed" } }, {
lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed",
},
},
); );
server.use( server.use(
@@ -51,8 +51,9 @@ describe("AccountEventsPage", () => {
isError: false, isError: false,
isLoading: false, isLoading: false,
meta: { meta: {
availability: "complete", availability: "available",
sync: { errorCode: null, id: null, state: "idle" }, completeness: "complete",
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
}, },
refetch: vi.fn(), refetch: vi.fn(),
} as never, } as never,
@@ -85,8 +86,9 @@ describe("AccountEventsPage", () => {
isError: false, isError: false,
isLoading: false, isLoading: false,
meta: { meta: {
availability: "complete", availability: "available",
sync: { errorCode: null, id: null, state: "idle" }, completeness: "complete",
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
}, },
refetch: vi.fn(), refetch: vi.fn(),
} as never, } as never,
@@ -138,8 +140,9 @@ describe("AccountEventsPage", () => {
isError: false, isError: false,
isLoading: false, isLoading: false,
meta: { meta: {
availability: "complete", availability: "available",
sync: { errorCode: null, id: null, state: "idle" }, completeness: "complete",
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
}, },
refetch: vi.fn(), refetch: vi.fn(),
} as never, } as never,
@@ -153,7 +156,7 @@ describe("AccountEventsPage", () => {
expect(screen.getAllByText(/RU000A0JX0J2$/)).toHaveLength(1); expect(screen.getAllByText(/RU000A0JX0J2$/)).toHaveLength(1);
expect(screen.getByText("25.08.2026")).toBeVisible(); expect(screen.getByText("25.08.2026")).toBeVisible();
expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument(); expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument();
expect(screen.getAllByText("Ожидаемая сумма")).toHaveLength(2); expect(screen.getAllByText("Прогноз")).toHaveLength(2);
const logo = screen.queryByAltText(""); const logo = screen.queryByAltText("");
expect(logo).toHaveAttribute( expect(logo).toHaveAttribute(
"src", "src",
@@ -194,8 +197,9 @@ describe("AccountEventsPage", () => {
isError: false, isError: false,
isLoading: true, isLoading: true,
meta: { meta: {
availability: "complete", availability: "available",
sync: { errorCode: null, id: null, state: "idle" }, completeness: "complete",
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
}, },
refetch: vi.fn(), refetch: vi.fn(),
} as never, } as never,
@@ -207,4 +211,30 @@ describe("AccountEventsPage", () => {
expect(status).toHaveAttribute("aria-busy", "true"); expect(status).toHaveAttribute("aria-busy", "true");
expect(within(status).queryByRole("button")).not.toBeInTheDocument(); expect(within(status).queryByRole("button")).not.toBeInTheDocument();
}); });
it("keeps a null events envelope loading instead of an empty period", () => {
query.mockReturnValue(
{
data: null,
isError: false,
isLoading: false,
meta: {
availability: "available",
completeness: "complete",
lastAttempt: { finishedAt: null, problems: [], startedAt: null, state: "none" },
},
refetch: vi.fn(),
} as never,
);
renderPage();
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
"aria-busy",
"true",
);
expect(
screen.queryByText("За выбранный период событий не найдено"),
).not.toBeInTheDocument();
});
}); });
@@ -1,6 +1,8 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import type { InvestmentResourceMeta } from "@/shared/api";
import { import {
type BrokerageEvent, type BrokerageEvent,
useBrokerageEvents, useBrokerageEvents,
@@ -19,12 +21,13 @@ type AccountEventsPageViewModel
canApply: boolean; canApply: boolean;
draftPeriod: [null | string, null | string]; draftPeriod: [null | string, null | string];
events: BrokerageEvent[]; events: BrokerageEvent[];
maxDate: string; minDate: string;
onApply: () => void; onApply: () => void;
onPeriodChange: (value: [null | string, null | string]) => void; onPeriodChange: (value: [null | string, null | string]) => void;
onPeriodPopoverOpen: () => void; onPeriodPopoverOpen: () => void;
onReset: () => void; onReset: () => void;
partial?: boolean; partial?: boolean;
source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
} }
| { onReset: () => void; state: "error" } | { onReset: () => void; state: "error" }
@@ -46,7 +49,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
const [draftFrom, draftTo] = draftPeriod; const [draftFrom, draftTo] = draftPeriod;
const [maxDate, setMaxDate] = useState(() => moscowDate(new Date())); const [minDate, setMinDate] = useState(() => moscowDate(new Date()));
const scope = JSON.stringify([accountId, appliedFrom, appliedTo]); const scope = JSON.stringify([accountId, appliedFrom, appliedTo]);
const [previousScope, setPreviousScope] = useState(scope); const [previousScope, setPreviousScope] = useState(scope);
@@ -74,7 +77,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: !!events.data, hasContent: !!events.data,
identity: scope, identity: scope,
isError: events.isError || events.meta?.sync.state === "failed", isError: events.isError || events.meta?.lastAttempt.state === "failed",
isFetching: events.isFetching, isFetching: events.isFetching,
}); });
@@ -86,7 +89,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
setSearchParameters({}); setSearchParameters({});
}; };
if ((events.isError || events.meta?.sync.state === "failed") && !events.data) if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
return { return {
onReset, onReset,
state: "error", state: "error",
@@ -102,7 +105,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
&& isValidPeriod(draftFrom, draftTo), && isValidPeriod(draftFrom, draftTo),
draftPeriod, draftPeriod,
events: events.data.events, events: events.data.events,
maxDate, minDate,
onApply: () => { onApply: () => {
if (!isValidPeriod(draftFrom, draftTo)) return; if (!isValidPeriod(draftFrom, draftTo)) return;
setSearchParameters({ setSearchParameters({
@@ -113,9 +116,10 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
onPeriodChange: value => setDraftPeriod( onPeriodChange: value => setDraftPeriod(
value[0] === null && value[1] === null ? defaultPeriod() : value, value[0] === null && value[1] === null ? defaultPeriod() : value,
), ),
onPeriodPopoverOpen: () => setMaxDate(moscowDate(new Date())), onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
onReset, onReset,
partial: events.meta?.availability !== "complete", partial: events.meta?.completeness === "incomplete",
source: events.meta,
state: "loaded", state: "loaded",
}; };
} }
@@ -15,6 +15,7 @@ import {
BrokerageEventCard, BrokerageEventCard,
brokerageEventKey, brokerageEventKey,
} from "@/entities/brokerage-event"; } from "@/entities/brokerage-event";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm"; import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -55,6 +56,12 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
<Stack gap="lg"> <Stack gap="lg">
<Title order={1}>{t("events.title")}</Title> <Title order={1}>{t("events.title")}</Title>
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>} {!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
<Text c="dimmed">{t("events.hint")}</Text> <Text c="dimmed">{t("events.hint")}</Text>
@@ -65,7 +72,7 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
clearable clearable
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }} clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
label={t("ledger.period")} label={t("ledger.period")}
maxDate={props.maxDate} minDate={props.minDate}
onChange={props.onPeriodChange} onChange={props.onPeriodChange}
popoverProps={{ popoverProps={{
middlewares: { shift: { crossAxis: true } }, middlewares: { shift: { crossAxis: true } },
+14 -156
View File
@@ -2,167 +2,25 @@ import { describe, expect, it } from "vitest";
import type { IncomeAnalytics } from "@/entities/income"; import type { IncomeAnalytics } from "@/entities/income";
import { resource } from "@/test/resource";
import { toIncomeDisplayModel } from "./display"; import { toIncomeDisplayModel } from "./display";
const analytics: IncomeAnalytics = { describe("income payments display", () => {
accountId: "account-1", it("keeps repeated IDs, order and logo revisions without reconstructing financial data", () => {
bucketGranularity: "day", const payment = {
buckets: [], id: "same",
calculatedAt: "2026-08-27T00:00:00Z", instrumentKey: "bond:RUB",
entries: [], logoName: null,
instruments: [], } as IncomeAnalytics["entries"][number];
period: { from: "2026-08-01", to: "2026-08-27" },
previous: {
period: { from: "2026-07-01", to: "2026-07-31" },
totalsByCurrency: [comparison("RUB")],
},
totalsByCurrency: [],
yearComparison: null,
};
function comparison(currency: string) { const analytics = {
return { entries: [payment, payment, { ...payment, logoName: "bond.png" }],
compared: summary(currency, "1", "0"), } as IncomeAnalytics;
currency,
difference: summary(currency, "9", "2"),
selected: summary(currency, "10", "2"),
};
}
function money(currency: string, value: string) { const display = toIncomeDisplayModel(analytics);
return { currency, value };
}
function summary(currency: string, coupon: string, dividend: string) { expect(display.entries.map(({ operation }) => operation)).toEqual(
return { analytics.entries,
coupon: money(currency, coupon),
currency,
dividend: money(currency, dividend),
total: money(currency, String(Number(coupon) + Number(dividend))),
};
}
describe("income comparison display", () => {
it.each([
["25", "100", "+25 %"],
["-25", "100", "-25 %"],
["0", "100", "0 %"],
["-0.000", "100", "0 %"],
["0.0001", "100", "0 %"],
["1", "3", "+33,3 %"],
["0.01", "0.04", "+25 %"],
["123456789012345678.123456789", "123456789012345678.123456789", "+100 %"],
[
"10",
"0",
null,
],
[
"0",
"0",
null,
],
[
"10",
"-0.00",
null,
],
[
"10",
"-100",
null,
],
[
"9".repeat(400),
"1",
null,
],
[
"1",
"9".repeat(400),
null,
],
])("formats change %s against base %s", (difference, base, expected) => {
const value = comparison("RUB");
value.difference.coupon = money("RUB", difference);
value.compared.coupon = money("RUB", base);
const display = toIncomeDisplayModel({
...analytics,
yearComparison: {
period: { from: "2025-08-01", to: "2025-08-27" },
totalsByCurrency: [value],
},
});
const result = display?.comparison?.values[0];
expect(
result?.percentages.coupon?.replaceAll("\u{A0}", " ")
?? null,
).toBe(expected);
expect(result?.difference.coupon.value).toBe(difference);
expect(result?.compared.coupon.value).toBe(base);
});
it("formats calendar ranges across years and preserves separate currencies", () => {
const display = toIncomeDisplayModel({
...analytics,
period: { from: "2025-12-01", to: "2026-01-09" },
yearComparison: {
period: { from: "2024-12-01", to: "2025-01-09" },
totalsByCurrency: [comparison("RUB"), comparison("USD")],
},
});
expect(display?.comparison?.selectedPeriod.replaceAll(/\s/g, " ")).toBe(
"01.12.2025 – 09.01.2026",
); );
expect(display?.comparison?.comparedPeriod.replaceAll(/\s/g, " ")).toBe( expect(new Set(display.entries.map(({ key }) => key)).size).toBe(3);
"01.12.2024 – 09.01.2025",
);
expect(display?.comparison?.values.map(value => value.currency)).toEqual([
"RUB",
"USD",
]);
}); });
}); });
it("maps comparison notices by role regardless of dependency order or resource key", () => {
const selected = { ...resource(analytics).meta, role: "selected" as const };
const previous
= {
...resource(null).meta,
resourceKey: "opaque/year-looking-key",
role: "previous" as const,
sync: {
errorCode: "TBANK_UNAVAILABLE",
id: null,
state: "failed" as const,
},
};
const year = {
...resource(null).meta,
resourceKey: "opaque/previous-looking-key",
role: "year" as const,
unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
};
for (const dependencies of [
[selected, previous, year],
[year, selected, previous],
]) {
const display = toIncomeDisplayModel(analytics, {
...resource(analytics).meta,
dependencies,
});
expect(display?.previousNotice).toBe("comparisonFailed");
expect(display?.yearNotice).toBe("yearUnavailable");
expect(display?.previousComparison).not.toBeNull();
}
});
+2 -103
View File
@@ -1,102 +1,11 @@
import type { IncomeAnalytics, IncomeAnalyticsMeta } from "@/entities/income"; import type { IncomeAnalytics } from "@/entities/income";
import { formatDate } from "@/shared/lib";
import type { IncomePeriod } from "./period";
type ComparisonNotice
= | "comparisonFailed"
| "comparisonPending"
| "previousUnavailable"
| "yearUnavailable";
type IncomeDisplayModel = { type IncomeDisplayModel = {
comparison: null
| {
comparedPeriod: string;
selectedPeriod: string;
values: (NonNullable<
IncomeAnalytics["yearComparison"]
>["totalsByCurrency"][number] & {
percentages: Record<"coupon"
| "dividend"
| "total", null | string>;
})[];
};
entries: { key: string; operation: IncomeAnalytics["entries"][number] }[]; entries: { key: string; operation: IncomeAnalytics["entries"][number] }[];
previousComparison: IncomeDisplayModel["comparison"];
previousNotice: ComparisonNotice;
yearNotice: ComparisonNotice;
}; };
function comparisonDisplay(
period: IncomePeriod,
comparison: IncomeAnalytics["yearComparison"],
): IncomeDisplayModel["comparison"] {
if (!comparison)
return null;
return {
comparedPeriod: formatComparisonPeriod(comparison.period),
selectedPeriod: formatComparisonPeriod(period),
values: comparison.totalsByCurrency.map(value => ({
...value,
percentages: {
coupon: formatIncomeChange(
value.difference.coupon.value,
value.compared.coupon.value,
),
dividend: formatIncomeChange(
value.difference.dividend.value,
value.compared.dividend.value,
),
total: formatIncomeChange(
value.difference.total.value,
value.compared.total.value,
),
},
})),
};
}
function comparisonNotice(
dependency:
IncomeAnalyticsMeta["dependencies"][number] | undefined,
unavailable: "previousUnavailable" | "yearUnavailable",
): ComparisonNotice {
if (!dependency || dependency.unavailableReason) return unavailable;
return dependency.sync.state === "failed"
? "comparisonFailed"
: "comparisonPending";
}
function formatComparisonPeriod(period: IncomePeriod): string {
return `${formatDate(period.from)} – ${formatDate(period.to)}`;
}
function formatIncomeChange(
difference: string,
compared: string,
): null | string {
// Display-only ratio; server-provided Money values remain exact decimal strings.
const base = Number(compared);
if (!Number.isFinite(base) || base <= 0)
return null;
const ratio = Number(difference) / base;
if (!Number.isFinite(ratio))
return null;
return new Intl.NumberFormat("ru-RU", {
maximumFractionDigits: 1,
signDisplay: "exceptZero",
style: "percent",
}).format(ratio);
}
function toIncomeDisplayModel( function toIncomeDisplayModel(
analytics: IncomeAnalytics, analytics: IncomeAnalytics,
meta?: IncomeAnalyticsMeta,
): IncomeDisplayModel { ): IncomeDisplayModel {
const entries: IncomeDisplayModel["entries"] = []; const entries: IncomeDisplayModel["entries"] = [];
const occurrences = new Map<string, number>(); const occurrences = new Map<string, number>();
@@ -116,17 +25,7 @@ function toIncomeDisplayModel(
}); });
} }
const dependencies = meta?.dependencies ?? []; return { entries };
const previous = dependencies.find(({ role }) => role === "previous");
const year = dependencies.find(({ role }) => role === "year");
return {
comparison: comparisonDisplay(analytics.period, analytics.yearComparison),
entries,
previousComparison: comparisonDisplay(analytics.period, analytics.previous),
previousNotice: comparisonNotice(previous, "previousUnavailable"),
yearNotice: comparisonNotice(year, "yearUnavailable"),
};
} }
export { type IncomeDisplayModel, toIncomeDisplayModel }; export { type IncomeDisplayModel, toIncomeDisplayModel };
@@ -22,123 +22,6 @@
min-width: 0; min-width: 0;
} }
.comparison {
container-type: inline-size;
}
.comparisonGrid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--mantine-spacing-sm);
}
.comparisonPanel {
min-width: 0;
padding: var(--mantine-spacing-md);
border-radius: var(--mantine-radius-md);
border-top: 3px solid var(--mantine-color-gray-4);
background: var(--mantine-color-gray-0);
}
.comparisonPanel[data-kind="selected"] {
border-color: var(--mantine-color-blue-6);
background: var(--mantine-color-blue-0);
}
.comparisonPanel[data-tone="positive"] {
border-color: var(--mantine-color-green-8);
background: var(--mantine-color-green-0);
}
.comparisonPanel[data-tone="negative"] {
border-color: var(--mantine-color-red-8);
background: var(--mantine-color-red-0);
}
.comparisonLabel,
.comparisonValues dt {
color: var(--mantine-color-gray-7);
}
.comparisonValues {
margin: var(--mantine-spacing-md) 0 0;
font-size: var(--mantine-font-size-sm);
}
.comparisonValues dd {
min-width: 0;
margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.comparisonTotal {
margin-bottom: var(--mantine-spacing-md);
padding-bottom: var(--mantine-spacing-md);
border-bottom: 1px solid var(--mantine-color-gray-3);
}
.comparisonTotal dd {
margin-top: 4px;
font-size: var(--mantine-h2-font-size);
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.025em;
}
.comparisonValues dd[data-tone="positive"] {
color: color-mix(
in srgb,
var(--mantine-color-green-9) 85%,
var(--mantine-color-black)
);
}
.comparisonValues dd[data-tone="negative"] {
color: var(--mantine-color-red-9);
}
.comparisonValues dd[data-tone="neutral"] {
color: var(--mantine-color-gray-7);
}
.comparisonPanel[data-kind="selected"] .comparisonTotal dd {
color: var(--mantine-color-blue-8);
}
.comparisonDetail {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px var(--mantine-spacing-xs);
margin-top: var(--mantine-spacing-xs);
}
.comparisonPercent {
display: inline-block;
margin-left: var(--mantine-spacing-xs);
padding: 2px 6px;
border-radius: var(--mantine-radius-sm);
background: var(--mantine-color-white);
font-size: var(--mantine-font-size-xs);
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
vertical-align: middle;
}
.comparisonNotice {
background: var(--mantine-color-gray-0);
border-left: 3px solid var(--mantine-color-gray-4);
}
@container (min-width: 42em) {
.comparisonGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 35.999em) { @media (max-width: 35.999em) {
.fields { .fields {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
@@ -72,23 +72,9 @@ const analytics
}, },
], ],
period: { from: "2026-08-01", to: "2026-08-27" }, period: { from: "2026-08-01", to: "2026-08-27" },
previous: {
period: { from: "2026-07-01", to: "2026-07-31" },
totalsByCurrency: [comparison("RUB")],
},
totalsByCurrency: [summary("RUB", "10", "2")], totalsByCurrency: [summary("RUB", "10", "2")],
yearComparison: null,
} satisfies IncomeAnalytics & { instruments: [unknown] }; } satisfies IncomeAnalytics & { instruments: [unknown] };
function comparison(currency: string) {
return {
compared: summary(currency, "1", "0"),
currency,
difference: summary(currency, "9", "2"),
selected: summary(currency, "10", "2"),
};
}
function entry(): IncomeAnalytics["entries"][number] { function entry(): IncomeAnalytics["entries"][number] {
return { return {
accruedInterest: null, accruedInterest: null,
@@ -205,9 +191,10 @@ describe("AccountIncomePage", () => {
resource( resource(
null, null,
{ {
sync: { lastAttempt: {
errorCode: "TBANK_UNAVAILABLE", finishedAt: "2026-08-14T00:01:00Z",
id: null, problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed", state: "failed",
}, },
}, },
@@ -327,6 +314,24 @@ describe("AccountIncomePage", () => {
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
it("keeps a null analytics envelope loading instead of an empty page", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(null)),
),
);
renderPage();
expect(
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
).toBeVisible();
expect(
screen.queryByRole("heading", { name: "Пассивный доход" }),
).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "Повторить" }),
).not.toBeInTheDocument();
});
it("renders the signed drill-down using opaque membership rather than instrument identity", async () => { it("renders the signed drill-down using opaque membership rather than instrument identity", async () => {
const response const response
= { = {
@@ -371,19 +376,11 @@ describe("AccountIncomePage", () => {
expect(within(panel).getByText("−2 ₽")).toBeInTheDocument(); expect(within(panel).getByText("−2 ₽")).toBeInTheDocument();
}); });
it("renders realized text and comparisons without subscribing to events", async () => { it("renders realized income without comparison blocks or event requests", async () => {
const eventsRequest = vi.fn(() => new HttpResponse(null, { status: 503 })); const eventsRequest = vi.fn(() => new HttpResponse(null, { status: 503 }));
server.use( server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json( HttpResponse.json(resource(analytics)),
resource({
...analytics,
yearComparison: {
period: { from: "2025-08-01", to: "2025-08-27" },
totalsByCurrency: [comparison("RUB")],
},
}),
),
), ),
http.get("*/api/v1/brokerage-accounts/account-1/events", eventsRequest), http.get("*/api/v1/brokerage-accounts/account-1/events", eventsRequest),
); );
@@ -398,72 +395,9 @@ describe("AccountIncomePage", () => {
expect(screen.queryByText("Динамика")).not.toBeInTheDocument(); expect(screen.queryByText("Динамика")).not.toBeInTheDocument();
expect(eventsRequest).not.toHaveBeenCalled(); expect(eventsRequest).not.toHaveBeenCalled();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument(); expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
const year = screen.getByRole("region", { name: "Годом ранее" }); expect(screen.queryByText("Предыдущий период")).not.toBeInTheDocument();
expect(screen.queryByText("Годом ранее")).not.toBeInTheDocument();
const selected = within(year).getByRole("region", { expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
name: "01.08.2026 – 27.08.2026",
});
expect(
screen.getByRole("region", { name: "01.08.2025 – 27.08.2025" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Предыдущий период" }),
).toBeVisible();
expect(screen.queryByText("Выбранный период")).not.toBeInTheDocument();
expect(screen.queryByText("Сравниваемый период")).not.toBeInTheDocument();
expect(
screen.getByRole("heading", { level: 2, name: "Годом ранее" }),
).toBeInTheDocument();
expect(screen.queryByText("Сравнения")).not.toBeInTheDocument();
expect(screen.queryByText("RUB", { exact: true })).not.toBeInTheDocument();
for (const amount of ["10 ₽", "2 ₽", "12 ₽"]) {
expect(within(selected).getByText(amount)).toBeInTheDocument();
}
const difference = within(year).getByRole("region", { name: "Разница" });
for (const amount of ["+9 ₽", "+2 ₽", "+11 ₽"]) {
expect(within(difference).getByText(amount)).toBeInTheDocument();
}
expect(within(difference).getByText("+900 %")).toBeInTheDocument();
expect(within(difference).getByText("+1 100 %")).toBeInTheDocument();
expect(within(difference).queryByText("нет базы")).not.toBeInTheDocument();
expect(within(difference).getAllByText(/%$/)).toHaveLength(2);
expect(
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
within(difference).getByText("+2 ₽").closest("dd"),
).toHaveTextContent(/^\+2 ₽$/);
});
it("shows the unavailable year state without falling back to the previous period", async () => {
const dependencies = [
{ ...resource(analytics).meta, role: "selected" as const },
{ ...resource(analytics).meta, role: "previous" as const },
{
...resource(null).meta,
role: "year" as const,
unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
},
];
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(analytics, { dependencies })),
),
);
renderPage();
expect(
await screen.findByText("Сравнение с годом ранее недоступно."),
).toBeInTheDocument();
expect(
screen.queryByRole("region", { name: "Годом ранее" }),
).not.toBeInTheDocument();
expect(
screen.getByRole("region", { name: "Предыдущий период" }),
).toBeVisible();
}); });
it("shows a quiet realized error", async () => { it("shows a quiet realized error", async () => {
@@ -747,119 +681,3 @@ describe("income period and snapshot boundary", () => {
expect(screen.queryByRole("button")).not.toBeInTheDocument(); expect(screen.queryByRole("button")).not.toBeInTheDocument();
}); });
}); });
it.each([false, true])(
"shows unavailable comparisons for absent roles without positional fallback (legacy=%s)",
async (legacy) => {
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
resource(
{ ...analytics, previous: null, yearComparison: null },
{
dependencies: legacy
? [
resource(null).meta,
resource(null).meta,
resource(null).meta,
]
: [],
},
),
),
),
);
renderPage();
expect(
await screen.findByText("Сравнение с предыдущим периодом недоступно."),
).toBeVisible();
expect(
screen.getByText("Сравнение с годом ранее недоступно."),
).toBeVisible();
expect(
screen.queryByText("Период сравнения ещё не загружен полностью."),
).not.toBeInTheDocument();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
},
);
it("shows selected income before comparison coverage without inventing a zero baseline", async () => {
const dependencies = (["year", "selected", "previous"] as const).map(
role =>
({
...resource(role === "selected" ? analytics : null).meta,
role,
}),
);
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
resource(
{ ...analytics, previous: null, yearComparison: null },
{ dependencies },
),
),
),
);
renderPage();
expect(await screen.findByRole("region", { name: "Выплаты" })).toBeVisible();
expect(
screen.queryByRole("region", { name: "Год назад" }),
).not.toBeInTheDocument();
expect(screen.getAllByText("12 ₽").length).toBeGreaterThan(0);
expect(
screen.getAllByText("Период сравнения ещё не загружен полностью."),
).toHaveLength(2);
expect(
screen.queryByText("Сравнение с годом ранее недоступно."),
).not.toBeInTheDocument();
expect(
screen.queryByRole("region", { name: "Разница" }),
).not.toBeInTheDocument();
expect(screen.getByLabelText("Период")).toBeVisible();
});
it("keeps complete previous comparison while year source failed without inventing its amounts", async () => {
const dependencies = [
{
...resource(analytics).meta,
role: "previous" as const,
},
{
...resource(null).meta,
role: "year" as const,
sync: {
errorCode: "TBANK_UNAVAILABLE",
id: null,
state: "failed" as const,
},
},
{
...resource(analytics).meta,
role: "selected" as const,
},
];
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(analytics, { dependencies })),
),
);
renderPage();
expect(
await screen.findByRole("region", { name: "Предыдущий период" }),
).toBeVisible();
expect(
screen.getByText(
"Не удалось загрузить период сравнения. Повторите обновление.",
),
).toBeVisible();
expect(
screen.queryByRole("region", { name: "Годом ранее" }),
).not.toBeInTheDocument();
});
@@ -79,7 +79,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: !!analytics.data, hasContent: !!analytics.data,
identity: `${accountId}:${period.from}:${period.to}`, identity: `${accountId}:${period.from}:${period.to}`,
isError: analytics.isError || analytics.meta?.sync.state === "failed", isError: analytics.isError || analytics.meta?.lastAttempt.state === "failed",
isFetching: analytics.isFetching, isFetching: analytics.isFetching,
}); });
@@ -91,7 +91,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
? { period, state: "error" } ? { period, state: "error" }
: { state: "loading" }; : { state: "loading" };
const display = toIncomeDisplayModel(analytics.data, analytics.meta); const display = toIncomeDisplayModel(analytics.data);
const onSubmit = (values: IncomeForm) => { const onSubmit = (values: IncomeForm) => {
const from = parseDraftDate(values.from); const from = parseDraftDate(values.from);
@@ -114,7 +114,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
formRevision: `${accountId}:${period.from}:${period.to}:${resetRevision}`, formRevision: `${accountId}:${period.from}:${period.to}:${resetRevision}`,
onReset, onReset,
onSubmit, onSubmit,
partial: analytics.meta?.availability !== "complete", partial: analytics.meta?.completeness === "incomplete",
state: "loaded", state: "loaded",
}; };
}; };
@@ -12,7 +12,6 @@ import { useTranslation } from "react-i18next";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm"; import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
import classes from "../AccountIncomePage.module.css"; import classes from "../AccountIncomePage.module.css";
import { IncomeComparisons } from "./IncomeComparisons.view";
import { IncomePayments } from "./IncomePayments.view"; import { IncomePayments } from "./IncomePayments.view";
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view"; import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
import { IncomeSummary } from "./IncomeSummary.view"; import { IncomeSummary } from "./IncomeSummary.view";
@@ -54,18 +53,6 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
<Alert color="blue">{t("income.taxBoundary")}</Alert> <Alert color="blue">{t("income.taxBoundary")}</Alert>
<IncomeComparisons
comparison={display.previousComparison}
notice={t(`income.${display.previousNotice}`)}
title={t("income.previousPeriod")}
/>
<IncomeComparisons
comparison={display.comparison}
notice={t(`income.${display.yearNotice}`)}
title={t("income.yearAgo")}
/>
<IncomePayments entries={display.entries} /> <IncomePayments entries={display.entries} />
</Stack> </Stack>
); );
@@ -1,167 +0,0 @@
import type { FC } from "react";
import { Paper, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { formatMoney } from "@/shared/lib";
import type { IncomeDisplayModel } from "../../../model/display";
import classes from "../AccountIncomePage.module.css";
type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
title: string;
};
type ComparisonValuesProps = {
kind: "compared"
| "difference"
| "selected";
label: string;
percentages?: ComparisonProps["values"][number]["percentages"];
values: ComparisonProps["values"][number]["selected"];
};
type IncomeComparisonsProps = {
comparison: IncomeDisplayModel["comparison"];
notice: string;
title: string;
};
const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
return (
<Stack>
<Title order={2}>{props.title}</Title>
{props.comparison
? <Comparison {...props.comparison} title={props.title} />
: (
<Paper className={classes.comparisonNotice} p="sm" radius="md">
<Text aria-live="polite" c="gray.7" role="status" size="sm">
{props.notice}
</Text>
</Paper>
)}
</Stack>
);
};
const Comparison: FC<ComparisonProps> = (props) => {
const { t } = useTranslation();
return (
<section aria-label={props.title} className={classes.comparison}>
<Stack gap="md">
{props.values.map(value => (
<Stack
aria-label={value.currency}
gap="xs"
key={value.currency}
role="group"
>
<div className={classes.comparisonGrid}>
<ComparisonValues
kind="selected"
label={props.selectedPeriod}
values={value.selected}
/>
<ComparisonValues
kind="compared"
label={props.comparedPeriod}
values={value.compared}
/>
<ComparisonValues
kind="difference"
label={t("income.difference")}
percentages={value.percentages}
values={value.difference}
/>
</div>
</Stack>
))}
{props.values.length === 0 && (
<Text c="gray.7" size="sm">
{t("income.comparisonEmpty")}
</Text>
)}
</Stack>
</section>
);
};
const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
const { t } = useTranslation();
const data_tone
= props.kind === "difference"
? differenceTone(props.values.total.value)
: undefined;
return (
<section
aria-label={props.label}
className={classes.comparisonPanel}
data-kind={props.kind}
data-tone={data_tone}
>
<Text className={classes.comparisonLabel} fw={600} size="sm">
{props.label}
</Text>
<dl className={classes.comparisonValues}>
{(["total", "coupon", "dividend"] as const).map((key) => {
const money
// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
= props.values[key];
const percentage
// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
= props.percentages?.[key];
const tone
= props.kind === "difference"
? differenceTone(money.value)
: undefined;
const appearanceClass
= key === "total"
? classes.comparisonTotal
: classes.comparisonDetail;
return (
<div className={appearanceClass} key={key}>
<dt>{t(`income.${key}`)}</dt>
<dd data-tone={tone}>
<span>
{tone === "positive" ? "+" : ""}
{formatMoney(money)}
</span>
{!!percentage && (
<span className={classes.comparisonPercent}>
{percentage}
</span>
)}
</dd>
</div>
);
})}
</dl>
</section>
);
};
function differenceTone(value: string): "negative"
| "neutral"
| "positive" {
if (!/[1-9]/.test(value)) return "neutral";
return value.startsWith("-") ? "negative" : "positive";
}
export { IncomeComparisons };
@@ -1,6 +1,6 @@
import type { FC, SubmitEventHandler } from "react"; import type { FC, SubmitEventHandler } from "react";
import { Button, Paper, Stack, Text } from "@mantine/core"; import { Button, Stack } from "@mantine/core";
import { DatePickerInput } from "@mantine/dates"; import { DatePickerInput } from "@mantine/dates";
import classes from "../../AccountIncomePage.module.css"; import classes from "../../AccountIncomePage.module.css";
@@ -27,15 +27,8 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
} = useIncomePeriodFormVm(); } = useIncomePeriodFormVm();
return ( return (
<Paper <form onSubmit={props.onSubmit}>
component="form"
onSubmit={props.onSubmit}
p="md"
radius="md"
withBorder
>
<Stack gap="sm"> <Stack gap="sm">
<Text fw={700}>{t("income.period")}</Text>
<div className={classes.fields}> <div className={classes.fields}>
<DatePickerInput <DatePickerInput
@@ -71,7 +64,7 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
</Button> </Button>
</div> </div>
</Stack> </Stack>
</Paper> </form>
); );
}; };
@@ -492,12 +492,25 @@ describe("AccountOperationsPage", () => {
}), }),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
configureTestAuth();
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json(resource(null)),
),
);
renderPage();
expect(
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
).toBeVisible();
expect(screen.queryByText("Операций нет")).not.toBeInTheDocument();
});
}); });
it("keeps UTC operation boundaries in GET and source sync requests", async () => { it("keeps UTC operation boundaries in GET and source sync requests", async () => {
configureTestAuth(); configureTestAuth();
const requested: Record<string, string>[] = []; const requested: Record<string, string>[] = [];
const syncRequests: unknown[] = [];
server.use( server.use(
http.get( http.get(
"*/api/v1/brokerage-accounts/:accountId/operations", "*/api/v1/brokerage-accounts/:accountId/operations",
@@ -508,9 +521,10 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
resource( resource(
null, null,
{ {
sync: { lastAttempt: {
errorCode: "TBANK_UNAVAILABLE", finishedAt: "2026-08-14T00:01:00Z",
id: null, problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed", state: "failed",
}, },
}, },
@@ -518,11 +532,6 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
); );
}, },
), ),
http.post("*/api/v1/tbank-sync", async ({ request }) => {
syncRequests.push(await request.json());
return HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 });
}),
); );
renderPage("?from=2024-02-29&to=2024-03-01&categories=trade"); renderPage("?from=2024-02-29&to=2024-03-01&categories=trade");
await screen.findByRole("button", { name: "Сбросить" }); await screen.findByRole("button", { name: "Сбросить" });
@@ -534,7 +543,6 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
to: "2024-03-01T23:59:59.999Z", to: "2024-03-01T23:59:59.999Z",
}, },
]); ]);
expect(syncRequests).toEqual([]);
}); });
it("does not label incomplete empty operations as a confirmed empty period", async () => { it("does not label incomplete empty operations as a confirmed empty period", async () => {
@@ -550,7 +558,7 @@ it("does not label incomplete empty operations as a confirmed empty period", asy
items: [], items: [],
nextCursor: null, nextCursor: null,
}, },
{ availability: "partial" }, { completeness: "incomplete" },
), ),
), ),
), ),
@@ -2,6 +2,8 @@ import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import type { InvestmentResourceMeta } from "@/shared/api";
import { import {
type BrokerageOperation, type BrokerageOperation,
brokerageOperationsQueryOptions, brokerageOperationsQueryOptions,
@@ -39,6 +41,7 @@ type AccountOperationsPageViewModel
onPrevious: () => void; onPrevious: () => void;
onReset: () => void; onReset: () => void;
partial?: boolean; partial?: boolean;
source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
} }
| { onReset: () => void; state: "error" } | { onReset: () => void; state: "error" }
@@ -98,7 +101,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: !!operations.data, hasContent: !!operations.data,
identity: scope, identity: scope,
isError: operations.isError || operations.meta?.sync.state === "failed", isError: operations.isError || operations.meta?.lastAttempt.state === "failed",
isFetching: operations.isFetching, isFetching: operations.isFetching,
}); });
@@ -127,7 +130,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
if ( if (
(isInvalidCursor || !operations.data) (isInvalidCursor || !operations.data)
&& (operations.isError || operations.meta?.sync.state === "failed") && (operations.isError || operations.meta?.lastAttempt.state === "failed")
) )
return { onReset, state: "error" }; return { onReset, state: "error" };
@@ -177,7 +180,8 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
onPeriodPopoverOpen: () => setMaxDate(moscowDate(new Date())), onPeriodPopoverOpen: () => setMaxDate(moscowDate(new Date())),
onPrevious: history.onPrevious, onPrevious: history.onPrevious,
onReset, onReset,
partial: operations.meta?.availability !== "complete", partial: operations.meta?.completeness === "incomplete",
source: operations.meta,
state: "loaded", state: "loaded",
}; };
}; };
@@ -13,6 +13,7 @@ import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation"; import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm"; import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
@@ -62,6 +63,12 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
<Stack gap="lg"> <Stack gap="lg">
<Title order={1}>{t("ledger.title")}</Title> <Title order={1}>{t("ledger.title")}</Title>
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>} {!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>} {!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
+123 -1
View File
@@ -2,9 +2,19 @@ import { describe, expect, it } from "vitest";
import type { Portfolio } from "@/entities/portfolio"; import type { Portfolio } from "@/entities/portfolio";
import { toAccountPagePositionSections } from "./positions"; import {
formatPositionReturnPercent,
toAccountPagePositionSections,
toUnrealizedReturns,
} from "./positions";
import { portfolio, position, second } from "./positions.fixtures"; import { portfolio, position, second } from "./positions.fixtures";
function makePosition(
overrides: Partial<Portfolio["positions"][number]>,
): Portfolio["positions"][number] {
return { ...position, ...overrides };
}
function sections(positions: Portfolio["positions"]) { function sections(positions: Portfolio["positions"]) {
return toAccountPagePositionSections({ return toAccountPagePositionSections({
...portfolio, ...portfolio,
@@ -82,6 +92,8 @@ describe("account position sections", () => {
{ {
displayName: "Акция", displayName: "Акция",
logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png", logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
returnPercent: null,
returnPercentText: null,
returnText: "+10 ₽", returnText: "+10 ₽",
returnTone: "positive", returnTone: "positive",
shareText: "66,7 %", shareText: "66,7 %",
@@ -95,6 +107,8 @@ describe("account position sections", () => {
{ {
displayName: "Облигация", displayName: "Облигация",
logoSrc: null, logoSrc: null,
returnPercent: "-11.111111",
returnPercentText: "-11,11 %",
returnText: "-5 ₽", returnText: "-5 ₽",
returnTone: "negative", returnTone: "negative",
shareText: "33,3 %", shareText: "33,3 %",
@@ -107,6 +121,8 @@ describe("account position sections", () => {
{ {
displayName: "Фонд", displayName: "Фонд",
logoSrc: null, logoSrc: null,
returnPercent: null,
returnPercentText: null,
returnText: null, returnText: null,
returnTone: undefined, returnTone: undefined,
shareText: null, shareText: null,
@@ -187,3 +203,109 @@ describe("account position sections", () => {
expect(source).toEqual(before); expect(source).toEqual(before);
}); });
}); });
describe("account position returns", () => {
it.each([
{
absoluteReturn: { currency: "RUB", value: "25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
expected: "7.142857",
name: "gain",
quantity: "1.25",
type: "STOCK",
},
{
absoluteReturn: { currency: "RUB", value: "-25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
expected: "-7.142857",
name: "loss",
quantity: "1.25",
type: "STOCK",
},
{
absoluteReturn: { currency: "RUB", value: "-5" },
averagePurchasePrice: { currency: "RUB", value: "45" },
expected: "-11.111111",
name: "bond without accrued interest",
quantity: "1",
type: "BOND",
},
] as const)("calculates $name from the clean purchase cost", (testCase) => {
const result = sections([makePosition({
absoluteReturn: testCase.absoluteReturn,
averagePurchasePrice: testCase.averagePurchasePrice,
quantity: testCase.quantity,
type: testCase.type,
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent)
.toBe(testCase.expected);
});
it.each([
{ name: "zero quantity", overrides: { quantity: "0" } },
{ name: "negative quantity", overrides: { quantity: "-1" } },
{ name: "missing average price", overrides: { averagePurchasePrice: null } },
{
name: "currency mismatch",
overrides: { averagePurchasePrice: { currency: "USD", value: "280" } },
},
{ name: "zero cost", overrides: { averagePurchasePrice: { currency: "RUB", value: "0" } } },
])("returns null for $name", ({ overrides }) => {
const result = sections([makePosition({
absoluteReturn: { currency: "RUB", value: "25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
quantity: "1.25",
...overrides,
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent).toBeNull();
});
it.each([
{ absoluteReturn: "1", expected: "0.000001" },
{ absoluteReturn: "-1", expected: "-0.000001" },
])("rounds an exact half away from zero for $absoluteReturn", (testCase) => {
const result = sections([makePosition({
absoluteReturn: { currency: "RUB", value: testCase.absoluteReturn },
averagePurchasePrice: { currency: "RUB", value: "200000000" },
quantity: "1",
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent)
.toBe(testCase.expected);
});
it.each([
{ expected: "+1.01", value: "1.005" },
{ expected: "-1.01", value: "-1.005" },
])("formats $value for display with a sign and two decimals", (testCase) => {
expect(formatPositionReturnPercent(testCase.value)).toBe(testCase.expected);
});
it("sums complete unrealized returns by currency", () => {
const result = toUnrealizedReturns([
makePosition({ absoluteReturn: { currency: "RUB", value: "0.1" } }),
makePosition({ absoluteReturn: { currency: "RUB", value: "0.2" } }),
makePosition({ absoluteReturn: { currency: "USD", value: "-2.5" } }),
]);
expect(result).toEqual([
{ currency: "RUB", value: "0.3" },
{ currency: "USD", value: "-2.5" },
]);
});
it("omits only currencies with incomplete returns", () => {
const result = toUnrealizedReturns([
makePosition({ absoluteReturn: { currency: "RUB", value: "10" } }),
makePosition({
absoluteReturn: null,
currentValue: { currency: "RUB", value: "100" },
}),
makePosition({ absoluteReturn: { currency: "USD", value: "2" } }),
]);
expect(result).toEqual([{ currency: "USD", value: "2" }]);
});
});
+156 -1
View File
@@ -1,9 +1,11 @@
import { formatShare, type Portfolio } from "@/entities/portfolio"; import { formatShare, type Portfolio } from "@/entities/portfolio";
import { formatMoney, instrumentLogoUrl } from "@/shared/lib"; import { formatDecimal, formatMoney, instrumentLogoUrl } from "@/shared/lib";
type AccountPagePosition = Portfolio["positions"][number] & { type AccountPagePosition = Portfolio["positions"][number] & {
instrumentTo?: string; instrumentTo?: string;
logoSrc: null | string; logoSrc: null | string;
returnPercent: null | string;
returnPercentText: null | string;
returnText: null | string; returnText: null | string;
returnTone?: AccountPageReturnTone; returnTone?: AccountPageReturnTone;
shareText: null | string; shareText: null | string;
@@ -21,10 +23,73 @@ type AccountPagePositionSection = {
type AccountPageReturnTone = "negative" | "positive"; type AccountPageReturnTone = "negative" | "positive";
type Decimal = { scale: number; value: bigint };
type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
type PositionSectionKind = "bonds" type PositionSectionKind = "bonds"
| "other" | "other"
| "stocks"; | "stocks";
const RADIX = 10n;
const DECIMAL_PARTS = 2;
const PERCENT_SCALE = 6;
const DISPLAY_PERCENT_SCALE = 2;
const PERCENT_FACTOR = 100n;
const ROUNDING_FACTOR = 2n;
function decimalFromString(value: string): Decimal {
const [whole = "0", fraction = ""] = value.split(".", DECIMAL_PARTS);
return { scale: fraction.length, value: BigInt(`${whole}${fraction}`) };
}
function decimalToString(decimal: Decimal): string {
const sign = decimal.value < 0n ? "-" : "";
const digits = (decimal.value < 0n ? -decimal.value : decimal.value)
.toString()
.padStart(decimal.scale + 1, "0");
const whole = decimal.scale
? digits.slice(0, -decimal.scale)
: digits;
let fraction = decimal.scale ? digits.slice(-decimal.scale) : "";
while (fraction.endsWith("0")) fraction = fraction.slice(0, -1);
const suffix = fraction ? `.${fraction}` : "";
return `${sign}${whole}${suffix}`;
}
function formatPositionReturnPercent(value: string): string {
const decimal = decimalFromString(value);
let rounded = decimal.value;
if (decimal.scale > DISPLAY_PERCENT_SCALE) {
const divisor = RADIX ** BigInt(decimal.scale - DISPLAY_PERCENT_SCALE);
const remainder = rounded % divisor;
const absoluteRemainder = remainder < 0n ? -remainder : remainder;
rounded /= divisor;
if (absoluteRemainder * ROUNDING_FACTOR >= divisor) {
rounded += decimal.value < 0n ? -1n : 1n;
}
}
else {
rounded *= RADIX ** BigInt(DISPLAY_PERCENT_SCALE - decimal.scale);
}
const sign = rounded > 0n ? "+" : "";
return `${sign}${decimalToString({
scale: DISPLAY_PERCENT_SCALE,
value: rounded,
})}`;
}
function groupPositions( function groupPositions(
positions: AccountPagePosition[], positions: AccountPagePosition[],
): AccountPagePositionGroup[] { ): AccountPagePositionGroup[] {
@@ -67,6 +132,53 @@ function positionIdentity(position: AccountPagePosition) {
return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined; return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined;
} }
function returnPercent(
position: Portfolio["positions"][number],
): null | string {
const result = position.absoluteReturn;
const price = position.averagePurchasePrice;
if (!result || !price || result.currency !== price.currency) return null;
const quantity = decimalFromString(position.quantity);
const purchasePrice = decimalFromString(price.value);
const cost = {
scale: quantity.scale + purchasePrice.scale,
value: quantity.value * purchasePrice.value,
};
if (quantity.value <= 0n || cost.value <= 0n) return null;
const absoluteReturn = decimalFromString(result.value);
const numerator = absoluteReturn.value * PERCENT_FACTOR
* RADIX ** BigInt(cost.scale + PERCENT_SCALE);
const denominator = cost.value * RADIX ** BigInt(absoluteReturn.scale);
const remainder = numerator % denominator;
const isRoundsUp = (remainder < 0n ? -remainder : remainder) * ROUNDING_FACTOR
>= denominator;
const rounding = isRoundsUp ? 1n : 0n;
const signedRounding = numerator < 0n ? -rounding : rounding;
const rounded = numerator / denominator + signedRounding;
return decimalToString({ scale: PERCENT_SCALE, value: rounded });
}
function sumDecimals(values: Decimal[]): Decimal {
const scale = Math.max(...values.map(value => value.scale));
const sum = values.reduce(
(total, value) => total
+ value.value * RADIX ** BigInt(scale - value.scale),
0n,
);
return { scale, value: sum };
}
function toAccountPagePositionSections( function toAccountPagePositionSections(
portfolio: Portfolio, portfolio: Portfolio,
): AccountPagePositionSection[] { ): AccountPagePositionSection[] {
@@ -111,6 +223,8 @@ function toPosition(
const returnPrefix const returnPrefix
= isExpanded && returnValue !== null && returnValue > 0 ? "+" : ""; = isExpanded && returnValue !== null && returnValue > 0 ? "+" : "";
const percent = returnPercent(position);
return { return {
...position, ...position,
instrumentTo: instrumentTo:
@@ -120,6 +234,10 @@ function toPosition(
logoSrc: isExpanded logoSrc: isExpanded
? instrumentLogoUrl(position.logoName) ? instrumentLogoUrl(position.logoName)
: null, : null,
returnPercent: percent,
returnPercentText: percent
? `${formatDecimal(formatPositionReturnPercent(percent))} %`
: null,
returnText: position.absoluteReturn returnText: position.absoluteReturn
? `${returnPrefix}${formatMoney(position.absoluteReturn)}` ? `${returnPrefix}${formatMoney(position.absoluteReturn)}`
: null, : null,
@@ -162,9 +280,46 @@ function toSection(
}; };
} }
function toUnrealizedReturns(
positions: Portfolio["positions"],
): Money[] {
const totals = new Map<string, {
complete: boolean;
values: Decimal[];
}>();
for (const position of positions) {
const currencies = position.absoluteReturn
? [position.absoluteReturn.currency]
: [...new Set([
position.averagePurchasePrice?.currency,
position.currentValue?.currency,
].filter((currency): currency is string => !!currency))];
for (const currency of currencies) {
const total = totals.get(currency) ?? { complete: true, values: [] };
if (position.absoluteReturn) {
total.values.push(decimalFromString(position.absoluteReturn.value));
}
else {
total.complete = false;
}
totals.set(currency, total);
}
}
return [...totals].flatMap(([currency, total]) => total.complete
? [{ currency, value: decimalToString(sumDecimals(total.values)) }]
: []);
}
export { export {
type AccountPagePosition, type AccountPagePosition,
type AccountPagePositionGroup, type AccountPagePositionGroup,
type AccountPagePositionSection, type AccountPagePositionSection,
formatPositionReturnPercent,
toAccountPagePositionSections, toAccountPagePositionSections,
toUnrealizedReturns,
}; };
+12 -11
View File
@@ -46,9 +46,10 @@ type PreviewResource<T> = {
isError: boolean; isError: boolean;
meta?: Pick<InvestmentResourceMeta, meta?: Pick<InvestmentResourceMeta,
"availability" "availability"
| "completeness"
| "freshness" | "freshness"
| "lastAttempt"
| "lastSuccessfulAt" | "lastSuccessfulAt"
| "sync"
>; >;
}; };
@@ -57,10 +58,10 @@ function toIncomeSummary(
income: PreviewResource<IncomeSummary>, income: PreviewResource<IncomeSummary>,
): AccountPageIncomeSummary { ): AccountPageIncomeSummary {
const to = `/accounts/${accountId}/income`; const to = `/accounts/${accountId}/income`;
if (!income.data && !income.isError && income.meta?.sync.state !== "failed") if (!income.data && !income.isError && income.meta?.lastAttempt.state !== "failed")
return { state: "loading", to }; return { state: "loading", to };
if (income.meta?.availability === "partial") return { state: "partial", to }; if (income.meta?.completeness === "incomplete") return { state: "partial", to };
if (!income.data && (income.isError || income.meta?.sync.state === "failed")) if (!income.data && (income.isError || income.meta?.lastAttempt.state === "failed"))
return { state: "error", to }; return { state: "error", to };
if (!income.data?.totalsByCurrency.length) return { state: "empty", to }; if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
@@ -76,15 +77,15 @@ function toRecentEvents(
events: PreviewResource<{ events: BrokerageEvent[] }>, events: PreviewResource<{ events: BrokerageEvent[] }>,
): AccountPageRecentEvents { ): AccountPageRecentEvents {
const to = `/accounts/${accountId}/events`; const to = `/accounts/${accountId}/events`;
if (!events.data && !events.isError && events.meta?.sync.state !== "failed") if (!events.data && !events.isError && events.meta?.lastAttempt.state !== "failed")
return { state: "loading", to }; return { state: "loading", to };
if (events.meta?.availability === "partial") if (events.meta?.completeness === "incomplete")
return { return {
items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [], items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
state: "partial", state: "partial",
to, to,
}; };
if (!events.data && (events.isError || events.meta?.sync.state === "failed")) if (!events.data && (events.isError || events.meta?.lastAttempt.state === "failed"))
return { state: "error", to }; return { state: "error", to };
const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? []; const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [];
if (items.length === 0) return { state: "empty", to }; if (items.length === 0) return { state: "empty", to };
@@ -104,14 +105,14 @@ function toRecentOperations(
if ( if (
!operations.data !operations.data
&& !operations.isError && !operations.isError
&& operations.meta?.sync.state !== "failed" && operations.meta?.lastAttempt.state !== "failed"
) )
return { state: "loading", to }; return { state: "loading", to };
if (operations.meta?.availability === "partial") if (operations.meta?.completeness === "incomplete")
return { items: operations.data?.items ?? [], state: "partial", to }; return { items: operations.data?.items ?? [], state: "partial", to };
if ( if (
!operations.data !operations.data
&& (operations.isError || operations.meta?.sync.state === "failed") && (operations.isError || operations.meta?.lastAttempt.state === "failed")
) )
return { state: "error", to }; return { state: "error", to };
if (!operations.data?.items.length) return { state: "empty", to }; if (!operations.data?.items.length) return { state: "empty", to };
@@ -120,7 +121,7 @@ function toRecentOperations(
items: operations.data.items, items: operations.data.items,
lastSuccessfulAt: operations.meta?.lastSuccessfulAt, lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
refreshError: refreshError:
operations.isError || operations.meta?.sync.state === "failed", operations.isError || operations.meta?.lastAttempt.state === "failed",
stale: operations.meta?.freshness === "stale", stale: operations.meta?.freshness === "stale",
state: "loaded", state: "loaded",
to, to,
@@ -98,21 +98,13 @@
font-family: var(--mantine-font-family-monospace); font-family: var(--mantine-font-family-monospace);
} }
.accordionControl { .tabsList {
transition: flex-wrap: nowrap;
background-color 150ms ease, overflow-x: auto;
color 150ms ease;
} }
.accordionLabel { .positionFilter {
font-size: var(--mantine-h2-font-size); overflow-x: auto;
font-weight: var(--mantine-h2-font-weight);
line-height: var(--mantine-h2-line-height);
}
.accordionPanel {
padding-left: 0;
padding-right: 0;
} }
.accountPositions { .accountPositions {
@@ -1,6 +1,7 @@
import { MantineProvider } from "@mantine/core"; import { MantineProvider } from "@mantine/core";
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { import {
fireEvent,
render, render,
screen, screen,
waitFor, waitFor,
@@ -23,7 +24,10 @@ import type {
AccountPageRecentOperations, AccountPageRecentOperations,
} from "../../model/previews"; } from "../../model/previews";
import { toAccountPagePositionSections } from "../../model/positions"; import {
toAccountPagePositionSections,
toUnrealizedReturns,
} from "../../model/positions";
import { AccountPage } from "./AccountPage"; import { AccountPage } from "./AccountPage";
import { AccountPageEmpty } from "./components/AccountPageEmpty.view"; import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
import { AccountPageError } from "./components/AccountPageError.view"; import { AccountPageError } from "./components/AccountPageError.view";
@@ -142,6 +146,7 @@ function loadedProps(nextPortfolio: Portfolio = portfolio) {
positionSections: toAccountPagePositionSections(nextPortfolio), positionSections: toAccountPagePositionSections(nextPortfolio),
recentEvents: emptyRecentEvents, recentEvents: emptyRecentEvents,
recentOperations: emptyRecentOperations, recentOperations: emptyRecentOperations,
unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
}; };
} }
@@ -246,7 +251,7 @@ describe("AccountPage states", () => {
).toHaveTextContent("Данные о структуре портфеля пока недоступны."); ).toHaveTextContent("Данные о структуре портфеля пока недоступны.");
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]); ).toEqual(["1 234,5 ₽"]);
}); });
it("keeps initial placeholders decorative without amounts or focus targets", () => { it("keeps initial placeholders decorative without amounts or focus targets", () => {
const { container } = renderPage(<AccountPageLoading />); const { container } = renderPage(<AccountPageLoading />);
@@ -309,8 +314,10 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
const balances = within( const balances = within(
screen.getByRole("region", { name: "Денежные остатки" }), screen.getByRole("tabpanel", { name: "Деньги" }),
); );
expect( expect(
@@ -318,7 +325,12 @@ describe("AccountPage states", () => {
).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]); ).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]); ).toEqual([
"1 234,5 ₽",
"234,500000000000000001 ₽",
"-0,5 $",
"3,00 XYZ",
]);
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument(); expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
expect( expect(
screen.queryByText(/полная оценка|общая стоимость/i), screen.queryByText(/полная оценка|общая стоимость/i),
@@ -341,6 +353,7 @@ describe("AccountPage states", () => {
); );
renderAccountRoute(createTestQueryClient()); renderAccountRoute(createTestQueryClient());
await screen.findByRole("heading", { level: 1, name: "Портфель" }); await screen.findByRole("heading", { level: 1, name: "Портфель" });
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect(screen.getByRole("definition")).toHaveTextContent("0,5 $"); expect(screen.getByRole("definition")).toHaveTextContent("0,5 $");
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument(); expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
}, },
@@ -381,9 +394,10 @@ describe("AccountPage states", () => {
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument(); expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument(); expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect( expect(
within( within(
screen.getByRole("region", { name: "Денежные остатки" }), screen.getByRole("tabpanel", { name: "Деньги" }),
).queryByRole("definition"), ).queryByRole("definition"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
expect( expect(
@@ -395,11 +409,69 @@ describe("AccountPage states", () => {
}, },
); );
it("renders the empty state", () => { it("renders the empty state with self-descriptive preview links", () => {
renderPage(<AccountPageEmpty {...emptyProps()} />); renderPage(
<AccountPageEmpty
{...emptyProps()}
incomeSummary={{
state: "empty",
to: "/accounts/account-1/income",
}}
/>,
);
expect( expect(
screen.getByRole("heading", { name: "Портфель пока пуст" }), screen.getByRole("heading", { name: "Портфель пока пуст" }),
).toBeInTheDocument(); ).toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть журнал" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть будущие события" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
.toBeInTheDocument();
});
it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(null)),
),
);
const queryClient = createTestQueryClient();
renderAccountRoute(queryClient);
expect(
await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
).toBeVisible();
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
expect(
queryClient.getQueryData(portfolioQueryOptions("account-1").queryKey),
).toMatchObject({ data: null });
});
it("keeps null events and income envelopes loading in the previews", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json(resource(null)),
),
http.get("*/api/v1/brokerage-accounts/:accountId/income-summary", () =>
HttpResponse.json(resource(null)),
),
);
renderAccountRoute(createTestQueryClient());
expect(
await screen.findByText("Портфель пока пуст", undefined, {
timeout: 4000,
}),
).toBeVisible();
expect(
screen.getByRole("status", { name: "Загрузка будущих событий" }),
).toBeVisible();
expect(
screen.queryByText("На ближайшие 30 дней событий не найдено."),
).not.toBeInTheDocument();
expect(screen.getByText("Загрузка дохода текущего месяца")).toBeVisible();
expect(screen.queryByText("Нет текущих сумм")).not.toBeInTheDocument();
}); });
it("renders a stale portfolio in upstream order with nullable values hidden", () => { it("renders a stale portfolio in upstream order with nullable values hidden", () => {
@@ -411,18 +483,22 @@ describe("AccountPage states", () => {
expect(screen.queryByText(/T-Bank временно недоступен/)) expect(screen.queryByText(/T-Bank временно недоступен/))
.not.toBeInTheDocument(); .not.toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument(); expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
expect( expect(
screen.getByRole("button", { name: "Облигации" }), screen.getByRole("radio", { name: "Облигации" }),
).toBeInTheDocument(); ).toBeInTheDocument();
const positions = screen expect(
.getAllByText(/Вторая|Первая/) screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
.map(element => element.textContent); ).toEqual(["stocks", "bonds"]);
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(positions).toEqual(["Вторая", "Первая"]);
expect(screen.getByText("10 ₽")).toBeInTheDocument();
expect(screen.getByText("-1 ₽")).toBeInTheDocument(); expect(screen.getByText("-1 ₽")).toBeInTheDocument();
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
"src",
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
);
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("10 ₽")).toBeInTheDocument();
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument(); expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
expect( expect(
screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"), screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
@@ -431,10 +507,6 @@ describe("AccountPage states", () => {
screen.getByText("Количество: 1 · RU000A0JX0J2"), screen.getByText("Количество: 1 · RU000A0JX0J2"),
).toBeInTheDocument(); ).toBeInTheDocument();
expect(screen.queryByText("—")).not.toBeInTheDocument(); expect(screen.queryByText("—")).not.toBeInTheDocument();
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
"src",
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
);
}); });
it.each(["STOCK", "BOND"] as const)( it.each(["STOCK", "BOND"] as const)(
@@ -471,8 +543,11 @@ describe("AccountPage states", () => {
expect(screen.getByText("Б")).toBeInTheDocument(); expect(screen.getByText("Б")).toBeInTheDocument();
expect(screen.getByText("Н")).toBeInTheDocument(); expect(screen.getByText("Н")).toBeInTheDocument();
expect(screen.getAllByRole("img")).toHaveLength(1); expect(screen.getAllByRole("img")).toHaveLength(1);
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"])
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"]) {
expect(screen.getByText(value)).toBeInTheDocument(); expect(screen.getByText(value)).toBeInTheDocument();
}
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument(); expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
}, },
); );
@@ -520,6 +595,7 @@ describe("AccountPage states", () => {
expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument(); expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument();
expect(screen.getByText("Количество: 2 · FALLBACK-ISIN")) expect(screen.getByText("Количество: 2 · FALLBACK-ISIN"))
.toBeInTheDocument(); .toBeInTheDocument();
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("Количество: 3 · BOND-ISIN")) expect(screen.getByText("Количество: 3 · BOND-ISIN"))
.toBeInTheDocument(); .toBeInTheDocument();
expect(screen.queryByText("OFZ")).not.toBeInTheDocument(); expect(screen.queryByText("OFZ")).not.toBeInTheDocument();
@@ -573,9 +649,11 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect( expect(
screen.getByText("Пока недоступно"), screen.getByText("Пока недоступно"),
).toBeInTheDocument(); ).toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
expect(screen.getByText("Вторая")).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument();
}); });
@@ -610,6 +688,7 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Сделка")).toBeInTheDocument(); expect(screen.getByText("Сделка")).toBeInTheDocument();
expect(screen.getByText("−12 ₽")).toBeInTheDocument(); expect(screen.getByText("−12 ₽")).toBeInTheDocument();
}); });
@@ -663,7 +742,8 @@ describe("AccountPage states", () => {
/>, />,
); );
const section = screen.getByRole("region", { name: "Будущие события" }); fireEvent.click(screen.getByRole("tab", { name: "События" }));
const section = screen.getByRole("tabpanel", { name: "События" });
const content = within(section); const content = within(section);
const text = section.textContent ?? ""; const text = section.textContent ?? "";
@@ -686,11 +766,11 @@ describe("AccountPage states", () => {
).toBeVisible(); ).toBeVisible();
for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"]) for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"])
expect(content.getByText(amount)).toBeVisible(); expect(content.getByText(amount)).toBeVisible();
expect(content.getAllByText("Ожидаемая сумма")).toHaveLength(4); expect(content.getAllByText("Прогноз")).toHaveLength(4);
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument(); expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
expect(content.queryByText(/^\+/)).not.toBeInTheDocument(); expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
expect( expect(
content.getByRole("link", { name: "Открыть будущие события" }), content.getByRole("link", { name: "Подробнее" }),
).toHaveAttribute("href", "/accounts/account-1/events"); ).toHaveAttribute("href", "/accounts/account-1/events");
}); });
@@ -704,8 +784,10 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "События" }));
const content = within( const content = within(
screen.getByRole("region", { name: "Будущие события" }), screen.getByRole("tabpanel", { name: "События" }),
); );
if (state === "loading") { if (state === "loading") {
@@ -726,7 +808,7 @@ describe("AccountPage states", () => {
} }
expect( expect(
content.getByRole("link", { name: "Открыть будущие события" }), content.getByRole("link", { name: "Подробнее" }),
).toHaveAttribute("href", "/accounts/account-1/events"); ).toHaveAttribute("href", "/accounts/account-1/events");
}, },
); );
@@ -742,9 +824,11 @@ describe("AccountPage states", () => {
/>, />,
); );
fireEvent.click(screen.getByRole("tab", { name: "События" }));
expect( expect(
screen.getByText("Данные появятся здесь, когда чтение восстановится."), screen.getByText("Данные появятся здесь, когда чтение восстановится."),
).toBeInTheDocument(); ).toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
expect(screen.getByText("Вторая")).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument();
}); });
@@ -770,28 +854,6 @@ describe("AccountPage states", () => {
let requestCount = 0; let requestCount = 0;
let resolveRetry: ((response: Response) => void) | undefined; let resolveRetry: ((response: Response) => void) | undefined;
server.use( server.use(
http.post("*/api/v1/tbank-sync", () =>
HttpResponse.json(
{
id: "overview",
now: "2026-09-25T00:00:00Z",
scope: { accountId: "account-1", screen: "account" },
},
{ status: 202 },
),
),
http.get("*/api/v1/tbank-sync/:id", () =>
HttpResponse.json(
{
errorCode: null,
id: "overview",
now: "2026-09-25T00:00:00Z",
scope: { accountId: "account-1", screen: "account" },
state: "succeeded",
},
),
),
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => { http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requestCount += 1; requestCount += 1;
if (requestCount === 1) if (requestCount === 1)
@@ -835,7 +897,7 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument();
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]); ).toEqual(["1 234,5 ₽"]);
expect(screen.queryByRole("button", { name: "Повторить" })) expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument(); .not.toBeInTheDocument();
void queryClient.invalidateQueries({ void queryClient.invalidateQueries({
@@ -845,7 +907,7 @@ describe("AccountPage states", () => {
expect(structure).toHaveTextContent("10 ₽"); expect(structure).toHaveTextContent("10 ₽");
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]); ).toEqual(["1 234,5 ₽"]);
resolveRetry?.( resolveRetry?.(
HttpResponse.json( HttpResponse.json(
resource( resource(
@@ -864,7 +926,7 @@ describe("AccountPage states", () => {
await waitFor(() => await waitFor(() =>
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["-0,5 $", "2,50 €"]), ).toEqual(["-0,5 $"]),
); );
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(structure).not.toHaveTextContent("10 ₽"); expect(structure).not.toHaveTextContent("10 ₽");
@@ -906,7 +968,7 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument();
expect( expect(
screen.getAllByRole("definition").map(node => node.textContent), screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]); ).toEqual(["1 234,5 ₽"]);
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument(); expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect( expect(
screen.queryByRole("status", { name: "Загрузка" }), screen.queryByRole("status", { name: "Загрузка" }),
@@ -916,4 +978,96 @@ describe("AccountPage states", () => {
resolveRefresh?.(HttpResponse.json(resource(portfolio))); resolveRefresh?.(HttpResponse.json(resource(portfolio)));
}); });
it("opens positions by default and switches between local tabs", () => {
renderPage(<AccountPageLoaded {...loadedProps()} />);
expect(screen.getByRole("tab", { name: "Позиции" }))
.toHaveAttribute("aria-selected", "true");
expect(screen.getByText("Вторая")).toBeVisible();
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect(screen.getByRole("tabpanel", { name: "Деньги" }))
.toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
});
it("links operation, event and income previews to their detail pages", () => {
renderPage(
<AccountPageLoaded
{...loadedProps()}
incomeSummary={{
state: "empty",
to: "/accounts/account-1/income",
}}
/>,
);
for (const [tab, href] of [
["Операции", "/accounts/account-1/operations"],
["События", "/accounts/account-1/events"],
["Доход", "/accounts/account-1/income"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" }))
.toHaveAttribute("href", href);
}
});
it("filters positions by the kinds present in the portfolio", () => {
renderPage(<AccountPageLoaded {...loadedProps()} />);
expect(
screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
).toEqual(["stocks", "bonds"]);
expect(screen.getByText("Вторая")).toBeVisible();
expect(screen.queryByText("Первая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("Первая")).toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
});
it("hides the position filter when only one kind exists", () => {
renderPage(
<AccountPageLoaded
{...loadedProps({
...portfolio,
positions: [portfolio.positions[0]],
})}
/>,
);
expect(screen.queryByRole("radiogroup", { name: "Тип позиции" }))
.not.toBeInTheDocument();
});
it("hides unrealized returns for a partial portfolio", () => {
renderPage(<AccountPageLoaded {...loadedProps()} partial />);
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
.not.toBeInTheDocument();
});
it("omits an unrealized currency total when any return is incomplete", () => {
renderPage(
<AccountPageLoaded
{...loadedProps({
...portfolio,
positions: [
position({ absoluteReturn: { currency: "RUB", value: "10" } }),
position({
absoluteReturn: null,
currentValue: { currency: "RUB", value: "100" },
}),
],
})}
/>,
);
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
.not.toBeInTheDocument();
});
}); });
@@ -31,6 +31,7 @@ const AccountPage: FC = () => {
positionSections={viewModel.positionSections} positionSections={viewModel.positionSections}
recentEvents={viewModel.recentEvents} recentEvents={viewModel.recentEvents}
recentOperations={viewModel.recentOperations} recentOperations={viewModel.recentOperations}
unrealizedReturns={viewModel.unrealizedReturns}
/> />
); );
}; };
@@ -173,14 +173,14 @@ it("keeps overview sections independent when their source data is incomplete", a
mockLoadedAccountPage(); mockLoadedAccountPage();
server.use( server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(portfolio, { availability: "partial" })), HttpResponse.json(resource(portfolio, { completeness: "incomplete" })),
), ),
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json( HttpResponse.json(
resource( resource(
{ hasNext: false, items: [], nextCursor: null }, { hasNext: false, items: [], nextCursor: null },
{ availability: "partial" }, { completeness: "incomplete" },
), ),
), ),
), ),
@@ -188,7 +188,7 @@ it("keeps overview sections independent when their source data is incomplete", a
HttpResponse.json( HttpResponse.json(
resource( resource(
{ events: [], incomeTotalsByCurrency: [] }, { events: [], incomeTotalsByCurrency: [] },
{ availability: "partial" }, { completeness: "incomplete" },
), ),
), ),
), ),
@@ -1,6 +1,7 @@
import { useParams } from "react-router"; import { useParams } from "react-router";
import type { Portfolio } from "@/entities/portfolio"; import type { Portfolio } from "@/entities/portfolio";
import type { InvestmentResourceMeta } from "@/shared/api";
import { useBrokerageOperations } from "@/entities/broker-operation"; import { useBrokerageOperations } from "@/entities/broker-operation";
import { import {
@@ -19,6 +20,7 @@ import { useInitialAvailability } from "@/shared/lib";
import { import {
type AccountPagePositionSection, type AccountPagePositionSection,
toAccountPagePositionSections, toAccountPagePositionSections,
toUnrealizedReturns,
} from "../../model/positions"; } from "../../model/positions";
import { import {
type AccountPageIncomeSummary, type AccountPageIncomeSummary,
@@ -45,7 +47,9 @@ type AccountPageEmptyViewModel = AccountPageContent & {
type AccountPageLoadedViewModel = AccountPageContent & { type AccountPageLoadedViewModel = AccountPageContent & {
portfolio: Portfolio; portfolio: Portfolio;
positionSections: AccountPagePositionSection[]; positionSections: AccountPagePositionSection[];
source?: InvestmentResourceMeta;
state: "loaded"; state: "loaded";
unrealizedReturns: Portfolio["totalsByCurrency"];
}; };
type AccountPageViewModel type AccountPageViewModel
@@ -87,7 +91,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: !!portfolio.data, hasContent: !!portfolio.data,
identity: accountId ?? "account", identity: accountId ?? "account",
isError: portfolio.isError || portfolio.meta?.sync.state === "failed", isError: portfolio.isError || portfolio.meta?.lastAttempt.state === "failed",
isFetching: portfolio.isFetching, isFetching: portfolio.isFetching,
}); });
@@ -105,7 +109,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
const incomeSummary = toIncomeSummary(accountId, income); const incomeSummary = toIncomeSummary(accountId, income);
if ( if (
portfolio.meta?.availability === "complete" portfolio.meta?.availability === "available"
&& portfolio.data.positions.length === 0 && portfolio.data.positions.length === 0
&& portfolio.data.cashBalances.length === 0 && portfolio.data.cashBalances.length === 0
) )
@@ -118,7 +122,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
state: "empty" as const, state: "empty" as const,
}; };
const isPartial = portfolio.meta?.availability === "partial"; const isPartial = portfolio.meta?.completeness === "incomplete";
return { return {
account, account,
@@ -129,7 +133,9 @@ function useAccountPageViewModel(): AccountPageViewModel {
positionSections: toAccountPagePositionSections(portfolio.data), positionSections: toAccountPagePositionSections(portfolio.data),
recentEvents, recentEvents,
recentOperations, recentOperations,
source: portfolio.meta,
state: "loaded" as const, state: "loaded" as const,
unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
}; };
} }
@@ -1,12 +1,21 @@
import type { FC } from "react"; import {
Alert,
import { Accordion, Alert, Stack } from "@mantine/core"; Group,
SegmentedControl,
Stack,
Tabs,
Text,
} from "@mantine/core";
import { type FC, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account"; import type { BrokerageAccount } from "@/entities/brokerage-account";
import type { Portfolio } from "@/entities/portfolio"; import type { Portfolio } from "@/entities/portfolio";
import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event"; import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { formatMoney } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import { PortfolioStructure } from "@/widgets/portfolio-structure"; import { PortfolioStructure } from "@/widgets/portfolio-structure";
import type { AccountPagePositionSection } from "../../../model/positions"; import type { AccountPagePositionSection } from "../../../model/positions";
@@ -32,27 +41,63 @@ type AccountPageLoadedProps = {
positionSections: AccountPagePositionSection[]; positionSections: AccountPagePositionSection[];
recentEvents: AccountPageRecentEvents; recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations; recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
unrealizedReturns: Portfolio["totalsByCurrency"];
}; };
const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => { const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [filter, setFilter] = useState<string>();
const defaultValue = [ const activeSection = props.positionSections.find(
...props.positionSections.map(section => section.kind), section => section.kind === filter,
"cash", ) ?? props.positionSections[0];
"recentOperations",
"recentEvents", const positionKindLabels: Record<AccountPagePositionSection["kind"], string> = {
"incomeSummary", bonds: t("portfolio.positionKinds.bonds"),
]; other: t("portfolio.positionKinds.other"),
stocks: t("portfolio.positionKinds.stocks"),
};
const filterOptions = props.positionSections.map(section => ({
label: positionKindLabels[section.kind],
value: section.kind,
}));
return ( return (
<Stack gap="lg"> <Stack gap="lg">
<AccountHeading account={props.account} accountId={props.accountId} /> <AccountHeading account={props.account} accountId={props.accountId} />
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{props.partial {props.partial
? <Alert role="status">{t("investment.partial")}</Alert> ? <Alert role="status">{t("investment.partial")}</Alert>
: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />} : <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
{!props.partial && props.unrealizedReturns.length > 0 && (
<Stack
aria-label={t("portfolio.unrealizedResult")}
component="section"
gap={4}
>
<Text fw={600}>{t("portfolio.unrealizedResult")}</Text>
<Group gap="md">
{props.unrealizedReturns.map(total => (
<Text key={total.currency}>{formatMoney(total)}</Text>
))}
</Group>
<Text c="dimmed" size="xs">
{t("portfolio.unrealizedResultCaption")}
</Text>
</Stack>
)}
{!props.partial && ( {!props.partial && (
<PortfolioStructure <PortfolioStructure
key={props.accountId} key={props.accountId}
@@ -60,70 +105,73 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
/> />
)} )}
<Accordion <Tabs
classNames={{ classNames={{ list: classes.tabsList }}
chevron: classes.accordionChevron, defaultValue="positions"
control: classes.accordionControl, keepMounted={false}
label: classes.accordionLabel,
panel: classes.accordionPanel,
}}
defaultValue={defaultValue}
multiple
> >
{props.positionSections.map(section => ( <Tabs.List aria-label={t("portfolio.sections")} mb="md">
<Accordion.Item key={section.kind} value={section.kind}> <Tabs.Tab value="positions">
<Accordion.Control> {t("portfolio.tabs.positions")}
{t(positionSectionTitleKey(section.kind))} </Tabs.Tab>
</Accordion.Control>
<Accordion.Panel> <Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
<PositionSection section={section} />
</Accordion.Panel>
</Accordion.Item>
))}
<Accordion.Item value="cash"> <Tabs.Tab value="operations">
<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control> {t("portfolio.tabs.operations")}
</Tabs.Tab>
<Accordion.Panel> <Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
<CurrencyCards amounts={props.portfolio.cashBalances} />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="recentOperations"> <Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control> </Tabs.List>
<Accordion.Panel> <Tabs.Panel value="positions">
<RecentOperations operations={props.recentOperations} /> <Stack gap="md">
</Accordion.Panel> {props.positionSections.length > 1 && (
</Accordion.Item> <div className={classes.positionFilter}>
<SegmentedControl
<Accordion.Item value="recentEvents"> aria-label={t("portfolio.positionFilter")}
<Accordion.Control>{t("events.recentTitle")}</Accordion.Control> data={filterOptions}
onChange={setFilter}
<Accordion.Panel> value={activeSection?.kind}
<BrokerageEventsPreview events={props.recentEvents} /> />
</Accordion.Panel> </div>
</Accordion.Item>
<Accordion.Item value="incomeSummary">
<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
<Accordion.Panel>
{!!props.incomeSummary && (
<IncomeSummary {...props.incomeSummary} />
)} )}
</Accordion.Panel>
</Accordion.Item> {activeSection && <PositionSection section={activeSection} />}
</Accordion> </Stack>
</Tabs.Panel>
<Tabs.Panel value="cash">
<CurrencyCards amounts={props.portfolio.cashBalances} />
</Tabs.Panel>
<Tabs.Panel value="operations">
<RecentOperations
moreLabel={t("portfolio.more")}
operations={props.recentOperations}
/>
</Tabs.Panel>
<Tabs.Panel value="events">
<BrokerageEventsPreview
events={props.recentEvents}
moreLabel={t("portfolio.more")}
/>
</Tabs.Panel>
<Tabs.Panel value="income">
{!!props.incomeSummary && (
<IncomeSummary
{...props.incomeSummary}
moreLabel={t("portfolio.more")}
/>
)}
</Tabs.Panel>
</Tabs>
</Stack> </Stack>
); );
}; };
function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
if (kind === "stocks") return "portfolio.stocks";
return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
}
export { AccountPageLoaded }; export { AccountPageLoaded };
@@ -34,7 +34,9 @@ const AccountPageLoading: FC = () => {
<Skeleton height={260} radius="sm" /> <Skeleton height={260} radius="sm" />
{["first", "second", "third"].map(placeholder => <Skeleton height={52} key={placeholder} radius="sm" />)} <Skeleton height={40} radius="sm" />
<Skeleton height={220} radius="sm" />
</LoadingSkeleton> </LoadingSkeleton>
); );
}; };
@@ -9,8 +9,8 @@ import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
import { formatMoney } from "@/shared/lib"; import { formatMoney } from "@/shared/lib";
type IncomeSummaryProps type IncomeSummaryProps = { moreLabel?: string } & (
= | { | {
state: "empty"; state: "empty";
to: string; to: string;
} }
@@ -27,7 +27,8 @@ type IncomeSummaryProps
| { | {
state: "partial"; state: "partial";
to: string; to: string;
}; }
);
const IncomeSummary: FC<IncomeSummaryProps> = (props) => { const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -56,7 +57,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
<Text c="dimmed">{t("income.summaryEmpty")}</Text> <Text c="dimmed">{t("income.summaryEmpty")}</Text>
<Button component={Link} to={props.to} variant="subtle"> <Button component={Link} to={props.to} variant="subtle">
{t("income.open")} {props.moreLabel ?? t("income.open")}
</Button> </Button>
</Stack> </Stack>
); );
@@ -75,7 +76,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
))} ))}
<Button component={Link} to={props.to} variant="subtle"> <Button component={Link} to={props.to} variant="subtle">
{t("income.open")} {props.moreLabel ?? t("income.open")}
</Button> </Button>
</Stack> </Stack>
); );
@@ -15,6 +15,8 @@ const syntheticPosition
logoName: null, logoName: null,
logoSrc: null, logoSrc: null,
quantity: "100", quantity: "100",
returnPercent: "25",
returnPercentText: "+25,00 %",
returnText: "+5 000 ₽", returnText: "+5 000 ₽",
returnTone: "positive", returnTone: "positive",
shareText: "20%", shareText: "20%",
@@ -73,6 +75,8 @@ export const BondLoss: Story
"Учебные облигации для долгосрочных накоплений, выпуск 2030", "Учебные облигации для долгосрочных накоплений, выпуск 2030",
isin: "DEMO-BOND-2030", isin: "DEMO-BOND-2030",
quantity: "10", quantity: "10",
returnPercent: "-5",
returnPercentText: "-5,00 %",
returnText: "−500 ₽", returnText: "−500 ₽",
returnTone: "negative", returnTone: "negative",
shareText: "7,6%", shareText: "7,6%",
@@ -123,6 +127,8 @@ export const MissingValuation: Story
averagePurchasePrice: null, averagePurchasePrice: null,
currentValue: null, currentValue: null,
displayName: "Учебная позиция без текущей оценки", displayName: "Учебная позиция без текущей оценки",
returnPercent: null,
returnPercentText: null,
returnText: null, returnText: null,
returnTone: undefined, returnTone: undefined,
shareText: null, shareText: null,
@@ -6,7 +6,10 @@ import { Link } from "react-router";
import { formatMoney } from "@/shared/lib"; import { formatMoney } from "@/shared/lib";
import type { AccountPagePosition, AccountPagePositionSection } from "../../../../model/positions"; import type {
AccountPagePosition,
AccountPagePositionSection,
} from "../../../../model/positions";
import classes from "../../AccountPage.module.css"; import classes from "../../AccountPage.module.css";
import { PositionLogo } from "../PositionLogo.view"; import { PositionLogo } from "../PositionLogo.view";
@@ -26,8 +29,15 @@ const PositionCard: FC<PositionCardProps> = (props) => {
: undefined; : undefined;
let returnText = position.returnText; let returnText = position.returnText;
if (returnText && !isExpanded)
if (returnText && position.returnPercentText) {
returnText += ` · ${position.returnPercentText}`;
}
if (returnText && !isExpanded) {
returnText = t("portfolio.return", { value: returnText }); returnText = t("portfolio.return", { value: returnText });
}
const instrumentTo = position.instrumentTo; const instrumentTo = position.instrumentTo;
const identifier const identifier
@@ -6,7 +6,10 @@ import { Link } from "react-router";
import { formatMoney } from "@/shared/lib"; import { formatMoney } from "@/shared/lib";
import type { AccountPagePositionGroup, AccountPagePositionSection } from "../../../model/positions"; import type {
AccountPagePositionGroup,
AccountPagePositionSection,
} from "../../../model/positions";
import classes from "../AccountPage.module.css"; import classes from "../AccountPage.module.css";
import { PositionLogo } from "./PositionLogo.view"; import { PositionLogo } from "./PositionLogo.view";
@@ -60,6 +63,16 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
? classes[position.returnTone] ? classes[position.returnTone]
: undefined; : undefined;
const returnPercent = position.returnPercentText
? ` · ${position.returnPercentText}`
: "";
const returnValue = `${position.returnText ?? ""}${returnPercent}`;
const returnText = kind === "other"
? t("portfolio.return", { value: returnValue })
: returnValue;
return ( return (
<Stack <Stack
className={classes.accountPosition} className={classes.accountPosition}
@@ -89,9 +102,7 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
{!!position.returnText && ( {!!position.returnText && (
<Text className={appearanceClass} size="sm"> <Text className={appearanceClass} size="sm">
{kind === "other" {returnText}
? t("portfolio.return", { value: position.returnText })
: position.returnText}
</Text> </Text>
)} )}
</Group> </Group>
@@ -10,6 +10,7 @@ import { LedgerEntryRow } from "@/entities/broker-operation";
import type { AccountPageRecentOperations } from "../../../model/previews"; import type { AccountPageRecentOperations } from "../../../model/previews";
type RecentOperationsProps = { type RecentOperationsProps = {
moreLabel?: string;
operations: AccountPageRecentOperations; operations: AccountPageRecentOperations;
}; };
@@ -44,7 +45,7 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
))} ))}
<Button component={Link} to={operations.to} variant="subtle"> <Button component={Link} to={operations.to} variant="subtle">
{t("ledger.open")} {props.moreLabel ?? t("ledger.open")}
</Button> </Button>
</Stack> </Stack>
); );
@@ -36,6 +36,8 @@ describe("Positions grouped by security", () => {
).toHaveAttribute("href", "/accounts/a"); ).toHaveAttribute("href", "/accounts/a");
expect(within(rows[0]).getByText("Количество: 1.25")).toBeInTheDocument(); expect(within(rows[0]).getByText("Количество: 1.25")).toBeInTheDocument();
expect(within(rows[0]).getByText("375 ₽")).toBeInTheDocument(); expect(within(rows[0]).getByText("375 ₽")).toBeInTheDocument();
expect(within(rows[0]).getByText("+25 ₽ · +7,14 %"))
.toBeInTheDocument();
expect( expect(
within(rows[0]).getByText("Средняя цена: 280 ₽"), within(rows[0]).getByText("Средняя цена: 280 ₽"),
).toBeInTheDocument(); ).toBeInTheDocument();
@@ -40,6 +40,8 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
logoName: null, logoName: null,
logoSrc: null, logoSrc: null,
quantity: "10", quantity: "10",
returnPercent: null,
returnPercentText: null,
returnText: null, returnText: null,
shareText: null, shareText: null,
ticker: null, ticker: null,
@@ -31,6 +31,19 @@ function configureTestAuth() {
}); });
} }
function portfolioSummary(totals: { currency: string; value: string }[]) {
return {
bondPositionCount: 1,
cashBalances: [],
fundPositionCount: 0,
stockPositionCount: 0,
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 1,
totalsByCurrency: totals,
unrealizedReturnByCurrency: [],
};
}
function renderPage(queryClient: QueryClient) { function renderPage(queryClient: QueryClient) {
configureTestAuth(); configureTestAuth();
@@ -46,6 +59,65 @@ function renderPage(queryClient: QueryClient) {
} }
describe("AccountsPage", () => { describe("AccountsPage", () => {
it("summarizes currencies separately and reports excluded accounts", async () => {
server.use(http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(resource([
{
...account,
portfolioSummary: portfolioSummary([
{ currency: "RUB", value: "100.10" },
{ currency: "USD", value: "20" },
]),
},
{
...account,
id: "account-2",
name: "Второй",
portfolioSummary: portfolioSummary([
{ currency: "RUB", value: "50.20" },
]),
},
{
...account,
id: "account-3",
name: "Без сводки",
portfolioSummary: null,
},
{
...account,
id: "account-4",
name: "Только деньги",
portfolioSummary: {
...portfolioSummary([{ currency: "RUB", value: "25" }]),
bondPositionCount: 0,
cashBalances: [{ currency: "RUB", value: "25" }],
totalPositionCount: 0,
},
},
{
...account,
id: "account-5",
name: "Без сумм",
portfolioSummary: {
...portfolioSummary([]),
totalPositionCount: 0,
},
},
])),
));
const client = createTestQueryClient();
renderPage(client);
expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
expect(screen.getByText("5 счетов")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getByText(
"Ещё 1 счёт не включён: нет актуального портфеля",
)).toBeInTheDocument();
});
it("loads accounts after retrying an initial HTTP failure", async () => { it("loads accounts after retrying an initial HTTP failure", async () => {
const modes: (null | string)[] = []; const modes: (null | string)[] = [];
server.use( server.use(
@@ -130,17 +202,6 @@ describe("AccountsPage", () => {
}); });
it("keeps the cached account list quietly after a refresh error", async () => { it("keeps the cached account list quietly after a refresh error", async () => {
const requests: unknown[] = [];
server.use(
http.post("*/api/v1/tbank-sync", async ({ request }) => {
requests.push(await request.json());
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
}),
);
let requestCount = 0; let requestCount = 0;
server.use( server.use(
http.get("*/api/v1/brokerage-accounts", () => { http.get("*/api/v1/brokerage-accounts", () => {
@@ -169,7 +230,6 @@ describe("AccountsPage", () => {
expect(screen.queryByRole("button", { name: "Повторить" })) expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument(); .not.toBeInTheDocument();
expect(screen.getByText(account.name)).toBeInTheDocument(); expect(screen.getByText(account.name)).toBeInTheDocument();
expect(requests).toEqual([]);
}); });
it("keeps a cached empty account list visible after a refresh error", async () => { it("keeps a cached empty account list visible after a refresh error", async () => {
@@ -201,14 +261,19 @@ describe("AccountsPage", () => {
}); });
}); });
it.each(["idle", "failed"] as const)( it.each(["none", "failed"] as const)(
"keeps partial empty membership distinct from no accounts (sync=%s)", "keeps incomplete empty membership distinct from no accounts (attempt=%s)",
async (state) => { async (state) => {
server.use( server.use(
http.get("*/api/v1/brokerage-accounts", () => http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(resource([], { HttpResponse.json(resource([], {
availability: "partial", completeness: "incomplete",
sync: { errorCode: null, id: null, state }, lastAttempt: {
finishedAt: state === "failed" ? "2026-08-14T00:01:00Z" : null,
problems: [],
startedAt: state === "none" ? null : "2026-08-14T00:00:00Z",
state,
},
})), })),
), ),
); );
@@ -217,7 +282,7 @@ it.each(["idle", "failed"] as const)(
await waitFor(() => await waitFor(() =>
expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject({ expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject({
data: [], data: [],
meta: { availability: "partial" }, meta: { completeness: "incomplete" },
}), }),
); );
expect(screen.queryByText("Нет инвестиционных счетов")) expect(screen.queryByText("Нет инвестиционных счетов"))
@@ -15,6 +15,7 @@ const AccountsPage: FC = () => {
return ( return (
<AccountsPageLoaded <AccountsPageLoaded
accounts={viewModel.accounts} accounts={viewModel.accounts}
meta={viewModel.meta}
/> />
); );
}; };
@@ -8,7 +8,7 @@ import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib"; import { useInitialAvailability } from "@/shared/lib";
type AccountsPageViewModel type AccountsPageViewModel
= | { accounts: BrokerageAccountCard[]; state: "loaded" } = | { accounts: BrokerageAccountCard[]; meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>; state: "loaded" }
| { code?: string; state: "error" } | { code?: string; state: "error" }
| { state: "empty" } | { state: "empty" }
| { state: "loading" }; | { state: "loading" };
@@ -26,12 +26,13 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
const isAccessFailure = isAccountsAccessFailure(code); const isAccessFailure = isAccountsAccessFailure(code);
const hasResult = !!accounts.data const hasResult = !!accounts.data
&& !(accounts.meta?.availability === "partial" && accounts.data.length === 0); && !!accounts.meta
&& !(accounts.meta.completeness === "incomplete" && accounts.data.length === 0);
const availability = useInitialAvailability({ const availability = useInitialAvailability({
hasContent: hasResult, hasContent: hasResult,
identity: "accounts", identity: "accounts",
isError: accounts.isError || accounts.meta?.sync.state === "failed", isError: accounts.isError || accounts.meta?.lastAttempt.state === "failed",
isFetching: accounts.isFetching, isFetching: accounts.isFetching,
}); });
@@ -47,8 +48,12 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
state: "empty" as const, state: "empty" as const,
}; };
const meta = accounts.meta;
if (!meta) return { state: "loading" as const };
return { return {
accounts: brokerageAccountCards(accounts.data, accounts.meta?.dependencies), accounts: brokerageAccountCards(accounts.data, meta.dependencies),
meta,
state: "loaded" as const, state: "loaded" as const,
}; };
} }

Some files were not shown because too many files have changed in this diff Show More