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 7cce87c8d2
commit 2221354b8c
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 */}
<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">
<thead className="bg-gray-100">
<tr>
<th className="px-3 py-2 border-b">Region</th>
<th className="px-3 py-2 border-b">Current Jobs</th>
<th className="px-3 py-2 border-b">Jobs in 10 yrs</th>
<th className="px-3 py-2 border-b">Growth %</th>
<th className="px-3 py-2 border-b">Annual Openings</th>
<th className="px-3 py-2 border-b"></th>
{/* If we have state data, show a column for it */}
{careerDetails.economicProjections.state && (
<th className="px-3 py-2 border-b">
{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>
</thead>
<tbody>
{careerDetails.economicProjections.state && (
<tr>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.area}</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.base.toLocaleString()}</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.projection.toLocaleString()}</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.percentChange}%</td>
<td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.annualOpenings.toLocaleString()}</td>
</tr>
)}
{careerDetails.economicProjections.national && (
<tr>
<td className="px-3 py-2 border-b">National</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>
<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>
</tr>
)}
{/* Row for Current Jobs */}
<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>
{/* Row for Jobs in 10 yrs */}
<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>
</table>
</div>
</div>
</div>
</div>