223 lines
13 KiB
TypeScript
223 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { AppShell } from "../../components/app-shell";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
type Household = { id: string; name: string };
|
|
type Budget = { id: string; name: string; category?: string | null; limitAmount: number; spentAmount: number; progressPercent: number; remainingAmount: number; status: string };
|
|
type Goal = { id: string; name: string; targetAmount: number; currentAmount: number; progressPercent: number; remainingAmount: number; status: string };
|
|
type InvestmentSummary = { holdings: Array<{ id: string; symbol: string; name: string; marketValue: number; quantity: number; price: number }>; totalMarketValue: number };
|
|
type NetWorthSummary = { computed: { assets: number; liabilities: number; netWorth: number; breakdown: Record<string, number> }; history: Array<{ id: string; snapshotDate: string; netWorth: number }> };
|
|
type Recurring = { id: string; merchant: string; cadence: string; averageAmount: number; nextExpectedDate?: string | null; confidence: number };
|
|
|
|
export default function PlanningPage() {
|
|
const [households, setHouseholds] = useState<Household[]>([]);
|
|
const [householdId, setHouseholdId] = useState("");
|
|
const [budgets, setBudgets] = useState<Budget[]>([]);
|
|
const [goals, setGoals] = useState<Goal[]>([]);
|
|
const [investments, setInvestments] = useState<InvestmentSummary>({ holdings: [], totalMarketValue: 0 });
|
|
const [netWorth, setNetWorth] = useState<NetWorthSummary | null>(null);
|
|
const [recurring, setRecurring] = useState<Recurring[]>([]);
|
|
const [status, setStatus] = useState("");
|
|
const [budgetForm, setBudgetForm] = useState({ name: "", category: "", limitAmount: "500", spentAmount: "0" });
|
|
const [goalForm, setGoalForm] = useState({ name: "", targetAmount: "1000", currentAmount: "0" });
|
|
const [investmentForm, setInvestmentForm] = useState({ symbol: "", name: "", quantity: "1", price: "100" });
|
|
|
|
const load = async (selectedHousehold = householdId) => {
|
|
const [householdRes, goalRes, investmentRes, netWorthRes, recurringRes] = await Promise.all([
|
|
apiFetch<Household[]>("/api/households"),
|
|
apiFetch<Goal[]>("/api/planning/goals"),
|
|
apiFetch<InvestmentSummary>("/api/planning/investments"),
|
|
apiFetch<NetWorthSummary>("/api/planning/net-worth"),
|
|
apiFetch<Recurring[]>("/api/planning/recurring"),
|
|
]);
|
|
if (!householdRes.error && householdRes.data) {
|
|
setHouseholds(householdRes.data);
|
|
if (!selectedHousehold && householdRes.data[0]?.id) {
|
|
selectedHousehold = householdRes.data[0].id;
|
|
setHouseholdId(selectedHousehold);
|
|
}
|
|
}
|
|
if (!goalRes.error && goalRes.data) setGoals(goalRes.data);
|
|
if (!investmentRes.error && investmentRes.data) setInvestments(investmentRes.data);
|
|
if (!netWorthRes.error && netWorthRes.data) setNetWorth(netWorthRes.data);
|
|
if (!recurringRes.error && recurringRes.data) setRecurring(recurringRes.data);
|
|
if (selectedHousehold) {
|
|
const budgetRes = await apiFetch<Budget[]>(`/api/planning/budgets?householdId=${encodeURIComponent(selectedHousehold)}`);
|
|
if (!budgetRes.error && budgetRes.data) setBudgets(budgetRes.data);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
|
|
const createBudget = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
if (!householdId) return setStatus("Create or select a household first.");
|
|
const res = await apiFetch<Budget>("/api/planning/budgets", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
householdId,
|
|
name: budgetForm.name,
|
|
category: budgetForm.category || undefined,
|
|
limitAmount: Number(budgetForm.limitAmount),
|
|
spentAmount: Number(budgetForm.spentAmount),
|
|
}),
|
|
});
|
|
setStatus(res.error ? res.error.message ?? "Budget create failed." : "Budget created.");
|
|
if (!res.error) {
|
|
setBudgetForm({ name: "", category: "", limitAmount: "500", spentAmount: "0" });
|
|
load(householdId);
|
|
}
|
|
};
|
|
|
|
const createGoal = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
const res = await apiFetch<Goal>("/api/planning/goals", {
|
|
method: "POST",
|
|
body: JSON.stringify({ name: goalForm.name, targetAmount: Number(goalForm.targetAmount), currentAmount: Number(goalForm.currentAmount) }),
|
|
});
|
|
setStatus(res.error ? res.error.message ?? "Goal create failed." : "Goal created.");
|
|
if (!res.error) {
|
|
setGoalForm({ name: "", targetAmount: "1000", currentAmount: "0" });
|
|
load(householdId);
|
|
}
|
|
};
|
|
|
|
const createInvestment = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
const res = await apiFetch("/api/planning/investments", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
symbol: investmentForm.symbol,
|
|
name: investmentForm.name,
|
|
quantity: Number(investmentForm.quantity),
|
|
price: Number(investmentForm.price),
|
|
}),
|
|
});
|
|
setStatus(res.error ? res.error.message ?? "Investment create failed." : "Investment added.");
|
|
if (!res.error) {
|
|
setInvestmentForm({ symbol: "", name: "", quantity: "1", price: "100" });
|
|
load(householdId);
|
|
}
|
|
};
|
|
|
|
const snapshotNetWorth = async () => {
|
|
const res = await apiFetch("/api/planning/net-worth/snapshots", { method: "POST", body: JSON.stringify({}) });
|
|
setStatus(res.error ? res.error.message ?? "Snapshot failed." : "Net worth snapshot saved.");
|
|
if (!res.error) load(householdId);
|
|
};
|
|
|
|
const detectRecurring = async () => {
|
|
const res = await apiFetch<{ detected: number }>("/api/planning/recurring/detect", { method: "POST", body: JSON.stringify({}) });
|
|
setStatus(res.error ? res.error.message ?? "Detection failed." : `Detected ${res.data?.detected ?? 0} recurring transactions.`);
|
|
if (!res.error) load(householdId);
|
|
};
|
|
|
|
const input = "rounded-lg border border-border bg-background/50 px-3 py-2 text-sm";
|
|
const card = "rounded-lg border border-border bg-background/40 p-4";
|
|
|
|
return (
|
|
<AppShell title="Planning" subtitle="Budgets, goals, investments, net worth, and recurring transactions.">
|
|
<div className="grid gap-6">
|
|
{status ? <div className="rounded-lg border border-accent/20 bg-accent/10 p-3 text-sm">{status}</div> : null}
|
|
<section className="grid gap-4 md:grid-cols-3">
|
|
<div className={card}>
|
|
<div className="text-sm text-muted-foreground">Net worth</div>
|
|
<div className="mt-2 text-3xl font-bold">${netWorth?.computed.netWorth?.toLocaleString() ?? "0"}</div>
|
|
<button onClick={snapshotNetWorth} className="mt-4 rounded-lg bg-primary px-3 py-2 text-sm font-bold text-primary-foreground">Save snapshot</button>
|
|
</div>
|
|
<div className={card}>
|
|
<div className="text-sm text-muted-foreground">Investment value</div>
|
|
<div className="mt-2 text-3xl font-bold">${investments.totalMarketValue.toLocaleString()}</div>
|
|
</div>
|
|
<div className={card}>
|
|
<div className="text-sm text-muted-foreground">Recurring detected</div>
|
|
<div className="mt-2 text-3xl font-bold">{recurring.length}</div>
|
|
<button onClick={detectRecurring} className="mt-4 rounded-lg bg-secondary px-3 py-2 text-sm font-bold">Run detection</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-6 lg:grid-cols-2">
|
|
<div className="glass-panel rounded-2xl p-6">
|
|
<h2 className="text-xl font-bold">Shared budgets</h2>
|
|
<select className={`${input} mt-4 w-full`} value={householdId} onChange={(e) => { setHouseholdId(e.target.value); load(e.target.value); }}>
|
|
<option value="">Select household</option>
|
|
{households.map((household) => <option key={household.id} value={household.id}>{household.name}</option>)}
|
|
</select>
|
|
<form onSubmit={createBudget} className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<input className={input} placeholder="Budget name" value={budgetForm.name} onChange={(e) => setBudgetForm({ ...budgetForm, name: e.target.value })} required />
|
|
<input className={input} placeholder="Category" value={budgetForm.category} onChange={(e) => setBudgetForm({ ...budgetForm, category: e.target.value })} />
|
|
<input className={input} type="number" min="0" step="0.01" value={budgetForm.limitAmount} onChange={(e) => setBudgetForm({ ...budgetForm, limitAmount: e.target.value })} />
|
|
<input className={input} type="number" min="0" step="0.01" value={budgetForm.spentAmount} onChange={(e) => setBudgetForm({ ...budgetForm, spentAmount: e.target.value })} />
|
|
<button className="rounded-lg bg-primary px-3 py-2 text-sm font-bold text-primary-foreground sm:col-span-2">Add budget</button>
|
|
</form>
|
|
<div className="mt-4 space-y-2">
|
|
{budgets.map((budget) => (
|
|
<div key={budget.id} className={card}>
|
|
<div className="flex justify-between gap-3"><b>{budget.name}</b><span>{budget.progressPercent}%</span></div>
|
|
<div className="text-sm text-muted-foreground">${Number(budget.spentAmount).toLocaleString()} of ${Number(budget.limitAmount).toLocaleString()} spent</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6">
|
|
<h2 className="text-xl font-bold">Personal goals</h2>
|
|
<form onSubmit={createGoal} className="mt-4 grid gap-3 sm:grid-cols-3">
|
|
<input className={`${input} sm:col-span-3`} placeholder="Goal name" value={goalForm.name} onChange={(e) => setGoalForm({ ...goalForm, name: e.target.value })} required />
|
|
<input className={input} type="number" min="0" step="0.01" value={goalForm.targetAmount} onChange={(e) => setGoalForm({ ...goalForm, targetAmount: e.target.value })} />
|
|
<input className={input} type="number" min="0" step="0.01" value={goalForm.currentAmount} onChange={(e) => setGoalForm({ ...goalForm, currentAmount: e.target.value })} />
|
|
<button className="rounded-lg bg-primary px-3 py-2 text-sm font-bold text-primary-foreground">Add goal</button>
|
|
</form>
|
|
<div className="mt-4 space-y-2">
|
|
{goals.map((goal) => (
|
|
<div key={goal.id} className={card}>
|
|
<div className="flex justify-between gap-3"><b>{goal.name}</b><span>{goal.progressPercent}%</span></div>
|
|
<div className="text-sm text-muted-foreground">${Number(goal.currentAmount).toLocaleString()} of ${Number(goal.targetAmount).toLocaleString()}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-6 lg:grid-cols-2">
|
|
<div className="glass-panel rounded-2xl p-6">
|
|
<h2 className="text-xl font-bold">Investments</h2>
|
|
<form onSubmit={createInvestment} className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<input className={input} placeholder="Symbol" value={investmentForm.symbol} onChange={(e) => setInvestmentForm({ ...investmentForm, symbol: e.target.value })} required />
|
|
<input className={input} placeholder="Name" value={investmentForm.name} onChange={(e) => setInvestmentForm({ ...investmentForm, name: e.target.value })} required />
|
|
<input className={input} type="number" min="0" step="0.0001" value={investmentForm.quantity} onChange={(e) => setInvestmentForm({ ...investmentForm, quantity: e.target.value })} />
|
|
<input className={input} type="number" min="0" step="0.01" value={investmentForm.price} onChange={(e) => setInvestmentForm({ ...investmentForm, price: e.target.value })} />
|
|
<button className="rounded-lg bg-primary px-3 py-2 text-sm font-bold text-primary-foreground sm:col-span-2">Add holding</button>
|
|
</form>
|
|
<div className="mt-4 space-y-2">
|
|
{investments.holdings.map((holding) => (
|
|
<div key={holding.id} className={card}>
|
|
<div className="flex justify-between gap-3"><b>{holding.symbol}</b><span>${Number(holding.marketValue).toLocaleString()}</span></div>
|
|
<div className="text-sm text-muted-foreground">{holding.name}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6">
|
|
<h2 className="text-xl font-bold">Recurring transactions</h2>
|
|
<div className="mt-4 space-y-2">
|
|
{recurring.map((item) => (
|
|
<div key={item.id} className={card}>
|
|
<div className="flex justify-between gap-3"><b className="capitalize">{item.merchant}</b><span>{item.cadence}</span></div>
|
|
<div className="text-sm text-muted-foreground">${Number(item.averageAmount).toLocaleString()} average · {Math.round(Number(item.confidence) * 100)}% confidence</div>
|
|
</div>
|
|
))}
|
|
{!recurring.length ? <div className="text-sm text-muted-foreground">Run detection after importing transactions.</div> : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|