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,60 @@
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { useMonthParam } from "@/hooks/useMonthParam"
interface MonthNavigatorProps {
availableMonths: string[]
t: (key: string) => string
}
function formatMonthLabel(yyyyMm: string): string {
const [year, mo] = yyyyMm.split("-").map(Number)
const date = new Date(year, mo - 1, 1)
return date.toLocaleDateString(undefined, { month: "long", year: "numeric" })
}
export function MonthNavigator({ availableMonths, t: _t }: MonthNavigatorProps) {
const { month, setMonth, navigateMonth } = useMonthParam()
return (
<div className="flex items-center gap-1">
<Button
variant="ghost"
size="icon"
onClick={() => navigateMonth(-1)}
aria-label="Previous month"
>
<ChevronLeft />
</Button>
<Select value={month} onValueChange={setMonth}>
<SelectTrigger className="w-[180px]">
<SelectValue>{formatMonthLabel(month)}</SelectValue>
</SelectTrigger>
<SelectContent>
{availableMonths.map((m) => (
<SelectItem key={m} value={m}>
{formatMonthLabel(m)}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="ghost"
size="icon"
onClick={() => navigateMonth(1)}
aria-label="Next month"
>
<ChevronRight />
</Button>
</div>
)
}

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 }
}