feat(analytics): cashflow view with income/investment/net — split-adjusted + multi-currency

- Add 'investment' category (shares, ETFs, super) - Analytics API: separate income, investment, expense queries; use amount_aud for FX-aware sums - Analytics page: cashflow summary (income/expenses/invested/net cash), grouped bar chart, income + invested rows in 6-month trend table - MonthlyAnalytics interface: add income, investments, net fields to totals - DB: amount_aud + exchange_rate_to_aud columns added and backfilled (in prior migration)
2026-03-08 19:15:20 +11:00
parent 5dbeb0cb87
commit d1a0eedf03
4 changed files with 206 additions and 91 deletions
@@ -16,6 +16,7 @@ export async function GET(req: NextRequest) {
  const startStr = startDate.toISOString().slice(0, 10);
  const endStr = endDate.toISOString().slice(0, 10);

+  // Expenses: debits excluding transfers and investments, split-adjusted
  const spendRows = await queryRaw<{
    month: string;
    category: string;
@@ -27,8 +28,8 @@ export async function GET(req: NextRequest) {
      COALESCE(o.category_override, t.category) as category,
      SUM(
        CASE
-          WHEN ts.share_percent IS NOT NULL THEN t.amount * ts.share_percent / 100
-          ELSE t.amount
+          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 total_spent,
      COUNT(*)::int as transaction_count
@@ -38,6 +39,7 @@ export async function GET(req: NextRequest) {
    JOIN statements s ON s.id = t.statement_id
    WHERE s.owner_id = $1
      AND t.transaction_type = 'debit'
+      AND COALESCE(o.category_override, t.category) NOT IN ('transfers', 'investment')
      AND t.transaction_date >= $2
      AND t.transaction_date < $3
    GROUP BY 1, 2
@@ -45,10 +47,48 @@ export async function GET(req: NextRequest) {
    [user.id, startStr, endStr]
  );

-  const budgetRows = await queryRaw<{ month: string; category: string; amount_limit: number }>(
-    `SELECT TO_CHAR(month, 'YYYY-MM') as month, category, amount_limit::numeric
-     FROM budgets
-     WHERE owner_id = $1 AND month >= $2::date AND month < $3::date`,
+  // Income: credits/payments categorised as income
+  const incomeRows = await queryRaw<{
+    month: string;
+    total_income: number;
+    transaction_count: number;
+  }>(
+    `SELECT
+      TO_CHAR(DATE_TRUNC('month', t.transaction_date::date), 'YYYY-MM') as month,
+      SUM(COALESCE(t.amount_aud, t.amount))::numeric(12,2) as total_income,
+      COUNT(*)::int as transaction_count
+    FROM transactions t
+    LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
+    JOIN statements s ON s.id = t.statement_id
+    WHERE s.owner_id = $1
+      AND t.transaction_type IN ('credit', 'payment')
+      AND COALESCE(o.category_override, t.category) = 'income'
+      AND t.transaction_date >= $2
+      AND t.transaction_date < $3
+    GROUP BY 1
+    ORDER BY 1 DESC`,
+    [user.id, startStr, endStr]
+  );
+
+  // Investments: any transaction categorised as investment
+  const investmentRows = await queryRaw<{
+    month: string;
+    total_invested: number;
+    transaction_count: number;
+  }>(
+    `SELECT
+      TO_CHAR(DATE_TRUNC('month', t.transaction_date::date), 'YYYY-MM') as month,
+      SUM(COALESCE(t.amount_aud, t.amount))::numeric(12,2) as total_invested,
+      COUNT(*)::int as transaction_count
+    FROM transactions t
+    LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
+    JOIN statements s ON s.id = t.statement_id
+    WHERE s.owner_id = $1
+      AND COALESCE(o.category_override, t.category) = 'investment'
+      AND t.transaction_date >= $2
+      AND t.transaction_date < $3
+    GROUP BY 1
+    ORDER BY 1 DESC`,
    [user.id, startStr, endStr]
  );

@@ -62,50 +102,46 @@ export async function GET(req: NextRequest) {

  const spendMap = new Map<string, number>();
  const countMap = new Map<string, number>();
-  const budgetMap = new Map<string, number>();
+  const incomeMap = new Map<string, number>();
+  const investMap = new Map<string, number>();

  for (const r of spendRows) {
    spendMap.set(`${r.category}:${r.month}`, Number(r.total_spent));
    countMap.set(`${r.category}:${r.month}`, r.transaction_count);
  }
-  for (const r of budgetRows) {
-    budgetMap.set(`${r.category}:${r.month}`, Number(r.amount_limit));
-  }
+  for (const r of incomeRows) incomeMap.set(r.month, Number(r.total_income));
+  for (const r of investmentRows) investMap.set(r.month, Number(r.total_invested));

  const allCategories = new Set<string>();
  for (const r of spendRows) allCategories.add(r.category);
-  for (const r of budgetRows) allCategories.add(r.category);

  const rows = Array.from(allCategories)
    .sort()
    .map((cat) => {
      const spent: Record<string, number> = {};
-      const budget: Record<string, number> = {};
      const txCount: Record<string, number> = {};
      for (const m of months) {
        const s = spendMap.get(`${cat}:${m}`);
-        const b = budgetMap.get(`${cat}:${m}`);
        const c = countMap.get(`${cat}:${m}`);
        if (s !== undefined) spent[m] = s;
-        if (b !== undefined) budget[m] = b;
        if (c !== undefined) txCount[m] = c;
      }
-      return { category: cat, spent, budget, txCount };
+      return { category: cat, spent, txCount };
    });

-  const totals: Record<string, { spent: number; budget: number }> = {};
+  const totals: Record<string, { spent: number; income: number; investments: number; net: number }> = {};
  for (const m of months) {
-    let s = 0;
-    let b = 0;
-    for (const row of rows) {
-      s += row.spent[m] || 0;
-      b += row.budget[m] || 0;
-    }
+    let spent = 0;
+    for (const row of rows) spent += row.spent[m] || 0;
+    const income = incomeMap.get(m) || 0;
+    const investments = investMap.get(m) || 0;
    totals[m] = {
-      spent: Math.round(s * 100) / 100,
-      budget: Math.round(b * 100) / 100,
+      spent: Math.round(spent * 100) / 100,
+      income: Math.round(income * 100) / 100,
+      investments: Math.round(investments * 100) / 100,
+      net: Math.round((income - spent - investments) * 100) / 100,
    };
  }

-  return NextResponse.json({ months, rows, totals });
+  return NextResponse.json({ months, rows, income: Object.fromEntries(incomeMap), investments: Object.fromEntries(investMap), totals });
 }
@@ -9,6 +9,7 @@ import {
  Tooltip,
  ResponsiveContainer,
  Cell,
+  Legend,
 } from "recharts";
 import { useMonthlyAnalytics } from "@/lib/hooks";
 import { formatCategory } from "@/lib/categories";
@@ -50,6 +51,19 @@ function fmtExact(n: number): string {
  return `$${n.toFixed(2)}`;
 }

+function deltaColor(n: number): string {
+  if (n > 0) return "text-red-400";
+  if (n < 0) return "text-emerald-400";
+  return "";
+}
+
+const TOOLTIP_STYLE = {
+  background: "#18181b",
+  border: "1px solid #3f3f46",
+  borderRadius: 8,
+  fontSize: 12,
+};
+
 export default function AnalyticsPage() {
  const [selectedMonth, setSelectedMonth] = useState(currentMonthStr);
  const { data: analytics, isLoading } = useMonthlyAnalytics(6);
@@ -63,18 +77,14 @@ export default function AnalyticsPage() {
    );
  }

-  // Ensure selectedMonth is within the available range
-  const months = [...analytics.months].reverse(); // chronological order
+  const months = [...analytics.months].reverse(); // chronological

-  // Per-month totals (selected month)
-  const totalSpent = analytics.totals[selectedMonth]?.spent || 0;
+  const totals = analytics.totals[selectedMonth] ?? { spent: 0, income: 0, investments: 0, net: 0 };
+  const lastTotals = analytics.totals[prevMonth(selectedMonth)] ?? { spent: 0, income: 0, investments: 0, net: 0 };

-  // Last month for comparison
-  const lastMonth = prevMonth(selectedMonth);
-  const lastMonthSpent = analytics.totals[lastMonth]?.spent || 0;
-  const delta = totalSpent - lastMonthSpent;
+  const spentDelta = totals.spent - lastTotals.spent;

-  // Category rows for selected month, sorted by spend
+  // Category rows for selected month
  const categoryRows = analytics.rows
    .filter((r) => (r.spent[selectedMonth] || 0) > 0)
    .map((r) => ({
@@ -86,18 +96,22 @@ export default function AnalyticsPage() {

  const largestCategory = categoryRows[0];

-  // Data for monthly trend bar chart
-  const trendData = months.map((m) => ({
+  // Cashflow bar chart data (chronological)
+  const cashflowData = months.map((m) => ({
    month: m,
    label: formatShortMonth(m),
-    spent: analytics.totals[m]?.spent || 0,
+    income: analytics.totals[m]?.income || 0,
+    expenses: analytics.totals[m]?.spent || 0,
+    investments: analytics.totals[m]?.investments || 0,
  }));

-  // Data for horizontal category bar chart
-  const categoryChartData = [...categoryRows].reverse(); // smallest at top for readability
-
+  // Category horizontal bar chart
+  const categoryChartData = [...categoryRows].reverse();
  const chartHeight = Math.max(categoryChartData.length * 36, 120);

+  const hasIncome = months.some((m) => (analytics.totals[m]?.income || 0) > 0);
+  const hasInvestments = months.some((m) => (analytics.totals[m]?.investments || 0) > 0);
+
  return (
    <div className="space-y-6">
      {/* Header + month selector */}
@@ -122,16 +136,41 @@ export default function AnalyticsPage() {
        </div>
      </div>

-      {/* Summary cards */}
-      <div className="grid grid-cols-3 gap-4">
+      {/* Cashflow summary cards */}
+      <div className={`grid gap-4 ${hasIncome ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-3"}`}>
+        {hasIncome && (
          <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
-          <p className="text-xs text-zinc-500 mb-1">Total Spent</p>
-          <p className="text-2xl font-semibold">{fmtExact(totalSpent)}</p>
-          <p className="text-xs text-zinc-500 mt-1">split-adjusted</p>
+            <p className="text-xs text-zinc-500 mb-1">Income</p>
+            <p className="text-2xl font-semibold text-emerald-400">{fmtExact(totals.income)}</p>
+            <p className="text-xs text-zinc-500 mt-1">received</p>
          </div>
+        )}
        <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
-          <p className="text-xs text-zinc-500 mb-1">Largest Category</p>
-          {largestCategory ? (
+          <p className="text-xs text-zinc-500 mb-1">Expenses</p>
+          <p className="text-2xl font-semibold">{fmtExact(totals.spent)}</p>
+          <p className={`text-xs mt-1 ${deltaColor(spentDelta)}`}>
+            {spentDelta === 0 || lastTotals.spent === 0
+              ? <span className="text-zinc-500">split-adjusted</span>
+              : `${spentDelta > 0 ? "+" : ""}${fmtExact(spentDelta)} vs ${formatShortMonth(prevMonth(selectedMonth))}`}
+          </p>
+        </div>
+        {(hasInvestments || totals.investments > 0) && (
+          <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
+            <p className="text-xs text-zinc-500 mb-1">Invested</p>
+            <p className="text-2xl font-semibold text-indigo-400">{fmtExact(totals.investments)}</p>
+            <p className="text-xs text-zinc-500 mt-1">shares / ETFs</p>
+          </div>
+        )}
+        <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
+          <p className="text-xs text-zinc-500 mb-1">{hasIncome ? "Net Cash" : "Largest Category"}</p>
+          {hasIncome ? (
+            <>
+              <p className={`text-2xl font-semibold ${totals.net >= 0 ? "text-emerald-400" : "text-red-400"}`}>
+                {totals.net >= 0 ? "+" : ""}{fmtExact(totals.net)}
+              </p>
+              <p className="text-xs text-zinc-500 mt-1">income − expenses − invested</p>
+            </>
+          ) : largestCategory ? (
            <>
              <p className="text-2xl font-semibold">{fmtExact(largestCategory.spent)}</p>
              <p className="text-xs text-zinc-400 mt-1">{formatCategory(largestCategory.category)}</p>
@@ -140,33 +179,15 @@ export default function AnalyticsPage() {
            <p className="text-2xl font-semibold text-zinc-600">—</p>
          )}
        </div>
-        <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
-          <p className="text-xs text-zinc-500 mb-1">vs Last Month</p>
-          {lastMonthSpent > 0 ? (
-            <>
-              <p
-                className={`text-2xl font-semibold ${
-                  delta > 0 ? "text-red-400" : delta < 0 ? "text-emerald-400" : ""
-                }`}
-              >
-                {delta > 0 ? "+" : ""}
-                {fmtExact(delta)}
-              </p>
-              <p className="text-xs text-zinc-500 mt-1">
-                {delta > 0 ? "↑ more" : delta < 0 ? "↓ less" : "same"} than {formatShortMonth(lastMonth)}
-              </p>
-            </>
-          ) : (
-            <p className="text-2xl font-semibold text-zinc-600">—</p>
-          )}
-        </div>
      </div>

-      {/* Monthly trend bar chart */}
+      {/* Cashflow bar chart — income vs expenses vs investments */}
      <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
-        <h3 className="text-sm font-medium mb-4">Monthly Spending</h3>
-        <ResponsiveContainer width="100%" height={200}>
-          <BarChart data={trendData} margin={{ top: 0, right: 8, bottom: 0, left: 8 }}>
+        <h3 className="text-sm font-medium mb-4">
+          {hasIncome ? "Cashflow — 6 Months" : "Monthly Spending"}
+        </h3>
+        <ResponsiveContainer width="100%" height={220}>
+          <BarChart data={cashflowData} margin={{ top: 0, right: 8, bottom: 0, left: 8 }}>
            <XAxis
              dataKey="label"
              tick={{ fill: "#71717a", fontSize: 12 }}
@@ -181,26 +202,31 @@ export default function AnalyticsPage() {
              width={56}
            />
            <Tooltip
-              formatter={(value) => [fmtExact(Number(value)), "Spent"]}
-              contentStyle={{
-                background: "#18181b",
-                border: "1px solid #3f3f46",
-                borderRadius: 8,
-                fontSize: 12,
-              }}
+              formatter={(value, name) => [fmtExact(Number(value)), name === "expenses" ? "Expenses" : name === "income" ? "Income" : "Invested"]}
+              contentStyle={TOOLTIP_STYLE}
              labelStyle={{ color: "#a1a1aa" }}
              cursor={{ fill: "rgba(255,255,255,0.04)" }}
            />
+            {hasIncome && (
+              <>
+                <Legend
+                  formatter={(value) => value === "income" ? "Income" : value === "expenses" ? "Expenses" : "Invested"}
+                  wrapperStyle={{ fontSize: 12, color: "#71717a" }}
+                />
+                <Bar dataKey="income" fill="#34d399" radius={[4, 4, 0, 0]} />
+                {hasInvestments && <Bar dataKey="investments" fill="#818cf8" radius={[4, 4, 0, 0]} />}
+              </>
+            )}
            <Bar
-              dataKey="spent"
+              dataKey="expenses"
              radius={[4, 4, 0, 0]}
              onClick={(data) => setSelectedMonth((data as unknown as { month: string }).month)}
              style={{ cursor: "pointer" }}
            >
-              {trendData.map((entry) => (
+              {cashflowData.map((entry) => (
                <Cell
                  key={entry.month}
-                  fill={entry.month === selectedMonth ? "#6366f1" : "#3f3f46"}
+                  fill={entry.month === selectedMonth ? "#6366f1" : (hasIncome ? "#ef4444" : "#3f3f46")}
                />
              ))}
            </Bar>
@@ -238,12 +264,7 @@ export default function AnalyticsPage() {
              />
              <Tooltip
                formatter={(value) => [fmtExact(Number(value)), "Spent"]}
-                contentStyle={{
-                  background: "#18181b",
-                  border: "1px solid #3f3f46",
-                  borderRadius: 8,
-                  fontSize: 12,
-                }}
+                contentStyle={TOOLTIP_STYLE}
                labelFormatter={(label) => formatCategory(String(label))}
                labelStyle={{ color: "#a1a1aa" }}
                cursor={{ fill: "rgba(255,255,255,0.04)" }}
@@ -258,7 +279,7 @@ export default function AnalyticsPage() {
      {categoryRows.length > 0 && (
        <div className="bg-zinc-900 border border-zinc-700 rounded-xl overflow-hidden">
          <div className="px-4 py-3 border-b border-zinc-800">
-            <h3 className="text-sm font-medium">Category Breakdown — {formatMonth(selectedMonth)}</h3>
+            <h3 className="text-sm font-medium">Spending Breakdown — {formatMonth(selectedMonth)}</h3>
          </div>
          <table className="w-full text-sm">
            <thead>
@@ -276,7 +297,7 @@ export default function AnalyticsPage() {
                  <td className="px-4 py-2.5 text-right tabular-nums">{fmtExact(spent)}</td>
                  <td className="px-4 py-2.5 text-right text-zinc-400">{txCount}</td>
                  <td className="px-4 py-2.5 text-right text-zinc-400 tabular-nums">
-                    {totalSpent > 0 ? ((spent / totalSpent) * 100).toFixed(1) : "0.0"}%
+                    {totals.spent > 0 ? ((spent / totals.spent) * 100).toFixed(1) : "0.0"}%
                  </td>
                </tr>
              ))}
@@ -330,8 +351,44 @@ export default function AnalyticsPage() {
                    })}
                  </tr>
                ))}
+                {hasIncome && (
+                  <tr className="border-b border-zinc-800/40">
+                    <td className="px-3 py-2 font-medium sticky left-0 bg-zinc-950 text-emerald-600">
+                      Income
+                    </td>
+                    {analytics.months.map((m) => {
+                      const inc = analytics.income[m];
+                      return (
+                        <td
+                          key={m}
+                          className={`px-3 py-2 text-right tabular-nums text-emerald-500 ${m === selectedMonth ? "bg-zinc-800/30" : ""}`}
+                        >
+                          {inc ? fmt(inc) : "—"}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                )}
+                {hasInvestments && (
+                  <tr className="border-b border-zinc-800/40">
+                    <td className="px-3 py-2 font-medium sticky left-0 bg-zinc-950 text-indigo-500">
+                      Invested
+                    </td>
+                    {analytics.months.map((m) => {
+                      const inv = analytics.investments[m];
+                      return (
+                        <td
+                          key={m}
+                          className={`px-3 py-2 text-right tabular-nums text-indigo-400 ${m === selectedMonth ? "bg-zinc-800/30" : ""}`}
+                        >
+                          {inv ? fmt(inv) : "—"}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                )}
                <tr className="border-t-2 border-zinc-700 font-semibold bg-zinc-900/50">
-                  <td className="px-3 py-2 sticky left-0 bg-zinc-900">Total</td>
+                  <td className="px-3 py-2 sticky left-0 bg-zinc-900">Expenses</td>
                  {analytics.months.map((m) => {
                    const t = analytics.totals[m];
                    return (
@@ -346,6 +403,25 @@ export default function AnalyticsPage() {
                    );
                  })}
                </tr>
+                {hasIncome && (
+                  <tr className="font-semibold bg-zinc-900/50">
+                    <td className="px-3 py-2 sticky left-0 bg-zinc-900">Net Cash</td>
+                    {analytics.months.map((m) => {
+                      const t = analytics.totals[m];
+                      const net = t?.net || 0;
+                      return (
+                        <td
+                          key={m}
+                          className={`px-3 py-2 text-right tabular-nums ${
+                            net >= 0 ? "text-emerald-400" : "text-red-400"
+                          } ${m === selectedMonth ? "bg-zinc-800/30" : ""}`}
+                        >
+                          {net >= 0 ? "+" : ""}{fmt(net)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                )}
              </tbody>
            </table>
          </div>
@@ -16,6 +16,7 @@ export const CATEGORIES = [
  "rent",
  "transfers",
  "income",
+  "investment",
  "personal_care",
  "pets",
  "gifts",
@@ -451,7 +451,9 @@ export interface MonthlyAnalyticsRow {
 export interface MonthlyAnalytics {
  months: string[];
  rows: MonthlyAnalyticsRow[];
-  totals: Record<string, { spent: number; budget: number }>;
+  income: Record<string, number>;
+  investments: Record<string, number>;
+  totals: Record<string, { spent: number; income: number; investments: number; net: number }>;
 }

 export function useBudgets(month: string) {