-
- Enhancing Your Career
-
-
- AptivaAI helps you advance your career. Plan career milestones, enhance your skill set, optimize your resume, and prepare for promotions or transitions.
-
-
- navigate('/resume-optimizer')}>Optimize Resume
- navigate('/milestone-tracker')}>Set Career Milestones
-
+
+
+
+ {/* Section 1: Current Career Status */}
+
+
+ {/* Section 2: Actionable Next Steps */}
+
+ 🚩 What's Next For Me?
+
+ Identify your next career milestones with AI-driven recommendations and start advancing your career today.
+
+ navigate('/milestone-tracker')}>Go to Milestone Tracker
+
+
+ {/* Section 3: Interactive Planning & Resume Optimization */}
+
+ 🚀 How Do I Get There?
+
+ Use our comprehensive planning tools to visualize career paths, optimize your resume, and explore financial scenarios.
+
+
+ navigate('/resume-optimizer')}>Optimize Resume
+ navigate('/milestone-tracker')}>Plan Career & Finances
+
+
+
);
diff --git a/src/components/MilestoneTimeline.js b/src/components/MilestoneTimeline.js
index da1cd1a..0b5a00e 100644
--- a/src/components/MilestoneTimeline.js
+++ b/src/components/MilestoneTimeline.js
@@ -4,12 +4,12 @@ import React, { useEffect, useState, useCallback } from 'react';
import { Button } from './ui/button.js';
/**
- * Renders a simple vertical list of milestones for the given careerPathId.
+ * Renders a simple vertical list of milestones for the given careerProfileId.
* Also includes Task CRUD (create/edit/delete) for each milestone,
* plus a small "copy milestone" wizard, "financial impacts" form, etc.
*/
export default function MilestoneTimeline({
- careerPathId,
+ careerProfileId,
authFetch,
activeView, // 'Career' or 'Financial'
setActiveView, // optional, if you need to switch between views
@@ -81,9 +81,9 @@ export default function MilestoneTimeline({
// 2) Fetch milestones => store in "milestones[Career]" / "milestones[Financial]"
// ------------------------------------------------------------------
const fetchMilestones = useCallback(async () => {
- if (!careerPathId) return;
+ if (!careerProfileId) return;
try {
- const res = await authFetch(`/api/premium/milestones?careerPathId=${careerPathId}`);
+ const res = await authFetch(`/api/premium/milestones?careerProfileId=${careerProfileId}`);
if (!res.ok) {
console.error('Failed to fetch milestones. Status:', res.status);
return;
@@ -107,7 +107,7 @@ export default function MilestoneTimeline({
} catch (err) {
console.error('Failed to fetch milestones:', err);
}
- }, [careerPathId, authFetch]);
+ }, [careerProfileId, authFetch]);
useEffect(() => {
fetchMilestones();
@@ -122,7 +122,7 @@ export default function MilestoneTimeline({
const res = await authFetch('/api/premium/career-profile/all');
if (res.ok) {
const data = await res.json();
- setScenarios(data.careerPaths || []);
+ setScenarios(data.careerProfiles || []);
}
} catch (err) {
console.error('Error loading scenarios for copy wizard:', err);
@@ -185,7 +185,7 @@ export default function MilestoneTimeline({
title: newMilestone.title,
description: newMilestone.description,
date: newMilestone.date,
- career_path_id: careerPathId,
+ career_profile_id: careerProfileId,
progress: newMilestone.progress,
status: newMilestone.progress >= 100 ? 'completed' : 'planned',
new_salary:
diff --git a/src/components/MilestoneTracker.js b/src/components/MilestoneTracker.js
index bade554..41e79b7 100644
--- a/src/components/MilestoneTracker.js
+++ b/src/components/MilestoneTracker.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
import { Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
@@ -12,18 +12,20 @@ import {
} 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 { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
+
+import { Button } from './ui/button.js';
import CareerSelectDropdown from './CareerSelectDropdown.js';
import CareerSearch from './CareerSearch.js';
-
-import MilestoneTimeline from './MilestoneTimeline.js'; // Key: This handles Milestone & Task CRUD
+import MilestoneTimeline from './MilestoneTimeline.js';
import AISuggestedMilestones from './AISuggestedMilestones.js';
import ScenarioEditModal from './ScenarioEditModal.js';
+import parseFloatOrZero from '../utils/ParseFloatorZero.js';
import './MilestoneTracker.css';
import './MilestoneTimeline.css';
-import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
// Register Chart + annotation plugin
ChartJS.register(
@@ -39,100 +41,140 @@ ChartJS.register(
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');
-
+ // User and Financial Profile Data
+ const [userProfile, setUserProfile] = useState(null);
const [financialProfile, setFinancialProfile] = useState(null);
+
+ // Career & Scenario Data
+ const [selectedCareer, setSelectedCareer] = useState(initialCareer || null);
+ const [careerProfileId, setCareerProfileId] = useState(null);
+ const [existingCareerProfiles, setExistingCareerProfiles] = useState([]);
const [scenarioRow, setScenarioRow] = useState(null);
const [collegeProfile, setCollegeProfile] = useState(null);
- const [scenarioMilestones, setScenarioMilestones] = useState([]); // for annotation
-
+ // Milestones & Simulation
+ const [scenarioMilestones, setScenarioMilestones] = useState([]);
const [projectionData, setProjectionData] = useState([]);
const [loanPayoffMonth, setLoanPayoffMonth] = useState(null);
const [simulationYearsInput, setSimulationYearsInput] = useState('20');
const simulationYears = parseInt(simulationYearsInput, 10) || 20;
- // Show/hide scenario edit modal
+ // Salary Data & Economic Projections
+ const [salaryData, setSalaryData] = useState(null);
+ const [economicProjections, setEconomicProjections] = useState(null);
+
+ // UI Toggles
const [showEditModal, setShowEditModal] = useState(false);
const [pendingCareerForModal, setPendingCareerForModal] = useState(null);
+ const [showAISuggestions, setShowAISuggestions] = useState(false);
+ // If coming from location.state
const {
projectionData: initialProjectionData = [],
loanPayoffMonth: initialLoanPayoffMonth = null
} = location.state || {};
// --------------------------------------------------
- // 1) Fetch user’s scenario list + financialProfile
+ // 1) Fetch User Profile & Financial Profile
// --------------------------------------------------
useEffect(() => {
- const fetchCareerPaths = async () => {
+ const fetchUserProfile = async () => {
+ try {
+ const res = await authFetch('/api/user-profile'); // or wherever user profile is fetched
+ if (res.ok) {
+ const data = await res.json();
+ setUserProfile(data);
+ } else {
+ console.error('Failed to fetch user profile:', res.status);
+ }
+ } catch (error) {
+ console.error('Error fetching user profile:', error);
+ }
+ };
+
+ const fetchFinancialProfile = async () => {
+ try {
+ const res = await authFetch(`${apiURL}/premium/financial-profile`);
+ if (res.ok) {
+ const data = await res.json();
+ setFinancialProfile(data);
+ } else {
+ console.error('Failed to fetch financial profile:', res.status);
+ }
+ } catch (error) {
+ console.error('Error fetching financial profile:', error);
+ }
+ };
+
+ fetchUserProfile();
+ fetchFinancialProfile();
+ }, [apiURL]);
+
+ const userLocation = userProfile?.area || '';
+ const userSalary = financialProfile?.current_salary ?? 0;
+
+ // --------------------------------------------------
+ // 2) Fetch user’s Career Profiles => set initial scenario
+ // --------------------------------------------------
+ useEffect(() => {
+ const fetchCareerProfiles = async () => {
const res = await authFetch(`${apiURL}/premium/career-profile/all`);
if (!res || !res.ok) return;
const data = await res.json();
- setExistingCareerPaths(data.careerPaths);
-
+ setExistingCareerProfiles(data.careerProfiles);
+
+ // If there's a career in location.state, pick that
const fromPopout = location.state?.selectedCareer;
if (fromPopout) {
setSelectedCareer(fromPopout);
- setCareerPathId(fromPopout.career_path_id);
+ setCareerProfileId(fromPopout.career_profile_id);
} else {
- const storedCareerPathId = localStorage.getItem('lastSelectedCareerPathId');
- if (storedCareerPathId) {
- const matchingCareer = data.careerPaths.find(p => p.id === storedCareerPathId);
+ // Else try localStorage
+ const storedCareerProfileId = localStorage.getItem('lastSelectedCareerProfileId');
+ if (storedCareerProfileId) {
+ const matchingCareer = data.careerProfiles.find((p) => p.id === storedCareerProfileId);
if (matchingCareer) {
setSelectedCareer(matchingCareer);
- setCareerPathId(storedCareerPathId);
+ setCareerProfileId(storedCareerProfileId);
return;
}
}
-
- // fallback to latest scenario if no stored ID or not found
+
+ // Fallback to 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);
+ setCareerProfileId(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();
+
+ fetchCareerProfiles();
}, [apiURL, location.state]);
-
// --------------------------------------------------
- // 2) When careerPathId changes => fetch scenarioRow + collegeProfile
+ // 3) Fetch scenarioRow + collegeProfile for chosen careerProfileId
// --------------------------------------------------
useEffect(() => {
- if (!careerPathId) {
+ if (!careerProfileId) {
setScenarioRow(null);
setCollegeProfile(null);
setScenarioMilestones([]);
return;
}
- async function fetchScenario() {
- const scenRes = await authFetch(`${apiURL}/premium/career-profile/${careerPathId}`);
+ localStorage.setItem('lastSelectedCareerProfileId', careerProfileId);
+
+ const fetchScenario = async () => {
+ const scenRes = await authFetch(`${apiURL}/premium/career-profile/${careerProfileId}`);
if (scenRes.ok) {
const data = await scenRes.json();
setScenarioRow(data);
@@ -140,148 +182,278 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
console.error('Failed to fetch scenario row:', scenRes.status);
setScenarioRow(null);
}
- }
+ };
- async function fetchCollege() {
+ const fetchCollege = async () => {
const colRes = await authFetch(
- `${apiURL}/premium/college-profile?careerPathId=${careerPathId}`
+ `${apiURL}/premium/college-profile?careerProfileId=${careerProfileId}`
);
- if (!colRes?.ok) {
+ if (colRes.ok) {
+ const data = await colRes.json();
+ setCollegeProfile(data);
+ } else {
setCollegeProfile(null);
- return;
}
- const data = await colRes.json();
- setCollegeProfile(data);
- }
+ };
fetchScenario();
fetchCollege();
- }, [careerPathId, apiURL]);
+ }, [careerProfileId, apiURL]);
+ // --------------------------------------------------
+ // 4) Fetch Salary Data for selectedCareer + userLocation
+ // --------------------------------------------------
useEffect(() => {
- if (careerPathId) {
- localStorage.setItem('lastSelectedCareerPathId', careerPathId);
+ if (!selectedCareer?.soc_code) {
+ setSalaryData(null);
+ return;
}
- }, [careerPathId]);
-
- // --------------------------------------------------
- // 3) Once scenarioRow + collegeProfile + financialProfile => run simulation
- // + fetch milestones for annotation lines
- // --------------------------------------------------
- useEffect(() => {
- if (!financialProfile || !scenarioRow || !collegeProfile) return;
- (async () => {
+ const areaParam = userLocation || 'U.S.';
+
+ const fetchSalaryData = 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);
+ const queryParams = new URLSearchParams({
+ socCode: selectedCareer.soc_code,
+ area: areaParam
+ }).toString();
+
+ const res = await fetch(`/api/salary?${queryParams}`);
+ if (!res.ok) {
+ console.error('Error fetching salary data:', res.status);
+ setSalaryData(null);
return;
}
- const milestonesData = await milRes.json();
- const allMilestones = milestonesData.milestones || [];
- setScenarioMilestones(allMilestones);
- // fetch impacts for each milestone
- 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
- const allImpacts = milestonesWithImpacts.flatMap((m) => m.impacts);
-
- // Build 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);
+ const data = await res.json();
+ if (data.error) {
+ console.log('No salary data found for these params:', data.error);
+ }
+ setSalaryData(data);
} catch (err) {
- console.error('Error in scenario simulation:', err);
+ console.error('Exception fetching salary data:', err);
+ setSalaryData(null);
}
- })();
- }, [financialProfile, scenarioRow, collegeProfile, careerPathId, apiURL, simulationYears]);
+ };
+ fetchSalaryData();
+ }, [selectedCareer, userLocation]);
+
+ // --------------------------------------------------
+ // 5) (Optional) Fetch Economic Projections
+ // --------------------------------------------------
+ useEffect(() => {
+ if (!selectedCareer?.career_name) {
+ setEconomicProjections(null);
+ return;
+ }
+
+ const fetchEconomicProjections = async () => {
+ try {
+ const encodedCareer = encodeURIComponent(selectedCareer.career_name);
+ const res = await authFetch('/api/projections/:socCode');
+ if (res.ok) {
+ const data = await res.json();
+ setEconomicProjections(data);
+ }
+ } catch (err) {
+ console.error('Error fetching economic projections:', err);
+ setEconomicProjections(null);
+ }
+ };
+
+ fetchEconomicProjections();
+ }, [selectedCareer, apiURL]);
+
+
+ // --------------------------------------------------
+ // 6) Once we have scenario + financial + college => run simulation
+ // --------------------------------------------------
+ useEffect(() => {
+ if (!financialProfile || !scenarioRow || !collegeProfile) return;
+
+ (async () => {
+ try {
+ // 1) Fetch milestones for this scenario
+ const milRes = await authFetch(`${apiURL}/premium/milestones?careerProfileId=${careerProfileId}`);
+ if (!milRes.ok) {
+ console.error('Failed to fetch milestones for scenario', careerProfileId);
+ return;
+ }
+ const milestonesData = await milRes.json();
+ const allMilestones = milestonesData.milestones || [];
+ setScenarioMilestones(allMilestones);
+
+ // 2) Fetch impacts for each milestone
+ 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);
+
+ // Flatten all milestone impacts
+ const allImpacts = allMilestones.map((m, i) => ({
+ ...m,
+ impacts: impactsForEach[i] || [],
+ })).flatMap((m) => m.impacts);
+
+ /*******************************************************
+ * A) Parse numeric "financialProfile" fields
+ *******************************************************/
+ const financialBase = {
+ currentSalary: parseFloatOrZero(financialProfile.current_salary, 0),
+ additionalIncome: parseFloatOrZero(financialProfile.additional_income, 0),
+ monthlyExpenses: parseFloatOrZero(financialProfile.monthly_expenses, 0),
+ monthlyDebtPayments: parseFloatOrZero(financialProfile.monthly_debt_payments, 0),
+ retirementSavings: parseFloatOrZero(financialProfile.retirement_savings, 0),
+ emergencySavings: parseFloatOrZero(financialProfile.emergency_fund, 0),
+ retirementContribution: parseFloatOrZero(financialProfile.retirement_contribution, 0),
+ emergencyContribution: parseFloatOrZero(financialProfile.emergency_contribution, 0),
+ extraCashEmergencyPct: parseFloatOrZero(financialProfile.extra_cash_emergency_pct, 50),
+ extraCashRetirementPct: parseFloatOrZero(financialProfile.extra_cash_retirement_pct, 50),
+ };
+
+ /*******************************************************
+ * B) Parse scenario overrides from "scenarioRow"
+ *******************************************************/
+ const scenarioOverrides = {
+ monthlyExpenses: parseFloatOrZero(
+ scenarioRow.planned_monthly_expenses,
+ financialBase.monthlyExpenses
+ ),
+ monthlyDebtPayments: parseFloatOrZero(
+ scenarioRow.planned_monthly_debt_payments,
+ financialBase.monthlyDebtPayments
+ ),
+ monthlyRetirementContribution: parseFloatOrZero(
+ scenarioRow.planned_monthly_retirement_contribution,
+ financialBase.retirementContribution
+ ),
+ monthlyEmergencyContribution: parseFloatOrZero(
+ scenarioRow.planned_monthly_emergency_contribution,
+ financialBase.emergencyContribution
+ ),
+ surplusEmergencyAllocation: parseFloatOrZero(
+ scenarioRow.planned_surplus_emergency_pct,
+ financialBase.extraCashEmergencyPct
+ ),
+ surplusRetirementAllocation: parseFloatOrZero(
+ scenarioRow.planned_surplus_retirement_pct,
+ financialBase.extraCashRetirementPct
+ ),
+ additionalIncome: parseFloatOrZero(
+ scenarioRow.planned_additional_income,
+ financialBase.additionalIncome
+ ),
+ };
+
+ /*******************************************************
+ * C) Parse numeric "collegeProfile" fields
+ *******************************************************/
+ const collegeData = {
+ studentLoanAmount: parseFloatOrZero(collegeProfile.existing_college_debt, 0),
+ interestRate: parseFloatOrZero(collegeProfile.interest_rate, 5),
+ loanTerm: parseFloatOrZero(collegeProfile.loan_term, 10),
+ loanDeferralUntilGraduation: !!collegeProfile.loan_deferral_until_graduation,
+ academicCalendar: collegeProfile.academic_calendar || 'monthly',
+ annualFinancialAid: parseFloatOrZero(collegeProfile.annual_financial_aid, 0),
+ calculatedTuition: parseFloatOrZero(collegeProfile.tuition, 0),
+ extraPayment: parseFloatOrZero(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: parseFloatOrZero(collegeProfile.credit_hours_per_year, 0),
+ hoursCompleted: parseFloatOrZero(collegeProfile.hours_completed, 0),
+ programLength: parseFloatOrZero(collegeProfile.program_length, 0),
+ expectedSalary:
+ parseFloatOrZero(collegeProfile.expected_salary) ||
+ parseFloatOrZero(financialProfile.current_salary, 0),
+ };
+
+ /*******************************************************
+ * D) Combine them into a single mergedProfile
+ *******************************************************/
+ const mergedProfile = {
+ // Financial base
+ currentSalary: financialBase.currentSalary,
+ // scenario overrides (with scenario > financial precedence)
+ monthlyExpenses: scenarioOverrides.monthlyExpenses,
+ monthlyDebtPayments: scenarioOverrides.monthlyDebtPayments,
+
+ // big items from financialProfile that had no scenario override
+ retirementSavings: financialBase.retirementSavings,
+ emergencySavings: financialBase.emergencySavings,
+
+ // scenario overrides for monthly contributions
+ monthlyRetirementContribution: scenarioOverrides.monthlyRetirementContribution,
+ monthlyEmergencyContribution: scenarioOverrides.monthlyEmergencyContribution,
+
+ // scenario overrides for surplus distribution
+ surplusEmergencyAllocation: scenarioOverrides.surplusEmergencyAllocation,
+ surplusRetirementAllocation: scenarioOverrides.surplusRetirementAllocation,
+
+ // scenario override for additionalIncome
+ additionalIncome: scenarioOverrides.additionalIncome,
+
+ // college fields
+ studentLoanAmount: collegeData.studentLoanAmount,
+ interestRate: collegeData.interestRate,
+ loanTerm: collegeData.loanTerm,
+ loanDeferralUntilGraduation: collegeData.loanDeferralUntilGraduation,
+ academicCalendar: collegeData.academicCalendar,
+ annualFinancialAid: collegeData.annualFinancialAid,
+ calculatedTuition: collegeData.calculatedTuition,
+ extraPayment: collegeData.extraPayment,
+ inCollege: collegeData.inCollege,
+ gradDate: collegeData.gradDate,
+ programType: collegeData.programType,
+ creditHoursPerYear: collegeData.creditHoursPerYear,
+ hoursCompleted: collegeData.hoursCompleted,
+ programLength: collegeData.programLength,
+ expectedSalary: collegeData.expectedSalary,
+
+ // scenario horizon + milestone impacts
+ startDate: new Date().toISOString(),
+ simulationYears,
+ milestoneImpacts: allImpacts
+ };
+
+ // 3) Run the simulation
+ const { projectionData: pData, loanPaidOffMonth: payoff } =
+ simulateFinancialProjection(mergedProfile);
+
+ // 4) Add cumulative net savings
+ 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,
+ careerProfileId,
+ apiURL,
+ simulationYears
+]);
+
+ // --------------------------------------------------
+ // Handlers & Chart Setup
+ // --------------------------------------------------
const handleSimulationYearsChange = (e) => setSimulationYearsInput(e.target.value);
const handleSimulationYearsBlur = () => {
if (!simulationYearsInput.trim()) {
@@ -300,7 +472,6 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
const month = String(d.getUTCMonth() + 1).padStart(2, '0');
const short = `${year}-${month}`;
- // check if we have data for that month
if (!projectionData.some((p) => p.month === short)) return;
milestoneAnnotationLines[`milestone_${m.id}`] = {
@@ -318,7 +489,7 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
};
});
- // If we also want a line for payoff:
+ // Loan payoff line
const annotationConfig = {};
if (loanPayoffMonth) {
annotationConfig.loanPaidOffLine = {
@@ -342,38 +513,168 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
}
const allAnnotations = { ...milestoneAnnotationLines, ...annotationConfig };
+ // Salary Gauge
+ function getRelativePosition(userSal, p10, p90) {
+ if (!p10 || !p90) return 0; // avoid NaN
+ if (userSal < p10) return 0;
+ if (userSal > p90) return 1;
+ return (userSal - p10) / (p90 - p10);
+ }
+
+ const SalaryGauge = ({ userSalary, percentileRow, prefix = 'regional' }) => {
+ if (!percentileRow) return null;
+ const p10 = percentileRow[`${prefix}_PCT10`];
+ const p90 = percentileRow[`${prefix}_PCT90`];
+ if (!p10 || !p90) return null;
+
+ const fraction = getRelativePosition(userSalary, p10, p90) * 100;
+
+ return (
+
+
+
+ You are at {Math.round(fraction)}% between the 10th and 90th percentiles (
+ {prefix}).
+
+
+ );
+ };
+
return (
{/* 1) Career dropdown */}
{
setSelectedCareer(selected);
- setCareerPathId(selected?.id || null);
+ setCareerProfileId(selected?.id || null);
}}
- loading={!existingCareerPaths.length}
+ loading={!existingCareerProfiles.length}
authFetch={authFetch}
/>
- {/* 2) MilestoneTimeline for Milestone & Task CRUD */}
+ {/* 2) Salary Data Display */}
+ {salaryData && (
+
+
Salary Overview
+ {/* Regional Salaries */}
+ {salaryData.regional && (
+
+
Regional Salaries (Area: {userLocation || 'U.S.'})
+
+ 10th percentile: {' '}
+ ${salaryData.regional.regional_PCT10?.toLocaleString() ?? 'N/A'}
+
+
+ 25th percentile: {' '}
+ ${salaryData.regional.regional_PCT25?.toLocaleString() ?? 'N/A'}
+
+
+ Median: {' '}
+ ${salaryData.regional.regional_MEDIAN?.toLocaleString() ?? 'N/A'}
+
+
+ 75th percentile: {' '}
+ ${salaryData.regional.regional_PCT75?.toLocaleString() ?? 'N/A'}
+
+
+ 90th percentile: {' '}
+ ${salaryData.regional.regional_PCT90?.toLocaleString() ?? 'N/A'}
+
+
+
+ )}
+ {/* National Salaries */}
+ {salaryData.national && (
+
+
National Salaries
+
+ 10th percentile: {' '}
+ ${salaryData.national.national_PCT10?.toLocaleString() ?? 'N/A'}
+
+
+ 25th percentile: {' '}
+ ${salaryData.national.national_PCT25?.toLocaleString() ?? 'N/A'}
+
+
+ Median: {' '}
+ ${salaryData.national.national_MEDIAN?.toLocaleString() ?? 'N/A'}
+
+
+ 75th percentile: {' '}
+ ${salaryData.national.national_PCT75?.toLocaleString() ?? 'N/A'}
+
+
+ 90th percentile: {' '}
+ ${salaryData.national.national_PCT90?.toLocaleString() ?? 'N/A'}
+
+
+
+ )}
+
+ Your current salary: ${userSalary.toLocaleString()}
+
+
{}}
/>
- {/* 3) AI-Suggested Milestones */}
- setShowAISuggestions(true)}
+ className="bg-green-500 hover:bg-green-600 text-white font-semibold px-4 py-2 rounded"
+ >
+ Show AI Suggestions
+
+ )}
- {/* 4) The main chart with annotation lines */}
+ {/* 5) AI-Suggested Milestones */}
+ {showAISuggestions && (
+
Financial Projection
@@ -440,7 +741,7 @@ const MilestoneTracker = ({ selectedCareer: initialCareer }) => {
)}
- {/* 5) Simulation length + "Edit" Button => open ScenarioEditModal */}
+ {/* 7) Simulation length + "Edit" => open ScenarioEditModal */}
Simulation Length (years):
- {/* 6) Career Search, scenario edit modal, etc. */}
+ {/* 8) Economic Projections Section */}
+ {economicProjections && (
+
+
Economic Projections
+
+ Growth Outlook: {economicProjections.growthOutlook || 'N/A'}
+
+
+ AI Automation Risk: {economicProjections.aiRisk || 'N/A'}
+
+ {economicProjections.chatGPTAnalysis && (
+
+
ChatGPT Analysis:
+
{economicProjections.chatGPTAnalysis}
+
+ )}
+
{
setPendingCareerForModal(careerObj.title);
}}
/>
-
{pendingCareerForModal && (
{
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"
+ className="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded mt-2"
>
Confirm Career Change to {pendingCareerForModal}
)}
+ {/* 10) Scenario Edit Modal */}
{
setShowEditModal(false);
- // optionally reload to see scenario changes
window.location.reload();
}}
scenario={scenarioRow}
diff --git a/src/components/MultiScenarioView.js b/src/components/MultiScenarioView.js
index 39b2911..d997eda 100644
--- a/src/components/MultiScenarioView.js
+++ b/src/components/MultiScenarioView.js
@@ -9,7 +9,7 @@ import { Button } from './ui/button.js';
* MultiScenarioView
* -----------------
* - Loads the user’s global financialProfile
- * - Loads all scenarios from `career_paths`
+ * - Loads all scenarios from `career_profiles`
* - Renders a for each scenario
* - Handles "Add Scenario", "Clone Scenario" (including college_profile), "Remove Scenario"
*/
@@ -20,7 +20,7 @@ export default function MultiScenarioView() {
// The user’s single overall financial profile
const [financialProfile, setFinancialProfile] = useState(null);
- // The list of scenario "headers" (rows from career_paths)
+ // The list of scenario "headers" (rows from career_profiles)
const [scenarios, setScenarios] = useState([]);
useEffect(() => {
@@ -46,7 +46,7 @@ export default function MultiScenarioView() {
const scenData = await scenRes.json();
setFinancialProfile(finData);
- setScenarios(scenData.careerPaths || []);
+ setScenarios(scenData.careerProfiles || []);
} catch (err) {
console.error('MultiScenarioView load error:', err);
setError(err.message || 'Failed to load multi-scenarios');
@@ -122,7 +122,7 @@ export default function MultiScenarioView() {
// parse the newly created scenario_id
const newScenarioData = await res.json();
- const newScenarioId = newScenarioData.career_path_id;
+ const newScenarioId = newScenarioData.career_profile_id;
// 2) Clone the old scenario’s college_profile => new scenario
await cloneCollegeProfile(oldScenario.id, newScenarioId);
@@ -141,7 +141,7 @@ export default function MultiScenarioView() {
try {
// fetch old scenario’s college_profile
const getRes = await authFetch(
- `/api/premium/college-profile?careerPathId=${oldScenarioId}`
+ `/api/premium/college-profile?careerProfileId=${oldScenarioId}`
);
if (!getRes.ok) {
console.warn(
@@ -162,7 +162,7 @@ export default function MultiScenarioView() {
// build new payload
const clonePayload = {
- career_path_id: newScenarioId,
+ career_profile_id: newScenarioId,
selected_school: oldCollegeData.selected_school,
selected_program: oldCollegeData.selected_program,
diff --git a/src/components/Paywall.js b/src/components/Paywall.js
index 4810edc..a5f9f87 100644
--- a/src/components/Paywall.js
+++ b/src/components/Paywall.js
@@ -24,7 +24,7 @@ const Paywall = () => {
});
if (response.ok) {
- navigate('/PremiumOnboarding', { state: { selectedCareer } });
+ navigate('/premium-onboarding', { state: { selectedCareer } });
} else if (response.status === 401) {
navigate('/GettingStarted', { state: { selectedCareer } });
} else {
diff --git a/src/components/PopoutPanel.js b/src/components/PopoutPanel.js
index 6a56135..d48656f 100644
--- a/src/components/PopoutPanel.js
+++ b/src/components/PopoutPanel.js
@@ -116,7 +116,7 @@ function PopoutPanel({
}
try {
- // 1) Fetch existing career profiles (a.k.a. "careerPaths")
+ // 1) Fetch existing career profiles (a.k.a. "careerProfiles")
const allPathsResponse = await fetch(
`${process.env.REACT_APP_API_URL}/premium/career-profile/all`,
{
@@ -132,11 +132,11 @@ function PopoutPanel({
throw new Error(`HTTP error ${allPathsResponse.status}`);
}
- // The server returns { careerPaths: [...] }
- const { careerPaths } = await allPathsResponse.json();
+ // The server returns { careerProfiles: [...] }
+ const { careerProfiles } = await allPathsResponse.json();
// 2) Check if there's already a career path with the same name
- const match = careerPaths.find((cp) => cp.career_name === data.title);
+ const match = careerProfiles.find((cp) => cp.career_name === data.title);
if (match) {
// If a path already exists for this career, confirm with the user
@@ -149,7 +149,7 @@ function PopoutPanel({
navigate("/paywall", {
state: {
selectedCareer: {
- career_path_id: match.id, // 'id' is the primary key from the DB
+ career_profile_id: match.id, // 'id' is the primary key from the DB
career_name: data.title,
},
},
@@ -179,15 +179,15 @@ function PopoutPanel({
throw new Error("Failed to create new career path.");
}
- // The server returns something like { message: 'Career profile upserted.', career_path_id: 'xxx-xxx' }
+ // The server returns something like { message: 'Career profile upserted.', career_profile_id: 'xxx-xxx' }
const result = await newResponse.json();
- const newlyCreatedId = result?.career_path_id;
+ const newlyCreatedId = result?.career_profile_id;
- // 4) Navigate to /paywall, passing the newly created career_path_id
+ // 4) Navigate to /paywall, passing the newly created career_profile_id
navigate("/paywall", {
state: {
selectedCareer: {
- career_path_id: newlyCreatedId,
+ career_profile_id: newlyCreatedId,
career_name: data.title,
},
},
diff --git a/src/components/PremiumOnboarding/CareerOnboarding.js b/src/components/PremiumOnboarding/CareerOnboarding.js
index 29f6b65..6e53d12 100644
--- a/src/components/PremiumOnboarding/CareerOnboarding.js
+++ b/src/components/PremiumOnboarding/CareerOnboarding.js
@@ -4,104 +4,60 @@ import axios from 'axios';
import { Input } from '../ui/input.js'; // Ensure path matches your structure
import authFetch from '../../utils/authFetch.js';
+// 1) Import your CareerSearch component
+import CareerSearch from '../CareerSearch.js'; // adjust path as necessary
+
const apiURL = process.env.REACT_APP_API_URL;
const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
- const [userId, setUserId] = useState(null);
+ // We store local state for “are you working,” “selectedCareer,” etc.
const [currentlyWorking, setCurrentlyWorking] = useState('');
const [selectedCareer, setSelectedCareer] = useState('');
- const [careerPathId, setCareerPathId] = useState(null);
const [collegeEnrollmentStatus, setCollegeEnrollmentStatus] = useState('');
- const [careers, setCareers] = useState([]);
- const [searchInput, setSearchInput] = useState('');
-
+ // On mount, if data already has these fields, set them
useEffect(() => {
- const storedUserId = localStorage.getItem('userId');
- if (storedUserId) {
- setUserId(storedUserId);
- } else {
- console.error('User ID not found in localStorage');
- }
- }, []);
-
- useEffect(() => {
- const fetchCareerTitles = async () => {
- try {
- const response = await fetch('/career_clusters.json');
- const data = await response.json();
-
- const careerTitlesSet = new Set();
-
- const clusters = Object.keys(data);
- for (let i = 0; i < clusters.length; i++) {
- const cluster = clusters[i];
- const subdivisions = Object.keys(data[cluster]);
-
- for (let j = 0; j < subdivisions.length; j++) {
- const subdivision = subdivisions[j];
- const careersArray = data[cluster][subdivision];
-
- for (let k = 0; k < careersArray.length; k++) {
- const careerObj = careersArray[k];
- if (careerObj.title) {
- careerTitlesSet.add(careerObj.title);
- }
- }
- }
- }
-
- setCareers([...careerTitlesSet]);
-
- } catch (error) {
- console.error("Error fetching or processing career_clusters.json:", error);
- }
- };
-
- fetchCareerTitles();
- }, []);
-
- useEffect(() => {
- if (careers.includes(searchInput)) {
- setSelectedCareer(searchInput);
- setData(prev => ({ ...prev, career_name: searchInput }));
- }
- }, [searchInput, careers, setData]);
+ if (data.currently_working) setCurrentlyWorking(data.currently_working);
+ if (data.career_name) setSelectedCareer(data.career_name);
+ if (data.college_enrollment_status) setCollegeEnrollmentStatus(data.college_enrollment_status);
+ }, [data]);
+ // Called whenever other change
const handleChange = (e) => {
setData(prev => ({ ...prev, [e.target.name]: e.target.value }));
};
- const handleCareerInputChange = (e) => {
- const inputValue = e.target.value;
- setSearchInput(inputValue);
-
- if (careers.includes(inputValue)) {
- setSelectedCareer(inputValue);
- setData(prev => ({ ...prev, career_name: inputValue }));
- }
+ // Called when user picks a career from CareerSearch and confirms it
+ const handleCareerSelected = (careerObj) => {
+ // e.g. { title, soc_code, cip_code, ... }
+ setSelectedCareer(careerObj.title);
+ setData(prev => ({
+ ...prev,
+ career_name: careerObj.title,
+ soc_code: careerObj.soc_code || '' // store SOC if needed
+ }));
};
const handleSubmit = () => {
if (!selectedCareer || !currentlyWorking || !collegeEnrollmentStatus) {
- alert("Please complete all required fields before continuing.");
+ alert('Please complete all required fields before continuing.');
return;
}
- const isInCollege = (
+ const isInCollege =
collegeEnrollmentStatus === 'currently_enrolled' ||
- collegeEnrollmentStatus === 'prospective_student'
- );
+ collegeEnrollmentStatus === 'prospective_student';
+ // Merge local state into parent data
setData(prevData => ({
...prevData,
career_name: selectedCareer,
college_enrollment_status: collegeEnrollmentStatus,
currently_working: currentlyWorking,
inCollege: isInCollege,
+ // fallback defaults, or use user-provided
status: prevData.status || 'planned',
- start_date: prevData.start_date || new Date().toISOString(),
- projected_end_date: prevData.projected_end_date || null,
- user_id: userId
+ start_date: prevData.start_date || new Date().toISOString().slice(0, 10),
+ projected_end_date: prevData.projected_end_date || null
}));
nextStep();
@@ -117,7 +73,10 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
setCurrentlyWorking(e.target.value)}
+ onChange={(e) => {
+ setCurrentlyWorking(e.target.value);
+ setData(prev => ({ ...prev, currently_working: e.target.value }));
+ }}
className="w-full border rounded p-2"
>
Select one
@@ -126,20 +85,10 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
+ {/* 2) Replace old local “Search for Career” with
*/}
Search for Career
-
- {careers.map((career, index) => (
-
+
{selectedCareer && (
@@ -157,9 +106,9 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
className="w-full border rounded p-2"
>
Select Status
-
Planned
-
Current
-
Exploring
+
Planned
+
Current
+
Exploring
@@ -191,13 +140,16 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {