1507 lines
73 KiB
TypeScript
1507 lines
73 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useEffect, useMemo, useState } from "react";
|
|
import { AppShell } from "../../../components/app-shell";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
type Household = {
|
|
id: string;
|
|
name: string;
|
|
members?: HouseholdMember[];
|
|
};
|
|
|
|
type HouseholdMember = {
|
|
id: string;
|
|
userId: string;
|
|
role: string;
|
|
status?: string;
|
|
joinedAt: string;
|
|
user?: {
|
|
email: string;
|
|
fullName?: string | null;
|
|
};
|
|
};
|
|
|
|
type HouseholdInvite = {
|
|
id: string;
|
|
email: string;
|
|
role: string;
|
|
status: string;
|
|
expiresAt: string;
|
|
acceptedAt?: string | null;
|
|
createdAt: string;
|
|
};
|
|
|
|
type HouseholdAccount = {
|
|
displayId: string;
|
|
institutionName: string;
|
|
accountType: string;
|
|
mask?: string | null;
|
|
currentBalance: number;
|
|
availableBalance: number;
|
|
isoCurrencyCode: string;
|
|
ownerUserId?: string | null;
|
|
ownershipType: "mine" | "theirs" | "joint" | string;
|
|
lastBalanceSync?: string | null;
|
|
syncStatus: string;
|
|
};
|
|
|
|
type CashflowMonth = {
|
|
month: string;
|
|
income: number;
|
|
expenses: number;
|
|
net: number;
|
|
transactionCount: number;
|
|
};
|
|
|
|
type HealthScore = {
|
|
score: number;
|
|
rating: "excellent" | "strong" | "building" | "needs_attention" | string;
|
|
components: {
|
|
cashflow: number;
|
|
balanceBuffer: number;
|
|
goalProgress: number;
|
|
collaboration: number;
|
|
syncHealth: number;
|
|
};
|
|
metrics: {
|
|
savingsRate: number;
|
|
bufferMonths: number;
|
|
activeGoalCount: number;
|
|
jointAccountCount: number;
|
|
collaborativeTransactionCount: number;
|
|
};
|
|
recommendations: string[];
|
|
};
|
|
|
|
type RecentTransaction = {
|
|
date: string;
|
|
description: string;
|
|
amount: number;
|
|
source: string;
|
|
category: string;
|
|
account?: {
|
|
institutionName?: string;
|
|
mask?: string | null;
|
|
ownerUserId?: string | null;
|
|
ownershipType?: string;
|
|
};
|
|
};
|
|
|
|
type HouseholdGoal = {
|
|
id: string;
|
|
name: string;
|
|
description?: string | null;
|
|
targetAmount: number;
|
|
currentAmount: number;
|
|
remainingAmount: number;
|
|
progressPercent: number;
|
|
isoCurrencyCode: string;
|
|
targetDate?: string | null;
|
|
priority: "low" | "medium" | "high" | string;
|
|
status: "active" | "paused" | "completed" | "archived" | string;
|
|
createdBy?: {
|
|
email: string;
|
|
fullName?: string | null;
|
|
};
|
|
};
|
|
|
|
type DashboardData = {
|
|
household: Household;
|
|
members: HouseholdMember[];
|
|
privacyMode: {
|
|
enabled: boolean;
|
|
hideIndividualBalances: boolean;
|
|
hideIndividualTransactions: boolean;
|
|
};
|
|
summary: {
|
|
memberCount: number;
|
|
accountCount: number;
|
|
totalBalance: number;
|
|
availableBalance: number;
|
|
monthlyIncome: number;
|
|
monthlyExpenses: number;
|
|
monthlyNet: number;
|
|
};
|
|
ownershipBreakdown: Record<string, { accountCount: number; balance: number }>;
|
|
healthScore: HealthScore;
|
|
accounts: HouseholdAccount[];
|
|
cashflow: CashflowMonth[];
|
|
recentTransactions: RecentTransaction[];
|
|
};
|
|
|
|
type FairSplitResult = {
|
|
expenseAmount: number;
|
|
splitMode: "equal" | "income_weighted" | "custom";
|
|
mineMonthlyIncome: number;
|
|
yoursMonthlyIncome: number;
|
|
totalIncome: number;
|
|
incomeShares: {
|
|
mine: number;
|
|
yours: number;
|
|
};
|
|
split: {
|
|
minePercent: number;
|
|
yoursPercent: number;
|
|
mineAmount: number;
|
|
yoursAmount: number;
|
|
};
|
|
transactionDefaults: {
|
|
attribution: "ours";
|
|
splitMode: "equal" | "custom";
|
|
splitMinePercent: number;
|
|
splitYoursPercent: number;
|
|
};
|
|
rationale: string;
|
|
};
|
|
|
|
type MoneyDatePrompt = {
|
|
id: string;
|
|
topic: string;
|
|
question: string;
|
|
why: string;
|
|
actionLabel: string;
|
|
priority: "high" | "medium" | "low";
|
|
};
|
|
|
|
type MoneyDatePromptResponse = {
|
|
householdId: string;
|
|
generatedAt: string;
|
|
cadenceSuggestion: "weekly" | "monthly" | string;
|
|
prompts: MoneyDatePrompt[];
|
|
};
|
|
|
|
type DebtPayoffResult = {
|
|
strategy: "avalanche" | "snowball" | "custom";
|
|
monthlyExtraPayment: number;
|
|
monthlyPayment: number;
|
|
totalStartingBalance: number;
|
|
totalInterestPaid: number;
|
|
payoffMonths: number;
|
|
payoffYears: number;
|
|
contributionSplit: {
|
|
splitMode: "equal" | "income_weighted" | "custom";
|
|
minePercent: number;
|
|
yoursPercent: number;
|
|
mineAmount: number;
|
|
yoursAmount: number;
|
|
rationale: string;
|
|
};
|
|
orderedDebts: Array<{
|
|
name: string;
|
|
startingBalance: number;
|
|
annualPercentageRate: number;
|
|
minimumPayment: number;
|
|
payoffOrder: number;
|
|
}>;
|
|
timeline: Array<{
|
|
month: number;
|
|
targetDebt: string;
|
|
totalRemainingBalance: number;
|
|
interestPaid: number;
|
|
principalPaid: number;
|
|
paidOffDebts: string[];
|
|
}>;
|
|
recommendations: string[];
|
|
};
|
|
|
|
type FutureScenarioResult = {
|
|
name: string;
|
|
type: "goal" | "net_worth" | "income_change" | "expense_change";
|
|
horizonMonths: number;
|
|
startingBalance: number;
|
|
finalBalance: number;
|
|
targetAmount: number | null;
|
|
targetReachedMonth: number | null;
|
|
monthlyNetChange: number;
|
|
totalContributions: number;
|
|
eventTotal: number;
|
|
projectedGrowth: number;
|
|
milestones: Array<{ month: number; label: string; balance: number }>;
|
|
recommendation: string;
|
|
};
|
|
|
|
type FutureScenarioResponse = {
|
|
generatedAt: string;
|
|
scenarios: FutureScenarioResult[];
|
|
comparison: {
|
|
bestFinalBalance: FutureScenarioResult;
|
|
earliestTarget: FutureScenarioResult | null;
|
|
};
|
|
};
|
|
|
|
const money = new Intl.NumberFormat("en-US", {
|
|
style: "currency",
|
|
currency: "USD",
|
|
});
|
|
|
|
const inputClass = "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20";
|
|
const cardClass = "rounded-xl border border-border bg-secondary/10 p-5";
|
|
const collaboratorRoles = ["admin", "member", "viewer", "accountant", "advisor"] as const;
|
|
|
|
function formatMoney(value: number) {
|
|
return money.format(value || 0);
|
|
}
|
|
|
|
function monthLabel(value: string) {
|
|
const [year, month] = value.split("-").map(Number);
|
|
return new Date(year, month - 1, 1).toLocaleDateString("en-US", { month: "short" });
|
|
}
|
|
|
|
function accountLabel(account: HouseholdAccount | RecentTransaction["account"]) {
|
|
if (!account) return "Household account";
|
|
const mask = account.mask ? ` ending ${account.mask}` : "";
|
|
return `${account.institutionName ?? "Account"}${mask}`;
|
|
}
|
|
|
|
function healthRatingLabel(value: string) {
|
|
return value.replace(/_/g, " ");
|
|
}
|
|
|
|
export default function HouseholdSettingsPage() {
|
|
const [households, setHouseholds] = useState<Household[]>([]);
|
|
const [selectedId, setSelectedId] = useState("");
|
|
const [dashboard, setDashboard] = useState<DashboardData | null>(null);
|
|
const [newName, setNewName] = useState("");
|
|
const [goals, setGoals] = useState<HouseholdGoal[]>([]);
|
|
const [invites, setInvites] = useState<HouseholdInvite[]>([]);
|
|
const [inviteDraft, setInviteDraft] = useState({ email: "", role: "accountant" });
|
|
const [collaborationStatus, setCollaborationStatus] = useState("");
|
|
const [goalStatus, setGoalStatus] = useState("");
|
|
const [goalSaving, setGoalSaving] = useState(false);
|
|
const [goalDraft, setGoalDraft] = useState({
|
|
name: "",
|
|
description: "",
|
|
targetAmount: "",
|
|
currentAmount: "",
|
|
targetDate: "",
|
|
priority: "medium" as "low" | "medium" | "high",
|
|
});
|
|
const [goalContributions, setGoalContributions] = useState<Record<string, string>>({});
|
|
const [fairSplitDraft, setFairSplitDraft] = useState({
|
|
expenseAmount: "",
|
|
mineMonthlyIncome: "",
|
|
yoursMonthlyIncome: "",
|
|
splitMode: "income_weighted" as "equal" | "income_weighted" | "custom",
|
|
customMinePercent: "50",
|
|
});
|
|
const [fairSplitResult, setFairSplitResult] = useState<FairSplitResult | null>(null);
|
|
const [fairSplitStatus, setFairSplitStatus] = useState("");
|
|
const [debtDraft, setDebtDraft] = useState({
|
|
strategy: "avalanche" as "avalanche" | "snowball" | "custom",
|
|
monthlyExtraPayment: "300",
|
|
splitMode: "income_weighted" as "equal" | "income_weighted" | "custom",
|
|
mineMonthlyIncome: "",
|
|
yoursMonthlyIncome: "",
|
|
customMinePercent: "50",
|
|
debts: [
|
|
{ name: "Credit card", balance: "", annualPercentageRate: "", minimumPayment: "", priority: "1" },
|
|
{ name: "Personal loan", balance: "", annualPercentageRate: "", minimumPayment: "", priority: "2" },
|
|
],
|
|
});
|
|
const [debtPayoffResult, setDebtPayoffResult] = useState<DebtPayoffResult | null>(null);
|
|
const [debtPayoffStatus, setDebtPayoffStatus] = useState("");
|
|
const [futureDraft, setFutureDraft] = useState({
|
|
scenarios: [
|
|
{ name: "Shared milestone", type: "goal", startingBalance: "", monthlyContribution: "", monthlyIncome: "", monthlyExpenses: "", targetAmount: "", horizonMonths: "36", annualGrowthRate: "0" },
|
|
{ name: "Stretch plan", type: "net_worth", startingBalance: "", monthlyContribution: "", monthlyIncome: "", monthlyExpenses: "", targetAmount: "", horizonMonths: "36", annualGrowthRate: "3" },
|
|
],
|
|
});
|
|
const [futureResult, setFutureResult] = useState<FutureScenarioResponse | null>(null);
|
|
const [futureStatus, setFutureStatus] = useState("");
|
|
const [privacyStatus, setPrivacyStatus] = useState("");
|
|
const [moneyDatePrompts, setMoneyDatePrompts] = useState<MoneyDatePromptResponse | null>(null);
|
|
const [moneyDateStatus, setMoneyDateStatus] = useState("");
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [status, setStatus] = useState("");
|
|
|
|
const selectedHousehold = useMemo(
|
|
() => households.find((household) => household.id === selectedId) ?? null,
|
|
[households, selectedId],
|
|
);
|
|
|
|
useEffect(() => {
|
|
loadHouseholds();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!selectedId) {
|
|
setDashboard(null);
|
|
setGoals([]);
|
|
setInvites([]);
|
|
setMoneyDatePrompts(null);
|
|
return;
|
|
}
|
|
loadDashboard(selectedId);
|
|
loadGoals(selectedId);
|
|
loadInvites(selectedId);
|
|
loadMoneyDatePrompts(selectedId);
|
|
}, [selectedId]);
|
|
|
|
const loadHouseholds = async () => {
|
|
setLoading(true);
|
|
const res = await apiFetch<Household[]>("/api/households");
|
|
setLoading(false);
|
|
if (res.error) {
|
|
setStatus(res.error.message ?? "Unable to load households.");
|
|
return;
|
|
}
|
|
const list = res.data ?? [];
|
|
setHouseholds(list);
|
|
setSelectedId((current) => current || list[0]?.id || "");
|
|
};
|
|
|
|
const loadDashboard = async (id: string) => {
|
|
setStatus("Loading shared dashboard...");
|
|
const res = await apiFetch<DashboardData>(`/api/households/${id}/dashboard`);
|
|
if (res.error) {
|
|
setDashboard(null);
|
|
setStatus(res.error.message ?? "Unable to load shared dashboard.");
|
|
return;
|
|
}
|
|
setDashboard(res.data);
|
|
setStatus("");
|
|
};
|
|
|
|
const loadGoals = async (id: string) => {
|
|
const res = await apiFetch<HouseholdGoal[]>(`/api/households/${id}/goals`);
|
|
if (res.error) {
|
|
setGoalStatus(res.error.message ?? "Unable to load shared goals.");
|
|
return;
|
|
}
|
|
setGoals(res.data ?? []);
|
|
setGoalStatus("");
|
|
};
|
|
|
|
const loadInvites = async (id: string) => {
|
|
const res = await apiFetch<HouseholdInvite[]>(`/api/households/${id}/invites`);
|
|
if (res.error) {
|
|
setInvites([]);
|
|
return;
|
|
}
|
|
setInvites(res.data ?? []);
|
|
};
|
|
|
|
const loadMoneyDatePrompts = async (id: string) => {
|
|
setMoneyDateStatus("Loading prompts...");
|
|
const res = await apiFetch<MoneyDatePromptResponse>(`/api/households/${id}/money-date-prompts`);
|
|
if (res.error) {
|
|
setMoneyDatePrompts(null);
|
|
setMoneyDateStatus(res.error.message ?? "Unable to load money date prompts.");
|
|
return;
|
|
}
|
|
setMoneyDatePrompts(res.data ?? null);
|
|
setMoneyDateStatus("");
|
|
};
|
|
|
|
const createHousehold = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
const name = newName.trim();
|
|
if (!name) return;
|
|
setSaving(true);
|
|
const res = await apiFetch<Household>("/api/households", {
|
|
method: "POST",
|
|
body: JSON.stringify({ name }),
|
|
});
|
|
setSaving(false);
|
|
if (res.error) {
|
|
setStatus(res.error.message ?? "Unable to create household.");
|
|
return;
|
|
}
|
|
setNewName("");
|
|
await loadHouseholds();
|
|
if (res.data?.id) setSelectedId(res.data.id);
|
|
};
|
|
|
|
const createGoal = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!selectedId || !goalDraft.name.trim()) return;
|
|
const targetAmount = Number.parseFloat(goalDraft.targetAmount);
|
|
const currentAmount = goalDraft.currentAmount ? Number.parseFloat(goalDraft.currentAmount) : 0;
|
|
if (!Number.isFinite(targetAmount) || targetAmount <= 0) {
|
|
setGoalStatus("Goal target must be greater than zero.");
|
|
return;
|
|
}
|
|
if (!Number.isFinite(currentAmount) || currentAmount < 0 || currentAmount > targetAmount) {
|
|
setGoalStatus("Current amount must be between zero and the target.");
|
|
return;
|
|
}
|
|
|
|
setGoalSaving(true);
|
|
const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals`, {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
name: goalDraft.name,
|
|
description: goalDraft.description || undefined,
|
|
targetAmount,
|
|
currentAmount,
|
|
targetDate: goalDraft.targetDate || undefined,
|
|
priority: goalDraft.priority,
|
|
}),
|
|
});
|
|
setGoalSaving(false);
|
|
if (res.error) {
|
|
setGoalStatus(res.error.message ?? "Unable to create shared goal.");
|
|
return;
|
|
}
|
|
setGoalDraft({ name: "", description: "", targetAmount: "", currentAmount: "", targetDate: "", priority: "medium" });
|
|
await loadGoals(selectedId);
|
|
};
|
|
|
|
const contributeToGoal = async (goal: HouseholdGoal) => {
|
|
if (!selectedId) return;
|
|
const contribution = Number.parseFloat(goalContributions[goal.id] ?? "");
|
|
if (!Number.isFinite(contribution) || contribution <= 0) {
|
|
setGoalStatus("Contribution must be greater than zero.");
|
|
return;
|
|
}
|
|
const nextAmount = Math.min(goal.targetAmount, goal.currentAmount + contribution);
|
|
const nextStatus = nextAmount >= goal.targetAmount ? "completed" : goal.status;
|
|
const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals/${goal.id}`, {
|
|
method: "PATCH",
|
|
body: JSON.stringify({ currentAmount: nextAmount, status: nextStatus }),
|
|
});
|
|
if (res.error) {
|
|
setGoalStatus(res.error.message ?? "Unable to update shared goal.");
|
|
return;
|
|
}
|
|
setGoalContributions((prev) => ({ ...prev, [goal.id]: "" }));
|
|
await loadGoals(selectedId);
|
|
};
|
|
|
|
const setGoalStatusValue = async (goal: HouseholdGoal, status: "active" | "paused" | "completed" | "archived") => {
|
|
if (!selectedId) return;
|
|
const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals/${goal.id}`, {
|
|
method: "PATCH",
|
|
body: JSON.stringify({ status }),
|
|
});
|
|
if (res.error) {
|
|
setGoalStatus(res.error.message ?? "Unable to update shared goal.");
|
|
return;
|
|
}
|
|
await loadGoals(selectedId);
|
|
};
|
|
|
|
const inviteCollaborator = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!selectedId || !inviteDraft.email.trim()) return;
|
|
const res = await apiFetch<HouseholdInvite>(`/api/households/${selectedId}/invites`, {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
email: inviteDraft.email,
|
|
role: inviteDraft.role,
|
|
}),
|
|
});
|
|
if (res.error) {
|
|
setCollaborationStatus(res.error.message ?? "Unable to invite collaborator.");
|
|
return;
|
|
}
|
|
setInviteDraft({ email: "", role: "accountant" });
|
|
setCollaborationStatus("Invite sent.");
|
|
await loadInvites(selectedId);
|
|
};
|
|
|
|
const calculateFairSplit = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!selectedId) return;
|
|
const expenseAmount = Number.parseFloat(fairSplitDraft.expenseAmount);
|
|
if (!Number.isFinite(expenseAmount) || expenseAmount <= 0) {
|
|
setFairSplitStatus("Enter an expense amount greater than zero.");
|
|
return;
|
|
}
|
|
setFairSplitStatus("Calculating fair split...");
|
|
const res = await apiFetch<FairSplitResult>(`/api/households/${selectedId}/fair-split`, {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
expenseAmount,
|
|
mineMonthlyIncome: Number.parseFloat(fairSplitDraft.mineMonthlyIncome || "0"),
|
|
yoursMonthlyIncome: Number.parseFloat(fairSplitDraft.yoursMonthlyIncome || "0"),
|
|
splitMode: fairSplitDraft.splitMode,
|
|
customMinePercent: fairSplitDraft.splitMode === "custom"
|
|
? Number.parseFloat(fairSplitDraft.customMinePercent)
|
|
: undefined,
|
|
}),
|
|
});
|
|
if (res.error) {
|
|
setFairSplitResult(null);
|
|
setFairSplitStatus(res.error.message ?? "Unable to calculate split.");
|
|
return;
|
|
}
|
|
setFairSplitResult(res.data);
|
|
setFairSplitStatus("");
|
|
};
|
|
|
|
const updateDebtDraft = (index: number, field: "name" | "balance" | "annualPercentageRate" | "minimumPayment" | "priority", value: string) => {
|
|
setDebtDraft((prev) => ({
|
|
...prev,
|
|
debts: prev.debts.map((debt, i) => i === index ? { ...debt, [field]: value } : debt),
|
|
}));
|
|
};
|
|
|
|
const addDebtDraftRow = () => {
|
|
setDebtDraft((prev) => ({
|
|
...prev,
|
|
debts: [
|
|
...prev.debts,
|
|
{ name: `Debt ${prev.debts.length + 1}`, balance: "", annualPercentageRate: "", minimumPayment: "", priority: String(prev.debts.length + 1) },
|
|
],
|
|
}));
|
|
};
|
|
|
|
const calculateDebtPayoff = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!selectedId) return;
|
|
const debts = debtDraft.debts
|
|
.filter((debt) => debt.name.trim() && debt.balance && debt.minimumPayment)
|
|
.map((debt) => ({
|
|
name: debt.name,
|
|
balance: Number.parseFloat(debt.balance),
|
|
annualPercentageRate: Number.parseFloat(debt.annualPercentageRate || "0"),
|
|
minimumPayment: Number.parseFloat(debt.minimumPayment),
|
|
priority: Number.parseInt(debt.priority || "0", 10),
|
|
}));
|
|
if (!debts.length) {
|
|
setDebtPayoffStatus("Add at least one debt with balance and minimum payment.");
|
|
return;
|
|
}
|
|
|
|
setDebtPayoffStatus("Calculating debt payoff plan...");
|
|
const res = await apiFetch<DebtPayoffResult>(`/api/households/${selectedId}/debt-payoff`, {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
strategy: debtDraft.strategy,
|
|
monthlyExtraPayment: Number.parseFloat(debtDraft.monthlyExtraPayment || "0"),
|
|
splitMode: debtDraft.splitMode,
|
|
mineMonthlyIncome: Number.parseFloat(debtDraft.mineMonthlyIncome || "0"),
|
|
yoursMonthlyIncome: Number.parseFloat(debtDraft.yoursMonthlyIncome || "0"),
|
|
customMinePercent: debtDraft.splitMode === "custom" ? Number.parseFloat(debtDraft.customMinePercent) : undefined,
|
|
debts,
|
|
}),
|
|
});
|
|
if (res.error) {
|
|
setDebtPayoffResult(null);
|
|
setDebtPayoffStatus(res.error.message ?? "Unable to calculate debt payoff plan.");
|
|
return;
|
|
}
|
|
setDebtPayoffResult(res.data ?? null);
|
|
setDebtPayoffStatus("");
|
|
};
|
|
|
|
const updateFutureScenario = (
|
|
index: number,
|
|
field: "name" | "type" | "startingBalance" | "monthlyContribution" | "monthlyIncome" | "monthlyExpenses" | "targetAmount" | "horizonMonths" | "annualGrowthRate",
|
|
value: string,
|
|
) => {
|
|
setFutureDraft((prev) => ({
|
|
...prev,
|
|
scenarios: prev.scenarios.map((scenario, i) => i === index ? { ...scenario, [field]: value } : scenario),
|
|
}));
|
|
};
|
|
|
|
const addFutureScenario = () => {
|
|
setFutureDraft((prev) => ({
|
|
...prev,
|
|
scenarios: [
|
|
...prev.scenarios,
|
|
{ name: `Scenario ${prev.scenarios.length + 1}`, type: "goal", startingBalance: "", monthlyContribution: "", monthlyIncome: "", monthlyExpenses: "", targetAmount: "", horizonMonths: "36", annualGrowthRate: "0" },
|
|
],
|
|
}));
|
|
};
|
|
|
|
const calculateFutureScenarios = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!selectedId) return;
|
|
const scenarios = futureDraft.scenarios
|
|
.filter((scenario) => scenario.name.trim())
|
|
.map((scenario) => ({
|
|
name: scenario.name,
|
|
type: scenario.type,
|
|
startingBalance: Number.parseFloat(scenario.startingBalance || "0"),
|
|
monthlyContribution: Number.parseFloat(scenario.monthlyContribution || "0"),
|
|
monthlyIncome: Number.parseFloat(scenario.monthlyIncome || "0"),
|
|
monthlyExpenses: Number.parseFloat(scenario.monthlyExpenses || "0"),
|
|
targetAmount: scenario.targetAmount ? Number.parseFloat(scenario.targetAmount) : undefined,
|
|
horizonMonths: Number.parseInt(scenario.horizonMonths || "36", 10),
|
|
annualGrowthRate: Number.parseFloat(scenario.annualGrowthRate || "0"),
|
|
}));
|
|
if (!scenarios.length) {
|
|
setFutureStatus("Add at least one scenario.");
|
|
return;
|
|
}
|
|
|
|
setFutureStatus("Calculating future scenarios...");
|
|
const res = await apiFetch<FutureScenarioResponse>(`/api/households/${selectedId}/future-scenarios`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ scenarios }),
|
|
});
|
|
if (res.error) {
|
|
setFutureResult(null);
|
|
setFutureStatus(res.error.message ?? "Unable to calculate future scenarios.");
|
|
return;
|
|
}
|
|
setFutureResult(res.data ?? null);
|
|
setFutureStatus("");
|
|
};
|
|
|
|
const updateMemberAccess = async (member: HouseholdMember, payload: { role?: string; status?: string }) => {
|
|
if (!selectedId) return;
|
|
const res = await apiFetch<HouseholdMember>(`/api/households/${selectedId}/members/${member.id}`, {
|
|
method: "PATCH",
|
|
body: JSON.stringify(payload),
|
|
});
|
|
if (res.error) {
|
|
setCollaborationStatus(res.error.message ?? "Unable to update collaborator access.");
|
|
return;
|
|
}
|
|
setCollaborationStatus("Collaborator access updated.");
|
|
await loadDashboard(selectedId);
|
|
await loadInvites(selectedId);
|
|
};
|
|
|
|
const updatePrivacyMode = async (enabled: boolean) => {
|
|
if (!selectedId) return;
|
|
setPrivacyStatus("Updating privacy mode...");
|
|
const res = await apiFetch<{ privacyMode: DashboardData["privacyMode"] }>(`/api/households/${selectedId}/privacy`, {
|
|
method: "PATCH",
|
|
body: JSON.stringify({
|
|
enabled,
|
|
hideIndividualBalances: true,
|
|
hideIndividualTransactions: true,
|
|
}),
|
|
});
|
|
if (res.error) {
|
|
setPrivacyStatus(res.error.message ?? "Unable to update privacy mode.");
|
|
return;
|
|
}
|
|
setPrivacyStatus(enabled ? "Privacy mode enabled." : "Privacy mode disabled.");
|
|
await loadDashboard(selectedId);
|
|
await loadMoneyDatePrompts(selectedId);
|
|
};
|
|
|
|
const maxCashflow = Math.max(
|
|
1,
|
|
...(dashboard?.cashflow ?? []).map((month) => Math.max(month.income, month.expenses)),
|
|
);
|
|
const activeGoalTotal = goals
|
|
.filter((goal) => goal.status !== "archived")
|
|
.reduce((sum, goal) => sum + goal.currentAmount, 0);
|
|
|
|
return (
|
|
<AppShell title="Households" subtitle="Shared financial dashboard for partner and family money.">
|
|
<div className="space-y-6">
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="grid gap-4 lg:grid-cols-[1fr_320px]">
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Active household</p>
|
|
<div className="mt-3 flex flex-col gap-3 sm:flex-row">
|
|
<select value={selectedId} onChange={(event) => setSelectedId(event.target.value)} className={inputClass}>
|
|
{households.map((household) => (
|
|
<option key={household.id} value={household.id}>
|
|
{household.name}
|
|
</option>
|
|
))}
|
|
{!households.length && <option value="">No households yet</option>}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!selectedId) return;
|
|
loadDashboard(selectedId);
|
|
loadMoneyDatePrompts(selectedId);
|
|
}}
|
|
disabled={!selectedId}
|
|
className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary disabled:opacity-50"
|
|
>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
{selectedHousehold && (
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
{selectedHousehold.name} combines joint, mine, and partner-owned accounts without exposing stable account IDs in the page data.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<form onSubmit={createHousehold} className="rounded-xl border border-border bg-background/60 p-4">
|
|
<label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Create household</label>
|
|
<input
|
|
value={newName}
|
|
onChange={(event) => setNewName(event.target.value)}
|
|
placeholder="Household name"
|
|
className={`${inputClass} mt-2`}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={saving || !newName.trim()}
|
|
className="mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{saving ? "Creating..." : "Create"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{status && <p className="mt-4 text-sm text-muted-foreground">{status}</p>}
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="glass-panel rounded-2xl p-8 text-sm text-muted-foreground">Loading households...</div>
|
|
) : dashboard ? (
|
|
<>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
|
|
<div className={cardClass}>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total balance</p>
|
|
<p className="mt-2 text-3xl font-bold text-foreground">{formatMoney(dashboard.summary.totalBalance)}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">{dashboard.summary.accountCount} shared accounts</p>
|
|
</div>
|
|
<div className={cardClass}>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Available</p>
|
|
<p className="mt-2 text-3xl font-bold text-foreground">{formatMoney(dashboard.summary.availableBalance)}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">Current liquid view</p>
|
|
</div>
|
|
<div className={cardClass}>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Monthly net</p>
|
|
<p className={`mt-2 text-3xl font-bold ${dashboard.summary.monthlyNet >= 0 ? "text-green-500" : "text-red-500"}`}>
|
|
{formatMoney(dashboard.summary.monthlyNet)}
|
|
</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{formatMoney(dashboard.summary.monthlyIncome)} in, {formatMoney(dashboard.summary.monthlyExpenses)} out
|
|
</p>
|
|
</div>
|
|
<div className={cardClass}>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Members</p>
|
|
<p className="mt-2 text-3xl font-bold text-foreground">{dashboard.summary.memberCount}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">Active household access</p>
|
|
</div>
|
|
<div className={cardClass}>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Health score</p>
|
|
<p className="mt-2 text-3xl font-bold text-foreground">{dashboard.healthScore.score}</p>
|
|
<p className="mt-1 text-sm capitalize text-muted-foreground">{healthRatingLabel(dashboard.healthScore.rating)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="grid gap-6 lg:grid-cols-[260px_1fr_1fr]">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Couples financial health</p>
|
|
<p className="mt-2 text-5xl font-bold text-foreground">{dashboard.healthScore.score}</p>
|
|
<p className="mt-1 text-sm capitalize text-muted-foreground">{healthRatingLabel(dashboard.healthScore.rating)}</p>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{[
|
|
["Cashflow", dashboard.healthScore.components.cashflow, 35],
|
|
["Balance buffer", dashboard.healthScore.components.balanceBuffer, 20],
|
|
["Goal progress", dashboard.healthScore.components.goalProgress, 20],
|
|
["Collaboration", dashboard.healthScore.components.collaboration, 15],
|
|
["Sync health", dashboard.healthScore.components.syncHealth, 10],
|
|
].map(([label, value, max]) => (
|
|
<div key={label} className="rounded-xl border border-border bg-background/40 p-3">
|
|
<div className="flex items-center justify-between gap-3 text-sm">
|
|
<span className="font-semibold text-foreground">{label}</span>
|
|
<span className="text-muted-foreground">{value}/{max}</span>
|
|
</div>
|
|
<div className="mt-2 h-2 overflow-hidden rounded-full bg-secondary">
|
|
<div className="h-full bg-primary" style={{ width: `${Math.min((Number(value) / Number(max)) * 100, 100)}%` }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-sm font-semibold text-foreground">Next best moves</p>
|
|
<div className="mt-3 space-y-2">
|
|
{dashboard.healthScore.recommendations.map((recommendation) => (
|
|
<p key={recommendation} className="text-sm text-muted-foreground">{recommendation}</p>
|
|
))}
|
|
{!dashboard.healthScore.recommendations.length && (
|
|
<p className="text-sm text-muted-foreground">Shared cashflow, goals, collaboration, and sync health are all in strong shape.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Money date prompts</p>
|
|
<h2 className="mt-2 text-xl font-bold text-foreground">Next household conversation</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{moneyDatePrompts
|
|
? `${moneyDatePrompts.cadenceSuggestion} cadence based on cashflow, goals, sync health, and privacy settings.`
|
|
: "Prompts are generated from the shared dashboard."}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => selectedId && loadMoneyDatePrompts(selectedId)}
|
|
className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary"
|
|
>
|
|
Refresh prompts
|
|
</button>
|
|
</div>
|
|
{moneyDateStatus ? <p className="mt-4 text-sm text-muted-foreground">{moneyDateStatus}</p> : null}
|
|
<div className="mt-5 grid gap-3 lg:grid-cols-3">
|
|
{(moneyDatePrompts?.prompts ?? []).map((prompt) => (
|
|
<div key={prompt.id} className="rounded-xl border border-border bg-background/40 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm font-semibold text-foreground">{prompt.topic}</p>
|
|
<span className={`rounded-full px-2 py-1 text-[11px] font-bold uppercase ${
|
|
prompt.priority === "high"
|
|
? "bg-red-500/10 text-red-500"
|
|
: prompt.priority === "medium"
|
|
? "bg-amber-500/10 text-amber-500"
|
|
: "bg-secondary text-muted-foreground"
|
|
}`}>
|
|
{prompt.priority}
|
|
</span>
|
|
</div>
|
|
<p className="mt-3 text-sm font-semibold leading-6 text-foreground">{prompt.question}</p>
|
|
<p className="mt-2 text-xs leading-5 text-muted-foreground">{prompt.why}</p>
|
|
<p className="mt-3 text-xs font-bold uppercase tracking-wider text-primary">{prompt.actionLabel}</p>
|
|
</div>
|
|
))}
|
|
{!moneyDateStatus && !moneyDatePrompts?.prompts.length ? (
|
|
<p className="text-sm text-muted-foreground">No prompts generated yet.</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Financial independence</p>
|
|
<h2 className="mt-2 text-xl font-bold text-foreground">Privacy mode</h2>
|
|
<p className="mt-2 max-w-3xl text-sm text-muted-foreground">
|
|
When enabled, the shared dashboard only shows joint household accounts and joint transactions. Individual mine/theirs balances and activity stay out of the shared view.
|
|
</p>
|
|
{privacyStatus ? <p className="mt-2 text-sm text-muted-foreground">{privacyStatus}</p> : null}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => updatePrivacyMode(!dashboard.privacyMode.enabled)}
|
|
className={`rounded-lg px-4 py-2 text-sm font-bold transition-colors ${
|
|
dashboard.privacyMode.enabled
|
|
? "border border-border bg-background text-foreground hover:bg-secondary"
|
|
: "bg-primary text-primary-foreground hover:bg-primary/90"
|
|
}`}
|
|
>
|
|
{dashboard.privacyMode.enabled ? "Disable privacy mode" : "Enable privacy mode"}
|
|
</button>
|
|
</div>
|
|
{dashboard.privacyMode.enabled ? (
|
|
<div className="mt-4 grid gap-3 md:grid-cols-2">
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-sm font-semibold text-foreground">Individual balances hidden</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">Mine/theirs account balances are excluded from cards and ownership totals.</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-sm font-semibold text-foreground">Individual transactions hidden</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">Recent transactions and cashflow use joint account activity only.</p>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Fair split calculator</p>
|
|
<h2 className="mt-2 text-xl font-bold text-foreground">Split shared expenses by income or custom share</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Calculate a household split before applying the same percentages to a shared transaction.
|
|
</p>
|
|
{fairSplitResult ? (
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Mine</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(fairSplitResult.split.mineAmount)}</p>
|
|
<p className="text-sm text-muted-foreground">{fairSplitResult.split.minePercent}% share</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Yours</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(fairSplitResult.split.yoursAmount)}</p>
|
|
<p className="text-sm text-muted-foreground">{fairSplitResult.split.yoursPercent}% share</p>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground sm:col-span-2">
|
|
{fairSplitResult.rationale} Transaction default: {fairSplitResult.transactionDefaults.splitMode} split with ours attribution.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<form onSubmit={calculateFairSplit} className="grid gap-3 md:grid-cols-2">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={fairSplitDraft.expenseAmount}
|
|
onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, expenseAmount: event.target.value }))}
|
|
placeholder="Expense amount"
|
|
className={inputClass}
|
|
/>
|
|
<select
|
|
value={fairSplitDraft.splitMode}
|
|
onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, splitMode: event.target.value as "equal" | "income_weighted" | "custom" }))}
|
|
className={inputClass}
|
|
>
|
|
<option value="income_weighted">Income-weighted</option>
|
|
<option value="equal">Equal 50/50</option>
|
|
<option value="custom">Custom percent</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={fairSplitDraft.mineMonthlyIncome}
|
|
onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, mineMonthlyIncome: event.target.value }))}
|
|
placeholder="Mine monthly income"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={fairSplitDraft.yoursMonthlyIncome}
|
|
onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, yoursMonthlyIncome: event.target.value }))}
|
|
placeholder="Yours monthly income"
|
|
className={inputClass}
|
|
/>
|
|
{fairSplitDraft.splitMode === "custom" ? (
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
step="0.01"
|
|
value={fairSplitDraft.customMinePercent}
|
|
onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, customMinePercent: event.target.value }))}
|
|
placeholder="Mine percent"
|
|
className={inputClass}
|
|
/>
|
|
) : null}
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 md:col-span-2"
|
|
>
|
|
Calculate split
|
|
</button>
|
|
{fairSplitStatus ? <p className="text-sm text-muted-foreground md:col-span-2">{fairSplitStatus}</p> : null}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Debt payoff teamwork</p>
|
|
<h2 className="mt-2 text-xl font-bold text-foreground">Plan a shared payoff order and contribution split</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Compare avalanche, snowball, or custom priority and agree how much each partner contributes monthly.
|
|
</p>
|
|
{debtPayoffResult ? (
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Payoff time</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{debtPayoffResult.payoffMonths} months</p>
|
|
<p className="text-sm text-muted-foreground">{debtPayoffResult.payoffYears} years</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Interest</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(debtPayoffResult.totalInterestPaid)}</p>
|
|
<p className="text-sm text-muted-foreground">{formatMoney(debtPayoffResult.monthlyPayment)} monthly plan</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Mine</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(debtPayoffResult.contributionSplit.mineAmount)}</p>
|
|
<p className="text-sm text-muted-foreground">{debtPayoffResult.contributionSplit.minePercent}% monthly share</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Yours</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(debtPayoffResult.contributionSplit.yoursAmount)}</p>
|
|
<p className="text-sm text-muted-foreground">{debtPayoffResult.contributionSplit.yoursPercent}% monthly share</p>
|
|
</div>
|
|
<div className="sm:col-span-2 rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-sm font-semibold text-foreground">Payoff order</p>
|
|
<div className="mt-3 space-y-2">
|
|
{debtPayoffResult.orderedDebts.map((debt) => (
|
|
<div key={`${debt.payoffOrder}-${debt.name}`} className="flex items-center justify-between gap-3 text-sm">
|
|
<span className="text-foreground">{debt.payoffOrder}. {debt.name}</span>
|
|
<span className="text-muted-foreground">{debt.annualPercentageRate}% APR · {formatMoney(debt.startingBalance)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<form onSubmit={calculateDebtPayoff} className="space-y-4">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<select
|
|
value={debtDraft.strategy}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, strategy: event.target.value as "avalanche" | "snowball" | "custom" }))}
|
|
className={inputClass}
|
|
>
|
|
<option value="avalanche">Avalanche</option>
|
|
<option value="snowball">Snowball</option>
|
|
<option value="custom">Custom order</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={debtDraft.monthlyExtraPayment}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, monthlyExtraPayment: event.target.value }))}
|
|
placeholder="Extra monthly payment"
|
|
className={inputClass}
|
|
/>
|
|
<select
|
|
value={debtDraft.splitMode}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, splitMode: event.target.value as "equal" | "income_weighted" | "custom" }))}
|
|
className={inputClass}
|
|
>
|
|
<option value="income_weighted">Income-weighted</option>
|
|
<option value="equal">Equal 50/50</option>
|
|
<option value="custom">Custom percent</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={debtDraft.mineMonthlyIncome}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, mineMonthlyIncome: event.target.value }))}
|
|
placeholder="Mine monthly income"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={debtDraft.yoursMonthlyIncome}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, yoursMonthlyIncome: event.target.value }))}
|
|
placeholder="Yours monthly income"
|
|
className={inputClass}
|
|
/>
|
|
{debtDraft.splitMode === "custom" ? (
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
step="0.01"
|
|
value={debtDraft.customMinePercent}
|
|
onChange={(event) => setDebtDraft((prev) => ({ ...prev, customMinePercent: event.target.value }))}
|
|
placeholder="Mine percent"
|
|
className={inputClass}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{debtDraft.debts.map((debt, index) => (
|
|
<div key={index} className="grid gap-2 md:grid-cols-[1.2fr_1fr_1fr_1fr_80px]">
|
|
<input value={debt.name} onChange={(event) => updateDebtDraft(index, "name", event.target.value)} placeholder="Debt name" className={inputClass} />
|
|
<input type="number" min="0" step="0.01" value={debt.balance} onChange={(event) => updateDebtDraft(index, "balance", event.target.value)} placeholder="Balance" className={inputClass} />
|
|
<input type="number" min="0" step="0.01" value={debt.annualPercentageRate} onChange={(event) => updateDebtDraft(index, "annualPercentageRate", event.target.value)} placeholder="APR %" className={inputClass} />
|
|
<input type="number" min="0" step="0.01" value={debt.minimumPayment} onChange={(event) => updateDebtDraft(index, "minimumPayment", event.target.value)} placeholder="Minimum" className={inputClass} />
|
|
<input type="number" min="1" step="1" value={debt.priority} onChange={(event) => updateDebtDraft(index, "priority", event.target.value)} placeholder="Order" className={inputClass} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<button type="button" onClick={addDebtDraftRow} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
|
|
Add debt
|
|
</button>
|
|
<button type="submit" className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90">
|
|
Calculate payoff
|
|
</button>
|
|
</div>
|
|
{debtPayoffStatus ? <p className="text-sm text-muted-foreground">{debtPayoffStatus}</p> : null}
|
|
{debtPayoffResult?.recommendations.length ? (
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-sm font-semibold text-foreground">Team next steps</p>
|
|
<div className="mt-2 space-y-1">
|
|
{debtPayoffResult.recommendations.map((recommendation) => (
|
|
<p key={recommendation} className="text-sm text-muted-foreground">{recommendation}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Future planning scenarios</p>
|
|
<h2 className="mt-2 text-xl font-bold text-foreground">Compare what-if household plans</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Project shared milestones, income changes, expense changes, or net worth plans over time.
|
|
</p>
|
|
{futureResult ? (
|
|
<div className="mt-5 space-y-3">
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Best final balance</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{futureResult.comparison.bestFinalBalance.name}</p>
|
|
<p className="text-sm text-muted-foreground">{formatMoney(futureResult.comparison.bestFinalBalance.finalBalance)} after {futureResult.comparison.bestFinalBalance.horizonMonths} months</p>
|
|
</div>
|
|
{futureResult.comparison.earliestTarget ? (
|
|
<div className="rounded-xl border border-border bg-background/40 p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Earliest target</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{futureResult.comparison.earliestTarget.name}</p>
|
|
<p className="text-sm text-muted-foreground">Month {futureResult.comparison.earliestTarget.targetReachedMonth}</p>
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-3">
|
|
{futureResult.scenarios.map((scenario) => (
|
|
<div key={scenario.name} className="rounded-xl border border-border bg-background/40 p-4">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<p className="font-semibold text-foreground">{scenario.name}</p>
|
|
<p className="text-sm text-muted-foreground">{scenario.recommendation}</p>
|
|
</div>
|
|
<p className="text-lg font-bold text-foreground">{formatMoney(scenario.finalBalance)}</p>
|
|
</div>
|
|
<div className="mt-3 grid gap-2 text-xs text-muted-foreground sm:grid-cols-3">
|
|
<span>Net monthly: {formatMoney(scenario.monthlyNetChange)}</span>
|
|
<span>Growth: {formatMoney(scenario.projectedGrowth)}</span>
|
|
<span>Target: {scenario.targetReachedMonth ? `month ${scenario.targetReachedMonth}` : "not reached"}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<form onSubmit={calculateFutureScenarios} className="space-y-4">
|
|
<div className="space-y-3">
|
|
{futureDraft.scenarios.map((scenario, index) => (
|
|
<div key={index} className="rounded-xl border border-border bg-background/40 p-3">
|
|
<div className="grid gap-2 md:grid-cols-2">
|
|
<input value={scenario.name} onChange={(event) => updateFutureScenario(index, "name", event.target.value)} placeholder="Scenario name" className={inputClass} />
|
|
<select value={scenario.type} onChange={(event) => updateFutureScenario(index, "type", event.target.value)} className={inputClass}>
|
|
<option value="goal">Goal</option>
|
|
<option value="net_worth">Net worth</option>
|
|
<option value="income_change">Income change</option>
|
|
<option value="expense_change">Expense change</option>
|
|
</select>
|
|
<input type="number" step="0.01" value={scenario.startingBalance} onChange={(event) => updateFutureScenario(index, "startingBalance", event.target.value)} placeholder="Starting balance" className={inputClass} />
|
|
<input type="number" step="0.01" value={scenario.monthlyContribution} onChange={(event) => updateFutureScenario(index, "monthlyContribution", event.target.value)} placeholder="Monthly contribution" className={inputClass} />
|
|
<input type="number" step="0.01" value={scenario.monthlyIncome} onChange={(event) => updateFutureScenario(index, "monthlyIncome", event.target.value)} placeholder="Monthly income change" className={inputClass} />
|
|
<input type="number" step="0.01" value={scenario.monthlyExpenses} onChange={(event) => updateFutureScenario(index, "monthlyExpenses", event.target.value)} placeholder="Monthly expense change" className={inputClass} />
|
|
<input type="number" min="0" step="0.01" value={scenario.targetAmount} onChange={(event) => updateFutureScenario(index, "targetAmount", event.target.value)} placeholder="Target amount" className={inputClass} />
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
<input type="number" min="1" max="600" step="1" value={scenario.horizonMonths} onChange={(event) => updateFutureScenario(index, "horizonMonths", event.target.value)} placeholder="Months" className={inputClass} />
|
|
<input type="number" min="0" step="0.01" value={scenario.annualGrowthRate} onChange={(event) => updateFutureScenario(index, "annualGrowthRate", event.target.value)} placeholder="Annual growth %" className={inputClass} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<button type="button" onClick={addFutureScenario} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
|
|
Add scenario
|
|
</button>
|
|
<button type="submit" className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90">
|
|
Compare scenarios
|
|
</button>
|
|
</div>
|
|
{futureStatus ? <p className="text-sm text-muted-foreground">{futureStatus}</p> : null}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-foreground">Shared goals</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">{formatMoney(activeGoalTotal)} saved across {goals.filter((goal) => goal.status !== "archived").length} visible goals.</p>
|
|
</div>
|
|
</div>
|
|
<form onSubmit={createGoal} className="mt-5 grid gap-3 md:grid-cols-2">
|
|
<input
|
|
value={goalDraft.name}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, name: event.target.value }))}
|
|
placeholder="Goal name"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
value={goalDraft.targetAmount}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, targetAmount: event.target.value }))}
|
|
placeholder="Target amount"
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
value={goalDraft.currentAmount}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, currentAmount: event.target.value }))}
|
|
placeholder="Current amount"
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
value={goalDraft.targetDate}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, targetDate: event.target.value }))}
|
|
type="date"
|
|
className={inputClass}
|
|
/>
|
|
<select
|
|
value={goalDraft.priority}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, priority: event.target.value as "low" | "medium" | "high" }))}
|
|
className={inputClass}
|
|
>
|
|
<option value="low">Low priority</option>
|
|
<option value="medium">Medium priority</option>
|
|
<option value="high">High priority</option>
|
|
</select>
|
|
<button
|
|
type="submit"
|
|
disabled={goalSaving || !goalDraft.name.trim()}
|
|
className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{goalSaving ? "Creating..." : "Create goal"}
|
|
</button>
|
|
<textarea
|
|
value={goalDraft.description}
|
|
onChange={(event) => setGoalDraft((prev) => ({ ...prev, description: event.target.value }))}
|
|
placeholder="Description"
|
|
className={`${inputClass} md:col-span-2 min-h-20`}
|
|
/>
|
|
</form>
|
|
{goalStatus && <p className="mt-3 text-sm text-muted-foreground">{goalStatus}</p>}
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<h2 className="text-lg font-bold text-foreground">Goal progress</h2>
|
|
<div className="mt-4 space-y-3">
|
|
{goals.filter((goal) => goal.status !== "archived").map((goal) => (
|
|
<div key={goal.id} className="rounded-xl border border-border bg-background/40 p-4">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="font-semibold text-foreground">{goal.name}</p>
|
|
<span className="rounded-full border border-border bg-secondary/60 px-2 py-0.5 text-[11px] font-semibold capitalize text-muted-foreground">{goal.priority}</span>
|
|
<span className="rounded-full border border-border bg-background px-2 py-0.5 text-[11px] font-semibold capitalize text-muted-foreground">{goal.status}</span>
|
|
</div>
|
|
{goal.description && <p className="mt-1 text-sm text-muted-foreground">{goal.description}</p>}
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{formatMoney(goal.currentAmount)} of {formatMoney(goal.targetAmount)}
|
|
{goal.targetDate ? ` by ${new Date(goal.targetDate).toLocaleDateString()}` : ""}
|
|
</p>
|
|
</div>
|
|
<p className="text-lg font-bold text-foreground">{goal.progressPercent.toFixed(0)}%</p>
|
|
</div>
|
|
<div className="mt-3 h-2 overflow-hidden rounded-full bg-secondary">
|
|
<div className="h-full bg-primary" style={{ width: `${Math.min(goal.progressPercent, 100)}%` }} />
|
|
</div>
|
|
<div className="mt-3 flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={goalContributions[goal.id] ?? ""}
|
|
onChange={(event) => setGoalContributions((prev) => ({ ...prev, [goal.id]: event.target.value }))}
|
|
placeholder="Add amount"
|
|
className={inputClass}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => contributeToGoal(goal)}
|
|
className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary"
|
|
>
|
|
Add
|
|
</button>
|
|
{goal.status !== "completed" ? (
|
|
<button type="button" onClick={() => setGoalStatusValue(goal, "completed")} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
|
|
Complete
|
|
</button>
|
|
) : (
|
|
<button type="button" onClick={() => setGoalStatusValue(goal, "active")} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
|
|
Reopen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!goals.filter((goal) => goal.status !== "archived").length && <p className="text-sm text-muted-foreground">No shared goals yet.</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-lg font-bold text-foreground">Accounts by ownership</h2>
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Mine / theirs / joint</span>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-3">
|
|
{(["mine", "theirs", "joint"] as const).map((key) => {
|
|
const item = dashboard.ownershipBreakdown[key] ?? { accountCount: 0, balance: 0 };
|
|
return (
|
|
<div key={key} className="rounded-xl border border-border bg-background/50 p-4">
|
|
<p className="text-sm font-semibold capitalize text-foreground">{key}</p>
|
|
<p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(item.balance)}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{item.accountCount} accounts</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
{dashboard.accounts.map((account) => (
|
|
<div key={account.displayId} className="flex flex-col gap-3 rounded-xl border border-border bg-background/40 p-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="font-semibold text-foreground">{accountLabel(account)}</p>
|
|
<p className="text-sm capitalize text-muted-foreground">
|
|
{account.accountType} · {account.ownershipType} · {account.syncStatus}
|
|
</p>
|
|
</div>
|
|
<p className="text-lg font-bold text-foreground">{formatMoney(account.currentBalance)}</p>
|
|
</div>
|
|
))}
|
|
{!dashboard.accounts.length && <p className="text-sm text-muted-foreground">No household accounts linked yet.</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-foreground">Collaborators</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">Invite accountants or advisors with view-only household access.</p>
|
|
</div>
|
|
<span className="rounded-full border border-border bg-secondary/60 px-3 py-1 text-xs font-semibold text-muted-foreground">
|
|
{dashboard.members.length} active
|
|
</span>
|
|
</div>
|
|
<form onSubmit={inviteCollaborator} className="mt-4 grid gap-2 sm:grid-cols-[1fr_130px_auto]">
|
|
<input
|
|
value={inviteDraft.email}
|
|
onChange={(event) => setInviteDraft((prev) => ({ ...prev, email: event.target.value }))}
|
|
type="email"
|
|
placeholder="advisor@example.com"
|
|
className={inputClass}
|
|
/>
|
|
<select
|
|
value={inviteDraft.role}
|
|
onChange={(event) => setInviteDraft((prev) => ({ ...prev, role: event.target.value }))}
|
|
className={inputClass}
|
|
>
|
|
<option value="accountant">Accountant</option>
|
|
<option value="advisor">Advisor</option>
|
|
<option value="viewer">Viewer</option>
|
|
<option value="member">Member</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
<button
|
|
type="submit"
|
|
disabled={!inviteDraft.email.trim()}
|
|
className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
Invite
|
|
</button>
|
|
</form>
|
|
{collaborationStatus && <p className="mt-3 text-sm text-muted-foreground">{collaborationStatus}</p>}
|
|
<div className="mt-4 space-y-3">
|
|
{dashboard.members.map((member) => (
|
|
<div key={member.id} className="rounded-xl border border-border bg-background/40 p-4">
|
|
<div className="min-w-0">
|
|
<p className="truncate font-semibold text-foreground">{member.user?.fullName || member.user?.email || member.userId}</p>
|
|
<p className="truncate text-sm text-muted-foreground">{member.user?.email}</p>
|
|
</div>
|
|
<div className="mt-3 grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
|
|
<select
|
|
value={member.role}
|
|
onChange={(event) => updateMemberAccess(member, { role: event.target.value })}
|
|
className={inputClass}
|
|
>
|
|
<option value="owner">Owner</option>
|
|
{collaboratorRoles.map((role) => (
|
|
<option key={role} value={role}>{role}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={member.status ?? "active"}
|
|
onChange={(event) => updateMemberAccess(member, { status: event.target.value })}
|
|
className={inputClass}
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="removed">Removed</option>
|
|
</select>
|
|
<span className="rounded-lg border border-border bg-secondary/60 px-3 py-2 text-xs font-semibold capitalize text-muted-foreground">
|
|
{member.role}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{!!invites.length && (
|
|
<div className="mt-5">
|
|
<p className="text-sm font-semibold text-foreground">Pending invites</p>
|
|
<div className="mt-3 space-y-2">
|
|
{invites.filter((invite) => invite.status === "pending").map((invite) => (
|
|
<div key={invite.id} className="flex items-center justify-between gap-3 rounded-xl border border-border bg-background/40 p-3">
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold text-foreground">{invite.email}</p>
|
|
<p className="text-xs capitalize text-muted-foreground">{invite.role} · expires {new Date(invite.expiresAt).toLocaleDateString()}</p>
|
|
</div>
|
|
<span className="rounded-full border border-border bg-secondary/60 px-2 py-1 text-[11px] font-semibold capitalize text-muted-foreground">{invite.status}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<h2 className="text-lg font-bold text-foreground">Six-month cashflow</h2>
|
|
<div className="mt-5 space-y-4">
|
|
{dashboard.cashflow.map((month) => (
|
|
<div key={month.month}>
|
|
<div className="mb-2 flex items-center justify-between text-sm">
|
|
<span className="font-semibold text-foreground">{monthLabel(month.month)}</span>
|
|
<span className={month.net >= 0 ? "text-green-500" : "text-red-500"}>{formatMoney(month.net)}</span>
|
|
</div>
|
|
<div className="grid h-2 grid-cols-2 overflow-hidden rounded-full bg-secondary">
|
|
<div className="bg-green-500" style={{ width: `${Math.max(4, (month.income / maxCashflow) * 100)}%` }} />
|
|
<div className="justify-self-end bg-red-500" style={{ width: `${Math.max(4, (month.expenses / maxCashflow) * 100)}%` }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel rounded-2xl p-6 shadow-sm">
|
|
<h2 className="text-lg font-bold text-foreground">Recent shared transactions</h2>
|
|
<div className="mt-4 divide-y divide-border">
|
|
{dashboard.recentTransactions.map((transaction, index) => (
|
|
<div key={`${transaction.date}-${index}`} className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="min-w-0">
|
|
<p className="truncate font-semibold text-foreground">{transaction.description}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{new Date(transaction.date).toLocaleDateString()} · {transaction.category} · {accountLabel(transaction.account)}
|
|
</p>
|
|
</div>
|
|
<p className={`font-bold ${transaction.amount < 0 ? "text-green-500" : "text-foreground"}`}>
|
|
{formatMoney(transaction.amount)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
{!dashboard.recentTransactions.length && <p className="py-4 text-sm text-muted-foreground">No shared transactions yet.</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="glass-panel rounded-2xl p-8 text-sm text-muted-foreground">
|
|
Create a household to start viewing shared accounts and cashflow.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|