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,115 @@
+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 {
+	AccountPagePositionGroup,
+	AccountPagePositionSection,
+} from "../AccountPage.vm";
+import { PositionLogo } from "./PositionLogo.view";
+
+type PositionGroupCardProps = {
+	group: AccountPagePositionGroup;
+	kind: AccountPagePositionSection["kind"];
+};
+
+const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
+	const { group, kind } = props;
+	const { t } = useTranslation();
+	const identity = group.positions[0];
+	const instrumentTo = identity.instrumentTo;
+	return (
+		<Card className={classes.tile} withBorder>
+			<Group wrap="nowrap" gap="sm">
+				{kind !== "other" ? (
+					<PositionLogo
+						key={identity.logoSrc ?? "no-logo"}
+						src={identity.logoSrc}
+						label={identity.displayName}
+						to={instrumentTo}
+					/>
+				) : null}
+				<Stack gap={2} miw={0}>
+					{instrumentTo ? (
+						<Anchor component={Link} to={instrumentTo} c="inherit" fw={600}>
+							{identity.displayName}
+						</Anchor>
+					) : (
+						<Text fw={600}>{identity.displayName}</Text>
+					)}
+					<Text c="dimmed" size="xs">
+						{identity.ticker ?? identity.isin ?? identity.figi}
+					</Text>
+				</Stack>
+			</Group>
+			<Stack
+				component="ul"
+				gap={0}
+				className={classes.accountPositions}
+				aria-label={t("portfolio.byAccount")}
+			>
+				{group.positions.map((position) => (
+					<Stack
+						component="li"
+						key={position.account?.id}
+						gap={4}
+						className={classes.accountPosition}
+					>
+						<Group justify="space-between" align="flex-start" gap="xs">
+							{position.account ? (
+								<Anchor
+									component={Link}
+									to={`/accounts/${encodeURIComponent(position.account.id)}`}
+									size="sm"
+									className={classes.accountPositionName}
+								>
+									{position.account.name}
+								</Anchor>
+							) : null}
+							<Text size="sm" fw={600}>
+								{t("portfolio.quantity", { value: position.quantity })}
+							</Text>
+						</Group>
+						<Group justify="space-between" gap="xs">
+							{position.currentValue ? (
+								<Text size="sm">{formatMoney(position.currentValue)}</Text>
+							) : null}
+							{position.returnText ? (
+								<Text
+									size="sm"
+									className={
+										position.returnTone
+											? classes[position.returnTone]
+											: undefined
+									}
+								>
+									{kind === "other"
+										? t("portfolio.return", { value: position.returnText })
+										: position.returnText}
+								</Text>
+							) : null}
+						</Group>
+						<Group gap="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>
+					</Stack>
+				))}
+			</Stack>
+		</Card>
+	);
+};
+
+export { PositionGroupCard };