feat(cards): refine controls and modal transitions

src/entities/bank-card/index.ts

@@ -14,15 +14,16 @@ export {
 	bankDateInputValue,
 	bankDateSchema,
 	bankMoneyValue,
-	bankMonth,
 	bankToday,
 	moneyCents,
 	positiveMoneySchema,
 } from "./model/form-validation";
+export { bankPeriod } from "./model/period";
 export { BankCardFace } from "./ui/BankCardFace";
 export { BankCardForm } from "./ui/BankCardForm";
 export { BankFeedback } from "./ui/BankFeedback";
 export { BankOperationIcon } from "./ui/BankOperationIcon";
+export { BankPeriodPicker } from "./ui/BankPeriodPicker";
 export { BankSummaryView } from "./ui/BankSummary.view";
 export { CategoryManager } from "./ui/CategoryManager";
 export { useBankFormFocus } from "./ui/useBankFormFocus";

src/entities/bank-card/model/period.ts

@@ -0,0 +1,23 @@
+import dayjs from "dayjs";
+import { z } from "zod";
+import { bankMonth } from "./form-validation";
+
+const calendarDate = z.string().date();
+function bankPeriod(params: URLSearchParams) {
+	const month = bankMonth(params.get("month"));
+	const from = params.get("from");
+	const to = params.get("to");
+	return from &&
+		to &&
+		calendarDate.safeParse(from).success &&
+		calendarDate.safeParse(to).success &&
+		from >= "0001-01-01" &&
+		from <= to
+		? { from, to }
+		: {
+				from: `${month}-01`,
+				to: dayjs(`${month}-01`).endOf("month").format("YYYY-MM-DD"),
+			};
+}
+
+export { bankPeriod };

src/entities/bank-card/ui/BankCardForm.test.tsx

@@ -39,6 +39,12 @@ function setup(value: BankCard) {
 	return close;
 }
 describe("BankCardForm", () => {
+	it("waits for the exit transition before notifying the parent", async () => {
+		const close = setup(card);
+		fireEvent.click(screen.getByRole("button", { name: "Отмена" }));
+		expect(close).not.toHaveBeenCalled();
+		await waitFor(() => expect(close).toHaveBeenCalledTimes(1));
+	});
 	it("clears optional metadata on archive while omitting protected financial fields", async () => {
 		const close = setup({ ...card, archivedAt: "2026-09-01" });
 		expect(screen.getByLabelText(/Начальный остаток/)).toHaveAttribute(

src/entities/bank-card/ui/BankCardForm.tsx

@@ -20,6 +20,7 @@ import { useBankFormFocus } from "./useBankFormFocus";
 type BankCardFormProps = { card?: BankCard; onClose: () => void };
 const BankCardForm: FC<BankCardFormProps> = (props) => {
 	useBankFormFocus();
+	const [opened, setOpened] = useState(true);
 	const { t } = useTranslation();
 	const [intent] = useState(() => crypto.randomUUID());
 	const [version, setVersion] = useState(props.card?.version ?? 1);
@@ -39,11 +40,14 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 		},
 	});
 	const pending =
-		methods.formState.isSubmitting || (fresh.isFetching && Boolean(error));
+		!opened ||
+		methods.formState.isSubmitting ||
+		(fresh.isFetching && Boolean(error));
 	return (
 		<Modal
-			opened
-			onClose={() => !pending && props.onClose()}
+			opened={opened}
+			onExitTransitionEnd={props.onClose}
+			onClose={() => !pending && setOpened(false)}
 			title={t(props.card ? "bank.editCard" : "bank.addCard")}
 			closeButtonProps={{ "aria-label": t("bank.close"), disabled: pending }}
 			closeOnClickOutside={!pending}
@@ -82,7 +86,7 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 									...metadata,
 									...financial,
 								});
-							props.onClose();
+							setOpened(false);
 						} catch (failure) {
 							setError(failure);
 						}
@@ -132,7 +136,7 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 								<Button type="submit" loading={pending}>
 									{t("bank.save")}
 								</Button>
-								<Button variant="default" onClick={props.onClose}>
+								<Button variant="default" onClick={() => setOpened(false)}>
 									{t("bank.cancel")}
 								</Button>
 							</Group>

src/entities/bank-card/ui/BankPeriodPicker.tsx

@@ -0,0 +1,38 @@
+import { DatePickerInput } from "@mantine/dates";
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type BankPeriodPickerProps = {
+	period: { from: string; to: string };
+	onChange: (value: [string | null, string | null]) => void;
+};
+const BankPeriodPicker: FC<BankPeriodPickerProps> = (props) => {
+	const { period, onChange } = props;
+	const { t } = useTranslation();
+	const scope = `${period.from}-${period.to}`;
+	const [draft, setDraft] = useState<{
+		scope: string;
+		value: [string | null, string | null];
+	}>();
+	const value: [string | null, string | null] =
+		draft?.scope === scope ? draft.value : [period.from, period.to];
+	return (
+		<DatePickerInput
+			type="range"
+			allowSingleDateInRange
+			label={t("bank.period")}
+			valueFormat="DD.MM.YYYY"
+			value={value}
+			onChange={(next) => {
+				setDraft({ scope, value: next });
+				onChange(next);
+			}}
+			popoverProps={{
+				returnFocus: true,
+				middlewares: { shift: { crossAxis: true } },
+			}}
+		/>
+	);
+};
+
+export { BankPeriodPicker };

src/entities/bank-card/ui/CategoryManager.tsx

@@ -53,6 +53,7 @@ const CategoryFields: FC = () => {
 };
 const CategoryManager: FC<CategoryManagerProps> = (props) => {
 	useBankFormFocus();
+	const [opened, setOpened] = useState(true);
 	const { t } = useTranslation();
 	const categories = useBankCategories();
 	const mutation = useBankMutations();
@@ -83,11 +84,12 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 		),
 		defaultValues: { name: "" },
 	});
-	const pending = methods.formState.isSubmitting;
+	const pending = !opened || methods.formState.isSubmitting;
 	return (
 		<Modal
-			opened
-			onClose={() => !pending && props.onClose()}
+			opened={opened}
+			onExitTransitionEnd={props.onClose}
+			onClose={() => !pending && setOpened(false)}
 			title={t("bank.categories")}
 			closeOnClickOutside={!pending}
 			closeOnEscape={!pending}
@@ -205,7 +207,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 										{t("bank.cancel")}
 									</Button>
 								)}
-								<Button variant="default" onClick={props.onClose}>
+								<Button variant="default" onClick={() => setOpened(false)}>
 									{t("bank.close")}
 								</Button>
 							</Group>