refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -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 };