161 lines
4.1 KiB
TypeScript
161 lines
4.1 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
|
|
import { WalletIcon } from "@wealthledger/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
|
|
|
|
import type { BrokerageAccountCard } from "../../model/display";
|
|
|
|
import { accountTypeKey } from "../../model/display";
|
|
import classes from "./BrokerageAccountList.module.css";
|
|
|
|
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 (
|
|
<Stack className={classes.summary} gap={4}>
|
|
{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>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
|
|
const { accounts } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<SimpleGrid className={classes.list} cols={1} spacing="lg">
|
|
{accounts.map(({ account, positionCounts, source, summary }) => (
|
|
<Card
|
|
className={classes.card}
|
|
component={Link}
|
|
key={account.id}
|
|
padding="xl"
|
|
radius="lg"
|
|
to={`/accounts/${account.id}`}
|
|
withBorder
|
|
>
|
|
<Stack className={classes.identity} gap="sm">
|
|
<Group gap="sm" justify="space-between" wrap="nowrap">
|
|
<Text className={classes.kicker} fw={700} size="xs">
|
|
{t(accountTypeKey(account.type))}
|
|
</Text>
|
|
|
|
<WalletIcon className={classes.accountIcon} />
|
|
</Group>
|
|
|
|
<Text className={classes.name} component="h2" fw={700}>
|
|
{account.name}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack className={classes.balance} gap="xs">
|
|
<Text c="dimmed" size="sm">
|
|
{t("accounts.currentValue")}
|
|
</Text>
|
|
|
|
<BrokerageAccountSummary summary={summary} />
|
|
|
|
{!!source?.lastSuccessfulAt && (
|
|
<Text c="dimmed" size="xs">
|
|
{t("investment.sourceTime", {
|
|
date: formatSnapshotTime(source.lastSuccessfulAt),
|
|
})}
|
|
</Text>
|
|
)}
|
|
|
|
{(source?.sync.state === "running"
|
|
|| source?.sync.state === "queued") && (
|
|
<Text role="status" size="xs">
|
|
{t("accounts.refreshing")}
|
|
</Text>
|
|
)}
|
|
|
|
{source?.sync.state === "failed" && (
|
|
<Text size="xs">{t("accounts.refreshError")}</Text>
|
|
)}
|
|
|
|
{source?.freshness === "stale" && (
|
|
<Text size="xs">{t("investment.stale")}</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
{!!positionCounts && (
|
|
<dl className={classes.positions}>
|
|
<div className={classes.stocks}>
|
|
<dt>{t("accounts.stocks")}</dt>
|
|
|
|
<dd>
|
|
{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
|
|
</dd>
|
|
</div>
|
|
|
|
<div className={classes.bonds}>
|
|
<dt>{t("accounts.bonds")}</dt>
|
|
|
|
<dd>
|
|
{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
)}
|
|
|
|
<Group className={classes.footer} gap="sm" justify="space-between">
|
|
{!!account.openedOn && (
|
|
<Text c="dimmed" size="xs">
|
|
{t("accounts.openedOn", {
|
|
date: formatDate(account.openedOn),
|
|
})}
|
|
</Text>
|
|
)}
|
|
|
|
<Text className={classes.open} component="span" fw={600} size="sm">
|
|
{t("accounts.openAccount")}
|
|
|
|
<span aria-hidden="true" className={classes.arrow}>
|
|
→
|
|
</span>
|
|
</Text>
|
|
</Group>
|
|
</Card>
|
|
))}
|
|
</SimpleGrid>
|
|
);
|
|
};
|
|
|
|
export { BrokerageAccountList };
|