Month Year selection for Dashboard

src/app/(app)/budgets/page.tsx

@@ -1,15 +1,24 @@
 import { auth } from '@/lib/auth'
 import { prisma } from '@/lib/prisma'
+import { monthBounds } from '@/lib/utils/dates'
 import { BudgetList } from '@/components/budgets/BudgetList'
+import { MonthYearPicker } from '@/components/dashboard/MonthYearPicker'
 
-export default async function BudgetsPage() {
+type SearchParams = Promise<Record<string, string | string[] | undefined>>
+
+export default async function BudgetsPage({ searchParams }: { searchParams: SearchParams }) {
   const session = await auth()
   if (!session?.user?.id) return null
 
   const userId = session.user.id
+  const sp = await searchParams
+  const get = (k: string) => (Array.isArray(sp[k]) ? sp[k][0] : sp[k]) ?? ''
+
   const now = new Date()
-  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
-  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999)
+  const month = Number(get('month')) || (now.getMonth() + 1)
+  const year = Number(get('year')) || now.getFullYear()
+  const selectedDate = new Date(year, month - 1, 1)
+  const { start, end } = monthBounds(selectedDate)
 
   const [budgets, spendRows, rules] = await Promise.all([
     prisma.budget.findMany({
@@ -23,8 +32,8 @@ export default async function BudgetsPage() {
       WHERE a."userId" = ${userId}
         AND t."budgetId" IS NOT NULL
         AND t.type = 'DEBIT'
-        AND t.date >= ${monthStart}
-        AND t.date <= ${monthEnd}
+        AND t.date >= ${start}
+        AND t.date <= ${end}
       GROUP BY t."budgetId"
     `,
     prisma.budgetRule.findMany({
@@ -53,7 +62,11 @@ export default async function BudgetsPage() {
   }))
 
   return (
-    <div className="p-6">
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Budgets</h1>
+        <MonthYearPicker />
+      </div>
       <BudgetList budgets={budgetsWithSpend} />
     </div>
   )