jcoakley/dev1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transposed economic projections table in modal

Browse Source
This commit is contained in:
Josh 2025-05-21 19:01:05 +00:00
parent a053da72e5
commit 8096d505ba
1 changed files with 73 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/CareerModal.js
View File

@ -120,39 +120,88 @@ function CareerModal({ career, careerDetails, closeModal, addCareerToList }) {
{/* Economic Projections */} {/* Economic Projections */}
<div className="md:w-1/2 overflow-x-auto"> <div className="md:w-1/2 overflow-x-auto">
<h3 className="text-lg font-semibold mb-2">Economic Projections:</h3> <h3 className="text-lg font-semibold mb-2">Economic Projections</h3>
<table className="w-full text-left border border-gray-300 rounded"> <table className="w-full text-left border border-gray-300 rounded">
<thead className="bg-gray-100"> <thead className="bg-gray-100">
<tr> <tr>
<th className="px-3 py-2 border-b">Region</th> <th className="px-3 py-2 border-b"></th>
<th className="px-3 py-2 border-b">Current Jobs</th> {/* If we have state data, show a column for it */}
<th className="px-3 py-2 border-b">Jobs in 10 yrs</th> {careerDetails.economicProjections.state && (
<th className="px-3 py-2 border-b">Growth %</th> <th className="px-3 py-2 border-b">
<th className="px-3 py-2 border-b">Annual Openings</th> {careerDetails.economicProjections.state.area}
</th>
)}
{/* If we have national data, show a column for it */}
{careerDetails.economicProjections.national && (
<th className="px-3 py-2 border-b">National</th>
)}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{careerDetails.economicProjections.state && ( {/* Row for Current Jobs */}
<tr> <tr>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.area}</td> <td className="px-3 py-2 border-b font-semibold">Current Jobs</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.base.toLocaleString()}</td> {careerDetails.economicProjections.state && (
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.projection.toLocaleString()}</td> <td className="px-3 py-2 border-b">
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.percentChange}%</td> {careerDetails.economicProjections.state.base.toLocaleString()}
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.annualOpenings.toLocaleString()}</td> </td>
</tr> )}
)} {careerDetails.economicProjections.national && (
{careerDetails.economicProjections.national && ( <td className="px-3 py-2 border-b">
<tr> {careerDetails.economicProjections.national.base.toLocaleString()}
<td className="px-3 py-2 border-b">National</td> </td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.base.toLocaleString()}</td> )}
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.projection.toLocaleString()}</td> </tr>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.percentChange}%</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.annualOpenings.toLocaleString()}</td> {/* Row for Jobs in 10 yrs */}
</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>
{/* Row for Growth % */}
<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>
{/* Row for Annual Openings */}
<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> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>