feat: add brocker account list

src/app/routes/AppRoutes.test.tsx

@@ -2,7 +2,19 @@ import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../../shared/api", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("../../shared/api")>();
+	return {
+		...actual,
+		apiClient: {
+			...actual.apiClient,
+			POST: vi.fn(async () => ({ data: undefined })),
+		},
+	};
+});
+
 import { AuthProvider } from "../../features/auth";
 import {
 	AccountsPageEmpty,
@@ -46,6 +58,37 @@ describe("AppRoutes", () => {
 		);
 	});
 
+	it("renders the T-Bank settings action for a missing connection", () => {
+		render(
+			<MantineProvider theme={theme}>
+				<MemoryRouter>
+					<AccountsPageError code="TBANK_NOT_CONNECTED" />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(
+			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
+		).toHaveAttribute("href", "/settings");
+	});
+
+	it("renders retry and settings actions when T-Bank is unavailable", () => {
+		const retry = vi.fn();
+		render(
+			<MantineProvider theme={theme}>
+				<MemoryRouter>
+					<AccountsPageError code="TBANK_UNAVAILABLE" retry={retry} />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		screen.getByRole("button", { name: "Повторить" }).click();
+		expect(retry).toHaveBeenCalledOnce();
+		expect(
+			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
+		).toHaveAttribute("href", "/settings");
+	});
+
 	it("redirects anonymous users from accounts", async () => {
 		renderRoutes("/accounts");
 
@@ -71,7 +114,10 @@ describe("AppRoutes", () => {
 			expect(screen.getByRole(role)).toBeInTheDocument();
 		} else {
 			expect(
-				screen.getByRole("heading", { level: 2, name: "Пока ничего нет" }),
+				screen.getByRole("heading", {
+					level: 2,
+					name: "Нет инвестиционных счетов",
+				}),
 			).toBeInTheDocument();
 		}
 
@@ -81,6 +127,8 @@ describe("AppRoutes", () => {
 		expect(screen.queryAllByRole("alert")).toHaveLength(
 			role === "alert" ? 1 : 0,
 		);
-		expect(screen.queryAllByText("Пока ничего нет")).toHaveLength(role ? 0 : 1);
+		expect(screen.queryAllByText("Нет инвестиционных счетов")).toHaveLength(
+			role ? 0 : 1,
+		);
 	});
 });

src/entities/brokerage-account/api/useBrokerageAccounts.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../shared/api";
+import type { paths } from "../../../shared/api/generated/schema";
+
+export const brokerageAccountsQueryKey = ["brokerage-accounts"] as const;
+
+export type BrokerageAccount =
+	paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"][number];
+
+export function useBrokerageAccounts(accessToken: string | null) {
+	return useQuery({
+		queryKey: brokerageAccountsQueryKey,
+		enabled: Boolean(accessToken),
+		staleTime: 60_000,
+		retry: false,
+		queryFn: async () => {
+			const { data, error } = await apiClient.GET(
+				"/api/v1/brokerage-accounts",
+				{
+					headers: { Authorization: `Bearer ${accessToken}` },
+				},
+			);
+			if (error) throw error;
+			return data as BrokerageAccount[];
+		},
+	});
+}

src/entities/brokerage-account/index.ts

@@ -0,0 +1,6 @@
+export {
+	brokerageAccountsQueryKey,
+	useBrokerageAccounts,
+} from "./api/useBrokerageAccounts";
+export { errorCode } from "./model/display";
+export { BrokerageAccountList } from "./ui/BrokerageAccountList";

src/entities/brokerage-account/model/display.ts

@@ -0,0 +1,11 @@
+import type { BrokerageAccount } from "../api/useBrokerageAccounts";
+
+export function accountTypeKey(type: BrokerageAccount["type"]) {
+	return `accounts.types.${type}` as const;
+}
+
+export function errorCode(error: unknown): string | undefined {
+	return typeof error === "object" && error !== null && "code" in error
+		? String(error.code)
+		: undefined;
+}

src/entities/brokerage-account/ui/BrokerageAccountList.module.css

@@ -0,0 +1,22 @@
+.card {
+	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
+	border-color: #bfdbfe;
+	box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
+	color: inherit;
+	text-decoration: none;
+	transition:
+		transform 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card:hover,
+.card:focus-visible {
+	box-shadow: 0 16px 36px rgb(15 23 42 / 10%);
+	transform: translateY(-2px);
+}
+
+.kicker {
+	color: #2563eb;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}

src/entities/brokerage-account/ui/BrokerageAccountList.test.tsx

@@ -0,0 +1,33 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+import { BrokerageAccountList } from "./BrokerageAccountList";
+
+describe("BrokerageAccountList", () => {
+	it("renders account details and an account link", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<BrokerageAccountList
+						accounts={[
+							{
+								id: "account-1",
+								name: "Основной",
+								type: "BROKERAGE",
+								openedOn: "2024-08-13",
+							},
+						]}
+					/>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
+			"href",
+			"/accounts/account-1",
+		);
+		expect(screen.getByText("Брокерский счет")).toBeInTheDocument();
+		expect(screen.getByText(/Открыт/)).toBeInTheDocument();
+	});
+});

src/entities/brokerage-account/ui/BrokerageAccountList.tsx

@@ -0,0 +1,46 @@
+import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import type { BrokerageAccount } from "../api/useBrokerageAccounts";
+import { accountTypeKey } from "../model/display";
+import classes from "./BrokerageAccountList.module.css";
+
+type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
+
+export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
+	const { t } = useTranslation();
+	return (
+		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+			{accounts.map((account) => (
+				<Card
+					component={Link}
+					to={`/accounts/${account.id}`}
+					key={account.id}
+					className={classes.card}
+					padding="lg"
+					radius="lg"
+					withBorder
+				>
+					<Stack gap="xs">
+						<Text className={classes.kicker} size="xs" fw={700}>
+							{t(accountTypeKey(account.type))}
+						</Text>
+						<Text fw={800} size="lg">
+							{account.name}
+						</Text>
+						{account.openedOn ? (
+							<Text c="dimmed" size="sm">
+								{t("accounts.openedOn", {
+									date: new Intl.DateTimeFormat("ru-RU", {
+										dateStyle: "long",
+										timeZone: "UTC",
+									}).format(new Date(`${account.openedOn}T00:00:00Z`)),
+								})}
+							</Text>
+						) : null}
+					</Stack>
+				</Card>
+			))}
+		</SimpleGrid>
+	);
+}

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -10,6 +10,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { brokerageAccountsQueryKey } from "../../../entities/brokerage-account";
 import { apiClient } from "../../../shared/api";
 import type { paths } from "../../../shared/api/generated/schema";
 import { useAuth } from "../../auth";
@@ -57,6 +58,7 @@ export function TbankConnectionSection() {
 		},
 		onSuccess: (data) => {
 			queryClient.setQueryData(["tbank-connection"], data);
+			queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
 			reset();
 		},
 		onError: (error) => setRequestError(errorCode(error)),
@@ -73,6 +75,7 @@ export function TbankConnectionSection() {
 				connected: false,
 				connectedAt: null,
 			});
+			queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
 			setDeleteOpened(false);
 		},
 		onError: () => setRequestError("REQUEST_ERROR"),

src/pages/accounts/ui/AccountsPage.tsx

@@ -1,13 +1,27 @@
-import { Stack, Title } from "@mantine/core";
+import { Button, Stack, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import {
+	BrokerageAccountList,
+	errorCode,
+	useBrokerageAccounts,
+} from "../../../entities/brokerage-account";
+import { useAuth } from "../../../features/auth";
 import { StateView } from "../../../shared/ui/StateView";
 
 export function AccountsPage() {
 	const { t } = useTranslation();
+	const { accessToken } = useAuth();
+	const accounts = useBrokerageAccounts(accessToken);
+	const code = errorCode(accounts.error);
+	if (accounts.isFetching) return <AccountsPageLoading />;
+	if (accounts.isError)
+		return <AccountsPageError code={code} retry={() => accounts.refetch()} />;
+	if (!accounts.data?.length) return <AccountsPageEmpty />;
 	return (
 		<Stack>
 			<Title order={1}>{t("accounts.title")}</Title>
-			<AccountsPageEmpty />
+			<BrokerageAccountList accounts={accounts.data} />
 		</Stack>
 	);
 }
@@ -23,13 +37,57 @@ export function AccountsPageLoading() {
 	);
 }
 
-export function AccountsPageError() {
+export function AccountsPageError({
+	code,
+	retry,
+}: {
+	code?: string;
+	retry?: () => void;
+}) {
 	const { t } = useTranslation();
+	const settingsAction = (
+		<Button component={Link} to="/settings" variant="light">
+			{t("accounts.openSettings")}
+		</Button>
+	);
+	if (code === "TBANK_NOT_CONNECTED")
+		return (
+			<StateView
+				error
+				title={t("accounts.notConnectedTitle")}
+				text={t("accounts.notConnectedText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "INVALID_TBANK_TOKEN")
+		return (
+			<StateView
+				error
+				title={t("accounts.invalidTokenTitle")}
+				text={t("accounts.invalidTokenText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "TBANK_UNAVAILABLE")
+		return (
+			<StateView
+				error
+				title={t("accounts.unavailableTitle")}
+				text={t("accounts.unavailableText")}
+				action={
+					<Stack align="flex-start">
+						<Button onClick={retry}>{t("accounts.retry")}</Button>
+						{settingsAction}
+					</Stack>
+				}
+			/>
+		);
 	return (
 		<StateView
 			error
 			title={t("states.errorTitle")}
 			text={t("states.errorText")}
+			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
 		/>
 	);
 }
@@ -37,6 +95,9 @@ export function AccountsPageError() {
 export function AccountsPageEmpty() {
 	const { t } = useTranslation();
 	return (
-		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+		<StateView
+			title={t("accounts.emptyTitle")}
+			text={t("accounts.emptyText")}
+		/>
 	);
 }

src/shared/api/generated/schema.d.ts

@@ -100,6 +100,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/brokerage-accounts": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["BrokerageAccountsController_list"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -126,6 +142,14 @@ export interface components {
         PutTbankConnectionDto: {
             token: string;
         };
+        BrokerageAccountDto: {
+            id: string;
+            name: string;
+            /** @enum {string} */
+            type: "BROKERAGE" | "INDIVIDUAL_INVESTMENT" | "INVEST_BOX" | "MONEY_MARKET_FUND";
+            /** Format: date */
+            openedOn: string | null;
+        };
     };
     responses: never;
     parameters: never;
@@ -295,4 +319,23 @@ export interface operations {
             };
         };
     };
+    BrokerageAccountsController_list: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BrokerageAccountDto"][];
+                };
+            };
+        };
+    };
 }

src/shared/i18n/locales/ru.ts

@@ -18,7 +18,29 @@ export const ru = {
 				passwordsDoNotMatch: "Пароли не совпадают",
 			},
 		},
-		accounts: { title: "Счета" },
+		accounts: {
+			title: "Счета",
+			emptyTitle: "Нет инвестиционных счетов",
+			emptyText:
+				"Откройте инвестиционный счет в T-Bank, чтобы он появился здесь.",
+			openedOn: "Открыт {{date}}",
+			openSettings: "Открыть настройки T-Bank",
+			notConnectedTitle: "Подключите T-Bank",
+			notConnectedText:
+				"Для просмотра счетов подключите T-Bank Invest в настройках.",
+			invalidTokenTitle: "Проверьте подключение T-Bank",
+			invalidTokenText: "Сохраненный token больше не дает доступ к счетам.",
+			unavailableTitle: "T-Bank временно недоступен",
+			unavailableText:
+				"Попробуйте загрузить счета еще раз или проверьте подключение.",
+			retry: "Повторить",
+			types: {
+				BROKERAGE: "Брокерский счет",
+				INDIVIDUAL_INVESTMENT: "ИИС",
+				INVEST_BOX: "Инвесткопилка",
+				MONEY_MARKET_FUND: "Фонд денежного рынка",
+			},
+		},
 		account: { title: "Счет" },
 		settings: { title: "Настройки" },
 		tbank: {