Added button for New College Plan

src/components/CareerSelectDropdown.js

@@ -26,7 +26,9 @@ const CareerSelectDropdown = ({ existingCareerProfiles, selectedCareer, onChange
 
   return (
     <div className="career-select-dropdown">
-      <label>Select Career Path:</label>
+     <label className="block font-medium mb-1">
+        Select the career this college plan belongs to:
+      </label>
       {loading ? (
         <p>Loading career paths...</p>
       ) : (

src/components/CollegeProfileForm.js

@@ -240,10 +240,6 @@ return (
     <h2 className="text-2xl font-semibold">
       {id === 'new' ? 'New' : 'Edit'} College Plan
     </h2>
-
-    {(form.college_enrollment_status === 'currently_enrolled' ||
-      form.college_enrollment_status === 'prospective_student') ? (
-      /* ───────────────────────────────────────────────────────── */
       <div className="space-y-4">
 
         {/* 1 │ Location / modality check‑boxes */}
@@ -492,12 +488,6 @@ return (
           />
         </div>
       </div>
-    ) : (
-      <p>
-        User is neither currently enrolled nor a prospective student – nothing to
-        edit.
-      </p>
-    )}
 
     {/* 11 │ Action buttons */}
     <div className="pt-4">

src/components/CollegeProfileList.js

@@ -1,23 +1,100 @@
-import React, { useEffect, useState } from 'react';
+// src/components/CollegeProfileList.js
-import { Link, useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import CareerSelectDropdown from "./CareerSelectDropdown.js";
+import authFetch from "../utils/authFetch.js";
 
 export default function CollegeProfileList() {
-  const [rows, setRows] = useState([]);
+  const { careerId } = useParams();                // may be undefined
-  const nav   = useNavigate();
+  const navigate = useNavigate();
-  const token = localStorage.getItem('token');
+  const token = localStorage.getItem("token");
 
+  /* ───────── existing lists ───────── */
+  const [rows, setRows] = useState([]);
+  const [careerRows, setCareerRows] = useState([]);
+
+  /* ───────── ui state ───────── */
+  const [showPicker, setShowPicker] = useState(false);
+  const [loadingCareers, setLoadingCareers] = useState(true);
+
+  /* ───────── load college plans ───────── */
   useEffect(() => {
-    fetch('/api/premium/college-profile/all', {
+    fetch("/api/premium/college-profile/all", {
       headers: { Authorization: `Bearer ${token}` }
     })
-      .then(r => r.json())
+      .then((r) => r.json())
-      .then(d => setRows(d.collegeProfiles || []));
+      .then((d) => setRows(d.collegeProfiles || []));
   }, [token]);
 
-  return (
+  /* ───────── load career profiles for the picker ───────── */
-    <div className="max-w-5xl mx-auto space-y-4">
+  useEffect(() => {
-      <h2 className="text-2xl font-semibold">College Profiles</h2>
+    (async () => {
+      try {
+        const res = await authFetch("/api/premium/career-profile/all");
+        const data = await res.json();
+        setCareerRows(data.careerProfiles || []);
+      } catch (err) {
+        console.error("Career profiles load failed:", err);
+      } finally {
+        setLoadingCareers(false);
+      }
+    })();
+  }, []);
 
+  /* ───────── delete helper ───────── */
+  async function handleDelete(id) {
+    if (!window.confirm("Delete this college plan?")) return;
+    try {
+      await fetch(`/api/premium/college-profile/${id}`, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setRows((r) => r.filter((row) => row.id !== id));
+    } catch (err) {
+      console.error("Delete failed:", err);
+      alert("Could not delete – see console.");
+    }
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-6">
+      {/* ───────── header row ───────── */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-semibold">College Plans</h2>
+
+        {/* new‑plan button & inline picker */}
+        {!showPicker ? (
+          <button
+            onClick={() => setShowPicker(true)}
+            className="px-3 py-2 bg-blue-600 text-white rounded"
+          >
+            + New College Plan
+          </button>
+        ) : (
+          <div className="p-4 border rounded bg-gray-50 max-w-md">
+            <CareerSelectDropdown
+              existingCareerProfiles={careerRows}
+              selectedCareer={null}
+              loading={loadingCareers}
+              authFetch={authFetch}
+              onChange={(careerObj) => {
+                if (!careerObj?.id) return;
+                navigate(`/profile/college/${careerObj.id}/new`);
+              }}
+            />
+            <div className="mt-2 text-right">
+              <button
+                onClick={() => setShowPicker(false)}
+                className="text-sm text-gray-600 underline"
+              >
+                cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ───────── table of existing college plans ───────── */}
       <table className="w-full border text-sm">
         <thead className="bg-gray-100">
           <tr>
@@ -28,27 +105,47 @@ export default function CollegeProfileList() {
             <th className="p-2"></th>
           </tr>
         </thead>
+
         <tbody>
-          {rows.map(r => (
+          {rows.map((r) => (
             <tr key={r.id} className="border-t">
               <td className="p-2">{r.career_title}</td>
               <td className="p-2">{r.selected_school}</td>
               <td className="p-2">{r.selected_program}</td>
               <td className="p-2">{r.created_at?.slice(0, 10)}</td>
-              <td className="p-2">
+              <td className="p-2 space-x-2 whitespace-nowrap">
                 <Link
                   to={`/profile/college/${r.career_profile_id}/${r.id}`}
                   className="underline text-blue-600"
                 >
                   edit
                 </Link>
+                <button
+                  onClick={() => handleDelete(r.id)}
+                  className="underline text-red-600"
+                >
+                  delete
+                </button>
               </td>
             </tr>
           ))}
+
           {rows.length === 0 && (
-            <tr><td colSpan={5} className="p-4 text-center text-gray-500">
+            <tr>
-              No college profiles yet
+              <td colSpan={6} className="p-8 text-center text-gray-500">
-            </td></tr>
+                No college profiles yet.&nbsp;
+                <button
+                  className="text-blue-600 underline"
+                  onClick={() =>
+                    careerId
+                      ? navigate(`/profile/college/${careerId}/new`)
+                      : setShowPicker(true)
+                  }
+                >
+                  Create one now.
+                </button>
+              </td>
+            </tr>
           )}
         </tbody>
       </table>