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

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