Fixed Confirm button on CareerSearch in Explorer

src/components/CareerExplorer.js

@@ -61,7 +61,6 @@ const STATES = [
   { name: 'Wyoming', code: 'WY' },
 ];
 
-// 2) Helper to convert state code => full name
 function getFullStateName(code) {
   const found = STATES.find((s) => s.code === code?.toUpperCase());
   return found ? found.name : '';
@@ -142,7 +141,7 @@ function CareerExplorer({  }) {
         } else {
           // No inventory => no suggestions (or do something else here)
           setCareerSuggestions([]);
-        }
+        }        
 
         // 4) Check if all priorities are answered
         const priorities = profileData.career_priorities
@@ -168,8 +167,7 @@ function CareerExplorer({  }) {
 
   fetchUserProfile();
 }, [apiUrl]);
-  
-  // Load suggestions from Interest Inventory if provided (optional)
+
   useEffect(() => {
     if (location.state?.careerSuggestions) {
       setCareerSuggestions(location.state.careerSuggestions);
@@ -207,13 +205,10 @@ function CareerExplorer({  }) {
     console.log('[handleCareerClick] career =>', career);
     const socCode = career.code;
     setSelectedCareer(career);
-      setLoading(true);
       setError(null);
       setCareerDetails({});
       setSalaryData([]);
       setEconomicProjections({});
-    setError(null);
-    setLoading(true);
 
     // We can set selectedCareer immediately so that our Modal condition is met.
     setSelectedCareer(career);
@@ -221,7 +216,6 @@ function CareerExplorer({  }) {
     if (!socCode) {
       console.error('SOC Code is missing');
       setError('SOC Code is missing');
-      setLoading(false);
       return;
     }
 
@@ -382,7 +376,6 @@ function CareerExplorer({  }) {
   }
 };
 
-  
   const addCareerToList = (career) => {
   const masterRatings = getCareerRatingsBySocCode(career.code);
 
@@ -528,8 +521,12 @@ function CareerExplorer({  }) {
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-xl font-semibold">Explore Careers</h2>
         <CareerSearch
-          onCareerSelected={(careerObj) => handleCareerClick(careerObj)}
-        />
+                onCareerSelected={(careerObj) => {
+                  console.log('[Dashboard] onCareerSelected =>', careerObj);
+                  // Set the "pendingCareerForModal" so our useEffect fires
+                  setPendingCareerForModal(careerObj);
+                }}
+              />
       </div>
 
       <h2 className="text-xl font-semibold mb-4">Career Comparison Matrix</h2>

src/components/CareerModal.js

@@ -3,15 +3,21 @@ import axios from 'axios';
 
 const apiUrl = process.env.REACT_APP_API_URL;
 
-function CareerModal({ career, careerDetails, userState, areaTitle, userZipcode, closeModal, addCareerToList }) {
+function CareerModal({ career, careerDetails, closeModal, addCareerToList }) {
 
   const [error, setError] = useState(null);
 
-  console.log('CareerModal props:', { career, careerDetails, userState, areaTitle, userZipcode });
+  console.log('CareerModal props:', { career, careerDetails});
   
   if (!careerDetails?.salaryData) {
-    return <div>Loading career details...</div>;
-  }
+  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>;
 
   const calculateStabilityRating = (salaryData) => {