refactor: colocate frontend component files

src/pages/cards/ui/CardsPage/CardsPage.module.css

@@ -0,0 +1,13 @@
+.card {
+	text-decoration: none;
+	color: inherit;
+	min-width: 0;
+	max-width: 28rem;
+	border-radius: 1.25rem;
+	background: transparent;
+	overflow-wrap: anywhere;
+}
+.card:focus-visible {
+	outline: 2px solid var(--mantine-primary-color-filled);
+	outline-offset: 3px;
+}

src/pages/cards/ui/CardsPage/CardsPage.test.tsx

@@ -0,0 +1,217 @@
+import { MantineProvider } from "@mantine/core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+	within,
+} from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+import { configureAuthClient } from "@/shared/api";
+import { createTestQueryClient } from "@/test/query";
+import { server } from "@/test/server";
+import { CardsPage } from "./CardsPage";
+
+const money = (value: string) => ({ currency: "RUB", value });
+function renderCards(fail = false, categoryFail = false) {
+	configureAuthClient({
+		accessToken: () => "test",
+		refresh: async () => false,
+		clear: () => {},
+	});
+	server.use(
+		http.get("*/api/v1/bank-cards/categories", () =>
+			categoryFail ? HttpResponse.error() : HttpResponse.json([]),
+		),
+		http.get("*/api/v1/bank-cards", () =>
+			fail ? HttpResponse.error() : HttpResponse.json([]),
+		),
+		http.get("*/api/v1/bank-cards/summary", () =>
+			HttpResponse.json({
+				month: "2026-09",
+				cardId: null,
+				expenses: money("0"),
+				refunds: money("0"),
+				net: money("0"),
+				categories: [],
+			}),
+		),
+	);
+	return render(
+		<QueryClientProvider client={createTestQueryClient()}>
+			<MantineProvider env="test">
+				<MemoryRouter initialEntries={["/cards?month=2026-09"]}>
+					<CardsPage />
+				</MemoryRouter>
+			</MantineProvider>
+		</QueryClientProvider>,
+	);
+}
+describe("CardsPage", () => {
+	it("preserves exact negative opening amount and the creation intent through unknown failure", async () => {
+		renderCards();
+		await screen.findByRole("heading", { name: "Добавьте первую карту" });
+		fireEvent.click(
+			screen.getAllByRole("button", { name: "Добавить карту" })[0],
+		);
+		const dialog = screen.getByRole("dialog");
+		const submitted: Record<string, unknown>[] = [];
+		let resolve: (() => void) | undefined;
+		server.use(
+			http.post("*/api/v1/bank-cards", async ({ request }) => {
+				submitted.push((await request.json()) as Record<string, unknown>);
+				if (submitted.length === 1) {
+					await new Promise<void>((r) => {
+						resolve = r;
+					});
+					return HttpResponse.error();
+				}
+				return HttpResponse.json({ id: submitted[0].id }, { status: 201 });
+			}),
+		);
+		fireEvent.change(within(dialog).getByLabelText(/Название карты/), {
+			target: { value: " Повседневная " },
+		});
+		fireEvent.change(within(dialog).getByLabelText(/Начальный остаток/), {
+			target: { value: "1,001" },
+		});
+		fireEvent.click(within(dialog).getByRole("button", { name: "Сохранить" }));
+		expect(
+			await screen.findByText(/Введите сумму в допустимом диапазоне/),
+		).toBeInTheDocument();
+		expect(submitted).toHaveLength(0);
+		fireEvent.change(within(dialog).getByLabelText(/Начальный остаток/), {
+			target: { value: "-92233720368547758,08" },
+		});
+		fireEvent.change(within(dialog).getByLabelText(/Дата начала учёта/), {
+			target: { value: "2026-01-01" },
+		});
+		fireEvent.click(within(dialog).getByRole("button", { name: "Сохранить" }));
+		await waitFor(() => expect(submitted).toHaveLength(1));
+		expect(
+			within(dialog).getByRole("button", { name: "Отмена" }),
+		).toBeDisabled();
+		expect(
+			within(dialog).getByRole("button", { name: "Закрыть" }),
+		).toBeDisabled();
+		resolve?.();
+		await screen.findByText(/Не удалось подтвердить сохранение/);
+		expect(within(dialog).getByLabelText(/Начальный остаток/)).toHaveValue(
+			"-92233720368547758,08",
+		);
+		fireEvent.click(within(dialog).getByRole("button", { name: "Сохранить" }));
+		await waitFor(() =>
+			expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
+		);
+		expect(submitted[0]).toEqual(submitted[1]);
+		expect(submitted[0]).toMatchObject({
+			name: "Повседневная",
+			bankName: null,
+			lastFour: null,
+			openingBalance: money("-92233720368547758.08"),
+		});
+	});
+	it("uses archive only for card list and keeps all-card summary including negative net", async () => {
+		renderCards();
+		const requests: string[] = [];
+		server.use(
+			http.get("*/api/v1/bank-cards", ({ request }) => {
+				requests.push(new URL(request.url).search);
+				return HttpResponse.json([
+					{
+						id: "demo",
+						name: "Запасная",
+						bankName: null,
+						lastFour: null,
+						balance: money("0"),
+						archivedAt: "2026-09-01",
+						version: 1,
+						openingBalance: money("0"),
+						openingDate: "2026-01-01",
+					},
+				]);
+			}),
+		);
+		fireEvent.click(screen.getByLabelText("Показать архив"));
+		await screen.findByText("Запасная");
+		expect(requests).toContain("?includeArchived=true");
+		expect(screen.getByLabelText("Период")).toHaveTextContent(
+			"01.09.2026 – 30.09.2026",
+		);
+		expect(screen.getByRole("link", { name: /Запасная/ })).toHaveAttribute(
+			"href",
+			"/cards/demo?from=2026-09-01&to=2026-09-30",
+		);
+	});
+	it("applies a completed custom period to the summary", async () => {
+		renderCards();
+		await screen.findByText("За этот период операций по расходам нет.");
+		await screen.findByRole("heading", { name: "Добавьте первую карту" });
+		const requests: string[] = [];
+		server.use(
+			http.get("*/api/v1/bank-cards/summary", ({ request }) => {
+				requests.push(new URL(request.url).search);
+				return HttpResponse.json({
+					cardId: null,
+					expenses: money("0"),
+					refunds: money("0"),
+					net: money("0"),
+					categories: [],
+				});
+			}),
+		);
+		fireEvent.click(screen.getByLabelText("Период"));
+		fireEvent.click(
+			await screen.findByRole("button", { name: "10 September 2026" }),
+		);
+		expect(requests).toHaveLength(0);
+
+		fireEvent.click(
+			await screen.findByRole("button", { name: "20 September 2026" }),
+		);
+		await waitFor(() =>
+			expect(requests.at(-1)).toBe("?from=2026-09-10&to=2026-09-20"),
+		);
+	});
+	it("shows retry after failure instead of presenting an empty list", async () => {
+		renderCards(true);
+		// Mount starts asynchronously; this handler owns the request.
+		expect(await screen.findByRole("alert")).toHaveTextContent(
+			"Не удалось загрузить данные карт.",
+		);
+		expect(
+			screen.queryByRole("heading", { name: "Добавьте первую карту" }),
+		).not.toBeInTheDocument();
+		server.use(http.get("*/api/v1/bank-cards", () => HttpResponse.json([])));
+		fireEvent.click(
+			within(screen.getByRole("alert")).getByRole("button", {
+				name: "Повторить",
+			}),
+		);
+		await screen.findByRole("heading", { name: "Добавьте первую карту" });
+	});
+	it("makes failed category loading recoverable without hiding successful cards data", async () => {
+		renderCards(false, true);
+		await screen.findByRole("heading", { name: "Добавьте первую карту" });
+		expect(await screen.findByRole("alert")).toHaveTextContent(
+			"Не удалось загрузить данные карт.",
+		);
+		server.use(
+			http.get("*/api/v1/bank-cards/categories", () =>
+				HttpResponse.json([
+					{ id: "default", name: "Другое", version: 1, isDefault: true },
+				]),
+			),
+		);
+		fireEvent.click(
+			within(screen.getByRole("alert")).getByRole("button", {
+				name: "Повторить",
+			}),
+		);
+		await screen.findByRole("button", { name: "Категории" });
+		expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+	});
+});

src/pages/cards/ui/CardsPage/CardsPage.tsx

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import { BankCardForm, CategoryManager } from "@/entities/bank-card";
+import { CardsPageView } from "./CardsPage.view";
+import { useCardsPageVm } from "./CardsPage.vm";
+
+const CardsPage: FC = () => {
+	const vm = useCardsPageVm();
+	return (
+		<>
+			<CardsPageView vm={vm} />
+			{vm.adding && <BankCardForm onClose={() => vm.setAdding(false)} />}
+			{vm.managingCategories && (
+				<CategoryManager onClose={() => vm.setManagingCategories(false)} />
+			)}
+		</>
+	);
+};
+
+export { CardsPage };

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -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 };

src/pages/cards/ui/CardsPage/CardsPage.vm.ts

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { useSearchParams } from "react-router";
+import {
+	bankPeriod,
+	useBankCards,
+	useBankCategories,
+	useBankSummary,
+} from "@/entities/bank-card";
+
+function useCardsPageVm() {
+	const [params, setParams] = useSearchParams();
+	const period = bankPeriod(params);
+	const [archive, setArchive] = useState(false);
+	const categories = useBankCategories();
+	const [managingCategories, setManagingCategories] = useState(false);
+	const [adding, setAdding] = useState(false);
+	const cards = useBankCards(archive);
+	const summary = useBankSummary(period);
+	return {
+		categories,
+		managingCategories,
+		setManagingCategories,
+		period,
+		archive,
+		setArchive,
+		adding,
+		setAdding,
+		cards,
+		summary,
+		setPeriod: (value: [string | null, string | null]) => {
+			if (value[0] && value[1]) setParams({ from: value[0], to: value[1] });
+		},
+		items: cards.data?.map((card) => ({
+			...card,
+			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
+		})),
+	};
+}
+type CardsPageVm = ReturnType<typeof useCardsPageVm>;
+
+export { type CardsPageVm, useCardsPageVm };