refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,133 @@
+import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { formatDate, formatMoney } 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>
+			) : null}
+		</Stack>
+	);
+};
+
+const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
+	const { accounts } = props;
+	const { t } = useTranslation();
+
+	return (
+		<SimpleGrid className={classes.list} cols={{ base: 1, lg: 2 }} spacing="lg">
+			{accounts.map(({ account, summary, positionCounts }) => (
+				<Card
+					component={Link}
+					to={`/accounts/${account.id}`}
+					key={account.id}
+					className={classes.card}
+					padding="xl"
+					radius="lg"
+					withBorder
+				>
+					<Stack className={classes.identity} gap="sm">
+						<Group justify="space-between" wrap="nowrap" gap="sm">
+							<Text className={classes.kicker} size="xs" fw={700}>
+								{t(accountTypeKey(account.type))}
+							</Text>
+							<svg
+								className={classes.accountIcon}
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								aria-hidden="true"
+								focusable="false"
+							>
+								<rect x="3" y="5" width="18" height="15" rx="3" />
+								<path d="M3 9h18M7 15h3M14 5V3H7a4 4 0 0 0-4 4" />
+							</svg>
+						</Group>
+						<Text component="h2" className={classes.name} fw={700}>
+							{account.name}
+						</Text>
+					</Stack>
+					<Stack className={classes.balance} gap="xs">
+						<Text c="dimmed" size="sm">
+							{t("accounts.currentValue")}
+						</Text>
+						<BrokerageAccountSummary summary={summary} />
+					</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>
+					) : null}
+					<Group className={classes.footer} justify="space-between" gap="sm">
+						{account.openedOn ? (
+							<Text c="dimmed" size="xs">
+								{t("accounts.openedOn", {
+									date: formatDate(account.openedOn),
+								})}
+							</Text>
+						) : null}
+						<Text component="span" className={classes.open} size="sm" fw={600}>
+							{t("accounts.openAccount")}
+							<span className={classes.arrow} aria-hidden="true">
+								→
+							</span>
+						</Text>
+					</Group>
+				</Card>
+			))}
+		</SimpleGrid>
+	);
+};
+
+export { BrokerageAccountList };