feat: replace paired date inputs with range pickers

src/pages/account-operations/ui/components/AccountOperationsPageLoaded.view.tsx

@@ -7,7 +7,7 @@ import {
 	Stack,
 	Title,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -25,21 +25,6 @@ type AccountOperationsPageLoadedProps = Extract<
 
 const operationCategorySet = new Set<string>(operationCategories);
 
-function toDateValue(value: string | null): Date | null {
-	if (!value) return null;
-	const [year, month, day] = value.split("-").map(Number);
-	return new Date(year, month - 1, day);
-}
-
-function fromDateValue(value: Date | string | null): string | null {
-	if (!value) return null;
-	if (typeof value === "string") return value;
-	const year = value.getFullYear();
-	const month = String(value.getMonth() + 1).padStart(2, "0");
-	const day = String(value.getDate()).padStart(2, "0");
-	return `${year}-${month}-${day}`;
-}
-
 function fromMultiSelectValue(value: string[]) {
 	return value.filter((item): item is OperationCategory =>
 		operationCategorySet.has(item),
@@ -87,19 +72,22 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 				</Alert>
 			) : null}
 			<Group align="end">
-				<DateInput
-					label={t("ledger.from")}
-					value={toDateValue(draftFrom)}
-					onChange={(value) => onDraftFromChange(fromDateValue(value))}
-					maxDate={toDateValue(draftTo) ?? undefined}
-					valueFormat="DD.MM.YYYY"
-				/>
-				<DateInput
-					label={t("ledger.to")}
-					value={toDateValue(draftTo)}
-					onChange={(value) => onDraftToChange(fromDateValue(value))}
-					minDate={toDateValue(draftFrom) ?? undefined}
+				<DatePickerInput
+					type="range"
+					allowSingleDateInRange
+					clearable
+					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
+					label={t("ledger.period")}
+					value={[draftFrom, draftTo]}
+					onChange={([from, to]) => {
+						onDraftFromChange(from);
+						onDraftToChange(to);
+					}}
 					valueFormat="DD.MM.YYYY"
+					popoverProps={{
+						returnFocus: true,
+						middlewares: { shift: { crossAxis: true } },
+					}}
 				/>
 			</Group>
 			<MultiSelect
@@ -111,6 +99,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 					onDraftCategoriesChange(fromMultiSelectValue(value))
 				}
 				clearable
+				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 			/>
 			<Group>
 				<Button onClick={onApply} disabled={!canApply}>