refactor: colocate frontend component files

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

@@ -0,0 +1,166 @@
+.list {
+	width: 100%;
+}
+
+.card {
+	min-width: 0;
+	gap: var(--mantine-spacing-xl);
+	background: var(--mantine-color-white);
+	border-color: var(--mantine-color-gray-3);
+	box-shadow: 0 4px 16px rgb(15 23 42 / 3%);
+	color: inherit;
+	text-decoration: none;
+	transition:
+		transform 160ms ease,
+		box-shadow 160ms ease,
+		border-color 160ms ease;
+}
+
+.card:hover,
+.card:focus-visible {
+	border-color: var(--mantine-color-blue-3);
+	box-shadow: 0 12px 28px rgb(15 23 42 / 8%);
+	transform: translateY(-3px);
+}
+
+.card:focus-visible {
+	outline: 2px solid var(--mantine-color-blue-6);
+	outline-offset: 3px;
+}
+
+.identity {
+	min-width: 0;
+}
+
+.kicker {
+	padding: 5px 10px;
+	border-radius: var(--mantine-radius-sm);
+	background: var(--mantine-color-blue-0);
+	color: var(--mantine-color-blue-8);
+	letter-spacing: 0.02em;
+}
+
+.accountIcon {
+	width: 28px;
+	height: 28px;
+	flex-shrink: 0;
+	color: var(--mantine-color-blue-5);
+}
+
+.name {
+	margin: 0;
+	font-size: var(--mantine-h3-font-size);
+	line-height: 1.3;
+	overflow-wrap: anywhere;
+}
+
+.balance {
+	flex: 1;
+}
+
+.summary {
+	font-variant-numeric: tabular-nums;
+}
+
+.total {
+	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
+	letter-spacing: -0.035em;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+
+.total + .total {
+	font-size: var(--mantine-font-size-lg);
+	font-weight: 500;
+	letter-spacing: 0;
+	color: var(--mantine-color-gray-7);
+}
+
+.positions {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--mantine-spacing-sm);
+	margin: 0;
+}
+
+.positions > div {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 4px var(--mantine-spacing-sm);
+	padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+	border-radius: var(--mantine-radius-md);
+}
+
+.stocks {
+	background: var(--mantine-color-blue-0);
+	color: var(--mantine-color-blue-8);
+}
+
+.bonds {
+	background: var(--mantine-color-grape-0);
+	color: var(--mantine-color-grape-8);
+}
+
+.positions dt {
+	font-size: var(--mantine-font-size-sm);
+	font-weight: 500;
+}
+
+.positions dd {
+	margin: 0;
+	font-size: 1.75rem;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.25;
+	overflow-wrap: anywhere;
+}
+
+.footer {
+	border-top: 1px solid var(--mantine-color-gray-2);
+	padding-top: var(--mantine-spacing-md);
+}
+
+.open {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--mantine-spacing-xs);
+	margin-left: auto;
+	color: var(--mantine-color-blue-7);
+}
+
+.arrow {
+	font-size: var(--mantine-font-size-lg);
+	transition: transform 160ms ease;
+}
+
+.card:hover .arrow {
+	transform: translateX(3px);
+}
+
+@media (max-width: 36em) {
+	.card {
+		padding: var(--mantine-spacing-md);
+		gap: var(--mantine-spacing-lg);
+	}
+
+	.positions > div {
+		flex-direction: column;
+		align-items: flex-start;
+		padding: var(--mantine-spacing-sm);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.card,
+	.arrow {
+		transition: none;
+	}
+
+	.card:hover,
+	.card:focus-visible,
+	.card:hover .arrow {
+		transform: none;
+	}
+}

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

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MemoryRouter } from "react-router";
+import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
+import { brokerageAccountCards } from "../../model/display";
+import { BrokerageAccountList } from "./BrokerageAccountList";
+
+const syntheticAccount = {
+	id: "storybook-account",
+	name: "Учебный брокерский счёт",
+	type: "BROKERAGE",
+	openedOn: "2025-03-15",
+	portfolioSummary: {
+		stockPositionCount: 5,
+		bondPositionCount: 12,
+		totalsByCurrency: [
+			{ currency: "RUB", value: "125000.50" },
+			{ currency: "USD", value: "320" },
+			{ currency: "EUR", value: "210" },
+		],
+	},
+} satisfies BrokerageAccount;
+
+const meta = {
+	title: "Product/BrokerageAccountList",
+	component: BrokerageAccountList,
+	tags: ["autodocs"],
+	argTypes: {
+		accounts: { control: false },
+	},
+	decorators: [
+		(Story) => (
+			<MemoryRouter initialEntries={["/accounts"]}>
+				<Story />
+			</MemoryRouter>
+		),
+	],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Карточки счетов WealthLedger со сводкой по валютам и числом наименований акций и облигаций. Используйте на экране выбора счёта; отсутствие сводки и отсутствие сумм имеют разные сообщения. Примеры содержат вымышленные данные. Ссылки меняют только локальный маршрут MemoryRouter; страница назначения в этой истории не отображается.",
+			},
+		},
+	},
+	args: { accounts: brokerageAccountCards([syntheticAccount]) },
+} satisfies Meta<typeof BrokerageAccountList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Available: Story = {
+	name: "Сводка по нескольким валютам",
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Показываются первые две валюты и количество остальных. Суммы разных валют не складываются в общий итог.",
+			},
+		},
+	},
+};
+
+export const Unavailable: Story = {
+	name: "Сводка недоступна",
+	args: {
+		accounts: brokerageAccountCards([
+			{ ...syntheticAccount, portfolioSummary: null, openedOn: null },
+		]),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.",
+			},
+		},
+	},
+};
+
+export const Empty: Story = {
+	name: "Нет текущих сумм",
+	args: {
+		accounts: brokerageAccountCards([
+			{
+				...syntheticAccount,
+				portfolioSummary: {
+					totalsByCurrency: [],
+					stockPositionCount: 0,
+					bondPositionCount: 0,
+				},
+			},
+		]),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Успешно полученная пустая сводка отличается от ошибки получения данных. Карточка сохраняет название, тип счёта и переход.",
+			},
+		},
+	},
+};
+
+export const LongName: Story = {
+	name: "Длинное название счёта",
+	args: {
+		accounts: brokerageAccountCards([
+			{
+				...syntheticAccount,
+				name: "Учебный индивидуальный инвестиционный счёт для долгосрочных накоплений",
+				type: "INDIVIDUAL_INVESTMENT",
+			},
+		]),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Проверьте перенос длинного названия на узком экране и доступность всей карточки с клавиатуры.",
+			},
+		},
+	},
+};
+
+export const AccountGrid: Story = {
+	name: "Несколько счетов",
+	args: {
+		accounts: brokerageAccountCards([
+			{
+				...syntheticAccount,
+				name: "Основной",
+				portfolioSummary: {
+					totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }],
+					stockPositionCount: 8,
+					bondPositionCount: 14,
+				},
+			},
+			{
+				...syntheticAccount,
+				id: "storybook-iis",
+				name: "Долгосрочные инвестиции",
+				type: "INDIVIDUAL_INVESTMENT",
+				portfolioSummary: {
+					totalsByCurrency: [{ currency: "RUB", value: "480250" }],
+					stockPositionCount: 0,
+					bondPositionCount: 6,
+				},
+			},
+		]),
+	},
+};
+
+export const UnvaluedPositions: Story = {
+	name: "Бумаги без текущей оценки",
+	args: {
+		accounts: brokerageAccountCards([
+			{
+				...syntheticAccount,
+				portfolioSummary: {
+					totalsByCurrency: [],
+					stockPositionCount: 2,
+					bondPositionCount: 1,
+				},
+			},
+		]),
+	},
+};
+
+export const LargeValues: Story = {
+	name: "Длинные суммы",
+	args: {
+		accounts: brokerageAccountCards([
+			{
+				...syntheticAccount,
+				portfolioSummary: {
+					totalsByCurrency: [
+						{ currency: "RUB", value: "1234567890123456789.50" },
+						{ currency: "USD", value: "-9876543210987654321.50" },
+					],
+					stockPositionCount: 21,
+					bondPositionCount: 105,
+				},
+			},
+		]),
+	},
+};

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

@@ -0,0 +1,86 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+import { brokerageAccountCards } from "../../model/display";
+import { BrokerageAccountList } from "./BrokerageAccountList";
+
+describe("BrokerageAccountList", () => {
+	it("renders account details and an account link", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<BrokerageAccountList
+						accounts={brokerageAccountCards([
+							{
+								id: "account-1",
+								name: "Основной",
+								type: "BROKERAGE",
+								openedOn: "2024-08-13",
+								portfolioSummary: {
+									stockPositionCount: 5,
+									bondPositionCount: 12,
+									totalsByCurrency: [
+										{ currency: "RUB", value: "1500" },
+										{ currency: "USD", value: "20" },
+										{ currency: "EUR", value: "5" },
+									],
+								},
+							},
+							{
+								id: "account-2",
+								name: "Недоступный",
+								type: "BROKERAGE",
+								openedOn: null,
+								portfolioSummary: null,
+							},
+							{
+								id: "account-3",
+								name: "Пустой",
+								type: "BROKERAGE",
+								openedOn: null,
+								portfolioSummary: {
+									totalsByCurrency: [],
+									stockPositionCount: 2,
+									bondPositionCount: 0,
+								},
+							},
+						])}
+					/>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
+			"href",
+			"/accounts/account-1",
+		);
+		expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
+		expect(screen.getByText(/^Открыт /)).toBeInTheDocument();
+		expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
+		expect(screen.getByText("20 USD")).toBeInTheDocument();
+		expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
+		expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
+		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
+		expect(screen.getAllByText("Открыть счет")).toHaveLength(3);
+		const available = within(screen.getByRole("link", { name: /Основной/ }));
+		expect(available.getByText("Акции").nextElementSibling).toHaveTextContent(
+			"5",
+		);
+		expect(
+			available.getByText("Облигации").nextElementSibling,
+		).toHaveTextContent("12");
+		const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
+		expect(unvalued.getByText("Акции").nextElementSibling).toHaveTextContent(
+			"2",
+		);
+		expect(
+			unvalued.getByText("Облигации").nextElementSibling,
+		).toHaveTextContent("0");
+		expect(
+			within(screen.getByRole("link", { name: /Недоступный/ })).queryByText(
+				"Акции",
+			),
+		).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,133 @@
+import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { formatDate, formatMoney } from "@/shared/lib";
+import type { BrokerageAccountCard } from "../../model/display";
+import { accountTypeKey } from "../../model/display";
+import classes from "./BrokerageAccountList.module.css";
+
+type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };
+
+type BrokerageAccountSummaryProps = {
+	summary: BrokerageAccountCard["summary"];
+};
+
+const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
+	const { summary } = props;
+	const { t } = useTranslation();
+	if (summary.state === "unavailable")
+		return (
+			<Text c="dimmed" size="sm">
+				{t("accounts.summaryUnavailable")}
+			</Text>
+		);
+	if (summary.state === "empty")
+		return (
+			<Text c="dimmed" size="sm">
+				{t("accounts.summaryEmpty")}
+			</Text>
+		);
+
+	return (
+		<Stack className={classes.summary} gap={4}>
+			{summary.totals.map((total) => (
+				<Text className={classes.total} fw={700} key={total.currency}>
+					{formatMoney(total)}
+				</Text>
+			))}
+			{summary.remainingCurrencyCount ? (
+				<Text c="dimmed" size="sm">
+					{t("accounts.remainingCurrencies", {
+						count: summary.remainingCurrencyCount,
+					})}
+				</Text>
+			) : null}
+		</Stack>
+	);
+};
+
+const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
+	const { accounts } = props;
+	const { t } = useTranslation();
+
+	return (
+		<SimpleGrid className={classes.list} cols={{ base: 1, lg: 2 }} spacing="lg">
+			{accounts.map(({ account, summary, positionCounts }) => (
+				<Card
+					component={Link}
+					to={`/accounts/${account.id}`}
+					key={account.id}
+					className={classes.card}
+					padding="xl"
+					radius="lg"
+					withBorder
+				>
+					<Stack className={classes.identity} gap="sm">
+						<Group justify="space-between" wrap="nowrap" gap="sm">
+							<Text className={classes.kicker} size="xs" fw={700}>
+								{t(accountTypeKey(account.type))}
+							</Text>
+							<svg
+								className={classes.accountIcon}
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								aria-hidden="true"
+								focusable="false"
+							>
+								<rect x="3" y="5" width="18" height="15" rx="3" />
+								<path d="M3 9h18M7 15h3M14 5V3H7a4 4 0 0 0-4 4" />
+							</svg>
+						</Group>
+						<Text component="h2" className={classes.name} fw={700}>
+							{account.name}
+						</Text>
+					</Stack>
+					<Stack className={classes.balance} gap="xs">
+						<Text c="dimmed" size="sm">
+							{t("accounts.currentValue")}
+						</Text>
+						<BrokerageAccountSummary summary={summary} />
+					</Stack>
+					{positionCounts ? (
+						<dl className={classes.positions}>
+							<div className={classes.stocks}>
+								<dt>{t("accounts.stocks")}</dt>
+								<dd>
+									{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
+								</dd>
+							</div>
+							<div className={classes.bonds}>
+								<dt>{t("accounts.bonds")}</dt>
+								<dd>
+									{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
+								</dd>
+							</div>
+						</dl>
+					) : null}
+					<Group className={classes.footer} justify="space-between" gap="sm">
+						{account.openedOn ? (
+							<Text c="dimmed" size="xs">
+								{t("accounts.openedOn", {
+									date: formatDate(account.openedOn),
+								})}
+							</Text>
+						) : null}
+						<Text component="span" className={classes.open} size="sm" fw={600}>
+							{t("accounts.openAccount")}
+							<span className={classes.arrow} aria-hidden="true">
+								→
+							</span>
+						</Text>
+					</Group>
+				</Card>
+			))}
+		</SimpleGrid>
+	);
+};
+
+export { BrokerageAccountList };