125 lines
5.5 KiB
JavaScript
125 lines
5.5 KiB
JavaScript
import React from 'react';
|
|
// Hypothetical Button component from your UI library
|
|
import { Button } from '../ui/button.js'; // Adjust path if needed
|
|
|
|
/**
|
|
* Helper to format numeric fields for display.
|
|
* If val is null/undefined or 0 and you want to hide it,
|
|
* you can adapt the logic below.
|
|
*/
|
|
function formatNum(val) {
|
|
// If val is null or undefined, show 'N/A'
|
|
if (val == null) return 'N/A';
|
|
// If you'd like to hide zero, you could do:
|
|
// if (val === 0) return 'N/A';
|
|
return val;
|
|
}
|
|
|
|
function ReviewPage({
|
|
careerData = {},
|
|
financialData = {},
|
|
collegeData = {},
|
|
onSubmit,
|
|
onBack
|
|
}) {
|
|
// Decide if user is in or planning to be in college
|
|
const inOrPlanningCollege = (
|
|
careerData.college_enrollment_status === 'currently_enrolled'
|
|
|| careerData.college_enrollment_status === 'prospective_student'
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
<div className="max-w-xl mx-auto p-6 space-y-6">
|
|
<h2 className="text-2xl font-semibold">Review Your Info</h2>
|
|
|
|
{/* --- CAREER SECTION --- */}
|
|
<div className="p-4 border rounded-md space-y-2">
|
|
<h3 className="text-xl font-semibold">Career Info</h3>
|
|
<div><strong>Career Name:</strong> {careerData.career_name || 'N/A'}</div>
|
|
<div><strong>Currently Working:</strong> {careerData.currently_working || 'N/A'}</div>
|
|
<div><strong>College enrollment Status:</strong> {careerData.college_enrollment_status || 'N/A'}</div>
|
|
<div><strong>Status:</strong> {careerData.status || 'N/A'}</div>
|
|
<div><strong>Start Date:</strong> {careerData.start_date || 'N/A'}</div>
|
|
<div><strong>Projected End Date:</strong> {careerData.projected_end_date || 'N/A'}</div>
|
|
<div><strong>Career Goals:</strong> {careerData.career_goals || 'N/A'}</div>
|
|
</div>
|
|
|
|
{/* --- FINANCIAL SECTION --- */}
|
|
<div className="p-4 border rounded-md space-y-2">
|
|
<h3 className="text-xl font-semibold">Financial Info</h3>
|
|
|
|
{/* Current/Additional Income */}
|
|
{careerData.currently_working === 'yes' ? (
|
|
<div className="space-y-1">
|
|
<div><strong>Current Annual Salary:</strong> {formatNum(financialData.current_salary)}</div>
|
|
<div><strong>Additional Annual Income:</strong> {formatNum(financialData.additional_income)}</div>
|
|
</div>
|
|
) : (
|
|
<div><strong>Currently Not Working</strong></div>
|
|
)}
|
|
|
|
{/* Monthly Expenses / Debt */}
|
|
<div className="mt-2 space-y-1">
|
|
<div><strong>Monthly Expenses:</strong> {formatNum(financialData.monthly_expenses)}</div>
|
|
<div><strong>Monthly Debt Payments:</strong> {formatNum(financialData.monthly_debt_payments)}</div>
|
|
</div>
|
|
|
|
{/* Retirement */}
|
|
<div className="mt-2 space-y-1">
|
|
<div><strong>Retirement Savings:</strong> {formatNum(financialData.retirement_savings)}</div>
|
|
<div><strong>Monthly Retirement Contribution:</strong> {formatNum(financialData.retirement_contribution)}</div>
|
|
</div>
|
|
|
|
{/* Emergency Fund */}
|
|
<div className="mt-2 space-y-1">
|
|
<div><strong>Emergency Fund Savings:</strong> {formatNum(financialData.emergency_fund)}</div>
|
|
<div><strong>Monthly Emergency Contribution:</strong> {formatNum(financialData.emergency_contribution)}</div>
|
|
</div>
|
|
|
|
{/* Extra Monthly Cash Allocation */}
|
|
<div className="mt-2 space-y-1">
|
|
<div><strong>Extra Monthly Cash to Emergency (%):</strong> {formatNum(financialData.extra_cash_emergency_pct)}</div>
|
|
<div><strong>Extra Monthly Cash to Retirement (%):</strong> {formatNum(financialData.extra_cash_retirement_pct)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- COLLEGE SECTION --- */}
|
|
{inOrPlanningCollege && (
|
|
<div className="p-4 border rounded-md space-y-2">
|
|
<h3 className="text-xl font-semibold">College Info</h3>
|
|
|
|
<div><strong>College Name:</strong> {formatNum(collegeData.selected_school)}</div>
|
|
<div><strong>Major</strong> {formatNum(collegeData.selected_program)}</div>
|
|
<div><strong>Program Type</strong> {formatNum(collegeData.program_type)}</div>
|
|
<div><strong>Yearly Tuition</strong> {formatNum(collegeData.tuition)}</div>
|
|
<div><strong>Program Length (years)</strong> {formatNum(collegeData.program_length)}</div>
|
|
<div><strong>Credit Hours Per Year</strong> {formatNum(collegeData.credit_hours_per_year)}</div>
|
|
<div><strong>Credit Hours Required</strong> {formatNum(collegeData.credit_hours_required)}</div>
|
|
<div><strong>Hours Completed</strong> {formatNum(collegeData.hours_completed)}</div>
|
|
<div><strong>Is In State?</strong> {formatNum(collegeData.is_in_state)}</div>
|
|
<div><strong>Loan Deferral Until Graduation?</strong> {formatNum(collegeData.loan_deferral_until_graduation)}</div>
|
|
<div><strong>Annual Financial Aid</strong> {formatNum(collegeData.annual_financial_aid)}</div>
|
|
<div><strong>Existing College Debt</strong> {formatNum(collegeData.existing_college_debt)}</div>
|
|
<div><strong>Extra Monthly Payment</strong> {formatNum(collegeData.extra_payment)}</div>
|
|
<div><strong>Expected Graduation</strong> {formatNum(collegeData.expected_graduation)}</div>
|
|
<div><strong>Expected Salary</strong> {formatNum(collegeData.expected_salary)}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* --- ACTION BUTTONS --- */}
|
|
<div className="flex justify-between pt-4">
|
|
<Button variant="secondary" onClick={onBack}>
|
|
← Back
|
|
</Button>
|
|
<Button variant="primary" onClick={onSubmit}>
|
|
Submit All
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ReviewPage;
|