Added EditScenarioModal to MilestoneTracker.js

This commit is contained in:
Josh 2025-05-02 14:57:07 +00:00
parent ff7ab9f775
commit 493b72ce20

View File

@ -66,7 +66,9 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
const [simulationYearsInput, setSimulationYearsInput] = useState('20');
const simulationYears = parseInt(simulationYearsInput, 10) || 20;
// --- ADDED: showEditModal state
const [showEditModal, setShowEditModal] = useState(false);
const [pendingCareerForModal, setPendingCareerForModal] = useState(null);
const {
@ -192,13 +194,65 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
const allImpacts = milestonesWithImpacts.flatMap((m) => m.impacts);
// mergedProfile
const mergedProfile = buildMergedProfile(
financialProfile,
scenarioRow,
collegeProfile,
allImpacts,
simulationYears
);
const mergedProfile = {
currentSalary: financialProfile.current_salary || 0,
monthlyExpenses:
scenarioRow.planned_monthly_expenses ??
financialProfile.monthly_expenses ??
0,
monthlyDebtPayments:
scenarioRow.planned_monthly_debt_payments ??
financialProfile.monthly_debt_payments ??
0,
retirementSavings: financialProfile.retirement_savings ?? 0,
emergencySavings: financialProfile.emergency_fund ?? 0,
monthlyRetirementContribution:
scenarioRow.planned_monthly_retirement_contribution ??
financialProfile.retirement_contribution ??
0,
monthlyEmergencyContribution:
scenarioRow.planned_monthly_emergency_contribution ??
financialProfile.emergency_contribution ??
0,
surplusEmergencyAllocation:
scenarioRow.planned_surplus_emergency_pct ??
financialProfile.extra_cash_emergency_pct ??
50,
surplusRetirementAllocation:
scenarioRow.planned_surplus_retirement_pct ??
financialProfile.extra_cash_retirement_pct ??
50,
additionalIncome:
scenarioRow.planned_additional_income ??
financialProfile.additional_income ??
0,
// college
studentLoanAmount: collegeProfile.existing_college_debt || 0,
interestRate: collegeProfile.interest_rate || 5,
loanTerm: collegeProfile.loan_term || 10,
loanDeferralUntilGraduation: !!collegeProfile.loan_deferral_until_graduation,
academicCalendar: collegeProfile.academic_calendar || 'monthly',
annualFinancialAid: collegeProfile.annual_financial_aid || 0,
calculatedTuition: collegeProfile.tuition || 0,
extraPayment: collegeProfile.extra_payment || 0,
inCollege:
collegeProfile.college_enrollment_status === 'currently_enrolled' ||
collegeProfile.college_enrollment_status === 'prospective_student',
gradDate: collegeProfile.expected_graduation || null,
programType: collegeProfile.program_type || null,
creditHoursPerYear: collegeProfile.credit_hours_per_year || 0,
hoursCompleted: collegeProfile.hours_completed || 0,
programLength: collegeProfile.program_length || 0,
expectedSalary:
collegeProfile.expected_salary || financialProfile.current_salary || 0,
// scenario horizon
startDate: new Date().toISOString(),
simulationYears,
milestoneImpacts: allImpacts
};
const { projectionData: pData, loanPaidOffMonth: payoff } =
simulateFinancialProjection(mergedProfile);
@ -217,64 +271,9 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
})();
}, [financialProfile, scenarioRow, collegeProfile, careerPathId, apiURL, simulationYears]);
function buildMergedProfile(finProf, scenRow, colProf, milestoneImpacts, simYears) {
return {
currentSalary: finProf.current_salary || 0,
monthlyExpenses:
scenRow.planned_monthly_expenses ?? finProf.monthly_expenses ?? 0,
monthlyDebtPayments:
scenRow.planned_monthly_debt_payments ?? finProf.monthly_debt_payments ?? 0,
retirementSavings: finProf.retirement_savings ?? 0,
emergencySavings: finProf.emergency_fund ?? 0,
monthlyRetirementContribution:
scenRow.planned_monthly_retirement_contribution ??
finProf.retirement_contribution ??
0,
monthlyEmergencyContribution:
scenRow.planned_monthly_emergency_contribution ??
finProf.emergency_contribution ??
0,
surplusEmergencyAllocation:
scenRow.planned_surplus_emergency_pct ??
finProf.extra_cash_emergency_pct ??
50,
surplusRetirementAllocation:
scenRow.planned_surplus_retirement_pct ??
finProf.extra_cash_retirement_pct ??
50,
additionalIncome:
scenRow.planned_additional_income ?? finProf.additional_income ?? 0,
// college
studentLoanAmount: colProf.existing_college_debt || 0,
interestRate: colProf.interest_rate || 5,
loanTerm: colProf.loan_term || 10,
loanDeferralUntilGraduation: !!colProf.loan_deferral_until_graduation,
academicCalendar: colProf.academic_calendar || 'monthly',
annualFinancialAid: colProf.annual_financial_aid || 0,
calculatedTuition: colProf.tuition || 0,
extraPayment: colProf.extra_payment || 0,
inCollege:
colProf.college_enrollment_status === 'currently_enrolled' ||
colProf.college_enrollment_status === 'prospective_student',
gradDate: colProf.expected_graduation || null,
programType: colProf.program_type || null,
creditHoursPerYear: colProf.credit_hours_per_year || 0,
hoursCompleted: colProf.hours_completed || 0,
programLength: colProf.program_length || 0,
expectedSalary: colProf.expected_salary || finProf.current_salary || 0,
// scenario horizon
startDate: new Date().toISOString(),
simulationYears: simYears,
milestoneImpacts: milestoneImpacts || []
};
}
// If you want to re-run simulation after any milestone changes:
const reSimulate = async () => {
// Put your logic to re-fetch scenario + milestones, then re-run sim
// Put your logic to re-fetch scenario + milestones, then re-run sim (if needed).
};
// handle user typing simulation length
@ -358,12 +357,10 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
{/* 2) We keep MilestoneTimeline for tasks, +Add Milestone button, etc. */}
<MilestoneTimeline
// e.g. pass the scenario ID
careerPathId={careerPathId}
authFetch={authFetch}
activeView="Career"
onMilestoneUpdated={() => {
}}
onMilestoneUpdated={() => {}}
/>
{/* 3) AI-Suggested Milestones */}
@ -442,16 +439,20 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
</div>
)}
{/* 5) Simulation length input */}
{/* 5) Simulation length input + the new Edit button */}
<div className="space-x-2">
<label className="font-medium">Simulation Length (years):</label>
<input
type="text"
value={simulationYearsInput}
onChange={(e) => setSimulationYearsInput(e.target.value)}
onChange={handleSimulationYearsChange}
onBlur={handleSimulationYearsBlur}
className="border rounded p-1 w-16"
/>
{/* EDIT BUTTON => open ScenarioEditModal */}
<Button onClick={() => setShowEditModal(true)} className="ml-2">
Edit
</Button>
</div>
{/* 6) Career Search, scenario edit modal, etc. */}
@ -461,17 +462,6 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
}}
/>
<ScenarioEditModal
show={showEditModal}
onClose={() => setShowEditModal(false)}
financialProfile={financialProfile}
setFinancialProfile={setFinancialProfile}
collegeProfile={collegeProfile}
setCollegeProfile={setCollegeProfile}
apiURL={apiURL}
authFetch={authFetch}
/>
{pendingCareerForModal && (
<Button
onClick={() => {
@ -483,6 +473,23 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
Confirm Career Change to {pendingCareerForModal}
</Button>
)}
{/* Pass scenarioRow to the modal, and optionally do a hard refresh onClose */}
<ScenarioEditModal
show={showEditModal}
onClose={() => {
setShowEditModal(false);
// Hard-refresh if you want to replicate "ScenarioContainer" approach:
window.location.reload();
}}
scenario={scenarioRow}
financialProfile={financialProfile}
setFinancialProfile={setFinancialProfile}
collegeProfile={collegeProfile}
setCollegeProfile={setCollegeProfile}
apiURL={apiURL}
authFetch={authFetch}
/>
</div>
);
};