feat(cards): refine controls and modal transitions

src/pages/cards/ui/CardsPage.vm.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useSearchParams } from "react-router";
 import {
-	bankMonth,
+	bankPeriod,
 	useBankCards,
 	useBankCategories,
 	useBankSummary,
@@ -9,30 +9,30 @@ import {
 
 function useCardsPageVm() {
 	const [params, setParams] = useSearchParams();
-	const month = bankMonth(params.get("month"));
+	const period = bankPeriod(params);
 	const [archive, setArchive] = useState(false);
 	const categories = useBankCategories();
 	const [managingCategories, setManagingCategories] = useState(false);
 	const [adding, setAdding] = useState(false);
 	const cards = useBankCards(archive);
-	const summary = useBankSummary(month);
+	const summary = useBankSummary(period);
 	return {
 		categories,
 		managingCategories,
 		setManagingCategories,
-		month,
+		period,
 		archive,
 		setArchive,
 		adding,
 		setAdding,
 		cards,
 		summary,
-		setMonth: (value: string) => {
-			if (value) setParams({ month: bankMonth(value) });
+		setPeriod: (value: [string | null, string | null]) => {
+			if (value[0] && value[1]) setParams({ from: value[0], to: value[1] });
 		},
 		items: cards.data?.map((card) => ({
 			...card,
-			to: `/cards/${card.id}?month=${month}`,
+			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
 		})),
 	};
 }