feat(02-01): create useMonthParam hook and MonthNavigator component

- useMonthParam reads/writes month URL search param with YYYY-MM fallback
- navigateMonth handles year rollover via Date constructor
- MonthNavigator renders prev/next arrows with Select dropdown
- Dropdown lists available budget months with locale-aware formatting
This commit is contained in:
2026-03-16 13:02:29 +01:00
parent dca5b04494
commit 448195016f
2 changed files with 86 additions and 0 deletions

View File

@@ -0,0 +1,26 @@
import { useSearchParams } from "react-router-dom"
export function useMonthParam() {
const [searchParams, setSearchParams] = useSearchParams()
const monthParam = searchParams.get("month")
const now = new Date()
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`
const month = monthParam || currentMonth
const setMonth = (newMonth: string) => {
setSearchParams((prev) => {
prev.set("month", newMonth)
return prev
})
}
const navigateMonth = (delta: number) => {
const [year, mo] = month.split("-").map(Number)
const d = new Date(year, mo - 1 + delta, 1)
const next = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`
setMonth(next)
}
return { month, setMonth, navigateMonth }
}