1785 lines
62 KiB
JavaScript
1785 lines
62 KiB
JavaScript
import React, { useState, useEffect, useRef, useMemo, useCallback, useContext } from 'react';
|
||
import { useLocation, useParams } from 'react-router-dom';
|
||
import { Line, Bar } from 'react-chartjs-2';
|
||
import { format } from 'date-fns'; // ⬅ install if not already
|
||
import zoomPlugin from 'chartjs-plugin-zoom';
|
||
import api from '../auth/apiClient.js';
|
||
import {
|
||
Chart as ChartJS,
|
||
LineElement,
|
||
BarElement,
|
||
CategoryScale,
|
||
LinearScale,
|
||
Filler,
|
||
PointElement,
|
||
Tooltip,
|
||
TimeScale,
|
||
Legend
|
||
} from 'chart.js';
|
||
import annotationPlugin from 'chartjs-plugin-annotation';
|
||
import MilestonePanel from './MilestonePanel.js';
|
||
import MilestoneDrawer from './MilestoneDrawer.js';
|
||
import MilestoneEditModal from './MilestoneEditModal.js';
|
||
import buildChartMarkers from '../utils/buildChartMarkers.js';
|
||
import getMissingFields, { MISSING_LABELS } from '../utils/getMissingFields.js';
|
||
import 'chartjs-adapter-date-fns';
|
||
import authFetch from '../utils/authFetch.js';
|
||
import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
|
||
import parseFloatOrZero from '../utils/ParseFloatorZero.js';
|
||
import { getFullStateName } from '../utils/stateUtils.js';
|
||
import CareerCoach from "./CareerCoach.js";
|
||
import ChatCtx from '../contexts/ChatCtx.js';
|
||
import FinancialDisclaimer from './FinancialDisclaimer.js';
|
||
|
||
import { Button } from './ui/button.js';
|
||
import { Pencil } from 'lucide-react';
|
||
import ScenarioEditModal from './ScenarioEditModal.js';
|
||
import InfoTooltip from "./ui/infoTooltip.js";
|
||
|
||
import "../styles/legacy/MilestoneTimeline.legacy.css";
|
||
|
||
// --------------
|
||
// Register ChartJS Plugins
|
||
// --------------
|
||
ChartJS.register(
|
||
LineElement,
|
||
BarElement,
|
||
CategoryScale,
|
||
LinearScale,
|
||
TimeScale,
|
||
Filler,
|
||
PointElement,
|
||
Tooltip,
|
||
Legend,
|
||
zoomPlugin,
|
||
annotationPlugin
|
||
);
|
||
|
||
/* ----------------------------------------------------------- *
|
||
* Helpers for “remember last career” logic
|
||
* ----------------------------------------------------------- */
|
||
|
||
|
||
// (A) getAllCareerProfiles – one small wrapper around the endpoint
|
||
async function getAllCareerProfiles() {
|
||
const res = await authFetch('/api/premium/career-profile/all');
|
||
if (!res.ok) throw new Error('career-profile/all failed');
|
||
const json = await res.json();
|
||
return json.careerProfiles || [];
|
||
}
|
||
|
||
// (B) createCareerProfileFromSearch – called when user chose a SOC with
|
||
// no existing career-profile row. Feel free to add more fields.
|
||
async function createCareerProfileFromSearch(selCareer) {
|
||
const careerName = (selCareer.title || '').trim();
|
||
if (!careerName) {
|
||
throw new Error('createCareerProfileFromSearch: selCareer.title is required');
|
||
}
|
||
|
||
|
||
/* -----------------------------------------------------------
|
||
* 1) Do we already have that title?
|
||
* --------------------------------------------------------- */
|
||
const all = await getAllCareerProfiles(); // wrapper uses authFetch
|
||
const existing = all.find(
|
||
p => (p.career_name || '').trim().toLowerCase() === careerName.toLowerCase()
|
||
);
|
||
if (existing) return existing; // ✅ reuse the row / id
|
||
|
||
/* -----------------------------------------------------------
|
||
* 2) Otherwise create it and refetch the full row
|
||
* --------------------------------------------------------- */
|
||
const payload = {
|
||
career_name : careerName,
|
||
scenario_title: careerName,
|
||
start_date : new Date().toISOString().slice(0, 10)
|
||
};
|
||
|
||
const post = await authFetch('/api/premium/career-profile', {
|
||
method : 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body : JSON.stringify(payload)
|
||
});
|
||
if (!post.ok) {
|
||
throw new Error(`career-profile create failed (${post.status})`);
|
||
}
|
||
|
||
const { career_profile_id: newId } = await post.json();
|
||
if (!newId) throw new Error('server did not return career_profile_id');
|
||
|
||
const get = await authFetch(`/api/premium/career-profile/${newId}`);
|
||
if (get.ok) return await get.json(); // full row with every column
|
||
|
||
// Extremely rare fallback
|
||
return { id: newId, career_name: careerName, scenario_title: careerName };
|
||
}
|
||
|
||
|
||
|
||
// --------------
|
||
// Helper Functions
|
||
// --------------
|
||
|
||
function shouldSkipModalOnce(profileId) {
|
||
const key = `skipMissingModalFor`;
|
||
const stored = sessionStorage.getItem(key);
|
||
if (stored && stored === String(profileId)) {
|
||
sessionStorage.removeItem(key); // one-time use
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
/* ---------- helper: "&" ↔ "and", collapse spaces, etc. ---------- */
|
||
function normalizeTitle(str = '') {
|
||
return str
|
||
.toLowerCase()
|
||
.replace(/\s*&\s*/g, ' and ') // “foo & bar” → “foo and bar”
|
||
.replace(/[–—]/g, '-') // long dashes → plain hyphen
|
||
.replace(/\s+/g, ' ') // squeeze double-spaces
|
||
.trim();
|
||
}
|
||
|
||
function stripSocCode(fullSoc) {
|
||
if (!fullSoc) return '';
|
||
return fullSoc.split('.')[0];
|
||
}
|
||
|
||
function getRelativePosition(userSal, p10, p90) {
|
||
if (!p10 || !p90) return 0;
|
||
if (userSal < p10) return 0;
|
||
if (userSal > p90) return 1;
|
||
return (userSal - p10) / (p90 - p10);
|
||
}
|
||
|
||
|
||
// A simple gauge for the user’s salary vs. percentiles
|
||
function SalaryGauge({ userSalary, percentileRow, prefix = 'regional' }) {
|
||
if (!percentileRow) return null;
|
||
|
||
const p10 = parseFloatOrZero(percentileRow[`${prefix}_PCT10`], 0);
|
||
const p90 = parseFloatOrZero(percentileRow[`${prefix}_PCT90`], 0);
|
||
const median = parseFloatOrZero(percentileRow[`${prefix}_MEDIAN`], 0);
|
||
|
||
if (!p10 || !p90 || p10 >= p90) {
|
||
return null;
|
||
}
|
||
|
||
const userFrac = getRelativePosition(userSalary, p10, p90) * 100;
|
||
const medianFrac = getRelativePosition(median, p10, p90) * 100;
|
||
|
||
return (
|
||
<div className="mt-2" style={{ position: 'relative', width: '100%' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem' }}>
|
||
<span>${p10.toLocaleString()}</span>
|
||
<span>${p90.toLocaleString()}</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
position: 'relative',
|
||
width: '100%',
|
||
height: '12px',
|
||
border: '1px solid #ccc',
|
||
marginTop: '4px',
|
||
marginBottom: '8px'
|
||
}}
|
||
>
|
||
{/* Median Marker */}
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${medianFrac}%`,
|
||
transform: 'translateX(-50%)',
|
||
top: 0,
|
||
bottom: 0,
|
||
width: '2px',
|
||
backgroundColor: 'black'
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '100%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -4px)',
|
||
backgroundColor: '#fff',
|
||
padding: '2px 6px',
|
||
fontSize: '0.75rem',
|
||
border: '1px solid #ccc',
|
||
borderRadius: '4px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
Median ${median.toLocaleString()}
|
||
</div>
|
||
</div>
|
||
|
||
{/* User Salary Marker */}
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${userFrac}%`,
|
||
transform: 'translateX(-50%)',
|
||
top: 0,
|
||
bottom: 0,
|
||
width: '2px',
|
||
backgroundColor: 'red'
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '100%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -4px)',
|
||
backgroundColor: '#fff',
|
||
padding: '2px 6px',
|
||
fontSize: '0.75rem',
|
||
border: '1px solid #ccc',
|
||
borderRadius: '4px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
${userSalary.toLocaleString()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EconomicProjectionsBar({ data }) {
|
||
if (!data) return null;
|
||
const {
|
||
area,
|
||
baseYear,
|
||
projectedYear,
|
||
base,
|
||
projection,
|
||
change,
|
||
annualOpenings,
|
||
occupationName
|
||
} = data;
|
||
|
||
if (!area || !base || !projection) {
|
||
return <p className="text-sm text-gray-500">No data for {area || 'this region'}.</p>;
|
||
}
|
||
|
||
const barData = {
|
||
labels: [`${occupationName || 'Career'}: ${area}`],
|
||
datasets: [
|
||
{
|
||
label: `Jobs in ${baseYear}`,
|
||
data: [base],
|
||
backgroundColor: 'rgba(75,192,192,0.6)'
|
||
},
|
||
{
|
||
label: `Jobs in ${projectedYear}`,
|
||
data: [projection],
|
||
backgroundColor: 'rgba(255,99,132,0.6)'
|
||
}
|
||
]
|
||
};
|
||
|
||
const barOptions = {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { position: 'bottom' },
|
||
tooltip: {
|
||
callbacks: {
|
||
label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.y.toLocaleString()}`
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
callback: (val) => val.toLocaleString()
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white p-4 rounded shadow w-full md:w-1/2">
|
||
<h4 className="text-lg font-semibold mb-2">{area}</h4>
|
||
<Bar data={barData} options={barOptions} />
|
||
<div className="mt-3 text-sm">
|
||
<p>
|
||
<strong>Change:</strong> {change?.toLocaleString() ?? 0} jobs
|
||
</p>
|
||
<p>
|
||
<strong>Annual Openings:</strong> {annualOpenings?.toLocaleString() ?? 0}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getYearsInCareer(startDateString) {
|
||
if (!startDateString) return null;
|
||
const start = new Date(startDateString);
|
||
if (isNaN(start)) return null;
|
||
|
||
const now = new Date();
|
||
const diffMs = now - start;
|
||
const diffYears = diffMs / (1000 * 60 * 60 * 24 * 365.25);
|
||
if (diffYears < 1) {
|
||
return '<1';
|
||
}
|
||
return Math.floor(diffYears).toString();
|
||
}
|
||
|
||
|
||
export default function CareerRoadmap({ selectedCareer: initialCareer }) {
|
||
const { careerId } = useParams();
|
||
const location = useLocation();
|
||
|
||
const [interestStrategy, setInterestStrategy] = useState('FLAT'); // 'NONE' | 'FLAT' | 'RANDOM'
|
||
const [flatAnnualRate, setFlatAnnualRate] = useState(0.06);
|
||
const [randomRangeMin, setRandomRangeMin] = useState(-0.02);
|
||
const [randomRangeMax, setRandomRangeMax] = useState(0.02);
|
||
|
||
// Basic states
|
||
const [userProfile, setUserProfile] = useState(null);
|
||
const [financialProfile, setFinancialProfile] = useState(null);
|
||
const [existingCareerProfiles, setExistingCareerProfiles] = useState([]);
|
||
const [selectedCareer, setSelectedCareer] = useState(initialCareer || null);
|
||
const [careerProfileId, setCareerProfileId] = useState(null);
|
||
const [scenarioRow, setScenarioRow] = useState(null);
|
||
const [collegeProfile, setCollegeProfile] = useState(null);
|
||
|
||
const [fullSocCode, setFullSocCode] = useState(null); // new line
|
||
const [strippedSocCode, setStrippedSocCode] = useState(null);
|
||
const [salaryData, setSalaryData] = useState(null);
|
||
const [economicProjections, setEconomicProjections] = useState(null);
|
||
const [salaryLoading, setSalaryLoading] = useState(false);
|
||
const [econLoading, setEconLoading] = useState(false);
|
||
|
||
// Milestones & Projection
|
||
const [scenarioMilestones, setScenarioMilestones] = useState([]);
|
||
const [projectionData, setProjectionData] = useState([]);
|
||
const [loanPayoffMonth, setLoanPayoffMonth] = useState(null);
|
||
const [milestoneForModal, setMilestoneForModal] = useState(null);
|
||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||
const [focusMid , setFocusMid ] = useState(null);
|
||
const [drawerMilestone, setDrawerMilestone] = useState(null);
|
||
const [impactsById, setImpactsById] = useState({}); // id → [impacts]
|
||
const [addingNewMilestone, setAddingNewMilestone] = useState(false);
|
||
const [showMissingBanner, setShowMissingBanner] = useState(false);
|
||
const [missingKeys, setMissingKeys] = useState([]);
|
||
|
||
|
||
// Config
|
||
const [simulationYearsInput, setSimulationYearsInput] = useState('20');
|
||
const simulationYears = parseInt(simulationYearsInput, 10) || 20;
|
||
|
||
const [showEditModal, setShowEditModal] = useState(false);
|
||
|
||
// AI
|
||
const [aiLoading, setAiLoading] = useState(false);
|
||
const [recommendations, setRecommendations] = useState([]); // parsed array
|
||
const [selectedIds, setSelectedIds] = useState([]); // which rec IDs are checked
|
||
|
||
const [lastClickTime, setLastClickTime] = useState(null);
|
||
const RATE_LIMIT_SECONDS = 15; // adjust as needed
|
||
const [buttonDisabled, setButtonDisabled] = useState(false);
|
||
const [aiRisk, setAiRisk] = useState(null);
|
||
|
||
const chat = useContext(ChatCtx) || {};
|
||
const setChatSnapshot = chat?.setChatSnapshot;
|
||
|
||
const dataReady = !!scenarioRow && !!financialProfile && collegeProfile !== null; // unchanged; {} is truthy
|
||
|
||
const reloadScenarioAndCollege = useCallback(async () => {
|
||
if (!careerProfileId) return;
|
||
const s = await authFetch(
|
||
`/api/premium/career-profile/${careerProfileId}`
|
||
);
|
||
if (s.ok) {
|
||
const row = await s.json();
|
||
if (!row.college_enrollment_status)
|
||
row.college_enrollment_status = "not_enrolled";
|
||
setScenarioRow(row);
|
||
}
|
||
|
||
const c = await authFetch(`/api/premium/college-profile?careerProfileId=${encodeURIComponent(careerProfileId)}`);
|
||
if (c.status === 404) {
|
||
setCollegeProfile({}); // no profile yet → use defaults
|
||
return;
|
||
}
|
||
if (c.ok) {
|
||
const ct = c.headers.get('content-type') || '';
|
||
if (ct.includes('application/json')) {
|
||
setCollegeProfile(await c.json());
|
||
} else {
|
||
// defensive: upstream returned HTML (e.g., 502 body with wrong status)
|
||
setCollegeProfile({});
|
||
}
|
||
return;
|
||
}
|
||
// non-OK (e.g., 502)
|
||
console.error('college-profile fetch failed', c.status);
|
||
setCollegeProfile({});
|
||
}, [careerProfileId]);
|
||
|
||
const milestoneGroups = useMemo(() => {
|
||
if (!scenarioMilestones.length) return [];
|
||
|
||
const buckets = {};
|
||
scenarioMilestones.forEach(m => {
|
||
if (!m.date) return;
|
||
const monthKey = m.date.slice(0, 7); // “2026-04”
|
||
(buckets[monthKey] = buckets[monthKey] || []).push(m);
|
||
});
|
||
|
||
return Object.entries(buckets)
|
||
.map(([month, items]) => ({
|
||
month,
|
||
monthLabel: format(new Date(`${month}-01`), 'MMM yyyy'),
|
||
items
|
||
}))
|
||
.sort((a, b) => (a.month > b.month ? 1 : -1));
|
||
}, [scenarioMilestones]);
|
||
|
||
/* ---------- build thin orange milestone markers + loan-payoff line ---------- */
|
||
const markerAnnotations = useMemo(
|
||
() => buildChartMarkers(milestoneGroups),
|
||
[milestoneGroups]
|
||
);
|
||
|
||
const loanPayoffLine = useMemo(() => {
|
||
const hasStudentLoan = projectionData.some((p) => p.loanBalance > 0);
|
||
if (!hasStudentLoan || !loanPayoffMonth) return {}; // <-- guard added
|
||
return {
|
||
loanPaidOff: {
|
||
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 },
|
||
yAdjust: -10
|
||
}
|
||
}
|
||
};
|
||
}, [loanPayoffMonth]);
|
||
|
||
const allAnnotations = useMemo(
|
||
() => ({ ...markerAnnotations, ...loanPayoffLine }),
|
||
[markerAnnotations, loanPayoffLine]
|
||
);
|
||
|
||
/* -------- shared chart config -------- */
|
||
const zoomConfig = {
|
||
pan: { enabled: true, mode: 'x' },
|
||
zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'x' }
|
||
};
|
||
|
||
// Compute if any savings are negative to pick a sane baseline
|
||
const minSavings = projectionData.reduce((min, p) => {
|
||
const e = Number(p.emergencySavings ?? 0);
|
||
const r = Number(p.retirementSavings ?? 0);
|
||
const t = Number(p.totalSavings ?? 0);
|
||
return Math.min(min, e, r, t);
|
||
}, Infinity);
|
||
const hasNegSavings = Number.isFinite(minSavings) && minSavings < 0;
|
||
|
||
const xAndYScales = {
|
||
x: {
|
||
type: 'time',
|
||
time: { unit: 'month' },
|
||
ticks: { maxRotation: 0, autoSkip: true }
|
||
},
|
||
y: {
|
||
beginAtZero: !hasNegSavings,
|
||
// give a little room below the smallest negative so the fill doesn't sit on the axis
|
||
min: hasNegSavings ? Math.floor(minSavings * 1.05) : undefined,
|
||
ticks: {
|
||
callback: (val) => val.toLocaleString()
|
||
}
|
||
}
|
||
};
|
||
|
||
/* ──────────────────────────────────────────────────────────────
|
||
* ONE-TIME “MISSING FIELDS” GUARD
|
||
* modalGuard.current = { checked: bool, skip: bool }
|
||
* • checked → we already ran the test for this profile
|
||
* • skip → suppress first check (set by onboarding OR
|
||
* by sessionStorage flag for this profile)
|
||
* ────────────────────────────────────────────────────────────── */
|
||
const modalGuard = useRef({ checked: false, skip: false });
|
||
|
||
/* -------------------------------------------------------------
|
||
* 0) If we landed here via onboarding, skip the very first check
|
||
* ------------------------------------------------------------*/
|
||
useEffect(() => {
|
||
if (location.state?.fromOnboarding) {
|
||
modalGuard.current.skip = true; // suppress once
|
||
window.history.replaceState({}, '', location.pathname);
|
||
sessionStorage.removeItem('suppressOnboardingGuard');
|
||
}
|
||
}, [location.state, location.pathname]);
|
||
|
||
/* -------------------------------------------------------------
|
||
* 1) Fetch user + financial on first mount
|
||
* ------------------------------------------------------------*/
|
||
useEffect(() => {
|
||
(async () => {
|
||
const up = await authFetch('/api/user-profile?fields=area,state');
|
||
if (up.ok && (up.headers.get('content-type')||'').includes('application/json')) {
|
||
setUserProfile(await up.json());
|
||
}
|
||
const fp = await authFetch('/api/premium/financial-profile');
|
||
if (fp.status === 404) {
|
||
// user skipped onboarding – treat as empty object
|
||
setFinancialProfile({});
|
||
} else if (fp.ok && (fp.headers.get('content-type')||'').includes('application/json')) {
|
||
setFinancialProfile(await fp.json());
|
||
}
|
||
})();
|
||
}, []);
|
||
|
||
/* quick derived helpers */
|
||
const userSalary = parseFloatOrZero(financialProfile?.current_salary);
|
||
const userArea = userProfile?.area || 'U.S.';
|
||
const userState = getFullStateName(userProfile?.state || '') || 'United States';
|
||
|
||
/* -------------------------------------------------------------
|
||
* 2) Determine the active careerProfileId once
|
||
* ------------------------------------------------------------*/
|
||
useEffect(() => {
|
||
let id = careerId;
|
||
if (!id) id = localStorage.getItem('lastSelectedCareerProfileId');
|
||
|
||
if (id) {
|
||
setCareerProfileId(id);
|
||
localStorage.setItem('lastSelectedCareerProfileId', id);
|
||
// one-shot modal skip from sessionStorage
|
||
modalGuard.current.skip ||= shouldSkipModalOnce(id);
|
||
}
|
||
}, [careerId]);
|
||
|
||
useEffect(() => {
|
||
let timer;
|
||
if (buttonDisabled) {
|
||
timer = setTimeout(() => setButtonDisabled(false), RATE_LIMIT_SECONDS * 1000);
|
||
}
|
||
return () => clearTimeout(timer);
|
||
}, [buttonDisabled]);
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 2) Whenever the careerProfileId changes, clear the modal check flag
|
||
* -----------------------------------------------------------------*/
|
||
useEffect(() => {
|
||
modalGuard.current.checked = false;
|
||
}, [careerProfileId]);
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 3) Missing-fields modal – single authoritative effect
|
||
* -----------------------------------------------------------------*/
|
||
|
||
|
||
useEffect(() => {
|
||
if (!dataReady || !careerProfileId) return; // wait for all rows
|
||
|
||
/* derive once, local to this effect -------------------------------------- */
|
||
const status = (scenarioRow?.college_enrollment_status || '').toLowerCase();
|
||
const requireCollege = ['currently_enrolled','prospective_student','deferred']
|
||
.includes(status);
|
||
|
||
const missing = getMissingFields(
|
||
{ scenario: scenarioRow, financial: financialProfile, college: collegeProfile },
|
||
{ requireCollegeData: requireCollege }
|
||
);
|
||
setMissingKeys(missing);
|
||
setShowMissingBanner(missing.length > 0);
|
||
}, [dataReady, scenarioRow, financialProfile, collegeProfile, careerProfileId]);
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (financialProfile && scenarioRow && collegeProfile !== null) {
|
||
buildProjection(scenarioMilestones);
|
||
}
|
||
}, [
|
||
financialProfile,
|
||
scenarioRow,
|
||
collegeProfile,
|
||
scenarioMilestones,
|
||
simulationYears,
|
||
interestStrategy,
|
||
flatAnnualRate,
|
||
randomRangeMin,
|
||
randomRangeMax
|
||
]);
|
||
|
||
/**
|
||
* Snapshot for the Support-bot: only UI state, no domain data
|
||
*/
|
||
const uiSnap = useMemo(() => ({
|
||
page : 'CareerRoadmap',
|
||
|
||
panels: {
|
||
careerCoachLoaded : !!scenarioRow?.career_name,
|
||
salaryBenchmarks : !!salaryData,
|
||
econProjections : !!economicProjections,
|
||
financialProjection : !!projectionData.length,
|
||
milestonesPanel : !!scenarioMilestones.length,
|
||
editScenarioModalUp : showEditModal,
|
||
drawerOpen : drawerOpen
|
||
},
|
||
|
||
counts: {
|
||
milestonesTotal : scenarioMilestones.length,
|
||
milestonesDone : scenarioMilestones.filter(m => m.completed).length,
|
||
yearsSimulated : simulationYears
|
||
}
|
||
}), [
|
||
selectedCareer,
|
||
salaryData, economicProjections,
|
||
projectionData.length,
|
||
scenarioMilestones, showEditModal, drawerOpen,
|
||
simulationYears
|
||
]);
|
||
|
||
/* push the snapshot to the chat context */
|
||
useEffect(() => {
|
||
if (typeof setChatSnapshot === 'function') {
|
||
setChatSnapshot(uiSnap);
|
||
}
|
||
}, [uiSnap, setChatSnapshot]);
|
||
|
||
|
||
useEffect(() => {
|
||
if (recommendations.length > 0) {
|
||
localStorage.setItem('aiRecommendations', JSON.stringify(recommendations));
|
||
} else {
|
||
// if it's empty, we can remove from localStorage if you want
|
||
localStorage.removeItem('aiRecommendations');
|
||
}
|
||
}, [recommendations]);
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// Resolve SOC without shipping any bulk JSON to the browser
|
||
// Order: scenarioRow.soc_code → selectedCareer.code → resolve by title
|
||
// ─────────────────────────────────────────────────────────────
|
||
const resolveSoc = useCallback(async () => {
|
||
// 1) scenarioRow already has it?
|
||
const fromScenario = scenarioRow?.soc_code || scenarioRow?.socCode;
|
||
if (fromScenario) {
|
||
setFullSocCode(fromScenario);
|
||
setStrippedSocCode(stripSocCode(fromScenario));
|
||
return;
|
||
}
|
||
// 2) selectedCareer from onboarding/search
|
||
const fromSelected = selectedCareer?.code || selectedCareer?.soc_code || selectedCareer?.socCode;
|
||
if (fromSelected) {
|
||
setFullSocCode(fromSelected);
|
||
setStrippedSocCode(stripSocCode(fromSelected));
|
||
return;
|
||
}
|
||
// 3) Fallback: resolve via tiny title→SOC endpoint (no bulk dataset)
|
||
const title = (scenarioRow?.career_name || '').trim();
|
||
if (!title) {
|
||
setFullSocCode(null);
|
||
setStrippedSocCode(null);
|
||
return;
|
||
}
|
||
try {
|
||
const r = await authFetch(`/api/careers/resolve?title=${encodeURIComponent(title)}`);
|
||
if (r.ok && (r.headers.get('content-type')||'').includes('application/json')) {
|
||
const j = await r.json(); // { title, soc_code, ... }
|
||
if (j?.soc_code) {
|
||
setFullSocCode(j.soc_code);
|
||
setStrippedSocCode(stripSocCode(j.soc_code));
|
||
return;
|
||
}
|
||
}
|
||
// not found
|
||
setFullSocCode(null);
|
||
setStrippedSocCode(null);
|
||
} catch (e) {
|
||
console.error('SOC resolve failed', e);
|
||
setFullSocCode(null);
|
||
setStrippedSocCode(null);
|
||
}
|
||
}, [scenarioRow, selectedCareer]);
|
||
|
||
// 3) fetch user’s career-profiles
|
||
// utilities you already have in this file
|
||
// • getAllCareerProfiles()
|
||
// • createCareerProfileFromSearch()
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
|
||
(async function init () {
|
||
// ─────────────────────────────────────────────────────────────
|
||
// 0) Prefer a real profile. Use ephemeral ONLY if none matches.
|
||
// Precedence when arriving with premiumOnboardingState:
|
||
// a) SOC match
|
||
// b) title match
|
||
// c) school match (via college_profile/all)
|
||
// ─────────────────────────────────────────────────────────────
|
||
if (!careerId) {
|
||
const pos = location.state?.premiumOnboardingState;
|
||
const sc = pos?.selectedCareer;
|
||
if (sc) {
|
||
const chosenSoc = sc.code || sc.soc_code || sc.socCode || '';
|
||
const chosenName = (sc.title || sc.career_name || '').trim();
|
||
|
||
// 1) fetch all user profiles
|
||
let all = [];
|
||
try {
|
||
all = await getAllCareerProfiles(); // uses authFetch
|
||
} catch { /* ignore; backend will log */ }
|
||
|
||
const bySoc = chosenSoc
|
||
? all.find(p => p.soc_code === chosenSoc)
|
||
: null;
|
||
|
||
const norm = (s='') => s.toLowerCase().replace(/\s+/g,' ').trim();
|
||
const byTitle = !bySoc && chosenName
|
||
? all.find(p => norm(p.career_name||p.scenario_title||'') === norm(chosenName))
|
||
: null;
|
||
|
||
let bySchool = null;
|
||
if (!bySoc && !byTitle && pos.selectedSchool) {
|
||
const schoolName = norm(pos.selectedSchool?.INSTNM || '');
|
||
try {
|
||
const r = await authFetch('/api/premium/college-profile/all');
|
||
if (r.ok && (r.headers.get('content-type')||'').includes('application/json')) {
|
||
const { collegeProfiles = [] } = await r.json();
|
||
const ids = new Set(
|
||
collegeProfiles
|
||
.filter(cp => norm(cp.selected_school || '') === schoolName)
|
||
.map(cp => cp.career_profile_id)
|
||
);
|
||
// pick newest start_date among candidates
|
||
const sorted = [...all].sort((a,b) => (a.start_date > b.start_date ? -1 : 1));
|
||
bySchool = sorted.find(p => ids.has(p.id)) || null;
|
||
}
|
||
} catch { /* ignore */ }
|
||
}
|
||
|
||
const match = bySoc || byTitle || bySchool;
|
||
if (match && !cancelled) {
|
||
// ✅ Normal mode: select existing profile
|
||
setCareerProfileId(match.id);
|
||
setSelectedCareer(match);
|
||
localStorage.setItem('lastSelectedCareerProfileId', match.id);
|
||
window.history.replaceState({}, '', location.pathname); // clear bridge
|
||
return; // let the rest of the effects run as usual
|
||
}
|
||
|
||
// ⚠️ No matching profile → ephemeral (financial profile is still used)
|
||
if (!cancelled) {
|
||
setCareerProfileId(null);
|
||
setSelectedCareer(sc);
|
||
setScenarioRow({
|
||
id: 'temp',
|
||
scenario_title: chosenName,
|
||
career_name : chosenName,
|
||
status : 'planned',
|
||
start_date : new Date().toISOString().slice(0,10),
|
||
college_enrollment_status: ''
|
||
});
|
||
const sch = pos.selectedSchool;
|
||
setCollegeProfile(sch ? {
|
||
selected_school : sch?.INSTNM || '',
|
||
selected_program : sch?.CIPDESC || '',
|
||
tuition : Number(sch?.['In_state cost'] ?? sch?.['Out_state cost'] ?? 0) || 0
|
||
} : {});
|
||
if (chosenSoc) {
|
||
setFullSocCode(chosenSoc);
|
||
setStrippedSocCode(chosenSoc.split('.')[0]);
|
||
}
|
||
window.history.replaceState({}, '', location.pathname); // clear bridge
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
const r = await authFetch('/api/premium/career-profile/all');
|
||
if (!r?.ok || cancelled) return;
|
||
const { careerProfiles=[] } = await r.json();
|
||
setExistingCareerProfiles(careerProfiles);
|
||
|
||
/* 2 ▸ what does the UI say the user just picked? */
|
||
const chosen =
|
||
location.state?.selectedCareer ??
|
||
JSON.parse(localStorage.getItem('selectedCareer') || '{}');
|
||
|
||
/* 2A ▸ they clicked a career elsewhere in the app */
|
||
if (chosen.code) {
|
||
let row = careerProfiles.find(p => p.soc_code === chosen.code);
|
||
if (!row) {
|
||
try { row = await createCareerProfileFromSearch(chosen); }
|
||
catch { /* swallow – API will have logged */ }
|
||
}
|
||
if (row && !cancelled) {
|
||
setCareerProfileId(row.id);
|
||
setSelectedCareer(row);
|
||
localStorage.setItem('lastSelectedCareerProfileId', row.id);
|
||
}
|
||
/* clear the one-shot navigate state */
|
||
if (!cancelled) window.history.replaceState({}, '', location.pathname);
|
||
return;
|
||
}
|
||
|
||
/* 2B ▸ deep-link /career-roadmap/:id */
|
||
if (careerId) {
|
||
const row = careerProfiles.find(p => String(p.id) === String(careerId));
|
||
if (row && !cancelled) {
|
||
setCareerProfileId(row.id);
|
||
setSelectedCareer(row);
|
||
localStorage.setItem('lastSelectedCareerProfileId', row.id);
|
||
}
|
||
return;
|
||
}
|
||
|
||
/* 2C ▸ last profile the user touched */
|
||
const stored = localStorage.getItem('lastSelectedCareerProfileId');
|
||
if (stored) {
|
||
const row = careerProfiles.find(p => String(p.id) === stored);
|
||
if (row && !cancelled) {
|
||
setCareerProfileId(row.id);
|
||
setSelectedCareer(row);
|
||
return;
|
||
}
|
||
}
|
||
|
||
/* 2D ▸ otherwise: newest profile, if any */
|
||
if (careerProfiles.length && !cancelled) {
|
||
const latest = careerProfiles.at(-1); // ASC order → last = newest
|
||
setCareerProfileId(latest.id);
|
||
setSelectedCareer(latest);
|
||
localStorage.setItem('lastSelectedCareerProfileId', latest.id);
|
||
}
|
||
})();
|
||
|
||
return () => { cancelled = true; };
|
||
|
||
/* fires only when the navigation key changes or when :id changes */
|
||
}, [location.key, careerId]);
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 4) refresh scenario + college whenever the active profile-id changes
|
||
* -----------------------------------------------------------------*/
|
||
useEffect(() => {
|
||
if (!careerProfileId) return; // nothing to fetch
|
||
|
||
// clear any stale UI traces while the new fetch runs
|
||
setScenarioRow(null);
|
||
setCollegeProfile(null);
|
||
setScenarioMilestones([]);
|
||
|
||
// remember for other tabs / future visits
|
||
localStorage.setItem('lastSelectedCareerProfileId', careerProfileId);
|
||
|
||
// fetch both rows in parallel (defined via useCallback)
|
||
reloadScenarioAndCollege();
|
||
}, [careerProfileId, reloadScenarioAndCollege]);
|
||
|
||
const refetchScenario = useCallback(async () => {
|
||
if (!careerProfileId) return;
|
||
const r = await authFetch(`/api/premium/career-profile/${careerProfileId}`);
|
||
if (r.ok) setScenarioRow(await r.json());
|
||
}, [careerProfileId]);
|
||
|
||
useEffect(() => {
|
||
if (!fullSocCode || !scenarioRow || scenarioRow.riskLevel) return;
|
||
(async () => {
|
||
const risk = await fetchAiRisk(
|
||
fullSocCode,
|
||
scenarioRow?.career_name,
|
||
scenarioRow?.job_description || "",
|
||
scenarioRow?.tasks || []
|
||
);
|
||
setAiRisk(risk);
|
||
if (risk && scenarioRow) {
|
||
const updated = {
|
||
...scenarioRow,
|
||
riskLevel: risk.riskLevel,
|
||
riskReasoning: risk.reasoning
|
||
};
|
||
setScenarioRow(updated);
|
||
}
|
||
})();
|
||
}, [fullSocCode, scenarioRow]);
|
||
|
||
useEffect(() => { resolveSoc(); }, [resolveSoc]);
|
||
|
||
async function fetchAiRisk(socCode, careerName, description, tasks) {
|
||
let aiRisk = null;
|
||
|
||
try {
|
||
// 1) Check server2 for existing entry
|
||
const localRiskRes = await api.get(`/api/ai-risk/${socCode}`);
|
||
aiRisk = localRiskRes.data; // { socCode, riskLevel, ... }
|
||
} catch (err) {
|
||
// 2) If 404 => call server3
|
||
if (err.response && err.response.status === 404) {
|
||
try {
|
||
// Call GPT via server3
|
||
const aiRes = await api.post('/api/public/ai-risk-analysis', {
|
||
socCode,
|
||
careerName,
|
||
jobDescription: description,
|
||
tasks
|
||
});
|
||
|
||
const { riskLevel, reasoning } = aiRes.data;
|
||
|
||
// Prepare the upsert payload
|
||
const storePayload = {
|
||
socCode,
|
||
careerName,
|
||
riskLevel,
|
||
reasoning
|
||
};
|
||
|
||
// Only set jobDescription if non-empty
|
||
if (
|
||
aiRes.data.jobDescription &&
|
||
aiRes.data.jobDescription.trim().length > 0
|
||
) {
|
||
storePayload.jobDescription = aiRes.data.jobDescription;
|
||
}
|
||
|
||
// Only set tasks if it's a non-empty array
|
||
if (
|
||
Array.isArray(aiRes.data.tasks) &&
|
||
aiRes.data.tasks.length > 0
|
||
) {
|
||
storePayload.tasks = aiRes.data.tasks;
|
||
}
|
||
|
||
// 3) Store in server2
|
||
await api.post('/api/ai-risk', storePayload);
|
||
|
||
// Construct final object for usage here
|
||
aiRisk = {
|
||
socCode,
|
||
careerName,
|
||
jobDescription: description,
|
||
tasks,
|
||
riskLevel,
|
||
reasoning
|
||
};
|
||
} catch (err2) {
|
||
console.error("Error calling server3 or storing AI risk:", err2);
|
||
// fallback
|
||
}
|
||
} else {
|
||
console.error("Error fetching AI risk from server2 =>", err);
|
||
}
|
||
}
|
||
|
||
return aiRisk;
|
||
}
|
||
|
||
/* 6) Salary ------------------------------------------------------- */
|
||
useEffect(() => {
|
||
// show blank state instantly whenever the SOC or area changes
|
||
setSalaryData(null);
|
||
setSalaryLoading(true);
|
||
|
||
if (!strippedSocCode) {
|
||
setSalaryLoading(false);
|
||
return;
|
||
}
|
||
const ctrl = new AbortController();
|
||
(async () => {
|
||
try {
|
||
const qs = new URLSearchParams({ socCode: strippedSocCode, area: userArea });
|
||
const res = await fetch(`/api/salary?${qs}`, {
|
||
signal: ctrl.signal,
|
||
credentials: 'include'
|
||
});
|
||
|
||
if (res.ok) {
|
||
setSalaryData(await res.json());
|
||
setSalaryLoading(false);
|
||
} else {
|
||
console.error('[Salary fetch]', res.status);
|
||
setSalaryLoading(false);
|
||
}
|
||
} catch (e) {
|
||
if (e.name !== 'AbortError') console.error('[Salary fetch error]', e);
|
||
setSalaryLoading(false);
|
||
}
|
||
})();
|
||
|
||
// cancel if strippedSocCode / userArea changes before the fetch ends
|
||
return () => ctrl.abort();
|
||
}, [strippedSocCode, userArea]);
|
||
|
||
/* 7) Economic Projections ---------------------------------------- */
|
||
useEffect(() => {
|
||
setEconomicProjections(null);
|
||
setEconLoading(true);
|
||
if (!strippedSocCode || !userState) {
|
||
setEconLoading(false);
|
||
return;
|
||
}
|
||
|
||
const ctrl = new AbortController();
|
||
(async () => {
|
||
try {
|
||
const qs = new URLSearchParams({ state: userState });
|
||
const res = await authFetch(
|
||
`/api/projections/${strippedSocCode}?${qs}`,
|
||
{ signal: ctrl.signal }
|
||
);
|
||
|
||
if (res.ok && (res.headers.get('content-type')||'').includes('application/json')) {
|
||
setEconomicProjections(await res.json());
|
||
setEconLoading(false);
|
||
} else {
|
||
console.error('[Econ fetch]', res.status);
|
||
setEconLoading(false);
|
||
}
|
||
} catch (e) {
|
||
if (e.name !== 'AbortError') console.error('[Econ fetch error]', e);
|
||
setEconLoading(false);
|
||
}
|
||
})();
|
||
|
||
return () => ctrl.abort();
|
||
}, [strippedSocCode, userState]);
|
||
|
||
// 8) Build financial projection
|
||
async function buildProjection(milestones) {
|
||
const allMilestones = milestones || [];
|
||
try {
|
||
setScenarioMilestones(allMilestones);
|
||
|
||
// fetch impacts
|
||
const imPromises = allMilestones.map((m) =>
|
||
authFetch(`/api/premium/milestone-impacts?milestone_id=${m.id}`)
|
||
.then((r) => (r.ok ? r.json() : null))
|
||
.then((dd) => dd?.impacts || [])
|
||
.catch((e) => {
|
||
console.warn('Error fetching impacts =>', e);
|
||
return [];
|
||
})
|
||
);
|
||
const impactsForEach = await Promise.all(imPromises);
|
||
const allImpacts = allMilestones
|
||
.map((m, i) => ({ ...m, impacts: impactsForEach[i] || [] }))
|
||
.flatMap((m) => m.impacts);
|
||
|
||
/* NEW – build a quick lookup table and expose it */
|
||
const map = {};
|
||
allImpacts.forEach((imp) => {
|
||
(map[imp.milestone_id] = map[imp.milestone_id] || []).push(imp);
|
||
});
|
||
setImpactsById(map); // <-- saves for the modal
|
||
|
||
const f = financialProfile;
|
||
const financialBase = {
|
||
currentSalary: parseFloatOrZero(f.current_salary, 0),
|
||
additionalIncome: parseFloatOrZero(f.additional_income, 0),
|
||
monthlyExpenses: parseFloatOrZero(f.monthly_expenses, 0),
|
||
monthlyDebtPayments: parseFloatOrZero(f.monthly_debt_payments, 0),
|
||
retirementSavings: parseFloatOrZero(f.retirement_savings, 0),
|
||
emergencySavings: parseFloatOrZero(f.emergency_fund, 0),
|
||
retirementContribution: parseFloatOrZero(f.retirement_contribution, 0),
|
||
emergencyContribution: parseFloatOrZero(f.emergency_contribution, 0),
|
||
extraCashEmergencyPct: parseFloatOrZero(f.extra_cash_emergency_pct, 50),
|
||
extraCashRetirementPct: parseFloatOrZero(f.extra_cash_retirement_pct, 50)
|
||
};
|
||
|
||
function parseScenarioOverride(overrideVal, fallbackVal) {
|
||
if (overrideVal === null) {
|
||
return fallbackVal;
|
||
}
|
||
return parseFloatOrZero(overrideVal, fallbackVal);
|
||
}
|
||
|
||
const s = scenarioRow;
|
||
const scenarioOverrides = {
|
||
monthlyExpenses: parseScenarioOverride(
|
||
s.planned_monthly_expenses,
|
||
financialBase.monthlyExpenses
|
||
),
|
||
monthlyDebtPayments: parseScenarioOverride(
|
||
s.planned_monthly_debt_payments,
|
||
financialBase.monthlyDebtPayments
|
||
),
|
||
monthlyRetirementContribution: parseScenarioOverride(
|
||
s.planned_monthly_retirement_contribution,
|
||
financialBase.retirementContribution
|
||
),
|
||
monthlyEmergencyContribution: parseScenarioOverride(
|
||
s.planned_monthly_emergency_contribution,
|
||
financialBase.emergencyContribution
|
||
),
|
||
surplusEmergencyAllocation: parseScenarioOverride(
|
||
s.planned_surplus_emergency_pct,
|
||
financialBase.extraCashEmergencyPct
|
||
),
|
||
surplusRetirementAllocation: parseScenarioOverride(
|
||
s.planned_surplus_retirement_pct,
|
||
financialBase.extraCashRetirementPct
|
||
),
|
||
additionalIncome: parseScenarioOverride(
|
||
s.planned_additional_income,
|
||
financialBase.additionalIncome
|
||
)
|
||
};
|
||
|
||
const c = collegeProfile;
|
||
const collegeData = {
|
||
studentLoanAmount: parseFloatOrZero(c.existing_college_debt, 0),
|
||
interestRate: parseFloatOrZero(c.interest_rate, 5),
|
||
loanTerm: parseFloatOrZero(c.loan_term, 10),
|
||
loanDeferralUntilGraduation: !!c.loan_deferral_until_graduation,
|
||
academicCalendar: c.academic_calendar || 'monthly',
|
||
annualFinancialAid: parseFloatOrZero(c.annual_financial_aid, 0),
|
||
calculatedTuition: parseFloatOrZero(c.tuition, 0),
|
||
extraPayment: parseFloatOrZero(c.extra_payment, 0),
|
||
inCollege:
|
||
c.college_enrollment_status === 'currently_enrolled' ||
|
||
c.college_enrollment_status === 'prospective_student',
|
||
gradDate: c.expected_graduation || null,
|
||
programType: c.program_type || null,
|
||
creditHoursPerYear: parseFloatOrZero(c.credit_hours_per_year, 0),
|
||
hoursCompleted: parseFloatOrZero(c.hours_completed, 0),
|
||
programLength: parseFloatOrZero(c.program_length, 0),
|
||
expectedSalary:
|
||
parseFloatOrZero(c.expected_salary) || parseFloatOrZero(f.current_salary, 0)
|
||
};
|
||
|
||
|
||
/* ── NEW: auto-extend horizon to cover furthest milestone ── */
|
||
let horizonYears = simulationYears; // default from the input box
|
||
if (allMilestones.length) {
|
||
// last dated milestone → Date object
|
||
const last = allMilestones
|
||
.filter(m => m.date)
|
||
.reduce(
|
||
(max, m) => (new Date(m.date) > max ? new Date(m.date) : max),
|
||
new Date()
|
||
);
|
||
|
||
const months = Math.ceil((last - new Date()) / (1000 * 60 * 60 * 24 * 30.44));
|
||
const years = Math.ceil(months / 12) + 1; // +1 yr buffer
|
||
horizonYears = Math.max(simulationYears, years);
|
||
}
|
||
|
||
|
||
const mergedProfile = {
|
||
currentSalary: financialBase.currentSalary,
|
||
monthlyExpenses: scenarioOverrides.monthlyExpenses,
|
||
monthlyDebtPayments: scenarioOverrides.monthlyDebtPayments,
|
||
retirementSavings: financialBase.retirementSavings,
|
||
emergencySavings: financialBase.emergencySavings,
|
||
monthlyRetirementContribution: scenarioOverrides.monthlyRetirementContribution,
|
||
monthlyEmergencyContribution: scenarioOverrides.monthlyEmergencyContribution,
|
||
surplusEmergencyAllocation: scenarioOverrides.surplusEmergencyAllocation,
|
||
surplusRetirementAllocation: scenarioOverrides.surplusRetirementAllocation,
|
||
additionalIncome: scenarioOverrides.additionalIncome,
|
||
|
||
// college
|
||
studentLoanAmount: collegeData.studentLoanAmount,
|
||
interestRate: collegeData.interestRate,
|
||
loanTerm: collegeData.loanTerm,
|
||
loanDeferralUntilGraduation: collegeData.loanDeferralUntilGraduation,
|
||
academicCalendar: collegeData.academicCalendar,
|
||
annualFinancialAid: collegeData.annualFinancialAid,
|
||
calculatedTuition: collegeData.calculatedTuition,
|
||
extraPayment: collegeData.extraPayment,
|
||
enrollmentDate: collegeProfile.enrollment_date || null,
|
||
inCollege: collegeData.inCollege,
|
||
gradDate: collegeData.gradDate,
|
||
programType: collegeData.programType,
|
||
creditHoursPerYear: collegeData.creditHoursPerYear,
|
||
hoursCompleted: collegeData.hoursCompleted,
|
||
programLength: collegeData.programLength,
|
||
expectedSalary: collegeData.expectedSalary,
|
||
|
||
startDate: new Date().toISOString().slice(0, 10),
|
||
simulationYears: horizonYears,
|
||
milestoneImpacts: allImpacts,
|
||
|
||
interestStrategy,
|
||
flatAnnualRate,
|
||
monthlyReturnSamples: [], // or keep an array if you have historical data
|
||
randomRangeMin,
|
||
randomRangeMax
|
||
};
|
||
|
||
const { projectionData: pData, loanPaidOffMonth } =
|
||
simulateFinancialProjection(mergedProfile);
|
||
|
||
let cumu = mergedProfile.emergencySavings || 0;
|
||
const finalData = pData.map((mo) => {
|
||
cumu += mo.netSavings || 0;
|
||
return { ...mo, cumulativeNetSavings: cumu };
|
||
});
|
||
|
||
setProjectionData(finalData);
|
||
setLoanPayoffMonth(loanPaidOffMonth);
|
||
} catch (err) {
|
||
console.error('Error in scenario simulation =>', err);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!financialProfile || !scenarioRow || collegeProfile === null) return;
|
||
fetchMilestones();
|
||
}, [financialProfile, scenarioRow, collegeProfile, careerProfileId, simulationYears, interestStrategy, flatAnnualRate, randomRangeMin, randomRangeMax]);
|
||
|
||
|
||
|
||
const [clickCount, setClickCount] = useState(() => {
|
||
const storedCount = localStorage.getItem('aiClickCount');
|
||
const storedDate = localStorage.getItem('aiClickDate');
|
||
const today = new Date().toISOString().slice(0, 10).slice(0, 10);
|
||
if (storedDate !== today) {
|
||
localStorage.setItem('aiClickDate', today);
|
||
localStorage.setItem('aiClickCount', '0');
|
||
return 0;
|
||
}
|
||
return parseInt(storedCount || '0', 10);
|
||
});
|
||
|
||
const DAILY_CLICK_LIMIT = 10; // example limit per day
|
||
|
||
|
||
const emergencyData = {
|
||
label: 'Emergency Savings',
|
||
data: projectionData.map((p) => Number(p.emergencySavings ?? 0)),
|
||
borderColor: 'rgba(255, 159, 64, 1)',
|
||
backgroundColor: 'rgba(255, 159, 64, 0.2)',
|
||
tension: 0.4,
|
||
fill: true
|
||
};
|
||
const retirementData = {
|
||
label: 'Retirement Savings',
|
||
data: projectionData.map((p) => Number(p.retirementSavings ?? 0)),
|
||
borderColor: 'rgba(75, 192, 192, 1)',
|
||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
tension: 0.4,
|
||
fill: true
|
||
};
|
||
const totalSavingsData = {
|
||
label: 'Total Savings',
|
||
data: projectionData.map((p) => Number(p.totalSavings ?? 0)),
|
||
borderColor: 'rgba(54, 162, 235, 1)',
|
||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||
tension: 0.4,
|
||
fill: true
|
||
};
|
||
const loanBalanceData = {
|
||
label: 'Loan Balance',
|
||
data: projectionData.map((p) => Number(p.loanBalance ?? 0)),
|
||
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'
|
||
}
|
||
};
|
||
|
||
const hasStudentLoan = useMemo(
|
||
() => projectionData.some(p => (p.loanBalance ?? 0) > 0),
|
||
[projectionData]
|
||
);
|
||
|
||
|
||
const chartDatasets = [emergencyData, retirementData];
|
||
if (hasStudentLoan) chartDatasets.push(loanBalanceData);
|
||
chartDatasets.push(totalSavingsData);
|
||
|
||
const yearsInCareer = getYearsInCareer(scenarioRow?.start_date);
|
||
|
||
function handleSimulationYearsChange(e) {
|
||
setSimulationYearsInput(e.target.value);
|
||
}
|
||
function handleSimulationYearsBlur() {
|
||
if (!simulationYearsInput.trim()) setSimulationYearsInput('20');
|
||
}
|
||
|
||
const buttonLabel = recommendations.length > 0 ? 'New Suggestions' : 'What Should I Do Next?';
|
||
const chartRef = useRef(null);
|
||
|
||
const onEditMilestone = useCallback((m) => {
|
||
setMilestoneForModal({
|
||
...m,
|
||
impacts: impactsById[m.id] || [] // give the modal what it needs
|
||
});
|
||
}, [impactsById]);
|
||
|
||
const currentIdRef = useRef(null);
|
||
|
||
/* 1️⃣ The only deps it really needs */
|
||
const fetchMilestones = useCallback(async () => {
|
||
if (!careerProfileId) return;
|
||
|
||
const profRes = await authFetch(`/api/premium/milestones?careerProfileId=${careerProfileId}`);
|
||
if (!profRes.ok) return;
|
||
const ct = profRes.headers.get('content-type') || '';
|
||
const { milestones: profMs = [] } = ct.includes('application/json') ? await profRes.json() : { milestones: [] };
|
||
const merged = profMs;
|
||
setScenarioMilestones(merged);
|
||
// use explicit null-check so {} works, and ensure we see latest value
|
||
if (financialProfile && scenarioRow && collegeProfile !== null) {
|
||
buildProjection(merged);
|
||
} // single rebuild
|
||
}, [financialProfile, scenarioRow, collegeProfile, careerProfileId]); // ← NOTICE: no buildProjection here
|
||
|
||
const handleMilestonesCreated = useCallback(
|
||
(count = 0) => {
|
||
// optional toast
|
||
if (count) console.log(`💾 ${count} milestone(s) saved – refreshing list…`);
|
||
fetchMilestones();
|
||
},
|
||
[fetchMilestones]
|
||
);
|
||
|
||
// Refresh milestones when the chat layer announces changes
|
||
useEffect(() => {
|
||
const handler = (e) => {
|
||
// If an event specifies a scenarioId, ignore other scenarios
|
||
const incoming = e?.detail?.scenarioId;
|
||
if (incoming && String(incoming) !== String(careerProfileId)) return;
|
||
fetchMilestones();
|
||
};
|
||
window.addEventListener('aptiva:milestones:changed', handler);
|
||
return () => window.removeEventListener('aptiva:milestones:changed', handler);
|
||
}, [careerProfileId, fetchMilestones]);
|
||
|
||
return (
|
||
<div className="milestone-tracker max-w-screen-lg mx-auto px-4 py-6 space-y-4">
|
||
|
||
|
||
{careerProfileId ? (
|
||
<CareerCoach
|
||
userProfile={userProfile}
|
||
financialProfile={financialProfile}
|
||
scenarioRow={scenarioRow}
|
||
setScenarioRow={setScenarioRow}
|
||
careerProfileId={careerProfileId}
|
||
collegeProfile={collegeProfile}
|
||
onMilestonesCreated={handleMilestonesCreated}
|
||
onAiRiskFetched={(riskData) => { setAiRisk(riskData); }}
|
||
/>
|
||
) : (
|
||
<div className="bg-white p-4 rounded shadow text-center min-h-[80px] flex items-center justify-center">
|
||
Loading your roadmap…
|
||
</div>
|
||
)}
|
||
|
||
{/* 1) Then your "Where Am I Now?" */}
|
||
<h2 className="text-2xl font-bold mb-4">Where you are now and where you are going:</h2>
|
||
|
||
{/* 1) Career */}
|
||
<div className="bg-white p-4 rounded shadow mb-4 flex flex-col justify-center items-center min-h-[80px]">
|
||
<p>
|
||
<strong>Target Career:</strong>{' '}
|
||
{scenarioRow?.career_name || '(Select a career)'}
|
||
</p>
|
||
{yearsInCareer && (
|
||
<p>
|
||
<strong>Time in this career:</strong> {yearsInCareer}{' '}
|
||
{yearsInCareer === '<1' ? 'year' : 'years'}
|
||
</p>
|
||
)}
|
||
|
||
{aiRisk?.riskLevel && (
|
||
<p className="text-center mt-2">
|
||
<strong>AI Automation Risk:</strong>{' '}
|
||
{aiRisk.riskLevel} <br />
|
||
<em>{aiRisk.reasoning}</em>
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 2) Salary Benchmarks */}
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
{salaryLoading && (
|
||
<div className="bg-white p-4 rounded shadow w-full text-center">
|
||
<p className="text-sm text-gray-500">Loading salary data…</p>
|
||
</div>
|
||
)}
|
||
{!salaryLoading && salaryData?.regional && (
|
||
|
||
<div className="bg-white p-4 rounded shadow w-full h-auto overflow-none">
|
||
<h4 className="font-medium mb-2">
|
||
Regional Salary Data ({userArea || 'U.S.'})
|
||
</h4>
|
||
<p>
|
||
10th percentile:{' '}
|
||
{salaryData.regional.regional_PCT10
|
||
? `$${parseFloat(salaryData.regional.regional_PCT10).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
<p>
|
||
Median:{' '}
|
||
{salaryData.regional.regional_MEDIAN
|
||
? `$${parseFloat(salaryData.regional.regional_MEDIAN).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
<p>
|
||
90th percentile:{' '}
|
||
{salaryData.regional.regional_PCT90
|
||
? `$${parseFloat(salaryData.regional.regional_PCT90).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
|
||
|
||
<SalaryGauge
|
||
userSalary={userSalary}
|
||
percentileRow={salaryData.regional}
|
||
prefix="regional"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
|
||
{!salaryLoading && salaryData?.national && (
|
||
<div className="bg-white p-4 rounded shadow w-full h-auto overflow-none">
|
||
<h4 className="font-medium mb-2">National Salary Data</h4>
|
||
<p>
|
||
10th percentile:{' '}
|
||
{salaryData.national.national_PCT10
|
||
? `$${parseFloat(salaryData.national.national_PCT10).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
<p>
|
||
Median:{' '}
|
||
{salaryData.national.national_MEDIAN
|
||
? `$${parseFloat(salaryData.national.national_MEDIAN).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
<p>
|
||
90th percentile:{' '}
|
||
{salaryData.national.national_PCT90
|
||
? `$${parseFloat(salaryData.national.national_PCT90).toLocaleString()}`
|
||
: 'N/A'}
|
||
</p>
|
||
|
||
<SalaryGauge
|
||
userSalary={userSalary}
|
||
percentileRow={salaryData.national}
|
||
prefix="national"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{!salaryLoading && !salaryData?.regional && !salaryData?.national && (
|
||
<div className="bg-white p-4 rounded shadow w-full text-center">
|
||
<p className="text-sm text-gray-500">No salary data found.</p>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
|
||
{/* 3) Economic Projections */}
|
||
<div className="flex flex-col md:flex-row gap-4 h-auto overflow-none">
|
||
{econLoading && (
|
||
<div className="bg-white p-4 rounded shadow w-full text-center">
|
||
<p className="text-sm text-gray-500">Loading projections…</p>
|
||
</div>
|
||
)}
|
||
{!econLoading && economicProjections?.state && (
|
||
<EconomicProjectionsBar data={economicProjections.state} />
|
||
)}
|
||
{!econLoading && economicProjections?.national && (
|
||
<EconomicProjectionsBar data={economicProjections.national} />
|
||
)}
|
||
</div>
|
||
{!economicProjections?.state && !economicProjections?.national && (
|
||
<div className="bg-white p-4 rounded shadow">
|
||
<p className="text-sm text-gray-500">No economic data found.</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 4) Career Goals
|
||
<div className="bg-white p-4 rounded shadow">
|
||
<h3 className="text-lg font-semibold mb-2">Your Career Goals</h3>
|
||
<p className="text-gray-700">
|
||
{scenarioRow?.career_goals || 'No career goals entered yet.'}
|
||
</p>
|
||
</div>*/}
|
||
|
||
{/* --- FINANCIAL PROJECTION SECTION -------------------------------- */}
|
||
|
||
{showMissingBanner && (
|
||
<div className="bg-yellow-100 border-l-4 border-yellow-500 p-4 rounded shadow mb-4">
|
||
<p className="text-sm text-gray-800">
|
||
To improve your projection, please add:
|
||
</p>
|
||
{!!missingKeys.length && (
|
||
<ul className="mt-2 ml-5 list-disc text-sm text-gray-800">
|
||
{missingKeys.map((k) => (
|
||
<li key={k}>{MISSING_LABELS[k] || k}</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
<Button
|
||
className="mt-2"
|
||
onClick={() => { setShowEditModal(true); setShowMissingBanner(false); }}
|
||
>
|
||
Add Details
|
||
</Button>
|
||
<button
|
||
className="ml-3 text-xs text-gray-600 underline"
|
||
onClick={() => setShowMissingBanner(false)}
|
||
>
|
||
Dismiss
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-white p-4 rounded shadow">
|
||
<h3 className="text-lg font-semibold mb-2 flex items-center justify-center gap-1">
|
||
Financial Projection
|
||
<InfoTooltip message="This projection uses the salary, expense, loan and contribution inputs you’ve set below. Click “Edit Simulation Inputs” to adjust them, or edit your financial information in Profile -> Financial Profile." />
|
||
</h3>
|
||
|
||
{/* Legal/assumptions disclaimer (static, matches simulator) */}
|
||
<FinancialDisclaimer />
|
||
{projectionData.length ? (
|
||
<div>
|
||
{/* Chart – now full width */}
|
||
<div style={{ height: 360, width: '100%' }}>
|
||
<Line
|
||
ref={chartRef}
|
||
data={{
|
||
labels: projectionData.map(p => p.month),
|
||
datasets: chartDatasets
|
||
}}
|
||
options={{
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: { position: 'bottom' },
|
||
tooltip: { mode: 'index', intersect: false },
|
||
annotation: { annotations: allAnnotations }, // ✅ new
|
||
zoom: zoomConfig
|
||
},
|
||
scales: xAndYScales // unchanged
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<Button onClick={() => chartRef.current?.resetZoom()}
|
||
className="mt-2 text-xs text-blue-600 hover:underline"
|
||
>
|
||
Reset Zoom
|
||
</Button>
|
||
|
||
{loanPayoffMonth && hasStudentLoan && (
|
||
<p className="font-semibold text-sm mt-2">
|
||
Loan Paid Off:
|
||
<span className="text-yellow-600">{loanPayoffMonth}</span>
|
||
</p>
|
||
)}
|
||
|
||
</div>
|
||
) : (
|
||
<p className="text-sm text-gray-500">No financial projection data found.</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Milestones – stacked list under chart */}
|
||
<div className="mt-4 bg-white p-4 rounded shadow">
|
||
<h4 className="text-lg font-semibold mb-2">
|
||
Milestones
|
||
<InfoTooltip message="Milestones are career or life events—promotions, relocations, degree completions, etc.—that may change your income or spending. They feed directly into the financial projection if they have a financial impact." />
|
||
</h4>
|
||
<MilestonePanel
|
||
groups={milestoneGroups}
|
||
onEdit={onEditMilestone}
|
||
onSelect={(m) => {
|
||
setDrawerMilestone(m);
|
||
setDrawerOpen(true);
|
||
}}
|
||
onAddNewMilestone={() => setAddingNewMilestone(true)}
|
||
/>
|
||
|
||
</div>
|
||
|
||
{/* 6) Simulation length + Edit scenario */}
|
||
<div className="mt-4 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"
|
||
/>
|
||
<Button onClick={() => setShowEditModal(true)} className="ml-2">
|
||
Edit Simulation Inputs
|
||
</Button>
|
||
</div>
|
||
|
||
<ScenarioEditModal
|
||
key={careerProfileId}
|
||
show={showEditModal}
|
||
onClose={(didSave) => {
|
||
setShowEditModal(false);
|
||
if (didSave) reloadScenarioAndCollege(); // 👈 refresh after save
|
||
}}
|
||
scenario={scenarioRow}
|
||
financialProfile={financialProfile}
|
||
setFinancialProfile={setFinancialProfile}
|
||
collegeProfile={collegeProfile}
|
||
setCollegeProfile={setCollegeProfile}
|
||
authFetch={authFetch}
|
||
/>
|
||
|
||
|
||
{/* (E1) Interest Strategy */}
|
||
<label className="ml-4 font-medium">Interest Rate:</label>
|
||
<select
|
||
value={interestStrategy}
|
||
onChange={(e) => setInterestStrategy(e.target.value)}
|
||
className="border rounded p-1"
|
||
>
|
||
<option value="NONE">No Interest</option>
|
||
<option value="FLAT">Flat Rate</option>
|
||
<option value="RANDOM">Random</option>
|
||
</select>
|
||
|
||
{/* (E2) If FLAT => show the annual rate */}
|
||
{interestStrategy === 'FLAT' && (
|
||
<div className="inline-block ml-4">
|
||
<label className="mr-1">Annual Rate (%):</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={flatAnnualRate}
|
||
onChange={(e) => setFlatAnnualRate(parseFloatOrZero(e.target.value, 0.06))}
|
||
className="border rounded p-1 w-20"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* (E3) If RANDOM => show the random range */}
|
||
{interestStrategy === 'RANDOM' && (
|
||
<div className="inline-block ml-4">
|
||
<label className="mr-1">Min Return (%):</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={randomRangeMin}
|
||
onChange={(e) => setRandomRangeMin(parseFloatOrZero(e.target.value, -0.02))}
|
||
className="border rounded p-1 w-20 mr-2"
|
||
/>
|
||
<label className="mr-1">Max Return (%):</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={randomRangeMax}
|
||
onChange={(e) => setRandomRangeMax(parseFloatOrZero(e.target.value, 0.02))}
|
||
className="border rounded p-1 w-20"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* ───────────────────────────────────────────────
|
||
1. EDIT EXISTING MILESTONE (modal pops from grid, unchanged)
|
||
─────────────────────────────────────────────── */}
|
||
{milestoneForModal && (
|
||
<MilestoneEditModal
|
||
careerProfileId={careerProfileId}
|
||
milestones={scenarioMilestones}
|
||
milestone={milestoneForModal} /* ← edit mode */
|
||
fetchMilestones={fetchMilestones}
|
||
onClose={(didSave) => {
|
||
if (didSave) handleMilestonesCreated();
|
||
setMilestoneForModal(null);
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* ───────────────────────────────────────────────
|
||
2. ADD-NEW MILESTONE (same modal, milestone = null)
|
||
─────────────────────────────────────────────── */}
|
||
{addingNewMilestone && (
|
||
<MilestoneEditModal
|
||
careerProfileId={careerProfileId}
|
||
milestones={scenarioMilestones}
|
||
milestone={null} /* ← create mode */
|
||
fetchMilestones={fetchMilestones}
|
||
onClose={(didSave) => {
|
||
setAddingNewMilestone(false);
|
||
if (didSave) fetchMilestones();
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* ───────────────────────────────────────────────
|
||
3. RIGHT-HAND DRAWER
|
||
─────────────────────────────────────────────── */}
|
||
<MilestoneDrawer
|
||
open={drawerOpen}
|
||
milestone={drawerMilestone}
|
||
onClose={() => setDrawerOpen(false)}
|
||
onTaskToggle={(id, newStatus) => {
|
||
/* optimistic update or just refetch */
|
||
fetchMilestones();
|
||
}}
|
||
onAddNewMilestone={() => {
|
||
setDrawerOpen(false); // close drawer first
|
||
setAddingNewMilestone(true); // then open modal in create mode
|
||
}}
|
||
/>
|
||
|
||
{/* 7) AI Next Steps */}
|
||
{/* <div className="bg-white p-4 rounded shadow mt-4">
|
||
<Button onClick={handleAiClick} disabled={aiLoading || clickCount >= DAILY_CLICK_LIMIT}>
|
||
{buttonLabel}
|
||
</Button>
|
||
|
||
{aiLoading && <p>Generating your next steps…</p>}
|
||
|
||
{/* If we have structured recs, show checkboxes
|
||
{recommendations.length > 0 && (
|
||
<div className="mt-3">
|
||
<h3 className="font-semibold">Select the Advice You Want to Keep</h3>
|
||
<ul className="mt-2 space-y-2">
|
||
{recommendations.map((m) => (
|
||
<li key={m.id} className="flex items-start gap-2">
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedIds.includes(m.id)}
|
||
onChange={() => handleToggle(m.id)}
|
||
/>
|
||
<div className="flex flex-col text-left">
|
||
<strong>{m.title}</strong>
|
||
<span>{m.date}</span>
|
||
<p className="text-sm">{m.description}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
{selectedIds.length > 0 && (
|
||
<Button className="mt-3" onClick={handleCreateSelectedMilestones}>
|
||
Create Milestones from Selected
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>*/}
|
||
</div>
|
||
);
|
||
}
|