feat: add operations page

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

@@ -1,8 +1,11 @@
 import { MantineProvider } from "@mantine/core";
-import { cleanup, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { Portfolio } from "@/entities/portfolio";
+import { server } from "@/test/server";
 import {
 	AccountPageEmpty,
 	AccountPageError,
@@ -12,9 +15,11 @@ import {
 
 function renderPage(ui: React.ReactNode) {
 	return render(
-		<MantineProvider>
-			<MemoryRouter>{ui}</MemoryRouter>
-		</MantineProvider>,
+		<QueryClientProvider client={new QueryClient()}>
+			<MantineProvider>
+				<MemoryRouter>{ui}</MemoryRouter>
+			</MantineProvider>
+		</QueryClientProvider>,
 	);
 }
 
@@ -114,4 +119,26 @@ describe("AccountPage states", () => {
 			screen.getByRole("heading", { level: 1, name: "Основной" }),
 		).toBeInTheDocument();
 	});
+
+	it("keeps the portfolio visible when recent events fail", async () => {
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
+				HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
+			),
+		);
+		renderPage(
+			<AccountPageLoaded
+				accountId="account-1"
+				accessToken="token"
+				portfolio={portfolio}
+			/>,
+		);
+
+		await waitFor(() =>
+			expect(
+				screen.getByText("Не удалось загрузить последние события."),
+			).toBeInTheDocument(),
+		);
+		expect(screen.getByText("Вторая")).toBeInTheDocument();
+	});
 });

src/pages/account/ui/AccountPage.tsx

@@ -11,10 +11,18 @@ export function AccountPage() {
 	if (viewModel.state === "loading") return <AccountPageLoading />;
 	if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
 	if (viewModel.state === "empty")
-		return <AccountPageEmpty account={viewModel.account} />;
+		return (
+			<AccountPageEmpty
+				account={viewModel.account}
+				accountId={viewModel.accountId}
+				accessToken={viewModel.accessToken}
+			/>
+		);
 	return (
 		<AccountPageLoaded
 			account={viewModel.account}
+			accountId={viewModel.accountId}
+			accessToken={viewModel.accessToken}
 			portfolio={viewModel.portfolio}
 		/>
 	);

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,

src/pages/account/ui/AccountPage.vm.ts

@@ -22,6 +22,12 @@ export function useAccountPageViewModel() {
 	if (portfolio.isFetching || !portfolio.data)
 		return { state: "loading" as const };
 	if (!portfolio.data.positions.length && !portfolio.data.cashBalances.length)
-		return { state: "empty" as const, account };
-	return { state: "loaded" as const, account, portfolio: portfolio.data };
+		return { state: "empty" as const, account, accountId, accessToken };
+	return {
+		state: "loaded" as const,
+		account,
+		accountId,
+		accessToken,
+		portfolio: portfolio.data,
+	};
 }