feat: show persisted investment data and sync state

Consume the provided resource-envelope API snapshot. Preserve financial snapshots during
refresh, observe synchronization without importing, and fence late responses across
account and connection changes.

src/pages/accounts/ui/AccountsPage/AccountsPage.test.tsx

@@ -7,6 +7,7 @@ import { describe, expect, it, vi } from "vitest";
 import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
+import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 import { AccountsPage } from "./AccountsPage";
 import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
@@ -80,7 +81,7 @@ describe("AccountsPage", () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
-				if (requestCount === 1) return HttpResponse.json([account]);
+				if (requestCount === 1) return HttpResponse.json(resource([account]));
 				return new Promise<Response>((resolve) => {
 					resolveRefresh = resolve;
 				});
@@ -100,21 +101,31 @@ describe("AccountsPage", () => {
 			screen.getByRole("status", { name: "Обновляем данные" }),
 		).toBeInTheDocument();
 
-		resolveRefresh?.(HttpResponse.json([account]));
+		resolveRefresh?.(HttpResponse.json(resource([account])));
 	});
 
 	it("keeps the cached account list and offers retry after a refresh error", async () => {
+		const requests: unknown[] = [];
+		server.use(
+			http.post("*/api/v1/tbank-sync", async ({ request }) => {
+				requests.push(await request.json());
+				return HttpResponse.json(
+					{ code: "TBANK_UNAVAILABLE" },
+					{ status: 503 },
+				);
+			}),
+		);
 		let requestCount = 0;
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
-				if (requestCount === 1) return HttpResponse.json([account]);
+				if (requestCount === 1) return HttpResponse.json(resource([account]));
 				if (requestCount === 2)
 					return HttpResponse.json(
 						{ code: "TBANK_UNAVAILABLE" },
 						{ status: 503 },
 					);
-				return HttpResponse.json([account]);
+				return HttpResponse.json(resource([account]));
 			}),
 		);
 		const queryClient = createTestQueryClient();
@@ -132,7 +143,8 @@ describe("AccountsPage", () => {
 		expect(screen.getByText(account.name)).toBeInTheDocument();
 
 		screen.getByRole("button", { name: "Повторить" }).click();
-		await waitFor(() => expect(requestCount).toBe(3));
+		await waitFor(() => expect(requests).toEqual([{ screen: "accounts" }]));
+		expect(requestCount).toBe(2);
 	});
 
 	it("keeps a cached empty account list visible after a refresh error", async () => {
@@ -140,7 +152,7 @@ describe("AccountsPage", () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
-				if (requestCount === 1) return HttpResponse.json([]);
+				if (requestCount === 1) return HttpResponse.json(resource([]));
 				return HttpResponse.json(
 					{ code: "TBANK_UNAVAILABLE" },
 					{ status: 503 },
@@ -163,3 +175,22 @@ describe("AccountsPage", () => {
 		expect(screen.getByText("Нет инвестиционных счетов")).toBeInTheDocument();
 	});
 });
+
+it("keeps unknown membership loading instead of declaring no accounts", async () => {
+	server.use(
+		http.get("*/api/v1/brokerage-accounts", () =>
+			HttpResponse.json(resource(null)),
+		),
+	);
+	const client = createTestQueryClient();
+	renderPage(client);
+	await waitFor(() =>
+		expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject({
+			data: null,
+		}),
+	);
+	expect(
+		screen.queryByText("Нет инвестиционных счетов"),
+	).not.toBeInTheDocument();
+	expect(screen.getByRole("status")).toBeVisible();
+});

src/pages/accounts/ui/AccountsPage/AccountsPage.tsx

@@ -12,7 +12,9 @@ const AccountsPage: FC = () => {
 	if (viewModel.state === "empty")
 		return (
 			<AccountsPageEmpty
+				lastSuccessfulAt={viewModel.lastSuccessfulAt}
 				refreshing={viewModel.refreshing}
+				sourceError={viewModel.sourceError}
 				refreshError={viewModel.refreshError}
 				retry={viewModel.retry}
 			/>
@@ -20,7 +22,9 @@ const AccountsPage: FC = () => {
 	return (
 		<AccountsPageLoaded
 			accounts={viewModel.accounts}
+			lastSuccessfulAt={viewModel.lastSuccessfulAt}
 			refreshing={viewModel.refreshing}
+			sourceError={viewModel.sourceError}
 			refreshError={viewModel.refreshError}
 			retry={viewModel.retry}
 		/>

src/pages/accounts/ui/AccountsPage/AccountsPage.vm.ts

@@ -2,32 +2,42 @@ import {
 	brokerageAccountCards,
 	useBrokerageAccounts,
 } from "@/entities/brokerage-account";
+import { useScreenSync } from "@/features/tbank-connection";
 import { apiErrorCode } from "@/shared/api";
 
 function useAccountsPageViewModel() {
 	const accounts = useBrokerageAccounts();
-	if (!accounts.data) {
-		if (accounts.isFetching) return { state: "loading" as const };
-		if (accounts.isError)
+	const sync = useScreenSync({ screen: "accounts" }, [accounts]);
+	if (
+		!accounts.data ||
+		(accounts.meta?.availability === "partial" && !accounts.data.length)
+	) {
+		if (!accounts.isError && accounts.meta?.sync.state !== "failed")
+			return { state: "loading" as const };
+		if (accounts.isError || accounts.meta?.sync.state === "failed")
 			return {
 				state: "error" as const,
 				code: apiErrorCode(accounts.error),
-				retry: () => accounts.refetch(),
+				retry: sync.refresh,
 			};
 	}
 	if (!accounts.data?.length)
 		return {
 			state: "empty" as const,
-			refreshing: accounts.isFetching,
-			refreshError: accounts.isError,
-			retry: () => accounts.refetch(),
+			lastSuccessfulAt: accounts.meta?.lastSuccessfulAt,
+			refreshing: accounts.isFetching || sync.refreshing,
+			sourceError: sync.sourceError,
+			refreshError: accounts.isError || sync.transportError || sync.sourceError,
+			retry: sync.refresh,
 		};
 	return {
 		state: "loaded" as const,
-		accounts: brokerageAccountCards(accounts.data),
-		refreshing: accounts.isFetching,
-		refreshError: accounts.isError,
-		retry: () => accounts.refetch(),
+		accounts: brokerageAccountCards(accounts.data, accounts.meta?.dependencies),
+		lastSuccessfulAt: accounts.meta?.lastSuccessfulAt,
+		refreshing: accounts.isFetching || sync.refreshing,
+		sourceError: sync.sourceError,
+		refreshError: accounts.isError || sync.transportError || sync.sourceError,
+		retry: sync.refresh,
 	};
 }
 

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoading.view.tsx

@@ -9,7 +9,7 @@ const AccountsPageLoading: FC = () => {
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="30%" />
 			<Skeleton height={20} width="45%" />
-			<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg" aria-hidden="true">
+			<SimpleGrid cols={1} spacing="lg" aria-hidden="true">
 				{[0, 1].map((index) => (
 					<Card key={index} padding="xl" radius="lg" withBorder>
 						<Stack gap="xl">

src/pages/accounts/ui/AccountsPage/components/AccountsRefreshState.view.tsx

@@ -1,8 +1,11 @@
 import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+import { formatSnapshotTime } from "@/shared/lib";
 
 type AccountsRefreshStateProps = {
+	lastSuccessfulAt?: string | null;
+	sourceError?: boolean;
 	refreshing?: boolean;
 	refreshError?: boolean;
 	retry?: () => void;
@@ -11,9 +14,24 @@ type AccountsRefreshStateProps = {
 const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
 	const { refreshing = false, refreshError = false, retry } = props;
 	const { t } = useTranslation();
-	if (!refreshing && !refreshError) return null;
+
 	return (
 		<>
+			{props.lastSuccessfulAt ? (
+				<Text size="xs" c="dimmed">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.lastSuccessfulAt),
+					})}
+				</Text>
+			) : null}
+			<Button
+				onClick={retry}
+				disabled={refreshing}
+				variant="light"
+				w="fit-content"
+			>
+				{t(refreshError ? "accounts.retry" : "investment.refresh")}
+			</Button>
 			{refreshing ? (
 				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
 					<Loader size="sm" />
@@ -23,12 +41,15 @@ const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
 				</Group>
 			) : null}
 			{refreshError ? (
-				<Alert color="orange">
+				<Alert color="orange" role="status" aria-live="polite">
 					<Stack gap="sm">
-						<Text>{t("accounts.refreshError")}</Text>
-						<Button onClick={retry} variant="light">
-							{t("accounts.retry")}
-						</Button>
+						<Text>
+							{t(
+								props.sourceError
+									? "investment.syncFailed"
+									: "accounts.refreshError",
+							)}
+						</Text>
 					</Stack>
 				</Alert>
 			) : null}