refactor: clarify frontend module ownership

2026-09-29 07:07:36 +03:00
parent 7c28a423dd
commit f9f0f6921e
91 changed files with 1292 additions and 1050 deletions
@@ -0,0 +1,126 @@
+import {
+	ActionIcon,
+	Anchor,
+	Group,
+	Skeleton,
+	Stack,
+	Text,
+} from "@mantine/core";
+import {
+	DeleteIcon,
+	EditIcon,
+	OperationIcon,
+} from "@wealthledger/icons";
+import { EntryCard, LoadingSkeleton } from "@wealthledger/ui";
+import { type FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+import {
+	bankOperationAppearance,
+} from "@/entities/bank-card";
+
+import type { CardPageVm } from "./CardPage.vm";
+
+import classes from "./CardPage.module.css";
+
+type CardHistoryProps = Pick<CardPageVm,
+	"history"
+	| "period"
+	| "rows"
+>;
+
+// eslint-disable-next-line sonarjs/function-return-type -- React renders elements, lists and empty output.
+const CardHistory: FC<CardHistoryProps> = (props) => {
+	const vm = props;
+	const { t } = useTranslation();
+
+	if (vm.rows) {
+		if (vm.rows.length > 0) {
+			return vm.rows.map((row) => {
+				const details = row.otherCard
+					? (
+							<Anchor
+								component={Link}
+								to={`/cards/${row.otherCard}?from=${vm.period.from}&to=${vm.period.to}`}
+							>
+								{t("bank.card")}
+							</Anchor>
+						)
+					: undefined;
+
+				return (
+					<section
+						aria-label={`${row.title} ${row.item.date}`}
+						className={classes.operation}
+						key={row.item.id}
+					>
+						<EntryCard
+							actions={(
+								<Group gap={4} wrap="nowrap">
+									<ActionIcon
+										aria-label={t("bank.edit")}
+										disabled={!row.editable}
+										onClick={row.onEdit}
+										size="sm"
+										title={t("bank.edit")}
+										variant="subtle"
+									>
+										<EditIcon size={18} strokeWidth={1.5} />
+									</ActionIcon>
+
+									<ActionIcon
+										aria-label={t("bank.delete")}
+										color="red"
+										disabled={!row.editable}
+										onClick={row.onDelete}
+										size="sm"
+										title={t("bank.delete")}
+										variant="subtle"
+									>
+										<DeleteIcon size={18} strokeWidth={1.5} />
+									</ActionIcon>
+								</Group>
+							)}
+							color={row.color}
+							details={details}
+							icon={(
+								<OperationIcon
+									{...bankOperationAppearance(
+										row.item.kind,
+										row.item.categoryName,
+									)}
+								/>
+							)}
+							initial={row.title.charAt(0)}
+							metadata={row.metadata}
+							title={row.title}
+							tone={row.tone}
+							value={row.value}
+							valueLabel={t(`bank.kinds.${row.item.kind}`)}
+							wrap
+						/>
+					</section>
+				);
+			});
+		}
+
+		return <Text>{t("bank.noOperations")}</Text>;
+	}
+
+	if (vm.history.loading) {
+		return (
+			<LoadingSkeleton label={t("bank.loadingHistory")}>
+				<Stack>
+					<Skeleton h={90} />
+
+					<Skeleton h={90} />
+				</Stack>
+			</LoadingSkeleton>
+		);
+	}
+
+	return null;
+};
+
+export { CardHistory };