feat: show return, cash and structure on account cards (#114)

2026-10-27 05:29:11 +03:00
parent 0e4bbec2a7
commit 431559be0f
12 changed files with 984 additions and 431 deletions
@@ -8,11 +8,15 @@ const VISIBLE_CURRENCY_LIMIT = 2;

 type BrokerageAccountCard = {
 	account: BrokerageAccount;
-	positionCounts: null
-		| { bonds: number; stocks: number };
+	positionCounts: null | PositionCounts;
 	source?: NonNullable<InvestmentResourceMeta["dependencies"]>[number];
 	summary:
-		| { remainingCurrencyCount: number; state: "available"; totals: Money[] }
+		| {
+			portfolio: NonNullable<BrokerageAccount["portfolioSummary"]>;
+			remainingCurrencyCount: number;
+			state: "available";
+			totals: Money[];
+		}
 		| { state: "empty" }
 		| { state: "unavailable" };
 };
@@ -21,6 +25,8 @@ type Money = NonNullable<
 	BrokerageAccount["portfolioSummary"]
 >["totalsByCurrency"][number];

+type PositionCounts = { bonds: number; stocks: number; total: number };
+
 function accountTypeKey(type: BrokerageAccount["type"]) {
 	return `accounts.types.${type}` as const;
 }
@@ -48,6 +54,7 @@ function brokerageAccountCards(
 		const positionCounts = {
 			bonds: summary.bondPositionCount,
 			stocks: summary.stockPositionCount,
+			total: summary.totalPositionCount,
 		};

 		if (summary.totalsByCurrency.length === 0)
@@ -58,6 +65,7 @@ function brokerageAccountCards(
 			positionCounts,
 			source,
 			summary: {
+				portfolio: summary,
 				remainingCurrencyCount: Math.max(
 					summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT,
 					0,
@@ -1,7 +1,9 @@
 .list {
+	display: grid;
 	width: 100%;
 	margin: 0;
 	padding: 0;
+	gap: var(--mantine-spacing-sm);
 	list-style: none;
 }

@@ -9,15 +11,16 @@
 	display: grid;
 	grid-template-areas:
 		"identity balance"
-		"details balance";
+		"details balance"
+		"structure structure";
 	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
-	gap: var(--mantine-spacing-xs) var(--mantine-spacing-xl);
+	gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
 	align-items: center;
-	padding: var(--mantine-spacing-md);
+	padding: var(--mantine-spacing-lg);
 	border: 1px solid var(--wl-color-border);
-	border-left: 3px solid var(--mantine-color-blue-5);
+	border-left: 3px solid var(--wl-color-primary);
 	border-radius: var(--mantine-radius-md);
-	background: var(--mantine-color-white);
+	background: var(--wl-color-surface);
 	color: inherit;
 	text-decoration: none;
 	transition: background-color 160ms ease, border-color 160ms ease;
@@ -25,13 +28,12 @@

 .row:hover,
 .row:focus-visible {
-	border-color: var(--mantine-color-blue-3);
-	border-left-color: var(--mantine-color-blue-6);
-	background: var(--mantine-color-blue-0);
+	border-color: var(--wl-color-primary);
+	background: var(--wl-color-subtle);
 }

 .row:focus-visible {
-	outline: 2px solid var(--mantine-color-blue-6);
+	outline: 2px solid var(--wl-color-primary);
 	outline-offset: -2px;
 }

@@ -42,74 +44,101 @@

 .name {
 	margin: 0;
-	color: var(--mantine-color-blue-9);
+	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-md);
 	line-height: var(--mantine-line-height-md);
 	overflow-wrap: anywhere;
 }

 .accountType {
+	flex-shrink: 0;
 	align-self: flex-start;
 	padding: 2px var(--mantine-spacing-xs);
 	border-radius: var(--mantine-radius-sm);
-	background: var(--mantine-color-blue-0);
-	color: var(--mantine-color-blue-8);
 }

 .balance {
 	grid-area: balance;
 	min-width: 0;
-	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-	border-radius: var(--mantine-radius-sm);
-	background: var(--wl-color-subtle);
 	text-align: right;
 }

 .summary {
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
 }

 .total {
-	color: var(--mantine-color-dark-7);
+	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-lg);
-	line-height: var(--mantine-line-height-md);
-	overflow-wrap: anywhere;
+	line-height: var(--mantine-line-height-lg);
 }

-.total + .total {
-	font-weight: 500;
+.return,
+.cashValue {
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
+}
+
+.positive {
+	color: var(--wl-color-positive);
+}
+
+.negative {
+	color: var(--wl-color-negative);
+}
+
+.neutral {
+	color: var(--wl-color-muted);
+}
+
+.cash {
+	font-variant-numeric: tabular-nums lining-nums;
 }

 .details {
 	grid-area: details;
 	min-width: 0;
+	font-variant-numeric: tabular-nums lining-nums;
 }

-.positions {
-	margin: 0;
-}
-
-.positions > div {
-	display: flex;
+.structure {
+	grid-area: structure;
 	gap: var(--mantine-spacing-xs);
-	align-items: baseline;
 }

-.positions dd {
-	margin: 0;
+.structureBar {
+	display: flex;
+	width: 100%;
+	height: 6px;
+	overflow: hidden;
+	border-radius: var(--mantine-radius-xs);
+	background: var(--wl-color-subtle);
 }

-.status {
-	min-width: 0;
-	overflow-wrap: anywhere;
+.structureSection {
+	flex: none;
+	height: 100%;
+	background: var(--category-color);
 }

-@media (max-width: 48em) {
+@media (max-width: 47.9375em) {
 	.row {
-		column-gap: var(--mantine-spacing-sm);
+		grid-template-areas:
+			"identity"
+			"balance"
+			"structure"
+			"details";
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--mantine-spacing-sm);
+		padding: var(--mantine-spacing-md);
 	}

 	.balance {
-		max-width: 50vw;
+		text-align: left;
+	}
+
+	.balance > div {
+		justify-content: flex-start;
 	}
 }
@@ -2,32 +2,86 @@ import type { Meta, StoryObj } from "@storybook/react-vite";

 import { MemoryRouter } from "react-router";

+import { resource } from "@/test/resource";
+
 import type { BrokerageAccount } from "../../api/useBrokerageAccounts";

 import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";

-const syntheticAccount = {
-	id: "storybook-account",
-	name: "Учебный брокерский счёт",
-	openedOn: "2025-03-15",
-	portfolioSummary: {
-		bondPositionCount: 12,
-		stockPositionCount: 5,
-		totalsByCurrency: [
-			{ currency: "RUB", value: "125000.50" },
-			{ currency: "USD", value: "320" },
-			{ currency: "EUR", value: "210" },
-		],
+type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
+
+const rubReturn = {
+	absolute: "136900",
+	costBasis: "1103600.50",
+	currency: "RUB",
+	partial: false,
+	percent: "12.40",
+};
+
+const portfolioSummary = {
+	bondPositionCount: 12,
+	cashBalances: [
+		{ currency: "RUB", value: "82500.50" },
+		{ currency: "USD", value: "1500" },
+	],
+	fundPositionCount: 2,
+	stockPositionCount: 5,
+	structure: {
+		currencies: [{
+			categories: [
+				{ sharePercent: "55.000000", type: "STOCK", value: "682500" },
+				{ sharePercent: "25.000000", type: "BOND", value: "310500" },
+				{ sharePercent: "10.000000", type: "OTHER", value: "124200" },
+				{ sharePercent: "10.000000", type: "CASH", value: "124200" },
+			],
+			currency: "RUB",
+			hasNegativeValues: false,
+			totalValue: "1241400",
+		}],
+		unvaluedCategories: [],
 	},
-	type: "BROKERAGE",
-} satisfies BrokerageAccount;
+	totalPositionCount: 19,
+	totalsByCurrency: [{ currency: "RUB", value: "1240500.50" }],
+	unrealizedReturnByCurrency: [rubReturn],
+} satisfies PortfolioSummary;
+
+function account(
+	id: string,
+	name: string,
+	summary: null | PortfolioSummary = portfolioSummary,
+	type: BrokerageAccount["type"] = "BROKERAGE",
+): BrokerageAccount {
+	return {
+		id,
+		name,
+		openedOn: "2025-03-15",
+		portfolioSummary: summary,
+		type,
+	};
+}
+
+const negativeSummary: PortfolioSummary = {
+	...portfolioSummary,
+	unrealizedReturnByCurrency: [{
+		...rubReturn,
+		absolute: "-4200",
+		percent: "-3.05",
+	}],
+};
+
+const emptySummary: PortfolioSummary = {
+	...portfolioSummary,
+	cashBalances: [],
+	structure: { currencies: [], unvaluedCategories: [] },
+	totalPositionCount: 0,
+	totalsByCurrency: [],
+	unrealizedReturnByCurrency: [],
+};

 const meta = {
-	args: { accounts: brokerageAccountCards([syntheticAccount]) },
-	argTypes: {
-		accounts: { control: false },
-	},
+	args: { accounts: brokerageAccountCards([account("normal", "Основной ИИС")]) },
+	argTypes: { accounts: { control: false } },
 	component: BrokerageAccountList,
 	decorators: [
 		Story => (
@@ -40,7 +94,7 @@ const meta = {
 		docs: {
 			description: {
 				component:
-					"Компактные строки счетов WealthLedger: название и отличающийся тип слева, текущая стоимость с двумя знаками справа на desktop и под названием на mobile. Видимы не более двух валют и счётчик остальных, позиции и локальный статус источника. Отсутствие сводки и отсутствие сумм имеют разные сообщения. Примеры содержат вымышленные данные. Ссылки меняют только локальный маршрут MemoryRouter; страница назначения в этой истории не отображается.",
+					"Карточки счетов: стоимость и доходность по валютам, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
 			},
 		},
 	},
@@ -52,188 +106,112 @@ export default meta;

 type Story = StoryObj<typeof meta>;

-export const Available: Story = {
-	name: "Сводка по нескольким валютам",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Показываются первые две валюты и количество остальных. Суммы разных валют не складываются в общий итог.",
-			},
-		},
+export const Normal: Story = {};
+
+export const MultiCurrency: Story = {
+	args: {
+		accounts: brokerageAccountCards([account("multi", "Мультивалютный", {
+			...portfolioSummary,
+			cashBalances: [
+				{ currency: "RUB", value: "82500.50" },
+				{ currency: "USD", value: "1500" },
+			],
+			totalsByCurrency: [
+				{ currency: "RUB", value: "1240500.50" },
+				{ currency: "USD", value: "3200" },
+				{ currency: "EUR", value: "900" },
+			],
+			unrealizedReturnByCurrency: [
+				...portfolioSummary.unrealizedReturnByCurrency,
+				{
+					absolute: "20",
+					costBasis: "3180",
+					currency: "USD",
+					partial: false,
+					percent: "2.10",
+				},
+				{
+					absolute: "0",
+					costBasis: "900",
+					currency: "EUR",
+					partial: false,
+					percent: null,
+				},
+			],
+		})]),
 	},
 };

-export const Unavailable: Story
-	= {
-		args: {
-			accounts: brokerageAccountCards([
-				{ ...syntheticAccount, openedOn: null, portfolioSummary: null },
-			]),
-		},
-		name: "Сводка недоступна",
-		parameters: {
-			docs: {
-				description: {
-					story:
-						"Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.",
-				},
-			},
-		},
-	};
+export const Negative: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("negative", "Просевший портфель", negativeSummary),
+		]),
+	},
+};
+
+export const Partial: Story = {
+	args: {
+		accounts: brokerageAccountCards([account("partial", "Частичные данные", {
+			...portfolioSummary,
+			unrealizedReturnByCurrency: [{
+				...rubReturn,
+				partial: true,
+			}],
+		})]),
+	},
+};

 export const Empty: Story = {
 	args: {
 		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 0,
-					stockPositionCount: 0,
-					totalsByCurrency: [],
-				},
-			},
+			account("empty", "Новый пустой счёт", emptySummary),
 		]),
 	},
-	name: "Нет текущих сумм",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Успешно полученная пустая сводка отличается от ошибки получения данных. Карточка сохраняет название, тип счёта и переход.",
-			},
-		},
+};
+
+export const Unavailable: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("unavailable", "Счёт без сводки", null),
+		]),
+	},
+};
+
+export const Stale: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("stale", "Устаревший портфель"),
+		], resource([], {
+			dependencies: [{
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "stale-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: null,
+					problems: [],
+					startedAt: null,
+					state: "none",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/stale",
+			}],
+			freshness: "stale",
+			lastSuccessfulAt: "2026-08-14T00:00:00Z",
+		}).meta.dependencies),
 	},
 };

 export const LongName: Story = {
 	args: {
 		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				name: "Учебный индивидуальный инвестиционный счёт для долгосрочных накоплений",
-				type: "INDIVIDUAL_INVESTMENT",
-			},
-		]),
-	},
-	name: "Длинное название счёта",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Проверьте перенос длинного названия на узком экране и доступность всей карточки с клавиатуры.",
-			},
-		},
-	},
-};
-
-export const AccountGrid: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				name: "Основной",
-				portfolioSummary: {
-					bondPositionCount: 14,
-					stockPositionCount: 8,
-					totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }],
-				},
-			},
-			{
-				...syntheticAccount,
-				id: "storybook-iis",
-				name: "Долгосрочные инвестиции",
-				portfolioSummary: {
-					bondPositionCount: 6,
-					stockPositionCount: 0,
-					totalsByCurrency: [{ currency: "RUB", value: "480250" }],
-				},
-				type: "INDIVIDUAL_INVESTMENT",
-			},
-		]),
-	},
-	name: "Несколько счетов",
-};
-
-export const UnvaluedPositions: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 1,
-					stockPositionCount: 2,
-					totalsByCurrency: [],
-				},
-			},
-		]),
-	},
-	name: "Бумаги без текущей оценки",
-};
-
-export const LargeValues: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 105,
-					stockPositionCount: 21,
-					totalsByCurrency: [
-						{ currency: "RUB", value: "1234567890123456789.50" },
-						{ currency: "USD", value: "-9876543210987654321.50" },
-					],
-				},
-			},
-		]),
-	},
-	name: "Длинные суммы",
-};
-
-export const IndependentFreshness: Story
-	= {
-		args: {
-			accounts: brokerageAccountCards(
-				[
-					syntheticAccount,
-					{
-						...syntheticAccount,
-						id: "waiting",
-						name: "Новый счёт",
-						portfolioSummary: null,
-					},
-				],
-				[
-					{
-						availability: "available",
-						completeness: "complete",
-						dataRevision: "1",
-						freshness: "stale",
-						lastAttempt: {
-							finishedAt: "2026-09-24T10:31:00Z",
-							problems: [],
-							startedAt: "2026-09-24T10:30:00Z",
-							state: "failed",
-						},
-						lastSuccessfulAt: "2026-09-24T10:30:00Z",
-						resourceKey: "portfolio/storybook-account",
-					},
-					{
-						availability: "initial-loading",
-						completeness: "incomplete",
-						dataRevision: "0",
-						freshness: "unknown",
-						lastAttempt: {
-							finishedAt: null,
-							problems: [],
-							startedAt: "2026-09-24T10:30:00Z",
-							state: "running",
-						},
-						lastSuccessfulAt: null,
-						resourceKey: "portfolio/waiting",
-					},
-				],
+			account(
+				"long",
+				"Очень длинное название индивидуального инвестиционного счёта, которое должно корректно переноситься на узком экране",
+				portfolioSummary,
+				"INDIVIDUAL_INVESTMENT",
 			),
-		},
-		name: "Независимая свежесть и ошибка сводок",
-	};
+		]),
+	},
+};
@@ -5,128 +5,202 @@ import { describe, expect, it } from "vitest";

 import { resource } from "@/test/resource";

+import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
+
 import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";

-describe("BrokerageAccountList", () => {
-	it("renders account details and an account link", () => {
-		render(
-			<MantineProvider>
-				<MemoryRouter>
-					<BrokerageAccountList
-						accounts={brokerageAccountCards([
-							{
-								id: "account-1",
-								name: "Основной",
-								openedOn: "2024-08-13",
-								portfolioSummary: {
-									bondPositionCount: 12,
-									stockPositionCount: 5,
-									totalsByCurrency: [
-										{
-											currency: "RUB",
-											value: "123456789012345678901.995",
-										},
-										{ currency: "USD", value: "20" },
-										{ currency: "EUR", value: "5" },
-									],
-								},
-								type: "BROKERAGE",
+type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;

-							},
-							{
-								id: "account-2",
-								name: "Брокерский счет",
-								openedOn: null,
-								portfolioSummary: null,
-								type: "BROKERAGE",
-							},
-							{
-								id: "account-3",
-								name: "Пустой",
-								openedOn: null,
-								portfolioSummary: {
-									bondPositionCount: 0,
-									stockPositionCount: 2,
-									totalsByCurrency: [],
-								},
-								type: "BROKERAGE",
-							},
-						])}
-					/>
-				</MemoryRouter>
-			</MantineProvider>,
-		);
+const portfolioSummary = {
+	bondPositionCount: 12,
+	cashBalances: [
+		{ currency: "RUB", value: "82500.5" },
+		{ currency: "USD", value: "20" },
+	],
+	fundPositionCount: 0,
+	stockPositionCount: 5,
+	structure: {
+		currencies: [{
+			categories: [
+				{ sharePercent: "50.000000", type: "STOCK", value: "100" },
+				{ sharePercent: "30.000000", type: "BOND", value: "60" },
+				{ sharePercent: "0.000000", type: "OTHER", value: "0" },
+				{ sharePercent: "20.000000", type: "CASH", value: "40" },
+			],
+			currency: "RUB",
+			hasNegativeValues: false,
+			totalValue: "200",
+		}],
+		unvaluedCategories: [],
+	},
+	totalPositionCount: 17,
+	totalsByCurrency: [
+		{ currency: "RUB", value: "123456789012345678901.995" },
+		{ currency: "USD", value: "20" },
+		{ currency: "EUR", value: "5" },
+	],
+	unrealizedReturnByCurrency: [
+		{
+			absolute: "136900",
+			costBasis: "1000000",
+			currency: "RUB",
+			partial: true,
+			percent: "12.40",
+		},
+		{
+			absolute: "-4.2",
+			costBasis: "24.2",
+			currency: "USD",
+			partial: false,
+			percent: "-3.05",
+		},
+		{
+			absolute: "0",
+			costBasis: "5",
+			currency: "EUR",
+			partial: false,
+			percent: null,
+		},
+	],
+} satisfies PortfolioSummary;

-		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
-			"href",
-			"/accounts/account-1",
-		);
-		expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
-		expect(screen.getByText("123 456 789 012 345 678 902,00 ₽"))
-			.toBeInTheDocument();
-		expect(screen.getByText("20,00 USD")).toBeInTheDocument();
-		expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
-		expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
-		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
+type BrokerageAccountCardInput = Parameters<typeof BrokerageAccountList>[0][
+	"accounts"
+];

-		const available = within(screen.getByRole("link", { name: /Основной/ }));
-		expect(available.getAllByRole("definition")[0]).toHaveTextContent("5");
-		expect(available.getAllByRole("definition")[1]).toHaveTextContent("12");
+function account(
+	id: string,
+	name: string,
+	summary: null | PortfolioSummary,
+): BrokerageAccount {
+	return {
+		id,
+		name,
+		openedOn: null,
+		portfolioSummary: summary,
+		type: "BROKERAGE",
+	};
+}

-		const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
-		expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent("2");
-		expect(unvalued.getAllByRole("definition")[1]).toHaveTextContent("0");
-
-		const duplicatedName = within(screen.getByRole("link", {
-			name: /Сводка временно недоступна/,
-		}));
-
-		expect(duplicatedName.getAllByText("Брокерский счет")).toHaveLength(1);
-		expect(duplicatedName.queryByText("Акции")).not.toBeInTheDocument();
-	});
-});
-
-it("shows portfolio summary freshness independently for each account", () => {
-	const accounts = brokerageAccountCards(
-		["fresh", "stale"].map(
-
-			id =>
-				({
-					id,
-					name: id,
-					openedOn: null,
-					portfolioSummary: {
-						bondPositionCount: 0,
-						stockPositionCount: 1,
-						totalsByCurrency: [{ currency: "RUB", value: "10" }],
-					},
-					type: "BROKERAGE" as const,
-				}),
-		),
-		[
-			resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" })
-				.meta,
-			resource(null, { freshness: "stale", resourceKey: "portfolio/stale" })
-				.meta,
-		],
-	);
-
-	render(
+function renderList(accounts: BrokerageAccountCardInput) {
+	return render(
 		<MantineProvider>
 			<MemoryRouter>
 				<BrokerageAccountList accounts={accounts} />
 			</MemoryRouter>
 		</MantineProvider>,
 	);
-	expect(
-		within(screen.getByRole("link", { name: /stale/ })).getByText(
-			"Данные требуют обновления",
-		),
-	).toBeVisible();
-	expect(
-		within(screen.getByRole("link", { name: /fresh/ })).queryByText(
-			"Данные требуют обновления",
-		),
-	).not.toBeInTheDocument();
+}
+
+describe("BrokerageAccountList", () => {
+	it("renders returns, cash and structure with precise totals", () => {
+		const nullReturnSummary: PortfolioSummary = {
+			...portfolioSummary,
+			cashBalances: [],
+			structure: { currencies: [], unvaluedCategories: [] },
+			totalsByCurrency: [{ currency: "EUR", value: "5" }],
+			unrealizedReturnByCurrency: [{
+				absolute: "0",
+				costBasis: "5",
+				currency: "EUR",
+				partial: false,
+				percent: null,
+			}],
+		};
+
+		renderList(brokerageAccountCards([
+			account("account-1", "Основной", portfolioSummary),
+			account("account-2", "Без доходности", nullReturnSummary),
+		]));
+
+		const link = screen.getByRole("link", { name: /Основной/ });
+		expect(link).toHaveAttribute("href", "/accounts/account-1");
+		expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
+			.toBeInTheDocument();
+		expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
+		expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
+		expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
+		expect(within(link).getByText("−3,05 %")).toBeInTheDocument();
+		expect(within(link).getByText("−4,2 USD")).toBeInTheDocument();
+		const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
+		expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
+		expect(within(link).getByText("частично")).toBeInTheDocument();
+		expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
+		expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
+		expect(within(link).getByText("17 позиций")).toBeInTheDocument();
+		expect(screen.getByRole("img", {
+			name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
+				+ "Другие активы 0 %; Свободные деньги 20 %",
+		})).toBeInTheDocument();
+		const stockLegend = within(link).getByText(/Акции 50 %/);
+		expect(stockLegend).toHaveTextContent("● Акции 50 %");
+		// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
+		expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
+		expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
+		expect(link).toHaveTextContent("По данным брокера");
+		expect(link).toHaveTextContent("Структура RUB: Акции 100");
+	});
+
+	it("preserves empty, unavailable and stale states", () => {
+		const emptySummary: PortfolioSummary = {
+			...portfolioSummary,
+			cashBalances: [],
+			structure: { currencies: [], unvaluedCategories: [] },
+			totalPositionCount: 0,
+			totalsByCurrency: [],
+			unrealizedReturnByCurrency: [],
+		};
+
+		const cards = brokerageAccountCards([
+			account("empty", "Пустой", emptySummary),
+			account("unavailable", "Недоступный", null),
+			account("stale", "Устаревший", portfolioSummary),
+			account("failed", "Ошибка обновления", null),
+		], resource([], {
+			dependencies: [{
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "stale-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: null,
+					problems: [],
+					startedAt: null,
+					state: "none",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/stale",
+			}, {
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "failed-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: "2026-08-14T00:01:00Z",
+					problems: [],
+					startedAt: "2026-08-14T00:00:00Z",
+					state: "failed",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/failed",
+			}],
+			freshness: "stale",
+			lastSuccessfulAt: "2026-08-14T00:00:00Z",
+		}).meta.dependencies);
+
+		renderList(cards);
+
+		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
+		expect(screen.getAllByText("Сводка временно недоступна"))
+			.toHaveLength(2);
+		const staleLink = screen.getByRole("link", { name: /Устаревший/ });
+		expect(within(staleLink).getByText("Данные требуют обновления"))
+			.toBeInTheDocument();
+		expect(within(staleLink).getByText(/Данные на/)).toBeInTheDocument();
+		const failedLink = screen.getByRole("link", { name: /Ошибка обновления/ });
+		expect(within(failedLink).getByText(
+			"Не удалось обновить данные. Показаны последние полученные.",
+		)).toBeInTheDocument();
+	});
 });
@@ -1,10 +1,10 @@
-import type { FC } from "react";
+import type { CSSProperties, FC } from "react";

-import { Group, Stack, Text } from "@mantine/core";
+import { Badge, Group, Stack, Text, VisuallyHidden } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";

-import { formatMoney } from "@/shared/lib";
+import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";

 import type { BrokerageAccountCard } from "../../model/display";
@@ -12,12 +12,176 @@ import type { BrokerageAccountCard } from "../../model/display";
 import { accountTypeKey } from "../../model/display";
 import classes from "./BrokerageAccountList.module.css";

+const DECIMAL_PART_COUNT = 2;
+const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
+
+type AvailableSummary = Extract<
+	BrokerageAccountCard["summary"],
+	{ state: "available" }
+>;
+
 type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };

 type BrokerageAccountSummaryProps = {
 	summary: BrokerageAccountCard["summary"];
 };

+type PortfolioSummary = AvailableSummary["portfolio"];
+
+type ReturnValueProps = {
+	item: PortfolioSummary["unrealizedReturnByCurrency"][number];
+};
+
+type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
+
+function formatPercent(value: null | string) {
+	if (value === null) return "—";
+
+	const formatted = `${value.replace(".", ",")}\u{A0}%`;
+	if (isZero(value))
+		return value.startsWith("-") ? formatted.slice(1) : formatted;
+
+	return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
+}
+
+function formatStructurePercent(value: string) {
+	let trimmed = value;
+	while (trimmed.includes(".") && trimmed.endsWith("0"))
+		trimmed = trimmed.slice(0, -1);
+	if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
+
+	return trimmed.replace(".", ",");
+}
+
+function isZero(value: string) {
+	const unsigned = value.startsWith("-") ? value.slice(1) : value;
+	const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);
+
+	return integer.replaceAll("0", "") === ""
+		&& fraction.replaceAll("0", "") === "";
+}
+
+const ReturnValue: FC<ReturnValueProps> = (props) => {
+	const { t } = useTranslation();
+	const { item } = props;
+
+	const isNegative = item.percent !== null
+		&& item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	const isPositive = item.percent !== null
+		&& !item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	let toneClass = classes.neutral;
+	if (isNegative) toneClass = classes.negative;
+	else if (isPositive) toneClass = classes.positive;
+
+	return (
+		<Group className={classes.return} gap="xs" wrap="nowrap">
+			<Text className={toneClass} fw={700} size="sm">
+				{formatPercent(item.percent)}
+			</Text>
+
+			<Text className={toneClass} size="sm">
+				{formatMoney(
+					{ currency: item.currency, value: item.absolute },
+					{ withSign: true },
+				)}
+			</Text>
+
+			{item.partial && (
+				<Text c="dimmed" size="xs">
+					{t("accounts.partial")}
+				</Text>
+			)}
+		</Group>
+	);
+};
+
+type StructureBarProps = { item: StructureCurrency };
+
+const StructureBar: FC<StructureBarProps> = (props) => {
+	const { t } = useTranslation();
+
+	const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
+		const category = props.item.categories.find(item => item.type === type);
+
+		return category ? [category] : [];
+	});
+
+	const description = categories.map((category) => {
+		const label = t(portfolioCategoryPresentation[category.type].label);
+
+		const percent = category.sharePercent === null
+			? null
+			: formatStructurePercent(category.sharePercent);
+
+		return percent === null
+			? t("accounts.structure.incomplete", { category: label })
+			: t("accounts.structure.category", { category: label, percent });
+	}).join("; ");
+
+	const label = t("accounts.structure.label", {
+		currency: props.item.currency,
+		value: description,
+	});
+
+	const legendCategories = categories.filter(category =>
+		category.sharePercent === null || !isZero(category.sharePercent));
+
+	return (
+		<Stack gap={4}>
+			<div
+				aria-label={label}
+				className={classes.structureBar}
+				role="img"
+				title={label}
+			>
+				{categories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+
+					const style = {
+						"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
+						"width": `${category.sharePercent ?? 0}%`,
+					} as CSSProperties;
+
+					return (
+						<div
+							aria-hidden
+							className={classes.structureSection}
+							key={category.type}
+							style={style}
+						/>
+					);
+				})}
+			</div>
+
+			<Group aria-hidden gap="xs" wrap="wrap">
+				{legendCategories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+					const categoryLabel = t(presentation.label);
+
+					const text = category.sharePercent === null
+						? categoryLabel
+						: t("accounts.structure.category", {
+								category: categoryLabel,
+								percent: formatStructurePercent(category.sharePercent),
+							});
+
+					return (
+						<Text c="dimmed" key={category.type} size="xs">
+							<Text c={presentation.color} component="span">●</Text>
+							{" "}
+							{text}
+						</Text>
+					);
+				})}
+			</Group>
+		</Stack>
+	);
+};
+
 const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 	const { summary } = props;
 	const { t } = useTranslation();
@@ -35,19 +199,51 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 		);

 	return (
-		<Stack className={classes.summary} gap={4}>
-			{summary.totals.map(total => (
-				<Text className={classes.total} fw={700} key={total.currency}>
-					{formatMoney(total, { withRoundedCents: true })}
-				</Text>
-			))}
+		<Stack className={classes.balance} gap="xs">
+			<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
+				<Stack className={classes.summary} gap={4}>
+					{summary.totals.map(total => (
+						<Text className={classes.total} fw={700} key={total.currency}>
+							{formatMoney(total, { withRoundedCents: true })}
+						</Text>
+					))}

-			{!!summary.remainingCurrencyCount && (
-				<Text c="dimmed" size="sm">
-					{t("accounts.remainingCurrencies", {
-						count: summary.remainingCurrencyCount,
+					{!!summary.remainingCurrencyCount && (
+						<Text c="dimmed" size="sm">
+							{t("accounts.remainingCurrencies", {
+								count: summary.remainingCurrencyCount,
+							})}
+						</Text>
+					)}
+				</Stack>
+
+				<Stack gap={4}>
+					{summary.totals.map((total) => {
+						const item = summary.portfolio.unrealizedReturnByCurrency.find(
+							returnItem => returnItem.currency === total.currency,
+						);
+
+						return item
+							? <ReturnValue item={item} key={total.currency} />
+							: null;
 					})}
-				</Text>
+				</Stack>
+			</Group>
+
+			{summary.portfolio.cashBalances.length > 0 && (
+				<Group className={classes.cash} gap="xs" justify="flex-end">
+					<Text c="dimmed" size="xs">
+						{t("accounts.cash")}
+					</Text>
+
+					<Stack gap={0}>
+						{summary.portfolio.cashBalances.map(cash => (
+							<Text className={classes.cashValue} key={cash.currency} size="sm">
+								{formatMoney(cash, { withRoundedCents: true })}
+							</Text>
+						))}
+					</Stack>
+				</Group>
 			)}
 		</Stack>
 	);
@@ -60,13 +256,13 @@ type BrokerageAccountSourceStatusProps = {
 const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	props,
 ) => {
-	const { source } = props;
 	const { t } = useTranslation();
-
+	const { source } = props;
 	const isSyncing = source?.lastAttempt.state === "running";

-	const errorText
-		= source?.lastAttempt.state === "failed" ? t("accounts.refreshError") : null;
+	const errorText = source?.lastAttempt.state === "failed"
+		? t("accounts.refreshError")
+		: null;

 	return (
 		<>
@@ -86,80 +282,110 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	);
 };

+type AccountDescriptionProps = {
+	account: BrokerageAccountCard;
+};
+
+const AccountDescription: FC<AccountDescriptionProps> = (props) => {
+	const { t } = useTranslation();
+	const { account, summary } = props.account;
+	if (summary.state !== "available") return null;
+
+	const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
+		t("accounts.description.return", {
+			absolute: formatMoney(
+				{ currency: item.currency, value: item.absolute },
+				{ withSign: true },
+			),
+			currency: item.currency,
+			percent: formatPercent(item.percent),
+		}),
+	);
+
+	const structures = summary.portfolio.structure.currencies.map((item) => {
+		const categories = item.categories.map(category =>
+			t("accounts.description.structureCategory", {
+				category: t(portfolioCategoryPresentation[category.type].label),
+				value: formatMoney(
+					{ currency: item.currency, value: category.value },
+					{ withRoundedCents: true },
+				),
+			}),
+		).join(", ");
+
+		return t("accounts.description.structure", {
+			currency: item.currency,
+			value: categories,
+		});
+	});
+
+	const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
+		item => item.partial,
+	);
+
+	const details = [...returns, ...structures].join(". ");
+
+	return (
+		<VisuallyHidden>
+			{t("accounts.description.start", {
+				name: account.name,
+				type: t(accountTypeKey(account.type)),
+			})}
+			{t("accounts.description.currentValue", {
+				value: summary.portfolio.totalsByCurrency
+					.map(total => formatMoney(total)).join(", "),
+			})}
+			{details ? `${details}. ` : ""}
+			{hasPartialReturn ? t("accounts.brokerDescription") : ""}
+		</VisuallyHidden>
+	);
+};
+
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
-	const { accounts } = props;
 	const { t } = useTranslation();

 	return (
-		<Stack className={classes.list} component="ul" gap="sm">
-			{accounts.map(({ account, positionCounts, source, summary }) => {
-				const accountType = t(accountTypeKey(account.type));
+		<ul className={classes.list}>
+			{props.accounts.map(({ account, positionCounts, source, summary }) => (
+				<li key={account.id}>
+					<Link className={classes.row} to={`/accounts/${account.id}`}>
+						<Group className={classes.identity} wrap="nowrap">
+							<h2 className={classes.name}>{account.name}</h2>

-				return (
-					<li key={account.id}>
-						<Link className={classes.row} to={`/accounts/${account.id}`}>
-							<Stack className={classes.identity} gap={2}>
-								<Text className={classes.name} component="h2" fw={600}>
-									{account.name}
-								</Text>
+							<Badge className={classes.accountType} variant="light">
+								{t(accountTypeKey(account.type))}
+							</Badge>
+						</Group>

-								{account.name !== accountType && (
-									<Text className={classes.accountType} size="xs">
-										{accountType}
-									</Text>
-								)}
-							</Stack>
+						<BrokerageAccountSummary summary={summary} />

-							<Stack className={classes.balance} gap={2}>
+						<Stack className={classes.details} gap={2}>
+							{positionCounts && (
 								<Text c="dimmed" size="xs">
-									{t("accounts.currentValue")}
+									{t("accounts.positions", {
+										count: positionCounts.total,
+									})}
 								</Text>
+							)}

-								<BrokerageAccountSummary summary={summary} />
+							<BrokerageAccountSourceStatus source={source} />
+						</Stack>
+
+						{summary.state === "available" && (
+							<Stack className={classes.structure} gap={4}>
+								{summary.portfolio.structure.currencies.map(item => (
+									<StructureBar item={item} key={item.currency} />
+								))}
 							</Stack>
+						)}

-							<Group className={classes.details} gap="md">
-								{!!positionCounts && (
-									<Group
-										className={classes.positions}
-										component="dl"
-										gap="md"
-									>
-										<div>
-											<Text c="dimmed" component="dt" size="sm">
-												{t("accounts.stocks")}
-											</Text>
-
-											<Text component="dd" fw={600} size="sm">
-												{new Intl.NumberFormat("ru-RU").format(
-													positionCounts.stocks,
-												)}
-											</Text>
-										</div>
-
-										<div>
-											<Text c="dimmed" component="dt" size="sm">
-												{t("accounts.bonds")}
-											</Text>
-
-											<Text component="dd" fw={600} size="sm">
-												{new Intl.NumberFormat("ru-RU").format(
-													positionCounts.bonds,
-												)}
-											</Text>
-										</div>
-									</Group>
-								)}
-
-								<Stack className={classes.status} gap={2}>
-									<BrokerageAccountSourceStatus source={source} />
-								</Stack>
-							</Group>
-						</Link>
-					</li>
-				);
-			})}
-		</Stack>
+						<AccountDescription
+							account={{ account, positionCounts, source, summary }}
+						/>
+					</Link>
+				</li>
+			))}
+		</ul>
 	);
 };

@@ -31,6 +31,19 @@ function configureTestAuth() {
 	});
 }

+function portfolioSummary(totals: { currency: string; value: string }[]) {
+	return {
+		bondPositionCount: 1,
+		cashBalances: [],
+		fundPositionCount: 0,
+		stockPositionCount: 0,
+		structure: { currencies: [], unvaluedCategories: [] },
+		totalPositionCount: 1,
+		totalsByCurrency: totals,
+		unrealizedReturnByCurrency: [],
+	};
+}
+
 function renderPage(queryClient: QueryClient) {
 	configureTestAuth();

@@ -46,6 +59,65 @@ function renderPage(queryClient: QueryClient) {
 }

 describe("AccountsPage", () => {
+	it("summarizes currencies separately and reports excluded accounts", async () => {
+		server.use(http.get("*/api/v1/brokerage-accounts", () =>
+			HttpResponse.json(resource([
+				{
+					...account,
+					portfolioSummary: portfolioSummary([
+						{ currency: "RUB", value: "100.10" },
+						{ currency: "USD", value: "20" },
+					]),
+				},
+				{
+					...account,
+					id: "account-2",
+					name: "Второй",
+					portfolioSummary: portfolioSummary([
+						{ currency: "RUB", value: "50.20" },
+					]),
+				},
+				{
+					...account,
+					id: "account-3",
+					name: "Без сводки",
+					portfolioSummary: null,
+				},
+				{
+					...account,
+					id: "account-4",
+					name: "Только деньги",
+					portfolioSummary: {
+						...portfolioSummary([{ currency: "RUB", value: "25" }]),
+						bondPositionCount: 0,
+						cashBalances: [{ currency: "RUB", value: "25" }],
+						totalPositionCount: 0,
+					},
+				},
+				{
+					...account,
+					id: "account-5",
+					name: "Без сумм",
+					portfolioSummary: {
+						...portfolioSummary([]),
+						totalPositionCount: 0,
+					},
+				},
+			])),
+		));
+		const client = createTestQueryClient();
+
+		renderPage(client);
+
+		expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
+		expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
+		expect(screen.getByText("5 счетов")).toBeInTheDocument();
+		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
+		expect(screen.getByText(
+			"Ещё 1 счёт не включён: нет актуального портфеля",
+		)).toBeInTheDocument();
+	});
+
 	it("loads accounts after retrying an initial HTTP failure", async () => {
 		const modes: (null | string)[] = [];
 		server.use(
@@ -1,6 +1,6 @@
 import type { FC } from "react";

-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";

@@ -10,15 +10,82 @@ import {
 	type BrokerageAccountCard,
 	BrokerageAccountList,
 } from "@/entities/brokerage-account";
+import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";

+const DECIMAL_BASE = 10n;
+const DECIMAL_PART_COUNT = 2;
+const ZERO = 0n;
+
 type AccountsPageLoadedProps = {
 	accounts: BrokerageAccountCard[];
 	meta: InvestmentResourceMeta;
 };

+type Money = { currency: string; value: string };
+
+function accountTotals(accounts: BrokerageAccountCard[]) {
+	const values = new Map<string, string[]>();
+	let excludedCount = 0;
+
+	for (const { summary } of accounts) {
+		if (summary.state === "empty") continue;
+
+		if (summary.state === "unavailable") {
+			excludedCount += 1;
+			continue;
+		}
+
+		for (const total of summary.portfolio.totalsByCurrency) {
+			values.set(total.currency, [
+				...values.get(total.currency) ?? [],
+				total.value,
+			]);
+		}
+	}
+
+	const totals: Money[] = Array.from(values, ([currency, amounts]) => ({
+		currency,
+		value: sumDecimals(amounts),
+	}));
+
+	return { excludedCount, totals };
+}
+
+function sumDecimals(values: string[]) {
+	const scale = Math.max(
+		0,
+		...values.map(value =>
+			value.split(".", DECIMAL_PART_COUNT)[1]?.length ?? 0),
+	);
+
+	const factor = DECIMAL_BASE ** BigInt(scale);
+	let sum = ZERO;
+
+	for (const value of values) {
+		const isNegative = value.startsWith("-");
+
+		const [integer = "0", fraction = ""] = (isNegative
+			? value.slice(1)
+			: value).split(".", DECIMAL_PART_COUNT);
+
+		const units = BigInt(integer) * factor
+			+ BigInt(fraction.padEnd(scale, "0") || "0");
+
+		sum += isNegative ? -units : units;
+	}
+
+	const isNegative = sum < ZERO;
+	const digits = (isNegative ? -sum : sum).toString().padStart(scale + 1, "0");
+	const integer = scale ? digits.slice(0, -scale) : digits;
+	const fraction = scale ? `.${digits.slice(-scale)}` : "";
+
+	return `${isNegative ? "-" : ""}${integer}${fraction}`;
+}
+
 const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+	const { excludedCount, totals } = accountTotals(props.accounts);

 	return (
 		<Stack gap="lg">
@@ -28,6 +95,37 @@ const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 				<Text c="dimmed" size="sm">
 					{t("accounts.subtitle")}
 				</Text>
+			</Stack>
+
+			<Stack gap="xs">
+				<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs">
+					<Stack gap={4}>
+						<Text c="dimmed" size="sm">
+							{t("accounts.currentValue")}
+						</Text>
+
+						{totals.length > 0
+							? totals.map(total => (
+									<Text fw={700} key={total.currency} size="lg">
+										{formatMoney(total, { withRoundedCents: true })}
+									</Text>
+								))
+							: <Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>}
+					</Stack>
+
+					<Stack gap={4}>
+						<Text fw={600}>{t("accounts.count", {
+							count: props.accounts.length,
+						})}
+						</Text>
+
+						{excludedCount > 0 && (
+							<Text c="dimmed" size="sm">
+								{t("accounts.summaryExcluded", { count: excludedCount })}
+							</Text>
+						)}
+					</Stack>
+				</SimpleGrid>

 				<SourceSyncStatus
 					lastAttempt={props.meta.lastAttempt}
@@ -5,7 +5,20 @@ const ru = {
 			all: "Все счета",
 			allDescription: "Портфель по всем доступным инвестиционным счетам",
 			bonds: "Облигации",
+			brokerDescription: "По данным брокера",
+			cash: "Деньги на счёте",
+			count_few: "{{count}} счёта",
+			count_many: "{{count}} счетов",
+			count_one: "{{count}} счёт",
+			count_other: "{{count}} счёта",
 			currentValue: "Текущая стоимость",
+			description: {
+				currentValue: "Текущая стоимость: {{value}}. ",
+				return: "Доходность {{currency}}: {{percent}}, {{absolute}}",
+				start: "Счёт {{name}}, {{type}}. ",
+				structure: "Структура {{currency}}: {{value}}",
+				structureCategory: "{{category}} {{value}}",
+			},
 			emptyText:
 				"Откройте инвестиционный счет в T-Bank, чтобы он появился здесь.",
 			emptyTitle: "Нет инвестиционных счетов",
@@ -18,6 +31,11 @@ const ru = {
 			openAll: "Портфель по всем счетам",
 			openedOn: "Открыт {{date}}",
 			openSettings: "Открыть настройки T-Bank",
+			partial: "частично",
+			positions_few: "{{count}} позиции",
+			positions_many: "{{count}} позиций",
+			positions_one: "{{count}} позиция",
+			positions_other: "{{count}} позиции",
 			refreshError:
 				"Не удалось обновить данные. Показаны последние полученные.",
 			refreshing: "Обновляем данные",
@@ -28,8 +46,22 @@ const ru = {
 			retry: "Повторить",
 			scope: "Счёт",
 			stocks: "Акции",
+			structure: {
+				category: "{{category}} {{percent}} %",
+				incomplete: "{{category}}: доля неизвестна",
+				label: "Структура в {{currency}}: {{value}}",
+			},
 			subtitle: "Ваши инвестиции по счетам",
 			summaryEmpty: "Нет текущих сумм",
+			summaryExcluded_few:
+				"Ещё {{count}} счёта не включены: нет актуального портфеля",
+			summaryExcluded_many:
+				"Ещё {{count}} счетов не включены: нет актуального портфеля",
+			summaryExcluded_one:
+				"Ещё {{count}} счёт не включён: нет актуального портфеля",
+			summaryExcluded_other:
+				"Ещё {{count}} счёта не включены: нет актуального портфеля",
+			summaryNoTotals: "Нет данных для сводки",
 			summaryUnavailable: "Сводка временно недоступна",
 			title: "Счета",
 			types: {
@@ -42,6 +42,18 @@ describe("shared display helpers", () => {
 			formatMoney({ currency: "RUB", value: "1.5" }, { withZeroCents: true }),
 		).toBe("1,50 ₽");
 		expect(formatMoney(null)).toBe("—");
+		expect(formatMoney(
+			{ currency: "RUB", value: "136900" },
+			{ withSign: true },
+		)).toBe("+136 900 ₽");
+		expect(formatMoney(
+			{ currency: "RUB", value: "-4200" },
+			{ withSign: true },
+		)).toBe("−4 200 ₽");
+		expect(formatMoney(
+			{ currency: "RUB", value: "-0.00" },
+			{ withSign: true },
+		)).toBe("0,00 ₽");
 	});

 	it("builds the brand logo url from an upstream file name", () => {
@@ -3,9 +3,17 @@ const CENTS_PRECISION = 2;

 type FormatMoneyOptions = {
 	withRoundedCents?: boolean;
+	withSign?: boolean;
 	withZeroCents?: boolean;
 };

+const portfolioCategoryPresentation = {
+	BOND: { color: "grape.6", label: "portfolio.bonds" },
+	CASH: { color: "green.6", label: "portfolio.structure.cash" },
+	OTHER: { color: "orange.6", label: "portfolio.structure.other" },
+	STOCK: { color: "blue.6", label: "portfolio.stocks" },
+} as const;
+
 type Money = { currency: string; value: string };

 const dateFormatter = new Intl.DateTimeFormat("ru-RU", {
@@ -40,7 +48,11 @@ function formatMoney(
 	money: Money
 		| null
 		| undefined,
-	{ withRoundedCents = false, withZeroCents = false }: FormatMoneyOptions = {},
+	{
+		withRoundedCents = false,
+		withSign = false,
+		withZeroCents = false,
+	}: FormatMoneyOptions = {},
 ): string {
 	if (!money) return "—";

@@ -62,8 +74,25 @@ function formatMoney(
 		: integerPart;

 	const currency = money.currency === "RUB" ? "₽" : money.currency;
+	const formatted = `${formatDecimal(decimal)} ${currency}`;

-	return `${formatDecimal(decimal)} ${currency}`;
+	if (!withSign) return formatted;
+	if (isZeroDecimal(value))
+		return value.startsWith("-") ? formatted.slice(1) : formatted;
+
+	return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
+}
+
+function isZeroDecimal(value: string) {
+	const unsigned = value.startsWith("-") ? value.slice(1) : value;
+
+	const [integer = "", fraction = ""] = unsigned.split(
+		".",
+		DECIMAL_PART_COUNT,
+	);
+
+	return integer.replaceAll("0", "") === ""
+		&& fraction.replaceAll("0", "") === "";
 }

 function roundDecimalToCents(value: string): string {
@@ -116,4 +145,5 @@ export {
 	formatMoney,
 	formatSnapshotTime,
 	instrumentLogoUrl,
+	portfolioCategoryPresentation,
 };
@@ -7,6 +7,7 @@ export {
 	formatMoney,
 	formatSnapshotTime,
 	instrumentLogoUrl,
+	portfolioCategoryPresentation,
 } from "./display";
 export { useInitialAvailability } from "./initial-availability";
 export { useUrlPeriod } from "./useUrlPeriod";
@@ -5,20 +5,13 @@ import { useTranslation } from "react-i18next";

 import type { Portfolio } from "@/entities/portfolio";

-import { formatMoney } from "@/shared/lib";
+import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";

 const MIN_VISIBLE_SHARE_PERCENT = 0.01;

 // A cached snapshot or an older running server can predate this response field.
 type PortfolioStructureProps = { structure?: null | Portfolio["structure"] };

-const categoryPresentation = {
-	BOND: { color: "grape.6", label: "portfolio.bonds" },
-	CASH: { color: "green.6", label: "portfolio.structure.cash" },
-	OTHER: { color: "orange.6", label: "portfolio.structure.other" },
-	STOCK: { color: "blue.6", label: "portfolio.stocks" },
-} as const;
-
 const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
 	const { structure } = props;
 	const { t } = useTranslation();
@@ -45,7 +38,7 @@ const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
 		unvalued:
 			structure?.unvaluedCategories.map(category =>
 				t("portfolio.structure.unvaluedCategory", {
-					category: t(categoryPresentation[category.type].label),
+					category: t(portfolioCategoryPresentation[category.type].label),
 					count: category.count,
 				}),
 			) ?? [],
@@ -61,7 +54,7 @@ function portfolioRows(
 	if (!selected) return [];

 	return selected.categories.map((category) => {
-		const presentation = categoryPresentation[category.type];
+		const presentation = portfolioCategoryPresentation[category.type];

 		const percentage
 			= category.sharePercent === null