feat: add brocker account list

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>
+	);
+}