From ac9c8afc4ac434c7172e23bb0bce1824a127bda8 Mon Sep 17 00:00:00 2001 From: le king fu Date: Tue, 14 Apr 2026 14:47:55 -0400 Subject: [PATCH] feat: reports hub with highlights panel and detailed highlights page (#71) - 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) --- .../reports/HighlightsTopMoversChart.tsx | 76 +++++ .../reports/HighlightsTopMoversTable.tsx | 148 +++++++++ .../reports/HighlightsTopTransactionsList.tsx | 79 +++++ src/components/reports/HubHighlightsPanel.tsx | 55 ++++ src/components/reports/HubNetBalanceTile.tsx | 35 +++ src/components/reports/HubReportNavCard.tsx | 24 ++ src/components/reports/HubTopMoversTile.tsx | 105 +++++++ .../reports/HubTopTransactionsTile.tsx | 54 ++++ src/hooks/useHighlights.ts | 32 +- src/i18n/locales/en.json | 22 +- src/i18n/locales/fr.json | 22 +- src/pages/ReportsHighlightsPage.tsx | 91 +++++- src/pages/ReportsPage.tsx | 290 ++++-------------- src/services/reportService.test.ts | 124 +++++++- src/services/reportService.ts | 174 +++++++++++ src/shared/types/index.ts | 24 ++ 16 files changed, 1102 insertions(+), 253 deletions(-) create mode 100644 src/components/reports/HighlightsTopMoversChart.tsx create mode 100644 src/components/reports/HighlightsTopMoversTable.tsx create mode 100644 src/components/reports/HighlightsTopTransactionsList.tsx create mode 100644 src/components/reports/HubHighlightsPanel.tsx create mode 100644 src/components/reports/HubNetBalanceTile.tsx create mode 100644 src/components/reports/HubReportNavCard.tsx create mode 100644 src/components/reports/HubTopMoversTile.tsx create mode 100644 src/components/reports/HubTopTransactionsTile.tsx diff --git a/src/components/reports/HighlightsTopMoversChart.tsx b/src/components/reports/HighlightsTopMoversChart.tsx new file mode 100644 index 0000000..71a7aa6 --- /dev/null +++ b/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 ( +
+ {t("reports.empty.noData")} +
+ ); + } + + 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 ( +
+ + + ({ color: d.color, index: d.index }))} + /> + formatCurrency(v, i18n.language)} + stroke="var(--muted-foreground)" + fontSize={11} + /> + + + + typeof value === "number" ? formatCurrency(value, i18n.language) : String(value) + } + contentStyle={{ + backgroundColor: "var(--card)", + border: "1px solid var(--border)", + borderRadius: "0.5rem", + }} + /> + + {chartData.map((entry) => ( + + ))} + + + +
+ ); +} diff --git a/src/components/reports/HighlightsTopMoversTable.tsx b/src/components/reports/HighlightsTopMoversTable.tsx new file mode 100644 index 0000000..57627b5 --- /dev/null +++ b/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("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") => ( + 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 && {sortDir === "asc" ? "▲" : "▼"}} + + ); + + return ( +
+
+ + + + {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")} + + + + {sorted.length === 0 ? ( + + + + ) : ( + sorted.map((mover) => ( + + + + + + + + )) + )} + +
+ {t("reports.empty.noData")} +
+ + + {mover.categoryName} + + + {formatCurrency(mover.previousAmount, i18n.language)} + + {formatCurrency(mover.currentAmount, i18n.language)} + = 0 ? "var(--negative, #ef4444)" : "var(--positive, #10b981)", + }} + > + {formatSignedCurrency(mover.deltaAbs, i18n.language)} + = 0 ? "var(--negative, #ef4444)" : "var(--positive, #10b981)", + }} + > + {formatPct(mover.deltaPct, i18n.language)} +
+
+
+ ); +} diff --git a/src/components/reports/HighlightsTopTransactionsList.tsx b/src/components/reports/HighlightsTopTransactionsList.tsx new file mode 100644 index 0000000..06fe732 --- /dev/null +++ b/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 ( +
+
+

{t("reports.highlights.topTransactions")}

+
+ {([30, 60, 90] as const).map((days) => ( + + ))} +
+
+ {transactions.length === 0 ? ( +

+ {t("reports.empty.noData")} +

+ ) : ( +
    + {transactions.map((tx) => ( +
  • + + + {tx.date} + + {tx.description} + {tx.category_name && ( + + {tx.category_name} + + )} + = 0 ? "var(--positive, #10b981)" : "var(--foreground)" }} + > + {formatAmount(tx.amount, i18n.language)} + +
    • + ))} +
+ )} +
+ ); +} diff --git a/src/components/reports/HubHighlightsPanel.tsx b/src/components/reports/HubHighlightsPanel.tsx new file mode 100644 index 0000000..a2e6d2d --- /dev/null +++ b/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 ( +
+ {error} +
+ ); + } + + if (!data) { + return ( +
+ {isLoading ? t("common.loading") : t("reports.empty.noData")} +
+ ); + } + + const series = data.monthlyBalanceSeries.map((m) => m.netBalance); + + return ( +
+

+ {t("reports.hub.highlights")} +

+
+ + + + +
+
+ ); +} diff --git a/src/components/reports/HubNetBalanceTile.tsx b/src/components/reports/HubNetBalanceTile.tsx new file mode 100644 index 0000000..fd65404 --- /dev/null +++ b/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 ( +
+ + {label} + + + {formatSigned(amount, i18n.language)} + + +
+ ); +} diff --git a/src/components/reports/HubReportNavCard.tsx b/src/components/reports/HubReportNavCard.tsx new file mode 100644 index 0000000..def94e1 --- /dev/null +++ b/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 ( + +
{icon}
+

+ {title} +

+

{description}

+ + ); +} diff --git a/src/components/reports/HubTopMoversTile.tsx b/src/components/reports/HubTopMoversTile.tsx new file mode 100644 index 0000000..2ca13ee --- /dev/null +++ b/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 ( +
+
+ + {t("reports.highlights.topMovers")} + +
+ + +
+
+ {visible.length === 0 ? ( +

{t("reports.empty.noData")}

+ ) : ( +
    + {visible.map((mover) => { + const isUp = mover.deltaAbs >= 0; + const Icon = isUp ? ArrowUpRight : ArrowDownRight; + const color = isUp ? "var(--negative, #ef4444)" : "var(--positive, #10b981)"; + return ( +
  • + + + {mover.categoryName} + + + + + {mode === "abs" + ? formatCurrency(mover.deltaAbs, i18n.language) + : formatPct(mover.deltaPct, i18n.language)} + + +
    • + ); + })} +
+ )} +

+ {t("reports.highlights.vsLastMonth")} +

+
+ ); +} diff --git a/src/components/reports/HubTopTransactionsTile.tsx b/src/components/reports/HubTopTransactionsTile.tsx new file mode 100644 index 0000000..146b53c --- /dev/null +++ b/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 ( +
+ + {t("reports.highlights.topTransactions")} + + {visible.length === 0 ? ( +

{t("reports.empty.noData")}

+ ) : ( +
    + {visible.map((tx) => ( +
  • + + + {tx.date} + + {tx.description} + = 0 ? "var(--positive, #10b981)" : "var(--foreground)" }} + > + {formatAmount(tx.amount, i18n.language)} + +
    • + ))} +
+ )} +
+ ); +} diff --git a/src/hooks/useHighlights.ts b/src/hooks/useHighlights.ts index 6b10d8c..671e8bd 100644 --- a/src/hooks/useHighlights.ts +++ b/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 stub: HighlightsData = { netBalanceCurrent: 0, netBalanceYtd: 0 }; + const data = await getHighlights(windowDays, referenceDate); 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, from, to]); + fetch(state.windowDays, 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 }; } diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 2c41f21..3a56138 100644 --- a/src/i18n/locales/en.json +++ b/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", diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index d83a3d6..4033c35 100644 --- a/src/i18n/locales/fr.json +++ b/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", diff --git a/src/pages/ReportsHighlightsPage.tsx b/src/pages/ReportsHighlightsPage.tsx index dbbc798..b6d1a58 100644 --- a/src/pages/ReportsHighlightsPage.tsx +++ b/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(() => readViewMode(STORAGE_KEY)); + + const preserveSearch = typeof window !== "undefined" ? window.location.search : ""; + return ( -
-

{t("reports.hub.highlights")}

-

{t("common.underConstruction")}

+
+
+ + + +

{t("reports.hub.highlights")}

+
+ +
+ + +
+ + {error && ( +
+ {error} +
+ )} + + {data && ( +
+
+

+ {t("reports.highlights.balances")} +

+
+ m.netBalance)} + /> + m.netBalance)} + /> +
+
+ +
+

+ {t("reports.highlights.topMovers")} +

+ {viewMode === "chart" ? ( + + ) : ( + + )} +
+ +
+ +
+
+ )}
); } diff --git a/src/pages/ReportsPage.tsx b/src/pages/ReportsPage.tsx index 5931cde..0785c07 100644 --- a/src/pages/ReportsPage.tsx +++ b/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 { useReports } from "../hooks/useReports"; +import { Sparkles, TrendingUp, Scale, Search } from "lucide-react"; 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 MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable"; -import CategoryBarChart from "../components/reports/CategoryBarChart"; -import CategoryTable from "../components/reports/CategoryTable"; -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"]; +import HubHighlightsPanel from "../components/reports/HubHighlightsPanel"; +import HubReportNavCard from "../components/reports/HubReportNavCard"; +import { useHighlights } from "../hooks/useHighlights"; +import { useReportsPeriod } from "../hooks/useReportsPeriod"; export default function ReportsPage() { - const { t, i18n } = useTranslation(); - const { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setSourceId, setCategoryType } = useReports(); - const [sources, setSources] = useState([]); + const { t } = useTranslation(); + const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod(); + const { data, isLoading, error } = useHighlights(); - useEffect(() => { - getAllSources().then(setSources); - }, []); - - const [hiddenCategories, setHiddenCategories] = useState>(new Set()); - const [detailModal, setDetailModal] = useState(null); - const [showAmounts, setShowAmounts] = useState(() => localStorage.getItem("reports-show-amounts") === "true"); - const [viewMode, setViewMode] = useState<"chart" | "table">(() => - (localStorage.getItem("reports-view-mode") as "chart" | "table") || "chart" - ); - - const toggleHidden = useCallback((name: string) => { - setHiddenCategories((prev) => { - const next = new Set(prev); - if (next.has(name)) next.delete(name); - else next.add(name); - return next; - }); - }, []); - - const showAll = useCallback(() => setHiddenCategories(new Set()), []); - - const viewDetails = useCallback((item: CategoryBreakdownItem) => { - setDetailModal(item); - }, []); - - 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); + const preserveSearch = typeof window !== "undefined" ? window.location.search : ""; + const navCards = [ + { + to: `/reports/highlights${preserveSearch}`, + icon: , + title: t("reports.hub.highlights"), + description: t("reports.hub.highlightsDescription"), + }, + { + to: `/reports/trends${preserveSearch}`, + icon: , + title: t("reports.hub.trends"), + description: t("reports.hub.trendsDescription"), + }, + { + to: `/reports/compare${preserveSearch}`, + icon: , + title: t("reports.hub.compare"), + description: t("reports.hub.compareDescription"), + }, + { + to: `/reports/category${preserveSearch}`, + icon: , + title: t("reports.hub.categoryZoom"), + description: t("reports.hub.categoryZoomDescription"), + }, + ]; return ( -
+
- {state.tab === "budgetVsActual" ? ( -

- {t("reports.bva.titlePrefix")} - -

- ) : ( -

{t("reports.title")}

- )} +

{t("reports.hub.title")}

- {state.tab !== "budgetVsActual" && ( - - )} -
- -
- {TABS.map((tab) => ( - - ))} - {["trends", "byCategory", "overTime"].includes(state.tab) && ( - <> -
- {([ - { mode: "chart" as const, icon: , label: t("reports.viewMode.chart") }, - { mode: "table" as const, icon: , label: t("reports.viewMode.table") }, - ]).map(({ mode, icon, label }) => ( - - ))} - {viewMode === "chart" && ( - <> -
- - - )} - - )} -
- - {state.error && ( -
- {state.error} -
- )} - -
-
- {state.tab === "trends" && ( - viewMode === "chart" ? ( - - ) : ( - - ) - )} - {state.tab === "byCategory" && ( - viewMode === "chart" ? ( - - ) : ( - - ) - )} - {state.tab === "overTime" && ( - viewMode === "chart" ? ( - - ) : ( - - ) - )} - {state.tab === "budgetVsActual" && ( - - )} -
- {showFilterPanel && ( - - )} -
- - {detailModal && ( - setDetailModal(null)} + - )} + + + + +
+

+ {t("reports.hub.explore")} +

+
+ {navCards.map((card) => ( + + ))} +
+
); } diff --git a/src/services/reportService.test.ts b/src/services/reportService.test.ts index 5b5fa23..f842d29 100644 --- a/src/services/reportService.test.ts +++ b/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); + }); +}); diff --git a/src/services/reportService.ts b/src/services/reportService.ts index 3090921..12b306b 100644 --- a/src/services/reportService.ts +++ b/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 { + 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>( + `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>( + `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>( + `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( + `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, + }; +} diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index e8d5b38..a60530c 100644 --- a/src/shared/types/index.ts +++ b/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; -- 2.45.2