From 5d5e5fb001da23b163a17d87fe75e8ecba239306 Mon Sep 17 00:00:00 2001
From: Josh <jcoakley@aptivaai.com>
Date: Tue, 1 Apr 2025 13:12:20 +0000
Subject: [PATCH] Added FinancialProfileForm with navigation from Popoutpanel

---
 src/App.js                             |   6 +
 src/components/FinancialProfileForm.js | 161 +++++++++++++++++++++++++
 src/components/PopoutPanel.js          |   4 +-
 user_profile.db                        | Bin 57344 -> 57344 bytes
 4 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FinancialProfileForm.js

diff --git a/src/App.js b/src/App.js
index b2eaef0..f9cbd8a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import SignUp from './components/SignUp.js';
 import InterestInventory from './components/InterestInventory.js';
 import Dashboard from './components/Dashboard.js';
 import UserProfile from './components/UserProfile.js';
+import FinancialProfileForm from './components/FinancialProfileForm.js';
 import MilestoneTracker from "./components/MilestoneTracker.js";
 import './App.css';
 
@@ -48,6 +49,11 @@ function App() {
           path="/milestone-tracker"
           element={isAuthenticated ? <MilestoneTracker /> : <Navigate to="/signin" />}
         />
+        <Route
+          path="/financial-profile"
+          element={isAuthenticated ? <FinancialProfileForm /> : <Navigate to="/signin" />}
+        />
+
         {/* Catch-all for unknown routes */}
         <Route path="*" element={<Navigate to="/signin" />} />
       </Routes>
diff --git a/src/components/FinancialProfileForm.js b/src/components/FinancialProfileForm.js
new file mode 100644
index 0000000..834b41c
--- /dev/null
+++ b/src/components/FinancialProfileForm.js
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import { useLocation, useNavigate } from 'react-router-dom';
+
+export default function FinancialProfileForm() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    console.log("🔍 FinancialProfileForm mounted");
+    console.log("🔍 location.state:", location.state);
+    const initialCareer = location?.state?.selectedCareer;
+    const [selectedCareer, setSelectedCareer] = useState(initialCareer || null);
+    const userId = localStorage.getItem("userId");
+    const [formData, setFormData] = useState({
+    currentSalary: "",
+    additionalIncome: "",
+    monthlyExpenses: "",
+    monthlyDebtPayments: "",
+    retirementSavings: "",
+    retirementContribution: "",
+    emergencyFund: "",
+    inCollege: false,
+    expectedGraduation: "",
+    partTimeIncome: "",
+    tuitionPaid: "",
+    collegeLoanTotal: ""
+  });
+
+  useEffect(() => {
+    console.log("✅ selectedCareer in useEffect:", selectedCareer);
+  }, [selectedCareer]);
+  
+  // Fetch existing data on mount
+  useEffect(() => {
+    async function fetchProfile() {
+      try {
+        const res = await fetch(`/api/premium/financial-profile?user_id=${userId}`);
+        if (res.ok) {
+          const data = await res.json();
+          setFormData((prev) => ({ ...prev, ...data }));
+        }
+      } catch (err) {
+        console.error("Failed to fetch financial profile", err);
+      }
+    }
+
+    fetchProfile();
+  }, [userId]);
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "checkbox" ? checked : value
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await fetch("/api/premium/financial-profile", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ user_id: userId, ...formData })
+      });
+
+      if (res.ok) {
+        navigate('/milestone-tracker', {
+          state: { selectedCareer }
+        });
+      }      
+    } catch (err) {
+      console.error("Error submitting financial profile:", err);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-2xl mx-auto p-4 space-y-4 bg-white shadow rounded">
+      <h2 className="text-xl font-semibold">Your Financial Profile</h2>
+
+      <div>
+        <label className="block font-medium">Current Salary</label>
+        <input name="currentSalary" type="number" value={formData.currentSalary} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Additional Monthly Income</label>
+        <input name="additionalIncome" type="number" value={formData.additionalIncome} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Monthly Living Expenses</label>
+        <input name="monthlyExpenses" type="number" value={formData.monthlyExpenses} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Monthly Debt Payments (non-student)</label>
+        <input name="monthlyDebtPayments" type="number" value={formData.monthlyDebtPayments} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Current Retirement Savings</label>
+        <input name="retirementSavings" type="number" value={formData.retirementSavings} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Monthly Retirement Contribution</label>
+        <input name="retirementContribution" type="number" value={formData.retirementContribution} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div>
+        <label className="block font-medium">Emergency Fund Balance</label>
+        <input name="emergencyFund" type="number" value={formData.emergencyFund} onChange={handleChange}
+               className="w-full border rounded p-2" placeholder="$" />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <input id="inCollege" name="inCollege" type="checkbox" checked={formData.inCollege} onChange={handleChange} />
+        <label htmlFor="inCollege" className="font-medium">Are you currently in college?</label>
+      </div>
+
+      {formData.inCollege && (
+        <>
+          <div>
+            <label className="block font-medium">Expected Graduation Date</label>
+            <input name="expectedGraduation" type="date" value={formData.expectedGraduation} onChange={handleChange}
+                   className="w-full border rounded p-2" />
+          </div>
+
+          <div>
+            <label className="block font-medium">Part-Time Monthly Income</label>
+            <input name="partTimeIncome" type="number" value={formData.partTimeIncome} onChange={handleChange}
+                   className="w-full border rounded p-2" placeholder="$" />
+          </div>
+
+          <div>
+            <label className="block font-medium">Tuition Paid So Far</label>
+            <input name="tuitionPaid" type="number" value={formData.tuitionPaid} onChange={handleChange}
+                   className="w-full border rounded p-2" placeholder="$" />
+          </div>
+
+          <div>
+            <label className="block font-medium">Total College Loan Amount</label>
+            <input name="collegeLoanTotal" type="number" value={formData.collegeLoanTotal} onChange={handleChange}
+                   className="w-full border rounded p-2" placeholder="$" />
+          </div>
+        </>
+      )}
+
+      <div className="pt-4">
+        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+          Save and Continue
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/PopoutPanel.js b/src/components/PopoutPanel.js
index a5ac562..37cfb79 100644
--- a/src/components/PopoutPanel.js
+++ b/src/components/PopoutPanel.js
@@ -149,7 +149,7 @@ function PopoutPanel({
         
         
         if (decision) {
-          navigate('/milestone-tracker', {
+          navigate('/financial-profile', {
             state: { selectedCareer: { career_path_id: match.id, career_name: data.title } }
           });
           return;
@@ -172,7 +172,7 @@ function PopoutPanel({
   
       if (!newResponse.ok) throw new Error('Failed to create new career path.');
   
-      navigate('/milestone-tracker', {
+      navigate('/financial-profile', {
         state: { selectedCareer: { career_path_id: newCareerPath.career_path_id, career_name: data.title } }
       });
   
diff --git a/user_profile.db b/user_profile.db
index 0148c9d0f9c9a5f2d9bd4bb7de385b4c7075cb6f..5b5debd058225d07b9b401547a1a70e53b531052 100644
GIT binary patch
delta 833
zcmah{J&)5c7_KiON7FX#O$9L!@pVEvQSvpQ6GJEgRqFMsk_yCPxry7elsX}G(1oQP
zkYKpsPy|2VW+w6j=)l0n&ce)Z0O@clZa~e6S9&e`eINUI{Md`7uviMmSGK}ZsU-6}
zi{`r>eLF1OaY2ojYQj-Tek1p4zpKBhUn{+G`=Yq{O?)a|6OJzY$hI1y(0|>pZ8lpi
z@OGb}k&nlOBI*+4!!QcQq@W<T2e#$dieo+K+R7R}{V3g-JN7e2>Fx6zcDp;0qPTGs
zVanhP`6x;henMAyXg{)sT}Qc_1CZwtMgq!-33Y=hF2GC!$`1Sl;=>Tr8J?XBnJ3W0
zBL+j1OgU>2Fv5&PIPY>zFA1Ie2jp_@h>YS~V*xKeDVkvFCU6{6Z(e{P6uN=$;|W$e
zJ;#1*5B@bEzm&_c2PYBoVzlDPZOqLHQN$o4Q+&QREMD2iuS`7UVBO!p+|UmYg)Csm
zFVGl=9?B&krmSA@?1kFH!NBf0(CO^iPaJEnFWt6eu{ms|R{7G+wJ!kGwNf?REt}a3
z=@5vfBsM$O^PTC3^5yJj<vz&Xi<OP+yYLF6+p?bBssWHbmj~(R`n?QoB;ZryOMTbW
zOjA`2jfbK0g`w)YscSrqe4%N)XQ;fwN7XR+#4uGY-=$}#SHUrmGO#$UpDY_Ei^d;I
COZuY#

delta 296
zcmZoTz}#?vd4jZHE&~Gt9}x2ZF%uArP1G?~&SlUmTExp5!obax$iS4yzn?FPSB+1d
z`4-z$?w6buT!oz06DM9`;aI@bws9gS<K}k0O2*B8+*OP~Ax6iI6KxqcJ9Ba~v2YeJ
z%$_)LI-4;Mo4C8;<a0a{lO5Q^IXKrdZ~(1hn0%hyoP}=<!=Z^2_iYYmt6<#B#sSp&
zn}?Bc@(CW}$$xl*SonW13U8dq&p6qS&l02wtZ|dT5q@hEBST|DV-sUT6H^ltQ)5F@
zQ)5$OBSRx&V^b3&6B9#2pr{E57?~IwnF58441ubE>Wqyx|CeW+AOdm%5HJEUC<J(c
Vm}9eG!yEoZ2Lyohd;W<F1Ob;3M-Tu2