bd8a5732c6
Mirror the BudgetVsActualTable structure in the Actual-vs-Actual compare
mode so MoM and YoY both surface a Monthly block (reference month vs
comparison month) and a Cumulative YTD block (progress through the
reference month vs progress through the previous window).
- CategoryDelta gains cumulative{Previous,Current}Amount and
cumulativeDelta{Abs,Pct}. Legacy previousAmount / currentAmount /
deltaAbs / deltaPct are kept as aliases of the monthly block so the
Highlights hub, Cartes dashboard and ComparePeriodChart keep working
unchanged.
- getCompareMonthOverMonth: cumulative-previous window ends at the end
of the previous month within the SAME year; when the reference month
is January, the previous window sits entirely in the prior calendar
year (Jan → Dec).
- getCompareYearOverYear: now takes an optional reference month
(defaults to December for backward compatibility). Monthly block
compares the single reference month across years; cumulative block
compares Jan → refMonth across years.
- ComparePeriodTable rebuilt with two colspan header groups, four
sub-columns each, a totals row and month/year boundary sub-labels.
- ComparePeriodChart unchanged: still reads the monthly primary fields.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
253 lines
12 KiB
TypeScript
253 lines
12 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import type { CategoryDelta } from "../../shared/types";
|
|
|
|
export interface ComparePeriodTableProps {
|
|
rows: CategoryDelta[];
|
|
/** Label for the "previous" monthly column (e.g. "March 2026" or "2025"). */
|
|
previousLabel: string;
|
|
/** Label for the "current" monthly column (e.g. "April 2026" or "2026"). */
|
|
currentLabel: string;
|
|
/** Optional label for the previous cumulative window (YTD). Falls back to previousLabel. */
|
|
cumulativePreviousLabel?: string;
|
|
/** Optional label for the current cumulative window (YTD). Falls back to currentLabel. */
|
|
cumulativeCurrentLabel?: string;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function formatSignedCurrency(amount: number, language: string): string {
|
|
return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
|
|
style: "currency",
|
|
currency: "CAD",
|
|
maximumFractionDigits: 0,
|
|
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);
|
|
}
|
|
|
|
function variationColor(value: number): string {
|
|
// Compare report deals with expenses (abs values): spending more is negative
|
|
// for the user, spending less is positive. Mirror that colour convention
|
|
// consistently so the eye parses the delta sign at a glance.
|
|
if (value > 0) return "var(--negative, #ef4444)";
|
|
if (value < 0) return "var(--positive, #10b981)";
|
|
return "";
|
|
}
|
|
|
|
export default function ComparePeriodTable({
|
|
rows,
|
|
previousLabel,
|
|
currentLabel,
|
|
cumulativePreviousLabel,
|
|
cumulativeCurrentLabel,
|
|
}: ComparePeriodTableProps) {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const monthPrevLabel = previousLabel;
|
|
const monthCurrLabel = currentLabel;
|
|
const ytdPrevLabel = cumulativePreviousLabel ?? previousLabel;
|
|
const ytdCurrLabel = cumulativeCurrentLabel ?? currentLabel;
|
|
|
|
// Totals across all rows (there is no parent/child structure in compare mode).
|
|
const totals = rows.reduce(
|
|
(acc, r) => ({
|
|
monthCurrent: acc.monthCurrent + r.currentAmount,
|
|
monthPrevious: acc.monthPrevious + r.previousAmount,
|
|
monthDelta: acc.monthDelta + r.deltaAbs,
|
|
ytdCurrent: acc.ytdCurrent + r.cumulativeCurrentAmount,
|
|
ytdPrevious: acc.ytdPrevious + r.cumulativePreviousAmount,
|
|
ytdDelta: acc.ytdDelta + r.cumulativeDeltaAbs,
|
|
}),
|
|
{ monthCurrent: 0, monthPrevious: 0, monthDelta: 0, ytdCurrent: 0, ytdPrevious: 0, ytdDelta: 0 },
|
|
);
|
|
const totalMonthPct =
|
|
totals.monthPrevious !== 0 ? (totals.monthDelta / Math.abs(totals.monthPrevious)) * 100 : null;
|
|
const totalYtdPct =
|
|
totals.ytdPrevious !== 0 ? (totals.ytdDelta / Math.abs(totals.ytdPrevious)) * 100 : null;
|
|
|
|
return (
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
|
|
<div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
|
|
<table className="w-full text-sm">
|
|
<thead className="sticky top-0 z-20">
|
|
<tr className="border-b border-[var(--border)] bg-[var(--card)]">
|
|
<th
|
|
rowSpan={2}
|
|
className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom sticky left-0 bg-[var(--card)] z-30 min-w-[180px]"
|
|
>
|
|
{t("reports.highlights.category")}
|
|
</th>
|
|
<th
|
|
colSpan={4}
|
|
className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]"
|
|
>
|
|
{t("reports.bva.monthly")}
|
|
</th>
|
|
<th
|
|
colSpan={4}
|
|
className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]"
|
|
>
|
|
{t("reports.bva.ytd")}
|
|
</th>
|
|
</tr>
|
|
<tr className="border-b border-[var(--border)] bg-[var(--card)]">
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
|
|
<div>{t("reports.compare.currentAmount")}</div>
|
|
<div className="text-[10px] font-normal opacity-70">{monthCurrLabel}</div>
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
<div>{t("reports.compare.previousAmount")}</div>
|
|
<div className="text-[10px] font-normal opacity-70">{monthPrevLabel}</div>
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
{t("reports.bva.dollarVar")}
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
{t("reports.bva.pctVar")}
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
|
|
<div>{t("reports.compare.currentAmount")}</div>
|
|
<div className="text-[10px] font-normal opacity-70">{ytdCurrLabel}</div>
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
<div>{t("reports.compare.previousAmount")}</div>
|
|
<div className="text-[10px] font-normal opacity-70">{ytdPrevLabel}</div>
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
{t("reports.bva.dollarVar")}
|
|
</th>
|
|
<th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
|
|
{t("reports.bva.pctVar")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={9}
|
|
className="px-3 py-4 text-center text-[var(--muted-foreground)] italic"
|
|
>
|
|
{t("reports.empty.noData")}
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
<>
|
|
{rows.map((row) => (
|
|
<tr
|
|
key={`${row.categoryId ?? "uncat"}-${row.categoryName}`}
|
|
className="border-b border-[var(--border)]/50 hover:bg-[var(--muted)]/40"
|
|
>
|
|
<td className="px-3 py-1.5 sticky left-0 bg-[var(--card)] z-10">
|
|
<span className="flex items-center gap-2">
|
|
<span
|
|
className="w-2.5 h-2.5 rounded-full shrink-0"
|
|
style={{ backgroundColor: row.categoryColor }}
|
|
/>
|
|
{row.categoryName}
|
|
</span>
|
|
</td>
|
|
{/* Monthly block */}
|
|
<td className="text-right px-3 py-1.5 border-l border-[var(--border)]/50 tabular-nums">
|
|
{formatCurrency(row.currentAmount, i18n.language)}
|
|
</td>
|
|
<td className="text-right px-3 py-1.5 tabular-nums">
|
|
{formatCurrency(row.previousAmount, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-1.5 tabular-nums font-medium"
|
|
style={{ color: variationColor(row.deltaAbs) }}
|
|
>
|
|
{formatSignedCurrency(row.deltaAbs, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-1.5 tabular-nums"
|
|
style={{ color: variationColor(row.deltaAbs) }}
|
|
>
|
|
{formatPct(row.deltaPct, i18n.language)}
|
|
</td>
|
|
{/* Cumulative YTD block */}
|
|
<td className="text-right px-3 py-1.5 border-l border-[var(--border)]/50 tabular-nums">
|
|
{formatCurrency(row.cumulativeCurrentAmount, i18n.language)}
|
|
</td>
|
|
<td className="text-right px-3 py-1.5 tabular-nums">
|
|
{formatCurrency(row.cumulativePreviousAmount, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-1.5 tabular-nums font-medium"
|
|
style={{ color: variationColor(row.cumulativeDeltaAbs) }}
|
|
>
|
|
{formatSignedCurrency(row.cumulativeDeltaAbs, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-1.5 tabular-nums"
|
|
style={{ color: variationColor(row.cumulativeDeltaAbs) }}
|
|
>
|
|
{formatPct(row.cumulativeDeltaPct, i18n.language)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{/* Grand totals row */}
|
|
<tr className="border-t-2 border-[var(--border)] font-bold text-sm bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))]">
|
|
<td className="px-3 py-3 sticky left-0 bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))] z-10">
|
|
{t("reports.compare.totalRow")}
|
|
</td>
|
|
<td className="text-right px-3 py-3 border-l border-[var(--border)]/50 tabular-nums">
|
|
{formatCurrency(totals.monthCurrent, i18n.language)}
|
|
</td>
|
|
<td className="text-right px-3 py-3 tabular-nums">
|
|
{formatCurrency(totals.monthPrevious, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-3 tabular-nums"
|
|
style={{ color: variationColor(totals.monthDelta) }}
|
|
>
|
|
{formatSignedCurrency(totals.monthDelta, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-3 tabular-nums"
|
|
style={{ color: variationColor(totals.monthDelta) }}
|
|
>
|
|
{formatPct(totalMonthPct, i18n.language)}
|
|
</td>
|
|
<td className="text-right px-3 py-3 border-l border-[var(--border)]/50 tabular-nums">
|
|
{formatCurrency(totals.ytdCurrent, i18n.language)}
|
|
</td>
|
|
<td className="text-right px-3 py-3 tabular-nums">
|
|
{formatCurrency(totals.ytdPrevious, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-3 tabular-nums"
|
|
style={{ color: variationColor(totals.ytdDelta) }}
|
|
>
|
|
{formatSignedCurrency(totals.ytdDelta, i18n.language)}
|
|
</td>
|
|
<td
|
|
className="text-right px-3 py-3 tabular-nums"
|
|
style={{ color: variationColor(totals.ytdDelta) }}
|
|
>
|
|
{formatPct(totalYtdPct, i18n.language)}
|
|
</td>
|
|
</tr>
|
|
</>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|