feat: add portfolio
This commit is contained in:
@@ -1,15 +1,54 @@
|
||||
import { Stack, Title } from "@mantine/core";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useParams } from "react-router";
|
||||
import {
|
||||
accountTypeKey,
|
||||
type BrokerageAccount,
|
||||
} from "../../../entities/brokerage-account";
|
||||
import type { Portfolio } from "../../../entities/portfolio";
|
||||
import {
|
||||
formatMoney,
|
||||
formatSnapshotTime,
|
||||
portfolioErrorCode,
|
||||
usePortfolio,
|
||||
} from "../../../entities/portfolio";
|
||||
import { useAuth } from "../../../features/auth";
|
||||
import { StateView } from "../../../shared/ui/StateView";
|
||||
import classes from "./AccountPage.module.css";
|
||||
|
||||
const accountsQueryKey = ["brokerage-accounts"] as const;
|
||||
|
||||
export function AccountPage() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={1}>{t("account.title")}</Title>
|
||||
<AccountPageEmpty />
|
||||
</Stack>
|
||||
);
|
||||
const { accountId } = useParams();
|
||||
const { accessToken } = useAuth();
|
||||
const portfolio = usePortfolio(accountId, accessToken);
|
||||
const account = useQueryClient()
|
||||
.getQueryData<BrokerageAccount[]>(accountsQueryKey)
|
||||
?.find((item) => item.id === accountId);
|
||||
|
||||
if (portfolio.isFetching) return <AccountPageLoading />;
|
||||
if (portfolio.isError)
|
||||
return (
|
||||
<AccountPageError
|
||||
code={portfolioErrorCode(portfolio.error)}
|
||||
retry={() => portfolio.refetch()}
|
||||
/>
|
||||
);
|
||||
if (!portfolio.data) return <AccountPageLoading />;
|
||||
if (!portfolio.data.positions.length && !portfolio.data.cashBalances.length)
|
||||
return <AccountPageEmpty account={account} />;
|
||||
return <AccountPageLoaded account={account} portfolio={portfolio.data} />;
|
||||
}
|
||||
|
||||
export function AccountPageLoading() {
|
||||
@@ -23,20 +62,199 @@ export function AccountPageLoading() {
|
||||
);
|
||||
}
|
||||
|
||||
export function AccountPageError() {
|
||||
export function AccountPageError({
|
||||
code,
|
||||
retry,
|
||||
}: {
|
||||
code?: string;
|
||||
retry: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
if (code === "NOT_FOUND")
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("portfolio.accountUnavailableTitle")}
|
||||
text={t("portfolio.accountUnavailableText")}
|
||||
action={
|
||||
<Button component={Link} to="/accounts">
|
||||
{t("portfolio.back")}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
if (code === "TBANK_NOT_CONNECTED" || code === "INVALID_TBANK_TOKEN")
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("portfolio.connectionErrorTitle")}
|
||||
text={t("portfolio.connectionErrorText")}
|
||||
action={
|
||||
<Button component={Link} to="/settings">
|
||||
{t("accounts.openSettings")}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
if (code === "TBANK_UNAVAILABLE")
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("accounts.unavailableTitle")}
|
||||
text={t("accounts.unavailableText")}
|
||||
action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("states.errorTitle")}
|
||||
text={t("states.errorText")}
|
||||
action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function AccountPageEmpty() {
|
||||
export function AccountPageEmpty({ account }: { account?: BrokerageAccount }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
|
||||
<Stack>
|
||||
<AccountHeading account={account} />
|
||||
<StateView
|
||||
title={t("portfolio.emptyTitle")}
|
||||
text={t("portfolio.emptyText")}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export function AccountPageLoaded({
|
||||
account,
|
||||
portfolio,
|
||||
}: {
|
||||
account?: BrokerageAccount;
|
||||
portfolio: Portfolio;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const stocks = portfolio.positions.filter(
|
||||
(position) => position.type === "STOCK",
|
||||
);
|
||||
const bonds = portfolio.positions.filter(
|
||||
(position) => position.type === "BOND",
|
||||
);
|
||||
const otherPositions = portfolio.positions.filter(
|
||||
(position) => position.type !== "STOCK" && position.type !== "BOND",
|
||||
);
|
||||
return (
|
||||
<Stack className={classes.page} gap="lg">
|
||||
<AccountHeading account={account} />
|
||||
{portfolio.isStale ? (
|
||||
<Alert color="blue">{t("portfolio.staleWarning")}</Alert>
|
||||
) : null}
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("portfolio.updatedAt", {
|
||||
date: formatSnapshotTime(portfolio.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
|
||||
{portfolio.totalsByCurrency.map((total) => (
|
||||
<Paper className={classes.total} key={total.currency} withBorder>
|
||||
<Text c="dimmed" size="xs">
|
||||
{total.currency}
|
||||
</Text>
|
||||
<Text fw={800} size="xl">
|
||||
{formatMoney(total)}
|
||||
</Text>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
{stocks.length ? (
|
||||
<PositionSection title={t("portfolio.stocks")} positions={stocks} />
|
||||
) : null}
|
||||
{bonds.length ? (
|
||||
<PositionSection title={t("portfolio.bonds")} positions={bonds} />
|
||||
) : null}
|
||||
{otherPositions.length ? (
|
||||
<PositionSection
|
||||
title={t("portfolio.otherPositions")}
|
||||
positions={otherPositions}
|
||||
/>
|
||||
) : null}
|
||||
<Section title={t("portfolio.cashBalances")}>
|
||||
{portfolio.cashBalances.map((balance) => (
|
||||
<Paper className={classes.cash} key={balance.currency} withBorder>
|
||||
<Text>{balance.currency}</Text>
|
||||
<Text fw={700}>{formatMoney(balance)}</Text>
|
||||
</Paper>
|
||||
))}
|
||||
</Section>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function PositionSection({
|
||||
title,
|
||||
positions,
|
||||
}: {
|
||||
title: string;
|
||||
positions: Portfolio["positions"];
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Section title={title}>
|
||||
{positions.map((position) => (
|
||||
<Card
|
||||
className={classes.row}
|
||||
key={`${position.figi}-${position.displayName}-${position.quantity}`}
|
||||
withBorder
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" wrap="nowrap">
|
||||
<Stack gap={2}>
|
||||
<Text fw={700}>{position.displayName}</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("portfolio.quantity", { value: position.quantity })}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack gap={2} align="flex-end">
|
||||
<Text fw={700}>{formatMoney(position.currentValue)}</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("portfolio.return", {
|
||||
value: formatMoney(position.absoluteReturn),
|
||||
})}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountHeading({ account }: { account?: BrokerageAccount }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Title order={1}>{account?.name ?? t("portfolio.title")}</Title>
|
||||
{account ? (
|
||||
<Text c="dimmed" size="sm">
|
||||
{t(accountTypeKey(account.type))}
|
||||
</Text>
|
||||
) : null}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
<Title order={2}>{title}</Title>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user