719 lines
26 KiB
JavaScript
719 lines
26 KiB
JavaScript
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||
import { useNavigate, useLocation } from 'react-router-dom';
|
||
|
||
import CareerSuggestions from './CareerSuggestions.js';
|
||
import CareerPrioritiesModal from './CareerPrioritiesModal.js';
|
||
import CareerModal from './CareerModal.js';
|
||
import CareerSearch from './CareerSearch.js';
|
||
import { Button } from './ui/button.js';
|
||
import axios from 'axios';
|
||
|
||
const STATES = [
|
||
{ name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' },
|
||
{ name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'Colorado', code: 'CO' },
|
||
{ name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DE' }, { name: 'District of Columbia', code: 'DC' },
|
||
{ name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' },
|
||
{ name: 'Idaho', code: 'ID' }, { name: 'Illinois', code: 'IL' }, { name: 'Indiana', code: 'IN' },
|
||
{ name: 'Iowa', code: 'IA' }, { name: 'Kansas', code: 'KS' }, { name: 'Kentucky', code: 'KY' },
|
||
{ name: 'Louisiana', code: 'LA' }, { name: 'Maine', code: 'ME' }, { name: 'Maryland', code: 'MD' },
|
||
{ name: 'Massachusetts', code: 'MA' }, { name: 'Michigan', code: 'MI' }, { name: 'Minnesota', code: 'MN' },
|
||
{ name: 'Mississippi', code: 'MS' }, { name: 'Missouri', code: 'MO' }, { name: 'Montana', code: 'MT' },
|
||
{ name: 'Nebraska', code: 'NE' }, { name: 'Nevada', code: 'NV' }, { name: 'New Hampshire', code: 'NH' },
|
||
{ name: 'New Jersey', code: 'NJ' }, { name: 'New Mexico', code: 'NM' }, { name: 'New York', code: 'NY' },
|
||
{ name: 'North Carolina', code: 'NC' }, { name: 'North Dakota', code: 'ND' }, { name: 'Ohio', code: 'OH' },
|
||
{ name: 'Oklahoma', code: 'OK' }, { name: 'Oregon', code: 'OR' }, { name: 'Pennsylvania', code: 'PA' },
|
||
{ name: 'Rhode Island', code: 'RI' }, { name: 'South Carolina', code: 'SC' }, { name: 'South Dakota', code: 'SD' },
|
||
{ name: 'Tennessee', code: 'TN' }, { name: 'Texas', code: 'TX' }, { name: 'Utah', code: 'UT' },
|
||
{ name: 'Vermont', code: 'VT' }, { name: 'Virginia', code: 'VA' }, { name: 'Washington', code: 'WA' },
|
||
{ name: 'West Virginia', code: 'WV' }, { name: 'Wisconsin', code: 'WI' }, { name: 'Wyoming', code: 'WY' },
|
||
];
|
||
|
||
// -------------- CIP HELPER FUNCTIONS --------------
|
||
|
||
// 1) Insert leading zero if there's only 1 digit before the decimal
|
||
function ensureTwoDigitsBeforeDecimal(cipStr) {
|
||
// e.g. "4.0201" => "04.0201"
|
||
return cipStr.replace(/^(\d)\./, '0$1.');
|
||
}
|
||
|
||
// 2) Clean an array of CIP codes, e.g. ["4.0201", "14.0901"] => ["0402", "1409"]
|
||
function cleanCipCodes(cipArray) {
|
||
return cipArray.map((code) => {
|
||
let codeStr = code.toString();
|
||
codeStr = ensureTwoDigitsBeforeDecimal(codeStr); // ensure "04.0201"
|
||
return codeStr.replace('.', '').slice(0, 4); // => "040201" => "0402"
|
||
});
|
||
}
|
||
|
||
function getFullStateName(code) {
|
||
const found = STATES.find((s) => s.code === code?.toUpperCase());
|
||
return found ? found.name : '';
|
||
}
|
||
|
||
function CareerExplorer() {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const apiUrl = process.env.REACT_APP_API_URL || '';
|
||
|
||
const [userProfile, setUserProfile] = useState(null);
|
||
const [masterCareerRatings, setMasterCareerRatings] = useState([]);
|
||
const [careerList, setCareerList] = useState([]);
|
||
const [careerDetails, setCareerDetails] = useState(null);
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [userState, setUserState] = useState(null);
|
||
const [areaTitle, setAreaTitle] = useState(null);
|
||
const [userZipcode, setUserZipcode] = useState(null);
|
||
const [error, setError] = useState(null);
|
||
const [pendingCareerForModal, setPendingCareerForModal] = useState(null);
|
||
const [careerSuggestions, setCareerSuggestions] = useState([]);
|
||
const [careersWithJobZone, setCareersWithJobZone] = useState([]);
|
||
const [salaryData, setSalaryData] = useState([]);
|
||
const [economicProjections, setEconomicProjections] = useState(null);
|
||
const [selectedJobZone, setSelectedJobZone] = useState('');
|
||
const [selectedFit, setSelectedFit] = useState('');
|
||
const [selectedCareer, setSelectedCareer] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [progress, setProgress] = useState(0);
|
||
|
||
const jobZoneLabels = {
|
||
'1': 'Little or No Preparation',
|
||
'2': 'Some Preparation Needed',
|
||
'3': 'Medium Preparation Needed',
|
||
'4': 'Considerable Preparation Needed',
|
||
'5': 'Extensive Preparation Needed',
|
||
};
|
||
|
||
const fitLabels = {
|
||
Best: 'Best - Very Strong Match',
|
||
Great: 'Great - Strong Match',
|
||
Good: 'Good - Less Strong Match',
|
||
};
|
||
|
||
// ===================== Load user profile =====================
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
|
||
const fetchUserProfile = async () => {
|
||
try {
|
||
const token = localStorage.getItem('token');
|
||
const res = await axios.get(`${apiUrl}/user-profile`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
|
||
if (res.status === 200) {
|
||
const profileData = res.data;
|
||
console.log('[fetchUserProfile] loaded profileData =>', profileData);
|
||
|
||
setUserProfile(profileData);
|
||
setUserState(profileData.state);
|
||
setAreaTitle(profileData.area);
|
||
setUserZipcode(profileData.zipcode);
|
||
|
||
// If they have a saved career list
|
||
if (profileData.career_list) {
|
||
setCareerList(JSON.parse(profileData.career_list));
|
||
}
|
||
|
||
// If they have interest inventory, fetch suggestions
|
||
if (profileData.interest_inventory_answers) {
|
||
const answers = profileData.interest_inventory_answers;
|
||
const careerSuggestionsRes = await axios.post(`${apiUrl}/onet/submit_answers`, {
|
||
answers,
|
||
state: profileData.state,
|
||
area: profileData.area,
|
||
});
|
||
const { careers = [] } = careerSuggestionsRes.data || {};
|
||
setCareerSuggestions(careers.flat());
|
||
} else {
|
||
setCareerSuggestions([]);
|
||
}
|
||
|
||
// Check if priorities answered
|
||
const priorities = profileData.career_priorities
|
||
? JSON.parse(profileData.career_priorities)
|
||
: {};
|
||
|
||
const allAnswered = ['interests','meaning','stability','growth','balance','recognition']
|
||
.every((key) => priorities[key]);
|
||
|
||
if (!allAnswered) {
|
||
setShowModal(true);
|
||
}
|
||
} else {
|
||
setShowModal(true);
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching user profile:', err);
|
||
setShowModal(true);
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchUserProfile();
|
||
}, [apiUrl]);
|
||
|
||
// ===================== If location.state has careerSuggestions =====================
|
||
useEffect(() => {
|
||
if (location.state?.careerSuggestions) {
|
||
setCareerSuggestions(location.state.careerSuggestions);
|
||
}
|
||
}, [location.state]);
|
||
|
||
// ===================== Fetch job zones for suggestions =====================
|
||
useEffect(() => {
|
||
const fetchJobZones = async () => {
|
||
if (!careerSuggestions.length) return;
|
||
|
||
const flatSuggestions = careerSuggestions.flat();
|
||
const socCodes = flatSuggestions.map((career) => career.code);
|
||
|
||
try {
|
||
const response = await axios.post(`${apiUrl}/job-zones`, { socCodes });
|
||
const jobZoneData = response.data;
|
||
const updatedCareers = flatSuggestions.map((career) => ({
|
||
...career,
|
||
job_zone: jobZoneData[career.code.slice(0, -3)]?.job_zone || null,
|
||
}));
|
||
|
||
setCareersWithJobZone([...updatedCareers]);
|
||
} catch (error) {
|
||
console.error('Error fetching job zone information:', error);
|
||
}
|
||
};
|
||
|
||
fetchJobZones();
|
||
}, [careerSuggestions, apiUrl]);
|
||
|
||
// ===================== handleCareerClick (detail fetch) =====================
|
||
const handleCareerClick = useCallback(
|
||
async (career) => {
|
||
console.log('[handleCareerClick] career =>', career);
|
||
const socCode = career.code;
|
||
setSelectedCareer(career);
|
||
setError(null);
|
||
setCareerDetails(null);
|
||
setSalaryData([]);
|
||
setEconomicProjections({});
|
||
|
||
setSelectedCareer(career);
|
||
|
||
if (!socCode) {
|
||
console.error('SOC Code is missing');
|
||
setError('SOC Code is missing');
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// CIP fetch
|
||
const cipResponse = await fetch(`${apiUrl}/cip/${socCode}`);
|
||
if (!cipResponse.ok) {
|
||
setError(
|
||
`We're sorry, but specific details for "${career.title}" are not available at this time.`
|
||
);
|
||
setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`});
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
const { cipCode } = await cipResponse.json();
|
||
const cleanedCipCode = cipCode.replace('.', '').slice(0, 4);
|
||
|
||
// Job details
|
||
const jobDetailsResponse = await fetch(`${apiUrl}/onet/career-description/${socCode}`);
|
||
if (!jobDetailsResponse.ok){
|
||
setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`});
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
const { description, tasks } = await jobDetailsResponse.json();
|
||
|
||
// Salary
|
||
let salaryResponse;
|
||
try {
|
||
salaryResponse = await axios.get(`${apiUrl}/salary`, {
|
||
params: { socCode: socCode.split('.')[0], area: areaTitle },
|
||
});
|
||
} catch (error) {
|
||
salaryResponse = { data: {} };
|
||
}
|
||
|
||
// Build salary array
|
||
const sData = salaryResponse.data || {};
|
||
const salaryDataPoints =
|
||
sData && Object.keys(sData).length > 0
|
||
? [
|
||
{
|
||
percentile: '10th Percentile',
|
||
regionalSalary: parseInt(sData.regional?.regional_PCT10, 10) || 0,
|
||
nationalSalary: parseInt(sData.national?.national_PCT10, 10) || 0,
|
||
},
|
||
{
|
||
percentile: '25th Percentile',
|
||
regionalSalary: parseInt(sData.regional?.regional_PCT25, 10) || 0,
|
||
nationalSalary: parseInt(sData.national?.national_PCT25, 10) || 0,
|
||
},
|
||
{
|
||
percentile: 'Median',
|
||
regionalSalary: parseInt(sData.regional?.regional_MEDIAN, 10) || 0,
|
||
nationalSalary: parseInt(sData.national?.national_MEDIAN, 10) || 0,
|
||
},
|
||
{
|
||
percentile: '75th Percentile',
|
||
regionalSalary: parseInt(sData.regional?.regional_PCT75, 10) || 0,
|
||
nationalSalary: parseInt(sData.national?.national_PCT75, 10) || 0,
|
||
},
|
||
{
|
||
percentile: '90th Percentile',
|
||
regionalSalary: parseInt(sData.regional?.regional_PCT90, 10) || 0,
|
||
nationalSalary: parseInt(sData.national?.national_PCT90, 10) || 0,
|
||
},
|
||
]
|
||
: [];
|
||
|
||
// Economic
|
||
const fullStateName = getFullStateName(userState);
|
||
let economicResponse = { data: {} };
|
||
try {
|
||
economicResponse = await axios.get(`${apiUrl}/projections/${socCode.split('.')[0]}`, {
|
||
params: { state: fullStateName },
|
||
});
|
||
} catch (error) {
|
||
economicResponse = { data: {} };
|
||
}
|
||
|
||
// Build final details
|
||
const updatedCareerDetails = {
|
||
...career,
|
||
jobDescription: description,
|
||
tasks,
|
||
salaryData: salaryDataPoints,
|
||
economicProjections: economicResponse.data || {},
|
||
};
|
||
|
||
setCareerDetails(updatedCareerDetails);
|
||
} catch (error) {
|
||
console.error('Error processing career click:', error.message);
|
||
setCareerDetails({
|
||
error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`,
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
[userState, apiUrl, areaTitle, userZipcode]
|
||
);
|
||
|
||
// ===================== handleCareerFromSearch =====================
|
||
const handleCareerFromSearch = useCallback(
|
||
(obj) => {
|
||
const adapted = {
|
||
code: obj.soc_code,
|
||
title: obj.title,
|
||
cipCode: obj.cip_code,
|
||
};
|
||
console.log('[Dashboard -> handleCareerFromSearch] adapted =>', adapted);
|
||
handleCareerClick(adapted);
|
||
},
|
||
[handleCareerClick]
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (pendingCareerForModal) {
|
||
console.log('[useEffect] pendingCareerForModal =>', pendingCareerForModal);
|
||
handleCareerFromSearch(pendingCareerForModal);
|
||
setPendingCareerForModal(null);
|
||
}
|
||
}, [pendingCareerForModal, handleCareerFromSearch]);
|
||
|
||
// ===================== Load careers_with_ratings for CIP arrays =====================
|
||
useEffect(() => {
|
||
fetch('/careers_with_ratings.json')
|
||
.then((res) => {
|
||
if (!res.ok) throw new Error('Failed to fetch ratings JSON');
|
||
return res.json();
|
||
})
|
||
.then((data) => setMasterCareerRatings(data))
|
||
.catch((err) => console.error('Error fetching career ratings:', err));
|
||
}, []);
|
||
|
||
const priorities = useMemo(() => {
|
||
return userProfile?.career_priorities ? JSON.parse(userProfile.career_priorities) : {};
|
||
}, [userProfile]);
|
||
|
||
const priorityKeys = ['interests', 'meaning', 'stability', 'growth', 'balance', 'recognition'];
|
||
|
||
const getCareerRatingsBySocCode = (socCode) => {
|
||
return masterCareerRatings.find((c) => c.soc_code === socCode)?.ratings || {};
|
||
};
|
||
|
||
// ===================== Save comparison list to backend =====================
|
||
const saveCareerListToBackend = async (newCareerList) => {
|
||
try {
|
||
const token = localStorage.getItem('token');
|
||
await axios.post(
|
||
`${apiUrl}/user-profile`,
|
||
{
|
||
firstName: userProfile?.firstname,
|
||
lastName: userProfile?.lastname,
|
||
email: userProfile?.email,
|
||
zipCode: userProfile?.zipcode,
|
||
state: userProfile?.state,
|
||
area: userProfile?.area,
|
||
careerSituation: userProfile?.career_situation,
|
||
interest_inventory_answers: userProfile?.interest_inventory_answers,
|
||
career_priorities: userProfile?.career_priorities,
|
||
career_list: JSON.stringify(newCareerList),
|
||
},
|
||
{
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
}
|
||
);
|
||
} catch (err) {
|
||
console.error('Error saving career_list:', err);
|
||
}
|
||
};
|
||
|
||
// ===================== Add/Remove from comparison =====================
|
||
const addCareerToList = (career) => {
|
||
const masterRatings = getCareerRatingsBySocCode(career.code);
|
||
|
||
const fitRatingMap = {
|
||
Best: 5,
|
||
Great: 4,
|
||
Good: 3,
|
||
};
|
||
|
||
const interestsRating =
|
||
priorities.interests === "I’m not sure yet"
|
||
? parseInt(prompt("Rate your interest in this career (1-5):", "3"), 10)
|
||
: fitRatingMap[career.fit] || masterRatings.interests || 3;
|
||
|
||
const meaningRating = parseInt(
|
||
prompt("How important do you feel this job is to society or the world? (1-5):", "3"),
|
||
10
|
||
);
|
||
|
||
const stabilityRating =
|
||
career.ratings && career.ratings.stability !== undefined
|
||
? career.ratings.stability
|
||
: masterRatings.stability || 3;
|
||
|
||
const growthRating = masterRatings.growth || 3;
|
||
const balanceRating = masterRatings.balance || 3;
|
||
const recognitionRating = masterRatings.recognition || 3;
|
||
|
||
const careerWithUserRatings = {
|
||
...career,
|
||
ratings: {
|
||
interests: interestsRating,
|
||
meaning: meaningRating,
|
||
stability: stabilityRating,
|
||
growth: growthRating,
|
||
balance: balanceRating,
|
||
recognition: recognitionRating,
|
||
},
|
||
};
|
||
|
||
setCareerList((prevList) => {
|
||
if (prevList.some((c) => c.code === career.code)) {
|
||
alert("Career already in comparison list.");
|
||
return prevList;
|
||
}
|
||
const newList = [...prevList, careerWithUserRatings];
|
||
saveCareerListToBackend(newList);
|
||
return newList;
|
||
});
|
||
};
|
||
|
||
const removeCareerFromList = (careerCode) => {
|
||
setCareerList((prevList) => {
|
||
const newList = prevList.filter((c) => c.code !== careerCode);
|
||
saveCareerListToBackend(newList);
|
||
return newList;
|
||
});
|
||
};
|
||
|
||
// ===================== Let user pick a career from comparison => "Select for Education" =====================
|
||
const handleSelectForEducation = (career) => {
|
||
// 1) Confirm
|
||
const confirmed = window.confirm(
|
||
`Are you sure you want to move on to Educational Programs for ${career.title}?`
|
||
);
|
||
if (!confirmed) return;
|
||
|
||
// 2) Look up CIP codes from masterCareerRatings by SOC code
|
||
const matching = masterCareerRatings.find((r) => r.soc_code === career.code);
|
||
if (!matching) {
|
||
alert(`No CIP codes found for ${career.title}.`);
|
||
return;
|
||
}
|
||
|
||
// 3) Clean CIP codes
|
||
const rawCips = matching.cip_codes || [];
|
||
const cleanedCips = cleanCipCodes(rawCips); // from top-level function
|
||
console.log('cleanedCips =>', cleanedCips);
|
||
|
||
// 4) Navigate
|
||
navigate('/educational-programs', {
|
||
state: {
|
||
socCode: career.code,
|
||
cipCodes: cleanedCips,
|
||
careerTitle: career.title,
|
||
userZip: userZipcode,
|
||
userState: userState,
|
||
},
|
||
});
|
||
};
|
||
|
||
|
||
// ===================== Filter logic for jobZone, Fit =====================
|
||
const filteredCareers = useMemo(() => {
|
||
return careersWithJobZone.filter((career) => {
|
||
const jobZoneMatches = selectedJobZone
|
||
? career.job_zone !== null &&
|
||
career.job_zone !== undefined &&
|
||
Number(career.job_zone) === Number(selectedJobZone)
|
||
: true;
|
||
|
||
const fitMatches = selectedFit ? career.fit === selectedFit : true;
|
||
return jobZoneMatches && fitMatches;
|
||
});
|
||
}, [careersWithJobZone, selectedJobZone, selectedFit]);
|
||
|
||
// Weighted “match score” logic. (unchanged)
|
||
const priorityWeight = (priority, response) => {
|
||
const weightMap = {
|
||
interests: {
|
||
'I know my interests (completed inventory)': 5,
|
||
'I’m not sure yet': 1,
|
||
},
|
||
meaning: {
|
||
'Yes, very important': 5,
|
||
'Somewhat important': 3,
|
||
'Not as important': 1,
|
||
},
|
||
stability: {
|
||
'Very important': 5,
|
||
'Somewhat important': 3,
|
||
'Not as important': 1,
|
||
},
|
||
growth: {
|
||
'Yes, very important': 5,
|
||
'Somewhat important': 3,
|
||
'Not as important': 1,
|
||
},
|
||
balance: {
|
||
'Yes, very important': 5,
|
||
'Somewhat important': 3,
|
||
'Not as important': 1,
|
||
},
|
||
recognition: {
|
||
'Very important': 5,
|
||
'Somewhat important': 3,
|
||
'Not as important': 1,
|
||
},
|
||
};
|
||
return weightMap[priority][response] || 1;
|
||
};
|
||
|
||
const renderLoadingOverlay = () => {
|
||
if (!loading) return null;
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
|
||
<div className="rounded bg-white p-6 shadow-lg">
|
||
<div className="mb-2 w-full max-w-md rounded bg-gray-200">
|
||
<div
|
||
className="h-2 rounded bg-blue-500 transition-all"
|
||
style={{ width: `${progress}%` }}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-center text-sm text-gray-600">
|
||
{progress}% — Loading Career Suggestions...
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="career-explorer-container bg-white p-6 rounded shadow">
|
||
{renderLoadingOverlay()}
|
||
{showModal && (
|
||
<CareerPrioritiesModal
|
||
userProfile={userProfile}
|
||
onClose={() => setShowModal(false)}
|
||
/>
|
||
)}
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-semibold">
|
||
Explore Careers - use the tools below to find your perfect career
|
||
</h2>
|
||
<CareerSearch
|
||
onCareerSelected={(careerObj) => {
|
||
console.log('[Dashboard] onCareerSelected =>', careerObj);
|
||
setPendingCareerForModal(careerObj);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<h2 className="text-xl font-semibold mb-4">Career Comparison</h2>
|
||
{careerList.length ? (
|
||
<table className="w-full mb-4">
|
||
<thead>
|
||
<tr>
|
||
<th className="border p-2">Career</th>
|
||
{priorityKeys.map((priority) => (
|
||
<th key={priority} className="border p-2 capitalize">
|
||
{priority}
|
||
</th>
|
||
))}
|
||
<th className="border p-2">Match</th>
|
||
<th className="border p-2">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{careerList.map((career) => {
|
||
const ratings = career.ratings || {};
|
||
const interestsRating = ratings.interests || 3;
|
||
const meaningRating = ratings.meaning || 3;
|
||
const stabilityRating = ratings.stability || 3;
|
||
const growthRating = ratings.growth || 3;
|
||
const balanceRating = ratings.balance || 3;
|
||
const recognitionRating = ratings.recognition || 3;
|
||
|
||
const userInterestsWeight = priorityWeight('interests', priorities.interests || 'I’m not sure yet');
|
||
const userMeaningWeight = priorityWeight('meaning', priorities.meaning);
|
||
const userStabilityWeight = priorityWeight('stability', priorities.stability);
|
||
const userGrowthWeight = priorityWeight('growth', priorities.growth);
|
||
const userBalanceWeight = priorityWeight('balance', priorities.balance);
|
||
const userRecognitionWeight = priorityWeight('recognition', priorities.recognition);
|
||
|
||
const totalWeight =
|
||
userInterestsWeight +
|
||
userMeaningWeight +
|
||
userStabilityWeight +
|
||
userGrowthWeight +
|
||
userBalanceWeight +
|
||
userRecognitionWeight;
|
||
|
||
const weightedScore =
|
||
interestsRating * userInterestsWeight +
|
||
meaningRating * userMeaningWeight +
|
||
stabilityRating * userStabilityWeight +
|
||
growthRating * userGrowthWeight +
|
||
balanceRating * userBalanceWeight +
|
||
recognitionRating * userRecognitionWeight;
|
||
|
||
const matchScore = (weightedScore / (totalWeight * 5)) * 100;
|
||
|
||
return (
|
||
<tr key={career.code}>
|
||
<td className="border p-2">{career.title}</td>
|
||
<td className="border p-2">{interestsRating}</td>
|
||
<td className="border p-2">{meaningRating}</td>
|
||
<td className="border p-2">{stabilityRating}</td>
|
||
<td className="border p-2">{growthRating}</td>
|
||
<td className="border p-2">{balanceRating}</td>
|
||
<td className="border p-2">{recognitionRating}</td>
|
||
<td className="border p-2 font-bold">{matchScore.toFixed(1)}%</td>
|
||
<td className="border p-2 space-x-2">
|
||
<Button
|
||
className="bg-red-600 text-black-500"
|
||
onClick={() => removeCareerFromList(career.code)}
|
||
>
|
||
Remove
|
||
</Button>
|
||
|
||
{/* New Button -> "Select for Education" */}
|
||
<Button
|
||
className="bg-green-600 text-white"
|
||
onClick={() => handleSelectForEducation(career)}
|
||
>
|
||
Search for Education
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
) : (
|
||
<p>No careers added to comparison.</p>
|
||
)}
|
||
|
||
<div className="flex gap-4 mb-4">
|
||
<select
|
||
className="border px-3 py-1 rounded"
|
||
value={selectedJobZone}
|
||
onChange={(e) => setSelectedJobZone(e.target.value)}
|
||
>
|
||
<option value="">All Preparation Levels</option>
|
||
{Object.entries(jobZoneLabels).map(([zone, label]) => (
|
||
<option key={zone} value={zone}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
<select
|
||
className="border px-3 py-1 rounded"
|
||
value={selectedFit}
|
||
onChange={(e) => setSelectedFit(e.target.value)}
|
||
>
|
||
<option value="">All Fit Levels</option>
|
||
{Object.entries(fitLabels).map(([key, label]) => (
|
||
<option key={key} value={key}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<CareerSuggestions
|
||
careerSuggestions={filteredCareers}
|
||
onCareerClick={(career) => {
|
||
setSelectedCareer(career);
|
||
handleCareerClick(career);
|
||
}}
|
||
setLoading={setLoading}
|
||
setProgress={setProgress}
|
||
userState={userState}
|
||
areaTitle={areaTitle}
|
||
/>
|
||
|
||
{selectedCareer && (
|
||
<CareerModal
|
||
career={selectedCareer}
|
||
careerDetails={careerDetails}
|
||
closeModal={() => {
|
||
setSelectedCareer(null);
|
||
setCareerDetails(null);
|
||
}}
|
||
addCareerToList={addCareerToList}
|
||
/>
|
||
)}
|
||
|
||
<div className="mt-6 text-xs text-gray-500 border-t pt-2">
|
||
Career results and details provided by
|
||
<a href="https://www.onetcenter.org" target="_blank" rel="noopener noreferrer">
|
||
{' '}
|
||
O*Net
|
||
</a>
|
||
, in partnership with
|
||
<a href="https://www.bls.gov" target="_blank" rel="noopener noreferrer">
|
||
{' '}
|
||
Bureau of Labor Statistics
|
||
</a>
|
||
and
|
||
<a href="https://nces.ed.gov" target="_blank" rel="noopener noreferrer">
|
||
{' '}
|
||
NCES
|
||
</a>
|
||
.
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CareerExplorer;
|