import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
export default function MortgageAffordabilityCalculator() {
const [income, setIncome] = useState('');
const [debt, setDebt] = useState('');
const [deposit, setDeposit] = useState('');
const [interestRate, setInterestRate] = useState('');
const [term, setTerm] = useState('');
const [results, setResults] = useState(null);
const calculate = () => {
const grossIncome = parseFloat(income);
const monthlyDebt = parseFloat(debt);
const depositAmt = parseFloat(deposit);
const rate = parseFloat(interestRate) / 100 / 12;
const termMonths = parseInt(term) * 12;
if (isNaN(grossIncome) || isNaN(monthlyDebt) || isNaN(depositAmt) ||
isNaN(rate) || isNaN(termMonths)) return;
// Basic lending multiple
const maxLoanBeforeDebt = grossIncome * 4.5;
// Affordability reduction for debt (approximate)
const affordabilityAdjustment = monthlyDebt * termMonths;
const adjustedLoan = Math.max(maxLoanBeforeDebt -
affordabilityAdjustment, 0);
// Monthly payment estimation using formula
const monthlyPayment = (adjustedLoan * rate) / (1 - Math.pow(1 +
rate, -termMonths));
// Total property value
const maxPropertyValue = adjustedLoan + depositAmt;
setResults({
loan: adjustedLoan.toFixed(0),
payment: monthlyPayment.toFixed(2),
property: maxPropertyValue.toFixed(0),
});
};
return (
)}
);
}
🏡 Mortgage Affordability Calculator
setIncome(e.target.value)} /> setDebt(e.target.value)} /> setDeposit(e.target.value)} /> setInterestRate(e.target.value)} /> setTerm(e.target.value)} /> {results && (Estimated Maximum Loan: £{results.loan}
Estimated Monthly Payment: £{results.payment}
Estimated Property Value: £{results.property}