Merge first: Wrap report tables on phones and finish the mobile-table follow-ups

backend/src/budgets/budget-health-reports.service.spec.ts

@@ -350,8 +350,12 @@ describe("BudgetHealthReportsService", () => {
       );
 
       expect(result).toHaveLength(2);
-      expect(result[0].month).toContain("Jan");
-      expect(result[1].month).toContain("Feb");
+      // Structure, not a label: a `Jan 2026` from the server was English on
+      // every locale and sorted alphabetically at the client. `YYYY-MM` also
+      // sorts chronologically as a string, which is what the two reports'
+      // month columns now order on.
+      expect(result[0].monthKey).toBe("2026-01");
+      expect(result[1].monthKey).toBe("2026-02");
       // First period was under, second was over -> first should be higher
       expect(result[0].score).toBeGreaterThan(result[1].score);
       expect(["Excellent", "Good", "Needs Attention", "Off Track"]).toContain(
@@ -434,5 +438,40 @@ describe("BudgetHealthReportsService", () => {
         savingsRate: 0,
       });
     });
+
+    /**
+     * The month was a server-rendered `Mmm YYYY` label and nothing in this
+     * suite looked at it, so shipping English months to 22 locales -- and a
+     * client-side sort that put Apr before Jan -- was invisible here. These
+     * assertions are deliberately clock-free: they check the SHAPE and the
+     * consecutiveness of the keys, both of which a label fails, rather than
+     * naming today's months.
+     */
+    it("keys each month structurally and in calendar order", async () => {
+      const result = await service.getSavingsRate("user-1", "budget-1", 6);
+
+      const keys = result.map((point) => point.monthKey);
+      for (const key of keys) {
+        expect(key).toMatch(/^\d{4}-(0[1-9]|1[0-2])$/);
+      }
+
+      // `YYYY-MM` sorts chronologically as a plain string, which is what the
+      // report's month column now orders on; `Apr 2026` does not.
+      expect([...keys].sort()).toEqual(keys);
+
+      // Oldest first, one calendar month apart -- so the series really is the
+      // requested window and not six renderings of one label.
+      const asMonthNumber = (key: string) => {
+        const [year, month] = key.split("-").map(Number);
+        return year * 12 + month;
+      };
+      for (let i = 1; i < keys.length; i++) {
+        expect(asMonthNumber(keys[i]) - asMonthNumber(keys[i - 1])).toBe(1);
+      }
+
+      // The old label field is gone rather than kept as an alias: two names for
+      // one value is how a consumer goes on reading the English one.
+      expect(result[0]).not.toHaveProperty("month");
+    });
   });
 });

backend/src/budgets/budget-health-reports.service.ts

@@ -9,29 +9,14 @@ import { BudgetPeriod, PeriodStatus } from "./entities/budget-period.entity";
 import { Transaction } from "../transactions/entities/transaction.entity";
 import { TransactionSplit } from "../transactions/entities/transaction-split.entity";
 import { BudgetsService } from "./budgets.service";
-import { getMonthEndYMD } from "../common/date-utils";
+import { formatMonthKey, getMonthEndYMD } from "../common/date-utils";
 import {
   HealthScoreResult,
   HealthScoreHistoryPoint,
   SavingsRatePoint,
 } from "./budget-reports.service";
 import { roundMoney, roundToDecimals } from "../common/round.util";
 
-const MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
-
 @Injectable()
 export class BudgetHealthReportsService {
   private readonly logger = new Logger(BudgetHealthReportsService.name);
@@ -208,7 +193,7 @@ export class BudgetHealthReportsService {
       const score = Math.min(100, Math.max(0, Math.round(rawScore)));
 
       result.push({
-        month: this.formatPeriodMonth(period.periodStart),
+        monthKey: this.formatPeriodMonthKey(period.periodStart),
         score,
         label: this.getScoreLabel(score),
       });
@@ -439,8 +424,7 @@ export class BudgetHealthReportsService {
       const d = new Date(today.getFullYear(), today.getMonth() - i, 1);
       const year = d.getFullYear();
       const month = d.getMonth();
-      const monthKey = `${year}-${String(month + 1).padStart(2, "0")}`;
-      const monthLabel = `${MONTH_NAMES[month].substring(0, 3)} ${year}`;
+      const monthKey = formatMonthKey(year, month + 1);
 
       const income = incomeByMonth.get(monthKey) || 0;
       const expenses = expenseByMonth.get(monthKey) || 0;
@@ -449,7 +433,7 @@ export class BudgetHealthReportsService {
         income > 0 ? roundToDecimals((savings / income) * 100, 2) : 0;
 
       result.push({
-        month: monthLabel,
+        monthKey,
         income: roundMoney(income),
         expenses: roundMoney(expenses),
         savings: roundMoney(savings),
@@ -546,10 +530,10 @@ export class BudgetHealthReportsService {
     return "Off Track";
   }
 
-  private formatPeriodMonth(periodStart: string): string {
+  private formatPeriodMonthKey(periodStart: string): string {
     const parts = periodStart.split("-");
     const year = parseInt(parts[0], 10);
     const month = parseInt(parts[1], 10);
-    return `${MONTH_NAMES[month - 1].substring(0, 3)} ${year}`;
+    return formatMonthKey(year, month);
   }
 }

backend/src/budgets/budget-reports.service.spec.ts

@@ -305,11 +305,11 @@ describe("BudgetReportsService", () => {
       const result = await service.getTrend("user-1", "budget-1", 6);
 
       expect(result).toHaveLength(2);
-      expect(result[0].month).toBe("Dec 2025");
+      expect(result[0].monthKey).toBe("2025-12");
       expect(result[0].budgeted).toBe(800);
       expect(result[0].actual).toBe(750);
       expect(result[0].variance).toBe(-50);
-      expect(result[1].month).toBe("Jan 2026");
+      expect(result[1].monthKey).toBe("2026-01");
       expect(result[1].actual).toBe(820);
       expect(result[1].variance).toBe(20);
     });
@@ -353,7 +353,7 @@ describe("BudgetReportsService", () => {
       const result = await service.getTrend("user-1", "budget-1", 6);
 
       expect(result).toHaveLength(2);
-      expect(result[1].month).toBe("Feb 2026");
+      expect(result[1].monthKey).toBe("2026-02");
       expect(result[1].actual).toBe(450);
       expect(result[1].budgeted).toBe(800);
     });
@@ -366,6 +366,9 @@ describe("BudgetReportsService", () => {
 
       expect(result).toHaveLength(3);
       expect(budgetsService.findOne).toHaveBeenCalledWith("user-1", "budget-1");
+      expect(
+        result.every((point) => /^\d{4}-\d{2}$/.test(point.monthKey)),
+      ).toBe(true);
     });
 
     it("should return empty array when no categories and no periods", async () => {
@@ -438,6 +441,7 @@ describe("BudgetReportsService", () => {
       expect(result[0].categoryId).toBe("cat-1");
       expect(result[0].categoryName).toBe("Groceries");
       expect(result[0].data).toHaveLength(1);
+      expect(result[0].data[0].monthKey).toBe("2026-01");
       expect(result[0].data[0].budgeted).toBe(500);
       expect(result[0].data[0].actual).toBe(420);
       expect(result[0].data[0].variance).toBe(-80);
@@ -1246,7 +1250,7 @@ describe("BudgetReportsService", () => {
       );
 
       expect(result).toHaveLength(1);
-      expect(result[0].month).toBe("Jan 2026");
+      expect(result[0].monthKey).toBe("2026-01");
       expect(result[0].score).toBeGreaterThanOrEqual(0);
       expect(result[0].score).toBeLessThanOrEqual(100);
       expect(result[0].label).toBeDefined();
@@ -1684,8 +1688,8 @@ describe("BudgetReportsService", () => {
       );
 
       expect(result).toHaveLength(2);
-      expect(result[0].month).toBe("Dec 2025");
-      expect(result[1].month).toBe("Jun 2026");
+      expect(result[0].monthKey).toBe("2025-12");
+      expect(result[1].monthKey).toBe("2026-06");
     });
 
     it("should return correct labels for different score ranges", async () => {
@@ -1829,8 +1833,8 @@ describe("BudgetReportsService", () => {
       );
 
       expect(result).toHaveLength(2);
-      expect(result[0].month).toBe("Jan 2026");
-      expect(result[1].month).toBe("Feb 2026");
+      expect(result[0].monthKey).toBe("2026-01");
+      expect(result[1].monthKey).toBe("2026-02");
       // First period under budget, second over budget
       expect(result[0].score).toBeGreaterThan(result[1].score);
     });

backend/src/budgets/budget-reports.service.ts

@@ -10,15 +10,15 @@ import {
 } from "./budget-date.utils";
 
 export interface BudgetTrendPoint {
-  month: string;
+  monthKey: string;
   budgeted: number;
   actual: number;
   variance: number;
   percentUsed: number;
 }
 
 export interface CategoryTrendPoint {
-  month: string;
+  monthKey: string;
   categoryId: string;
   categoryName: string;
   budgeted: number;
@@ -31,7 +31,7 @@ export interface CategoryTrendSeries {
   categoryId: string;
   categoryName: string;
   data: Array<{
-    month: string;
+    monthKey: string;
     budgeted: number;
     actual: number;
     variance: number;
@@ -86,15 +86,22 @@ export interface FlexGroupStatusResult {
 }
 
 export interface SavingsRatePoint {
-  month: string;
+  /**
+   * The month as structure (`YYYY-MM`), not as a label. A server-formatted
+   * `Mmm YYYY` shipped English to every locale and, being a label, sorted
+   * alphabetically at the client -- Apr, Aug, Dec, Feb... The client renders
+   * this through its own date preference and orders on the key.
+   */
+  monthKey: string;
   income: number;
   expenses: number;
   savings: number;
   savingsRate: number;
 }
 
 export interface HealthScoreHistoryPoint {
-  month: string;
+  /** `YYYY-MM` -- see `SavingsRatePoint.monthKey`. */
+  monthKey: string;
   score: number;
   label: string;
 }

backend/src/budgets/budget-trend-reports.service.spec.ts

@@ -312,11 +312,11 @@ describe("BudgetTrendReportsService", () => {
       const result = await service.getTrend("user-1", "budget-1", 6);
 
       expect(result).toHaveLength(2);
-      expect(result[0].month).toBe("Dec 2025");
+      expect(result[0].monthKey).toBe("2025-12");
       expect(result[0].budgeted).toBe(800);
       expect(result[0].actual).toBe(750);
       expect(result[0].variance).toBe(-50);
-      expect(result[1].month).toBe("Jan 2026");
+      expect(result[1].monthKey).toBe("2026-01");
       expect(result[1].actual).toBe(820);
       expect(result[1].variance).toBe(20);
     });
@@ -360,7 +360,7 @@ describe("BudgetTrendReportsService", () => {
       const result = await service.getTrend("user-1", "budget-1", 6);
 
       expect(result).toHaveLength(2);
-      expect(result[1].month).toBe("Feb 2026");
+      expect(result[1].monthKey).toBe("2026-02");
       expect(result[1].actual).toBe(450);
       expect(result[1].budgeted).toBe(800);
     });
@@ -404,6 +404,9 @@ describe("BudgetTrendReportsService", () => {
 
       expect(result).toHaveLength(3);
       expect(budgetsService.findOne).toHaveBeenCalledWith("user-1", "budget-1");
+      expect(
+        result.every((point) => /^\d{4}-\d{2}$/.test(point.monthKey)),
+      ).toBe(true);
     });
 
     it("should return empty when no categories and no transfers in live mode", async () => {
@@ -743,6 +746,7 @@ describe("BudgetTrendReportsService", () => {
       expect(result).toHaveLength(1);
       expect(result[0].categoryId).toBe("cat-1");
       expect(result[0].categoryName).toBe("Groceries");
+      expect(result[0].data[0].monthKey).toBe("2026-01");
       expect(result[0].data[0].budgeted).toBe(500);
       expect(result[0].data[0].actual).toBe(420);
     });
@@ -975,6 +979,7 @@ describe("BudgetTrendReportsService", () => {
 
       // Current month for cat-1: 350 + 50 = 400
       const cat1CurrentMonth = cat1!.data[cat1!.data.length - 1];
+      expect(cat1CurrentMonth.monthKey).toBe(monthKey);
       expect(cat1CurrentMonth.actual).toBe(400);
       expect(cat1CurrentMonth.budgeted).toBe(500);
       expect(cat1CurrentMonth.variance).toBe(-100);