95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import { Card, Group, Stack, Text } from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
import { formatMoney } from "@/entities/portfolio";
|
|
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 (
|
|
<Group className={classes.summary} gap="sm" wrap="wrap">
|
|
{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>
|
|
) : null}
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
|
|
const { accounts } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack className={classes.list} gap="md">
|
|
{accounts.map(({ account, summary }) => (
|
|
<Card
|
|
component={Link}
|
|
to={`/accounts/${account.id}`}
|
|
key={account.id}
|
|
className={classes.card}
|
|
padding="lg"
|
|
radius="lg"
|
|
withBorder
|
|
>
|
|
<Stack gap="xs">
|
|
<Text className={classes.kicker} size="xs" fw={700}>
|
|
{t(accountTypeKey(account.type))}
|
|
</Text>
|
|
<Text fw={800} size="lg">
|
|
{account.name}
|
|
</Text>
|
|
<BrokerageAccountSummary summary={summary} />
|
|
{account.openedOn ? (
|
|
<Text c="dimmed" size="sm">
|
|
{t("accounts.openedOn", {
|
|
date: new Intl.DateTimeFormat("ru-RU", {
|
|
dateStyle: "long",
|
|
timeZone: "UTC",
|
|
}).format(new Date(`${account.openedOn}T00:00:00Z`)),
|
|
})}
|
|
</Text>
|
|
) : null}
|
|
<Text className={classes.open} size="sm" fw={700}>
|
|
{t("accounts.openAccount")}
|
|
</Text>
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { BrokerageAccountList };
|