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

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.view.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 
-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
@@ -10,15 +10,82 @@ import {
 	type BrokerageAccountCard,
 	BrokerageAccountList,
 } from "@/entities/brokerage-account";
+import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 
+const DECIMAL_BASE = 10n;
+const DECIMAL_PART_COUNT = 2;
+const ZERO = 0n;
+
 type AccountsPageLoadedProps = {
 	accounts: BrokerageAccountCard[];
 	meta: InvestmentResourceMeta;
 };
 
+type Money = { currency: string; value: string };
+
+function accountTotals(accounts: BrokerageAccountCard[]) {
+	const values = new Map<string, string[]>();
+	let excludedCount = 0;
+
+	for (const { summary } of accounts) {
+		if (summary.state === "empty") continue;
+
+		if (summary.state === "unavailable") {
+			excludedCount += 1;
+			continue;
+		}
+
+		for (const total of summary.portfolio.totalsByCurrency) {
+			values.set(total.currency, [
+				...values.get(total.currency) ?? [],
+				total.value,
+			]);
+		}
+	}
+
+	const totals: Money[] = Array.from(values, ([currency, amounts]) => ({
+		currency,
+		value: sumDecimals(amounts),
+	}));
+
+	return { excludedCount, totals };
+}
+
+function sumDecimals(values: string[]) {
+	const scale = Math.max(
+		0,
+		...values.map(value =>
+			value.split(".", DECIMAL_PART_COUNT)[1]?.length ?? 0),
+	);
+
+	const factor = DECIMAL_BASE ** BigInt(scale);
+	let sum = ZERO;
+
+	for (const value of values) {
+		const isNegative = value.startsWith("-");
+
+		const [integer = "0", fraction = ""] = (isNegative
+			? value.slice(1)
+			: value).split(".", DECIMAL_PART_COUNT);
+
+		const units = BigInt(integer) * factor
+			+ BigInt(fraction.padEnd(scale, "0") || "0");
+
+		sum += isNegative ? -units : units;
+	}
+
+	const isNegative = sum < ZERO;
+	const digits = (isNegative ? -sum : sum).toString().padStart(scale + 1, "0");
+	const integer = scale ? digits.slice(0, -scale) : digits;
+	const fraction = scale ? `.${digits.slice(-scale)}` : "";
+
+	return `${isNegative ? "-" : ""}${integer}${fraction}`;
+}
+
 const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+	const { excludedCount, totals } = accountTotals(props.accounts);
 
 	return (
 		<Stack gap="lg">
@@ -28,6 +95,37 @@ const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 				<Text c="dimmed" size="sm">
 					{t("accounts.subtitle")}
 				</Text>
+			</Stack>
+
+			<Stack gap="xs">
+				<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs">
+					<Stack gap={4}>
+						<Text c="dimmed" size="sm">
+							{t("accounts.currentValue")}
+						</Text>
+
+						{totals.length > 0
+							? totals.map(total => (
+									<Text fw={700} key={total.currency} size="lg">
+										{formatMoney(total, { withRoundedCents: true })}
+									</Text>
+								))
+							: <Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>}
+					</Stack>
+
+					<Stack gap={4}>
+						<Text fw={600}>{t("accounts.count", {
+							count: props.accounts.length,
+						})}
+						</Text>
+
+						{excludedCount > 0 && (
+							<Text c="dimmed" size="sm">
+								{t("accounts.summaryExcluded", { count: excludedCount })}
+							</Text>
+						)}
+					</Stack>
+				</SimpleGrid>
 
 				<SourceSyncStatus
 					lastAttempt={props.meta.lastAttempt}