feat: add operations page

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

@@ -11,6 +11,7 @@ import {
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+import { useBrokerageOperations } from "@/entities/broker-operation";
 import type { BrokerageAccount } from "@/entities/brokerage-account";
 import { accountTypeKey } from "@/entities/brokerage-account";
 import type { Portfolio } from "@/entities/portfolio";
@@ -80,7 +81,15 @@ export function AccountPageError({
 		/>
 	);
 }
-export function AccountPageEmpty({ account }: { account?: BrokerageAccount }) {
+export function AccountPageEmpty({
+	account,
+	accountId,
+	accessToken = null,
+}: {
+	account?: BrokerageAccount;
+	accountId?: string;
+	accessToken?: string | null;
+}) {
 	const { t } = useTranslation();
 	return (
 		<Stack>
@@ -89,14 +98,19 @@ export function AccountPageEmpty({ account }: { account?: BrokerageAccount }) {
 				title={t("portfolio.emptyTitle")}
 				text={t("portfolio.emptyText")}
 			/>
+			<RecentOperations accountId={accountId} accessToken={accessToken} />
 		</Stack>
 	);
 }
 export function AccountPageLoaded({
 	account,
+	accountId,
+	accessToken,
 	portfolio,
 }: {
 	account?: BrokerageAccount;
+	accountId?: string;
+	accessToken?: string | null;
 	portfolio: Portfolio;
 }) {
 	const { t } = useTranslation();
@@ -148,9 +162,55 @@ export function AccountPageLoaded({
 					</Paper>
 				))}
 			</Section>
+			<RecentOperations
+				accountId={accountId}
+				accessToken={accessToken ?? null}
+			/>
 		</Stack>
 	);
 }
+function RecentOperations({
+	accountId,
+	accessToken,
+}: {
+	accountId: string | undefined;
+	accessToken: string | null;
+}) {
+	const { t } = useTranslation();
+	const operations = useBrokerageOperations(accountId, accessToken, {
+		limit: 5,
+	});
+	return (
+		<Section title={t("ledger.recentTitle")}>
+			{operations.isLoading ? (
+				<Text c="dimmed">{t("ledger.recentLoading")}</Text>
+			) : null}
+			{operations.isError ? (
+				<Alert color="red">{t("ledger.recentError")}</Alert>
+			) : null}
+			{operations.data?.items.length === 0 ? (
+				<Text c="dimmed">{t("ledger.recentEmpty")}</Text>
+			) : null}
+			{operations.data?.items.map((operation) => (
+				<Paper className={classes.cash} key={operation.id} withBorder>
+					<Text>{operation.description || operation.type}</Text>
+					<Text fw={700}>
+						{operation.payment
+							? formatMoney(operation.payment)
+							: t("ledger.noMoney")}
+					</Text>
+				</Paper>
+			))}
+			<Button
+				component={Link}
+				to={`/accounts/${accountId}/operations`}
+				variant="subtle"
+			>
+				{t("ledger.open")}
+			</Button>
+		</Section>
+	);
+}
 function PositionSection({
 	title,
 	positions,