Added College Plan button to ScenarioEditModal

src/components/ScenarioEditModal.js

@@ -3,6 +3,7 @@ import authFetch from '../utils/authFetch.js';
 import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';
 import { Button } from './ui/button.js';
 import parseFloatOrZero from '../utils/ParseFloatorZero.js';
+import InfoTooltip from "./ui/infoTooltip.js";
 
 // Data paths
 const CIP_URL = '/cip_institution_mapping_new.json';
@@ -49,6 +50,26 @@ export default function ScenarioEditModal({
    * 5) Combined formData => scenario + college
    *********************************************************/
   const [formData, setFormData] = useState({});
+  const [showCollegeForm, setShowCollegeForm] = useState(false);
+
+
+  /*********************************************************
+ * Auto-expand the college section each time the modal opens.
+ * --------------------------------------------------------
+ *  ❑ The effect runs exactly once per modal–open (`show` → true).
+ *  ❑ If the saved scenario already says the user is
+ *      ‘currently_enrolled’ or ‘prospective_student’
+ *      we open the section so they immediately see their data.
+ *  ❑ Once open, the user can click Hide/Show; we *don’t* re-run
+ *      on every keystroke, so the effect won’t fight the button.
+ *********************************************************/
+  useEffect(() => {
+  if (!show) return;                    
+  setShowCollegeForm(
+    ['currently_enrolled', 'prospective_student']
+      .includes(formData.college_enrollment_status)
+  );
+}, [show]);  
 
   /*********************************************************
    * 6) On show => load CIP, IPEDS, CAREERS
@@ -844,43 +865,57 @@ if (formData.retirement_start_date) {
           </div>
         </div>
 
-        {/* SECTION: College Profile */}
-        <h3 className="text-xl font-medium mb-2">College Profile</h3>
-        {(formData.college_enrollment_status === 'currently_enrolled' ||
-          formData.college_enrollment_status === 'prospective_student') ? (
+        {/* ───────── COLLEGE PROFILE heading + Add plan ───────── */}
+        
+            <div className="flex items-center justify-between mb-2">
+              {/* left cluster (title + info badge) */}
+              <div className="flex items-center space-x-2">
+                <h3 className="text-xl font-medium">College Profile</h3>
+                <InfoTooltip message="Get this info from the “Educational Programs” tab in Preparing & Upskilling for Your Career." />
+              </div>
+
+              {/* right cluster (toggle button) */}
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => {
+                  if (
+                    !showCollegeForm &&
+                    formData.college_enrollment_status === 'not_enrolled'
+                  ) {
+                    setFormData(prev => ({
+                      ...prev,
+                      college_enrollment_status: 'prospective_student'
+                    }));
+                  }
+                  setShowCollegeForm(prev => !prev);
+                }}
+              >
+                {showCollegeForm ? 'Hide' : 'Add plan'}
+              </Button>
+            </div>
+
+        {/*  Collapse / expand the full set of inputs  */}
+        {showCollegeForm ? (
           <>
-            {/* District/State/Online */}
+            {/* District / State / Online check-boxes ------------------ */}
             <div className="flex items-center space-x-4 mb-4">
-              <label className="inline-flex items-center">
-                <input
-                  type="checkbox"
-                  name="is_in_district"
-                  checked={!!formData.is_in_district}
-                  onChange={handleFormChange}
-                  className="mr-1"
-                />
-                In District
-              </label>
-              <label className="inline-flex items-center">
-                <input
-                  type="checkbox"
-                  name="is_in_state"
-                  checked={!!formData.is_in_state}
-                  onChange={handleFormChange}
-                  className="mr-1"
-                />
-                In State
-              </label>
-              <label className="inline-flex items-center">
-                <input
-                  type="checkbox"
-                  name="is_online"
-                  checked={!!formData.is_online}
-                  onChange={handleFormChange}
-                  className="mr-1"
-                />
-                Fully Online
-              </label>
+              {[
+                { name: 'is_in_district', label: 'In District' },
+                { name: 'is_in_state',    label: 'In State' },
+                { name: 'is_online',      label: 'Fully Online' }
+              ].map(({ name, label }) => (
+                <label key={name} className="inline-flex items-center">
+                  <input
+                    type="checkbox"
+                    name={name}
+                    checked={!!formData[name]}
+                    onChange={handleFormChange}
+                    className="mr-1"
+                  />
+                  {label}
+                </label>
+              ))}
             </div>
 
             {/* Loan Deferral */}
@@ -1183,7 +1218,7 @@ if (formData.retirement_start_date) {
           </>
         ) : (
           <p className="text-sm text-gray-500 italic mb-4">
-            Not currently enrolled or prospective. Minimal college fields only.
+            Not currently enrolled or prospective. Add a plan to enter this info.
           </p>
         )}