fix: remove duplicated px-3 class and improve readability (#29)

Clean up the sticky category cell className: remove the duplicated
px-3 for top-level parents and break the long ternary into readable
multi-line format.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.fr.md

@@ -5,6 +5,11 @@
 ### Ajouté
 - Tableau de budget : colonne du total de l'année précédente affichée comme première colonne de données pour servir de référence (#16)
 
+### Modifié
+- Budget vs Réel : la colonne des catégories reste désormais fixe lors du défilement horizontal (#29)
+- Budget vs Réel : titre changé pour « Budget vs Réel pour le mois de [mois] » avec un menu déroulant pour sélectionner le mois (#29)
+- Budget vs Réel : le mois par défaut est maintenant le dernier mois complété au lieu du mois courant (#29)
+
 ## [0.6.3]
 
 ### Ajouté

CHANGELOG.md

@@ -5,6 +5,11 @@
 ### Added
 - Budget table: previous year total column displayed as first data column for baseline reference (#16)
 
+### Changed
+- Budget vs Actual: category column now stays fixed when scrolling horizontally (#29)
+- Budget vs Actual: title changed to "Budget vs Réel pour le mois de [month]" with a dropdown month selector (#29)
+- Budget vs Actual: default month is now the last completed month instead of current month (#29)
+
 ## [0.6.3]
 
 ### Added

src/components/reports/BudgetVsActualTable.tsx

@@ -151,7 +151,7 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
       <table className="w-full text-sm">
         <thead className="sticky top-0 z-20">
           <tr className="border-b border-[var(--border)] bg-[var(--card)]">
-            <th rowSpan={2} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom bg-[var(--card)]">
+            <th rowSpan={2} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom sticky left-0 bg-[var(--card)] z-30 min-w-[180px]">
               {t("budget.category")}
             </th>
             <th colSpan={4} className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
@@ -206,8 +206,8 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
             const sectionYtdPct = sectionTotals.ytdBudget !== 0 ? sectionTotals.ytdVariation / Math.abs(sectionTotals.ytdBudget) : null;
             return (
             <Fragment key={section.type}>
-              <tr className="bg-[var(--muted)]/50">
+              <tr className="bg-[var(--muted)]">
-                <td colSpan={9} className="px-3 py-1.5 font-semibold text-[var(--muted-foreground)] uppercase text-xs tracking-wider">
+                <td colSpan={9} className="px-3 py-1.5 font-semibold text-[var(--muted-foreground)] uppercase text-xs tracking-wider sticky left-0 bg-[var(--muted)]">
                   {section.label}
                 </td>
               </tr>
@@ -220,11 +220,17 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
                   <tr
                     key={`${row.category_id}-${row.is_parent}-${depth}`}
                     className={`border-b border-[var(--border)]/50 ${
-                      isParent && !isIntermediateParent ? "bg-[var(--muted)]/30 font-semibold" :
+                      isParent && !isIntermediateParent ? "bg-[color-mix(in_srgb,var(--muted)_30%,var(--card))] font-semibold" :
-                      isIntermediateParent ? "bg-[var(--muted)]/15 font-medium" : ""
+                      isIntermediateParent ? "bg-[color-mix(in_srgb,var(--muted)_15%,var(--card))] font-medium" : ""
                     }`}
                   >
-                    <td className={`py-1.5 ${isParent && !isIntermediateParent ? "px-3" : paddingClass}`}>
+                    <td className={`py-1.5 sticky left-0 z-10 ${
+                      isParent && !isIntermediateParent
+                        ? "px-3 bg-[color-mix(in_srgb,var(--muted)_30%,var(--card))]"
+                        : isIntermediateParent
+                          ? `${paddingClass} bg-[color-mix(in_srgb,var(--muted)_15%,var(--card))]`
+                          : `${paddingClass} bg-[var(--card)]`
+                    }`}>
                       <span className="flex items-center gap-2">
                         <span
                           className="w-2.5 h-2.5 rounded-full shrink-0"
@@ -256,8 +262,8 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
                   </tr>
                 );
               })}
-              <tr className="border-b border-[var(--border)] bg-[var(--muted)]/40 font-semibold text-sm">
+              <tr className="border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] font-semibold text-sm">
-                <td className="px-3 py-2.5">{t(typeTotalKeys[section.type])}</td>
+                <td className="px-3 py-2.5 sticky left-0 bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] z-10">{t(typeTotalKeys[section.type])}</td>
                 <td className="text-right px-3 py-2.5 border-l border-[var(--border)]/50">
                   {cadFormatter(sectionTotals.monthActual)}
                 </td>
@@ -283,8 +289,8 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
             );
           })}
           {/* Grand totals */}
-          <tr className="border-t-2 border-[var(--border)] font-bold text-sm bg-[var(--muted)]/20">
+          <tr className="border-t-2 border-[var(--border)] font-bold text-sm bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))]">
-            <td className="px-3 py-3">{t("common.total")}</td>
+            <td className="px-3 py-3 sticky left-0 bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))] z-10">{t("common.total")}</td>
             <td className="text-right px-3 py-3 border-l border-[var(--border)]/50">
               {cadFormatter(totals.monthActual)}
             </td>

src/hooks/useReports.ts

@@ -59,8 +59,8 @@ const initialState: ReportsState = {
   monthlyTrends: [],
   categorySpending: [],
   categoryOverTime: { categories: [], data: [], colors: {}, categoryIds: {} },
-  budgetYear: now.getFullYear(),
+  budgetYear: now.getMonth() === 0 ? now.getFullYear() - 1 : now.getFullYear(),
-  budgetMonth: now.getMonth() + 1,
+  budgetMonth: now.getMonth() === 0 ? 12 : now.getMonth(),
   budgetVsActual: [],
   pivotConfig: { rows: [], columns: [], filters: {}, values: [] },
   pivotResult: { rows: [], columnValues: [], dimensionLabels: {} },
@@ -224,18 +224,9 @@ export function useReports() {
     dispatch({ type: "SET_PERIOD", payload: period });
   }, []);
 
-  const navigateBudgetMonth = useCallback((delta: -1 | 1) => {
+  const setBudgetMonth = useCallback((year: number, month: number) => {
-    let newMonth = state.budgetMonth + delta;
+    dispatch({ type: "SET_BUDGET_MONTH", payload: { year, month } });
-    let newYear = state.budgetYear;
+  }, []);
-    if (newMonth < 1) {
-      newMonth = 12;
-      newYear -= 1;
-    } else if (newMonth > 12) {
-      newMonth = 1;
-      newYear += 1;
-    }
-    dispatch({ type: "SET_BUDGET_MONTH", payload: { year: newYear, month: newMonth } });
-  }, [state.budgetYear, state.budgetMonth]);
 
   const setCustomDates = useCallback((dateFrom: string, dateTo: string) => {
     dispatch({ type: "SET_CUSTOM_DATES", payload: { dateFrom, dateTo } });
@@ -249,5 +240,5 @@ export function useReports() {
     dispatch({ type: "SET_SOURCE_ID", payload: id });
   }, []);
 
-  return { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig, setSourceId };
+  return { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setPivotConfig, setSourceId };
 }

src/i18n/locales/en.json

@@ -377,7 +377,8 @@
       "ytd": "Year-to-Date",
       "dollarVar": "$ Var",
       "pctVar": "% Var",
-      "noData": "No budget or transaction data for this period."
+      "noData": "No budget or transaction data for this period.",
+      "titlePrefix": "Budget vs Actual for"
     },
     "dynamic": "Dynamic Report",
     "export": "Export",

src/i18n/locales/fr.json

@@ -377,7 +377,8 @@
       "ytd": "Cumul annuel",
       "dollarVar": "$ \u00c9cart",
       "pctVar": "% \u00c9cart",
-      "noData": "Aucune donn\u00e9e de budget ou de transaction pour cette p\u00e9riode."
+      "noData": "Aucune donn\u00e9e de budget ou de transaction pour cette p\u00e9riode.",
+      "titlePrefix": "Budget vs Réel pour le mois de"
     },
     "dynamic": "Rapport dynamique",
     "export": "Exporter",

src/pages/ReportsPage.tsx

@@ -6,7 +6,6 @@ import { PageHelp } from "../components/shared/PageHelp";
 import type { ReportTab, CategoryBreakdownItem, DashboardPeriod, ImportSource } from "../shared/types";
 import { getAllSources } from "../services/importSourceService";
 import PeriodSelector from "../components/dashboard/PeriodSelector";
-import MonthNavigator from "../components/budget/MonthNavigator";
 import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
 import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
 import CategoryBarChart from "../components/reports/CategoryBarChart";
@@ -48,8 +47,8 @@ function computeDateRange(
 }
 
 export default function ReportsPage() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
-  const { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig, setSourceId } = useReports();
+  const { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setPivotConfig, setSourceId } = useReports();
   const [sources, setSources] = useState<ImportSource[]>([]);
 
   useEffect(() => {
@@ -93,6 +92,19 @@ export default function ReportsPage() {
     return [];
   }, [state.tab, state.categorySpending, state.categoryOverTime]);
 
+  const monthOptions = useMemo(() => {
+    const now = new Date();
+    const currentMonth = now.getMonth();
+    const currentYear = now.getFullYear();
+    return Array.from({ length: 24 }, (_, i) => {
+      const d = new Date(currentYear, currentMonth - i, 1);
+      const y = d.getFullYear();
+      const m = d.getMonth() + 1;
+      const label = new Intl.DateTimeFormat(i18n.language, { month: "long", year: "numeric" }).format(d);
+      return { key: `${y}-${m}`, value: `${y}-${m}`, label: label.charAt(0).toUpperCase() + label.slice(1) };
+    });
+  }, [i18n.language]);
+
   const hasCategories = ["byCategory", "overTime"].includes(state.tab) && filterCategories.length > 0;
   const showFilterPanel = hasCategories || (state.tab === "trends" && sources.length > 1);
 
@@ -100,16 +112,30 @@ export default function ReportsPage() {
     <div className={state.isLoading ? "opacity-50 pointer-events-none" : ""}>
       <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
         <div className="flex items-center gap-3">
-          <h1 className="text-2xl font-bold">{t("reports.title")}</h1>
+          {state.tab === "budgetVsActual" ? (
+            <h1 className="text-2xl font-bold flex items-center gap-2 flex-wrap">
+              {t("reports.bva.titlePrefix")}
+              <select
+                value={`${state.budgetYear}-${state.budgetMonth}`}
+                onChange={(e) => {
+                  const [y, m] = e.target.value.split("-").map(Number);
+                  setBudgetMonth(y, m);
+                }}
+                className="text-2xl font-bold bg-[var(--card)] border border-[var(--border)] rounded-lg px-3 py-1 cursor-pointer hover:bg-[var(--muted)] transition-colors"
+              >
+                {monthOptions.map((opt) => (
+                  <option key={opt.key} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </h1>
+          ) : (
+            <h1 className="text-2xl font-bold">{t("reports.title")}</h1>
+          )}
           <PageHelp helpKey="reports" />
         </div>
-        {state.tab === "budgetVsActual" ? (
+        {state.tab !== "budgetVsActual" && (
-          <MonthNavigator
-            year={state.budgetYear}
-            month={state.budgetMonth}
-            onNavigate={navigateBudgetMonth}
-          />
-        ) : (
           <PeriodSelector
             value={state.period}
             onChange={setPeriod}