function MainComponent() { const [financialGoal, setFinancialGoal] = React.useState(''); const [monthlyIncome, setMonthlyIncome] = React.useState(''); const [financialPlan, setFinancialPlan] = React.useState(''); const [budgetingTips, setBudgetingTips] = React.useState(''); const [loading, setLoading] = React.useState(false); const [financialGraphData, setFinancialGraphData] = React.useState(null); const handleInputChange = (event)=>{ const { name, value } = event.target; if (name === 'financialGoal') { setFinancialGoal(value); } else if (name === 'monthlyIncome') { setMonthlyIncome(value); } }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); try { const responses = await Promise.all([ fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `My primary goal is ${financialGoal}. My monthly income is ${monthlyIncome}.` }, { role: 'user', content: "Can you create a personalized financial plan for me?" } ], system_prompt: 'Financial planning advice' }), headers: { 'Content-Type': 'application/json' } }), fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: "Any tips on budgeting and investing to make the most of my money?" } ], system_prompt: 'Tips on budgeting and investing' }), headers: { 'Content-Type': 'application/json' } }) ]); responses.forEach((response)=>{ if (!response.ok) throw new Error('Failed to fetch data'); }); const [financialPlanData, budgetingTipsData] = await Promise.all(responses.map((response)=>response.json())); setFinancialPlan(financialPlanData.result); setBudgetingTips(budgetingTipsData.result); setFinancialGraphData({ // Mock data - replace with data from API in real-world application financialPlanPieChart: { // Distribute pie chart value over some sample categories savings: monthlyIncome * 0.3, essentials: monthlyIncome * 0.5, discretionary: monthlyIncome * 0.2 }, timeToGoalEstimation: { // Just a sample calculation - replace with real calculation/logic goalAmount: 10000, monthsRequired: 10000 / monthlyIncome } }); } catch (error) { console.error('Error:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg space-y-6", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "financial-goal", className: "block text-sm font-semibold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Financial Goal:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "financialGoal", id: "financial-goal", value: financialGoal, onChange: handleInputChange, className: "w-full border border-[#ddd] rounded p-3 text-sm font-roboto", placeholder: "e.g., saving for college", required: true, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "monthly-income", className: "block text-sm font-semibold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Monthly Income:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "monthlyIncome", id: "monthly-income", value: monthlyIncome, onChange: handleInputChange, className: "w-full border border-[#ddd] rounded p-3 text-sm font-roboto", placeholder: "Insert income", required: true, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4CAF50] text-white font-semibold rounded p-3 hover:bg-[#43A047]", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Get Financial Plan"), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 text-sm font-light text-[#666] font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "animate-spin inline-block mr-2 text-xl", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "💸"), "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 w-full max-w-md mt-6", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, financialGraphData && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg text-[#333] mb-3 font-roboto", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "Financial Breakdown (Pie Chart)"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-[#eaeaea] rounded-full flex items-center justify-center text-[#555] font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, "Pie Chart")), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg text-[#333] mb-3 font-roboto mt-6", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Time to Financial Goal"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-[#eaeaea] text-[#555] font-roboto", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, "Graph"))), financialPlan && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded p-6 border-t-4 border-[#4CAF50]", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg text-[#333] mb-3 font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Personalized Financial Plan"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#555] font-roboto", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, financialPlan)), budgetingTips && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded p-6 border-t-4 border-[#FF9800]", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg text-[#333] mb-3 font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Budgeting & Investing Tips"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#555] font-roboto", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, budgetingTips)))); }