refactor: colocate frontend component files

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

@@ -0,0 +1,28 @@
+import { Button } from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
+
+type AccountOperationsPageErrorProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "error" }
+>;
+
+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>}
+		/>
+	);
+};
+
+export { AccountOperationsPageError };

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

@@ -0,0 +1,143 @@
+import {
+	Alert,
+	Button,
+	Group,
+	MultiSelect,
+	Progress,
+	Stack,
+	Title,
+} from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	LedgerEntryRow,
+	type OperationCategory,
+	operationCategories,
+} from "@/entities/broker-operation";
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
+
+type AccountOperationsPageLoadedProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "loaded" }
+>;
+
+const operationCategorySet = new Set<string>(operationCategories);
+
+function fromMultiSelectValue(value: string[]) {
+	return value.filter((item): item is OperationCategory =>
+		operationCategorySet.has(item),
+	);
+}
+
+const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
+	props,
+) => {
+	const {
+		canApply,
+		draftCategories,
+		draftFrom,
+		draftTo,
+		hasNext,
+		hasPrevious,
+		items,
+		onApply,
+		onDraftCategoriesChange,
+		onDraftFromChange,
+		onDraftToChange,
+		onNext,
+		onPrevious,
+		onReset,
+	} = props;
+	const { t } = useTranslation();
+
+	const categoryData = operationCategories.map((category) => ({
+		value: category,
+		label: t(`ledger.category.${category}`),
+	}));
+
+	return (
+		<Stack gap="lg">
+			<Title order={1}>{t("ledger.title")}</Title>
+			{props.refreshing ? (
+				<Progress value={100} animated aria-label={t("accounts.refreshing")} />
+			) : null}
+			{props.refreshError ? (
+				<Alert color="yellow">
+					{t("accounts.refreshError")}
+					<Button variant="subtle" onClick={props.retry}>
+						{t("accounts.retry")}
+					</Button>
+				</Alert>
+			) : null}
+			<Group align="end">
+				<DatePickerInput
+					type="range"
+					allowSingleDateInRange
+					clearable
+					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
+					label={t("ledger.period")}
+					value={[draftFrom, draftTo]}
+					onChange={([from, to]) => {
+						onDraftFromChange(from);
+						onDraftToChange(to);
+					}}
+					valueFormat="DD.MM.YYYY"
+					popoverProps={{
+						returnFocus: true,
+						middlewares: { shift: { crossAxis: true } },
+					}}
+				/>
+			</Group>
+			<MultiSelect
+				label={t("ledger.categories")}
+				placeholder={t("ledger.categoriesPlaceholder")}
+				data={categoryData}
+				value={draftCategories}
+				onChange={(value) =>
+					onDraftCategoriesChange(fromMultiSelectValue(value))
+				}
+				clearable
+				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
+			/>
+			<Group>
+				<Button onClick={onApply} disabled={!canApply}>
+					{t("ledger.apply")}
+				</Button>
+				<Button variant="default" onClick={onReset}>
+					{t("ledger.reset")}
+				</Button>
+			</Group>
+			{items.length ? (
+				items.map((operation) => (
+					<LedgerEntryRow
+						key={JSON.stringify([
+							operation.account?.id,
+							operation.id,
+							operation.logoName,
+						])}
+						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 { AccountOperationsPageLoaded };

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

@@ -0,0 +1,32 @@
+import { Group, Skeleton, Stack } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+const skeletonRowIds = ["first", "second", "third", "fourth"];
+
+const AccountOperationsPageLoading: FC = () => {
+	const { t } = useTranslation();
+
+	return (
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="40%" />
+			<Group grow>
+				<Skeleton height={48} radius="sm" />
+				<Skeleton height={48} radius="sm" />
+			</Group>
+			<Skeleton height={48} radius="sm" />
+			<Group>
+				<Skeleton height={36} width={110} radius="sm" />
+				<Skeleton height={36} width={110} radius="sm" />
+			</Group>
+			<Stack gap="xs">
+				{skeletonRowIds.map((id) => (
+					<Skeleton key={id} height={64} radius="md" />
+				))}
+			</Stack>
+		</LoadingSkeleton>
+	);
+};
+
+export { AccountOperationsPageLoading };