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,141 @@
+import {
+	ActionIcon,
+	Button,
+	Group,
+	Paper,
+	SimpleGrid,
+	Skeleton,
+	Stack,
+	Switch,
+	Text,
+	Title,
+} from "@mantine/core";
+import { AddIcon } from "@wealthledger/icons";
+import { LoadingSkeleton, StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import {
+	BankCardFace,
+	BankFeedback,
+	BankPeriodPicker,
+	BankSummaryView,
+} from "@/entities/bank-card";
+import classes from "./CardsPage.module.css";
+import type { CardsPageVm } from "./CardsPage.vm";
+
+type CardsPageViewProps = { vm: CardsPageVm };
+const CardsPageView: FC<CardsPageViewProps> = (props) => {
+	const { vm } = props;
+	const { t } = useTranslation();
+	return (
+		<Stack gap="lg">
+			<Group gap="sm">
+				<Title order={1}>{t("bank.title")}</Title>
+				<ActionIcon
+					size="lg"
+					variant="light"
+					aria-label={t("bank.addCard")}
+					title={t("bank.addCard")}
+					onClick={() => vm.setAdding(true)}
+				>
+					<AddIcon size={20} strokeWidth={2} />
+				</ActionIcon>
+			</Group>
+			<Switch
+				label={t("bank.showArchive")}
+				checked={vm.archive}
+				onChange={(event) => vm.setArchive(event.currentTarget.checked)}
+			/>
+			{vm.items ? (
+				vm.items.length ? (
+					<SimpleGrid cols={{ base: 1, sm: 2 }}>
+						{vm.items.map((card) => (
+							<Paper
+								key={card.id}
+								component={Link}
+								to={card.to}
+								p={0}
+								className={classes.card}
+							>
+								<BankCardFace card={card} />
+							</Paper>
+						))}
+					</SimpleGrid>
+				) : (
+					<StateView
+						title={t("bank.empty")}
+						text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
+						action={
+							<Button onClick={() => vm.setAdding(true)}>
+								{t("bank.addCard")}
+							</Button>
+						}
+					/>
+				)
+			) : vm.cards.isLoading ? (
+				<LoadingSkeleton label={t("bank.loading")}>
+					<SimpleGrid cols={{ base: 1, sm: 2 }}>
+						<Skeleton h={250} />
+						<Skeleton h={250} />
+					</SimpleGrid>
+				</LoadingSkeleton>
+			) : null}
+			{vm.cards.isError && (
+				<Group role="alert">
+					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
+					<Button variant="default" onClick={() => void vm.cards.refetch()}>
+						{t("bank.retry")}
+					</Button>
+				</Group>
+			)}
+			{vm.cards.data && vm.cards.isFetching && (
+				<Text role="status">{t("bank.refreshing")}</Text>
+			)}
+			<Group align="flex-end" justify="space-between">
+				<BankPeriodPicker period={vm.period} onChange={vm.setPeriod} />
+				{Boolean(vm.categories.data?.length || vm.cards.data?.length) && (
+					<Button
+						variant="subtle"
+						color="gray"
+						onClick={() => vm.setManagingCategories(true)}
+						leftSection={
+							<svg
+								width="18"
+								height="18"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.7"
+								strokeLinejoin="round"
+								aria-hidden="true"
+							>
+								<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
+							</svg>
+						}
+					>
+						{t("bank.categories")}
+					</Button>
+				)}
+			</Group>
+			<BankSummaryView
+				all
+				data={vm.summary.data}
+				loading={vm.summary.isLoading}
+				error={vm.summary.isError}
+				fetching={vm.summary.isFetching}
+				retry={() => void vm.summary.refetch()}
+			/>
+			{vm.categories.isError && (
+				<BankFeedback
+					loadingError
+					error={vm.categories.error}
+					cached={Boolean(vm.categories.data)}
+					retry={() => void vm.categories.refetch()}
+				/>
+			)}
+		</Stack>
+	);
+};
+
+export { CardsPageView };