Author SHA1 Message Date
ksv741 3ce67a59a5 fix(account): align concentration labels and chart accessibility (WealthLedger/main#48)
Frontend verify / commits (pull_request) Successful in 2m3s
Frontend verify / security (pull_request) Failing after 1m40s
Frontend verify / verify (pull_request) Skipped
2026-11-01 15:50:18 +03:00
ksv741 ba7f8547bb feat(account): add concentration tab with top-5 slices and chart (WealthLedger/main#48)
Frontend verify / commits (pull_request) Successful in 2m10s
Frontend verify / security (pull_request) Failing after 1m46s
Frontend verify / verify (pull_request) Skipped
2026-11-01 12:24:38 +03:00
110 changed files with 1118 additions and 2416 deletions
+7 -6
View File
@@ -8,7 +8,7 @@ Vitest — отдельную JSDOM конфигурацию. Точные versi
[package.json](../package.json), реализация — source of truth.
```text
app → pages → features → entities → shared
app → pages → widgets → features → entities → shared
page container → page VM → entity/feature query → shared/api → backend /api/v1
↓
props → state/section views
@@ -30,13 +30,14 @@ contract; frontend не читает его checkout для генерации
| --- | --- |
| Bootstrap, глобальные providers, routes | `app` |
| Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
| Крупная переиспользуемая композиция экрана | `widgets/<widget>` |
| Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
| Представление/поведение бизнес-сущности | `entities/<entity>` |
| Переиспользуемый код без WealthLedger domain meaning | `shared` |
Локальный FSD profile: `app → pages → features → entities → shared`.
Слой `widgets` не используется: композиция экрана и компонент для одной page
остаются у page. Form, mutation или click handler сами по себе не
Локальный FSD profile: `app → pages → widgets → features → entities → shared`.
Widget собирает несколько нижних слоёв в самостоятельный UI-блок; компонент для
одной page остаётся у page. Form, mutation или click handler сами по себе не
требуют feature. Два callers не делают domain helper generic shared.
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
@@ -48,12 +49,12 @@ Slice именуется по ответственности, а не `helpers`,
Cross-slice consumer использует `@/` и `index.ts` владельца, например
`@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
импортирует внутренний файл напрямую. Slices `pages`, `widgets`, `features`, `entities` не зависят от соседнего slice своего слоя;
композиция принадлежит вышележащему owner. Existing меж-slice исключения
не являются разрешением добавлять новые.
Направление зависимостей, public imports и запрет соседних slices в
`pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
`pages`, `widgets`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
одного slice и связи shared segments этот запрет не ограничивает.
Knip проверяет использование exports, а не смысл placement.
-3
View File
@@ -13,9 +13,6 @@
!public/**
!docker/
!docker/**
!scripts/
!scripts/minimatch-compat/
!scripts/minimatch-compat/**
!packages/
!packages/tokens/
!packages/tokens/package.json
-56
View File
@@ -1,61 +1,5 @@
# Changelog
## [1.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.3.0...v1.4.0) (2026-11-06)
### Features
* **investments:** warn and offer retry after exhausted read retries (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#136](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/136)) ([8ce1e8e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/8ce1e8e44486dcc23d4c074559ca2bb517880b60))
### Bug Fixes
* **account:** show source metadata on empty account and income (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#133](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/133)) ([9619dc9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/9619dc979172dbc16391206e801ed67862d20116))
* align audit findings for Events, currency and auth (WealthLedger/frontend[#155](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/155)) ([668f2ef](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/668f2ef70e535a1222e7f600b1be4a31fefc6f8b))
### Refactoring
* **api:** consume bank operation oneOf contract (WealthLedger/frontend[#144](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/144)) ([#152](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/152)) ([2d070ce](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2d070ce2b54bbee466ecf6cc18b437910f0c07f8))
* drop dead query helpers and simplify read deadline (WealthLedger/frontend[#141](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/141)) ([#149](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/149)) ([5077bd4](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5077bd4f0baa4a59643e875485c2f08253cc198d))
* move portfolio structure into account page, drop widgets (WealthLedger/frontend[#139](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/139)) ([#140](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/140)) ([e2d143d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e2d143df46e650139e49b7c80a886008ede86d2a))
* normalize view models and share breadcrumbs and titles (WealthLedger/frontend[#143](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/143)) ([#153](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/153)) ([2db39f2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2db39f25d9478350ad56a1b2e2ca6496068257c5))
* replace repeated lazy page wrappers with lazyPage helper ([#131](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/131)) ([#132](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/132)) ([71fbe77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71fbe7774d3ed63fcb84bc644da997921bc049b2))
* share path-root query predicate (WealthLedger/frontend[#142](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/142)) ([#154](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/154)) ([cadba8d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cadba8d075daf9b20c0c9de97ad5bd8f5a3e74fc))
### Maintenance
* **api:** update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend[#134](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/134)) ([#135](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/135)) ([aaee959](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/aaee9591d7880193ee9b0c14339e8477264e4a94))
* **deps:** set Renovate release age, PR limit and update groups (WealthLedger/main[#6](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/6)) ([#137](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/137)) ([ad93725](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ad93725a84615ec329631b71ed8db33337085740))
## [1.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.1...v1.3.0) (2026-11-01)
### Features
* **account:** add concentration tab with top-5 slices and chart (WealthLedger/main[#48](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/48)) ([#127](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/127)) ([70a2c33](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/70a2c335fdddb8b6a99e3f609befe06aeb8cc45d))
* group all-account rows by instrument and day (WealthLedger/main[#47](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/47)) ([#126](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/126)) ([71126c9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71126c91f0b30f4d65a313ddc7d7f86963340455))
* make brokerage account list compact ([#111](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/111)) ([c24704a](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c24704affacbe7fbc08f5e2b61bb6e7ffa6053b9))
* remove top header and rework mobile bottom navigation ([#109](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/109)) ([1a92f02](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1a92f023c1c79f646424f72710ab74de63386a11))
* replace account page accordion with tabs and show open position result ([#112](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/112)) ([3075081](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3075081df188de0630d314ba15a34fe6efd1eea9))
* show return, cash and structure on account cards ([#114](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/114)) ([431559b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/431559be0fca9eb37f6a09d930d502f939884e39))
### Bug Fixes
* round money to currency minor units without negative zero (WealthLedger/frontend[#118](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/118)) ([#119](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/119)) ([1d49904](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1d4990491f254e1ec6bafad8204872eaae2982d0))
* show account source sync status (WealthLedger/frontend[#120](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/120)) ([#121](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/121)) ([a56edf2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a56edf2b3757ef0b0f6c42ecbd422a1a563f6505))
* show history loading alert only while loading (WealthLedger/frontend[#124](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/124)) ([#125](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/125)) ([6792f5b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/6792f5b70aa3ba90b2eb2df7e63d3ae2f669e295))
* stabilize auth client registration (WealthLedger/frontend[#95](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/95)) ([#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([5796d2d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5796d2d789963e66a3a4bcd79eab44700f16bd31))
### Refactoring
* derive api error codes from contract (WealthLedger/backend[#117](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/117)) ([#123](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/123)) ([32e8fe9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/32e8fe9402665ea0c350f5f247d87e328ffd44c8))
### Tests
* pin date in all accounts events test ([#115](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/115)) ([58b4e12](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/58b4e126330d01c1d6865bd0e9dd066a028fba08))
### Maintenance
* **deps:** resolve minimatch and glob audit advisories (WealthLedger/main[#49](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/49)) ([#128](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/128)) ([7242240](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7242240b2188e9d1ca1325e65d0e1a0a3655d882))
* sync brokerage accounts contract (WealthLedger/backend[#138](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/138)) ([0e4bbec](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0e4bbec2a7b814579095ea7ef6db68a70508fa29))
## [1.2.1](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.0...v1.2.1) (2026-10-24)
### Bug Fixes
-1
View File
@@ -5,7 +5,6 @@ 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
+11 -5
View File
@@ -29,17 +29,17 @@ module.exports = {
},
{
from: {
path: "^src/(app|pages|features|entities|shared)/([^/]+)/",
path: "^src/(app|pages|widgets|features|entities|shared)/([^/]+)/",
},
name: "slices-must-use-public-api",
severity: "error",
to: {
path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
path: String.raw`^src/(app|pages|widgets|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
pathNot: "^src/$1/$2/",
},
},
{
from: { path: "^src/(pages|features|entities)/([^/]+)/" },
from: { path: "^src/(pages|widgets|features|entities)/([^/]+)/" },
name: "no-same-layer-cross-slice-imports",
severity: "error",
to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
@@ -48,18 +48,24 @@ module.exports = {
from: { path: "^src/shared/" },
name: "shared-must-not-depend-on-layers",
severity: "error",
to: { path: "^src/(entities|features|pages|app)/" },
to: { path: "^src/(entities|features|widgets|pages|app)/" },
},
{
from: { path: "^src/entities/" },
name: "entities-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(features|pages|app)/" },
to: { path: "^src/(features|widgets|pages|app)/" },
},
{
from: { path: "^src/features/" },
name: "features-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(widgets|pages|app)/" },
},
{
from: { path: "^src/widgets/" },
name: "widgets-must-not-depend-on-higher-layers",
severity: "error",
to: { path: "^src/(pages|app)/" },
},
{
-9
View File
@@ -17,21 +17,12 @@ http {
default $http_x_forwarded_proto;
'' $scheme;
}
# One shared budget: the external proxy's client-IP forwarding is not verified.
map "$request_method:$uri" $auth_admission_key {
default "";
POST:/api/v1/auth/login auth;
POST:/api/v1/auth/register auth;
}
limit_req_zone $auth_admission_key zone=auth_admission:1m rate=2r/s;
limit_req_status 429;
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
resolver 127.0.0.11 valid=5s ipv6=off;
location /api/ {
limit_req zone=auth_admission burst=5 nodelay;
set $backend http://backend:3000;
proxy_pass $backend$request_uri;
proxy_set_header Host $http_host;
+1 -6
View File
@@ -25,11 +25,7 @@ const readability = {
)
context.report({ messageId: "schema", node });
},
FunctionDeclaration(node) {
checkParameters(node);
if (node.id?.name?.endsWith?.("ViewModel"))
context.report({ messageId: "vmName", node: node.id });
},
FunctionDeclaration: checkParameters,
FunctionExpression: checkParameters,
ImportDeclaration(node) {
if (
@@ -99,7 +95,6 @@ const readability = {
schema: "Declare Zod schemas in a dedicated *.schema.ts file.",
svg: "Own SVG markup in packages/icons, and import its public component.",
union: "Put complex union members on separate lines.",
vmName: "Name custom hooks use*Vm, not use*ViewModel.",
},
schema: [],
type: "suggestion",
+1 -1
View File
@@ -1,5 +1,5 @@
{
"ignoreDependencies": ["conventional-changelog-conventionalcommits", "minimatch"],
"ignoreDependencies": ["conventional-changelog-conventionalcommits"],
"workspaces": {
".": {
"project": ["src/**/*.{ts,tsx}", "!src/shared/api/generated/**"]
+138 -42
View File
@@ -1,12 +1,12 @@
{
"name": "wealth-ledger-frontend",
"version": "1.4.0",
"version": "1.2.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wealth-ledger-frontend",
"version": "1.4.0",
"version": "1.2.1",
"workspaces": [
"packages/*"
],
@@ -80,7 +80,6 @@
"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",
@@ -89,7 +88,7 @@
"typescript": "5.9.3",
"typescript-eslint": "8.72.0",
"vite": "8.3.5",
"vite-plugin-pwa": "2.0.0",
"vite-plugin-pwa": "1.3.0",
"vitest": "5.0.5"
},
"engines": {
@@ -2512,12 +2511,14 @@
}
}
},
"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==",
"node_modules/@isaacs/cliui": {
"version": "9.0.0",
"integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
"dev": true,
"license": "BlueOak-1.0.0"
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
},
"node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
"version": "0.7.0",
@@ -3719,6 +3720,33 @@
"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==",
@@ -6420,7 +6448,6 @@
},
"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",
@@ -6468,7 +6495,6 @@
},
"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",
@@ -9071,6 +9097,33 @@
"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==",
@@ -9141,6 +9194,22 @@
"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",
@@ -9419,15 +9488,14 @@
}
},
"node_modules/glob": {
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-14.0.3.tgz",
"integrity": "sha512-A1vjIwC3qpdCso45Iw127gnp7sPhqgY8lUQhDrArIs+GbmfaaVPFuoyy7WyLT9EPZCRZ7j7aLdwUhQmHWesEow==",
"version": "13.0.6",
"integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"minimatch": "^11.0.2",
"minimatch": "^10.2.2",
"minipass": "^7.1.3",
"path-scurry": "^3.0.0"
"path-scurry": "^2.0.2"
},
"engines": {
"node": "18 || 20 || >=22"
@@ -10602,6 +10670,21 @@
"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==",
@@ -11390,19 +11473,12 @@
}
},
"node_modules/minimatch": {
"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==",
"version": "10.2.6",
"integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/nonrecursive-glob-match": "^1.0.2",
"brace-expansion": "^5.0.12"
"brace-expansion": "^5.0.8"
},
"engines": {
"node": "18 || 20 || >=22"
@@ -12136,6 +12212,12 @@
"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",
@@ -12232,9 +12314,8 @@
"license": "MIT"
},
"node_modules/path-scurry": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-3.0.0.tgz",
"integrity": "sha512-1pTbQqH1wIwMi/eleQ5leFTTCkzFsPcgXNjwOA8YGGW/W4/kHT3dssE7Z6NH+zuqNLOzOB0uaD61yl7cAcVhgg==",
"version": "2.0.2",
"integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
@@ -15848,9 +15929,8 @@
}
},
"node_modules/vite-plugin-pwa": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-2.0.0.tgz",
"integrity": "sha512-6G9dsPKT9QKYpeTuTLJM28zZL3HsXUTUM/QUZBEgQk2jbfrPJDq2i8gTewAKqi1c9Mt6MiidrL4SFI+HthiQMg==",
"version": "1.3.0",
"integrity": "sha512-c5kMgN+ITrOtHXp8PAtk2uOIEea6XjP/unCGxOWWBzQ6qa65qj/awHg0wf+QF9E/2u9vh86LqxPwzEPNbM2r5A==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -15861,13 +15941,13 @@
"workbox-window": "^7.4.1"
},
"engines": {
"node": ">=20.19.0"
"node": ">=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vite-pwa/assets-generator": "^1.0.0 || ^2.0.0",
"@vite-pwa/assets-generator": "^1.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"
@@ -17562,6 +17642,30 @@
"@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==",
@@ -17972,14 +18076,6 @@
"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"
}
}
}
}
+3 -6
View File
@@ -1,7 +1,7 @@
{
"name": "wealth-ledger-frontend",
"private": true,
"version": "1.4.0",
"version": "1.2.1",
"type": "module",
"engines": {
"node": "24.22.1"
@@ -106,7 +106,6 @@
"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",
@@ -115,7 +114,7 @@
"typescript": "5.9.3",
"typescript-eslint": "8.72.0",
"vite": "8.3.5",
"vite-plugin-pwa": "2.0.0",
"vite-plugin-pwa": "1.3.0",
"vitest": "5.0.5"
},
"overrides": {
@@ -125,9 +124,7 @@
},
"@vitest/browser": "5.0.5",
"@vitest/ui": "5.0.5",
"@vitest/mocker": "5.0.5",
"minimatch": "$minimatch",
"glob": "14.0.3"
"@vitest/mocker": "5.0.5"
},
"allowScripts": {
"esbuild@0.28.2": true,
+1 -16
View File
@@ -1,30 +1,15 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:recommended", ":semanticCommitTypeAll(chore)", "security:minimumReleaseAgeNpm"],
"extends": ["config:recommended", ":semanticCommitTypeAll(chore)"],
"timezone": "Europe/Moscow",
"labels": ["dependencies"],
"dependencyDashboard": true,
"rangeStrategy": "pin",
"prConcurrentLimit": 5,
"lockFileMaintenance": {
"enabled": true,
"schedule": ["before 4am on the first day of the month"]
},
"packageRules": [
{
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major dependencies"
},
{
"matchManagers": ["github-actions"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major github actions"
},
{
"matchManagers": ["docker-compose", "dockerfile"],
"matchUpdateTypes": ["minor", "patch"],
"groupName": "non-major container images"
},
{
"matchUpdateTypes": ["major"],
"dependencyDashboardApproval": true
-9
View File
@@ -1,9 +0,0 @@
// 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
@@ -1,11 +0,0 @@
// 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
@@ -1,14 +0,0 @@
{
"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"
}
}
@@ -217,7 +217,6 @@ beforeEach(() => {
}),
),
incomeTotalsByCurrency: [],
window: { from: "2026-09-01", to: "2026-10-01" },
}),
),
),
@@ -227,9 +226,9 @@ beforeEach(() => {
describe("All accounts routes", () => {
it.each([
["/accounts/all", "Все счета"],
["/accounts/all/operations", "История операций"],
["/accounts/all/operations", "Журнал операций"],
["/accounts/all/income?from=2026-08-01&to=2026-08-31", "Пассивный доход"],
["/accounts/all/events", "Предстоящие события"],
["/accounts/all/events", "Будущие события"],
])("opens %s directly", async (path, title) => {
renderPage(path);
expect(
@@ -311,9 +310,9 @@ describe("All accounts routes", () => {
);
for (const [suffix, tab] of [
["operations", "История операций"],
["operations", "Операции"],
["income", "Доход"],
["events", "Предстоящие события"],
["events", "События"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
expect(screen.getByRole("link", { name: "Подробнее" }))
+94 -28
View File
@@ -1,4 +1,4 @@
import type { ComponentType, FC } from "react";
import type { FC } from "react";
import { lazy } from "react";
import { Navigate, Route, Routes } from "react-router";
@@ -6,35 +6,101 @@ import { Navigate, Route, Routes } from "react-router";
import { LazyPage } from "../RouteFallback";
import { Protected, Public } from "../RouteGuards";
// Pages use named exports; React.lazy needs a default export per dynamic import (one chunk each).
function lazyPage<Name extends string>(
load: () => Promise<Record<Name, ComponentType>>,
name: Name,
) {
return lazy(async () => {
const page = await load();
const CardPage = lazy(async () => {
const { CardPage } = await import("@/pages/card");
// eslint-disable-next-line security/detect-object-injection -- `name` is a compile-time literal checked against the module's exports.
return { default: page[name] };
});
}
return { default: CardPage };
});
const CardPage = lazyPage(async () => import("@/pages/card"), "CardPage");
const CardsPage = lazyPage(async () => import("@/pages/cards"), "CardsPage");
const BondPage = lazyPage(async () => import("@/pages/bond"), "BondPage");
const BondsPage = lazyPage(async () => import("@/pages/bonds"), "BondsPage");
const StockPage = lazyPage(async () => import("@/pages/stock"), "StockPage");
const StocksPage = lazyPage(async () => import("@/pages/stocks"), "StocksPage");
const AccountPage = lazyPage(async () => import("@/pages/account"), "AccountPage");
const AccountEventsPage = lazyPage(async () => import("@/pages/account-events"), "AccountEventsPage");
const AccountOperationsPage = lazyPage(async () => import("@/pages/account-operations"), "AccountOperationsPage");
const AccountIncomePage = lazyPage(async () => import("@/pages/account-income"), "AccountIncomePage");
const AccountsPage = lazyPage(async () => import("@/pages/accounts"), "AccountsPage");
const LoginPage = lazyPage(async () => import("@/pages/login"), "LoginPage");
const NotFoundPage = lazyPage(async () => import("@/pages/not-found"), "NotFoundPage");
const RegisterPage = lazyPage(async () => import("@/pages/register"), "RegisterPage");
const SettingsPage = lazyPage(async () => import("@/pages/settings"), "SettingsPage");
const ProtectedLayout = lazyPage(async () => import("../ProtectedLayout"), "ProtectedLayout");
const CardsPage = lazy(async () => {
const { CardsPage } = await import("@/pages/cards");
return { default: CardsPage };
});
const BondPage = lazy(async () => {
const { BondPage } = await import("@/pages/bond");
return { default: BondPage };
});
const BondsPage = lazy(async () => {
const { BondsPage } = await import("@/pages/bonds");
return { default: BondsPage };
});
const StockPage = lazy(async () => {
const { StockPage } = await import("@/pages/stock");
return { default: StockPage };
});
const StocksPage = lazy(async () => {
const { StocksPage } = await import("@/pages/stocks");
return { default: StocksPage };
});
const AccountPage = lazy(async () => {
const { AccountPage } = await import("@/pages/account");
return { default: AccountPage };
});
const AccountEventsPage = lazy(async () => {
const { AccountEventsPage } = await import("@/pages/account-events");
return { default: AccountEventsPage };
});
const AccountOperationsPage = lazy(async () => {
const { AccountOperationsPage } = await import("@/pages/account-operations");
return { default: AccountOperationsPage };
});
const AccountIncomePage = lazy(async () => {
const { AccountIncomePage } = await import("@/pages/account-income");
return { default: AccountIncomePage };
});
const AccountsPage = lazy(async () => {
const { AccountsPage } = await import("@/pages/accounts");
return { default: AccountsPage };
});
const LoginPage = lazy(async () => {
const { LoginPage } = await import("@/pages/login");
return { default: LoginPage };
});
const NotFoundPage = lazy(async () => {
const { NotFoundPage } = await import("@/pages/not-found");
return { default: NotFoundPage };
});
const RegisterPage = lazy(async () => {
const { RegisterPage } = await import("@/pages/register");
return { default: RegisterPage };
});
const SettingsPage = lazy(async () => {
const { SettingsPage } = await import("@/pages/settings");
return { default: SettingsPage };
});
const ProtectedLayout = lazy(async () => {
const { ProtectedLayout } = await import("../ProtectedLayout");
return { default: ProtectedLayout };
});
const AppRoutes: FC = () => (
<Routes>
@@ -1,5 +1,6 @@
import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next";
import { useCurrentRoute } from "@/app/model";
@@ -7,12 +8,12 @@ import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useStock } from "@/entities/stock";
import { useAppDocumentTitle } from "@/shared/ui";
type DocumentTitleProps = { title: string };
const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => {
useAppDocumentTitle(props.title);
const { t } = useTranslation();
useDocumentTitle(`${props.title} — ${t("appName")}`);
};
type AccountDocumentTitleProps = {
@@ -1,12 +1,12 @@
import type { FC, PropsWithChildren } from "react";
import { Button, Stack, Text, Title } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { Component } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router";
import { useAuth } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
type BoundaryProps = PropsWithChildren<{
authenticated: boolean;
@@ -37,7 +37,7 @@ class Boundary extends Component<BoundaryProps, State> {
const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
const { authenticated } = props;
const { t } = useTranslation();
useAppDocumentTitle(t("routeError.title"));
useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
const to = authenticated ? "/accounts" : "/login";
return (
@@ -55,9 +55,9 @@ describe("AppBreadcrumbs", () => {
});
it.each([
["operations", "История операций"],
["OPERATIONS", "История операций"],
["events", "Предстоящие события"],
["operations", "Операции"],
["OPERATIONS", "Операции"],
["events", "Будущие события"],
["income", "Пассивный доход"],
])("links to the account hierarchy from %s", (section, title) => {
renderBreadcrumbs(`/accounts/account-1/${section}`, [
+7 -17
View File
@@ -7,8 +7,10 @@ import { useCurrentRoute } from "@/app/model";
import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
import { BondBreadcrumbs } from "./BondBreadcrumbs";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
import { EntityBreadcrumbs } from "./EntityBreadcrumbs";
import { CardBreadcrumbs } from "./CardBreadcrumbs";
import { StockBreadcrumbs } from "./StockBreadcrumbs";
const AppBreadcrumbs: FC = () => {
const { t } = useTranslation();
@@ -24,16 +26,9 @@ const AppBreadcrumbs: FC = () => {
stock,
} = useCurrentRoute();
if (bond) {
return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
}
if (stock) {
return (
<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
);
}
if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
if (stock)
return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
if (account && (section || !account.params.section))
return (
<Stack gap={0} mb="md">
@@ -48,13 +43,8 @@ const AppBreadcrumbs: FC = () => {
/>
</Stack>
);
if (card) {
return <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
}
if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
if (accounts)
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
@@ -0,0 +1,25 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBond } from "@/entities/bond";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type BondBreadcrumbsProps = { identifier: string };
const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
const { data } = useBond(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bond.searchTitle"), to: "/bonds" },
{ label: data?.name ?? t("bond.instrument") },
]}
/>
);
};
export { BondBreadcrumbs };
@@ -39,4 +39,4 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
);
};
export { BreadcrumbTrail, type Crumb };
export { BreadcrumbTrail };
@@ -0,0 +1,25 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type CardBreadcrumbsProps = { identifier: string };
const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
const { data } = useBankCard(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("bank.title"), to: "/cards" },
{ label: data?.name ?? t("bank.card") },
]}
/>
);
};
export { CardBreadcrumbs };
@@ -1,48 +0,0 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBankCard } from "@/entities/bank-card";
import { useBond } from "@/entities/bond";
import { useStock } from "@/entities/stock";
import type { Crumb } from "./BreadcrumbTrail";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type EntityBreadcrumbsProps = {
identifier: string;
kind:
| "bond"
| "card"
| "stock";
};
const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
const { identifier, kind } = props;
const { t } = useTranslation();
const bond = useBond(kind === "bond" ? identifier : "");
const card = useBankCard(kind === "card" ? identifier : "");
const stock = useStock(kind === "stock" ? identifier : "");
let parent: Crumb;
let name: string;
if (kind === "bond") {
parent = { label: t("bond.searchTitle"), to: "/bonds" };
name = bond.data?.name ?? t("bond.instrument");
}
else if (kind === "stock") {
parent = { label: t("stock.searchTitle"), to: "/stocks" };
name = stock.data?.name ?? t("stock.share");
}
else {
parent = { label: t("bank.title"), to: "/cards" };
name = card.data?.name ?? t("bank.card");
}
return <BreadcrumbTrail items={[parent, { label: name }]} />;
};
export { EntityBreadcrumbs };
@@ -0,0 +1,25 @@
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useStock } from "@/entities/stock";
import { BreadcrumbTrail } from "./BreadcrumbTrail";
type StockBreadcrumbsProps = { identifier: string };
const StockBreadcrumbs: FC<StockBreadcrumbsProps> = (props) => {
const { data } = useStock(props.identifier);
const { t } = useTranslation();
return (
<BreadcrumbTrail
items={[
{ label: t("stock.searchTitle"), to: "/stocks" },
{ label: data?.name ?? t("stock.share") },
]}
/>
);
};
export { StockBreadcrumbs };
+10 -4
View File
@@ -5,7 +5,6 @@ import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isGetUnder,
} from "@/shared/api";
import type {
@@ -27,14 +26,21 @@ async function mutationData<T>(
return data;
}
const bankCardGetPredicate = isGetUnder(["/api/v1/bank-cards"]);
function useBankMutationOptions() {
const queryClient = useQueryClient();
const invalidate = () =>
queryClient.invalidateQueries({
predicate: ({ queryKey }) => bankCardGetPredicate(queryKey),
predicate: ({ queryKey }) => {
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& (path === "/api/v1/bank-cards"
|| path.startsWith("/api/v1/bank-cards/"))
);
},
});
return {
@@ -49,10 +49,6 @@ function entryLabelKey(operation: BrokerageOperation): string {
return `ledger.category.${operation.category}`;
}
function isCouponPayment(operation: BrokerageOperation): boolean {
return isOperationType(operation.type, OperationType.Coupon);
}
function isIncomePayment(operation: BrokerageOperation): boolean {
return [OperationType.Coupon, OperationType.Dividend].some(type =>
isOperationType(operation.type, type),
@@ -135,7 +131,6 @@ function paymentPresentation(
export {
brokerageOperationGroupKey,
entryLabelKey,
isCouponPayment,
isIncomePayment,
isZeroDecimal,
operationLabelKey,
@@ -55,27 +55,23 @@ function renderGroup(
}
describe("OperationGroup", () => {
it("shows the received coupon and positive totals in flat account rows", () => {
it("shows the header, exact total and separate card rows per account", () => {
renderGroup([
{ ...operation("1", { id: "broker", name: "Брокерский" }, "0.1"), description: "Выплата купонов СФО ВТБ РКС Эталон 04" },
operation("1", { id: "broker", name: "Брокерский" }, "0.1"),
operation("2", { id: "iis", name: "ИИС" }, "0.2"),
]);
expect(screen.getByText("Выплата купонов СФО ВТБ РКС Эталон 04")).toBeInTheDocument();
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+0,3 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Выплата купонов СФО ВТБ РКС Эталон 04, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
name: /Купон · BOND, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
}));
expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.getByText("+0,1 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.toHaveTextContent("Купон");
expect(accounts.getByText("+0,2 ₽")).toHaveClass(/positive/);
expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
.not.toHaveClass("EntryGroup_accountCardRow");
expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument();
expect(accounts.queryByRole("link")).not.toBeInTheDocument();
});
@@ -87,10 +83,8 @@ describe("OperationGroup", () => {
]);
expect(screen.getByRole("list", {
name: /Выплата купонов BOND, Исполнено .*Итог недоступен/,
name: /Купон · BOND, Исполнено .*Итог недоступен/,
})).toBeInTheDocument();
expect(screen.getByText("Итог недоступен")).toBeInTheDocument();
expect(screen.getByText("—")).not.toHaveClass(/positive/);
});
it.each(["0", "0.000"])(
@@ -120,7 +114,6 @@ describe("OperationGroup", () => {
operation("2", { id: "iis", name: "ИИС" }, "-100"),
]);
expect(screen.getByText("0 ₽")).toBeInTheDocument();
expect(screen.getByText("−100 ₽")).toHaveClass(/negative/);
});
it("renders repeated ids inside one group as separate rows", () => {
@@ -130,7 +123,7 @@ describe("OperationGroup", () => {
]);
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", { name: /Выплата купонов/ }));
const accounts = within(screen.getByRole("list", { name: /Купон/ }));
expect(accounts.getAllByText("Брокерский")).toHaveLength(1);
expect(accounts.getAllByText("ИИС")).toHaveLength(1);
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -9,13 +9,12 @@ import {
sumMoney,
totalText,
} from "@/shared/lib";
import { AccountCardRow, AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import {
entryLabelKey,
isCouponPayment,
isZeroDecimal,
operationLabelKey,
paymentPresentation,
@@ -38,8 +37,6 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
? entryLabelKey(first)
: operationLabelKey(first.type));
const isCoupon = isCouponPayment(first);
const instrument
= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
@@ -55,21 +52,9 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
: null;
const date = formatSnapshotDay(first.occurredAt);
const description = first.description.trim();
let title = `${typeLabel} · ${instrument}`;
if (isCoupon) {
title = description && description.toLocaleLowerCase() !== "купон"
? description
: t("ledger.couponPayment", { instrument });
}
const title = `${typeLabel} · ${instrument}`;
const totalsText = totalText(totals, true);
const totalTone = isCoupon && totals?.length && totals.every(total => !isZeroDecimal(total.value) && !total.value.startsWith("-"))
? "positive"
: "neutral";
const accessibleName = [
title,
t("payout.executedAt", { date }),
@@ -78,14 +63,13 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
return (
<EntryGroup
flat={isCoupon}
header={(
<EntryCard
imageSrc={instrumentLogoUrl(first.logoName)}
initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
metadata={t("payout.executedAt", { date })}
title={title}
tone={totalTone}
tone="neutral"
value={<EntryGroupTotal isSigned totals={totals} />}
valueLabel={typeLabel}
wrap
@@ -96,15 +80,14 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
{props.entries.map(({ key, operation }) => {
const payment = paymentPresentation(operation);
const accountRowProps = {
accountName: operation.account?.name ?? "—",
value: payment.amount,
valueLabel: t(payment.label),
};
return isCoupon
? <AccountRow key={key} {...accountRowProps} tone={payment.tone} />
: <AccountCardRow key={key} {...accountRowProps} />;
return (
<AccountCardRow
accountName={operation.account?.name ?? "—"}
key={key}
value={payment.amount}
valueLabel={t(payment.label)}
/>
);
})}
</EntryGroup>
);
@@ -65,32 +65,18 @@
.summary {
font-variant-numeric: tabular-nums lining-nums;
align-items: flex-end;
}
.currencySummary {
min-width: 0;
white-space: nowrap;
}
.total {
color: var(--wl-color-text);
font-size: var(--mantine-font-size-lg);
line-height: var(--mantine-line-height-lg);
overflow-wrap: anywhere;
}
.return,
.cashValue {
font-variant-numeric: tabular-nums lining-nums;
}
.return {
justify-content: flex-end;
min-width: 0;
overflow-wrap: anywhere;
}
.cashValue {
white-space: nowrap;
}
@@ -152,11 +138,7 @@
text-align: left;
}
.summary {
align-items: flex-start;
}
.return {
.balance > div {
justify-content: flex-start;
}
}
@@ -119,26 +119,25 @@ describe("BrokerageAccountList", () => {
expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
.toBeInTheDocument();
expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
expect(within(link).getByText("+12,4 %")).toBeInTheDocument();
expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
expect(within(link).getByText("−3,1 %")).toBeInTheDocument();
expect(within(link).getByText("−4,2 $")).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 $")).not.toHaveLength(0);
expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
expect(within(link).getByText("17 позиций")).toBeInTheDocument();
expect(screen.getByRole("img", {
name: "Структура в RUB: Акции 50,0 %; Облигации 30,0 %; "
+ "Другие активы 0,0 %; Свободные деньги 20,0 %",
name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
+ "Другие активы 0 %; Свободные деньги 20 %",
})).toBeInTheDocument();
const stockLegend = within(link).getByText(/Акции 50,0 %/);
expect(stockLegend).toHaveTextContent("● Акции 50,0 %");
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,0 %/))
.not.toBeInTheDocument();
expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
expect(link).toHaveTextContent("По данным брокера");
expect(link).toHaveTextContent("Структура RUB: Акции 100");
});
@@ -15,11 +15,6 @@ import classes from "./BrokerageAccountList.module.css";
const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
const percentFormatter = new Intl.NumberFormat("ru-RU", {
maximumFractionDigits: 1,
minimumFractionDigits: 1,
});
type AvailableSummary = Extract<
BrokerageAccountCard["summary"],
{ state: "available" }
@@ -42,15 +37,20 @@ type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
function formatPercent(value: null | string) {
if (value === null) return "—";
const rounded = percentFormatter.format(Math.abs(Number(value)));
let sign = "";
if (rounded !== "0,0") sign = value.startsWith("-") ? "−" : "+";
const formatted = `${value.replace(".", ",")}\u{A0}%`;
if (isZero(value))
return value.startsWith("-") ? formatted.slice(1) : formatted;
return `${sign}${rounded}\u{A0}%`;
return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
}
function formatStructurePercent(value: string) {
return percentFormatter.format(Number(value));
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) {
@@ -65,18 +65,22 @@ const ReturnValue: FC<ReturnValueProps> = (props) => {
const { t } = useTranslation();
const { item } = props;
const displayedPercent = formatPercent(item.percent);
const isNegative = displayedPercent.startsWith("−");
const isPositive = displayedPercent.startsWith("+");
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="wrap">
<Group className={classes.return} gap="xs" wrap="nowrap">
<Text className={toneClass} fw={700} size="sm">
{displayedPercent}
{formatPercent(item.percent)}
</Text>
<Text className={toneClass} size="sm">
@@ -196,35 +200,35 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
return (
<Stack className={classes.balance} gap="xs">
<Stack className={classes.summary} gap="sm">
{summary.totals.map((total) => {
const item = summary.portfolio.unrealizedReturnByCurrency.find(
returnItem => returnItem.currency === total.currency,
);
<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>
))}
return (
<Stack
className={classes.currencySummary}
gap={2}
key={total.currency}
>
<Text className={classes.total} fw={700}>
{formatMoney(total, { withRoundedCents: true })}
</Text>
{!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount,
})}
</Text>
)}
</Stack>
{item && <ReturnValue item={item} />}
</Stack>
);
})}
<Stack gap={4}>
{summary.totals.map((total) => {
const item = summary.portfolio.unrealizedReturnByCurrency.find(
returnItem => returnItem.currency === total.currency,
);
{!!summary.remainingCurrencyCount && (
<Text c="dimmed" size="sm">
{t("accounts.remainingCurrencies", {
count: summary.remainingCurrencyCount,
})}
</Text>
)}
</Stack>
return item
? <ReturnValue item={item} key={total.currency} />
: null;
})}
</Stack>
</Group>
{summary.portfolio.cashBalances.length > 0 && (
<Group className={classes.cash} gap="xs" justify="flex-end">
@@ -103,7 +103,7 @@ describe("BrokerageEventGroup", () => {
event({ id: "iis", name: "ИИС" }, "200"),
]);
expect(screen.getByRole("list", { name: /10 \$.*200 ₽/ }))
expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
.toBeInTheDocument();
});
@@ -1,4 +1,4 @@
import { describe, expect, it, vi } from "vitest";
import { describe, expect, it } from "vitest";
import { resource } from "@/test/resource";
@@ -76,29 +76,4 @@ describe("instrument source and transport presentation", () => {
loading: false,
});
});
it("carries the retry of an exhausted read and only of that read", () => {
const refetch = vi.fn(() => Promise.resolve());
const state = section({
data: { rows: [] },
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true,
isFetching: false,
refetch,
});
expect(state.readRetry?.exhausted).toBe(true);
state.readRetry?.onRetry();
expect(refetch).toHaveBeenCalledOnce();
});
it("offers no retry for access loss or a healthy read", () => {
const base = { data: undefined, isFetching: false, refetch: vi.fn() };
expect(section({ ...base, error: { code: "NOT_FOUND" }, isError: true })
.readRetry?.exhausted).toBe(false);
expect(section({ ...base, error: null, isError: false })
.readRetry?.exhausted).toBe(false);
});
});
@@ -1,11 +1,10 @@
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import type { InvestmentResourceMeta } from "@/shared/api";
type SectionState = {
error: boolean;
hasData: boolean;
loading: boolean;
partial?: boolean;
readRetry?: ReturnType<typeof readRetry>;
};
function hasSectionData(data: unknown) {
@@ -14,11 +13,8 @@ function hasSectionData(data: unknown) {
function section(query: {
data: unknown;
error?: unknown;
isError: boolean;
isFetching?: boolean;
meta?: InvestmentResourceMeta;
refetch?: () => Promise<unknown>;
}): SectionState {
const isError = query.isError || query.meta?.lastAttempt.state === "failed";
const hasData = hasSectionData(query.data);
@@ -28,17 +24,6 @@ function section(query: {
hasData,
loading: !hasData && !isError,
partial: query.meta?.completeness === "incomplete",
// Each section retries only its own GET, so sections recover independently.
readRetry: query.refetch
? readRetry([
{
error: query.error,
isError: query.isError,
isFetching: query.isFetching ?? false,
refetch: query.refetch,
},
])
: undefined,
};
}
@@ -12,8 +12,6 @@ import {
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetry } from "@/shared/ui";
import type { SectionState } from "../model/section";
import classes from "./InstrumentDetails.module.css";
@@ -83,8 +81,6 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
</Alert>
)}
{!!props.state.readRetry && <ReadRetry {...props.state.readRetry} />}
{sectionContent}
</Paper>
);
@@ -2,18 +2,19 @@ import type { QueryClient } from "@tanstack/react-query";
import {
apiQueryClient,
isGetUnder,
type paths,
} from "@/shared/api";
type TbankConnectionStatus
= paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
const investmentGetPredicate = isGetUnder([
"/api/v1/brokerage-accounts",
"/api/v1/stocks",
"/api/v1/bonds",
]);
function isInvestmentPath(path: string) {
return [
"/api/v1/brokerage-accounts",
"/api/v1/stocks",
"/api/v1/bonds",
].some(root => path === root || path.startsWith(`${root}/`));
}
const tbankConnectionQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
@@ -26,7 +27,15 @@ function commitTbankConnectionBoundary(
) {
queryClient.setQueryData(tbankConnectionQueryKey, status);
void queryClient.resetQueries({
predicate: ({ queryKey }) => investmentGetPredicate(queryKey),
predicate: ({ queryKey }) => {
const [method, path] = queryKey;
return (
method === "get"
&& typeof path === "string"
&& isInvestmentPath(path)
);
},
});
}
@@ -4,16 +4,16 @@ import {
TbankConnectionError,
TbankConnectionLoading,
} from "./TbankConnectionSection.view";
import { useTbankConnectionSectionVm } from "./TbankConnectionSection.vm";
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => {
const vm = useTbankConnectionSectionVm();
if (vm.state === "loading") return <TbankConnectionLoading />;
const viewModel = useTbankConnectionViewModel();
if (viewModel.state === "loading") return <TbankConnectionLoading />;
return vm.state === "error"
? <TbankConnectionError retry={vm.retry} />
: <TbankConnectionSectionLoaded {...vm} />;
return viewModel.state === "error"
? <TbankConnectionError retry={viewModel.retry} />
: <TbankConnectionSectionLoaded {...viewModel} />;
};
export { TbankConnectionSection };
@@ -2,7 +2,7 @@ import { useAuthenticatedQuery } from "@/shared/api";
import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
function useTbankConnectionSectionVm() {
function useTbankConnectionViewModel() {
const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(),
});
@@ -22,4 +22,4 @@ function useTbankConnectionSectionVm() {
};
}
export { useTbankConnectionSectionVm };
export { useTbankConnectionViewModel };
@@ -26,7 +26,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage";
import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
const Navigation: FC = () => {
const location = useLocation();
@@ -100,7 +100,7 @@ describe("Upcoming event date filters", () => {
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageVm(), {
const { result } = renderHook(() => useAccountEventsPageViewModel(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2099-02-01"]}>
@@ -146,7 +146,7 @@ describe("Upcoming event date filters", () => {
const queryClient = createTestQueryClient();
const { result } = renderHook(
() => useAccountEventsPageVm(),
() => useAccountEventsPageViewModel(),
{
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
@@ -176,11 +176,7 @@ describe("Upcoming event date filters", () => {
({ request }) => {
searches.push(new URL(request.url).search);
return HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}));
return HttpResponse.json(resource({ events: [] }));
},
),
);
@@ -227,11 +223,7 @@ describe("Upcoming event date filters", () => {
"*/api/v1/brokerage-accounts/:accountId/events",
({ request }) =>
new URL(request.url).searchParams.get("from") === defaultFrom
? HttpResponse.json(resource({
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
}))
? HttpResponse.json(resource({ events: [] }))
: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
),
);
@@ -264,7 +256,6 @@ describe("Upcoming event date filters", () => {
calculatedAt: "2099-01-01T00:00:00Z",
events: [],
incomeTotalsByCurrency: [],
window: { from: "2099-01-01", to: "2099-01-31" },
}),
);
},
@@ -273,7 +264,6 @@ describe("Upcoming event date filters", () => {
renderEvents(accountId, ["?from=2026-02-01&to=2026-02-28"]);
const from = await screen.findByLabelText("Период");
expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
expect(screen.getByText(/Прогноз от .* на 01\.01\.2099 – 31\.01\.2099/)).toBeVisible();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
@@ -330,7 +320,7 @@ describe("Upcoming event date filters", () => {
expect(screen.getByLabelText("URL")).toBeEmptyDOMElement();
expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
expect(
screen.getByText("На выбранный период предстоящих событий не найдено"),
screen.getByText("За выбранный период событий не найдено"),
).toBeVisible();
},
);
@@ -371,7 +361,7 @@ it("retains the previous complete forecast when its source refresh fails", async
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountEventsPageVm(), {
const { result } = renderHook(() => useAccountEventsPageViewModel(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["/accounts/all/events"]}>
@@ -1,167 +0,0 @@
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes } from "react-router";
import { describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { AccountEventsPage } from "./AccountEventsPage";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const snapshot = resource({
accountId: "account-1",
calculatedAt: "2026-08-14T00:00:00Z",
events: [
{
date: "2026-10-01",
dateKind: "event",
displayName: "Synthetic coupon",
figi: null,
instrumentUid: null,
isin: null,
logoName: null,
projectedAmount: { currency: "RUB", value: "123.45" },
ticker: "SYN",
type: "coupon",
},
],
incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }],
window: { from: "2026-08-14", to: "2026-09-13" },
});
function renderEvents() {
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
const queryClient = createTestQueryClient();
render(
<QueryClientProvider client={queryClient}>
<MantineProvider env="test">
<MemoryRouter initialEntries={["/accounts/account-1/events"]}>
<Routes>
<Route
element={<AccountEventsPage />}
path="/accounts/:accountId/events"
/>
</Routes>
</MemoryRouter>
</MantineProvider>
</QueryClientProvider>,
);
return { queryClient };
}
describe("AccountEventsPage read retry", () => {
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
renderEvents();
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached events, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
let imports = 0;
server.use(
http.post("*/api/v1/tbank-sync", () => {
imports += 1;
return HttpResponse.json({}, { status: 202 });
}),
http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(snapshot);
}),
);
const { queryClient } = renderEvents();
await screen.findByText("Купон · Synthetic coupon");
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/events"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Купон · Synthetic coupon")).toBeInTheDocument();
expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(imports).toBe(0);
},
);
it("does not offer a plain retry when the account is gone", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 })),
);
renderEvents();
await waitFor(() =>
expect(screen.queryByRole("heading", { name: "Загрузка" }))
.not.toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
@@ -47,7 +47,6 @@ describe("AccountEventsPage", () => {
accountId: "account",
calculatedAt: "2026-08-14T00:00:00Z",
events: [],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -137,7 +136,6 @@ describe("AccountEventsPage", () => {
type: "offer",
},
],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -171,18 +169,15 @@ describe("AccountEventsPage", () => {
expect(screen.getAllByText("O")).toHaveLength(2);
});
it("renders empty and error states with retry", async () => {
it("renders empty and quiet error states", async () => {
const { rerender } = renderPage();
expect(
screen.getByText("На выбранный период предстоящих событий не найдено"),
screen.getByText("За выбранный период событий не найдено"),
).toBeInTheDocument();
query.mockReturnValue({
data: undefined,
error: { code: "TBANK_UNAVAILABLE", status: 503 },
isError: true,
isFetching: false,
isLoading: false,
refetch: vi.fn(),
} as never);
rerender(
<MantineProvider>
@@ -192,7 +187,7 @@ describe("AccountEventsPage", () => {
</MantineProvider>,
);
expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible();
expect(screen.getByRole("button", { name: "Повторить" })).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it("shows a structural busy state before events are available", () => {
@@ -239,7 +234,7 @@ describe("AccountEventsPage", () => {
"true",
);
expect(
screen.queryByText("На выбранный период предстоящих событий не найдено"),
screen.queryByText("За выбранный период событий не найдено"),
).not.toBeInTheDocument();
});
@@ -278,7 +273,6 @@ describe("AccountEventsPage", () => {
accountId: "all",
calculatedAt: "2026-08-14T00:00:00Z",
events: [...events],
window: { from: "2026-08-14", to: "2026-09-13" },
},
isError: false,
isLoading: false,
@@ -1,17 +1,17 @@
import type { FC } from "react";
import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
import { AccountEventsPageError } from "./components/AccountEventsPageError.view";
import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view";
import { AccountEventsPageLoading } from "./components/AccountEventsPageLoading.view";
const AccountEventsPage: FC = () => {
const vm = useAccountEventsPageVm();
if (vm.state === "loading") return <AccountEventsPageLoading />;
const viewModel = useAccountEventsPageViewModel();
if (viewModel.state === "loading") return <AccountEventsPageLoading />;
return vm.state === "error"
? <AccountEventsPageError {...vm} />
: <AccountEventsPageLoaded {...vm} />;
return viewModel.state === "error"
? <AccountEventsPageError {...viewModel} />
: <AccountEventsPageLoaded {...viewModel} />;
};
export { AccountEventsPage };
@@ -1,12 +1,13 @@
import { useState } from "react";
import { useParams } from "react-router";
import type { InvestmentResourceMeta } from "@/shared/api";
import {
type BrokerageEvent,
useBrokerageEvents,
} from "@/entities/brokerage-event";
import { useScreenSync } from "@/features/tbank-connection";
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import {
defaultPeriod,
isValidPeriod,
@@ -18,7 +19,6 @@ import {
type AccountEventsPageViewModel
= | {
allAccounts: boolean;
calculatedAt: string;
canApply: boolean;
draftPeriod: [null | string, null | string];
events: BrokerageEvent[];
@@ -28,20 +28,14 @@ type AccountEventsPageViewModel
onPeriodPopoverOpen: () => void;
onReset: () => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
window: { from: string; to: string };
}
| {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { onReset: () => void; state: "error" }
| { state: "loading" };
function useAccountEventsPageVm(): AccountEventsPageViewModel {
function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
const { accountId = "" } = useParams();
const {
@@ -89,8 +83,6 @@ function useAccountEventsPageVm(): AccountEventsPageViewModel {
isFetching: events.isFetching,
});
const retry = readRetry([events]);
if (availability === "loading" && events.isLoading)
return { state: "loading" };
@@ -102,17 +94,15 @@ function useAccountEventsPageVm(): AccountEventsPageViewModel {
if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
return {
onReset,
readRetry: retry,
state: "error",
};
if (!events.data)
return availability === "unavailable"
? { onReset, readRetry: retry, state: "error" }
? { onReset, state: "error" }
: { state: "loading" };
return {
allAccounts: accountId === "all",
calculatedAt: events.data.calculatedAt,
canApply:
(draftFrom !== appliedFrom || draftTo !== appliedTo)
&& isValidPeriod(draftFrom, draftTo),
@@ -132,12 +122,10 @@ function useAccountEventsPageVm(): AccountEventsPageViewModel {
onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
onReset,
partial: events.meta?.completeness === "incomplete",
readRetry: retry,
source: events.meta,
state: "loaded",
totalVisible: events.meta?.completeness === "complete",
window: events.data.window,
};
}
export { type AccountEventsPageViewModel, useAccountEventsPageVm };
export { type AccountEventsPageViewModel, useAccountEventsPageViewModel };
@@ -4,12 +4,7 @@ import { Button, Group } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountEventsPageErrorProps = {
onReset: () => void;
readRetry: ReadRetryProps;
};
type AccountEventsPageErrorProps = { onReset: () => void };
const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
const { t } = useTranslation();
@@ -18,13 +13,6 @@ const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
<StateView
action={(
<Group>
{props.readRetry.exhausted && (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
@@ -17,8 +17,8 @@ import {
brokerageEventGroupKey,
brokerageEventKey,
} from "@/entities/brokerage-event";
import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import { groupItems } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -83,20 +83,10 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
<Text c="dimmed">{t("events.hint")}</Text>
<Text c="dimmed" size="sm">
{t("events.forecastWindow", {
date: formatSnapshotTime(props.calculatedAt),
from: formatDate(props.window.from),
to: formatDate(props.window.to),
})}
</Text>
<Group align="end">
<DatePickerInput
allowSingleDateInRange
@@ -26,7 +26,6 @@ import { afterEach, describe, expect, it, vi } from "vitest";
import type { IncomeAnalytics } from "@/entities/income";
import { configureAuthClient } from "@/shared/api";
import { formatSnapshotTime } from "@/shared/lib";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
@@ -34,14 +33,10 @@ import { server } from "@/test/server";
import { toIncomeDisplayModel } from "../../model/display";
import { AccountIncomePage } from "./AccountIncomePage";
import {
useAccountIncomePageVm,
useAccountIncomePageViewModel,
} from "./AccountIncomePage.vm";
import { IncomePayments } from "./components/IncomePayments.view";
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const analytics
= {
accountId: "account-1",
@@ -171,7 +166,7 @@ describe("AccountIncomePage", () => {
);
const queryClient = createTestQueryClient();
const { result } = renderHook(() => useAccountIncomePageVm(), {
const { result } = renderHook(() => useAccountIncomePageViewModel(), {
wrapper: ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={["?from=2024-02-29&to=2024-03-01"]}>
@@ -408,124 +403,21 @@ describe("AccountIncomePage", () => {
expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
});
it.each([
["full", analytics],
["empty", { ...analytics, buckets: [], entries: [], instruments: [], totalsByCurrency: [] }],
])("shows the server source time and last attempt for a %s result", async (_name, data) => {
it("shows a quiet realized error", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
resource(data, {
freshness: "stale",
lastAttempt: {
finishedAt: "2026-08-27T01:00:00Z",
problems: [],
startedAt: "2026-08-27T00:59:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-26T12:00:00Z",
}),
),
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => new HttpResponse(null, { status: 503 }),
),
);
renderPage();
expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
formatSnapshotTime("2026-08-26T12:00:00Z"),
);
expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
expect(screen.getByText("Данные требуют обновления")).toBeInTheDocument();
expect(
await screen.findByText("Не удалось рассчитать пассивный доход", undefined, {
timeout: 4000,
}),
).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it(
"offers retry after an initial failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => {
requests += 1;
return isFailing
? new HttpResponse(null, { status: 503 })
: HttpResponse.json(resource(analytics));
},
),
);
renderPage();
expect(
await screen.findByText(
"Не удалось рассчитать пассивный доход",
undefined,
{ timeout: RETRIES_EXHAUSTED_MS },
),
).toBeInTheDocument();
const retry = screen.getByRole("button", { name: "Повторить" });
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(
await screen.findByRole("region", { name: "Выплаты" }),
).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached income, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
() => {
requests += 1;
return isFailing
? HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
)
: HttpResponse.json(resource(analytics));
},
),
);
const { queryClient } = renderPage();
await screen.findByRole("region", { name: "Выплаты" });
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/income-analytics"],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
});
const LocationProbe: FC = () => {
@@ -785,7 +677,7 @@ describe("income period and snapshot boundary", () => {
expect(screen.queryByText("USD")).not.toBeInTheDocument();
const cards = screen.getAllByRole("listitem");
expect(cards).toHaveLength(3);
expect(cards[0]).toHaveTextContent("+10 $");
expect(cards[0]).toHaveTextContent("+10 USD");
expect(cards[1]).toHaveTextContent("−2 ₽");
expect(cards[2]).toHaveTextContent("−3 ₽");
expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument();
@@ -817,11 +709,11 @@ describe("income period and snapshot boundary", () => {
);
renderPage(undefined, "all");
expect(await screen.findByText("Выплата купонов BOND")).toBeInTheDocument();
expect(await screen.findByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Выплата купонов BOND, Исполнено/,
name: /Купон · BOND, Исполнено/,
}));
expect(accounts.getByText("Брокерский")).toBeInTheDocument();
@@ -856,7 +748,7 @@ describe("income period and snapshot boundary", () => {
expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
const accounts = within(screen.getByRole("list", {
name: /Выплата купонов BOND/,
name: /Купон · BOND/,
}));
expect(accounts.getAllByRole("listitem")).toHaveLength(2);
@@ -889,7 +781,7 @@ describe("income period and snapshot boundary", () => {
);
const view = renderPage(undefined, "all");
await screen.findByText("Выплата купонов BOND");
await screen.findByText("Купон · BOND");
expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument();
view.unmount();
@@ -1,17 +1,17 @@
import type { FC } from "react";
import { useAccountIncomePageVm } from "./AccountIncomePage.vm";
import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm";
import { AccountIncomePageError } from "./components/AccountIncomePageError.view";
import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view";
import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view";
const AccountIncomePage: FC = () => {
const vm = useAccountIncomePageVm();
if (vm.state === "loading") return <AccountIncomePageLoading />;
const viewModel = useAccountIncomePageViewModel();
if (viewModel.state === "loading") return <AccountIncomePageLoading />;
return vm.state === "error"
? <AccountIncomePageError {...vm} />
: <AccountIncomePageLoaded {...vm} />;
return viewModel.state === "error"
? <AccountIncomePageError {...viewModel} />
: <AccountIncomePageLoaded {...viewModel} />;
};
export { AccountIncomePage };
@@ -5,7 +5,6 @@ import { useParams, useSearchParams } from "react-router";
import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
import { useScreenSync } from "@/features/tbank-connection";
import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib";
import {
@@ -31,19 +30,16 @@ type AccountIncomePageViewModel
onReset: () => void;
onSubmit: (values: IncomeForm) => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| {
period: IncomePeriod;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { state: "loading" };
const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
const { accountId = "" } = useParams();
const [searchParameters, setSearchParameters] = useSearchParams();
@@ -88,14 +84,12 @@ const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
isFetching: analytics.isFetching,
});
const retry = readRetry([analytics]);
if (availability === "loading" && analytics.isLoading)
return { state: "loading" };
if (!analytics.data)
return availability === "unavailable"
? { period, readRetry: retry, state: "error" }
? { period, state: "error" }
: { state: "loading" };
const display = toIncomeDisplayModel(analytics.data);
@@ -122,8 +116,6 @@ const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
onReset,
onSubmit,
partial: analytics.meta?.completeness === "incomplete",
readRetry: retry,
source: analytics.meta,
state: "loaded",
totalVisible: analytics.meta?.completeness === "complete",
};
@@ -146,5 +138,5 @@ function isValidIncomePeriod(period: IncomePeriod): boolean {
export {
type AccountIncomePageViewModel,
useAccountIncomePageVm,
useAccountIncomePageViewModel,
};
@@ -3,27 +3,15 @@ import type { FC } from "react";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
const AccountIncomePageError: FC<ErrorProps> = (props) => {
const AccountIncomePageError: FC<ErrorProps> = () => {
const { t } = useTranslation();
const retry = props.readRetry.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return (
<StateView
action={retry}
error
text={t("income.errorText")}
title={t("income.errorTitle")}
@@ -9,8 +9,6 @@ import { StateView } from "@wealthledger/ui";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
import classes from "../AccountIncomePage.module.css";
@@ -51,14 +49,6 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
/>
</FormProvider>
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
<AccountIncomePageLoadedSummary {...props} />
<Alert color="blue">{t("income.taxBoundary")}</Alert>
@@ -90,13 +90,9 @@ function configureTestAuth() {
});
}
function renderPage(
search = "",
accountId = "account-1",
queryClient = createTestQueryClient(),
) {
function renderPage(search = "", accountId = "account-1") {
return render(
<QueryClientProvider client={queryClient}>
<QueryClientProvider client={createTestQueryClient()}>
<MantineProvider>
<MemoryRouter
initialEntries={[`/accounts/${accountId}/operations${search}`]}
@@ -113,18 +109,6 @@ function renderPage(
);
}
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
const loadedOperations = {
accountId: "account-1",
hasNext: false,
items: [operation],
nextCursor: null,
observedAt: "2026-08-14T00:00:00Z",
};
describe("LedgerEntryRow", () => {
it("marks cashless operations without rendering operation details", () => {
render(
@@ -440,7 +424,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "История операций" }),
await screen.findByRole("heading", { name: "Журнал операций" }),
).toBeInTheDocument();
expect(
screen.queryByRole("link", { name: "К счету" }),
@@ -482,7 +466,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "История операций" }),
await screen.findByRole("heading", { name: "Журнал операций" }),
).toBeInTheDocument();
await waitFor(() => expect(searches.length).toBeGreaterThan(0));
const countBefore = searches.length;
@@ -521,7 +505,7 @@ describe("AccountOperationsPage", () => {
renderPage();
expect(
await screen.findByRole("heading", { name: "История операций" }),
await screen.findByRole("heading", { name: "Журнал операций" }),
).toBeInTheDocument();
fireEvent.click(screen.getByRole("combobox", { name: "Категории" }));
fireEvent.click(await screen.findByText("Налог"));
@@ -561,87 +545,20 @@ describe("AccountOperationsPage", () => {
).toBeInTheDocument();
});
it(
"renders an error state with retry that recovers in place",
{ timeout: TEST_MS },
async () => {
configureTestAuth();
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(loadedOperations));
}),
);
renderPage();
expect(
await screen.findByText("Не удалось загрузить историю операций", undefined, {
timeout: RETRIES_EXHAUSTED_MS,
}),
).toBeInTheDocument();
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(await screen.findByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it(
"keeps cached operations, warns and retries the same GET",
{ timeout: TEST_MS },
async () => {
configureTestAuth();
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(loadedOperations));
}),
);
const queryClient = createTestQueryClient();
renderPage("", "account-1", queryClient);
await screen.findByText("Покупка акций");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: [
"get",
"/api/v1/brokerage-accounts/{accountId}/operations",
],
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Покупка акций")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
},
);
it("renders an error state", async () => {
configureTestAuth();
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
),
);
renderPage();
expect(
await screen.findByText("Не удалось загрузить журнал", undefined, {
timeout: 4000,
}),
).toBeInTheDocument();
});
it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
configureTestAuth();
@@ -787,10 +704,10 @@ describe("all-account operation groups", () => {
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
const accounts = await screen.findByRole("list", {
name: /Выплата купонов BOND, Исполнено/,
name: /Купон · BOND, Исполнено/,
});
expect(screen.getByText("Выплата купонов BOND")).toBeInTheDocument();
expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
expect(screen.getByText("+200 ₽")).toBeInTheDocument();
expect(within(accounts).getAllByRole("listitem")).toHaveLength(2);
@@ -6,15 +6,15 @@ import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageL
import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
const AccountOperationsPage: FC = () => {
const vm = useAccountOperationsPageVm();
const viewModel = useAccountOperationsPageVm();
if (vm.state === "loading") {
if (viewModel.state === "loading") {
return <AccountOperationsPageLoading />;
}
return vm.state === "error"
? <AccountOperationsPageError {...vm} />
: <AccountOperationsPageLoaded {...vm} />;
return viewModel.state === "error"
? <AccountOperationsPageError {...viewModel} />
: <AccountOperationsPageLoaded {...viewModel} />;
};
export { AccountOperationsPage };
@@ -12,12 +12,7 @@ import {
useBrokerageOperationHistory,
} from "@/entities/broker-operation";
import { useScreenSync } from "@/features/tbank-connection";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
readRetry,
} from "@/shared/api";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import {
defaultPeriod,
isValidPeriod,
@@ -47,16 +42,11 @@ type AccountOperationsPageViewModel
onPrevious: () => void;
onReset: () => void;
partial?: boolean;
readRetry: ReturnType<typeof readRetry>;
source?: InvestmentResourceMeta;
state: "loaded";
totalVisible: boolean;
}
| {
onReset: () => void;
readRetry: ReturnType<typeof readRetry>;
state: "error";
}
| { onReset: () => void; state: "error" }
| { state: "loading" };
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
@@ -117,8 +107,6 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
isFetching: operations.isFetching,
});
const retry = readRetry([operations]);
if (availability === "loading" && operations.isLoading)
return { state: "loading" };
@@ -146,11 +134,11 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
(isInvalidCursor || !operations.data)
&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
)
return { onReset, readRetry: retry, state: "error" };
return { onReset, state: "error" };
if (!operations.data)
return availability === "unavailable"
? { onReset, readRetry: retry, state: "error" }
? { onReset, state: "error" }
: { state: "loading" };
const nextCursor = operations.data.nextCursor;
@@ -194,7 +182,6 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
onPrevious: history.onPrevious,
onReset,
partial: operations.meta?.completeness === "incomplete",
readRetry: retry,
source: operations.meta,
state: "loaded",
totalVisible: operations.meta?.completeness === "complete",
@@ -1,11 +1,9 @@
import type { FC } from "react";
import { Button, Group } from "@mantine/core";
import { Button } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { ReadRetryButton } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
type AccountOperationsPageErrorProps = Extract<
@@ -21,18 +19,9 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
return (
<StateView
action={(
<Group gap="sm" justify="center">
{props.readRetry.exhausted && (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)}
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
</Group>
<Button onClick={props.onReset} variant="default">
{t("ledger.reset")}
</Button>
)}
text={t("ledger.errorText")}
title={t("ledger.errorTitle")}
@@ -19,7 +19,7 @@ import {
OperationGroup,
} from "@/entities/broker-operation";
import { groupItems } from "@/shared/lib";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
import { SourceSyncStatus } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
@@ -102,8 +102,6 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
stale={props.source?.freshness === "stale"}
/>
<ReadRetry {...props.readRetry} />
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
+4 -22
View File
@@ -23,7 +23,7 @@ function sections(positions: Portfolio["positions"]) {
}
describe("account position sections", () => {
it("excludes currency mirrors from display and share denominators", () => {
it("excludes currency instruments only from display, preserving order and share denominators", () => {
const otherTypes = [
"OPTION",
"OTHER",
@@ -73,30 +73,12 @@ describe("account position sections", () => {
"FIGI-FUND",
...otherTypes.map(type => `FIGI-${type}-NEXT`),
]);
expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("50 %");
expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("25 %");
expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("25 %");
expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("40 %");
expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("20 %");
expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("20 %");
expect(snapshot).toEqual(original);
});
it("keeps all-account positions from both accounts without counting mirrored cash", () => {
const result = sections([
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "100" } }),
makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "50" }, type: "CURRENCY" }),
makePosition({ account: { id: "b", name: "ИИС" }, currentValue: { currency: "RUB", value: "100" } }),
]);
const visible = result.flatMap(section =>
section.groups.flatMap(group => group.positions));
expect(visible)
.toEqual(expect.arrayContaining([
expect.objectContaining({ account: { id: "a", name: "Основной" }, shareText: "50 %" }),
expect.objectContaining({ account: { id: "b", name: "ИИС" }, shareText: "50 %" }),
]));
expect(visible).toHaveLength(2);
});
it("prepares grouped position sections with derived display data", () => {
expect(
toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({
+1 -1
View File
@@ -152,7 +152,7 @@ function toAccountPagePositionSections(
const denominators = new Map<string, number>();
for (const position of portfolio.positions) {
if (position.type === "CURRENCY" || !position.currentValue) continue;
if (!position.currentValue) continue;
const currency = position.currentValue.currency;
denominators.set(
currency,
@@ -18,7 +18,6 @@ import type { BrokerageEvent } from "@/entities/brokerage-event";
import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio";
import { configureAuthClient } from "@/shared/api";
import { formatSnapshotTime } from "@/shared/lib";
import { createTestQueryClient } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
@@ -60,10 +59,6 @@ function configureTestAuth() {
});
}
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
function renderAccountRoute(queryClient: QueryClient, accountId = "account-1") {
configureTestAuth();
@@ -236,37 +231,6 @@ describe("AccountPage states", () => {
.toHaveAccessibleDescription(/Акция: 100 ₽, 100 %/);
});
it("shows server source time and attempt for an empty account", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json(resource(
{
...portfolio,
cashBalances: [],
isStale: false,
positions: [],
totalsByCurrency: [],
},
{
lastAttempt: {
finishedAt: "2026-08-14T01:00:00Z",
problems: [],
startedAt: "2026-08-14T00:59:00Z",
state: "failed",
},
lastSuccessfulAt: "2026-08-13T12:00:00Z",
},
)),
),
);
renderAccountRoute(createTestQueryClient());
expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
formatSnapshotTime("2026-08-13T12:00:00Z"),
);
expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it("expands and resets other when switching slice", () => {
const positions = [400, 250, 150, 100, 50, 30, 20].map(
(value, index) => position({
@@ -850,9 +814,9 @@ describe("AccountPage states", () => {
expect(
screen.getByRole("heading", { name: "Портфель пока пуст" }),
).toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть историю операций" }))
expect(screen.getByRole("link", { name: "Открыть журнал" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть предстоящие события" }))
expect(screen.getByRole("link", { name: "Открыть будущие события" }))
.toBeInTheDocument();
expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
.toBeInTheDocument();
@@ -893,10 +857,10 @@ describe("AccountPage states", () => {
}),
).toBeVisible();
expect(
screen.getByRole("status", { name: "Загрузка предстоящих событий" }),
screen.getByRole("status", { name: "Загрузка будущих событий" }),
).toBeVisible();
expect(
screen.queryByText("На ближайшие 30 дней предстоящих событий не найдено."),
screen.queryByText("На ближайшие 30 дней событий не найдено."),
).not.toBeInTheDocument();
expect(screen.getByText("Загрузка дохода текущего месяца")).toBeVisible();
expect(screen.queryByText("Нет текущих сумм")).not.toBeInTheDocument();
@@ -910,6 +874,7 @@ describe("AccountPage states", () => {
).toBeInTheDocument();
expect(screen.queryByText(/T-Bank временно недоступен/))
.not.toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
expect(
screen.getByRole("radio", { name: "Облигации" }),
@@ -1076,7 +1041,7 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(
screen.getByText("Пока недоступно"),
).toBeInTheDocument();
@@ -1115,7 +1080,7 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Сделка")).toBeInTheDocument();
expect(screen.getByText("−12 ₽")).toBeInTheDocument();
});
@@ -1169,8 +1134,8 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
const section = screen.getByRole("tabpanel", { name: "Предстоящие события" });
fireEvent.click(screen.getByRole("tab", { name: "События" }));
const section = screen.getByRole("tabpanel", { name: "События" });
const content = within(section);
const text = section.textContent ?? "";
@@ -1191,7 +1156,7 @@ describe("AccountPage states", () => {
expect(
content.getByText("11.09.2026 · Дата реестра · RU000A0JX0J2"),
).toBeVisible();
for (const amount of ["850,50 ₽", "0 $", "1 000 ₽", "Сумма неизвестна"])
for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"])
expect(content.getByText(amount)).toBeVisible();
expect(content.getAllByText("Прогноз")).toHaveLength(4);
expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
@@ -1211,15 +1176,15 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
fireEvent.click(screen.getByRole("tab", { name: "События" }));
const content = within(
screen.getByRole("tabpanel", { name: "Предстоящие события" }),
screen.getByRole("tabpanel", { name: "События" }),
);
if (state === "loading") {
const skeleton = content.getByRole("status", {
name: "Загрузка предстоящих событий",
name: "Загрузка будущих событий",
});
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
@@ -1230,7 +1195,7 @@ describe("AccountPage states", () => {
else {
// eslint-disable-next-line vitest/no-conditional-expect -- The table case deterministically selects the empty state.
expect(
content.getByText("На ближайшие 30 дней предстоящих событий не найдено."),
content.getByText("На ближайшие 30 дней событий не найдено."),
).toBeVisible();
}
@@ -1251,7 +1216,7 @@ describe("AccountPage states", () => {
/>,
);
fireEvent.click(screen.getByRole("tab", { name: "Предстоящие события" }));
fireEvent.click(screen.getByRole("tab", { name: "События" }));
expect(
screen.getByText("Данные появятся здесь, когда чтение восстановится."),
).toBeInTheDocument();
@@ -1259,110 +1224,6 @@ describe("AccountPage states", () => {
expect(screen.getByText("Вторая")).toBeInTheDocument();
});
it(
"keeps cached totals, then warns and retries the same portfolio GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requests += 1;
if (isFailing)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json(resource(
requests === 1
? portfolio
: { ...portfolio, totalsByCurrency: [{ currency: "RUB", value: "999" }] },
{ resourceKey: "portfolio" },
));
}),
);
const queryClient = createTestQueryClient();
renderAccountRoute(queryClient);
await screen.findByText("Вторая");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: portfolioQueryOptions("account-1").queryKey,
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(screen.getByText("1 234,5 ₽")).toBeInTheDocument();
// One cached read plus the three automatic attempts.
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("999 ₽")).toBeInTheDocument();
expect(requests).toBe(5);
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
},
);
it(
"offers retry after an initial temporary failure and recovers in place",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requests += 1;
return isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource(portfolio, { resourceKey: "portfolio" }));
}),
);
renderAccountRoute(createTestQueryClient());
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(requests).toBe(3);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Вторая")).toBeInTheDocument();
expect(requests).toBe(4);
},
);
it.each(["NOT_FOUND", "UNAUTHORIZED"])(
"does not offer a plain retry for %s after a cached portfolio",
async (code) => {
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
HttpResponse.json({ code }, { status: code === "NOT_FOUND" ? 404 : 401 })),
);
renderAccountRoute(createTestQueryClient());
await waitFor(() =>
expect(screen.queryByRole("heading", { name: "Загрузка" })).not.toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
},
);
it.each([503])(
"preserves totals quietly through refresh error %i and success",
async (status) => {
@@ -1415,7 +1276,7 @@ describe("AccountPage states", () => {
});
expect(structure).toHaveTextContent("10 ₽");
expect(screen.getByText(/^Данные на /)).toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
void queryClient.invalidateQueries({
queryKey: portfolioQueryOptions("account-1").queryKey,
});
@@ -1459,7 +1320,7 @@ describe("AccountPage states", () => {
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["-0,5 $"]),
);
expect(screen.getByText(/^Данные на /)).toHaveTextContent("Данные на");
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(structure).not.toHaveTextContent("10 ₽");
expect(structure).toHaveTextContent("Нет положительной стоимости");
expect(
@@ -1500,7 +1361,7 @@ describe("AccountPage states", () => {
expect(
screen.getAllByRole("definition").map(node => node.textContent),
).toEqual(["1 234,5 ₽"]);
expect(screen.getByText(/^Данные на /)).toBeInTheDocument();
expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
expect(
screen.queryByRole("status", { name: "Загрузка" }),
).not.toBeInTheDocument();
@@ -1522,8 +1383,8 @@ describe("AccountPage states", () => {
.toBeVisible();
expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "История операций" }));
expect(screen.getByText("Последних операций пока нет.")).toBeVisible();
fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
});
it("links operation, event and income previews to their detail pages", () => {
@@ -1538,8 +1399,8 @@ describe("AccountPage states", () => {
);
for (const [tab, href] of [
["История операций", "/accounts/account-1/operations"],
["Предстоящие события", "/accounts/account-1/events"],
["Операции", "/accounts/account-1/operations"],
["События", "/accounts/account-1/events"],
["Доход", "/accounts/account-1/income"],
]) {
fireEvent.click(screen.getByRole("tab", { name: tab }));
@@ -1655,7 +1516,7 @@ describe("AccountPage states", () => {
await screen.findByRole("heading", { level: 1, name: "Все счета" });
const operationGroup = screen.getByRole("list", {
name: /Выплата купонов BOND, Исполнено/,
name: /Купон · BOND, Исполнено/,
});
expect(screen.getByText("+500 ₽")).toBeInTheDocument();
@@ -1,48 +1,45 @@
import type { FC } from "react";
import { useAccountPageVm } from "./AccountPage.vm";
import { useAccountPageViewModel } from "./AccountPage.vm";
import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
import { AccountPageError } from "./components/AccountPageError.view";
import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
const AccountPage: FC = () => {
const vm = useAccountPageVm();
if (vm.state === "loading") return <AccountPageLoading />;
if (vm.state === "error") return <AccountPageError {...vm} />;
if (vm.state === "empty")
const viewModel = useAccountPageViewModel();
if (viewModel.state === "loading") return <AccountPageLoading />;
if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
if (viewModel.state === "empty")
return (
<AccountPageEmpty
account={vm.account}
accountId={vm.accountId}
incomeSummary={vm.incomeSummary}
readRetry={vm.readRetry}
recentEvents={vm.recentEvents}
recentOperations={vm.recentOperations}
source={vm.source}
account={viewModel.account}
accountId={viewModel.accountId}
incomeSummary={viewModel.incomeSummary}
recentEvents={viewModel.recentEvents}
recentOperations={viewModel.recentOperations}
/>
);
return (
<AccountPageLoaded
account={vm.account}
accountId={vm.accountId}
concentration={vm.concentration}
currency={vm.currency}
incomeSummary={vm.incomeSummary}
onCurrencyChange={vm.onCurrencyChange}
onSliceChange={vm.onSliceChange}
onTabChange={vm.onTabChange}
partial={vm.partial}
portfolio={vm.portfolio}
positionSections={vm.positionSections}
readRetry={vm.readRetry}
recentEvents={vm.recentEvents}
recentOperations={vm.recentOperations}
slice={vm.slice}
source={vm.source}
tab={vm.tab}
unrealizedReturns={vm.unrealizedReturns}
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}
/>
);
};
@@ -12,7 +12,7 @@ import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { portfolio } from "../../model/positions.fixtures";
import { useAccountPageVm } from "./AccountPage.vm";
import { useAccountPageViewModel } from "./AccountPage.vm";
function configureTestAuth() {
configureAuthClient({
@@ -102,12 +102,12 @@ function mockLoadedAccountPage() {
);
}
describe("useAccountPageVm", () => {
describe("useAccountPageViewModel", () => {
it("prepares recent operations and events state for presentation views", async () => {
configureTestAuth();
mockLoadedAccountPage();
const { result } = renderHook(() => useAccountPageVm(), {
const { result } = renderHook(() => useAccountPageViewModel(), {
wrapper: createWrapper(),
});
@@ -154,7 +154,7 @@ describe("useAccountPageVm", () => {
),
);
const { result } = renderHook(() => useAccountPageVm(), {
const { result } = renderHook(() => useAccountPageViewModel(), {
wrapper: createWrapper(),
});
@@ -194,7 +194,7 @@ it("keeps overview sections independent when their source data is incomplete", a
),
);
const { result } = renderHook(() => useAccountPageVm(), {
const { result } = renderHook(() => useAccountPageViewModel(), {
wrapper: createWrapper(),
});
@@ -232,7 +232,7 @@ it("keeps overview sections loaded without exposing technical retry", async () =
),
);
const { result } = renderHook(() => useAccountPageVm(), {
const { result } = renderHook(() => useAccountPageViewModel(), {
wrapper: createWrapper(),
});
@@ -16,7 +16,7 @@ import {
import { useIncomeSummary } from "@/entities/income";
import { usePortfolio } from "@/entities/portfolio";
import { useScreenSync } from "@/features/tbank-connection";
import { apiErrorCode, isBrokerageAccessLoss, readRetry } from "@/shared/api";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib";
import {
@@ -45,10 +45,8 @@ type AccountPageContent = {
accountId?: string;
incomeSummary: AccountPageIncomeSummary;
partial?: boolean;
readRetry: AccountPageReadRetry;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
};
type AccountPageEmptyViewModel = AccountPageContent & {
@@ -64,20 +62,25 @@ type AccountPageLoadedViewModel = AccountPageContent & {
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
slice: Slice;
source?: InvestmentResourceMeta;
state: "loaded";
tab: string;
unrealizedReturns: Portfolio["totalsByCurrency"];
};
type AccountPageReadRetry = ReturnType<typeof readRetry>;
type AccountPageViewModel
= | AccountPageEmptyViewModel
| AccountPageLoadedViewModel
| { code?: string; readRetry: AccountPageReadRetry; state: "error" }
| { code?: string; state: "error" }
| { state: "loading" };
function useAccountPageVm(): AccountPageViewModel {
function isPortfolioAccessFailure(code?: string) {
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.NotFound)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountPageViewModel(): AccountPageViewModel {
const { accountId } = useParams();
const { t } = useTranslation();
@@ -116,9 +119,7 @@ function useAccountPageVm(): AccountPageViewModel {
]);
const code = apiErrorCode(portfolio.error);
// The portfolio drives this screen; the retry repeats only its GET.
const retry = readRetry([portfolio]);
const isAccessFailure = isBrokerageAccessLoss(code);
const isAccessFailure = isPortfolioAccessFailure(code);
const availability = useInitialAvailability({
hasContent: !!portfolio.data,
@@ -127,13 +128,12 @@ function useAccountPageVm(): AccountPageViewModel {
isFetching: portfolio.isFetching,
});
if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (isAccessFailure) return { code, state: "error" as const };
if (!portfolio.data)
return availability === "unavailable"
? { code, readRetry: retry, state: "error" as const }
: { state: "loading" as const };
return {
state: availability === "unavailable" ? "error" : "loading",
} as const;
const account = accounts.data?.find(item => item.id === accountId);
const recentOperations = toRecentOperations(accountId, operations);
@@ -150,10 +150,8 @@ function useAccountPageVm(): AccountPageViewModel {
account,
accountId,
incomeSummary,
readRetry: retry,
recentEvents,
recentOperations,
source: portfolio.meta,
state: "empty" as const,
};
@@ -188,7 +186,6 @@ function useAccountPageVm(): AccountPageViewModel {
partial: isPartial,
portfolio: portfolio.data,
positionSections: toAccountPagePositionSections(portfolio.data),
readRetry: retry,
recentEvents,
recentOperations,
slice: current.slice,
@@ -199,4 +196,4 @@ function useAccountPageVm(): AccountPageViewModel {
};
}
export { useAccountPageVm };
export { useAccountPageViewModel };
@@ -5,10 +5,9 @@ import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account";
import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import { PortfolioStructure } from "@/widgets/portfolio-structure";
import type {
AccountPageIncomeSummary,
@@ -18,17 +17,14 @@ import type {
import { AccountHeading } from "./AccountHeading.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { RecentOperations } from "./RecentOperations.view";
type AccountPageEmptyProps = {
account?: BrokerageAccount;
accountId?: string;
incomeSummary?: AccountPageIncomeSummary;
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
source?: InvestmentResourceMeta;
};
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
@@ -44,14 +40,6 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
<Stack>
<AccountHeading account={props.account} accountId={props.accountId} />
<SourceSyncStatus
lastAttempt={props.source?.lastAttempt}
lastSuccessfulAt={props.source?.lastSuccessfulAt}
stale={props.source?.freshness === "stale"}
/>
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
<StateView text={text} title={t("portfolio.emptyTitle")} />
<PortfolioStructure
@@ -6,12 +6,8 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountPageErrorProps = {
code?: string;
readRetry?: ReadRetryProps;
};
type AccountPageErrorProps = { code?: string };
const AccountPageError: FC<AccountPageErrorProps> = (props) => {
const { code } = props;
@@ -47,18 +43,8 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
/>
);
const retry = props.readRetry?.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return (
<StateView
action={retry}
text={t("states.unavailableText")}
title={t("states.unavailableTitle")}
/>
@@ -15,7 +15,8 @@ import type { InvestmentResourceMeta } from "@/shared/api";
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { formatMoney } from "@/shared/lib";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
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";
@@ -30,7 +31,6 @@ import { AccountHeading } from "./AccountHeading.view";
import { Concentration } from "./Concentration/Concentration.view";
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { PositionSection } from "./PositionSection.view";
import { RecentOperations } from "./RecentOperations.view";
@@ -46,7 +46,6 @@ type AccountPageLoadedProps = {
partial?: boolean;
portfolio: Portfolio;
positionSections: AccountPagePositionSection[];
readRetry?: ReadRetryProps;
recentEvents: AccountPageRecentEvents;
recentOperations: AccountPageRecentOperations;
slice: Slice;
@@ -87,8 +86,6 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
stale={props.source?.freshness === "stale"}
/>
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
{props.partial
? tab !== "concentration" && (
<Alert role="status">{t("investment.partial")}</Alert>
@@ -1,6 +1,6 @@
import { MantineProvider } from "@mantine/core";
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter } from "react-router";
import { describe, expect, it, vi } from "vitest";
@@ -110,9 +110,7 @@ describe("AccountsPage", () => {
renderPage(client);
expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
expect(screen.getAllByText("20,00 $")).not.toHaveLength(0);
expect(screen.queryByText("Ваши инвестиции по счетам"))
.not.toBeInTheDocument();
expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
expect(screen.getByText("5 счетов")).toBeInTheDocument();
expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
expect(screen.getByText(
@@ -263,101 +261,6 @@ describe("AccountsPage", () => {
});
});
// Automatic read retries wait 1s + 2s before the failure is final.
const RETRIES_EXHAUSTED_MS = 6000;
const TEST_MS = 10_000;
describe("exhausted read retries", () => {
it(
"keeps the cached list, warns and retries the same accounts GET",
{ timeout: TEST_MS },
async () => {
let isFailing = false;
let requests = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requests += 1;
if (isFailing)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json(resource([account]));
}),
);
const queryClient = createTestQueryClient();
renderPage(queryClient);
await screen.findByText("Основной");
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
isFailing = true;
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
expect(screen.getByText("Основной")).toBeInTheDocument();
expect(requests).toBe(4);
isFailing = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByText("Не удалось обновить данные"))
.not.toBeInTheDocument());
expect(requests).toBe(5);
expect(screen.getByText("Основной")).toBeInTheDocument();
},
);
it(
"offers retry on the unavailable state after an initial failure",
{ timeout: TEST_MS },
async () => {
let isFailing = true;
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
isFailing
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([account]))),
);
renderPage(createTestQueryClient());
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: RETRIES_EXHAUSTED_MS },
);
isFailing = false;
fireEvent.click(retry);
expect(await screen.findByText("Основной")).toBeInTheDocument();
},
);
it("does not offer a plain retry when the connection is lost", async () => {
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json({ code: "TBANK_NOT_CONNECTED" }, { status: 409 })),
);
renderPage(createTestQueryClient());
expect(await screen.findByRole("link", { name: "Открыть настройки T-Bank" }))
.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument();
});
});
it.each(["none", "failed"] as const)(
"keeps incomplete empty membership distinct from no accounts (attempt=%s)",
async (state) => {
@@ -1,22 +1,21 @@
import type { FC } from "react";
import { useAccountsPageVm } from "./AccountsPage.vm";
import { useAccountsPageViewModel } from "./AccountsPage.vm";
import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
import { AccountsPageError } from "./components/AccountsPageError.view";
import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
const AccountsPage: FC = () => {
const vm = useAccountsPageVm();
if (vm.state === "loading") return <AccountsPageLoading />;
if (vm.state === "error") return <AccountsPageError {...vm} />;
if (vm.state === "empty") return <AccountsPageEmpty />;
const viewModel = useAccountsPageViewModel();
if (viewModel.state === "loading") return <AccountsPageLoading />;
if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
if (viewModel.state === "empty") return <AccountsPageEmpty />;
return (
<AccountsPageLoaded
accounts={vm.accounts}
meta={vm.meta}
readRetry={vm.readRetry}
accounts={viewModel.accounts}
meta={viewModel.meta}
/>
);
};
@@ -4,38 +4,25 @@ import {
useBrokerageAccounts,
} from "@/entities/brokerage-account";
import { useScreenSync } from "@/features/tbank-connection";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
readRetry,
} from "@/shared/api";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
import { useInitialAvailability } from "@/shared/lib";
type AccountsPageReadRetry = ReturnType<typeof readRetry>;
type AccountsPageViewModel
= | {
accounts: BrokerageAccountCard[];
meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>;
readRetry: AccountsPageReadRetry;
state: "loaded";
}
| { code?: string; readRetry: AccountsPageReadRetry; state: "error" }
| { state: "empty" }
| { state: "loading" };
= | { accounts: BrokerageAccountCard[]; meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>; state: "loaded" }
| { code?: string; state: "error" }
| { state: "empty" }
| { state: "loading" };
function isAccountsAccessFailure(code?: string) {
return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
}
function useAccountsPageVm(): AccountsPageViewModel {
function useAccountsPageViewModel(): AccountsPageViewModel {
const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]);
const code = apiErrorCode(accounts.error);
const retry = readRetry([accounts]);
const isAccessFailure = isAccountsAccessFailure(code);
const hasResult = !!accounts.data
@@ -49,13 +36,12 @@ function useAccountsPageVm(): AccountsPageViewModel {
isFetching: accounts.isFetching,
});
if (isAccessFailure)
return { code, readRetry: retry, state: "error" as const };
if (isAccessFailure) return { code, state: "error" as const };
if (!hasResult || !accounts.data)
return availability === "unavailable"
? { code, readRetry: retry, state: "error" as const }
: { state: "loading" as const };
return {
state: availability === "unavailable" ? "error" : "loading",
} as const;
if (accounts.data.length === 0)
return {
@@ -68,9 +54,8 @@ function useAccountsPageVm(): AccountsPageViewModel {
return {
accounts: brokerageAccountCards(accounts.data, meta.dependencies),
meta,
readRetry: retry,
state: "loaded" as const,
};
}
export { useAccountsPageVm };
export { useAccountsPageViewModel };
@@ -6,12 +6,8 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
type AccountsPageErrorProps = {
code?: string;
readRetry?: ReadRetryProps;
};
type AccountsPageErrorProps = { code?: string };
const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
const { code } = props;
@@ -42,18 +38,8 @@ const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
/>
);
const retry = props.readRetry?.exhausted
? (
<ReadRetryButton
onRetry={props.readRetry.onRetry}
retrying={props.readRetry.retrying}
/>
)
: undefined;
return (
<StateView
action={retry}
text={t("states.unavailableText")}
title={t("states.unavailableTitle")}
/>
@@ -1,21 +0,0 @@
.summary {
min-width: 0;
padding-bottom: var(--mantine-spacing-lg);
border-bottom: 1px solid var(--wl-color-border);
}
.primaryTotal {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-variant-numeric: tabular-nums;
line-height: 1.2;
overflow-wrap: anywhere;
}
.otherTotal {
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.meta {
padding-top: var(--mantine-spacing-xs);
}
@@ -1,6 +1,6 @@
import type { FC } from "react";
import { Button, Group, 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";
@@ -11,9 +11,7 @@ import {
BrokerageAccountList,
} from "@/entities/brokerage-account";
import { formatMoney } from "@/shared/lib";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import classes from "./AccountsPageLoaded.module.css";
import { SourceSyncStatus } from "@/shared/ui";
const DECIMAL_BASE = 10n;
const DECIMAL_PART_COUNT = 2;
@@ -22,7 +20,6 @@ const ZERO = 0n;
type AccountsPageLoadedProps = {
accounts: BrokerageAccountCard[];
meta: InvestmentResourceMeta;
readRetry?: ReadRetryProps;
};
type Money = { currency: string; value: string };
@@ -89,57 +86,52 @@ function sumDecimals(values: string[]) {
const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
const { t } = useTranslation();
const { excludedCount, totals } = accountTotals(props.accounts);
const primaryTotal = totals.find(total => total.currency === "RUB") ?? totals[0];
const otherTotals = totals.filter(total => total !== primaryTotal);
return (
<Stack gap="lg">
<Title order={1}>{t("accounts.title")}</Title>
<Stack gap={4}>
<Title order={1}>{t("accounts.title")}</Title>
<Stack className={classes.summary} gap="xs">
<Text c="dimmed" size="sm">
{t("accounts.currentValue")}
{t("accounts.subtitle")}
</Text>
</Stack>
{primaryTotal
? (
<Text className={classes.primaryTotal} fw={700}>
{formatMoney(primaryTotal, { withRoundedCents: true })}
<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>
)
: (
<Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>
)}
</Stack>
</SimpleGrid>
{otherTotals.length > 0 && (
<Group gap="md" wrap="wrap">
{otherTotals.map(total => (
<Text className={classes.otherTotal} key={total.currency}>
{formatMoney(total, { withRoundedCents: true })}
</Text>
))}
</Group>
)}
<Group className={classes.meta} gap="xs" wrap="wrap">
<Text c="dimmed" size="xs">
{t("accounts.count", { count: props.accounts.length })}
</Text>
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
lastSuccessfulAt={props.meta.lastSuccessfulAt}
stale={props.meta.freshness === "stale"}
/>
</Group>
{excludedCount > 0 && (
<Text c="dimmed" size="sm">
{t("accounts.summaryExcluded", { count: excludedCount })}
</Text>
)}
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
lastSuccessfulAt={props.meta.lastSuccessfulAt}
stale={props.meta.freshness === "stale"}
/>
</Stack>
<Button
+2 -17
View File
@@ -347,29 +347,14 @@ describe("bond page", () => {
it("keeps market content and sold-position history when coupons fail", async () => {
setup({ failCoupons: true, noPosition: true });
await screen.findByText("98,125 %");
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
expect(
screen.queryByRole("heading", { name: "Моя позиция" }),
).not.toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "История операций" }),
screen.getByRole("heading", { name: "Моя история событий" }),
).toBeVisible();
});
it(
"offers a local retry for the failed coupons section only",
{ timeout: 10_000 },
async () => {
setup({ failCoupons: true });
await screen.findByText("98,125 %");
// Automatic read retries wait 1s + 2s before the failure is final.
await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: 6000 },
);
expect(screen.getAllByRole("button", { name: "Повторить" })).toHaveLength(1);
expect(screen.getByText("98,125 %")).toBeVisible();
},
);
it("preserves cached quote without manual refresh", async () => {
const controls = setup({ path: `/bonds/${uid}?period=year&events=trades` });
await screen.findByText("98,125 %");
@@ -120,52 +120,11 @@ const useOperationFormVm = (props: OperationFormProps) => {
body: { ...body, version },
id: props.operation.id,
});
else {
const base = {
amount: body.amount,
cardId: values.cardId,
date: values.date,
description: values.description,
else
await operationCreation.mutateAsync({
id: intent,
};
switch (values.kind) {
case "expense": {
await operationCreation.mutateAsync({
...base,
categoryId: values.categoryId || defaultCategoryId,
kind: values.kind,
});
break;
}
case "refund": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
originalExpenseId: values.originalExpenseId,
});
break;
}
case "topup": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
});
break;
}
case "transfer": {
await operationCreation.mutateAsync({
...base,
kind: values.kind,
targetCardId: values.targetCardId,
});
break;
}
}
}
...body,
});
notifications.show({
id: "bank-operation-saved-" + actionId,
+2 -2
View File
@@ -1,13 +1,13 @@
import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next";
import { AuthPageLayout, LoginForm } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
const LoginPage: FC = () => {
const { t } = useTranslation();
useAppDocumentTitle(t("auth.login"));
useDocumentTitle(`${t("auth.login")} — ${t("appName")}`);
return (
<AuthPageLayout title={t("auth.login")}>
+2 -3
View File
@@ -1,15 +1,14 @@
import type { FC } from "react";
import { Button, Stack, Title } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { useAppDocumentTitle } from "@/shared/ui";
const NotFoundPage: FC = () => {
const { t } = useTranslation();
useAppDocumentTitle(t("notFound.title"));
useDocumentTitle(`${t("notFound.title")} — ${t("appName")}`);
return (
<Stack>
+2 -2
View File
@@ -1,13 +1,13 @@
import type { FC } from "react";
import { useDocumentTitle } from "@mantine/hooks";
import { useTranslation } from "react-i18next";
import { AuthPageLayout, RegisterForm } from "@/features/auth";
import { useAppDocumentTitle } from "@/shared/ui";
const RegisterPage: FC = () => {
const { t } = useTranslation();
useAppDocumentTitle(t("auth.register"));
useDocumentTitle(`${t("auth.register")} — ${t("appName")}`);
return (
<AuthPageLayout title={t("auth.register")}>
@@ -1,24 +1,13 @@
import type { FC } from "react";
import { Button, Stack, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/features/auth";
import { TbankConnectionSection } from "@/features/tbank-connection";
const SettingsPage: FC = () => {
const { t } = useTranslation();
const { logout } = useAuth();
import { useSettingsPageVm } from "./SettingsPage.vm";
// eslint-disable-next-line frontend/readability -- the page VM was removed as degenerate (frontend#143); a one-off error-swallowing logout is not a ViewModel.
const onLogout = async () => {
try {
await logout();
}
catch {
// The session is already cleared; the route guard owns navigation.
}
};
const SettingsPage: FC = () => {
const { onLogout, t } = useSettingsPageVm();
return (
<Stack>
@@ -0,0 +1,21 @@
import { useTranslation } from "react-i18next";
import { useAuth } from "@/features/auth";
function useSettingsPageVm() {
const { t } = useTranslation();
const { logout } = useAuth();
const onLogout = async () => {
try {
await logout();
}
catch {
// The session is already cleared; the route guard owns navigation.
}
};
return { onLogout, t };
}
export { useSettingsPageVm };
@@ -81,7 +81,6 @@ function setup(
candles?: NonNullable<StockPageVm["candles"]>["candles"];
cursorError?: string;
failCompany?: boolean;
failCompanyAfter?: { value: boolean };
failStock?: boolean;
metrics?: NonNullable<StockPageVm["company"]>["metrics"];
noPosition?: boolean;
@@ -134,7 +133,7 @@ function setup(
),
);
if (params.section === "company")
return (options.failCompanyAfter?.value ?? options.failCompany)
return options.failCompany
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(
@@ -397,6 +396,7 @@ describe("stock page", () => {
screen.queryByRole("heading", { name: "Моя позиция" }),
).not.toBeInTheDocument();
expect(screen.getByRole("heading", { name: "График цены" })).toBeVisible();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it("keeps successful sections visible when company data is initially missing", async () => {
const { requests } = setup({ failCompany: true });
@@ -404,39 +404,8 @@ describe("stock page", () => {
const previousRequests = requests.length;
expect(screen.getByText("Зачисление дивидендов")).toBeVisible();
expect(requests).toHaveLength(previousRequests);
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
});
it(
"retries only the failed company section and recovers it in place",
{ timeout: 10_000 },
async () => {
const failing = { value: true };
const { requests } = setup({ failCompanyAfter: failing });
await screen.findByText("Зачисление дивидендов");
// Automatic read retries wait 1s + 2s before the failure is final.
const retry = await screen.findByRole(
"button",
{ name: "Повторить" },
{ timeout: 6000 },
);
expect(screen.getByRole("heading", { name: "График цены" })).toBeVisible();
expect(screen.getAllByRole("button", { name: "Повторить" })).toHaveLength(1);
const before = requests.length;
const companyBefore = requests.filter(url => url.pathname.endsWith("/company")).length;
failing.value = false;
fireEvent.click(retry);
await waitFor(() =>
expect(screen.queryByRole("button", { name: "Повторить" }))
.not.toBeInTheDocument());
expect(requests.filter(url => url.pathname.endsWith("/company")))
.toHaveLength(companyBefore + 1);
expect(requests.length - before).toBe(1);
expect(screen.getByText("Описание компании")).toBeVisible();
},
);
it("sends instrument-filtered continuation, restores it on returning to the filter and changes chart period", async () => {
const { requests } = setup();
await screen.findByText("Зачисление дивидендов");
@@ -490,7 +459,7 @@ describe("stock page", () => {
fireEvent.click(screen.getByRole("button", { name: "Далее" }));
controls.recoverOperations();
expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
expect(screen.getByRole("heading", { name: "История операций" })).toBeVisible();
expect(screen.getByRole("heading", { name: "Моя история событий" })).toBeVisible();
},
);
it("keeps the last quote without manual refresh", async () => {
+52 -40
View File
@@ -6,7 +6,10 @@ import { createQueryWrapper } from "@/test/query";
import { resource } from "@/test/resource";
import { server } from "@/test/server";
import { useAuthenticatedQuery } from "./authenticated-query";
import {
useAuthenticatedQueries,
useAuthenticatedQuery,
} from "./authenticated-query";
import { apiQueryClient, configureAuthClient } from "./client";
const useSingleQuery = () =>
@@ -14,49 +17,58 @@ const useSingleQuery = () =>
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"),
);
const useMultipleQueries = () =>
useAuthenticatedQueries([
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"),
])[0];
describe("useAuthenticatedQuery", () => {
it("keeps protected queries idle without a session and loads after session configuration", async () => {
const requests = vi.fn();
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requests();
it.each(["single", "multiple"])(
"keeps %s protected queries idle without a session and loads after session configuration",
async (mode) => {
const requests = vi.fn();
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requests();
return HttpResponse.json(
resource([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
type: "BROKERAGE",
},
]),
);
}),
);
return HttpResponse.json(
resource([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
type: "BROKERAGE",
},
]),
);
}),
);
const { result } = renderHook(useSingleQuery, {
wrapper: createQueryWrapper().wrapper,
});
const { result } = renderHook(
mode === "single" ? useSingleQuery : useMultipleQueries,
{ wrapper: createQueryWrapper().wrapper },
);
await new Promise(resolve => setTimeout(resolve, 0));
expect(requests).not.toHaveBeenCalled();
expect(result.current?.fetchStatus).toBe("idle");
await new Promise(resolve => setTimeout(resolve, 0));
expect(requests).not.toHaveBeenCalled();
expect(result.current?.fetchStatus).toBe("idle");
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
configureAuthClient({
accessToken: () => "token",
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
await waitFor(() => expect(result.current?.isSuccess).toBe(true));
expect(requests).toHaveBeenCalledOnce();
expect(result.current?.data?.data).toEqual([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
type: "BROKERAGE",
},
]);
});
await waitFor(() => expect(result.current?.isSuccess).toBe(true));
expect(requests).toHaveBeenCalledOnce();
expect(result.current?.data?.data).toEqual([
{
id: "account-1",
name: "Основной",
openedOn: "2024-08-13",
type: "BROKERAGE",
},
]);
},
);
});
+21 -1
View File
@@ -1,5 +1,6 @@
import {
type QueryKey,
useQueries,
useQuery,
type UseQueryOptions,
type UseQueryResult,
@@ -11,6 +12,25 @@ import {
subscribeAuthenticatedSession,
} from "./client";
function useAuthenticatedQueries<TData, TError, TQueryKey extends QueryKey>(
queries: UseQueryOptions<TData, TError, TData, TQueryKey>[],
) {
const hasSession = useHasAuthenticatedSession();
return useQueries({
queries: queries.map(
(options): UseQueryOptions<TData, TError, TData, TQueryKey> => ({
...options,
enabled: query =>
hasSession
&& (typeof options.enabled === "function"
? options.enabled(query)
: (options.enabled ?? true)),
}),
),
});
}
function useAuthenticatedQuery<
TQueryFunctionData = unknown,
TError = Error,
@@ -38,4 +58,4 @@ function useHasAuthenticatedSession() {
);
}
export { useAuthenticatedQuery };
export { useAuthenticatedQueries, useAuthenticatedQuery };
+35 -35
View File
@@ -3,12 +3,7 @@ import createQueryClient from "openapi-react-query";
import type { paths } from "./generated/schema";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details";
const HTTP_UNAUTHORIZED = 401;
const HTTP_REQUEST_TIMEOUT = 408;
@@ -170,8 +165,12 @@ function isNetworkFailure(error: unknown): boolean {
}
function isPermanentCode(code?: string): boolean {
return isBrokerageAccessLoss(code)
|| isApiErrorCode(code, ApiErrorCode.Unauthorized);
return [
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
ApiErrorCode.Unauthorized,
].some(permanent => isApiErrorCode(code, permanent));
}
function isTransientReadFailure(
@@ -208,50 +207,51 @@ function parseJson(body: string): unknown {
}
async function readAttempt(request: Request): Promise<ReadAttempt> {
// Manual timeout (not AbortSignal.timeout) so fake-timer tests can advance it.
const timeout = new AbortController();
const timer = setTimeout(() => timeout.abort(), GET_DEADLINE_MS);
const signal = AbortSignal.any([request.signal, timeout.signal]);
const controller = new AbortController();
const failure: { reason?: "abort" | "timeout" } = {};
const { promise: deadline, reject: rejectDeadline }
= Promise.withResolvers<never>();
const timeout = setTimeout(() => {
failure.reason = "timeout";
controller.abort();
rejectDeadline(abortError());
}, GET_DEADLINE_MS);
const abort = () => {
failure.reason = "abort";
controller.abort();
rejectDeadline(abortError());
};
request.signal.addEventListener("abort", abort, { once: true });
const timedRequest = new Request(request, { signal: controller.signal });
try {
// MSW keeps a stalled body readable after abort, so keep the race.
const response = await Promise.race([
fetch(new Request(request, { signal })),
rejectOnAbort(signal),
]);
const body = await Promise.race([response.text(), rejectOnAbort(signal)]);
const response = await Promise.race([fetch(timedRequest), deadline]);
const body = await Promise.race([response.text(), deadline]);
const problem = parseJson(body);
return {
problem: parseJson(body),
problem,
reason: "transient",
response: new Response(body, response),
};
}
catch (error) {
if (request.signal.aborted) return { reason: "abort" };
// Timeout or network failure: retryable.
if (timeout.signal.aborted || isNetworkFailure(error))
if (failure.reason === "abort") return { reason: "abort" };
if (failure.reason === "timeout" || isNetworkFailure(error))
return { reason: "transient" };
throw error;
}
finally {
clearTimeout(timer);
clearTimeout(timeout);
request.signal.removeEventListener("abort", abort);
}
}
function rejectOnAbort(signal: AbortSignal): Promise<never> {
return new Promise((_resolve, reject) => {
// The signal is either already aborted or one of two parents firing once.
signal.addEventListener(
"abort",
() => reject(abortError()),
{ once: true },
);
});
}
function retryAfterMs(response: Response): number | undefined {
const header = response.headers.get("Retry-After");
if (!header) return undefined;
+24 -80
View File
@@ -775,77 +775,6 @@ export interface components {
*/
password: string;
};
RubMoneyInputDto: {
/** @enum {string} */
currency: "RUB";
value: string;
};
CreateExpenseOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "expense";
/** Format: uuid */
categoryId?: string;
};
CreateTopupOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "topup";
};
CreateTransferOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "transfer";
/** Format: uuid */
targetCardId: string;
};
CreateRefundOperationDto: {
/** Format: uuid */
id: string;
/** Format: uuid */
cardId: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
/**
* @description discriminator enum property added by openapi-typescript
* @enum {string}
*/
kind: "refund";
/** Format: uuid */
originalExpenseId: string;
};
MoneyDto: {
currency: string;
value: string;
@@ -863,6 +792,11 @@ export interface components {
archivedAt: string | null;
version: number;
};
RubMoneyInputDto: {
/** @enum {string} */
currency: "RUB";
value: string;
};
CreateBankCardDto: {
/** Format: uuid */
id: string;
@@ -907,6 +841,24 @@ export interface components {
net: components["schemas"]["MoneyDto"];
categories: components["schemas"]["BankSummaryCategoryDto"][];
};
CreateBankOperationDto: {
/** Format: uuid */
id: string;
/** @enum {string} */
kind: "expense" | "topup" | "transfer" | "refund";
/** Format: uuid */
cardId: string;
/** Format: uuid */
targetCardId?: string;
/** Format: uuid */
categoryId?: string;
/** Format: uuid */
originalExpenseId?: string;
amount: components["schemas"]["RubMoneyInputDto"];
/** Format: date */
date: string;
description?: string;
};
BankOperationDto: {
id: string;
/** @enum {string} */
@@ -1280,12 +1232,6 @@ export interface components {
data: components["schemas"]["IncomeAnalyticsDto"] | null;
meta: components["schemas"]["IncomeAnalyticsMetaDto"];
};
UpcomingEventsWindowDto: {
/** Format: date */
from: string;
/** Format: date */
to: string;
};
UpcomingEventDto: {
account?: components["schemas"]["AccountReferenceDto"];
/** @enum {string} */
@@ -1306,8 +1252,6 @@ export interface components {
accountId: string;
/** Format: date-time */
calculatedAt: string;
/** @description Inclusive UTC window the saved forecast was calculated for. Unchanged by the requested from/to filter. */
window: components["schemas"]["UpcomingEventsWindowDto"];
events: components["schemas"]["UpcomingEventDto"][];
incomeTotalsByCurrency: components["schemas"]["MoneyDto"][];
};
@@ -2646,7 +2590,7 @@ export interface operations {
};
requestBody: {
content: {
"application/json": components["schemas"]["CreateExpenseOperationDto"] | components["schemas"]["CreateTopupOperationDto"] | components["schemas"]["CreateTransferOperationDto"] | components["schemas"]["CreateRefundOperationDto"];
"application/json": components["schemas"]["CreateBankOperationDto"];
};
};
responses: {
+1 -8
View File
@@ -7,14 +7,7 @@ export {
configureAuthClient,
} from "./client";
export type { paths } from "./generated/schema";
export {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
export { isGetUnder } from "./query-predicate";
export { isReadFailureExhausted, readRetry } from "./read-failure";
export { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details";
export {
type InvestmentResourceMeta,
+1 -13
View File
@@ -1,11 +1,6 @@
import { expect, it } from "vitest";
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details";
it("matches known codes and preserves unknown wire codes for fallback handling", () => {
expect(
@@ -21,10 +16,3 @@ it("matches known codes and preserves unknown wire codes for fallback handling",
expect(apiErrorCode(null)).toBeUndefined();
expect(apiErrorCode({})).toBeUndefined();
});
it("separates brokerage access loss from UNAUTHORIZED, temporary and unknown codes", () => {
for (const code of ["INVALID_TBANK_TOKEN", "NOT_FOUND", "TBANK_NOT_CONNECTED"])
expect(isBrokerageAccessLoss(code)).toBe(true);
for (const code of ["UNAUTHORIZED", "TBANK_UNAVAILABLE", "FUTURE_PROVIDER_ERROR", undefined])
expect(isBrokerageAccessLoss(code)).toBe(false);
});
+1 -11
View File
@@ -41,14 +41,4 @@ function isApiErrorCode(
return value === expected;
}
// Confirmed loss of access to the brokerage data. UNAUTHORIZED is a session
// failure with its own refresh/sign-out path, so it is deliberately excluded.
function isBrokerageAccessLoss(code?: string): boolean {
return [
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
].some(loss => isApiErrorCode(code, loss));
}
export { ApiErrorCode, apiErrorCode, isApiErrorCode, isBrokerageAccessLoss };
export { ApiErrorCode, apiErrorCode, isApiErrorCode };
-26
View File
@@ -1,26 +0,0 @@
import { describe, expect, it } from "vitest";
import { isGetUnder } from "./query-predicate";
describe("isGetUnder", () => {
it("matches the root itself and nested paths for get queries only", () => {
const predicate = isGetUnder(["/api/v1/bank-cards"]);
expect(predicate(["get", "/api/v1/bank-cards"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cards/{id}"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cards"])).toBe(true);
expect(predicate(["get", "/api/v1/bank-cardsx"])).toBe(false);
expect(predicate(["post", "/api/v1/bank-cards"])).toBe(false);
expect(predicate(["get", "/api/v1/other"])).toBe(false);
});
it("checks every root and tolerates init and non-string parts", () => {
const predicate = isGetUnder(["/api/v1/stocks", "/api/v1/bonds"]);
expect(predicate(["get", "/api/v1/stocks/{uid}/quote", { params: {} }]))
.toBe(true);
expect(predicate(["get", "/api/v1/bonds"])).toBe(true);
expect(predicate([undefined, "/api/v1/stocks"])).toBe(false);
expect(predicate(["get", undefined])).toBe(false);
});
});
-18
View File
@@ -1,18 +0,0 @@
import type { QueryKey } from "@tanstack/react-query";
// openapi-react-query shapes query keys as [method, path, init].
function isGetUnder(roots: readonly string[]) {
const predicate = (queryKey: QueryKey) => {
const [method, path] = queryKey as readonly [unknown, unknown];
return (
method === "get"
&& typeof path === "string"
&& roots.some(root => path === root || path.startsWith(`${root}/`))
);
};
return predicate;
}
export { isGetUnder };
-80
View File
@@ -1,80 +0,0 @@
import { describe, expect, it, vi } from "vitest";
import { isReadFailureExhausted, readRetry } from "./read-failure";
const transient = { code: "TBANK_UNAVAILABLE", status: 503 };
const settled = { isError: true, isFetching: false };
describe("isReadFailureExhausted", () => {
it("is true for a settled transient failure, even without a code", () => {
expect(isReadFailureExhausted({ ...settled, error: transient })).toBe(true);
expect(
isReadFailureExhausted({
...settled,
error: new TypeError("Network request failed"),
}),
).toBe(true);
});
it("stays true while a manual retry runs and false without a failure", () => {
expect(
isReadFailureExhausted({
error: transient,
isError: true,
isFetching: true,
}),
).toBe(true);
expect(
isReadFailureExhausted({
error: null,
isError: false,
isFetching: false,
}),
).toBe(false);
});
it.each([
"INVALID_TBANK_TOKEN",
"NOT_FOUND",
"TBANK_NOT_CONNECTED",
"UNAUTHORIZED",
])("is false for %s, which has its own action", (code) => {
expect(isReadFailureExhausted({ ...settled, error: { code } })).toBe(false);
});
});
describe("readRetry", () => {
it("refetches only the failed reads and reports a running retry", () => {
const failedRefetch = vi.fn(() => Promise.resolve());
const healthyRefetch = vi.fn(() => Promise.resolve());
const retry = readRetry([
{ ...settled, error: transient, refetch: failedRefetch },
{
error: null,
isError: false,
isFetching: true,
refetch: healthyRefetch,
},
{ ...settled, error: { code: "NOT_FOUND" }, refetch: healthyRefetch },
]);
expect(retry).toMatchObject({ exhausted: true, retrying: false });
retry.onRetry();
expect(failedRefetch).toHaveBeenCalledOnce();
expect(healthyRefetch).not.toHaveBeenCalled();
});
it("is not exhausted while every read is healthy", () => {
expect(
readRetry([
{
error: null,
isError: false,
isFetching: false,
refetch: vi.fn(() => Promise.resolve()),
},
]).exhausted,
).toBe(false);
});
});
-37
View File
@@ -1,37 +0,0 @@
import {
ApiErrorCode,
apiErrorCode,
isApiErrorCode,
isBrokerageAccessLoss,
} from "./problem-details";
type ReadState = { error: unknown; isError: boolean; isFetching: boolean };
type RetryableRead = ReadState & { refetch: () => Promise<unknown> };
// Automatic retries run inside one fetchAppRead call and Query's own retry is
// off, so a query in the error state has exhausted them. The state stays
// "error" while a manual retry runs, which keeps the warning in place. Access
// loss and a lost session keep their own actions and never offer a plain retry.
function isReadFailureExhausted(state: ReadState): boolean {
if (!state.isError) return false;
const code = apiErrorCode(state.error);
return !isBrokerageAccessLoss(code)
&& !isApiErrorCode(code, ApiErrorCode.Unauthorized);
}
// Retry repeats only the GET of the failed queries, never a source sync.
function readRetry(reads: RetryableRead[]) {
const failed = reads.filter(read => isReadFailureExhausted(read));
return {
exhausted: failed.length > 0,
onRetry: () => {
void Promise.allSettled(failed.map(read => read.refetch()));
},
retrying: failed.some(read => read.isFetching),
};
}
export { isReadFailureExhausted, readRetry };
+73
View File
@@ -37,6 +37,38 @@ function auth() {
}
describe("persistent resource query lifecycle", () => {
it("observes once into the canonical cache without another import", async () => {
auth();
const modes: (null | string)[] = [];
let observations = 0;
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/portfolio",
({ request }) => {
const mode = new URL(request.url).searchParams.get("sync");
modes.push(mode);
if (mode) observations += 1;
return HttpResponse.json(
resource(snapshot, {
dataRevision: observations > 0 ? "new" : "old",
}),
);
},
),
);
const { queryClient, wrapper } = createQueryWrapper();
const { result } = renderHook(() => usePrivateResource("a"), { wrapper });
await waitFor(() => expect(result.current.isSuccess).toBe(true));
await act(() => result.current.observe());
await waitFor(() => expect(result.current.meta?.dataRevision).toBe("new"));
expect(modes).toEqual([null, "observe"]);
expect(queryClient.getQueryCache().getAll()).toHaveLength(1);
expect(
queryClient.getQueryData(resourceOptions("a").queryKey),
).toMatchObject({ data: snapshot, meta: { dataRevision: "new" } });
});
it("keeps successful HTTP state distinct from missing or failed source data", async () => {
auth();
server.use(
@@ -104,6 +136,47 @@ describe("persistent resource query lifecycle", () => {
expect(result.current.isSuccess).toBe(true);
expect(result.current.isPending).toBe(false);
});
it("keeps the observed snapshot when an older query finishes later", async () => {
auth();
const { promise: blocked, resolve: release }
= Promise.withResolvers<void>();
let isStarted = false;
server.use(
http.get(
"*/api/v1/brokerage-accounts/:accountId/portfolio",
async ({ request }) => {
if (!new URL(request.url).searchParams.has("sync")) {
isStarted = true;
await blocked;
return HttpResponse.json(resource({ ...snapshot, isStale: true }));
}
return HttpResponse.json(resource(snapshot));
},
),
);
const { result } = renderHook(() => usePrivateResource("a"), {
wrapper: createQueryWrapper().wrapper,
});
await waitFor(() => expect(isStarted).toBe(true));
// Capture the observation promise before releasing the old handler; the
// final assertion must follow its settlement, not the handler release.
let observation: Promise<unknown> = Promise.resolve();
await act(async () => {
observation = result.current.observe() ?? Promise.resolve();
await observation;
});
await act(async () => {
release();
await observation;
});
expect(result.current.data).toEqual(snapshot);
});
it("clears private snapshots on confirmed access loss and fences another pending success", async () => {
auth();
let isDenied = false;
+65 -6
View File
@@ -1,5 +1,6 @@
import {
type QueryClient,
type QueryFunctionContext,
useQueryClient,
type UseQueryOptions,
} from "@tanstack/react-query";
@@ -8,7 +9,8 @@ import { useEffect } from "react";
import type { components, paths } from "./generated/schema";
import { useAuthenticatedQuery } from "./authenticated-query";
import { apiErrorCode, isBrokerageAccessLoss } from "./problem-details";
import { getAuthenticatedSessionSnapshot } from "./client";
import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "./problem-details";
type InvestmentResourceMeta = components["schemas"]["InvestmentResourceMetaDto"];
@@ -29,7 +31,7 @@ type ResourcePath = {
type ResourceQueryKey = readonly [
"get",
ResourcePath,
{ params?: { path?: object; query?: object } }?,
{ params?: { path?: object; query?: { sync?: "observe" } } }?,
];
function invalidateResourceAccess(
@@ -37,7 +39,15 @@ function invalidateResourceAccess(
group: string,
error: unknown,
) {
if (!isBrokerageAccessLoss(apiErrorCode(error))) return;
const errorCode = apiErrorCode(error);
if (
[
ApiErrorCode.InvalidTbankToken,
ApiErrorCode.NotFound,
ApiErrorCode.TbankNotConnected,
].every(code => !isApiErrorCode(errorCode, code))
)
return;
const affected = {
predicate: (cached: { meta?: Record<string, unknown> }) =>
@@ -55,6 +65,22 @@ function invalidateResourceAccess(
});
}
// Keep endpoint and parameters intact. The generated queryFn accepts the
// optional sync mode even for a cache key originally created without init.
function observationKey<K extends readonly unknown[]>(key: K): K {
const [method, path, init] = key as unknown as [
string,
string,
{ params?: { path?: object; query?: object } }?,
];
return [method, path, {
...init,
params: { ...init?.params, query: { ...init?.params?.query, sync: "observe" } },
}] as unknown as K;
}
// Observation changes transport mode, never the generated cache identity.
function useResourceQuery<
T extends Resource,
E = unknown,
@@ -74,17 +100,50 @@ function useResourceQuery<
if (group) invalidateResourceAccess(client, group, query.error);
}, [client, group, query.error]);
const observe = async () => {
const queryFunction = options.queryFn;
if (
typeof queryFunction !== "function"
|| !query.isEnabled
|| !getAuthenticatedSessionSnapshot()
)
return;
// Cancellation is synchronous; start the replacement in the same boundary.
void client.cancelQueries({ exact: true, queryKey: options.queryKey });
return client.query({
...options,
queryFn: async (context: QueryFunctionContext<K>) => {
const queryKey = observationKey(context.queryKey);
return queryFunction({ ...context, queryKey });
},
retry: false,
// Keep the cache envelope independent of observer projection.
select: undefined,
staleTime: 0,
});
};
const data: T["data"] | undefined = query.data?.data;
const meta: T["meta"] | undefined = query.data?.meta;
// Project resource fields; refetch still returns the transport envelope.
// queryKey is kept for screen-sync cache bookkeeping.
return {
// eslint-disable-next-line @tanstack/query/no-rest-destructuring -- Single projection point; consumers already depend on the whole query state.
...query,
data: data ?? undefined,
error: query.error,
fetchStatus: query.fetchStatus,
isEnabled: query.isEnabled,
isError: query.isError,
isFetching: query.isFetching,
isLoading: query.isLoading,
isPending: query.isPending,
isSuccess: query.isSuccess,
meta,
observe,
queryKey: options.queryKey,
refetch: query.refetch,
status: query.status,
sync: query.data && "sync" in query.data ? query.data.sync : undefined,
};
}
+72 -230
View File
@@ -1053,29 +1053,7 @@
"content": {
"application/json": {
"schema": {
"oneOf": [
{
"$ref": "#/components/schemas/CreateExpenseOperationDto"
},
{
"$ref": "#/components/schemas/CreateTopupOperationDto"
},
{
"$ref": "#/components/schemas/CreateTransferOperationDto"
},
{
"$ref": "#/components/schemas/CreateRefundOperationDto"
}
],
"discriminator": {
"propertyName": "kind",
"mapping": {
"expense": "#/components/schemas/CreateExpenseOperationDto",
"topup": "#/components/schemas/CreateTopupOperationDto",
"transfer": "#/components/schemas/CreateTransferOperationDto",
"refund": "#/components/schemas/CreateRefundOperationDto"
}
}
"$ref": "#/components/schemas/CreateBankOperationDto"
}
}
}
@@ -5362,187 +5340,6 @@
"password"
]
},
"RubMoneyInputDto": {
"type": "object",
"properties": {
"currency": {
"type": "string",
"enum": [
"RUB"
]
},
"value": {
"type": "string",
"pattern": "^-?[0-9]+(\\.[0-9]{1,2})?$"
}
},
"required": [
"currency",
"value"
]
},
"CreateExpenseOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"expense"
]
},
"categoryId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind"
]
},
"CreateTopupOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"topup"
]
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind"
]
},
"CreateTransferOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"transfer"
]
},
"targetCardId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind",
"targetCardId"
]
},
"CreateRefundOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"cardId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
},
"kind": {
"type": "string",
"enum": [
"refund"
]
},
"originalExpenseId": {
"type": "string",
"format": "uuid"
}
},
"required": [
"id",
"cardId",
"amount",
"date",
"kind",
"originalExpenseId"
]
},
"MoneyDto": {
"type": "object",
"properties": {
@@ -5614,6 +5411,25 @@
"version"
]
},
"RubMoneyInputDto": {
"type": "object",
"properties": {
"currency": {
"type": "string",
"enum": [
"RUB"
]
},
"value": {
"type": "string",
"pattern": "^-?[0-9]+(\\.[0-9]{1,2})?$"
}
},
"required": [
"currency",
"value"
]
},
"CreateBankCardDto": {
"type": "object",
"properties": {
@@ -5783,6 +5599,58 @@
"categories"
]
},
"CreateBankOperationDto": {
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "uuid"
},
"kind": {
"type": "string",
"enum": [
"expense",
"topup",
"transfer",
"refund"
]
},
"cardId": {
"type": "string",
"format": "uuid"
},
"targetCardId": {
"type": "string",
"format": "uuid"
},
"categoryId": {
"type": "string",
"format": "uuid"
},
"originalExpenseId": {
"type": "string",
"format": "uuid"
},
"amount": {
"$ref": "#/components/schemas/RubMoneyInputDto"
},
"date": {
"type": "string",
"format": "date"
},
"description": {
"type": "string",
"maxLength": 500
}
},
"required": [
"id",
"kind",
"cardId",
"amount",
"date"
]
},
"BankOperationDto": {
"type": "object",
"properties": {
@@ -7375,23 +7243,6 @@
"meta"
]
},
"UpcomingEventsWindowDto": {
"type": "object",
"properties": {
"from": {
"type": "string",
"format": "date"
},
"to": {
"type": "string",
"format": "date"
}
},
"required": [
"from",
"to"
]
},
"UpcomingEventDto": {
"type": "object",
"properties": {
@@ -7473,14 +7324,6 @@
"type": "string",
"format": "date-time"
},
"window": {
"description": "Inclusive UTC window the saved forecast was calculated for. Unchanged by the requested from/to filter.",
"allOf": [
{
"$ref": "#/components/schemas/UpcomingEventsWindowDto"
}
]
},
"events": {
"type": "array",
"items": {
@@ -7497,7 +7340,6 @@
"required": [
"accountId",
"calculatedAt",
"window",
"events",
"incomeTotalsByCurrency"
]
+26 -29
View File
@@ -51,6 +51,7 @@ const ru = {
incomplete: "{{category}}: доля неизвестна",
label: "Структура в {{currency}}: {{value}}",
},
subtitle: "Ваши инвестиции по счетам",
summaryEmpty: "Нет текущих сумм",
summaryExcluded_few:
"Ещё {{count}} счёта не включены: нет актуального портфеля",
@@ -274,7 +275,7 @@ const ru = {
COUPON_TYPE_VARIABLE: "Переменный",
},
couponWindow:
"Календарь выпуска с {{from}} по {{to}}. Полученные выплаты показаны в истории операций.",
"Календарь выпуска с {{from}} по {{to}}. Личные зачисления показаны в истории событий.",
couponYield: "Текущая купонная доходность, годовых",
couponYieldNote:
"Купонная доходность = ближайший купон × 365 / дней в купонном периоде / цена без НКД × 100 %. Это годовая оценка при сохранении размера купона и номинала, без налогов, комиссий и реинвестирования; для плавающего или переменного купона будущий доход изменится.",
@@ -343,10 +344,10 @@ const ru = {
breadcrumbs: {
accountFallback: "Счет",
accounts: "Брокерские счета",
events: "Предстоящие события",
events: "Будущие события",
income: "Пассивный доход",
label: "Хлебные крошки",
operations: "История операций",
operations: "Операции",
settings: "Настройки",
},
entryGroup: {
@@ -356,20 +357,19 @@ const ru = {
dateKind: { event: "Дата события", registry: "Дата реестра" },
emptyText:
"Доступные источники не сообщили о купонах, дивидендах, погашениях или офертах в этом периоде.",
emptyTitle: "На выбранный период предстоящих событий не найдено",
errorText: "Попробуйте загрузить предстоящие события ещё раз.",
errorTitle: "Не удалось загрузить предстоящие события",
forecastWindow: "Прогноз от {{date}} на {{from}} – {{to}}",
emptyTitle: "За выбранный период событий не найдено",
errorText: "Попробуйте запросить прогноз еще раз.",
errorTitle: "Не удалось загрузить будущие события",
hint: "Прогноз рассчитан по текущей позиции до налогов. Покрытие зависит от доступных данных MOEX.",
noAmount: "Сумма неизвестна",
open: "Открыть предстоящие события",
open: "Открыть будущие события",
projectedAmount: "Ожидаемая сумма",
recentEmpty: "На ближайшие 30 дней предстоящих событий не найдено.",
recentError: "Не удалось загрузить предстоящие события.",
recentLoading: "Загрузка предстоящих событий",
recentTitle: "Предстоящие события",
recentEmpty: "На ближайшие 30 дней событий не найдено.",
recentError: "Не удалось загрузить будущие события.",
recentLoading: "Загрузка будущих событий",
recentTitle: "Будущие события",
retry: "Повторить",
title: "Предстоящие события",
title: "Будущие события",
type: {
coupon: "Купон",
dividend: "Дивиденд",
@@ -421,9 +421,7 @@ const ru = {
},
history: "История догружается",
partial: "Период загружен не полностью",
readFailed: "Не удалось обновить данные",
refresh: "Обновить",
retry: "Повторить",
sourceTime: "Данные на {{date}}",
stale: "Данные требуют обновления",
syncFailed:
@@ -443,7 +441,6 @@ const ru = {
transfer: "Перевод",
},
clearPeriod: "Очистить период",
couponPayment: "Выплата купонов {{instrument}}",
emptyText: "Измените период или фильтры.",
emptyTitle: "Операций нет",
entryLabel: {
@@ -452,14 +449,14 @@ const ru = {
dividend: "Дивиденд",
},
},
errorText: "Попробуйте загрузить историю операций ещё раз.",
errorTitle: "Не удалось загрузить историю операций",
errorText: "Попробуйте запросить операции еще раз.",
errorTitle: "Не удалось загрузить журнал",
from: "С",
next: "Далее",
noInstrument: "Без инструмента",
noMoney: "Без движения денег",
occurredAt: "Исполнено {{date}}",
open: "Открыть историю операций",
open: "Открыть журнал",
operationType: {
buy: "Покупка",
coupon: "Купон",
@@ -476,13 +473,13 @@ const ru = {
previous: "Назад",
price: "Цена: {{value}}",
quantity: "{{value}} шт.",
recentEmpty: "Последних операций пока нет.",
recentError: "Не удалось загрузить последние операции.",
recentLoading: "Загрузка последних операций",
recentTitle: "Последние операции",
recentEmpty: "Последних событий пока нет.",
recentError: "Не удалось загрузить последние события.",
recentLoading: "Загрузка последних событий",
recentTitle: "Последние события",
reset: "Сбросить",
retry: "Повторить",
title: "История операций",
title: "Журнал операций",
to: "По",
},
navigation: {
@@ -583,9 +580,9 @@ const ru = {
},
tabs: {
cash: "Деньги",
events: "Предстоящие события",
events: "События",
income: "Доход",
operations: "История операций",
operations: "Операции",
positions: "Позиции",
},
title: "Портфель",
@@ -638,10 +635,10 @@ const ru = {
dividendNote:
"Личная сумма — оценка по текущему количеству, не гарантия выплаты. Налоги не сопоставлены; дата выплаты компании может отличаться от дня зачисления на ваш счёт.",
dividendWindow:
"События компании с {{from}} по {{to}}. Полученные выплаты показаны отдельно в истории операций.",
"События компании с {{from}} по {{to}}. Личные зачисления показаны отдельно в истории событий.",
estimateUnavailable:
"Данные позиции не удалось обновить. Личная оценка недоступна или рассчитана по сохранённой позиции.",
eventFilter: "Фильтр операций",
eventFilter: "Фильтр событий",
eventPrice: "Цена: {{value}}",
eventQuantity: "{{value}} шт.",
exchanges: {
@@ -657,7 +654,7 @@ const ru = {
trades: "Сделки",
},
forming: "Формируется",
history: "История операций",
history: "Моя история событий",
historyNote:
"Операции по этой акции на доступных открытых счетах, включая периоды до текущего года. Дата сделки — дата операции брокера; количество — исполненная часть. История закрытых счетов не включена.",
incomplete: "Последняя свеча ещё формируется: её цена может измениться.",
+1 -1
View File
@@ -33,7 +33,7 @@ describe("shared display helpers", () => {
"-1 234 567,89 ₽",
);
expect(formatMoney({ currency: "RUB", value: "10" })).toBe("10 ₽");
expect(formatMoney({ currency: "USD", value: "0.5" })).toBe("0,5 $");
expect(formatMoney({ currency: "USD", value: "0.5" })).toBe("0,5 USD");
expect(formatMoney({ currency: "RUB", value: "0001234.50" })).toBe(
"0 001 234,50 ₽",
);
+1 -4
View File
@@ -86,10 +86,7 @@ function formatMoney(
? `${integerPart}.${normalizedFraction}`
: integerPart;
let currency = money.currency;
if (currency === "RUB") currency = "₽";
else if (currency === "USD") currency = "$";
const currency = money.currency === "RUB" ? "₽" : money.currency;
const formatted = `${formatDecimal(decimal)} ${currency}`;
if (!withSign) return formatted;
@@ -4,40 +4,6 @@
background: var(--wl-color-subtle);
}
.flat {
background: var(--wl-color-surface);
}
.flat > :first-child {
border: 0;
background: transparent;
}
.flat .accounts {
padding-bottom: var(--mantine-spacing-md);
}
.flat .accountRow {
padding-block: var(--mantine-spacing-md);
}
.flat .accountRow:last-child {
padding-bottom: 0;
}
.flat .accountRow > :first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.positive {
color: var(--wl-color-positive);
}
.negative {
color: var(--wl-color-negative);
}
.accounts {
padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm);
list-style: none;
@@ -72,12 +38,4 @@
.accountRow {
align-items: flex-start;
}
.flat .accountRow {
flex-wrap: wrap;
}
.flat .accountValue {
white-space: normal;
}
}
+14 -23
View File
@@ -9,15 +9,11 @@ import classes from "./EntryGroup.module.css";
type AccountRowProps = {
accountName: string;
tone?: "negative"
| "neutral"
| "positive";
value: string;
valueLabel: string;
};
type EntryGroupProps = PropsWithChildren<{
flat?: boolean;
header: ReactNode;
label: string;
}>;
@@ -29,14 +25,13 @@ type EntryGroupTotalProps = {
const AccountRow: FC<AccountRowProps> = (props) => {
const accessibleName = `${props.accountName}, ${props.value}`;
const valueClass = props.tone ? classes[props.tone] : undefined;
return (
<li aria-label={accessibleName} className={classes.accountRow}>
<Text>{props.accountName}</Text>
<Stack className={classes.accountValue} gap={2}>
<Text className={valueClass} fw={700}>{props.value}</Text>
<Text fw={700}>{props.value}</Text>
<Text c="dimmed" size="xs">{props.valueLabel}</Text>
</Stack>
@@ -58,24 +53,20 @@ const AccountCardRow: FC<AccountRowProps> = props => (
</li>
);
const EntryGroup: FC<EntryGroupProps> = (props) => {
const groupClass = props.flat ? `${classes.group} ${classes.flat}` : classes.group;
const EntryGroup: FC<EntryGroupProps> = props => (
<Paper className={classes.group} component="li" withBorder>
{props.header}
return (
<Paper className={groupClass} component="li" withBorder>
{props.header}
<Stack
aria-label={props.label}
className={classes.accounts}
component="ul"
gap={0}
>
{props.children}
</Stack>
</Paper>
);
};
<Stack
aria-label={props.label}
className={classes.accounts}
component="ul"
gap={0}
>
{props.children}
</Stack>
</Paper>
);
const EntryGroupTotal: FC<EntryGroupTotalProps> = (props) => {
const { t } = useTranslation();
@@ -1,37 +0,0 @@
import { MantineProvider } from "@mantine/core";
import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { ReadRetry } from "./ReadRetry";
function renderRetry(props: Parameters<typeof ReadRetry>[0]) {
return render(
<MantineProvider>
<ReadRetry {...props} />
</MantineProvider>,
);
}
describe("ReadRetry", () => {
it("renders nothing until the automatic retries are exhausted", () => {
renderRetry({ exhausted: false, onRetry: vi.fn() });
expect(screen.queryByRole("status")).not.toBeInTheDocument();
expect(screen.queryByRole("button")).not.toBeInTheDocument();
});
it("announces the failure politely and retries on activation", () => {
const onRetry = vi.fn();
renderRetry({ exhausted: true, onRetry });
expect(screen.getByRole("status")).toHaveTextContent("Не удалось обновить данные");
fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
expect(onRetry).toHaveBeenCalledOnce();
});
it("disables the action while the retry runs", () => {
renderRetry({ exhausted: true, onRetry: vi.fn(), retrying: true });
expect(screen.getByRole("button", { name: "Повторить" })).toBeDisabled();
});
});
-42
View File
@@ -1,42 +0,0 @@
import type { FC } from "react";
import { Alert, Button, Group, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
// Shown only after the automatic read retries are exhausted. The action repeats
// the failed GET of the affected query; it never starts a source sync.
type ReadRetryProps = {
exhausted: boolean;
onRetry: () => void;
retrying?: boolean;
};
const ReadRetryButton: FC<Pick<ReadRetryProps, "onRetry" | "retrying">> = (
props,
) => {
const { t } = useTranslation();
return (
<Button disabled={props.retrying} onClick={props.onRetry} variant="light">
{t("investment.retry")}
</Button>
);
};
const ReadRetry: FC<ReadRetryProps> = (props) => {
const { t } = useTranslation();
if (!props.exhausted) return null;
return (
<Alert aria-live="polite" color="orange" role="status">
<Group gap="sm" justify="space-between">
<Text>{t("investment.readFailed")}</Text>
<ReadRetryButton onRetry={props.onRetry} retrying={props.retrying} />
</Group>
</Alert>
);
};
export { ReadRetry, ReadRetryButton, type ReadRetryProps };

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