feat: polish stock position cards

src/pages/account/ui/components/PositionCard.view.tsx

@@ -9,11 +9,13 @@ import { PositionLogo } from "./PositionLogo.view";
 type PositionCardProps = {
 	position: AccountPagePosition;
 	wide?: boolean;
+	variant?: "stock";
 };
 
 const PositionCard: FC<PositionCardProps> = (props) => {
-	const { position, wide = false } = props;
+	const { position, wide = false, variant } = props;
 	const { t } = useTranslation();
+	const isStock = variant === "stock";
 	const returnClass = position.returnTone
 		? classes[position.returnTone]
 		: undefined;
@@ -25,6 +27,62 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 						value: position.returnText,
 					})
 				: null;
+	const identifierText = [
+		t("portfolio.quantity", { value: position.quantity }),
+		position.isin,
+	]
+		.filter(Boolean)
+		.join(" · ");
+	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 (isStock)
+		return (
+			<Card className={`${classes.tile} ${classes.stockCard}`} withBorder>
+				<div className={classes.stockMain}>
+					<PositionLogo
+						key={position.logoSrc ?? "no-logo"}
+						src={position.logoSrc}
+						label={position.displayName}
+					/>
+					<Stack gap={2} miw={0} className={classes.stockIdentity}>
+						<Text fw={600} lineClamp={1}>
+							{position.displayName}
+						</Text>
+						<Text c="dimmed" size="xs" className={classes.stockIdentifiers}>
+							{identifierText}
+						</Text>
+					</Stack>
+					<Stack gap={2} align="flex-end" className={classes.stockValue}>
+						{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.stockMeta}>
+						{secondaryText}
+					</Text>
+				) : null}
+			</Card>
+		);
 	return (
 		<Card className={classes.tile} withBorder>
 			<Group justify="space-between" align="flex-start" wrap="nowrap">

src/pages/account/ui/components/PositionSection.view.tsx

@@ -20,6 +20,7 @@ const PositionSection: FC<PositionSectionProps> = (props) => {
 						key={`${position.figi}-${position.displayName}-${position.quantity}`}
 						position={position}
 						wide={section.wide}
+						variant={section.kind === "stocks" ? "stock" : undefined}
 					/>
 				))}
 			</SimpleGrid>