feat(insights): committed/discretionary chart, recurring charge detection, fees & interest audit
This commit is contained in:
@@ -0,0 +1,74 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { getCurrentUser } from "@/lib/auth";
|
||||||
|
import { queryRaw } from "@/lib/db";
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const user = await getCurrentUser(req);
|
||||||
|
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
|
||||||
|
|
||||||
|
// Statement-level fees and interest (aggregated by Gemini from the PDF)
|
||||||
|
const stmtRows = await queryRaw<{
|
||||||
|
bank_name: string;
|
||||||
|
fees: string;
|
||||||
|
interest: string;
|
||||||
|
}>(
|
||||||
|
`SELECT
|
||||||
|
bank_name,
|
||||||
|
SUM(COALESCE(fees_charged, 0))::numeric(12,2) AS fees,
|
||||||
|
SUM(COALESCE(interest_charged, 0))::numeric(12,2) AS interest
|
||||||
|
FROM statements
|
||||||
|
WHERE owner_id = $1
|
||||||
|
GROUP BY bank_name
|
||||||
|
HAVING SUM(COALESCE(fees_charged, 0)) + SUM(COALESCE(interest_charged, 0)) > 0
|
||||||
|
ORDER BY (SUM(COALESCE(fees_charged, 0)) + SUM(COALESCE(interest_charged, 0))) DESC`,
|
||||||
|
[user.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Transaction-level fee and interest line items (split-adjusted)
|
||||||
|
const txnRows = await queryRaw<{
|
||||||
|
id: number;
|
||||||
|
transaction_date: string;
|
||||||
|
description: string;
|
||||||
|
merchant_name: string | null;
|
||||||
|
transaction_type: string;
|
||||||
|
my_amount: string;
|
||||||
|
bank_name: string;
|
||||||
|
}>(
|
||||||
|
`SELECT
|
||||||
|
t.id,
|
||||||
|
t.transaction_date,
|
||||||
|
t.description,
|
||||||
|
t.merchant_name,
|
||||||
|
t.transaction_type,
|
||||||
|
CASE
|
||||||
|
WHEN ts.share_percent IS NOT NULL THEN COALESCE(t.amount_aud, t.amount) * ts.share_percent / 100
|
||||||
|
ELSE COALESCE(t.amount_aud, t.amount)
|
||||||
|
END::numeric(12,2) AS my_amount,
|
||||||
|
s.bank_name
|
||||||
|
FROM transactions t
|
||||||
|
LEFT JOIN transaction_splits ts ON ts.transaction_id = t.id AND ts.participant_id = $1
|
||||||
|
JOIN statements s ON s.id = t.statement_id
|
||||||
|
WHERE s.owner_id = $1
|
||||||
|
AND t.transaction_type IN ('fee', 'interest')
|
||||||
|
ORDER BY t.transaction_date DESC`,
|
||||||
|
[user.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
const by_bank = stmtRows.map((r) => ({
|
||||||
|
bank_name: r.bank_name,
|
||||||
|
fees: Number(r.fees),
|
||||||
|
interest: Number(r.interest),
|
||||||
|
total: Number(r.fees) + Number(r.interest),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const transactions = txnRows.map((r) => ({
|
||||||
|
...r,
|
||||||
|
my_amount: Number(r.my_amount),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Totals from statement-level data (more complete — Gemini reads the statement summary)
|
||||||
|
const total_fees = by_bank.reduce((s, r) => s + r.fees, 0);
|
||||||
|
const total_interest = by_bank.reduce((s, r) => s + r.interest, 0);
|
||||||
|
|
||||||
|
return NextResponse.json({ by_bank, transactions, total_fees, total_interest });
|
||||||
|
}
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { getCurrentUser } from "@/lib/auth";
|
||||||
|
import { queryRaw } from "@/lib/db";
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const user = await getCurrentUser(req);
|
||||||
|
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
|
||||||
|
|
||||||
|
const rows = await queryRaw<{
|
||||||
|
merchant: string;
|
||||||
|
category: string;
|
||||||
|
occurrences: number;
|
||||||
|
avg_amount: string;
|
||||||
|
first_seen: string;
|
||||||
|
last_seen: string;
|
||||||
|
total_paid: string;
|
||||||
|
median_interval: string;
|
||||||
|
frequency: string | null;
|
||||||
|
}>(
|
||||||
|
`WITH merchant_txns AS (
|
||||||
|
SELECT
|
||||||
|
COALESCE(o.merchant_normalized, t.merchant_normalized, t.merchant_name) AS merchant,
|
||||||
|
COALESCE(o.category_override, t.category) AS category,
|
||||||
|
t.transaction_date,
|
||||||
|
CASE
|
||||||
|
WHEN ts.share_percent IS NOT NULL THEN COALESCE(t.amount_aud, t.amount) * ts.share_percent / 100
|
||||||
|
ELSE COALESCE(t.amount_aud, t.amount)
|
||||||
|
END AS my_amount
|
||||||
|
FROM transactions t
|
||||||
|
LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
|
||||||
|
LEFT JOIN transaction_splits ts ON ts.transaction_id = t.id AND ts.participant_id = $1
|
||||||
|
JOIN statements s ON s.id = t.statement_id
|
||||||
|
WHERE s.owner_id = $1
|
||||||
|
AND t.transaction_type IN ('debit', 'fee')
|
||||||
|
AND COALESCE(o.merchant_normalized, t.merchant_normalized, t.merchant_name) IS NOT NULL
|
||||||
|
),
|
||||||
|
merchant_with_lag AS (
|
||||||
|
SELECT
|
||||||
|
merchant,
|
||||||
|
category,
|
||||||
|
transaction_date,
|
||||||
|
my_amount,
|
||||||
|
LAG(transaction_date) OVER (PARTITION BY merchant ORDER BY transaction_date) AS prev_date
|
||||||
|
FROM merchant_txns
|
||||||
|
),
|
||||||
|
merchant_stats AS (
|
||||||
|
SELECT
|
||||||
|
merchant,
|
||||||
|
MODE() WITHIN GROUP (ORDER BY category) AS category,
|
||||||
|
COUNT(*) + 1 AS occurrences,
|
||||||
|
AVG(my_amount)::numeric(12,2) AS avg_amount,
|
||||||
|
MIN(transaction_date) AS first_seen,
|
||||||
|
MAX(transaction_date) AS last_seen,
|
||||||
|
SUM(my_amount)::numeric(12,2) AS total_paid,
|
||||||
|
PERCENTILE_CONT(0.5) WITHIN GROUP (
|
||||||
|
ORDER BY (transaction_date - prev_date)::int
|
||||||
|
) AS median_interval,
|
||||||
|
STDDEV((transaction_date - prev_date)::int) AS stddev_interval
|
||||||
|
FROM merchant_with_lag
|
||||||
|
WHERE prev_date IS NOT NULL
|
||||||
|
GROUP BY merchant
|
||||||
|
HAVING COUNT(*) >= 2
|
||||||
|
),
|
||||||
|
classified AS (
|
||||||
|
SELECT *,
|
||||||
|
CASE
|
||||||
|
WHEN median_interval BETWEEN 6 AND 8 THEN 'weekly'
|
||||||
|
WHEN median_interval BETWEEN 13 AND 16 THEN 'fortnightly'
|
||||||
|
WHEN median_interval BETWEEN 27 AND 35 THEN 'monthly'
|
||||||
|
WHEN median_interval BETWEEN 85 AND 95 THEN 'quarterly'
|
||||||
|
WHEN median_interval BETWEEN 350 AND 380 THEN 'annual'
|
||||||
|
ELSE NULL
|
||||||
|
END AS frequency
|
||||||
|
FROM merchant_stats
|
||||||
|
WHERE stddev_interval < median_interval * 0.4
|
||||||
|
AND (
|
||||||
|
median_interval BETWEEN 6 AND 8 OR
|
||||||
|
median_interval BETWEEN 13 AND 16 OR
|
||||||
|
median_interval BETWEEN 27 AND 35 OR
|
||||||
|
median_interval BETWEEN 85 AND 95 OR
|
||||||
|
median_interval BETWEEN 350 AND 380
|
||||||
|
)
|
||||||
|
)
|
||||||
|
SELECT merchant, category, occurrences, avg_amount, first_seen, last_seen, total_paid,
|
||||||
|
median_interval::numeric(8,1), frequency
|
||||||
|
FROM classified
|
||||||
|
WHERE frequency IS NOT NULL
|
||||||
|
ORDER BY
|
||||||
|
CASE frequency
|
||||||
|
WHEN 'weekly' THEN avg_amount * 4.33
|
||||||
|
WHEN 'fortnightly' THEN avg_amount * 2.17
|
||||||
|
WHEN 'monthly' THEN avg_amount
|
||||||
|
WHEN 'quarterly' THEN avg_amount / 3
|
||||||
|
WHEN 'annual' THEN avg_amount / 12
|
||||||
|
END DESC NULLS LAST`,
|
||||||
|
[user.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const subscriptions = rows.map((r) => {
|
||||||
|
const lastSeen = new Date(r.last_seen);
|
||||||
|
const daysSinceLast = Math.floor((today.getTime() - lastSeen.getTime()) / 86400000);
|
||||||
|
const medianInterval = Number(r.median_interval);
|
||||||
|
const is_active = daysSinceLast < medianInterval * 1.5;
|
||||||
|
|
||||||
|
const avg = Number(r.avg_amount);
|
||||||
|
const monthly_equiv =
|
||||||
|
r.frequency === "weekly" ? avg * 4.33 :
|
||||||
|
r.frequency === "fortnightly" ? avg * 2.17 :
|
||||||
|
r.frequency === "quarterly" ? avg / 3 :
|
||||||
|
r.frequency === "annual" ? avg / 12 :
|
||||||
|
avg;
|
||||||
|
|
||||||
|
return {
|
||||||
|
merchant: r.merchant,
|
||||||
|
category: r.category,
|
||||||
|
frequency: r.frequency,
|
||||||
|
avg_amount: avg,
|
||||||
|
monthly_equiv: Math.round(monthly_equiv * 100) / 100,
|
||||||
|
first_seen: r.first_seen,
|
||||||
|
last_seen: r.last_seen,
|
||||||
|
occurrences: r.occurrences,
|
||||||
|
total_paid: Number(r.total_paid),
|
||||||
|
is_active,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const total_monthly_equiv = subscriptions
|
||||||
|
.filter((s) => s.is_active)
|
||||||
|
.reduce((sum, s) => sum + s.monthly_equiv, 0);
|
||||||
|
|
||||||
|
return NextResponse.json({ subscriptions, total_monthly_equiv: Math.round(total_monthly_equiv * 100) / 100 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,267 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import {
|
||||||
|
ComposedChart, Bar, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, Legend,
|
||||||
|
} from "recharts";
|
||||||
|
import { useMonthlyAnalytics, useSubscriptions, useFees } from "@/lib/hooks";
|
||||||
|
import { formatCategory } from "@/lib/categories";
|
||||||
|
|
||||||
|
const COMMITTED_CATEGORIES = new Set(["rent", "utilities", "insurance", "subscriptions"]);
|
||||||
|
|
||||||
|
function fmt(n: number) {
|
||||||
|
return new Intl.NumberFormat("en-AU", { style: "currency", currency: "AUD", maximumFractionDigits: 0 }).format(n);
|
||||||
|
}
|
||||||
|
function fmtExact(n: number) {
|
||||||
|
return new Intl.NumberFormat("en-AU", { style: "currency", currency: "AUD", minimumFractionDigits: 2 }).format(n);
|
||||||
|
}
|
||||||
|
function fmtDate(d: string) {
|
||||||
|
return new Date(d).toLocaleDateString("en-AU", { month: "short", year: "numeric" });
|
||||||
|
}
|
||||||
|
function trend(values: number[]): { pct: number; dir: "up" | "down" | "flat" } {
|
||||||
|
if (values.length < 2) return { pct: 0, dir: "flat" };
|
||||||
|
const recent = values.slice(-3).reduce((a, b) => a + b, 0) / 3;
|
||||||
|
const prior = values.slice(0, 3).reduce((a, b) => a + b, 0) / 3;
|
||||||
|
if (prior === 0) return { pct: 0, dir: "flat" };
|
||||||
|
const pct = Math.round(((recent - prior) / prior) * 100);
|
||||||
|
return { pct: Math.abs(pct), dir: pct > 2 ? "up" : pct < -2 ? "down" : "flat" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const FREQ_LABEL: Record<string, string> = {
|
||||||
|
weekly: "Weekly",
|
||||||
|
fortnightly: "Fortnightly",
|
||||||
|
monthly: "Monthly",
|
||||||
|
quarterly: "Quarterly",
|
||||||
|
annual: "Annual",
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Section wrapper ────────────────────────────────────────────────
|
||||||
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="text-base font-semibold text-zinc-200 mb-3">{title}</h3>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Custom tooltip ──────────────────────────────────────────────────
|
||||||
|
function CommittedTooltip({ active, payload, label }: any) {
|
||||||
|
if (!active || !payload?.length) return null;
|
||||||
|
const committed = payload.find((p: any) => p.dataKey === "committed")?.value ?? 0;
|
||||||
|
const discretionary = payload.find((p: any) => p.dataKey === "discretionary")?.value ?? 0;
|
||||||
|
return (
|
||||||
|
<div className="bg-zinc-900 border border-zinc-700 rounded px-3 py-2 text-xs space-y-1">
|
||||||
|
<div className="font-medium text-zinc-300 mb-1">{label}</div>
|
||||||
|
<div className="flex justify-between gap-4"><span className="text-indigo-400">Committed</span><span>{fmt(committed)}</span></div>
|
||||||
|
<div className="flex justify-between gap-4"><span className="text-zinc-400">Discretionary</span><span>{fmt(discretionary)}</span></div>
|
||||||
|
<div className="flex justify-between gap-4 border-t border-zinc-700 pt-1"><span className="text-zinc-500">Total</span><span>{fmt(committed + discretionary)}</span></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Main page ────────────────────────────────────────────────────────
|
||||||
|
export default function InsightsPage() {
|
||||||
|
const { data: analytics } = useMonthlyAnalytics(12);
|
||||||
|
const { data: subData } = useSubscriptions();
|
||||||
|
const { data: feesData } = useFees();
|
||||||
|
|
||||||
|
// Build committed/discretionary chart data
|
||||||
|
const chartData = useMemo(() => {
|
||||||
|
if (!analytics) return [];
|
||||||
|
return [...analytics.months].reverse().map((month) => {
|
||||||
|
let committed = 0;
|
||||||
|
let discretionary = 0;
|
||||||
|
for (const row of analytics.rows) {
|
||||||
|
const spend = Number(row.spent[month] ?? 0);
|
||||||
|
if (COMMITTED_CATEGORIES.has(row.category)) committed += spend;
|
||||||
|
else discretionary += spend;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
month: month.slice(5) + "/" + month.slice(2, 4),
|
||||||
|
committed: Math.round(committed),
|
||||||
|
discretionary: Math.round(discretionary),
|
||||||
|
total: Math.round(committed + discretionary),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, [analytics]);
|
||||||
|
|
||||||
|
const committedValues = chartData.map((d) => d.committed);
|
||||||
|
const committedTrend = trend(committedValues);
|
||||||
|
const avgCommitted = committedValues.length
|
||||||
|
? Math.round(committedValues.reduce((a, b) => a + b, 0) / committedValues.length)
|
||||||
|
: 0;
|
||||||
|
const latestCommitted = committedValues[committedValues.length - 1] ?? 0;
|
||||||
|
|
||||||
|
const activeSubscriptions = subData?.subscriptions.filter((s) => s.is_active) ?? [];
|
||||||
|
const inactiveSubscriptions = subData?.subscriptions.filter((s) => !s.is_active) ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl">
|
||||||
|
<h2 className="text-xl font-semibold mb-6">Insights</h2>
|
||||||
|
|
||||||
|
{/* ── 1. Committed vs Discretionary ── */}
|
||||||
|
<Section title="Committed vs Discretionary Spend">
|
||||||
|
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||||
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg px-4 py-3">
|
||||||
|
<div className="text-xs text-zinc-500 mb-1">This month — committed floor</div>
|
||||||
|
<div className="text-xl font-semibold text-indigo-400">{fmt(latestCommitted)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg px-4 py-3">
|
||||||
|
<div className="text-xs text-zinc-500 mb-1">12-month avg committed</div>
|
||||||
|
<div className="text-xl font-semibold text-zinc-200">{fmt(avgCommitted)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg px-4 py-3">
|
||||||
|
<div className="text-xs text-zinc-500 mb-1">Trend (first 3 vs last 3 mo)</div>
|
||||||
|
<div className={`text-xl font-semibold ${committedTrend.dir === "up" ? "text-red-400" : committedTrend.dir === "down" ? "text-green-400" : "text-zinc-400"}`}>
|
||||||
|
{committedTrend.dir === "up" ? "↑" : committedTrend.dir === "down" ? "↓" : "→"} {committedTrend.pct}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
|
||||||
|
<ResponsiveContainer width="100%" height={220}>
|
||||||
|
<ComposedChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
|
||||||
|
<XAxis dataKey="month" tick={{ fill: "#71717a", fontSize: 11 }} axisLine={false} tickLine={false} />
|
||||||
|
<YAxis tick={{ fill: "#71717a", fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} width={44} />
|
||||||
|
<Tooltip content={<CommittedTooltip />} />
|
||||||
|
<Bar dataKey="committed" stackId="a" fill="#6366f1" name="Committed" radius={[0, 0, 0, 0]} />
|
||||||
|
<Bar dataKey="discretionary" stackId="a" fill="#3f3f46" name="Discretionary" radius={[3, 3, 0, 0]} />
|
||||||
|
<Line type="monotone" dataKey="committed" stroke="#818cf8" strokeWidth={2} dot={false} strokeDasharray="4 2" />
|
||||||
|
</ComposedChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
<div className="flex gap-4 mt-2 justify-end">
|
||||||
|
<span className="flex items-center gap-1.5 text-xs text-zinc-500"><span className="w-3 h-2 rounded-sm bg-indigo-500 inline-block" />Committed (rent, utilities, insurance, subscriptions)</span>
|
||||||
|
<span className="flex items-center gap-1.5 text-xs text-zinc-500"><span className="w-3 h-2 rounded-sm bg-zinc-600 inline-block" />Discretionary</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* ── 2. Recurring Charges ── */}
|
||||||
|
<Section title="Recurring Charges">
|
||||||
|
{!subData ? (
|
||||||
|
<p className="text-zinc-500 text-sm">Loading...</p>
|
||||||
|
) : subData.subscriptions.length === 0 ? (
|
||||||
|
<p className="text-zinc-500 text-sm">No recurring patterns detected yet — more transaction history needed.</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-xs text-zinc-500">{activeSubscriptions.length} active · {inactiveSubscriptions.length} inactive</span>
|
||||||
|
<span className="text-sm font-medium text-indigo-400">{fmtExact(subData.total_monthly_equiv)}<span className="text-xs text-zinc-500 font-normal ml-1">/ month committed</span></span>
|
||||||
|
</div>
|
||||||
|
<div className="border border-zinc-700 rounded-xl overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-zinc-800 bg-zinc-900">
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Merchant</th>
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Category</th>
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Frequency</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">My $/mo equiv</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Avg charge</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Since</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Total paid</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Count</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{[...activeSubscriptions, ...inactiveSubscriptions].map((s) => (
|
||||||
|
<tr key={s.merchant} className={`border-b border-zinc-800/50 ${s.is_active ? "hover:bg-zinc-800/20" : "opacity-40"} transition-colors`}>
|
||||||
|
<td className="px-4 py-3 font-medium">{s.merchant}</td>
|
||||||
|
<td className="px-4 py-3 text-zinc-400 text-xs">{formatCategory(s.category ?? "other")}</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className={`text-xs px-2 py-0.5 rounded-full ${s.is_active ? "bg-indigo-900/40 text-indigo-300" : "bg-zinc-800 text-zinc-500"}`}>
|
||||||
|
{FREQ_LABEL[s.frequency] ?? s.frequency}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-zinc-200">{fmtExact(s.monthly_equiv)}</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-zinc-400">{fmtExact(s.avg_amount)}</td>
|
||||||
|
<td className="px-4 py-3 text-right text-zinc-500 text-xs whitespace-nowrap">{fmtDate(s.first_seen)}</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-zinc-400">{fmtExact(s.total_paid)}</td>
|
||||||
|
<td className="px-4 py-3 text-right text-zinc-500">{s.occurrences}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* ── 3. Fees & Interest ── */}
|
||||||
|
<Section title="Fees & Interest">
|
||||||
|
{!feesData ? (
|
||||||
|
<p className="text-zinc-500 text-sm">Loading...</p>
|
||||||
|
) : feesData.by_bank.length === 0 && feesData.transactions.length === 0 ? (
|
||||||
|
<p className="text-zinc-500 text-sm">No fees or interest recorded across your statements.</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{feesData.by_bank.length > 0 && (
|
||||||
|
<div className="border border-zinc-700 rounded-xl overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-zinc-800 bg-zinc-900">
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Bank</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Fees</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Interest</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{feesData.by_bank.map((r) => (
|
||||||
|
<tr key={r.bank_name} className="border-b border-zinc-800/50">
|
||||||
|
<td className="px-4 py-3 font-medium">{r.bank_name}</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-zinc-400">{r.fees > 0 ? fmtExact(r.fees) : <span className="text-zinc-700">—</span>}</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-zinc-400">{r.interest > 0 ? fmtExact(r.interest) : <span className="text-zinc-700">—</span>}</td>
|
||||||
|
<td className="px-4 py-3 text-right tabular-nums text-red-400 font-medium">{fmtExact(r.total)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
<tr className="bg-zinc-900/50">
|
||||||
|
<td className="px-4 py-2.5 text-xs text-zinc-500 font-medium">Total</td>
|
||||||
|
<td className="px-4 py-2.5 text-right tabular-nums text-xs text-zinc-400">{fmtExact(feesData.total_fees)}</td>
|
||||||
|
<td className="px-4 py-2.5 text-right tabular-nums text-xs text-zinc-400">{fmtExact(feesData.total_interest)}</td>
|
||||||
|
<td className="px-4 py-2.5 text-right tabular-nums text-red-400 font-medium">{fmtExact(feesData.total_fees + feesData.total_interest)}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{feesData.transactions.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-zinc-500 mb-2">Individual fee / interest transactions</p>
|
||||||
|
<div className="border border-zinc-700 rounded-xl overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-zinc-800 bg-zinc-900">
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Date</th>
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Bank</th>
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Description</th>
|
||||||
|
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Type</th>
|
||||||
|
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{feesData.transactions.map((t) => (
|
||||||
|
<tr key={t.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/20">
|
||||||
|
<td className="px-4 py-2.5 text-zinc-500 text-xs whitespace-nowrap">
|
||||||
|
{new Date(t.transaction_date).toLocaleDateString("en-AU", { day: "2-digit", month: "short", year: "numeric" })}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2.5 text-zinc-400 text-xs">{t.bank_name}</td>
|
||||||
|
<td className="px-4 py-2.5 text-zinc-300">{t.description}</td>
|
||||||
|
<td className="px-4 py-2.5">
|
||||||
|
<span className={`text-xs px-2 py-0.5 rounded-full ${t.transaction_type === "interest" ? "bg-orange-900/40 text-orange-300" : "bg-zinc-800 text-zinc-400"}`}>
|
||||||
|
{t.transaction_type}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2.5 text-right tabular-nums text-red-400">{fmtExact(t.my_amount)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@ const NAV_ITEMS = [
|
|||||||
{ href: "/statements", label: "Statements", icon: "file-text" },
|
{ href: "/statements", label: "Statements", icon: "file-text" },
|
||||||
{ href: "/shared", label: "Shared", icon: "users" },
|
{ href: "/shared", label: "Shared", icon: "users" },
|
||||||
{ href: "/budget", label: "Analytics", icon: "bar-chart" },
|
{ href: "/budget", label: "Analytics", icon: "bar-chart" },
|
||||||
|
{ href: "/insights", label: "Insights", icon: "lightbulb" },
|
||||||
{ href: "/tags", label: "Tags", icon: "tag" },
|
{ href: "/tags", label: "Tags", icon: "tag" },
|
||||||
{ href: "/rules", label: "Rules", icon: "settings" },
|
{ href: "/rules", label: "Rules", icon: "settings" },
|
||||||
];
|
];
|
||||||
@@ -44,6 +45,11 @@ const ICONS: Record<string, React.ReactNode> = {
|
|||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
|
lightbulb: (
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m1.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
|
|||||||
@@ -502,3 +502,58 @@ export function useMonthlyAnalytics(months?: number) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface SubscriptionRow {
|
||||||
|
merchant: string;
|
||||||
|
category: string;
|
||||||
|
frequency: string;
|
||||||
|
avg_amount: number;
|
||||||
|
monthly_equiv: number;
|
||||||
|
first_seen: string;
|
||||||
|
last_seen: string;
|
||||||
|
occurrences: number;
|
||||||
|
total_paid: number;
|
||||||
|
is_active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSubscriptions() {
|
||||||
|
return useQuery<{ subscriptions: SubscriptionRow[]; total_monthly_equiv: number }>({
|
||||||
|
queryKey: ["analytics", "subscriptions"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await fetch("/api/analytics/subscriptions");
|
||||||
|
return res.json();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeeBankRow {
|
||||||
|
bank_name: string;
|
||||||
|
fees: number;
|
||||||
|
interest: number;
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeeTxnRow {
|
||||||
|
id: number;
|
||||||
|
transaction_date: string;
|
||||||
|
description: string;
|
||||||
|
merchant_name: string | null;
|
||||||
|
transaction_type: string;
|
||||||
|
my_amount: number;
|
||||||
|
bank_name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFees() {
|
||||||
|
return useQuery<{
|
||||||
|
by_bank: FeeBankRow[];
|
||||||
|
transactions: FeeTxnRow[];
|
||||||
|
total_fees: number;
|
||||||
|
total_interest: number;
|
||||||
|
}>({
|
||||||
|
queryKey: ["analytics", "fees"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await fetch("/api/analytics/fees");
|
||||||
|
return res.json();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user