feat(account-operations): require explicit ledger filters

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

@@ -1,11 +1,5 @@
-import {
-	Button,
-	Checkbox,
-	Group,
-	Stack,
-	TextInput,
-	Title,
-} from "@mantine/core";
+import { Button, Group, MultiSelect, Stack, Title } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -21,56 +15,92 @@ type AccountOperationsPageLoadedProps = Extract<
 	{ state: "loaded" }
 >;
 
+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),
+	);
+}
+
 const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	props,
 ) => {
 	const {
-		categories,
-		from,
+		canApply,
+		draftCategories,
+		draftFrom,
+		draftTo,
 		hasNext,
 		hasPrevious,
 		items,
-		onCategoriesChange,
-		onFromChange,
+		onApply,
+		onDraftCategoriesChange,
+		onDraftFromChange,
+		onDraftToChange,
 		onNext,
 		onPrevious,
-		onToChange,
-		to,
+		onReset,
 	} = props;
 	const { t } = useTranslation();
 
+	const categoryData = operationCategories.map((category) => ({
+		value: category,
+		label: t(`ledger.category.${category}`),
+	}));
+
 	return (
 		<Stack maw={960} gap="lg">
 			<Title order={1}>{t("ledger.title")}</Title>
 			<Group align="end">
-				<TextInput
+				<DateInput
 					label={t("ledger.from")}
-					type="date"
-					value={from}
-					onChange={(event) => onFromChange(event.currentTarget.value)}
+					value={toDateValue(draftFrom)}
+					onChange={(value) => onDraftFromChange(fromDateValue(value))}
+					maxDate={toDateValue(draftTo) ?? undefined}
+					valueFormat="DD.MM.YYYY"
 				/>
-				<TextInput
+				<DateInput
 					label={t("ledger.to")}
-					type="date"
-					value={to}
-					onChange={(event) => onToChange(event.currentTarget.value)}
+					value={toDateValue(draftTo)}
+					onChange={(value) => onDraftToChange(fromDateValue(value))}
+					minDate={toDateValue(draftFrom) ?? undefined}
+					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
-			<Checkbox.Group
+			<MultiSelect
 				label={t("ledger.categories")}
-				value={categories}
-				onChange={(value) => onCategoriesChange(value as OperationCategory[])}
-			>
-				<Group mt="xs">
-					{operationCategories.map((category) => (
-						<Checkbox
-							key={category}
-							value={category}
-							label={t(`ledger.category.${category}`)}
-						/>
-					))}
-				</Group>
-			</Checkbox.Group>
+				placeholder={t("ledger.categoriesPlaceholder")}
+				data={categoryData}
+				value={draftCategories}
+				onChange={(value) =>
+					onDraftCategoriesChange(fromMultiSelectValue(value))
+				}
+				clearable
+			/>
+			<Group>
+				<Button onClick={onApply} disabled={!canApply}>
+					{t("ledger.apply")}
+				</Button>
+				<Button variant="default" onClick={onReset}>
+					{t("ledger.reset")}
+				</Button>
+			</Group>
 			{items.length ? (
 				items.map((operation) => (
 					<LedgerEntryRow key={operation.id} operation={operation} />