feat: group all-account rows by instrument and day (WealthLedger/main#47) (#126)

src/pages/account/model/positions.ts

@@ -1,5 +1,13 @@
 import { formatShare, type Portfolio } from "@/entities/portfolio";
-import { formatDecimal, formatMoney, instrumentLogoUrl } from "@/shared/lib";
+import {
+	type Decimal,
+	decimalFromString,
+	decimalToString,
+	formatDecimal,
+	formatMoney,
+	instrumentLogoUrl,
+	sumDecimals,
+} from "@/shared/lib";
 
 type AccountPagePosition = Portfolio["positions"][number] & {
 	instrumentTo?: string;
@@ -23,8 +31,6 @@ type AccountPagePositionSection = {
 
 type AccountPageReturnTone = "negative" | "positive";
 
-type Decimal = { scale: number; value: bigint };
-
 type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
 
 type PositionSectionKind = "bonds"
@@ -32,38 +38,11 @@ type PositionSectionKind = "bonds"
 	| "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;
@@ -167,18 +146,6 @@ function returnPercent(
 	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[] {

src/pages/account/model/previews.ts

@@ -33,6 +33,7 @@ type AccountPageRecentOperations
 		stale?: boolean;
 		state: "loaded" | "partial";
 		to: string;
+		totalVisible?: boolean;
 	}
 	| {
 		state: "empty"
@@ -84,6 +85,7 @@ function toRecentEvents(
 			items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
 			state: "partial",
 			to,
+			totalVisible: false,
 		};
 	if (!events.data && (events.isError || events.meta?.lastAttempt.state === "failed"))
 		return { state: "error", to };
@@ -94,6 +96,7 @@ function toRecentEvents(
 		items,
 		state: "loaded",
 		to,
+		totalVisible: events.meta?.completeness === "complete",
 	};
 }
 
@@ -109,7 +112,12 @@ function toRecentOperations(
 	)
 		return { state: "loading", to };
 	if (operations.meta?.completeness === "incomplete")
-		return { items: operations.data?.items ?? [], state: "partial", to };
+		return {
+			items: operations.data?.items ?? [],
+			state: "partial",
+			to,
+			totalVisible: false,
+		};
 	if (
 		!operations.data
 		&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
@@ -125,6 +133,7 @@ function toRecentOperations(
 		stale: operations.meta?.freshness === "stale",
 		state: "loaded",
 		to,
+		totalVisible: operations.meta?.completeness === "complete",
 	};
 }
 

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

@@ -11,6 +11,7 @@ import { http, HttpResponse } from "msw";
 import { MemoryRouter, Route, Routes } from "react-router";
 import { describe, expect, it, vi } from "vitest";
 
+import type { BrokerageOperation } from "@/entities/broker-operation";
 import type { BrokerageEvent } from "@/entities/brokerage-event";
 
 import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio";
@@ -1084,4 +1085,72 @@ describe("AccountPage states", () => {
 		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
 			.not.toBeInTheDocument();
 	});
+
+	it("groups overview items only after the existing five-item limits", async () => {
+		const operations = Array.from({ length: 6 }, (_, index) => ({
+			account: { id: `account-${index}`, name: `Счёт ${index + 1}` },
+			accruedInterest: null,
+			category: "income",
+			commission: null,
+			description: "Купон",
+			figi: "FIGI",
+			id: `operation-${index}`,
+			instrumentType: "bond",
+			instrumentUid: "UID",
+			logoName: null,
+			occurredAt: "2026-08-14T10:00:00Z",
+			payment: { currency: "RUB", value: "100" },
+			price: null,
+			quantity: null,
+			ticker: "BOND",
+			type: "OPERATION_TYPE_COUPON",
+		})) satisfies BrokerageOperation[];
+
+		const events = Array.from({ length: 6 }, (_, index) => ({
+			account: { id: `account-${index}`, name: `Счёт ${index + 1}` },
+			date: "2026-08-20",
+			dateKind: "event",
+			displayName: "ОФЗ 26238",
+			figi: "FIGI",
+			instrumentUid: "UID",
+			isin: "RU000A0JX0J2",
+			logoName: null,
+			projectedAmount: { currency: "RUB", value: "100" },
+			ticker: "OFZ",
+			type: "coupon",
+		})) satisfies BrokerageEvent[];
+
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
+				HttpResponse.json(resource({
+					accountId: "all",
+					hasNext: true,
+					items: operations.slice(0, 5),
+					nextCursor: "next",
+				}))),
+			http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
+				HttpResponse.json(resource({
+					accountId: "all",
+					calculatedAt: "2026-08-14T00:00:00Z",
+					events,
+				}))),
+		);
+		renderAccountRoute(createTestQueryClient(), "all");
+		await screen.findByRole("heading", { level: 1, name: "Все счета" });
+
+		const operationGroup = screen.getByRole("list", {
+			name: /Купон · BOND, Исполнено/,
+		});
+
+		expect(screen.getByText("+500 ₽")).toBeInTheDocument();
+		expect(within(operationGroup).getAllByRole("listitem")).toHaveLength(5);
+		expect(within(operationGroup).queryByRole("link")).not.toBeInTheDocument();
+
+		const eventGroup = screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238, 20\.08\.2026, 500 ₽/,
+		});
+
+		expect(screen.getAllByText("500 ₽").length).toBeGreaterThan(0);
+		expect(within(eventGroup).getAllByRole("listitem")).toHaveLength(5);
+	});
 });

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

@@ -46,9 +46,15 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
 				structure={{ currencies: [], unvaluedCategories: [] }}
 			/>
 
-			<RecentOperations operations={props.recentOperations} />
+			<RecentOperations
+				allAccounts={props.accountId === "all"}
+				operations={props.recentOperations}
+			/>
 
-			<BrokerageEventsPreview events={props.recentEvents} />
+			<BrokerageEventsPreview
+				allAccounts={props.accountId === "all"}
+				events={props.recentEvents}
+			/>
 
 			{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
 		</Stack>

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

@@ -149,6 +149,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 
 				<Tabs.Panel value="operations">
 					<RecentOperations
+						allAccounts={props.accountId === "all"}
 						moreLabel={t("portfolio.more")}
 						operations={props.recentOperations}
 					/>
@@ -156,6 +157,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 
 				<Tabs.Panel value="events">
 					<BrokerageEventsPreview
+						allAccounts={props.accountId === "all"}
 						events={props.recentEvents}
 						moreLabel={t("portfolio.more")}
 					/>

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

@@ -5,11 +5,17 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { LedgerEntryRow } from "@/entities/broker-operation";
+import {
+	brokerageOperationGroupKey,
+	LedgerEntryRow,
+	OperationGroup,
+} from "@/entities/broker-operation";
+import { groupItems } from "@/shared/lib";
 
 import type { AccountPageRecentOperations } from "../../../model/previews";
 
 type RecentOperationsProps = {
+	allAccounts?: boolean;
 	moreLabel?: string;
 	operations: AccountPageRecentOperations;
 };
@@ -32,17 +38,41 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 
 			{operations.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
 
-			{(operations.state === "loaded" || operations.state === "partial")
-				&& operations.items.map(operation => (
-					<LedgerEntryRow
-						key={JSON.stringify([
-							operation.account?.id,
-							operation.id,
-							operation.logoName,
-						])}
-						operation={operation}
-					/>
-				))}
+			{(operations.state === "loaded" || operations.state === "partial") && (
+				<Stack
+					component="ul"
+					gap="sm"
+					m={0}
+					p={0}
+					style={{ listStyle: "none" }}
+				>
+					{groupItems(
+						operations.items.map(operation => ({
+							key: JSON.stringify([
+								operation.account?.id,
+								operation.id,
+								operation.logoName,
+							]),
+							operation,
+						})),
+						entry => props.allAccounts
+							? brokerageOperationGroupKey(entry.operation)
+							: null,
+					).map(entry => entry.type === "group"
+						? (
+								<OperationGroup
+									entries={entry.items}
+									key={entry.key}
+									totalVisible={operations.totalVisible === true}
+								/>
+							)
+						: (
+								<li key={entry.item.key}>
+									<LedgerEntryRow operation={entry.item.operation} />
+								</li>
+							))}
+				</Stack>
+			)}
 
 			<Button component={Link} to={operations.to} variant="subtle">
 				{props.moreLabel ?? t("ledger.open")}