Merge pull request 'feat: reports hub + highlights panel + detailed highlights page (#71)' (#90) from issue-71-highlights-hub into main

- Transform /reports into a hub: highlights panel + 4 nav cards
- New service: reportService.getHighlights (parameterised SQL, deterministic
  via referenceDate argument for tests, computes current-month balance, YTD,
  12-month sparkline series, top expense movers vs previous month, top recent
  transactions within configurable 30/60/90 day window)
- Extended types: HighlightsData, HighlightMover, MonthBalance
- Wired useHighlights hook with reducer + window-days state
- Hub tiles (flat naming under src/components/reports):
  HubNetBalanceTile, HubTopMoversTile, HubTopTransactionsTile,
  HubHighlightsPanel, HubReportNavCard
- Detailed ReportsHighlightsPage: balance tiles, sortable top movers table,
  diverging bar chart (Recharts + patterns SVG), top transactions list with
  30/60/90 window toggle; ViewModeToggle persistence keyed as
  reports-viewmode-highlights
- New i18n keys: reports.hub.*, reports.highlights.*
- 5 new vitest cases: empty profile, parameterised queries, window sizing,
  delta computation, zero-previous divisor handling

Fixes #71

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

src/components/reports/HighlightsTopMoversChart.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from "react-i18next";
+import { BarChart, Bar, XAxis, YAxis, Cell, ReferenceLine, Tooltip, ResponsiveContainer } from "recharts";
+import type { HighlightMover } from "../../shared/types";
+import { ChartPatternDefs, getPatternFill } from "../../utils/chartPatterns";
+
+export interface HighlightsTopMoversChartProps {
+  movers: HighlightMover[];
+}
+
+function formatCurrency(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+export default function HighlightsTopMoversChart({ movers }: HighlightsTopMoversChartProps) {
+  const { t, i18n } = useTranslation();
+
+  if (movers.length === 0) {
+    return (
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 text-center text-[var(--muted-foreground)] italic">
+        {t("reports.empty.noData")}
+      </div>
+    );
+  }
+
+  const chartData = movers
+    .map((m, i) => ({
+      name: m.categoryName,
+      color: m.categoryColor,
+      delta: m.deltaAbs,
+      index: i,
+    }))
+    .sort((a, b) => a.delta - b.delta);
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4">
+      <ResponsiveContainer width="100%" height={Math.max(200, chartData.length * 36 + 40)}>
+        <BarChart data={chartData} layout="vertical" margin={{ top: 10, right: 20, bottom: 10, left: 10 }}>
+          <ChartPatternDefs
+            prefix="highlights-movers"
+            categories={chartData.map((d) => ({ color: d.color, index: d.index }))}
+          />
+          <XAxis
+            type="number"
+            tickFormatter={(v) => formatCurrency(v, i18n.language)}
+            stroke="var(--muted-foreground)"
+            fontSize={11}
+          />
+          <YAxis type="category" dataKey="name" width={120} stroke="var(--muted-foreground)" fontSize={11} />
+          <ReferenceLine x={0} stroke="var(--border)" />
+          <Tooltip
+            formatter={(value) =>
+              typeof value === "number" ? formatCurrency(value, i18n.language) : String(value)
+            }
+            contentStyle={{
+              backgroundColor: "var(--card)",
+              border: "1px solid var(--border)",
+              borderRadius: "0.5rem",
+            }}
+          />
+          <Bar dataKey="delta">
+            {chartData.map((entry) => (
+              <Cell
+                key={entry.name}
+                fill={getPatternFill("highlights-movers", entry.index, entry.color)}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

src/components/reports/HighlightsTopMoversTable.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { HighlightMover } from "../../shared/types";
+
+type SortKey = "categoryName" | "previous" | "current" | "deltaAbs" | "deltaPct";
+
+export interface HighlightsTopMoversTableProps {
+  movers: HighlightMover[];
+}
+
+function formatCurrency(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+  }).format(amount);
+}
+
+function formatSignedCurrency(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+    signDisplay: "always",
+  }).format(amount);
+}
+
+function formatPct(pct: number | null, language: string): string {
+  if (pct === null) return "—";
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "percent",
+    maximumFractionDigits: 1,
+    signDisplay: "always",
+  }).format(pct / 100);
+}
+
+export default function HighlightsTopMoversTable({ movers }: HighlightsTopMoversTableProps) {
+  const { t, i18n } = useTranslation();
+  const [sortKey, setSortKey] = useState<SortKey>("deltaAbs");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
+
+  const sorted = [...movers].sort((a, b) => {
+    let cmp = 0;
+    switch (sortKey) {
+      case "categoryName":
+        cmp = a.categoryName.localeCompare(b.categoryName);
+        break;
+      case "previous":
+        cmp = a.previousAmount - b.previousAmount;
+        break;
+      case "current":
+        cmp = a.currentAmount - b.currentAmount;
+        break;
+      case "deltaAbs":
+        cmp = Math.abs(a.deltaAbs) - Math.abs(b.deltaAbs);
+        break;
+      case "deltaPct":
+        cmp = (a.deltaPct ?? 0) - (b.deltaPct ?? 0);
+        break;
+    }
+    return sortDir === "asc" ? cmp : -cmp;
+  });
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("desc");
+    }
+  }
+
+  const headerCell = (key: SortKey, label: string, align: "left" | "right") => (
+    <th
+      onClick={() => toggleSort(key)}
+      className={`${align === "right" ? "text-right" : "text-left"} px-3 py-2 font-medium text-[var(--muted-foreground)] cursor-pointer hover:text-[var(--foreground)] select-none`}
+    >
+      {label}
+      {sortKey === key && <span className="ml-1">{sortDir === "asc" ? "▲" : "▼"}</span>}
+    </th>
+  );
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[var(--border)]">
+              {headerCell("categoryName", t("reports.highlights.category"), "left")}
+              {headerCell("previous", t("reports.highlights.previousAmount"), "right")}
+              {headerCell("current", t("reports.highlights.currentAmount"), "right")}
+              {headerCell("deltaAbs", t("reports.highlights.variationAbs"), "right")}
+              {headerCell("deltaPct", t("reports.highlights.variationPct"), "right")}
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-3 py-4 text-center text-[var(--muted-foreground)] italic">
+                  {t("reports.empty.noData")}
+                </td>
+              </tr>
+            ) : (
+              sorted.map((mover) => (
+                <tr
+                  key={`${mover.categoryId ?? "uncat"}-${mover.categoryName}`}
+                  className="border-b border-[var(--border)] last:border-0 hover:bg-[var(--muted)]/40"
+                >
+                  <td className="px-3 py-2">
+                    <span className="flex items-center gap-2">
+                      <span
+                        className="w-2 h-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: mover.categoryColor }}
+                      />
+                      {mover.categoryName}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-right tabular-nums">
+                    {formatCurrency(mover.previousAmount, i18n.language)}
+                  </td>
+                  <td className="px-3 py-2 text-right tabular-nums">
+                    {formatCurrency(mover.currentAmount, i18n.language)}
+                  </td>
+                  <td
+                    className="px-3 py-2 text-right tabular-nums font-medium"
+                    style={{
+                      color:
+                        mover.deltaAbs >= 0 ? "var(--negative, #ef4444)" : "var(--positive, #10b981)",
+                    }}
+                  >
+                    {formatSignedCurrency(mover.deltaAbs, i18n.language)}
+                  </td>
+                  <td
+                    className="px-3 py-2 text-right tabular-nums"
+                    style={{
+                      color:
+                        mover.deltaAbs >= 0 ? "var(--negative, #ef4444)" : "var(--positive, #10b981)",
+                    }}
+                  >
+                    {formatPct(mover.deltaPct, i18n.language)}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/reports/HighlightsTopTransactionsList.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from "react-i18next";
+import type { RecentTransaction } from "../../shared/types";
+
+export interface HighlightsTopTransactionsListProps {
+  transactions: RecentTransaction[];
+  windowDays: 30 | 60 | 90;
+  onWindowChange: (days: 30 | 60 | 90) => void;
+}
+
+function formatAmount(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+  }).format(amount);
+}
+
+export default function HighlightsTopTransactionsList({
+  transactions,
+  windowDays,
+  onWindowChange,
+}: HighlightsTopTransactionsListProps) {
+  const { t, i18n } = useTranslation();
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
+        <h3 className="text-sm font-semibold">{t("reports.highlights.topTransactions")}</h3>
+        <div className="flex gap-1">
+          {([30, 60, 90] as const).map((days) => (
+            <button
+              key={days}
+              type="button"
+              onClick={() => onWindowChange(days)}
+              aria-pressed={windowDays === days}
+              className={`text-xs px-2 py-1 rounded ${
+                windowDays === days
+                  ? "bg-[var(--primary)] text-white"
+                  : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
+              }`}
+            >
+              {t(`reports.highlights.windowDays${days}`)}
+            </button>
+          ))}
+        </div>
+      </div>
+      {transactions.length === 0 ? (
+        <p className="px-4 py-6 text-center text-sm text-[var(--muted-foreground)] italic">
+          {t("reports.empty.noData")}
+        </p>
+      ) : (
+        <ul className="divide-y divide-[var(--border)]">
+          {transactions.map((tx) => (
+            <li key={tx.id} className="flex items-center gap-3 px-4 py-2 text-sm">
+              <span
+                className="w-2 h-2 rounded-full flex-shrink-0"
+                style={{ backgroundColor: tx.category_color ?? "#9ca3af" }}
+              />
+              <span className="text-[var(--muted-foreground)] tabular-nums flex-shrink-0">
+                {tx.date}
+              </span>
+              <span className="flex-1 min-w-0 truncate">{tx.description}</span>
+              {tx.category_name && (
+                <span className="text-xs text-[var(--muted-foreground)] flex-shrink-0">
+                  {tx.category_name}
+                </span>
+              )}
+              <span
+                className="tabular-nums font-medium flex-shrink-0"
+                style={{ color: tx.amount >= 0 ? "var(--positive, #10b981)" : "var(--foreground)" }}
+              >
+                {formatAmount(tx.amount, i18n.language)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

src/components/reports/HubHighlightsPanel.tsx

@@ -0,0 +1,55 @@
+import { useTranslation } from "react-i18next";
+import type { HighlightsData } from "../../shared/types";
+import HubNetBalanceTile from "./HubNetBalanceTile";
+import HubTopMoversTile from "./HubTopMoversTile";
+import HubTopTransactionsTile from "./HubTopTransactionsTile";
+
+export interface HubHighlightsPanelProps {
+  data: HighlightsData | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export default function HubHighlightsPanel({ data, isLoading, error }: HubHighlightsPanelProps) {
+  const { t } = useTranslation();
+
+  if (error) {
+    return (
+      <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
+        {error}
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 mb-6 text-center text-[var(--muted-foreground)]">
+        {isLoading ? t("common.loading") : t("reports.empty.noData")}
+      </div>
+    );
+  }
+
+  const series = data.monthlyBalanceSeries.map((m) => m.netBalance);
+
+  return (
+    <section className={`mb-6 ${isLoading ? "opacity-60" : ""}`} aria-busy={isLoading}>
+      <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
+        {t("reports.hub.highlights")}
+      </h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+        <HubNetBalanceTile
+          label={t("reports.highlights.netBalanceCurrent")}
+          amount={data.netBalanceCurrent}
+          series={series}
+        />
+        <HubNetBalanceTile
+          label={t("reports.highlights.netBalanceYtd")}
+          amount={data.netBalanceYtd}
+          series={series}
+        />
+        <HubTopMoversTile movers={data.topMovers} />
+        <HubTopTransactionsTile transactions={data.topTransactions} />
+      </div>
+    </section>
+  );
+}

src/components/reports/HubNetBalanceTile.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from "react-i18next";
+import Sparkline from "./Sparkline";
+
+export interface HubNetBalanceTileProps {
+  label: string;
+  amount: number;
+  series: number[];
+}
+
+function formatSigned(amount: number, language: string): string {
+  const formatted = new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+    signDisplay: "always",
+  }).format(amount);
+  return formatted;
+}
+
+export default function HubNetBalanceTile({ label, amount, series }: HubNetBalanceTileProps) {
+  const { i18n } = useTranslation();
+  const positive = amount >= 0;
+  const color = positive ? "var(--positive, #10b981)" : "var(--negative, #ef4444)";
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-2">
+      <span className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wide">
+        {label}
+      </span>
+      <span className="text-2xl font-bold" style={{ color }}>
+        {formatSigned(amount, i18n.language)}
+      </span>
+      <Sparkline data={series} color={color} height={28} />
+    </div>
+  );
+}

src/components/reports/HubReportNavCard.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+
+export interface HubReportNavCardProps {
+  to: string;
+  icon: ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function HubReportNavCard({ to, icon, title, description }: HubReportNavCardProps) {
+  return (
+    <Link
+      to={to}
+      className="group bg-[var(--card)] border border-[var(--border)] rounded-xl p-5 flex flex-col gap-2 hover:border-[var(--primary)] hover:shadow-sm transition-all"
+    >
+      <div className="text-[var(--primary)]">{icon}</div>
+      <h3 className="text-base font-semibold text-[var(--foreground)] group-hover:text-[var(--primary)]">
+        {title}
+      </h3>
+      <p className="text-sm text-[var(--muted-foreground)]">{description}</p>
+    </Link>
+  );
+}

src/components/reports/HubTopMoversTile.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import type { HighlightMover } from "../../shared/types";
+
+export interface HubTopMoversTileProps {
+  movers: HighlightMover[];
+  limit?: number;
+}
+
+function formatCurrency(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+    signDisplay: "always",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+function formatPct(pct: number | null, language: string): string {
+  if (pct === null) return "—";
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "percent",
+    maximumFractionDigits: 0,
+    signDisplay: "always",
+  }).format(pct / 100);
+}
+
+export default function HubTopMoversTile({ movers, limit = 3 }: HubTopMoversTileProps) {
+  const { t, i18n } = useTranslation();
+  const [mode, setMode] = useState<"abs" | "pct">("abs");
+  const visible = movers.slice(0, limit);
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wide">
+          {t("reports.highlights.topMovers")}
+        </span>
+        <div className="flex gap-1">
+          <button
+            type="button"
+            onClick={() => setMode("abs")}
+            aria-pressed={mode === "abs"}
+            className={`text-xs px-2 py-0.5 rounded ${
+              mode === "abs"
+                ? "bg-[var(--primary)] text-white"
+                : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
+            }`}
+          >
+            $
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode("pct")}
+            aria-pressed={mode === "pct"}
+            className={`text-xs px-2 py-0.5 rounded ${
+              mode === "pct"
+                ? "bg-[var(--primary)] text-white"
+                : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
+            }`}
+          >
+            %
+          </button>
+        </div>
+      </div>
+      {visible.length === 0 ? (
+        <p className="text-sm text-[var(--muted-foreground)] italic">{t("reports.empty.noData")}</p>
+      ) : (
+        <ul className="flex flex-col gap-1">
+          {visible.map((mover) => {
+            const isUp = mover.deltaAbs >= 0;
+            const Icon = isUp ? ArrowUpRight : ArrowDownRight;
+            const color = isUp ? "var(--negative, #ef4444)" : "var(--positive, #10b981)";
+            return (
+              <li
+                key={`${mover.categoryId ?? "uncat"}-${mover.categoryName}`}
+                className="flex items-center justify-between gap-2 text-sm"
+              >
+                <span className="flex items-center gap-2 min-w-0">
+                  <span
+                    className="w-2 h-2 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: mover.categoryColor }}
+                  />
+                  <span className="truncate">{mover.categoryName}</span>
+                </span>
+                <span className="flex items-center gap-1 flex-shrink-0" style={{ color }}>
+                  <Icon size={14} />
+                  <span className="tabular-nums font-medium">
+                    {mode === "abs"
+                      ? formatCurrency(mover.deltaAbs, i18n.language)
+                      : formatPct(mover.deltaPct, i18n.language)}
+                  </span>
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <p className="text-[10px] text-[var(--muted-foreground)]">
+        {t("reports.highlights.vsLastMonth")}
+      </p>
+    </div>
+  );
+}

src/components/reports/HubTopTransactionsTile.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from "react-i18next";
+import type { RecentTransaction } from "../../shared/types";
+
+export interface HubTopTransactionsTileProps {
+  transactions: RecentTransaction[];
+  limit?: number;
+}
+
+function formatAmount(amount: number, language: string): string {
+  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
+    style: "currency",
+    currency: "CAD",
+  }).format(amount);
+}
+
+export default function HubTopTransactionsTile({
+  transactions,
+  limit = 5,
+}: HubTopTransactionsTileProps) {
+  const { t, i18n } = useTranslation();
+  const visible = transactions.slice(0, limit);
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-2">
+      <span className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wide">
+        {t("reports.highlights.topTransactions")}
+      </span>
+      {visible.length === 0 ? (
+        <p className="text-sm text-[var(--muted-foreground)] italic">{t("reports.empty.noData")}</p>
+      ) : (
+        <ul className="flex flex-col gap-1.5">
+          {visible.map((tx) => (
+            <li key={tx.id} className="flex items-center gap-2 text-sm">
+              <span
+                className="w-2 h-2 rounded-full flex-shrink-0"
+                style={{ backgroundColor: tx.category_color ?? "#9ca3af" }}
+              />
+              <span className="text-[var(--muted-foreground)] tabular-nums flex-shrink-0">
+                {tx.date}
+              </span>
+              <span className="truncate flex-1 min-w-0">{tx.description}</span>
+              <span
+                className="tabular-nums font-medium flex-shrink-0"
+                style={{ color: tx.amount >= 0 ? "var(--positive, #10b981)" : "var(--foreground)" }}
+              >
+                {formatAmount(tx.amount, i18n.language)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

src/hooks/useHighlights.ts

@@ -1,14 +1,11 @@
 import { useReducer, useEffect, useRef, useCallback } from "react";
+import type { HighlightsData } from "../shared/types";
+import { getHighlights } from "../services/reportService";
 import { useReportsPeriod } from "./useReportsPeriod";
 
-// Stub highlights shape — to be fleshed out in Issue #71.
-export interface HighlightsData {
-  netBalanceCurrent: number;
-  netBalanceYtd: number;
-}
-
 interface State {
   data: HighlightsData | null;
+  windowDays: 30 | 60 | 90;
   isLoading: boolean;
   error: string | null;
 }
@@ -16,10 +13,12 @@ interface State {
 type Action =
   | { type: "SET_LOADING"; payload: boolean }
   | { type: "SET_DATA"; payload: HighlightsData }
-  | { type: "SET_ERROR"; payload: string };
+  | { type: "SET_ERROR"; payload: string }
+  | { type: "SET_WINDOW_DAYS"; payload: 30 | 60 | 90 };
 
 const initialState: State = {
   data: null,
+  windowDays: 30,
   isLoading: false,
   error: null,
 };
@@ -32,6 +31,8 @@ function reducer(state: State, action: Action): State {
       return { ...state, data: action.payload, isLoading: false, error: null };
     case "SET_ERROR":
       return { ...state, error: action.payload, isLoading: false };
+    case "SET_WINDOW_DAYS":
+      return { ...state, windowDays: action.payload };
     default:
       return state;
   }
@@ -42,14 +43,13 @@ export function useHighlights() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const fetchIdRef = useRef(0);
 
-  const fetch = useCallback(async () => {
+  const fetch = useCallback(async (windowDays: 30 | 60 | 90, referenceDate: string) => {
     const id = ++fetchIdRef.current;
     dispatch({ type: "SET_LOADING", payload: true });
     try {
-      // Real implementation in Issue #71 will call reportService.getHighlights
+      const data = await getHighlights(windowDays, referenceDate);
-      const stub: HighlightsData = { netBalanceCurrent: 0, netBalanceYtd: 0 };
       if (id !== fetchIdRef.current) return;
-      dispatch({ type: "SET_DATA", payload: stub });
+      dispatch({ type: "SET_DATA", payload: data });
     } catch (e) {
       if (id !== fetchIdRef.current) return;
       dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
@@ -57,8 +57,12 @@ export function useHighlights() {
   }, []);
 
   useEffect(() => {
-    fetch();
+    fetch(state.windowDays, to);
-  }, [fetch, from, to]);
+  }, [fetch, state.windowDays, to]);
 
-  return { ...state, from, to };
+  const setWindowDays = useCallback((d: 30 | 60 | 90) => {
+    dispatch({ type: "SET_WINDOW_DAYS", payload: d });
+  }, []);
+
+  return { ...state, setWindowDays, from, to };
 }

src/i18n/locales/en.json

@@ -391,9 +391,29 @@
       "title": "Reports",
       "explore": "Explore",
       "highlights": "Highlights",
+      "highlightsDescription": "What moved this month",
       "trends": "Trends",
+      "trendsDescription": "Where you're heading over 12 months",
       "compare": "Compare",
-      "categoryZoom": "Category Analysis"
+      "compareDescription": "Month, year, and budget comparisons",
+      "categoryZoom": "Category Analysis",
+      "categoryZoomDescription": "Zoom in on a single category"
+    },
+    "highlights": {
+      "balances": "Balances",
+      "netBalanceCurrent": "This month",
+      "netBalanceYtd": "Year to date",
+      "topMovers": "Top movers",
+      "topTransactions": "Top recent transactions",
+      "category": "Category",
+      "previousAmount": "Previous",
+      "currentAmount": "Current",
+      "variationAbs": "Delta ($)",
+      "variationPct": "Delta (%)",
+      "vsLastMonth": "vs. last month",
+      "windowDays30": "30 days",
+      "windowDays60": "60 days",
+      "windowDays90": "90 days"
     },
     "empty": {
       "noData": "No data for this period",

src/i18n/locales/fr.json

@@ -391,9 +391,29 @@
       "title": "Rapports",
       "explore": "Explorer",
       "highlights": "Faits saillants",
+      "highlightsDescription": "Ce qui a bougé ce mois-ci",
       "trends": "Tendances",
+      "trendsDescription": "Où vous allez sur 12 mois",
       "compare": "Comparables",
-      "categoryZoom": "Analyse par catégorie"
+      "compareDescription": "Comparaisons mois, année et budget",
+      "categoryZoom": "Analyse par catégorie",
+      "categoryZoomDescription": "Zoom sur une catégorie"
+    },
+    "highlights": {
+      "balances": "Soldes",
+      "netBalanceCurrent": "Ce mois-ci",
+      "netBalanceYtd": "Cumul annuel",
+      "topMovers": "Top mouvements",
+      "topTransactions": "Plus grosses transactions récentes",
+      "category": "Catégorie",
+      "previousAmount": "Précédent",
+      "currentAmount": "Courant",
+      "variationAbs": "Écart ($)",
+      "variationPct": "Écart (%)",
+      "vsLastMonth": "vs mois précédent",
+      "windowDays30": "30 jours",
+      "windowDays60": "60 jours",
+      "windowDays90": "90 jours"
     },
     "empty": {
       "noData": "Aucune donnée pour cette période",

src/pages/ReportsHighlightsPage.tsx

@@ -1,11 +1,96 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import PeriodSelector from "../components/dashboard/PeriodSelector";
+import HubNetBalanceTile from "../components/reports/HubNetBalanceTile";
+import HighlightsTopMoversTable from "../components/reports/HighlightsTopMoversTable";
+import HighlightsTopMoversChart from "../components/reports/HighlightsTopMoversChart";
+import HighlightsTopTransactionsList from "../components/reports/HighlightsTopTransactionsList";
+import ViewModeToggle, { readViewMode, type ViewMode } from "../components/reports/ViewModeToggle";
+import { useHighlights } from "../hooks/useHighlights";
+import { useReportsPeriod } from "../hooks/useReportsPeriod";
+
+const STORAGE_KEY = "reports-viewmode-highlights";
 
 export default function ReportsHighlightsPage() {
   const { t } = useTranslation();
+  const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
+  const { data, isLoading, error, windowDays, setWindowDays } = useHighlights();
+  const [viewMode, setViewMode] = useState<ViewMode>(() => readViewMode(STORAGE_KEY));
+
+  const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
+
   return (
-    <div className="p-8 text-center text-[var(--muted-foreground)]">
+    <div className={isLoading ? "opacity-60" : ""}>
-      <h1 className="text-2xl font-bold mb-4">{t("reports.hub.highlights")}</h1>
+      <div className="flex items-center gap-3 mb-4">
-      <p>{t("common.underConstruction")}</p>
+        <Link
+          to={`/reports${preserveSearch}`}
+          className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] p-1 rounded-md hover:bg-[var(--muted)]"
+          aria-label={t("reports.hub.title")}
+        >
+          <ArrowLeft size={18} />
+        </Link>
+        <h1 className="text-2xl font-bold">{t("reports.hub.highlights")}</h1>
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+        <PeriodSelector
+          value={period}
+          onChange={setPeriod}
+          customDateFrom={from}
+          customDateTo={to}
+          onCustomDateChange={setCustomDates}
+        />
+        <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
+      </div>
+
+      {error && (
+        <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
+          {error}
+        </div>
+      )}
+
+      {data && (
+        <div className="flex flex-col gap-6">
+          <section>
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
+              {t("reports.highlights.balances")}
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <HubNetBalanceTile
+                label={t("reports.highlights.netBalanceCurrent")}
+                amount={data.netBalanceCurrent}
+                series={data.monthlyBalanceSeries.map((m) => m.netBalance)}
+              />
+              <HubNetBalanceTile
+                label={t("reports.highlights.netBalanceYtd")}
+                amount={data.netBalanceYtd}
+                series={data.monthlyBalanceSeries.map((m) => m.netBalance)}
+              />
+            </div>
+          </section>
+
+          <section>
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
+              {t("reports.highlights.topMovers")}
+            </h2>
+            {viewMode === "chart" ? (
+              <HighlightsTopMoversChart movers={data.topMovers} />
+            ) : (
+              <HighlightsTopMoversTable movers={data.topMovers} />
+            )}
+          </section>
+
+          <section>
+            <HighlightsTopTransactionsList
+              transactions={data.topTransactions}
+              windowDays={windowDays}
+              onWindowChange={setWindowDays}
+            />
+          </section>
+        </div>
+      )}
     </div>
   );
 }

src/pages/ReportsPage.tsx

@@ -1,249 +1,73 @@
-import { useState, useCallback, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Hash, Table, BarChart3 } from "lucide-react";
+import { Sparkles, TrendingUp, Scale, Search } from "lucide-react";
-import { useReports } from "../hooks/useReports";
 import { PageHelp } from "../components/shared/PageHelp";
-import type { ReportTab, CategoryBreakdownItem, ImportSource } from "../shared/types";
-import { getAllSources } from "../services/importSourceService";
 import PeriodSelector from "../components/dashboard/PeriodSelector";
-import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
+import HubHighlightsPanel from "../components/reports/HubHighlightsPanel";
-import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
+import HubReportNavCard from "../components/reports/HubReportNavCard";
-import CategoryBarChart from "../components/reports/CategoryBarChart";
+import { useHighlights } from "../hooks/useHighlights";
-import CategoryTable from "../components/reports/CategoryTable";
+import { useReportsPeriod } from "../hooks/useReportsPeriod";
-import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
-import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
-import BudgetVsActualTable from "../components/reports/BudgetVsActualTable";
-import ReportFilterPanel from "../components/reports/ReportFilterPanel";
-import TransactionDetailModal from "../components/shared/TransactionDetailModal";
-import { computeDateRange, buildMonthOptions } from "../utils/dateRange";
-
-const TABS: ReportTab[] = ["trends", "byCategory", "overTime", "budgetVsActual"];
 
 export default function ReportsPage() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
-  const { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setSourceId, setCategoryType } = useReports();
+  const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
-  const [sources, setSources] = useState<ImportSource[]>([]);
+  const { data, isLoading, error } = useHighlights();
 
-  useEffect(() => {
+  const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
-    getAllSources().then(setSources);
+  const navCards = [
-  }, []);
+    {
-
+      to: `/reports/highlights${preserveSearch}`,
-  const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
+      icon: <Sparkles size={24} />,
-  const [detailModal, setDetailModal] = useState<CategoryBreakdownItem | null>(null);
+      title: t("reports.hub.highlights"),
-  const [showAmounts, setShowAmounts] = useState(() => localStorage.getItem("reports-show-amounts") === "true");
+      description: t("reports.hub.highlightsDescription"),
-  const [viewMode, setViewMode] = useState<"chart" | "table">(() =>
+    },
-    (localStorage.getItem("reports-view-mode") as "chart" | "table") || "chart"
+    {
-  );
+      to: `/reports/trends${preserveSearch}`,
-
+      icon: <TrendingUp size={24} />,
-  const toggleHidden = useCallback((name: string) => {
+      title: t("reports.hub.trends"),
-    setHiddenCategories((prev) => {
+      description: t("reports.hub.trendsDescription"),
-      const next = new Set(prev);
+    },
-      if (next.has(name)) next.delete(name);
+    {
-      else next.add(name);
+      to: `/reports/compare${preserveSearch}`,
-      return next;
+      icon: <Scale size={24} />,
-    });
+      title: t("reports.hub.compare"),
-  }, []);
+      description: t("reports.hub.compareDescription"),
-
+    },
-  const showAll = useCallback(() => setHiddenCategories(new Set()), []);
+    {
-
+      to: `/reports/category${preserveSearch}`,
-  const viewDetails = useCallback((item: CategoryBreakdownItem) => {
+      icon: <Search size={24} />,
-    setDetailModal(item);
+      title: t("reports.hub.categoryZoom"),
-  }, []);
+      description: t("reports.hub.categoryZoomDescription"),
-
+    },
-  const { dateFrom, dateTo } = computeDateRange(state.period, state.customDateFrom, state.customDateTo);
+  ];
-
-  const filterCategories = useMemo(() => {
-    if (state.tab === "byCategory") {
-      return state.categorySpending.map((c) => ({ name: c.category_name, color: c.category_color }));
-    }
-    if (state.tab === "overTime") {
-      return state.categoryOverTime.categories.map((name) => ({
-        name,
-        color: state.categoryOverTime.colors[name] || "#9ca3af",
-      }));
-    }
-    return [];
-  }, [state.tab, state.categorySpending, state.categoryOverTime]);
-
-  const monthOptions = useMemo(() => buildMonthOptions(i18n.language), [i18n.language]);
-
-  const hasCategories = ["byCategory", "overTime"].includes(state.tab) && filterCategories.length > 0;
-  const showFilterPanel = hasCategories || (state.tab === "trends" && sources.length > 1);
 
   return (
-    <div className={state.isLoading ? "opacity-50 pointer-events-none" : ""}>
+    <div>
       <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">
-          {state.tab === "budgetVsActual" ? (
+          <h1 className="text-2xl font-bold">{t("reports.hub.title")}</h1>
-            <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-lg font-bold bg-[var(--card)] border border-[var(--border)] rounded-lg px-2 py-0.5 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" && (
+        <PeriodSelector
-          <PeriodSelector
+          value={period}
-            value={state.period}
+          onChange={setPeriod}
-            onChange={setPeriod}
+          customDateFrom={from}
-            customDateFrom={state.customDateFrom}
+          customDateTo={to}
-            customDateTo={state.customDateTo}
+          onCustomDateChange={setCustomDates}
-            onCustomDateChange={setCustomDates}
-          />
-        )}
-      </div>
-
-      <div className="flex gap-2 mb-6 flex-wrap items-center">
-        {TABS.map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setTab(tab)}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              tab === state.tab
-                ? "bg-[var(--primary)] text-white"
-                : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
-            }`}
-          >
-            {t(`reports.${tab}`)}
-          </button>
-        ))}
-        {["trends", "byCategory", "overTime"].includes(state.tab) && (
-          <>
-            <div className="mx-1 h-6 w-px bg-[var(--border)]" />
-            {([
-              { mode: "chart" as const, icon: <BarChart3 size={14} />, label: t("reports.viewMode.chart") },
-              { mode: "table" as const, icon: <Table size={14} />, label: t("reports.viewMode.table") },
-            ]).map(({ mode, icon, label }) => (
-              <button
-                key={mode}
-                onClick={() => {
-                  setViewMode(mode);
-                  localStorage.setItem("reports-view-mode", mode);
-                }}
-                className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  mode === viewMode
-                    ? "bg-[var(--primary)] text-white"
-                    : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
-                }`}
-              >
-                {icon}
-                {label}
-              </button>
-            ))}
-            {viewMode === "chart" && (
-              <>
-                <div className="mx-1 h-6 w-px bg-[var(--border)]" />
-                <button
-                  onClick={() => {
-                    setShowAmounts((prev) => {
-                      const next = !prev;
-                      localStorage.setItem("reports-show-amounts", String(next));
-                      return next;
-                    });
-                  }}
-                  className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                    showAmounts
-                      ? "bg-[var(--primary)] text-white"
-                      : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
-                  }`}
-                  title={showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
-                >
-                  <Hash size={14} />
-                  {showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
-                </button>
-              </>
-            )}
-          </>
-        )}
-      </div>
-
-      {state.error && (
-        <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
-          {state.error}
-        </div>
-      )}
-
-      <div className={showFilterPanel ? "flex gap-4 items-start" : ""}>
-        <div className={showFilterPanel ? "flex-1 min-w-0" : ""}>
-          {state.tab === "trends" && (
-            viewMode === "chart" ? (
-              <MonthlyTrendsChart data={state.monthlyTrends} showAmounts={showAmounts} />
-            ) : (
-              <MonthlyTrendsTable data={state.monthlyTrends} />
-            )
-          )}
-          {state.tab === "byCategory" && (
-            viewMode === "chart" ? (
-              <CategoryBarChart
-                data={state.categorySpending}
-                hiddenCategories={hiddenCategories}
-                onToggleHidden={toggleHidden}
-                onShowAll={showAll}
-                onViewDetails={viewDetails}
-                showAmounts={showAmounts}
-              />
-            ) : (
-              <CategoryTable data={state.categorySpending} hiddenCategories={hiddenCategories} />
-            )
-          )}
-          {state.tab === "overTime" && (
-            viewMode === "chart" ? (
-              <CategoryOverTimeChart
-                data={state.categoryOverTime}
-                hiddenCategories={hiddenCategories}
-                onToggleHidden={toggleHidden}
-                onShowAll={showAll}
-                onViewDetails={viewDetails}
-                showAmounts={showAmounts}
-              />
-            ) : (
-              <CategoryOverTimeTable data={state.categoryOverTime} hiddenCategories={hiddenCategories} />
-            )
-          )}
-          {state.tab === "budgetVsActual" && (
-            <BudgetVsActualTable data={state.budgetVsActual} />
-          )}
-        </div>
-        {showFilterPanel && (
-          <ReportFilterPanel
-            categories={filterCategories}
-            hiddenCategories={hiddenCategories}
-            onToggleHidden={toggleHidden}
-            onShowAll={showAll}
-            sources={sources}
-            selectedSourceId={state.sourceId}
-            onSourceChange={setSourceId}
-            categoryType={state.tab === "overTime" ? state.categoryType : undefined}
-            onCategoryTypeChange={state.tab === "overTime" ? setCategoryType : undefined}
-          />
-        )}
-      </div>
-
-      {detailModal && (
-        <TransactionDetailModal
-          categoryId={detailModal.category_id}
-          categoryName={detailModal.category_name}
-          categoryColor={detailModal.category_color}
-          dateFrom={dateFrom}
-          dateTo={dateTo}
-          onClose={() => setDetailModal(null)}
         />
-      )}
+      </div>
+
+      <HubHighlightsPanel data={data} isLoading={isLoading} error={error} />
+
+      <section>
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
+          {t("reports.hub.explore")}
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+          {navCards.map((card) => (
+            <HubReportNavCard key={card.to} {...card} />
+          ))}
+        </div>
+      </section>
     </div>
   );
 }

src/services/reportService.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { getCategoryOverTime } from "./reportService";
+import { getCategoryOverTime, getHighlights } from "./reportService";
 
 // Mock the db module
 vi.mock("./db", () => ({
@@ -144,3 +144,125 @@ describe("getCategoryOverTime", () => {
     expect(result.data[0]).toEqual({ month: "2025-01", Food: 300, Other: 150 });
   });
 });
+
+describe("getHighlights", () => {
+  const REF = "2026-04-14";
+
+  function queueEmpty(n: number) {
+    for (let i = 0; i < n; i++) {
+      mockSelect.mockResolvedValueOnce([]);
+    }
+  }
+
+  it("computes windows and returns zeroed data on an empty profile", async () => {
+    queueEmpty(5); // currentBalance, ytd, series, movers, recent
+
+    const result = await getHighlights(30, REF);
+
+    expect(result.currentMonth).toBe("2026-04");
+    expect(result.netBalanceCurrent).toBe(0);
+    expect(result.netBalanceYtd).toBe(0);
+    expect(result.monthlyBalanceSeries).toHaveLength(12);
+    expect(result.monthlyBalanceSeries[11].month).toBe("2026-04");
+    expect(result.monthlyBalanceSeries[0].month).toBe("2025-05");
+    expect(result.topMovers).toEqual([]);
+    expect(result.topTransactions).toEqual([]);
+  });
+
+  it("parameterises every query with no inlined strings", async () => {
+    queueEmpty(5);
+
+    await getHighlights(60, REF);
+
+    for (const call of mockSelect.mock.calls) {
+      const sql = call[0] as string;
+      const params = call[1] as unknown[];
+      expect(sql).not.toContain(`'${REF}'`);
+      expect(Array.isArray(params)).toBe(true);
+    }
+    // First call uses current month range parameters
+    const firstParams = mockSelect.mock.calls[0][1] as unknown[];
+    expect(firstParams[0]).toBe("2026-04-01");
+    expect(firstParams[1]).toBe("2026-04-30");
+    // YTD call uses year start
+    const ytdParams = mockSelect.mock.calls[1][1] as unknown[];
+    expect(ytdParams[0]).toBe("2026-01-01");
+    expect(ytdParams[1]).toBe(REF);
+  });
+
+  it("uses a 60-day window for top transactions when requested", async () => {
+    queueEmpty(5);
+
+    await getHighlights(60, REF);
+
+    const recentParams = mockSelect.mock.calls[4][1] as unknown[];
+    // 60-day window ending at REF: start = 2026-04-14 - 59 days = 2026-02-14
+    expect(recentParams[0]).toBe("2026-02-14");
+    expect(recentParams[1]).toBe(REF);
+    expect(recentParams[2]).toBe(10);
+  });
+
+  it("computes deltaAbs and deltaPct from movers rows", async () => {
+    mockSelect
+      .mockResolvedValueOnce([{ net: -500 }]) // current balance
+      .mockResolvedValueOnce([{ net: -1800 }]) // ytd
+      .mockResolvedValueOnce([
+        { month: "2026-04", net: -500 },
+        { month: "2026-03", net: -400 },
+      ]) // series
+      .mockResolvedValueOnce([
+        {
+          category_id: 1,
+          category_name: "Restaurants",
+          category_color: "#f97316",
+          current_total: 240,
+          previous_total: 200,
+        },
+        {
+          category_id: 2,
+          category_name: "Groceries",
+          category_color: "#10b981",
+          current_total: 85,
+          previous_total: 170,
+        },
+      ])
+      .mockResolvedValueOnce([]); // recent
+
+    const result = await getHighlights(30, REF);
+
+    expect(result.netBalanceCurrent).toBe(-500);
+    expect(result.netBalanceYtd).toBe(-1800);
+    expect(result.topMovers).toHaveLength(2);
+    expect(result.topMovers[0]).toMatchObject({
+      categoryName: "Restaurants",
+      currentAmount: 240,
+      previousAmount: 200,
+      deltaAbs: 40,
+    });
+    expect(result.topMovers[0].deltaPct).toBeCloseTo(20, 4);
+    expect(result.topMovers[1].deltaAbs).toBe(-85);
+    expect(result.topMovers[1].deltaPct).toBeCloseTo(-50, 4);
+  });
+
+  it("returns deltaPct=null when previous month total is zero", async () => {
+    mockSelect
+      .mockResolvedValueOnce([{ net: 0 }])
+      .mockResolvedValueOnce([{ net: 0 }])
+      .mockResolvedValueOnce([])
+      .mockResolvedValueOnce([
+        {
+          category_id: 3,
+          category_name: "New expense",
+          category_color: "#3b82f6",
+          current_total: 120,
+          previous_total: 0,
+        },
+      ])
+      .mockResolvedValueOnce([]);
+
+    const result = await getHighlights(30, REF);
+
+    expect(result.topMovers[0].deltaPct).toBeNull();
+    expect(result.topMovers[0].deltaAbs).toBe(120);
+  });
+});

src/services/reportService.ts

@@ -4,6 +4,10 @@ import type {
   CategoryBreakdownItem,
   CategoryOverTimeData,
   CategoryOverTimeItem,
+  HighlightsData,
+  HighlightMover,
+  MonthBalance,
+  RecentTransaction,
 } from "../shared/types";
 
 export async function getMonthlyTrends(
@@ -166,3 +170,173 @@ export async function getCategoryOverTime(
     categoryIds,
   };
 }
+
+// --- Highlights (Issue #71) ---
+
+/**
+ * Shifts a YYYY-MM-DD date string by `months` months and returns the first day
+ * of the resulting month as YYYY-MM-01. Used to compute the start of the
+ * 12-month sparkline window relative to the reference date.
+ */
+function shiftMonthStart(refIso: string, months: number): string {
+  const [y, m] = refIso.split("-").map(Number);
+  const d = new Date(Date.UTC(y, m - 1 + months, 1));
+  const yy = d.getUTCFullYear();
+  const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
+  return `${yy}-${mm}-01`;
+}
+
+function shiftDate(refIso: string, days: number): string {
+  const [y, m, d] = refIso.split("-").map(Number);
+  const dt = new Date(Date.UTC(y, m - 1, d + days));
+  const yy = dt.getUTCFullYear();
+  const mm = String(dt.getUTCMonth() + 1).padStart(2, "0");
+  const dd = String(dt.getUTCDate()).padStart(2, "0");
+  return `${yy}-${mm}-${dd}`;
+}
+
+function monthEnd(yyyyMm: string): string {
+  const [y, m] = yyyyMm.split("-").map(Number);
+  const d = new Date(Date.UTC(y, m, 0)); // day 0 of next month = last day of this month
+  const dd = String(d.getUTCDate()).padStart(2, "0");
+  return `${yyyyMm}-${dd}`;
+}
+
+/**
+ * Returns the dashboard "highlights" snapshot for the reports hub:
+ *   - net balance for the reference month
+ *   - YTD net balance
+ *   - last 12 months of net balances (for sparkline)
+ *   - top movers (biggest change in spending vs previous month)
+ *   - top transactions (biggest absolute amounts in last `windowDays` days)
+ *
+ * All SQL is parameterised. `referenceDate` defaults to today and is overridable
+ * from tests for deterministic fixtures.
+ */
+export async function getHighlights(
+  windowDays: number = 30,
+  referenceDate?: string,
+  topMoversLimit: number = 5,
+  topTransactionsLimit: number = 10,
+): Promise<HighlightsData> {
+  const db = await getDb();
+
+  const refIso = referenceDate ?? (() => {
+    const t = new Date();
+    return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
+  })();
+  const currentMonth = refIso.slice(0, 7); // YYYY-MM
+  const currentYear = refIso.slice(0, 4);
+  const yearStart = `${currentYear}-01-01`;
+  const currentMonthStart = `${currentMonth}-01`;
+  const currentMonthEnd = monthEnd(currentMonth);
+  const previousMonthStart = shiftMonthStart(refIso, -1);
+  const previousMonth = previousMonthStart.slice(0, 7);
+  const previousMonthEnd = monthEnd(previousMonth);
+  const sparklineStart = shiftMonthStart(refIso, -11); // 11 months back + current = 12
+  const recentWindowStart = shiftDate(refIso, -(windowDays - 1));
+
+  // 1. Net balance for current month
+  const currentBalanceRows = await db.select<Array<{ net: number | null }>>(
+    `SELECT COALESCE(SUM(amount), 0) AS net
+       FROM transactions
+      WHERE date >= $1 AND date <= $2`,
+    [currentMonthStart, currentMonthEnd],
+  );
+  const netBalanceCurrent = Number(currentBalanceRows[0]?.net ?? 0);
+
+  // 2. YTD balance
+  const ytdRows = await db.select<Array<{ net: number | null }>>(
+    `SELECT COALESCE(SUM(amount), 0) AS net
+       FROM transactions
+      WHERE date >= $1 AND date <= $2`,
+    [yearStart, refIso],
+  );
+  const netBalanceYtd = Number(ytdRows[0]?.net ?? 0);
+
+  // 3. 12-month sparkline series
+  const seriesRows = await db.select<Array<{ month: string; net: number | null }>>(
+    `SELECT strftime('%Y-%m', date) AS month, COALESCE(SUM(amount), 0) AS net
+       FROM transactions
+      WHERE date >= $1 AND date <= $2
+      GROUP BY month
+      ORDER BY month ASC`,
+    [sparklineStart, currentMonthEnd],
+  );
+  const seriesMap = new Map(seriesRows.map((r) => [r.month, Number(r.net ?? 0)]));
+  const monthlyBalanceSeries: MonthBalance[] = [];
+  for (let i = 11; i >= 0; i--) {
+    const monthKey = shiftMonthStart(refIso, -i).slice(0, 7);
+    monthlyBalanceSeries.push({ month: monthKey, netBalance: seriesMap.get(monthKey) ?? 0 });
+  }
+
+  // 4. Top movers — expense-side only (amount < 0), compare current vs previous month
+  const moversRows = await db.select<
+    Array<{
+      category_id: number | null;
+      category_name: string;
+      category_color: string;
+      current_total: number | null;
+      previous_total: number | null;
+    }>
+  >(
+    `SELECT
+        t.category_id,
+        COALESCE(c.name, 'Uncategorized') AS category_name,
+        COALESCE(c.color, '#9ca3af')      AS category_color,
+        COALESCE(SUM(CASE WHEN t.date >= $1 AND t.date <= $2 THEN ABS(t.amount) ELSE 0 END), 0) AS current_total,
+        COALESCE(SUM(CASE WHEN t.date >= $3 AND t.date <= $4 THEN ABS(t.amount) ELSE 0 END), 0) AS previous_total
+      FROM transactions t
+      LEFT JOIN categories c ON t.category_id = c.id
+      WHERE t.amount < 0
+        AND (
+          (t.date >= $1 AND t.date <= $2)
+          OR (t.date >= $3 AND t.date <= $4)
+        )
+      GROUP BY t.category_id, category_name, category_color
+      ORDER BY ABS(current_total - previous_total) DESC
+      LIMIT $5`,
+    [currentMonthStart, currentMonthEnd, previousMonthStart, previousMonthEnd, topMoversLimit],
+  );
+  const topMovers: HighlightMover[] = moversRows.map((r) => {
+    const current = Number(r.current_total ?? 0);
+    const previous = Number(r.previous_total ?? 0);
+    const deltaAbs = current - previous;
+    const deltaPct = previous === 0 ? null : (deltaAbs / previous) * 100;
+    return {
+      categoryId: r.category_id,
+      categoryName: r.category_name,
+      categoryColor: r.category_color,
+      previousAmount: previous,
+      currentAmount: current,
+      deltaAbs,
+      deltaPct,
+    };
+  });
+
+  // 5. Top transactions within the recent window
+  const recentRows = await db.select<RecentTransaction[]>(
+    `SELECT
+        t.id,
+        t.date,
+        t.description,
+        t.amount,
+        c.name  AS category_name,
+        c.color AS category_color
+       FROM transactions t
+       LEFT JOIN categories c ON t.category_id = c.id
+      WHERE t.date >= $1 AND t.date <= $2
+      ORDER BY ABS(t.amount) DESC
+      LIMIT $3`,
+    [recentWindowStart, refIso, topTransactionsLimit],
+  );
+
+  return {
+    currentMonth,
+    netBalanceCurrent,
+    netBalanceYtd,
+    monthlyBalanceSeries,
+    topMovers,
+    topTransactions: recentRows,
+  };
+}

src/shared/types/index.ts

@@ -278,6 +278,30 @@ export interface RecentTransaction {
 
 export type ReportTab = "trends" | "byCategory" | "overTime" | "budgetVsActual";
 
+export interface HighlightMover {
+  categoryId: number | null;
+  categoryName: string;
+  categoryColor: string;
+  previousAmount: number;
+  currentAmount: number;
+  deltaAbs: number;
+  deltaPct: number | null; // null when previous is 0
+}
+
+export interface MonthBalance {
+  month: string; // "YYYY-MM"
+  netBalance: number;
+}
+
+export interface HighlightsData {
+  currentMonth: string; // "YYYY-MM"
+  netBalanceCurrent: number;
+  netBalanceYtd: number;
+  monthlyBalanceSeries: MonthBalance[]; // last 12 months ending at currentMonth
+  topMovers: HighlightMover[];
+  topTransactions: RecentTransaction[];
+}
+
 export interface MonthlyTrendItem {
   month: string;       // "2025-01"
   income: number;