feat: reports hub + highlights panel + detailed highlights page (#71) #90
16 changed files with 1102 additions and 253 deletions
76
src/components/reports/HighlightsTopMoversChart.tsx
Normal file
76
src/components/reports/HighlightsTopMoversChart.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
148
src/components/reports/HighlightsTopMoversTable.tsx
Normal file
148
src/components/reports/HighlightsTopMoversTable.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
79
src/components/reports/HighlightsTopTransactionsList.tsx
Normal file
79
src/components/reports/HighlightsTopTransactionsList.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
55
src/components/reports/HubHighlightsPanel.tsx
Normal file
55
src/components/reports/HubHighlightsPanel.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/components/reports/HubNetBalanceTile.tsx
Normal file
35
src/components/reports/HubNetBalanceTile.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
src/components/reports/HubReportNavCard.tsx
Normal file
24
src/components/reports/HubReportNavCard.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
105
src/components/reports/HubTopMoversTile.tsx
Normal file
105
src/components/reports/HubTopMoversTile.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/components/reports/HubTopTransactionsTile.tsx
Normal file
54
src/components/reports/HubTopTransactionsTile.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,11 @@
|
||||||
import { useReducer, useEffect, useRef, useCallback } from "react";
|
import { useReducer, useEffect, useRef, useCallback } from "react";
|
||||||
|
import type { HighlightsData } from "../shared/types";
|
||||||
|
import { getHighlights } from "../services/reportService";
|
||||||
import { useReportsPeriod } from "./useReportsPeriod";
|
import { useReportsPeriod } from "./useReportsPeriod";
|
||||||
|
|
||||||
// Stub highlights shape — to be fleshed out in Issue #71.
|
|
||||||
export interface HighlightsData {
|
|
||||||
netBalanceCurrent: number;
|
|
||||||
netBalanceYtd: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
data: HighlightsData | null;
|
data: HighlightsData | null;
|
||||||
|
windowDays: 30 | 60 | 90;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
error: string | null;
|
error: string | null;
|
||||||
}
|
}
|
||||||
|
|
@ -16,10 +13,12 @@ interface State {
|
||||||
type Action =
|
type Action =
|
||||||
| { type: "SET_LOADING"; payload: boolean }
|
| { type: "SET_LOADING"; payload: boolean }
|
||||||
| { type: "SET_DATA"; payload: HighlightsData }
|
| { 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 = {
|
const initialState: State = {
|
||||||
data: null,
|
data: null,
|
||||||
|
windowDays: 30,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
error: null,
|
error: null,
|
||||||
};
|
};
|
||||||
|
|
@ -32,6 +31,8 @@ function reducer(state: State, action: Action): State {
|
||||||
return { ...state, data: action.payload, isLoading: false, error: null };
|
return { ...state, data: action.payload, isLoading: false, error: null };
|
||||||
case "SET_ERROR":
|
case "SET_ERROR":
|
||||||
return { ...state, error: action.payload, isLoading: false };
|
return { ...state, error: action.payload, isLoading: false };
|
||||||
|
case "SET_WINDOW_DAYS":
|
||||||
|
return { ...state, windowDays: action.payload };
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
@ -42,14 +43,13 @@ export function useHighlights() {
|
||||||
const [state, dispatch] = useReducer(reducer, initialState);
|
const [state, dispatch] = useReducer(reducer, initialState);
|
||||||
const fetchIdRef = useRef(0);
|
const fetchIdRef = useRef(0);
|
||||||
|
|
||||||
const fetch = useCallback(async () => {
|
const fetch = useCallback(async (windowDays: 30 | 60 | 90, referenceDate: string) => {
|
||||||
const id = ++fetchIdRef.current;
|
const id = ++fetchIdRef.current;
|
||||||
dispatch({ type: "SET_LOADING", payload: true });
|
dispatch({ type: "SET_LOADING", payload: true });
|
||||||
try {
|
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;
|
if (id !== fetchIdRef.current) return;
|
||||||
dispatch({ type: "SET_DATA", payload: stub });
|
dispatch({ type: "SET_DATA", payload: data });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (id !== fetchIdRef.current) return;
|
if (id !== fetchIdRef.current) return;
|
||||||
dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
|
dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
|
||||||
|
|
@ -57,8 +57,12 @@ export function useHighlights() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
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 };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -391,9 +391,29 @@
|
||||||
"title": "Reports",
|
"title": "Reports",
|
||||||
"explore": "Explore",
|
"explore": "Explore",
|
||||||
"highlights": "Highlights",
|
"highlights": "Highlights",
|
||||||
|
"highlightsDescription": "What moved this month",
|
||||||
"trends": "Trends",
|
"trends": "Trends",
|
||||||
|
"trendsDescription": "Where you're heading over 12 months",
|
||||||
"compare": "Compare",
|
"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": {
|
"empty": {
|
||||||
"noData": "No data for this period",
|
"noData": "No data for this period",
|
||||||
|
|
|
||||||
|
|
@ -391,9 +391,29 @@
|
||||||
"title": "Rapports",
|
"title": "Rapports",
|
||||||
"explore": "Explorer",
|
"explore": "Explorer",
|
||||||
"highlights": "Faits saillants",
|
"highlights": "Faits saillants",
|
||||||
|
"highlightsDescription": "Ce qui a bougé ce mois-ci",
|
||||||
"trends": "Tendances",
|
"trends": "Tendances",
|
||||||
|
"trendsDescription": "Où vous allez sur 12 mois",
|
||||||
"compare": "Comparables",
|
"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": {
|
"empty": {
|
||||||
"noData": "Aucune donnée pour cette période",
|
"noData": "Aucune donnée pour cette période",
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,96 @@
|
||||||
|
import { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
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() {
|
export default function ReportsHighlightsPage() {
|
||||||
const { t } = useTranslation();
|
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 (
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,249 +1,73 @@
|
||||||
import { useState, useCallback, useMemo, useEffect } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
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 { 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 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() {
|
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 (
|
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="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
||||||
<div className="flex items-center gap-3">
|
<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" />
|
<PageHelp helpKey="reports" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
import { getCategoryOverTime } from "./reportService";
|
import { getCategoryOverTime, getHighlights } from "./reportService";
|
||||||
|
|
||||||
// Mock the db module
|
// Mock the db module
|
||||||
vi.mock("./db", () => ({
|
vi.mock("./db", () => ({
|
||||||
|
|
@ -144,3 +144,125 @@ describe("getCategoryOverTime", () => {
|
||||||
expect(result.data[0]).toEqual({ month: "2025-01", Food: 300, Other: 150 });
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,10 @@ import type {
|
||||||
CategoryBreakdownItem,
|
CategoryBreakdownItem,
|
||||||
CategoryOverTimeData,
|
CategoryOverTimeData,
|
||||||
CategoryOverTimeItem,
|
CategoryOverTimeItem,
|
||||||
|
HighlightsData,
|
||||||
|
HighlightMover,
|
||||||
|
MonthBalance,
|
||||||
|
RecentTransaction,
|
||||||
} from "../shared/types";
|
} from "../shared/types";
|
||||||
|
|
||||||
export async function getMonthlyTrends(
|
export async function getMonthlyTrends(
|
||||||
|
|
@ -166,3 +170,173 @@ export async function getCategoryOverTime(
|
||||||
categoryIds,
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -278,6 +278,30 @@ export interface RecentTransaction {
|
||||||
|
|
||||||
export type ReportTab = "trends" | "byCategory" | "overTime" | "budgetVsActual";
|
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 {
|
export interface MonthlyTrendItem {
|
||||||
month: string; // "2025-01"
|
month: string; // "2025-01"
|
||||||
income: number;
|
income: number;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue