feat: redesign portfolio position cards

src/pages/account/ui/AccountPage.module.css

@@ -3,7 +3,7 @@
 }
 
 .total,
-.row,
+.tile,
 .cash {
 	border-color: var(--mantine-color-gray-3);
 	background: var(--mantine-color-gray-0);
@@ -14,7 +14,7 @@
 	border-top: 3px solid var(--mantine-color-blue-6);
 }
 
-.row,
+.tile,
 .cash {
 	padding: var(--mantine-spacing-md);
 }
@@ -24,8 +24,14 @@
 	justify-content: space-between;
 }
 
-@media (max-width: 36em) {
-	.row :global(.mantine-Group-root) {
-		align-items: flex-start;
-	}
+.positive {
+	color: var(--mantine-color-green-6);
+}
+
+.negative {
+	color: var(--mantine-color-red-6);
+}
+
+.mono {
+	font-family: var(--mantine-font-family-monospace);
 }

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

@@ -36,6 +36,7 @@ const portfolio: Portfolio = {
 			currentValue: null,
 			averagePurchasePrice: null,
 			absoluteReturn: null,
+			isin: null,
 		},
 		{
 			figi: "FIGI-1",
@@ -43,8 +44,9 @@ const portfolio: Portfolio = {
 			type: "BOND",
 			quantity: "1",
 			currentValue: { currency: "RUB", value: "10" },
-			averagePurchasePrice: null,
+			averagePurchasePrice: { currency: "RUB", value: "11" },
 			absoluteReturn: { currency: "RUB", value: "-1" },
+			isin: "RU000A0JX0J2",
 		},
 	],
 	cashBalances: [{ currency: "USD", value: "0.5" }],
@@ -80,7 +82,7 @@ describe("AccountPage states", () => {
 		expect(retry).toHaveBeenCalledOnce();
 	});
 
-	it("renders a stale portfolio in upstream order with nullable values", () => {
+	it("renders a stale portfolio in upstream order with nullable values hidden", () => {
 		renderPage(<AccountPageLoaded portfolio={portfolio} />);
 
 		expect(
@@ -91,16 +93,20 @@ describe("AccountPage states", () => {
 				"T-Bank временно недоступен. Показан последний успешный снимок.",
 			),
 		).toBeInTheDocument();
-		expect(screen.getByText("—")).toBeInTheDocument();
-		expect(screen.getByText("Доход: —")).toBeInTheDocument();
-		const positions = screen
-			.getAllByText(/Вторая|Первая/)
-			.map((element) => element.textContent);
-		expect(positions).toEqual(["Вторая", "Первая"]);
 		expect(screen.getByRole("heading", { name: "Акции" })).toBeInTheDocument();
 		expect(
 			screen.getByRole("heading", { name: "Облигации" }),
 		).toBeInTheDocument();
+		const positions = screen
+			.getAllByText(/Вторая|Первая/)
+			.map((element) => element.textContent);
+		expect(positions).toEqual(["Вторая", "Первая"]);
+		expect(screen.getByText("10 ₽")).toBeInTheDocument();
+		expect(screen.getByText("Доход: -1 ₽")).toBeInTheDocument();
+		expect(screen.getByText("Средняя цена: 11 ₽")).toBeInTheDocument();
+		expect(screen.getByText("Доля: 100 %")).toBeInTheDocument();
+		expect(screen.getByText("RU000A0JX0J2")).toBeInTheDocument();
+		expect(screen.queryByText("—")).not.toBeInTheDocument();
 	});
 
 	it("uses the cached account title when available", () => {

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

@@ -19,7 +19,11 @@ import {
 	useBrokerageEvents,
 } from "@/entities/brokerage-event";
 import type { Portfolio } from "@/entities/portfolio";
-import { formatMoney, formatSnapshotTime } from "@/entities/portfolio";
+import {
+	formatMoney,
+	formatShare,
+	formatSnapshotTime,
+} from "@/entities/portfolio";
 import { StateView } from "@/shared/ui";
 import classes from "./AccountPage.module.css";
 
@@ -124,6 +128,15 @@ export function AccountPageLoaded({
 	const other = portfolio.positions.filter(
 		(p) => p.type !== "STOCK" && p.type !== "BOND",
 	);
+	const denominators = new Map<string, number>();
+	for (const position of portfolio.positions) {
+		if (!position.currentValue) continue;
+		const currency = position.currentValue.currency;
+		denominators.set(
+			currency,
+			(denominators.get(currency) ?? 0) + Number(position.currentValue.value),
+		);
+	}
 	return (
 		<Stack className={classes.page} gap="lg">
 			<AccountHeading account={account} />
@@ -148,15 +161,24 @@ export function AccountPageLoaded({
 				))}
 			</SimpleGrid>
 			{stocks.length ? (
-				<PositionSection title={t("portfolio.stocks")} positions={stocks} />
+				<PositionSection
+					title={t("portfolio.stocks")}
+					positions={stocks}
+					denominators={denominators}
+				/>
 			) : null}
 			{bonds.length ? (
-				<PositionSection title={t("portfolio.bonds")} positions={bonds} />
+				<PositionSection
+					title={t("portfolio.bonds")}
+					positions={bonds}
+					denominators={denominators}
+				/>
 			) : null}
 			{other.length ? (
 				<PositionSection
 					title={t("portfolio.otherPositions")}
 					positions={other}
+					denominators={denominators}
 				/>
 			) : null}
 			<Section title={t("portfolio.cashBalances")}>
@@ -269,40 +291,97 @@ function RecentEvent({ event }: { event: BrokerageEvent }) {
 function PositionSection({
 	title,
 	positions,
+	denominators,
 }: {
 	title: string;
 	positions: Portfolio["positions"];
+	denominators: Map<string, number>;
 }) {
-	const { t } = useTranslation();
 	return (
 		<Section title={title}>
-			{positions.map((position) => (
-				<Card
-					className={classes.row}
-					key={`${position.figi}-${position.displayName}-${position.quantity}`}
-					withBorder
-				>
-					<Group justify="space-between" align="flex-start" wrap="nowrap">
-						<Stack gap={2}>
-							<Text fw={700}>{position.displayName}</Text>
-							<Text c="dimmed" size="sm">
-								{t("portfolio.quantity", { value: position.quantity })}
-							</Text>
-						</Stack>
-						<Stack gap={2} align="flex-end">
-							<Text fw={700}>{formatMoney(position.currentValue)}</Text>
-							<Text c="dimmed" size="sm">
-								{t("portfolio.return", {
-									value: formatMoney(position.absoluteReturn),
-								})}
-							</Text>
-						</Stack>
-					</Group>
-				</Card>
-			))}
+			<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
+				{positions.map((position) => (
+					<PositionCard
+						key={`${position.figi}-${position.displayName}-${position.quantity}`}
+						position={position}
+						denominators={denominators}
+					/>
+				))}
+			</SimpleGrid>
 		</Section>
 	);
 }
+function PositionCard({
+	position,
+	denominators,
+}: {
+	position: Portfolio["positions"][number];
+	denominators: Map<string, number>;
+}) {
+	const { t } = useTranslation();
+	const share = position.currentValue?.currency
+		? formatShare(position.currentValue, {
+				currency: position.currentValue.currency,
+				value: String(denominators.get(position.currentValue.currency) ?? 0),
+			})
+		: null;
+	const returnClass = position.absoluteReturn
+		? Number(position.absoluteReturn.value) > 0
+			? classes.positive
+			: Number(position.absoluteReturn.value) < 0
+				? classes.negative
+				: undefined
+		: undefined;
+	return (
+		<Card className={classes.tile} withBorder>
+			<Group justify="space-between" align="flex-start" wrap="nowrap">
+				<Stack gap={2} miw={0}>
+					<Text fw={700} lineClamp={1}>
+						{position.displayName}
+					</Text>
+					{position.isin ? (
+						<Text c="dimmed" size="xs" className={classes.mono}>
+							{position.isin}
+						</Text>
+					) : null}
+					<Text c="dimmed" size="xs">
+						{t("portfolio.quantity", { value: position.quantity })}
+					</Text>
+				</Stack>
+				<Stack gap={2} align="flex-end">
+					{position.currentValue ? (
+						<Text fw={800} size="lg">
+							{formatMoney(position.currentValue)}
+						</Text>
+					) : null}
+					{position.absoluteReturn ? (
+						<Text size="sm" fw={600} className={returnClass}>
+							{t("portfolio.return", {
+								value: formatMoney(position.absoluteReturn),
+							})}
+						</Text>
+					) : null}
+				</Stack>
+			</Group>
+			{position.averagePurchasePrice || share ? (
+				<Group justify="space-between" mt="xs">
+					{position.averagePurchasePrice ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.avgPrice", {
+								value: formatMoney(position.averagePurchasePrice),
+							})}
+						</Text>
+					) : null}
+					{share ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.share", { value: share })}
+						</Text>
+					) : null}
+				</Group>
+			) : null}
+		</Card>
+	);
+}
 function AccountHeading({ account }: { account?: BrokerageAccount }) {
 	const { t } = useTranslation();
 	return (