498 lines
17 KiB
JavaScript
498 lines
17 KiB
JavaScript
// src/components/MilestoneTracker.js
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useLocation, useNavigate } from 'react-router-dom';
|
||
import { Line } from 'react-chartjs-2';
|
||
import {
|
||
Chart as ChartJS,
|
||
LineElement,
|
||
CategoryScale,
|
||
LinearScale,
|
||
PointElement,
|
||
Tooltip,
|
||
Legend
|
||
} from 'chart.js';
|
||
import annotationPlugin from 'chartjs-plugin-annotation';
|
||
import { Filler } from 'chart.js';
|
||
import { Button } from './ui/button.js';
|
||
import authFetch from '../utils/authFetch.js';
|
||
import CareerSelectDropdown from './CareerSelectDropdown.js';
|
||
import CareerSearch from './CareerSearch.js';
|
||
|
||
// Keep MilestoneTimeline for +Add Milestone & tasks CRUD
|
||
import MilestoneTimeline from './MilestoneTimeline.js';
|
||
|
||
import AISuggestedMilestones from './AISuggestedMilestones.js';
|
||
import ScenarioEditModal from './ScenarioEditModal.js';
|
||
|
||
import './MilestoneTracker.css';
|
||
import './MilestoneTimeline.css';
|
||
import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
|
||
|
||
// Register Chart + annotation plugin
|
||
ChartJS.register(
|
||
LineElement,
|
||
CategoryScale,
|
||
LinearScale,
|
||
Filler,
|
||
PointElement,
|
||
Tooltip,
|
||
Legend,
|
||
annotationPlugin
|
||
);
|
||
|
||
const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
|
||
const location = useLocation();
|
||
const navigate = useNavigate();
|
||
const apiURL = process.env.REACT_APP_API_URL;
|
||
|
||
// --------------------------------------------------
|
||
// State
|
||
// --------------------------------------------------
|
||
const [selectedCareer, setSelectedCareer] = useState(initialCareer || null);
|
||
const [careerPathId, setCareerPathId] = useState(null);
|
||
const [existingCareerPaths, setExistingCareerPaths] = useState([]);
|
||
const [activeView, setActiveView] = useState('Career');
|
||
|
||
const [financialProfile, setFinancialProfile] = useState(null);
|
||
const [scenarioRow, setScenarioRow] = useState(null);
|
||
const [collegeProfile, setCollegeProfile] = useState(null);
|
||
|
||
// We will store the scenario’s milestones in state so we can build annotation lines
|
||
const [scenarioMilestones, setScenarioMilestones] = useState([]);
|
||
|
||
const [projectionData, setProjectionData] = useState([]);
|
||
const [loanPayoffMonth, setLoanPayoffMonth] = useState(null);
|
||
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 {
|
||
projectionData: initialProjectionData = [],
|
||
loanPayoffMonth: initialLoanPayoffMonth = null
|
||
} = location.state || {};
|
||
|
||
// --------------------------------------------------
|
||
// 1) Fetch user’s scenario list + financialProfile
|
||
// --------------------------------------------------
|
||
useEffect(() => {
|
||
const fetchCareerPaths = async () => {
|
||
const res = await authFetch(`${apiURL}/premium/career-profile/all`);
|
||
if (!res || !res.ok) return;
|
||
const data = await res.json();
|
||
setExistingCareerPaths(data.careerPaths);
|
||
|
||
const fromPopout = location.state?.selectedCareer;
|
||
if (fromPopout) {
|
||
setSelectedCareer(fromPopout);
|
||
setCareerPathId(fromPopout.career_path_id);
|
||
} else if (!selectedCareer) {
|
||
// fallback: fetch the 'latest' scenario
|
||
const latest = await authFetch(`${apiURL}/premium/career-profile/latest`);
|
||
if (latest && latest.ok) {
|
||
const latestData = await latest.json();
|
||
if (latestData?.id) {
|
||
setSelectedCareer(latestData);
|
||
setCareerPathId(latestData.id);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const fetchFinancialProfile = async () => {
|
||
const res = await authFetch(`${apiURL}/premium/financial-profile`);
|
||
if (res?.ok) {
|
||
const data = await res.json();
|
||
setFinancialProfile(data);
|
||
}
|
||
};
|
||
|
||
fetchCareerPaths();
|
||
fetchFinancialProfile();
|
||
}, [apiURL, location.state, selectedCareer]);
|
||
|
||
// --------------------------------------------------
|
||
// 2) When careerPathId changes => fetch scenarioRow + collegeProfile
|
||
// --------------------------------------------------
|
||
useEffect(() => {
|
||
if (!careerPathId) {
|
||
setScenarioRow(null);
|
||
setCollegeProfile(null);
|
||
setScenarioMilestones([]);
|
||
return;
|
||
}
|
||
|
||
async function fetchScenario() {
|
||
const scenRes = await authFetch(`${apiURL}/premium/career-profile/${careerPathId}`);
|
||
if (scenRes.ok) {
|
||
const data = await scenRes.json();
|
||
setScenarioRow(data);
|
||
} else {
|
||
console.error('Failed to fetch scenario row:', scenRes.status);
|
||
setScenarioRow(null);
|
||
}
|
||
}
|
||
|
||
async function fetchCollege() {
|
||
const colRes = await authFetch(
|
||
`${apiURL}/premium/college-profile?careerPathId=${careerPathId}`
|
||
);
|
||
if (!colRes?.ok) {
|
||
setCollegeProfile(null);
|
||
return;
|
||
}
|
||
const data = await colRes.json();
|
||
setCollegeProfile(data);
|
||
}
|
||
|
||
fetchScenario();
|
||
fetchCollege();
|
||
}, [careerPathId, apiURL]);
|
||
|
||
// --------------------------------------------------
|
||
// 3) Once scenarioRow + collegeProfile + financialProfile => run simulation
|
||
// + fetch milestones for annotation lines
|
||
// --------------------------------------------------
|
||
useEffect(() => {
|
||
if (!financialProfile || !scenarioRow || !collegeProfile) return;
|
||
|
||
(async () => {
|
||
try {
|
||
// fetch milestones for this scenario
|
||
const milRes = await authFetch(
|
||
`${apiURL}/premium/milestones?careerPathId=${careerPathId}`
|
||
);
|
||
if (!milRes.ok) {
|
||
console.error('Failed to fetch milestones for scenario', careerPathId);
|
||
return;
|
||
}
|
||
const milestonesData = await milRes.json();
|
||
const allMilestones = milestonesData.milestones || [];
|
||
setScenarioMilestones(allMilestones); // store them for annotation lines
|
||
|
||
// fetch impacts for each
|
||
const impactPromises = allMilestones.map((m) =>
|
||
authFetch(`${apiURL}/premium/milestone-impacts?milestone_id=${m.id}`)
|
||
.then((r) => (r.ok ? r.json() : null))
|
||
.then((data) => data?.impacts || [])
|
||
.catch((err) => {
|
||
console.warn('Error fetching impacts for milestone', m.id, err);
|
||
return [];
|
||
})
|
||
);
|
||
const impactsForEach = await Promise.all(impactPromises);
|
||
const milestonesWithImpacts = allMilestones.map((m, i) => ({
|
||
...m,
|
||
impacts: impactsForEach[i] || []
|
||
}));
|
||
|
||
// flatten all
|
||
const allImpacts = milestonesWithImpacts.flatMap((m) => m.impacts);
|
||
|
||
// mergedProfile
|
||
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);
|
||
|
||
let cumu = mergedProfile.emergencySavings || 0;
|
||
const finalData = pData.map((mo) => {
|
||
cumu += mo.netSavings || 0;
|
||
return { ...mo, cumulativeNetSavings: cumu };
|
||
});
|
||
|
||
setProjectionData(finalData);
|
||
setLoanPayoffMonth(payoff);
|
||
} catch (err) {
|
||
console.error('Error in scenario simulation:', err);
|
||
}
|
||
})();
|
||
}, [financialProfile, scenarioRow, collegeProfile, careerPathId, apiURL, simulationYears]);
|
||
|
||
// 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 (if needed).
|
||
};
|
||
|
||
// handle user typing simulation length
|
||
const handleSimulationYearsChange = (e) => setSimulationYearsInput(e.target.value);
|
||
const handleSimulationYearsBlur = () => {
|
||
if (!simulationYearsInput.trim()) {
|
||
setSimulationYearsInput('20');
|
||
}
|
||
};
|
||
|
||
// Build annotation lines from scenarioMilestones
|
||
const milestoneAnnotationLines = {};
|
||
scenarioMilestones.forEach((m) => {
|
||
if (!m.date) return;
|
||
const d = new Date(m.date);
|
||
if (isNaN(d)) return;
|
||
|
||
const year = d.getUTCFullYear();
|
||
const month = String(d.getUTCMonth() + 1).padStart(2, '0');
|
||
const short = `${year}-${month}`;
|
||
|
||
if (!projectionData.some((p) => p.month === short)) return;
|
||
|
||
milestoneAnnotationLines[`milestone_${m.id}`] = {
|
||
type: 'line',
|
||
xMin: short,
|
||
xMax: short,
|
||
borderColor: 'orange',
|
||
borderWidth: 2,
|
||
label: {
|
||
display: true,
|
||
content: m.title || 'Milestone',
|
||
color: 'orange',
|
||
position: 'end'
|
||
},
|
||
// If you want them clickable:
|
||
onClick: () => {
|
||
console.log('Clicked milestone line => open editing for', m.title);
|
||
// e.g. open the MilestoneTimeline's edit feature, or do something
|
||
}
|
||
};
|
||
});
|
||
|
||
// If we also show a line for payoff:
|
||
const annotationConfig = {};
|
||
if (loanPayoffMonth) {
|
||
annotationConfig.loanPaidOffLine = {
|
||
type: 'line',
|
||
xMin: loanPayoffMonth,
|
||
xMax: loanPayoffMonth,
|
||
borderColor: 'rgba(255, 206, 86, 1)',
|
||
borderWidth: 2,
|
||
borderDash: [6, 6],
|
||
label: {
|
||
display: true,
|
||
content: 'Loan Paid Off',
|
||
position: 'end',
|
||
backgroundColor: 'rgba(255, 206, 86, 0.8)',
|
||
color: '#000',
|
||
font: { size: 12 },
|
||
rotation: 0,
|
||
yAdjust: -10
|
||
}
|
||
};
|
||
}
|
||
const allAnnotations = { ...milestoneAnnotationLines, ...annotationConfig };
|
||
|
||
return (
|
||
<div className="milestone-tracker max-w-screen-lg mx-auto px-4 py-6 space-y-6">
|
||
{/* 1) Career dropdown */}
|
||
<CareerSelectDropdown
|
||
existingCareerPaths={existingCareerPaths}
|
||
selectedCareer={selectedCareer}
|
||
onChange={(selected) => {
|
||
setSelectedCareer(selected);
|
||
setCareerPathId(selected?.id || null);
|
||
}}
|
||
loading={!existingCareerPaths.length}
|
||
authFetch={authFetch}
|
||
/>
|
||
|
||
{/* 2) We keep MilestoneTimeline for tasks, +Add Milestone button, etc. */}
|
||
<MilestoneTimeline
|
||
careerPathId={careerPathId}
|
||
authFetch={authFetch}
|
||
activeView="Career"
|
||
onMilestoneUpdated={() => {}}
|
||
/>
|
||
|
||
{/* 3) AI-Suggested Milestones */}
|
||
<AISuggestedMilestones
|
||
career={selectedCareer?.career_name}
|
||
careerPathId={careerPathId}
|
||
authFetch={authFetch}
|
||
activeView={activeView}
|
||
projectionData={projectionData}
|
||
/>
|
||
|
||
{/* 4) The main chart with annotation lines */}
|
||
{projectionData.length > 0 && (
|
||
<div className="bg-white p-4 rounded shadow space-y-4">
|
||
<h3 className="text-lg font-semibold">Financial Projection</h3>
|
||
<Line
|
||
data={{
|
||
labels: projectionData.map((p) => p.month),
|
||
datasets: [
|
||
{
|
||
label: 'Total Savings',
|
||
data: projectionData.map((p) => p.cumulativeNetSavings),
|
||
borderColor: 'rgba(54, 162, 235, 1)',
|
||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||
tension: 0.4,
|
||
fill: true
|
||
},
|
||
{
|
||
label: 'Loan Balance',
|
||
data: projectionData.map((p) => p.loanBalance),
|
||
borderColor: 'rgba(255, 99, 132, 1)',
|
||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||
tension: 0.4,
|
||
fill: {
|
||
target: 'origin',
|
||
above: 'rgba(255,99,132,0.3)',
|
||
below: 'transparent'
|
||
}
|
||
},
|
||
{
|
||
label: 'Retirement Savings',
|
||
data: projectionData.map((p) => p.retirementSavings),
|
||
borderColor: 'rgba(75, 192, 192, 1)',
|
||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
tension: 0.4,
|
||
fill: true
|
||
}
|
||
]
|
||
}}
|
||
options={{
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { position: 'bottom' },
|
||
tooltip: { mode: 'index', intersect: false },
|
||
annotation: {
|
||
annotations: allAnnotations
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
ticks: {
|
||
callback: (value) => `$${value.toLocaleString()}`
|
||
}
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
<div>
|
||
{loanPayoffMonth && (
|
||
<p className="font-semibold text-sm">
|
||
Loan Paid Off at: <span className="text-yellow-600">{loanPayoffMonth}</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 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={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. */}
|
||
<CareerSearch
|
||
onCareerSelected={(careerObj) => {
|
||
setPendingCareerForModal(careerObj.title);
|
||
}}
|
||
/>
|
||
|
||
{pendingCareerForModal && (
|
||
<Button
|
||
onClick={() => {
|
||
console.log('User confirmed new career path:', pendingCareerForModal);
|
||
setPendingCareerForModal(null);
|
||
}}
|
||
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded"
|
||
>
|
||
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>
|
||
);
|
||
};
|
||
|
||
export default MilestoneTracker;
|