feat(02-03): refactor DashboardPage with month navigation and 3-column chart grid

- Replace hardcoded current month with useMonthParam (URL search params)
- Add MonthNavigator in PageShell action slot
- Replace old recharts pie + progress bars with ExpenseDonutChart, IncomeBarChart, SpendBarChart
- Add empty-month prompt with create/generate buttons
- Memoize all derived data with useMemo
- Move QuickAddPicker below chart grid per plan

src/pages/DashboardPage.tsx

@@ -1,20 +1,18 @@
-import { Link } from "react-router-dom"
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  PieChart,
-  Pie,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-} from "recharts"
 import { useBudgets, useBudgetDetail } from "@/hooks/useBudgets"
+import { useMonthParam } from "@/hooks/useMonthParam"
 import type { CategoryType } from "@/lib/types"
-import { categoryColors } from "@/lib/palette"
 import { formatCurrency } from "@/lib/format"
+import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { PageShell } from "@/components/shared/PageShell"
 import { SummaryStrip } from "@/components/dashboard/SummaryStrip"
 import { DashboardSkeleton } from "@/components/dashboard/DashboardSkeleton"
+import { MonthNavigator } from "@/components/dashboard/MonthNavigator"
+import { ExpenseDonutChart } from "@/components/dashboard/charts/ExpenseDonutChart"
+import { IncomeBarChart } from "@/components/dashboard/charts/IncomeBarChart"
+import { SpendBarChart } from "@/components/dashboard/charts/SpendBarChart"
 import QuickAddPicker from "@/components/QuickAddPicker"
 
 // ---------------------------------------------------------------------------
@@ -29,18 +27,6 @@ const EXPENSE_TYPES: CategoryType[] = [
   "investment",
 ]
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Returns the ISO date string for the first day of the given month.
- * e.g. currentMonthStart(2026, 3) => "2026-03-01"
- */
-function currentMonthStart(year: number, month: number): string {
-  return `${year}-${String(month).padStart(2, "0")}-01`
-}
-
 // ---------------------------------------------------------------------------
 // Dashboard inner — rendered once a budget id is known
 // ---------------------------------------------------------------------------
@@ -49,67 +35,97 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
   const { t } = useTranslation()
   const { budget, items, loading } = useBudgetDetail(budgetId)
 
+  // ------------------------------------------------------------------
+  // Derived totals — all hooks must be called before any early returns
+  // ------------------------------------------------------------------
+
+  const totalIncome = useMemo(
+    () =>
+      items
+        .filter((i) => i.category?.type === "income")
+        .reduce((sum, i) => sum + i.actual_amount, 0),
+    [items]
+  )
+
+  const totalExpenses = useMemo(
+    () =>
+      items
+        .filter((i) => i.category?.type !== "income")
+        .reduce((sum, i) => sum + i.actual_amount, 0),
+    [items]
+  )
+
+  const budgetedIncome = useMemo(
+    () =>
+      items
+        .filter((i) => i.category?.type === "income")
+        .reduce((sum, i) => sum + i.budgeted_amount, 0),
+    [items]
+  )
+
+  const budgetedExpenses = useMemo(
+    () =>
+      items
+        .filter((i) => i.category?.type !== "income")
+        .reduce((sum, i) => sum + i.budgeted_amount, 0),
+    [items]
+  )
+
+  // ------------------------------------------------------------------
+  // Chart data derivations (memoized)
+  // ------------------------------------------------------------------
+
+  const pieData = useMemo(
+    () =>
+      EXPENSE_TYPES.map((type) => {
+        const total = items
+          .filter((i) => i.category?.type === type)
+          .reduce((sum, i) => sum + i.actual_amount, 0)
+        return { type, value: total, label: t(`categories.types.${type}`) }
+      }).filter((d) => d.value > 0),
+    [items, t]
+  )
+
+  const incomeBarData = useMemo(() => {
+    const budgeted = items
+      .filter((i) => i.category?.type === "income")
+      .reduce((sum, i) => sum + i.budgeted_amount, 0)
+    const actual = items
+      .filter((i) => i.category?.type === "income")
+      .reduce((sum, i) => sum + i.actual_amount, 0)
+    if (budgeted === 0 && actual === 0) return []
+    return [{ label: t("categories.types.income"), budgeted, actual }]
+  }, [items, t])
+
+  const spendBarData = useMemo(
+    () =>
+      EXPENSE_TYPES.map((type) => {
+        const groupItems = items.filter((i) => i.category?.type === type)
+        if (groupItems.length === 0) return null
+        const budgeted = groupItems.reduce((sum, i) => sum + i.budgeted_amount, 0)
+        const actual = groupItems.reduce((sum, i) => sum + i.actual_amount, 0)
+        return { type, label: t(`categories.types.${type}`), budgeted, actual }
+      }).filter(Boolean) as Array<{
+        type: string
+        label: string
+        budgeted: number
+        actual: number
+      }>,
+    [items, t]
+  )
+
+  // ------------------------------------------------------------------
+  // Early returns after all hooks
+  // ------------------------------------------------------------------
+
   if (loading) return <DashboardSkeleton />
   if (!budget) return null
 
   const currency = budget.currency
-
-  // ------------------------------------------------------------------
-  // Derived totals
-  // ------------------------------------------------------------------
-
-  const totalIncome = items
-    .filter((i) => i.category?.type === "income")
-    .reduce((sum, i) => sum + i.actual_amount, 0)
-
-  const totalExpenses = items
-    .filter((i) => i.category?.type !== "income")
-    .reduce((sum, i) => sum + i.actual_amount, 0)
-
   const availableBalance = totalIncome - totalExpenses + budget.carryover_amount
 
-  const budgetedIncome = items
-    .filter((i) => i.category?.type === "income")
-    .reduce((sum, i) => sum + i.budgeted_amount, 0)
-
-  const budgetedExpenses = items
-    .filter((i) => i.category?.type !== "income")
-    .reduce((sum, i) => sum + i.budgeted_amount, 0)
-
-  // ------------------------------------------------------------------
-  // Pie chart data — actual spending grouped by category type (non-income)
-  // ------------------------------------------------------------------
-
-  const pieData = EXPENSE_TYPES.map((type) => {
-    const total = items
-      .filter((i) => i.category?.type === type)
-      .reduce((sum, i) => sum + i.actual_amount, 0)
-    return { name: t(`categories.types.${type}`), value: total, type }
-  }).filter((d) => d.value > 0)
-
-  // ------------------------------------------------------------------
-  // Category progress rows — non-income types with at least one item
-  // ------------------------------------------------------------------
-
-  const progressGroups = EXPENSE_TYPES.map((type) => {
-    const groupItems = items.filter((i) => i.category?.type === type)
-    if (groupItems.length === 0) return null
-
-    const budgeted = groupItems.reduce((sum, i) => sum + i.budgeted_amount, 0)
-    const actual = groupItems.reduce((sum, i) => sum + i.actual_amount, 0)
-    const pct = budgeted > 0 ? Math.round((actual / budgeted) * 100) : 0
-    const overBudget = actual > budgeted
-
-    return { type, budgeted, actual, pct, overBudget }
-  }).filter(Boolean)
-
   return (
     <div className="space-y-6">
-      {/* Quick Add button */}
-      <div className="flex justify-end">
-        <QuickAddPicker budgetId={budgetId} />
-      </div>
-
       {/* Summary cards */}
       <SummaryStrip
         income={{
@@ -127,123 +143,52 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
         t={t}
       />
 
-      {/* Expense breakdown chart + category progress */}
-      <div className="grid gap-6 lg:grid-cols-2">
-        {/* Pie chart */}
-        {pieData.length > 0 && (
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">
-                {t("dashboard.expenseBreakdown")}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveContainer width="100%" height={240}>
-                <PieChart>
-                  <Pie
-                    data={pieData}
-                    dataKey="value"
-                    nameKey="name"
-                    cx="50%"
-                    cy="50%"
-                    outerRadius={90}
-                    innerRadius={48}
-                  >
-                    {pieData.map((entry) => (
-                      <Cell
-                        key={entry.type}
-                        fill={categoryColors[entry.type]}
-                      />
-                    ))}
-                  </Pie>
-                  <Tooltip
-                    formatter={(value) =>
-                      formatCurrency(Number(value), currency)
-                    }
-                  />
-                </PieChart>
-              </ResponsiveContainer>
+      {/* 3-column chart grid */}
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.expenseDonut")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ExpenseDonutChart
+              data={pieData}
+              totalExpenses={totalExpenses}
+              currency={currency}
+              emptyMessage={t("dashboard.noData")}
+            />
+          </CardContent>
+        </Card>
 
-              {/* Legend */}
-              <ul className="mt-2 space-y-1">
-                {pieData.map((entry) => (
-                  <li key={entry.type} className="flex items-center gap-2 text-sm">
-                    <span
-                      className="inline-block size-3 shrink-0 rounded-full"
-                      style={{ backgroundColor: categoryColors[entry.type] }}
-                    />
-                    <span className="text-muted-foreground">{entry.name}</span>
-                    <span className="ml-auto tabular-nums font-medium">
-                      {formatCurrency(entry.value, currency)}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-          </Card>
-        )}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.incomeChart")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <IncomeBarChart
+              data={incomeBarData}
+              currency={currency}
+              emptyMessage={t("dashboard.noData")}
+            />
+          </CardContent>
+        </Card>
 
-        {/* Category progress */}
-        {progressGroups.length > 0 && (
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">
-                {t("dashboard.expenseBreakdown")}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ul className="space-y-4">
-                {progressGroups.map((group) => {
-                  if (!group) return null
-                  const barColor = group.overBudget
-                    ? "bg-over-budget"
-                    : "bg-on-budget"
-                  const clampedPct = Math.min(group.pct, 100)
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.spendChart")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <SpendBarChart
+              data={spendBarData}
+              currency={currency}
+              emptyMessage={t("dashboard.noData")}
+            />
+          </CardContent>
+        </Card>
+      </div>
 
-                  return (
-                    <li key={group.type} className="space-y-1.5">
-                      <div className="flex items-center gap-2">
-                        <span
-                          className="inline-block size-3 shrink-0 rounded-full"
-                          style={{ backgroundColor: categoryColors[group.type] }}
-                        />
-                        <span className="text-sm font-medium">
-                          {t(`categories.types.${group.type}`)}
-                        </span>
-                        <span
-                          className={`ml-auto text-xs tabular-nums ${
-                            group.overBudget
-                              ? "text-over-budget"
-                              : "text-muted-foreground"
-                          }`}
-                        >
-                          {formatCurrency(group.actual, currency)}
-                          {" / "}
-                          {formatCurrency(group.budgeted, currency)}
-                          {" "}
-                          ({group.pct}%)
-                        </span>
-                      </div>
-
-                      {/* Progress bar */}
-                      <div className="h-2 w-full rounded-full bg-muted">
-                        <div
-                          className={`h-2 rounded-full transition-all ${barColor}`}
-                          style={{ width: `${clampedPct}%` }}
-                          role="progressbar"
-                          aria-valuenow={group.pct}
-                          aria-valuemin={0}
-                          aria-valuemax={100}
-                          aria-label={t(`categories.types.${group.type}`)}
-                        />
-                      </div>
-                    </li>
-                  )
-                })}
-              </ul>
-            </CardContent>
-          </Card>
-        )}
+      {/* Quick Add button */}
+      <div className="flex justify-end">
+        <QuickAddPicker budgetId={budgetId} />
       </div>
     </div>
   )
@@ -255,36 +200,60 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
 
 export default function DashboardPage() {
   const { t } = useTranslation()
-  const { budgets, loading } = useBudgets()
+  const { month } = useMonthParam()
+  const { budgets, loading, createBudget, generateFromTemplate } = useBudgets()
 
-  // Find budget whose start_date falls in the current calendar month
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = now.getMonth() + 1
-  const monthPrefix = currentMonthStart(year, month).slice(0, 7) // "YYYY-MM"
-
-  const currentBudget = budgets.find((b) =>
-    b.start_date.startsWith(monthPrefix)
+  const availableMonths = useMemo(
+    () => budgets.map((b) => b.start_date.slice(0, 7)),
+    [budgets]
   )
 
-  if (loading) return (
-    <PageShell title={t("dashboard.title")}>
-      <DashboardSkeleton />
-    </PageShell>
+  const currentBudget = useMemo(
+    () => budgets.find((b) => b.start_date.startsWith(month)),
+    [budgets, month]
   )
 
+  const [parsedYear, parsedMonth] = month.split("-").map(Number)
+
   return (
-    <PageShell title={t("dashboard.title")}>
-      {!currentBudget ? (
-        /* No budget for this month */
+    <PageShell
+      title={t("dashboard.title")}
+      action={<MonthNavigator availableMonths={availableMonths} t={t} />}
+    >
+      {loading ? (
+        <DashboardSkeleton />
+      ) : !currentBudget ? (
+        /* No budget for the selected month */
         <div className="flex flex-col items-center gap-4 py-20 text-center">
-          <p className="text-muted-foreground">{t("dashboard.noBudget")}</p>
-          <Link
-            to="/budgets"
-            className="text-sm underline underline-offset-4 hover:text-foreground"
-          >
-            {t("budgets.newBudget")}
-          </Link>
+          <p className="text-muted-foreground">{t("dashboard.noBudgetForMonth")}</p>
+          <div className="flex gap-3">
+            <Button
+              variant="default"
+              onClick={() =>
+                createBudget.mutate({
+                  month: parsedMonth,
+                  year: parsedYear,
+                  currency: "EUR",
+                })
+              }
+              disabled={createBudget.isPending}
+            >
+              {t("dashboard.createBudget")}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() =>
+                generateFromTemplate.mutate({
+                  month: parsedMonth,
+                  year: parsedYear,
+                  currency: "EUR",
+                })
+              }
+              disabled={generateFromTemplate.isPending}
+            >
+              {t("dashboard.generateFromTemplate")}
+            </Button>
+          </div>
         </div>
       ) : (
         <DashboardContent budgetId={currentBudget.id} />