import { useState } from "react";
import { createRoot } from "react-dom/client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { motion } from "framer-motion";
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from "recharts";
export default function RetirementCalculator() {
const [form, setForm] = useState({
currentAge: "",
retirementAge: "",
currentSavings: "",
annualSavings: "",
monthlyLivingExpense: "",
expectedReturn: "",
inflationRate: "",
});
const [result, setResult] = useState(null);
const handleChange = (e) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
const formatCurrency = (value) => {
return `$${parseFloat(value).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};
const calculateRetirement = () => {
const {
currentAge,
retirementAge,
currentSavings,
annualSavings,
monthlyLivingExpense,
expectedReturn,
inflationRate,
} = form;
const lifeExpectancy = 100;
const retirementYears = lifeExpectancy - retirementAge;
const workingYears = retirementAge - currentAge;
const annualGrowthRate = parseFloat(expectedReturn) / 100;
const inflationAdjustment = Math.pow(1 + parseFloat(inflationRate) / 100, workingYears);
let savings = parseFloat(currentSavings);
for (let i = 0; i < workingYears; i++) {
savings = (savings + parseFloat(annualSavings)) * (1 + annualGrowthRate);
}
const annualLivingExpense = parseFloat(monthlyLivingExpense) * 12;
const adjustedAnnualLivingExpense = annualLivingExpense * inflationAdjustment;
const amountNeededWithoutInflation = annualLivingExpense * retirementYears;
const monthlySavingsNeededWithoutInflation = (amountNeededWithoutInflation - savings) / (workingYears * 12);
const amountNeededWithInflation = adjustedAnnualLivingExpense * retirementYears;
const monthlySavingsNeededWithInflation = (amountNeededWithInflation - savings) / (workingYears * 12);
const retirementProjection = [];
let remainingSavings = savings;
let yearFundsDeplete = null;
for (let year = 1; year <= retirementYears; year++) {
const adjustedExpense = annualLivingExpense * Math.pow(1 + parseFloat(inflationRate) / 100, year - 1);
remainingSavings = (remainingSavings - adjustedExpense) * (1 + annualGrowthRate);
if (remainingSavings <= 0 && !yearFundsDeplete) {
yearFundsDeplete = year;
}
retirementProjection.push({
year: `Year ${year}`,
age: parseInt(retirementAge) + year,
remainingSavings: remainingSavings > 0 ? remainingSavings : 0,
});
if (remainingSavings <= 0) break;
}
setResult({
savings,
amountNeededWithoutInflation,
monthlySavingsNeededWithoutInflation,
amountNeededWithInflation,
monthlySavingsNeededWithInflation,
totalAnnualWithdrawal: annualLivingExpense,
yearFundsDeplete,
projection: retirementProjection,
retirementAge: parseInt(retirementAge),
});
};
return (
Acumen Legacy Retirement Calculator
Discover potential gaps in your retirement plan and let Acumen Legacy help you enhance your financial future.
{[
{ label: "Current Age", name: "currentAge" },
{ label: "Retirement Age", name: "retirementAge" },
{ label: "Current Savings ($)", name: "currentSavings" },
{ label: "Annual Savings ($)", name: "annualSavings" },
{ label: "How much do you need a month to live off? ($)", name: "monthlyLivingExpense" },
{ label: "Expected Annual Return (%)", name: "expectedReturn", note: "(Most financial planners use 6-8%)" },
{ label: "Annual Inflation Rate (%)", name: "inflationRate", note: "(Typical historical rate: 4%)" },
].map(({ label, name, note }) => (
{label} {note && {note} }
))}
Calculate
{result && (
Results Overview
This is how much you need to have saved by age {result.retirementAge} (not accounting for inflation):{' '}
{formatCurrency(result.amountNeededWithoutInflation)}
This is how much you need to save each month (not accounting for inflation) :{' '}
{formatCurrency(result.monthlySavingsNeededWithoutInflation)}
This is how much you need to have saved by age {result.retirementAge} (accounting for inflation):{' '}
{formatCurrency(result.amountNeededWithInflation)}
This is how much you need to save each month (accounting for inflation) :{' '}
{formatCurrency(result.monthlySavingsNeededWithInflation)}
Total annual withdrawal needed: {formatCurrency(result.totalAnnualWithdrawal)}
{result.yearFundsDeplete ? (
Your funds will deplete in year {result.yearFundsDeplete} of retirement (at age {result.retirementAge + result.yearFundsDeplete}).
) : (
Your savings last through your planned retirement years.
)}
Savings Over Retirement Years
formatCurrency(value)} />
formatCurrency(value)} />
alert("Schedule a consultation with Acumen Legacy today!")}>
Enhance Your Plan
)}
);
}
// Mount the component if used as a standalone app
const container = document.getElementById("root");
if (container) {
const root = createRoot(container);
root.render(
);
}
