refactor: colocate frontend component files

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx

@@ -0,0 +1,12 @@
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+const AccountEventsPageEmpty: FC = () => {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("events.emptyTitle")} text={t("events.emptyText")} />
+	);
+};
+
+export { AccountEventsPageEmpty };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+type AccountEventsPageErrorProps = { retry: () => void };
+
+const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("events.errorTitle")}
+			text={t("events.errorText")}
+			action={<Button onClick={props.retry}>{t("events.retry")}</Button>}
+		/>
+	);
+};
+
+export { AccountEventsPageError };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx

@@ -0,0 +1,90 @@
+import {
+	Alert,
+	Button,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	Title,
+} from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { BrokerageEventCard } from "@/entities/brokerage-event";
+import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
+import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";
+
+type AccountEventsPageLoadedProps = Extract<
+	AccountEventsPageViewModel,
+	{ state: "loaded" }
+>;
+
+const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Stack gap="lg">
+			<Title order={1}>{t("events.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}
+			<Text c="dimmed">{t("events.hint")}</Text>
+			<Group align="end">
+				<DatePickerInput
+					type="range"
+					allowSingleDateInRange
+					clearable
+					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
+					label={t("ledger.period")}
+					value={[props.draftFrom, props.draftTo]}
+					onChange={([from, to]) => {
+						props.onDraftFromChange(from);
+						props.onDraftToChange(to);
+					}}
+					valueFormat="DD.MM.YYYY"
+					popoverProps={{
+						returnFocus: true,
+						middlewares: { shift: { crossAxis: true } },
+					}}
+				/>
+			</Group>
+			<Group>
+				<Button onClick={props.onApply} disabled={!props.canApply}>
+					{t("ledger.apply")}
+				</Button>
+				<Button variant="default" onClick={props.onReset}>
+					{t("ledger.reset")}
+				</Button>
+			</Group>
+			{props.events.length ? (
+				<Stack gap="sm">
+					{props.events.map((event) => (
+						<BrokerageEventCard
+							event={event}
+							key={JSON.stringify([
+								event.account?.id,
+								event.type,
+								event.date,
+								event.instrumentUid,
+								event.figi,
+								event.ticker,
+								event.logoName,
+							])}
+						/>
+					))}
+				</Stack>
+			) : (
+				<AccountEventsPageEmpty />
+			)}
+		</Stack>
+	);
+};
+
+export { AccountEventsPageLoaded };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx

@@ -0,0 +1,29 @@
+import { Group, Skeleton } 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 AccountEventsPageLoading: FC = () => {
+	const { t } = useTranslation();
+	return (
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="40%" />
+			<Skeleton height={18} width="70%" />
+			<Group>
+				<Skeleton height={60} width={220} />
+				<Skeleton height={60} width={220} />
+			</Group>
+			<Group>
+				<Skeleton height={36} width={116} />
+				<Skeleton height={36} width={108} />
+			</Group>
+			{skeletonRowIds.map((id) => (
+				<Skeleton key={id} height={82} radius="md" />
+			))}
+		</LoadingSkeleton>
+	);
+};
+
+export { AccountEventsPageLoading };