feat: replace account page accordion with tabs and show open position result (#112)

src/pages/account/model/positions.test.ts

@@ -2,9 +2,19 @@ import { describe, expect, it } from "vitest";
 
 import type { Portfolio } from "@/entities/portfolio";
 
-import { toAccountPagePositionSections } from "./positions";
+import {
+	formatPositionReturnPercent,
+	toAccountPagePositionSections,
+	toUnrealizedReturns,
+} from "./positions";
 import { portfolio, position, second } from "./positions.fixtures";
 
+function makePosition(
+	overrides: Partial<Portfolio["positions"][number]>,
+): Portfolio["positions"][number] {
+	return { ...position, ...overrides };
+}
+
 function sections(positions: Portfolio["positions"]) {
 	return toAccountPagePositionSections({
 		...portfolio,
@@ -82,6 +92,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Акция",
 						logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
+						returnPercent: null,
+						returnPercentText: null,
 						returnText: "+10 ₽",
 						returnTone: "positive",
 						shareText: "66,7 %",
@@ -95,6 +107,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Облигация",
 						logoSrc: null,
+						returnPercent: "-11.111111",
+						returnPercentText: "-11,11 %",
 						returnText: "-5 ₽",
 						returnTone: "negative",
 						shareText: "33,3 %",
@@ -107,6 +121,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Фонд",
 						logoSrc: null,
+						returnPercent: null,
+						returnPercentText: null,
 						returnText: null,
 						returnTone: undefined,
 						shareText: null,
@@ -187,3 +203,109 @@ describe("account position sections", () => {
 		expect(source).toEqual(before);
 	});
 });
+
+describe("account position returns", () => {
+	it.each([
+		{
+			absoluteReturn: { currency: "RUB", value: "25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			expected: "7.142857",
+			name: "gain",
+			quantity: "1.25",
+			type: "STOCK",
+		},
+		{
+			absoluteReturn: { currency: "RUB", value: "-25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			expected: "-7.142857",
+			name: "loss",
+			quantity: "1.25",
+			type: "STOCK",
+		},
+		{
+			absoluteReturn: { currency: "RUB", value: "-5" },
+			averagePurchasePrice: { currency: "RUB", value: "45" },
+			expected: "-11.111111",
+			name: "bond without accrued interest",
+			quantity: "1",
+			type: "BOND",
+		},
+	] as const)("calculates $name from the clean purchase cost", (testCase) => {
+		const result = sections([makePosition({
+			absoluteReturn: testCase.absoluteReturn,
+			averagePurchasePrice: testCase.averagePurchasePrice,
+			quantity: testCase.quantity,
+			type: testCase.type,
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent)
+			.toBe(testCase.expected);
+	});
+
+	it.each([
+		{ name: "zero quantity", overrides: { quantity: "0" } },
+		{ name: "negative quantity", overrides: { quantity: "-1" } },
+		{ name: "missing average price", overrides: { averagePurchasePrice: null } },
+		{
+			name: "currency mismatch",
+			overrides: { averagePurchasePrice: { currency: "USD", value: "280" } },
+		},
+		{ name: "zero cost", overrides: { averagePurchasePrice: { currency: "RUB", value: "0" } } },
+	])("returns null for $name", ({ overrides }) => {
+		const result = sections([makePosition({
+			absoluteReturn: { currency: "RUB", value: "25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			quantity: "1.25",
+			...overrides,
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent).toBeNull();
+	});
+
+	it.each([
+		{ absoluteReturn: "1", expected: "0.000001" },
+		{ absoluteReturn: "-1", expected: "-0.000001" },
+	])("rounds an exact half away from zero for $absoluteReturn", (testCase) => {
+		const result = sections([makePosition({
+			absoluteReturn: { currency: "RUB", value: testCase.absoluteReturn },
+			averagePurchasePrice: { currency: "RUB", value: "200000000" },
+			quantity: "1",
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent)
+			.toBe(testCase.expected);
+	});
+
+	it.each([
+		{ expected: "+1.01", value: "1.005" },
+		{ expected: "-1.01", value: "-1.005" },
+	])("formats $value for display with a sign and two decimals", (testCase) => {
+		expect(formatPositionReturnPercent(testCase.value)).toBe(testCase.expected);
+	});
+
+	it("sums complete unrealized returns by currency", () => {
+		const result = toUnrealizedReturns([
+			makePosition({ absoluteReturn: { currency: "RUB", value: "0.1" } }),
+			makePosition({ absoluteReturn: { currency: "RUB", value: "0.2" } }),
+			makePosition({ absoluteReturn: { currency: "USD", value: "-2.5" } }),
+		]);
+
+		expect(result).toEqual([
+			{ currency: "RUB", value: "0.3" },
+			{ currency: "USD", value: "-2.5" },
+		]);
+	});
+
+	it("omits only currencies with incomplete returns", () => {
+		const result = toUnrealizedReturns([
+			makePosition({ absoluteReturn: { currency: "RUB", value: "10" } }),
+			makePosition({
+				absoluteReturn: null,
+				currentValue: { currency: "RUB", value: "100" },
+			}),
+			makePosition({ absoluteReturn: { currency: "USD", value: "2" } }),
+		]);
+
+		expect(result).toEqual([{ currency: "USD", value: "2" }]);
+	});
+});

src/pages/account/model/positions.ts

@@ -1,9 +1,11 @@
 import { formatShare, type Portfolio } from "@/entities/portfolio";
-import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
+import { formatDecimal, formatMoney, instrumentLogoUrl } from "@/shared/lib";
 
 type AccountPagePosition = Portfolio["positions"][number] & {
 	instrumentTo?: string;
 	logoSrc: null | string;
+	returnPercent: null | string;
+	returnPercentText: null | string;
 	returnText: null | string;
 	returnTone?: AccountPageReturnTone;
 	shareText: null | string;
@@ -21,10 +23,73 @@ type AccountPagePositionSection = {
 
 type AccountPageReturnTone = "negative" | "positive";
 
+type Decimal = { scale: number; value: bigint };
+
+type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
+
 type PositionSectionKind = "bonds"
 	| "other"
 	| "stocks";
 
+const RADIX = 10n;
+const DECIMAL_PARTS = 2;
+const PERCENT_SCALE = 6;
+const DISPLAY_PERCENT_SCALE = 2;
+const PERCENT_FACTOR = 100n;
+const ROUNDING_FACTOR = 2n;
+
+function decimalFromString(value: string): Decimal {
+	const [whole = "0", fraction = ""] = value.split(".", DECIMAL_PARTS);
+
+	return { scale: fraction.length, value: BigInt(`${whole}${fraction}`) };
+}
+
+function decimalToString(decimal: Decimal): string {
+	const sign = decimal.value < 0n ? "-" : "";
+
+	const digits = (decimal.value < 0n ? -decimal.value : decimal.value)
+		.toString()
+		.padStart(decimal.scale + 1, "0");
+
+	const whole = decimal.scale
+		? digits.slice(0, -decimal.scale)
+		: digits;
+
+	let fraction = decimal.scale ? digits.slice(-decimal.scale) : "";
+
+	while (fraction.endsWith("0")) fraction = fraction.slice(0, -1);
+
+	const suffix = fraction ? `.${fraction}` : "";
+
+	return `${sign}${whole}${suffix}`;
+}
+
+function formatPositionReturnPercent(value: string): string {
+	const decimal = decimalFromString(value);
+	let rounded = decimal.value;
+
+	if (decimal.scale > DISPLAY_PERCENT_SCALE) {
+		const divisor = RADIX ** BigInt(decimal.scale - DISPLAY_PERCENT_SCALE);
+		const remainder = rounded % divisor;
+		const absoluteRemainder = remainder < 0n ? -remainder : remainder;
+		rounded /= divisor;
+
+		if (absoluteRemainder * ROUNDING_FACTOR >= divisor) {
+			rounded += decimal.value < 0n ? -1n : 1n;
+		}
+	}
+	else {
+		rounded *= RADIX ** BigInt(DISPLAY_PERCENT_SCALE - decimal.scale);
+	}
+
+	const sign = rounded > 0n ? "+" : "";
+
+	return `${sign}${decimalToString({
+		scale: DISPLAY_PERCENT_SCALE,
+		value: rounded,
+	})}`;
+}
+
 function groupPositions(
 	positions: AccountPagePosition[],
 ): AccountPagePositionGroup[] {
@@ -67,6 +132,53 @@ function positionIdentity(position: AccountPagePosition) {
 	return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined;
 }
 
+function returnPercent(
+	position: Portfolio["positions"][number],
+): null | string {
+	const result = position.absoluteReturn;
+	const price = position.averagePurchasePrice;
+	if (!result || !price || result.currency !== price.currency) return null;
+
+	const quantity = decimalFromString(position.quantity);
+	const purchasePrice = decimalFromString(price.value);
+
+	const cost = {
+		scale: quantity.scale + purchasePrice.scale,
+		value: quantity.value * purchasePrice.value,
+	};
+
+	if (quantity.value <= 0n || cost.value <= 0n) return null;
+
+	const absoluteReturn = decimalFromString(result.value);
+
+	const numerator = absoluteReturn.value * PERCENT_FACTOR
+		* RADIX ** BigInt(cost.scale + PERCENT_SCALE);
+
+	const denominator = cost.value * RADIX ** BigInt(absoluteReturn.scale);
+	const remainder = numerator % denominator;
+
+	const isRoundsUp = (remainder < 0n ? -remainder : remainder) * ROUNDING_FACTOR
+		>= denominator;
+
+	const rounding = isRoundsUp ? 1n : 0n;
+	const signedRounding = numerator < 0n ? -rounding : rounding;
+	const rounded = numerator / denominator + signedRounding;
+
+	return decimalToString({ scale: PERCENT_SCALE, value: rounded });
+}
+
+function sumDecimals(values: Decimal[]): Decimal {
+	const scale = Math.max(...values.map(value => value.scale));
+
+	const sum = values.reduce(
+		(total, value) => total
+			+ value.value * RADIX ** BigInt(scale - value.scale),
+		0n,
+	);
+
+	return { scale, value: sum };
+}
+
 function toAccountPagePositionSections(
 	portfolio: Portfolio,
 ): AccountPagePositionSection[] {
@@ -111,6 +223,8 @@ function toPosition(
 	const returnPrefix
 		= isExpanded && returnValue !== null && returnValue > 0 ? "+" : "";
 
+	const percent = returnPercent(position);
+
 	return {
 		...position,
 		instrumentTo:
@@ -120,6 +234,10 @@ function toPosition(
 		logoSrc: isExpanded
 			? instrumentLogoUrl(position.logoName)
 			: null,
+		returnPercent: percent,
+		returnPercentText: percent
+			? `${formatDecimal(formatPositionReturnPercent(percent))} %`
+			: null,
 		returnText: position.absoluteReturn
 			? `${returnPrefix}${formatMoney(position.absoluteReturn)}`
 			: null,
@@ -162,9 +280,46 @@ function toSection(
 	};
 }
 
+function toUnrealizedReturns(
+	positions: Portfolio["positions"],
+): Money[] {
+	const totals = new Map<string, {
+		complete: boolean;
+		values: Decimal[];
+	}>();
+
+	for (const position of positions) {
+		const currencies = position.absoluteReturn
+			? [position.absoluteReturn.currency]
+			: [...new Set([
+					position.averagePurchasePrice?.currency,
+					position.currentValue?.currency,
+				].filter((currency): currency is string => !!currency))];
+
+		for (const currency of currencies) {
+			const total = totals.get(currency) ?? { complete: true, values: [] };
+
+			if (position.absoluteReturn) {
+				total.values.push(decimalFromString(position.absoluteReturn.value));
+			}
+			else {
+				total.complete = false;
+			}
+
+			totals.set(currency, total);
+		}
+	}
+
+	return [...totals].flatMap(([currency, total]) => total.complete
+		? [{ currency, value: decimalToString(sumDecimals(total.values)) }]
+		: []);
+}
+
 export {
 	type AccountPagePosition,
 	type AccountPagePositionGroup,
 	type AccountPagePositionSection,
+	formatPositionReturnPercent,
 	toAccountPagePositionSections,
+	toUnrealizedReturns,
 };

src/pages/account/ui/AccountPage/AccountPage.module.css

@@ -98,21 +98,13 @@
 	font-family: var(--mantine-font-family-monospace);
 }
 
-.accordionControl {
-	transition:
-		background-color 150ms ease,
-		color 150ms ease;
+.tabsList {
+	flex-wrap: nowrap;
+	overflow-x: auto;
 }
 
-.accordionLabel {
-	font-size: var(--mantine-h2-font-size);
-	font-weight: var(--mantine-h2-font-weight);
-	line-height: var(--mantine-h2-line-height);
-}
-
-.accordionPanel {
-	padding-left: 0;
-	padding-right: 0;
+.positionFilter {
+	overflow-x: auto;
 }
 
 .accountPositions {

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -1,6 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
+	fireEvent,
 	render,
 	screen,
 	waitFor,
@@ -23,7 +24,10 @@ import type {
 	AccountPageRecentOperations,
 } from "../../model/previews";
 
-import { toAccountPagePositionSections } from "../../model/positions";
+import {
+	toAccountPagePositionSections,
+	toUnrealizedReturns,
+} from "../../model/positions";
 import { AccountPage } from "./AccountPage";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
@@ -142,6 +146,7 @@ function loadedProps(nextPortfolio: Portfolio = portfolio) {
 		positionSections: toAccountPagePositionSections(nextPortfolio),
 		recentEvents: emptyRecentEvents,
 		recentOperations: emptyRecentOperations,
+		unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
 	};
 }
 
@@ -246,7 +251,7 @@ describe("AccountPage states", () => {
 		).toHaveTextContent("Данные о структуре портфеля пока недоступны.");
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "0,5 $"]);
+		).toEqual(["1 234,5 ₽"]);
 	});
 	it("keeps initial placeholders decorative without amounts or focus targets", () => {
 		const { container } = renderPage(<AccountPageLoading />);
@@ -309,8 +314,10 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
+
 		const balances = within(
-			screen.getByRole("region", { name: "Денежные остатки" }),
+			screen.getByRole("tabpanel", { name: "Деньги" }),
 		);
 
 		expect(
@@ -318,7 +325,12 @@ describe("AccountPage states", () => {
 		).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
+		).toEqual([
+			"1 234,5 ₽",
+			"234,500000000000000001 ₽",
+			"-0,5 $",
+			"3,00 XYZ",
+		]);
 		expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
 		expect(
 			screen.queryByText(/полная оценка|общая стоимость/i),
@@ -341,6 +353,7 @@ describe("AccountPage states", () => {
 			);
 			renderAccountRoute(createTestQueryClient());
 			await screen.findByRole("heading", { level: 1, name: "Портфель" });
+			fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
 			expect(screen.getByRole("definition")).toHaveTextContent("0,5 $");
 			expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
 		},
@@ -381,9 +394,10 @@ describe("AccountPage states", () => {
 			).not.toBeInTheDocument();
 			expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
 			expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
+			fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
 			expect(
 				within(
-					screen.getByRole("region", { name: "Денежные остатки" }),
+					screen.getByRole("tabpanel", { name: "Деньги" }),
 				).queryByRole("definition"),
 			).not.toBeInTheDocument();
 			expect(
@@ -395,11 +409,25 @@ describe("AccountPage states", () => {
 		},
 	);
 
-	it("renders the empty state", () => {
-		renderPage(<AccountPageEmpty {...emptyProps()} />);
+	it("renders the empty state with self-descriptive preview links", () => {
+		renderPage(
+			<AccountPageEmpty
+				{...emptyProps()}
+				incomeSummary={{
+					state: "empty",
+					to: "/accounts/account-1/income",
+				}}
+			/>,
+		);
 		expect(
 			screen.getByRole("heading", { name: "Портфель пока пуст" }),
 		).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть журнал" }))
+			.toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть будущие события" }))
+			.toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
+			.toBeInTheDocument();
 	});
 
 	it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
@@ -455,18 +483,22 @@ describe("AccountPage states", () => {
 		expect(screen.queryByText(/T-Bank временно недоступен/))
 			.not.toBeInTheDocument();
 		expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
-		expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
 		expect(
-			screen.getByRole("button", { name: "Облигации" }),
+			screen.getByRole("radio", { name: "Облигации" }),
 		).toBeInTheDocument();
 
-		const positions = screen
-			.getAllByText(/Вторая|Первая/)
-			.map(element => element.textContent);
-
-		expect(positions).toEqual(["Вторая", "Первая"]);
-		expect(screen.getByText("10 ₽")).toBeInTheDocument();
+		expect(
+			screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
+		).toEqual(["stocks", "bonds"]);
+		expect(screen.getByText("Вторая")).toBeInTheDocument();
 		expect(screen.getByText("-1 ₽")).toBeInTheDocument();
+		expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
+			"src",
+			"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
+		);
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
+		expect(screen.getByText("10 ₽")).toBeInTheDocument();
 		expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
 		expect(
 			screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
@@ -475,10 +507,6 @@ describe("AccountPage states", () => {
 			screen.getByText("Количество: 1 · RU000A0JX0J2"),
 		).toBeInTheDocument();
 		expect(screen.queryByText("—")).not.toBeInTheDocument();
-		expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
-			"src",
-			"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
-		);
 	});
 
 	it.each(["STOCK", "BOND"] as const)(
@@ -515,8 +543,11 @@ describe("AccountPage states", () => {
 			expect(screen.getByText("Б")).toBeInTheDocument();
 			expect(screen.getByText("Н")).toBeInTheDocument();
 			expect(screen.getAllByRole("img")).toHaveLength(1);
-			for (const value of ["+3 ₽", "+2 ₽", "0 ₽"])
+
+			for (const value of ["+3 ₽", "+2 ₽", "0 ₽"]) {
 				expect(screen.getByText(value)).toBeInTheDocument();
+			}
+
 			expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
 		},
 	);
@@ -564,6 +595,7 @@ describe("AccountPage states", () => {
 		expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument();
 		expect(screen.getByText("Количество: 2 · FALLBACK-ISIN"))
 			.toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
 		expect(screen.getByText("Количество: 3 · BOND-ISIN"))
 			.toBeInTheDocument();
 		expect(screen.queryByText("OFZ")).not.toBeInTheDocument();
@@ -617,9 +649,11 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
 		expect(
 			screen.getByText("Пока недоступно"),
 		).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 	});
 
@@ -654,6 +688,7 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
 		expect(screen.getByText("Сделка")).toBeInTheDocument();
 		expect(screen.getByText("−12 ₽")).toBeInTheDocument();
 	});
@@ -707,7 +742,8 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
-		const section = screen.getByRole("region", { name: "Будущие события" });
+		fireEvent.click(screen.getByRole("tab", { name: "События" }));
+		const section = screen.getByRole("tabpanel", { name: "События" });
 		const content = within(section);
 		const text = section.textContent ?? "";
 
@@ -734,7 +770,7 @@ describe("AccountPage states", () => {
 		expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
 		expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
 		expect(
-			content.getByRole("link", { name: "Открыть будущие события" }),
+			content.getByRole("link", { name: "Подробнее" }),
 		).toHaveAttribute("href", "/accounts/account-1/events");
 	});
 
@@ -748,8 +784,10 @@ describe("AccountPage states", () => {
 				/>,
 			);
 
+			fireEvent.click(screen.getByRole("tab", { name: "События" }));
+
 			const content = within(
-				screen.getByRole("region", { name: "Будущие события" }),
+				screen.getByRole("tabpanel", { name: "События" }),
 			);
 
 			if (state === "loading") {
@@ -770,7 +808,7 @@ describe("AccountPage states", () => {
 			}
 
 			expect(
-				content.getByRole("link", { name: "Открыть будущие события" }),
+				content.getByRole("link", { name: "Подробнее" }),
 			).toHaveAttribute("href", "/accounts/account-1/events");
 		},
 	);
@@ -786,9 +824,11 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "События" }));
 		expect(
 			screen.getByText("Данные появятся здесь, когда чтение восстановится."),
 		).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 	});
 
@@ -857,7 +897,7 @@ describe("AccountPage states", () => {
 			expect(screen.getByText("Вторая")).toBeInTheDocument();
 			expect(
 				screen.getAllByRole("definition").map(node => node.textContent),
-			).toEqual(["1 234,5 ₽", "0,5 $"]);
+			).toEqual(["1 234,5 ₽"]);
 			expect(screen.queryByRole("button", { name: "Повторить" }))
 				.not.toBeInTheDocument();
 			void queryClient.invalidateQueries({
@@ -867,7 +907,7 @@ describe("AccountPage states", () => {
 			expect(structure).toHaveTextContent("10 ₽");
 			expect(
 				screen.getAllByRole("definition").map(node => node.textContent),
-			).toEqual(["1 234,5 ₽", "0,5 $"]);
+			).toEqual(["1 234,5 ₽"]);
 			resolveRetry?.(
 				HttpResponse.json(
 					resource(
@@ -886,7 +926,7 @@ describe("AccountPage states", () => {
 			await waitFor(() =>
 				expect(
 					screen.getAllByRole("definition").map(node => node.textContent),
-				).toEqual(["-0,5 $", "2,50 €"]),
+				).toEqual(["-0,5 $"]),
 			);
 			expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
 			expect(structure).not.toHaveTextContent("10 ₽");
@@ -928,7 +968,7 @@ describe("AccountPage states", () => {
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "0,5 $"]);
+		).toEqual(["1 234,5 ₽"]);
 		expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole("status", { name: "Загрузка" }),
@@ -938,4 +978,96 @@ describe("AccountPage states", () => {
 
 		resolveRefresh?.(HttpResponse.json(resource(portfolio)));
 	});
+
+	it("opens positions by default and switches between local tabs", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} />);
+
+		expect(screen.getByRole("tab", { name: "Позиции" }))
+			.toHaveAttribute("aria-selected", "true");
+		expect(screen.getByText("Вторая")).toBeVisible();
+
+		fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
+		expect(screen.getByRole("tabpanel", { name: "Деньги" }))
+			.toBeVisible();
+		expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
+		expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
+	});
+
+	it("links operation, event and income previews to their detail pages", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps()}
+				incomeSummary={{
+					state: "empty",
+					to: "/accounts/account-1/income",
+				}}
+			/>,
+		);
+
+		for (const [tab, href] of [
+			["Операции", "/accounts/account-1/operations"],
+			["События", "/accounts/account-1/events"],
+			["Доход", "/accounts/account-1/income"],
+		]) {
+			fireEvent.click(screen.getByRole("tab", { name: tab }));
+			expect(screen.getByRole("link", { name: "Подробнее" }))
+				.toHaveAttribute("href", href);
+		}
+	});
+
+	it("filters positions by the kinds present in the portfolio", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} />);
+
+		expect(
+			screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
+		).toEqual(["stocks", "bonds"]);
+		expect(screen.getByText("Вторая")).toBeVisible();
+		expect(screen.queryByText("Первая")).not.toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
+		expect(screen.getByText("Первая")).toBeVisible();
+		expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
+	});
+
+	it("hides the position filter when only one kind exists", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps({
+					...portfolio,
+					positions: [portfolio.positions[0]],
+				})}
+			/>,
+		);
+
+		expect(screen.queryByRole("radiogroup", { name: "Тип позиции" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("hides unrealized returns for a partial portfolio", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} partial />);
+
+		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("omits an unrealized currency total when any return is incomplete", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps({
+					...portfolio,
+					positions: [
+						position({ absoluteReturn: { currency: "RUB", value: "10" } }),
+						position({
+							absoluteReturn: null,
+							currentValue: { currency: "RUB", value: "100" },
+						}),
+					],
+				})}
+			/>,
+		);
+
+		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
+			.not.toBeInTheDocument();
+	});
 });

src/pages/account/ui/AccountPage/AccountPage.tsx

@@ -31,6 +31,7 @@ const AccountPage: FC = () => {
 			positionSections={viewModel.positionSections}
 			recentEvents={viewModel.recentEvents}
 			recentOperations={viewModel.recentOperations}
+			unrealizedReturns={viewModel.unrealizedReturns}
 		/>
 	);
 };

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -20,6 +20,7 @@ import { useInitialAvailability } from "@/shared/lib";
 import {
 	type AccountPagePositionSection,
 	toAccountPagePositionSections,
+	toUnrealizedReturns,
 } from "../../model/positions";
 import {
 	type AccountPageIncomeSummary,
@@ -48,6 +49,7 @@ type AccountPageLoadedViewModel = AccountPageContent & {
 	positionSections: AccountPagePositionSection[];
 	source?: InvestmentResourceMeta;
 	state: "loaded";
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 type AccountPageViewModel
@@ -133,6 +135,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
 		recentOperations,
 		source: portfolio.meta,
 		state: "loaded" as const,
+		unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
 	};
 }
 

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -1,6 +1,12 @@
-import type { FC } from "react";
-
-import { Accordion, Alert, Stack } from "@mantine/core";
+import {
+	Alert,
+	Group,
+	SegmentedControl,
+	Stack,
+	Tabs,
+	Text,
+} from "@mantine/core";
+import { type FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { BrokerageAccount } from "@/entities/brokerage-account";
@@ -8,6 +14,7 @@ import type { Portfolio } from "@/entities/portfolio";
 import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
+import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 import { PortfolioStructure } from "@/widgets/portfolio-structure";
 
@@ -35,18 +42,27 @@ type AccountPageLoadedProps = {
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
 	source?: InvestmentResourceMeta;
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+	const [filter, setFilter] = useState<string>();
 
-	const defaultValue = [
-		...props.positionSections.map(section => section.kind),
-		"cash",
-		"recentOperations",
-		"recentEvents",
-		"incomeSummary",
-	];
+	const activeSection = props.positionSections.find(
+		section => section.kind === filter,
+	) ?? props.positionSections[0];
+
+	const positionKindLabels: Record<AccountPagePositionSection["kind"], string> = {
+		bonds: t("portfolio.positionKinds.bonds"),
+		other: t("portfolio.positionKinds.other"),
+		stocks: t("portfolio.positionKinds.stocks"),
+	};
+
+	const filterOptions = props.positionSections.map(section => ({
+		label: positionKindLabels[section.kind],
+		value: section.kind,
+	}));
 
 	return (
 		<Stack gap="lg">
@@ -62,6 +78,26 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				? <Alert role="status">{t("investment.partial")}</Alert>
 				: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
 
+			{!props.partial && props.unrealizedReturns.length > 0 && (
+				<Stack
+					aria-label={t("portfolio.unrealizedResult")}
+					component="section"
+					gap={4}
+				>
+					<Text fw={600}>{t("portfolio.unrealizedResult")}</Text>
+
+					<Group gap="md">
+						{props.unrealizedReturns.map(total => (
+							<Text key={total.currency}>{formatMoney(total)}</Text>
+						))}
+					</Group>
+
+					<Text c="dimmed" size="xs">
+						{t("portfolio.unrealizedResultCaption")}
+					</Text>
+				</Stack>
+			)}
+
 			{!props.partial && (
 				<PortfolioStructure
 					key={props.accountId}
@@ -69,70 +105,73 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				/>
 			)}
 
-			<Accordion
-				classNames={{
-					chevron: classes.accordionChevron,
-					control: classes.accordionControl,
-					label: classes.accordionLabel,
-					panel: classes.accordionPanel,
-				}}
-				defaultValue={defaultValue}
-				multiple
+			<Tabs
+				classNames={{ list: classes.tabsList }}
+				defaultValue="positions"
+				keepMounted={false}
 			>
-				{props.positionSections.map(section => (
-					<Accordion.Item key={section.kind} value={section.kind}>
-						<Accordion.Control>
-							{t(positionSectionTitleKey(section.kind))}
-						</Accordion.Control>
+				<Tabs.List aria-label={t("portfolio.sections")} mb="md">
+					<Tabs.Tab value="positions">
+						{t("portfolio.tabs.positions")}
+					</Tabs.Tab>
 
-						<Accordion.Panel>
-							<PositionSection section={section} />
-						</Accordion.Panel>
-					</Accordion.Item>
-				))}
+					<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
 
-				<Accordion.Item value="cash">
-					<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
+					<Tabs.Tab value="operations">
+						{t("portfolio.tabs.operations")}
+					</Tabs.Tab>
 
-					<Accordion.Panel>
-						<CurrencyCards amounts={props.portfolio.cashBalances} />
-					</Accordion.Panel>
-				</Accordion.Item>
+					<Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
 
-				<Accordion.Item value="recentOperations">
-					<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
+					<Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
+				</Tabs.List>
 
-					<Accordion.Panel>
-						<RecentOperations operations={props.recentOperations} />
-					</Accordion.Panel>
-				</Accordion.Item>
-
-				<Accordion.Item value="recentEvents">
-					<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
-
-					<Accordion.Panel>
-						<BrokerageEventsPreview events={props.recentEvents} />
-					</Accordion.Panel>
-				</Accordion.Item>
-
-				<Accordion.Item value="incomeSummary">
-					<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
-
-					<Accordion.Panel>
-						{!!props.incomeSummary && (
-							<IncomeSummary {...props.incomeSummary} />
+				<Tabs.Panel value="positions">
+					<Stack gap="md">
+						{props.positionSections.length > 1 && (
+							<div className={classes.positionFilter}>
+								<SegmentedControl
+									aria-label={t("portfolio.positionFilter")}
+									data={filterOptions}
+									onChange={setFilter}
+									value={activeSection?.kind}
+								/>
+							</div>
 						)}
-					</Accordion.Panel>
-				</Accordion.Item>
-			</Accordion>
+
+						{activeSection && <PositionSection section={activeSection} />}
+					</Stack>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="cash">
+					<CurrencyCards amounts={props.portfolio.cashBalances} />
+				</Tabs.Panel>
+
+				<Tabs.Panel value="operations">
+					<RecentOperations
+						moreLabel={t("portfolio.more")}
+						operations={props.recentOperations}
+					/>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="events">
+					<BrokerageEventsPreview
+						events={props.recentEvents}
+						moreLabel={t("portfolio.more")}
+					/>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="income">
+					{!!props.incomeSummary && (
+						<IncomeSummary
+							{...props.incomeSummary}
+							moreLabel={t("portfolio.more")}
+						/>
+					)}
+				</Tabs.Panel>
+			</Tabs>
 		</Stack>
 	);
 };
 
-function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
-	if (kind === "stocks") return "portfolio.stocks";
-
-	return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
-}
-
 export { AccountPageLoaded };

src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx

@@ -34,7 +34,9 @@ const AccountPageLoading: FC = () => {
 
 			<Skeleton height={260} radius="sm" />
 
-			{["first", "second", "third"].map(placeholder => <Skeleton height={52} key={placeholder} radius="sm" />)}
+			<Skeleton height={40} radius="sm" />
+
+			<Skeleton height={220} radius="sm" />
 		</LoadingSkeleton>
 	);
 };

src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx

@@ -9,8 +9,8 @@ import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
 
 import { formatMoney } from "@/shared/lib";
 
-type IncomeSummaryProps
-	= | {
+type IncomeSummaryProps = { moreLabel?: string } & (
+	| {
 		state: "empty";
 		to: string;
 	}
@@ -27,7 +27,8 @@ type IncomeSummaryProps
 	| {
 		state: "partial";
 		to: string;
-	};
+	}
+);
 
 const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 	const { t } = useTranslation();
@@ -56,7 +57,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 				<Text c="dimmed">{t("income.summaryEmpty")}</Text>
 
 				<Button component={Link} to={props.to} variant="subtle">
-					{t("income.open")}
+					{props.moreLabel ?? t("income.open")}
 				</Button>
 			</Stack>
 		);
@@ -75,7 +76,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 			))}
 
 			<Button component={Link} to={props.to} variant="subtle">
-				{t("income.open")}
+				{props.moreLabel ?? t("income.open")}
 			</Button>
 		</Stack>
 	);

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.stories.tsx

@@ -15,6 +15,8 @@ const syntheticPosition
 		logoName: null,
 		logoSrc: null,
 		quantity: "100",
+		returnPercent: "25",
+		returnPercentText: "+25,00 %",
 		returnText: "+5 000 ₽",
 		returnTone: "positive",
 		shareText: "20%",
@@ -73,6 +75,8 @@ export const BondLoss: Story
 					"Учебные облигации для долгосрочных накоплений, выпуск 2030",
 				isin: "DEMO-BOND-2030",
 				quantity: "10",
+				returnPercent: "-5",
+				returnPercentText: "-5,00 %",
 				returnText: "−500 ₽",
 				returnTone: "negative",
 				shareText: "7,6%",
@@ -123,6 +127,8 @@ export const MissingValuation: Story
 				averagePurchasePrice: null,
 				currentValue: null,
 				displayName: "Учебная позиция без текущей оценки",
+				returnPercent: null,
+				returnPercentText: null,
 				returnText: null,
 				returnTone: undefined,
 				shareText: null,

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.view.tsx

@@ -6,7 +6,10 @@ import { Link } from "react-router";
 
 import { formatMoney } from "@/shared/lib";
 
-import type { AccountPagePosition, AccountPagePositionSection } from "../../../../model/positions";
+import type {
+	AccountPagePosition,
+	AccountPagePositionSection,
+} from "../../../../model/positions";
 
 import classes from "../../AccountPage.module.css";
 import { PositionLogo } from "../PositionLogo.view";
@@ -26,8 +29,15 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 		: undefined;
 
 	let returnText = position.returnText;
-	if (returnText && !isExpanded)
+
+	if (returnText && position.returnPercentText) {
+		returnText += ` · ${position.returnPercentText}`;
+	}
+
+	if (returnText && !isExpanded) {
 		returnText = t("portfolio.return", { value: returnText });
+	}
+
 	const instrumentTo = position.instrumentTo;
 
 	const identifier

src/pages/account/ui/AccountPage/components/PositionGroupCard.view.tsx

@@ -6,7 +6,10 @@ import { Link } from "react-router";
 
 import { formatMoney } from "@/shared/lib";
 
-import type { AccountPagePositionGroup, AccountPagePositionSection } from "../../../model/positions";
+import type {
+	AccountPagePositionGroup,
+	AccountPagePositionSection,
+} from "../../../model/positions";
 
 import classes from "../AccountPage.module.css";
 import { PositionLogo } from "./PositionLogo.view";
@@ -60,6 +63,16 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 						? classes[position.returnTone]
 						: undefined;
 
+					const returnPercent = position.returnPercentText
+						? ` · ${position.returnPercentText}`
+						: "";
+
+					const returnValue = `${position.returnText ?? ""}${returnPercent}`;
+
+					const returnText = kind === "other"
+						? t("portfolio.return", { value: returnValue })
+						: returnValue;
+
 					return (
 						<Stack
 							className={classes.accountPosition}
@@ -89,9 +102,7 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 
 								{!!position.returnText && (
 									<Text className={appearanceClass} size="sm">
-										{kind === "other"
-											? t("portfolio.return", { value: position.returnText })
-											: position.returnText}
+										{returnText}
 									</Text>
 								)}
 							</Group>

src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx

@@ -10,6 +10,7 @@ import { LedgerEntryRow } from "@/entities/broker-operation";
 import type { AccountPageRecentOperations } from "../../../model/previews";
 
 type RecentOperationsProps = {
+	moreLabel?: string;
 	operations: AccountPageRecentOperations;
 };
 
@@ -44,7 +45,7 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 				))}
 
 			<Button component={Link} to={operations.to} variant="subtle">
-				{t("ledger.open")}
+				{props.moreLabel ?? t("ledger.open")}
 			</Button>
 		</Stack>
 	);

src/pages/account/ui/AccountPage/position-groups.test.tsx

@@ -36,6 +36,8 @@ describe("Positions grouped by security", () => {
 		).toHaveAttribute("href", "/accounts/a");
 		expect(within(rows[0]).getByText("Количество: 1.25")).toBeInTheDocument();
 		expect(within(rows[0]).getByText("375 ₽")).toBeInTheDocument();
+		expect(within(rows[0]).getByText("+25 ₽ · +7,14 %"))
+			.toBeInTheDocument();
 		expect(
 			within(rows[0]).getByText("Средняя цена: 280 ₽"),
 		).toBeInTheDocument();

src/pages/account/ui/AccountPage/position-layout.browser.test.tsx

@@ -40,6 +40,8 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
 					logoName: null,
 					logoSrc: null,
 					quantity: "10",
+					returnPercent: null,
+					returnPercentText: null,
 					returnText: null,
 					shareText: null,
 					ticker: null,