feat: replace account page accordion with tabs and show open position result (#112)

src/pages/account/ui/AccountPage/components/PositionGroupCard.view.tsx

@@ -4,10 +4,13 @@ import { Anchor, Card, Group, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { formatMoney } from "@/shared/lib";
-
-import type { AccountPagePositionGroup, AccountPagePositionSection } from "../../../model/positions";
+import { formatDecimal, formatMoney } from "@/shared/lib";
 
+import {
+	type AccountPagePositionGroup,
+	type AccountPagePositionSection,
+	formatPositionReturnPercent,
+} from "../../../model/positions";
 import classes from "../AccountPage.module.css";
 import { PositionLogo } from "./PositionLogo.view";
 
@@ -60,6 +63,16 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 						? classes[position.returnTone]
 						: undefined;
 
+					const returnPercent = position.returnPercent
+						? ` · ${formatDecimal(formatPositionReturnPercent(position.returnPercent))} %`
+						: "";
+
+					const returnValue = `${position.returnText ?? ""}${returnPercent}`;
+
+					const returnText = kind === "other"
+						? t("portfolio.return", { value: returnValue })
+						: returnValue;
+
 					return (
 						<Stack
 							className={classes.accountPosition}
@@ -89,9 +102,7 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 
 								{!!position.returnText && (
 									<Text className={appearanceClass} size="sm">
-										{kind === "other"
-											? t("portfolio.return", { value: position.returnText })
-											: position.returnText}
+										{returnText}
 									</Text>
 								)}
 							</Group>