Compare commits
No commits in common. "5d206d5fafabf779ed81e70b231bc80bf5dca247" and "a26d642b1bdc8691e1da388992e5097fb455dfb6" have entirely different histories.
5d206d5faf
...
a26d642b1b
16 changed files with 250 additions and 1099 deletions
|
|
@ -1,76 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
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,11 +1,14 @@
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
@ -13,12 +16,10 @@ 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,
|
||||||
};
|
};
|
||||||
|
|
@ -31,8 +32,6 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
@ -43,13 +42,14 @@ 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 (windowDays: 30 | 60 | 90, referenceDate: string) => {
|
const fetch = useCallback(async () => {
|
||||||
const id = ++fetchIdRef.current;
|
const id = ++fetchIdRef.current;
|
||||||
dispatch({ type: "SET_LOADING", payload: true });
|
dispatch({ type: "SET_LOADING", payload: true });
|
||||||
try {
|
try {
|
||||||
const data = await getHighlights(windowDays, referenceDate);
|
// Real implementation in Issue #71 will call reportService.getHighlights
|
||||||
|
const stub: HighlightsData = { netBalanceCurrent: 0, netBalanceYtd: 0 };
|
||||||
if (id !== fetchIdRef.current) return;
|
if (id !== fetchIdRef.current) return;
|
||||||
dispatch({ type: "SET_DATA", payload: data });
|
dispatch({ type: "SET_DATA", payload: stub });
|
||||||
} 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,12 +57,8 @@ export function useHighlights() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch(state.windowDays, to);
|
fetch();
|
||||||
}, [fetch, state.windowDays, to]);
|
}, [fetch, from, to]);
|
||||||
|
|
||||||
const setWindowDays = useCallback((d: 30 | 60 | 90) => {
|
return { ...state, from, to };
|
||||||
dispatch({ type: "SET_WINDOW_DAYS", payload: d });
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { ...state, setWindowDays, from, to };
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -391,29 +391,9 @@
|
||||||
"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",
|
||||||
"compareDescription": "Month, year, and budget comparisons",
|
"categoryZoom": "Category Analysis"
|
||||||
"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,29 +391,9 @@
|
||||||
"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",
|
||||||
"compareDescription": "Comparaisons mois, année et budget",
|
"categoryZoom": "Analyse par catégorie"
|
||||||
"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,96 +1,11 @@
|
||||||
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={isLoading ? "opacity-60" : ""}>
|
<div className="p-8 text-center text-[var(--muted-foreground)]">
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<h1 className="text-2xl font-bold mb-4">{t("reports.hub.highlights")}</h1>
|
||||||
<Link
|
<p>{t("common.underConstruction")}</p>
|
||||||
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,73 +1,249 @@
|
||||||
|
import { useState, useCallback, useMemo, useEffect } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Sparkles, TrendingUp, Scale, Search } from "lucide-react";
|
import { Hash, Table, BarChart3 } 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 HubHighlightsPanel from "../components/reports/HubHighlightsPanel";
|
import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
|
||||||
import HubReportNavCard from "../components/reports/HubReportNavCard";
|
import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
|
||||||
import { useHighlights } from "../hooks/useHighlights";
|
import CategoryBarChart from "../components/reports/CategoryBarChart";
|
||||||
import { useReportsPeriod } from "../hooks/useReportsPeriod";
|
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"];
|
||||||
|
|
||||||
export default function ReportsPage() {
|
export default function ReportsPage() {
|
||||||
const { t } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
|
const { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setSourceId, setCategoryType } = useReports();
|
||||||
const { data, isLoading, error } = useHighlights();
|
const [sources, setSources] = useState<ImportSource[]>([]);
|
||||||
|
|
||||||
const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
|
useEffect(() => {
|
||||||
const navCards = [
|
getAllSources().then(setSources);
|
||||||
{
|
}, []);
|
||||||
to: `/reports/highlights${preserveSearch}`,
|
|
||||||
icon: <Sparkles size={24} />,
|
const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
|
||||||
title: t("reports.hub.highlights"),
|
const [detailModal, setDetailModal] = useState<CategoryBreakdownItem | null>(null);
|
||||||
description: t("reports.hub.highlightsDescription"),
|
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"
|
||||||
to: `/reports/trends${preserveSearch}`,
|
);
|
||||||
icon: <TrendingUp size={24} />,
|
|
||||||
title: t("reports.hub.trends"),
|
const toggleHidden = useCallback((name: string) => {
|
||||||
description: t("reports.hub.trendsDescription"),
|
setHiddenCategories((prev) => {
|
||||||
},
|
const next = new Set(prev);
|
||||||
{
|
if (next.has(name)) next.delete(name);
|
||||||
to: `/reports/compare${preserveSearch}`,
|
else next.add(name);
|
||||||
icon: <Scale size={24} />,
|
return next;
|
||||||
title: t("reports.hub.compare"),
|
});
|
||||||
description: t("reports.hub.compareDescription"),
|
}, []);
|
||||||
},
|
|
||||||
{
|
const showAll = useCallback(() => setHiddenCategories(new Set()), []);
|
||||||
to: `/reports/category${preserveSearch}`,
|
|
||||||
icon: <Search size={24} />,
|
const viewDetails = useCallback((item: CategoryBreakdownItem) => {
|
||||||
title: t("reports.hub.categoryZoom"),
|
setDetailModal(item);
|
||||||
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>
|
<div className={state.isLoading ? "opacity-50 pointer-events-none" : ""}>
|
||||||
<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">
|
||||||
<h1 className="text-2xl font-bold">{t("reports.hub.title")}</h1>
|
{state.tab === "budgetVsActual" ? (
|
||||||
|
<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>
|
||||||
<PeriodSelector
|
{state.tab !== "budgetVsActual" && (
|
||||||
value={period}
|
<PeriodSelector
|
||||||
onChange={setPeriod}
|
value={state.period}
|
||||||
customDateFrom={from}
|
onChange={setPeriod}
|
||||||
customDateTo={to}
|
customDateFrom={state.customDateFrom}
|
||||||
onCustomDateChange={setCustomDates}
|
customDateTo={state.customDateTo}
|
||||||
/>
|
onCustomDateChange={setCustomDates}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<HubHighlightsPanel data={data} isLoading={isLoading} error={error} />
|
<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>
|
||||||
|
|
||||||
<section>
|
{state.error && (
|
||||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
|
<div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
|
||||||
{t("reports.hub.explore")}
|
{state.error}
|
||||||
</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>
|
</div>
|
||||||
</section>
|
)}
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
import { getCategoryOverTime, getHighlights } from "./reportService";
|
import { getCategoryOverTime } from "./reportService";
|
||||||
|
|
||||||
// Mock the db module
|
// Mock the db module
|
||||||
vi.mock("./db", () => ({
|
vi.mock("./db", () => ({
|
||||||
|
|
@ -144,125 +144,3 @@ 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,10 +4,6 @@ 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(
|
||||||
|
|
@ -170,173 +166,3 @@ 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,30 +278,6 @@ 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