feat: add bond pages and portfolio navigation

2026-09-10 22:30:47 +03:00
parent 561222e468
commit 232d7f9990
39 changed files with 4217 additions and 221 deletions
@@ -0,0 +1,139 @@
+import { Alert, Anchor, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";
+import type { InstrumentPositionVm } from "../model/types";
+import classes from "./InstrumentDetails.module.css";
+import { InstrumentSection } from "./InstrumentSection.view";
+
+type InstrumentPositionProps = {
+	vm: InstrumentPositionVm;
+	returnNote?: string;
+	quantityLabel?: string;
+};
+const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
+	const { vm } = props;
+	const { t } = useTranslation();
+	if (vm.position && !vm.position.accounts.length) return null;
+	return (
+		<InstrumentSection title={t("stock.position")} state={vm.positionState}>
+			{vm.position ? (
+				<Stack gap="md">
+					{vm.position.isStale ? (
+						<Alert color="orange">{t("portfolio.staleWarning")}</Alert>
+					) : null}
+					<div className={`${classes.metrics} ${classes.holding}`}>
+						<div>
+							<Text size="sm" c="dimmed">
+								{props.quantityLabel ?? t("stock.quantity")}
+							</Text>
+							<Text className={classes.metricValue}>
+								{formatDecimal(vm.position.quantity)}
+							</Text>
+						</div>
+						<div>
+							<Text size="sm" c="dimmed">
+								{t("stock.value")}
+							</Text>
+							<Text className={classes.metricValue}>
+								{formatMoney(vm.position.currentValue)}
+							</Text>
+						</div>
+						<div>
+							<Text size="sm" c="dimmed">
+								{t("stock.average")}
+							</Text>
+							<Text className={classes.metricValue}>
+								{formatMoney(vm.position.averagePurchasePrice)}
+							</Text>
+						</div>
+						<div>
+							<Text size="sm" c="dimmed">
+								{t("stock.openReturn")}
+							</Text>
+							<Text
+								className={classes.metricValue}
+								c={
+									vm.position.absoluteReturn?.value.startsWith("-")
+										? "red.8"
+										: "green.8"
+								}
+							>
+								{formatMoney(vm.position.absoluteReturn)}
+							</Text>
+							{vm.position.returnPercent !== null ? (
+								<Text size="sm">
+									{formatDecimal(vm.position.returnPercent)} %
+								</Text>
+							) : null}
+						</div>
+					</div>
+					<Text size="xs" c="dimmed">
+						{props.returnNote ?? t("stock.openReturnNote")}
+					</Text>
+					<div>
+						{vm.position.accounts.map((account) => (
+							<div className={classes.accountRow} key={account.account?.id}>
+								{account.account ? (
+									<Anchor
+										component={Link}
+										to={`/accounts/${encodeURIComponent(account.account.id)}`}
+									>
+										{account.account.name}
+									</Anchor>
+								) : (
+									<Text>{t("stock.portfolio")}</Text>
+								)}
+								<div>
+									<Text size="xs" c="dimmed">
+										{props.quantityLabel ?? t("stock.quantity")}
+									</Text>
+									<Text>{formatDecimal(account.quantity)}</Text>
+								</div>
+								<div>
+									<Text size="xs" c="dimmed">
+										{t("stock.average")}
+									</Text>
+									<Text>{formatMoney(account.averagePurchasePrice)}</Text>
+								</div>
+								<div>
+									<Text size="xs" c="dimmed">
+										{t("stock.value")}
+									</Text>
+									<Text>{formatMoney(account.currentValue)}</Text>
+								</div>
+								<div>
+									<Text size="xs" c="dimmed">
+										{t("stock.openReturn")}
+									</Text>
+									<Text
+										c={
+											account.absoluteReturn?.value.startsWith("-")
+												? "red.8"
+												: undefined
+										}
+									>
+										{formatMoney(account.absoluteReturn)}
+									</Text>
+									{account.returnPercent !== null ? (
+										<Text size="xs">
+											{formatDecimal(account.returnPercent)} %
+										</Text>
+									) : null}
+								</div>
+							</div>
+						))}
+					</div>
+					<Text size="xs" c="dimmed">
+						{t("stock.snapshotAt", {
+							date: formatSnapshotTime(vm.position.observedAt),
+						})}
+					</Text>
+				</Stack>
+			) : null}
+		</InstrumentSection>
+	);
+};
+
+export { InstrumentPosition };