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,76 @@
+import {
+	Alert,
+	Button,
+	Group,
+	Loader,
+	Stack,
+	Text,
+	Title,
+} from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { FormProvider } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import classes from "../AccountIncomePage.module.css";
+import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
+import { IncomeComparisons } from "./IncomeComparisons.view";
+import { IncomePayments } from "./IncomePayments.view";
+import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
+import { IncomeSummary } from "./IncomeSummary.view";
+
+type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
+
+const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
+	const {
+		analytics,
+		display,
+		form,
+		refreshing,
+		refreshError,
+		retry,
+		onSubmit,
+		onReset,
+	} = props;
+	const { t } = useTranslation();
+	return (
+		<Stack gap="lg" className={classes.page}>
+			<Title order={1}>{t("income.title")}</Title>
+			<FormProvider {...form}>
+				<IncomePeriodForm
+					key={props.formRevision}
+					onSubmit={form.handleSubmit(onSubmit)}
+					onReset={onReset}
+				/>
+			</FormProvider>
+			{refreshing ? (
+				<Group gap="xs" role="status" aria-label={t("income.refreshing")}>
+					<Loader size="sm" />
+					<Text>{t("income.refreshing")}</Text>
+				</Group>
+			) : null}
+			{refreshError ? (
+				<Alert color="orange">
+					<Stack gap="sm">
+						<Text>{t("income.refreshError")}</Text>
+						<Button onClick={retry} variant="default">
+							{t("income.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			) : null}
+			{analytics.totalsByCurrency.length ? (
+				<IncomeSummary totals={analytics.totalsByCurrency} />
+			) : (
+				<StateView
+					title={t("income.emptyTitle")}
+					text={t("income.emptyText")}
+				/>
+			)}
+			<Alert color="blue">{t("income.taxBoundary")}</Alert>
+			<IncomeComparisons comparison={display.comparison} />
+			<IncomePayments entries={display.entries} />
+		</Stack>
+	);
+};
+
+export { AccountIncomePageLoaded };