feat: show return, cash and structure on account cards (#114)

2026-10-27 05:29:11 +03:00
parent 0e4bbec2a7
commit 431559be0f
12 changed files with 984 additions and 431 deletions
@@ -1,10 +1,10 @@
-import type { FC } from "react";
+import type { CSSProperties, FC } from "react";

-import { Group, Stack, Text } from "@mantine/core";
+import { Badge, Group, Stack, Text, VisuallyHidden } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";

-import { formatMoney } from "@/shared/lib";
+import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";

 import type { BrokerageAccountCard } from "../../model/display";
@@ -12,12 +12,176 @@ import type { BrokerageAccountCard } from "../../model/display";
 import { accountTypeKey } from "../../model/display";
 import classes from "./BrokerageAccountList.module.css";

+const DECIMAL_PART_COUNT = 2;
+const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
+
+type AvailableSummary = Extract<
+	BrokerageAccountCard["summary"],
+	{ state: "available" }
+>;
+
 type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };

 type BrokerageAccountSummaryProps = {
 	summary: BrokerageAccountCard["summary"];
 };

+type PortfolioSummary = AvailableSummary["portfolio"];
+
+type ReturnValueProps = {
+	item: PortfolioSummary["unrealizedReturnByCurrency"][number];
+};
+
+type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
+
+function formatPercent(value: null | string) {
+	if (value === null) return "—";
+
+	const formatted = `${value.replace(".", ",")}\u{A0}%`;
+	if (isZero(value))
+		return value.startsWith("-") ? formatted.slice(1) : formatted;
+
+	return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
+}
+
+function formatStructurePercent(value: string) {
+	let trimmed = value;
+	while (trimmed.includes(".") && trimmed.endsWith("0"))
+		trimmed = trimmed.slice(0, -1);
+	if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
+
+	return trimmed.replace(".", ",");
+}
+
+function isZero(value: string) {
+	const unsigned = value.startsWith("-") ? value.slice(1) : value;
+	const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);
+
+	return integer.replaceAll("0", "") === ""
+		&& fraction.replaceAll("0", "") === "";
+}
+
+const ReturnValue: FC<ReturnValueProps> = (props) => {
+	const { t } = useTranslation();
+	const { item } = props;
+
+	const isNegative = item.percent !== null
+		&& item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	const isPositive = item.percent !== null
+		&& !item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	let toneClass = classes.neutral;
+	if (isNegative) toneClass = classes.negative;
+	else if (isPositive) toneClass = classes.positive;
+
+	return (
+		<Group className={classes.return} gap="xs" wrap="nowrap">
+			<Text className={toneClass} fw={700} size="sm">
+				{formatPercent(item.percent)}
+			</Text>
+
+			<Text className={toneClass} size="sm">
+				{formatMoney(
+					{ currency: item.currency, value: item.absolute },
+					{ withSign: true },
+				)}
+			</Text>
+
+			{item.partial && (
+				<Text c="dimmed" size="xs">
+					{t("accounts.partial")}
+				</Text>
+			)}
+		</Group>
+	);
+};
+
+type StructureBarProps = { item: StructureCurrency };
+
+const StructureBar: FC<StructureBarProps> = (props) => {
+	const { t } = useTranslation();
+
+	const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
+		const category = props.item.categories.find(item => item.type === type);
+
+		return category ? [category] : [];
+	});
+
+	const description = categories.map((category) => {
+		const label = t(portfolioCategoryPresentation[category.type].label);
+
+		const percent = category.sharePercent === null
+			? null
+			: formatStructurePercent(category.sharePercent);
+
+		return percent === null
+			? t("accounts.structure.incomplete", { category: label })
+			: t("accounts.structure.category", { category: label, percent });
+	}).join("; ");
+
+	const label = t("accounts.structure.label", {
+		currency: props.item.currency,
+		value: description,
+	});
+
+	const legendCategories = categories.filter(category =>
+		category.sharePercent === null || !isZero(category.sharePercent));
+
+	return (
+		<Stack gap={4}>
+			<div
+				aria-label={label}
+				className={classes.structureBar}
+				role="img"
+				title={label}
+			>
+				{categories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+
+					const style = {
+						"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
+						"width": `${category.sharePercent ?? 0}%`,
+					} as CSSProperties;
+
+					return (
+						<div
+							aria-hidden
+							className={classes.structureSection}
+							key={category.type}
+							style={style}
+						/>
+					);
+				})}
+			</div>
+
+			<Group aria-hidden gap="xs" wrap="wrap">
+				{legendCategories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+					const categoryLabel = t(presentation.label);
+
+					const text = category.sharePercent === null
+						? categoryLabel
+						: t("accounts.structure.category", {
+								category: categoryLabel,
+								percent: formatStructurePercent(category.sharePercent),
+							});
+
+					return (
+						<Text c="dimmed" key={category.type} size="xs">
+							<Text c={presentation.color} component="span">●</Text>
+							{" "}
+							{text}
+						</Text>
+					);
+				})}
+			</Group>
+		</Stack>
+	);
+};
+
 const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 	const { summary } = props;
 	const { t } = useTranslation();
@@ -35,19 +199,51 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 		);

 	return (
-		<Stack className={classes.summary} gap={4}>
-			{summary.totals.map(total => (
-				<Text className={classes.total} fw={700} key={total.currency}>
-					{formatMoney(total, { withRoundedCents: true })}
-				</Text>
-			))}
+		<Stack className={classes.balance} gap="xs">
+			<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
+				<Stack className={classes.summary} gap={4}>
+					{summary.totals.map(total => (
+						<Text className={classes.total} fw={700} key={total.currency}>
+							{formatMoney(total, { withRoundedCents: true })}
+						</Text>
+					))}

-			{!!summary.remainingCurrencyCount && (
-				<Text c="dimmed" size="sm">
-					{t("accounts.remainingCurrencies", {
-						count: summary.remainingCurrencyCount,
+					{!!summary.remainingCurrencyCount && (
+						<Text c="dimmed" size="sm">
+							{t("accounts.remainingCurrencies", {
+								count: summary.remainingCurrencyCount,
+							})}
+						</Text>
+					)}
+				</Stack>
+
+				<Stack gap={4}>
+					{summary.totals.map((total) => {
+						const item = summary.portfolio.unrealizedReturnByCurrency.find(
+							returnItem => returnItem.currency === total.currency,
+						);
+
+						return item
+							? <ReturnValue item={item} key={total.currency} />
+							: null;
 					})}
-				</Text>
+				</Stack>
+			</Group>
+
+			{summary.portfolio.cashBalances.length > 0 && (
+				<Group className={classes.cash} gap="xs" justify="flex-end">
+					<Text c="dimmed" size="xs">
+						{t("accounts.cash")}
+					</Text>
+
+					<Stack gap={0}>
+						{summary.portfolio.cashBalances.map(cash => (
+							<Text className={classes.cashValue} key={cash.currency} size="sm">
+								{formatMoney(cash, { withRoundedCents: true })}
+							</Text>
+						))}
+					</Stack>
+				</Group>
 			)}
 		</Stack>
 	);
@@ -60,13 +256,13 @@ type BrokerageAccountSourceStatusProps = {
 const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	props,
 ) => {
-	const { source } = props;
 	const { t } = useTranslation();
-
+	const { source } = props;
 	const isSyncing = source?.lastAttempt.state === "running";

-	const errorText
-		= source?.lastAttempt.state === "failed" ? t("accounts.refreshError") : null;
+	const errorText = source?.lastAttempt.state === "failed"
+		? t("accounts.refreshError")
+		: null;

 	return (
 		<>
@@ -86,80 +282,110 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	);
 };

+type AccountDescriptionProps = {
+	account: BrokerageAccountCard;
+};
+
+const AccountDescription: FC<AccountDescriptionProps> = (props) => {
+	const { t } = useTranslation();
+	const { account, summary } = props.account;
+	if (summary.state !== "available") return null;
+
+	const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
+		t("accounts.description.return", {
+			absolute: formatMoney(
+				{ currency: item.currency, value: item.absolute },
+				{ withSign: true },
+			),
+			currency: item.currency,
+			percent: formatPercent(item.percent),
+		}),
+	);
+
+	const structures = summary.portfolio.structure.currencies.map((item) => {
+		const categories = item.categories.map(category =>
+			t("accounts.description.structureCategory", {
+				category: t(portfolioCategoryPresentation[category.type].label),
+				value: formatMoney(
+					{ currency: item.currency, value: category.value },
+					{ withRoundedCents: true },
+				),
+			}),
+		).join(", ");
+
+		return t("accounts.description.structure", {
+			currency: item.currency,
+			value: categories,
+		});
+	});
+
+	const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
+		item => item.partial,
+	);
+
+	const details = [...returns, ...structures].join(". ");
+
+	return (
+		<VisuallyHidden>
+			{t("accounts.description.start", {
+				name: account.name,
+				type: t(accountTypeKey(account.type)),
+			})}
+			{t("accounts.description.currentValue", {
+				value: summary.portfolio.totalsByCurrency
+					.map(total => formatMoney(total)).join(", "),
+			})}
+			{details ? `${details}. ` : ""}
+			{hasPartialReturn ? t("accounts.brokerDescription") : ""}
+		</VisuallyHidden>
+	);
+};
+
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
-	const { accounts } = props;
 	const { t } = useTranslation();

 	return (
-		<Stack className={classes.list} component="ul" gap="sm">
-			{accounts.map(({ account, positionCounts, source, summary }) => {
-				const accountType = t(accountTypeKey(account.type));
+		<ul className={classes.list}>
+			{props.accounts.map(({ account, positionCounts, source, summary }) => (
+				<li key={account.id}>
+					<Link className={classes.row} to={`/accounts/${account.id}`}>
+						<Group className={classes.identity} wrap="nowrap">
+							<h2 className={classes.name}>{account.name}</h2>

-				return (
-					<li key={account.id}>
-						<Link className={classes.row} to={`/accounts/${account.id}`}>
-							<Stack className={classes.identity} gap={2}>
-								<Text className={classes.name} component="h2" fw={600}>
-									{account.name}
-								</Text>
+							<Badge className={classes.accountType} variant="light">
+								{t(accountTypeKey(account.type))}
+							</Badge>
+						</Group>

-								{account.name !== accountType && (
-									<Text className={classes.accountType} size="xs">
-										{accountType}
-									</Text>
-								)}
-							</Stack>
+						<BrokerageAccountSummary summary={summary} />

-							<Stack className={classes.balance} gap={2}>
+						<Stack className={classes.details} gap={2}>
+							{positionCounts && (
 								<Text c="dimmed" size="xs">
-									{t("accounts.currentValue")}
+									{t("accounts.positions", {
+										count: positionCounts.total,
+									})}
 								</Text>
+							)}

-								<BrokerageAccountSummary summary={summary} />
+							<BrokerageAccountSourceStatus source={source} />
+						</Stack>
+
+						{summary.state === "available" && (
+							<Stack className={classes.structure} gap={4}>
+								{summary.portfolio.structure.currencies.map(item => (
+									<StructureBar item={item} key={item.currency} />
+								))}
 							</Stack>
+						)}

-							<Group className={classes.details} gap="md">
-								{!!positionCounts && (
-									<Group
-										className={classes.positions}
-										component="dl"
-										gap="md"
-									>
-										<div>
-											<Text c="dimmed" component="dt" size="sm">
-												{t("accounts.stocks")}
-											</Text>
-
-											<Text component="dd" fw={600} size="sm">
-												{new Intl.NumberFormat("ru-RU").format(
-													positionCounts.stocks,
-												)}
-											</Text>
-										</div>
-
-										<div>
-											<Text c="dimmed" component="dt" size="sm">
-												{t("accounts.bonds")}
-											</Text>
-
-											<Text component="dd" fw={600} size="sm">
-												{new Intl.NumberFormat("ru-RU").format(
-													positionCounts.bonds,
-												)}
-											</Text>
-										</div>
-									</Group>
-								)}
-
-								<Stack className={classes.status} gap={2}>
-									<BrokerageAccountSourceStatus source={source} />
-								</Stack>
-							</Group>
-						</Link>
-					</li>
-				);
-			})}
-		</Stack>
+						<AccountDescription
+							account={{ account, positionCounts, source, summary }}
+						/>
+					</Link>
+				</li>
+			))}
+		</ul>
 	);
 };