feat: improve ledger event rows

src/pages/account-operations/ui/AccountOperationsPage.test.tsx

@@ -1,6 +1,12 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter, Route, Routes } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
@@ -19,6 +25,7 @@ const operation: BrokerageOperation = {
 	instrumentUid: null,
 	ticker: "SBER",
 	instrumentType: "share",
+	logoName: null,
 	payment: null,
 	quantity: "2",
 	price: { currency: "RUB", value: "100" },
@@ -34,6 +41,8 @@ function configureTestAuth() {
 	});
 }
 
+afterEach(cleanup);
+
 describe("OperationRow", () => {
 	it("marks cashless operations without rendering operation details", () => {
 		render(
@@ -51,6 +60,54 @@ describe("OperationRow", () => {
 		expect(screen.queryByText("Цена: 100 ₽")).toBeNull();
 		expect(screen.queryByText("Количество: 2")).toBeNull();
 	});
+
+	it("labels a positive payment as a Russian incoming amount", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<OperationRow
+						operation={{
+							...operation,
+							payment: { currency: "RUB", value: "15" },
+						}}
+					/>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByText("Поступление")).toBeInTheDocument();
+		expect(screen.getByText("+15 ₽")).toBeInTheDocument();
+	});
+
+	it("keeps a zero payment neutral", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<OperationRow
+						operation={{
+							...operation,
+							payment: { currency: "RUB", value: "0" },
+						}}
+					/>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByText("Без движения денег")).toBeInTheDocument();
+		expect(screen.queryByText("Поступление")).toBeNull();
+	});
+
+	it("uses an instrument initial when the ledger entry has no logo", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<OperationRow operation={operation} />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByText("S")).toBeInTheDocument();
+	});
 });
 
 describe("AccountOperationsPage", () => {

src/pages/account-operations/ui/AccountOperationsPage.tsx

@@ -1,188 +1,19 @@
-import {
-	Button,
-	Card,
-	Checkbox,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Title,
-} from "@mantine/core";
 import type { FC } from "react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router";
+import { LedgerEntryRow } from "@/entities/broker-operation";
 import {
-	type BrokerageOperation,
-	type OperationCategory,
-	operationCategories,
-	useBrokerageOperations,
-} from "@/entities/broker-operation";
-import { formatMoney, formatSnapshotTime } from "@/entities/portfolio";
-import { StateView } from "@/shared/ui";
-
-function dateStart(value: string) {
-	return value ? `${value}T00:00:00.000Z` : undefined;
-}
-
-function dateEnd(value: string) {
-	return value ? `${value}T23:59:59.999Z` : undefined;
-}
-
-type OperationRowProps = {
-	operation: BrokerageOperation;
-};
+	AccountOperationsPageError,
+	AccountOperationsPageLoaded,
+	AccountOperationsPageLoading,
+} from "./AccountOperationsPage.view";
+import { useAccountOperationsPageVm } from "./AccountOperationsPage.vm";
 
 const AccountOperationsPage: FC = () => {
-	const { accountId } = useParams();
-	const { t } = useTranslation();
-	const [from, setFrom] = useState("");
-	const [to, setTo] = useState("");
-	const [categories, setCategories] = useState<OperationCategory[]>([]);
-	const [cursors, setCursors] = useState<string[]>([]);
-	const cursor = cursors.at(-1);
-	const operations = useBrokerageOperations(accountId, {
-		from: dateStart(from),
-		to: dateEnd(to),
-		...(categories.length ? { categories } : {}),
-		...(cursor ? { cursor } : {}),
-		limit: 100,
-	});
-	const reset = () => setCursors([]);
+	const viewModel = useAccountOperationsPageVm();
 
-	if (operations.isLoading)
-		return (
-			<StateView
-				loading
-				title={t("states.loadingTitle")}
-				text={t("states.loadingText")}
-			/>
-		);
-	if (operations.isError)
-		return (
-			<StateView
-				error
-				title={t("ledger.errorTitle")}
-				text={t("ledger.errorText")}
-				action={
-					<Button onClick={() => operations.refetch()}>
-						{t("ledger.retry")}
-					</Button>
-				}
-			/>
-		);
-	if (!operations.data)
-		return (
-			<StateView
-				loading
-				title={t("states.loadingTitle")}
-				text={t("states.loadingText")}
-			/>
-		);
-	const { data } = operations;
-	const nextCursor = data.nextCursor;
-	return (
-		<Stack maw={960} gap="lg">
-			<Title order={1}>{t("ledger.title")}</Title>
-			<Group align="end">
-				<TextInput
-					label={t("ledger.from")}
-					type="date"
-					value={from}
-					onChange={(event) => {
-						setFrom(event.currentTarget.value);
-						reset();
-					}}
-				/>
-				<TextInput
-					label={t("ledger.to")}
-					type="date"
-					value={to}
-					onChange={(event) => {
-						setTo(event.currentTarget.value);
-						reset();
-					}}
-				/>
-			</Group>
-			<Checkbox.Group
-				label={t("ledger.categories")}
-				value={categories}
-				onChange={(value) => {
-					setCategories(value as OperationCategory[]);
-					reset();
-				}}
-			>
-				<Group mt="xs">
-					{operationCategories.map((category) => (
-						<Checkbox
-							key={category}
-							value={category}
-							label={t(`ledger.category.${category}`)}
-						/>
-					))}
-				</Group>
-			</Checkbox.Group>
-			{data.items.length ? (
-				data.items.map((operation) => (
-					<OperationRow key={operation.id} operation={operation} />
-				))
-			) : (
-				<StateView
-					title={t("ledger.emptyTitle")}
-					text={t("ledger.emptyText")}
-				/>
-			)}
-			{data.hasNext || cursors.length ? (
-				<Group justify="space-between">
-					<Button
-						disabled={!cursors.length}
-						onClick={() => setCursors((value) => value.slice(0, -1))}
-					>
-						{t("ledger.previous")}
-					</Button>
-					<Button
-						disabled={!data.hasNext || !nextCursor}
-						onClick={() => {
-							if (nextCursor) setCursors((value) => [...value, nextCursor]);
-						}}
-					>
-						{t("ledger.next")}
-					</Button>
-				</Group>
-			) : null}
-		</Stack>
-	);
+	if (viewModel.state === "loading") return <AccountOperationsPageLoading />;
+	if (viewModel.state === "error")
+		return <AccountOperationsPageError {...viewModel} />;
+	return <AccountOperationsPageLoaded {...viewModel} />;
 };
 
-const OperationRow: FC<OperationRowProps> = (props) => {
-	const { operation } = props;
-	const { t } = useTranslation();
-
-	return (
-		<Card withBorder>
-			<Group justify="space-between" align="flex-start">
-				<Stack gap={2}>
-					<Text fw={700}>{operation.description || operation.type}</Text>
-					<Text c="dimmed" size="sm">
-						{formatSnapshotTime(operation.occurredAt)} ·{" "}
-						{operation.ticker ??
-							operation.instrumentType ??
-							t("ledger.noInstrument")}
-					</Text>
-				</Stack>
-				<Stack gap={2} align="end">
-					<Text fw={700}>
-						{operation.payment
-							? formatMoney(operation.payment)
-							: t("ledger.noMoney")}
-					</Text>
-					<Text c="dimmed" size="sm">
-						{t(`ledger.category.${operation.category}`)}
-					</Text>
-				</Stack>
-			</Group>
-		</Card>
-	);
-};
-
-export { AccountOperationsPage, OperationRow };
+export { AccountOperationsPage, LedgerEntryRow as OperationRow };

src/pages/account-operations/ui/AccountOperationsPage.view.tsx

@@ -0,0 +1,135 @@
+import {
+	Button,
+	Checkbox,
+	Group,
+	Stack,
+	TextInput,
+	Title,
+} from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	LedgerEntryRow,
+	type OperationCategory,
+	operationCategories,
+} from "@/entities/broker-operation";
+import { StateView } from "@/shared/ui";
+import type { AccountOperationsPageViewModel } from "./AccountOperationsPage.vm";
+
+type AccountOperationsPageLoadedProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "loaded" }
+>;
+
+type AccountOperationsPageErrorProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "error" }
+>;
+
+const AccountOperationsPageLoading: FC = () => {
+	const { t } = useTranslation();
+
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+};
+
+const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
+	props,
+) => {
+	const { retry } = props;
+	const { t } = useTranslation();
+
+	return (
+		<StateView
+			error
+			title={t("ledger.errorTitle")}
+			text={t("ledger.errorText")}
+			action={<Button onClick={retry}>{t("ledger.retry")}</Button>}
+		/>
+	);
+};
+
+const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
+	props,
+) => {
+	const {
+		categories,
+		from,
+		hasNext,
+		hasPrevious,
+		items,
+		onCategoriesChange,
+		onFromChange,
+		onNext,
+		onPrevious,
+		onToChange,
+		to,
+	} = props;
+	const { t } = useTranslation();
+
+	return (
+		<Stack maw={960} gap="lg">
+			<Title order={1}>{t("ledger.title")}</Title>
+			<Group align="end">
+				<TextInput
+					label={t("ledger.from")}
+					type="date"
+					value={from}
+					onChange={(event) => onFromChange(event.currentTarget.value)}
+				/>
+				<TextInput
+					label={t("ledger.to")}
+					type="date"
+					value={to}
+					onChange={(event) => onToChange(event.currentTarget.value)}
+				/>
+			</Group>
+			<Checkbox.Group
+				label={t("ledger.categories")}
+				value={categories}
+				onChange={(value) => onCategoriesChange(value as OperationCategory[])}
+			>
+				<Group mt="xs">
+					{operationCategories.map((category) => (
+						<Checkbox
+							key={category}
+							value={category}
+							label={t(`ledger.category.${category}`)}
+						/>
+					))}
+				</Group>
+			</Checkbox.Group>
+			{items.length ? (
+				items.map((operation) => (
+					<LedgerEntryRow key={operation.id} operation={operation} />
+				))
+			) : (
+				<StateView
+					title={t("ledger.emptyTitle")}
+					text={t("ledger.emptyText")}
+				/>
+			)}
+			{hasNext || hasPrevious ? (
+				<Group justify="space-between">
+					<Button disabled={!hasPrevious} onClick={onPrevious}>
+						{t("ledger.previous")}
+					</Button>
+					<Button disabled={!hasNext} onClick={onNext}>
+						{t("ledger.next")}
+					</Button>
+				</Group>
+			) : null}
+		</Stack>
+	);
+};
+
+export {
+	AccountOperationsPageError,
+	AccountOperationsPageLoaded,
+	AccountOperationsPageLoading,
+};

src/pages/account-operations/ui/AccountOperationsPage.vm.ts

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { useParams } from "react-router";
+import {
+	type BrokerageOperation,
+	type OperationCategory,
+	useBrokerageOperations,
+} from "@/entities/broker-operation";
+
+type AccountOperationsPageViewModel =
+	| { state: "loading" }
+	| { state: "error"; retry: () => void }
+	| {
+			state: "loaded";
+			from: string;
+			to: string;
+			categories: OperationCategory[];
+			items: BrokerageOperation[];
+			hasNext: boolean;
+			hasPrevious: boolean;
+			onFromChange: (value: string) => void;
+			onToChange: (value: string) => void;
+			onCategoriesChange: (value: OperationCategory[]) => void;
+			onNext: () => void;
+			onPrevious: () => void;
+	  };
+
+const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
+	const { accountId } = useParams();
+	const [from, setFrom] = useState("");
+	const [to, setTo] = useState("");
+	const [categories, setCategories] = useState<OperationCategory[]>([]);
+	const [cursors, setCursors] = useState<string[]>([]);
+	const cursor = cursors.at(-1);
+	const operations = useBrokerageOperations(accountId, {
+		from: dateStart(from),
+		to: dateEnd(to),
+		...(categories.length ? { categories } : {}),
+		...(cursor ? { cursor } : {}),
+		limit: 100,
+	});
+	const reset = () => setCursors([]);
+
+	if (operations.isLoading) return { state: "loading" };
+	if (operations.isError)
+		return { state: "error", retry: () => operations.refetch() };
+	if (!operations.data) return { state: "loading" };
+	const nextCursor = operations.data.nextCursor;
+
+	return {
+		state: "loaded",
+		from,
+		to,
+		categories,
+		items: operations.data.items,
+		hasNext: Boolean(operations.data.hasNext && nextCursor),
+		hasPrevious: Boolean(cursors.length),
+		onFromChange: (value) => {
+			setFrom(value);
+			reset();
+		},
+		onToChange: (value) => {
+			setTo(value);
+			reset();
+		},
+		onCategoriesChange: (value) => {
+			setCategories(value);
+			reset();
+		},
+		onNext: () => {
+			if (nextCursor) setCursors((value) => [...value, nextCursor]);
+		},
+		onPrevious: () => setCursors((value) => value.slice(0, -1)),
+	};
+};
+
+function dateStart(value: string) {
+	return value ? `${value}T00:00:00.000Z` : undefined;
+}
+
+function dateEnd(value: string) {
+	return value ? `${value}T23:59:59.999Z` : undefined;
+}
+
+export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };