Attempted to implement sorting/filtering for popoutpanel. Reverted all changes

src/components/PopoutPanel.css

@@ -100,6 +100,42 @@
   color: #666;
 }
 
+/* 🔹 Filter Section Styling */
+.filter-section {
+  background: #f8f8f8;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+
+.filter-section h3 {
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.filter-section label {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.filter-section input {
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.filter-section select {
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
 /* Schools section: Grid layout with clear separation */
 .schools-offering {
   display: grid;

src/components/PopoutPanel.js

@@ -15,18 +15,40 @@ function PopoutPanel({
   const [isCalculated, setIsCalculated] = useState(false);
   const [results, setResults] = useState([]); // Store loan repayment calculation results
   const [loadingCalculation, setLoadingCalculation] = useState(false);
+  const [persistedROI, setPersistedROI] = useState({});
+
+const {
+  jobDescription = null,
+  tasks = null,
+  title = 'Career Details',
+  economicProjections = {},
+  salaryData = [],
+  schools = [],  
+} = data || {};  
+
 
-// ✅ Reset `results` when a new career is selected
 useEffect(() => {
-  console.log(`Career changed to: ${data?.title}, clearing previous loan results.`);
+  setResults([]);
-  setResults([]); // ✅ Clears results when a new career is selected
+  setIsCalculated(false);
-  setIsCalculated(false); // ✅ Reset calculation state
+}, [schools]); 
-}, [data]); // Runs whenever `data` changes (i.e., new career is selected)
 
-if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the whole dashboard
+
+if (!isVisible) return null;
+
+if (loading || loadingCalculation) {
+  return (
+    <div className="popout-panel">
+      <button className="close-btn" onClick={closePanel}>X</button>
+      <h2>Loading Career Details...</h2>
+      <ClipLoader size={35} color="#4A90E2" />
+    </div>
+  );
+}
+
+  if (!isVisible) return null;
 
   // Handle loading state
-  if (loading) {
+  if (loading || loadingCalculation) {
     return (
       <div className="popout-panel">
         <button className="close-btn" onClick={closePanel}>X</button>
@@ -36,16 +58,6 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
     );
   }
   
-  // Safely access nested data with fallbacks
-  const {
-    jobDescription = null, // Default to null if not provided
-    tasks = null, // Default to null if not provided
-    title = 'Career Details',
-    economicProjections = {},
-    salaryData = [],
-    schools = [],
-  } = data;
-
   // Get program length for calculating tuition
   const getProgramLength = (degreeType) => {
     if (degreeType?.includes("Associate")) return 2;
@@ -62,7 +74,6 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
     closePanel(); // Maintain existing close behavior
   }
 
-
   return (
     <div className="popout-panel">
       <button onClick={closePanel}>Close</button>
@@ -87,29 +98,8 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
         )}
       </div>
 
-      {/* Schools Offering Programs Section */}
+{/* Economic Projections */}
-      <h3>Schools Offering Programs</h3>
+<div className="economic-projections">
-      <div className="schools-offering">
-        {Array.isArray(schools) && schools.length > 0 ? (
-          schools.map((school, index) => (
-            <div key={index} className="school-card">
-              <div><strong>{school['INSTNM']}</strong></div>
-              <div>Degree Type: {school['CREDDESC'] || 'Degree type information is not available for this program'}</div>
-              <div>In-State Tuition: ${school['In_state cost'] || 'Tuition information is not available for this school'}</div>
-              <div>Out-of-State Tuition: ${school['Out_state cost'] || 'Tuition information is not available for this school'}</div>
-              <div>Distance: {school['distance'] || 'Distance to school not available'}</div>
-              <div>
-                Website: <a href={school['Website']} target="_blank" rel="noopener noreferrer">{school['Website']}</a>
-              </div>
-            </div>
-          ))
-        ) : (
-          <p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
-        )}
-      </div>
-
-      {/* Economic Projections */}
-      <div className="economic-projections">
         <h3>Economic Projections for {userState}</h3>
         {economicProjections && typeof economicProjections === 'object' ? (
           <ul>
@@ -147,23 +137,40 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
         )}
       </div>
 
+      {/* Schools Offering Programs Section */}
+      <h3>Schools Offering Programs</h3>
+      <div className="schools-offering">
+      {schools.length > 0 ? (
+          schools.map((school, index) => (
+            <div key={index} className="school-card">
+              <div><strong>{school['INSTNM']}</strong></div>
+              <div>Degree Type: {school['CREDDESC'] || 'Degree type information is not available for this program'}</div>
+              <div>In-State Tuition: ${school['In_state cost'] || 'Tuition information is not available for this school'}</div>
+              <div>Out-of-State Tuition: ${school['Out_state cost'] || 'Tuition information is not available for this school'}</div>
+              <div>Distance: {school['distance'] || 'Distance to school not available'}</div>
+              <div>
+                Website: <a href={school['Website']} target="_blank" rel="noopener noreferrer">{school['Website']}</a>
+              </div>
+            </div>
+          ))
+        ) : (
+          <p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
+        )}
+      </div>
+
       {/* Loan Repayment Analysis */}
       <h3>Loan Repayment Analysis</h3>
-
-      {/* Loan Repayment Calculation Results */}
       <LoanRepayment
-        schools={schools.map((school) => {
+        schools={schools.map(school => ({
-          const years = getProgramLength(school['CREDDESC']);
+          schoolName: school['INSTNM'],
-          return {
+          inState: parseFloat(school['In_state cost']) || 0,
-            schoolName: school['INSTNM'],
+          outOfState: parseFloat(school['Out_state cost']) || 0,
-            inState: parseFloat(school['In_state cost'] * years) || 0,
+          degreeType: school['CREDDESC'],
-            outOfState: parseFloat(school['Out_state cost'] * years) || 0,
+        }))}
-            degreeType: school['CREDDESC'],
-          };
-        })}
         salaryData={salaryData}
         setResults={setResults}
         setLoading={setLoadingCalculation}
+        setPersistedROI={setPersistedROI} // ✅ Store ROI after calculation
       />
 
       {/* Results Display */}