ci: validate release PR commits independently (WealthLedger/main#30)

.ai/conventions/data.md

@@ -30,8 +30,7 @@ backend checkout и не проверяют backend runtime OpenAPI; измен
 shape/status/route сохраняет
 публичный контракт предоставленного snapshot.
 Одна UI-модель не требует менять API. `openapi:generate` работает offline от snapshot;
-`openapi:check` запускает native `--check` того же CLI и падает при устаревших
+`openapi:check` генерирует во временный каталог и сравнивает, не меняя tracked files.
-generated types, не меняя tracked files.
 
 ## Auth и invalidation
 

.gitea/workflows/verify.yml

@@ -34,7 +34,11 @@ jobs:
           HEAD_SHA: ${{ github.event.pull_request.head.sha }}
         run: |
           printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
-          npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
+          if [[ "$PR_TITLE" =~ ^chore\(release\):\ [0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            npm run commitlint -- --strict --from "$HEAD_SHA^" --to "$HEAD_SHA"
+          else
+            npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
+          fi
 
   security:
     needs: commits

CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [1.1.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.0.0...v1.1.0) (2026-10-12)
+
+### Features
+
+* add stock screener ([a84411d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a84411df39dc131290e9f5b5d9313fed17cc629a))
+* align investment client with hourly sync ([432cca2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/432cca299f3a9a9e45b2697527369ee95f2d0adc))
+* render hourly investment states ([3c226f8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3c226f8c29efceccb75af0d6424639a757534f39))
+
+### Bug Fixes
+
+* align frontend workflow rules (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([c315f80](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c315f80b1b07ae0888366512ec157b8e29c81d62))
+* preserve latest stock screener result ([cec9c63](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cec9c6348a389f16f272dac5533aebc9d12ceae8))
+* show bank summary totals ([20b2cdf](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/20b2cdfd432f8b01e447f68657cf5c685a297f1e))
+
+### Documentation
+
+* clarify frontend verification policy ([cac4351](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cac4351bc4abf2cec7c5b6611a74d87bf4ec2f70))
+* pin frontend workflow reference (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([0d747cc](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0d747cc93ee08c337cf300c0367612708f45dfb9))
+
+### CI
+
+* skip checks on PR metadata edits ([c882120](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c8821200ce699dab1ce65360d1968d5877a2e78b))
+
+### Maintenance
+
+* align frontend engineering workflow (WealthLedger/main[#27](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/27)) ([617edfd](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/617edfd489a6a84bb33b57386eca4eb54661f4f0))
+
 ## [1.0.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.4.0...v1.0.0) (2026-10-07)
 
 ### ⚠ BREAKING CHANGES

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "wealth-ledger-frontend",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "wealth-ledger-frontend",
-			"version": "1.0.0",
+			"version": "1.1.0",
 			"workspaces": [
 				"packages/*"
 			],

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "wealth-ledger-frontend",
 	"private": true,
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"type": "module",
 	"engines": {
 		"node": "24.21.0"
@@ -20,7 +20,7 @@
 		"test:coverage": "npm run build:packages && vitest run --coverage",
 		"test:lint": "node --test scripts/test-eslint.mjs",
 		"openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts",
-		"openapi:check": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts --check",
+		"openapi:check": "node scripts/check-openapi.mjs",
 		"knip": "npm run build:packages && knip",
 		"deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long",
 		"verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && eslint . --max-warnings=0 && npm run test:lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry",

scripts/check-openapi.mjs

@@ -0,0 +1,45 @@
+import { spawnSync } from "node:child_process";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import nodePath from "node:path";
+
+const temporaryDirectory = await mkdtemp(
+	nodePath.join(tmpdir(), "wealth-ledger-openapi-"),
+);
+
+const generatedPath = nodePath.join(temporaryDirectory, "schema.d.ts");
+const committedPath = nodePath.resolve("src/shared/api/generated/schema.d.ts");
+const cliPath = nodePath.resolve("node_modules/openapi-typescript/bin/cli.js");
+let exitCode = 0;
+
+try {
+	const generated = spawnSync(
+		process.execPath,
+		[cliPath, "src/shared/api/spec/openapi.json", "-o", generatedPath],
+		{ encoding: "utf8" },
+	);
+
+	if (generated.status === 0) {
+		const [committed, current] = await Promise.all([
+			readFile(committedPath, "utf8"),
+			// eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames.
+			readFile(generatedPath, "utf8"),
+		]);
+
+		if (committed !== current) {
+			console.error(
+				"Generated OpenAPI types are stale. Run `npm run openapi:generate` and commit the result.",
+			);
+			exitCode = 1;
+		}
+	}
+	else {
+		process.stderr.write(generated.stderr || generated.stdout);
+		exitCode = generated.status ?? 1;
+	}
+}
+finally {
+	await rm(temporaryDirectory, { force: true, recursive: true });
+}
+
+process.exitCode = exitCode;

scripts/test-eslint.mjs

@@ -85,7 +85,7 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as
 			"security/detect-non-literal-regexp",
 		],
 		[
-			"scripts/test-pre-commit.mjs",
+			"scripts/check-openapi.mjs",
 			"import { exec } from \"node:child_process\"; exec(process.argv[2]);",
 			"security/detect-child-process",
 		],

src/app/routes/AppRoutes/AllAccounts.test.tsx

@@ -95,6 +95,10 @@ const analytics: IncomeAnalytics
 			},
 		],
 		period: { from: "2026-08-01", to: "2026-08-31" },
+		previous: {
+			period: { from: "2026-07-01", to: "2026-07-31" },
+			totalsByCurrency: [],
+		},
 		totalsByCurrency: [
 			{
 				coupon: { currency: "RUB", value: "2" },
@@ -103,6 +107,7 @@ const analytics: IncomeAnalytics
 				total: { currency: "RUB", value: "2" },
 			},
 		],
+		yearComparison: null,
 	};
 
 const CurrentLocation: FC = () => {

src/entities/bank-card/model/form.schema.ts

@@ -6,7 +6,6 @@ import { calendarDate } from "@/shared/lib";
 import { bankToday } from "./form-validation";
 import { moneyCents } from "./money";
 const MAX_CARD_NAME_LENGTH = 100;
-const paymentSystemValues = ["mir", "visa", "mastercard"] as const;
 const MIN_BALANCE_KOPECKS = -9_223_372_036_854_775_808n;
 const MAX_BALANCE_KOPECKS = 9_223_372_036_854_775_807n;
 
@@ -64,7 +63,7 @@ const bankCardSchema = z.object({
 	openingBalance: moneySchema,
 	openingDate: bankDateSchema,
 	paymentSystem: z
-		.enum(["", ...paymentSystemValues], {
+		.enum(["", "mir", "visa", "mastercard"], {
 			error: validationMessage("bank.validation.paymentSystem"),
 		})
 		.optional(),
@@ -76,6 +75,5 @@ export {
 	bankCardSchema,
 	type BankCardValues,
 	bankDateSchema,
-	paymentSystemValues,
 	positiveMoneySchema,
 };

src/entities/bank-card/ui/BankCardForm/BankCardFields.vm.ts

@@ -1,7 +1,8 @@
 import { useController, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { type BankCardValues, paymentSystemValues } from "../../model/form.schema";
+import type { BankCardValues } from "../../model/form.schema";
+
 import { bankDateField } from "../bankDateField";
 
 function useBankCardFieldsVm() {
@@ -15,7 +16,7 @@ function useBankCardFieldsVm() {
 	const { field: openingDateField } = useController({ control, name: "openingDate" });
 	const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });
 
-	const paymentSystems = paymentSystemValues.map(value => ({
+	const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
 		label: t(`bank.paymentSystems.${value}`),
 		value,
 	}));

src/entities/broker-operation/model/display.ts

@@ -36,12 +36,6 @@ function entryLabelKey(operation: BrokerageOperation): string {
 	return `ledger.category.${operation.category}`;
 }
 
-function isIncomePayment(operation: BrokerageOperation): boolean {
-	return [OperationType.Coupon, OperationType.Dividend].some(type =>
-		isOperationType(operation.type, type),
-	);
-}
-
 function isOperationType(value: unknown, expected: OperationType): boolean {
 	return value === expected;
 }
@@ -115,4 +109,4 @@ function paymentPresentation(
 	};
 }
 
-export { isIncomePayment, operationLabelKey, paymentPresentation };
+export { operationLabelKey, paymentPresentation };

src/entities/broker-operation/ui/LedgerEntryRow.tsx

@@ -11,11 +11,10 @@ import {
 	formatSnapshotTime,
 	instrumentLogoUrl,
 } from "@/shared/lib";
-import { PayoutCard } from "@/shared/ui";
 
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 
-import { isIncomePayment, operationLabelKey, paymentPresentation } from "../model/display";
+import { operationLabelKey, paymentPresentation } from "../model/display";
 
 type LedgerEntryRowProps = {
 	operation: BrokerageOperation;
@@ -76,28 +75,6 @@ const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
 	}
 	else details = undefined;
 
-	if (isIncomePayment(operation)) {
-		const extraMetadata = [
-			instrument,
-			props.withDetails ? null : operation.account?.name,
-		].filter(Boolean).join(" · ");
-
-		return (
-			<PayoutCard
-				details={details}
-				extraMetadata={extraMetadata}
-				imageSrc={instrumentLogoUrl(operation.logoName)}
-				initial={(instrument.trim()[0] ?? "?").toUpperCase()}
-				kind="executed"
-				occurredAt={formatSnapshotTime(operation.occurredAt)}
-				payment={operation.payment}
-				title={operation.description || t(operationLabelKey(operation.type))}
-				typeLabel={t(paymentPresentation(operation).label)}
-				wrap={props.wrap}
-			/>
-		);
-	}
-
 	return (
 		<EntryCard
 			details={details}

src/entities/brokerage-event/ui/BrokerageEventCard.tsx

@@ -4,7 +4,6 @@ import { EntryCard } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
-import { PayoutCard } from "@/shared/ui";
 
 import type { BrokerageEvent } from "../api/useBrokerageEvents";
 
@@ -16,27 +15,6 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
 
 	const date = formatDate(event.date);
 
-	if (event.type === "coupon" || event.type === "dividend") {
-		const title = [t(`events.type.${event.type}`), event.displayName].join(" · ");
-
-		const extraMetadata = [event.isin, event.account?.name]
-			.filter(Boolean)
-			.join(" · ");
-
-		return (
-			<PayoutCard
-				date={date}
-				dateKind={event.dateKind}
-				extraMetadata={extraMetadata}
-				imageSrc={instrumentLogoUrl(event.logoName)}
-				initial={(event.ticker.trim()[0] ?? "?").toUpperCase()}
-				kind="forecast"
-				projectedAmount={event.projectedAmount}
-				title={title}
-			/>
-		);
-	}
-
 	const metadata = [
 		date,
 		event.dateKind === "registry"
@@ -62,7 +40,7 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
 			title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
 			tone="neutral"
 			value={projectedAmount}
-			valueLabel={t("payout.forecast")}
+			valueLabel={t("events.projectedAmount")}
 		/>
 	);
 };

src/entities/income/api/useIncome.ts

@@ -4,6 +4,9 @@ type IncomeAnalytics = NonNullable<
 	paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"]
 >;
 
+type IncomeAnalyticsMeta
+	= paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["meta"];
+
 type IncomeSummary = NonNullable<
 	paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"]
 >;
@@ -44,6 +47,7 @@ function useIncomeSummary(accountId?: string) {
 
 export {
 	type IncomeAnalytics,
+	type IncomeAnalyticsMeta,
 	type IncomeSummary,
 	useIncomeAnalytics,
 	useIncomeSummary,

src/entities/income/index.ts

@@ -1,5 +1,6 @@
 export {
 	type IncomeAnalytics,
+	type IncomeAnalyticsMeta,
 	type IncomeSummary,
 	useIncomeAnalytics,
 	useIncomeSummary,

src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx

@@ -156,7 +156,7 @@ describe("AccountEventsPage", () => {
 		expect(screen.getAllByText(/RU000A0JX0J2$/)).toHaveLength(1);
 		expect(screen.getByText("25.08.2026")).toBeVisible();
 		expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument();
-		expect(screen.getAllByText("Прогноз")).toHaveLength(2);
+		expect(screen.getAllByText("Ожидаемая сумма")).toHaveLength(2);
 		const logo = screen.queryByAltText("");
 		expect(logo).toHaveAttribute(
 			"src",

src/pages/account-income/model/display.test.ts

@@ -2,25 +2,168 @@ import { describe, expect, it } from "vitest";
 
 import type { IncomeAnalytics } from "@/entities/income";
 
+import { resource } from "@/test/resource";
+
 import { toIncomeDisplayModel } from "./display";
 
-describe("income payments display", () => {
+const analytics: IncomeAnalytics = {
-	it("keeps repeated IDs, order and logo revisions without reconstructing financial data", () => {
+	accountId: "account-1",
-		const payment = {
+	bucketGranularity: "day",
-			id: "same",
+	buckets: [],
-			instrumentKey: "bond:RUB",
+	calculatedAt: "2026-08-27T00:00:00Z",
-			logoName: null,
+	entries: [],
-		} as IncomeAnalytics["entries"][number];
+	instruments: [],
+	period: { from: "2026-08-01", to: "2026-08-27" },
+	previous: {
+		period: { from: "2026-07-01", to: "2026-07-31" },
+		totalsByCurrency: [comparison("RUB")],
+	},
+	totalsByCurrency: [],
+	yearComparison: null,
+};
 
-		const analytics = {
+function comparison(currency: string) {
-			entries: [payment, payment, { ...payment, logoName: "bond.png" }],
+	return {
-		} as IncomeAnalytics;
+		compared: summary(currency, "1", "0"),
+		currency,
+		difference: summary(currency, "9", "2"),
+		selected: summary(currency, "10", "2"),
+	};
+}
 
-		const display = toIncomeDisplayModel(analytics);
+function money(currency: string, value: string) {
+	return { currency, value };
+}
 
-		expect(display.entries.map(({ operation }) => operation)).toEqual(
+function summary(currency: string, coupon: string, dividend: string) {
-			analytics.entries,
+	return {
+		coupon: money(currency, coupon),
+		currency,
+		dividend: money(currency, dividend),
+		total: money(currency, String(Number(coupon) + Number(dividend))),
+	};
+}
+
+describe("income comparison display", () => {
+	it.each([
+		["25", "100", "+25 %"],
+		["-25", "100", "-25 %"],
+		["0", "100", "0 %"],
+		["-0.000", "100", "0 %"],
+		["0.0001", "100", "0 %"],
+		["1", "3", "+33,3 %"],
+		["0.01", "0.04", "+25 %"],
+		["123456789012345678.123456789", "123456789012345678.123456789", "+100 %"],
+		[
+			"10",
+			"0",
+			null,
+		],
+		[
+			"0",
+			"0",
+			null,
+		],
+		[
+			"10",
+			"-0.00",
+			null,
+		],
+		[
+			"10",
+			"-100",
+			null,
+		],
+		[
+			"9".repeat(400),
+			"1",
+			null,
+		],
+		[
+			"1",
+			"9".repeat(400),
+			null,
+		],
+	])("formats change %s against base %s", (difference, base, expected) => {
+		const value = comparison("RUB");
+		value.difference.coupon = money("RUB", difference);
+		value.compared.coupon = money("RUB", base);
+
+		const display = toIncomeDisplayModel({
+			...analytics,
+			yearComparison: {
+				period: { from: "2025-08-01", to: "2025-08-27" },
+				totalsByCurrency: [value],
+			},
+		});
+
+		const result = display?.comparison?.values[0];
+		expect(
+			result?.percentages.coupon?.replaceAll("\u{A0}", " ")
+
+			?? null,
+		).toBe(expected);
+		expect(result?.difference.coupon.value).toBe(difference);
+		expect(result?.compared.coupon.value).toBe(base);
+	});
+
+	it("formats calendar ranges across years and preserves separate currencies", () => {
+		const display = toIncomeDisplayModel({
+			...analytics,
+			period: { from: "2025-12-01", to: "2026-01-09" },
+			yearComparison: {
+				period: { from: "2024-12-01", to: "2025-01-09" },
+				totalsByCurrency: [comparison("RUB"), comparison("USD")],
+			},
+		});
+
+		expect(display?.comparison?.selectedPeriod.replaceAll(/\s/g, " ")).toBe(
+			"01.12.2025 – 09.01.2026",
 		);
-		expect(new Set(display.entries.map(({ key }) => key)).size).toBe(3);
+		expect(display?.comparison?.comparedPeriod.replaceAll(/\s/g, " ")).toBe(
+			"01.12.2024 – 09.01.2025",
+		);
+		expect(display?.comparison?.values.map(value => value.currency)).toEqual([
+			"RUB",
+			"USD",
+		]);
 	});
 });
+
+it("maps comparison notices by role regardless of dependency order or resource key", () => {
+	const selected = { ...resource(analytics).meta, role: "selected" as const };
+
+	const previous
+		= {
+			...resource(null).meta,
+			lastAttempt: {
+				finishedAt: "2026-08-14T00:01:00Z",
+				problems: [],
+				startedAt: "2026-08-14T00:00:00Z",
+				state: "failed" as const,
+			},
+			resourceKey: "opaque/year-looking-key",
+			role: "previous" as const,
+		};
+
+	const year = {
+		...resource(null).meta,
+		resourceKey: "opaque/previous-looking-key",
+		role: "year" as const,
+		unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
+	};
+
+	for (const dependencies of [
+		[selected, previous, year],
+		[year, selected, previous],
+	]) {
+		const display = toIncomeDisplayModel(analytics, {
+			...resource(analytics).meta,
+			dependencies,
+		});
+
+		expect(display?.previousNotice).toBe("comparisonFailed");
+		expect(display?.yearNotice).toBe("yearUnavailable");
+		expect(display?.previousComparison).not.toBeNull();
+	}
+});

src/pages/account-income/model/display.ts

@@ -1,11 +1,102 @@
-import type { IncomeAnalytics } from "@/entities/income";
+import type { IncomeAnalytics, IncomeAnalyticsMeta } from "@/entities/income";
+
+import { formatDate } from "@/shared/lib";
+
+import type { IncomePeriod } from "./period";
+
+type ComparisonNotice
+	= | "comparisonFailed"
+		| "comparisonPending"
+		| "previousUnavailable"
+		| "yearUnavailable";
 
 type IncomeDisplayModel = {
+	comparison: null
+		| {
+			comparedPeriod: string;
+			selectedPeriod: string;
+			values: (NonNullable<
+				IncomeAnalytics["yearComparison"]
+			>["totalsByCurrency"][number] & {
+				percentages: Record<"coupon"
+				| "dividend"
+				| "total", null | string>;
+			})[];
+		};
 	entries: { key: string; operation: IncomeAnalytics["entries"][number] }[];
+	previousComparison: IncomeDisplayModel["comparison"];
+	previousNotice: ComparisonNotice;
+	yearNotice: ComparisonNotice;
 };
 
+function comparisonDisplay(
+	period: IncomePeriod,
+	comparison: IncomeAnalytics["yearComparison"],
+): IncomeDisplayModel["comparison"] {
+	if (!comparison)
+		return null;
+
+	return {
+		comparedPeriod: formatComparisonPeriod(comparison.period),
+		selectedPeriod: formatComparisonPeriod(period),
+		values: comparison.totalsByCurrency.map(value => ({
+			...value,
+			percentages: {
+				coupon: formatIncomeChange(
+					value.difference.coupon.value,
+					value.compared.coupon.value,
+				),
+				dividend: formatIncomeChange(
+					value.difference.dividend.value,
+					value.compared.dividend.value,
+				),
+				total: formatIncomeChange(
+					value.difference.total.value,
+					value.compared.total.value,
+				),
+			},
+		})),
+	};
+}
+
+function comparisonNotice(
+	dependency:
+		IncomeAnalyticsMeta["dependencies"][number] | undefined,
+	unavailable: "previousUnavailable" | "yearUnavailable",
+): ComparisonNotice {
+	if (!dependency || dependency.unavailableReason) return unavailable;
+
+	return dependency.lastAttempt.state === "failed"
+		? "comparisonFailed"
+		: "comparisonPending";
+}
+
+function formatComparisonPeriod(period: IncomePeriod): string {
+	return `${formatDate(period.from)} – ${formatDate(period.to)}`;
+}
+
+function formatIncomeChange(
+	difference: string,
+	compared: string,
+): null | string {
+	// Display-only ratio; server-provided Money values remain exact decimal strings.
+	const base = Number(compared);
+	if (!Number.isFinite(base) || base <= 0)
+		return null;
+	const ratio = Number(difference) / base;
+	if (!Number.isFinite(ratio))
+		return null;
+
+	return new Intl.NumberFormat("ru-RU", {
+		maximumFractionDigits: 1,
+		signDisplay: "exceptZero",
+		style: "percent",
+	}).format(ratio);
+}
+
 function toIncomeDisplayModel(
 	analytics: IncomeAnalytics,
+	meta?: IncomeAnalyticsMeta,
 ): IncomeDisplayModel {
 	const entries: IncomeDisplayModel["entries"] = [];
 	const occurrences = new Map<string, number>();
@@ -25,7 +116,17 @@ function toIncomeDisplayModel(
 		});
 	}
 
-	return { entries };
+	const dependencies = meta?.dependencies ?? [];
+	const previous = dependencies.find(({ role }) => role === "previous");
+	const year = dependencies.find(({ role }) => role === "year");
+
+	return {
+		comparison: comparisonDisplay(analytics.period, analytics.yearComparison),
+		entries,
+		previousComparison: comparisonDisplay(analytics.period, analytics.previous),
+		previousNotice: comparisonNotice(previous, "previousUnavailable"),
+		yearNotice: comparisonNotice(year, "yearUnavailable"),
+	};
 }
 
 export { type IncomeDisplayModel, toIncomeDisplayModel };

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.module.css

@@ -22,6 +22,123 @@
 	min-width: 0;
 }
 
+.comparison {
+	container-type: inline-size;
+}
+
+.comparisonGrid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--mantine-spacing-sm);
+}
+
+.comparisonPanel {
+	min-width: 0;
+	padding: var(--mantine-spacing-md);
+	border-radius: var(--mantine-radius-md);
+	border-top: 3px solid var(--mantine-color-gray-4);
+	background: var(--mantine-color-gray-0);
+}
+
+.comparisonPanel[data-kind="selected"] {
+	border-color: var(--mantine-color-blue-6);
+	background: var(--mantine-color-blue-0);
+}
+
+.comparisonPanel[data-tone="positive"] {
+	border-color: var(--mantine-color-green-8);
+	background: var(--mantine-color-green-0);
+}
+
+.comparisonPanel[data-tone="negative"] {
+	border-color: var(--mantine-color-red-8);
+	background: var(--mantine-color-red-0);
+}
+
+.comparisonLabel,
+.comparisonValues dt {
+	color: var(--mantine-color-gray-7);
+}
+
+.comparisonValues {
+	margin: var(--mantine-spacing-md) 0 0;
+	font-size: var(--mantine-font-size-sm);
+}
+
+.comparisonValues dd {
+	min-width: 0;
+	margin: 0;
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+}
+
+.comparisonTotal {
+	margin-bottom: var(--mantine-spacing-md);
+	padding-bottom: var(--mantine-spacing-md);
+	border-bottom: 1px solid var(--mantine-color-gray-3);
+}
+
+.comparisonTotal dd {
+	margin-top: 4px;
+	font-size: var(--mantine-h2-font-size);
+	line-height: 1.3;
+	font-weight: 700;
+	letter-spacing: -0.025em;
+}
+
+.comparisonValues dd[data-tone="positive"] {
+	color: color-mix(
+		in srgb,
+		var(--mantine-color-green-9) 85%,
+		var(--mantine-color-black)
+	);
+}
+
+.comparisonValues dd[data-tone="negative"] {
+	color: var(--mantine-color-red-9);
+}
+
+.comparisonValues dd[data-tone="neutral"] {
+	color: var(--mantine-color-gray-7);
+}
+
+.comparisonPanel[data-kind="selected"] .comparisonTotal dd {
+	color: var(--mantine-color-blue-8);
+}
+
+.comparisonDetail {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 4px var(--mantine-spacing-xs);
+	margin-top: var(--mantine-spacing-xs);
+}
+
+.comparisonPercent {
+	display: inline-block;
+	margin-left: var(--mantine-spacing-xs);
+	padding: 2px 6px;
+	border-radius: var(--mantine-radius-sm);
+	background: var(--mantine-color-white);
+	font-size: var(--mantine-font-size-xs);
+	font-weight: 600;
+	line-height: 1.5;
+	letter-spacing: normal;
+	vertical-align: middle;
+}
+
+.comparisonNotice {
+	background: var(--mantine-color-gray-0);
+	border-left: 3px solid var(--mantine-color-gray-4);
+}
+
+@container (min-width: 42em) {
+	.comparisonGrid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
 @media (max-width: 35.999em) {
 	.fields {
 		grid-template-columns: minmax(0, 1fr);

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx

@@ -72,9 +72,23 @@ const analytics
 			},
 		],
 		period: { from: "2026-08-01", to: "2026-08-27" },
+		previous: {
+			period: { from: "2026-07-01", to: "2026-07-31" },
+			totalsByCurrency: [comparison("RUB")],
+		},
 		totalsByCurrency: [summary("RUB", "10", "2")],
+		yearComparison: null,
 	} satisfies IncomeAnalytics & { instruments: [unknown] };
 
+function comparison(currency: string) {
+	return {
+		compared: summary(currency, "1", "0"),
+		currency,
+		difference: summary(currency, "9", "2"),
+		selected: summary(currency, "10", "2"),
+	};
+}
+
 function entry(): IncomeAnalytics["entries"][number] {
 	return {
 		accruedInterest: null,
@@ -358,11 +372,19 @@ describe("AccountIncomePage", () => {
 		expect(within(panel).getByText("−2 ₽")).toBeInTheDocument();
 	});
 
-	it("renders realized income without comparison blocks or event requests", async () => {
+	it("renders realized text and comparisons without subscribing to events", async () => {
 		const eventsRequest = vi.fn(() => new HttpResponse(null, { status: 503 }));
 		server.use(
 			http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
-				HttpResponse.json(resource(analytics)),
+				HttpResponse.json(
+					resource({
+						...analytics,
+						yearComparison: {
+							period: { from: "2025-08-01", to: "2025-08-27" },
+							totalsByCurrency: [comparison("RUB")],
+						},
+					}),
+				),
 			),
 			http.get("*/api/v1/brokerage-accounts/account-1/events", eventsRequest),
 		);
@@ -377,9 +399,72 @@ describe("AccountIncomePage", () => {
 		expect(screen.queryByText("Динамика")).not.toBeInTheDocument();
 		expect(eventsRequest).not.toHaveBeenCalled();
 		expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
-		expect(screen.queryByText("Предыдущий период")).not.toBeInTheDocument();
+		const year = screen.getByRole("region", { name: "Годом ранее" });
-		expect(screen.queryByText("Годом ранее")).not.toBeInTheDocument();
+
-		expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
+		const selected = within(year).getByRole("region", {
+			name: "01.08.2026 – 27.08.2026",
+		});
+
+		expect(
+			screen.getByRole("region", { name: "01.08.2025 – 27.08.2025" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("heading", { name: "Предыдущий период" }),
+		).toBeVisible();
+		expect(screen.queryByText("Выбранный период")).not.toBeInTheDocument();
+		expect(screen.queryByText("Сравниваемый период")).not.toBeInTheDocument();
+		expect(
+			screen.getByRole("heading", { level: 2, name: "Годом ранее" }),
+		).toBeInTheDocument();
+		expect(screen.queryByText("Сравнения")).not.toBeInTheDocument();
+		expect(screen.queryByText("RUB", { exact: true })).not.toBeInTheDocument();
+
+		for (const amount of ["10 ₽", "2 ₽", "12 ₽"]) {
+			expect(within(selected).getByText(amount)).toBeInTheDocument();
+		}
+
+		const difference = within(year).getByRole("region", { name: "Разница" });
+
+		for (const amount of ["+9 ₽", "+2 ₽", "+11 ₽"]) {
+			expect(within(difference).getByText(amount)).toBeInTheDocument();
+		}
+
+		expect(within(difference).getByText("+900 %")).toBeInTheDocument();
+		expect(within(difference).getByText("+1 100 %")).toBeInTheDocument();
+		expect(within(difference).queryByText("нет базы")).not.toBeInTheDocument();
+		expect(within(difference).getAllByText(/%$/)).toHaveLength(2);
+		expect(
+			// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
+			within(difference).getByText("+2 ₽").closest("dd"),
+		).toHaveTextContent(/^\+2 ₽$/);
+	});
+
+	it("shows the unavailable year state without falling back to the previous period", async () => {
+		const dependencies = [
+			{ ...resource(analytics).meta, role: "selected" as const },
+			{ ...resource(analytics).meta, role: "previous" as const },
+			{
+				...resource(null).meta,
+				role: "year" as const,
+				unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
+			},
+		];
+
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
+				HttpResponse.json(resource(analytics, { dependencies })),
+			),
+		);
+		renderPage();
+		expect(
+			await screen.findByText("Сравнение с годом ранее недоступно."),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole("region", { name: "Годом ранее" }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole("region", { name: "Предыдущий период" }),
+		).toBeVisible();
 	});
 
 	it("shows a quiet realized error", async () => {
@@ -663,3 +748,120 @@ describe("income period and snapshot boundary", () => {
 		expect(screen.queryByRole("button")).not.toBeInTheDocument();
 	});
 });
+
+it.each([false, true])(
+	"shows unavailable comparisons for absent roles without positional fallback (legacy=%s)",
+	async (legacy) => {
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
+				HttpResponse.json(
+
+					resource(
+						{ ...analytics, previous: null, yearComparison: null },
+						{
+							dependencies: legacy
+								? [
+										resource(null).meta,
+										resource(null).meta,
+										resource(null).meta,
+									]
+								: [],
+						},
+					),
+				),
+			),
+		);
+		renderPage();
+		expect(
+			await screen.findByText("Сравнение с предыдущим периодом недоступно."),
+		).toBeVisible();
+		expect(
+			screen.getByText("Сравнение с годом ранее недоступно."),
+		).toBeVisible();
+		expect(
+			screen.queryByText("Период сравнения ещё не загружен полностью."),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole("region", { name: "Выплаты" })).toBeVisible();
+	},
+);
+
+it("shows selected income before comparison coverage without inventing a zero baseline", async () => {
+	const dependencies = (["year", "selected", "previous"] as const).map(
+
+		role =>
+			({
+				...resource(role === "selected" ? analytics : null).meta,
+				role,
+			}),
+	);
+
+	server.use(
+		http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
+			HttpResponse.json(
+
+				resource(
+					{ ...analytics, previous: null, yearComparison: null },
+					{ dependencies },
+				),
+			),
+		),
+	);
+	renderPage();
+	expect(await screen.findByRole("region", { name: "Выплаты" })).toBeVisible();
+	expect(
+		screen.queryByRole("region", { name: "Год назад" }),
+	).not.toBeInTheDocument();
+	expect(screen.getAllByText("12 ₽").length).toBeGreaterThan(0);
+	expect(
+		screen.getAllByText("Период сравнения ещё не загружен полностью."),
+	).toHaveLength(2);
+	expect(
+		screen.queryByText("Сравнение с годом ранее недоступно."),
+	).not.toBeInTheDocument();
+	expect(
+		screen.queryByRole("region", { name: "Разница" }),
+	).not.toBeInTheDocument();
+	expect(screen.getByLabelText("Период")).toBeVisible();
+});
+
+it("keeps complete previous comparison while year source failed without inventing its amounts", async () => {
+	const dependencies = [
+		{
+			...resource(analytics).meta,
+			role: "previous" as const,
+
+		},
+		{
+			...resource(null).meta,
+			lastAttempt: {
+				finishedAt: "2026-08-14T00:01:00Z",
+				problems: [],
+				startedAt: "2026-08-14T00:00:00Z",
+				state: "failed" as const,
+			},
+			role: "year" as const,
+		},
+		{
+			...resource(analytics).meta,
+			role: "selected" as const,
+		},
+	];
+
+	server.use(
+		http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
+			HttpResponse.json(resource(analytics, { dependencies })),
+		),
+	);
+	renderPage();
+	expect(
+		await screen.findByRole("region", { name: "Предыдущий период" }),
+	).toBeVisible();
+	expect(
+		screen.getByText(
+			"Не удалось загрузить период сравнения. Повторите обновление.",
+		),
+	).toBeVisible();
+	expect(
+		screen.queryByRole("region", { name: "Годом ранее" }),
+	).not.toBeInTheDocument();
+});

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts

@@ -91,7 +91,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
 			? { period, state: "error" }
 			: { state: "loading" };
 
-	const display = toIncomeDisplayModel(analytics.data);
+	const display = toIncomeDisplayModel(analytics.data, analytics.meta);
 
 	const onSubmit = (values: IncomeForm) => {
 		const from = parseDraftDate(values.from);

src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 
 import classes from "../AccountIncomePage.module.css";
+import { IncomeComparisons } from "./IncomeComparisons.view";
 import { IncomePayments } from "./IncomePayments.view";
 import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
 import { IncomeSummary } from "./IncomeSummary.view";
@@ -53,6 +54,18 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 
 			<Alert color="blue">{t("income.taxBoundary")}</Alert>
 
+			<IncomeComparisons
+				comparison={display.previousComparison}
+				notice={t(`income.${display.previousNotice}`)}
+				title={t("income.previousPeriod")}
+			/>
+
+			<IncomeComparisons
+				comparison={display.comparison}
+				notice={t(`income.${display.yearNotice}`)}
+				title={t("income.yearAgo")}
+			/>
+
 			<IncomePayments entries={display.entries} />
 		</Stack>
 	);

src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx

@@ -0,0 +1,167 @@
+import type { FC } from "react";
+
+import { Paper, Stack, Text, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatMoney } from "@/shared/lib";
+
+import type { IncomeDisplayModel } from "../../../model/display";
+
+import classes from "../AccountIncomePage.module.css";
+
+type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
+	title: string;
+};
+
+type ComparisonValuesProps = {
+	kind: "compared"
+		| "difference"
+		| "selected";
+	label: string;
+	percentages?: ComparisonProps["values"][number]["percentages"];
+	values: ComparisonProps["values"][number]["selected"];
+};
+
+type IncomeComparisonsProps = {
+	comparison: IncomeDisplayModel["comparison"];
+	notice: string;
+	title: string;
+};
+
+const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
+	return (
+		<Stack>
+			<Title order={2}>{props.title}</Title>
+
+			{props.comparison
+				? <Comparison {...props.comparison} title={props.title} />
+				: (
+						<Paper className={classes.comparisonNotice} p="sm" radius="md">
+							<Text aria-live="polite" c="gray.7" role="status" size="sm">
+								{props.notice}
+							</Text>
+						</Paper>
+					)}
+		</Stack>
+	);
+};
+
+const Comparison: FC<ComparisonProps> = (props) => {
+	const { t } = useTranslation();
+
+	return (
+		<section aria-label={props.title} className={classes.comparison}>
+			<Stack gap="md">
+				{props.values.map(value => (
+					<Stack
+						aria-label={value.currency}
+						gap="xs"
+						key={value.currency}
+						role="group"
+					>
+						<div className={classes.comparisonGrid}>
+							<ComparisonValues
+								kind="selected"
+								label={props.selectedPeriod}
+								values={value.selected}
+							/>
+
+							<ComparisonValues
+								kind="compared"
+								label={props.comparedPeriod}
+								values={value.compared}
+							/>
+
+							<ComparisonValues
+								kind="difference"
+								label={t("income.difference")}
+								percentages={value.percentages}
+								values={value.difference}
+							/>
+						</div>
+					</Stack>
+				))}
+
+				{props.values.length === 0 && (
+					<Text c="gray.7" size="sm">
+						{t("income.comparisonEmpty")}
+					</Text>
+				)}
+			</Stack>
+		</section>
+	);
+};
+
+const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
+	const { t } = useTranslation();
+
+	const data_tone
+		= props.kind === "difference"
+			? differenceTone(props.values.total.value)
+			: undefined;
+
+	return (
+		<section
+			aria-label={props.label}
+			className={classes.comparisonPanel}
+			data-kind={props.kind}
+			data-tone={data_tone}
+		>
+			<Text className={classes.comparisonLabel} fw={600} size="sm">
+				{props.label}
+			</Text>
+
+			<dl className={classes.comparisonValues}>
+				{(["total", "coupon", "dividend"] as const).map((key) => {
+					const money
+						// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+						= props.values[key];
+
+					const percentage
+						// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+						= props.percentages?.[key];
+
+					const tone
+						= props.kind === "difference"
+							? differenceTone(money.value)
+							: undefined;
+
+					const appearanceClass
+						= key === "total"
+							? classes.comparisonTotal
+							: classes.comparisonDetail;
+
+					return (
+						<div className={appearanceClass} key={key}>
+							<dt>{t(`income.${key}`)}</dt>
+
+							<dd data-tone={tone}>
+								<span>
+									{tone === "positive" ? "+" : ""}
+
+									{formatMoney(money)}
+								</span>
+
+								{!!percentage && (
+									<span className={classes.comparisonPercent}>
+										{percentage}
+									</span>
+								)}
+							</dd>
+						</div>
+					);
+				})}
+			</dl>
+		</section>
+	);
+};
+
+function differenceTone(value: string): "negative"
+	| "neutral"
+	| "positive" {
+	if (!/[1-9]/.test(value)) return "neutral";
+
+	return value.startsWith("-") ? "negative" : "positive";
+}
+
+export { IncomeComparisons };

src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx

@@ -1,6 +1,6 @@
 import type { FC, SubmitEventHandler } from "react";
 
-import { Button, Stack } from "@mantine/core";
+import { Button, Paper, Stack, Text } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 
 import classes from "../../AccountIncomePage.module.css";
@@ -27,8 +27,15 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
 	} = useIncomePeriodFormVm();
 
 	return (
-		<form onSubmit={props.onSubmit}>
+		<Paper
+			component="form"
+			onSubmit={props.onSubmit}
+			p="md"
+			radius="md"
+			withBorder
+		>
 			<Stack gap="sm">
+				<Text fw={700}>{t("income.period")}</Text>
 
 				<div className={classes.fields}>
 					<DatePickerInput
@@ -64,7 +71,7 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
 					</Button>
 				</div>
 			</Stack>
-		</form>
+		</Paper>
 	);
 };
 

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.test.tsx

@@ -492,20 +492,6 @@ describe("AccountOperationsPage", () => {
 			}),
 		).toBeInTheDocument();
 	});
-
-	it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
-		configureTestAuth();
-		server.use(
-			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
-				HttpResponse.json(resource(null)),
-			),
-		);
-		renderPage();
-		expect(
-			await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
-		).toBeVisible();
-		expect(screen.queryByText("Операций нет")).not.toBeInTheDocument();
-	});
 });
 
 it("keeps UTC operation boundaries in GET and source sync requests", async () => {

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

@@ -402,24 +402,6 @@ describe("AccountPage states", () => {
 		).toBeInTheDocument();
 	});
 
-	it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
-		server.use(
-			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
-				HttpResponse.json(resource(null)),
-			),
-		);
-		const queryClient = createTestQueryClient();
-		renderAccountRoute(queryClient);
-
-		expect(
-			await screen.findByRole("status", { name: "Загрузка" }, { timeout: 4000 }),
-		).toBeVisible();
-		expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
-		expect(
-			queryClient.getQueryData(portfolioQueryOptions("account-1").queryKey),
-		).toMatchObject({ data: null });
-	});
-
 	it("renders a stale portfolio in upstream order with nullable values hidden", () => {
 		renderPage(<AccountPageLoaded {...loadedProps()} />);
 
@@ -704,7 +686,7 @@ describe("AccountPage states", () => {
 		).toBeVisible();
 		for (const amount of ["850,50 ₽", "0 USD", "1 000 ₽", "Сумма неизвестна"])
 			expect(content.getByText(amount)).toBeVisible();
-		expect(content.getAllByText("Прогноз")).toHaveLength(4);
+		expect(content.getAllByText("Ожидаемая сумма")).toHaveLength(4);
 		expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
 		expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
 		expect(

src/pages/bond/ui/BondPage/BondPage.view.tsx

@@ -191,10 +191,8 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 
 			<BondCoupons
 				coupons={vm.coupons}
-				logoName={bond.logoName}
 				pastCoupons={vm.pastCoupons}
 				state={vm.couponsState}
-				ticker={bond.ticker}
 				upcoming={vm.upcoming}
 			/>
 

src/pages/bond/ui/BondPage/components/BondCoupons.view.tsx

@@ -1,20 +1,17 @@
 import type { FC } from "react";
 
-import { Accordion, Alert, Badge, Group, Stack, Text } from "@mantine/core";
+import { Accordion, Alert, Badge, Group, Paper, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 import type { BondCoupons as Coupons } from "@/entities/bond";
 
-import { InstrumentSection, type SectionState } from "@/features/instrument-details";
+import { InstrumentMetric, InstrumentSection, type SectionState } from "@/features/instrument-details";
-import { formatDate, formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
+import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
-import { PayoutCard } from "@/shared/ui";
 
 type BondCouponsProps = {
 	coupons?: Coupons;
-	logoName?: null | string;
 	pastCoupons: Coupons["coupons"];
 	state: SectionState;
-	ticker?: null | string;
 	upcoming: Coupons["coupons"];
 };
 
@@ -42,8 +39,6 @@ const BondCoupons: FC<BondCouponsProps> = (props) => {
 									<Coupon
 										coupon={coupon}
 										key={`${coupon.number}:${coupon.paymentDate}`}
-										logoName={props.logoName}
-										ticker={props.ticker}
 									/>
 								))
 							)
@@ -80,8 +75,6 @@ const BondCoupons: FC<BondCouponsProps> = (props) => {
 													<Coupon
 														coupon={coupon}
 														key={`${coupon.number}:${coupon.paymentDate}`}
-														logoName={props.logoName}
-														ticker={props.ticker}
 													/>
 												))
 											)
@@ -98,48 +91,59 @@ const BondCoupons: FC<BondCouponsProps> = (props) => {
 
 type CouponProps = {
 	coupon: Coupons["coupons"][number];
-	logoName?: null | string;
-	ticker?: null | string;
 };
 
 const Coupon: FC<CouponProps> = (props) => {
 	const { coupon } = props;
 	const { t } = useTranslation();
-	const title = `${t("events.type.coupon")} · ${props.ticker || t("bond.instrument")}`;
-
-	const metadata = [
-		coupon.paymentDate ? formatDate(coupon.paymentDate) : t("stock.dateUnknown"),
-		t("bond.couponNumber", { number: coupon.number ?? t("bond.unknown") }),
-	].join(" · ");
-
-	const conditions = (
-		<Group gap="md" mt="sm">
-			<Badge color="gray" variant="light">
-				{t(`bond.couponTypes.${coupon.couponType}`, { defaultValue: t("bond.unknown") })}
-			</Badge>
-
-			{coupon.periodDays != undefined && (
-				<Text c="dimmed" size="xs">{t("bond.couponDays", { count: coupon.periodDays })}</Text>
-			)}
-
-			{coupon.recordDate && (
-				<Text c="dimmed" size="xs">{t("stock.record")}: {formatDate(coupon.recordDate)}</Text>
-			)}
-		</Group>
-	);
 
 	return (
-		<PayoutCard
+		<Paper p="md" radius="md" withBorder>
-			conditions={conditions}
+			<Group align="start" justify="space-between">
-			estimate={coupon.estimatedAmount}
+				<div>
-			imageSrc={instrumentLogoUrl(props.logoName)}
+					<Text fw={600}>
-			initial={(props.ticker?.trim()[0] ?? "?").toUpperCase()}
+						{coupon.paymentDate
-			kind="schedule"
+							? formatDate(coupon.paymentDate)
-			metadata={metadata}
+							: t("stock.dateUnknown")}
-			perSecurity={coupon.perBond}
+					</Text>
-			perSecurityLabel={t("bond.perBond")}
+
-			title={title}
+					<Text c="dimmed" size="xs">
-		/>
+						{t("bond.couponNumber", {
+							number: coupon.number ?? t("bond.unknown"),
+						})}
+					</Text>
+				</div>
+
+				<InstrumentMetric label={t("bond.perBond")} value={formatMoney(coupon.perBond)} />
+
+				{!!coupon.estimatedAmount && (
+					<InstrumentMetric
+						label={t("stock.yourEstimate")}
+						value={formatMoney(coupon.estimatedAmount)}
+					/>
+				)}
+			</Group>
+
+			<Group gap="md" mt="sm">
+				<Badge color="gray" variant="light">
+					{t(`bond.couponTypes.${coupon.couponType}`, {
+						defaultValue: t("bond.unknown"),
+					})}
+				</Badge>
+
+				{coupon.periodDays != undefined && (
+					<Text c="dimmed" size="xs">
+						{t("bond.couponDays", { count: coupon.periodDays })}
+					</Text>
+				)}
+
+				{!!coupon.recordDate && (
+					<Text c="dimmed" size="xs">
+						{t("stock.record")}: {formatDate(coupon.recordDate)}
+					</Text>
+				)}
+			</Group>
+		</Paper>
 	);
 };
 

src/pages/stock/ui/StockPage/StockPage.test.tsx

@@ -337,7 +337,7 @@ describe("stock page", () => {
 				"/stocks/SBERP?period=year&events=trades",
 			),
 		);
-		expect(await screen.findByText("Дивиденд")).toBeVisible();
+		expect(await screen.findByText("Зачисление дивидендов")).toBeVisible();
 	});
 	it("offers search for ambiguous tickers without requesting personal data", async () => {
 		const { requests } = setup({ ambiguousTicker: true, path: "/stocks/SAME" });
@@ -368,18 +368,18 @@ describe("stock page", () => {
 			screen.getByText("К закрытию предыдущего торгового дня, 09.09.2026"),
 		).toBeVisible();
 		expect(await screen.findByText("Зачисление дивидендов")).toBeVisible();
-		expect(screen.getAllByText("на акцию").length).toBeGreaterThan(0);
+		expect(screen.getByText("Событие компании")).toBeVisible();
 		expect(screen.getByText("328,8 ₽")).toBeVisible();
 		expect(screen.getByText("P/E · TTM")).toBeVisible();
 		expect(screen.getByText("Описание компании")).toBeVisible();
 		expect(
 			screen.queryByRole("button", { name: "О компании" }),
 		).not.toBeInTheDocument();
-		expect(screen.getByText(/13\.10\.2026/)).toBeVisible();
+		expect(screen.getByText("13.10.2026")).toBeVisible();
 		fireEvent.click(
 			screen.getByRole("button", { name: "История дивидендов компании" }),
 		);
-		await waitFor(() => expect(screen.getByText(/13\.10\.2025/)).toBeVisible());
+		await waitFor(() => expect(screen.getByText("13.10.2025")).toBeVisible());
 		expect(screen.getByText("Текущая средняя покупка: 200 ₽")).toBeVisible();
 		fireEvent.click(screen.getByRole("button", { name: /Цены в таблице/ }));
 		const rows = within(await screen.findByRole("table")).getAllByRole("row");

src/pages/stock/ui/StockPage/StockPage.view.tsx

@@ -63,10 +63,8 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 
 			<StockDividends
 				dividends={vm.dividends}
-				logoName={stock.logoName}
 				pastDividends={vm.pastDividends}
 				state={vm.dividendsState}
-				ticker={stock.ticker}
 				upcoming={vm.upcoming}
 			/>
 

src/pages/stock/ui/StockPage/components/StockDividends.view.tsx

@@ -1,96 +1,198 @@
 import type { FC } from "react";
 
-import { Accordion, Alert, Stack, Text } from "@mantine/core";
+import {
+	Accordion,
+	Alert,
+	Badge,
+	Group,
+	Paper,
+	Stack,
+	Text,
+} from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 import type { StockDividends as Dividends } from "@/entities/stock";
 
 import { InstrumentSection, type SectionState } from "@/features/instrument-details";
-import { formatDate, formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
+import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
-import { PayoutCard } from "@/shared/ui";
 
-type Dividend = Dividends["dividends"][number];
+import classes from "../StockPage.module.css";
-
-type DividendCardProps = {
-	event: Dividend;
-	logoName?: null | string;
-	ticker?: null | string;
-};
 
 type StockDividendsProps = {
 	dividends?: Dividends;
-	logoName?: null | string;
 	pastDividends: Dividends["dividends"];
 	state: SectionState;
-	ticker?: null | string;
 	upcoming: Dividends["dividends"];
 };
 
-const DividendCard: FC<DividendCardProps> = (props) => {
-	const { event } = props;
-	const { t } = useTranslation();
-	const title = `${t("events.type.dividend")} · ${props.ticker || t("stock.share")}`;
-
-	const metadata = [
-		event.recordDate
-			? `${t("stock.record")}: ${formatDate(event.recordDate)}`
-			: t("stock.dateUnknown"),
-		event.paymentDate ? `${t("stock.payment")}: ${formatDate(event.paymentDate)}` : null,
-	].filter(Boolean).join(" · ");
-
-	const conditions = event.lastBuyDate
-		? <Text c="dimmed" size="xs">{t("stock.lastBuy")}: {formatDate(event.lastBuyDate)}</Text>
-		: undefined;
-
-	return (
-		<PayoutCard
-			conditions={conditions}
-			estimate={event.estimatedAmount}
-			imageSrc={instrumentLogoUrl(props.logoName)}
-			initial={(props.ticker?.trim()[0] ?? "?").toUpperCase()}
-			kind="schedule"
-			metadata={metadata}
-			perSecurity={event.perShare}
-			perSecurityLabel={t("stock.perShare")}
-			title={title}
-		/>
-	);
-};
-
 const StockDividends: FC<StockDividendsProps> = (props) => {
 	const { dividends, pastDividends, state, upcoming } = props;
 	const { t } = useTranslation();
 
+	let upcomingContent;
+
+	if (dividends) {
+		if (upcoming.length > 0) {
+			upcomingContent = (
+				upcoming.map(event => (
+					<div
+						className={classes.dividend}
+						key={JSON.stringify([
+							event.recordDate,
+							event.paymentDate,
+							event.perShare,
+						])}
+					>
+						<Group align="start" justify="space-between">
+							<div>
+								<Badge color="green" variant="light">
+									{t("stock.companyEvent")}
+								</Badge>
+
+								<Text fw={650} mt="xs" size="xl">
+									{formatMoney(event.perShare)}
+									{" "}
+									<Text c="dimmed" component="span" size="sm">
+										{t("stock.perShare")}
+									</Text>
+								</Text>
+							</div>
+
+							{!!event.estimatedAmount && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.yourEstimate")}
+									</Text>
+
+									<Text fw={600}>
+										{formatMoney(event.estimatedAmount)}
+									</Text>
+								</div>
+							)}
+						</Group>
+
+						<Group gap="xl" mt="md">
+							{!!event.lastBuyDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.lastBuy")}
+									</Text>
+
+									<Text>{formatDate(event.lastBuyDate)}</Text>
+								</div>
+							)}
+
+							{!!event.recordDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.record")}
+									</Text>
+
+									<Text>{formatDate(event.recordDate)}</Text>
+								</div>
+							)}
+
+							{!!event.paymentDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.payment")}
+									</Text>
+
+									<Text>{formatDate(event.paymentDate)}</Text>
+								</div>
+							)}
+						</Group>
+					</div>
+				))
+			);
+		}
+		else {
+			upcomingContent = (
+				<Text c="dimmed">
+					{t("stock.noUpcoming", { to: formatDate(dividends.to) })}
+				</Text>
+			);
+		}
+	}
+
+	let pastDividendsContent;
+
+	if (pastDividends.length > 0) {
+		pastDividendsContent = (
+			<Stack gap="sm">
+				{pastDividends.map(event => (
+					<Paper
+						key={JSON.stringify([
+							event.recordDate,
+							event.paymentDate,
+							event.perShare,
+						])}
+						p="md"
+						radius="md"
+						withBorder
+					>
+						<Group align="start" justify="space-between">
+							<div>
+								<Text c="dimmed" size="xs">
+									{t("stock.record")}
+								</Text>
+
+								<Text fw={600}>
+									{event.recordDate
+										? formatDate(event.recordDate)
+										: t("stock.dateUnknown")}
+								</Text>
+
+								{!!event.paymentDate && (
+									<Text c="dimmed" mt="xs" size="xs">
+										{t("stock.payment")}:{" "}
+										{formatDate(event.paymentDate)}
+									</Text>
+								)}
+							</div>
+
+							<div>
+								<Text fw={650} size="lg">
+									{formatMoney(event.perShare)}
+								</Text>
+
+								<Text c="dimmed" size="xs">
+									{t("stock.perShare")}
+								</Text>
+							</div>
+						</Group>
+					</Paper>
+				))}
+			</Stack>
+		);
+	}
+	else {
+		pastDividendsContent = <Text c="dimmed">{t("stock.noDividends")}</Text>;
+	}
+
 	return (
 		<InstrumentSection state={state} title={t("stock.upcoming")}>
 			{!!dividends && (
 				<Stack gap="md">
-					{(dividends.estimateUnavailable || dividends.positionIsStale) && (
+					{!!(
+						dividends.estimateUnavailable || dividends.positionIsStale
+					) && (
 						<Alert aria-live="polite" color="orange" role="status">
 							{t("stock.estimateUnavailable")}
 						</Alert>
 					)}
 
-					{upcoming.length > 0
+					{upcomingContent}
-						? upcoming.map(event => (
-								<DividendCard
-									event={event}
-									key={JSON.stringify([
-										event.recordDate,
-										event.paymentDate,
-										event.perShare,
-									])}
-									logoName={props.logoName}
-									ticker={props.ticker}
-								/>
-							))
-						: <Text c="dimmed">{t("stock.noUpcoming", { to: formatDate(dividends.to) })}</Text>}
 
-					<Text c="dimmed" size="xs">{t("stock.dividendNote")}</Text>
+					<Text c="dimmed" size="xs">
+						{t("stock.dividendNote")}
+					</Text>
 
 					{!!dividends.positionAt && (
 						<Text c="dimmed" size="xs">
-							{t("stock.snapshotAt", { date: formatSnapshotTime(dividends.positionAt) })}
+							{t("stock.snapshotAt", {
+								date: formatSnapshotTime(dividends.positionAt),
+							})}
 						</Text>
 					)}
 
@@ -108,24 +210,7 @@ const StockDividends: FC<StockDividendsProps> = (props) => {
 									})}
 								</Text>
 
-								{pastDividends.length > 0
+								{pastDividendsContent}
-									? (
-											<Stack gap="sm">
-												{pastDividends.map(event => (
-													<DividendCard
-														event={event}
-														key={JSON.stringify([
-															event.recordDate,
-															event.paymentDate,
-															event.perShare,
-														])}
-														logoName={props.logoName}
-														ticker={props.ticker}
-													/>
-												))}
-											</Stack>
-										)
-									: <Text c="dimmed">{t("stock.noDividends")}</Text>}
 							</Accordion.Panel>
 						</Accordion.Item>
 					</Accordion>

src/shared/api/generated/schema.d.ts

@@ -1107,6 +1107,16 @@ export interface components {
             data: components["schemas"]["IncomeSummaryDto"] | null;
             meta: components["schemas"]["InvestmentResourceMetaDto"];
         };
+        IncomeComparisonCurrencyDto: {
+            currency: string;
+            selected: components["schemas"]["IncomeCurrencySummaryDto"];
+            compared: components["schemas"]["IncomeCurrencySummaryDto"];
+            difference: components["schemas"]["IncomeCurrencySummaryDto"];
+        };
+        IncomeComparisonDto: {
+            period: components["schemas"]["IncomePeriodDto"];
+            totalsByCurrency: components["schemas"]["IncomeComparisonCurrencyDto"][];
+        };
         IncomeBucketDto: {
             period: components["schemas"]["IncomePeriodDto"];
             totalsByCurrency: components["schemas"]["IncomeCurrencySummaryDto"][];
@@ -1150,6 +1160,8 @@ export interface components {
             totalsByCurrency: components["schemas"]["IncomeCurrencySummaryDto"][];
             /** Format: date-time */
             calculatedAt: string;
+            previous: components["schemas"]["IncomeComparisonDto"] | null;
+            yearComparison: components["schemas"]["IncomeComparisonDto"] | null;
             /** @enum {string} */
             bucketGranularity: "day" | "week" | "month";
             buckets: components["schemas"]["IncomeBucketDto"][];
@@ -1171,7 +1183,7 @@ export interface components {
             lastSuccessfulAt: string | null;
             lastAttempt: components["schemas"]["InvestmentAttemptDto"];
             /** @enum {string} */
-            role: "selected";
+            role: "selected" | "previous" | "year";
         };
         IncomeAnalyticsMetaDto: {
             dataRevision: string;

src/shared/api/spec/openapi.json

@@ -6706,6 +6706,47 @@
           "meta"
         ]
       },
+      "IncomeComparisonCurrencyDto": {
+        "type": "object",
+        "properties": {
+          "currency": {
+            "type": "string"
+          },
+          "selected": {
+            "$ref": "#/components/schemas/IncomeCurrencySummaryDto"
+          },
+          "compared": {
+            "$ref": "#/components/schemas/IncomeCurrencySummaryDto"
+          },
+          "difference": {
+            "$ref": "#/components/schemas/IncomeCurrencySummaryDto"
+          }
+        },
+        "required": [
+          "currency",
+          "selected",
+          "compared",
+          "difference"
+        ]
+      },
+      "IncomeComparisonDto": {
+        "type": "object",
+        "properties": {
+          "period": {
+            "$ref": "#/components/schemas/IncomePeriodDto"
+          },
+          "totalsByCurrency": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/IncomeComparisonCurrencyDto"
+            }
+          }
+        },
+        "required": [
+          "period",
+          "totalsByCurrency"
+        ]
+      },
       "IncomeBucketDto": {
         "type": "object",
         "properties": {
@@ -6907,6 +6948,24 @@
             "type": "string",
             "format": "date-time"
           },
+          "previous": {
+            "nullable": true,
+            "type": "object",
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/IncomeComparisonDto"
+              }
+            ]
+          },
+          "yearComparison": {
+            "nullable": true,
+            "type": "object",
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/IncomeComparisonDto"
+              }
+            ]
+          },
           "bucketGranularity": {
             "type": "string",
             "enum": [
@@ -6939,6 +6998,8 @@
           "period",
           "totalsByCurrency",
           "calculatedAt",
+          "previous",
+          "yearComparison",
           "bucketGranularity",
           "buckets",
           "instruments",
@@ -6995,7 +7056,9 @@
           "role": {
             "type": "string",
             "enum": [
-              "selected"
+              "selected",
+              "previous",
+              "year"
             ]
           }
         },

src/shared/i18n/locales/ru.ts

@@ -340,8 +340,13 @@ const ru = {
 		},
 		income: {
 			apply: "Применить",
+			comparisonEmpty: "За эти периоды купоны и дивиденды не найдены.",
+			comparisonFailed:
+				"Не удалось загрузить период сравнения. Повторите обновление.",
+			comparisonPending: "Период сравнения ещё не загружен полностью.",
 			coupon: "Купоны",
 			datePlaceholder: "ДД.ММ.ГГГГ",
+			difference: "Разница",
 			dividend: "Дивиденды",
 			emptyText: "За выбранный период подходящих исполненных выплат нет.",
 			emptyTitle: "Купоны и дивиденды не найдены",
@@ -351,6 +356,8 @@ const ru = {
 			open: "Открыть пассивный доход",
 			payments: "Выплаты",
 			period: "Период",
+			previousPeriod: "Предыдущий период",
+			previousUnavailable: "Сравнение с предыдущим периодом недоступно.",
 			refreshError:
 				"Не удалось обновить пассивный доход. Показан последний загруженный результат.",
 			refreshing: "Обновляем пассивный доход",
@@ -371,6 +378,8 @@ const ru = {
 				period:
 					"Укажите корректный период без будущих дат: начало не позже окончания.",
 			},
+			yearAgo: "Годом ранее",
+			yearUnavailable: "Сравнение с годом ранее недоступно.",
 		},
 		investment: {
 			attempt: {
@@ -450,14 +459,6 @@ const ru = {
 			stocks: "Акции",
 		},
 		notFound: { action: "К счетам", title: "Страница не найдена" },
-		payout: {
-			estimate: "Оценка по позиции",
-			executedAt: "Исполнено {{date}}",
-			forecast: "Прогноз",
-			noAmount: "Сумма неизвестна",
-			noMoney: "Без движения денег",
-			registryDate: "Дата реестра",
-		},
 		portfolio: {
 			accountUnavailableText: "Вернитесь к списку и выберите доступный счет.",
 			accountUnavailableTitle: "Счет недоступен",

src/shared/ui/PayoutCard/PayoutCard.test.tsx

@@ -1,85 +0,0 @@
-import type { FC } from "react";
-
-import { MantineProvider } from "@mantine/core";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { PayoutCard } from "./PayoutCard";
-
-const Wrapper: FC<{ children: React.ReactNode }> = props => (
-	<MantineProvider env="test">{props.children}</MantineProvider>
-);
-
-describe("PayoutCard", () => {
-	it("renders an executed payout with signed source money", () => {
-		render(
-			<Wrapper>
-				<PayoutCard
-					initial="К"
-					kind="executed"
-					occurredAt="01.08.2026 12:00"
-					payment={{ currency: "RUB", value: "-10.25" }}
-					title="Купон"
-					typeLabel="Купон"
-				/>
-			</Wrapper>,
-		);
-		expect(screen.getByText("−10,25 ₽")).toBeInTheDocument();
-		expect(screen.getByText(/Исполнено 01.08.2026 12:00/)).toBeInTheDocument();
-	});
-
-	it("keeps zero distinct from an unknown executed amount", () => {
-		render(
-			<Wrapper>
-				<PayoutCard
-					initial="Д"
-					kind="executed"
-					occurredAt="01.08.2026"
-					payment={{ currency: "RUB", value: "0.000" }}
-					title="Дивиденд"
-					typeLabel="Дивиденд"
-				/>
-			</Wrapper>,
-		);
-		expect(screen.getByText("0,000 ₽")).toBeInTheDocument();
-		expect(screen.getByText("Без движения денег")).toBeInTheDocument();
-	});
-
-	it("marks a forecast payout and a dividend registry date without inventing an amount", () => {
-		render(
-			<Wrapper>
-				<PayoutCard
-					date="15.08.2026"
-					dateKind="registry"
-					initial="S"
-					kind="forecast"
-					projectedAmount={null}
-					title="Дивиденд · SBER"
-				/>
-			</Wrapper>,
-		);
-		expect(screen.getByText("Прогноз")).toBeInTheDocument();
-		expect(screen.getByText(/15.08.2026 · Дата реестра/)).toBeInTheDocument();
-		expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument();
-	});
-
-	it("shows a schedule payout with per-security label and separate estimate", () => {
-		render(
-			<Wrapper>
-				<PayoutCard
-					estimate={{ currency: "RUB", value: "125" }}
-					initial="S"
-					kind="schedule"
-					metadata="Дата выплаты 04.10.2026"
-					perSecurity={{ currency: "RUB", value: "12.5" }}
-					perSecurityLabel="На облигацию"
-					title="Купон · SU26238RMFS4"
-				/>
-			</Wrapper>,
-		);
-		expect(screen.getByText("12,5 ₽")).toBeInTheDocument();
-		expect(screen.getByText("На облигацию")).toBeInTheDocument();
-		expect(screen.getByText("Оценка по позиции")).toBeInTheDocument();
-		expect(screen.getByText("125 ₽")).toBeInTheDocument();
-	});
-});

src/shared/ui/PayoutCard/PayoutCard.tsx

@@ -1,166 +0,0 @@
-import type { FC, ReactNode } from "react";
-
-import { Group, Text } from "@mantine/core";
-import { EntryCard } from "@wealthledger/ui";
-import { useTranslation } from "react-i18next";
-
-import { formatMoney } from "@/shared/lib";
-
-type ExecutedPayout = {
-	details?: ReactNode;
-	extraMetadata?: string;
-	imageSrc?: null | string;
-	initial: string;
-	kind: "executed";
-	occurredAt: string;
-	payment: null | PayoutMoney;
-	title: string;
-	typeLabel: string;
-	wrap?: boolean;
-};
-
-type ForecastPayout = {
-	date: string;
-	dateKind?: "event" | "registry";
-	extraMetadata?: string;
-	imageSrc?: null | string;
-	initial: string;
-	kind: "forecast";
-	projectedAmount: null | PayoutMoney;
-	title: string;
-};
-
-type PayoutCardProps
-	= | ExecutedPayout
-		| ForecastPayout
-		| SchedulePayout;
-
-type PayoutMoney = { currency: string; value: string };
-
-type PayoutTone
-	= | "negative"
-		| "neutral"
-		| "positive";
-
-type SchedulePayout = {
-	conditions?: ReactNode;
-	estimate: null | PayoutMoney;
-	imageSrc?: null | string;
-	initial: string;
-	kind: "schedule";
-	metadata: string;
-	perSecurity: null | PayoutMoney;
-	perSecurityLabel: string;
-	title: string;
-};
-
-const PayoutCard: FC<PayoutCardProps> = (props) => {
-	const { t } = useTranslation();
-
-	const common = {
-		imageSrc: props.imageSrc,
-		initial: props.initial,
-		title: props.title,
-		wrap: true,
-	};
-
-	if (props.kind === "executed") {
-		const payment = props.payment;
-		const presentation = executedPresentation(payment);
-		const isKnown = payment !== null && !isZeroDecimal(payment.value);
-
-		const metadata = [
-			t("payout.executedAt", { date: props.occurredAt }),
-			props.extraMetadata,
-		].filter(Boolean).join(" · ");
-
-		const valueLabel = isKnown ? props.typeLabel : t("payout.noMoney");
-
-		return (
-			<EntryCard
-				{...common}
-				details={props.details}
-				metadata={metadata}
-				tone={presentation.tone}
-				value={presentation.amount}
-				valueLabel={valueLabel}
-				wrap={props.wrap}
-			/>
-		);
-	}
-
-	if (props.kind === "forecast") {
-		const metadata = [
-			props.date,
-			props.dateKind === "registry" ? t("payout.registryDate") : null,
-			props.extraMetadata,
-		].filter(Boolean).join(" · ");
-
-		const value = props.projectedAmount
-			? formatMoney(props.projectedAmount)
-			: t("payout.noAmount");
-
-		return (
-			<EntryCard
-				{...common}
-				metadata={metadata}
-				tone="neutral"
-				value={value}
-				valueLabel={t("payout.forecast")}
-			/>
-		);
-	}
-
-	const details = (
-		<>
-			{props.estimate
-				? (
-						<Group gap="sm">
-							<Text c="dimmed" size="xs">{t("payout.estimate")}</Text>
-
-							<Text fw={600} size="xs">{formatMoney(props.estimate)}</Text>
-						</Group>
-					)
-				: null}
-			{props.conditions}
-		</>
-	);
-
-	const value = props.perSecurity
-		? formatMoney(props.perSecurity)
-		: t("payout.noAmount");
-
-	return (
-		<EntryCard
-			{...common}
-			details={details}
-			metadata={props.metadata}
-			tone="neutral"
-			value={value}
-			valueLabel={props.perSecurityLabel}
-		/>
-	);
-};
-
-function executedPresentation(payment: null | PayoutMoney): {
-	amount: string;
-	tone: PayoutTone;
-} {
-	if (!payment) return { amount: "—", tone: "neutral" };
-	if (isZeroDecimal(payment.value))
-		return { amount: formatMoney(payment), tone: "neutral" };
-	if (payment.value.startsWith("-"))
-		return {
-			amount: `−${formatMoney({ ...payment, value: payment.value.slice(1) })}`,
-			tone: "negative",
-		};
-
-	return { amount: `+${formatMoney(payment)}`, tone: "positive" };
-}
-
-function isZeroDecimal(value: string): boolean {
-	// eslint-disable-next-line security/detect-unsafe-regex -- Anchored decimal check over a bounded Money string, with no nested repetition.
-	return /^-?0(?:\.0+)?$/.test(value);
-}
-
-export { PayoutCard };

src/shared/ui/index.ts

@@ -1,2 +1 @@
-export { PayoutCard } from "./PayoutCard/PayoutCard";
 export { SourceSyncStatus } from "./SourceSyncStatus/SourceSyncStatus";