Added career_clusters.json and career search functions to premium

src/components/MilestoneTracker.js

@@ -7,59 +7,16 @@ import { CheckCircle, Clock, Target, PlusCircle, Search } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 
-const careerClusters = [
-  "Software Development",
-  "Healthcare",
-  "Engineering",
-  "Finance",
-  "Education",
-  "Marketing",
-  "Cybersecurity",
-  "Construction",
-  "Legal",
-  "Data Science",
-  "Sales",
-  "Human Resources",
-  "Manufacturing",
-  "Aviation",
-  "Social Work",
-  "Design & UX",
-  "Hospitality",
-  "Retail Management",
-  "Real Estate",
-  "Transportation",
-  "Agriculture",
-  "Public Administration",
-  "Energy & Environment"
-];
 
-const universalPrerequisites = {
-    "Software Development": ["Learn a Programming Language", "Build and Deploy a Small Project", "Understand Data Structures & Algorithms"],
-    "Healthcare": ["Complete Required Certifications", "Pass Licensing Exam", "Gain Clinical Experience"],
-    "Engineering": ["Earn a Relevant Engineering Degree", "Obtain Engineering Certification (PE/EIT)", "Gain Hands-on Experience"],
-    "Finance": ["Earn a Bachelor's in Finance or Related Field", "Gain Experience with Financial Modeling", "Obtain CFA or CPA Certification"],
-    "Education": ["Complete a Teaching Credential", "Pass State Licensing Exam", "Gain Classroom Experience"],
-    "Marketing": ["Learn Digital Marketing Basics", "Build a Portfolio of Campaigns", "Gain Experience in Market Research"],
-    "Cybersecurity": ["Learn Network Security Fundamentals", "Obtain CompTIA Security+ or CISSP", "Gain Hands-on Security Experience"],
-    "Construction": ["Complete an Apprenticeship Program", "Earn a Safety Certification (OSHA)", "Gain On-Site Experience"],
-    "Legal": ["Earn a Law Degree (JD)", "Pass the Bar Exam", "Gain Internship Experience at a Law Firm"],
-    "Data Science": ["Learn Python & SQL", "Complete a Machine Learning Course", "Build a Data Science Portfolio"],
-    "Sales": ["Develop Strong Communication Skills", "Understand CRM Tools", "Gain Sales Experience"],
-    "Human Resources": ["Earn a Bachelor's in HR or Business", "Obtain PHR or SHRM Certification", "Gain HR Generalist Experience"],
-    "Manufacturing": ["Learn Manufacturing Processes", "Complete a Safety Training Course", "Gain Hands-on Experience in Production"],
-    "Aviation": ["Earn a Pilot’s License", "Pass FAA Certification Exams", "Gain Flight Hours"],
-    "Social Work": ["Earn a Social Work Degree", "Obtain State Licensing", "Gain Casework Experience"],
-    "Design & UX": ["Learn UI/UX Design Principles", "Build a Portfolio of Designs", "Gain Experience with Design Tools (Figma, Adobe XD)"],
-    "Hospitality": ["Gain Customer Service Experience", "Complete Hospitality Management Courses", "Develop Event Planning Skills"],
-    "Retail Management": ["Gain Experience in Retail Operations", "Learn Inventory & Budget Management", "Develop Leadership Skills"],
-    "Real Estate": ["Earn a Real Estate License", "Develop Sales & Negotiation Skills", "Understand Market Trends"],
-    "Transportation": ["Obtain a Commercial Driver's License (CDL)", "Complete Logistics Training", "Gain Hands-on Experience in Transportation"],
-    "Agriculture": ["Learn Crop & Soil Science Basics", "Understand Farm Equipment Operation", "Gain Hands-on Farming Experience"],
-    "Public Administration": ["Earn a Public Administration Degree", "Understand Government Policies & Regulations", "Gain Leadership Experience"],
-    "Energy & Environment": ["Learn Renewable Energy Technologies", "Understand Environmental Regulations", "Gain Fieldwork Experience"]
-  };
 
 const MilestoneTracker = () => {
+  const location = useLocation();
+  const initialCareer = location.state?.career || "";
+  const [careerClusters, setCareerClusters] = useState({});
+  const [selectedCluster, setSelectedCluster] = useState(null);
+  const [selectedSubdivision, setSelectedSubdivision] = useState(null);
+  const [selectedCareer, setSelectedCareer] = useState(initialCareer);
+  const [filteredClusters, setFilteredClusters] = useState([]);
   const [activeTab, setActiveTab] = useState("career");
   const [customMilestones, setCustomMilestones] = useState({ career: [], financial: [], retirement: [] });
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -104,6 +61,16 @@ const MilestoneTracker = () => {
     );
   }
 
+  useEffect(() => {
+    fetch("/data/career_clusters.json")
+      .then((response) => response.json())
+      .then((data) => {
+        setCareerClusters(data);
+        setFilteredClusters(Object.keys(data));
+      })
+      .catch((error) => console.error("Error loading career clusters:", error));
+  }, []);
+
   const handleAddMilestone = () => {
     if (newMilestone.trim() !== "") {
       setCustomMilestones((prev) => ({
@@ -127,9 +94,9 @@ const MilestoneTracker = () => {
   <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">Milestone Tracker</h1>
       
-      {/* Career Search Section */}
+       {/* Career Cluster Selection */}
       <div className="mb-6 p-4 border rounded-lg shadow-md bg-white">
-        <h2 className="text-xl font-semibold mb-2">Search for a Career Path</h2>
+        <h2 className="text-xl font-semibold mb-2">Search & Select a Career Cluster</h2>
         <Input
           value={careerSearch}
           onChange={handleCareerSearch}
@@ -137,14 +104,61 @@ const MilestoneTracker = () => {
           className="mb-2"
         />
         <div className="max-h-40 overflow-y-auto border rounded p-2">
-          {filteredCareers.map((career, index) => (
+          {filteredClusters.map((cluster, index) => (
-            <div key={index} className="p-2 hover:bg-gray-200 cursor-pointer rounded">
+            <div 
-              <strong>{career}</strong>
+              key={index} 
+              className={`p-2 hover:bg-gray-200 cursor-pointer rounded ${cluster === selectedCluster ? 'bg-blue-200' : ''}`}
+              onClick={() => {
+                setSelectedCluster(cluster);
+                setSelectedSubdivision(null);
+                setSelectedCareer(null);
+              }}
+            >
+              <strong>{cluster}</strong>
             </div>
           ))}
         </div>
       </div>
 
+      {/* Subdivision Selection within Cluster */}
+      {selectedCluster && careerClusters[selectedCluster] && (
+        <div className="mb-6 p-4 border rounded-lg shadow-md bg-white">
+          <h2 className="text-xl font-semibold mb-2">Select a Specialization in {selectedCluster}</h2>
+          <div className="max-h-40 overflow-y-auto border rounded p-2">
+            {Object.keys(careerClusters[selectedCluster]).map((subdivision, index) => (
+              <div 
+                key={index} 
+                className={`p-2 hover:bg-gray-200 cursor-pointer rounded ${subdivision === selectedSubdivision ? 'bg-blue-200' : ''}`}
+                onClick={() => {
+                  setSelectedSubdivision(subdivision);
+                  setSelectedCareer(null);
+                }}
+              >
+                {subdivision}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Career Selection within Subdivision */}
+      {selectedSubdivision && careerClusters[selectedCluster][selectedSubdivision] && (
+        <div className="mb-6 p-4 border rounded-lg shadow-md bg-white">
+          <h2 className="text-xl font-semibold mb-2">Select a Career in {selectedSubdivision}</h2>
+          <div className="max-h-40 overflow-y-auto border rounded p-2">
+            {Object.keys(careerClusters[selectedCluster][selectedSubdivision]).map((career, index) => (
+              <div 
+                key={index} 
+                className={`p-2 hover:bg-gray-200 cursor-pointer rounded ${career === selectedCareer ? 'bg-blue-200' : ''}`}
+                onClick={() => setSelectedCareer(career)}
+              >
+                {career}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
       {/* Milestone Tracker Section */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
         <TabsList>