fix: polish accounts portfolio summary (#159)
Frontend verify / commits (push) Skipped
Frontend verify / security (push) Successful in 10s
Frontend verify / verify (push) Failing after 7m26s

This commit was merged in pull request #160.
This commit is contained in:
2026-11-06 15:17:27 +03:00
parent 2fd7d59e65
commit 134c951178
13 changed files with 146 additions and 101 deletions
@@ -1,6 +1,6 @@
import type { FC } from "react";
import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { Button, Group, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
@@ -13,6 +13,8 @@ import {
import { formatMoney } from "@/shared/lib";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
import classes from "./AccountsPageLoaded.module.css";
const DECIMAL_BASE = 10n;
const DECIMAL_PART_COUNT = 2;
const ZERO = 0n;
@@ -87,52 +89,55 @@ function sumDecimals(values: string[]) {
const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
const { t } = useTranslation();
const { excludedCount, totals } = accountTotals(props.accounts);
const primaryTotal = totals.find(total => total.currency === "RUB") ?? totals[0];
const otherTotals = totals.filter(total => total !== primaryTotal);
return (
<Stack gap="lg">
<Stack gap={4}>
<Title order={1}>{t("accounts.title")}</Title>
<Title order={1}>{t("accounts.title")}</Title>
<Stack className={classes.summary} gap="xs">
<Text c="dimmed" size="sm">
{t("accounts.subtitle")}
{t("accounts.currentValue")}
</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 })}
{primaryTotal
? (
<Text className={classes.primaryTotal} fw={700}>
{formatMoney(primaryTotal, { withRoundedCents: true })}
</Text>
)
: (
<Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>
)}
</Stack>
</SimpleGrid>
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
lastSuccessfulAt={props.meta.lastSuccessfulAt}
stale={props.meta.freshness === "stale"}
/>
{otherTotals.length > 0 && (
<Group gap="md" wrap="wrap">
{otherTotals.map(total => (
<Text className={classes.otherTotal} key={total.currency}>
{formatMoney(total, { withRoundedCents: true })}
</Text>
))}
</Group>
)}
<Group className={classes.meta} gap="xs" wrap="wrap">
<Text c="dimmed" size="xs">
{t("accounts.count", { count: props.accounts.length })}
</Text>
<SourceSyncStatus
lastAttempt={props.meta.lastAttempt}
lastSuccessfulAt={props.meta.lastSuccessfulAt}
stale={props.meta.freshness === "stale"}
/>
</Group>
{excludedCount > 0 && (
<Text c="dimmed" size="sm">
{t("accounts.summaryExcluded", { count: excludedCount })}
</Text>
)}
{!!props.readRetry && <ReadRetry {...props.readRetry} />}
</Stack>