dev1/src/components/FinancialProfileForm.js

// FinancialProfileForm.js
import React, { useState, useEffect } from 'react';
import authFetch from '../utils/authFetch.js';

function FinancialProfileForm() {
  // We'll store the fields in local state
  const [currentSalary, setCurrentSalary] = useState('');
  const [additionalIncome, setAdditionalIncome] = useState('');
  const [monthlyExpenses, setMonthlyExpenses] = useState('');
  const [monthlyDebtPayments, setMonthlyDebtPayments] = useState('');
  const [retirementSavings, setRetirementSavings] = useState('');
  const [emergencyFund, setEmergencyFund] = useState('');
  const [retirementContribution, setRetirementContribution] = useState('');
  const [monthlyEmergencyContribution, setMonthlyEmergencyContribution] = useState('');
  const [extraCashEmergencyPct, setExtraCashEmergencyPct] = useState('');
  const [extraCashRetirementPct, setExtraCashRetirementPct] = useState('');

  useEffect(() => {
    // On mount, fetch the user's existing profile from the new financial_profiles table
    async function fetchProfile() {
      try {
        const res = await authFetch('/api/premium/financial-profile', {
          method: 'GET'
        });
        if (res.ok) {
          const data = await res.json();
          // data might be an empty object if no row yet
          setCurrentSalary(data.current_salary || '');
          setAdditionalIncome(data.additional_income || '');
          setMonthlyExpenses(data.monthly_expenses || '');
          setMonthlyDebtPayments(data.monthly_debt_payments || '');
          setRetirementSavings(data.retirement_savings || '');
          setEmergencyFund(data.emergency_fund || '');
          setRetirementContribution(data.retirement_contribution || '');
          setMonthlyEmergencyContribution(data.monthly_emergency_contribution || '');
          setExtraCashEmergencyPct(data.extra_cash_emergency_pct || '');
          setExtraCashRetirementPct(data.extra_cash_retirement_pct || '');
        }
      } catch (err) {
        console.error("Failed to load financial profile:", err);
      }
    }
    fetchProfile();
  }, []);

  // Submit form updates => POST to the same endpoint
  async function handleSubmit(e) {
    e.preventDefault();
    try {
      const body = {
        current_salary: parseFloat(currentSalary) || 0,
        additional_income: parseFloat(additionalIncome) || 0,
        monthly_expenses: parseFloat(monthlyExpenses) || 0,
        monthly_debt_payments: parseFloat(monthlyDebtPayments) || 0,
        retirement_savings: parseFloat(retirementSavings) || 0,
        emergency_fund: parseFloat(emergencyFund) || 0,
        retirement_contribution: parseFloat(retirementContribution) || 0,
        monthly_emergency_contribution: parseFloat(monthlyEmergencyContribution) || 0,
        extra_cash_emergency_pct: parseFloat(extraCashEmergencyPct) || 0,
        extra_cash_retirement_pct: parseFloat(extraCashRetirementPct) || 0
      };

      const res = await authFetch('/api/premium/financial-profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });

      if (res.ok) {
        // show success or redirect
        console.log("Profile updated");
      } else {
        console.error("Failed to update profile:", await res.text());
      }
    } 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">Edit Your Financial Profile</h2>

      <label className="block font-medium">Current Salary</label>
      <input
        type="number"
        value={currentSalary}
        onChange={(e) => setCurrentSalary(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Additional Monthly Income</label>
      <input
        type="number"
        value={additionalIncome}
        onChange={(e) => setAdditionalIncome(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Monthly Living Expenses</label>
      <input
        type="number"
        value={monthlyExpenses}
        onChange={(e) => setMonthlyExpenses(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Monthly Debt Payments</label>
      <input
        type="number"
        value={monthlyDebtPayments}
        onChange={(e) => setMonthlyDebtPayments(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Retirement Savings</label>
      <input
        type="number"
        value={retirementSavings}
        onChange={(e) => setRetirementSavings(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Emergency Fund</label>
      <input
        type="number"
        value={emergencyFund}
        onChange={(e) => setEmergencyFund(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Monthly Retirement Contribution</label>
      <input
        type="number"
        value={retirementContribution}
        onChange={(e) => setRetirementContribution(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Monthly Emergency Contribution</label>
      <input
        type="number"
        value={monthlyEmergencyContribution}
        onChange={(e) => setMonthlyEmergencyContribution(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="$"
      />

      <label className="block font-medium">Extra Cash to Emergency (%)</label>
      <input
        type="number"
        value={extraCashEmergencyPct}
        onChange={(e) => setExtraCashEmergencyPct(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="e.g. 30"
      />

      <label className="block font-medium">Extra Cash to Retirement (%)</label>
      <input
        type="number"
        value={extraCashRetirementPct}
        onChange={(e) => setExtraCashRetirementPct(e.target.value)}
        className="w-full border rounded p-2"
        placeholder="e.g. 70"
      />

      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
        Save and Continue
      </button>
    </form>
  );
}

export default FinancialProfileForm;