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

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")}