feat: add operations page

2026-08-14 13:42:31 +03:00
parent 2cca503519
commit 4f3ee7ddb2
16 changed files with 913 additions and 8 deletions
@@ -0,0 +1,177 @@
+import {
+	Button,
+	Card,
+	Checkbox,
+	Group,
+	Stack,
+	Text,
+	TextInput,
+	Title,
+} from "@mantine/core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router";
+import {
+	type BrokerageOperation,
+	type OperationCategory,
+	operationCategories,
+	useBrokerageOperations,
+} from "@/entities/broker-operation";
+import { formatMoney, formatSnapshotTime } from "@/entities/portfolio";
+import { useAuth } from "@/features/auth";
+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;
+}
+
+export function AccountOperationsPage() {
+	const { accountId } = useParams();
+	const { accessToken } = useAuth();
+	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, accessToken, {
+		from: dateStart(from),
+		to: dateEnd(to),
+		...(categories.length ? { categories } : {}),
+		...(cursor ? { cursor } : {}),
+		limit: 100,
+	});
+	const reset = () => setCursors([]);
+
+	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>
+				}
+			/>
+		);
+	return (
+		<Stack maw={960} gap="lg">
+			<Group justify="space-between">
+				<Title order={1}>{t("ledger.title")}</Title>
+				<Button component={Link} to={`/accounts/${accountId}`} variant="subtle">
+					{t("ledger.back")}
+				</Button>
+			</Group>
+			<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>
+			{operations.data.items.length ? (
+				operations.data.items.map((operation) => (
+					<OperationRow key={operation.id} operation={operation} />
+				))
+			) : (
+				<StateView
+					title={t("ledger.emptyTitle")}
+					text={t("ledger.emptyText")}
+				/>
+			)}
+			{operations.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={!operations.data.hasNext || !operations.data.nextCursor}
+						onClick={() =>
+							operations.data.nextCursor &&
+							setCursors((value) => [...value, operations.data.nextCursor])
+						}
+					>
+						{t("ledger.next")}
+					</Button>
+				</Group>
+			) : null}
+		</Stack>
+	);
+}
+
+export function OperationRow({ operation }: { operation: BrokerageOperation }) {
+	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>
+	);
+}