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

src/entities/brokerage-event/index.ts

@@ -2,8 +2,9 @@ export {
 	type BrokerageEvent,
 	useBrokerageEvents,
 } from "./api/useBrokerageEvents";
-export { brokerageEventKey } from "./model/event-key";
+export { brokerageEventGroupKey, brokerageEventKey } from "./model/event-key";
 export { BrokerageEventCard } from "./ui/BrokerageEventCard";
+export { BrokerageEventGroup } from "./ui/BrokerageEventGroup";
 export {
 	BrokerageEventsPreview,
 	type BrokerageEventsPreviewState,

src/entities/brokerage-event/model/event-key.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { brokerageEventGroupKey } from "./event-key";
+
+const base: BrokerageEvent = {
+	account: { id: "account-1", name: "Брокерский" },
+	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",
+};
+
+describe("brokerageEventGroupKey", () => {
+	it("uses date, preferred identity, exact type and dateKind", () => {
+		const key = brokerageEventGroupKey(base);
+
+		expect(brokerageEventGroupKey({
+			...base,
+			account: { id: "account-2", name: "ИИС" },
+			figi: "OTHER-FIGI",
+		})).toBe(key);
+		expect(brokerageEventGroupKey({ ...base, date: "2026-08-21" }))
+			.not.toBe(key);
+		expect(brokerageEventGroupKey({ ...base, dateKind: "registry" }))
+			.not.toBe(key);
+		expect(brokerageEventGroupKey({ ...base, type: "dividend" }))
+			.not.toBe(key);
+	});
+
+	it("falls back through FIGI and ISIN and rejects missing identity", () => {
+		expect(brokerageEventGroupKey({ ...base, instrumentUid: null }))
+			.toBe(brokerageEventGroupKey({ ...base, instrumentUid: "" }));
+		expect(brokerageEventGroupKey({
+			...base,
+			figi: null,
+			instrumentUid: null,
+		})).toBe(brokerageEventGroupKey({
+			...base,
+			figi: "",
+			instrumentUid: null,
+		}));
+		expect(brokerageEventGroupKey({
+			...base,
+			figi: null,
+			instrumentUid: null,
+			isin: null,
+		})).toBeNull();
+	});
+});

src/entities/brokerage-event/model/event-key.ts

@@ -1,5 +1,13 @@
 import type { BrokerageEvent } from "../api/useBrokerageEvents";
 
+function brokerageEventGroupKey(event: BrokerageEvent): null | string {
+	const identity = event.instrumentUid || event.figi || event.isin;
+
+	return identity
+		? JSON.stringify([event.date, identity, event.type, event.dateKind])
+		: null;
+}
+
 function brokerageEventKey(event: BrokerageEvent) {
 	return JSON.stringify([
 		event.account?.id, event.type, event.date, event.instrumentUid,
@@ -7,4 +15,4 @@ function brokerageEventKey(event: BrokerageEvent) {
 	]);
 }
 
-export { brokerageEventKey };
+export { brokerageEventGroupKey, brokerageEventKey };

src/entities/brokerage-event/ui/BrokerageEventGroup.test.tsx

@@ -0,0 +1,122 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+
+import type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { BrokerageEventGroup } from "./BrokerageEventGroup";
+
+function event(
+	account: { id: string; name: string },
+	value: null | string,
+	currency = "RUB",
+): BrokerageEvent {
+	return {
+		account,
+		date: "2026-08-20",
+		dateKind: "registry",
+		displayName: "ОФЗ 26238",
+		figi: "FIGI",
+		instrumentUid: "UID",
+		isin: "RU000A0JX0J2",
+		logoName: null,
+		projectedAmount: value === null ? null : { currency, value },
+		ticker: "OFZ",
+		type: "coupon",
+	};
+}
+
+function renderGroup(
+	events: [BrokerageEvent, BrokerageEvent],
+	isTotalVisible = true,
+) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter>
+				<ul>
+					<BrokerageEventGroup
+						events={events}
+						totalVisible={isTotalVisible}
+					/>
+				</ul>
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("BrokerageEventGroup", () => {
+	it("shows an unsigned forecast total and every account forecast", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "100.5"),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		]);
+
+		expect(screen.getByText("Купон · ОФЗ 26238")).toBeInTheDocument();
+		expect(screen.getByText("150 ₽")).toBeInTheDocument();
+		expect(screen.getAllByText("Прогноз").length).toBeGreaterThanOrEqual(3);
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238, 20\.08\.2026 · Дата реестра, 150 ₽/,
+		}));
+
+		expect(accounts.getByText("Брокерский")).toBeInTheDocument();
+		expect(accounts.getByText("ИИС")).toBeInTheDocument();
+		expect(accounts.getByText("100,5 ₽")).toBeInTheDocument();
+		expect(accounts.getByText("49,5 ₽")).toBeInTheDocument();
+		expect(accounts.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("announces an unknown total as unavailable", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, null),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		]);
+
+		expect(screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238.*Итог недоступен/,
+		})).toBeInTheDocument();
+		expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument();
+	});
+
+	it("hides the total for incomplete data", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "100.5"),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		], false);
+		expect(screen.queryByText("150 ₽")).not.toBeInTheDocument();
+	});
+
+	it("allows zero source forecasts to produce a visible zero total", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "0"),
+			event({ id: "iis", name: "ИИС" }, "0.00"),
+		]);
+
+		expect(screen.getAllByText("0 ₽")).toHaveLength(2);
+		expect(screen.getByText("0,00 ₽")).toBeInTheDocument();
+	});
+
+	it("shows separate forecast totals per currency without conversion", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "10", "USD"),
+			event({ id: "iis", name: "ИИС" }, "200"),
+		]);
+
+		expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
+			.toBeInTheDocument();
+	});
+
+	it("shows an offer group without a total", () => {
+		renderGroup([
+			{ ...event({ id: "broker", name: "Брокерский" }, null), type: "offer" },
+			{ ...event({ id: "iis", name: "ИИС" }, null), type: "offer" },
+		]);
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Итог недоступен/,
+		}));
+
+		expect(accounts.getAllByRole("listitem")).toHaveLength(2);
+	});
+});

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

@@ -0,0 +1,87 @@
+import type { FC } from "react";
+
+import { EntryCard } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+
+import {
+	formatDate,
+	formatMoney,
+	instrumentLogoUrl,
+	sumMoney,
+	totalText,
+} from "@/shared/lib";
+import { AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
+
+import type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { brokerageEventKey } from "../model/event-key";
+
+type BrokerageEventGroupProps = {
+	events: [BrokerageEvent, BrokerageEvent, ...BrokerageEvent[]];
+	totalVisible: boolean;
+};
+
+const BrokerageEventGroup: FC<BrokerageEventGroupProps> = (props) => {
+	const { t } = useTranslation();
+	const [first] = props.events;
+	const typeLabel = t(`events.type.${first.type}`);
+
+	const amounts = props.events.flatMap(event =>
+		event.projectedAmount ? [event.projectedAmount] : [],
+	);
+
+	const totals = props.totalVisible && amounts.length === props.events.length
+		? sumMoney(amounts)
+		: null;
+
+	const date = formatDate(first.date);
+
+	const metadata = [
+		date,
+		first.dateKind === "registry" ? t("events.dateKind.registry") : null,
+	].filter(Boolean).join(" · ");
+
+	const title = `${typeLabel} · ${first.displayName}`;
+	const totalsText = totalText(totals, false);
+
+	const accessibleName = [
+		title,
+		metadata,
+		totalsText || t("entryGroup.totalUnavailable"),
+	].join(", ");
+
+	return (
+		<EntryGroup
+			header={(
+				<EntryCard
+					imageSrc={instrumentLogoUrl(first.logoName)}
+					initial={(first.ticker.trim()[0] ?? "?").toUpperCase()}
+					metadata={metadata}
+					title={title}
+					tone="neutral"
+					value={<EntryGroupTotal totals={totals} />}
+					valueLabel={t("payout.forecast")}
+					wrap
+				/>
+			)}
+			label={accessibleName}
+		>
+			{props.events.map((event) => {
+				const value = event.projectedAmount
+					? formatMoney(event.projectedAmount)
+					: t("events.noAmount");
+
+				return (
+					<AccountRow
+						accountName={event.account?.name ?? "—"}
+						key={brokerageEventKey(event)}
+						value={value}
+						valueLabel={t("payout.forecast")}
+					/>
+				);
+			})}
+		</EntryGroup>
+	);
+};
+
+export { BrokerageEventGroup };

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

@@ -5,12 +5,16 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
+import { groupItems } from "@/shared/lib";
+
 import type { BrokerageEvent } from "../../api/useBrokerageEvents";
 
-import { brokerageEventKey } from "../../model/event-key";
+import { brokerageEventGroupKey, brokerageEventKey } from "../../model/event-key";
 import { BrokerageEventCard } from "../BrokerageEventCard";
+import { BrokerageEventGroup } from "../BrokerageEventGroup";
 
 type BrokerageEventsPreviewProps = {
+	allAccounts?: boolean;
 	events: BrokerageEventsPreviewState;
 	moreLabel?: string;
 };
@@ -20,6 +24,7 @@ type BrokerageEventsPreviewState
 		items: BrokerageEvent[];
 		state: "loaded" | "partial";
 		to: string;
+		totalVisible?: boolean;
 	}
 	| { state: "empty"
 		| "error"
@@ -43,13 +48,32 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
 
 			{events.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
 
-			{(events.state === "loaded" || events.state === "partial")
-				&& events.items.map(event => (
-					<BrokerageEventCard
-						event={event}
-						key={brokerageEventKey(event)}
-					/>
-				))}
+			{(events.state === "loaded" || events.state === "partial") && (
+				<Stack
+					component="ul"
+					gap="sm"
+					m={0}
+					p={0}
+					style={{ listStyle: "none" }}
+				>
+					{groupItems(
+						events.items,
+						props.allAccounts ? brokerageEventGroupKey : () => null,
+					).map(entry => entry.type === "group"
+						? (
+								<BrokerageEventGroup
+									events={entry.items}
+									key={entry.key}
+									totalVisible={events.totalVisible === true}
+								/>
+							)
+						: (
+								<li key={brokerageEventKey(entry.item)}>
+									<BrokerageEventCard event={entry.item} />
+								</li>
+							))}
+				</Stack>
+			)}
 
 			<Button component={Link} to={events.to} variant="subtle">
 				{props.moreLabel ?? t("events.open")}