Merge issue-279 (dashboard Cartes convergence) into main

# Conflicts:
#	CHANGELOG.fr.md
#	CHANGELOG.md

CHANGELOG.fr.md

@@ -21,6 +21,7 @@
 - Rapports → Tendances : le rapport **s'ouvre désormais sur la vue « Par catégorie » en tableau** par défaut, au lieu du graphique mensuel global. Le tableau par catégorie comporte une section revenus, donc une catégorie de revenu (ex. votre paie) apparaît d'emblée — sans changer de vue au préalable. La vue que vous choisissez vous-même reste mémorisée (#262).
 - Rapports → Comparaison (réel vs budget) : le tableau budget-vs-réel se lit désormais comme les autres rapports comparables — une **analyse de résultat**. Les catégories sont regroupées Revenus → Dépenses → Transferts (au lieu de Dépenses → Revenus → Transferts), et l'ancienne ligne « Total » plate est remplacée par une ligne **Résultat avant transferts** (affichée lorsque des transferts existent) et une ligne **Résultat net**, toutes deux colorées en vert pour un surplus, en rouge pour un déficit. Les montants de catégorie et de section sont inchangés (#277).
 - Budget : la grille budget se lit désormais comme une analyse de résultat — les catégories sont regroupées **Revenus → Dépenses → Transferts** (auparavant dépenses en premier), et l'ancienne ligne « Total » brute est remplacée par deux lignes de résultat : **Résultat avant transferts** (revenus − dépenses) et **Résultat net** (après transferts), calculées sur les colonnes année précédente, annuelle et mensuelles. Toutes les catégories restent affichées sur la grille — elle demeure une surface d'édition, sans ligne masquée ni repliable (#278).
+- Tableau de bord (`/`) : la page d'accueil adopte désormais le modèle du rapport Cartes. Les cartes d'indicateurs (revenus, dépenses, résultat net, taux d'épargne) affichent leur variation vs le mois précédent et vs l'an dernier (sélecteur de mois de référence, par défaut le dernier mois complet) ; les catégories en hausse/en baisse et le respect du budget sont présentés de la même façon que sur Cartes. Une nouvelle tuile **valeur nette** affiche le dernier total du Bilan — une métrique différente de toutes les autres cartes de la page, donc masquée (jamais un « 0 $ » trompeur) tant qu'aucun compte de bilan n'a de snapshot enregistré, et jamais affectée par le filtre de comptes ci-dessous. Le camembert des dépenses est remplacé par des **barres classées** des catégories de dépense les plus importantes, et le filtre de comptes (sources d'import) — introduit sur Tendances/Comparaison/Budget — s'applique désormais aussi aux widgets transactionnels du tableau de bord (#279).
 
 ## [0.12.0] - 2026-07-05
 

CHANGELOG.md

@@ -21,6 +21,7 @@
 - Reports → Trends: the report now **opens on the "By category" table view** by default, instead of the global monthly chart. The by-category table has an income section, so a revenue category (e.g. your pay) shows up straight away — no need to switch views first. Whatever view you pick yourself is still remembered (#262).
 - Reports → Compare (actual vs budget): the budget-vs-actual table now reads the same way as the other comparable reports — an **income statement**. Categories are grouped Income → Expenses → Transfers (instead of Expenses → Income → Transfers), and the old flat "Total" row is replaced by a **Result before transfers** line (shown when transfers exist) and a **Net result** line, both coloured green for a surplus and red for a deficit. Leaf and section figures are unchanged (#277).
 - Budget: the budget grid now reads as an income statement — categories are grouped **Income → Expenses → Transfers** (previously expenses first), and the old plain "Total" row is replaced by two result lines: **Result before transfers** (income − expenses) and **Net result** (after transfers), computed across the previous-year, annual, and monthly columns alike. Every category still shows on the grid — it stays an editable surface, with no rows hidden or collapsed (#278).
+- Dashboard (`/`): the home page now matches the Cartes report's model. KPI cards for income, expenses, net result and savings rate show their change vs the previous month and vs last year (reference-month picker, defaulting to the last complete month); rising/falling categories and budget adherence are shown the same way as on Cartes. A new **net worth** tile shows the Balance sheet's latest total — a different metric from every other card here, so it stays hidden (never a misleading "$0") until at least one balance account has a recorded snapshot, and it is never affected by the account filter below. The expense-only pie chart is replaced by a **ranked bar chart** of top expense categories, and the account (import-source) filter — introduced on Trends/Compare/Budget — now also applies to the Dashboard's own transactional widgets (#279).
 
 ## [0.12.0] - 2026-07-05
 

docs/architecture.md

@@ -172,7 +172,7 @@ Pour les **nouveaux profils**, le fichier `consolidated_schema.sql` contient le
 | `categorizationService.ts` | Catégorisation automatique + helpers édition de mot-clé (`validateKeyword`, `previewKeywordMatches`, `applyKeywordWithReassignment`) |
 | `adjustmentService.ts` | Gestion des ajustements |
 | `budgetService.ts` | Gestion budgétaire |
-| `dashboardService.ts` | Agrégation données tableau de bord |
+| `dashboardService.ts` | Agrégation données tableau de bord : `getExpensesByCategory` (barres classées, `accountIds`), `getDashboardSummary` (non consommé depuis #279), `deriveNetWorthTile` (pur — tuile valeur nette du Bilan, réutilise `deriveLandingState`) |
 | `reportService.ts` | Génération de rapports : `getMonthlyTrends`, `getCategoryOverTime`, `getHighlights`, `getCompareMonthOverMonth`, `getCompareYearOverYear`, `getCategoryZoom` (CTE récursive bornée anti-cycle), `getCartesSnapshot` (snapshot dashboard Cartes, requêtes parallèles) |
 | `dataExportService.ts` | Export de données (chiffré) |
 | `userPreferenceService.ts` | Stockage préférences utilisateur |
@@ -205,8 +205,8 @@ Chaque hook encapsule la logique d'état via `useReducer` :
 | `useImportHistory` | Historique des imports |
 | `useAdjustments` | Ajustements |
 | `useBudget` | Budget |
-| `useDashboard` | Métriques du tableau de bord |
+| `useDashboard` | Tableau de bord (`/`) — convergé sur le modèle `/reports/cartes` (#279) : KPIs+deltas/top movers/adherence budget via `getCartesSnapshot` sur un mois de référence propre au Dashboard (`referenceYear`/`referenceMonth`, défaut mois précédent), barres classées + tendance par catégorie sur une période flexible propre (`period`/dates custom), filtre compte (`accountIds`) local partagé par les deux axes temporels, tuile valeur nette (Bilan) chargée une fois, indépendante du filtre compte |
-| `useReportsPeriod` | Période de reporting synchronisée via query string (bookmarkable) + filtre compte (`accountIds`, `import_sources.id`) via le paramètre `sources`, même mécanique bookmarkable ; défaut `[]` = aucun filtre (fondation #272). Branché sur les 7 services de rapports (#273) et exposé via `<FilterPanel>` (#274) ; adopté sur Tendances (#275) puis Comparaison et Budget (#276) — reste Dashboard/Hub (M2) |
+| `useReportsPeriod` | Période de reporting synchronisée via query string (bookmarkable) + filtre compte (`accountIds`, `import_sources.id`) via le paramètre `sources`, même mécanique bookmarkable ; défaut `[]` = aucun filtre (fondation #272). Branché sur les 7 services de rapports (#273) et exposé via `<FilterPanel>` (#274) ; adopté sur Tendances (#275) puis Comparaison et Budget (#276). Le Dashboard (`/`) n'utilise pas ce hook — il porte son propre `accountIds` local (`useDashboard`), câblé au même `<FilterPanel>` (#279) |
 | `useHighlights` | Panneau de faits saillants du hub rapports |
 | `useTrends` | Rapport Tendances (sous-vue flux global / par catégorie) |
 | `useCompare` | Rapport Comparables (mode `actual`/`budget`, sous-toggle MoM ↔ YoY, mois de référence explicite avec wrap-around janvier) |
@@ -350,7 +350,7 @@ Le routing est défini dans `App.tsx`. Toutes les pages sont englobées par `App
 
 | Route | Page | Description |
 |-------|------|-------------|
-| `/` | `DashboardPage` | Tableau de bord (résumé, pie chart, budget vs réel, dépenses dans le temps) |
+| `/` | `DashboardPage` | Tableau de bord (KPIs+deltas, top movers, adhérence budget, tuile valeur nette, barres classées, dépenses dans le temps — modèle Cartes, #279) |
 | `/import` | `ImportPage` | Assistant d'import CSV |
 | `/transactions` | `TransactionsPage` | Liste avec filtres |
 | `/categories` | `CategoriesPage` | Gestion hiérarchique |

src/components/dashboard/NetWorthTile.tsx

@@ -0,0 +1,62 @@
+// NetWorthTile — Dashboard KPI-row tile showing the Bilan's latest net worth.
+//
+// Issue #279. Deliberately NOT `HubNetBalanceTile` (that one is the reports
+// hub's transaction-P&L net balance — a different metric). This tile mirrors
+// `BalanceOverviewCard`'s "latest total" figure and reuses its exact i18n
+// copy (`balance.overview.latestTotal` / `asOf`) so the label is unambiguous
+// next to the transactional KPI cards and the "import sources" account
+// filter — same words as the Bilan page itself, never "balance"/"solde".
+//
+// Renders nothing when `data.visible` is false (no balance account yet, or
+// accounts but no snapshot yet) — never a misleading "$0" tile.
+
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Wallet } from "lucide-react";
+import type { NetWorthTileData } from "../../services/dashboardService";
+
+export interface NetWorthTileProps {
+  data: NetWorthTileData;
+}
+
+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 NetWorthTile({ data }: NetWorthTileProps) {
+  const { t, i18n } = useTranslation();
+
+  if (!data.visible || data.total === null || data.asOfDate === null) {
+    return null;
+  }
+
+  const dateLocale = i18n.language === "fr" ? "fr-CA" : "en-CA";
+  const formattedDate = new Date(data.asOfDate).toLocaleDateString(dateLocale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <Link
+      to="/balance"
+      data-kpi="net-worth"
+      className="flex-1 min-w-[180px] bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-3 hover:border-[var(--primary)] transition-colors"
+    >
+      <div className="text-sm text-[var(--muted-foreground)] flex items-center gap-1.5">
+        <Wallet size={14} aria-hidden="true" />
+        <span>{t("balance.overview.latestTotal")}</span>
+      </div>
+      <div className="text-2xl font-bold tabular-nums text-[var(--foreground)]">
+        {formatCurrency(data.total, i18n.language)}
+      </div>
+      <div className="text-xs text-[var(--muted-foreground)] pt-1 border-t border-[var(--border)]">
+        {t("balance.overview.asOf", { date: formattedDate })}
+      </div>
+    </Link>
+  );
+}

src/hooks/useDashboard.ts

@@ -1,29 +1,63 @@
+// useDashboard — scoped useReducer hook backing DashboardPage (the `/` home page).
+//
+// Converged onto the `/reports/cartes` model (Issue #279, epic #260): the KPI
+// row, top movers and budget adherence are the exact Cartes widgets, sourced
+// from `getCartesSnapshot` against a (year, month) reference period. The
+// Dashboard keeps its OWN two temporal axes, neither of which is
+// `useReportsPeriod` (M1/I4 deliberately left the Dashboard untouched):
+//   - `period` / `customDateFrom` / `customDateTo` — a flexible date range,
+//     feeding the two range-based transactional widgets (top-expenses bar
+//     chart, category-over-time trend).
+//   - `referenceYear` / `referenceMonth` — a single reference month, feeding
+//     the Cartes snapshot (KPIs + deltas, top movers, budget adherence, the
+//     income-vs-expenses overlay chart). Defaults to the previous complete
+//     month, like Cartes/Compare (`defaultReferencePeriod`).
+//
+// The account (import-source) filter (`accountIds`) is Dashboard-local state
+// (not routed through `useReportsPeriod`), but applies to every transactional
+// widget above — both temporal axes. It does NOT scope the net-worth tile
+// (see below): `balance_accounts` is a disjoint concept from `import_sources`.
+//
+// The net-worth tile is fetched independently, once, on mount — it is not a
+// transactional figure, has no relationship to `period`/`referenceMonth`, and
+// must not be scoped by `accountIds`. Keeping it in its own effect makes that
+// decoupling explicit in the code, not just in the UI copy.
+
 import { useReducer, useCallback, useEffect, useRef } from "react";
 import type {
   DashboardPeriod,
-  DashboardSummary,
   CategoryBreakdownItem,
   CategoryOverTimeData,
-  BudgetVsActualRow,
+  CartesSnapshot,
+  ImportSource,
 } from "../shared/types";
 import {
-  getDashboardSummary,
   getExpensesByCategory,
+  deriveNetWorthTile,
+  type NetWorthTileData,
 } from "../services/dashboardService";
-import { getCategoryOverTime } from "../services/reportService";
+import { getCategoryOverTime, getCartesSnapshot } from "../services/reportService";
-import { getBudgetVsActualData } from "../services/budgetService";
+import { getAllImportSources } from "../services/transactionService";
+import {
+  getSnapshotTotalsByDate,
+  listSnapshots,
+  listBalanceAccounts,
+} from "../services/balance.service";
 import { computeDateRange } from "../utils/dateRange";
+import { defaultReferencePeriod } from "../utils/referencePeriod";
 
 interface DashboardState {
-  summary: DashboardSummary;
   categoryBreakdown: CategoryBreakdownItem[];
   categoryOverTime: CategoryOverTimeData;
-  budgetVsActual: BudgetVsActualRow[];
+  cartesSnapshot: CartesSnapshot | null;
   period: DashboardPeriod;
-  budgetYear: number;
-  budgetMonth: number;
   customDateFrom: string;
   customDateTo: string;
+  referenceYear: number;
+  referenceMonth: number;
+  accountIds: number[];
+  accounts: ImportSource[];
+  netWorth: NetWorthTileData;
   isLoading: boolean;
   error: string | null;
 }
@@ -34,30 +68,46 @@ type DashboardAction =
   | {
       type: "SET_DATA";
       payload: {
-        summary: DashboardSummary;
         categoryBreakdown: CategoryBreakdownItem[];
         categoryOverTime: CategoryOverTimeData;
-        budgetVsActual: BudgetVsActualRow[];
+        cartesSnapshot: CartesSnapshot;
       };
     }
   | { type: "SET_PERIOD"; payload: DashboardPeriod }
-  | { type: "SET_BUDGET_MONTH"; payload: { year: number; month: number } }
+  | { type: "SET_CUSTOM_DATES"; payload: { dateFrom: string; dateTo: string } }
-  | { type: "SET_CUSTOM_DATES"; payload: { dateFrom: string; dateTo: string } };
+  | { type: "SET_REFERENCE_PERIOD"; payload: { year: number; month: number } }
+  | { type: "SET_ACCOUNT_IDS"; payload: number[] }
+  | { type: "SET_ACCOUNTS"; payload: ImportSource[] }
+  | { type: "SET_NET_WORTH"; payload: NetWorthTileData };
 
 const now = new Date();
 const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
 const yearStartStr = `${now.getFullYear()}-01-01`;
+const defaultRef = defaultReferencePeriod();
+
+const EMPTY_CATEGORY_OVER_TIME: CategoryOverTimeData = {
+  categories: [],
+  data: [],
+  colors: {},
+  categoryIds: {},
+  types: {},
+  tree: [],
+};
+
+const EMPTY_NET_WORTH: NetWorthTileData = { visible: false, total: null, asOfDate: null };
 
 const initialState: DashboardState = {
-  summary: { totalCount: 0, totalAmount: 0, incomeTotal: 0, expenseTotal: 0 },
   categoryBreakdown: [],
-  categoryOverTime: { categories: [], data: [], colors: {}, categoryIds: {}, types: {}, tree: [] },
+  categoryOverTime: EMPTY_CATEGORY_OVER_TIME,
-  budgetVsActual: [],
+  cartesSnapshot: null,
   period: "year",
-  budgetYear: now.getMonth() === 0 ? now.getFullYear() - 1 : now.getFullYear(),
-  budgetMonth: now.getMonth() === 0 ? 12 : now.getMonth(),
   customDateFrom: yearStartStr,
   customDateTo: todayStr,
+  referenceYear: defaultRef.year,
+  referenceMonth: defaultRef.month,
+  accountIds: [],
+  accounts: [],
+  netWorth: EMPTY_NET_WORTH,
   isLoading: false,
   error: null,
 };
@@ -71,18 +121,28 @@ function reducer(state: DashboardState, action: DashboardAction): DashboardState
     case "SET_DATA":
       return {
         ...state,
-        summary: action.payload.summary,
         categoryBreakdown: action.payload.categoryBreakdown,
         categoryOverTime: action.payload.categoryOverTime,
-        budgetVsActual: action.payload.budgetVsActual,
+        cartesSnapshot: action.payload.cartesSnapshot,
         isLoading: false,
       };
     case "SET_PERIOD":
       return { ...state, period: action.payload };
-    case "SET_BUDGET_MONTH":
-      return { ...state, budgetYear: action.payload.year, budgetMonth: action.payload.month };
     case "SET_CUSTOM_DATES":
-      return { ...state, period: "custom" as DashboardPeriod, customDateFrom: action.payload.dateFrom, customDateTo: action.payload.dateTo };
+      return {
+        ...state,
+        period: "custom" as DashboardPeriod,
+        customDateFrom: action.payload.dateFrom,
+        customDateTo: action.payload.dateTo,
+      };
+    case "SET_REFERENCE_PERIOD":
+      return { ...state, referenceYear: action.payload.year, referenceMonth: action.payload.month };
+    case "SET_ACCOUNT_IDS":
+      return { ...state, accountIds: action.payload };
+    case "SET_ACCOUNTS":
+      return { ...state, accounts: action.payload };
+    case "SET_NET_WORTH":
+      return { ...state, netWorth: action.payload };
     default:
       return state;
   }
@@ -96,8 +156,9 @@ export function useDashboard() {
     period: DashboardPeriod,
     customFrom: string | undefined,
     customTo: string | undefined,
-    bYear: number,
+    refYear: number,
-    bMonth: number,
+    refMonth: number,
+    accountIds: number[],
   ) => {
     const fetchId = ++fetchIdRef.current;
     dispatch({ type: "SET_LOADING", payload: true });
@@ -105,15 +166,17 @@ export function useDashboard() {
 
     try {
       const { dateFrom, dateTo } = computeDateRange(period, customFrom, customTo);
-      const [summary, categoryBreakdown, categoryOverTime, budgetVsActual] = await Promise.all([
+      const [categoryBreakdown, categoryOverTime, cartesSnapshot] = await Promise.all([
-        getDashboardSummary(dateFrom, dateTo),
+        getExpensesByCategory(dateFrom, dateTo, accountIds),
-        getExpensesByCategory(dateFrom, dateTo),
+        // typeFilter "expense" (Issue #279): this chart is titled "expenses
-        getCategoryOverTime(dateFrom, dateTo),
+        // over time" but previously aggregated every category type — a
-        getBudgetVsActualData(bYear, bMonth),
+        // revenue category could silently show up in an "expenses" trend.
+        getCategoryOverTime(dateFrom, dateTo, undefined, accountIds, "expense"),
+        getCartesSnapshot(refYear, refMonth, "month", accountIds),
       ]);
 
       if (fetchId !== fetchIdRef.current) return;
-      dispatch({ type: "SET_DATA", payload: { summary, categoryBreakdown, categoryOverTime, budgetVsActual } });
+      dispatch({ type: "SET_DATA", payload: { categoryBreakdown, categoryOverTime, cartesSnapshot } });
     } catch (e) {
       if (fetchId !== fetchIdRef.current) return;
       dispatch({
@@ -124,8 +187,59 @@ export function useDashboard() {
   }, []);
 
   useEffect(() => {
-    fetchData(state.period, state.customDateFrom, state.customDateTo, state.budgetYear, state.budgetMonth);
+    fetchData(
-  }, [state.period, state.customDateFrom, state.customDateTo, state.budgetYear, state.budgetMonth, fetchData]);
+      state.period,
+      state.customDateFrom,
+      state.customDateTo,
+      state.referenceYear,
+      state.referenceMonth,
+      state.accountIds,
+    );
+  }, [
+    state.period,
+    state.customDateFrom,
+    state.customDateTo,
+    state.referenceYear,
+    state.referenceMonth,
+    state.accountIds,
+    fetchData,
+  ]);
+
+  // One-time: import sources for the FilterPanel's account checkboxes (same
+  // query as Trends/Compare/Budget — see useTrends.ts).
+  useEffect(() => {
+    (async () => {
+      try {
+        const accounts = await getAllImportSources();
+        dispatch({ type: "SET_ACCOUNTS", payload: accounts });
+      } catch (e) {
+        dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
+      }
+    })();
+  }, []);
+
+  // One-time: net-worth tile (Bilan). Independent of `period`/`referenceMonth`
+  // and NOT scoped by `accountIds` — a different "account" concept
+  // (balance_accounts vs import_sources) and a different metric (net worth vs
+  // transaction P&L). A failure here only hides the tile (best-effort); it
+  // never surfaces as a page-wide error for what is a secondary widget.
+  useEffect(() => {
+    (async () => {
+      try {
+        const [accounts, snapshots, totals] = await Promise.all([
+          listBalanceAccounts(),
+          listSnapshots(),
+          getSnapshotTotalsByDate(),
+        ]);
+        dispatch({
+          type: "SET_NET_WORTH",
+          payload: deriveNetWorthTile(accounts.length, snapshots.length > 0, totals),
+        });
+      } catch {
+        dispatch({ type: "SET_NET_WORTH", payload: EMPTY_NET_WORTH });
+      }
+    })();
+  }, []);
 
   const setPeriod = useCallback((period: DashboardPeriod) => {
     dispatch({ type: "SET_PERIOD", payload: period });
@@ -135,9 +249,13 @@ export function useDashboard() {
     dispatch({ type: "SET_CUSTOM_DATES", payload: { dateFrom, dateTo } });
   }, []);
 
-  const setBudgetMonth = useCallback((year: number, month: number) => {
+  const setReferencePeriod = useCallback((year: number, month: number) => {
-    dispatch({ type: "SET_BUDGET_MONTH", payload: { year, month } });
+    dispatch({ type: "SET_REFERENCE_PERIOD", payload: { year, month } });
   }, []);
 
-  return { state, setPeriod, setCustomDates, setBudgetMonth };
+  const setAccountIds = useCallback((accountIds: number[]) => {
+    dispatch({ type: "SET_ACCOUNT_IDS", payload: accountIds });
+  }, []);
+
+  return { state, setPeriod, setCustomDates, setReferencePeriod, setAccountIds };
 }

src/i18n/locales/en.json

@@ -20,7 +20,7 @@
   },
   "dashboard": {
     "title": "Dashboard",
-    "balance": "Balance",
+    "kpiSectionTitle": "Key indicators",
     "income": "Income",
     "expenses": "Expenses",
     "net": "Net",
@@ -50,10 +50,11 @@
     "help": {
       "title": "How to use the Dashboard",
       "tips": [
-        "Use the period selector (top right) to view different time ranges",
+        "The filter bar at the top picks the date range and which import sources to include",
-        "Summary cards show your balance, income, and expenses for the selected period",
+        "The key indicators (income, expenses, net, savings rate) cover the chosen reference month, with their change vs the previous month and vs last year",
-        "The pie chart breaks down your expenses by category",
+        "The \"Current net worth\" tile comes from the Balance sheet — it is not filtered by import source",
-        "Recent transactions are listed at the bottom"
+        "Rising/falling categories and budget adherence summarize the reference month's changes",
+        "The bar chart ranks your expenses by category; the chart below tracks their trend over time"
       ]
     }
   },
@@ -403,8 +404,7 @@
       "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"
     },
     "export": "Export",
     "month": "Month",

src/i18n/locales/fr.json

@@ -20,7 +20,7 @@
   },
   "dashboard": {
     "title": "Tableau de bord",
-    "balance": "Solde",
+    "kpiSectionTitle": "Indicateurs clés",
     "income": "Revenus",
     "expenses": "Dépenses",
     "net": "Net",
@@ -50,10 +50,11 @@
     "help": {
       "title": "Comment utiliser le tableau de bord",
       "tips": [
-        "Utilisez le sélecteur de période (en haut à droite) pour changer la plage de dates",
+        "Le filtre en haut choisit la plage de dates et les sources d'import à inclure",
-        "Les cartes résumées affichent votre solde, revenus et dépenses pour la période sélectionnée",
+        "Les indicateurs clés (revenus, dépenses, net, taux d'épargne) portent sur le mois de référence choisi, avec leur variation vs le mois précédent et vs l'an dernier",
-        "Le graphique circulaire détaille vos dépenses par catégorie",
+        "La tuile « Valeur nette actuelle » vient du Bilan — elle n'est pas filtrée par source d'import",
-        "Les transactions récentes sont listées en bas de page"
+        "Les catégories en hausse/en baisse et le respect du budget résument les changements du mois de référence",
+        "Le graphique en barres classe vos dépenses par catégorie ; le graphique du bas en suit l'évolution dans le temps"
       ]
     }
   },
@@ -403,8 +404,7 @@
       "ytd": "Cumul annuel",
       "dollarVar": "$ Écart",
       "pctVar": "% Écart",
-      "noData": "Aucune donnée de budget ou de transaction pour cette période.",
+      "noData": "Aucune donnée de budget ou de transaction pour cette période."
-      "titlePrefix": "Budget vs Réel pour le mois de"
     },
     "export": "Exporter",
     "month": "Mois",

src/pages/DashboardPage.tsx

@@ -1,23 +1,40 @@
+// DashboardPage — home page at `/`.
+//
+// Converged onto the `/reports/cartes` model (Issue #279, epic #260): the KPI
+// row, top movers and budget adherence are the exact Cartes presentational
+// components, sourced from the same `getCartesSnapshot` reference-month
+// snapshot. Two Dashboard-specific widgets remain: the top-expense-categories
+// ranked bar chart (replacing the former expense-only pie) and the net-worth
+// tile (from the Bilan — a different metric from every transactional widget
+// here, see NetWorthTile's own header comment).
 import { useState, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Wallet, TrendingUp, TrendingDown } from "lucide-react";
 import { useDashboard } from "../hooks/useDashboard";
 import { PageHelp } from "../components/shared/PageHelp";
 import PeriodSelector from "../components/dashboard/PeriodSelector";
-import CategoryPieChart from "../components/dashboard/CategoryPieChart";
+import CategoryBarChart from "../components/reports/CategoryBarChart";
 import CategoriesV1DiscoveryBanner from "../components/dashboard/CategoriesV1DiscoveryBanner";
+import NetWorthTile from "../components/dashboard/NetWorthTile";
+import FilterPanel from "../components/reports/FilterPanel";
+import KpiCard from "../components/reports/cards/KpiCard";
+import IncomeExpenseOverlayChart from "../components/reports/cards/IncomeExpenseOverlayChart";
+import TopMoversList from "../components/reports/cards/TopMoversList";
+import BudgetAdherenceCard from "../components/reports/cards/BudgetAdherenceCard";
 import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
-import BudgetVsActualTable from "../components/reports/BudgetVsActualTable";
 import TransactionDetailModal from "../components/shared/TransactionDetailModal";
 import type { CategoryBreakdownItem } from "../shared/types";
 import { computeDateRange, buildMonthOptions } from "../utils/dateRange";
 
-const fmt = new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD" });
-
 export default function DashboardPage() {
   const { t, i18n } = useTranslation();
-  const { state, setPeriod, setCustomDates, setBudgetMonth } = useDashboard();
+  const {
-  const { summary, categoryBreakdown, categoryOverTime, budgetVsActual, period, isLoading } = state;
+    state,
+    setPeriod,
+    setCustomDates,
+    setReferencePeriod,
+    setAccountIds,
+  } = useDashboard();
+  const { categoryBreakdown, categoryOverTime, cartesSnapshot, period, isLoading } = state;
 
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
   const [detailModal, setDetailModal] = useState<CategoryBreakdownItem | null>(null);
@@ -37,35 +54,6 @@ export default function DashboardPage() {
     setDetailModal(item);
   }, []);
 
-  const balance = summary.totalAmount;
-  const balanceColor =
-    balance > 0
-      ? "text-[var(--positive)]"
-      : balance < 0
-        ? "text-[var(--negative)]"
-        : "text-[var(--primary)]";
-
-  const cards = [
-    {
-      labelKey: "dashboard.balance",
-      value: fmt.format(balance),
-      icon: Wallet,
-      color: balanceColor,
-    },
-    {
-      labelKey: "dashboard.income",
-      value: fmt.format(summary.incomeTotal),
-      icon: TrendingUp,
-      color: "text-[var(--positive)]",
-    },
-    {
-      labelKey: "dashboard.expenses",
-      value: fmt.format(Math.abs(summary.expenseTotal)),
-      icon: TrendingDown,
-      color: "text-[var(--negative)]",
-    },
-  ];
-
   const monthOptions = useMemo(() => buildMonthOptions(i18n.language), [i18n.language]);
 
   const { dateFrom, dateTo } = computeDateRange(period, state.customDateFrom, state.customDateTo);
@@ -73,11 +61,19 @@ export default function DashboardPage() {
   return (
     <div className={isLoading ? "opacity-50 pointer-events-none" : ""}>
       <CategoriesV1DiscoveryBanner />
-      <div className="relative flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+      <div className="relative flex items-center gap-3 mb-6">
-        <div className="flex items-center gap-3">
         <h1 className="text-2xl font-bold">{t("dashboard.title")}</h1>
         <PageHelp helpKey="dashboard" />
       </div>
+
+      {state.error && (
+        <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
+          {state.error}
+        </div>
+      )}
+
+      <FilterPanel
+        temporalControl={
           <PeriodSelector
             value={period}
             onChange={setPeriod}
@@ -85,46 +81,21 @@ export default function DashboardPage() {
             customDateTo={state.customDateTo}
             onCustomDateChange={setCustomDates}
           />
-      </div>
+        }
-
+        accountIds={state.accountIds}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        onAccountIdsChange={setAccountIds}
-        {cards.map((card) => (
+        accounts={state.accounts}
-          <div
-            key={card.labelKey}
-            className="bg-[var(--card)] rounded-xl p-5 border border-[var(--border)] shadow-sm"
-          >
-            <div className="flex items-center justify-between mb-3">
-              <span className="text-sm text-[var(--muted-foreground)]">
-                {t(card.labelKey)}
-              </span>
-              <card.icon size={20} className={card.color} />
-            </div>
-            <p className="text-2xl font-semibold">{card.value}</p>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
-        <div className="lg:col-span-1">
-          <h2 className="text-lg font-semibold mb-3">{t("dashboard.expensesByCategory")}</h2>
-          <CategoryPieChart
-            data={categoryBreakdown}
-            hiddenCategories={hiddenCategories}
-            onToggleHidden={toggleHidden}
-            onShowAll={showAll}
-            onViewDetails={viewDetails}
       />
-        </div>
+
-        <div className="lg:col-span-3">
+      <div className="flex items-center gap-2 mb-3 flex-wrap">
-          <h2 className="text-lg font-semibold mb-3 flex items-center gap-2 flex-wrap">
+        <h2 className="text-lg font-semibold">{t("dashboard.kpiSectionTitle")}</h2>
-            {t("reports.bva.titlePrefix")}
         <select
-              value={`${state.budgetYear}-${state.budgetMonth}`}
+          value={`${state.referenceYear}-${state.referenceMonth}`}
           onChange={(e) => {
             const [y, m] = e.target.value.split("-").map(Number);
-                setBudgetMonth(y, m);
+            setReferencePeriod(y, m);
           }}
-              className="text-base font-semibold bg-[var(--card)] border border-[var(--border)] rounded-lg px-2 py-0.5 cursor-pointer hover:bg-[var(--muted)] transition-colors"
+          className="text-sm font-medium 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}>
@@ -132,9 +103,75 @@ export default function DashboardPage() {
             </option>
           ))}
         </select>
-          </h2>
-          <BudgetVsActualTable data={budgetVsActual} />
       </div>
+
+      <div className="flex flex-wrap gap-3 mb-6">
+        <NetWorthTile data={state.netWorth} />
+        {cartesSnapshot && (
+          <>
+            <div className="flex-1 min-w-[180px]">
+              <KpiCard
+                id="income"
+                title={t("reports.cartes.income")}
+                kpi={cartesSnapshot.kpis.income}
+                format="currency"
+                deltaIsBadWhenUp={false}
+              />
+            </div>
+            <div className="flex-1 min-w-[180px]">
+              <KpiCard
+                id="expenses"
+                title={t("reports.cartes.expenses")}
+                kpi={cartesSnapshot.kpis.expenses}
+                format="currency"
+                deltaIsBadWhenUp={true}
+              />
+            </div>
+            <div className="flex-1 min-w-[180px]">
+              <KpiCard
+                id="net"
+                title={t("reports.cartes.net")}
+                kpi={cartesSnapshot.kpis.net}
+                format="currency"
+                deltaIsBadWhenUp={false}
+              />
+            </div>
+            <div className="flex-1 min-w-[180px]">
+              <KpiCard
+                id="savingsRate"
+                title={t("reports.cartes.savingsRate")}
+                kpi={cartesSnapshot.kpis.savingsRate}
+                format="percent"
+                deltaIsBadWhenUp={false}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      {cartesSnapshot && (
+        <>
+          <div className="mb-6">
+            <IncomeExpenseOverlayChart flow={cartesSnapshot.flow12Months} />
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-6">
+            <TopMoversList movers={cartesSnapshot.topMoversUp} direction="up" />
+            <TopMoversList movers={cartesSnapshot.topMoversDown} direction="down" />
+            <BudgetAdherenceCard adherence={cartesSnapshot.budgetAdherence} />
+          </div>
+        </>
+      )}
+
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold mb-3">{t("dashboard.expensesByCategory")}</h2>
+        <CategoryBarChart
+          data={categoryBreakdown}
+          hiddenCategories={hiddenCategories}
+          onToggleHidden={toggleHidden}
+          onShowAll={showAll}
+          onViewDetails={viewDetails}
+        />
       </div>
 
       <div className="mb-6">

src/services/dashboardService.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { getExpensesByCategory } from "./dashboardService";
+import { getExpensesByCategory, deriveNetWorthTile } from "./dashboardService";
+import type { SnapshotTotalPoint } from "./balance.service";
 
 vi.mock("./db", () => {
   const getDb = vi.fn();
@@ -63,3 +64,50 @@ describe("getExpensesByCategory — accountIds filter (Issue #273)", () => {
     expect(params).toEqual([2]);
   });
 });
+
+describe("deriveNetWorthTile (Issue #279)", () => {
+  const totals: SnapshotTotalPoint[] = [
+    { snapshot_date: "2026-01-31", total: 1000 },
+    { snapshot_date: "2026-02-28", total: 1234.56 },
+  ];
+
+  it("is hidden when there is no balance account at all", () => {
+    expect(deriveNetWorthTile(0, false, totals)).toEqual({
+      visible: false,
+      total: null,
+      asOfDate: null,
+    });
+  });
+
+  it("is hidden when accounts exist but no snapshot has ever been recorded (never a misleading $0)", () => {
+    expect(deriveNetWorthTile(3, false, [])).toEqual({
+      visible: false,
+      total: null,
+      asOfDate: null,
+    });
+  });
+
+  it("is hidden when accounts exist but no snapshot has ever been recorded, even if totals is non-empty (defensive)", () => {
+    expect(deriveNetWorthTile(3, false, totals)).toEqual({
+      visible: false,
+      total: null,
+      asOfDate: null,
+    });
+  });
+
+  it("is visible with the latest (last) point once accounts and a snapshot both exist", () => {
+    expect(deriveNetWorthTile(3, true, totals)).toEqual({
+      visible: true,
+      total: 1234.56,
+      asOfDate: "2026-02-28",
+    });
+  });
+
+  it("stays hidden if the two signals disagree with an empty totals series (defensive guard)", () => {
+    expect(deriveNetWorthTile(3, true, [])).toEqual({
+      visible: false,
+      total: null,
+      asOfDate: null,
+    });
+  });
+});

src/services/dashboardService.ts

@@ -1,5 +1,7 @@
 import { getDb } from "./db";
 import { inPlaceholders } from "../utils/sqlFilters";
+import { deriveLandingState } from "../components/balance/balanceLanding";
+import type { SnapshotTotalPoint } from "./balance.service";
 import type {
   DashboardSummary,
   CategoryBreakdownItem,
@@ -164,3 +166,47 @@ export async function getRecentTransactions(
     [limit]
   );
 }
+
+// --- Net-worth tile (Issue #279) ---
+//
+// The Dashboard's net-worth tile surfaces the Bilan's latest total
+// (`getSnapshotTotalsByDate`, balance.service.ts:1767) — a DIFFERENT metric
+// from every other Dashboard widget: it is the latest snapshot of account
+// balances, not a transaction P&L. It must never be confused with (or scoped
+// by) the transactional account/import-source filter, and must never render
+// a misleading "$0" before any snapshot has ever been recorded.
+
+export interface NetWorthTileData {
+  visible: boolean;
+  total: number | null;
+  asOfDate: string | null;
+}
+
+const EMPTY_NET_WORTH_TILE: NetWorthTileData = {
+  visible: false,
+  total: null,
+  asOfDate: null,
+};
+
+/**
+ * Shapes the net-worth tile from the same two signals BalancePage's landing
+ * state already uses (`deriveLandingState`) — reused here rather than
+ * re-inferring "no data" from nulls, per the #279 review caveat. The tile
+ * stays hidden (never a misleading "$0") unless at least one balance account
+ * exists AND at least one snapshot has ever been recorded; `totals` (the
+ * `getSnapshotTotalsByDate` series, ascending by date) is otherwise expected
+ * to carry at least one point, but a defensive check guards a theoretical
+ * mismatch between the two independent queries.
+ */
+export function deriveNetWorthTile(
+  accountsCount: number,
+  hasAnySnapshot: boolean,
+  totals: SnapshotTotalPoint[]
+): NetWorthTileData {
+  if (deriveLandingState(accountsCount, hasAnySnapshot) !== "populated") {
+    return EMPTY_NET_WORTH_TILE;
+  }
+  const latest = totals[totals.length - 1];
+  if (!latest) return EMPTY_NET_WORTH_TILE;
+  return { visible: true, total: latest.total, asOfDate: latest.snapshot_date };
+}

src/services/reportService.cartes.test.ts

@@ -470,13 +470,14 @@ describe("getCartesSnapshot", () => {
     expect(worst.overrunPct).toBeCloseTo(75, 5);
   });
 
-  // --- accountIds filter (Issue #273) ---
+  // --- accountIds filter (Issues #273 / #279) ---
   //
-  // getCartesSnapshot must forward accountIds to its two sub-reports that
+  // getCartesSnapshot must forward accountIds to EVERY sub-query so the whole
+  // dashboard honours an active account filter: the two sub-reports that
   // support it (getCompareMonthOverMonth for top movers, getBudgetVsActualData
-  // for budget adherence) — the review caveat that flagged this: omitting it
+  // for budget adherence) AND the KPI/sparkline/seasonality series
-  // would let this dashboard silently ignore an active account filter even
+  // (fetchMonthlyFlows, fetchSeasonality). Omitting it anywhere would let the
-  // though its own building blocks respect it.
+  // dashboard silently mix filtered and unfiltered figures on the same screen.
 
   it("forwards accountIds to the compare (top movers) sub-report", async () => {
     mockSelect.mockImplementation(() => Promise.resolve([]));
@@ -506,6 +507,32 @@ describe("getCartesSnapshot", () => {
     }
   });
 
+  it("forwards accountIds to the monthly-flows series (KPIs, sparklines, overlay)", async () => {
+    mockSelect.mockImplementation(() => Promise.resolve([]));
+
+    await getCartesSnapshot(2026, 3, "month", [3, 8]);
+
+    // fetchMonthlyFlows is the only snapshot query selecting a "%Y-%m" month.
+    const flowCall = mockSelect.mock.calls.find(([sql]) =>
+      (sql as string).includes("strftime('%Y-%m', date) AS month"),
+    )!;
+    expect(flowCall[0]).toContain("AND source_id IN ($3, $4)");
+    expect(flowCall[1]).toEqual(expect.arrayContaining([3, 8]));
+  });
+
+  it("forwards accountIds to the seasonality series", async () => {
+    mockSelect.mockImplementation(() => Promise.resolve([]));
+
+    await getCartesSnapshot(2026, 3, "month", [3, 8]);
+
+    // fetchSeasonality is the only snapshot query filtering on a "%m" month.
+    const seasonalityCall = mockSelect.mock.calls.find(([sql]) =>
+      (sql as string).includes("strftime('%m', date) = $1"),
+    )!;
+    expect(seasonalityCall[0]).toContain("AND source_id IN ($4, $5)");
+    expect(seasonalityCall[1]).toEqual(expect.arrayContaining([3, 8]));
+  });
+
   it("without accountIds, no sub-report SQL carries a source_id clause (regression)", async () => {
     mockSelect.mockImplementation(() => Promise.resolve([]));
 

src/services/reportService.ts

@@ -1186,18 +1186,25 @@ interface RawMonthFlow {
 async function fetchMonthlyFlows(
   dateFrom: string,
   dateTo: string,
+  accountIds?: number[],
 ): Promise<RawMonthFlow[]> {
   const db = await getDb();
+  const params: unknown[] = [dateFrom, dateTo];
+  const accountPlaceholders = inPlaceholders(accountIds, 3);
+  const accountClause = accountPlaceholders
+    ? ` AND source_id IN (${accountPlaceholders})`
+    : "";
+  if (accountPlaceholders) params.push(...accountIds!);
   return db.select<RawMonthFlow[]>(
     `SELECT
         strftime('%Y-%m', date) AS month,
         COALESCE(SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END), 0) AS income,
         ABS(COALESCE(SUM(CASE WHEN amount < 0 THEN amount ELSE 0 END), 0)) AS expenses
       FROM transactions
-      WHERE date >= $1 AND date <= $2
+      WHERE date >= $1 AND date <= $2${accountClause}
       GROUP BY month
       ORDER BY month ASC`,
-    [dateFrom, dateTo],
+    params,
   );
 }
 
@@ -1210,9 +1217,16 @@ async function fetchSeasonality(
   month: number,
   yearFrom: number,
   yearTo: number,
+  accountIds?: number[],
 ): Promise<RawSeasonalityRow[]> {
   const db = await getDb();
   const mm = String(month).padStart(2, "0");
+  const params: unknown[] = [mm, yearFrom, yearTo];
+  const accountPlaceholders = inPlaceholders(accountIds, 4);
+  const accountClause = accountPlaceholders
+    ? ` AND source_id IN (${accountPlaceholders})`
+    : "";
+  if (accountPlaceholders) params.push(...accountIds!);
   return db.select<RawSeasonalityRow[]>(
     `SELECT
         CAST(strftime('%Y', date) AS INTEGER) AS year,
@@ -1220,10 +1234,10 @@ async function fetchSeasonality(
       FROM transactions
       WHERE strftime('%m', date) = $1
         AND CAST(strftime('%Y', date) AS INTEGER) >= $2
-        AND CAST(strftime('%Y', date) AS INTEGER) <= $3
+        AND CAST(strftime('%Y', date) AS INTEGER) <= $3${accountClause}
       GROUP BY year
       ORDER BY year DESC`,
-    [mm, yearFrom, yearTo],
+    params,
   );
 }
 
@@ -1240,12 +1254,12 @@ async function fetchSeasonality(
  *   4. Budget vs actual for the reference month.
  *   5. Seasonality: same calendar month across the two prior years.
  *
- * `accountIds` (Issue #273) is forwarded to the two sub-reports that already
+ * `accountIds` (Issues #273/#279) is forwarded to every sub-query so the whole
- * support it (`getCompareMonthOverMonth` for top movers, `getBudgetVsActualData`
+ * dashboard honours an active account filter: the top-movers
- * for budget adherence) — omitting it here would let this dashboard silently
+ * (`getCompareMonthOverMonth`) and budget (`getBudgetVsActualData`) sub-reports,
- * ignore an active account filter even though its building blocks respect it.
+ * and the KPI/sparkline/seasonality series (`fetchMonthlyFlows`,
- * The KPI/sparkline/seasonality series (`fetchMonthlyFlows`, `fetchSeasonality`)
+ * `fetchSeasonality`). Omitting it anywhere would let the dashboard silently mix
- * do not take an account filter yet; that is out of scope for this issue.
+ * filtered and unfiltered figures on the same screen.
  */
 export async function getCartesSnapshot(
   referenceYear: number,
@@ -1261,8 +1275,8 @@ export async function getCartesSnapshot(
 
   // Seasonality range: previous 2 years for the same calendar month.
   const [seasonalityRows, flowRows, momRows, budgetRows] = await Promise.all([
-    fetchSeasonality(referenceMonth, referenceYear - 2, referenceYear - 1),
+    fetchSeasonality(referenceMonth, referenceYear - 2, referenceYear - 1, accountIds),
-    fetchMonthlyFlows(windowStartIso, refEnd),
+    fetchMonthlyFlows(windowStartIso, refEnd, accountIds),
     getCompareMonthOverMonth(referenceYear, referenceMonth, accountIds),
     getBudgetVsActualData(referenceYear, referenceMonth, accountIds),
   ]);