1172 lines
37 KiB
TypeScript
1172 lines
37 KiB
TypeScript
import { useMemo, useState, type ReactNode } from 'react';
|
||
import { formatUSD, formatUSDWhole, asDollars } from '@/lib/money';
|
||
import { Printer, RefreshCw, RotateCcw } from 'lucide-react';
|
||
import { useAnalyticsSummary } from '@/hooks/useQueries';
|
||
import { Button } from '@/components/ui/button';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
interface TrendRow {
|
||
month: string;
|
||
label?: string;
|
||
total: number;
|
||
}
|
||
interface ExpectedActualRow {
|
||
month: string;
|
||
label?: string;
|
||
expected: number;
|
||
actual: number;
|
||
}
|
||
interface CategorySpendRow {
|
||
category_name: string;
|
||
total: number;
|
||
}
|
||
interface HeatmapCell {
|
||
month: string;
|
||
status: string;
|
||
amount_paid?: number;
|
||
}
|
||
interface HeatmapMonth {
|
||
key: string;
|
||
label: string;
|
||
}
|
||
interface HeatmapRow {
|
||
bill_id: number;
|
||
bill_name: string;
|
||
category_name?: string;
|
||
cells: HeatmapCell[];
|
||
}
|
||
interface HeatmapData {
|
||
rows?: HeatmapRow[];
|
||
months?: HeatmapMonth[];
|
||
}
|
||
interface ForecastRow {
|
||
month: string;
|
||
label: string;
|
||
total: number;
|
||
low: number;
|
||
high: number;
|
||
}
|
||
interface AnalyticsRange {
|
||
start?: string;
|
||
end?: string;
|
||
}
|
||
interface AnalyticsData {
|
||
monthly_spending?: TrendRow[];
|
||
expected_vs_actual?: ExpectedActualRow[];
|
||
category_spend?: CategorySpendRow[];
|
||
heatmap?: HeatmapData;
|
||
categories?: { id: number | string; name: string }[];
|
||
bills?: { id: number | string; name: string; active?: number }[];
|
||
range?: AnalyticsRange;
|
||
generated_at?: string;
|
||
}
|
||
|
||
interface ChartVisibility {
|
||
monthlyTrend: boolean;
|
||
expectedActual: boolean;
|
||
categorySpend: boolean;
|
||
heatmap: boolean;
|
||
forecast: boolean;
|
||
[key: string]: boolean;
|
||
}
|
||
|
||
const RANGE_OPTIONS = [6, 12, 24, 36];
|
||
const MONTH_OPTIONS: [string, string][] = [
|
||
['1', 'January'],
|
||
['2', 'February'],
|
||
['3', 'March'],
|
||
['4', 'April'],
|
||
['5', 'May'],
|
||
['6', 'June'],
|
||
['7', 'July'],
|
||
['8', 'August'],
|
||
['9', 'September'],
|
||
['10', 'October'],
|
||
['11', 'November'],
|
||
['12', 'December'],
|
||
];
|
||
const CHART_OPTIONS: [string, string][] = [
|
||
['monthlyTrend', 'Monthly trend'],
|
||
['expectedActual', 'Expected vs actual'],
|
||
['categorySpend', 'Category spend'],
|
||
['heatmap', 'Pay heatmap'],
|
||
['forecast', 'Spending forecast'],
|
||
];
|
||
const PALETTE = [
|
||
'#7c3aed',
|
||
'#10b981',
|
||
'#ec4899',
|
||
'#3b82f6',
|
||
'#f59e0b',
|
||
'#14b8a6',
|
||
'#ef4444',
|
||
'#8b5cf6',
|
||
];
|
||
|
||
function currentMonth() {
|
||
const now = new Date();
|
||
return { year: now.getFullYear(), month: now.getMonth() + 1 };
|
||
}
|
||
|
||
function money(value: number | null | undefined): string {
|
||
return formatUSDWhole(asDollars(Number(value) || 0));
|
||
}
|
||
|
||
function fullMoney(value: number | null | undefined): string {
|
||
return formatUSD(asDollars(Number(value) || 0));
|
||
}
|
||
|
||
function formatRange(range?: AnalyticsRange): string {
|
||
if (!range?.start || !range?.end) return 'Selected range';
|
||
return `${range.start.slice(0, 7)} through ${range.end.slice(0, 7)}`;
|
||
}
|
||
|
||
function hasData(rows: readonly unknown[] | undefined, keys: string[]): boolean {
|
||
return !!rows?.some((row) =>
|
||
keys.some((key) => Number((row as Record<string, unknown>)[key]) > 0),
|
||
);
|
||
}
|
||
|
||
function EmptyState({ label = 'No analytics data for this selection.' }: { label?: string }) {
|
||
return (
|
||
<div className="flex min-h-[220px] items-center justify-center rounded-lg border border-dashed border-border/70 bg-muted/20 px-4 text-center text-sm text-muted-foreground">
|
||
{label}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ChartCard({
|
||
title,
|
||
subtitle,
|
||
children,
|
||
summary,
|
||
}: {
|
||
title: ReactNode;
|
||
subtitle?: ReactNode;
|
||
children: ReactNode;
|
||
summary?: ReactNode;
|
||
}) {
|
||
return (
|
||
<section className="analytics-chart surface-elevated p-5">
|
||
<div className="mb-4 flex items-start justify-between gap-4">
|
||
<div>
|
||
<h2 className="text-sm font-semibold tracking-tight">{title}</h2>
|
||
{subtitle && <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>}
|
||
</div>
|
||
{summary && (
|
||
<div className="shrink-0 text-right text-sm font-semibold tabular-nums">{summary}</div>
|
||
)}
|
||
</div>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function SvgFrame({
|
||
children,
|
||
height = 260,
|
||
label = 'Chart',
|
||
}: {
|
||
children: ReactNode;
|
||
height?: number;
|
||
label?: string;
|
||
}) {
|
||
return (
|
||
<div className="w-full overflow-hidden rounded-lg border border-border/60 bg-background/60">
|
||
<svg viewBox={`0 0 720 ${height}`} role="img" aria-label={label} className="h-auto w-full">
|
||
{children}
|
||
</svg>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LineChart({ rows, area = false }: { rows: TrendRow[]; area?: boolean }) {
|
||
if (!hasData(rows, ['total'])) return <EmptyState />;
|
||
|
||
const width = 720;
|
||
const height = 260;
|
||
const pad = { left: 58, right: 24, top: 24, bottom: 46 };
|
||
const chartW = width - pad.left - pad.right;
|
||
const chartH = height - pad.top - pad.bottom;
|
||
const max = Math.max(...rows.map((r) => r.total), 1);
|
||
const points = rows.map((row, index) => {
|
||
const x = pad.left + (rows.length === 1 ? chartW / 2 : (index / (rows.length - 1)) * chartW);
|
||
const y = pad.top + chartH - (row.total / max) * chartH;
|
||
return { ...row, x, y };
|
||
});
|
||
const line = points.map((p) => `${p.x},${p.y}`).join(' ');
|
||
const areaPoints = `${pad.left},${pad.top + chartH} ${line} ${pad.left + chartW},${pad.top + chartH}`;
|
||
|
||
return (
|
||
<SvgFrame height={height} label="Trend line chart">
|
||
{[0, 0.25, 0.5, 0.75, 1].map((tick) => {
|
||
const y = pad.top + chartH - tick * chartH;
|
||
return (
|
||
<g key={tick}>
|
||
<line
|
||
x1={pad.left}
|
||
x2={pad.left + chartW}
|
||
y1={y}
|
||
y2={y}
|
||
stroke="currentColor"
|
||
opacity="0.09"
|
||
/>
|
||
<text x="12" y={y + 4} fontSize="12" fill="currentColor" opacity="0.58">
|
||
{money(max * tick)}
|
||
</text>
|
||
</g>
|
||
);
|
||
})}
|
||
{area && <polygon points={areaPoints} fill="#7c3aed" opacity="0.16" />}
|
||
<polyline
|
||
points={line}
|
||
fill="none"
|
||
stroke="#7c3aed"
|
||
strokeWidth="4"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
{points.map((point, index) => (
|
||
<g key={point.month}>
|
||
<circle cx={point.x} cy={point.y} r="4.5" fill="#7c3aed" />
|
||
{(rows.length <= 12 || index % 3 === 0) && (
|
||
<text
|
||
x={point.x}
|
||
y={height - 18}
|
||
fontSize="12"
|
||
fill="currentColor"
|
||
opacity="0.65"
|
||
textAnchor="middle"
|
||
>
|
||
{point.label}
|
||
</text>
|
||
)}
|
||
<title>{`${point.label}: ${fullMoney(point.total)}`}</title>
|
||
</g>
|
||
))}
|
||
</SvgFrame>
|
||
);
|
||
}
|
||
|
||
function GroupedBarChart({ rows }: { rows: ExpectedActualRow[] }) {
|
||
if (!hasData(rows, ['expected', 'actual'])) return <EmptyState />;
|
||
|
||
const width = 720;
|
||
const height = 280;
|
||
const pad = { left: 58, right: 24, top: 24, bottom: 50 };
|
||
const chartW = width - pad.left - pad.right;
|
||
const chartH = height - pad.top - pad.bottom;
|
||
const max = Math.max(...rows.flatMap((r) => [r.expected, r.actual]), 1);
|
||
const groupW = chartW / rows.length;
|
||
const barW = Math.max(5, Math.min(17, groupW * 0.28));
|
||
|
||
return (
|
||
<SvgFrame height={height} label="Grouped bar chart">
|
||
{[0, 0.5, 1].map((tick) => {
|
||
const y = pad.top + chartH - tick * chartH;
|
||
return (
|
||
<g key={tick}>
|
||
<line
|
||
x1={pad.left}
|
||
x2={pad.left + chartW}
|
||
y1={y}
|
||
y2={y}
|
||
stroke="currentColor"
|
||
opacity="0.09"
|
||
/>
|
||
<text x="12" y={y + 4} fontSize="12" fill="currentColor" opacity="0.58">
|
||
{money(max * tick)}
|
||
</text>
|
||
</g>
|
||
);
|
||
})}
|
||
{rows.map((row, index) => {
|
||
const center = pad.left + index * groupW + groupW / 2;
|
||
const expectedH = (row.expected / max) * chartH;
|
||
const actualH = (row.actual / max) * chartH;
|
||
return (
|
||
<g key={row.month}>
|
||
<rect
|
||
x={center - barW - 1}
|
||
y={pad.top + chartH - expectedH}
|
||
width={barW}
|
||
height={expectedH}
|
||
rx="4"
|
||
fill="#8b5cf6"
|
||
>
|
||
<title>{`${row.label} expected: ${fullMoney(row.expected)}`}</title>
|
||
</rect>
|
||
<rect
|
||
x={center + 1}
|
||
y={pad.top + chartH - actualH}
|
||
width={barW}
|
||
height={actualH}
|
||
rx="4"
|
||
fill="#10b981"
|
||
>
|
||
<title>{`${row.label} actual: ${fullMoney(row.actual)}`}</title>
|
||
</rect>
|
||
{(rows.length <= 12 || index % 3 === 0) && (
|
||
<text
|
||
x={center}
|
||
y={height - 18}
|
||
fontSize="12"
|
||
fill="currentColor"
|
||
opacity="0.65"
|
||
textAnchor="middle"
|
||
>
|
||
{row.label}
|
||
</text>
|
||
)}
|
||
</g>
|
||
);
|
||
})}
|
||
<g transform={`translate(${width - 190}, 18)`} fontSize="12" fill="currentColor">
|
||
<rect width="10" height="10" rx="2" fill="#8b5cf6" />
|
||
<text x="16" y="10">
|
||
Expected
|
||
</text>
|
||
<rect x="92" width="10" height="10" rx="2" fill="#10b981" />
|
||
<text x="108" y="10">
|
||
Actual
|
||
</text>
|
||
</g>
|
||
</SvgFrame>
|
||
);
|
||
}
|
||
|
||
function DonutChart({ rows }: { rows: CategorySpendRow[] }) {
|
||
const total = rows.reduce((sum, row) => sum + Number(row.total || 0), 0);
|
||
if (!total) return <EmptyState />;
|
||
|
||
let cumulative = 0;
|
||
const radius = 78;
|
||
const circumference = 2 * Math.PI * radius;
|
||
|
||
return (
|
||
<div className="grid gap-5 md:grid-cols-[260px_1fr] md:items-center">
|
||
<div className="flex justify-center">
|
||
<svg
|
||
viewBox="0 0 220 220"
|
||
role="img"
|
||
aria-label="Category breakdown donut chart"
|
||
className="h-56 w-56"
|
||
>
|
||
<circle
|
||
cx="110"
|
||
cy="110"
|
||
r={radius}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="30"
|
||
opacity="0.08"
|
||
/>
|
||
{rows.map((row, index) => {
|
||
const value = Number(row.total || 0);
|
||
const dash = (value / total) * circumference;
|
||
const segment = (
|
||
<circle
|
||
key={row.category_name}
|
||
cx="110"
|
||
cy="110"
|
||
r={radius}
|
||
fill="none"
|
||
stroke={PALETTE[index % PALETTE.length]}
|
||
strokeWidth="30"
|
||
strokeDasharray={`${dash} ${circumference - dash}`}
|
||
strokeDashoffset={-cumulative}
|
||
transform="rotate(-90 110 110)"
|
||
>
|
||
<title>{`${row.category_name}: ${fullMoney(value)}`}</title>
|
||
</circle>
|
||
);
|
||
cumulative += dash;
|
||
return segment;
|
||
})}
|
||
<text
|
||
x="110"
|
||
y="104"
|
||
textAnchor="middle"
|
||
fontSize="13"
|
||
fill="currentColor"
|
||
opacity="0.65"
|
||
>
|
||
Total
|
||
</text>
|
||
<text
|
||
x="110"
|
||
y="126"
|
||
textAnchor="middle"
|
||
fontSize="22"
|
||
fontWeight="700"
|
||
fill="currentColor"
|
||
>
|
||
{money(total)}
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{rows.map((row, index) => (
|
||
<div
|
||
key={row.category_name}
|
||
className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-muted/20 px-3 py-2 text-sm"
|
||
>
|
||
<span className="flex min-w-0 items-center gap-2">
|
||
<span
|
||
className="h-3 w-3 shrink-0 rounded-sm"
|
||
style={{ backgroundColor: PALETTE[index % PALETTE.length] }}
|
||
/>
|
||
<span className="truncate">{row.category_name}</span>
|
||
</span>
|
||
<span className="shrink-0 font-medium tabular-nums">{fullMoney(row.total)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const HEATMAP_CLASS: Record<string, string> = {
|
||
paid: 'bg-emerald-500/85 border-emerald-400/40',
|
||
skipped: 'bg-sky-500/70 border-sky-400/40',
|
||
missed: 'bg-red-500/75 border-red-400/40',
|
||
no_data: 'bg-muted border-border',
|
||
};
|
||
|
||
function Heatmap({ heatmap }: { heatmap?: HeatmapData }) {
|
||
const rows = heatmap?.rows || [];
|
||
const months = heatmap?.months || [];
|
||
if (!rows.length || !months.length) return <EmptyState />;
|
||
|
||
return (
|
||
<div className="overflow-x-auto">
|
||
<div className="space-y-4 min-w-[760px]">
|
||
<div className="rounded-lg border border-border/60">
|
||
<div
|
||
className="grid border-b border-border/60 bg-muted/30 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
|
||
style={{ gridTemplateColumns: `180px repeat(${months.length}, minmax(38px, 1fr))` }}
|
||
>
|
||
<div className="px-3 py-2">Bill</div>
|
||
{months.map((month) => (
|
||
<div key={month.key} className="px-1 py-2 text-center">
|
||
{month.label}
|
||
</div>
|
||
))}
|
||
</div>
|
||
{rows.map((row) => (
|
||
<div
|
||
key={row.bill_id}
|
||
className="grid border-b border-border/40 last:border-b-0"
|
||
style={{ gridTemplateColumns: `180px repeat(${months.length}, minmax(38px, 1fr))` }}
|
||
>
|
||
<div className="min-w-0 px-3 py-2">
|
||
<p className="truncate text-sm font-medium">{row.bill_name}</p>
|
||
<p className="truncate text-[11px] text-muted-foreground">{row.category_name}</p>
|
||
</div>
|
||
{months.map((month) => {
|
||
const cell: HeatmapCell = row.cells.find((item) => item.month === month.key) || {
|
||
month: month.key,
|
||
status: 'no_data',
|
||
amount_paid: 0,
|
||
};
|
||
return (
|
||
<div
|
||
key={`${row.bill_id}-${month.key}`}
|
||
className="flex items-center justify-center px-1 py-2"
|
||
>
|
||
<span
|
||
className={cn(
|
||
'h-5 w-5 rounded border',
|
||
HEATMAP_CLASS[cell.status] || HEATMAP_CLASS.no_data,
|
||
)}
|
||
title={`${row.bill_name}, ${month.label}: ${cell.status.replace('_', ' ')}${cell.amount_paid ? ` (${fullMoney(cell.amount_paid)})` : ''}`}
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
|
||
{(
|
||
[
|
||
['paid', 'Paid'],
|
||
['skipped', 'Skipped'],
|
||
['missed', 'Missed'],
|
||
['no_data', 'No data'],
|
||
] as [string, string][]
|
||
).map(([status, label]) => (
|
||
<span key={status} className="inline-flex items-center gap-1.5">
|
||
<span className={cn('h-3 w-3 rounded border', HEATMAP_CLASS[status])} />
|
||
{label}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Forecast ────────────────────────────────────────────────────────────────
|
||
|
||
function linearForecast(rows: TrendRow[], horizonMonths: number): ForecastRow[] {
|
||
if (rows.length < 3) return [];
|
||
|
||
const n = rows.length;
|
||
const ys = rows.map((r) => Number(r.total) || 0);
|
||
const xMean = (n - 1) / 2;
|
||
const yMean = ys.reduce((a, b) => a + b, 0) / n;
|
||
|
||
const sxy = ys.reduce((sum, y, i) => sum + (i - xMean) * (y - yMean), 0);
|
||
const sxx = ys.reduce((sum, _, i) => sum + (i - xMean) ** 2, 0);
|
||
const slope = sxy / sxx;
|
||
const intercept = yMean - slope * xMean;
|
||
|
||
const residuals = ys.map((y, i) => y - (slope * i + intercept));
|
||
const stdDev = Math.sqrt(residuals.reduce((s, r) => s + r * r, 0) / n);
|
||
|
||
const lastRow = rows[n - 1]!;
|
||
const parts = lastRow.month.split('-').map(Number);
|
||
const lastYear = parts[0] ?? 0;
|
||
const lastMonthNum = parts[1] ?? 1;
|
||
|
||
return Array.from({ length: horizonMonths }, (_, i) => {
|
||
const x = n + i;
|
||
const projected = Math.max(0, slope * x + intercept);
|
||
const d = new Date(Date.UTC(lastYear, lastMonthNum - 1 + i + 1, 1));
|
||
const month = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
|
||
const label = d.toLocaleString('en-US', { month: 'short', year: '2-digit', timeZone: 'UTC' });
|
||
return {
|
||
month,
|
||
label,
|
||
total: Number(projected.toFixed(2)),
|
||
low: Number(Math.max(0, projected - stdDev).toFixed(2)),
|
||
high: Number((projected + stdDev).toFixed(2)),
|
||
};
|
||
});
|
||
}
|
||
|
||
function ForecastChart({
|
||
historical,
|
||
forecast,
|
||
}: {
|
||
historical: TrendRow[];
|
||
forecast: ForecastRow[];
|
||
}) {
|
||
const allRows = [...historical, ...forecast];
|
||
if (!allRows.length) return <EmptyState />;
|
||
|
||
const width = 720;
|
||
const height = 260;
|
||
const pad = { left: 58, right: 24, top: 36, bottom: 46 };
|
||
const chartW = width - pad.left - pad.right;
|
||
const chartH = height - pad.top - pad.bottom;
|
||
|
||
const maxVal = Math.max(...historical.map((r) => r.total), ...forecast.map((r) => r.high), 1);
|
||
|
||
function toXY(index: number, value: number) {
|
||
const x =
|
||
pad.left + (allRows.length === 1 ? chartW / 2 : (index / (allRows.length - 1)) * chartW);
|
||
const y = pad.top + chartH - (value / maxVal) * chartH;
|
||
return { x, y };
|
||
}
|
||
|
||
const histPoints = historical.map((row, i) => ({ ...row, ...toXY(i, row.total) }));
|
||
const forePoints = forecast.map((row, i) => ({
|
||
...row,
|
||
...toXY(historical.length + i, row.total),
|
||
yHigh: toXY(historical.length + i, row.high).y,
|
||
yLow: toXY(historical.length + i, row.low).y,
|
||
}));
|
||
|
||
const histLine = histPoints.map((p) => `${p.x},${p.y}`).join(' ');
|
||
const lastHist = histPoints[histPoints.length - 1];
|
||
|
||
const dividerX = lastHist ? lastHist.x : null;
|
||
|
||
const foreLine =
|
||
forePoints.length && lastHist
|
||
? `${lastHist.x},${lastHist.y} ` + forePoints.map((p) => `${p.x},${p.y}`).join(' ')
|
||
: '';
|
||
|
||
const bandPoly =
|
||
forePoints.length > 1
|
||
? [
|
||
...forePoints.map((p) => `${p.x},${p.yHigh}`),
|
||
...forePoints
|
||
.slice()
|
||
.reverse()
|
||
.map((p) => `${p.x},${p.yLow}`),
|
||
].join(' ')
|
||
: '';
|
||
|
||
const showLabel = (index: number) =>
|
||
allRows.length <= 14 || index % Math.ceil(allRows.length / 14) === 0;
|
||
|
||
return (
|
||
<SvgFrame height={height} label="Forecast chart">
|
||
{/* Grid */}
|
||
{[0, 0.25, 0.5, 0.75, 1].map((tick) => {
|
||
const y = pad.top + chartH - tick * chartH;
|
||
return (
|
||
<g key={tick}>
|
||
<line
|
||
x1={pad.left}
|
||
x2={pad.left + chartW}
|
||
y1={y}
|
||
y2={y}
|
||
stroke="currentColor"
|
||
opacity="0.08"
|
||
/>
|
||
<text x="12" y={y + 4} fontSize="12" fill="currentColor" opacity="0.58">
|
||
{money(maxVal * tick)}
|
||
</text>
|
||
</g>
|
||
);
|
||
})}
|
||
|
||
{/* Forecast region shading */}
|
||
{dividerX && (
|
||
<rect
|
||
x={dividerX}
|
||
y={pad.top}
|
||
width={pad.left + chartW - dividerX}
|
||
height={chartH}
|
||
fill="currentColor"
|
||
opacity="0.025"
|
||
/>
|
||
)}
|
||
|
||
{/* Confidence band */}
|
||
{bandPoly && <polygon points={bandPoly} fill="#7c3aed" opacity="0.13" />}
|
||
|
||
{/* Historical line + area fill */}
|
||
<polygon
|
||
points={`${pad.left},${pad.top + chartH} ${histLine} ${lastHist?.x ?? pad.left},${pad.top + chartH}`}
|
||
fill="#7c3aed"
|
||
opacity="0.10"
|
||
/>
|
||
<polyline
|
||
points={histLine}
|
||
fill="none"
|
||
stroke="#7c3aed"
|
||
strokeWidth="3.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
|
||
{/* Forecast line (dashed, connects from last historical point) */}
|
||
{foreLine && (
|
||
<polyline
|
||
points={foreLine}
|
||
fill="none"
|
||
stroke="#7c3aed"
|
||
strokeWidth="2.5"
|
||
strokeDasharray="9,6"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
opacity="0.7"
|
||
/>
|
||
)}
|
||
|
||
{/* Divider tick */}
|
||
{dividerX && (
|
||
<line
|
||
x1={dividerX}
|
||
x2={dividerX}
|
||
y1={pad.top}
|
||
y2={pad.top + chartH}
|
||
stroke="currentColor"
|
||
strokeDasharray="4,4"
|
||
opacity="0.2"
|
||
/>
|
||
)}
|
||
|
||
{/* Historical dots + labels */}
|
||
{histPoints.map((p, i) => (
|
||
<g key={p.month}>
|
||
<circle cx={p.x} cy={p.y} r="4" fill="#7c3aed" />
|
||
{showLabel(i) && (
|
||
<text
|
||
x={p.x}
|
||
y={height - 18}
|
||
fontSize="11"
|
||
fill="currentColor"
|
||
opacity="0.6"
|
||
textAnchor="middle"
|
||
>
|
||
{p.label}
|
||
</text>
|
||
)}
|
||
<title>{`${p.label}: ${fullMoney(p.total)}`}</title>
|
||
</g>
|
||
))}
|
||
|
||
{/* Forecast dots + labels */}
|
||
{forePoints.map((p, i) => (
|
||
<g key={p.month}>
|
||
<circle
|
||
cx={p.x}
|
||
cy={p.y}
|
||
r="4"
|
||
fill="none"
|
||
stroke="#7c3aed"
|
||
strokeWidth="2"
|
||
opacity="0.75"
|
||
/>
|
||
{showLabel(historical.length + i) && (
|
||
<text
|
||
x={p.x}
|
||
y={height - 18}
|
||
fontSize="11"
|
||
fill="currentColor"
|
||
opacity="0.45"
|
||
textAnchor="middle"
|
||
>
|
||
{p.label}
|
||
</text>
|
||
)}
|
||
<title>{`${p.label} (projected): ${fullMoney(p.total)} · range ${fullMoney(p.low)}–${fullMoney(p.high)}`}</title>
|
||
</g>
|
||
))}
|
||
|
||
{/* Legend */}
|
||
<g
|
||
transform={`translate(${pad.left + 8}, 18)`}
|
||
fontSize="11"
|
||
fill="currentColor"
|
||
opacity="0.7"
|
||
>
|
||
<line x1="0" x2="16" y1="5" y2="5" stroke="#7c3aed" strokeWidth="3" />
|
||
<text x="21" y="9">
|
||
Historical
|
||
</text>
|
||
<line
|
||
x1="97"
|
||
x2="113"
|
||
y1="5"
|
||
y2="5"
|
||
stroke="#7c3aed"
|
||
strokeWidth="2.5"
|
||
strokeDasharray="5,4"
|
||
/>
|
||
<rect x="120" y="0" width="10" height="10" rx="2" fill="#7c3aed" opacity="0.15" />
|
||
<text x="135" y="9">
|
||
Projected ± 1 σ
|
||
</text>
|
||
</g>
|
||
</SvgFrame>
|
||
);
|
||
}
|
||
|
||
function Field({ label, children }: { label: ReactNode; children: ReactNode }) {
|
||
return (
|
||
<label className="space-y-1.5">
|
||
<span className="block text-xs font-medium text-muted-foreground">{label}</span>
|
||
{children}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function ControlSelect({
|
||
value,
|
||
onChange,
|
||
children,
|
||
className,
|
||
}: {
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
children: ReactNode;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<select
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
className={cn(
|
||
'h-9 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus:outline-none focus:ring-[3px] focus:ring-ring/50',
|
||
className,
|
||
)}
|
||
>
|
||
{children}
|
||
</select>
|
||
);
|
||
}
|
||
|
||
export default function AnalyticsPage() {
|
||
const initial = currentMonth();
|
||
const [year, setYear] = useState(initial.year);
|
||
const [month, setMonth] = useState(initial.month);
|
||
const [months, setMonths] = useState(12);
|
||
const [categoryId, setCategoryId] = useState('');
|
||
const [billId, setBillId] = useState('');
|
||
const [includeInactive, setIncludeInactive] = useState(false);
|
||
const [includeSkipped, setIncludeSkipped] = useState(true);
|
||
const [trendMode, setTrendMode] = useState('line');
|
||
const [visible, setVisible] = useState<ChartVisibility>({
|
||
monthlyTrend: true,
|
||
expectedActual: true,
|
||
categorySpend: true,
|
||
heatmap: true,
|
||
forecast: true,
|
||
});
|
||
const [forecastHorizon, setForecastHorizon] = useState(6);
|
||
|
||
const params = useMemo(
|
||
() => ({
|
||
year,
|
||
month,
|
||
months,
|
||
category_id: categoryId,
|
||
bill_id: billId,
|
||
include_inactive: includeInactive,
|
||
include_skipped: includeSkipped,
|
||
}),
|
||
[billId, categoryId, includeInactive, includeSkipped, month, months, year],
|
||
);
|
||
|
||
// React Query handles caching, dedup, cancellation, and out-of-order responses.
|
||
const {
|
||
data: dataRaw,
|
||
isPending,
|
||
isFetching,
|
||
error: queryError,
|
||
refetch,
|
||
} = useAnalyticsSummary(params);
|
||
const data = dataRaw as AnalyticsData | undefined;
|
||
const loading = isPending;
|
||
const error = queryError ? queryError.message || 'Failed to load analytics.' : '';
|
||
|
||
const forecastRows = useMemo(
|
||
() => linearForecast(data?.monthly_spending || [], forecastHorizon),
|
||
[data?.monthly_spending, forecastHorizon],
|
||
);
|
||
|
||
const reset = () => {
|
||
const next = currentMonth();
|
||
setYear(next.year);
|
||
setMonth(next.month);
|
||
setMonths(12);
|
||
setCategoryId('');
|
||
setBillId('');
|
||
setIncludeInactive(false);
|
||
setIncludeSkipped(true);
|
||
setTrendMode('line');
|
||
setForecastHorizon(6);
|
||
setVisible({
|
||
monthlyTrend: true,
|
||
expectedActual: true,
|
||
categorySpend: true,
|
||
heatmap: true,
|
||
forecast: true,
|
||
});
|
||
};
|
||
|
||
const totalCategorySpend =
|
||
data?.category_spend?.reduce((sum, row) => sum + Number(row.total || 0), 0) || 0;
|
||
const activeCharts =
|
||
CHART_OPTIONS.filter(([key]) => visible[key])
|
||
.map(([, label]) => label)
|
||
.join(', ') || 'None';
|
||
const filterSummary = [
|
||
categoryId
|
||
? `Category: ${data?.categories?.find((c) => String(c.id) === String(categoryId))?.name || categoryId}`
|
||
: 'All categories',
|
||
billId
|
||
? `Bill: ${data?.bills?.find((b) => String(b.id) === String(billId))?.name || billId}`
|
||
: 'All bills',
|
||
includeInactive ? 'Includes inactive bills' : 'Active bills only',
|
||
includeSkipped ? 'Shows skipped months' : 'Hides skipped months',
|
||
].join(' | ');
|
||
|
||
return (
|
||
<div className="analytics-page space-y-6">
|
||
<div className="analytics-report-meta hidden">
|
||
<h1>Bill Tracker Analytics</h1>
|
||
<p>{formatRange(data?.range)}</p>
|
||
<p>{filterSummary}</p>
|
||
<p>Visible charts: {activeCharts}</p>
|
||
<p>Generated {new Date(data?.generated_at || Date.now()).toLocaleString()}</p>
|
||
</div>
|
||
|
||
<div className="analytics-screen-header flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">Analytics</h1>
|
||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||
Spending trends, category breakdowns, and payment history.
|
||
</p>
|
||
</div>
|
||
<div className="analytics-actions flex flex-wrap gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => refetch()}
|
||
disabled={isFetching}
|
||
className="flex-1 sm:flex-none"
|
||
>
|
||
<RefreshCw className={cn('h-3.5 w-3.5', isFetching && 'animate-spin')} />
|
||
Refresh
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => window.print()}
|
||
className="flex-1 sm:flex-none"
|
||
>
|
||
<Printer className="h-3.5 w-3.5" />
|
||
Print
|
||
</Button>
|
||
<Button size="sm" onClick={() => window.print()} className="flex-1 sm:flex-none">
|
||
<Printer className="h-3.5 w-3.5" />
|
||
Print / Save PDF
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<section className="analytics-controls surface-elevated p-4">
|
||
<div className="grid gap-4 lg:grid-cols-[1fr_auto] lg:items-end">
|
||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-7">
|
||
<Field label="Ending month">
|
||
<ControlSelect value={String(month)} onChange={(value) => setMonth(Number(value))}>
|
||
{MONTH_OPTIONS.map(([value, label]) => (
|
||
<option key={value} value={value}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</ControlSelect>
|
||
</Field>
|
||
<Field label="Ending year">
|
||
<input
|
||
type="number"
|
||
min="2000"
|
||
max="2100"
|
||
value={year}
|
||
onChange={(e) => setYear(Number(e.target.value))}
|
||
className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm shadow-sm focus:outline-none focus:ring-[3px] focus:ring-ring/50"
|
||
/>
|
||
</Field>
|
||
<Field label="Range">
|
||
<ControlSelect value={String(months)} onChange={(value) => setMonths(Number(value))}>
|
||
{RANGE_OPTIONS.map((value) => (
|
||
<option key={value} value={value}>
|
||
{value} months
|
||
</option>
|
||
))}
|
||
</ControlSelect>
|
||
</Field>
|
||
<Field label="Category">
|
||
<ControlSelect
|
||
value={categoryId}
|
||
onChange={(value) => {
|
||
setCategoryId(value);
|
||
setBillId('');
|
||
}}
|
||
>
|
||
<option value="">All categories</option>
|
||
{(data?.categories || []).map((category) => (
|
||
<option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</ControlSelect>
|
||
</Field>
|
||
<Field label="Bill">
|
||
<ControlSelect value={billId} onChange={setBillId}>
|
||
<option value="">All bills</option>
|
||
{(data?.bills || []).map((bill) => (
|
||
<option key={bill.id} value={bill.id}>
|
||
{bill.name}
|
||
{bill.active ? '' : ' (inactive)'}
|
||
</option>
|
||
))}
|
||
</ControlSelect>
|
||
</Field>
|
||
<Field label="Trend style">
|
||
<ControlSelect value={trendMode} onChange={setTrendMode}>
|
||
<option value="line">Line</option>
|
||
<option value="area">Area</option>
|
||
</ControlSelect>
|
||
</Field>
|
||
<Field label="Forecast">
|
||
<ControlSelect
|
||
value={String(forecastHorizon)}
|
||
onChange={(v) => setForecastHorizon(Number(v))}
|
||
>
|
||
<option value="3">3 months</option>
|
||
<option value="6">6 months</option>
|
||
<option value="12">12 months</option>
|
||
</ControlSelect>
|
||
</Field>
|
||
</div>
|
||
<Button type="button" variant="outline" onClick={reset}>
|
||
<RotateCcw className="h-4 w-4" />
|
||
Reset filters
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mt-4 grid gap-3 border-t border-border/60 pt-4 md:grid-cols-2 xl:grid-cols-4">
|
||
{CHART_OPTIONS.map(([key, label]) => (
|
||
<label key={key} className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="checkbox"
|
||
checked={visible[key]}
|
||
onChange={(e) => setVisible((prev) => ({ ...prev, [key]: e.target.checked }))}
|
||
className="h-4 w-4 rounded border-input bg-background accent-primary"
|
||
/>
|
||
{label}
|
||
</label>
|
||
))}
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="checkbox"
|
||
checked={includeInactive}
|
||
onChange={(e) => setIncludeInactive(e.target.checked)}
|
||
className="h-4 w-4 rounded border-input bg-background accent-primary"
|
||
/>
|
||
Include inactive bills
|
||
</label>
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="checkbox"
|
||
checked={includeSkipped}
|
||
onChange={(e) => setIncludeSkipped(e.target.checked)}
|
||
className="h-4 w-4 rounded border-input bg-background accent-primary"
|
||
/>
|
||
Show skipped months
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="analytics-range text-sm text-muted-foreground">
|
||
{data ? (
|
||
<>
|
||
Reporting on{' '}
|
||
<span className="font-medium text-foreground">{formatRange(data.range)}</span>.
|
||
<span className="ml-2">{filterSummary}</span>
|
||
</>
|
||
) : (
|
||
'Preparing analytics...'
|
||
)}
|
||
</div>
|
||
|
||
{loading && (
|
||
<div className="grid gap-5 lg:grid-cols-2">
|
||
{[1, 2, 3, 4].map((item) => (
|
||
<div key={item} className="h-80 animate-pulse rounded-2xl bg-muted/50" />
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{!loading && error && (
|
||
<div className="rounded-lg border border-destructive/25 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
{!loading && !error && data && (
|
||
<div className="analytics-chart-grid grid gap-5 xl:grid-cols-2">
|
||
{visible.monthlyTrend && (
|
||
<ChartCard
|
||
title="Monthly spending trend"
|
||
subtitle="Actual payments grouped by paid month."
|
||
>
|
||
<LineChart rows={data.monthly_spending || []} area={trendMode === 'area'} />
|
||
</ChartCard>
|
||
)}
|
||
{visible.expectedActual && (
|
||
<ChartCard
|
||
title="Expected vs actual spend"
|
||
subtitle="Expected uses monthly override amount when present, otherwise the bill estimate."
|
||
>
|
||
<GroupedBarChart rows={data.expected_vs_actual || []} />
|
||
</ChartCard>
|
||
)}
|
||
{visible.categorySpend && (
|
||
<ChartCard
|
||
title="Spending by category"
|
||
subtitle="Payments grouped by bill category."
|
||
summary={fullMoney(totalCategorySpend)}
|
||
>
|
||
<DonutChart rows={data.category_spend || []} />
|
||
</ChartCard>
|
||
)}
|
||
{visible.heatmap && (
|
||
<div className="xl:col-span-2">
|
||
<ChartCard
|
||
title="Pay-on-time heatmap"
|
||
subtitle="Bill status by month. Future/current unpaid months show as no data."
|
||
>
|
||
<Heatmap heatmap={data.heatmap} />
|
||
</ChartCard>
|
||
</div>
|
||
)}
|
||
{visible.forecast && (
|
||
<div className="xl:col-span-2">
|
||
<ChartCard
|
||
title={`Spending forecast · next ${forecastHorizon} months`}
|
||
subtitle={
|
||
(data.monthly_spending || []).length < 3
|
||
? 'Need at least 3 months of history to project.'
|
||
: 'Linear extrapolation from historical payments. Shaded band shows ± 1 standard deviation of past residuals.'
|
||
}
|
||
>
|
||
{(data.monthly_spending || []).length < 3 ? (
|
||
<EmptyState label="Not enough history to project — select a wider range." />
|
||
) : (
|
||
<>
|
||
<ForecastChart
|
||
historical={data.monthly_spending || []}
|
||
forecast={forecastRows}
|
||
/>
|
||
<div className="mt-4 overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-border/60 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||
<th className="py-2 pr-4 text-left">Month</th>
|
||
<th className="py-2 pr-4 text-right">Projected</th>
|
||
<th className="py-2 pr-4 text-right">Low estimate</th>
|
||
<th className="py-2 text-right">High estimate</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-border/40">
|
||
{forecastRows.map((row) => (
|
||
<tr
|
||
key={row.month}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
<td className="py-2 pr-4 font-medium text-foreground">{row.label}</td>
|
||
<td className="tracker-number py-2 pr-4 text-right font-semibold">
|
||
{fullMoney(row.total)}
|
||
</td>
|
||
<td className="tracker-number py-2 pr-4 text-right font-medium text-muted-foreground">
|
||
{fullMoney(row.low)}
|
||
</td>
|
||
<td className="tracker-number py-2 text-right font-medium text-muted-foreground">
|
||
{fullMoney(row.high)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
)}
|
||
</ChartCard>
|
||
</div>
|
||
)}
|
||
{!Object.values(visible).some(Boolean) && (
|
||
<div className="xl:col-span-2">
|
||
<EmptyState label="Select at least one chart to show analytics." />
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="analytics-print-footer hidden text-xs text-muted-foreground">
|
||
Generated from Bill Tracker Analytics on{' '}
|
||
{new Date(data?.generated_at || Date.now()).toLocaleString()}.
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|