feat(income): add account income analytics

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

@@ -0,0 +1,57 @@
+import { Button, Paper, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
+import { formatMoney } from "@/entities/portfolio";
+import { StateView } from "@/shared/ui";
+
+type IncomeSummaryProps =
+	| { state: "loading"; to: string }
+	| { state: "error"; to: string; retry: () => void }
+	| { state: "empty"; to: string }
+	| { state: "loaded"; to: string; summary: IncomeSummaryData };
+
+const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
+	const { t } = useTranslation();
+	if (props.state === "loading")
+		return <Text c="dimmed">{t("income.summaryLoading")}</Text>;
+	if (props.state === "error")
+		return (
+			<StateView
+				error
+				title={t("income.summaryError")}
+				text={t("income.errorText")}
+				action={
+					<Button onClick={props.retry}>{t("income.summaryRetry")}</Button>
+				}
+			/>
+		);
+	if (props.state === "empty")
+		return (
+			<Stack gap="xs">
+				<Text c="dimmed">{t("income.summaryEmpty")}</Text>
+				<Button component={Link} to={props.to} variant="subtle">
+					{t("income.open")}
+				</Button>
+			</Stack>
+		);
+	return (
+		<Stack gap="xs">
+			{props.summary.totalsByCurrency.map((total) => (
+				<Paper key={total.currency} p="sm" withBorder>
+					<Text fw={700}>{formatMoney(total.total)}</Text>
+					<Text c="dimmed" size="sm">
+						{t("income.coupon")}: {formatMoney(total.coupon)} ·{" "}
+						{t("income.dividend")}: {formatMoney(total.dividend)}
+					</Text>
+				</Paper>
+			))}
+			<Button component={Link} to={props.to} variant="subtle">
+				{t("income.open")}
+			</Button>
+		</Stack>
+	);
+};
+
+export { IncomeSummary };

src/pages/account/ui/components/index.ts

@@ -1,5 +1,6 @@
 export { AccountHeading } from "./AccountHeading.view";
 export { CashBalances } from "./CashBalances.view";
+export { IncomeSummary } from "./IncomeSummary.view";
 export { PortfolioRefreshState } from "./PortfolioRefreshState.view";
 export { PortfolioTotals } from "./PortfolioTotals.view";
 export { PositionSection } from "./PositionSection.view";