21 Commits
Author SHA1 Message Date
codex-bot 2b94a16ae5 refactor!: support RUB only (WealthLedger/main#55) (#168)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 9m0s
2026-11-11 09:36:29 +03:00
codex-bot e2062ce837 feat(account): add performance tab vs Moscow Exchange index (WealthLedger/main#54) (#167)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 8m17s
2026-11-08 16:49:39 +03:00
codex-bot d910d624d6 test: remove timing races from screen-sync and route transition tests (#138) (#166)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Failing after 9m3s
2026-11-07 18:44:44 +03:00
codex-bot cc45352243 feat: clarify grouped coupon payouts (#162) (#165)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m26s
2026-11-07 11:18:07 +03:00
codex-bot ed0b5388ab fix: unify history and upcoming events labels (#161) (#163)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m18s
2026-11-07 10:50:51 +03:00
codex-bot 134c951178 fix: polish accounts portfolio summary (#159)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m26s
2026-11-06 15:17:27 +03:00
ksv741 2fd7d59e65 chore(release): 1.4.0
Frontend verify / commits (pull_request) Successful in 30s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 5m31s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 5m38s
Frontend image / publish (push) Successful in 7m13s
2026-11-06 07:45:29 +03:00
codex-bot 668f2ef70e fix: align audit findings for Events, currency and auth (WealthLedger/frontend#155)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m7s
2026-11-05 07:23:07 +03:00
codex-bot cadba8d075 refactor: share path-root query predicate (WealthLedger/frontend#142) (#154)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m42s
2026-11-04 22:58:58 +03:00
codex-bot 2db39f25d9 refactor: normalize view models and share breadcrumbs and titles (WealthLedger/frontend#143) (#153)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 8m19s
2026-11-04 21:14:29 +03:00
codex-bot 2d070ce2b5 refactor(api): consume bank operation oneOf contract (WealthLedger/frontend#144) (#152)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 8m20s
2026-11-04 20:47:51 +03:00
codex-bot 5077bd4f0b refactor: drop dead query helpers and simplify read deadline (WealthLedger/frontend#141) (#149)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 7m35s
2026-11-04 18:50:27 +03:00
codex-bot e2d143df46 refactor: move portfolio structure into account page, drop widgets (WealthLedger/frontend#139) (#140)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m51s
2026-11-04 18:01:00 +03:00
codex-bot ad93725a84 chore(deps): set Renovate release age, PR limit and update groups (WealthLedger/main#6) (#137)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 6m56s
2026-11-03 14:07:40 +03:00
codex-bot 8ce1e8e444 feat(investments): warn and offer retry after exhausted read retries (WealthLedger/frontend#55) (#136)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 7m5s
2026-11-03 09:49:08 +03:00
codex-bot aaee9591d7 chore(api): update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend#134) (#135)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 6m24s
2026-11-03 07:21:35 +03:00
codex-bot 9619dc9791 fix(account): show source metadata on empty account and income (WealthLedger/frontend#55) (#133)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 6m34s
2026-11-03 06:44:13 +03:00
codex-bot 71fbe7774d refactor: replace repeated lazy page wrappers with lazyPage helper (#131) (#132)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 8s
Frontend verify / verify (push) Failing after 6m34s
2026-11-02 07:31:25 +03:00
ksv741 870b7e6327 chore(release): 1.3.0
Frontend verify / commits (pull_request) Successful in 32s
Frontend verify / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 5m56s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m22s
Frontend image / publish (push) Successful in 6m22s
2026-11-01 19:33:21 +03:00
codex-bot 70a2c335fd feat(account): add concentration tab with top-5 slices and chart (WealthLedger/main#48) (#127)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 9m31s
2026-11-01 19:28:52 +03:00
codex-bot 7242240b21 chore(deps): resolve minimatch and glob audit advisories (WealthLedger/main#49) (#128)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 7m6s
2026-11-01 19:13:02 +03:00
144 changed files with 5732 additions and 2806 deletions
+6 -7
View File
@@ -8,7 +8,7 @@ Vitest — отдельную JSDOM конфигурацию. Точные versi
[package.json](../package.json), реализация — source of truth.
```text
app → pages → widgets → features → entities → shared
app → pages → features → entities → shared
page container → page VM → entity/feature query → shared/api → backend /api/v1
↓
props → state/section views
@@ -30,14 +30,13 @@ contract; frontend не читает его checkout для генерации
| --- | --- |
| Bootstrap, глобальные providers, routes | `app` |
| Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
| Крупная переиспользуемая композиция экрана | `widgets/<widget>` |
| Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
| Представление/поведение бизнес-сущности | `entities/<entity>` |
| Переиспользуемый код без WealthLedger domain meaning | `shared` |
Локальный FSD profile: `app → pages → widgets → features → entities → shared`.
Widget собирает несколько нижних слоёв в самостоятельный UI-блок; компонент для
одной page остаётся у page. Form, mutation или click handler сами по себе не
Локальный FSD profile: `app → pages → features → entities → shared`.
Слой `widgets` не используется: композиция экрана и компонент для одной page
остаются у page. Form, mutation или click handler сами по себе не
требуют feature. Два callers не делают domain helper generic shared.
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
@@ -49,12 +48,12 @@ Slice именуется по ответственности, а не `helpers`,
Cross-slice consumer использует `@/` и `index.ts` владельца, например
`@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
импортирует внутренний файл напрямую. Slices `pages`, `widgets`, `features`, `entities` не зависят от соседнего slice своего слоя;
импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
композиция принадлежит вышележащему owner. Existing меж-slice исключения
не являются разрешением добавлять новые.
Направление зависимостей, public imports и запрет соседних slices в
`pages`, `widgets`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
`pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
одного slice и связи shared segments этот запрет не ограничивает.
Knip проверяет использование exports, а не смысл placement.
+3
View File
@@ -13,6 +13,9 @@
!public/**
!docker/
!docker/**
!scripts/
!scripts/minimatch-compat/
!scripts/minimatch-compat/**
!packages/
!packages/tokens/
!packages/tokens/package.json
+56
View File
@@ -1,5 +1,61 @@
# Changelog
## [1.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.3.0...v1.4.0) (2026-11-06)
### Features
* **investments:** warn and offer retry after exhausted read retries (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#136](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/136)) ([8ce1e8e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/8ce1e8e44486dcc23d4c074559ca2bb517880b60))
### Bug Fixes
* **account:** show source metadata on empty account and income (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#133](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/133)) ([9619dc9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/9619dc979172dbc16391206e801ed67862d20116))
* align audit findings for Events, currency and auth (WealthLedger/frontend[#155](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/155)) ([668f2ef](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/668f2ef70e535a1222e7f600b1be4a31fefc6f8b))
### Refactoring
* **api:** consume bank operation oneOf contract (WealthLedger/frontend[#144](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/144)) ([#152](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/152)) ([2d070ce](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2d070ce2b54bbee466ecf6cc18b437910f0c07f8))
* drop dead query helpers and simplify read deadline (WealthLedger/frontend[#141](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/141)) ([#149](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/149)) ([5077bd4](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5077bd4f0baa4a59643e875485c2f08253cc198d))
* move portfolio structure into account page, drop widgets (WealthLedger/frontend[#139](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/139)) ([#140](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/140)) ([e2d143d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e2d143df46e650139e49b7c80a886008ede86d2a))
* normalize view models and share breadcrumbs and titles (WealthLedger/frontend[#143](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/143)) ([#153](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/153)) ([2db39f2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2db39f25d9478350ad56a1b2e2ca6496068257c5))
* replace repeated lazy page wrappers with lazyPage helper ([#131](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/131)) ([#132](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/132)) ([71fbe77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71fbe7774d3ed63fcb84bc644da997921bc049b2))
* share path-root query predicate (WealthLedger/frontend[#142](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/142)) ([#154](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/154)) ([cadba8d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cadba8d075daf9b20c0c9de97ad5bd8f5a3e74fc))
### Maintenance
* **api:** update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend[#134](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/134)) ([#135](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/135)) ([aaee959](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/aaee9591d7880193ee9b0c14339e8477264e4a94))
* **deps:** set Renovate release age, PR limit and update groups (WealthLedger/main[#6](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/6)) ([#137](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/137)) ([ad93725](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ad93725a84615ec329631b71ed8db33337085740))
## [1.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.1...v1.3.0) (2026-11-01)
### Features
* **account:** add concentration tab with top-5 slices and chart (WealthLedger/main[#48](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/48)) ([#127](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/127)) ([70a2c33](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/70a2c335fdddb8b6a99e3f609befe06aeb8cc45d))
* group all-account rows by instrument and day (WealthLedger/main[#47](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/47)) ([#126](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/126)) ([71126c9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71126c91f0b30f4d65a313ddc7d7f86963340455))
* make brokerage account list compact ([#111](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/111)) ([c24704a](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c24704affacbe7fbc08f5e2b61bb6e7ffa6053b9))
* remove top header and rework mobile bottom navigation ([#109](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/109)) ([1a92f02](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1a92f023c1c79f646424f72710ab74de63386a11))
* replace account page accordion with tabs and show open position result ([#112](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/112)) ([3075081](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3075081df188de0630d314ba15a34fe6efd1eea9))
* show return, cash and structure on account cards ([#114](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/114)) ([431559b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/431559be0fca9eb37f6a09d930d502f939884e39))
### Bug Fixes
* round money to currency minor units without negative zero (WealthLedger/frontend[#118](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/118)) ([#119](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/119)) ([1d49904](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1d4990491f254e1ec6bafad8204872eaae2982d0))
* show account source sync status (WealthLedger/frontend[#120](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/120)) ([#121](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/121)) ([a56edf2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a56edf2b3757ef0b0f6c42ecbd422a1a563f6505))
* show history loading alert only while loading (WealthLedger/frontend[#124](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/124)) ([#125](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/125)) ([6792f5b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/6792f5b70aa3ba90b2eb2df7e63d3ae2f669e295))
* stabilize auth client registration (WealthLedger/frontend[#95](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/95)) ([#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([5796d2d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5796d2d789963e66a3a4bcd79eab44700f16bd31))
### Refactoring
* derive api error codes from contract (WealthLedger/backend[#117](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/117)) ([#123](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/123)) ([32e8fe9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/32e8fe9402665ea0c350f5f247d87e328ffd44c8))
### Tests
* pin date in all accounts events test ([#115](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/115)) ([58b4e12](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/58b4e126330d01c1d6865bd0e9dd066a028fba08))
### Maintenance
* **deps:** resolve minimatch and glob audit advisories (WealthLedger/main[#49](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/49)) ([#128](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/128)) ([7242240](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7242240b2188e9d1ca1325e65d0e1a0a3655d882))
* sync brokerage accounts contract (WealthLedger/backend[#138](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/138)) ([0e4bbec](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0e4bbec2a7b814579095ea7ef6db68a70508fa29))
## [1.2.1](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.0...v1.2.1) (2026-10-24)
### Bug Fixes
+1
View File
@@ -5,6 +5,7 @@ COPY package.json package-lock.json ./
COPY packages/tokens/package.json ./packages/tokens/
COPY packages/ui/package.json ./packages/ui/
COPY packages/icons/package.json ./packages/icons/
COPY scripts/minimatch-compat ./scripts/minimatch-compat
RUN npm ci
FROM dependencies AS development
+5 -11
View File
@@ -29,17 +29,17 @@ module.exports = {
},
{
from: {
path: "^src/(app|pages|widgets|features|entities|shared)/([^/]+)/",
path: "^src/(app|pages|features|entities|shared)/([^/]+)/",
},
name: "slices-must-use-public-api",
severity: "error",
to: {
path: String.raw`^src/(app|pages|widgets|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
pathNot: "^src/$1/$2/",
},
},
{
from: { path: "^src/(pages|widgets|features|entities)/([^/]+)/" },
from: { path: "^src/(pages|features|entities)/([^/]+)/" },
name: "no-same-layer-cross-slice-imports",
severity: "error",
to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
@@ -48,24 +48,18 @@ module.exports = {
from: { path: "^src/shared/" },
name: "shared-must-not-depend-on-layers",
severity: "error",
to: { path: "^src/(entities|features|widgets|pages|app)/" },
to: { path: "^src/(entities|features|pages|app)/" },
},
{
from: { path: "^src/entities/" },
name: "entities-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(features|widgets|pages|app)/" },
to: { path: "^src/(features|pages|app)/" },
},
{
from: { path: "^src/features/" },
name: "features-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(widgets|pages|app)/" },
},
{
from: { path: "^src/widgets/" },
name: "widgets-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(pages|app)/" },
},
{
+9
View File
@@ -17,12 +17,21 @@ http {
default $http_x_forwarded_proto;
'' $scheme;
}
# One shared budget: the external proxy's client-IP forwarding is not verified.
map "$request_method:$uri" $auth_admission_key {
default "";
POST:/api/v1/auth/login auth;
POST:/api/v1/auth/register auth;
}
limit_req_zone $auth_admission_key zone=auth_admission:1m rate=2r/s;
limit_req_status 429;
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
resolver 127.0.0.11 valid=5s ipv6=off;
location /api/ {
limit_req zone=auth_admission burst=5 nodelay;
set $backend http://backend:3000;
proxy_pass $backend$request_uri;
proxy_set_header Host $http_host;
+6 -1
View File
@@ -25,7 +25,11 @@ const readability = {
)
context.report({ messageId: "schema", node });
},
FunctionDeclaration: checkParameters,
FunctionDeclaration(node) {
checkParameters(node);
if (node.id?.name?.endsWith?.("ViewModel"))
context.report({ messageId: "vmName", node: node.id });
},
FunctionExpression: checkParameters,
ImportDeclaration(node) {
if (
@@ -95,6 +99,7 @@ const readability = {
schema: "Declare Zod schemas in a dedicated *.schema.ts file.",
svg: "Own SVG markup in packages/icons, and import its public component.",
union: "Put complex union members on separate lines.",
vmName: "Name custom hooks use*Vm, not use*ViewModel.",
},
schema: [],
type: "suggestion",
+1 -1
View File
@@ -1,5 +1,5 @@
{
"ignoreDependencies": ["conventional-changelog-conventionalcommits"],
"ignoreDependencies": ["conventional-changelog-conventionalcommits", "minimatch"],
"workspaces": {
".": {
"project": ["src/**/*.{ts,tsx}", "!src/shared/api/generated/**"]
+42 -138
View File
@@ -1,12 +1,12 @@
{
"name": "wealth-ledger-frontend",
"version": "1.2.1",
"version": "1.4.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wealth-ledger-frontend",
"version": "1.2.1",
"version": "1.4.0",
"workspaces": [
"packages/*"
],
@@ -80,6 +80,7 @@
"jsdom": "30.1.3",
"knip": "6.43.0",
"lint-staged": "17.6.0",
"minimatch": "file:scripts/minimatch-compat",
"msw": "2.15.0",
"openapi-typescript": "7.13.0",
"playwright": "1.64.1",
@@ -88,7 +89,7 @@
"typescript": "5.9.3",
"typescript-eslint": "8.72.0",
"vite": "8.3.5",
"vite-plugin-pwa": "1.3.0",
"vite-plugin-pwa": "2.0.0",
"vitest": "5.0.5"
},
"engines": {
@@ -2511,14 +2512,12 @@
}
}
},
"node_modules/@isaacs/cliui": {
"version": "9.0.0",
"integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
"node_modules/@isaacs/nonrecursive-glob-match": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@isaacs/nonrecursive-glob-match/-/nonrecursive-glob-match-1.0.3.tgz",
"integrity": "sha512-SI7kyKHq4XXDRozw+r9GlRZkia1ZkFrpLW98r2IC2Bpr8YkFGE3fvjzmxCG0x78A++69HmDNrDvSMYBZmHGpKA==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
"license": "BlueOak-1.0.0"
},
"node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
"version": "0.7.0",
@@ -3720,33 +3719,6 @@
"npm": ">=9.5.0"
}
},
"node_modules/@redocly/openapi-core/node_modules/balanced-match": {
"version": "1.0.2",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/@redocly/openapi-core/node_modules/brace-expansion": {
"version": "2.1.7",
"integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/@redocly/openapi-core/node_modules/minimatch": {
"version": "5.1.9",
"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.12.0",
"integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
@@ -6448,6 +6420,7 @@
},
"node_modules/balanced-match": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
"integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
"dev": true,
"license": "MIT",
@@ -6495,6 +6468,7 @@
},
"node_modules/brace-expansion": {
"version": "5.0.12",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
"integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
"dev": true,
"license": "MIT",
@@ -9097,33 +9071,6 @@
"minimatch": "^5.0.1"
}
},
"node_modules/filelist/node_modules/balanced-match": {
"version": "1.0.2",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/filelist/node_modules/brace-expansion": {
"version": "2.1.7",
"integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/filelist/node_modules/minimatch": {
"version": "5.1.9",
"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=10"
}
},
"node_modules/find-up": {
"version": "5.0.0",
"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
@@ -9194,22 +9141,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/foreground-child": {
"version": "3.3.1",
"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
"dev": true,
"license": "ISC",
"dependencies": {
"cross-spawn": "^7.0.6",
"signal-exit": "^4.0.1"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/formatly": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/formatly/-/formatly-0.11.4.tgz",
@@ -9488,14 +9419,15 @@
}
},
"node_modules/glob": {
"version": "13.0.6",
"integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-14.0.3.tgz",
"integrity": "sha512-A1vjIwC3qpdCso45Iw127gnp7sPhqgY8lUQhDrArIs+GbmfaaVPFuoyy7WyLT9EPZCRZ7j7aLdwUhQmHWesEow==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"minimatch": "^10.2.2",
"minimatch": "^11.0.2",
"minipass": "^7.1.3",
"path-scurry": "^2.0.2"
"path-scurry": "^3.0.0"
},
"engines": {
"node": "18 || 20 || >=22"
@@ -10670,21 +10602,6 @@
"node": "^18.17 || >=20.6.1"
}
},
"node_modules/jackspeak": {
"version": "4.2.3",
"integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^9.0.0"
},
"engines": {
"node": "20 || >=22"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/jake": {
"version": "10.9.4",
"integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
@@ -11473,12 +11390,19 @@
}
},
"node_modules/minimatch": {
"version": "10.2.6",
"integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
"resolved": "scripts/minimatch-compat",
"link": true
},
"node_modules/minimatch-11": {
"name": "minimatch",
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-11.0.2.tgz",
"integrity": "sha512-pWTgz5CN3tjqyZNSK2tePlSmu9IwM41q8yn8Usdqqwe9TIHh+9dEpLLjF4uApsfPEAZY71qtSiA2B2APEr+1Yw==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"brace-expansion": "^5.0.8"
"@isaacs/nonrecursive-glob-match": "^1.0.2",
"brace-expansion": "^5.0.12"
},
"engines": {
"node": "18 || 20 || >=22"
@@ -12212,12 +12136,6 @@
"quickjs-wasi": "^2.2.0"
}
},
"node_modules/package-json-from-dist": {
"version": "1.0.1",
"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
"dev": true,
"license": "BlueOak-1.0.0"
},
"node_modules/package-manager-detector": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.9.0.tgz",
@@ -12314,8 +12232,9 @@
"license": "MIT"
},
"node_modules/path-scurry": {
"version": "2.0.2",
"integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-3.0.0.tgz",
"integrity": "sha512-1pTbQqH1wIwMi/eleQ5leFTTCkzFsPcgXNjwOA8YGGW/W4/kHT3dssE7Z6NH+zuqNLOzOB0uaD61yl7cAcVhgg==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
@@ -15929,8 +15848,9 @@
}
},
"node_modules/vite-plugin-pwa": {
"version": "1.3.0",
"integrity": "sha512-c5kMgN+ITrOtHXp8PAtk2uOIEea6XjP/unCGxOWWBzQ6qa65qj/awHg0wf+QF9E/2u9vh86LqxPwzEPNbM2r5A==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-2.0.0.tgz",
"integrity": "sha512-6G9dsPKT9QKYpeTuTLJM28zZL3HsXUTUM/QUZBEgQk2jbfrPJDq2i8gTewAKqi1c9Mt6MiidrL4SFI+HthiQMg==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -15941,13 +15861,13 @@
"workbox-window": "^7.4.1"
},
"engines": {
"node": ">=16.0.0"
"node": ">=20.19.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vite-pwa/assets-generator": "^1.0.0",
"@vite-pwa/assets-generator": "^1.0.0 || ^2.0.0",
"vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
"workbox-build": "^7.4.1",
"workbox-window": "^7.4.1"
@@ -17642,30 +17562,6 @@
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
}
},
"node_modules/workbox-build/node_modules/glob": {
"version": "11.1.0",
"integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
"deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"foreground-child": "^3.3.1",
"jackspeak": "^4.1.1",
"minimatch": "^10.1.1",
"minipass": "^7.1.2",
"package-json-from-dist": "^1.0.0",
"path-scurry": "^2.0.0"
},
"bin": {
"glob": "dist/esm/bin.mjs"
},
"engines": {
"node": "20 || >=22"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/workbox-build/node_modules/lru-cache": {
"version": "5.1.1",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
@@ -18076,6 +17972,14 @@
"react": "19.3.1",
"react-dom": "19.3.1"
}
},
"scripts/minimatch-compat": {
"name": "minimatch",
"version": "11.0.2-compat.0",
"dev": true,
"dependencies": {
"minimatch-11": "npm:minimatch@11.0.2"
}
}
}
}
+6 -3
View File
@@ -1,7 +1,7 @@
{
"name": "wealth-ledger-frontend",
"private": true,
"version": "1.2.1",
"version": "1.4.0",
"type": "module",
"engines": {
"node": "24.22.1"
@@ -106,6 +106,7 @@
"jsdom": "30.1.3",
"knip": "6.43.0",
"lint-staged": "17.6.0",
"minimatch": "file:scripts/minimatch-compat",
"msw": "2.15.0",
"openapi-typescript": "7.13.0",
"playwright": "1.64.1",
@@ -114,7 +115,7 @@
"typescript": "5.9.3",
"typescript-eslint": "8.72.0",
"vite": "8.3.5",
"vite-plugin-pwa": "1.3.0",
"vite-plugin-pwa": "2.0.0",
"vitest": "5.0.5"
},
"overrides": {
@@ -124,7 +125,9 @@
},
"@vitest/browser": "5.0.5",
"@vitest/ui": "5.0.5",
"@vitest/mocker": "5.0.5"
"@vitest/mocker": "5.0.5",
"minimatch": "$minimatch",
"glob": "14.0.3"
},
"allowScripts": {
"esbuild@0.28.2": true,
+16 -1
View File
@@ -1,15 +1,30 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:recommended", ":semanticCommitTypeAll(chore)"],
"extends": ["config:recommended", ":semanticCommitTypeAll(chore)", "security:minimumReleaseAgeNpm"],
"timezone": "Europe/Moscow",
"labels": ["dependencies"],
"dependencyDashboard": true,
"rangeStrategy": "pin",
"prConcurrentLimit": 5,
"lockFileMaintenance": {
"enabled": true,
"schedule": ["before 4am on the first day of the month"]
},
"packageRules": [
{
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major dependencies"
},
{
"matchManagers": ["github-actions"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major github actions"
},
{
"matchManagers": ["docker-compose", "dockerfile"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major container images"
},
{
"matchUpdateTypes": ["major"],
"dependencyDashboardApproval": true
+9
View File
@@ -0,0 +1,9 @@
// ponytail: CommonJS twin of index.js (import-x ships lib/index.cjs too).
const minimatch = require("minimatch-11");
module.exports = {
...minimatch,
makeRe: (pattern, options = {}) => ({
test: path => minimatch.minimatch(path, pattern, options),
}),
};
+11
View File
@@ -0,0 +1,11 @@
// ponytail: shim for eslint-plugin-import-x@4.17.1, which still imports the
// makeRe export removed in minimatch 11. Its only caller (no-internal-modules)
// uses the result via .test(), so a matcher object is enough. Delete this
// package and the override once import-x supports minimatch 11.
import { minimatch } from "minimatch-11";
export * from "minimatch-11";
export const makeRe = (pattern, options = {}) => ({
test: path => minimatch(path, pattern, options),
});
+14
View File
@@ -0,0 +1,14 @@
{
"name": "minimatch",
"version": "11.0.2-compat.0",
"private": true,
"description": "minimatch 11 plus the makeRe export eslint-plugin-import-x 4.17.1 still imports. Remove when import-x supports minimatch 11.",
"type": "module",
"exports": {
"import": "./index.js",
"require": "./index.cjs"
},
"dependencies": {
"minimatch-11": "npm:minimatch@11.0.2"
}
}
+12 -12
View File
@@ -46,19 +46,21 @@ const position: Portfolio["positions"][number]
displayName: "Сбербанк",
figi: "SBER",
isin: null,
issuer: null,
logoName: null,
quantity: "2",
sector: null,
ticker: "SBER",
type: "STOCK",
};
const portfolio: Portfolio = {
cashBalances: [],
cash: { currency: "RUB", value: "0" },
isStale: false,
lastSuccessfulAt: "2026-08-15T12:00:00Z",
positions: accounts.map(account => ({ ...position, account })),
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "RUB", value: "1200" }],
structure: { categories: [], hasNegativeValues: false, totalValue: "0", unvaluedCategories: [] },
totals: { currency: "RUB", value: "1200" },
};
const receipt: BrokerageOperation
@@ -104,14 +106,11 @@ const analytics: IncomeAnalytics
},
],
period: { from: "2026-08-01", to: "2026-08-31" },
totalsByCurrency: [
{
total: {
coupon: { currency: "RUB", value: "2" },
currency: "RUB",
dividend: { currency: "RUB", value: "0" },
total: { currency: "RUB", value: "2" },
},
],
};
const CurrentLocation: FC = () => {
@@ -214,7 +213,8 @@ beforeEach(() => {
type: "coupon",
}),
),
incomeTotalsByCurrency: [],
incomeTotal: { currency: "RUB", value: "0" },
window: { from: "2026-09-01", to: "2026-10-01" },
}),
),
),
@@ -224,9 +224,9 @@ beforeEach(() => {
describe("All accounts routes", () => {
it.each([
["/accounts/all", "Все счета"],
["/accounts/all/operations", "Журнал операций"],
["/accounts/all/operations", "История операций"],
["/accounts/all/income?from=2026-08-01&to=2026-08-31", "Пассивный доход"],
["/accounts/all/events", "Будущие события"],
["/accounts/all/events", "Предстоящие события"],
])("opens %s directly", async (path, title) => {
renderPage(path);
expect(
@@ -308,9 +308,9 @@ describe("All accounts routes", () => {
);
for (const [suffix, tab] of [
["operations", "Операции"],
["operations", "История операций"],
["income", "Доход"],
["events", "События"],
["events", "Предстоящие события"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" }))
+27 -93
View File
@@ -1,4 +1,4 @@
import type { FC } from "react";
import type { ComponentType, FC } from "react";
import { lazy } from "react";
import { Navigate, Route, Routes } from "react-router";
@@ -6,101 +6,35 @@ import { Navigate, Route, Routes } from "react-router";
import { LazyPage } from "../RouteFallback";
import { Protected, Public } from "../RouteGuards";
const CardPage = lazy(async () => {
const { CardPage } = await import("@/pages/card");
// Pages use named exports; React.lazy needs a default export per dynamic import (one chunk each).
function lazyPage<Name extends string>(
load: () => Promise<Record<Name, ComponentType>>,
name: Name,
) {
return lazy(async () => {
const page = await load();
return { default: CardPage };
// eslint-disable-next-line security/detect-object-injection -- `name` is a compile-time literal checked against the module's exports.
return { default: page[name] };
});
}
const CardsPage = lazy(async () => {
const { CardsPage } = await import("@/pages/cards");
return { default: CardsPage };
});
const BondPage = lazy(async () => {
const { BondPage } = await import("@/pages/bond");
return { default: BondPage };
});
const BondsPage = lazy(async () => {
const { BondsPage } = await import("@/pages/bonds");
return { default: BondsPage };
});
const StockPage = lazy(async () => {
const { StockPage } = await import("@/pages/stock");
return { default: StockPage };
});
const StocksPage = lazy(async () => {
const { StocksPage } = await import("@/pages/stocks");
return { default: StocksPage };
});
const AccountPage = lazy(async () => {
const { AccountPage } = await import("@/pages/account");
return { default: AccountPage };
});
const AccountEventsPage = lazy(async () => {
const { AccountEventsPage } = await import("@/pages/account-events");
return { default: AccountEventsPage };
});
const AccountOperationsPage = lazy(async () => {
const { AccountOperationsPage } = await import("@/pages/account-operations");
return { default: AccountOperationsPage };
});
const AccountIncomePage = lazy(async () => {
const { AccountIncomePage } = await import("@/pages/account-income");
return { default: AccountIncomePage };
});
const AccountsPage = lazy(async () => {
const { AccountsPage } = await import("@/pages/accounts");
return { default: AccountsPage };
});
const LoginPage = lazy(async () => {
const { LoginPage } = await import("@/pages/login");
return { default: LoginPage };
});
const NotFoundPage = lazy(async () => {
const { NotFoundPage } = await import("@/pages/not-found");
return { default: NotFoundPage };
});
const RegisterPage = lazy(async () => {
const { RegisterPage } = await import("@/pages/register");
return { default: RegisterPage };
});
const SettingsPage = lazy(async () => {
const { SettingsPage } = await import("@/pages/settings");
return { default: SettingsPage };
});
const ProtectedLayout = lazy(async () => {
const { ProtectedLayout } = await import("../ProtectedLayout");
return { default: ProtectedLayout };
});
const CardPage = lazyPage(async () => import("@/pages/card"), "CardPage");
const CardsPage = lazyPage(async () => import("@/pages/cards"), "CardsPage");
const BondPage = lazyPage(async () => import("@/pages/bond"), "BondPage");
const BondsPage = lazyPage(async () => import("@/pages/bonds"), "BondsPage");
const StockPage = lazyPage(async () => import("@/pages/stock"), "StockPage");
const StocksPage = lazyPage(async () => import("@/pages/stocks"), "StocksPage");
const AccountPage = lazyPage(async () => import("@/pages/account"), "AccountPage");
const AccountEventsPage = lazyPage(async () => import("@/pages/account-events"), "AccountEventsPage");
const AccountOperationsPage = lazyPage(async () => import("@/pages/account-operations"), "AccountOperationsPage");
const AccountIncomePage = lazyPage(async () => import("@/pages/account-income"), "AccountIncomePage");
const AccountsPage = lazyPage(async () => import("@/pages/accounts"), "AccountsPage");
const LoginPage = lazyPage(async () => import("@/pages/login"), "LoginPage");
const NotFoundPage = lazyPage(async () => import("@/pages/not-found"), "NotFoundPage");
const RegisterPage = lazyPage(async () => import("@/pages/register"), "RegisterPage");
const SettingsPage = lazyPage(async () => import("@/pages/settings"), "SettingsPage");
const ProtectedLayout = lazyPage(async () => import("../ProtectedLayout"), "ProtectedLayout");
const AppRoutes: FC = () => (
<Routes>
@@ -1,6 +1,5 @@
import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next";
import { useCurrentRoute } from "@/app/model";
@@ -8,12 +7,12 @@ import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useStock } from "@/entities/stock";
import { useAppDocumentTitle } from "@/shared/ui";
type DocumentTitleProps = { title: string };
const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => {
const { t } = useTranslation();
useDocumentTitle(`${props.title} — ${t("appName")}`);
useAppDocumentTitle(props.title);
};
type AccountDocumentTitleProps = {
@@ -1,12 +1,12 @@
import type { FC, PropsWithChildren } from "react";
import { Button, Stack, Text, Title } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { Component } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router";
import { useAuth } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
type BoundaryProps = PropsWithChildren<{
authenticated: boolean;
@@ -37,7 +37,7 @@ class Boundary extends Component<BoundaryProps, State> {
const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
const { authenticated } = props;
const { t } = useTranslation();
useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
useAppDocumentTitle(t("routeError.title"));
const to = authenticated ? "/accounts" : "/login";
return (
@@ -55,9 +55,9 @@ describe("AppBreadcrumbs", () => {
});
it.each([
["operations", "Операции"],
["OPERATIONS", "Операции"],
["events", "Будущие события"],
["operations", "История операций"],
["OPERATIONS", "История операций"],
["events", "Предстоящие события"],
["income", "Пассивный доход"],
])("links to the account hierarchy from %s", (section, title) => {
renderBreadcrumbs(`/accounts/account-1/${section}`, [
+17 -7
View File
@@ -7,10 +7,8 @@ import { useCurrentRoute } from "@/app/model";
import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
import { BondBreadcrumbs } from "./BondBreadcrumbs";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
import { CardBreadcrumbs } from "./CardBreadcrumbs";
import { StockBreadcrumbs } from "./StockBreadcrumbs";
import { EntityBreadcrumbs } from "./EntityBreadcrumbs";
const AppBreadcrumbs: FC = () => {
const { t } = useTranslation();
@@ -26,9 +24,16 @@ const AppBreadcrumbs: FC = () => {
stock,
} = useCurrentRoute();
if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
if (stock)
return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
if (bond) {
return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
}
if (stock) {
return (
<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
);
}
if (account && (section || !account.params.section))
return (
<Stack gap={0} mb="md">
@@ -43,8 +48,13 @@ const AppBreadcrumbs: FC = () => {
/>
</Stack>
);
if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
if (card) {
return <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
}
if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
if (accounts)
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBond } from "@/entities/bond";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type BondBreadcrumbsProps = { identifier: string };
const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
const { data } = useBond(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bond.searchTitle"), to: "/bonds" },
{ label: data?.name ?? t("bond.instrument") },
]}
/>
);
};
export { BondBreadcrumbs };
@@ -39,4 +39,4 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
);
};
export { BreadcrumbTrail };
export { BreadcrumbTrail, type Crumb };
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type CardBreadcrumbsProps = { identifier: string };
const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
const { data } = useBankCard(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bank.title"), to: "/cards" },
{ label: data?.name ?? t("bank.card") },
]}
/>
);
};
export { CardBreadcrumbs };
@@ -0,0 +1,48 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useStock } from "@/entities/stock";
import type { Crumb } from "./BreadcrumbTrail";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type EntityBreadcrumbsProps = {
identifier: string;
kind:
| "bond"
| "card"
| "stock";
};
const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
const { identifier, kind } = props;
const { t } = useTranslation();
const bond = useBond(kind === "bond" ? identifier : "");
const card = useBankCard(kind === "card" ? identifier : "");
const stock = useStock(kind === "stock" ? identifier : "");
let parent: Crumb;
let name: string;
if (kind === "bond") {
parent = { label: t("bond.searchTitle"), to: "/bonds" };
name = bond.data?.name ?? t("bond.instrument");
}
else if (kind === "stock") {
parent = { label: t("stock.searchTitle"), to: "/stocks" };
name = stock.data?.name ?? t("stock.share");
}
else {
parent = { label: t("bank.title"), to: "/cards" };
name = card.data?.name ?? t("bank.card");
}
return <BreadcrumbTrail items={[parent, { label: name }]} />;
};
export { EntityBreadcrumbs };
@@ -1,25 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useStock } from "@/entities/stock";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type StockBreadcrumbsProps = { identifier: string };
const StockBreadcrumbs: FC<StockBreadcrumbsProps> = (props) => {
const { data } = useStock(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("stock.searchTitle"), to: "/stocks" },
{ label: data?.name ?? t("stock.share") },
]}
/>
);
};
export { StockBreadcrumbs };
+4 -10
View File
@@ -5,6 +5,7 @@ import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isGetUnder,
} from "@/shared/api";
import type {
@@ -26,21 +27,14 @@ async function mutationData<T>(
return data;
}
const bankCardGetPredicate = isGetUnder(["/api/v1/bank-cards"]);
function useBankMutationOptions() {
const queryClient = useQueryClient();
const invalidate = () =>
queryClient.invalidateQueries({
predicate: ({ queryKey }) => {
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& (path === "/api/v1/bank-cards"
|| path.startsWith("/api/v1/bank-cards/"))
);
},
predicate: ({ queryKey }) => bankCardGetPredicate(queryKey),
});
return {
@@ -49,6 +49,10 @@ function entryLabelKey(operation: BrokerageOperation): string {
return `ledger.category.${operation.category}`;
}
function isCouponPayment(operation: BrokerageOperation): boolean {
return isOperationType(operation.type, OperationType.Coupon);
}
function isIncomePayment(operation: BrokerageOperation): boolean {
return [OperationType.Coupon, OperationType.Dividend].some(type =>
isOperationType(operation.type, type),
@@ -131,6 +135,7 @@ function paymentPresentation(
export {
brokerageOperationGroupKey,
entryLabelKey,
isCouponPayment,
isIncomePayment,
isZeroDecimal,
operationLabelKey,
@@ -55,23 +55,27 @@ function renderGroup(
}
describe("OperationGroup", () => {
it("shows the header, exact total and separate card rows per account", () => {
it("shows the received coupon and positive totals in flat account rows", () => {
renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "0.1"),
{ ...operation("1", { id: "broker", name: "Брокерский" }, "0.1"), description: "Выплата купонов СФО ВТБ РКС Эталон 04" },
operation("2", { id: "iis", name: "ИИС" }, "0.2"),
]);
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("Выплата купонов СФО ВТБ РКС Эталон 04")).toBeInTheDocument();
expect(screen.getByText("+0,3 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
name: /Выплата купонов СФО ВТБ РКС Эталон 04, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
}));
expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.getByText("+0,1 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.getByText("+0,2 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.not.toHaveClass("EntryGroup_accountCardRow");
expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument();
});
@@ -83,8 +87,10 @@ describe("OperationGroup", () => {
]);
expect(screen.getByRole("list", {
name: /Купон · BOND, Исполнено .*Итог недоступен/,
name: /Выплата купонов BOND, Исполнено .*Итог недоступен/,
})).toBeInTheDocument();
expect(screen.getByText("Итог недоступен")).toBeInTheDocument();
expect(screen.getByText("—")).not.toHaveClass(/positive/);
});
it.each(["0", "0.000"])(
@@ -114,6 +120,7 @@ describe("OperationGroup", () => {
operation("2", { id: "iis", name: "ИИС" }, "-100"),
]);
expect(screen.getByText("0 ₽")).toBeInTheDocument();
expect(screen.getByText("−100 ₽")).toHaveClass(/negative/);
});
it("renders repeated ids inside one group as separate rows", () => {
@@ -123,7 +130,7 @@ describe("OperationGroup", () => {
]);
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { name: /Купон/ }));
const accounts = within(screen.getByRole("list", { name: /Выплата купонов/ }));
expect(accounts.getAllByText("Брокерский")).toHaveLength(1);
expect(accounts.getAllByText("ИИС")).toHaveLength(1);
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -9,12 +9,13 @@ import {
sumMoney,
totalText,
} from "@/shared/lib";
import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import { AccountCardRow, AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import {
entryLabelKey,
isCouponPayment,
isZeroDecimal,
operationLabelKey,
paymentPresentation,
@@ -37,6 +38,8 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
? entryLabelKey(first)
: operationLabelKey(first.type));
const isCoupon = isCouponPayment(first);
const instrument
= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
@@ -52,9 +55,21 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
: null;
const date = formatSnapshotDay(first.occurredAt);
const title = `${typeLabel} · ${instrument}`;
const description = first.description.trim();
let title = `${typeLabel} · ${instrument}`;
if (isCoupon) {
title = description && description.toLocaleLowerCase() !== "купон"
? description
: t("ledger.couponPayment", { instrument });
}
const totalsText = totalText(totals, true);
const totalTone = isCoupon && totals && !isZeroDecimal(totals.value) && !totals.value.startsWith("-")
? "positive"
: "neutral";
const accessibleName = [
title,
t("payout.executedAt", { date }),
@@ -63,13 +78,14 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
return (
<EntryGroup
flat={isCoupon}
header={(
<EntryCard
imageSrc={instrumentLogoUrl(first.logoName)}
initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
metadata={t("payout.executedAt", { date })}
title={title}
tone="neutral"
tone={totalTone}
value={<EntryGroupTotal isSigned totals={totals} />}
valueLabel={typeLabel}
wrap
@@ -80,14 +96,15 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
{props.entries.map(({ key, operation }) => {
const payment = paymentPresentation(operation);
return (
<AccountCardRow
accountName={operation.account?.name ?? "—"}
key={key}
value={payment.amount}
valueLabel={t(payment.label)}
/>
);
const accountRowProps = {
accountName: operation.account?.name ?? "—",
value: payment.amount,
valueLabel: t(payment.label),
};
return isCoupon
? <AccountRow key={key} {...accountRowProps} tone={payment.tone} />
: <AccountCardRow key={key} {...accountRowProps} />;
})}
</EntryGroup>
);
@@ -4,8 +4,6 @@ import type {
BrokerageAccount,
} from "../api/useBrokerageAccounts";
const VISIBLE_CURRENCY_LIMIT = 2;
type BrokerageAccountCard = {
account: BrokerageAccount;
positionCounts: null | PositionCounts;
@@ -13,18 +11,13 @@ type BrokerageAccountCard = {
summary:
| {
portfolio: NonNullable<BrokerageAccount["portfolioSummary"]>;
remainingCurrencyCount: number;
state: "available";
totals: Money[];
totals: NonNullable<BrokerageAccount["portfolioSummary"]>["totals"];
}
| { state: "empty" }
| { state: "unavailable" };
};
type Money = NonNullable<
BrokerageAccount["portfolioSummary"]
>["totalsByCurrency"][number];
type PositionCounts = { bonds: number; stocks: number; total: number };
function accountTypeKey(type: BrokerageAccount["type"]) {
@@ -57,7 +50,7 @@ function brokerageAccountCards(
total: summary.totalPositionCount,
};
if (summary.totalsByCurrency.length === 0)
if (Number(summary.totals.value) === 0)
return { account, positionCounts, source, summary: { state: "empty" } };
return {
@@ -66,12 +59,8 @@ function brokerageAccountCards(
source,
summary: {
portfolio: summary,
remainingCurrencyCount: Math.max(
summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT,
0,
),
state: "available",
totals: summary.totalsByCurrency.slice(0, VISIBLE_CURRENCY_LIMIT),
totals: summary.totals,
},
};
});
@@ -65,18 +65,32 @@
.summary {
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
align-items: flex-end;
}
.currencySummary {
min-width: 0;
}
.total {
color: var(--wl-color-text);
font-size: var(--mantine-font-size-lg);
line-height: var(--mantine-line-height-lg);
overflow-wrap: anywhere;
}
.return,
.cashValue {
font-variant-numeric: tabular-nums lining-nums;
}
.return {
justify-content: flex-end;
min-width: 0;
overflow-wrap: anywhere;
}
.cashValue {
white-space: nowrap;
}
@@ -138,7 +152,11 @@
text-align: left;
}
.balance > div {
.summary {
align-items: flex-start;
}
.return {
justify-content: flex-start;
}
}
@@ -14,36 +14,29 @@ type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
const rubReturn = {
absolute: "136900",
costBasis: "1103600.50",
currency: "RUB",
partial: false,
percent: "12.40",
};
const portfolioSummary = {
bondPositionCount: 12,
cashBalances: [
{ currency: "RUB", value: "82500.50" },
{ currency: "USD", value: "1500" },
],
cash: { currency: "RUB", value: "82500.50" },
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: [],
},
totalPositionCount: 19,
totalsByCurrency: [{ currency: "RUB", value: "1240500.50" }],
unrealizedReturnByCurrency: [rubReturn],
totals: { currency: "RUB", value: "1240500.50" },
unrealizedReturn: rubReturn,
} satisfies PortfolioSummary;
function account(
@@ -63,20 +56,25 @@ function account(
const negativeSummary: PortfolioSummary = {
...portfolioSummary,
unrealizedReturnByCurrency: [{
unrealizedReturn: {
...rubReturn,
absolute: "-4200",
percent: "-3.05",
}],
},
};
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
cash: { currency: "RUB", value: "0" },
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
totals: { currency: "RUB", value: "0" },
unrealizedReturn: rubReturn,
};
const meta = {
@@ -94,7 +92,7 @@ const meta = {
docs: {
description: {
component:
"Карточки счетов: стоимость и доходность по валютам, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
"Карточки счетов: стоимость и доходность, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
},
},
},
@@ -108,40 +106,6 @@ type Story = StoryObj<typeof meta>;
export const Normal: Story = {};
export const MultiCurrency: Story = {
args: {
accounts: brokerageAccountCards([account("multi", "Мультивалютный", {
...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 Negative: Story = {
args: {
accounts: brokerageAccountCards([
@@ -154,10 +118,10 @@ export const Partial: Story = {
args: {
accounts: brokerageAccountCards([account("partial", "Частичные данные", {
...portfolioSummary,
unrealizedReturnByCurrency: [{
unrealizedReturn: {
...rubReturn,
partial: true,
}],
},
})]),
},
};
@@ -14,55 +14,28 @@ type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
const portfolioSummary = {
bondPositionCount: 12,
cashBalances: [
{ currency: "RUB", value: "82500.5" },
{ currency: "USD", value: "20" },
],
cash: { currency: "RUB", value: "82500.5" },
fundPositionCount: 0,
stockPositionCount: 5,
structure: {
currencies: [{
categories: [
{ sharePercent: "50.000000", type: "STOCK", value: "100" },
{ sharePercent: "30.000000", type: "BOND", value: "60" },
{ sharePercent: "0.000000", type: "OTHER", value: "0" },
{ sharePercent: "20.000000", type: "CASH", value: "40" },
],
currency: "RUB",
hasNegativeValues: false,
totalValue: "200",
}],
unvaluedCategories: [],
},
totalPositionCount: 17,
totalsByCurrency: [
{ currency: "RUB", value: "123456789012345678901.995" },
{ currency: "USD", value: "20" },
{ currency: "EUR", value: "5" },
],
unrealizedReturnByCurrency: [
{
totals: { currency: "RUB", value: "123456789012345678901.995" },
unrealizedReturn: {
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;
type BrokerageAccountCardInput = Parameters<typeof BrokerageAccountList>[0][
@@ -97,16 +70,19 @@ describe("BrokerageAccountList", () => {
it("renders returns, cash and structure with precise totals", () => {
const nullReturnSummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "EUR", value: "5" }],
unrealizedReturnByCurrency: [{
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
totals: { currency: "RUB", value: "5" },
unrealizedReturn: {
absolute: "0",
costBasis: "5",
currency: "EUR",
partial: false,
percent: null,
}],
},
};
renderList(brokerageAccountCards([
@@ -118,38 +94,38 @@ describe("BrokerageAccountList", () => {
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("+12,4 %")).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 %",
name: "Структура: Акции 50,0 %; Облигации 30,0 %; "
+ "Другие активы 0,0 %; Свободные деньги 20,0 %",
})).toBeInTheDocument();
const stockLegend = within(link).getByText(/Акции 50 %/);
expect(stockLegend).toHaveTextContent("● Акции 50 %");
const stockLegend = within(link).getByText(/Акции 50,0 %/);
expect(stockLegend).toHaveTextContent("● Акции 50,0 %");
// 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(within(link).queryByText(/Другие активы 0,0 %/))
.not.toBeInTheDocument();
expect(link).toHaveTextContent("По данным брокера");
expect(link).toHaveTextContent("Структура RUB: Акции 100");
expect(link).toHaveTextContent("Структура: Акции 100");
});
it("preserves empty, unavailable and stale states", () => {
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
totals: { currency: "RUB", value: "0" },
};
const cards = brokerageAccountCards([
@@ -15,6 +15,11 @@ import classes from "./BrokerageAccountList.module.css";
const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
const percentFormatter = new Intl.NumberFormat("ru-RU", {
maximumFractionDigits: 1,
minimumFractionDigits: 1,
});
type AvailableSummary = Extract<
BrokerageAccountCard["summary"],
{ state: "available" }
@@ -29,28 +34,23 @@ type BrokerageAccountSummaryProps = {
type PortfolioSummary = AvailableSummary["portfolio"];
type ReturnValueProps = {
item: PortfolioSummary["unrealizedReturnByCurrency"][number];
item: PortfolioSummary["unrealizedReturn"];
};
type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
type StructureCurrency = PortfolioSummary["structure"];
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;
const rounded = percentFormatter.format(Math.abs(Number(value)));
let sign = "";
if (rounded !== "0,0") sign = value.startsWith("-") ? "−" : "+";
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
return `${sign}${rounded}\u{A0}%`;
}
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(".", ",");
return percentFormatter.format(Number(value));
}
function isZero(value: string) {
@@ -65,27 +65,23 @@ 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);
const displayedPercent = formatPercent(item.percent);
const isNegative = displayedPercent.startsWith("−");
const isPositive = displayedPercent.startsWith("+");
let toneClass = classes.neutral;
if (isNegative) toneClass = classes.negative;
else if (isPositive) toneClass = classes.positive;
return (
<Group className={classes.return} gap="xs" wrap="nowrap">
<Group className={classes.return} gap="xs" wrap="wrap">
<Text className={toneClass} fw={700} size="sm">
{formatPercent(item.percent)}
{displayedPercent}
</Text>
<Text className={toneClass} size="sm">
{formatMoney(
{ currency: item.currency, value: item.absolute },
{ currency: "RUB", value: item.absolute },
{ withSign: true },
)}
</Text>
@@ -123,7 +119,6 @@ const StructureBar: FC<StructureBarProps> = (props) => {
}).join("; ");
const label = t("accounts.structure.label", {
currency: props.item.currency,
value: description,
});
@@ -200,51 +195,25 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
return (
<Stack className={classes.balance} gap="xs">
<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
<Stack className={classes.summary} gap={4}>
{summary.totals.map(total => (
<Text className={classes.total} fw={700} key={total.currency}>
{formatMoney(total, { withRoundedCents: true })}
<Stack className={classes.summary} gap="sm">
<Stack className={classes.currencySummary} gap={2}>
<Text className={classes.total} fw={700}>
{formatMoney(summary.totals, { withRoundedCents: true })}
</Text>
))}
{!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount,
})}
</Text>
)}
<ReturnValue item={summary.portfolio.unrealizedReturn} />
</Stack>
</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;
})}
</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 className={classes.cashValue} size="sm">
{formatMoney(summary.portfolio.cash, { withRoundedCents: true })}
</Text>
))}
</Stack>
</Group>
)}
</Stack>
);
};
@@ -291,39 +260,31 @@ const AccountDescription: FC<AccountDescriptionProps> = (props) => {
const { account, summary } = props.account;
if (summary.state !== "available") return null;
const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
t("accounts.description.return", {
const returns = [t("accounts.description.return", {
absolute: formatMoney(
{ currency: item.currency, value: item.absolute },
{ currency: "RUB", value: summary.portfolio.unrealizedReturn.absolute },
{ withSign: true },
),
currency: item.currency,
percent: formatPercent(item.percent),
}),
);
percent: formatPercent(summary.portfolio.unrealizedReturn.percent),
})];
const structures = summary.portfolio.structure.currencies.map((item) => {
const categories = item.categories.map(category =>
const structures = (() => {
const categories = summary.portfolio.structure.categories.map(category =>
t("accounts.description.structureCategory", {
category: t(portfolioCategoryPresentation[category.type].label),
value: formatMoney(
{ currency: item.currency, value: category.value },
{ currency: "RUB", value: category.value },
{ withRoundedCents: true },
),
}),
).join(", ");
return t("accounts.description.structure", {
currency: item.currency,
value: categories,
});
});
return t("accounts.description.structure", { value: categories });
})();
const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
item => item.partial,
);
const hasPartialReturn = summary.portfolio.unrealizedReturn.partial;
const details = [...returns, ...structures].join(". ");
const details = [returns, structures].join(". ");
return (
<VisuallyHidden>
@@ -332,8 +293,7 @@ const AccountDescription: FC<AccountDescriptionProps> = (props) => {
type: t(accountTypeKey(account.type)),
})}
{t("accounts.description.currentValue", {
value: summary.portfolio.totalsByCurrency
.map(total => formatMoney(total)).join(", "),
value: formatMoney(summary.portfolio.totals),
})}
{details ? `${details}. ` : ""}
{hasPartialReturn ? t("accounts.brokerDescription") : ""}
@@ -373,9 +333,7 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
{summary.state === "available" && (
<Stack className={classes.structure} gap={4}>
{summary.portfolio.structure.currencies.map(item => (
<StructureBar item={item} key={item.currency} />
))}
<StructureBar item={summary.portfolio.structure} />
</Stack>
)}
@@ -97,13 +97,13 @@ describe("BrokerageEventGroup", () => {
expect(screen.getByText("0,00 ₽")).toBeInTheDocument();
});
it("shows separate forecast totals per currency without conversion", () => {
it("sums forecast totals exactly", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, "10", "USD"),
event({ id: "broker", name: "Брокерский" }, "10"),
event({ id: "iis", name: "ИИС" }, "200"),
]);
expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
expect(screen.getByRole("list", { name: /210 ₽/ }))
.toBeInTheDocument();
});
@@ -0,0 +1,20 @@
import { apiQueryClient, type paths, useAuthenticatedQuery } from "@/shared/api";
type Performance = NonNullable<
paths["/api/v1/brokerage-accounts/{accountId}/performance"]["get"]["responses"][200]["content"]["application/json"]["data"]
>;
function usePerformance(accountId: string) {
return useAuthenticatedQuery({
meta: { accessGroup: "brokerage" },
...apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts/{accountId}/performance",
{ params: { path: { accountId } } },
),
enabled: Boolean(accountId),
staleTime: 30_000,
});
}
export { type Performance, usePerformance };
+1
View File
@@ -0,0 +1 @@
export { type Performance, usePerformance } from "./api/usePerformance";
+1 -1
View File
@@ -2,7 +2,7 @@ import type { Portfolio } from "../api/usePortfolio";
const PERCENT_SCALE = 100;
type Money = Portfolio["totalsByCurrency"][number];
type Money = Portfolio["totals"];
function formatShare(
numerator: Money | null,
@@ -1,4 +1,4 @@
import { describe, expect, it } from "vitest";
import { describe, expect, it, vi } from "vitest";
import { resource } from "@/test/resource";
@@ -76,4 +76,29 @@ describe("instrument source and transport presentation", () => {
loading: false,
});
});
it("carries the retry of an exhausted read and only of that read", () => {
const refetch = vi.fn(() => Promise.resolve());
const state = section({
data: { rows: [] },
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true,
isFetching: false,
refetch,
});
expect(state.readRetry?.exhausted).toBe(true);
state.readRetry?.onRetry();
expect(refetch).toHaveBeenCalledOnce();
});
it("offers no retry for access loss or a healthy read", () => {
const base = { data: undefined, isFetching: false, refetch: vi.fn() };
expect(section({ ...base, error: { code: "NOT_FOUND" }, isError: true })
.readRetry?.exhausted).toBe(false);
expect(section({ ...base, error: null, isError: false })
.readRetry?.exhausted).toBe(false);
});
});
@@ -1,10 +1,11 @@
import type { InvestmentResourceMeta } from "@/shared/api";
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
type SectionState = {
error: boolean;
hasData: boolean;
loading: boolean;
partial?: boolean;
readRetry?: ReturnType<typeof readRetry>;
};
function hasSectionData(data: unknown) {
@@ -13,8 +14,11 @@ function hasSectionData(data: unknown) {
function section(query: {
data: unknown;
error?: unknown;
isError: boolean;
isFetching?: boolean;
meta?: InvestmentResourceMeta;
refetch?: () => Promise<unknown>;
}): SectionState {
const isError = query.isError || query.meta?.lastAttempt.state === "failed";
const hasData = hasSectionData(query.data);
@@ -24,6 +28,17 @@ function section(query: {
hasData,
loading: !hasData && !isError,
partial: query.meta?.completeness === "incomplete",
// Each section retries only its own GET, so sections recover independently.
readRetry: query.refetch
? readRetry([
{
error: query.error,
isError: query.isError,
isFetching: query.isFetching ?? false,
refetch: query.refetch,
},
])
: undefined,
};
}
@@ -19,7 +19,6 @@ function useInstrumentChartVm(props: InstrumentChartProps) {
const average = vm.position?.averagePurchasePrice;
const averageLine = average && props.priceUnit !== "percent"
&& average.currency === vm.candles?.currency
? Number(average.value)
: null;
@@ -47,7 +46,7 @@ function useInstrumentChartVm(props: InstrumentChartProps) {
currency:
props.priceUnit === "percent"
? t("bond.percentOfNominal")
: (vm.candles?.currency ?? ""),
: "₽",
},
);
@@ -12,6 +12,8 @@ import {
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetry } from "@/shared/ui";
import type { SectionState } from "../model/section";
import classes from "./InstrumentDetails.module.css";
@@ -81,6 +83,8 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
</Alert>
)}
{!!props.state.readRetry && <ReadRetry {...props.state.readRetry} />}
{sectionContent}
</Paper>
);
@@ -2,19 +2,18 @@ import type { QueryClient } from "@tanstack/react-query";
import {
apiQueryClient,
isGetUnder,
type paths,
} from "@/shared/api";
type TbankConnectionStatus
= paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
function isInvestmentPath(path: string) {
return [
const investmentGetPredicate = isGetUnder([
"/api/v1/brokerage-accounts",
"/api/v1/stocks",
"/api/v1/bonds",
].some(root => path === root || path.startsWith(`${root}/`));
}
]);
const tbankConnectionQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
@@ -27,15 +26,7 @@ function commitTbankConnectionBoundary(
) {
queryClient.setQueryData(tbankConnectionQueryKey, status);
void queryClient.resetQueries({
predicate: ({ queryKey }) => {
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& isInvestmentPath(path)
);
},
predicate: ({ queryKey }) => investmentGetPredicate(queryKey),
});
}
@@ -10,6 +10,9 @@ import { server } from "@/test/server";
import { useScreenSync } from "../index";
const TRANSPORT_ATTEMPTS = 3;
const TRANSPORT_RECOVERY_MS = 3000;
function auth() {
configureAuthClient({
accessToken: () => "synthetic",
@@ -28,11 +31,13 @@ describe("read-only screen synchronization", () => {
gets += 1;
syncModes.push(new URL(request.url).searchParams.get("sync"));
return gets === 1
// The transport retries a transient read twice (1 s, 2 s) on its own.
return gets <= TRANSPORT_ATTEMPTS
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([]));
}),
);
vi.useFakeTimers();
const { result } = renderHook(
() => {
@@ -46,12 +51,26 @@ describe("read-only screen synchronization", () => {
{ wrapper: createQueryWrapper().wrapper },
);
await waitFor(() => expect(gets).toBe(1));
await act(async () => result.current.sync.retry());
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
try {
// Exhaust the transport back-off so the query settles in error.
await vi.waitFor(async () => {
await act(() => vi.advanceTimersByTimeAsync(TRANSPORT_RECOVERY_MS));
expect(result.current.sync.transportError).toBe(true);
});
expect(gets).toBe(TRANSPORT_ATTEMPTS);
expect(gets).toBe(2);
expect(syncModes).toEqual([null, null]);
await act(async () => result.current.sync.retry());
await vi.waitFor(async () => {
await act(() => vi.advanceTimersByTimeAsync(0));
expect(result.current.accounts.data).toEqual([]);
});
}
finally {
vi.useRealTimers();
}
expect(gets).toBe(TRANSPORT_ATTEMPTS + 1);
expect(syncModes).toEqual(Array.from({ length: gets }, () => null));
});
it("refreshes the currently open resources together", async () => {
@@ -23,7 +23,7 @@ const meta = {
},
render: arguments_ => (
<Stack>
<Text>125 000,50 ₽ · 320 USD</Text>
<Text>125 000,50 ₽</Text>
<InvestmentRefreshState {...arguments_} />
</Stack>
@@ -4,16 +4,16 @@ import {
TbankConnectionError,
TbankConnectionLoading,
} from "./TbankConnectionSection.view";
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
import { useTbankConnectionSectionVm } from "./TbankConnectionSection.vm";
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel();
if (viewModel.state === "loading") return <TbankConnectionLoading />;
const vm = useTbankConnectionSectionVm();
if (vm.state === "loading") return <TbankConnectionLoading />;
return viewModel.state === "error"
? <TbankConnectionError retry={viewModel.retry} />
: <TbankConnectionSectionLoaded {...viewModel} />;
return vm.state === "error"
? <TbankConnectionError retry={vm.retry} />
: <TbankConnectionSectionLoaded {...vm} />;
};
export { TbankConnectionSection };
@@ -2,7 +2,7 @@ import { useAuthenticatedQuery } from "@/shared/api";
import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
function useTbankConnectionViewModel() {
function useTbankConnectionSectionVm() {
const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(),
});
@@ -22,4 +22,4 @@ function useTbankConnectionViewModel() {
};
}
export { useTbankConnectionViewModel };
export { useTbankConnectionSectionVm };
@@ -26,7 +26,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
const Navigation: FC = () => {
const location = useLocation();
@@ -100,7 +100,7 @@ describe("Upcoming event date filters", () => {
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageViewModel(), {
const { result } = renderHook(() => useAccountEventsPageVm(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2099-02-01"]}>
@@ -146,7 +146,7 @@ describe("Upcoming event date filters", () => {
const queryClient = createTestQueryClient();
const { result } = renderHook(
() => useAccountEventsPageViewModel(),
() => useAccountEventsPageVm(),
{
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
@@ -176,7 +176,11 @@ describe("Upcoming event date filters", () => {
({ request }) => {
searches.push(new URL(request.url).search);
return HttpResponse.json(resource({ events: [] }));
return HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}));
},
),
);
@@ -223,7 +227,11 @@ describe("Upcoming event date filters", () => {
"*/api/v1/brokerage-accounts/:accountId/events",
({ request }) =>
new URL(request.url).searchParams.get("from") === defaultFrom
? HttpResponse.json(resource({ events: [] }))
? HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}))
: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
),
);
@@ -255,7 +263,8 @@ describe("Upcoming event date filters", () => {
accountId,
calculatedAt: "2099-01-01T00:00:00Z",
events: [],
incomeTotalsByCurrency: [],
incomeTotal: { currency: "RUB", value: "0" },
window: { from: "2099-01-01", to: "2099-01-31" },
}),
);
},
@@ -264,6 +273,7 @@ describe("Upcoming event date filters", () => {
renderEvents(accountId, ["?from=2026-02-01&to=2026-02-28"]);
const from = await screen.findByLabelText("Период");
expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
expect(screen.getByText(/Прогноз от .* на 01\.01\.2099 – 31\.01\.2099/)).toBeVisible();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
@@ -320,7 +330,7 @@ describe("Upcoming event date filters", () => {
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(
screen.getByText("За выбранный период событий не найдено"),
screen.getByText("На выбранный период предстоящих событий не найдено"),
).toBeVisible();
},
);
@@ -343,7 +353,7 @@ it("retains the previous complete forecast when its source refresh fails", async
];
const snapshot = resource(
{ events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] },
{ events, incomeTotal: { currency: "RUB", value: "123.45" } },
{
lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
@@ -361,7 +371,7 @@ it("retains the previous complete forecast when its source refresh fails", async
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageViewModel(), {
const { result } = renderHook(() => useAccountEventsPageVm(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["/accounts/all/events"]}>
@@ -0,0 +1,167 @@
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes } from "react-router";
import { describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const snapshot = resource({
accountId: "account-1",
calculatedAt: "2026-08-14T00:00:00Z",
events: [
{
date: "2026-10-01",
dateKind: "event",
displayName: "Synthetic coupon",
figi: null,
instrumentUid: null,
isin: null,
logoName: null,
projectedAmount: { currency: "RUB", value: "123.45" },
ticker: "SYN",
type: "coupon",
},
],
incomeTotal: { currency: "RUB", value: "123.45" },
window: { from: "2026-08-14", to: "2026-09-13" },
});
function renderEvents() {
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
const queryClient = createTestQueryClient();
render(
<QueryClientProvider client={queryClient}>
<MantineProvider env="test">
<MemoryRouter initialEntries={["/accounts/account-1/events"]}>
<Routes>
<Route
element={<AccountEventsPage />}
path="/accounts/:accountId/events"
/>
</Routes>
</MemoryRouter>
</MantineProvider>
</QueryClientProvider>,
);
return { queryClient };
}
describe("AccountEventsPage read retry", () => {
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
renderEvents();
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached events, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
let imports = 0;
server.use(
http.post("*/api/v1/tbank-sync", () => {
imports += 1;
return HttpResponse.json({}, { status: 202 });
}),
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
const { queryClient } = renderEvents();
await screen.findByText("Купон · Synthetic coupon");
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/events"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(imports).toBe(0);
},
);
it("does not offer a plain retry when the account is gone", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 })),
);
renderEvents();
await waitFor(() =>
expect(screen.queryByRole("heading", { name: "Загрузка" }))
.not.toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
@@ -47,6 +47,7 @@ describe("AccountEventsPage", () => {
accountId: "account",
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -136,6 +137,7 @@ describe("AccountEventsPage", () => {
type: "offer",
},
],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -169,15 +171,18 @@ describe("AccountEventsPage", () => {
expect(screen.getAllByText("O")).toHaveLength(2);
});
it("renders empty and quiet error states", async () => {
it("renders empty and error states with retry", async () => {
const { rerender } = renderPage();
expect(
screen.getByText("За выбранный период событий не найдено"),
screen.getByText("На выбранный период предстоящих событий не найдено"),
).toBeInTheDocument();
query.mockReturnValue({
data: undefined,
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true,
isFetching: false,
isLoading: false,
refetch: vi.fn(),
} as never);
rerender(
<MantineProvider>
@@ -187,7 +192,7 @@ describe("AccountEventsPage", () => {
</MantineProvider>,
);
expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Повторить" })).toBeVisible();
});
it("shows a structural busy state before events are available", () => {
@@ -234,7 +239,7 @@ describe("AccountEventsPage", () => {
"true",
);
expect(
screen.queryByText("За выбранный период событий не найдено"),
screen.queryByText("На выбранный период предстоящих событий не найдено"),
).not.toBeInTheDocument();
});
@@ -273,6 +278,7 @@ describe("AccountEventsPage", () => {
accountId: "all",
calculatedAt: "2026-08-14T00:00:00Z",
events: [...events],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -1,17 +1,17 @@
import type { FC } from "react";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
import { AccountEventsPageError } from "./components/AccountEventsPageError.view";
import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view";
import { AccountEventsPageLoading } from "./components/AccountEventsPageLoading.view";
const AccountEventsPage: FC = () => {
const viewModel = useAccountEventsPageViewModel();
if (viewModel.state === "loading") return <AccountEventsPageLoading />;
const vm = useAccountEventsPageVm();
if (vm.state === "loading") return <AccountEventsPageLoading />;
return viewModel.state === "error"
? <AccountEventsPageError {...viewModel} />
: <AccountEventsPageLoaded {...viewModel} />;
return vm.state === "error"
? <AccountEventsPageError {...vm} />
: <AccountEventsPageLoaded {...vm} />;
};
export { AccountEventsPage };
@@ -1,13 +1,12 @@
import { useState } from "react";
import { useParams } from "react-router";
import type { InvestmentResourceMeta } from "@/shared/api";
import {
type BrokerageEvent,
useBrokerageEvents,
} from "@/entities/brokerage-event";
import { useScreenSync } from "@/features/tbank-connection";
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import {
defaultPeriod,
isValidPeriod,
@@ -19,6 +18,7 @@ import {
type AccountEventsPageViewModel
= | {
allAccounts: boolean;
calculatedAt: string;
canApply: boolean;
draftPeriod: [null | string, null | string];
events: BrokerageEvent[];
@@ -28,14 +28,20 @@ type AccountEventsPageViewModel
onPeriodPopoverOpen: () => void;
onReset: () => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
window: { from: string; to: string };
}
| {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { onReset: () => void; state: "error" }
| { state: "loading" };
function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
function useAccountEventsPageVm(): AccountEventsPageViewModel {
const { accountId = "" } = useParams();
const {
@@ -83,6 +89,8 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
isFetching: events.isFetching,
});
const retry = readRetry([events]);
if (availability === "loading" && events.isLoading)
return { state: "loading" };
@@ -94,15 +102,17 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
return {
onReset,
readRetry: retry,
state: "error",
};
if (!events.data)
return availability === "unavailable"
? { onReset, state: "error" }
? { onReset, readRetry: retry, state: "error" }
: { state: "loading" };
return {
allAccounts: accountId === "all",
calculatedAt: events.data.calculatedAt,
canApply:
(draftFrom !== appliedFrom || draftTo !== appliedTo)
&& isValidPeriod(draftFrom, draftTo),
@@ -122,10 +132,12 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
onReset,
partial: events.meta?.completeness === "incomplete",
readRetry: retry,
source: events.meta,
state: "loaded",
totalVisible: events.meta?.completeness === "complete",
window: events.data.window,
};
}
export { type AccountEventsPageViewModel, useAccountEventsPageViewModel };
export { type AccountEventsPageViewModel, useAccountEventsPageVm };
@@ -4,7 +4,12 @@ import { Button, Group } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
type AccountEventsPageErrorProps = { onReset: () => void };
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountEventsPageErrorProps = {
onReset: () => void;
readRetry: ReadRetryProps;
};
const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
const { t } = useTranslation();
@@ -13,6 +18,13 @@ const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
<StateView
action={(
<Group>
{props.readRetry.exhausted && (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
@@ -17,8 +17,8 @@ import {
brokerageEventGroupKey,
brokerageEventKey,
} from "@/entities/brokerage-event";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -83,10 +83,20 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
<Text c="dimmed">{t("events.hint")}</Text>
<Text c="dimmed" size="sm">
{t("events.forecastWindow", {
date: formatSnapshotTime(props.calculatedAt),
from: formatDate(props.window.from),
to: formatDate(props.window.to),
})}
</Text>
<Group align="end">
<DatePickerInput
allowSingleDateInRange
@@ -26,6 +26,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
import type { IncomeAnalytics } from "@/entities/income";
import { configureAuthClient } from "@/shared/api";
import { formatSnapshotTime } from "@/shared/lib";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
@@ -33,10 +34,14 @@ import { server } from "@/test/server";
import { toIncomeDisplayModel } from "../../model/display";
import { AccountIncomePage } from "./AccountIncomePage";
import {
useAccountIncomePageViewModel,
useAccountIncomePageVm,
} from "./AccountIncomePage.vm";
import { IncomePayments } from "./components/IncomePayments.view";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const analytics
= {
accountId: "account-1",
@@ -44,7 +49,7 @@ const analytics
buckets: [
{
period: { from: "2026-08-01", to: "2026-08-01" },
totalsByCurrency: [summary("RUB", "10", "2")],
total: summary("10", "2"),
},
],
calculatedAt: "2026-08-27T00:00:00Z",
@@ -72,7 +77,7 @@ const analytics
},
],
period: { from: "2026-08-01", to: "2026-08-27" },
totalsByCurrency: [summary("RUB", "10", "2")],
total: summary("10", "2"),
} satisfies IncomeAnalytics & { instruments: [unknown] };
function entry(): IncomeAnalytics["entries"][number] {
@@ -140,12 +145,11 @@ function renderPage(
return { ...view, queryClient };
}
function summary(currency: string, coupon: string, dividend: string) {
function summary(coupon: string, dividend: string) {
return {
coupon: money(currency, coupon),
currency,
dividend: money(currency, dividend),
total: money(currency, String(Number(coupon) + Number(dividend))),
coupon: money("RUB", coupon),
dividend: money("RUB", dividend),
total: money("RUB", String(Number(coupon) + Number(dividend))),
};
}
@@ -166,7 +170,7 @@ describe("AccountIncomePage", () => {
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountIncomePageViewModel(), {
const { result } = renderHook(() => useAccountIncomePageVm(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2024-02-29&to=2024-03-01"]}>
@@ -303,7 +307,7 @@ describe("AccountIncomePage", () => {
buckets: [],
entries: [],
instruments: [],
totalsByCurrency: [],
total: summary("0", "0"),
}),
),
),
@@ -403,21 +407,124 @@ describe("AccountIncomePage", () => {
expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
});
it("shows a quiet realized error", async () => {
it.each([
["full", analytics],
["empty", { ...analytics, buckets: [], entries: [], instruments: [], total: summary("0", "0") }],
])("shows the server source time and last attempt for a %s result", async (_name, data) => {
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
resource(data, {
freshness: "stale",
lastAttempt: {
finishedAt: "2026-08-27T01:00:00Z",
problems: [],
startedAt: "2026-08-27T00:59:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-26T12:00:00Z",
}),
),
),
);
renderPage();
expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
formatSnapshotTime("2026-08-26T12:00:00Z"),
);
expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
expect(screen.getByText("Данные требуют обновления")).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => new HttpResponse(null, { status: 503 }),
() => {
requests += 1;
return isFailing
? new HttpResponse(null, { status: 503 })
: HttpResponse.json(resource(analytics));
},
),
);
renderPage();
expect(
await screen.findByText("Не удалось рассчитать пассивный доход", undefined, {
timeout: 4000,
}),
await screen.findByText(
"Не удалось рассчитать пассивный доход",
undefined,
{ timeout: RETRIES_EXHAUSTED_MS },
),
).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
const retry = screen.getByRole("button", { name: "Повторить" });
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(
await screen.findByRole("region", { name: "Выплаты" }),
).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached income, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => {
requests += 1;
return isFailing
? HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
)
: HttpResponse.json(resource(analytics));
},
),
);
const { queryClient } = renderPage();
await screen.findByRole("region", { name: "Выплаты" });
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/income-analytics"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
});
const LocationProbe: FC = () => {
@@ -629,11 +736,11 @@ describe("income period and snapshot boundary", () => {
const instruments = [
{
...analytics.instruments[0],
coupon: money("USD", "10"),
dividend: money("USD", "0"),
key: "usd",
coupon: money("RUB", "10"),
dividend: money("RUB", "0"),
key: "rub-positive",
receiptCount: 1,
total: money("USD", "10"),
total: money("RUB", "10"),
},
{
...analytics.instruments[0],
@@ -662,7 +769,7 @@ describe("income period and snapshot boundary", () => {
payment: instrument.total,
})),
instruments,
totalsByCurrency: [summary("RUB", "-5", "0"), summary("USD", "10", "0")],
total: summary("-5", "0"),
});
render(
@@ -674,10 +781,9 @@ describe("income period and snapshot boundary", () => {
screen.getByRole("heading", { name: "Выплаты" }),
).toBeInTheDocument();
expect(screen.queryByText("RUB")).not.toBeInTheDocument();
expect(screen.queryByText("USD")).not.toBeInTheDocument();
const cards = screen.getAllByRole("listitem");
expect(cards).toHaveLength(3);
expect(cards[0]).toHaveTextContent("+10 USD");
expect(cards[0]).toHaveTextContent("+10 ₽");
expect(cards[1]).toHaveTextContent("−2 ₽");
expect(cards[2]).toHaveTextContent("−3 ₽");
expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument();
@@ -709,11 +815,11 @@ describe("income period and snapshot boundary", () => {
);
renderPage(undefined, "all");
expect(await screen.findByText("Купон · BOND")).toBeInTheDocument();
expect(await screen.findByText("Выплата купонов BOND")).toBeInTheDocument();
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено/,
name: /Выплата купонов BOND, Исполнено/,
}));
expect(accounts.getByText("Брокерский")).toBeInTheDocument();
@@ -748,7 +854,7 @@ describe("income period and snapshot boundary", () => {
expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND/,
name: /Выплата купонов BOND/,
}));
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -781,7 +887,7 @@ describe("income period and snapshot boundary", () => {
);
const view = renderPage(undefined, "all");
await screen.findByText("Купон · BOND");
await screen.findByText("Выплата купонов BOND");
expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument();
view.unmount();
@@ -1,17 +1,17 @@
import type { FC } from "react";
import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm";
import { useAccountIncomePageVm } from "./AccountIncomePage.vm";
import { AccountIncomePageError } from "./components/AccountIncomePageError.view";
import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view";
import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view";
const AccountIncomePage: FC = () => {
const viewModel = useAccountIncomePageViewModel();
if (viewModel.state === "loading") return <AccountIncomePageLoading />;
const vm = useAccountIncomePageVm();
if (vm.state === "loading") return <AccountIncomePageLoading />;
return viewModel.state === "error"
? <AccountIncomePageError {...viewModel} />
: <AccountIncomePageLoaded {...viewModel} />;
return vm.state === "error"
? <AccountIncomePageError {...vm} />
: <AccountIncomePageLoaded {...vm} />;
};
export { AccountIncomePage };
@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from "react-router";
import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
import { useScreenSync } from "@/features/tbank-connection";
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib";
import {
@@ -30,16 +31,19 @@ type AccountIncomePageViewModel
onReset: () => void;
onSubmit: (values: IncomeForm) => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| {
period: IncomePeriod;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { state: "loading" };
const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
const { accountId = "" } = useParams();
const [searchParameters, setSearchParameters] = useSearchParams();
@@ -84,12 +88,14 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
isFetching: analytics.isFetching,
});
const retry = readRetry([analytics]);
if (availability === "loading" && analytics.isLoading)
return { state: "loading" };
if (!analytics.data)
return availability === "unavailable"
? { period, state: "error" }
? { period, readRetry: retry, state: "error" }
: { state: "loading" };
const display = toIncomeDisplayModel(analytics.data);
@@ -116,6 +122,8 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
onReset,
onSubmit,
partial: analytics.meta?.completeness === "incomplete",
readRetry: retry,
source: analytics.meta,
state: "loaded",
totalVisible: analytics.meta?.completeness === "complete",
};
@@ -138,5 +146,5 @@ function isValidIncomePeriod(period: IncomePeriod): boolean {
export {
type AccountIncomePageViewModel,
useAccountIncomePageViewModel,
useAccountIncomePageVm,
};
@@ -3,15 +3,27 @@ import type { FC } from "react";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
const AccountIncomePageError: FC<ErrorProps> = () => {
const AccountIncomePageError: FC<ErrorProps> = (props) => {
const { t } = useTranslation();
const retry = props.readRetry.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return (
<StateView
action={retry}
error
text={t("income.errorText")}
title={t("income.errorTitle")}
@@ -5,10 +5,11 @@ import {
Stack,
Title,
} from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
import classes from "../AccountIncomePage.module.css";
@@ -23,13 +24,9 @@ const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
const { analytics } = props;
if (props.partial) {
return <Alert role="status">{t("investment.partial")}</Alert>;
}
return analytics.totalsByCurrency.length > 0
? <IncomeSummary totals={analytics.totalsByCurrency} />
: <StateView text={t("income.emptyText")} title={t("income.emptyTitle")} />;
return props.partial
? <Alert role="status">{t("investment.partial")}</Alert>
: <IncomeSummary totals={analytics.total} />;
};
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
@@ -49,6 +46,14 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
/>
</FormProvider>
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
<AccountIncomePageLoadedSummary {...props} />
<Alert color="blue">{t("income.taxBoundary")}</Alert>
@@ -7,7 +7,7 @@ import type { IncomeAnalytics } from "@/entities/income";
import { formatMoney } from "@/shared/lib";
type IncomeSummaryProps = { totals: IncomeAnalytics["totalsByCurrency"] };
type IncomeSummaryProps = { totals: IncomeAnalytics["total"] };
const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
const { t } = useTranslation();
@@ -16,16 +16,14 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
<Stack>
<Title order={2}>{t("income.summaryTitle")}</Title>
{props.totals.map(total => (
<Paper key={total.currency} p="md" radius="md" withBorder>
<Text fw={700}>{formatMoney(total.total)}</Text>
<Paper p="md" radius="md" withBorder>
<Text fw={700}>{formatMoney(props.totals.total)}</Text>
<Text c="dimmed" size="sm">
{t("income.coupon")}: {formatMoney(total.coupon)} ·{" "}
{t("income.dividend")}: {formatMoney(total.dividend)}
{t("income.coupon")}: {formatMoney(props.totals.coupon)} ·{" "}
{t("income.dividend")}: {formatMoney(props.totals.dividend)}
</Text>
</Paper>
))}
</Stack>
);
};
@@ -90,9 +90,13 @@ function configureTestAuth() {
});
}
function renderPage(search = "", accountId = "account-1") {
function renderPage(
search = "",
accountId = "account-1",
queryClient = createTestQueryClient(),
) {
return render(
<QueryClientProvider client={createTestQueryClient()}>
<QueryClientProvider client={queryClient}>
<MantineProvider>
<MemoryRouter
initialEntries={[`/accounts/${accountId}/operations${search}`]}
@@ -109,6 +113,18 @@ function renderPage(search = "", accountId = "account-1") {
);
}
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const loadedOperations = {
accountId: "account-1",
hasNext: false,
items: [operation],
nextCursor: null,
observedAt: "2026-08-14T00:00:00Z",
};
describe("LedgerEntryRow", () => {
it("marks cashless operations without rendering operation details", () => {
render(
@@ -424,7 +440,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "Журнал операций" }),
await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument();
expect(
screen.queryByRole("link", { name: "К счету" }),
@@ -466,7 +482,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "Журнал операций" }),
await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument();
await waitFor(() => expect(searches.length).toBeGreaterThan(0));
const countBefore = searches.length;
@@ -505,7 +521,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "Журнал операций" }),
await screen.findByRole("heading", { name: "История операций" }),
).toBeInTheDocument();
fireEvent.click(screen.getByRole("combobox", { name: "Категории" }));
fireEvent.click(await screen.findByText("Налог"));
@@ -545,21 +561,88 @@ describe("AccountOperationsPage", () => {
).toBeInTheDocument();
});
it("renders an error state", async () => {
it(
"renders an error state with retry that recovers in place",
{ timeout: TEST_MS },
async () => {
configureTestAuth();
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
),
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(loadedOperations));
}),
);
renderPage();
expect(
await screen.findByText("Не удалось загрузить журнал", undefined, {
timeout: 4000,
await screen.findByText("Не удалось загрузить историю операций", undefined, {
timeout: RETRIES_EXHAUSTED_MS,
}),
).toBeInTheDocument();
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(await screen.findByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached operations, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
configureTestAuth();
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(loadedOperations));
}),
);
const queryClient = createTestQueryClient();
renderPage("", "account-1", queryClient);
await screen.findByText("Покупка акций");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: [
"get",
"/api/v1/brokerage-accounts/{accountId}/operations",
],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
configureTestAuth();
server.use(
@@ -704,10 +787,10 @@ describe("all-account operation groups", () => {
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
const accounts = await screen.findByRole("list", {
name: /Купон · BOND, Исполнено/,
name: /Выплата купонов BOND, Исполнено/,
});
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("Выплата купонов BOND")).toBeInTheDocument();
expect(screen.getByText("+200 ₽")).toBeInTheDocument();
expect(within(accounts).getAllByRole("listitem")).toHaveLength(2);
@@ -6,15 +6,15 @@ import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageL
import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
const AccountOperationsPage: FC = () => {
const viewModel = useAccountOperationsPageVm();
const vm = useAccountOperationsPageVm();
if (viewModel.state === "loading") {
if (vm.state === "loading") {
return <AccountOperationsPageLoading />;
}
return viewModel.state === "error"
? <AccountOperationsPageError {...viewModel} />
: <AccountOperationsPageLoaded {...viewModel} />;
return vm.state === "error"
? <AccountOperationsPageError {...vm} />
: <AccountOperationsPageLoaded {...vm} />;
};
export { AccountOperationsPage };
@@ -12,7 +12,12 @@ import {
useBrokerageOperationHistory,
} from "@/entities/broker-operation";
import { useScreenSync } from "@/features/tbank-connection";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
readRetry,
} from "@/shared/api";
import {
defaultPeriod,
isValidPeriod,
@@ -42,11 +47,16 @@ type AccountOperationsPageViewModel
onPrevious: () => void;
onReset: () => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| { onReset: () => void; state: "error" }
| {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { state: "loading" };
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
@@ -107,6 +117,8 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
isFetching: operations.isFetching,
});
const retry = readRetry([operations]);
if (availability === "loading" && operations.isLoading)
return { state: "loading" };
@@ -134,11 +146,11 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
(isInvalidCursor || !operations.data)
&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
)
return { onReset, state: "error" };
return { onReset, readRetry: retry, state: "error" };
if (!operations.data)
return availability === "unavailable"
? { onReset, state: "error" }
? { onReset, readRetry: retry, state: "error" }
: { state: "loading" };
const nextCursor = operations.data.nextCursor;
@@ -182,6 +194,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
onPrevious: history.onPrevious,
onReset,
partial: operations.meta?.completeness === "incomplete",
readRetry: retry,
source: operations.meta,
state: "loaded",
totalVisible: operations.meta?.completeness === "complete",
@@ -1,9 +1,11 @@
import type { FC } from "react";
import { Button } from "@mantine/core";
import { Button, Group } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
type AccountOperationsPageErrorProps = Extract<
@@ -19,9 +21,18 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
return (
<StateView
action={(
<Group gap="sm" justify="center">
{props.readRetry.exhausted && (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
</Group>
)}
text={t("ledger.errorText")}
title={t("ledger.errorTitle")}
@@ -19,7 +19,7 @@ import {
OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
@@ -102,6 +102,8 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
@@ -0,0 +1,173 @@
import { describe, expect, it } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { toConcentration } from "./concentration";
import { portfolio, position } from "./positions.fixtures";
function snapshot(positions: Portfolio["positions"]): Portfolio {
return { ...portfolio, positions };
}
function stock(
name: string,
value: null | string,
currency = "RUB",
overrides: Partial<Portfolio["positions"][number]> = {},
): Portfolio["positions"][number] {
return {
...position,
currentValue: value === null ? null : { currency, value },
displayName: name,
...overrides,
};
}
const labels = {
missingIssuer: "Эмитент не указан",
missingSector: "Сектор не указан",
other: "Прочее",
sector: (code: string) => code,
};
describe("account concentration", () => {
it("uses exact positive values and excludes cash, negatives and nulls", () => {
const model = toConcentration(snapshot([
stock("A", "1"), stock("B", "15"),
stock("C", "0"), stock("D", "-50"), stock("E", null),
]), "stocks", labels);
expect(model.total).toBe("16");
expect(model.items.map(item => item.share)).toEqual(["93,8 %", "6,3 %"]);
expect(model.unaccounted).toBe(2);
const negative = snapshot([stock("A", "-3")]);
expect(toConcentration(negative, "stocks", labels))
.toMatchObject({ empty: true, unaccounted: 1 });
});
it("ranks seven positions with exact other and top-five totals", () => {
const model = toConcentration(snapshot([
stock("A", "400"), stock("B", "250"), stock("C", "150"),
stock("D", "100"), stock("E", "50"), stock("F", "30"),
stock("G", "20"),
]), "stocks", labels);
expect(model.items.map(item => item.amount)).toEqual([
"400", "250", "150", "100", "50",
]);
expect(model.other).toMatchObject({
amount: "50", count: 2, share: "5 %",
});
expect(model.top5Share).toBe("95 %");
expect(model.other?.entries.map(item => item.share)).toEqual([
"3 %", "2 %",
]);
});
it("keeps sixth row, tiny share and stable alphabetical ties", () => {
const model = toConcentration(snapshot([
stock("Сбер", "100"), stock("X5", "100"),
stock("VK", "100"), stock("D", "100"),
stock("E", "100"), stock("F", "100"),
]), "stocks", labels);
expect(model.items).toHaveLength(6);
expect(model.other).toBeNull();
expect(model.items.slice(0, 2).map(item => item.name)).toEqual([
"D", "E",
]);
const tiny = snapshot([
stock("Large", "100000000"), stock("Small", "1"),
]);
expect(toConcentration(tiny, "stocks", labels).items[1]?.share)
.toBe("< 0,1 %");
});
it("groups sectors and issuers by codes, not labels", () => {
const positions = [
stock("A", "300", "RUB", {
issuer: { id: "one", name: "Сбербанк" }, sector: "energy",
}),
stock("B", "200", "RUB", {
issuer: { id: "one", name: "Сбер" }, sector: "energy",
type: "BOND",
}),
stock("C", "100", "RUB", {
issuer: { id: "two", name: "Сбер" }, sector: "financial",
type: "FUND",
}),
stock("D", "50", "RUB", { issuer: null, sector: null }),
];
expect(toConcentration(snapshot(positions), "sectors", labels)
.items.map(item => item.amount)).toEqual(["500", "100", "50"]);
expect(toConcentration(snapshot(positions), "issuers", labels)
.items.map(item => [item.name, item.amount])).toEqual([
["Сбербанк", "500"], ["", "50"],
]);
});
it("orders equal sums by displayed name", () => {
const issuers = snapshot([
stock("A", "300", "RUB", {
issuer: { id: "g", name: "Газпром" }, sector: "energy",
}),
stock("B", "300", "RUB", {
issuer: { id: "s", name: "Сбер" }, sector: "energy",
}),
stock("C", "200", "RUB", { issuer: null, sector: "energy" }),
stock("D", "100", "RUB", { issuer: null, sector: "energy" }),
]);
expect(toConcentration(issuers, "issuers", labels)
.items.map(item => [item.label, item.amount])).toEqual([
["Газпром", "300"], ["Сбер", "300"], ["Эмитент не указан", "300"],
]);
const sectors = snapshot([
stock("A", "100", "RUB", { sector: "it" }),
stock("B", "100", "RUB", { sector: "energy" }),
]);
const sectorLabels = {
...labels,
sector: (code: string) => code === "it"
? "Информационные технологии"
: "Энергетика",
};
expect(toConcentration(sectors, "sectors", sectorLabels)
.items.map(item => item.label))
.toEqual(["Информационные технологии", "Энергетика"]);
});
it("chooses issuer name from the largest position, then alphabetically", () => {
const data = snapshot([
stock("A", "100", "RUB", {
issuer: { id: "brand", name: "Ястреб" },
}),
stock("B", "300", "RUB", {
issuer: { id: "brand", name: "Альфа" },
}),
stock("C", "400", "RUB", {
issuer: { id: "other", name: "Бета" },
}),
]);
expect(toConcentration(data, "issuers", labels).items
.map(item => [item.name, item.label, item.amount])).toEqual([
["Альфа", "Альфа", "400"], ["Бета", "Бета", "400"],
]);
});
it("uses ISIN before ticker for bonds", () => {
const data = snapshot([stock("Облигация", "100", "RUB", {
isin: "RU000A0JX0J2", ticker: "BOND", type: "BOND",
})]);
expect(toConcentration(data, "bonds", labels)
.items[0]?.logo?.subtitle).toBe("RU000A0JX0J2");
});
});
+276
View File
@@ -0,0 +1,276 @@
import type { Portfolio } from "@/entities/portfolio";
import {
type Decimal,
decimalFromString,
decimalToString,
instrumentLogoUrl,
sumDecimals,
} from "@/shared/lib";
type Concentration = {
empty: boolean;
items: ConcentrationItem[];
other: ConcentrationOther | null;
top5Share: null | string;
total: null | string;
unaccounted: number;
};
type ConcentrationItem = {
amount: string;
chartValue: number;
key: string;
label: string;
logo: ConcentrationLogo | null;
name: string;
share: string;
unknown: boolean;
};
type ConcentrationLabels = {
missingIssuer: string;
missingSector: string;
other: string;
sector: (code: string) => string;
};
type ConcentrationLogo = {
src: null | string;
subtitle: null | string;
};
type ConcentrationOther = ConcentrationItem & {
count: number;
entries: ConcentrationItem[];
};
type Group = {
best?: { name: string; value: Decimal };
first: number;
key: string;
label: string;
logo: ConcentrationLogo | null;
name: string;
unknown: boolean;
values: Decimal[];
};
type Position = Portfolio["positions"][number];
type Slice = "bonds"
| "issuers"
| "sectors"
| "stocks";
const eligibleTypes = new Set(["BOND", "FUND", "STOCK"]);
const RADIX = 10n;
const CHART_PRECISION = 1_000_000n;
const SHARE_PRECISION = 1000n;
const HALF = 2n;
const TOP = 5;
const FIRST_OTHER = 7;
const compareNames = (a: string, b: string) =>
a.toLowerCase().localeCompare(b.toLowerCase(), "en", {
numeric: false,
});
function addPosition(
groups: Map<string, Group>,
position: Position,
index: number,
slice: Slice,
labels: ConcentrationLabels,
): number {
if (!isIncluded(slice, position.type)) return 0;
if (!position.currentValue) return 1;
const value = decimalFromString(position.currentValue.value);
if (value.value < 0n) return 1;
if (value.value === 0n) return 0;
const identity = groupIdentity(position, slice, index, labels);
const group = groups.get(identity.key) ?? {
...identity, first: index, values: [],
};
group.values.push(value);
if (slice === "issuers" && !identity.unknown) {
const best = group.best;
if (!best || compareDecimal(value, best.value) > 0
|| (compareDecimal(value, best.value) === 0
&& compareNames(identity.name, best.name) < 0)) {
group.best = { name: identity.name, value };
group.name = identity.name;
group.label = identity.label;
}
}
groups.set(identity.key, group);
return 0;
}
function chartValue(part: Decimal, total: Decimal): number {
const scale = Math.max(part.scale, total.scale);
const numerator = part.value * RADIX ** BigInt(scale - part.scale);
const denominator = total.value * RADIX ** BigInt(scale - total.scale);
return Number(numerator * CHART_PRECISION / denominator)
/ Number(CHART_PRECISION);
}
function compareDecimal(a: Decimal, b: Decimal): number {
const scale = Math.max(a.scale, b.scale);
const left = a.value * RADIX ** BigInt(scale - a.scale);
const right = b.value * RADIX ** BigInt(scale - b.scale);
if (left > right) return 1;
return left < right ? -1 : 0;
}
function groupIdentity(
position: Position,
slice: Slice,
index: number,
labels: ConcentrationLabels,
) {
if (slice === "sectors") {
const sector = position.sector;
const isUnknown = !sector;
return {
key: sector ?? "",
label: isUnknown
? labels.missingSector
: labels.sector(sector),
logo: null,
name: sector ?? "",
unknown: isUnknown,
};
}
if (slice === "issuers") {
const isUnknown = !position.issuer;
return {
key: position.issuer?.id ?? "",
label: position.issuer ? position.issuer.name : labels.missingIssuer,
logo: null,
name: position.issuer?.name ?? "",
unknown: isUnknown,
};
}
return {
key: String(index),
label: position.displayName,
logo: {
src: instrumentLogoUrl(position.logoName),
subtitle: slice === "bonds"
? position.isin ?? position.ticker ?? position.figi
: position.ticker ?? position.isin ?? position.figi,
},
name: position.displayName,
unknown: false,
};
}
function isIncluded(slice: Slice, type: string): boolean {
if (slice === "stocks") return type === "STOCK";
if (slice === "bonds") return type === "BOND";
return slice === "issuers" ? type === "STOCK" || type === "BOND" : eligibleTypes.has(type);
}
function share(part: Decimal, total: Decimal): string {
const scale = Math.max(part.scale, total.scale);
const numerator = part.value * RADIX ** BigInt(scale - part.scale);
const denominator = total.value * RADIX ** BigInt(scale - total.scale);
if (numerator * SHARE_PRECISION < denominator) return "< 0,1 %";
const tenths = (numerator * SHARE_PRECISION * HALF + denominator)
/ (HALF * denominator);
return tenths % RADIX === 0n ? `${tenths / RADIX} %` : `${tenths / RADIX},${tenths % RADIX} %`;
}
function toConcentration(
portfolio: Portfolio,
slice: Slice,
labels: ConcentrationLabels,
): Concentration {
const groups = new Map<string, Group>();
let unaccounted = 0;
for (const [index, position] of portfolio.positions.entries()) {
unaccounted += addPosition(groups, position, index, slice, labels);
}
const ranked = Array.from(groups.values(), group => ({
...group, sum: sumDecimals(group.values),
})).toSorted((a, b) => compareDecimal(b.sum, a.sum)
|| compareNames(a.label, b.label) || a.first - b.first);
const total = ranked.length > 0
? sumDecimals(ranked.map(item => item.sum))
: null;
const entries = total
? ranked.map(group => ({
amount: decimalToString(group.sum),
chartValue: chartValue(group.sum, total),
key: group.key,
label: group.label,
logo: group.logo,
name: group.name,
share: share(group.sum, total),
unknown: group.unknown,
}))
: [];
const rest = entries.length >= FIRST_OTHER ? entries.slice(TOP) : [];
const otherSum = rest.length > 0
? sumDecimals(ranked.slice(TOP).map(item => item.sum))
: null;
const other = otherSum && total
? {
amount: decimalToString(otherSum),
chartValue: chartValue(otherSum, total),
count: rest.length,
entries: rest,
key: "__other",
label: labels.other,
logo: null,
name: "", share: share(otherSum, total), unknown: false,
}
: null;
const top5 = ranked.length > TOP
? sumDecimals(ranked.slice(0, TOP).map(item => item.sum))
: null;
return {
empty: !total,
items: other ? entries.slice(0, TOP) : entries,
other,
top5Share: top5 && total ? share(top5, total) : null,
total: total && decimalToString(total),
unaccounted,
};
}
export {
toConcentration,
};
export type {
Concentration,
ConcentrationItem,
ConcentrationLabels,
Slice,
};
+104
View File
@@ -0,0 +1,104 @@
import type { Performance } from "@/entities/performance";
import { formatDate, formatMoney, formatPercentagePoints, formatSignedPercent } from "@/shared/lib";
type TextValue = { tone: Tone; value: string };
type Tone
= | "negative"
| "neutral"
| "positive";
const reasonLabels: Record<string, string> = {
ACCOUNT_VALUATION_DATES_DIFFER: "Оценки счетов сделаны в разные дни",
AMBIGUOUS_RETURN: "У расчёта доходности несколько возможных решений",
HISTORY_START_UNKNOWN: "Начало истории счёта неизвестно",
INDEX_HISTORY_UNAVAILABLE: "История индекса временно недоступна",
NO_SOLUTION: "Расчёт доходности не сходится",
OPERATIONS_HISTORY_INCOMPLETE: "История операций ещё не получена полностью",
PORTFOLIO_VALUATION_INCOMPLETE: "Нет полной оценки портфеля",
UNCONFIRMED_TRANSFER: "Перевод между счетами не удалось подтвердить",
UNVALUED_SECURITIES_TRANSFER: "Бумаги переведены без денежной оценки",
};
const unknownReason = "Причину недоступности не удалось определить";
function performanceVm(data: Performance) {
return {
basis: data.return.basis,
comparison: data.outperformance
? {
money: signedMoney(data.outperformance.money),
points: valueText(
data.outperformance.percentagePoints,
formatPercentagePoints,
),
}
: null,
current: formatMoney(data.currentValue),
currentPoint: data.series.length > 0
? { date: formatDate(`${data.series.at(-1)?.date ?? data.period.to}T00:00:00Z`) }
: null,
days: data.period.days,
excluded: data.excludedAccounts.map(item => ({
id: item.accountId,
name: item.name,
reason: reasonText(item.reason),
})),
from: data.period.from,
indexReason: data.benchmark.unavailableReason
? reasonText(data.benchmark.unavailableReason)
: null,
indexReturn: valueText(data.benchmark.return.value, formatSignedPercent),
indexValue: data.benchmark.value ? formatMoney(data.benchmark.value) : "—",
invested: formatMoney(data.netInvested),
profit: signedMoney(data.profit),
returnReason: data.return.unavailableReason
? reasonText(data.return.unavailableReason)
: null,
returnValue: valueText(data.return.value, formatSignedPercent),
series: data.series.map(item => ({
benchmarkValue: Number(item.benchmarkValue),
date: item.date,
label: formatDate(`${item.date}T00:00:00Z`),
netInvested: Number(item.netInvested),
referenceValue: item.referenceValue === null
? null
: Number(item.referenceValue),
})),
to: data.period.to,
};
}
function reasonText(reason: string): string {
// eslint-disable-next-line security/detect-object-injection -- Lookup accepts only an API reason, with a safe fallback.
return reasonLabels[reason] ?? unknownReason;
}
function signedMoney(value: Performance["profit"]): TextValue {
return {
tone: tone(value.value),
value: formatMoney(value, { withSign: true }),
};
}
function tone(value: string): Tone {
const number = Number(value);
if (number > 0) return "positive";
return number < 0 ? "negative" : "neutral";
}
// Tone follows the displayed text, so "0,0 %" is never coloured.
function valueText(
value: null | string,
format: (value: string) => string,
): TextValue {
if (value === null) return { tone: "neutral", value: "—" };
const text = format(value);
if (text.startsWith("+")) return { tone: "positive", value: text };
return { tone: text.startsWith("−") ? "negative" : "neutral", value: text };
}
export { performanceVm, reasonText };
+14 -3
View File
@@ -2,7 +2,7 @@ import type { Portfolio } from "@/entities/portfolio";
const portfolio
= {
cashBalances: [{ currency: "USD", value: "1" }],
cash: { currency: "RUB", value: "1" },
isStale: true,
lastSuccessfulAt: "2026-08-13T10:00:00Z",
positions: [
@@ -13,8 +13,10 @@ const portfolio
displayName: "Акция",
figi: "FIGI-STOCK",
isin: null,
issuer: null,
logoName: "akciya.png",
quantity: "2",
sector: null,
ticker: null,
type: "STOCK",
},
@@ -25,8 +27,10 @@ const portfolio
displayName: "Облигация",
figi: "FIGI-BOND",
isin: "RU000A0JX0J2",
issuer: null,
logoName: null,
quantity: "1",
sector: null,
ticker: null,
type: "BOND",
},
@@ -37,14 +41,21 @@ const portfolio
displayName: "Фонд",
figi: "FIGI-FUND",
isin: null,
issuer: null,
logoName: "fond.png",
quantity: "3",
sector: null,
ticker: null,
type: "FUND",
},
] satisfies [Portfolio["positions"][number], ...Portfolio["positions"]],
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "RUB", value: "150" }],
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
totals: { currency: "RUB", value: "150" },
} satisfies Portfolio;
const position: Portfolio["positions"][number] = {
+32 -23
View File
@@ -23,7 +23,7 @@ function sections(positions: Portfolio["positions"]) {
}
describe("account position sections", () => {
it("excludes currency instruments only from display, preserving order and share denominators", () => {
it("excludes currency mirrors from display and share denominators", () => {
const otherTypes = [
"OPTION",
"OTHER",
@@ -35,7 +35,7 @@ describe("account position sections", () => {
const snapshot: Portfolio = {
...portfolio,
cashBalances: [{ currency: "RUB", value: "1000" }],
cash: { currency: "RUB", value: "1000" },
positions: [
...portfolio.positions,
{
@@ -56,8 +56,8 @@ describe("account position sections", () => {
}),
),
],
structure: { currencies: [], unvaluedCategories: [] },
totalsByCurrency: [{ currency: "RUB", value: "1250" }],
structure: { categories: [], hasNegativeValues: false, totalValue: "0", unvaluedCategories: [] },
totals: { currency: "RUB", value: "1250" },
};
const original = structuredClone(snapshot);
@@ -73,12 +73,30 @@ describe("account position sections", () => {
"FIGI-FUND",
...otherTypes.map(type => `FIGI-${type}-NEXT`),
]);
expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("40 %");
expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("20 %");
expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("20 %");
expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("50 %");
expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("25 %");
expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("25 %");
expect(snapshot).toEqual(original);
});
it("keeps all-account positions from both accounts without counting mirrored cash", () => {
const result = sections([
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "100" } }),
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "50" }, type: "CURRENCY" }),
makePosition({ account: { id: "b", name: "ИИС" }, currentValue: { currency: "RUB", value: "100" } }),
]);
const visible = result.flatMap(section =>
section.groups.flatMap(group => group.positions));
expect(visible)
.toEqual(expect.arrayContaining([
expect.objectContaining({ account: { id: "a", name: "Основной" }, shareText: "50 %" }),
expect.objectContaining({ account: { id: "b", name: "ИИС" }, shareText: "50 %" }),
]));
expect(visible).toHaveLength(2);
});
it("prepares grouped position sections with derived display data", () => {
expect(
toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({
@@ -175,13 +193,13 @@ describe("account position sections", () => {
).toHaveLength(2);
});
it("keeps currencies and purchase prices attached to their source positions", () => {
it("keeps values and purchase prices attached to their source positions", () => {
const source = [
position,
{
...second,
averagePurchasePrice: { currency: "USD", value: "0.99" },
currentValue: { currency: "USD", value: "1.01" },
averagePurchasePrice: { currency: "RUB", value: "0.99" },
currentValue: { currency: "RUB", value: "1.01" },
},
];
@@ -246,10 +264,6 @@ describe("account position returns", () => {
{ 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({
@@ -283,29 +297,24 @@ describe("account position returns", () => {
expect(formatPositionReturnPercent(testCase.value)).toBe(testCase.expected);
});
it("sums complete unrealized returns by currency", () => {
it("sums complete unrealized returns", () => {
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" },
]);
expect(result).toEqual({ currency: "RUB", value: "0.3" });
});
it("omits only currencies with incomplete returns", () => {
it("returns null when any return is incomplete", () => {
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" }]);
expect(result).toBeNull();
});
});
+10 -24
View File
@@ -152,7 +152,7 @@ function toAccountPagePositionSections(
const denominators = new Map<string, number>();
for (const position of portfolio.positions) {
if (!position.currentValue) continue;
if (position.type === "CURRENCY" || !position.currentValue) continue;
const currency = position.currentValue.currency;
denominators.set(
currency,
@@ -249,37 +249,23 @@ function toSection(
function toUnrealizedReturns(
positions: Portfolio["positions"],
): Money[] {
const totals = new Map<string, {
complete: boolean;
values: Decimal[];
}>();
): Money | null {
const 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))];
if (!position.absoluteReturn) {
// A position without any valuation has nothing to contribute.
for (const currency of currencies) {
const total = totals.get(currency) ?? { complete: true, values: [] };
if (!position.averagePurchasePrice && !position.currentValue)
continue;
if (position.absoluteReturn) {
total.values.push(decimalFromString(position.absoluteReturn.value));
}
else {
total.complete = false;
return null;
}
totals.set(currency, total);
}
values.push(decimalFromString(position.absoluteReturn.value));
}
return [...totals].flatMap(([currency, total]) => total.complete
? [{ currency, value: decimalToString(sumDecimals(total.values)) }]
: []);
return { currency: "RUB", value: decimalToString(sumDecimals(values)) };
}
export {
+1 -1
View File
@@ -64,7 +64,7 @@ function toIncomeSummary(
if (income.meta?.completeness === "incomplete") return { state: "partial", to };
if (!income.data && (income.isError || income.meta?.lastAttempt.state === "failed"))
return { state: "error", to };
if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
if (!income.data) return { state: "empty", to };
return {
state: "loaded",
File diff suppressed because it is too large Load Diff
@@ -1,38 +1,46 @@
import type { FC } from "react";
import { useAccountPageViewModel } from "./AccountPage.vm";
import { useAccountPageVm } from "./AccountPage.vm";
import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
import { AccountPageError } from "./components/AccountPageError.view";
import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
const AccountPage: FC = () => {
const viewModel = useAccountPageViewModel();
if (viewModel.state === "loading") return <AccountPageLoading />;
if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
if (viewModel.state === "empty")
const vm = useAccountPageVm();
if (vm.state === "loading") return <AccountPageLoading />;
if (vm.state === "error") return <AccountPageError {...vm} />;
if (vm.state === "empty")
return (
<AccountPageEmpty
account={viewModel.account}
accountId={viewModel.accountId}
incomeSummary={viewModel.incomeSummary}
recentEvents={viewModel.recentEvents}
recentOperations={viewModel.recentOperations}
account={vm.account}
accountId={vm.accountId}
incomeSummary={vm.incomeSummary}
readRetry={vm.readRetry}
recentEvents={vm.recentEvents}
recentOperations={vm.recentOperations}
source={vm.source}
/>
);
return (
<AccountPageLoaded
account={viewModel.account}
accountId={viewModel.accountId}
incomeSummary={viewModel.incomeSummary}
partial={viewModel.partial}
portfolio={viewModel.portfolio}
positionSections={viewModel.positionSections}
recentEvents={viewModel.recentEvents}
recentOperations={viewModel.recentOperations}
source={viewModel.source}
unrealizedReturns={viewModel.unrealizedReturns}
account={vm.account}
accountId={vm.accountId}
concentration={vm.concentration}
incomeSummary={vm.incomeSummary}
onSliceChange={vm.onSliceChange}
onTabChange={vm.onTabChange}
partial={vm.partial}
portfolio={vm.portfolio}
positionSections={vm.positionSections}
readRetry={vm.readRetry}
recentEvents={vm.recentEvents}
recentOperations={vm.recentOperations}
slice={vm.slice}
source={vm.source}
tab={vm.tab}
unrealizedReturns={vm.unrealizedReturns}
/>
);
};
@@ -12,7 +12,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { portfolio } from "../../model/positions.fixtures";
import { useAccountPageViewModel } from "./AccountPage.vm";
import { useAccountPageVm } from "./AccountPage.vm";
function configureTestAuth() {
configureAuthClient({
@@ -102,12 +102,12 @@ function mockLoadedAccountPage() {
);
}
describe("useAccountPageViewModel", () => {
describe("useAccountPageVm", () => {
it("prepares recent operations and events state for presentation views", async () => {
configureTestAuth();
mockLoadedAccountPage();
const { result } = renderHook(() => useAccountPageViewModel(), {
const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(),
});
@@ -154,7 +154,7 @@ describe("useAccountPageViewModel", () => {
),
);
const { result } = renderHook(() => useAccountPageViewModel(), {
const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(),
});
@@ -187,14 +187,14 @@ it("keeps overview sections independent when their source data is incomplete", a
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json(
resource(
{ events: [], incomeTotalsByCurrency: [] },
{ events: [], incomeTotal: { currency: "RUB", value: "0" } },
{ completeness: "incomplete" },
),
),
),
);
const { result } = renderHook(() => useAccountPageViewModel(), {
const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(),
});
@@ -213,8 +213,8 @@ it("keeps overview sections loaded without exposing technical retry", async () =
const sections: Record<string, unknown>
= {
"events": { events: [], incomeTotalsByCurrency: [] },
"income-summary": { totalsByCurrency: [] },
"events": { events: [], incomeTotal: { currency: "RUB", value: "0" } },
"income-summary": { total: { coupon: { currency: "RUB", value: "0" }, dividend: { currency: "RUB", value: "0" }, total: { currency: "RUB", value: "0" } } },
"operations": { hasNext: false, items: [], nextCursor: null },
portfolio,
};
@@ -232,13 +232,13 @@ it("keeps overview sections loaded without exposing technical retry", async () =
),
);
const { result } = renderHook(() => useAccountPageViewModel(), {
const { result } = renderHook(() => useAccountPageVm(), {
wrapper: createWrapper(),
});
await waitFor(() =>
expect(result.current).toMatchObject({
incomeSummary: { state: "empty" },
incomeSummary: { state: "loaded" },
recentEvents: { state: "empty" },
recentOperations: { state: "empty" },
state: "loaded",
@@ -1,3 +1,5 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
import type { Portfolio } from "@/entities/portfolio";
@@ -14,9 +16,15 @@ import {
import { useIncomeSummary } from "@/entities/income";
import { usePortfolio } from "@/entities/portfolio";
import { useScreenSync } from "@/features/tbank-connection";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import { apiErrorCode, isBrokerageAccessLoss, readRetry } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib";
import {
type Concentration,
type ConcentrationLabels,
type Slice,
toConcentration,
} from "../../model/concentration";
import {
type AccountPagePositionSection,
toAccountPagePositionSections,
@@ -36,8 +44,10 @@ type AccountPageContent = {
accountId?: string;
incomeSummary: AccountPageIncomeSummary;
partial?: boolean;
readRetry: AccountPageReadRetry;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
};
type AccountPageEmptyViewModel = AccountPageContent & {
@@ -45,27 +55,46 @@ type AccountPageEmptyViewModel = AccountPageContent & {
};
type AccountPageLoadedViewModel = AccountPageContent & {
concentration: Concentration | null;
onSliceChange: (slice: Slice) => void;
onTabChange: (tab: null | string) => void;
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
source?: InvestmentResourceMeta;
slice: Slice;
state: "loaded";
unrealizedReturns: Portfolio["totalsByCurrency"];
tab: string;
unrealizedReturns:
| null
| { currency: string; value: string };
};
type AccountPageReadRetry = ReturnType<typeof readRetry>;
type AccountPageViewModel
= | AccountPageEmptyViewModel
| AccountPageLoadedViewModel
| { code?: string; state: "error" }
| { code?: string; readRetry: AccountPageReadRetry; state: "error" }
| { state: "loading" };
function isPortfolioAccessFailure(code?: string) {
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.NotFound)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountPageViewModel(): AccountPageViewModel {
function useAccountPageVm(): AccountPageViewModel {
const { accountId } = useParams();
const { t } = useTranslation();
const [selection, setSelection] = useState<{
accountId?: string;
slice: Slice;
tab: string;
}>({ accountId, slice: "stocks", tab: "positions" });
const current = selection.accountId === accountId
? selection
: {
accountId, slice: "stocks" as const, tab: "positions",
};
const updateSelection = (change: Partial<typeof selection>) =>
setSelection({ ...current, ...change });
const portfolio = usePortfolio(accountId);
const operations = useBrokerageOperations(accountId, {
@@ -85,7 +114,9 @@ function useAccountPageViewModel(): AccountPageViewModel {
]);
const code = apiErrorCode(portfolio.error);
const isAccessFailure = isPortfolioAccessFailure(code);
// The portfolio drives this screen; the retry repeats only its GET.
const retry = readRetry([portfolio]);
const isAccessFailure = isBrokerageAccessLoss(code);
const availability = useInitialAvailability({
hasContent: !!portfolio.data,
@@ -94,12 +125,13 @@ function useAccountPageViewModel(): AccountPageViewModel {
isFetching: portfolio.isFetching,
});
if (isAccessFailure) return { code, state: "error" as const };
if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (!portfolio.data)
return {
state: availability === "unavailable" ? "error" : "loading",
} as const;
return availability === "unavailable"
? { code, readRetry: retry, state: "error" as const }
: { state: "loading" as const };
const account = accounts.data?.find(item => item.id === accountId);
const recentOperations = toRecentOperations(accountId, operations);
@@ -110,32 +142,52 @@ function useAccountPageViewModel(): AccountPageViewModel {
if (
portfolio.meta?.availability === "available"
&& portfolio.data.positions.length === 0
&& portfolio.data.cashBalances.length === 0
&& Number(portfolio.data.cash.value) === 0
)
return {
account,
accountId,
incomeSummary,
readRetry: retry,
recentEvents,
recentOperations,
source: portfolio.meta,
state: "empty" as const,
};
const isPartial = portfolio.meta?.completeness === "incomplete";
const labels: ConcentrationLabels = {
missingIssuer: t("portfolio.concentration.missingIssuer"),
missingSector: t("portfolio.concentration.missingSector"),
other: t("portfolio.concentration.other"),
sector: code => t(`stock.sectors.${code}`, { defaultValue: code }),
};
const concentration = accountId !== "all"
&& current.tab === "concentration"
? toConcentration(portfolio.data, current.slice, labels)
: null;
return {
account,
accountId,
concentration,
incomeSummary,
onSliceChange: slice => updateSelection({ slice }),
onTabChange: tab => updateSelection({ tab: tab ?? "positions" }),
partial: isPartial,
portfolio: portfolio.data,
positionSections: toAccountPagePositionSections(portfolio.data),
readRetry: retry,
recentEvents,
recentOperations,
slice: current.slice,
source: portfolio.meta,
state: "loaded" as const,
tab: current.tab,
unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
};
}
export { useAccountPageViewModel };
export { useAccountPageVm };
@@ -5,9 +5,10 @@ import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account";
import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { PortfolioStructure } from "@/widgets/portfolio-structure";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import type {
AccountPageIncomeSummary,
@@ -17,14 +18,17 @@ import type {
import { AccountHeading } from "./AccountHeading.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { RecentOperations } from "./RecentOperations.view";
type AccountPageEmptyProps = {
account?: BrokerageAccount;
accountId?: string;
incomeSummary?: AccountPageIncomeSummary;
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
};
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
@@ -40,10 +44,23 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
<Stack>
<AccountHeading account={props.account} accountId={props.accountId} />
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
<StateView text={text} title={t("portfolio.emptyTitle")} />
<PortfolioStructure
structure={{ currencies: [], unvaluedCategories: [] }}
structure={{
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
}}
/>
<RecentOperations
@@ -6,8 +6,12 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountPageErrorProps = { code?: string };
type AccountPageErrorProps = {
code?: string;
readRetry?: ReadRetryProps;
};
const AccountPageError: FC<AccountPageErrorProps> = (props) => {
const { code } = props;
@@ -43,8 +47,18 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
/>
);
const retry = props.readRetry?.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return (
<StateView
action={retry}
text={t("states.unavailableText")}
title={t("states.unavailableTitle")}
/>
@@ -15,9 +15,9 @@ import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { formatMoney } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import { PortfolioStructure } from "@/widgets/portfolio-structure";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
import type { AccountPagePositionSection } from "../../../model/positions";
import type {
AccountPageIncomeSummary,
@@ -27,27 +27,40 @@ import type {
import classes from "../AccountPage.module.css";
import { AccountHeading } from "./AccountHeading.view";
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
import { Concentration } from "./Concentration/Concentration.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PerformanceTab } from "./Performance/PerformanceTab";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { PositionSection } from "./PositionSection.view";
import { RecentOperations } from "./RecentOperations.view";
type AccountPageLoadedProps = {
account?: BrokerageAccount;
accountId?: string;
concentration: ConcentrationModel | null;
incomeSummary?: AccountPageIncomeSummary;
onSliceChange: (slice: Slice) => void;
onTabChange: (tab: null | string) => void;
partial?: boolean;
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
slice: Slice;
source?: InvestmentResourceMeta;
unrealizedReturns: Portfolio["totalsByCurrency"];
tab: string;
unrealizedReturns:
| null
| { currency: string; value: string };
};
const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
const { t } = useTranslation();
const [filter, setFilter] = useState<string>();
const tab = props.tab;
const onTabChange = props.onTabChange;
const activeSection = props.positionSections.find(
section => section.kind === filter,
@@ -74,11 +87,29 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"}
/>
{props.partial
? <Alert role="status">{t("investment.partial")}</Alert>
: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
{!props.partial && props.unrealizedReturns.length > 0 && (
{props.partial
? tab !== "concentration" && (
<Alert role="status">{t("investment.partial")}</Alert>
)
: (
<Stack component="dl" gap={4} m={0}>
<dt>
<Text fw={600}>{t("portfolio.total")}</Text>
</dt>
<dd style={{ margin: 0 }}>
<Text className={classes.totalAmount}>
{formatMoney(props.portfolio.totals, {
withRoundedCents: true,
})}
</Text>
</dd>
</Stack>
)}
{!props.partial && props.unrealizedReturns && (
<Stack
aria-label={t("portfolio.unrealizedResult")}
component="section"
@@ -87,9 +118,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
<Text fw={600}>{t("portfolio.unrealizedResult")}</Text>
<Group gap="md">
{props.unrealizedReturns.map(total => (
<Text key={total.currency}>{formatMoney(total)}</Text>
))}
<Text>{formatMoney(props.unrealizedReturns)}</Text>
</Group>
<Text c="dimmed" size="xs">
@@ -107,14 +136,21 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
<Tabs
classNames={{ list: classes.tabsList }}
defaultValue="positions"
keepMounted={false}
onChange={onTabChange}
value={tab}
>
<Tabs.List aria-label={t("portfolio.sections")} mb="md">
<Tabs.Tab value="positions">
{t("portfolio.tabs.positions")}
</Tabs.Tab>
{props.accountId !== "all" && (
<Tabs.Tab value="concentration">
{t("portfolio.concentration.title")}
</Tabs.Tab>
)}
<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
<Tabs.Tab value="operations">
@@ -124,6 +160,8 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
<Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
<Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
<Tabs.Tab value="performance">{t("portfolio.tabs.performance")}</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="positions">
@@ -143,8 +181,32 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
</Stack>
</Tabs.Panel>
{props.accountId !== "all" && (
<Tabs.Panel value="concentration">
{props.concentration && (
<Concentration
key={props.slice}
model={props.concentration}
onSliceChange={props.onSliceChange}
partial={!!props.partial}
slice={props.slice}
/>
)}
</Tabs.Panel>
)}
<Tabs.Panel value="cash">
<CurrencyCards amounts={props.portfolio.cashBalances} />
<Stack component="dl" gap={4} m={0}>
<dt>
<Text fw={600}>{t("portfolio.cashTitle")}</Text>
</dt>
<dd style={{ margin: 0 }}>
<Text>
{formatMoney(props.portfolio.cash, { withRoundedCents: true })}
</Text>
</dd>
</Stack>
</Tabs.Panel>
<Tabs.Panel value="operations">
@@ -171,6 +233,10 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
/>
)}
</Tabs.Panel>
<Tabs.Panel value="performance">
{props.accountId && <PerformanceTab accountId={props.accountId} />}
</Tabs.Panel>
</Tabs>
</Stack>
);
@@ -0,0 +1,111 @@
.layout {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
gap: var(--mantine-spacing-xl);
align-items: center;
}
.chart {
position: relative;
justify-self: center;
}
.pattern {
position: absolute;
width: 0;
height: 0;
}
.center {
position: absolute;
inset: 32%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: clamp(12px, 1.3vw, 17px);
overflow-wrap: anywhere;
pointer-events: none;
}
.srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.list {
list-style: none;
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items: center;
gap: var(--mantine-spacing-sm);
min-height: 58px;
border-bottom: 1px solid var(--mantine-color-gray-2);
}
.rank {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: none;
border-radius: 50%;
color: white;
}
.identity {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.bar,
.bar span {
display: block;
height: 4px;
border-radius: 4px;
}
.bar {
background: var(--mantine-color-gray-2);
}
.value {
text-align: right;
white-space: nowrap;
}
.other {
display: flex;
justify-content: space-between;
gap: var(--mantine-spacing-sm);
width: 100%;
min-height: 44px;
align-items: center;
border: 0;
background: var(--mantine-color-gray-0);
color: inherit;
cursor: pointer;
text-align: left;
}
.other:focus-visible {
outline: 2px solid var(--mantine-color-blue-6);
outline-offset: 2px;
}
@media (max-width: 700px) {
.layout { grid-template-columns: 1fr; }
.slices { max-width: 100%; overflow-x: auto; }
.other { flex-wrap: wrap; }
}
@@ -0,0 +1,310 @@
import { DonutChart } from "@mantine/charts";
import {
Alert, Box, Group, Paper, SegmentedControl, Stack,
Text, Title,
} from "@mantine/core";
import { type FC, useId, useState } from "react";
import { useTranslation } from "react-i18next";
import { formatMoney } from "@/shared/lib";
import type {
ConcentrationItem,
Concentration as ConcentrationModel,
Slice,
} from "../../../../model/concentration";
import { PositionLogo } from "../PositionLogo.view";
import classes from "./Concentration.module.css";
type Props = {
model: ConcentrationModel;
onSliceChange: (slice: Slice) => void;
partial: boolean;
slice: Slice;
};
const sliceLabels = {
bonds: "portfolio.bonds",
issuers: "portfolio.concentration.issuers",
sectors: "portfolio.concentration.sectors",
stocks: "portfolio.stocks",
} as const;
type RowProps = {
color: string;
index: number;
item: ConcentrationItem;
logo?: ConcentrationItem["logo"];
name: string;
};
const colors = [
"#2563eb", "#18a999", "#f59e0b", "#8b5cf6", "#ef6c5b",
"#64748b",
];
const PERCENT = 100;
const OTHER_START = 6;
function amountFor(item: ConcentrationItem): string {
return formatMoney({ currency: "RUB", value: item.amount });
}
const ConcentrationRow: FC<RowProps> = props => (
<li className={classes.row}>
<span
aria-hidden="true"
className={classes.rank}
style={{ backgroundColor: props.color }}
>
{props.index}
</span>
{props.logo && <PositionLogo label={props.name} src={props.logo.src} />}
<span className={classes.identity}>
<span>{props.name}</span>
{props.logo?.subtitle && (
<Text c="dimmed" size="xs">{props.logo.subtitle}</Text>
)}
<span aria-hidden="true" className={classes.bar}>
<span style={{
backgroundColor: props.color,
width: `${props.item.chartValue * PERCENT}%`,
}}
/>
</span>
</span>
<span className={classes.value}>
<strong>{amountFor(props.item)}</strong>
<Text c="dimmed" size="sm">{props.item.share}</Text>
</span>
</li>
);
type TooltipProps = {
active?: boolean;
payload?: { name?: number | string }[];
rows: { amount: string; label: string; share: string }[];
};
function chartCellProps(series: { name: string }, rows: ConcentrationItem[]) {
const index = Number(series.name);
const item = rows.at(index);
return {
stroke: "white",
strokeWidth: 2,
...((item?.unknown || (index === rows.length - 1
&& item?.key === "__other"))
&& { strokeDasharray: "3 2" }),
};
}
function rankLabel({ index }: { index: number; percent?: number }) {
return String(index + 1);
}
const ChartTooltip: FC<TooltipProps> = (props) => {
const row = props.rows[Number(props.payload?.[0]?.name)];
if (!row || !props.active) return;
return (
<Paper p="sm" radius="md" shadow="sm">
<Text fw={600} size="sm">{row.label}</Text>
<Text size="sm">{row.amount} · {row.share}</Text>
</Paper>
);
};
const Concentration: FC<Props> = (props) => {
const { t } = useTranslation();
const [expanded, setExpanded] = useState(false);
const otherId = useId();
const chartId = useId();
const rows = props.model.other
? [...props.model.items, props.model.other]
: props.model.items;
const chartData = rows.map((item, index) => ({
color: colors[index % colors.length] ?? colors[0] ?? "blue",
name: String(index),
value: item.chartValue,
}));
const chartText = [
props.model.top5Share && t("portfolio.concentration.top5", {
share: props.model.top5Share,
}),
props.model.total && formatMoney({ currency: "RUB", value: props.model.total }),
...rows.map(item => `${item.label}: ${amountFor(item)}, ${item.share}`),
].filter(Boolean).join("; ");
const slices = [
{ label: t("portfolio.stocks"), value: "stocks" },
{ label: t("portfolio.bonds"), value: "bonds" },
{ label: t("portfolio.concentration.sectors"), value: "sectors" },
{ label: t("portfolio.concentration.issuers"), value: "issuers" },
];
// eslint-disable-next-line frontend/readability -- Mantine callback closes over page action.
const selectSlice = (value: string) => props.onSliceChange(value as Slice);
// eslint-disable-next-line frontend/readability -- Disclosure state belongs to this view.
const toggleOther = () => setExpanded(value => !value);
// eslint-disable-next-line frontend/readability -- Chart callback closes over visible rows.
const cellProps = (series: { name: string }) => chartCellProps(series, rows);
const pieProps = { isAnimationActive: false, label: rankLabel };
const tooltipRows = rows.map(item => ({
amount: amountFor(item),
label: item.label,
share: item.share,
}));
const tooltipProps = { content: <ChartTooltip rows={tooltipRows} /> };
const totalText = props.model.total
? formatMoney({ currency: "RUB", value: props.model.total })
: "";
return (
<Stack gap="lg">
<Group align="end" justify="space-between">
<SegmentedControl
aria-label={t("portfolio.concentration.slice")}
className={classes.slices}
data={slices}
onChange={selectSlice}
value={props.slice}
/>
</Group>
{props.partial && (
<Alert role="status">{t("portfolio.concentration.incomplete")}</Alert>
)}
{props.model.empty
? (
<Stack gap="xs">
<Text fw={600}>{t(sliceLabels[props.slice])}</Text>
<Text>{t("portfolio.concentration.empty")}</Text>
</Stack>
)
: (
<Paper className={classes.layout} p="lg" radius="md" withBorder>
<Box className={classes.chart}>
<DonutChart
aria-describedby={chartId}
aria-label={t("portfolio.concentration.chart")}
cellProps={cellProps}
data={chartData}
pieProps={pieProps}
role="img"
size={260}
strokeWidth={24}
tooltipDataSource="segment"
tooltipProps={tooltipProps}
/>
<div aria-hidden="true" className={classes.center}>
{props.model.top5Share && (
<Text fw={700} size="sm">{t("portfolio.concentration.top5", {
share: props.model.top5Share,
})}
</Text>
)}
<Text fw={700}>{totalText}</Text>
</div>
<Text
className={classes.srOnly}
id={chartId}
>
{chartText}
</Text>
</Box>
<Stack gap="xs">
<Title order={3} size="md">{t("portfolio.concentration.title")}</Title>
<ol className={classes.list}>
{props.model.items.map((item, index) => (
<ConcentrationRow
color={colors[index % colors.length] ?? "blue"}
index={index + 1}
item={item}
key={item.key}
logo={item.logo}
name={item.label}
/>
))}
</ol>
{props.model.other && (
<>
<button
aria-controls={otherId}
aria-expanded={expanded}
className={classes.other}
onClick={toggleOther}
type="button"
>
<span>{t("portfolio.concentration.other")} · {t(
"portfolio.concentration.otherCount",
{ count: props.model.other.count },
)}
</span>
<span>{amountFor(props.model.other)} · {
props.model.other.share
}
</span>
</button>
<ol
className={classes.list}
hidden={!expanded}
id={otherId}
start={OTHER_START}
>
{props.model.other.entries.map((item, index) => (
<ConcentrationRow
color={colors[(index + OTHER_START) % colors.length]
?? "blue"}
index={index + OTHER_START}
item={item}
key={item.key}
logo={item.logo}
name={item.label}
/>
))}
</ol>
</>
)}
</Stack>
</Paper>
)}
{props.model.unaccounted > 0 && (
<Text c="dimmed" size="sm">{t(
"portfolio.concentration.unaccounted",
{ count: props.model.unaccounted },
)}
</Text>
)}
</Stack>
);
};
export { Concentration };
@@ -1,77 +0,0 @@
import { MantineProvider } from "@mantine/core";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { CurrencyCards } from "./CurrencyCards.view";
describe("CurrencyCards currency presentation", () => {
it.each([0, 5])(
"renders only the %i supplied totals in upstream order",
(count) => {
const totals = [
{ currency: "EUR", value: "3.00" },
{ currency: "USD", value: "2.00" },
{ currency: "RUB", value: "1.00" },
{ currency: "CAD", value: "4.00" },
{ currency: "XYZ", value: "5.00" },
].slice(0, count);
const { container } = render(
<MantineProvider>
<CurrencyCards amounts={totals} />
</MantineProvider>,
);
expect(
screen.queryAllByRole("definition").map(node => node.textContent),
).toEqual(
["3,00 €", "2,00 $", "1,00 ₽", "4,00 CAD", "5,00 XYZ"].slice(0, count),
);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
expect(container.querySelectorAll("dl")).toHaveLength(count);
expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
container.querySelector("[tabindex], button, a, input"),
).toBeNull();
},
);
it.each([
["RUB", "125000.50", "125 000,50 ₽", "Российский рубль", "₽"],
["USD", "320.00", "320,00 $", "Доллар США", "$"],
["EUR", "9876.54321", "9 876,54321 €", "Евро", "€"],
[
"RUB",
"123456789012.345678901",
"123 456 789 012,345678901 ₽",
"Российский рубль",
"₽",
],
["USD", "-1234567.890123", "-1 234 567,890123 $", "Доллар США", "$"],
["EUR", "987654321.000001", "987 654 321,000001 €", "Евро", "€"],
["USD", "-0.5", "-0,5 $", "Доллар США", "$"],
["CAD", "20.00", "20,00 CAD", "CAD", "CAD"],
["XYZ", "1.000", "1,000 XYZ", "XYZ", "XYZ"],
])(
"preserves %s %s and its currency identity",
(currency, value, expected, name, symbol) => {
render(
<MantineProvider>
<CurrencyCards amounts={[{ currency, value }]} />
</MantineProvider>,
);
const term = screen.getByRole("term");
expect(term).toHaveTextContent(name);
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
expect(term.querySelector("[aria-hidden=\"true\"]")).toHaveTextContent(
symbol,
);
expect(screen.getByRole("definition")).toHaveTextContent(expected);
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
expect(term.parentElement).toBe(
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
screen.getByRole("definition").parentElement,
);
},
);
});
@@ -1,74 +0,0 @@
import type { FC } from "react";
import { Paper, SimpleGrid, Text, VisuallyHidden } from "@mantine/core";
import { useTranslation } from "react-i18next";
import type { Portfolio } from "@/entities/portfolio";
import { formatDecimal } from "@/shared/lib";
import classes from "../../AccountPage.module.css";
const SIGN_PREFIX_LENGTH = 2;
type CurrencyCardsProps = {
amounts: Portfolio["totalsByCurrency"];
};
const CurrencyCards: FC<CurrencyCardsProps> = (props) => {
const { t } = useTranslation();
const { amounts } = props;
const currencies: Record<string, { name: string; symbol: string }> = {
EUR: { name: t("portfolio.currencies.EUR"), symbol: "€" },
RUB: { name: t("portfolio.currencies.RUB"), symbol: "₽" },
USD: { name: t("portfolio.currencies.USD"), symbol: "$" },
};
return (
<SimpleGrid cols={{ base: 1, md: 3, sm: 2 }} spacing={10}>
{amounts.map((money) => {
const amount = formatDecimal(money.value);
return (
<Paper
className={classes.total}
component="dl"
key={money.currency}
m={0}
withBorder
>
<Text className={classes.totalBadge} component="dt">
<span aria-hidden="true">
{currencies[money.currency]?.symbol ?? money.currency}
</span>
<VisuallyHidden>
{currencies[money.currency]?.name ?? money.currency}
</VisuallyHidden>
</Text>
<Text className={classes.totalAmount} component="dd" m={0}>
{amount.startsWith("-")
? (
<>
<span className={classes.totalLeadingDigits}>
{amount.slice(0, SIGN_PREFIX_LENGTH)}
</span>
{amount.slice(SIGN_PREFIX_LENGTH)}
</>
)
: (
amount
)}{" "}
{currencies[money.currency]?.symbol ?? money.currency}
</Text>
</Paper>
);
})}
</SimpleGrid>
);
};
export { CurrencyCards };
@@ -64,16 +64,14 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
return (
<Stack gap="xs">
{props.summary.totalsByCurrency.map(total => (
<Paper key={total.currency} p="sm" withBorder>
<Text fw={700}>{formatMoney(total.total)}</Text>
<Paper p="sm" withBorder>
<Text fw={700}>{formatMoney(props.summary.total.total)}</Text>
<Text c="dimmed" size="sm">
{t("income.coupon")}: {formatMoney(total.coupon)} ·{" "}
{t("income.dividend")}: {formatMoney(total.dividend)}
{t("income.coupon")}: {formatMoney(props.summary.total.coupon)} ·{" "}
{t("income.dividend")}: {formatMoney(props.summary.total.dividend)}
</Text>
</Paper>
))}
<Button component={Link} to={props.to} variant="subtle">
{props.moreLabel ?? t("income.open")}
@@ -0,0 +1,3 @@
.positive { color: var(--wl-color-positive); }
.negative { color: var(--wl-color-negative); }
.neutral { color: var(--mantine-color-dark-7); }
@@ -0,0 +1,106 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { Performance } from "@/entities/performance";
import { PerformanceView } from "./Performance.view";
const rub = (value: string) => ({ currency: "RUB", value });
const series = Array.from({ length: 24 }, (_, month) => {
const date = new Date(Date.UTC(2024, month, 1)).toISOString().slice(0, 10);
const invested = 300_000 + Math.floor(month / 6) * 150_000;
return {
benchmarkValue: String(Math.round(invested * (1 + month * 0.009))),
date,
netInvested: String(invested),
referenceValue: String(Math.round(invested * (1 + month * 0.004))),
};
});
const data: Performance = {
accountId: "account-1",
benchmark: {
asOf: "2025-12-01",
code: "MCFTRR",
return: { basis: "annual", unavailableReason: null, value: "0.108" },
unavailableReason: null,
value: rub("1387973"),
},
calculatedAt: "2025-12-01T00:00:00Z",
completeness: "complete",
currentValue: rub("1536400"),
excludedAccounts: [],
netInvested: rub("1060000"),
outperformance: { money: rub("148427"), percentagePoints: "0.043" },
period: { days: 700, from: "2024-01-01", to: "2025-12-01" },
profit: rub("476400"),
reference: {
asOf: "2025-12-01",
code: "IMOEX",
return: { basis: "annual", unavailableReason: null, value: "0.047" },
unavailableReason: null,
value: rub("1150000"),
},
return: { basis: "annual", unavailableReason: null, value: "0.151" },
series,
};
const meta = {
args: { data },
component: PerformanceView,
parameters: {
docs: {
description: {
component:
"Вкладка «Результат»: доходность, прибыль, те же деньги в индексе Мосбиржи и опережение. Синтетический серверный ответ без расчётов на клиенте.",
},
},
},
tags: ["autodocs"],
title: "Product/Performance",
} satisfies Meta<typeof PerformanceView>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Ahead: Story = {};
export const Behind: Story = {
args: {
data: {
...data,
currentValue: rub("1172400"),
outperformance: { money: rub("-215573"), percentagePoints: "-0.068" },
profit: rub("112400"),
return: { basis: "annual", unavailableReason: null, value: "0.04" },
},
},
};
export const ShortHistory: Story = {
args: {
data: {
...data,
benchmark: {
...data.benchmark,
return: { basis: "period", unavailableReason: null, value: "0.112" },
},
period: { days: 277, from: "2025-02-27", to: "2025-12-01" },
return: { basis: "period", unavailableReason: null, value: "0.074" },
},
},
};
export const Incomplete: Story = {
args: {
data: {
...data,
completeness: "incomplete",
excludedAccounts: [
{ accountId: "usd", name: "Валютный", reason: "PORTFOLIO_VALUATION_INCOMPLETE" },
],
},
},
};
@@ -0,0 +1,185 @@
import { LineChart } from "@mantine/charts";
import {
Accordion,
ActionIcon,
Alert,
Group,
Paper,
SimpleGrid,
Stack,
Text,
Title,
Tooltip,
} from "@mantine/core";
import { useTranslation } from "react-i18next";
import type { Performance } from "@/entities/performance";
import { formatChartValue, formatDate } from "@/shared/lib";
import { performanceVm } from "../../../../model/performance";
import classes from "./Performance.module.css";
const formatRub = (value: number) => `${formatChartValue(Math.round(value))} ₽`;
function PerformanceView({ data }: Readonly<{ data: Performance }>) {
const { t } = useTranslation();
const vm = performanceVm(data);
const basis = vm.basis === "annual"
? t("portfolio.performance.yearly")
: t("portfolio.performance.periodLabel", { days: vm.days });
const comparisonTone = vm.comparison?.points.tone ?? "neutral";
let comparisonTitle = t("portfolio.performance.marketEqual");
if (comparisonTone === "positive") comparisonTitle = t("portfolio.performance.marketAhead");
else if (comparisonTone === "negative") comparisonTitle = t("portfolio.performance.marketBehind");
const percentText = vm.returnValue.value;
const indexText = vm.indexReturn.value;
const currentLines = vm.currentPoint
? [{ color: "blue.6", label: t("portfolio.performance.current"), x: vm.currentPoint.date }]
: [];
const profitCaption = t("portfolio.performance.profitCaption", { current: vm.current, invested: vm.invested });
const chartLabel = [
`${t("portfolio.performance.invested")}: ${vm.invested}`,
`${t("portfolio.performance.benchmark")}: ${vm.indexValue}`,
`${t("portfolio.performance.current")}: ${vm.current}`,
`${t("portfolio.performance.returnLabel")}: ${percentText}`,
].join("; ");
return (
<Stack gap="md">
{vm.excluded.length > 0 && (
<Alert role="status" title={t("portfolio.performance.incomplete")}>
{vm.excluded.map(item => (
<Text key={item.id} size="sm">
{t("portfolio.performance.unavailableReason", item)}
</Text>
))}
</Alert>
)}
{vm.basis === "period" && (
<Alert role="status">
{t("portfolio.performance.periodNote", { days: vm.days })}
</Alert>
)}
<SimpleGrid cols={{ base: 1, lg: 4, sm: 2 }}>
<Paper component="dl" m={0} p="md" withBorder>
<Text component="dt" size="sm">{t("portfolio.performance.returnLabel")}</Text>
<Text className={classes[vm.returnValue.tone]} component="dd" fw={700} m={0} size="xl">
{percentText}
</Text>
<Text c="dimmed" size="xs">{vm.returnReason ?? basis}</Text>
</Paper>
<Paper component="dl" m={0} p="md" withBorder>
<Text component="dt" size="sm">{t("portfolio.performance.profit")}</Text>
<Text className={classes[vm.profit.tone]} component="dd" fw={700} m={0} size="xl">
{vm.profit.value}
</Text>
<Text c="dimmed" size="xs">{profitCaption}</Text>
</Paper>
<Paper component="dl" m={0} p="md" withBorder>
<Group gap="xs">
<Text component="dt" size="sm">{t("portfolio.performance.benchmark")}</Text>
<Tooltip
events={{ focus: true, hover: true, touch: true }}
label={t("portfolio.performance.benchmarkHint")}
multiline
w={280}
>
<ActionIcon
aria-label={t("portfolio.performance.benchmarkHint")}
size="xs"
variant="subtle"
>?
</ActionIcon>
</Tooltip>
</Group>
<Text component="dd" fw={700} m={0} size="xl">{indexText}</Text>
<Text c="dimmed" size="xs">
{vm.indexReason ?? `${basis} · ${vm.indexValue}`}
</Text>
</Paper>
<Paper component="dl" m={0} p="md" withBorder>
<Text component="dt" size="sm">
{comparisonTitle}
</Text>
<Text
className={classes[vm.comparison?.points.tone ?? "neutral"]}
component="dd"
fw={700}
m={0}
size="xl"
>
{vm.comparison?.points.value ?? "—"}
</Text>
<Text c="dimmed" size="xs">{vm.comparison?.money.value ?? vm.indexReason ?? vm.returnReason}</Text>
</Paper>
</SimpleGrid>
<Paper component="section" p="md" withBorder>
<Title mb="sm" order={2} size="h4">{t("portfolio.performance.chartTitle")}</Title>
{vm.series.length > 0
? (
<LineChart
aria-label={chartLabel}
curveType="linear"
data={vm.series}
dataKey="label"
gridAxis="y"
h={{ base: 220, sm: 300 }}
lineProps={{ isAnimationActive: false }}
referenceLines={currentLines}
series={[
{ color: "dark.4", label: t("portfolio.performance.invested"), name: "netInvested" },
{ color: "orange.6", label: t("portfolio.performance.benchmark"), name: "benchmarkValue" },
{ color: "gray.5", label: t("portfolio.performance.reference"), name: "referenceValue", strokeDasharray: "4 3" },
]}
tooltipAnimationDuration={0}
valueFormatter={formatRub}
yAxisProps={{ domain: [0, "auto"], width: 70 }}
/>
)
: <Text c="dimmed">{t("portfolio.performance.benchmarkUnavailable")}</Text>}
<Text c="dimmed" mt="sm" size="sm">
{t("portfolio.performance.missingHistory")}
</Text>
</Paper>
<Accordion variant="contained">
<Accordion.Item value="method">
<Accordion.Control>{t("portfolio.performance.calculation")}</Accordion.Control>
<Accordion.Panel>
<Text size="sm">
{t("portfolio.performance.datePeriod", { from: formatDate(`${vm.from}T00:00:00Z`), to: formatDate(`${vm.to}T00:00:00Z`) })}
</Text>
<Text mt="sm" size="sm">{t("portfolio.performance.method")}</Text>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Stack>
);
}
export { PerformanceView };
@@ -0,0 +1,193 @@
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen } from "@testing-library/react";
import { http, HttpResponse, type JsonBodyType } from "msw";
import { describe, expect, it, vi } from "vitest";
import type { Performance } from "@/entities/performance";
import { configureAuthClient } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { server } from "@/test/server";
import { PerformanceTab } from "./PerformanceTab";
const url = "*/api/v1/brokerage-accounts/:accountId/performance";
const rub = (value: string) => ({ currency: "RUB", value });
function performance(overrides: Partial<Performance> = {}): Performance {
return {
accountId: "account-1",
benchmark: {
asOf: "2025-12-31",
code: "MCFTRR",
return: { basis: "annual", unavailableReason: null, value: "0.048809" },
unavailableReason: null,
value: rub("110000"),
},
calculatedAt: "2026-01-01T00:00:00Z",
completeness: "complete",
currentValue: rub("121000"),
excludedAccounts: [],
netInvested: rub("100000"),
outperformance: { money: rub("11000"), percentagePoints: "0.051191" },
period: { days: 730, from: "2024-01-01", to: "2025-12-31" },
profit: rub("21000"),
reference: {
asOf: "2025-12-31",
code: "IMOEX",
return: { basis: "annual", unavailableReason: null, value: "0.02" },
unavailableReason: null,
value: rub("105000"),
},
return: { basis: "annual", unavailableReason: null, value: "0.1" },
series: [
{ benchmarkValue: "100000", date: "2024-01-01", netInvested: "100000", referenceValue: "100000" },
{ benchmarkValue: "110000", date: "2025-12-31", netInvested: "100000", referenceValue: "105000" },
],
...overrides,
};
}
function renderTab(body: JsonBodyType, status = 200) {
configureAuthClient({
accessToken: () => "test-token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
server.use(http.get(url, () => HttpResponse.json(body, { status })));
return render(
<QueryClientProvider client={createTestQueryClient()}>
<MantineProvider>
<PerformanceTab accountId="account-1" />
</MantineProvider>
</QueryClientProvider>,
);
}
const meta = { dependencies: [], unavailable: [] };
describe("PerformanceTab", () => {
it("shows return, profit, the same money in the index and outperformance with signs", async () => {
renderTab({ data: performance(), meta });
expect(await screen.findByText("+10,0 %")).toBeInTheDocument();
expect(screen.getByText("+21 000 ₽")).toBeInTheDocument();
expect(screen.getByText("+4,9 %")).toBeInTheDocument();
expect(screen.getByText("Опережение рынка")).toBeInTheDocument();
expect(screen.getByText("+5,1 п.п.")).toBeInTheDocument();
expect(screen.getByText("+11 000 ₽")).toBeInTheDocument();
// Index codes are allowed only inside "Как считали", not as captions.
expect(screen.getByText("Те же деньги в индексе Мосбиржи")).toBeInTheDocument();
expect(screen.queryByText("MCFTRR")).not.toBeInTheDocument();
});
it("labels lagging the market without colour-only meaning", async () => {
renderTab({
data: performance({
outperformance: { money: rub("-5000"), percentagePoints: "-0.02" },
}),
meta,
});
expect(await screen.findByText("Отставание от рынка")).toBeInTheDocument();
expect(screen.getByText("−2,0 п.п.")).toBeInTheDocument();
});
it("never says annual when history is shorter than a year", async () => {
renderTab({
data: performance({
benchmark: { ...performance().benchmark, return: { basis: "period", unavailableReason: null, value: "0.05" } },
period: { days: 200, from: "2025-06-14", to: "2025-12-31" },
return: { basis: "period", unavailableReason: null, value: "0.07" },
}),
meta,
});
expect(await screen.findByText(/проценты показаны за 200 дн\./)).toBeInTheDocument();
expect(screen.queryByText(/годовых/)).not.toBeInTheDocument();
});
it("lists excluded accounts when the all-accounts result is incomplete", async () => {
renderTab({
data: performance({
completeness: "incomplete",
excludedAccounts: [{ accountId: "usd", name: "Валютный", reason: "PORTFOLIO_VALUATION_INCOMPLETE" }],
}),
meta,
});
expect(await screen.findByText("Результат неполный")).toBeInTheDocument();
expect(screen.getByText("Валютный: Нет полной оценки портфеля")).toBeInTheDocument();
});
it("explains unavailability instead of showing zeros, including unknown reasons", async () => {
renderTab({
data: null,
meta: {
dependencies: [],
unavailable: [
{ accountId: "iis", name: "ИИС", reason: "HISTORY_START_UNKNOWN" },
{ accountId: "x", name: "Новый", reason: "SOMETHING_NEW" },
],
},
});
expect(await screen.findByText("Доходность недоступна")).toBeInTheDocument();
expect(screen.getByText("ИИС: Начало истории счёта неизвестно")).toBeInTheDocument();
expect(screen.getByText("Новый: Причину недоступности не удалось определить")).toBeInTheDocument();
expect(screen.queryByText(/0,0 %/)).not.toBeInTheDocument();
});
it("keeps profit and hides the comparison when the index is unavailable", async () => {
renderTab({
data: performance({
benchmark: {
asOf: null,
code: "MCFTRR",
return: { basis: "annual", unavailableReason: "INDEX_HISTORY_UNAVAILABLE", value: null },
unavailableReason: "INDEX_HISTORY_UNAVAILABLE",
value: null,
},
outperformance: null,
series: [],
}),
meta,
});
expect(await screen.findByText("+21 000 ₽")).toBeInTheDocument();
expect(screen.getByText("Сравнение с индексом сейчас недоступно")).toBeInTheDocument();
});
it("does not colour or call a rounded-to-zero difference outperformance", async () => {
renderTab({
data: performance({
outperformance: { money: rub("0"), percentagePoints: "-0.0004" },
}),
meta,
});
expect(await screen.findByText("Сравнение с рынком")).toBeInTheDocument();
expect(screen.getByText("0,0 п.п.")).toBeInTheDocument();
});
it("explains a pending sync when no account reasons are available", async () => {
renderTab({ data: null, meta });
expect(await screen.findByText(/ещё синхронизируются/)).toBeInTheDocument();
});
it("shows a local error with retry", async () => {
renderTab({ code: "INTERNAL_SERVER_ERROR", status: 500 }, 500);
expect(await screen.findByText("Не удалось загрузить результат инвестирования", {}, { timeout: 8000 })).toBeInTheDocument();
server.use(http.get(
url,
() => HttpResponse.json({ data: performance(), meta }),
));
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(await screen.findByText("+10,0 %")).toBeInTheDocument();
}, 10_000);
});
@@ -0,0 +1,66 @@
import { Button, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { usePerformance } from "@/entities/performance";
import { reasonText } from "../../../../model/performance";
import { PerformanceView } from "./Performance.view";
function PerformanceTab({ accountId }: Readonly<{ accountId: string }>) {
const { t } = useTranslation();
const query = usePerformance(accountId);
if (query.isPending) return (
<Stack aria-label={t("portfolio.performance.returnLabel")} gap="md">
<SimpleGrid cols={{ base: 1, lg: 4, sm: 2 }}>
{["rate", "profit", "benchmark", "difference"].map(key => (
<Paper key={key} p="md" withBorder>
<Skeleton h={14} mb="sm" w="60%" />
<Skeleton h={28} w="80%" />
</Paper>
))}
</SimpleGrid>
<Skeleton h={220} />
</Stack>
);
const onRetry = () => {
void query.refetch();
};
if (query.isError) return (
<Paper p="lg" withBorder>
<Stack align="flex-start" gap="sm">
<Text>{t("portfolio.performance.error")}</Text>
<Button onClick={onRetry} variant="light">
{t("portfolio.performance.retry")}
</Button>
</Stack>
</Paper>
);
if (!query.data.data) return (
<Paper p="xl" withBorder>
<Title order={2} size="h4">{t("portfolio.performance.unavailable")}</Title>
{query.data.meta.unavailable.length === 0 && (
<Text c="dimmed" mt="sm">{t("portfolio.performance.syncing")}</Text>
)}
{query.data.meta.unavailable.map(item => (
<Text c="dimmed" key={item.accountId} mt="sm">
{t("portfolio.performance.unavailableReason", {
name: item.name,
reason: reasonText(item.reason),
})}
</Text>
))}
</Paper>
);
return <PerformanceView data={query.data.data} />;
}
export { PerformanceTab };
@@ -4,20 +4,20 @@ import type { Portfolio } from "@/entities/portfolio";
import { PortfolioStructure } from "./PortfolioStructure";
const rub: Portfolio["structure"]["currencies"][number] = {
const rub: Portfolio["structure"] = {
categories: [
{ sharePercent: "52", type: "STOCK", value: "650000" },
{ sharePercent: "30", type: "BOND", value: "375000" },
{ sharePercent: "10", type: "OTHER", value: "125000" },
{ sharePercent: "8", type: "CASH", value: "100000" },
],
currency: "RUB",
hasNegativeValues: false,
totalValue: "1250000",
unvaluedCategories: [],
};
const meta = {
args: { structure: { currencies: [rub], unvaluedCategories: [] } },
args: { structure: rub },
component: PortfolioStructure,
parameters: {
docs: {
@@ -28,7 +28,7 @@ const meta = {
},
},
tags: ["autodocs"],
title: "Widgets/PortfolioStructure",
title: "Product/PortfolioStructure",
} satisfies Meta<typeof PortfolioStructure>;
export default meta;
@@ -36,60 +36,34 @@ export default meta;
type Story = StoryObj<typeof meta>;
export const Regular: Story = {};
export const MultipleCurrencies: Story = {
args: {
structure: {
currencies: [
rub,
{
categories: [{ sharePercent: "100", type: "CASH", value: "500" }],
currency: "USD",
hasNegativeValues: false,
totalValue: "500",
},
],
unvaluedCategories: [],
},
},
};
export const CashOnly: Story = {
args: {
structure: {
currencies: [
{
...rub,
categories: rub.categories.map(row => ({
...row,
sharePercent: row.type === "CASH" ? "100" : "0",
value: row.type === "CASH" ? "100000" : "0",
})),
currency: "RUB",
hasNegativeValues: false,
totalValue: "100000",
},
],
unvaluedCategories: [],
},
},
};
export const Empty: Story = {
args: { structure: { currencies: [], unvaluedCategories: [] } },
args: {
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
},
};
export const Incomplete: Story = {
args: {
structure: {
currencies: [
{
...rub,
categories: rub.categories.map(
row =>
({
...row,
sharePercent: null,
}),
),
},
],
categories: rub.categories.map(row => ({ ...row, sharePercent: null })),
unvaluedCategories: [{ count: 2, type: "STOCK" }],
},
},
@@ -97,7 +71,9 @@ export const Incomplete: Story = {
export const UnknownOnly: Story = {
args: {
structure: {
currencies: [],
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [{ count: 1, type: "BOND" }],
},
},
@@ -105,23 +81,14 @@ export const UnknownOnly: Story = {
export const Negative: Story = {
args: {
structure: {
currencies: [
{
...rub,
categories: rub.categories.map(
row =>
({
categories: rub.categories.map(row => ({
...row,
sharePercent: null,
value: row.type === "OTHER" ? "25000" : row.value,
}),
),
})),
hasNegativeValues: true,
totalValue: "1150000",
},
],
unvaluedCategories: [],
},
},
};
@@ -1,21 +1,21 @@
import { MantineProvider } from "@mantine/core";
import { fireEvent, render, screen, within } from "@testing-library/react";
import { render, screen, within } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { PortfolioStructure } from "./PortfolioStructure";
const rub: Portfolio["structure"]["currencies"][number] = {
const rub: Portfolio["structure"] = {
categories: [
{ sharePercent: "60", type: "STOCK", value: "60" },
{ sharePercent: "20", type: "BOND", value: "20" },
{ sharePercent: "0", type: "OTHER", value: "0" },
{ sharePercent: "20", type: "CASH", value: "20" },
],
currency: "RUB",
hasNegativeValues: false,
totalValue: "100",
unvaluedCategories: [],
};
const ui = (structure: null | Portfolio["structure"] | undefined) => (
@@ -39,7 +39,7 @@ describe("portfolio structure", () => {
screen.queryByText(/Нет положительной стоимости/),
).not.toBeInTheDocument();
expect(screen.queryByRole("list")).not.toBeInTheDocument();
view.rerender(ui({ currencies: [rub], unvaluedCategories: [] }));
view.rerender(ui(rub));
expect(screen.getByRole("list")).toHaveTextContent("Акции60 ₽60 %");
expect(
screen.queryByText("Данные о структуре портфеля пока недоступны."),
@@ -47,41 +47,23 @@ describe("portfolio structure", () => {
},
);
it("shows exact server amounts and cash-inclusive shares without hovering", () => {
render(ui({ currencies: [rub], unvaluedCategories: [] }));
render(ui(rub));
const list = screen.getByRole("list", { name: "Категории активов" });
expect(list).toHaveTextContent("Акции60 ₽60 %");
expect(list).toHaveTextContent("Свободные деньги20 ₽20 %");
expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
});
it("switches currencies and falls back when a refresh removes the selection", () => {
const usd = { ...rub, currency: "USD" };
const view = render(ui({ currencies: [rub, usd], unvaluedCategories: [] }));
fireEvent.click(
screen.getByRole("combobox", { name: "Валюта структуры портфеля" }),
);
fireEvent.click(screen.getByRole("option", { name: "USD" }));
expect(screen.getByRole("list")).toHaveTextContent("60 USD");
expect(screen.getByRole("list")).not.toHaveTextContent("₽");
view.rerender(ui({ currencies: [rub], unvaluedCategories: [] }));
expect(screen.getByRole("list")).toHaveTextContent("60 ₽");
expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
});
it("retains known amounts and names unvalued categories without inventing a zero", () => {
render(
ui({
currencies: [
{
...rub,
categories: rub.categories.map(
row =>
({
...row,
sharePercent: null,
}),
),
},
],
unvaluedCategories: [
{ count: 2, type: "OTHER" },
{ count: 1, type: "STOCK" },
@@ -89,10 +71,8 @@ describe("portfolio structure", () => {
}),
);
expect(screen.getByText(/Оценка неполная/)).toBeInTheDocument();
expect(screen.getByRole("list")).toHaveTextContent("Известно: 60 ₽");
expect(screen.getByRole("list")).toHaveTextContent(
"Другие активыНет оценки",
);
expect(screen.getByRole("list")).toHaveTextContent("АкцииИзвестно: 60 ₽");
expect(screen.getByRole("list")).toHaveTextContent("Другие активы");
expect(
screen.queryByLabelText(/Структура по типам/),
).not.toBeInTheDocument();
@@ -100,11 +80,8 @@ describe("portfolio structure", () => {
it("keeps negative amounts visible without a donut or invented positive shares", () => {
render(
ui({
currencies: [
{
...rub,
categories: rub.categories.map(
row =>
({
...row,
@@ -113,9 +90,6 @@ describe("portfolio structure", () => {
}),
),
hasNegativeValues: true,
},
],
unvaluedCategories: [],
}),
);
expect(screen.getByText(/Есть отрицательные/)).toBeInTheDocument();
@@ -128,20 +102,21 @@ describe("portfolio structure", () => {
).not.toBeInTheDocument();
});
it("handles unknown-only and empty compositions", () => {
const view = render(
ui({ currencies: [], unvaluedCategories: [{ count: 1, type: "BOND" }] }),
render(
ui({
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [{ count: 1, type: "BOND" }],
}),
);
expect(screen.getByText("Облигации: без оценки — 1")).toBeInTheDocument();
expect(screen.queryByRole("list")).not.toBeInTheDocument();
view.rerender(ui({ currencies: [], unvaluedCategories: [] }));
expect(screen.getByText(/Нет положительной стоимости/)).toBeInTheDocument();
});
it("keeps full decimal amounts and describes tiny shares", () => {
render(
ui({
currencies: [
{
...rub,
categories: [
{
@@ -150,9 +125,7 @@ describe("portfolio structure", () => {
value: "9007199254740993.000000001",
},
],
},
],
unvaluedCategories: [],
totalValue: "9007199254740993.000000001",
}),
);
expect(screen.getByRole("list")).toHaveTextContent(
@@ -1,5 +1,5 @@
import { DonutChart } from "@mantine/charts";
import { Box, Group, Paper, Select, Stack, Text, Title } from "@mantine/core";
import { Box, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { type FC, useId } from "react";
import { useTranslation } from "react-i18next";
@@ -7,11 +7,8 @@ import classes from "./PortfolioStructure.module.css";
type PortfolioStructureViewProps = {
chartData: StructureRow[];
currencies: string[];
currency: null | string;
incomplete: boolean;
negative: boolean;
onCurrencyChange: (currency: null | string) => void;
rows: StructureRow[];
unavailable: boolean;
unvalued: string[];
@@ -64,17 +61,6 @@ const PortfolioStructureView: FC<PortfolioStructureViewProps> = (props) => {
<Title id={titleId} order={2} size="h4">
{t("portfolio.structure.title")}
</Title>
{props.currencies.length > 1 && (
<Select
allowDeselect={false}
aria-label={t("portfolio.structure.currency")}
data={props.currencies}
onChange={props.onCurrencyChange}
value={props.currency}
w={112}
/>
)}
</Group>
<Text c="dimmed" size="sm">
@@ -110,11 +96,11 @@ const PortfolioStructureView: FC<PortfolioStructureViewProps> = (props) => {
</Text>
)}
<div className={appearanceClass} key={props.currency}>
<div className={appearanceClass}>
{props.chartData.length > 0 && (
<DonutChart
aria-label={t("portfolio.structure.chartLabel")}
chartLabel={props.currency ?? undefined}
chartLabel="₽"
data={props.chartData}
endAngle={-270}
pieChartProps={{ title: t("portfolio.structure.chartLabel") }}
@@ -1,6 +1,5 @@
import type { TFunction } from "i18next";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import type { Portfolio } from "@/entities/portfolio";
@@ -15,24 +14,15 @@ type PortfolioStructureProps = { structure?: null | Portfolio["structure"] };
const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
const { structure } = props;
const { t } = useTranslation();
const [currency, setCurrency] = useState<null | string>(null);
const selected
= structure?.currencies.find(item => item.currency === currency)
?? structure?.currencies[0];
const isIncomplete = (structure?.unvaluedCategories.length ?? 0) > 0;
const rows = portfolioRows(selected, structure, t);
const rows = portfolioRows(structure, t);
const chartData = rows.filter(row => row.value > 0);
return {
chartData,
currencies: structure?.currencies.map(item => item.currency) ?? [],
currency: selected?.currency ?? null,
incomplete: isIncomplete,
negative: selected?.hasNegativeValues ?? false,
onCurrencyChange: setCurrency,
negative: structure?.hasNegativeValues ?? false,
rows,
unavailable: !structure,
unvalued:
@@ -46,14 +36,12 @@ const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
};
function portfolioRows(
selected:
NonNullable<Portfolio["structure"]>["currencies"][number] | undefined,
structure: PortfolioStructureProps["structure"],
t: TFunction,
) {
if (!selected) return [];
if (!structure) return [];
return selected.categories.map((category) => {
return structure.categories.map((category) => {
const presentation = portfolioCategoryPresentation[category.type];
const percentage
@@ -61,16 +49,13 @@ function portfolioRows(
? undefined
: Number(category.sharePercent);
const unknown = structure?.unvaluedCategories.some(
const isUnknown = structure.unvaluedCategories.some(
item => item.type === category.type,
);
let amount = formatMoney({
currency: selected.currency,
value: category.value,
});
let amount = formatMoney({ currency: "RUB", value: category.value });
if (unknown) {
if (isUnknown) {
amount
= category.value === "0"
? t("portfolio.structure.unvalued")
@@ -12,6 +12,7 @@ const syntheticPosition
displayName: "Учебные технологии",
figi: null,
isin: null,
issuer: null,
logoName: null,
logoSrc: null,
quantity: "100",
@@ -19,6 +20,7 @@ const syntheticPosition
returnPercentText: "+25,00 %",
returnText: "+5 000 ₽",
returnTone: "positive",
sector: null,
shareText: "20%",
ticker: "DEMO",
type: "STOCK",
@@ -37,12 +37,14 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
displayName: `Инструмент ${index}`,
figi: null,
isin: null,
issuer: null,
logoName: null,
logoSrc: null,
quantity: "10",
returnPercent: null,
returnPercentText: null,
returnText: null,
sector: null,
shareText: null,
ticker: null,
type: kind === "stocks" ? "STOCK" : otherType,
@@ -1,6 +1,6 @@
import { MantineProvider } from "@mantine/core";
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter } from "react-router";
import { describe, expect, it, vi } from "vitest";
@@ -31,16 +31,26 @@ function configureTestAuth() {
});
}
function portfolioSummary(totals: { currency: string; value: string }[]) {
function portfolioSummary(totals: { currency: string; value: string }) {
return {
bondPositionCount: 1,
cashBalances: [],
cash: { currency: "RUB", value: "0" },
fundPositionCount: 0,
stockPositionCount: 0,
structure: { currencies: [], unvaluedCategories: [] },
structure: {
categories: [],
hasNegativeValues: false,
totalValue: "0",
unvaluedCategories: [],
},
totalPositionCount: 1,
totalsByCurrency: totals,
unrealizedReturnByCurrency: [],
totals,
unrealizedReturn: {
absolute: "0",
costBasis: "0",
partial: false,
percent: null,
},
};
}
@@ -59,23 +69,18 @@ function renderPage(queryClient: QueryClient) {
}
describe("AccountsPage", () => {
it("summarizes currencies separately and reports excluded accounts", async () => {
it("summarizes account totals 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" },
]),
portfolioSummary: portfolioSummary({ currency: "RUB", value: "100.10" }),
},
{
...account,
id: "account-2",
name: "Второй",
portfolioSummary: portfolioSummary([
{ currency: "RUB", value: "50.20" },
]),
portfolioSummary: portfolioSummary({ currency: "RUB", value: "50.20" }),
},
{
...account,
@@ -88,9 +93,9 @@ describe("AccountsPage", () => {
id: "account-4",
name: "Только деньги",
portfolioSummary: {
...portfolioSummary([{ currency: "RUB", value: "25" }]),
...portfolioSummary({ currency: "RUB", value: "25" }),
bondPositionCount: 0,
cashBalances: [{ currency: "RUB", value: "25" }],
cash: { currency: "RUB", value: "25" },
totalPositionCount: 0,
},
},
@@ -99,7 +104,7 @@ describe("AccountsPage", () => {
id: "account-5",
name: "Без сумм",
portfolioSummary: {
...portfolioSummary([]),
...portfolioSummary({ currency: "RUB", value: "0" }),
totalPositionCount: 0,
},
},
@@ -110,7 +115,8 @@ describe("AccountsPage", () => {
renderPage(client);
expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
expect(screen.queryByText("Ваши инвестиции по счетам"))
.not.toBeInTheDocument();
expect(screen.getByText("5 счетов")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getByText(
@@ -261,6 +267,101 @@ describe("AccountsPage", () => {
});
});
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
describe("exhausted read retries", () => {
it(
"keeps the cached list, warns and retries the same accounts GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requests += 1;
if (isFailing)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json(resource([account]));
}),
);
const queryClient = createTestQueryClient();
renderPage(queryClient);
await screen.findByText("Основной");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Основной")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(screen.getByText("Основной")).toBeInTheDocument();
},
);
it(
"offers retry on the unavailable state after an initial failure",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([account]))),
);
renderPage(createTestQueryClient());
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Основной")).toBeInTheDocument();
},
);
it("does not offer a plain retry when the connection is lost", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json({ code: "TBANK_NOT_CONNECTED" }, { status: 409 })),
);
renderPage(createTestQueryClient());
expect(await screen.findByRole("link", { name: "Открыть настройки T-Bank" }))
.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
it.each(["none", "failed"] as const)(
"keeps incomplete empty membership distinct from no accounts (attempt=%s)",
async (state) => {
@@ -1,21 +1,22 @@
import type { FC } from "react";
import { useAccountsPageViewModel } from "./AccountsPage.vm";
import { useAccountsPageVm } from "./AccountsPage.vm";
import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
import { AccountsPageError } from "./components/AccountsPageError.view";
import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
const AccountsPage: FC = () => {
const viewModel = useAccountsPageViewModel();
if (viewModel.state === "loading") return <AccountsPageLoading />;
if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
if (viewModel.state === "empty") return <AccountsPageEmpty />;
const vm = useAccountsPageVm();
if (vm.state === "loading") return <AccountsPageLoading />;
if (vm.state === "error") return <AccountsPageError {...vm} />;
if (vm.state === "empty") return <AccountsPageEmpty />;
return (
<AccountsPageLoaded
accounts={viewModel.accounts}
meta={viewModel.meta}
accounts={vm.accounts}
meta={vm.meta}
readRetry={vm.readRetry}
/>
);
};
@@ -4,12 +4,24 @@ import {
useBrokerageAccounts,
} from "@/entities/brokerage-account";
import { useScreenSync } from "@/features/tbank-connection";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
readRetry,
} from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib";
type AccountsPageReadRetry = ReturnType<typeof readRetry>;
type AccountsPageViewModel
= | { accounts: BrokerageAccountCard[]; meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>; state: "loaded" }
| { code?: string; state: "error" }
= | {
accounts: BrokerageAccountCard[];
meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>;
readRetry: AccountsPageReadRetry;
state: "loaded";
}
| { code?: string; readRetry: AccountsPageReadRetry; state: "error" }
| { state: "empty" }
| { state: "loading" };
@@ -18,11 +30,12 @@ function isAccountsAccessFailure(code?: string) {
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountsPageViewModel(): AccountsPageViewModel {
function useAccountsPageVm(): AccountsPageViewModel {
const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]);
const code = apiErrorCode(accounts.error);
const retry = readRetry([accounts]);
const isAccessFailure = isAccountsAccessFailure(code);
const hasResult = !!accounts.data
@@ -36,12 +49,13 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
isFetching: accounts.isFetching,
});
if (isAccessFailure) return { code, state: "error" as const };
if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (!hasResult || !accounts.data)
return {
state: availability === "unavailable" ? "error" : "loading",
} as const;
return availability === "unavailable"
? { code, readRetry: retry, state: "error" as const }
: { state: "loading" as const };
if (accounts.data.length === 0)
return {
@@ -54,8 +68,9 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
return {
accounts: brokerageAccountCards(accounts.data, meta.dependencies),
meta,
readRetry: retry,
state: "loaded" as const,
};
}
export { useAccountsPageViewModel };
export { useAccountsPageVm };

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