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

src/components/dashboard/MonthNavigator.tsx

@@ -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>
+  )
+}