feat(account): add concentration tab with top-5 slices and chart (WealthLedger/main#48) (#127)

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
 
 import type { Portfolio } from "@/entities/portfolio";
@@ -17,6 +19,13 @@ import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
 import { useInitialAvailability } from "@/shared/lib";
 
+import {
+	type Concentration,
+	concentrationCurrencies,
+	type ConcentrationLabels,
+	type Slice,
+	toConcentration,
+} from "../../model/concentration";
 import {
 	type AccountPagePositionSection,
 	toAccountPagePositionSections,
@@ -45,10 +54,17 @@ type AccountPageEmptyViewModel = AccountPageContent & {
 };
 
 type AccountPageLoadedViewModel = AccountPageContent & {
+	concentration: Concentration | null;
+	currency: null | string;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	onTabChange: (tab: null | string) => void;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
+	slice: Slice;
 	source?: InvestmentResourceMeta;
 	state: "loaded";
+	tab: string;
 	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
@@ -66,6 +82,24 @@ function isPortfolioAccessFailure(code?: string) {
 
 function useAccountPageViewModel(): AccountPageViewModel {
 	const { accountId } = useParams();
+	const { t } = useTranslation();
+
+	const [selection, setSelection] = useState<{
+		accountId?: string;
+		currency: null | string;
+		slice: Slice;
+		tab: string;
+	}>({ accountId, currency: null, slice: "stocks", tab: "positions" });
+
+	const current = selection.accountId === accountId
+		? selection
+		: {
+				accountId, currency: null, slice: "stocks" as const, tab: "positions",
+			};
+
+	const updateSelection = (change: Partial<typeof selection>) =>
+		setSelection({ ...current, ...change });
+
 	const portfolio = usePortfolio(accountId);
 
 	const operations = useBrokerageOperations(accountId, {
@@ -122,18 +156,42 @@ function useAccountPageViewModel(): AccountPageViewModel {
 		};
 
 	const isPartial = portfolio.meta?.completeness === "incomplete";
+	const currencies = concentrationCurrencies(portfolio.data);
+
+	const currency = current.currency && currencies.includes(current.currency)
+		? current.currency
+		: currencies[0] ?? null;
+
+	const labels: ConcentrationLabels = {
+		missingIssuer: t("portfolio.concentration.missingIssuer"),
+		missingSector: t("portfolio.concentration.missingSector"),
+		other: t("portfolio.concentration.other"),
+		sector: code => t(`stock.sectors.${code}`, { defaultValue: code }),
+	};
+
+	const concentration = accountId !== "all"
+		&& current.tab === "concentration"
+		? toConcentration(portfolio.data, current.slice, currency, labels)
+		: null;
 
 	return {
 		account,
 		accountId,
+		concentration,
+		currency,
 		incomeSummary,
+		onCurrencyChange: value => updateSelection({ currency: value }),
+		onSliceChange: slice => updateSelection({ slice }),
+		onTabChange: tab => updateSelection({ tab: tab ?? "positions" }),
 		partial: isPartial,
 		portfolio: portfolio.data,
 		positionSections: toAccountPagePositionSections(portfolio.data),
 		recentEvents,
 		recentOperations,
+		slice: current.slice,
 		source: portfolio.meta,
 		state: "loaded" as const,
+		tab: current.tab,
 		unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
 	};
 }