feat(accounts): enrich brokerage account list

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

@@ -1,6 +1,14 @@
+.list {
+	width: 100%;
+}
+
 .card {
-	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
-	border-color: #bfdbfe;
+	background: linear-gradient(
+		135deg,
+		var(--mantine-color-blue-0) 0%,
+		var(--mantine-color-body) 72%
+	);
+	border-color: var(--mantine-color-blue-2);
 	box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
 	color: inherit;
 	text-decoration: none;
@@ -16,7 +24,30 @@
 }
 
 .kicker {
-	color: #2563eb;
+	color: var(--mantine-color-blue-7);
 	letter-spacing: 0.04em;
 	text-transform: uppercase;
 }
+
+.summary {
+	font-variant-numeric: tabular-nums;
+}
+
+.total {
+	white-space: nowrap;
+}
+
+.open {
+	color: var(--mantine-color-blue-7);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.card {
+		transition: none;
+	}
+
+	.card:hover,
+	.card:focus-visible {
+		transform: none;
+	}
+}

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

@@ -2,6 +2,7 @@ import { MantineProvider } from "@mantine/core";
 import { render, screen } 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", () => {
@@ -10,14 +11,35 @@ describe("BrokerageAccountList", () => {
 			<MantineProvider>
 				<MemoryRouter>
 					<BrokerageAccountList
-						accounts={[
+						accounts={brokerageAccountCards([
 							{
 								id: "account-1",
 								name: "Основной",
 								type: "BROKERAGE",
 								openedOn: "2024-08-13",
+								portfolioSummary: {
+									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: [] },
+							},
+						])}
 					/>
 				</MemoryRouter>
 			</MantineProvider>,
@@ -27,7 +49,13 @@ describe("BrokerageAccountList", () => {
 			"href",
 			"/accounts/account-1",
 		);
-		expect(screen.getByText("Брокерский счет")).toBeInTheDocument();
-		expect(screen.getByText(/Открыт/)).toBeInTheDocument();
+		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);
 	});
 });

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

@@ -1,20 +1,59 @@
-import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Card, Group, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import type { BrokerageAccount } from "../api/useBrokerageAccounts";
+import { formatMoney } from "@/entities/portfolio";
+import type { BrokerageAccountCard } from "../model/display";
 import { accountTypeKey } from "../model/display";
 import classes from "./BrokerageAccountList.module.css";
 
-type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
+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 (
+		<Group className={classes.summary} gap="sm" wrap="wrap">
+			{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}
+		</Group>
+	);
+};
 
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 	const { accounts } = props;
 	const { t } = useTranslation();
 
 	return (
-		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-			{accounts.map((account) => (
+		<Stack className={classes.list} gap="md">
+			{accounts.map(({ account, summary }) => (
 				<Card
 					component={Link}
 					to={`/accounts/${account.id}`}
@@ -31,6 +70,7 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 						<Text fw={800} size="lg">
 							{account.name}
 						</Text>
+						<BrokerageAccountSummary summary={summary} />
 						{account.openedOn ? (
 							<Text c="dimmed" size="sm">
 								{t("accounts.openedOn", {
@@ -41,10 +81,13 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 								})}
 							</Text>
 						) : null}
+						<Text className={classes.open} size="sm" fw={700}>
+							{t("accounts.openAccount")}
+						</Text>
 					</Stack>
 				</Card>
 			))}
-		</SimpleGrid>
+		</Stack>
 	);
 };