feat(cards): refine controls and modal transitions

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

@@ -42,7 +42,7 @@ function renderCards(fail = false, categoryFail = false) {
 	);
 	return render(
 		<QueryClientProvider client={createTestQueryClient()}>
-			<MantineProvider>
+			<MantineProvider env="test">
 				<MemoryRouter initialEntries={["/cards?month=2026-09"]}>
 					<CardsPage />
 				</MemoryRouter>
@@ -138,10 +138,42 @@ describe("CardsPage", () => {
 		fireEvent.click(screen.getByLabelText("Показать архив"));
 		await screen.findByText("Запасная");
 		expect(requests).toContain("?includeArchived=true");
-		expect(screen.getByLabelText("Месяц")).toHaveTextContent("September 2026");
+		expect(screen.getByLabelText("Период")).toHaveTextContent(
+			"01.09.2026 – 30.09.2026",
+		);
 		expect(screen.getByRole("link", { name: /Запасная/ })).toHaveAttribute(
 			"href",
-			"/cards/demo?month=2026-09",
+			"/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 () => {