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,159 @@
+import { Anchor, 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 "@/shared/lib";
+import classes from "../../AccountPage.module.css";
+import type {
+	AccountPagePosition,
+	AccountPagePositionSection,
+} from "../../AccountPage.vm";
+import { PositionLogo } from "../PositionLogo.view";
+
+type PositionCardProps = {
+	kind: AccountPagePositionSection["kind"];
+	position: AccountPagePosition;
+};
+
+const PositionCard: FC<PositionCardProps> = (props) => {
+	const { kind, position } = props;
+	const { t } = useTranslation();
+	const isExpanded = kind !== "other";
+	const returnClass = position.returnTone
+		? classes[position.returnTone]
+		: undefined;
+	const returnText =
+		position.returnText && isExpanded
+			? position.returnText
+			: position.returnText
+				? t("portfolio.return", {
+						value: position.returnText,
+					})
+				: null;
+	const instrumentTo = position.instrumentTo;
+	const identifier =
+		kind === "stocks" ? (position.ticker ?? position.isin) : position.isin;
+	const identifierText = [
+		t("portfolio.quantity", { value: position.quantity }),
+		identifier,
+	]
+		.filter(Boolean)
+		.join(" · ");
+	const accountLink = position.account ? (
+		<Anchor
+			component={Link}
+			to={`/accounts/${encodeURIComponent(position.account.id)}`}
+			size="xs"
+		>
+			{position.account.name}
+		</Anchor>
+	) : null;
+	const secondaryText = [
+		position.averagePurchasePrice
+			? t("portfolio.avgPrice", {
+					value: formatMoney(position.averagePurchasePrice),
+				})
+			: null,
+		position.shareText
+			? t("portfolio.share", { value: position.shareText })
+			: null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+
+	if (isExpanded)
+		return (
+			<Card className={`${classes.tile} ${classes.expandedCard}`} withBorder>
+				<div className={classes.expandedMain}>
+					<PositionLogo
+						key={position.logoSrc ?? "no-logo"}
+						src={position.logoSrc}
+						label={position.displayName}
+						to={instrumentTo}
+					/>
+					<Stack gap={2} miw={0} className={classes.expandedIdentity}>
+						{instrumentTo ? (
+							<Anchor component={Link} to={instrumentTo} c="inherit" fw={600}>
+								{position.displayName}
+							</Anchor>
+						) : (
+							<Text fw={600} lineClamp={1}>
+								{position.displayName}
+							</Text>
+						)}
+						{accountLink}
+						<Text c="dimmed" size="xs" className={classes.expandedIdentifiers}>
+							{identifierText}
+						</Text>
+					</Stack>
+					<Stack gap={2} align="flex-end" className={classes.expandedValue}>
+						{position.currentValue ? (
+							<Text fw={700} size="lg">
+								{formatMoney(position.currentValue)}
+							</Text>
+						) : null}
+						{returnText ? (
+							<Text size="sm" fw={600} className={returnClass}>
+								{returnText}
+							</Text>
+						) : null}
+					</Stack>
+				</div>
+				{secondaryText ? (
+					<Text c="dimmed" size="xs" className={classes.expandedMeta}>
+						{secondaryText}
+					</Text>
+				) : null}
+			</Card>
+		);
+	return (
+		<Card className={classes.tile} withBorder>
+			<Group justify="space-between" align="flex-start" wrap="nowrap">
+				<Stack gap={2} miw={0}>
+					<Text fw={700} lineClamp={1}>
+						{position.displayName}
+					</Text>
+					{accountLink}
+					{position.isin ? (
+						<Text c="dimmed" size="xs" className={classes.mono}>
+							{position.isin}
+						</Text>
+					) : null}
+					<Text c="dimmed" size="xs">
+						{t("portfolio.quantity", { value: position.quantity })}
+					</Text>
+				</Stack>
+				<Stack gap={2} align="flex-end">
+					{position.currentValue ? (
+						<Text fw={800} size="lg">
+							{formatMoney(position.currentValue)}
+						</Text>
+					) : null}
+					{returnText ? (
+						<Text size="sm" fw={600} className={returnClass}>
+							{returnText}
+						</Text>
+					) : null}
+				</Stack>
+			</Group>
+			{position.averagePurchasePrice || position.shareText ? (
+				<Group justify="space-between" mt="xs">
+					{position.averagePurchasePrice ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.avgPrice", {
+								value: formatMoney(position.averagePurchasePrice),
+							})}
+						</Text>
+					) : null}
+					{position.shareText ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.share", { value: position.shareText })}
+						</Text>
+					) : null}
+				</Group>
+			) : null}
+		</Card>
+	);
+};
+
+export { PositionCard };