feat(reports/cartes): new KPI dashboard sub-report with sparklines, top movers, budget adherence and seasonality (#97)

New /reports/cartes page surfaces a dashboard-style snapshot of the
reference month:

- 4 KPI cards (income / expenses / net / savings rate) showing MoM and
  YoY deltas simultaneously, each with a 13-month sparkline highlighting
  the reference month
- 12-month income vs expenses overlay chart (bars + net balance line)
- Top 5 category increases + top 5 decreases MoM, clickable through to
  the category zoom report
- Budget adherence card: on-target count + 3 worst overruns with
  progress bars
- Seasonality card: reference month vs same calendar month averaged
  over the two previous years, with deviation indicator

All data is fetched in a single getCartesSnapshot() service call that
runs four queries concurrently (25-month flow, MoM category deltas,
budget-vs-actual, seasonality). Missing months are filled with zeroes
in the sparklines but preserved as null in the MoM/YoY deltas so the UI
can distinguish "no data" from "zero spend".

- Exported pure helpers: shiftMonth, defaultCartesReferencePeriod
- 13 vitest cases covering zero data, MoM/YoY computation, January
  wrap-around, missing-month handling, division by zero for the
  savings rate, seasonality with and without history, top mover sign
  splitting and 5-cap

Note: src/components/reports/CompareReferenceMonthPicker.tsx is a
temporary duplicate — the canonical copy lives on the issue-96 branch
(refactor: compare report). Once both branches merge the content is
identical and git will dedupe. Keeping the local copy here means the
Cartes branch builds cleanly on main without depending on #96.

Closes #97

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CHANGELOG.fr.md

@@ -5,6 +5,9 @@
 ### Ajouté
 - **Rapport Cartes** (`/reports/cartes`) : nouveau sous-rapport de type tableau de bord dans le hub Rapports. Combine quatre cartes KPI (Revenus, Dépenses, Solde net, Taux d'épargne) affichant les deltas MoM et YoY simultanément avec une sparkline 13 mois dont le mois de référence est mis en évidence, un graphique overlay revenus vs dépenses sur 12 mois (barres + ligne de solde net), le top 5 des catégories en hausse et en baisse par rapport au mois précédent, une carte d'adhérence au budget (N/M dans la cible plus les 3 pires dépassements avec barres de progression) et une carte de saisonnalité qui compare le mois de référence à la moyenne du même mois sur les deux années précédentes. Toutes les données proviennent d'un seul appel `getCartesSnapshot()` qui exécute ses requêtes en parallèle (#97)
 
+### Modifié
+- **Rapport Comparables** (`/reports/compare`) : passage de trois onglets (MoM / YoY / Budget) à deux modes (Réel vs réel / Réel vs budget). La vue « Réel vs réel » affiche désormais un sélecteur de mois de référence en en-tête (défaut : mois précédent), un sous-toggle MoM ↔ YoY, et un graphique en barres groupées côte-à-côte (deux barres par catégorie : période de référence vs période comparée). Le `PeriodSelector` d'URL reste synchronisé avec le sélecteur de mois (#96)
+
 ## [0.8.0] - 2026-04-14
 
 ### Ajouté

CHANGELOG.md

@@ -5,6 +5,9 @@
 ### Added
 - **Cartes report** (`/reports/cartes`): new dashboard-style sub-report in the Reports hub. Combines four KPI cards (income, expenses, net balance, savings rate) showing MoM and YoY deltas simultaneously with a 13-month sparkline highlighting the reference month, a 12-month income vs. expenses overlay chart (bars + net balance line), top 5 category increases and top 5 decreases vs. the previous month, a budget-adherence card (N/M on-target plus the three worst overruns with progress bars), and a seasonality card that compares the reference month against the same calendar month from the two previous years. All data comes from a single `getCartesSnapshot()` service call that runs its queries concurrently (#97)
 
+### Changed
+- **Compare report** (`/reports/compare`): reduced from three tabs (MoM / YoY / Budget) to two modes (Actual vs. actual / Actual vs. budget). The actual-vs-actual view now has an explicit reference-month dropdown in the header (defaults to the previous month), a MoM ↔ YoY sub-toggle, and a grouped side-by-side bar chart (two bars per category: reference period vs. comparison period). The URL `PeriodSelector` stays in sync with the reference month picker (#96)
+
 ## [0.8.0] - 2026-04-14
 
 ### Added

docs/architecture.md

@@ -149,7 +149,7 @@ Chaque hook encapsule la logique d'état via `useReducer` :
 | `useReportsPeriod` | Période de reporting synchronisée via query string (bookmarkable) |
 | `useHighlights` | Panneau de faits saillants du hub rapports |
 | `useTrends` | Rapport Tendances (sous-vue flux global / par catégorie) |
-| `useCompare` | Rapport Comparables (mode MoM / YoY / budget) |
+| `useCompare` | Rapport Comparables (mode `actual`/`budget`, sous-toggle MoM ↔ YoY, mois de référence explicite avec wrap-around janvier) |
 | `useCategoryZoom` | Rapport Zoom catégorie avec rollup sous-catégories |
 | `useCartes` | Rapport Cartes (snapshot KPI + sparklines + top movers + budget + saisonnalité via `getCartesSnapshot`) |
 | `useDataExport` | Export de données |

src/components/reports/CompareModeTabs.tsx

@@ -10,8 +10,7 @@ export default function CompareModeTabs({ value, onChange }: CompareModeTabsProp
   const { t } = useTranslation();
 
   const modes: { id: CompareMode; labelKey: string }[] = [
-    { id: "mom", labelKey: "reports.compare.modeMoM" },
+    { id: "actual", labelKey: "reports.compare.modeActual" },
-    { id: "yoy", labelKey: "reports.compare.modeYoY" },
     { id: "budget", labelKey: "reports.compare.modeBudget" },
   ];
 

src/components/reports/ComparePeriodChart.tsx

@@ -4,16 +4,17 @@ import {
   Bar,
   XAxis,
   YAxis,
-  Cell,
-  ReferenceLine,
   Tooltip,
+  Legend,
   ResponsiveContainer,
+  CartesianGrid,
 } from "recharts";
 import type { CategoryDelta } from "../../shared/types";
-import { ChartPatternDefs, getPatternFill } from "../../utils/chartPatterns";
 
 export interface ComparePeriodChartProps {
   rows: CategoryDelta[];
+  previousLabel: string;
+  currentLabel: string;
 }
 
 function formatCurrency(amount: number, language: string): string {
@@ -24,7 +25,11 @@ function formatCurrency(amount: number, language: string): string {
   }).format(amount);
 }
 
-export default function ComparePeriodChart({ rows }: ComparePeriodChartProps) {
+export default function ComparePeriodChart({
+  rows,
+  previousLabel,
+  currentLabel,
+}: ComparePeriodChartProps) {
   const { t, i18n } = useTranslation();
 
   if (rows.length === 0) {
@@ -35,31 +40,44 @@ export default function ComparePeriodChart({ rows }: ComparePeriodChartProps) {
     );
   }
 
-  const chartData = rows
+  // Sort by current-period amount (largest spending first) so the user's eye
-    .map((r, i) => ({
+  // lands on the biggest categories, then reverse so the biggest appears at
+  // the top of the vertical bar chart.
+  const chartData = [...rows]
+    .sort((a, b) => b.currentAmount - a.currentAmount)
+    .map((r) => ({
       name: r.categoryName,
+      previousAmount: r.previousAmount,
+      currentAmount: r.currentAmount,
       color: r.categoryColor,
-      delta: r.deltaAbs,
+    }));
-      index: i,
+
-    }))
+  const previousFill = "var(--muted-foreground)";
-    .sort((a, b) => a.delta - b.delta);
+  const currentFill = "var(--primary)";
 
   return (
     <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4">
-      <ResponsiveContainer width="100%" height={Math.max(240, chartData.length * 32 + 40)}>
+      <ResponsiveContainer width="100%" height={Math.max(280, chartData.length * 44 + 60)}>
-        <BarChart data={chartData} layout="vertical" margin={{ top: 10, right: 20, bottom: 10, left: 10 }}>
+        <BarChart
-          <ChartPatternDefs
+          data={chartData}
-            prefix="compare-delta"
+          layout="vertical"
-            categories={chartData.map((d) => ({ color: d.color, index: d.index }))}
+          margin={{ top: 10, right: 24, bottom: 10, left: 10 }}
-          />
+          barCategoryGap="20%"
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
           <XAxis
             type="number"
             tickFormatter={(v) => formatCurrency(v, i18n.language)}
             stroke="var(--muted-foreground)"
             fontSize={11}
           />
-          <YAxis type="category" dataKey="name" width={140} stroke="var(--muted-foreground)" fontSize={11} />
+          <YAxis
-          <ReferenceLine x={0} stroke="var(--border)" />
+            type="category"
+            dataKey="name"
+            width={140}
+            stroke="var(--muted-foreground)"
+            fontSize={11}
+          />
           <Tooltip
             formatter={(value) =>
               typeof value === "number" ? formatCurrency(value, i18n.language) : String(value)
@@ -69,15 +87,23 @@ export default function ComparePeriodChart({ rows }: ComparePeriodChartProps) {
               border: "1px solid var(--border)",
               borderRadius: "0.5rem",
             }}
+            cursor={{ fill: "var(--muted)", fillOpacity: 0.2 }}
           />
-          <Bar dataKey="delta">
+          <Legend
-            {chartData.map((entry) => (
+            wrapperStyle={{ paddingTop: 8, fontSize: 12, color: "var(--muted-foreground)" }}
-              <Cell
+          />
-                key={entry.name}
+          <Bar
-                fill={getPatternFill("compare-delta", entry.index, entry.color)}
+            dataKey="previousAmount"
+            name={previousLabel}
+            fill={previousFill}
+            radius={[0, 4, 4, 0]}
+          />
+          <Bar
+            dataKey="currentAmount"
+            name={currentLabel}
+            fill={currentFill}
+            radius={[0, 4, 4, 0]}
           />
-            ))}
-          </Bar>
         </BarChart>
       </ResponsiveContainer>
     </div>

src/components/reports/CompareSubModeToggle.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import type { CompareSubMode } from "../../hooks/useCompare";
+
+export interface CompareSubModeToggleProps {
+  value: CompareSubMode;
+  onChange: (subMode: CompareSubMode) => void;
+}
+
+export default function CompareSubModeToggle({ value, onChange }: CompareSubModeToggleProps) {
+  const { t } = useTranslation();
+
+  const items: { id: CompareSubMode; labelKey: string }[] = [
+    { id: "mom", labelKey: "reports.compare.subModeMoM" },
+    { id: "yoy", labelKey: "reports.compare.subModeYoY" },
+  ];
+
+  return (
+    <div
+      className="inline-flex rounded-lg border border-[var(--border)] bg-[var(--card)] p-0.5"
+      role="group"
+      aria-label={t("reports.compare.subModeAria")}
+    >
+      {items.map(({ id, labelKey }) => (
+        <button
+          key={id}
+          type="button"
+          onClick={() => onChange(id)}
+          aria-pressed={value === id}
+          className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+            value === id
+              ? "bg-[var(--primary)] text-white"
+              : "text-[var(--foreground)] hover:bg-[var(--muted)]"
+          }`}
+        >
+          {t(labelKey)}
+        </button>
+      ))}
+    </div>
+  );
+}

src/hooks/useCompare.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { previousMonth, defaultReferencePeriod, comparisonMeta } from "./useCompare";
+
+describe("useCompare helpers", () => {
+  describe("previousMonth", () => {
+    it("goes back one month within the same year", () => {
+      expect(previousMonth(2026, 3)).toEqual({ year: 2026, month: 2 });
+      expect(previousMonth(2026, 12)).toEqual({ year: 2026, month: 11 });
+    });
+
+    it("wraps around January to December of previous year", () => {
+      expect(previousMonth(2026, 1)).toEqual({ year: 2025, month: 12 });
+    });
+  });
+
+  describe("defaultReferencePeriod", () => {
+    it("returns the month before the given date", () => {
+      expect(defaultReferencePeriod(new Date(2026, 3, 15))).toEqual({ year: 2026, month: 3 });
+    });
+
+    it("wraps around when today is in January", () => {
+      expect(defaultReferencePeriod(new Date(2026, 0, 10))).toEqual({ year: 2025, month: 12 });
+    });
+
+    it("handles the last day of a month", () => {
+      expect(defaultReferencePeriod(new Date(2026, 6, 31))).toEqual({ year: 2026, month: 6 });
+    });
+  });
+
+  describe("comparisonMeta", () => {
+    it("MoM returns the previous month", () => {
+      expect(comparisonMeta("mom", 2026, 3)).toEqual({ previousYear: 2026, previousMonth: 2 });
+    });
+
+    it("MoM wraps around January", () => {
+      expect(comparisonMeta("mom", 2026, 1)).toEqual({ previousYear: 2025, previousMonth: 12 });
+    });
+
+    it("YoY returns the same month in the previous year", () => {
+      expect(comparisonMeta("yoy", 2026, 3)).toEqual({ previousYear: 2025, previousMonth: 3 });
+    });
+
+    it("YoY for January stays on January of previous year", () => {
+      expect(comparisonMeta("yoy", 2026, 1)).toEqual({ previousYear: 2025, previousMonth: 1 });
+    });
+  });
+});

src/hooks/useCompare.ts

@@ -3,10 +3,12 @@ import type { CategoryDelta } from "../shared/types";
 import { getCompareMonthOverMonth, getCompareYearOverYear } from "../services/reportService";
 import { useReportsPeriod } from "./useReportsPeriod";
 
-export type CompareMode = "mom" | "yoy" | "budget";
+export type CompareMode = "actual" | "budget";
+export type CompareSubMode = "mom" | "yoy";
 
 interface State {
   mode: CompareMode;
+  subMode: CompareSubMode;
   year: number;
   month: number;
   rows: CategoryDelta[];
@@ -16,16 +18,52 @@ interface State {
 
 type Action =
   | { type: "SET_MODE"; payload: CompareMode }
-  | { type: "SET_PERIOD"; payload: { year: number; month: number } }
+  | { type: "SET_SUB_MODE"; payload: CompareSubMode }
+  | { type: "SET_REFERENCE_PERIOD"; payload: { year: number; month: number } }
   | { type: "SET_LOADING"; payload: boolean }
   | { type: "SET_ROWS"; payload: CategoryDelta[] }
   | { type: "SET_ERROR"; payload: string };
 
-const today = new Date();
+/**
+ * Wrap-around helper: returns (year, month) shifted back by one month.
+ * Example: previousMonth(2026, 1) -> { year: 2025, month: 12 }.
+ */
+export function previousMonth(year: number, month: number): { year: number; month: number } {
+  if (month === 1) return { year: year - 1, month: 12 };
+  return { year, month: month - 1 };
+}
+
+/**
+ * Default reference period for the Compare report: the month preceding `today`.
+ * Exported for unit tests.
+ */
+export function defaultReferencePeriod(today: Date = new Date()): { year: number; month: number } {
+  return previousMonth(today.getFullYear(), today.getMonth() + 1);
+}
+
+/**
+ * Returns the comparison meta for a given subMode + reference period.
+ * - MoM: previous month vs current month
+ * - YoY: same month previous year vs current year
+ */
+export function comparisonMeta(
+  subMode: CompareSubMode,
+  year: number,
+  month: number,
+): { previousYear: number; previousMonth: number } {
+  if (subMode === "mom") {
+    const prev = previousMonth(year, month);
+    return { previousYear: prev.year, previousMonth: prev.month };
+  }
+  return { previousYear: year - 1, previousMonth: month };
+}
+
+const defaultRef = defaultReferencePeriod();
 const initialState: State = {
-  mode: "mom",
+  mode: "actual",
-  year: today.getFullYear(),
+  subMode: "mom",
-  month: today.getMonth() + 1,
+  year: defaultRef.year,
+  month: defaultRef.month,
   rows: [],
   isLoading: false,
   error: null,
@@ -35,7 +73,9 @@ function reducer(state: State, action: Action): State {
   switch (action.type) {
     case "SET_MODE":
       return { ...state, mode: action.payload };
-    case "SET_PERIOD":
+    case "SET_SUB_MODE":
+      return { ...state, subMode: action.payload };
+    case "SET_REFERENCE_PERIOD":
       return { ...state, year: action.payload.year, month: action.payload.month };
     case "SET_LOADING":
       return { ...state, isLoading: action.payload };
@@ -53,13 +93,14 @@ export function useCompare() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const fetchIdRef = useRef(0);
 
-  const fetch = useCallback(async (mode: CompareMode, year: number, month: number) => {
+  const fetch = useCallback(
+    async (mode: CompareMode, subMode: CompareSubMode, year: number, month: number) => {
       if (mode === "budget") return; // Budget view uses BudgetVsActualTable directly
       const id = ++fetchIdRef.current;
       dispatch({ type: "SET_LOADING", payload: true });
       try {
         const rows =
-        mode === "mom"
+          subMode === "mom"
             ? await getCompareMonthOverMonth(year, month)
             : await getCompareYearOverYear(year);
         if (id !== fetchIdRef.current) return;
@@ -68,18 +109,22 @@ export function useCompare() {
         if (id !== fetchIdRef.current) return;
         dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
       }
-  }, []);
+    },
+    [],
+  );
 
   useEffect(() => {
-    fetch(state.mode, state.year, state.month);
+    fetch(state.mode, state.subMode, state.year, state.month);
-  }, [fetch, state.mode, state.year, state.month]);
+  }, [fetch, state.mode, state.subMode, state.year, state.month]);
 
-  // When the URL period changes, use the `to` date to infer the target year/month.
+  // When the URL period changes, align the reference month with `to`.
+  // The explicit dropdown remains the primary selector — this effect only
+  // keeps the two in sync when the user navigates via PeriodSelector.
   useEffect(() => {
     const [y, m] = to.split("-").map(Number);
     if (!Number.isFinite(y) || !Number.isFinite(m)) return;
     if (y !== state.year || m !== state.month) {
-      dispatch({ type: "SET_PERIOD", payload: { year: y, month: m } });
+      dispatch({ type: "SET_REFERENCE_PERIOD", payload: { year: y, month: m } });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [to]);
@@ -88,9 +133,13 @@ export function useCompare() {
     dispatch({ type: "SET_MODE", payload: m });
   }, []);
 
-  const setTargetPeriod = useCallback((year: number, month: number) => {
+  const setSubMode = useCallback((s: CompareSubMode) => {
-    dispatch({ type: "SET_PERIOD", payload: { year, month } });
+    dispatch({ type: "SET_SUB_MODE", payload: s });
   }, []);
 
-  return { ...state, setMode, setTargetPeriod, from, to };
+  const setReferencePeriod = useCallback((year: number, month: number) => {
+    dispatch({ type: "SET_REFERENCE_PERIOD", payload: { year, month } });
+  }, []);
+
+  return { ...state, setMode, setSubMode, setReferencePeriod, from, to };
 }

src/i18n/locales/en.json

@@ -395,7 +395,7 @@
       "trends": "Trends",
       "trendsDescription": "Where you're heading over 12 months",
       "compare": "Compare",
-      "compareDescription": "Month, year, and budget comparisons",
+      "compareDescription": "Compare a reference month against previous month, previous year, or budget",
       "categoryZoom": "Category Analysis",
       "categoryZoomDescription": "Zoom in on a single category",
       "cartes": "Cards",
@@ -406,9 +406,11 @@
       "subviewByCategory": "By category"
     },
     "compare": {
-      "modeMoM": "Month vs previous month",
+      "modeActual": "Actual vs actual",
-      "modeYoY": "Year vs previous year",
       "modeBudget": "Actual vs budget",
+      "subModeMoM": "Previous month",
+      "subModeYoY": "Previous year",
+      "subModeAria": "Comparison period",
       "referenceMonth": "Reference month"
     },
     "cartes": {

src/i18n/locales/fr.json

@@ -395,7 +395,7 @@
       "trends": "Tendances",
       "trendsDescription": "Où vous allez sur 12 mois",
       "compare": "Comparables",
-      "compareDescription": "Comparaisons mois, année et budget",
+      "compareDescription": "Comparer un mois de référence au précédent, à l'année passée ou au budget",
       "categoryZoom": "Analyse par catégorie",
       "categoryZoomDescription": "Zoom sur une catégorie",
       "cartes": "Cartes",
@@ -406,9 +406,11 @@
       "subviewByCategory": "Par catégorie"
     },
     "compare": {
-      "modeMoM": "Mois vs mois précédent",
+      "modeActual": "Réel vs réel",
-      "modeYoY": "Année vs année précédente",
       "modeBudget": "Réel vs budget",
+      "subModeMoM": "Mois précédent",
+      "subModeYoY": "Année précédente",
+      "subModeAria": "Période de comparaison",
       "referenceMonth": "Mois de référence"
     },
     "cartes": {

src/pages/ReportsComparePage.tsx

@@ -4,42 +4,53 @@ import { Link } from "react-router-dom";
 import { ArrowLeft } from "lucide-react";
 import PeriodSelector from "../components/dashboard/PeriodSelector";
 import CompareModeTabs from "../components/reports/CompareModeTabs";
+import CompareSubModeToggle from "../components/reports/CompareSubModeToggle";
+import CompareReferenceMonthPicker from "../components/reports/CompareReferenceMonthPicker";
 import ComparePeriodTable from "../components/reports/ComparePeriodTable";
 import ComparePeriodChart from "../components/reports/ComparePeriodChart";
 import CompareBudgetView from "../components/reports/CompareBudgetView";
 import ViewModeToggle, { readViewMode, type ViewMode } from "../components/reports/ViewModeToggle";
-import { useCompare } from "../hooks/useCompare";
+import { useCompare, comparisonMeta } from "../hooks/useCompare";
 import { useReportsPeriod } from "../hooks/useReportsPeriod";
 
 const STORAGE_KEY = "reports-viewmode-compare";
 
-const MONTH_NAMES_EN = [
+function formatMonthLabel(year: number, month: number, language: string): string {
-  "January", "February", "March", "April", "May", "June",
+  const date = new Date(year, month - 1, 1);
-  "July", "August", "September", "October", "November", "December",
+  return new Intl.DateTimeFormat(language === "fr" ? "fr-CA" : "en-CA", {
-];
+    month: "long",
-const MONTH_NAMES_FR = [
+    year: "numeric",
-  "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+  }).format(date);
-  "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre",
-];
-
-function monthName(month: number, language: string): string {
-  return (language === "fr" ? MONTH_NAMES_FR : MONTH_NAMES_EN)[month - 1] ?? String(month);
 }
 
 export default function ReportsComparePage() {
   const { t, i18n } = useTranslation();
   const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
-  const { mode, setMode, year, month, rows, isLoading, error } = useCompare();
+  const {
+    mode,
+    subMode,
+    setMode,
+    setSubMode,
+    setReferencePeriod,
+    year,
+    month,
+    rows,
+    isLoading,
+    error,
+  } = useCompare();
   const [viewMode, setViewMode] = useState<ViewMode>(() => readViewMode(STORAGE_KEY));
 
   const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
 
-  const previousLabel =
+  const { previousYear, previousMonth: prevMonth } = comparisonMeta(subMode, year, month);
-    mode === "mom"
-      ? `${monthName(month === 1 ? 12 : month - 1, i18n.language)} ${month === 1 ? year - 1 : year}`
-      : `${year - 1}`;
   const currentLabel =
-    mode === "mom" ? `${monthName(month, i18n.language)} ${year}` : `${year}`;
+    subMode === "mom" ? formatMonthLabel(year, month, i18n.language) : String(year);
+  const previousLabel =
+    subMode === "mom"
+      ? formatMonthLabel(previousYear, prevMonth, i18n.language)
+      : String(previousYear);
+
+  const showActualControls = mode === "actual";
 
   return (
     <div className={isLoading ? "opacity-60" : ""}>
@@ -54,7 +65,7 @@ export default function ReportsComparePage() {
         <h1 className="text-2xl font-bold">{t("reports.hub.compare")}</h1>
       </div>
 
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 flex-wrap">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4 flex-wrap">
         <PeriodSelector
           value={period}
           onChange={setPeriod}
@@ -64,10 +75,23 @@ export default function ReportsComparePage() {
         />
         <div className="flex gap-2 items-center flex-wrap">
           <CompareModeTabs value={mode} onChange={setMode} />
-          {mode !== "budget" && (
+        </div>
-            <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 flex-wrap">
+        <div className="flex items-center gap-3 flex-wrap">
+          <CompareReferenceMonthPicker
+            year={year}
+            month={month}
+            onChange={setReferencePeriod}
+          />
+          {showActualControls && (
+            <CompareSubModeToggle value={subMode} onChange={setSubMode} />
           )}
         </div>
+        {showActualControls && (
+          <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
+        )}
       </div>
 
       {error && (
@@ -79,7 +103,11 @@ export default function ReportsComparePage() {
       {mode === "budget" ? (
         <CompareBudgetView year={year} month={month} />
       ) : viewMode === "chart" ? (
-        <ComparePeriodChart rows={rows} />
+        <ComparePeriodChart
+          rows={rows}
+          previousLabel={previousLabel}
+          currentLabel={currentLabel}
+        />
       ) : (
         <ComparePeriodTable rows={rows} previousLabel={previousLabel} currentLabel={currentLabel} />
       )}