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

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx

@@ -13,8 +13,11 @@ import { useTranslation } from "react-i18next";
 
 import {
 	BrokerageEventCard,
+	BrokerageEventGroup,
+	brokerageEventGroupKey,
 	brokerageEventKey,
 } from "@/entities/brokerage-event";
+import { groupItems } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -30,14 +33,32 @@ const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
 	props,
 ) => {
 	if (props.events.length > 0) {
+		const entries = groupItems(
+			props.events,
+			props.allAccounts ? brokerageEventGroupKey : () => null,
+		);
+
 		return (
-			<Stack gap="sm">
-				{props.events.map(event => (
-					<BrokerageEventCard
-						event={event}
-						key={brokerageEventKey(event)}
-					/>
-				))}
+			<Stack
+				component="ul"
+				gap="sm"
+				m={0}
+				p={0}
+				style={{ listStyle: "none" }}
+			>
+				{entries.map(entry => entry.type === "group"
+					? (
+							<BrokerageEventGroup
+								events={entry.items}
+								key={entry.key}
+								totalVisible={props.totalVisible}
+							/>
+						)
+					: (
+							<li key={brokerageEventKey(entry.item)}>
+								<BrokerageEventCard event={entry.item} />
+							</li>
+						))}
 			</Stack>
 		);
 	}