248 lines
9.6 KiB
JavaScript
248 lines
9.6 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import axios from 'axios';
|
||
|
||
const apiUrl = process.env.REACT_APP_API_URL;
|
||
|
||
|
||
function CareerModal({ career, careerDetails, closeModal, addCareerToList }) {
|
||
const [error, setError] = useState(null);
|
||
const [loadingRisk, setLoadingRisk] = useState(false);
|
||
const aiRisk = careerDetails?.aiRisk || null;
|
||
|
||
|
||
console.log('CareerModal props:', { career, careerDetails, aiRisk });
|
||
|
||
// Handle your normal careerDetails loading logic
|
||
if (careerDetails?.error) {
|
||
return (
|
||
<div className="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50">
|
||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||
<p className="text-lg text-gray-700 mb-4">{careerDetails.error}</p>
|
||
<button onClick={closeModal} className="bg-red-500 text-white p-2 rounded">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!careerDetails?.salaryData) {
|
||
return (
|
||
<div className="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50">
|
||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||
<p className="text-lg text-gray-700">Loading career details...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) return <div>{error}</div>;
|
||
|
||
// Helper for "stability" rating
|
||
const calculateStabilityRating = (salaryData) => {
|
||
const medianSalaryObj = salaryData.find((s) => s.percentile === 'Median');
|
||
const medianSalary =
|
||
medianSalaryObj?.regionalSalary || medianSalaryObj?.nationalSalary || 0;
|
||
|
||
if (medianSalary >= 90000) return 5;
|
||
if (medianSalary >= 70000) return 4;
|
||
if (medianSalary >= 50000) return 3;
|
||
if (medianSalary >= 30000) return 2;
|
||
return 1;
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center overflow-auto z-50">
|
||
<div className="bg-white rounded-lg shadow-lg w-full max-w-5xl p-6 m-4 max-h-[90vh] overflow-y-auto">
|
||
|
||
{/* Title row */}
|
||
<div className="flex justify-between items-center mb-4 pb-2 border-b">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-blue-600">
|
||
{careerDetails.title}
|
||
</h2>
|
||
|
||
{/* AI RISK SECTION */}
|
||
{loadingRisk ? (
|
||
<p className="text-sm text-gray-500 mt-1">Loading AI risk...</p>
|
||
) : aiRisk?.riskLevel && aiRisk?.reasoning ? (
|
||
<div className="text-sm text-gray-500 mt-1">
|
||
<strong>AI Risk Level:</strong> {aiRisk.riskLevel}
|
||
<br />
|
||
<span>{aiRisk.reasoning}</span>
|
||
</div>
|
||
) : (
|
||
<p className="text-sm text-gray-500 mt-1">
|
||
No AI risk data available
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Buttons */}
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => {
|
||
const stabilityRating = calculateStabilityRating(
|
||
careerDetails.salaryData
|
||
);
|
||
addCareerToList({
|
||
...careerDetails,
|
||
ratings: {
|
||
stability: stabilityRating,
|
||
},
|
||
});
|
||
closeModal();
|
||
}}
|
||
className="text-white bg-green-500 hover:bg-green-600 rounded px-3 py-1"
|
||
>
|
||
Add to Comparison
|
||
</button>
|
||
|
||
<button
|
||
onClick={closeModal}
|
||
className="text-white bg-red-500 hover:bg-red-600 rounded px-3 py-1"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Job Description */}
|
||
<div className="mb-4">
|
||
<h3 className="text-lg font-semibold mb-1">Job Description:</h3>
|
||
<p className="text-gray-700">{careerDetails.jobDescription}</p>
|
||
</div>
|
||
|
||
{/* Tasks */}
|
||
<div className="mb-4 border-t pt-3">
|
||
<h3 className="text-lg font-semibold mb-2">Tasks:</h3>
|
||
<ul className="list-disc pl-5 space-y-1">
|
||
{careerDetails.tasks.map((task, i) => (
|
||
<li key={i}>{task}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Salary & Projections side-by-side */}
|
||
<div className="flex flex-col md:flex-row gap-4 border-t pt-3">
|
||
{/* Salary Data */}
|
||
<div className="md:w-1/2 overflow-x-auto">
|
||
<h3 className="text-lg font-semibold mb-2">Salary Data:</h3>
|
||
<table className="w-full text-left border border-gray-300 rounded">
|
||
<thead className="bg-gray-100">
|
||
<tr>
|
||
<th className="px-3 py-2 border-b">Percentile</th>
|
||
<th className="px-3 py-2 border-b">Regional Salary</th>
|
||
<th className="px-3 py-2 border-b">National Salary</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{careerDetails.salaryData.map((s, i) => (
|
||
<tr key={i}>
|
||
<td className="px-3 py-2 border-b">{s.percentile}</td>
|
||
<td className="px-3 py-2 border-b">
|
||
${s.regionalSalary.toLocaleString()}
|
||
</td>
|
||
<td className="px-3 py-2 border-b">
|
||
${s.nationalSalary.toLocaleString()}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Economic Projections */}
|
||
<div className="md:w-1/2 overflow-x-auto">
|
||
<h3 className="text-lg font-semibold mb-2">Economic Projections</h3>
|
||
<table className="w-full text-left border border-gray-300 rounded">
|
||
<thead className="bg-gray-100">
|
||
<tr>
|
||
<th className="px-3 py-2 border-b"></th>
|
||
{careerDetails.economicProjections.state && (
|
||
<th className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.state.area}
|
||
</th>
|
||
)}
|
||
{careerDetails.economicProjections.national && (
|
||
<th className="px-3 py-2 border-b">National</th>
|
||
)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td className="px-3 py-2 border-b font-semibold">Current Jobs</td>
|
||
{careerDetails.economicProjections.state && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.state.base.toLocaleString()}
|
||
</td>
|
||
)}
|
||
{careerDetails.economicProjections.national && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.national.base.toLocaleString()}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
<tr>
|
||
<td className="px-3 py-2 border-b font-semibold">Jobs in 10 yrs</td>
|
||
{careerDetails.economicProjections.state && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.state.projection.toLocaleString()}
|
||
</td>
|
||
)}
|
||
{careerDetails.economicProjections.national && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.national.projection.toLocaleString()}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
<tr>
|
||
<td className="px-3 py-2 border-b font-semibold">Growth %</td>
|
||
{careerDetails.economicProjections.state && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.state.percentChange}%
|
||
</td>
|
||
)}
|
||
{careerDetails.economicProjections.national && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.national.percentChange}%
|
||
</td>
|
||
)}
|
||
</tr>
|
||
<tr>
|
||
<td className="px-3 py-2 border-b font-semibold">Annual Openings</td>
|
||
{careerDetails.economicProjections.state && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.state.annualOpenings.toLocaleString()}
|
||
</td>
|
||
)}
|
||
{careerDetails.economicProjections.national && (
|
||
<td className="px-3 py-2 border-b">
|
||
{careerDetails.economicProjections.national.annualOpenings.toLocaleString()}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
{/* Conditional disclaimer when AI risk is Moderate or High */}
|
||
{(aiRisk.riskLevel === 'Moderate' || aiRisk.riskLevel === 'High') && (
|
||
<p className="text-sm text-red-600 mt-2">
|
||
Note: These 10-year projections may change if AI-driven
|
||
tools significantly affect {careerDetails.title} tasks.
|
||
With a <strong>{aiRisk.riskLevel.toLowerCase()}</strong> AI risk,
|
||
it’s possible that some tasks or responsibilities could be automated
|
||
over time.
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CareerModal;
|