340 lines
12 KiB
JavaScript
340 lines
12 KiB
JavaScript
// Dashboard.js
|
|
import axios from 'axios';
|
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
|
|
import { CareerSuggestions } from './CareerSuggestions.js';
|
|
import PopoutPanel from './PopoutPanel.js';
|
|
import './PopoutPanel.css';
|
|
import Chatbot from "./Chatbot.js";
|
|
import { Bar } from 'react-chartjs-2';
|
|
import { fetchSchools } from '../utils/apiUtils.js';
|
|
import './Dashboard.css';
|
|
|
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
|
|
|
|
function Dashboard() {
|
|
const location = useLocation()
|
|
const navigate = useNavigate();
|
|
|
|
const [careerSuggestions, setCareerSuggestions] = useState([]);
|
|
const [careerDetails, setCareerDetails] = useState(null);
|
|
const [riaSecScores, setRiaSecScores] = useState([]);
|
|
const [selectedCareer, setSelectedCareer] = useState(null);
|
|
const [schools, setSchools] = useState([]);
|
|
const [salaryData, setSalaryData] = useState([]);
|
|
const [economicProjections, setEconomicProjections] = useState(null);
|
|
const [tuitionData, setTuitionData] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const [userState, setUserState] = useState(null);
|
|
const [areaTitle, setAreaTitle] = useState(null);
|
|
const [userZipcode, setUserZipcode] = useState(null);
|
|
const [riaSecDescriptions, setRiaSecDescriptions] = useState([]);
|
|
const [selectedJobZone, setSelectedJobZone] = useState('');
|
|
const [careersWithJobZone, setCareersWithJobZone] = useState([]); // Store careers with job zone info
|
|
|
|
|
|
|
|
const jobZoneLabels = {
|
|
'1': 'Little or No Preparation',
|
|
'2': 'Some Preparation Needed',
|
|
'3': 'Medium Preparation Needed',
|
|
'4': 'Considerable Preparation Needed',
|
|
'5': 'Extensive Preparation Needed'
|
|
};
|
|
|
|
// Dynamic API URL
|
|
const apiUrl = process.env.REACT_APP_API_URL || '';
|
|
|
|
// Fetch job zone mappings after career suggestions are loaded
|
|
useEffect(() => {
|
|
const fetchJobZones = async () => {
|
|
if (careerSuggestions.length === 0) return;
|
|
|
|
const socCodes = careerSuggestions.map((career) => career.code);
|
|
try {
|
|
const response = await axios.post(`${apiUrl}/job-zones`, { socCodes });
|
|
const jobZoneData = response.data;
|
|
|
|
const updatedCareers = careerSuggestions.map((career) => ({
|
|
...career,
|
|
job_zone: jobZoneData[career.code.slice(0, -3)]?.job_zone || null, // Extract correct value
|
|
}));
|
|
|
|
setCareersWithJobZone(updatedCareers); // Update state
|
|
} catch (error) {
|
|
console.error('Error fetching job zone information:', error);
|
|
}
|
|
};
|
|
|
|
fetchJobZones();
|
|
}, [careerSuggestions, apiUrl]);
|
|
|
|
const filteredCareers = selectedJobZone
|
|
? careersWithJobZone.filter(career => {
|
|
|
|
return (
|
|
career.job_zone !== null &&
|
|
career.job_zone !== undefined &&
|
|
typeof career.job_zone === 'number' &&
|
|
Number(career.job_zone) === Number(selectedJobZone)
|
|
);
|
|
})
|
|
: careersWithJobZone;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
let descriptions = []; // Declare outside for scope accessibility
|
|
if (location.state) {
|
|
const { careerSuggestions: suggestions, riaSecScores: scores } = location.state || {};
|
|
descriptions = scores.map((score) => score.description || "No description available.");
|
|
setCareerSuggestions(suggestions || []);
|
|
setRiaSecScores(scores || []);
|
|
setRiaSecDescriptions(descriptions); // Set descriptions
|
|
} else {
|
|
console.warn('No data found, redirecting to Interest Inventory');
|
|
navigate('/interest-inventory');
|
|
}
|
|
}, [location.state, navigate]);
|
|
|
|
useEffect(() => {
|
|
const fetchUserProfile = async () => {
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
const profileResponse = await fetch(`${apiUrl}/user-profile`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
if (profileResponse.ok) {
|
|
const profileData = await profileResponse.json();
|
|
console.log('Fetched User Profile:', profileData);
|
|
|
|
const { state, area, zipcode } = profileData; // Use 'area' instead of 'AREA_TITLE'
|
|
setUserState(state);
|
|
setAreaTitle(area && area.trim() ? area.trim() : ''); // Ensure 'area' is set correctly
|
|
setUserZipcode(zipcode); // Set 'zipcode' in the state
|
|
console.log('Profile Data Set:', { state, area, zipcode });
|
|
} else {
|
|
console.error('Failed to fetch user profile');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching user profile:', error);
|
|
}
|
|
};
|
|
|
|
fetchUserProfile();
|
|
}, [apiUrl]);
|
|
|
|
const handleCareerClick = useCallback(
|
|
async (career) => {
|
|
const socCode = career.code; // Extract SOC code from career object
|
|
setSelectedCareer(career); // Set career first to trigger loading panel
|
|
setLoading(true); // Enable loading state only when career is clicked
|
|
setError(null); // Clear previous errors
|
|
setCareerDetails({}); // Reset career details to avoid undefined errors
|
|
setSchools([]); // Reset schools
|
|
setSalaryData([]); // Reset salary data
|
|
setEconomicProjections({}); // Reset economic projections
|
|
setTuitionData([]); // Reset tuition data
|
|
|
|
|
|
if (!socCode) {
|
|
console.error('SOC Code is missing');
|
|
setError('SOC Code is missing');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Step 1: Fetch CIP Code
|
|
const cipResponse = await fetch(`${apiUrl}/cip/${socCode}`);
|
|
if (!cipResponse.ok) throw new Error('Failed to fetch CIP Code');
|
|
const { cipCode } = await cipResponse.json();
|
|
const cleanedCipCode = cipCode.replace('.', '').slice(0, 4);
|
|
|
|
// Step 2: Fetch Job Description and Tasks
|
|
const jobDetailsResponse = await fetch(`${apiUrl}/onet/career-description/${socCode}`);
|
|
if (!jobDetailsResponse.ok) throw new Error('Failed to fetch job description');
|
|
const { description, tasks } = await jobDetailsResponse.json();
|
|
|
|
// Step 3: Fetch Data in Parallel for other career details
|
|
const [filteredSchools, economicResponse, tuitionResponse, salaryResponse] = await Promise.all([
|
|
fetchSchools(cleanedCipCode, userState),
|
|
axios.get(`${apiUrl}/projections/${socCode.split('.')[0]}`),
|
|
axios.get(`${apiUrl}/tuition`, { params: { cipCode: cleanedCipCode, state: userState }}),
|
|
axios.get(`${apiUrl}/salary`, { params: { socCode: socCode.split('.')[0], area: areaTitle }}),
|
|
]);
|
|
|
|
// Handle Distance Calculation
|
|
const schoolsWithDistance = await Promise.all(filteredSchools.map(async (school) => {
|
|
const schoolAddress = `${school.Address}, ${school.City}, ${school.State} ${school.ZIP}`;
|
|
const response = await axios.post(`${apiUrl}/maps/distance`, {
|
|
userZipcode,
|
|
destinations: schoolAddress,
|
|
});
|
|
const { distance, duration } = response.data;
|
|
return { ...school, distance, duration };
|
|
}));
|
|
|
|
// Process Salary Data
|
|
const salaryDataPoints = [
|
|
{ percentile: '10th Percentile', value: salaryResponse.data.A_PCT10 || 0 },
|
|
{ percentile: '25th Percentile', value: salaryResponse.data.A_PCT25 || 0 },
|
|
{ percentile: 'Median', value: salaryResponse.data.A_MEDIAN || 0 },
|
|
{ percentile: '75th Percentile', value: salaryResponse.data.A_PCT75 || 0 },
|
|
{ percentile: '90th Percentile', value: salaryResponse.data.A_PCT90 || 0 },
|
|
];
|
|
|
|
// Consolidate Career Details with Job Description and Tasks
|
|
setCareerDetails({
|
|
...career,
|
|
jobDescription: description,
|
|
tasks: tasks,
|
|
economicProjections: economicResponse.data,
|
|
salaryData: salaryDataPoints,
|
|
schools: schoolsWithDistance,
|
|
tuitionData: tuitionResponse.data,
|
|
});
|
|
} catch (error) {
|
|
console.error('Error processing career click:', error.message);
|
|
setError('Failed to load data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
},
|
|
[userState, apiUrl, areaTitle, userZipcode]
|
|
);
|
|
|
|
const chartData = {
|
|
labels: riaSecScores.map((score) => score.area),
|
|
datasets: [
|
|
{
|
|
label: 'RIASEC Scores',
|
|
data: riaSecScores.map((score) => score.score),
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className="dashboard">
|
|
<div className="filter-container">
|
|
<label htmlFor="preparation-filter">Filter by Preparation Level:</label>
|
|
<select
|
|
id="preparation-filter"
|
|
value={selectedJobZone}
|
|
onChange={(e) => setSelectedJobZone(Number(e.target.value))}
|
|
>
|
|
<option value="">All Preparation Levels</option>
|
|
{Object.entries(jobZoneLabels).map(([zone, label]) => (
|
|
<option key={zone} value={zone}>{label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="dashboard-content">
|
|
<div className="career-suggestions-container">
|
|
<CareerSuggestions careerSuggestions={filteredCareers} onCareerClick={handleCareerClick} />
|
|
</div>
|
|
|
|
<div className="riasec-container">
|
|
<div className="riasec-scores">
|
|
<h2>RIASEC Scores</h2>
|
|
<Bar data={chartData} />
|
|
</div>
|
|
<div className="riasec-descriptions">
|
|
<h3>RIASEC Personality Descriptions</h3>
|
|
{riaSecDescriptions.length > 0 ? (
|
|
<ul>
|
|
{riaSecDescriptions.map((desc, index) => (
|
|
<li key={index}>
|
|
<strong>{riaSecScores[index]?.area}:</strong> {desc}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>Loading descriptions...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{selectedCareer && (
|
|
<PopoutPanel
|
|
data={careerDetails}
|
|
schools={schools}
|
|
salaryData={salaryData}
|
|
economicProjections={economicProjections}
|
|
tuitionData={tuitionData}
|
|
closePanel={() => setSelectedCareer(null)}
|
|
loading={loading}
|
|
error={error}
|
|
userState={userState}
|
|
/>
|
|
)}
|
|
|
|
{/* Pass context to Chatbot */}
|
|
<div className="chatbot-widget">
|
|
<Chatbot
|
|
context={{
|
|
careerSuggestions,
|
|
riaSecScores,
|
|
selectedCareer,
|
|
schools,
|
|
salaryData,
|
|
economicProjections,
|
|
tuitionData,
|
|
userState,
|
|
areaTitle,
|
|
userZipcode,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
|
|
{/* Acknowledgment Section */}
|
|
<div
|
|
className="data-source-acknowledgment"
|
|
style={{
|
|
marginTop: '20px',
|
|
padding: '10px',
|
|
borderTop: '1px solid #ccc',
|
|
fontSize: '12px',
|
|
color: '#666',
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
|
|
<div className="chatbot-widget">
|
|
<Chatbot
|
|
context={{
|
|
careerSuggestions,
|
|
riaSecScores,
|
|
selectedCareer,
|
|
schools,
|
|
salaryData,
|
|
economicProjections,
|
|
tuitionData,
|
|
userState,
|
|
areaTitle,
|
|
userZipcode,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<p>
|
|
Career results and RIASEC scores are provided by
|
|
<a href="https://www.onetcenter.org" target="_blank" rel="noopener noreferrer"> O*Net</a>, in conjunction with the
|
|
<a href="https://www.bls.gov" target="_blank" rel="noopener noreferrer"> Bureau of Labor Statistics</a>, and the
|
|
<a href="https://nces.ed.gov" target="_blank" rel="noopener noreferrer"> National Center for Education Statistics (NCES)</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard; |