feat(cards): refine controls and modal transitions

src/pages/card/ui/CardPage.view.tsx

@@ -10,53 +10,20 @@ import {
 	Text,
 	Title,
 } from "@mantine/core";
-import { DatePickerInput } from "@mantine/dates";
-import { type FC, useLayoutEffect, useRef, useState } from "react";
+import { type FC, useLayoutEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import {
 	BankCardFace,
 	BankFeedback,
 	BankOperationIcon,
+	BankPeriodPicker,
 	BankSummaryView,
 } from "@/entities/bank-card";
 import { EntryCard, LoadingSkeleton, StateView } from "@/shared/ui";
 import classes from "./CardPage.module.css";
 import type { CardPageVm } from "./CardPage.vm";
 
-type PeriodPickerProps = {
-	period: CardPageVm["period"];
-	onChange: CardPageVm["setPeriod"];
-};
-const PeriodPicker: FC<PeriodPickerProps> = (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 } },
-			}}
-		/>
-	);
-};
-
 type CardPageViewProps = { vm: CardPageVm };
 const CardPageView: FC<CardPageViewProps> = (props) => {
 	const { vm } = props;
@@ -210,7 +177,7 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
 					retry={() => void vm.cards.refetch()}
 				/>
 			)}
-			<PeriodPicker period={vm.period} onChange={vm.setPeriod} />
+			<BankPeriodPicker period={vm.period} onChange={vm.setPeriod} />
 			<BankSummaryView
 				data={vm.summary.data}
 				loading={vm.summary.isLoading}