16 Commits
Author SHA1 Message Date
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
codex-bot 71126c91f0 feat: group all-account rows by instrument and day (WealthLedger/main#47) (#126)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 6m1s
2026-10-30 07:28:19 +03:00
codex-bot 6792f5b70a fix: show history loading alert only while loading (WealthLedger/frontend#124) (#125)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 11s
Frontend verify / verify (push) Failing after 6m57s
2026-10-28 21:00:45 +03:00
codex-bot 32e8fe9402 refactor: derive api error codes from contract (WealthLedger/backend#117) (#123)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 6m30s
2026-10-28 17:31:22 +03:00
codex-bot 5796d2d789 fix: stabilize auth client registration (WealthLedger/frontend#95) (#122)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 6m58s
2026-10-28 16:59:09 +03:00
codex-bot a56edf2b37 fix: show account source sync status (WealthLedger/frontend#120) (#121)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 7m0s
2026-10-28 16:34:19 +03:00
codex-bot 1d4990491f fix: round money to currency minor units without negative zero (WealthLedger/frontend#118) (#119)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m26s
2026-10-28 08:45:55 +03:00
ksv741 431559be0f feat: show return, cash and structure on account cards (#114)
Frontend verify / commits (pull_request) Successful in 29s
Frontend verify / security (pull_request) Successful in 8s
Frontend verify / verify (pull_request) Successful in 5m25s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m20s
2026-10-27 05:29:11 +03:00
ksv741 0e4bbec2a7 chore: sync brokerage accounts contract (WealthLedger/backend#138) 2026-10-27 05:29:11 +03:00
ksv741 c24704affa feat: make brokerage account list compact (#111) 2026-10-27 05:29:11 +03:00
codex-bot 58b4e12633 test: pin date in all accounts events test (#115)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 9s
Frontend verify / verify (push) Failing after 5m7s
2026-10-27 05:27:14 +03:00
codex-bot 3075081df1 feat: replace account page accordion with tabs and show open position result (#112)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 20s
Frontend verify / verify (push) Failing after 6m36s
2026-10-26 20:30:35 +03:00
codex-bot 1a92f023c1 feat: remove top header and rework mobile bottom navigation (#109)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 12s
Frontend verify / verify (push) Failing after 7m7s
2026-10-25 18:25:10 +03:00
ksv741 df86b8450f chore(release): 1.2.1
Frontend verify / commits (pull_request) Successful in 40s
Frontend verify / security (pull_request) Successful in 11s
Frontend verify / verify (pull_request) Successful in 7m15s
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 13s
Frontend verify / verify (push) Successful in 7m48s
Frontend image / publish (push) Successful in 9m17s
2026-10-24 19:15:04 +03:00
89 changed files with 5385 additions and 1061 deletions
+3
View File
@@ -13,6 +13,9 @@
!public/**
!docker/
!docker/**
!scripts/
!scripts/minimatch-compat/
!scripts/minimatch-compat/**
!packages/
!packages/tokens/
!packages/tokens/package.json
+1 -1
View File
@@ -66,7 +66,7 @@ jobs:
- name: Verify pre-commit secret blocking and redaction
run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs
- name: Audit runtime and development dependencies
run: npm audit --include=dev --audit-level=low
run: npm audit --include=dev --audit-level=moderate
verify:
needs: [commits, security]
+45
View File
@@ -1,5 +1,50 @@
# Changelog
## [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
* keep session when refresh fails on network error or 5xx (WealthLedger/frontend[#97](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/97)) ([3af9df0](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3af9df0ae2f0fb314c276504ef7d50a7472de680))
* show snapshot time in browser time zone ([#101](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/101)) ([b009101](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b009101b7b954e8462672a9da859267ebb71edc4))
### Maintenance
* bump Node to 24.22.1 (WealthLedger/backend[#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([2cd6b1e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2cd6b1e72d97117b0c37465aac3d989b0469c1c3))
* bump test stack and fix npm audit findings ([#105](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/105)) ([7e6fd95](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7e6fd95cfaf7d288242fb46ec7091f561e6f3de5))
* **deps:** update non-major dependencies [#9](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/9) ([b5ceb77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b5ceb77208e35a0e389258f3d3c4b85852980042))
* resolve dev dependency audit findings (WealthLedger/frontend[#103](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/103)) ([7b6f34c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7b6f34c776fa3517c93b5c3468e3b277aaa6273f))
## [1.2.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.1.0...v1.2.0) (2026-10-18)
### Features
+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 -3
View File
@@ -123,10 +123,12 @@ Chromium при ширинах 375 и 1280 px. Browser project не исполь
Новый запуск отменяет устаревший для того же PR/ветки и типа события
(требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
`npm audit --include=dev --audit-level=low`. Любой advisory блокирует security job;
исключений frontend нет. Локально можно выполнить те же команды:
`npm audit --include=dev --audit-level=moderate`. Advisory уровня moderate и выше
блокирует security job; low не блокирует, т.к. для них часто нет исправленной версии
(например, GHSA-gcqx-w48m-w2h4 в build-only deepmerge). Других исключений нет.
Локально можно выполнить те же команды:
`gitleaks git --log-opts=--all --redact=100 --no-banner` и
`npm audit --include=dev --audit-level=low`. Audit требует доступа к npm registry;
`npm audit --include=dev --audit-level=moderate`. Audit требует доступа к npm registry;
проверка секретов выполняется локально и не выводит их значения.
Имена jobs `commits`, `security`, `verify` сохранены, но Gitea включает имя
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>WealthLedger</title>
</head>
<body>
+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.0",
"version": "1.3.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wealth-ledger-frontend",
"version": "1.2.0",
"version": "1.3.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.0",
"version": "1.3.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,
+7 -2
View File
@@ -16,7 +16,7 @@ type EntryCardProps = {
tone: "negative"
| "neutral"
| "positive";
value: string;
value: ReactNode;
valueLabel: string;
wrap?: boolean;
};
@@ -32,6 +32,7 @@ const EntryCard: FC<EntryCardProps> = (props) => {
const valueContainerClass = props.actions ? classes.valueFooter : undefined;
const valueLabelClass = `${classes[props.tone]} ${props.actions ? classes.valueLabel : ""}`;
const valueComponent = typeof props.value === "string" ? undefined : "div";
return (
<Paper
@@ -63,7 +64,11 @@ const EntryCard: FC<EntryCardProps> = (props) => {
</Stack>
<Stack className={classes.value} gap={2}>
<Text className={classes[props.tone]} fw={700}>
<Text
className={classes[props.tone]}
component={valueComponent}
fw={700}
>
{props.value}
</Text>
+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"
}
}
+16 -9
View File
@@ -11,7 +11,7 @@ import {
} from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, useLocation } from "react-router";
import { beforeEach, describe, expect, it } from "vitest";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { BrokerageOperation } from "@/entities/broker-operation";
import type { IncomeAnalytics } from "@/entities/income";
@@ -46,8 +46,10 @@ const position: Portfolio["positions"][number]
displayName: "Сбербанк",
figi: "SBER",
isin: null,
issuer: null,
logoName: null,
quantity: "2",
sector: null,
ticker: "SBER",
type: "STOCK",
};
@@ -145,6 +147,7 @@ function renderPage(path: string) {
return client;
}
afterEach(() => vi.useRealTimers());
beforeEach(() => {
server.use(
http.post("*/api/v1/auth/refresh", () =>
@@ -271,6 +274,8 @@ describe("All accounts routes", () => {
);
it("restores applied dates when switching accounts in events", async () => {
vi.useFakeTimers({ toFake: ["Date"] });
vi.setSystemTime(new Date("2026-10-15T12:00:00Z"));
// The events calendar blocks past dates, so pick within selectable dates.
const search = `?from=${defaultPeriod()[0]}&to=${defaultPeriod()[1]}`;
renderPage(`/accounts/all/events${search}`);
@@ -303,14 +308,16 @@ describe("All accounts routes", () => {
"href",
`/accounts/${account.id}`,
);
for (const suffix of ["operations", "income", "events"])
expect(
screen
.getAllByRole("link")
.find(
link => link.getAttribute("href") === `/accounts/all/${suffix}`,
),
).toBeInTheDocument();
for (const [suffix, tab] of [
["operations", "Операции"],
["income", "Доход"],
["events", "События"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" }))
.toHaveAttribute("href", `/accounts/all/${suffix}`);
}
});
it("switches accounts within operations with applied filters and a fresh cursor", async () => {
+3 -2
View File
@@ -232,7 +232,8 @@ describe("AppRoutes", () => {
}),
).toBeInTheDocument();
expect(
screen.getByRole("navigation", { name: "WealthLedger" }),
).toBeInTheDocument();
screen.getAllByRole("navigation", { name: "Основная навигация" }),
).toHaveLength(2);
expect(screen.queryByRole("banner")).not.toBeInTheDocument();
});
});
+84 -18
View File
@@ -1,12 +1,22 @@
.root {
--bottom-nav-height: 56px;
}
.content {
max-width: 1120px;
margin-inline: auto;
}
.header {
.brand {
align-items: center;
border-bottom: 1px solid var(--mantine-color-gray-3);
display: flex;
padding: 0 var(--mantine-spacing-md);
min-height: 60px;
padding-inline: var(--mantine-spacing-sm);
}
.navList {
padding: var(--mantine-spacing-sm);
}
.bottomNav {
@@ -52,29 +62,85 @@
.bottomNav {
background: var(--mantine-color-white);
border-top: 1px solid var(--mantine-color-gray-3);
bottom: 0;
display: flex;
justify-content: space-around;
left: 0;
padding: var(--mantine-spacing-xs) 2px;
gap: 2px;
font-size: 11px;
& a {
min-width: 0;
padding: 8px 2px;
text-align: center;
}
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
inset: auto 0 0;
min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-inline:
max(4px, env(safe-area-inset-left, 0px))
max(4px, env(safe-area-inset-right, 0px));
position: fixed;
right: 0;
z-index: 200;
z-index: var(--mantine-z-index-app);
}
.bottomNavItem {
align-items: center;
color: var(--mantine-color-gray-7);
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
min-height: var(--bottom-nav-height);
min-width: 0;
text-decoration: none;
&:active .iconPill {
background-color: var(--mantine-color-gray-1);
}
&:focus-visible {
outline: 2px solid var(--mantine-primary-color-filled);
outline-offset: -2px;
}
}
@media (hover: hover) {
.bottomNavItem:hover .iconPill {
background-color: var(--mantine-color-gray-1);
}
}
.iconPill {
align-items: center;
border-radius: 14px;
display: inline-flex;
height: 28px;
justify-content: center;
width: 48px;
}
.bottomNavLabel {
font-size: 12px;
font-weight: 500;
line-height: 16px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.bottomNavItem,
.iconPill {
transition:
background-color 150ms ease-in-out,
color 150ms ease-in-out;
}
}
.active {
color: var(--mantine-primary-color-filled);
font-weight: 600;
& .iconPill {
background-color: var(--mantine-primary-color-light);
}
}
.main {
padding-bottom: 5rem;
padding-bottom: calc(
var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) +
var(--mantine-spacing-md)
);
}
}
+47
View File
@@ -0,0 +1,47 @@
import { MantineProvider } from "@mantine/core";
import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import { AppShell } from "./AppShell";
function renderShell(path: string) {
return render(
<MantineProvider>
<MemoryRouter initialEntries={[path]}>
<AppShell />
</MemoryRouter>
</MantineProvider>,
);
}
describe("AppShell", () => {
it("has no header banner", () => {
renderShell("/cards");
expect(screen.queryByRole("banner")).not.toBeInTheDocument();
});
it("marks only the current bottom navigation item", () => {
renderShell("/cards");
const bottomNav = screen
.getAllByRole("navigation", { name: "Основная навигация" })
.at(-1);
if (!bottomNav) {
throw new Error("Bottom navigation is not rendered");
}
const links = within(bottomNav).getAllByRole("link");
expect(links).toHaveLength(5);
expect(within(bottomNav).getByRole("link", { name: "Карты" })).toHaveAttribute(
"aria-current",
"page",
);
expect(
within(bottomNav).getByRole("link", { name: "Счета" }),
).not.toHaveAttribute("aria-current");
});
});
+49 -42
View File
@@ -17,6 +17,12 @@ type AppShellProps = {
contentAboveOutlet?: ReactNode;
};
function getBottomNavItemClass({ isActive }: { isActive: boolean }) {
return isActive
? `${classes.bottomNavItem} ${classes.active}`
: classes.bottomNavItem;
}
const AppShell: FC<AppShellProps> = (props) => {
const { contentAboveOutlet } = props;
const { t } = useTranslation();
@@ -24,31 +30,31 @@ const AppShell: FC<AppShellProps> = (props) => {
const items = [
{
icon: <PortfolioIcon size={20} />,
Icon: PortfolioIcon,
iconClassName: classes.portfolioIcon,
label: t("navigation.accounts"),
to: "/accounts",
},
{
icon: <CardsIcon size={20} />,
Icon: CardsIcon,
iconClassName: classes.cardsIcon,
label: t("navigation.cards"),
to: "/cards",
},
{
icon: <StocksIcon size={20} />,
Icon: StocksIcon,
iconClassName: classes.stocksIcon,
label: t("navigation.stocks"),
to: "/stocks",
},
{
icon: <BondsIcon size={20} />,
Icon: BondsIcon,
iconClassName: classes.bondsIcon,
label: t("navigation.bonds"),
to: "/bonds",
},
{
icon: <SettingsIcon size={20} />,
Icon: SettingsIcon,
iconClassName: classes.settingsIcon,
label: t("navigation.settings"),
to: "/settings",
@@ -57,32 +63,32 @@ const AppShell: FC<AppShellProps> = (props) => {
return (
<MantineAppShell
header={{ height: 60 }}
className={classes.root}
navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
padding="md"
>
<MantineAppShell.Header className={classes.header}>
<Text fw={700}>{t("appName")}</Text>
</MantineAppShell.Header>
<MantineAppShell.Navbar aria-label={t("navigation.primary")}>
<div className={classes.brand}>
<Text fw={700}>{t("appName")}</Text>
</div>
<MantineAppShell.Navbar p="sm">
{items.map(item => (
<NavLink
active={pathname.startsWith(item.to)}
className={classes.navLink}
component={RouterNavLink}
key={item.to}
label={item.label}
leftSection={(
<span
className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
>
{item.icon}
</span>
)}
to={item.to}
/>
))}
<div className={classes.navList}>
{items.map(item => (
<NavLink
active={pathname.startsWith(item.to)}
className={classes.navLink}
component={RouterNavLink}
key={item.to}
label={item.label}
leftSection={(
<span className={`${classes.navIcon} ${item.iconClassName}`}>
<item.Icon size={20} />
</span>
)}
to={item.to}
/>
))}
</div>
</MantineAppShell.Navbar>
<MantineAppShell.Main className={classes.main}>
@@ -93,22 +99,23 @@ const AppShell: FC<AppShellProps> = (props) => {
</div>
</MantineAppShell.Main>
<nav aria-label={t("appName")} className={classes.bottomNav}>
{items.map((item) => {
const appearanceClass = pathname.startsWith(item.to)
? classes.active
: undefined;
<nav
aria-label={t("navigation.primary")}
className={classes.bottomNav}
>
{items.map(item => (
<RouterNavLink
className={getBottomNavItemClass}
key={item.to}
to={item.to}
>
<span className={classes.iconPill}>
<item.Icon size={24} />
</span>
return (
<RouterNavLink
className={appearanceClass}
key={item.to}
to={item.to}
>
{item.label}
</RouterNavLink>
);
})}
<span className={classes.bottomNavLabel}>{item.label}</span>
</RouterNavLink>
))}
</nav>
</MantineAppShell>
);
+2
View File
@@ -5,5 +5,7 @@ export {
type OperationCategory,
useBrokerageOperations,
} from "./api/useBrokerageOperations";
export { brokerageOperationGroupKey } from "./model/display";
export { useBrokerageOperationHistory } from "./model/useBrokerageOperationHistory";
export { LedgerEntryRow } from "./ui/LedgerEntryRow";
export { OperationGroup } from "./ui/OperationGroup";
@@ -1,9 +1,12 @@
import { expect, it } from "vitest";
import { describe, expect, it } from "vitest";
import { operationLabelKey } from "./display";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { brokerageOperationGroupKey, operationLabelKey } from "./display";
it.each([
["OPERATION_TYPE_BUY", "buy"],
["OPERATION_TYPE_COUPON", "other"],
["OPERATION_TYPE_BUY_CARD", "buy"],
["OPERATION_TYPE_BUY_MARGIN", "buy"],
["OPERATION_TYPE_SELL", "sell"],
@@ -21,3 +24,71 @@ it.each([
])("preserves the wire operation label for %s", (type, label) => {
expect(operationLabelKey(type)).toBe(`ledger.operationType.${label}`);
});
describe("brokerageOperationGroupKey", () => {
const base: BrokerageOperation = {
account: { id: "account-1", name: "Брокерский" },
accruedInterest: null,
category: "income",
commission: null,
description: "Купон",
figi: "FIGI",
id: "operation",
instrumentType: "bond",
instrumentUid: "UID",
logoName: null,
occurredAt: "2026-08-14T10:00:00Z",
payment: null,
price: null,
quantity: null,
ticker: "BOND",
type: "OPERATION_TYPE_COUPON",
};
it("uses screen day, preferred identity and exact type, not account", () => {
const first = brokerageOperationGroupKey(base);
const same = brokerageOperationGroupKey({
...base,
account: { id: "account-2", name: "ИИС" },
figi: "OTHER-FIGI",
occurredAt: "2026-08-14T11:00:00Z",
});
expect(same).toBe(first);
expect(brokerageOperationGroupKey({
...base,
type: "OPERATION_TYPE_DIVIDEND",
})).not.toBe(first);
});
it("keeps buy and sell of one instrument in different groups", () => {
expect(brokerageOperationGroupKey({ ...base, type: "OPERATION_TYPE_BUY" }))
.not.toBe(brokerageOperationGroupKey({
...base,
type: "OPERATION_TYPE_SELL",
}));
});
it("separates local midnight and joins one local day across UTC dates", () => {
const before = new Date(2026, 7, 14, 23, 59).toISOString();
const after = new Date(2026, 7, 15, 0, 1).toISOString();
const morning = new Date(2026, 7, 14, 1).toISOString();
const evening = new Date(2026, 7, 14, 23).toISOString();
expect(brokerageOperationGroupKey({ ...base, occurredAt: before }))
.not.toBe(brokerageOperationGroupKey({ ...base, occurredAt: after }));
expect(brokerageOperationGroupKey({ ...base, occurredAt: morning }))
.toBe(brokerageOperationGroupKey({ ...base, occurredAt: evening }));
});
it("falls back to FIGI and leaves missing identity ungrouped", () => {
expect(brokerageOperationGroupKey({ ...base, instrumentUid: null }))
.toBe(brokerageOperationGroupKey({ ...base, instrumentUid: "" }));
expect(brokerageOperationGroupKey({
...base,
figi: null,
instrumentUid: null,
})).toBeNull();
});
});
+22 -2
View File
@@ -1,4 +1,4 @@
import { formatMoney } from "@/shared/lib";
import { formatMoney, formatSnapshotDay } from "@/shared/lib";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
@@ -27,6 +27,19 @@ type PaymentPresentation = {
| "positive";
};
function brokerageOperationGroupKey(
operation: BrokerageOperation,
): null | string {
const identity = operation.instrumentUid || operation.figi;
if (!identity) return null;
return JSON.stringify([
formatSnapshotDay(operation.occurredAt),
identity,
operation.type,
]);
}
function entryLabelKey(operation: BrokerageOperation): string {
if (operation.category === "income")
return isOperationType(operation.type, OperationType.Coupon)
@@ -115,4 +128,11 @@ function paymentPresentation(
};
}
export { isIncomePayment, operationLabelKey, paymentPresentation };
export {
brokerageOperationGroupKey,
entryLabelKey,
isIncomePayment,
isZeroDecimal,
operationLabelKey,
paymentPresentation,
};
@@ -0,0 +1,131 @@
import { MantineProvider } from "@mantine/core";
import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { OperationGroup } from "./OperationGroup";
function operation(
id: string,
account: { id: string; name: string },
value: null | string,
currency = "RUB",
): BrokerageOperation {
return {
account,
accruedInterest: null,
category: "income",
commission: null,
description: "Купон",
figi: "FIGI",
id,
instrumentType: "bond",
instrumentUid: "UID",
logoName: null,
occurredAt: "2026-08-14T10:00:00Z",
payment: value === null ? null : { currency, value },
price: null,
quantity: null,
ticker: "BOND",
type: "OPERATION_TYPE_COUPON",
};
}
function renderGroup(
operations: BrokerageOperation[],
isTotalVisible = true,
) {
return render(
<MantineProvider>
<MemoryRouter>
<ul>
<OperationGroup
entries={operations.map((operation, index) => ({
key: `${operation.id}-${index}`,
operation,
}))}
totalVisible={isTotalVisible}
/>
</ul>
</MemoryRouter>
</MantineProvider>,
);
}
describe("OperationGroup", () => {
it("shows the header, exact total and separate card rows per account", () => {
renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "0.1"),
operation("2", { id: "iis", name: "ИИС" }, "0.2"),
]);
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+0,3 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
}));
expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument();
});
it("announces the hidden total as unavailable", () => {
renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "100"),
operation("2", { id: "iis", name: "ИИС" }, null),
]);
expect(screen.getByRole("list", {
name: /Купон · BOND, Исполнено .*Итог недоступен/,
})).toBeInTheDocument();
});
it.each(["0", "0.000"])(
"hides the whole total for a zero source amount (%s)",
(value) => {
renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, value),
operation("2", { id: "iis", name: "ИИС" }, "100"),
]);
expect(screen.getAllByText("+100 ₽")).toHaveLength(1);
expect(screen.getByText("Итог недоступен")).toBeInTheDocument();
},
);
it("hides the total for incomplete data but keeps compensated zero", () => {
const { unmount } = renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "100"),
operation("2", { id: "iis", name: "ИИС" }, "100"),
], false);
expect(screen.queryByText("+200 ₽")).not.toBeInTheDocument();
unmount();
renderGroup([
operation("1", { id: "broker", name: "Брокерский" }, "100"),
operation("2", { id: "iis", name: "ИИС" }, "-100"),
]);
expect(screen.getByText("0 ₽")).toBeInTheDocument();
});
it("renders repeated ids inside one group as separate rows", () => {
renderGroup([
operation("same", { id: "broker", name: "Брокерский" }, "10"),
operation("same", { id: "iis", name: "ИИС" }, "20"),
]);
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { name: /Купон/ }));
expect(accounts.getAllByText("Брокерский")).toHaveLength(1);
expect(accounts.getAllByText("ИИС")).toHaveLength(1);
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
});
});
@@ -0,0 +1,96 @@
import type { FC } from "react";
import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import {
formatSnapshotDay,
instrumentLogoUrl,
sumMoney,
totalText,
} from "@/shared/lib";
import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import {
entryLabelKey,
isZeroDecimal,
operationLabelKey,
paymentPresentation,
} from "../model/display";
type OperationGroupProps = {
entries: { key: string; operation: BrokerageOperation }[];
totalVisible: boolean;
};
const OperationGroup: FC<OperationGroupProps> = (props) => {
const { t } = useTranslation();
const operations = props.entries.map(entry => entry.operation);
const first = operations.at(0);
// groupItems only emits groups of at least two entries.
if (!first) return null;
const typeLabel = t(first.category === "income"
? entryLabelKey(first)
: operationLabelKey(first.type));
const instrument
= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
const amounts = operations.flatMap(operation =>
operation.payment ? [operation.payment] : [],
);
const isAmountsKnown = amounts.length === operations.length
&& amounts.every(amount => !isZeroDecimal(amount.value));
const totals = isAmountsKnown && props.totalVisible
? sumMoney(amounts)
: null;
const date = formatSnapshotDay(first.occurredAt);
const title = `${typeLabel} · ${instrument}`;
const totalsText = totalText(totals, true);
const accessibleName = [
title,
t("payout.executedAt", { date }),
totalsText || t("entryGroup.totalUnavailable"),
].join(", ");
return (
<EntryGroup
header={(
<EntryCard
imageSrc={instrumentLogoUrl(first.logoName)}
initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
metadata={t("payout.executedAt", { date })}
title={title}
tone="neutral"
value={<EntryGroupTotal isSigned totals={totals} />}
valueLabel={typeLabel}
wrap
/>
)}
label={accessibleName}
>
{props.entries.map(({ key, operation }) => {
const payment = paymentPresentation(operation);
return (
<AccountCardRow
accountName={operation.account?.name ?? "—"}
key={key}
value={payment.amount}
valueLabel={t(payment.label)}
/>
);
})}
</EntryGroup>
);
};
export { OperationGroup };
@@ -8,11 +8,15 @@ const VISIBLE_CURRENCY_LIMIT = 2;
type BrokerageAccountCard = {
account: BrokerageAccount;
positionCounts: null
| { bonds: number; stocks: number };
positionCounts: null | PositionCounts;
source?: NonNullable<InvestmentResourceMeta["dependencies"]>[number];
summary:
| { remainingCurrencyCount: number; state: "available"; totals: Money[] }
| {
portfolio: NonNullable<BrokerageAccount["portfolioSummary"]>;
remainingCurrencyCount: number;
state: "available";
totals: Money[];
}
| { state: "empty" }
| { state: "unavailable" };
};
@@ -21,6 +25,8 @@ type Money = NonNullable<
BrokerageAccount["portfolioSummary"]
>["totalsByCurrency"][number];
type PositionCounts = { bonds: number; stocks: number; total: number };
function accountTypeKey(type: BrokerageAccount["type"]) {
return `accounts.types.${type}` as const;
}
@@ -48,6 +54,7 @@ function brokerageAccountCards(
const positionCounts = {
bonds: summary.bondPositionCount,
stocks: summary.stockPositionCount,
total: summary.totalPositionCount,
};
if (summary.totalsByCurrency.length === 0)
@@ -58,6 +65,7 @@ function brokerageAccountCards(
positionCounts,
source,
summary: {
portfolio: summary,
remainingCurrencyCount: Math.max(
summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT,
0,
@@ -1,166 +1,144 @@
.list {
display: grid;
width: 100%;
margin: 0;
padding: 0;
gap: var(--mantine-spacing-sm);
list-style: none;
}
.card {
min-width: 0;
gap: var(--mantine-spacing-xl);
background: var(--mantine-color-white);
border-color: var(--mantine-color-gray-3);
box-shadow: 0 4px 16px rgb(15 23 42 / 3%);
.row {
display: grid;
grid-template-areas:
"identity balance"
"details balance"
"structure structure";
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
align-items: center;
padding: var(--mantine-spacing-lg);
border: 1px solid var(--wl-color-border);
border-left: 3px solid var(--wl-color-primary);
border-radius: var(--mantine-radius-md);
background: var(--wl-color-surface);
color: inherit;
text-decoration: none;
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
transition: background-color 160ms ease, border-color 160ms ease;
}
.card:hover,
.card:focus-visible {
border-color: var(--mantine-color-blue-3);
box-shadow: 0 12px 28px rgb(15 23 42 / 8%);
transform: translateY(-3px);
.row:hover,
.row:focus-visible {
border-color: var(--wl-color-primary);
background: var(--wl-color-subtle);
}
.card:focus-visible {
outline: 2px solid var(--mantine-color-blue-6);
outline-offset: 3px;
.row:focus-visible {
outline: 2px solid var(--wl-color-primary);
outline-offset: -2px;
}
.identity {
grid-area: identity;
min-width: 0;
}
.kicker {
padding: 5px 10px;
border-radius: var(--mantine-radius-sm);
background: var(--mantine-color-blue-0);
color: var(--mantine-color-blue-8);
letter-spacing: 0.02em;
}
.accountIcon {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--mantine-color-blue-5);
}
.name {
margin: 0;
font-size: var(--mantine-h3-font-size);
line-height: 1.3;
color: var(--wl-color-text);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-md);
overflow-wrap: anywhere;
}
.accountType {
flex-shrink: 0;
align-self: flex-start;
padding: 2px var(--mantine-spacing-xs);
border-radius: var(--mantine-radius-sm);
}
.balance {
flex: 1;
grid-area: balance;
min-width: 0;
text-align: right;
}
.summary {
font-variant-numeric: tabular-nums;
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.total {
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
letter-spacing: -0.035em;
line-height: 1.2;
overflow-wrap: anywhere;
}
.total + .total {
color: var(--wl-color-text);
font-size: var(--mantine-font-size-lg);
font-weight: 500;
letter-spacing: 0;
color: var(--mantine-color-gray-7);
line-height: var(--mantine-line-height-lg);
}
.positions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mantine-spacing-sm);
margin: 0;
.return,
.cashValue {
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.positions > div {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px var(--mantine-spacing-sm);
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
border-radius: var(--mantine-radius-md);
.positive {
color: var(--wl-color-positive);
}
.stocks {
background: var(--mantine-color-blue-0);
color: var(--mantine-color-blue-8);
.negative {
color: var(--wl-color-negative);
}
.bonds {
background: var(--mantine-color-grape-0);
color: var(--mantine-color-grape-8);
.neutral {
color: var(--wl-color-muted);
}
.positions dt {
font-size: var(--mantine-font-size-sm);
font-weight: 500;
.cash {
font-variant-numeric: tabular-nums lining-nums;
}
.positions dd {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.25;
overflow-wrap: anywhere;
.details {
grid-area: details;
min-width: 0;
font-variant-numeric: tabular-nums lining-nums;
}
.footer {
border-top: 1px solid var(--mantine-color-gray-2);
padding-top: var(--mantine-spacing-md);
}
.open {
display: inline-flex;
align-items: center;
.structure {
grid-area: structure;
gap: var(--mantine-spacing-xs);
margin-left: auto;
color: var(--mantine-color-blue-7);
}
.arrow {
font-size: var(--mantine-font-size-lg);
transition: transform 160ms ease;
.structureBar {
display: flex;
width: 100%;
height: 6px;
overflow: hidden;
border-radius: var(--mantine-radius-xs);
background: var(--wl-color-subtle);
}
.card:hover .arrow {
transform: translateX(3px);
.structureSection {
flex: none;
height: 100%;
background: var(--category-color);
}
@media (max-width: 36em) {
.card {
@media (max-width: 47.9375em) {
.row {
grid-template-areas:
"identity"
"balance"
"structure"
"details";
grid-template-columns: minmax(0, 1fr);
gap: var(--mantine-spacing-sm);
padding: var(--mantine-spacing-md);
gap: var(--mantine-spacing-lg);
}
.positions > div {
flex-direction: column;
align-items: flex-start;
padding: var(--mantine-spacing-sm);
.balance {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.card,
.arrow {
transition: none;
}
.card:hover,
.card:focus-visible,
.card:hover .arrow {
transform: none;
.balance > div {
justify-content: flex-start;
}
}
@@ -2,32 +2,86 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { MemoryRouter } from "react-router";
import { resource } from "@/test/resource";
import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
import { brokerageAccountCards } from "../../model/display";
import { BrokerageAccountList } from "./BrokerageAccountList";
const syntheticAccount = {
id: "storybook-account",
name: "Учебный брокерский счёт",
openedOn: "2025-03-15",
portfolioSummary: {
bondPositionCount: 12,
stockPositionCount: 5,
totalsByCurrency: [
{ currency: "RUB", value: "125000.50" },
{ currency: "USD", value: "320" },
{ currency: "EUR", value: "210" },
],
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" },
],
fundPositionCount: 2,
stockPositionCount: 5,
structure: {
currencies: [{
categories: [
{ sharePercent: "55.000000", type: "STOCK", value: "682500" },
{ sharePercent: "25.000000", type: "BOND", value: "310500" },
{ sharePercent: "10.000000", type: "OTHER", value: "124200" },
{ sharePercent: "10.000000", type: "CASH", value: "124200" },
],
currency: "RUB",
hasNegativeValues: false,
totalValue: "1241400",
}],
unvaluedCategories: [],
},
type: "BROKERAGE",
} satisfies BrokerageAccount;
totalPositionCount: 19,
totalsByCurrency: [{ currency: "RUB", value: "1240500.50" }],
unrealizedReturnByCurrency: [rubReturn],
} satisfies PortfolioSummary;
function account(
id: string,
name: string,
summary: null | PortfolioSummary = portfolioSummary,
type: BrokerageAccount["type"] = "BROKERAGE",
): BrokerageAccount {
return {
id,
name,
openedOn: "2025-03-15",
portfolioSummary: summary,
type,
};
}
const negativeSummary: PortfolioSummary = {
...portfolioSummary,
unrealizedReturnByCurrency: [{
...rubReturn,
absolute: "-4200",
percent: "-3.05",
}],
};
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
};
const meta = {
args: { accounts: brokerageAccountCards([syntheticAccount]) },
argTypes: {
accounts: { control: false },
},
args: { accounts: brokerageAccountCards([account("normal", "Основной ИИС")]) },
argTypes: { accounts: { control: false } },
component: BrokerageAccountList,
decorators: [
Story => (
@@ -40,7 +94,7 @@ const meta = {
docs: {
description: {
component:
"Карточки счетов WealthLedger со сводкой по валютам и числом наименований акций и облигаций. Используйте на экране выбора счёта; отсутствие сводки и отсутствие сумм имеют разные сообщения. Примеры содержат вымышленные данные. Ссылки меняют только локальный маршрут MemoryRouter; страница назначения в этой истории не отображается.",
"Карточки счетов: стоимость и доходность по валютам, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
},
},
},
@@ -52,188 +106,112 @@ export default meta;
type Story = StoryObj<typeof meta>;
export const Available: Story = {
name: "Сводка по нескольким валютам",
parameters: {
docs: {
description: {
story:
"Показываются первые две валюты и количество остальных. Суммы разных валют не складываются в общий итог.",
},
},
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 Unavailable: Story
= {
args: {
accounts: brokerageAccountCards([
{ ...syntheticAccount, openedOn: null, portfolioSummary: null },
]),
},
name: "Сводка недоступна",
parameters: {
docs: {
description: {
story:
"Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.",
},
},
},
};
export const Negative: Story = {
args: {
accounts: brokerageAccountCards([
account("negative", "Просевший портфель", negativeSummary),
]),
},
};
export const Partial: Story = {
args: {
accounts: brokerageAccountCards([account("partial", "Частичные данные", {
...portfolioSummary,
unrealizedReturnByCurrency: [{
...rubReturn,
partial: true,
}],
})]),
},
};
export const Empty: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 0,
stockPositionCount: 0,
totalsByCurrency: [],
},
},
account("empty", "Новый пустой счёт", emptySummary),
]),
},
name: "Нет текущих сумм",
parameters: {
docs: {
description: {
story:
"Успешно полученная пустая сводка отличается от ошибки получения данных. Карточка сохраняет название, тип счёта и переход.",
},
},
};
export const Unavailable: Story = {
args: {
accounts: brokerageAccountCards([
account("unavailable", "Счёт без сводки", null),
]),
},
};
export const Stale: Story = {
args: {
accounts: brokerageAccountCards([
account("stale", "Устаревший портфель"),
], resource([], {
dependencies: [{
availability: "available",
completeness: "complete",
dataRevision: "stale-revision",
freshness: "stale",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: null,
state: "none",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/stale",
}],
freshness: "stale",
lastSuccessfulAt: "2026-08-14T00:00:00Z",
}).meta.dependencies),
},
};
export const LongName: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
name: "Учебный индивидуальный инвестиционный счёт для долгосрочных накоплений",
type: "INDIVIDUAL_INVESTMENT",
},
]),
},
name: "Длинное название счёта",
parameters: {
docs: {
description: {
story:
"Проверьте перенос длинного названия на узком экране и доступность всей карточки с клавиатуры.",
},
},
},
};
export const AccountGrid: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
name: "Основной",
portfolioSummary: {
bondPositionCount: 14,
stockPositionCount: 8,
totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }],
},
},
{
...syntheticAccount,
id: "storybook-iis",
name: "Долгосрочные инвестиции",
portfolioSummary: {
bondPositionCount: 6,
stockPositionCount: 0,
totalsByCurrency: [{ currency: "RUB", value: "480250" }],
},
type: "INDIVIDUAL_INVESTMENT",
},
]),
},
name: "Несколько счетов",
};
export const UnvaluedPositions: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 1,
stockPositionCount: 2,
totalsByCurrency: [],
},
},
]),
},
name: "Бумаги без текущей оценки",
};
export const LargeValues: Story = {
args: {
accounts: brokerageAccountCards([
{
...syntheticAccount,
portfolioSummary: {
bondPositionCount: 105,
stockPositionCount: 21,
totalsByCurrency: [
{ currency: "RUB", value: "1234567890123456789.50" },
{ currency: "USD", value: "-9876543210987654321.50" },
],
},
},
]),
},
name: "Длинные суммы",
};
export const IndependentFreshness: Story
= {
args: {
accounts: brokerageAccountCards(
[
syntheticAccount,
{
...syntheticAccount,
id: "waiting",
name: "Новый счёт",
portfolioSummary: null,
},
],
[
{
availability: "available",
completeness: "complete",
dataRevision: "1",
freshness: "stale",
lastAttempt: {
finishedAt: "2026-09-24T10:31:00Z",
problems: [],
startedAt: "2026-09-24T10:30:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-09-24T10:30:00Z",
resourceKey: "portfolio/storybook-account",
},
{
availability: "initial-loading",
completeness: "incomplete",
dataRevision: "0",
freshness: "unknown",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: "2026-09-24T10:30:00Z",
state: "running",
},
lastSuccessfulAt: null,
resourceKey: "portfolio/waiting",
},
],
account(
"long",
"Очень длинное название индивидуального инвестиционного счёта, которое должно корректно переноситься на узком экране",
portfolioSummary,
"INDIVIDUAL_INVESTMENT",
),
},
name: "Независимая свежесть и ошибка сводок",
};
]),
},
};
@@ -5,122 +5,202 @@ import { describe, expect, it } from "vitest";
import { resource } from "@/test/resource";
import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
import { brokerageAccountCards } from "../../model/display";
import { BrokerageAccountList } from "./BrokerageAccountList";
describe("BrokerageAccountList", () => {
it("renders account details and an account link", () => {
render(
<MantineProvider>
<MemoryRouter>
<BrokerageAccountList
accounts={brokerageAccountCards([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
portfolioSummary: {
bondPositionCount: 12,
stockPositionCount: 5,
totalsByCurrency: [
{ currency: "RUB", value: "1500" },
{ currency: "USD", value: "20" },
{ currency: "EUR", value: "5" },
],
},
type: "BROKERAGE",
type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
},
{
id: "account-2",
name: "Недоступный",
openedOn: null,
portfolioSummary: null,
type: "BROKERAGE",
},
{
id: "account-3",
name: "Пустой",
openedOn: null,
portfolioSummary: {
bondPositionCount: 0,
stockPositionCount: 2,
totalsByCurrency: [],
},
type: "BROKERAGE",
},
])}
/>
</MemoryRouter>
</MantineProvider>,
);
const portfolioSummary = {
bondPositionCount: 12,
cashBalances: [
{ currency: "RUB", value: "82500.5" },
{ currency: "USD", value: "20" },
],
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: [
{
absolute: "136900",
costBasis: "1000000",
currency: "RUB",
partial: true,
percent: "12.40",
},
{
absolute: "-4.2",
costBasis: "24.2",
currency: "USD",
partial: false,
percent: "-3.05",
},
{
absolute: "0",
costBasis: "5",
currency: "EUR",
partial: false,
percent: null,
},
],
} satisfies PortfolioSummary;
expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
"href",
"/accounts/account-1",
);
expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
expect(screen.getByText(/^Открыт /)).toBeInTheDocument();
expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
expect(screen.getByText("20 USD")).toBeInTheDocument();
expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getAllByText("Открыть счет")).toHaveLength(3);
const available = within(screen.getByRole("link", { name: /Основной/ }));
expect(available.getAllByRole("definition")[0]).toHaveTextContent("5");
expect(available.getAllByRole("definition")[1]).toHaveTextContent("12");
const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent("2");
expect(unvalued.getAllByRole("definition")[1]).toHaveTextContent("0");
expect(
within(screen.getByRole("link", { name: /Недоступный/ })).queryByText(
"Акции",
),
).not.toBeInTheDocument();
});
});
type BrokerageAccountCardInput = Parameters<typeof BrokerageAccountList>[0][
"accounts"
];
it("shows portfolio summary freshness independently for each account", () => {
const accounts = brokerageAccountCards(
["fresh", "stale"].map(
function account(
id: string,
name: string,
summary: null | PortfolioSummary,
): BrokerageAccount {
return {
id,
name,
openedOn: null,
portfolioSummary: summary,
type: "BROKERAGE",
};
}
id =>
({
id,
name: id,
openedOn: null,
portfolioSummary: {
bondPositionCount: 0,
stockPositionCount: 1,
totalsByCurrency: [{ currency: "RUB", value: "10" }],
},
type: "BROKERAGE" as const,
}),
),
[
resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" })
.meta,
resource(null, { freshness: "stale", resourceKey: "portfolio/stale" })
.meta,
],
);
render(
function renderList(accounts: BrokerageAccountCardInput) {
return render(
<MantineProvider>
<MemoryRouter>
<BrokerageAccountList accounts={accounts} />
</MemoryRouter>
</MantineProvider>,
);
expect(
within(screen.getByRole("link", { name: /stale/ })).getByText(
"Данные требуют обновления",
),
).toBeVisible();
expect(
within(screen.getByRole("link", { name: /fresh/ })).queryByText(
"Данные требуют обновления",
),
).not.toBeInTheDocument();
}
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: [{
absolute: "0",
costBasis: "5",
currency: "EUR",
partial: false,
percent: null,
}],
};
renderList(brokerageAccountCards([
account("account-1", "Основной", portfolioSummary),
account("account-2", "Без доходности", nullReturnSummary),
]));
const link = screen.getByRole("link", { name: /Основной/ });
expect(link).toHaveAttribute("href", "/accounts/account-1");
expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
.toBeInTheDocument();
expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
expect(within(link).getByText("−3,05 %")).toBeInTheDocument();
expect(within(link).getByText("−4,2 USD")).toBeInTheDocument();
const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
expect(within(link).getByText("частично")).toBeInTheDocument();
expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
expect(within(link).getByText("17 позиций")).toBeInTheDocument();
expect(screen.getByRole("img", {
name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
+ "Другие активы 0 %; Свободные деньги 20 %",
})).toBeInTheDocument();
const stockLegend = within(link).getByText(/Акции 50 %/);
expect(stockLegend).toHaveTextContent("● Акции 50 %");
// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
expect(link).toHaveTextContent("По данным брокера");
expect(link).toHaveTextContent("Структура RUB: Акции 100");
});
it("preserves empty, unavailable and stale states", () => {
const emptySummary: PortfolioSummary = {
...portfolioSummary,
cashBalances: [],
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 0,
totalsByCurrency: [],
unrealizedReturnByCurrency: [],
};
const cards = brokerageAccountCards([
account("empty", "Пустой", emptySummary),
account("unavailable", "Недоступный", null),
account("stale", "Устаревший", portfolioSummary),
account("failed", "Ошибка обновления", null),
], resource([], {
dependencies: [{
availability: "available",
completeness: "complete",
dataRevision: "stale-revision",
freshness: "stale",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: null,
state: "none",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/stale",
}, {
availability: "available",
completeness: "complete",
dataRevision: "failed-revision",
freshness: "stale",
lastAttempt: {
finishedAt: "2026-08-14T00:01:00Z",
problems: [],
startedAt: "2026-08-14T00:00:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-13T00:00:00Z",
resourceKey: "portfolio/failed",
}],
freshness: "stale",
lastSuccessfulAt: "2026-08-14T00:00:00Z",
}).meta.dependencies);
renderList(cards);
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getAllByText("Сводка временно недоступна"))
.toHaveLength(2);
const staleLink = screen.getByRole("link", { name: /Устаревший/ });
expect(within(staleLink).getByText("Данные требуют обновления"))
.toBeInTheDocument();
expect(within(staleLink).getByText(/Данные на/)).toBeInTheDocument();
const failedLink = screen.getByRole("link", { name: /Ошибка обновления/ });
expect(within(failedLink).getByText(
"Не удалось обновить данные. Показаны последние полученные.",
)).toBeInTheDocument();
});
});
@@ -1,11 +1,10 @@
import type { FC } from "react";
import type { CSSProperties, FC } from "react";
import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
import { WalletIcon } from "@wealthledger/icons";
import { Badge, Group, Stack, Text, VisuallyHidden } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { formatDate, formatMoney } from "@/shared/lib";
import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import type { BrokerageAccountCard } from "../../model/display";
@@ -13,12 +12,176 @@ import type { BrokerageAccountCard } from "../../model/display";
import { accountTypeKey } from "../../model/display";
import classes from "./BrokerageAccountList.module.css";
const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
type AvailableSummary = Extract<
BrokerageAccountCard["summary"],
{ state: "available" }
>;
type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };
type BrokerageAccountSummaryProps = {
summary: BrokerageAccountCard["summary"];
};
type PortfolioSummary = AvailableSummary["portfolio"];
type ReturnValueProps = {
item: PortfolioSummary["unrealizedReturnByCurrency"][number];
};
type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
function formatPercent(value: null | string) {
if (value === null) return "—";
const formatted = `${value.replace(".", ",")}\u{A0}%`;
if (isZero(value))
return value.startsWith("-") ? formatted.slice(1) : formatted;
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
}
function formatStructurePercent(value: string) {
let trimmed = value;
while (trimmed.includes(".") && trimmed.endsWith("0"))
trimmed = trimmed.slice(0, -1);
if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
return trimmed.replace(".", ",");
}
function isZero(value: string) {
const unsigned = value.startsWith("-") ? value.slice(1) : value;
const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);
return integer.replaceAll("0", "") === ""
&& fraction.replaceAll("0", "") === "";
}
const ReturnValue: FC<ReturnValueProps> = (props) => {
const { t } = useTranslation();
const { item } = props;
const isNegative = item.percent !== null
&& item.percent.startsWith("-")
&& !isZero(item.percent);
const isPositive = item.percent !== null
&& !item.percent.startsWith("-")
&& !isZero(item.percent);
let toneClass = classes.neutral;
if (isNegative) toneClass = classes.negative;
else if (isPositive) toneClass = classes.positive;
return (
<Group className={classes.return} gap="xs" wrap="nowrap">
<Text className={toneClass} fw={700} size="sm">
{formatPercent(item.percent)}
</Text>
<Text className={toneClass} size="sm">
{formatMoney(
{ currency: item.currency, value: item.absolute },
{ withSign: true },
)}
</Text>
{item.partial && (
<Text c="dimmed" size="xs">
{t("accounts.partial")}
</Text>
)}
</Group>
);
};
type StructureBarProps = { item: StructureCurrency };
const StructureBar: FC<StructureBarProps> = (props) => {
const { t } = useTranslation();
const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
const category = props.item.categories.find(item => item.type === type);
return category ? [category] : [];
});
const description = categories.map((category) => {
const label = t(portfolioCategoryPresentation[category.type].label);
const percent = category.sharePercent === null
? null
: formatStructurePercent(category.sharePercent);
return percent === null
? t("accounts.structure.incomplete", { category: label })
: t("accounts.structure.category", { category: label, percent });
}).join("; ");
const label = t("accounts.structure.label", {
currency: props.item.currency,
value: description,
});
const legendCategories = categories.filter(category =>
category.sharePercent === null || !isZero(category.sharePercent));
return (
<Stack gap={4}>
<div
aria-label={label}
className={classes.structureBar}
role="img"
title={label}
>
{categories.map((category) => {
const presentation = portfolioCategoryPresentation[category.type];
const style = {
"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
"width": `${category.sharePercent ?? 0}%`,
} as CSSProperties;
return (
<div
aria-hidden
className={classes.structureSection}
key={category.type}
style={style}
/>
);
})}
</div>
<Group aria-hidden gap="xs" wrap="wrap">
{legendCategories.map((category) => {
const presentation = portfolioCategoryPresentation[category.type];
const categoryLabel = t(presentation.label);
const text = category.sharePercent === null
? categoryLabel
: t("accounts.structure.category", {
category: categoryLabel,
percent: formatStructurePercent(category.sharePercent),
});
return (
<Text c="dimmed" key={category.type} size="xs">
<Text c={presentation.color} component="span">●</Text>
{" "}
{text}
</Text>
);
})}
</Group>
</Stack>
);
};
const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
const { summary } = props;
const { t } = useTranslation();
@@ -36,19 +199,51 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
);
return (
<Stack className={classes.summary} gap={4}>
{summary.totals.map(total => (
<Text className={classes.total} fw={700} key={total.currency}>
{formatMoney(total)}
</Text>
))}
<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 })}
</Text>
))}
{!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount,
{!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount,
})}
</Text>
)}
</Stack>
<Stack gap={4}>
{summary.totals.map((total) => {
const item = summary.portfolio.unrealizedReturnByCurrency.find(
returnItem => returnItem.currency === total.currency,
);
return item
? <ReturnValue item={item} key={total.currency} />
: null;
})}
</Text>
</Stack>
</Group>
{summary.portfolio.cashBalances.length > 0 && (
<Group className={classes.cash} gap="xs" justify="flex-end">
<Text c="dimmed" size="xs">
{t("accounts.cash")}
</Text>
<Stack gap={0}>
{summary.portfolio.cashBalances.map(cash => (
<Text className={classes.cashValue} key={cash.currency} size="sm">
{formatMoney(cash, { withRoundedCents: true })}
</Text>
))}
</Stack>
</Group>
)}
</Stack>
);
@@ -61,13 +256,13 @@ type BrokerageAccountSourceStatusProps = {
const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
props,
) => {
const { source } = props;
const { t } = useTranslation();
const { source } = props;
const isSyncing = source?.lastAttempt.state === "running";
const errorText
= source?.lastAttempt.state === "failed" ? t("accounts.refreshError") : null;
const errorText = source?.lastAttempt.state === "failed"
? t("accounts.refreshError")
: null;
return (
<>
@@ -87,86 +282,110 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
);
};
type AccountDescriptionProps = {
account: BrokerageAccountCard;
};
const AccountDescription: FC<AccountDescriptionProps> = (props) => {
const { t } = useTranslation();
const { account, summary } = props.account;
if (summary.state !== "available") return null;
const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
t("accounts.description.return", {
absolute: formatMoney(
{ currency: item.currency, value: item.absolute },
{ withSign: true },
),
currency: item.currency,
percent: formatPercent(item.percent),
}),
);
const structures = summary.portfolio.structure.currencies.map((item) => {
const categories = item.categories.map(category =>
t("accounts.description.structureCategory", {
category: t(portfolioCategoryPresentation[category.type].label),
value: formatMoney(
{ currency: item.currency, value: category.value },
{ withRoundedCents: true },
),
}),
).join(", ");
return t("accounts.description.structure", {
currency: item.currency,
value: categories,
});
});
const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
item => item.partial,
);
const details = [...returns, ...structures].join(". ");
return (
<VisuallyHidden>
{t("accounts.description.start", {
name: account.name,
type: t(accountTypeKey(account.type)),
})}
{t("accounts.description.currentValue", {
value: summary.portfolio.totalsByCurrency
.map(total => formatMoney(total)).join(", "),
})}
{details ? `${details}. ` : ""}
{hasPartialReturn ? t("accounts.brokerDescription") : ""}
</VisuallyHidden>
);
};
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
const { accounts } = props;
const { t } = useTranslation();
return (
<SimpleGrid className={classes.list} cols={1} spacing="lg">
{accounts.map(({ account, positionCounts, source, summary }) => (
<Card
className={classes.card}
component={Link}
key={account.id}
padding="xl"
radius="lg"
to={`/accounts/${account.id}`}
withBorder
>
<Stack className={classes.identity} gap="sm">
<Group gap="sm" justify="space-between" wrap="nowrap">
<Text className={classes.kicker} fw={700} size="xs">
<ul className={classes.list}>
{props.accounts.map(({ account, positionCounts, source, summary }) => (
<li key={account.id}>
<Link className={classes.row} to={`/accounts/${account.id}`}>
<Group className={classes.identity} wrap="nowrap">
<h2 className={classes.name}>{account.name}</h2>
<Badge className={classes.accountType} variant="light">
{t(accountTypeKey(account.type))}
</Text>
<WalletIcon className={classes.accountIcon} />
</Badge>
</Group>
<Text className={classes.name} component="h2" fw={700}>
{account.name}
</Text>
</Stack>
<Stack className={classes.balance} gap="xs">
<Text c="dimmed" size="sm">
{t("accounts.currentValue")}
</Text>
<BrokerageAccountSummary summary={summary} />
<BrokerageAccountSourceStatus source={source} />
</Stack>
<Stack className={classes.details} gap={2}>
{positionCounts && (
<Text c="dimmed" size="xs">
{t("accounts.positions", {
count: positionCounts.total,
})}
</Text>
)}
{!!positionCounts && (
<dl className={classes.positions}>
<div className={classes.stocks}>
<dt>{t("accounts.stocks")}</dt>
<BrokerageAccountSourceStatus source={source} />
</Stack>
<dd>
{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
</dd>
</div>
<div className={classes.bonds}>
<dt>{t("accounts.bonds")}</dt>
<dd>
{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
</dd>
</div>
</dl>
)}
<Group className={classes.footer} gap="sm" justify="space-between">
{!!account.openedOn && (
<Text c="dimmed" size="xs">
{t("accounts.openedOn", {
date: formatDate(account.openedOn),
})}
</Text>
{summary.state === "available" && (
<Stack className={classes.structure} gap={4}>
{summary.portfolio.structure.currencies.map(item => (
<StructureBar item={item} key={item.currency} />
))}
</Stack>
)}
<Text className={classes.open} component="span" fw={600} size="sm">
{t("accounts.openAccount")}
<span aria-hidden="true" className={classes.arrow}>
→
</span>
</Text>
</Group>
</Card>
<AccountDescription
account={{ account, positionCounts, source, summary }}
/>
</Link>
</li>
))}
</SimpleGrid>
</ul>
);
};
+2 -1
View File
@@ -2,8 +2,9 @@ export {
type BrokerageEvent,
useBrokerageEvents,
} from "./api/useBrokerageEvents";
export { brokerageEventKey } from "./model/event-key";
export { brokerageEventGroupKey, brokerageEventKey } from "./model/event-key";
export { BrokerageEventCard } from "./ui/BrokerageEventCard";
export { BrokerageEventGroup } from "./ui/BrokerageEventGroup";
export {
BrokerageEventsPreview,
type BrokerageEventsPreviewState,
@@ -0,0 +1,57 @@
import { describe, expect, it } from "vitest";
import type { BrokerageEvent } from "../api/useBrokerageEvents";
import { brokerageEventGroupKey } from "./event-key";
const base: BrokerageEvent = {
account: { id: "account-1", name: "Брокерский" },
date: "2026-08-20",
dateKind: "event",
displayName: "ОФЗ 26238",
figi: "FIGI",
instrumentUid: "UID",
isin: "RU000A0JX0J2",
logoName: null,
projectedAmount: { currency: "RUB", value: "100" },
ticker: "OFZ",
type: "coupon",
};
describe("brokerageEventGroupKey", () => {
it("uses date, preferred identity, exact type and dateKind", () => {
const key = brokerageEventGroupKey(base);
expect(brokerageEventGroupKey({
...base,
account: { id: "account-2", name: "ИИС" },
figi: "OTHER-FIGI",
})).toBe(key);
expect(brokerageEventGroupKey({ ...base, date: "2026-08-21" }))
.not.toBe(key);
expect(brokerageEventGroupKey({ ...base, dateKind: "registry" }))
.not.toBe(key);
expect(brokerageEventGroupKey({ ...base, type: "dividend" }))
.not.toBe(key);
});
it("falls back through FIGI and ISIN and rejects missing identity", () => {
expect(brokerageEventGroupKey({ ...base, instrumentUid: null }))
.toBe(brokerageEventGroupKey({ ...base, instrumentUid: "" }));
expect(brokerageEventGroupKey({
...base,
figi: null,
instrumentUid: null,
})).toBe(brokerageEventGroupKey({
...base,
figi: "",
instrumentUid: null,
}));
expect(brokerageEventGroupKey({
...base,
figi: null,
instrumentUid: null,
isin: null,
})).toBeNull();
});
});
@@ -1,5 +1,13 @@
import type { BrokerageEvent } from "../api/useBrokerageEvents";
function brokerageEventGroupKey(event: BrokerageEvent): null | string {
const identity = event.instrumentUid || event.figi || event.isin;
return identity
? JSON.stringify([event.date, identity, event.type, event.dateKind])
: null;
}
function brokerageEventKey(event: BrokerageEvent) {
return JSON.stringify([
event.account?.id, event.type, event.date, event.instrumentUid,
@@ -7,4 +15,4 @@ function brokerageEventKey(event: BrokerageEvent) {
]);
}
export { brokerageEventKey };
export { brokerageEventGroupKey, brokerageEventKey };
@@ -0,0 +1,122 @@
import { MantineProvider } from "@mantine/core";
import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import type { BrokerageEvent } from "../api/useBrokerageEvents";
import { BrokerageEventGroup } from "./BrokerageEventGroup";
function event(
account: { id: string; name: string },
value: null | string,
currency = "RUB",
): BrokerageEvent {
return {
account,
date: "2026-08-20",
dateKind: "registry",
displayName: "ОФЗ 26238",
figi: "FIGI",
instrumentUid: "UID",
isin: "RU000A0JX0J2",
logoName: null,
projectedAmount: value === null ? null : { currency, value },
ticker: "OFZ",
type: "coupon",
};
}
function renderGroup(
events: [BrokerageEvent, BrokerageEvent],
isTotalVisible = true,
) {
return render(
<MantineProvider>
<MemoryRouter>
<ul>
<BrokerageEventGroup
events={events}
totalVisible={isTotalVisible}
/>
</ul>
</MemoryRouter>
</MantineProvider>,
);
}
describe("BrokerageEventGroup", () => {
it("shows an unsigned forecast total and every account forecast", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, "100.5"),
event({ id: "iis", name: "ИИС" }, "49.5"),
]);
expect(screen.getByText("Купон · ОФЗ 26238")).toBeInTheDocument();
expect(screen.getByText("150 ₽")).toBeInTheDocument();
expect(screen.getAllByText("Прогноз").length).toBeGreaterThanOrEqual(3);
const accounts = within(screen.getByRole("list", {
name: /Купон · ОФЗ 26238, 20\.08\.2026 · Дата реестра, 150 ₽/,
}));
expect(accounts.getByText("Брокерский")).toBeInTheDocument();
expect(accounts.getByText("ИИС")).toBeInTheDocument();
expect(accounts.getByText("100,5 ₽")).toBeInTheDocument();
expect(accounts.getByText("49,5 ₽")).toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument();
});
it("announces an unknown total as unavailable", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, null),
event({ id: "iis", name: "ИИС" }, "49.5"),
]);
expect(screen.getByRole("list", {
name: /Купон · ОФЗ 26238.*Итог недоступен/,
})).toBeInTheDocument();
expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument();
});
it("hides the total for incomplete data", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, "100.5"),
event({ id: "iis", name: "ИИС" }, "49.5"),
], false);
expect(screen.queryByText("150 ₽")).not.toBeInTheDocument();
});
it("allows zero source forecasts to produce a visible zero total", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, "0"),
event({ id: "iis", name: "ИИС" }, "0.00"),
]);
expect(screen.getAllByText("0 ₽")).toHaveLength(2);
expect(screen.getByText("0,00 ₽")).toBeInTheDocument();
});
it("shows separate forecast totals per currency without conversion", () => {
renderGroup([
event({ id: "broker", name: "Брокерский" }, "10", "USD"),
event({ id: "iis", name: "ИИС" }, "200"),
]);
expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
.toBeInTheDocument();
});
it("shows an offer group without a total", () => {
renderGroup([
{ ...event({ id: "broker", name: "Брокерский" }, null), type: "offer" },
{ ...event({ id: "iis", name: "ИИС" }, null), type: "offer" },
]);
const accounts = within(screen.getByRole("list", {
name: /Итог недоступен/,
}));
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
});
});
@@ -0,0 +1,87 @@
import type { FC } from "react";
import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import {
formatDate,
formatMoney,
instrumentLogoUrl,
sumMoney,
totalText,
} from "@/shared/lib";
import { AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import type { BrokerageEvent } from "../api/useBrokerageEvents";
import { brokerageEventKey } from "../model/event-key";
type BrokerageEventGroupProps = {
events: [BrokerageEvent, BrokerageEvent, ...BrokerageEvent[]];
totalVisible: boolean;
};
const BrokerageEventGroup: FC<BrokerageEventGroupProps> = (props) => {
const { t } = useTranslation();
const [first] = props.events;
const typeLabel = t(`events.type.${first.type}`);
const amounts = props.events.flatMap(event =>
event.projectedAmount ? [event.projectedAmount] : [],
);
const totals = props.totalVisible && amounts.length === props.events.length
? sumMoney(amounts)
: null;
const date = formatDate(first.date);
const metadata = [
date,
first.dateKind === "registry" ? t("events.dateKind.registry") : null,
].filter(Boolean).join(" · ");
const title = `${typeLabel} · ${first.displayName}`;
const totalsText = totalText(totals, false);
const accessibleName = [
title,
metadata,
totalsText || t("entryGroup.totalUnavailable"),
].join(", ");
return (
<EntryGroup
header={(
<EntryCard
imageSrc={instrumentLogoUrl(first.logoName)}
initial={(first.ticker.trim()[0] ?? "?").toUpperCase()}
metadata={metadata}
title={title}
tone="neutral"
value={<EntryGroupTotal totals={totals} />}
valueLabel={t("payout.forecast")}
wrap
/>
)}
label={accessibleName}
>
{props.events.map((event) => {
const value = event.projectedAmount
? formatMoney(event.projectedAmount)
: t("events.noAmount");
return (
<AccountRow
accountName={event.account?.name ?? "—"}
key={brokerageEventKey(event)}
value={value}
valueLabel={t("payout.forecast")}
/>
);
})}
</EntryGroup>
);
};
export { BrokerageEventGroup };
@@ -5,13 +5,18 @@ import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { groupItems } from "@/shared/lib";
import type { BrokerageEvent } from "../../api/useBrokerageEvents";
import { brokerageEventKey } from "../../model/event-key";
import { brokerageEventGroupKey, brokerageEventKey } from "../../model/event-key";
import { BrokerageEventCard } from "../BrokerageEventCard";
import { BrokerageEventGroup } from "../BrokerageEventGroup";
type BrokerageEventsPreviewProps = {
allAccounts?: boolean;
events: BrokerageEventsPreviewState;
moreLabel?: string;
};
type BrokerageEventsPreviewState
@@ -19,6 +24,7 @@ type BrokerageEventsPreviewState
items: BrokerageEvent[];
state: "loaded" | "partial";
to: string;
totalVisible?: boolean;
}
| { state: "empty"
| "error"
@@ -42,16 +48,35 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
{events.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
{(events.state === "loaded" || events.state === "partial")
&& events.items.map(event => (
<BrokerageEventCard
event={event}
key={brokerageEventKey(event)}
/>
))}
{(events.state === "loaded" || events.state === "partial") && (
<Stack
component="ul"
gap="sm"
m={0}
p={0}
style={{ listStyle: "none" }}
>
{groupItems(
events.items,
props.allAccounts ? brokerageEventGroupKey : () => null,
).map(entry => entry.type === "group"
? (
<BrokerageEventGroup
events={entry.items}
key={entry.key}
totalVisible={events.totalVisible === true}
/>
)
: (
<li key={brokerageEventKey(entry.item)}>
<BrokerageEventCard event={entry.item} />
</li>
))}
</Stack>
)}
<Button component={Link} to={events.to} variant="subtle">
{t("events.open")}
{props.moreLabel ?? t("events.open")}
</Button>
</Stack>
);
+21 -1
View File
@@ -3,8 +3,9 @@ import type { FC, PropsWithChildren } from "react";
import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
import { act, renderHook, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { describe, expect, it } from "vitest";
import { describe, expect, it, onTestFinished, vi } from "vitest";
import * as sharedApi from "@/shared/api";
import { apiClient, apiQueryClient, useAuthenticatedQuery } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
@@ -398,4 +399,23 @@ describe("AuthProvider", () => {
expect(result.current.cards.data?.[0]?.id).toBe("b-card"),
);
});
it("registers auth handlers once until unmount", async () => {
const configure = vi.spyOn(sharedApi, "configureAuthClient");
onTestFinished(() => configure.mockRestore());
const { rerender, result, unmount } = renderHook(useAuth, {
wrapper: createAuthWrapper(createTestQueryClient()),
});
await waitFor(() => expect(result.current.ready).toBe(true));
const registrations = configure.mock.calls.length;
rerender();
expect(configure).toHaveBeenCalledTimes(registrations);
unmount();
expect(configure).toHaveBeenCalledTimes(registrations + 1);
expect(configure).toHaveBeenLastCalledWith();
});
});
+2 -1
View File
@@ -161,7 +161,8 @@ function useAuthProviderVm() {
refresh,
unavailable: () => unavailableRef.current,
});
});
// `user` tracks access-token changes, which configureAuthClient publishes as session state.
}, [clearSession, refresh, user]);
useEffect(() => () => configureAuthClient(), []);
const authContextValue = {
@@ -237,4 +237,79 @@ describe("AccountEventsPage", () => {
screen.queryByText("За выбранный период событий не найдено"),
).not.toBeInTheDocument();
});
it("groups same-day instrument events only in all-account mode", () => {
const events = [
{
account: { id: "broker", name: "Брокерский" },
date: "2026-08-20",
dateKind: "event",
displayName: "ОФЗ 26238",
figi: "FIGI",
instrumentUid: "UID",
isin: "RU000A0JX0J2",
logoName: null,
projectedAmount: { currency: "RUB", value: "200" },
ticker: "OFZ",
type: "coupon",
},
{
account: { id: "iis", name: "ИИС" },
date: "2026-08-20",
dateKind: "event",
displayName: "ОФЗ 26238",
figi: "FIGI",
instrumentUid: "UID",
isin: "RU000A0JX0J2",
logoName: null,
projectedAmount: { currency: "RUB", value: "100" },
ticker: "OFZ",
type: "coupon",
},
] as const;
query.mockReturnValue({
data: {
accountId: "all",
calculatedAt: "2026-08-14T00:00:00Z",
events: [...events],
},
isError: false,
isLoading: false,
meta: {
availability: "available",
completeness: "complete",
lastAttempt: {
finishedAt: null,
problems: [],
startedAt: null,
state: "none",
},
},
refetch: vi.fn(),
} as never);
render(
<MantineProvider>
<MemoryRouter initialEntries={["/accounts/all/events"]}>
<Routes>
<Route
element={<AccountEventsPage />}
path="/accounts/:accountId/events"
/>
</Routes>
</MemoryRouter>
</MantineProvider>,
);
expect(screen.getByText("Купон · ОФЗ 26238")).toBeInTheDocument();
expect(screen.getByText("300 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · ОФЗ 26238, 20\.08\.2026, 300 ₽/,
}));
expect(accounts.getByText("Брокерский")).toBeInTheDocument();
expect(accounts.getByText("ИИС")).toBeInTheDocument();
});
});
@@ -18,6 +18,7 @@ import {
type AccountEventsPageViewModel
= | {
allAccounts: boolean;
canApply: boolean;
draftPeriod: [null | string, null | string];
events: BrokerageEvent[];
@@ -29,6 +30,7 @@ type AccountEventsPageViewModel
partial?: boolean;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| { onReset: () => void; state: "error" }
| { state: "loading" };
@@ -100,6 +102,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
: { state: "loading" };
return {
allAccounts: accountId === "all",
canApply:
(draftFrom !== appliedFrom || draftTo !== appliedTo)
&& isValidPeriod(draftFrom, draftTo),
@@ -121,6 +124,7 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
partial: events.meta?.completeness === "incomplete",
source: events.meta,
state: "loaded",
totalVisible: events.meta?.completeness === "complete",
};
}
@@ -13,8 +13,11 @@ import { useTranslation } from "react-i18next";
import {
BrokerageEventCard,
BrokerageEventGroup,
brokerageEventGroupKey,
brokerageEventKey,
} from "@/entities/brokerage-event";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -30,14 +33,32 @@ const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
props,
) => {
if (props.events.length > 0) {
const entries = groupItems(
props.events,
props.allAccounts ? brokerageEventGroupKey : () => null,
);
return (
<Stack gap="sm">
{props.events.map(event => (
<BrokerageEventCard
event={event}
key={brokerageEventKey(event)}
/>
))}
<Stack
component="ul"
gap="sm"
m={0}
p={0}
style={{ listStyle: "none" }}
>
{entries.map(entry => entry.type === "group"
? (
<BrokerageEventGroup
events={entry.items}
key={entry.key}
totalVisible={props.totalVisible}
/>
)
: (
<li key={brokerageEventKey(entry.item)}>
<BrokerageEventCard event={entry.item} />
</li>
))}
</Stack>
);
}
@@ -100,7 +100,10 @@ function money(currency: string, value: string) {
return { currency, value };
}
function renderPage(search = "from=2026-08-01&to=2026-08-27") {
function renderPage(
search = "from=2026-08-01&to=2026-08-27",
accountId = "account-1",
) {
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
@@ -113,7 +116,7 @@ function renderPage(search = "from=2026-08-01&to=2026-08-27") {
<DatesProvider settings={{ locale: "ru" }}>
<QueryClientProvider client={queryClient}>
<MemoryRouter
initialEntries={[`/accounts/account-1/income?${search}`]}
initialEntries={[`/accounts/${accountId}/income?${search}`]}
>
<LocationProbe />
@@ -680,4 +683,110 @@ describe("income period and snapshot boundary", () => {
expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument();
expect(screen.queryByRole("button")).not.toBeInTheDocument();
});
it("groups all-account payouts by instrument with an exact total", async () => {
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
() => HttpResponse.json(resource({
...analytics,
accountId: "all",
entries: [
{
...entry(),
account: { id: "broker", name: "Брокерский" },
payment: money("RUB", "10"),
},
{
...entry(),
account: { id: "iis", name: "ИИС" },
id: "coupon-2",
payment: money("RUB", "20"),
},
],
})),
),
);
renderPage(undefined, "all");
expect(await screen.findByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND, Исполнено/,
}));
expect(accounts.getByText("Брокерский")).toBeInTheDocument();
expect(accounts.getByText("ИИС")).toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument();
});
it("keeps repeated payout ids inside one group as separate cards", async () => {
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
() => HttpResponse.json(resource({
...analytics,
accountId: "all",
entries: [
{
...entry(),
account: { id: "broker", name: "Брокерский" },
payment: money("RUB", "10"),
},
{
...entry(),
account: { id: "iis", name: "ИИС" },
payment: money("RUB", "20"),
},
],
})),
),
);
renderPage(undefined, "all");
expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Купон · BOND/,
}));
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
});
it("shows the group total after completeness changes to complete", async () => {
let completeness: "complete" | "incomplete" = "incomplete";
const entries = [
{
...entry(),
account: { id: "broker", name: "Брокерский" },
payment: money("RUB", "10"),
},
{
...entry(),
account: { id: "iis", name: "ИИС" },
id: "coupon-2",
payment: money("RUB", "20"),
},
];
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
() => HttpResponse.json(
resource({ ...analytics, accountId: "all", entries }, { completeness }),
),
),
);
const view = renderPage(undefined, "all");
await screen.findByText("Купон · BOND");
expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument();
view.unmount();
completeness = "complete";
renderPage(undefined, "all");
expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
});
});
@@ -31,6 +31,7 @@ type AccountIncomePageViewModel
onSubmit: (values: IncomeForm) => void;
partial?: boolean;
state: "loaded";
totalVisible: boolean;
}
| {
period: IncomePeriod;
@@ -116,6 +117,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
onSubmit,
partial: analytics.meta?.completeness === "incomplete",
state: "loaded",
totalVisible: analytics.meta?.completeness === "complete",
};
};
@@ -53,7 +53,11 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
<Alert color="blue">{t("income.taxBoundary")}</Alert>
<IncomePayments entries={display.entries} />
<IncomePayments
allAccounts={props.analytics.accountId === "all"}
entries={display.entries}
totalVisible={props.totalVisible}
/>
</Stack>
);
};
@@ -3,13 +3,22 @@ import type { FC } from "react";
import { Stack, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { LedgerEntryRow } from "@/entities/broker-operation";
import {
brokerageOperationGroupKey,
LedgerEntryRow,
OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import type { IncomeDisplayModel } from "../../../model/display";
import classes from "../AccountIncomePage.module.css";
type IncomePaymentsProps = { entries: IncomeDisplayModel["entries"] };
type IncomePaymentsProps = {
allAccounts?: boolean;
entries: IncomeDisplayModel["entries"];
totalVisible?: boolean;
};
const IncomePayments: FC<IncomePaymentsProps> = (props) => {
const { t } = useTranslation();
@@ -19,11 +28,24 @@ const IncomePayments: FC<IncomePaymentsProps> = (props) => {
<Title order={2}>{t("income.payments")}</Title>
<Stack className={classes.entries} component="ul" gap="sm">
{props.entries.map(({ key, operation }) => (
<li key={key}>
<LedgerEntryRow operation={operation} wrap />
</li>
))}
{groupItems(
props.entries,
entry => props.allAccounts
? brokerageOperationGroupKey(entry.operation)
: null,
).map(entry => entry.type === "group"
? (
<OperationGroup
entries={entry.items}
key={entry.key}
totalVisible={props.totalVisible === true}
/>
)
: (
<li key={entry.item.key}>
<LedgerEntryRow operation={entry.item.operation} wrap />
</li>
))}
</Stack>
</Stack>
);
@@ -2,7 +2,7 @@ import type { FC } from "react";
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import {
MemoryRouter,
@@ -44,6 +44,25 @@ const operation: BrokerageOperation
type: "OPERATION_TYPE_BUY",
};
function coupon(
id: string,
accountId: string,
accountName: string,
value: string,
): BrokerageOperation {
return {
...operation,
account: { id: accountId, name: accountName },
category: "income",
description: "Купон",
id,
instrumentUid: "UID",
payment: { currency: "RUB", value },
ticker: "BOND",
type: "OPERATION_TYPE_COUPON",
};
}
const Navigation: FC = () => {
const location = useLocation();
const navigate = useNavigate();
@@ -71,12 +90,12 @@ function configureTestAuth() {
});
}
function renderPage(search = "") {
function renderPage(search = "", accountId = "account-1") {
return render(
<QueryClientProvider client={createTestQueryClient()}>
<MantineProvider>
<MemoryRouter
initialEntries={[`/accounts/account-1/operations${search}`]}
initialEntries={[`/accounts/${accountId}/operations${search}`]}
>
<Routes>
<Route
@@ -217,6 +236,27 @@ describe("LedgerEntryRow", () => {
});
});
const historyStateResource = (historyState: "loading" | "partial") =>
HttpResponse.json(
resource(
{
hasNext: false,
items: [operation],
nextCursor: null,
},
{
coverage: {
asOf: null,
completeRanges: [],
historyBoundary: "unknown",
historyState,
missingRanges: [],
requested: [],
},
},
),
);
describe("AccountOperationsPage", () => {
it.each(["account-1", "all"])(
"normalizes invalid periods and history, preserves one-sided UTC dates and resets cursors for %s",
@@ -478,6 +518,33 @@ describe("AccountOperationsPage", () => {
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
});
it("does not show the history loading alert when coverage is partial", async () => {
configureTestAuth();
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/operations",
() => historyStateResource("partial"),
),
);
renderPage();
await screen.findByText("Покупка акций");
expect(screen.queryByText("История догружается")).not.toBeInTheDocument();
});
it("shows the history loading alert while historyState is loading", async () => {
configureTestAuth();
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/operations",
() => historyStateResource("loading"),
),
);
renderPage();
expect(
await screen.findByText("История догружается"),
).toBeInTheDocument();
});
it("renders an error state", async () => {
configureTestAuth();
server.use(
@@ -602,3 +669,73 @@ it("recovers an invalid cursor at the first page without clearing applied filter
for (const key of ["from", "to", "categories"])
expect(searches[2].get(key)).toBe(searches[0].get(key));
});
describe("all-account operation groups", () => {
it("groups only the current page and rebuilds the group at its boundary", async () => {
configureTestAuth();
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/operations",
({ request }) => {
const cursor = new URL(request.url).searchParams.get("cursor");
const items = cursor
? [
coupon("X2", "iis", "ИИС", "150"),
coupon("X3", "broker", "Брокерский", "50"),
operation,
]
: [coupon("X1", "broker", "Брокерский", "100")];
return HttpResponse.json(resource({
accountId: "all",
hasNext: !cursor,
items,
nextCursor: cursor ? null : "page-2",
}));
},
),
);
renderPage("", "all");
await screen.findAllByText("Купон");
expect(screen.queryByRole("list", { name: "Разбивка по счетам" }))
.not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
const accounts = await screen.findByRole("list", {
name: /Купон · BOND, Исполнено/,
});
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+200 ₽")).toBeInTheDocument();
expect(within(accounts).getAllByRole("listitem")).toHaveLength(2);
fireEvent.click(screen.getByRole("button", { name: "Назад" }));
await screen.findAllByText("Купон");
expect(screen.queryByRole("list", { name: "Разбивка по счетам" }))
.not.toBeInTheDocument();
});
it("leaves repeated operations ungrouped for one account", async () => {
configureTestAuth();
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json(resource({
accountId: "account-1",
hasNext: false,
items: [
coupon("X1", "account-1", "Брокерский", "100"),
coupon("X2", "account-1", "Брокерский", "150"),
],
nextCursor: null,
})),
),
);
renderPage();
await screen.findAllByText("Купон");
expect(screen.queryByRole("list", { name: /Разбивка|Исполнено/ }))
.not.toBeInTheDocument();
});
});
@@ -25,6 +25,7 @@ const operationCategorySet = new Set<string>(operationCategories);
type AccountOperationsPageViewModel
= | {
allAccounts: boolean;
canApply: boolean;
draftCategories: OperationCategory[];
draftPeriod: [null | string, null | string];
@@ -43,6 +44,7 @@ type AccountOperationsPageViewModel
partial?: boolean;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| { onReset: () => void; state: "error" }
| { state: "loading" };
@@ -147,14 +149,13 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|| !isSameCategories(draftCategories, appliedCategories);
return {
allAccounts: accountId === "all",
canApply: isDirty && isValidPeriod(draftFrom, draftTo),
draftCategories,
draftPeriod,
hasNext: Boolean(nextCursor && operations.data.hasNext),
hasPrevious: history.hasPrevious,
historyLoading:
operations.meta?.coverage?.historyState === "loading"
|| operations.meta?.coverage?.historyState === "partial",
historyLoading: operations.meta?.coverage?.historyState === "loading",
items: operations.data.items,
maxDate,
onApply: () => {
@@ -183,6 +184,7 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
partial: operations.meta?.completeness === "incomplete",
source: operations.meta,
state: "loaded",
totalVisible: operations.meta?.completeness === "complete",
};
};
@@ -12,7 +12,13 @@ import { DatePickerInput } from "@mantine/dates";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
import {
brokerageOperationGroupKey,
LedgerEntryRow,
operationCategories,
OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
@@ -24,22 +30,49 @@ type AccountOperationsPageLoadedProps = Extract<
const AccountOperationsPageLoadedOperations: FC<
AccountOperationsPageLoadedProps
> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
> = (props) => {
const { t } = useTranslation();
const { items } = props;
if (items.length > 0) {
return items.map(operation => (
<LedgerEntryRow
key={JSON.stringify([
const entries = groupItems(
items.map(operation => ({
key: JSON.stringify([
operation.account?.id,
operation.id,
operation.logoName,
])}
operation={operation}
/>
));
]),
operation,
})),
entry => props.allAccounts
? brokerageOperationGroupKey(entry.operation)
: null,
);
return (
<Stack
component="ul"
gap="lg"
m={0}
p={0}
style={{ listStyle: "none" }}
>
{entries.map(entry => entry.type === "group"
? (
<OperationGroup
entries={entry.items}
key={entry.key}
totalVisible={props.totalVisible}
/>
)
: (
<li key={entry.item.key}>
<LedgerEntryRow operation={entry.item.operation} />
</li>
))}
</Stack>
);
}
if (props.partial) {
@@ -0,0 +1,175 @@
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),
stock("F", null, "USD"), stock("G", "-3", "USD"),
]), "stocks", "RUB", labels);
expect(model.currencies).toEqual(["RUB", "USD"]);
expect(model.total).toBe("16");
expect(model.items.map(item => item.share)).toEqual(["93,8 %", "6,3 %"]);
expect(model.unaccounted).toBe(3);
const negative = snapshot([stock("A", "-3", "USD")]);
expect(toConcentration(negative, "stocks", "USD", 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", "RUB", 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", "RUB", 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", "RUB", 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", "RUB", labels)
.items.map(item => item.amount)).toEqual(["500", "100", "50"]);
expect(toConcentration(snapshot(positions), "issuers", "RUB", 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", "RUB", 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", "RUB", 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", "RUB", 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", "RUB", labels)
.items[0]?.logo?.subtitle).toBe("RU000A0JX0J2");
});
});
+300
View File
@@ -0,0 +1,300 @@
import type { Portfolio } from "@/entities/portfolio";
import {
type Decimal,
decimalFromString,
decimalToString,
instrumentLogoUrl,
sumDecimals,
} from "@/shared/lib";
type Concentration = {
currencies: string[];
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,
selected: null | string,
): number {
if (!isIncluded(slice, position.type)) return 0;
if (!position.currentValue) return 1;
if (position.currentValue.currency !== selected) return 0;
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 concentrationCurrencies(portfolio: Portfolio): string[] {
return [...new Set(portfolio.positions
.filter(position => eligibleTypes.has(position.type))
.filter(position => position.currentValue
&& decimalFromString(position.currentValue.value).value !== 0n)
.map(position => position.currentValue?.currency)
.filter((value): value is string => !!value))]
.toSorted((a, b) => a.localeCompare(b));
}
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,
currency: null | string,
labels: ConcentrationLabels,
): Concentration {
const currencies = concentrationCurrencies(portfolio);
const selected = currency && currencies.includes(currency)
? currency
: currencies[0] ?? null;
const groups = new Map<string, Group>();
let unaccounted = 0;
for (const [index, position] of portfolio.positions.entries()) {
unaccounted += addPosition(
groups, position, index, slice, labels, selected,
);
}
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 {
currencies,
empty: !total,
items: other ? entries.slice(0, TOP) : entries,
other,
top5Share: top5 && total ? share(top5, total) : null,
total: total && decimalToString(total),
unaccounted,
};
}
export {
concentrationCurrencies,
toConcentration,
};
export type {
Concentration,
ConcentrationItem,
ConcentrationLabels,
Slice,
};
@@ -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,8 +41,10 @@ const portfolio
displayName: "Фонд",
figi: "FIGI-FUND",
isin: null,
issuer: null,
logoName: "fond.png",
quantity: "3",
sector: null,
ticker: null,
type: "FUND",
},
+123 -1
View File
@@ -2,9 +2,19 @@ import { describe, expect, it } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { toAccountPagePositionSections } from "./positions";
import {
formatPositionReturnPercent,
toAccountPagePositionSections,
toUnrealizedReturns,
} from "./positions";
import { portfolio, position, second } from "./positions.fixtures";
function makePosition(
overrides: Partial<Portfolio["positions"][number]>,
): Portfolio["positions"][number] {
return { ...position, ...overrides };
}
function sections(positions: Portfolio["positions"]) {
return toAccountPagePositionSections({
...portfolio,
@@ -82,6 +92,8 @@ describe("account position sections", () => {
{
displayName: "Акция",
logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
returnPercent: null,
returnPercentText: null,
returnText: "+10 ₽",
returnTone: "positive",
shareText: "66,7 %",
@@ -95,6 +107,8 @@ describe("account position sections", () => {
{
displayName: "Облигация",
logoSrc: null,
returnPercent: "-11.111111",
returnPercentText: "-11,11 %",
returnText: "-5 ₽",
returnTone: "negative",
shareText: "33,3 %",
@@ -107,6 +121,8 @@ describe("account position sections", () => {
{
displayName: "Фонд",
logoSrc: null,
returnPercent: null,
returnPercentText: null,
returnText: null,
returnTone: undefined,
shareText: null,
@@ -187,3 +203,109 @@ describe("account position sections", () => {
expect(source).toEqual(before);
});
});
describe("account position returns", () => {
it.each([
{
absoluteReturn: { currency: "RUB", value: "25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
expected: "7.142857",
name: "gain",
quantity: "1.25",
type: "STOCK",
},
{
absoluteReturn: { currency: "RUB", value: "-25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
expected: "-7.142857",
name: "loss",
quantity: "1.25",
type: "STOCK",
},
{
absoluteReturn: { currency: "RUB", value: "-5" },
averagePurchasePrice: { currency: "RUB", value: "45" },
expected: "-11.111111",
name: "bond without accrued interest",
quantity: "1",
type: "BOND",
},
] as const)("calculates $name from the clean purchase cost", (testCase) => {
const result = sections([makePosition({
absoluteReturn: testCase.absoluteReturn,
averagePurchasePrice: testCase.averagePurchasePrice,
quantity: testCase.quantity,
type: testCase.type,
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent)
.toBe(testCase.expected);
});
it.each([
{ name: "zero quantity", overrides: { quantity: "0" } },
{ name: "negative quantity", overrides: { quantity: "-1" } },
{ name: "missing average price", overrides: { averagePurchasePrice: null } },
{
name: "currency mismatch",
overrides: { averagePurchasePrice: { currency: "USD", value: "280" } },
},
{ name: "zero cost", overrides: { averagePurchasePrice: { currency: "RUB", value: "0" } } },
])("returns null for $name", ({ overrides }) => {
const result = sections([makePosition({
absoluteReturn: { currency: "RUB", value: "25" },
averagePurchasePrice: { currency: "RUB", value: "280" },
quantity: "1.25",
...overrides,
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent).toBeNull();
});
it.each([
{ absoluteReturn: "1", expected: "0.000001" },
{ absoluteReturn: "-1", expected: "-0.000001" },
])("rounds an exact half away from zero for $absoluteReturn", (testCase) => {
const result = sections([makePosition({
absoluteReturn: { currency: "RUB", value: testCase.absoluteReturn },
averagePurchasePrice: { currency: "RUB", value: "200000000" },
quantity: "1",
})]);
expect(result[0]?.groups[0]?.positions[0].returnPercent)
.toBe(testCase.expected);
});
it.each([
{ expected: "+1.01", value: "1.005" },
{ expected: "-1.01", value: "-1.005" },
])("formats $value for display with a sign and two decimals", (testCase) => {
expect(formatPositionReturnPercent(testCase.value)).toBe(testCase.expected);
});
it("sums complete unrealized returns by currency", () => {
const result = toUnrealizedReturns([
makePosition({ absoluteReturn: { currency: "RUB", value: "0.1" } }),
makePosition({ absoluteReturn: { currency: "RUB", value: "0.2" } }),
makePosition({ absoluteReturn: { currency: "USD", value: "-2.5" } }),
]);
expect(result).toEqual([
{ currency: "RUB", value: "0.3" },
{ currency: "USD", value: "-2.5" },
]);
});
it("omits only currencies with incomplete returns", () => {
const result = toUnrealizedReturns([
makePosition({ absoluteReturn: { currency: "RUB", value: "10" } }),
makePosition({
absoluteReturn: null,
currentValue: { currency: "RUB", value: "100" },
}),
makePosition({ absoluteReturn: { currency: "USD", value: "2" } }),
]);
expect(result).toEqual([{ currency: "USD", value: "2" }]);
});
});
+123 -1
View File
@@ -1,9 +1,19 @@
import { formatShare, type Portfolio } from "@/entities/portfolio";
import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
import {
type Decimal,
decimalFromString,
decimalToString,
formatDecimal,
formatMoney,
instrumentLogoUrl,
sumDecimals,
} from "@/shared/lib";
type AccountPagePosition = Portfolio["positions"][number] & {
instrumentTo?: string;
logoSrc: null | string;
returnPercent: null | string;
returnPercentText: null | string;
returnText: null | string;
returnTone?: AccountPageReturnTone;
shareText: null | string;
@@ -21,10 +31,44 @@ type AccountPagePositionSection = {
type AccountPageReturnTone = "negative" | "positive";
type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
type PositionSectionKind = "bonds"
| "other"
| "stocks";
const RADIX = 10n;
const PERCENT_SCALE = 6;
const DISPLAY_PERCENT_SCALE = 2;
const PERCENT_FACTOR = 100n;
const ROUNDING_FACTOR = 2n;
function formatPositionReturnPercent(value: string): string {
const decimal = decimalFromString(value);
let rounded = decimal.value;
if (decimal.scale > DISPLAY_PERCENT_SCALE) {
const divisor = RADIX ** BigInt(decimal.scale - DISPLAY_PERCENT_SCALE);
const remainder = rounded % divisor;
const absoluteRemainder = remainder < 0n ? -remainder : remainder;
rounded /= divisor;
if (absoluteRemainder * ROUNDING_FACTOR >= divisor) {
rounded += decimal.value < 0n ? -1n : 1n;
}
}
else {
rounded *= RADIX ** BigInt(DISPLAY_PERCENT_SCALE - decimal.scale);
}
const sign = rounded > 0n ? "+" : "";
return `${sign}${decimalToString({
scale: DISPLAY_PERCENT_SCALE,
value: rounded,
})}`;
}
function groupPositions(
positions: AccountPagePosition[],
): AccountPagePositionGroup[] {
@@ -67,6 +111,41 @@ function positionIdentity(position: AccountPagePosition) {
return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined;
}
function returnPercent(
position: Portfolio["positions"][number],
): null | string {
const result = position.absoluteReturn;
const price = position.averagePurchasePrice;
if (!result || !price || result.currency !== price.currency) return null;
const quantity = decimalFromString(position.quantity);
const purchasePrice = decimalFromString(price.value);
const cost = {
scale: quantity.scale + purchasePrice.scale,
value: quantity.value * purchasePrice.value,
};
if (quantity.value <= 0n || cost.value <= 0n) return null;
const absoluteReturn = decimalFromString(result.value);
const numerator = absoluteReturn.value * PERCENT_FACTOR
* RADIX ** BigInt(cost.scale + PERCENT_SCALE);
const denominator = cost.value * RADIX ** BigInt(absoluteReturn.scale);
const remainder = numerator % denominator;
const isRoundsUp = (remainder < 0n ? -remainder : remainder) * ROUNDING_FACTOR
>= denominator;
const rounding = isRoundsUp ? 1n : 0n;
const signedRounding = numerator < 0n ? -rounding : rounding;
const rounded = numerator / denominator + signedRounding;
return decimalToString({ scale: PERCENT_SCALE, value: rounded });
}
function toAccountPagePositionSections(
portfolio: Portfolio,
): AccountPagePositionSection[] {
@@ -111,6 +190,8 @@ function toPosition(
const returnPrefix
= isExpanded && returnValue !== null && returnValue > 0 ? "+" : "";
const percent = returnPercent(position);
return {
...position,
instrumentTo:
@@ -120,6 +201,10 @@ function toPosition(
logoSrc: isExpanded
? instrumentLogoUrl(position.logoName)
: null,
returnPercent: percent,
returnPercentText: percent
? `${formatDecimal(formatPositionReturnPercent(percent))} %`
: null,
returnText: position.absoluteReturn
? `${returnPrefix}${formatMoney(position.absoluteReturn)}`
: null,
@@ -162,9 +247,46 @@ function toSection(
};
}
function toUnrealizedReturns(
positions: Portfolio["positions"],
): Money[] {
const totals = new Map<string, {
complete: boolean;
values: Decimal[];
}>();
for (const position of positions) {
const currencies = position.absoluteReturn
? [position.absoluteReturn.currency]
: [...new Set([
position.averagePurchasePrice?.currency,
position.currentValue?.currency,
].filter((currency): currency is string => !!currency))];
for (const currency of currencies) {
const total = totals.get(currency) ?? { complete: true, values: [] };
if (position.absoluteReturn) {
total.values.push(decimalFromString(position.absoluteReturn.value));
}
else {
total.complete = false;
}
totals.set(currency, total);
}
}
return [...totals].flatMap(([currency, total]) => total.complete
? [{ currency, value: decimalToString(sumDecimals(total.values)) }]
: []);
}
export {
type AccountPagePosition,
type AccountPagePositionGroup,
type AccountPagePositionSection,
formatPositionReturnPercent,
toAccountPagePositionSections,
toUnrealizedReturns,
};
+10 -1
View File
@@ -33,6 +33,7 @@ type AccountPageRecentOperations
stale?: boolean;
state: "loaded" | "partial";
to: string;
totalVisible?: boolean;
}
| {
state: "empty"
@@ -84,6 +85,7 @@ function toRecentEvents(
items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
state: "partial",
to,
totalVisible: false,
};
if (!events.data && (events.isError || events.meta?.lastAttempt.state === "failed"))
return { state: "error", to };
@@ -94,6 +96,7 @@ function toRecentEvents(
items,
state: "loaded",
to,
totalVisible: events.meta?.completeness === "complete",
};
}
@@ -109,7 +112,12 @@ function toRecentOperations(
)
return { state: "loading", to };
if (operations.meta?.completeness === "incomplete")
return { items: operations.data?.items ?? [], state: "partial", to };
return {
items: operations.data?.items ?? [],
state: "partial",
to,
totalVisible: false,
};
if (
!operations.data
&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
@@ -125,6 +133,7 @@ function toRecentOperations(
stale: operations.meta?.freshness === "stale",
state: "loaded",
to,
totalVisible: operations.meta?.completeness === "complete",
};
}
@@ -98,21 +98,13 @@
font-family: var(--mantine-font-family-monospace);
}
.accordionControl {
transition:
background-color 150ms ease,
color 150ms ease;
.tabsList {
flex-wrap: nowrap;
overflow-x: auto;
}
.accordionLabel {
font-size: var(--mantine-h2-font-size);
font-weight: var(--mantine-h2-font-weight);
line-height: var(--mantine-h2-line-height);
}
.accordionPanel {
padding-left: 0;
padding-right: 0;
.positionFilter {
overflow-x: auto;
}
.accountPositions {
@@ -1,15 +1,19 @@
import { MantineProvider } from "@mantine/core";
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
fireEvent,
render,
screen,
waitFor,
within,
} from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes } from "react-router";
import { useState } from "react";
import { getI18n } from "react-i18next";
import { MemoryRouter, Route, Routes, useNavigate } from "react-router";
import { describe, expect, it, vi } from "vitest";
import type { BrokerageOperation } from "@/entities/broker-operation";
import type { BrokerageEvent } from "@/entities/brokerage-event";
import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio";
@@ -23,13 +27,30 @@ import type {
AccountPageRecentOperations,
} from "../../model/previews";
import { toAccountPagePositionSections } from "../../model/positions";
import { toConcentration } from "../../model/concentration";
import {
toAccountPagePositionSections,
toUnrealizedReturns,
} from "../../model/positions";
import { AccountPage } from "./AccountPage";
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";
function AccountSwitcher() {
const navigate = useNavigate();
return (
<button
onClick={() => navigate("/accounts/account-2")}
type="button"
>
Другой счёт
</button>
);
}
function configureTestAuth() {
configureAuthClient({
accessToken: () => "test-token",
@@ -45,6 +66,8 @@ function renderAccountRoute(queryClient: QueryClient, accountId = "account-1") {
<QueryClientProvider client={queryClient}>
<MantineProvider>
<MemoryRouter initialEntries={[`/accounts/${accountId}`]}>
<AccountSwitcher />
<Routes>
<Route element={<AccountPage />} path="/accounts/:accountId" />
</Routes>
@@ -79,8 +102,10 @@ const portfolio
displayName: "Вторая",
figi: "FIGI-2",
isin: null,
issuer: null,
logoName: "vtoraya.png",
quantity: "2",
sector: null,
ticker: null,
type: "STOCK",
},
@@ -91,8 +116,10 @@ const portfolio
displayName: "Первая",
figi: "FIGI-1",
isin: "RU000A0JX0J2",
issuer: null,
logoName: null,
quantity: "1",
sector: null,
ticker: null,
type: "BOND",
},
@@ -111,8 +138,10 @@ function position(
displayName: "Инструмент",
figi: null,
isin: null,
issuer: null,
logoName: null,
quantity: "1",
sector: null,
ticker: null,
type: "STOCK",
...overrides,
@@ -129,6 +158,19 @@ const emptyRecentEvents: AccountPageRecentEvents = {
to: "/accounts/account-1/events",
};
function concentrationLabels() {
const i18n = getI18n();
return {
missingIssuer: i18n.t("portfolio.concentration.missingIssuer"),
missingSector: i18n.t("portfolio.concentration.missingSector"),
other: i18n.t("portfolio.concentration.other"),
sector: (code: string) => i18n.t(`stock.sectors.${code}`, {
defaultValue: code,
}),
};
}
function emptyProps() {
return {
recentEvents: emptyRecentEvents,
@@ -136,16 +178,371 @@ function emptyProps() {
};
}
const LoadedHarness = (
props: Omit<Partial<Parameters<typeof AccountPageLoaded>[0]>, "onTabChange">,
) => {
const [tab, setTab] = useState(props.tab ?? "positions");
return (
<AccountPageLoaded
{...loadedProps()}
{...props}
onTabChange={value => setTab(value ?? "positions")}
tab={tab}
/>
);
};
function loadedProps(nextPortfolio: Portfolio = portfolio) {
return {
concentration: null,
currency: null,
onCurrencyChange: vi.fn(),
onSliceChange: vi.fn(),
portfolio: nextPortfolio,
positionSections: toAccountPagePositionSections(nextPortfolio),
recentEvents: emptyRecentEvents,
recentOperations: emptyRecentOperations,
slice: "stocks" as const,
unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
};
}
describe("AccountPage states", () => {
it("shows concentration only for a loaded individual account", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource({
...portfolio,
positions: [position({
currentValue: { currency: "RUB", value: "100" },
displayName: "Акция",
})],
})),
),
);
const client = createTestQueryClient();
renderAccountRoute(client);
const tab = await screen.findByRole("tab", { name: "Концентрация" });
expect(tab).toHaveAttribute("aria-selected", "false");
fireEvent.click(tab);
expect(screen.getAllByText("100 ₽")).toHaveLength(2);
expect(screen.getByRole("img", { name: "Распределение позиций" }))
.toHaveAccessibleDescription(/Акция: 100 ₽, 100 %/);
});
it("expands and resets other when switching slice", () => {
const positions = [400, 250, 150, 100, 50, 30, 20].map(
(value, index) => position({
currentValue: { currency: "RUB", value: String(value) },
displayName: `Акция ${index + 1}`,
}),
);
const data = { ...portfolio, positions };
const model = toConcentration(
data, "stocks", "RUB", concentrationLabels(),
);
const props = loadedProps(data);
renderPage(
<LoadedHarness
{...props}
accountId="a"
concentration={model}
currency="RUB"
tab="concentration"
/>,
);
const other = screen.getByRole("button", { name: /Прочее/ });
expect(other).toHaveAttribute("aria-expanded", "false");
fireEvent.click(other);
expect(other).toHaveAttribute("aria-expanded", "true");
expect(screen.getByText("Акция 7")).toBeInTheDocument();
fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
expect(props.onSliceChange).toHaveBeenCalledWith("sectors");
});
it.each([
[2, "2 элемента"],
[5, "5 элементов"],
[21, "21 элемент"],
])("pluralizes the other count %d as %s", (count, expected) => {
const values = [400, 250, 150, 100, 50];
const rest = Array.from(
{ length: count },
(_, index) => 20 + index,
);
const positions = [...values, ...rest].map(
(value, index) => position({
currentValue: { currency: "RUB", value: String(value) },
displayName: `Акция ${index + 1}`,
}),
);
renderPage(
<LoadedHarness
{...loadedProps({ ...portfolio, positions })}
accountId="a"
concentration={toConcentration(
{ ...portfolio, positions },
"stocks",
"RUB",
concentrationLabels(),
)}
currency="RUB"
tab="concentration"
/>,
);
const other = screen.getByRole("button", { name: /Прочее/ });
expect(other).toHaveTextContent(expected);
});
it("shows ticker subtitles and stocks rows with logos, issuers without", () => {
const positions = [
position({
currentValue: { currency: "RUB", value: "300" },
displayName: "Сбербанк",
ticker: "SBER",
}),
];
const data = { ...portfolio, positions };
const view = renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "stocks", "RUB", concentrationLabels(),
)}
currency="RUB"
tab="concentration"
/>,
);
expect(screen.getByText("SBER")).toBeInTheDocument();
view.unmount();
renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "issuers", "RUB", concentrationLabels(),
)}
currency="RUB"
slice="issuers"
tab="concentration"
/>,
);
expect(screen.queryByText("SBER")).not.toBeInTheDocument();
});
it("hides the currency select when only one currency is available", () => {
const data = { ...portfolio, positions: [position({
currentValue: { currency: "RUB", value: "100" },
displayName: "Акция",
})] };
renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "stocks", "RUB", concentrationLabels(),
)}
currency="RUB"
tab="concentration"
/>,
);
expect(screen.queryByRole("combobox", { name: "Валюта концентрации" }))
.not.toBeInTheDocument();
});
it("shows sector labels including government and unknown codes", () => {
const positions = [
position({
currentValue: { currency: "RUB", value: "300" },
displayName: "А",
sector: "government",
}),
position({
currentValue: { currency: "RUB", value: "100" },
displayName: "Б",
sector: "unknown_code",
}),
];
const data = { ...portfolio, positions };
renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "sectors", "RUB", concentrationLabels(),
)}
currency="RUB"
slice="sectors"
tab="concentration"
/>,
);
expect(screen.getByText("Государственный сектор")).toBeInTheDocument();
expect(screen.getByText("unknown_code")).toBeInTheDocument();
});
it("describes ranked segments with amounts and shares", () => {
const data = { ...portfolio, positions: [
position({
currentValue: { currency: "RUB", value: "300" },
displayName: "Первая акция",
}),
position({
currentValue: { currency: "RUB", value: "100" },
displayName: "Вторая акция",
}),
...[50, 40, 30, 20, 10].map((value, index) => position({
currentValue: { currency: "RUB", value: String(value) },
displayName: `Остаток ${index + 1}`,
})),
] };
renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "stocks", "RUB", concentrationLabels(),
)}
currency="RUB"
tab="concentration"
/>,
);
const chart = screen.getByRole("img", { name: "Распределение позиций" });
expect(chart).toHaveAccessibleDescription(
/Первая акция: 300 ₽, 54,5 %; Вторая акция: 100 ₽, 18,2 %; Остаток 1: 50 ₽, 9,1 %; Остаток 2: 40 ₽, 7,3 %; Остаток 3: 30 ₽, 5,5 %; Прочее: 30 ₽, 5,5 %/,
);
expect(screen.getByRole("button", { name: /Прочее/ }))
.toBeInTheDocument();
});
it("does not duplicate the partial warning on the concentration tab", () => {
const data = { ...portfolio, positions: [position({
currentValue: { currency: "RUB", value: "100" },
displayName: "Акция",
})] };
renderPage(
<LoadedHarness
{...loadedProps(data)}
accountId="a"
concentration={toConcentration(
data, "stocks", "RUB", concentrationLabels(),
)}
currency="RUB"
partial
tab="concentration"
/>,
);
expect(screen.getAllByRole("status"))
.toHaveLength(1);
});
it("keeps slice and currency while switching page tabs and resets on account change", async () => {
const multiCurrency = { ...portfolio, positions:
["RUB", "USD"].flatMap(currency =>
[400, 250, 150, 100, 50, 30, 20].map((value, index) =>
position({
currentValue: { currency, value: String(value) },
displayName: `${currency} акция ${index + 1}`,
sector: "energy", type: "STOCK",
}),
),
) };
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(multiCurrency)),
),
);
const client = createTestQueryClient();
renderAccountRoute(client);
fireEvent.click(await screen.findByRole("tab", { name: "Концентрация" }));
fireEvent.click(screen.getByRole("button", { name: /Прочее/ }));
expect(screen.getByRole("button", { name: /Прочее/ }))
.toHaveAttribute("aria-expanded", "true");
fireEvent.click(screen.getByRole("combobox", { name: "Валюта концентрации" }));
fireEvent.click(screen.getByRole("option", { name: "USD" }));
expect(screen.getByRole("button", { name: /Прочее/ }))
.toHaveAttribute("aria-expanded", "false");
fireEvent.click(screen.getByRole("button", { name: /Прочее/ }));
fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
fireEvent.click(screen.getByRole("radio", { name: "Акции" }));
expect(screen.getByRole("button", { name: /Прочее/ }))
.toHaveAttribute("aria-expanded", "false");
fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
.toHaveValue("USD");
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
fireEvent.click(screen.getByRole("tab", { name: "Концентрация" }));
expect(screen.getByRole("radio", { name: "Секторы" }))
.toBeChecked();
expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
.toHaveValue("USD");
fireEvent.click(screen.getByRole("button", { name: "Другой счёт" }));
fireEvent.click(await screen.findByRole("tab", { name: "Концентрация" }));
expect(screen.getByRole("radio", { name: "Акции" })).toBeChecked();
expect(screen.getByRole("combobox", { name: "Валюта концентрации" }))
.toHaveValue("RUB");
});
it("falls back to the first currency when the selected one disappears", () => {
const data = { ...portfolio, positions: [
position({
currentValue: { currency: "USD", value: "200" },
}),
position({
currentValue: { currency: "RUB", value: "100" },
}),
] };
const model = toConcentration(
data, "stocks", "EUR", concentrationLabels(),
);
expect(model.currencies).toEqual(["RUB", "USD"]);
expect(model.total).toBe("100");
expect(model.items.map(item => item.amount)).toEqual(["100"]);
});
it("shows the loaded portfolio source sync status", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(portfolio, { freshness: "stale" })),
),
);
renderAccountRoute(createTestQueryClient());
expect(
await screen.findByText("Данные требуют обновления"),
).toBeInTheDocument();
expect(screen.getByText(/Данные на 14\.08\.2026/)).toBeInTheDocument();
});
it.each(
["account-1", "all"].flatMap(accountId =>
["STOCK", "BOND"].flatMap(type =>
@@ -246,7 +643,7 @@ describe("AccountPage states", () => {
).toHaveTextContent("Данные о структуре портфеля пока недоступны.");
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]);
).toEqual(["1 234,5 ₽"]);
});
it("keeps initial placeholders decorative without amounts or focus targets", () => {
const { container } = renderPage(<AccountPageLoading />);
@@ -286,7 +683,7 @@ describe("AccountPage states", () => {
it("shows supplied cash separately without adding currency instruments or recalculating totals", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps({
...portfolio,
cashBalances: [
@@ -309,8 +706,10 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
const balances = within(
screen.getByRole("region", { name: "Денежные остатки" }),
screen.getByRole("tabpanel", { name: "Деньги" }),
);
expect(
@@ -318,7 +717,12 @@ describe("AccountPage states", () => {
).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
).toEqual([
"1 234,5 ₽",
"234,500000000000000001 ₽",
"-0,5 $",
"3,00 XYZ",
]);
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
expect(
screen.queryByText(/полная оценка|общая стоимость/i),
@@ -341,6 +745,7 @@ describe("AccountPage states", () => {
);
renderAccountRoute(createTestQueryClient());
await screen.findByRole("heading", { level: 1, name: "Портфель" });
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect(screen.getByRole("definition")).toHaveTextContent("0,5 $");
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
},
@@ -381,9 +786,10 @@ describe("AccountPage states", () => {
).not.toBeInTheDocument();
expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect(
within(
screen.getByRole("region", { name: "Денежные остатки" }),
screen.getByRole("tabpanel", { name: "Деньги" }),
).queryByRole("definition"),
).not.toBeInTheDocument();
expect(
@@ -395,11 +801,25 @@ describe("AccountPage states", () => {
},
);
it("renders the empty state", () => {
renderPage(<AccountPageEmpty {...emptyProps()} />);
it("renders the empty state with self-descriptive preview links", () => {
renderPage(
<AccountPageEmpty
{...emptyProps()}
incomeSummary={{
state: "empty",
to: "/accounts/account-1/income",
}}
/>,
);
expect(
screen.getByRole("heading", { name: "Портфель пока пуст" }),
).toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть журнал" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть будущие события" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
.toBeInTheDocument();
});
it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
@@ -447,7 +867,7 @@ describe("AccountPage states", () => {
});
it("renders a stale portfolio in upstream order with nullable values hidden", () => {
renderPage(<AccountPageLoaded {...loadedProps()} />);
renderPage(<LoadedHarness {...loadedProps()} />);
expect(
screen.getByRole("heading", { level: 1, name: "Портфель" }),
@@ -455,18 +875,22 @@ describe("AccountPage states", () => {
expect(screen.queryByText(/T-Bank временно недоступен/))
.not.toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Облигации" }),
screen.getByRole("radio", { name: "Облигации" }),
).toBeInTheDocument();
const positions = screen
.getAllByText(/Вторая|Первая/)
.map(element => element.textContent);
expect(positions).toEqual(["Вторая", "Первая"]);
expect(screen.getByText("10 ₽")).toBeInTheDocument();
expect(
screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
).toEqual(["stocks", "bonds"]);
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(screen.getByText("-1 ₽")).toBeInTheDocument();
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
"src",
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
);
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("10 ₽")).toBeInTheDocument();
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
expect(
screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
@@ -475,17 +899,13 @@ describe("AccountPage states", () => {
screen.getByText("Количество: 1 · RU000A0JX0J2"),
).toBeInTheDocument();
expect(screen.queryByText("—")).not.toBeInTheDocument();
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
"src",
"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
);
});
it.each(["STOCK", "BOND"] as const)(
"renders %s logos, fallbacks and signed returns including zero",
(type) => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [
@@ -515,8 +935,11 @@ describe("AccountPage states", () => {
expect(screen.getByText("Б")).toBeInTheDocument();
expect(screen.getByText("Н")).toBeInTheDocument();
expect(screen.getAllByRole("img")).toHaveLength(1);
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"])
for (const value of ["+3 ₽", "+2 ₽", "0 ₽"]) {
expect(screen.getByText(value)).toBeInTheDocument();
}
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
},
);
@@ -525,7 +948,7 @@ describe("AccountPage states", () => {
"groups %s supporting metrics into quiet single lines",
(type) => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [position({
@@ -547,7 +970,7 @@ describe("AccountPage states", () => {
it("uses the ticker only for stock cards and otherwise keeps the ISIN", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [
@@ -564,6 +987,7 @@ describe("AccountPage states", () => {
expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument();
expect(screen.getByText("Количество: 2 · FALLBACK-ISIN"))
.toBeInTheDocument();
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("Количество: 3 · BOND-ISIN"))
.toBeInTheDocument();
expect(screen.queryByText("OFZ")).not.toBeInTheDocument();
@@ -571,7 +995,7 @@ describe("AccountPage states", () => {
it("keeps other-position cards compact with labeled return and no logo", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [position({
@@ -589,7 +1013,7 @@ describe("AccountPage states", () => {
it("uses the cached account title when available", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
account={{
@@ -608,7 +1032,7 @@ describe("AccountPage states", () => {
it("keeps the portfolio visible when recent operations fail", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
recentOperations={{
state: "error",
@@ -617,15 +1041,17 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(
screen.getByText("Пока недоступно"),
).toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
expect(screen.getByText("Вторая")).toBeInTheDocument();
});
it("uses the ledger row for a recent outgoing trade operation", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
recentOperations={{
@@ -654,6 +1080,7 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Сделка")).toBeInTheDocument();
expect(screen.getByText("−12 ₽")).toBeInTheDocument();
});
@@ -674,7 +1101,7 @@ describe("AccountPage states", () => {
};
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
recentEvents={{
@@ -707,7 +1134,8 @@ describe("AccountPage states", () => {
/>,
);
const section = screen.getByRole("region", { name: "Будущие события" });
fireEvent.click(screen.getByRole("tab", { name: "События" }));
const section = screen.getByRole("tabpanel", { name: "События" });
const content = within(section);
const text = section.textContent ?? "";
@@ -734,7 +1162,7 @@ describe("AccountPage states", () => {
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
expect(
content.getByRole("link", { name: "Открыть будущие события" }),
content.getByRole("link", { name: "Подробнее" }),
).toHaveAttribute("href", "/accounts/account-1/events");
});
@@ -742,14 +1170,16 @@ describe("AccountPage states", () => {
"keeps the upcoming %s state and calendar action",
(state) => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
recentEvents={{ state, to: "/accounts/account-1/events" }}
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "События" }));
const content = within(
screen.getByRole("region", { name: "Будущие события" }),
screen.getByRole("tabpanel", { name: "События" }),
);
if (state === "loading") {
@@ -770,14 +1200,14 @@ describe("AccountPage states", () => {
}
expect(
content.getByRole("link", { name: "Открыть будущие события" }),
content.getByRole("link", { name: "Подробнее" }),
).toHaveAttribute("href", "/accounts/account-1/events");
},
);
it("keeps the portfolio visible when upcoming events fail", () => {
renderPage(
<AccountPageLoaded
<LoadedHarness
{...loadedProps()}
recentEvents={{
state: "error",
@@ -786,9 +1216,11 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "События" }));
expect(
screen.getByText("Данные появятся здесь, когда чтение восстановится."),
).toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
expect(screen.getByText("Вторая")).toBeInTheDocument();
});
@@ -857,7 +1289,7 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]);
).toEqual(["1 234,5 ₽"]);
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
void queryClient.invalidateQueries({
@@ -867,7 +1299,7 @@ describe("AccountPage states", () => {
expect(structure).toHaveTextContent("10 ₽");
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]);
).toEqual(["1 234,5 ₽"]);
resolveRetry?.(
HttpResponse.json(
resource(
@@ -886,7 +1318,7 @@ describe("AccountPage states", () => {
await waitFor(() =>
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["-0,5 $", "2,50 €"]),
).toEqual(["-0,5 $"]),
);
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(structure).not.toHaveTextContent("10 ₽");
@@ -928,7 +1360,7 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽", "0,5 $"]);
).toEqual(["1 234,5 ₽"]);
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(
screen.queryByRole("status", { name: "Загрузка" }),
@@ -938,4 +1370,164 @@ describe("AccountPage states", () => {
resolveRefresh?.(HttpResponse.json(resource(portfolio)));
});
it("opens positions by default and switches between local tabs", () => {
renderPage(<LoadedHarness {...loadedProps()} />);
expect(screen.getByRole("tab", { name: "Позиции" }))
.toHaveAttribute("aria-selected", "true");
expect(screen.getByText("Вторая")).toBeVisible();
fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
expect(screen.getByRole("tabpanel", { name: "Деньги" }))
.toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
});
it("links operation, event and income previews to their detail pages", () => {
renderPage(
<LoadedHarness
{...loadedProps()}
incomeSummary={{
state: "empty",
to: "/accounts/account-1/income",
}}
/>,
);
for (const [tab, href] of [
["Операции", "/accounts/account-1/operations"],
["События", "/accounts/account-1/events"],
["Доход", "/accounts/account-1/income"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" }))
.toHaveAttribute("href", href);
}
});
it("filters positions by the kinds present in the portfolio", () => {
renderPage(<LoadedHarness {...loadedProps()} />);
expect(
screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
).toEqual(["stocks", "bonds"]);
expect(screen.getByText("Вторая")).toBeVisible();
expect(screen.queryByText("Первая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
expect(screen.getByText("Первая")).toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
});
it("hides the position filter when only one kind exists", () => {
renderPage(
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [portfolio.positions[0]],
})}
/>,
);
expect(screen.queryByRole("radiogroup", { name: "Тип позиции" }))
.not.toBeInTheDocument();
});
it("hides unrealized returns for a partial portfolio", () => {
renderPage(<LoadedHarness {...loadedProps()} partial />);
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
.not.toBeInTheDocument();
});
it("omits an unrealized currency total when any return is incomplete", () => {
renderPage(
<LoadedHarness
{...loadedProps({
...portfolio,
positions: [
position({ absoluteReturn: { currency: "RUB", value: "10" } }),
position({
absoluteReturn: null,
currentValue: { currency: "RUB", value: "100" },
}),
],
})}
/>,
);
expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
.not.toBeInTheDocument();
});
it("groups overview items only after the existing five-item limits", async () => {
const operations = Array.from({ length: 6 }, (_, index) => ({
account: { id: `account-${index}`, name: `Счёт ${index + 1}` },
accruedInterest: null,
category: "income",
commission: null,
description: "Купон",
figi: "FIGI",
id: `operation-${index}`,
instrumentType: "bond",
instrumentUid: "UID",
logoName: null,
occurredAt: "2026-08-14T10:00:00Z",
payment: { currency: "RUB", value: "100" },
price: null,
quantity: null,
ticker: "BOND",
type: "OPERATION_TYPE_COUPON",
})) satisfies BrokerageOperation[];
const events = Array.from({ length: 6 }, (_, index) => ({
account: { id: `account-${index}`, name: `Счёт ${index + 1}` },
date: "2026-08-20",
dateKind: "event",
displayName: "ОФЗ 26238",
figi: "FIGI",
instrumentUid: "UID",
isin: "RU000A0JX0J2",
logoName: null,
projectedAmount: { currency: "RUB", value: "100" },
ticker: "OFZ",
type: "coupon",
})) satisfies BrokerageEvent[];
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json(resource({
accountId: "all",
hasNext: true,
items: operations.slice(0, 5),
nextCursor: "next",
}))),
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json(resource({
accountId: "all",
calculatedAt: "2026-08-14T00:00:00Z",
events,
}))),
);
renderAccountRoute(createTestQueryClient(), "all");
await screen.findByRole("heading", { level: 1, name: "Все счета" });
const operationGroup = screen.getByRole("list", {
name: /Купон · BOND, Исполнено/,
});
expect(screen.getByText("+500 ₽")).toBeInTheDocument();
expect(within(operationGroup).getAllByRole("listitem")).toHaveLength(5);
expect(within(operationGroup).queryByRole("link")).not.toBeInTheDocument();
const eventGroup = screen.getByRole("list", {
name: /Купон · ОФЗ 26238, 20\.08\.2026, 500 ₽/,
});
expect(screen.getAllByText("500 ₽").length).toBeGreaterThan(0);
expect(within(eventGroup).getAllByRole("listitem")).toHaveLength(5);
});
});
@@ -25,12 +25,21 @@ const AccountPage: FC = () => {
<AccountPageLoaded
account={viewModel.account}
accountId={viewModel.accountId}
concentration={viewModel.concentration}
currency={viewModel.currency}
incomeSummary={viewModel.incomeSummary}
onCurrencyChange={viewModel.onCurrencyChange}
onSliceChange={viewModel.onSliceChange}
onTabChange={viewModel.onTabChange}
partial={viewModel.partial}
portfolio={viewModel.portfolio}
positionSections={viewModel.positionSections}
recentEvents={viewModel.recentEvents}
recentOperations={viewModel.recentOperations}
slice={viewModel.slice}
source={viewModel.source}
tab={viewModel.tab}
unrealizedReturns={viewModel.unrealizedReturns}
/>
);
};
@@ -1,3 +1,5 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
import type { Portfolio } from "@/entities/portfolio";
@@ -17,9 +19,17 @@ import { useScreenSync } from "@/features/tbank-connection";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib";
import {
type Concentration,
concentrationCurrencies,
type ConcentrationLabels,
type Slice,
toConcentration,
} from "../../model/concentration";
import {
type AccountPagePositionSection,
toAccountPagePositionSections,
toUnrealizedReturns,
} from "../../model/positions";
import {
type AccountPageIncomeSummary,
@@ -44,10 +54,18 @@ type AccountPageEmptyViewModel = AccountPageContent & {
};
type AccountPageLoadedViewModel = AccountPageContent & {
concentration: Concentration | null;
currency: null | string;
onCurrencyChange: (currency: null | string) => void;
onSliceChange: (slice: Slice) => void;
onTabChange: (tab: null | string) => void;
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
slice: Slice;
source?: InvestmentResourceMeta;
state: "loaded";
tab: string;
unrealizedReturns: Portfolio["totalsByCurrency"];
};
type AccountPageViewModel
@@ -57,14 +75,31 @@ type AccountPageViewModel
| { state: "loading" };
function isPortfolioAccessFailure(code?: string) {
return isApiErrorCode(code, ApiErrorCode.Forbidden)
|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.NotFound)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountPageViewModel(): AccountPageViewModel {
const { accountId } = useParams();
const { t } = useTranslation();
const [selection, setSelection] = useState<{
accountId?: string;
currency: null | string;
slice: Slice;
tab: string;
}>({ accountId, currency: null, slice: "stocks", tab: "positions" });
const current = selection.accountId === accountId
? selection
: {
accountId, currency: null, slice: "stocks" as const, tab: "positions",
};
const updateSelection = (change: Partial<typeof selection>) =>
setSelection({ ...current, ...change });
const portfolio = usePortfolio(accountId);
const operations = useBrokerageOperations(accountId, {
@@ -121,18 +156,43 @@ function useAccountPageViewModel(): AccountPageViewModel {
};
const isPartial = portfolio.meta?.completeness === "incomplete";
const currencies = concentrationCurrencies(portfolio.data);
const currency = current.currency && currencies.includes(current.currency)
? current.currency
: currencies[0] ?? null;
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, currency, labels)
: null;
return {
account,
accountId,
concentration,
currency,
incomeSummary,
onCurrencyChange: value => updateSelection({ currency: value }),
onSliceChange: slice => updateSelection({ slice }),
onTabChange: tab => updateSelection({ tab: tab ?? "positions" }),
partial: isPartial,
portfolio: portfolio.data,
positionSections: toAccountPagePositionSections(portfolio.data),
recentEvents,
recentOperations,
slice: current.slice,
source: portfolio.meta,
state: "loaded" as const,
tab: current.tab,
unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
};
}
@@ -46,9 +46,15 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
structure={{ currencies: [], unvaluedCategories: [] }}
/>
<RecentOperations operations={props.recentOperations} />
<RecentOperations
allAccounts={props.accountId === "all"}
operations={props.recentOperations}
/>
<BrokerageEventsPreview events={props.recentEvents} />
<BrokerageEventsPreview
allAccounts={props.accountId === "all"}
events={props.recentEvents}
/>
{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
</Stack>
@@ -1,6 +1,12 @@
import type { FC } from "react";
import { Accordion, Alert, Stack } from "@mantine/core";
import {
Alert,
Group,
SegmentedControl,
Stack,
Tabs,
Text,
} from "@mantine/core";
import { type FC, useState } from "react";
import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account";
@@ -8,9 +14,11 @@ import type { Portfolio } from "@/entities/portfolio";
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 type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
import type { AccountPagePositionSection } from "../../../model/positions";
import type {
AccountPageIncomeSummary,
@@ -20,6 +28,7 @@ import type {
import classes from "../AccountPage.module.css";
import { AccountHeading } from "./AccountHeading.view";
import { Concentration } from "./Concentration/Concentration.view";
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PositionSection } from "./PositionSection.view";
@@ -28,25 +37,44 @@ import { RecentOperations } from "./RecentOperations.view";
type AccountPageLoadedProps = {
account?: BrokerageAccount;
accountId?: string;
concentration: ConcentrationModel | null;
currency: null | string;
incomeSummary?: AccountPageIncomeSummary;
onCurrencyChange: (currency: null | string) => void;
onSliceChange: (slice: Slice) => void;
onTabChange: (tab: null | string) => void;
partial?: boolean;
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
slice: Slice;
source?: InvestmentResourceMeta;
tab: string;
unrealizedReturns: Portfolio["totalsByCurrency"];
};
const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
const { t } = useTranslation();
const [filter, setFilter] = useState<string>();
const tab = props.tab;
const defaultValue = [
...props.positionSections.map(section => section.kind),
"cash",
"recentOperations",
"recentEvents",
"incomeSummary",
];
const onTabChange = props.onTabChange;
const activeSection = props.positionSections.find(
section => section.kind === filter,
) ?? props.positionSections[0];
const positionKindLabels: Record<AccountPagePositionSection["kind"], string> = {
bonds: t("portfolio.positionKinds.bonds"),
other: t("portfolio.positionKinds.other"),
stocks: t("portfolio.positionKinds.stocks"),
};
const filterOptions = props.positionSections.map(section => ({
label: positionKindLabels[section.kind],
value: section.kind,
}));
return (
<Stack gap="lg">
@@ -59,9 +87,31 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
/>
{props.partial
? <Alert role="status">{t("investment.partial")}</Alert>
? tab !== "concentration" && (
<Alert role="status">{t("investment.partial")}</Alert>
)
: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
{!props.partial && props.unrealizedReturns.length > 0 && (
<Stack
aria-label={t("portfolio.unrealizedResult")}
component="section"
gap={4}
>
<Text fw={600}>{t("portfolio.unrealizedResult")}</Text>
<Group gap="md">
{props.unrealizedReturns.map(total => (
<Text key={total.currency}>{formatMoney(total)}</Text>
))}
</Group>
<Text c="dimmed" size="xs">
{t("portfolio.unrealizedResultCaption")}
</Text>
</Stack>
)}
{!props.partial && (
<PortfolioStructure
key={props.accountId}
@@ -69,70 +119,98 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
/>
)}
<Accordion
classNames={{
chevron: classes.accordionChevron,
control: classes.accordionControl,
label: classes.accordionLabel,
panel: classes.accordionPanel,
}}
defaultValue={defaultValue}
multiple
<Tabs
classNames={{ list: classes.tabsList }}
keepMounted={false}
onChange={onTabChange}
value={tab}
>
{props.positionSections.map(section => (
<Accordion.Item key={section.kind} value={section.kind}>
<Accordion.Control>
{t(positionSectionTitleKey(section.kind))}
</Accordion.Control>
<Tabs.List aria-label={t("portfolio.sections")} mb="md">
<Tabs.Tab value="positions">
{t("portfolio.tabs.positions")}
</Tabs.Tab>
<Accordion.Panel>
<PositionSection section={section} />
</Accordion.Panel>
</Accordion.Item>
))}
{props.accountId !== "all" && (
<Tabs.Tab value="concentration">
{t("portfolio.concentration.title")}
</Tabs.Tab>
)}
<Accordion.Item value="cash">
<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
<Accordion.Panel>
<CurrencyCards amounts={props.portfolio.cashBalances} />
</Accordion.Panel>
</Accordion.Item>
<Tabs.Tab value="operations">
{t("portfolio.tabs.operations")}
</Tabs.Tab>
<Accordion.Item value="recentOperations">
<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
<Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
<Accordion.Panel>
<RecentOperations operations={props.recentOperations} />
</Accordion.Panel>
</Accordion.Item>
<Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
</Tabs.List>
<Accordion.Item value="recentEvents">
<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
<Accordion.Panel>
<BrokerageEventsPreview events={props.recentEvents} />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="incomeSummary">
<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
<Accordion.Panel>
{!!props.incomeSummary && (
<IncomeSummary {...props.incomeSummary} />
<Tabs.Panel value="positions">
<Stack gap="md">
{props.positionSections.length > 1 && (
<div className={classes.positionFilter}>
<SegmentedControl
aria-label={t("portfolio.positionFilter")}
data={filterOptions}
onChange={setFilter}
value={activeSection?.kind}
/>
</div>
)}
</Accordion.Panel>
</Accordion.Item>
</Accordion>
{activeSection && <PositionSection section={activeSection} />}
</Stack>
</Tabs.Panel>
{props.accountId !== "all" && (
<Tabs.Panel value="concentration">
{props.concentration && (
<Concentration
currency={props.currency}
key={`${props.slice}-${props.currency}`}
model={props.concentration}
onCurrencyChange={props.onCurrencyChange}
onSliceChange={props.onSliceChange}
partial={!!props.partial}
slice={props.slice}
/>
)}
</Tabs.Panel>
)}
<Tabs.Panel value="cash">
<CurrencyCards amounts={props.portfolio.cashBalances} />
</Tabs.Panel>
<Tabs.Panel value="operations">
<RecentOperations
allAccounts={props.accountId === "all"}
moreLabel={t("portfolio.more")}
operations={props.recentOperations}
/>
</Tabs.Panel>
<Tabs.Panel value="events">
<BrokerageEventsPreview
allAccounts={props.accountId === "all"}
events={props.recentEvents}
moreLabel={t("portfolio.more")}
/>
</Tabs.Panel>
<Tabs.Panel value="income">
{!!props.incomeSummary && (
<IncomeSummary
{...props.incomeSummary}
moreLabel={t("portfolio.more")}
/>
)}
</Tabs.Panel>
</Tabs>
</Stack>
);
};
function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
if (kind === "stocks") return "portfolio.stocks";
return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
}
export { AccountPageLoaded };
@@ -34,7 +34,9 @@ const AccountPageLoading: FC = () => {
<Skeleton height={260} radius="sm" />
{["first", "second", "third"].map(placeholder => <Skeleton height={52} key={placeholder} radius="sm" />)}
<Skeleton height={40} radius="sm" />
<Skeleton height={220} radius="sm" />
</LoadingSkeleton>
);
};
@@ -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,330 @@
import { DonutChart } from "@mantine/charts";
import {
Alert, Box, Group, Paper, SegmentedControl, Select, 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 = {
currency: null | string;
model: ConcentrationModel;
onCurrencyChange: (currency: null | string) => void;
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;
currency: 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, currency: string): string {
return formatMoney({ currency, 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, props.currency)}</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 currency = props.currency ?? "";
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, value: props.model.total,
}),
...rows.map(item => `${item.label}: ${amountFor(item, currency)}, ${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, currency),
label: item.label,
share: item.share,
}));
const tooltipProps = { content: <ChartTooltip rows={tooltipRows} /> };
const totalText = props.model.total
? formatMoney({ currency, 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}
/>
{props.model.currencies.length > 1 && (
<Select
allowDeselect={false}
aria-label={t("portfolio.concentration.currency")}
data={props.model.currencies}
onChange={props.onCurrencyChange}
value={props.currency}
w={130}
/>
)}
</Group>
{props.partial && (
<Alert role="status">{t("portfolio.concentration.incomplete")}</Alert>
)}
{props.model.empty
? (
<Stack gap="xs">
<Text fw={600}>{t(sliceLabels[props.slice])}
{props.currency && ` · ${props.currency}`}
</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"}
currency={currency}
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, currency)} · {
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"}
currency={currency}
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 };
@@ -9,8 +9,8 @@ import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
import { formatMoney } from "@/shared/lib";
type IncomeSummaryProps
= | {
type IncomeSummaryProps = { moreLabel?: string } & (
| {
state: "empty";
to: string;
}
@@ -27,7 +27,8 @@ type IncomeSummaryProps
| {
state: "partial";
to: string;
};
}
);
const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
const { t } = useTranslation();
@@ -56,7 +57,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
<Text c="dimmed">{t("income.summaryEmpty")}</Text>
<Button component={Link} to={props.to} variant="subtle">
{t("income.open")}
{props.moreLabel ?? t("income.open")}
</Button>
</Stack>
);
@@ -75,7 +76,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
))}
<Button component={Link} to={props.to} variant="subtle">
{t("income.open")}
{props.moreLabel ?? t("income.open")}
</Button>
</Stack>
);
@@ -12,11 +12,15 @@ const syntheticPosition
displayName: "Учебные технологии",
figi: null,
isin: null,
issuer: null,
logoName: null,
logoSrc: null,
quantity: "100",
returnPercent: "25",
returnPercentText: "+25,00 %",
returnText: "+5 000 ₽",
returnTone: "positive",
sector: null,
shareText: "20%",
ticker: "DEMO",
type: "STOCK",
@@ -73,6 +77,8 @@ export const BondLoss: Story
"Учебные облигации для долгосрочных накоплений, выпуск 2030",
isin: "DEMO-BOND-2030",
quantity: "10",
returnPercent: "-5",
returnPercentText: "-5,00 %",
returnText: "−500 ₽",
returnTone: "negative",
shareText: "7,6%",
@@ -123,6 +129,8 @@ export const MissingValuation: Story
averagePurchasePrice: null,
currentValue: null,
displayName: "Учебная позиция без текущей оценки",
returnPercent: null,
returnPercentText: null,
returnText: null,
returnTone: undefined,
shareText: null,
@@ -6,7 +6,10 @@ import { Link } from "react-router";
import { formatMoney } from "@/shared/lib";
import type { AccountPagePosition, AccountPagePositionSection } from "../../../../model/positions";
import type {
AccountPagePosition,
AccountPagePositionSection,
} from "../../../../model/positions";
import classes from "../../AccountPage.module.css";
import { PositionLogo } from "../PositionLogo.view";
@@ -26,8 +29,15 @@ const PositionCard: FC<PositionCardProps> = (props) => {
: undefined;
let returnText = position.returnText;
if (returnText && !isExpanded)
if (returnText && position.returnPercentText) {
returnText += ` · ${position.returnPercentText}`;
}
if (returnText && !isExpanded) {
returnText = t("portfolio.return", { value: returnText });
}
const instrumentTo = position.instrumentTo;
const identifier
@@ -6,7 +6,10 @@ import { Link } from "react-router";
import { formatMoney } from "@/shared/lib";
import type { AccountPagePositionGroup, AccountPagePositionSection } from "../../../model/positions";
import type {
AccountPagePositionGroup,
AccountPagePositionSection,
} from "../../../model/positions";
import classes from "../AccountPage.module.css";
import { PositionLogo } from "./PositionLogo.view";
@@ -60,6 +63,16 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
? classes[position.returnTone]
: undefined;
const returnPercent = position.returnPercentText
? ` · ${position.returnPercentText}`
: "";
const returnValue = `${position.returnText ?? ""}${returnPercent}`;
const returnText = kind === "other"
? t("portfolio.return", { value: returnValue })
: returnValue;
return (
<Stack
className={classes.accountPosition}
@@ -89,9 +102,7 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
{!!position.returnText && (
<Text className={appearanceClass} size="sm">
{kind === "other"
? t("portfolio.return", { value: position.returnText })
: position.returnText}
{returnText}
</Text>
)}
</Group>
@@ -5,11 +5,18 @@ import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { LedgerEntryRow } from "@/entities/broker-operation";
import {
brokerageOperationGroupKey,
LedgerEntryRow,
OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import type { AccountPageRecentOperations } from "../../../model/previews";
type RecentOperationsProps = {
allAccounts?: boolean;
moreLabel?: string;
operations: AccountPageRecentOperations;
};
@@ -31,20 +38,44 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
{operations.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
{(operations.state === "loaded" || operations.state === "partial")
&& operations.items.map(operation => (
<LedgerEntryRow
key={JSON.stringify([
operation.account?.id,
operation.id,
operation.logoName,
])}
operation={operation}
/>
))}
{(operations.state === "loaded" || operations.state === "partial") && (
<Stack
component="ul"
gap="sm"
m={0}
p={0}
style={{ listStyle: "none" }}
>
{groupItems(
operations.items.map(operation => ({
key: JSON.stringify([
operation.account?.id,
operation.id,
operation.logoName,
]),
operation,
})),
entry => props.allAccounts
? brokerageOperationGroupKey(entry.operation)
: null,
).map(entry => entry.type === "group"
? (
<OperationGroup
entries={entry.items}
key={entry.key}
totalVisible={operations.totalVisible === true}
/>
)
: (
<li key={entry.item.key}>
<LedgerEntryRow operation={entry.item.operation} />
</li>
))}
</Stack>
)}
<Button component={Link} to={operations.to} variant="subtle">
{t("ledger.open")}
{props.moreLabel ?? t("ledger.open")}
</Button>
</Stack>
);
@@ -36,6 +36,8 @@ describe("Positions grouped by security", () => {
).toHaveAttribute("href", "/accounts/a");
expect(within(rows[0]).getByText("Количество: 1.25")).toBeInTheDocument();
expect(within(rows[0]).getByText("375 ₽")).toBeInTheDocument();
expect(within(rows[0]).getByText("+25 ₽ · +7,14 %"))
.toBeInTheDocument();
expect(
within(rows[0]).getByText("Средняя цена: 280 ₽"),
).toBeInTheDocument();
@@ -37,10 +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,
@@ -31,6 +31,19 @@ function configureTestAuth() {
});
}
function portfolioSummary(totals: { currency: string; value: string }[]) {
return {
bondPositionCount: 1,
cashBalances: [],
fundPositionCount: 0,
stockPositionCount: 0,
structure: { currencies: [], unvaluedCategories: [] },
totalPositionCount: 1,
totalsByCurrency: totals,
unrealizedReturnByCurrency: [],
};
}
function renderPage(queryClient: QueryClient) {
configureTestAuth();
@@ -46,6 +59,65 @@ function renderPage(queryClient: QueryClient) {
}
describe("AccountsPage", () => {
it("summarizes currencies separately and reports excluded accounts", async () => {
server.use(http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(resource([
{
...account,
portfolioSummary: portfolioSummary([
{ currency: "RUB", value: "100.10" },
{ currency: "USD", value: "20" },
]),
},
{
...account,
id: "account-2",
name: "Второй",
portfolioSummary: portfolioSummary([
{ currency: "RUB", value: "50.20" },
]),
},
{
...account,
id: "account-3",
name: "Без сводки",
portfolioSummary: null,
},
{
...account,
id: "account-4",
name: "Только деньги",
portfolioSummary: {
...portfolioSummary([{ currency: "RUB", value: "25" }]),
bondPositionCount: 0,
cashBalances: [{ currency: "RUB", value: "25" }],
totalPositionCount: 0,
},
},
{
...account,
id: "account-5",
name: "Без сумм",
portfolioSummary: {
...portfolioSummary([]),
totalPositionCount: 0,
},
},
])),
));
const client = createTestQueryClient();
renderPage(client);
expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
expect(screen.getByText("5 счетов")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getByText(
"Ещё 1 счёт не включён: нет актуального портфеля",
)).toBeInTheDocument();
});
it("loads accounts after retrying an initial HTTP failure", async () => {
const modes: (null | string)[] = [];
server.use(
@@ -1,6 +1,6 @@
import type { FC } from "react";
import { Button, Stack, Text, Title } from "@mantine/core";
import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
@@ -10,15 +10,82 @@ import {
type BrokerageAccountCard,
BrokerageAccountList,
} from "@/entities/brokerage-account";
import { formatMoney } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
const DECIMAL_BASE = 10n;
const DECIMAL_PART_COUNT = 2;
const ZERO = 0n;
type AccountsPageLoadedProps = {
accounts: BrokerageAccountCard[];
meta: InvestmentResourceMeta;
};
type Money = { currency: string; value: string };
function accountTotals(accounts: BrokerageAccountCard[]) {
const values = new Map<string, string[]>();
let excludedCount = 0;
for (const { summary } of accounts) {
if (summary.state === "empty") continue;
if (summary.state === "unavailable") {
excludedCount += 1;
continue;
}
for (const total of summary.portfolio.totalsByCurrency) {
values.set(total.currency, [
...values.get(total.currency) ?? [],
total.value,
]);
}
}
const totals: Money[] = Array.from(values, ([currency, amounts]) => ({
currency,
value: sumDecimals(amounts),
}));
return { excludedCount, totals };
}
function sumDecimals(values: string[]) {
const scale = Math.max(
0,
...values.map(value =>
value.split(".", DECIMAL_PART_COUNT)[1]?.length ?? 0),
);
const factor = DECIMAL_BASE ** BigInt(scale);
let sum = ZERO;
for (const value of values) {
const isNegative = value.startsWith("-");
const [integer = "0", fraction = ""] = (isNegative
? value.slice(1)
: value).split(".", DECIMAL_PART_COUNT);
const units = BigInt(integer) * factor
+ BigInt(fraction.padEnd(scale, "0") || "0");
sum += isNegative ? -units : units;
}
const isNegative = sum < ZERO;
const digits = (isNegative ? -sum : sum).toString().padStart(scale + 1, "0");
const integer = scale ? digits.slice(0, -scale) : digits;
const fraction = scale ? `.${digits.slice(-scale)}` : "";
return `${isNegative ? "-" : ""}${integer}${fraction}`;
}
const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
const { t } = useTranslation();
const { excludedCount, totals } = accountTotals(props.accounts);
return (
<Stack gap="lg">
@@ -28,6 +95,37 @@ const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
<Text c="dimmed" size="sm">
{t("accounts.subtitle")}
</Text>
</Stack>
<Stack gap="xs">
<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs">
<Stack gap={4}>
<Text c="dimmed" size="sm">
{t("accounts.currentValue")}
</Text>
{totals.length > 0
? totals.map(total => (
<Text fw={700} key={total.currency} size="lg">
{formatMoney(total, { withRoundedCents: true })}
</Text>
))
: <Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>}
</Stack>
<Stack gap={4}>
<Text fw={600}>{t("accounts.count", {
count: props.accounts.length,
})}
</Text>
{excludedCount > 0 && (
<Text c="dimmed" size="sm">
{t("accounts.summaryExcluded", { count: excludedCount })}
</Text>
)}
</Stack>
</SimpleGrid>
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
+5 -1
View File
@@ -285,7 +285,11 @@ describe("apiClient transient read recovery", () => {
http.get("*/api/v1/brokerage-accounts", () => {
requests += 1;
return HttpResponse.json({ code: "FORBIDDEN" }, { status });
// Any non-transient code; status alone must prevent the retry.
return HttpResponse.json(
{ code: "INTERNAL_SERVER_ERROR", status },
{ status },
);
}),
);
configureAuthClient({
-1
View File
@@ -166,7 +166,6 @@ function isNetworkFailure(error: unknown): boolean {
function isPermanentCode(code?: string): boolean {
return [
ApiErrorCode.Forbidden,
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
+55 -27
View File
@@ -731,8 +731,11 @@ export interface components {
ProblemDetailsDto: {
/** @example 401 */
status: number;
/** @example UNAUTHORIZED */
code: string;
/**
* @example UNAUTHORIZED
* @enum {string}
*/
code: "BAD_REQUEST" | "INTERNAL_SERVER_ERROR" | "NOT_FOUND" | "UNAUTHORIZED" | "UNSUPPORTED_MEDIA_TYPE" | "VALIDATION_ERROR" | "EMAIL_ALREADY_REGISTERED" | "INVALID_CREDENTIALS" | "INVALID_OPERATIONS_CURSOR" | "BOND_HISTORY_START_UNAVAILABLE" | "BOND_TICKER_AMBIGUOUS" | "STOCK_HISTORY_START_UNAVAILABLE" | "STOCK_TICKER_AMBIGUOUS" | "INVALID_TBANK_TOKEN" | "TBANK_NOT_CONNECTED" | "TBANK_UNAVAILABLE" | "BANK_CARD_ARCHIVED" | "BANK_DEPENDENT_REFUNDS" | "BANK_DUPLICATE_CATEGORY" | "BANK_IMMUTABLE_OPERATION" | "BANK_INTENT_CONFLICT" | "BANK_INVALID_DATE" | "BANK_INVALID_INPUT" | "BANK_INVALID_MONEY" | "BANK_INVALID_REFUND" | "BANK_NOT_FOUND" | "BANK_OPENING_DATE_CONFLICT" | "BANK_OPERATION_DELETED" | "BANK_REFUND_LIMIT" | "BANK_VERSION_CONFLICT" | "BANK_WRITE_CONFLICT" | "MOEX_UNAVAILABLE" | "NCR_UNAVAILABLE" | "INVALID_EVENTS_PERIOD" | "INVALID_INCOME_PERIOD";
/**
* @example [
* {
@@ -909,12 +912,54 @@ export interface components {
version: number;
archived?: boolean;
};
PortfolioStructureCategoryDto: {
/** @enum {string} */
type: "STOCK" | "BOND" | "OTHER" | "CASH";
/** @description Exact known value as a decimal string. */
value: string;
/** @description Percentage including cash, rounded to six decimal places. Null for incomplete, negative or zero-total compositions. */
sharePercent: string | null;
};
PortfolioStructureCurrencyDto: {
currency: string;
totalValue: string;
/** @description Any negative constituent, even if netted positive. */
hasNegativeValues: boolean;
categories: components["schemas"]["PortfolioStructureCategoryDto"][];
};
PortfolioUnvaluedCategoryDto: {
/** @enum {string} */
type: "STOCK" | "BOND" | "OTHER";
count: number;
};
PortfolioStructureDto: {
currencies: components["schemas"]["PortfolioStructureCurrencyDto"][];
/** @description Positions without current value and known valuation currency. Shares are unavailable across all currencies when nonempty. */
unvaluedCategories: components["schemas"]["PortfolioUnvaluedCategoryDto"][];
};
UnrealizedReturnDto: {
currency: string;
/** @example 12.345678901 */
absolute: string;
/** @example 100.00 */
costBasis: string;
/** @example 12.34 */
percent: string | null;
partial: boolean;
};
PortfolioSummaryDto: {
totalsByCurrency: components["schemas"]["MoneyDto"][];
cashBalances: components["schemas"]["MoneyDto"][];
structure: components["schemas"]["PortfolioStructureDto"];
unrealizedReturnByCurrency: components["schemas"]["UnrealizedReturnDto"][];
/** @description Number of non-zero stock positions, not the number of units. */
stockPositionCount: number;
/** @description Number of non-zero bond positions, not the number of units. */
bondPositionCount: number;
/** @description Number of non-zero fund positions, not the number of units. */
fundPositionCount: number;
/** @description Number of all non-zero positions, not the number of units. */
totalPositionCount: number;
};
BrokerageAccountDto: {
id: string;
@@ -1011,6 +1056,10 @@ export interface components {
id: string;
name: string;
};
PortfolioIssuerDto: {
id: string;
name: string;
};
PortfolioPositionDto: {
instrumentUid?: string | null;
account?: components["schemas"]["AccountReferenceDto"];
@@ -1025,31 +1074,8 @@ export interface components {
isin: string | null;
ticker: string | null;
logoName: string | null;
};
PortfolioStructureCategoryDto: {
/** @enum {string} */
type: "STOCK" | "BOND" | "OTHER" | "CASH";
/** @description Exact known value as a decimal string. */
value: string;
/** @description Percentage including cash, rounded to six decimal places. Null for incomplete, negative or zero-total compositions. */
sharePercent: string | null;
};
PortfolioStructureCurrencyDto: {
currency: string;
totalValue: string;
/** @description Any negative constituent, even if netted positive. */
hasNegativeValues: boolean;
categories: components["schemas"]["PortfolioStructureCategoryDto"][];
};
PortfolioUnvaluedCategoryDto: {
/** @enum {string} */
type: "STOCK" | "BOND" | "OTHER";
count: number;
};
PortfolioStructureDto: {
currencies: components["schemas"]["PortfolioStructureCurrencyDto"][];
/** @description Positions without current value and known valuation currency. Shares are unavailable across all currencies when nonempty. */
unvaluedCategories: components["schemas"]["PortfolioUnvaluedCategoryDto"][];
sector: string | null;
issuer: components["schemas"]["PortfolioIssuerDto"] | null;
};
PortfolioDto: {
/** Format: date-time */
@@ -1363,6 +1389,8 @@ export interface components {
isin: string | null;
ticker: string | null;
logoName: string | null;
sector: string | null;
issuer: components["schemas"]["PortfolioIssuerDto"] | null;
returnPercent: string | null;
};
StockPositionDto: {
+16 -2
View File
@@ -1,3 +1,5 @@
import type { components } from "./generated/schema";
enum ApiErrorCode {
BankDependentRefunds = "BANK_DEPENDENT_REFUNDS",
BankIntentConflict = "BANK_INTENT_CONFLICT",
@@ -6,7 +8,6 @@ enum ApiErrorCode {
BankVersionConflict = "BANK_VERSION_CONFLICT",
BankWriteConflict = "BANK_WRITE_CONFLICT",
BondTickerAmbiguous = "BOND_TICKER_AMBIGUOUS",
Forbidden = "FORBIDDEN",
InvalidOperationsCursor = "INVALID_OPERATIONS_CURSOR",
InvalidTbankToken = "INVALID_TBANK_TOKEN",
NotFound = "NOT_FOUND",
@@ -16,6 +17,16 @@ enum ApiErrorCode {
Unauthorized = "UNAUTHORIZED",
}
/**
Compile-time drift guard: collapses to `never` when any enum member is absent
from the generated ProblemDetails contract, so every call site fails to build.
*/
type ContractApiErrorCode
= Exclude<
`${ApiErrorCode}`,
components["schemas"]["ProblemDetailsDto"]["code"]
> extends never ? ApiErrorCode : never;
function apiErrorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
@@ -23,7 +34,10 @@ function apiErrorCode(error: unknown): string | undefined {
}
// Incoming codes are an open wire string; unknown values retain their fallback.
function isApiErrorCode(value: unknown, expected: ApiErrorCode): boolean {
function isApiErrorCode(
value: unknown,
expected: ContractApiErrorCode,
): boolean {
return value === expected;
}
-1
View File
@@ -42,7 +42,6 @@ function invalidateResourceAccess(
const errorCode = apiErrorCode(error);
if (
[
ApiErrorCode.Forbidden,
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
+244 -101
View File
@@ -5204,7 +5204,44 @@
},
"code": {
"type": "string",
"example": "UNAUTHORIZED"
"example": "UNAUTHORIZED",
"enum": [
"BAD_REQUEST",
"INTERNAL_SERVER_ERROR",
"NOT_FOUND",
"UNAUTHORIZED",
"UNSUPPORTED_MEDIA_TYPE",
"VALIDATION_ERROR",
"EMAIL_ALREADY_REGISTERED",
"INVALID_CREDENTIALS",
"INVALID_OPERATIONS_CURSOR",
"BOND_HISTORY_START_UNAVAILABLE",
"BOND_TICKER_AMBIGUOUS",
"STOCK_HISTORY_START_UNAVAILABLE",
"STOCK_TICKER_AMBIGUOUS",
"INVALID_TBANK_TOKEN",
"TBANK_NOT_CONNECTED",
"TBANK_UNAVAILABLE",
"BANK_CARD_ARCHIVED",
"BANK_DEPENDENT_REFUNDS",
"BANK_DUPLICATE_CATEGORY",
"BANK_IMMUTABLE_OPERATION",
"BANK_INTENT_CONFLICT",
"BANK_INVALID_DATE",
"BANK_INVALID_INPUT",
"BANK_INVALID_MONEY",
"BANK_INVALID_REFUND",
"BANK_NOT_FOUND",
"BANK_OPENING_DATE_CONFLICT",
"BANK_OPERATION_DELETED",
"BANK_REFUND_LIMIT",
"BANK_VERSION_CONFLICT",
"BANK_WRITE_CONFLICT",
"MOEX_UNAVAILABLE",
"NCR_UNAVAILABLE",
"INVALID_EVENTS_PERIOD",
"INVALID_INCOME_PERIOD"
]
},
"errors": {
"type": "array",
@@ -5819,6 +5856,135 @@
"version"
]
},
"PortfolioStructureCategoryDto": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"STOCK",
"BOND",
"OTHER",
"CASH"
]
},
"value": {
"type": "string",
"description": "Exact known value as a decimal string."
},
"sharePercent": {
"type": "string",
"nullable": true,
"description": "Percentage including cash, rounded to six decimal places. Null for incomplete, negative or zero-total compositions."
}
},
"required": [
"type",
"value",
"sharePercent"
]
},
"PortfolioStructureCurrencyDto": {
"type": "object",
"properties": {
"currency": {
"type": "string"
},
"totalValue": {
"type": "string"
},
"hasNegativeValues": {
"type": "boolean",
"description": "Any negative constituent, even if netted positive."
},
"categories": {
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioStructureCategoryDto"
}
}
},
"required": [
"currency",
"totalValue",
"hasNegativeValues",
"categories"
]
},
"PortfolioUnvaluedCategoryDto": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"STOCK",
"BOND",
"OTHER"
]
},
"count": {
"type": "number",
"minimum": 1
}
},
"required": [
"type",
"count"
]
},
"PortfolioStructureDto": {
"type": "object",
"properties": {
"currencies": {
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioStructureCurrencyDto"
}
},
"unvaluedCategories": {
"description": "Positions without current value and known valuation currency. Shares are unavailable across all currencies when nonempty.",
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioUnvaluedCategoryDto"
}
}
},
"required": [
"currencies",
"unvaluedCategories"
]
},
"UnrealizedReturnDto": {
"type": "object",
"properties": {
"currency": {
"type": "string"
},
"absolute": {
"type": "string",
"example": "12.345678901"
},
"costBasis": {
"type": "string",
"example": "100.00"
},
"percent": {
"type": "string",
"nullable": true,
"example": "12.34"
},
"partial": {
"type": "boolean"
}
},
"required": [
"currency",
"absolute",
"costBasis",
"percent",
"partial"
]
},
"PortfolioSummaryDto": {
"type": "object",
"properties": {
@@ -5828,6 +5994,21 @@
"$ref": "#/components/schemas/MoneyDto"
}
},
"cashBalances": {
"type": "array",
"items": {
"$ref": "#/components/schemas/MoneyDto"
}
},
"structure": {
"$ref": "#/components/schemas/PortfolioStructureDto"
},
"unrealizedReturnByCurrency": {
"type": "array",
"items": {
"$ref": "#/components/schemas/UnrealizedReturnDto"
}
},
"stockPositionCount": {
"type": "integer",
"minimum": 0,
@@ -5837,12 +6018,27 @@
"type": "integer",
"minimum": 0,
"description": "Number of non-zero bond positions, not the number of units."
},
"fundPositionCount": {
"type": "integer",
"minimum": 0,
"description": "Number of non-zero fund positions, not the number of units."
},
"totalPositionCount": {
"type": "integer",
"minimum": 0,
"description": "Number of all non-zero positions, not the number of units."
}
},
"required": [
"totalsByCurrency",
"cashBalances",
"structure",
"unrealizedReturnByCurrency",
"stockPositionCount",
"bondPositionCount"
"bondPositionCount",
"fundPositionCount",
"totalPositionCount"
]
},
"BrokerageAccountDto": {
@@ -6227,6 +6423,21 @@
"name"
]
},
"PortfolioIssuerDto": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"id",
"name"
]
},
"PortfolioPositionDto": {
"type": "object",
"properties": {
@@ -6299,6 +6510,19 @@
"logoName": {
"type": "string",
"nullable": true
},
"sector": {
"type": "string",
"nullable": true
},
"issuer": {
"nullable": true,
"type": "object",
"allOf": [
{
"$ref": "#/components/schemas/PortfolioIssuerDto"
}
]
}
},
"required": [
@@ -6311,105 +6535,9 @@
"absoluteReturn",
"isin",
"ticker",
"logoName"
]
},
"PortfolioStructureCategoryDto": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"STOCK",
"BOND",
"OTHER",
"CASH"
]
},
"value": {
"type": "string",
"description": "Exact known value as a decimal string."
},
"sharePercent": {
"type": "string",
"nullable": true,
"description": "Percentage including cash, rounded to six decimal places. Null for incomplete, negative or zero-total compositions."
}
},
"required": [
"type",
"value",
"sharePercent"
]
},
"PortfolioStructureCurrencyDto": {
"type": "object",
"properties": {
"currency": {
"type": "string"
},
"totalValue": {
"type": "string"
},
"hasNegativeValues": {
"type": "boolean",
"description": "Any negative constituent, even if netted positive."
},
"categories": {
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioStructureCategoryDto"
}
}
},
"required": [
"currency",
"totalValue",
"hasNegativeValues",
"categories"
]
},
"PortfolioUnvaluedCategoryDto": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"STOCK",
"BOND",
"OTHER"
]
},
"count": {
"type": "number",
"minimum": 1
}
},
"required": [
"type",
"count"
]
},
"PortfolioStructureDto": {
"type": "object",
"properties": {
"currencies": {
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioStructureCurrencyDto"
}
},
"unvaluedCategories": {
"description": "Positions without current value and known valuation currency. Shares are unavailable across all currencies when nonempty.",
"type": "array",
"items": {
"$ref": "#/components/schemas/PortfolioUnvaluedCategoryDto"
}
}
},
"required": [
"currencies",
"unvaluedCategories"
"logoName",
"sector",
"issuer"
]
},
"PortfolioDto": {
@@ -7812,6 +7940,19 @@
"type": "string",
"nullable": true
},
"sector": {
"type": "string",
"nullable": true
},
"issuer": {
"nullable": true,
"type": "object",
"allOf": [
{
"$ref": "#/components/schemas/PortfolioIssuerDto"
}
]
},
"returnPercent": {
"type": "string",
"nullable": true
@@ -7828,6 +7969,8 @@
"isin",
"ticker",
"logoName",
"sector",
"issuer",
"returnPercent"
]
},
+76 -1
View File
@@ -5,7 +5,20 @@ const ru = {
all: "Все счета",
allDescription: "Портфель по всем доступным инвестиционным счетам",
bonds: "Облигации",
brokerDescription: "По данным брокера",
cash: "Деньги на счёте",
count_few: "{{count}} счёта",
count_many: "{{count}} счетов",
count_one: "{{count}} счёт",
count_other: "{{count}} счёта",
currentValue: "Текущая стоимость",
description: {
currentValue: "Текущая стоимость: {{value}}. ",
return: "Доходность {{currency}}: {{percent}}, {{absolute}}",
start: "Счёт {{name}}, {{type}}. ",
structure: "Структура {{currency}}: {{value}}",
structureCategory: "{{category}} {{value}}",
},
emptyText:
"Откройте инвестиционный счет в T-Bank, чтобы он появился здесь.",
emptyTitle: "Нет инвестиционных счетов",
@@ -18,6 +31,11 @@ const ru = {
openAll: "Портфель по всем счетам",
openedOn: "Открыт {{date}}",
openSettings: "Открыть настройки T-Bank",
partial: "частично",
positions_few: "{{count}} позиции",
positions_many: "{{count}} позиций",
positions_one: "{{count}} позиция",
positions_other: "{{count}} позиции",
refreshError:
"Не удалось обновить данные. Показаны последние полученные.",
refreshing: "Обновляем данные",
@@ -28,8 +46,22 @@ const ru = {
retry: "Повторить",
scope: "Счёт",
stocks: "Акции",
structure: {
category: "{{category}} {{percent}} %",
incomplete: "{{category}}: доля неизвестна",
label: "Структура в {{currency}}: {{value}}",
},
subtitle: "Ваши инвестиции по счетам",
summaryEmpty: "Нет текущих сумм",
summaryExcluded_few:
"Ещё {{count}} счёта не включены: нет актуального портфеля",
summaryExcluded_many:
"Ещё {{count}} счетов не включены: нет актуального портфеля",
summaryExcluded_one:
"Ещё {{count}} счёт не включён: нет актуального портфеля",
summaryExcluded_other:
"Ещё {{count}} счёта не включены: нет актуального портфеля",
summaryNoTotals: "Нет данных для сводки",
summaryUnavailable: "Сводка временно недоступна",
title: "Счета",
types: {
@@ -318,6 +350,9 @@ const ru = {
operations: "Операции",
settings: "Настройки",
},
entryGroup: {
totalUnavailable: "Итог недоступен",
},
events: {
dateKind: { event: "Дата события", registry: "Дата реестра" },
emptyText:
@@ -420,10 +455,11 @@ const ru = {
next: "Далее",
noInstrument: "Без инструмента",
noMoney: "Без движения денег",
occurredAt: "{{date}}",
occurredAt: "Исполнено {{date}}",
open: "Открыть журнал",
operationType: {
buy: "Покупка",
coupon: "Купон",
dividend: "Зачисление дивидендов",
fee: "Комиссия",
input: "Зачисление ценных бумаг",
@@ -450,6 +486,7 @@ const ru = {
accounts: "Счета",
bonds: "Облигации",
cards: "Карты",
primary: "Основная навигация",
settings: "Настройки",
stocks: "Акции",
},
@@ -472,6 +509,26 @@ const ru = {
bonds: "Облигации",
byAccount: "Позиции по счетам",
cashBalances: "Денежные остатки",
concentration: {
chart: "Распределение позиций",
currency: "Валюта концентрации",
empty: "В этом разрезе нет позиций с положительной оценкой.",
incomplete: "Данные неполные",
issuers: "Эмитенты",
missingIssuer: "Эмитент не указан",
missingSector: "Сектор не указан",
other: "Прочее",
otherCount: "{{count}} элементов",
otherCount_few: "{{count}} элемента",
otherCount_many: "{{count}} элементов",
otherCount_one: "{{count}} элемент",
otherCount_other: "{{count}} элемента",
sectors: "Секторы",
slice: "Разрез концентрации",
title: "Концентрация",
top5: "Топ-5 · {{share}}",
unaccounted: "Не учтено позиций: {{count}}",
},
connectionErrorText: "Настройте подключение, чтобы посмотреть портфель.",
connectionErrorTitle: "Проверьте подключение T-Bank",
currencies: {
@@ -481,13 +538,21 @@ const ru = {
},
emptyText: "На счете нет позиций и доступных денежных остатков.",
emptyTitle: "Портфель пока пуст",
more: "Подробнее",
otherPositions: "Другие позиции",
positionFilter: "Тип позиции",
positionKinds: {
bonds: "Облигации",
other: "Прочее",
stocks: "Акции",
},
positions: "Позиции",
quantity: "Количество: {{value}}",
refreshError:
"Не удалось обновить портфель. Показан последний полученный снимок.",
refreshing: "Обновляем портфель",
return: "Доход: {{value}}",
sections: "Разделы счёта",
share: "Доля: {{value}}",
staleWarning:
"T-Bank временно недоступен. Показан последний успешный снимок.",
@@ -513,7 +578,16 @@ const ru = {
unvalued: "Нет оценки",
unvaluedCategory: "{{category}}: без оценки — {{count}}",
},
tabs: {
cash: "Деньги",
events: "События",
income: "Доход",
operations: "Операции",
positions: "Позиции",
},
title: "Портфель",
unrealizedResult: "Нереализованный результат",
unrealizedResultCaption: "по цене, без НКД и купонов",
updatedAt: "Данные получены {{date}}",
},
routeError: {
@@ -706,6 +780,7 @@ const ru = {
consumer: "Потребительский сектор",
energy: "Энергетика",
financial: "Финансы",
government: "Государственный сектор",
health_care: "Здравоохранение",
industrials: "Промышленность",
it: "Информационные технологии",
+41
View File
@@ -0,0 +1,41 @@
import { describe, expect, it } from "vitest";
import { sumMoney } from "./decimal";
describe("sumMoney", () => {
it("adds exact signed decimals independently per currency", () => {
expect(sumMoney([
{ currency: "RUB", value: "0.1" },
{ currency: "USD", value: "0.01" },
{ currency: "RUB", value: "0.2" },
{ currency: "RUB", value: "-1500000.45" },
{ currency: "USD", value: "-0.02" },
{ currency: "RUB", value: "200" },
])).toEqual([
{ currency: "RUB", value: "-1499800.15" },
{ currency: "USD", value: "-0.01" },
]);
});
it("preserves significant fractional digits and a compensated zero", () => {
expect(sumMoney([
{ currency: "RUB", value: "100.5" },
{ currency: "RUB", value: "49.50" },
{ currency: "RUB", value: "0.005" },
])).toEqual([{ currency: "RUB", value: "150.005" }]);
expect(sumMoney([
{ currency: "RUB", value: "100" },
{ currency: "RUB", value: "-100" },
])).toEqual([{ currency: "RUB", value: "0" }]);
});
it.each(["", ".", "1.2.3", "not-a-number"])(
"rejects malformed amount %s instead of treating it as zero",
(value) => {
expect(sumMoney([
{ currency: "RUB", value: "100" },
{ currency: "RUB", value },
])).toBeNull();
},
);
});
+75
View File
@@ -0,0 +1,75 @@
type Decimal = { scale: number; value: bigint };
type Money = { currency: string; value: string };
const DECIMAL_PARTS = 2;
const RADIX = 10n;
// Decimal grammar is bounded to digits and one optional dot.
// eslint-disable-next-line security/detect-unsafe-regex
const decimalPattern = /^-?\d+(?:\.\d+)?$/;
function decimalFromString(value: string): Decimal {
if (!decimalPattern.test(value)) throw new SyntaxError("Invalid decimal");
const [whole = "0", fraction = ""] = value.split(".", DECIMAL_PARTS);
return { scale: fraction.length, value: BigInt(`${whole}${fraction}`) };
}
function decimalToString(decimal: Decimal): string {
const sign = decimal.value < 0n ? "-" : "";
const digits = (decimal.value < 0n ? -decimal.value : decimal.value)
.toString()
.padStart(decimal.scale + 1, "0");
const whole = decimal.scale
? digits.slice(0, -decimal.scale)
: digits;
let fraction = decimal.scale ? digits.slice(-decimal.scale) : "";
while (fraction.endsWith("0")) fraction = fraction.slice(0, -1);
const suffix = fraction ? `.${fraction}` : "";
return `${sign}${whole}${suffix}`;
}
function sumDecimals(decimals: readonly Decimal[]): Decimal {
const scale = Math.max(...decimals.map(decimal => decimal.scale));
const value = decimals.reduce(
(sum, decimal) =>
sum + decimal.value * RADIX ** BigInt(scale - decimal.scale),
0n,
);
return { scale, value };
}
function sumMoney(amounts: readonly Money[]): Money[] | null {
const decimals = new Map<string, Decimal[]>();
for (const amount of amounts) {
try {
const values = decimals.get(amount.currency) ?? [];
values.push(decimalFromString(amount.value));
decimals.set(amount.currency, values);
}
catch {
return null;
}
}
return Array.from(decimals, ([currency, values]) => ({
currency,
value: decimalToString(sumDecimals(values)),
}));
}
export {
type Decimal,
decimalFromString,
decimalToString,
sumDecimals,
sumMoney,
};
+27
View File
@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
import {
formatDate,
formatMoney,
formatSnapshotDay,
formatSnapshotTime,
instrumentLogoUrl,
} from "./display";
@@ -22,6 +23,10 @@ describe("shared display helpers", () => {
}).format(new Date(instant));
expect(formatSnapshotTime(instant)).toBe(expected);
expect(formatSnapshotDay(instant)).toBe(
new Intl.DateTimeFormat("ru-RU", { dateStyle: "short" })
.format(new Date(instant)),
);
});
it("formats decimal strings without financial arithmetic", () => {
expect(formatMoney({ currency: "RUB", value: "-1234567.89" })).toBe(
@@ -42,6 +47,28 @@ describe("shared display helpers", () => {
formatMoney({ currency: "RUB", value: "1.5" }, { withZeroCents: true }),
).toBe("1,50 ₽");
expect(formatMoney(null)).toBe("—");
expect(formatMoney(
{ currency: "RUB", value: "136900" },
{ withSign: true },
)).toBe("+136 900 ₽");
expect(formatMoney(
{ currency: "RUB", value: "-4200" },
{ withSign: true },
)).toBe("−4 200 ₽");
expect(formatMoney(
{ currency: "RUB", value: "-0.00" },
{ withSign: true },
)).toBe("0,00 ₽");
});
it("rounds to the currency's minor units and drops the sign of a rounded zero", () => {
const rounded = { withRoundedCents: true };
expect(formatMoney({ currency: "RUB", value: "-0.004" }, rounded)).toBe("0,00 ₽");
expect(formatMoney({ currency: "RUB", value: "-0.005" }, rounded)).toBe("-0,01 ₽");
expect(formatMoney({ currency: "RUB", value: "999.995" }, rounded)).toBe("1 000,00 ₽");
expect(formatMoney({ currency: "JPY", value: "1500.5" }, rounded)).toBe("1 501 JPY");
expect(formatMoney({ currency: "KWD", value: "1.2345" }, rounded)).toBe("1,235 KWD");
expect(formatMoney({ currency: "ZZZ", value: "1.234" }, rounded)).toBe("1,23 ZZZ");
});
it("builds the brand logo url from an upstream file name", () => {
+84 -6
View File
@@ -1,10 +1,19 @@
const DECIMAL_PART_COUNT = 2;
const CENTS_PRECISION = 2;
const DEFAULT_MINOR_UNITS = 2;
type FormatMoneyOptions = {
withRoundedCents?: boolean;
withSign?: boolean;
withZeroCents?: boolean;
};
const portfolioCategoryPresentation = {
BOND: { color: "grape.6", label: "portfolio.bonds" },
CASH: { color: "green.6", label: "portfolio.structure.cash" },
OTHER: { color: "orange.6", label: "portfolio.structure.other" },
STOCK: { color: "blue.6", label: "portfolio.stocks" },
} as const;
type Money = { currency: string; value: string };
const dateFormatter = new Intl.DateTimeFormat("ru-RU", {
@@ -14,6 +23,17 @@ const dateFormatter = new Intl.DateTimeFormat("ru-RU", {
year: "numeric",
});
// ISO 4217 minor units (JPY 0, KWD 3); unknown codes fall back to 2.
function currencyMinorUnits(currency: string): number {
try {
return new Intl.NumberFormat("en", { currency, style: "currency" })
.resolvedOptions().maximumFractionDigits ?? DEFAULT_MINOR_UNITS;
}
catch {
return DEFAULT_MINOR_UNITS;
}
}
function formatDate(value: string): string {
return dateFormatter.format(new Date(value));
}
@@ -39,17 +59,27 @@ function formatMoney(
money: Money
| null
| undefined,
{ withZeroCents = false }: FormatMoneyOptions = {},
{
withRoundedCents = false,
withSign = false,
withZeroCents = false,
}: FormatMoneyOptions = {},
): string {
if (!money) return "—";
const [integerPart = "", fractionPart = ""] = money.value.split(
const minorUnits = currencyMinorUnits(money.currency);
const value = withRoundedCents
? roundDecimal(money.value, minorUnits)
: money.value;
const [integerPart = "", fractionPart = ""] = value.split(
".",
DECIMAL_PART_COUNT,
);
const normalizedFraction = withZeroCents
? fractionPart.padEnd(CENTS_PRECISION, "0")
const normalizedFraction = withRoundedCents || withZeroCents
? fractionPart.padEnd(minorUnits, "0")
: fractionPart;
const decimal = normalizedFraction
@@ -57,8 +87,46 @@ function formatMoney(
: integerPart;
const currency = money.currency === "RUB" ? "₽" : money.currency;
const formatted = `${formatDecimal(decimal)} ${currency}`;
return `${formatDecimal(decimal)} ${currency}`;
if (!withSign) return formatted;
if (isZeroDecimal(value))
return value.startsWith("-") ? formatted.slice(1) : formatted;
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
}
function isZeroDecimal(value: string) {
const unsigned = value.startsWith("-") ? value.slice(1) : value;
const [integer = "", fraction = ""] = unsigned.split(
".",
DECIMAL_PART_COUNT,
);
return integer.replaceAll("0", "") === ""
&& fraction.replaceAll("0", "") === "";
}
function roundDecimal(value: string, places: number): string {
const [integer = "", fraction = ""] = value.split(".", DECIMAL_PART_COUNT);
const digits = integer.startsWith("-") ? integer.slice(1) : integer;
const paddedFraction = fraction.padEnd(places + 1, "0");
const units = `${digits}${paddedFraction.slice(0, places)}`;
const roundingDigit = paddedFraction.at(places) ?? "0";
const rounded = (roundingDigit >= "5" ? BigInt(units) + 1n : BigInt(units))
.toString()
.padStart(places + 1, "0");
// A value rounded to zero has no sign: "-0.004" → "0.00".
const sign = integer.startsWith("-") && /[1-9]/.test(rounded) ? "-" : "";
const roundedInteger = rounded.slice(0, rounded.length - places);
const roundedFraction = rounded.slice(rounded.length - places);
return roundedFraction
? `${sign}${roundedInteger}.${roundedFraction}`
: `${sign}${roundedInteger}`;
}
// Без timeZone Intl берёт часовой пояс браузера пользователя.
@@ -67,6 +135,14 @@ const snapshotFormatter = new Intl.DateTimeFormat("ru-RU", {
timeStyle: "short",
});
const snapshotDayFormatter = new Intl.DateTimeFormat("ru-RU", {
dateStyle: "short",
});
function formatSnapshotDay(value: string): string {
return snapshotDayFormatter.format(new Date(value));
}
function formatSnapshotTime(value: string): string {
return snapshotFormatter.format(new Date(value));
}
@@ -92,6 +168,8 @@ export {
formatDate,
formatDecimal,
formatMoney,
formatSnapshotDay,
formatSnapshotTime,
instrumentLogoUrl,
portfolioCategoryPresentation,
};
+45
View File
@@ -0,0 +1,45 @@
import { describe, expect, it } from "vitest";
import { groupItems } from "./group-items";
describe("groupItems", () => {
it("keeps the first key position and source order through interleaving", () => {
const a1 = { id: "A1", key: "A" };
const b = { id: "B", key: null };
const a2 = { id: "A2", key: "A" };
const c = { id: "C", key: "C" };
const a3 = { id: "A3", key: "A" };
const input = [a1, b, a2, c, a3];
const result = groupItems(input, item => item.key);
expect(result).toEqual([
{ items: [a1, a2, a3], key: "A", type: "group" },
{ item: b, type: "single" },
{ item: c, type: "single" },
]);
expect(input.map(item => item.id)).toEqual(["A1", "B", "A2", "C", "A3"]);
});
it("keeps two interleaved groups independent and singleton rows single", () => {
const result = groupItems(
[
{ id: "X1", key: "X" },
{ id: "Y1", key: "Y" },
{ id: "X2", key: "X" },
{ id: "Y2", key: "Y" },
{ id: "X3", key: "X" },
{ id: "Z1", key: "Z" },
],
item => item.key,
);
expect(result.map(entry => entry.type === "group"
? [entry.key, entry.items.map(item => item.id)]
: [null, [entry.item.id]])).toEqual([
["X", ["X1", "X2", "X3"]],
["Y", ["Y1", "Y2"]],
[null, ["Z1"]],
]);
});
});
+47
View File
@@ -0,0 +1,47 @@
type GroupedItem<T>
= | { item: T; type: "single" }
| { items: [T, T, ...T[]]; key: string; type: "group" };
function groupItems<T>(
items: readonly T[],
keyOf: (item: T) => null | string,
): GroupedItem<T>[] {
const result: GroupedItem<T>[] = [];
const indices = new Map<string, number>();
for (const item of items) {
const key = keyOf(item);
if (key === null) {
result.push({ item, type: "single" });
continue;
}
const index = indices.get(key);
if (index === undefined) {
indices.set(key, result.length);
result.push({ item, type: "single" });
continue;
}
// eslint-disable-next-line security/detect-object-injection -- Map-owned index.
const existing = result[index];
if (existing?.type === "single") {
// eslint-disable-next-line security/detect-object-injection -- Map-owned index.
result[index] = {
items: [existing.item, item],
key,
type: "group",
};
}
else if (existing) {
existing.items.push(item);
}
}
return result;
}
export { groupItems };
+11
View File
@@ -1,12 +1,23 @@
export { compareDateDesc, defaultPeriod, isValidPeriod, moscowDate } from "./calendar";
export { calendarDate } from "./calendar.schema";
export {
type Decimal,
decimalFromString,
decimalToString,
sumDecimals,
sumMoney,
} from "./decimal";
export {
formatChartValue,
formatDate,
formatDecimal,
formatMoney,
formatSnapshotDay,
formatSnapshotTime,
instrumentLogoUrl,
portfolioCategoryPresentation,
} from "./display";
export { groupItems } from "./group-items";
export { useInitialAvailability } from "./initial-availability";
export { totalText } from "./total-text";
export { useUrlPeriod } from "./useUrlPeriod";
+13
View File
@@ -0,0 +1,13 @@
import { formatMoney } from "./display";
type Money = { currency: string; value: string };
function totalText(totals: Money[] | null, isSigned: boolean): string {
return totals
? totals.map(total =>
formatMoney(total, { withSign: isSigned || undefined }),
).join(", ")
: "";
}
export { totalText };
@@ -0,0 +1,41 @@
.group {
overflow: hidden;
border-color: var(--wl-color-border);
background: var(--wl-color-subtle);
}
.accounts {
padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm);
list-style: none;
}
.accountRow {
display: flex;
gap: var(--mantine-spacing-sm);
align-items: center;
justify-content: space-between;
padding: var(--mantine-spacing-sm) 0;
border-top: 1px solid var(--wl-color-border);
}
.accountValue {
flex-shrink: 0;
text-align: right;
white-space: nowrap;
}
.accountCardRow {
display: flex;
gap: var(--mantine-spacing-sm);
align-items: center;
justify-content: space-between;
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
border-color: var(--wl-color-border);
background: var(--wl-color-surface);
}
@media (max-width: 36em) {
.accountRow {
align-items: flex-start;
}
}
+96
View File
@@ -0,0 +1,96 @@
import type { FC, PropsWithChildren, ReactNode } from "react";
import { Paper, Stack, Text, VisuallyHidden } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { formatMoney } from "@/shared/lib";
import classes from "./EntryGroup.module.css";
type AccountRowProps = {
accountName: string;
value: string;
valueLabel: string;
};
type EntryGroupProps = PropsWithChildren<{
header: ReactNode;
label: string;
}>;
type EntryGroupTotalProps = {
isSigned?: boolean;
totals: null | { currency: string; value: string }[];
};
const AccountRow: FC<AccountRowProps> = (props) => {
const accessibleName = `${props.accountName}, ${props.value}`;
return (
<li aria-label={accessibleName} className={classes.accountRow}>
<Text>{props.accountName}</Text>
<Stack className={classes.accountValue} gap={2}>
<Text fw={700}>{props.value}</Text>
<Text c="dimmed" size="xs">{props.valueLabel}</Text>
</Stack>
</li>
);
};
const AccountCardRow: FC<AccountRowProps> = props => (
<li aria-label={`${props.accountName}, ${props.value}`}>
<Paper className={classes.accountCardRow} withBorder>
<Text fw={700}>{props.accountName}</Text>
<Stack className={classes.accountValue} gap={2}>
<Text fw={700}>{props.value}</Text>
<Text c="dimmed" size="xs">{props.valueLabel}</Text>
</Stack>
</Paper>
</li>
);
const EntryGroup: FC<EntryGroupProps> = props => (
<Paper className={classes.group} component="li" withBorder>
{props.header}
<Stack
aria-label={props.label}
className={classes.accounts}
component="ul"
gap={0}
>
{props.children}
</Stack>
</Paper>
);
const EntryGroupTotal: FC<EntryGroupTotalProps> = (props) => {
const { t } = useTranslation();
if (!props.totals) {
return <VisuallyHidden>{t("entryGroup.totalUnavailable")}</VisuallyHidden>;
}
const isSigned = props.isSigned === true;
return (
<Stack gap={2}>
{props.totals.map(total => (
<span key={`${total.currency}-${total.value}`}>
{formatMoney(total, { withSign: isSigned || undefined })}
</span>
))}
</Stack>
);
};
export {
AccountCardRow,
AccountRow,
EntryGroup,
EntryGroupTotal,
};
+6
View File
@@ -1,2 +1,8 @@
export {
AccountCardRow,
AccountRow,
EntryGroup,
EntryGroupTotal,
} from "./EntryGroup/EntryGroup";
export { PayoutCard } from "./PayoutCard/PayoutCard";
export { SourceSyncStatus } from "./SourceSyncStatus/SourceSyncStatus";
@@ -5,20 +5,13 @@ import { useTranslation } from "react-i18next";
import type { Portfolio } from "@/entities/portfolio";
import { formatMoney } from "@/shared/lib";
import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
const MIN_VISIBLE_SHARE_PERCENT = 0.01;
// A cached snapshot or an older running server can predate this response field.
type PortfolioStructureProps = { structure?: null | Portfolio["structure"] };
const categoryPresentation = {
BOND: { color: "grape.6", label: "portfolio.bonds" },
CASH: { color: "green.6", label: "portfolio.structure.cash" },
OTHER: { color: "orange.6", label: "portfolio.structure.other" },
STOCK: { color: "blue.6", label: "portfolio.stocks" },
} as const;
const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
const { structure } = props;
const { t } = useTranslation();
@@ -45,7 +38,7 @@ const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
unvalued:
structure?.unvaluedCategories.map(category =>
t("portfolio.structure.unvaluedCategory", {
category: t(categoryPresentation[category.type].label),
category: t(portfolioCategoryPresentation[category.type].label),
count: category.count,
}),
) ?? [],
@@ -61,7 +54,7 @@ function portfolioRows(
if (!selected) return [];
return selected.categories.map((category) => {
const presentation = categoryPresentation[category.type];
const presentation = portfolioCategoryPresentation[category.type];
const percentage
= category.sharePercent === null