Integrated Career Suggestions filtering UI, moved Getting Started steps around

src/components/CareerSuggestions.js

@@ -104,7 +104,6 @@ export function CareerSuggestions({ careerSuggestions = [], userState, areaTitle
 
   return (
     <div>
-      <h2>Career Suggestions</h2>
 
       {loading ? (
         <div className="progress-container">

src/components/Dashboard.js

@@ -137,13 +137,11 @@ const memoizedCareerSuggestions = useMemo(() => filteredCareers, [filteredCareer
 
         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');
         }
@@ -192,7 +190,6 @@ async (career) => {
     try {
       salaryResponse = await axios.get(`${apiUrl}/salary`, { params: { socCode: socCode.split('.')[0], area: areaTitle }});
     } catch (error) {
-      console.warn(`⚠️ Salary data not available for ${career.title} (${socCode})`);
       salaryResponse = { data: {} }; // Prevents breaking the whole update
     }
 
@@ -201,7 +198,6 @@ async (career) => {
     try {
       economicResponse = await axios.get(`${apiUrl}/projections/${socCode.split('.')[0]}`);
     } catch (error) {
-      console.warn(`⚠️ Economic projections not available for ${career.title} (${socCode})`);
       economicResponse = { data: {} }; // Prevents breaking the whole update
 }
 
@@ -210,7 +206,7 @@ async (career) => {
     try {
       tuitionResponse = await axios.get(`${apiUrl}/tuition`, { params: { cipCode: cleanedCipCode, state: userState }});
     } catch (error) {
-      console.warn(`⚠️ Tuition data not available for ${career.title} (${socCode})`);
+
       tuitionResponse = { data: {} };
     }
 
@@ -228,7 +224,6 @@ async (career) => {
         const { distance, duration } = response.data;
         return { ...school, distance, duration };
       } catch (error) {
-        console.warn(`⚠️ Distance calculation failed for ${school.INSTNM}`);
         return { ...school, distance: 'N/A', duration: 'N/A' };
       }
     }));
@@ -264,8 +259,6 @@ async (career) => {
 [userState, apiUrl, areaTitle, userZipcode]
 );
 
-  console.log('Updated careerDetails:', careerDetails);
-
   const chartData = {
     labels: riaSecScores.map((score) => score.area),
     datasets: [
@@ -281,40 +274,50 @@ async (career) => {
 
   return (
     <div className="dashboard">
-          <div className="filter-container">
+        <div className="dashboard-content">
-          <div className="filter-group">
+          <div className="career-suggestions-container">
-            <label htmlFor="preparation-filter">Filter by Preparation Level:</label>
+              <div
-            <select
+                className="career-suggestions-header"
-              id="preparation-filter"
+                style={{
-              value={selectedJobZone}
+                  display: 'flex',
-              onChange={(e) => setSelectedJobZone(Number(e.target.value))}
+                  alignItems: 'center',
-            >
+                  marginBottom: '15px',
-              <option value="">All Preparation Levels</option>
+                  justifyContent: 'center',
-              {Object.entries(jobZoneLabels).map(([zone, label]) => (
+                  gap: '15px'
-                <option key={zone} value={zone}>{label}</option>
+                }}
-              ))}
+              >
-            </select>
+                <label>
-          </div>
+                  Preparation Level:
+                  <select
+                    value={selectedJobZone}
+                    onChange={(e) => setSelectedJobZone(Number(e.target.value))}
+                    style={{ marginLeft: '5px', padding: '2px', width: '200px' }}
+                  >
+                    <option value="">All Preparation Levels</option>
+                    {Object.entries(jobZoneLabels).map(([zone, label]) => (
+                      <option key={zone} value={zone}>{label}</option>
+                    ))}
+                  </select>
+                </label>
 
-          <div className="filter-group">
+                <label>
-            <label htmlFor="fit-filter">Filter by Fit:</label>
+                  Fit:
-            <select
+                  <select
-              id="fit-filter"
+                    value={selectedFit}
-              value={selectedFit}
+                    onChange={(e) => setSelectedFit(e.target.value)}
-              onChange={(e) => setSelectedFit(e.target.value)}
+                    style={{ marginLeft: '5px', padding: '2px', width: '150px' }}
-            >
+                  >
-              <option value="">All Fit Levels</option>
+                    <option value="">All Fit Levels</option>
-              {Object.entries(fitLabels).map(([key, label]) => (
+                    {Object.entries(fitLabels).map(([key, label]) => (
-                <option key={key} value={key}>{label}</option>
+                      <option key={key} value={key}>{label}</option>
-              ))}
+                    ))}
-            </select>
+                  </select>
-          </div>
+                </label>
-        </div>
+              </div>
-
+              <CareerSuggestions
-
+                careerSuggestions={memoizedCareerSuggestions}
-          <div className="dashboard-content">
+                onCareerClick={handleCareerClick}
-            <div className="career-suggestions-container">
+              />
-            <CareerSuggestions careerSuggestions={memoizedCareerSuggestions} onCareerClick={handleCareerClick} />
             </div>
 
             <div className="riasec-container">

src/components/GettingStarted.js

@@ -15,24 +15,25 @@ function GettingStarted() {
       <p>Let’s start by getting to know you better. Completing the steps below will help us tailor career recommendations based on your interests.</p>
       
       <div className="steps">
-        <div className="step">
-          <span className="step-icon">🎯</span>
-          <div>
-            <h2>Step 1: Complete the O*Net Interest Inventory</h2>
-            <p>Discover your career interests by taking the O*Net inventory. This will help us suggest personalized career paths for you.</p>
-            {/* Start Inventory button */}
-            <button className="button-link" onClick={handleStartInventory}>Start Inventory</button>
-          </div>
-        </div>
         
         <div className="step">
           <span className="step-icon">📄</span>
           <div>
-            <h2>Step 2: Set Up Your Profile</h2>
+            <h2>Step 1: Set Up Your Profile</h2>
             <p>Add details like your skills, education, and experience to further personalize your recommendations.</p>
             <button className="button-link" onClick={() => navigate('/profile')}>Go to Profile</button>
           </div>
         </div>
+
+        <div className="step">
+          <span className="step-icon">🎯</span>
+          <div>
+            <h2>Step 2: Complete the O*Net Interest Inventory</h2>
+            <p>Discover your career interests by taking the O*Net inventory. This will help us suggest personalized career paths for you.</p>
+            {/* Start Inventory button */}
+            <button className="button-link" onClick={handleStartInventory}>Start Inventory</button>
+          </div>
+        </div>
       </div>
     </div>
   );