refactor: little structure refactor

2026-08-14 10:24:24 +03:00
parent da585b157a
commit 2cca503519
18 changed files with 622 additions and 388 deletions
@@ -0,0 +1,217 @@
+import {
+	Alert,
+	Button,
+	Card,
+	Group,
+	Paper,
+	SimpleGrid,
+	Stack,
+	Text,
+	Title,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import type { BrokerageAccount } from "@/entities/brokerage-account";
+import { accountTypeKey } from "@/entities/brokerage-account";
+import type { Portfolio } from "@/entities/portfolio";
+import { formatMoney, formatSnapshotTime } from "@/entities/portfolio";
+import { StateView } from "@/shared/ui";
+import classes from "./AccountPage.module.css";
+
+export function AccountPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+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({ account }: { account?: BrokerageAccount }) {
+	const { t } = useTranslation();
+	return (
+		<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((p) => p.type === "STOCK");
+	const bonds = portfolio.positions.filter((p) => p.type === "BOND");
+	const other = portfolio.positions.filter(
+		(p) => p.type !== "STOCK" && p.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}
+			{other.length ? (
+				<PositionSection
+					title={t("portfolio.otherPositions")}
+					positions={other}
+				/>
+			) : 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>
+	);
+}