jcoakley/dev1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added UI explanation in Loan Repayment fields

Browse Source
This commit is contained in:
Josh 2025-03-11 13:57:26 +00:00
parent a16fe7f19a
commit 7fe2651d9a
1 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/LoanRepayment.js
View File

@ -7,7 +7,7 @@ function LoanRepayment({
setResults,
setLoading,
}) {
const [selectedSalary, setSelectedSalary] = useState('10th Percentile');
const [expectedSalary, setExpectedSalary] = useState('');
const [tuitionType, setTuitionType] = useState('inState'); // Tuition type: inState or outOfState
const [interestRate, setInterestRate] = useState(5.5); // Interest rate
const [loanTerm, setLoanTerm] = useState(10); // Loan term in years
@ -20,22 +20,32 @@ function LoanRepayment({
setError('School data is missing. Loan calculations cannot proceed.');
return false;
}
if (interestRate <= 0) {
setError('Interest rate must be greater than 0.');
if (isNaN(interestRate) || interestRate <= 0) {
setError('Interest rate must be a valid number greater than 0.');
return false;
}
if (loanTerm <= 0) {
setError('Loan term must be greater than 0.');
if (isNaN(loanTerm) || loanTerm <= 0) {
setError('Loan term must be a valid number greater than 0.');
return false;
}
if (extraPayment < 0) {
if (isNaN(extraPayment) || extraPayment < 0) {
setError('Extra monthly payment cannot be negative.');
return false;
}
if (currentSalary < 0) {
setError('Current salary cannot be negative.');
if (isNaN(currentSalary) || currentSalary < 0) {
setError('Current salary must be a valid number and cannot be negative.');
return false;
}
if (isNaN(expectedSalary) || expectedSalary < 0) {
setError('Expected salary must be a valid number and cannot be negative.');
return false;
}
setError(null);
return true;
};
@ -75,7 +85,7 @@ function LoanRepayment({
const totalLoanCost = extraMonthlyPayment * monthsWithExtra;
let salary = Number(salaryData.find((point) => point.percentile === selectedSalary)?.value || 0);
let salary = Number(expectedSalary) || 0;
let netGain = 'N/A';
let monthlySalary = 'N/A';
@ -113,28 +123,44 @@ function LoanRepayment({
</div>
<div className="input-group">
<label>Interest Rate:</label>
<input type="number" value={interestRate} onChange={(e) => setInterestRate(e.target.value)} />
<input type="number"
value={interestRate}
onChange={(e) => setInterestRate(e.target.value)}
placeholder="Enter the interest rate"
/>
</div>
<div className="input-group">
<label>Loan Term (years):</label>
<input type="number" value={loanTerm} onChange={(e) => setLoanTerm(e.target.value)} />
<input type="number"
value={loanTerm}
onChange={(e) => setLoanTerm(e.target.value)}
placeholder="Enter the length of the loan repayment period"
/>
</div>
<div className="input-group">
<label>Extra Monthly Payment:</label>
<input type="number" value={extraPayment} onChange={(e) => setExtraPayment(e.target.value)} />
<input type="number"
value={extraPayment}
onChange={(e) => setExtraPayment(e.target.value)}
placeholder="Enter any additional monthly payment" />
/>
</div>
<div className="input-group">
<label>Current Salary:</label>
<input type="number" value={currentSalary} onChange={(e) => setCurrentSalary(e.target.value)} />
<input type="number"
value={currentSalary}
onChange={(e) => setCurrentSalary(e.target.value)}
placeholder="Enter your current salary" />
</div>
<div className="input-group">
<label>Expected Salary:</label>
<select value={selectedSalary} onChange={(e) => setSelectedSalary(e.target.value)}>
{salaryData.map((point, index) => (
<option key={index} value={point.percentile}>{point.percentile}</option>
))}
</select>
</div>
<label>Expected Salary:</label>
<input
type="number"
value={expectedSalary}
onChange={(e) => setExpectedSalary(e.target.value)}
placeholder="Enter expected salary"
/>
</div>
<div className="calculate-button-container">
<button type="submit">Calculate</button>
</div>