function MainComponent() { const [amount, setAmount] = useState(""); const [itemName, setItemName] = useState(""); const [goalName, setGoalName] = useState(""); const [goalAmount, setGoalAmount] = useState(""); const [total, setTotal] = useState(0); const [items, setItems] = useState([]); const [goal, setGoal] = useState(null); const [showConfirm, setShowConfirm] = useState(false); const [showGoalForm, setShowGoalForm] = useState(false); const [returnRate, setReturnRate] = useState(8.9); const [isRecurring, setIsRecurring] = useState(false); const [showLogin, setShowLogin] = useState(false); const [showRegister, setShowRegister] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const [user, setUser] = useState(null); const [showUpgrade, setShowUpgrade] = useState(false); const [processingPayment, setProcessingPayment] = useState(false); const [itemToDelete, setItemToDelete] = useState(null); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const [showGoalDeleteConfirm, setShowGoalDeleteConfirm] = useState(false); useEffect(()=>{ const storedUser = localStorage.getItem("user"); if (storedUser) { const user = JSON.parse(storedUser); setUser(user); loadUserData(user.email); } }, []); useEffect(()=>{ const now = new Date(); const calculatedTotal = items.reduce((sum, item)=>{ const monthsSinceStart = Math.floor((now - new Date(item.startDate)) / (1000 * 60 * 60 * 24 * 30)); return sum + (item.recurring ? item.value * 12 : item.value); }, 0); setTotal(calculatedTotal); }, [ items ]); useEffect(()=>{ if (user) { saveUserData(); } }, [ items, goal ]); const signIn = async (email, password)=>{ const savedUsers = JSON.parse(localStorage.getItem("users") || "[]"); const user = savedUsers.find((u)=>u.email === email && u.password === password); if (user) { setUser(user); localStorage.setItem("user", JSON.stringify(user)); await loadUserData(email); return user; } throw new Error("Invalid credentials"); }; const signOut = ()=>{ setUser(null); localStorage.removeItem("user"); setTotal(0); setItems([]); setGoal(null); window.scrollTo(0, 0); }; const signUp = async (email, password, name)=>{ const savedUsers = JSON.parse(localStorage.getItem("users") || "[]"); if (savedUsers.some((u)=>u.email === email)) { throw new Error("User already exists"); } const newUser = { email, password, name, isPro: false }; savedUsers.push(newUser); localStorage.setItem("users", JSON.stringify(savedUsers)); setUser(newUser); localStorage.setItem("user", JSON.stringify(newUser)); return newUser; }; const loadUserData = async (email)=>{ const savedUsers = JSON.parse(localStorage.getItem("users") || "[]"); const user = savedUsers.find((u)=>u.email === email); if (user) { setItems(user.items || []); setGoal(user.goal || null); } }; const saveUserData = async ()=>{ if (user) { const savedUsers = JSON.parse(localStorage.getItem("users") || "[]"); const updatedUsers = savedUsers.map((u)=>u.email === user.email ? { ...u, items, goal } : u); localStorage.setItem("users", JSON.stringify(updatedUsers)); } }; const handleLogin = async (e)=>{ e.preventDefault(); try { await signIn(email, password); setShowLogin(false); setEmail(""); setPassword(""); } catch (error) { alert("Login failed. Please check your credentials."); } }; const handleRegister = async (e)=>{ e.preventDefault(); try { await signUp(email, password, name); setShowRegister(false); setEmail(""); setPassword(""); setName(""); } catch (error) { alert("Registration failed. Please try again."); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!user) { alert("Please sign in to save items"); return; } const cleanAmount = amount.replace(/[$,]/g, ""); const value = parseFloat(cleanAmount); if (!isNaN(value) && value > 0 && itemName.trim()) { const adjustedValue = isRecurring ? value * 12 : value; const newItem = { value, annualizedValue: adjustedValue, name: itemName.trim(), date: new Date().toLocaleDateString(), month: new Date().toLocaleString("default", { month: "long", year: "numeric" }), recurring: isRecurring, startDate: new Date() }; setItems((prev)=>[ ...prev, newItem ]); await saveUserData(); setAmount(""); setItemName(""); setIsRecurring(false); } }; const handleDelete = async (index)=>{ const newItems = items.filter((_, idx)=>idx !== index); setItems(newItems); await saveUserData(); if (newItems.length === 0) { window.scrollTo(0, document.body.scrollHeight); } }; const handleGoalSubmit = async (e)=>{ e.preventDefault(); if (!user) { alert("Please sign in to set goals"); return; } const cleanAmount = goalAmount.replace(/[$,]/g, ""); const value = parseFloat(cleanAmount); if (!isNaN(value) && value > 0 && goalName.trim()) { setGoal({ name: goalName.trim(), amount: value, startDate: new Date() }); await saveUserData(); setGoalName(""); setGoalAmount(""); setShowGoalForm(false); } }; const clearGoal = async ()=>{ setGoal(null); await saveUserData(); }; const clearHistory = async ()=>{ setItems([]); setTotal(0); setShowConfirm(false); window.scrollTo(0, 0); await saveUserData(); }; const getAnnualizedValue = (item)=>item.annualizedValue; const monthlyTotals = items.reduce((acc, item)=>{ const monthlyValue = item.recurring ? item.value * 12 : item.value; acc[item.month] = (acc[item.month] || 0) + monthlyValue; return acc; }, {}); const getAnnualTotal = ()=>{ return items.reduce((sum, item)=>{ return sum + (item.recurring ? item.value * 12 : item.value); }, 0); }; const getMonthlyAverage = ()=>{ return items.reduce((sum, item)=>{ return sum + (item.recurring ? item.value : item.value / 12); }, 0); }; const monthlyAverage = getMonthlyAverage(); const calculateFutureValue = (years)=>{ const monthlyRate = returnRate / 100 / 12; const months = years * 12; return items.reduce((total, item)=>{ if (returnRate === 0) { return total + (item.recurring ? item.value * months : item.value); } if (item.recurring) { const pmt = item.value; const fv = pmt * ((Math.pow(1 + monthlyRate, months) - 1) / monthlyRate); return total + fv; } else { const pv = item.value; const fv = pv * Math.pow(1 + monthlyRate, months); return total + fv; } }, 0); }; const formatNumber = (number)=>{ return number.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; const getEstimatedGoalDate = ()=>{ if (!goal || items.length === 0) return null; const monthlyAvg = getMonthlyAverage(); if (monthlyAvg <= 0) return null; const currentTotal = items.reduce((sum, item)=>{ return sum + (item.recurring ? item.value * 12 : item.value); }, 0); const remaining = goal.amount - currentTotal; if (remaining <= 0) return "Goal Reached!"; const monthsToGoal = Math.ceil(remaining / monthlyAvg); const estimatedDate = new Date(); estimatedDate.setMonth(estimatedDate.getMonth() + monthsToGoal); return `${estimatedDate.toLocaleString("default", { month: "long" })} ${estimatedDate.getFullYear()}`; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#111827] p-4 font-inter text-white", __source: { fileName: "", lineNumber: 256, columnNumber: 5 }, __self: this }, !user?.isPro && /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-gradient-to-r from-[#3b82f6] to-[#2563eb] p-6 rounded-3xl mb-6 shadow-xl border border-[#60a5fa]", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base mb-3 text-white", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, "Enjoying the app? Remove ads for just $8.99/year"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUpgrade(true), className: "bg-white text-[#2563eb] px-6 py-2.5 rounded-2xl hover:bg-[#f8fafc] transition-all duration-300 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5", __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, "Upgrade to Pro")), !user?.isPro && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-gray-200 p-4 mb-4 text-center", __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, "Advertisement Space")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-[#1f2937] rounded-3xl shadow-2xl p-8 border border-[#374151]", __source: { fileName: "", lineNumber: 277, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-white", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, "Welcome, ", user.name), /*#__PURE__*/ React.createElement("button", { onClick: signOut, className: "text-sm text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, "Sign Out")) : /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 290, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLogin(true), className: "text-sm text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 291, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowRegister(true), className: "text-sm text-green-500 hover:text-green-600", __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, "Register"))), showLogin && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f2937] p-8 rounded-2xl max-w-sm mx-4 border border-[#374151] shadow-2xl", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6 text-white", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, "Welcome Back"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-6", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-3 bg-[#111827] border border-[#374151] rounded-xl text-white focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full p-3 bg-[#111827] border border-[#374151] rounded-xl text-white focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 pt-2", __source: { fileName: "", lineNumber: 338, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 bg-[#3b82f6] text-white px-6 py-3 rounded-xl hover:bg-[#2563eb] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowLogin(false), className: "flex-1 bg-[#374151] text-white px-6 py-3 rounded-xl hover:bg-[#4b5563] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 345, columnNumber: 19 }, __self: this }, "Cancel"))))), showRegister && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 359, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f2937] p-8 rounded-2xl max-w-sm mx-4 border border-[#374151] shadow-2xl", __source: { fileName: "", lineNumber: 360, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6 text-white", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, "Create Account"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegister, className: "space-y-6", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 365, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: name, onChange: (e)=>setName(e.target.value), className: "w-full p-3 bg-[#111827] border border-[#374151] rounded-xl text-white focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 369, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 378, columnNumber: 19 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-3 bg-[#111827] border border-[#374151] rounded-xl text-white focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 381, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full p-3 bg-[#111827] border border-[#374151] rounded-xl text-white focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 pt-2", __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 bg-[#059669] text-white px-6 py-3 rounded-xl hover:bg-[#047857] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 402, columnNumber: 19 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowRegister(false), className: "flex-1 bg-[#374151] text-white px-6 py-3 rounded-xl hover:bg-[#4b5563] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, "Cancel"))))), showUpgrade && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 422, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f2937] p-6 rounded-lg max-w-sm mx-4", __source: { fileName: "", lineNumber: 423, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 424, columnNumber: 15 }, __self: this }, "Upgrade to Pro"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-300", __source: { fileName: "", lineNumber: 427, columnNumber: 15 }, __self: this }, "Remove ads and support development for just $8.99/year"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 430, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ try { setProcessingPayment(true); const response = await fetch("/api/create-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: user.id, email: user.email }) }); const data = await response.json(); if (data.url) { window.location.href = data.url; } } catch (error) { alert("Payment processing failed. Please try again."); } finally{ setProcessingPayment(false); } }, disabled: processingPayment, className: "flex-1 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, processingPayment ? "Processing..." : "Upgrade Now"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUpgrade(false), className: "flex-1 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 462, columnNumber: 17 }, __self: this }, "Maybe Later")))), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-center mt-8 mb-8 font-inter bg-gradient-to-r from-[#60a5fa] to-[#34d399] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 473, columnNumber: 9 }, __self: this }, "Money Not Spent 💰", /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-bold text-[#34d399] font-inter mt-8", __source: { fileName: "", lineNumber: 475, columnNumber: 11 }, __self: this }, "$", getAnnualTotal().toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] text-xl mt-4", __source: { fileName: "", lineNumber: 478, columnNumber: 11 }, __self: this }, "Money Saved This Year")), !goal && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 484, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGoalForm(true), className: "bg-[#3b82f6] text-white px-6 py-3 rounded-xl hover:bg-[#2563eb] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 485, columnNumber: 13 }, __self: this }, "Set a Savings Goal")), !goal && showGoalForm && /*#__PURE__*/ React.createElement("form", { onSubmit: handleGoalSubmit, className: "mb-6 space-y-4 bg-gradient-to-r from-[#1e3a8a] to-[#1e40af] p-6 rounded-2xl border border-[#3b82f6] shadow-lg", __source: { fileName: "", lineNumber: 495, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 499, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 500, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-2", __source: { fileName: "", lineNumber: 501, columnNumber: 17 }, __self: this }, "Goal Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: goalName, onChange: (e)=>setGoalName(e.target.value), placeholder: "e.g. New Car, Vacation", className: "w-full p-3 bg-[#f8fafc] border-2 border-[#3b82f6] rounded-xl text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-[#3b82f6] outline-none text-lg shadow-inner", required: true, __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3", __source: { fileName: "", lineNumber: 513, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-2", __source: { fileName: "", lineNumber: 514, columnNumber: 17 }, __self: this }, "Target Amount ($)"), /*#__PURE__*/ React.createElement("input", { type: "text", value: goalAmount, onChange: (e)=>setGoalAmount(e.target.value.replace(/[^0-9.$,]/g, "")), placeholder: "0.00", className: "w-full p-3 bg-[#f8fafc] border-2 border-[#3b82f6] rounded-xl text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-[#3b82f6] outline-none text-lg shadow-inner", required: true, __source: { fileName: "", lineNumber: 517, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 pt-2", __source: { fileName: "", lineNumber: 529, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 bg-[#f8fafc] text-[#1e3a8a] px-6 py-3 rounded-xl hover:bg-white transition-all duration-200 text-lg font-medium shadow-lg hover:shadow-xl", __source: { fileName: "", lineNumber: 530, columnNumber: 15 }, __self: this }, "Set Goal"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowGoalForm(false), className: "flex-1 bg-[#0f172a] text-white px-6 py-3 rounded-xl hover:bg-[#1e3a8a] transition-all duration-200 text-lg font-medium shadow-lg hover:shadow-xl", __source: { fileName: "", lineNumber: 536, columnNumber: 15 }, __self: this }, "Cancel"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 547, columnNumber: 9 }, __self: this }, goal && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-8 bg-gradient-to-r from-[#1e3a8a] to-[#1e40af] rounded-2xl shadow-lg border border-[#3b82f6] relative overflow-hidden", __source: { fileName: "", lineNumber: 549, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#60a5fa] to-[#34d399]", __source: { fileName: "", lineNumber: 550, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-8", __source: { fileName: "", lineNumber: 551, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 552, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#60a5fa] flex items-center justify-center", __source: { fileName: "", lineNumber: 553, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flag text-2xl text-white", __source: { fileName: "", lineNumber: 554, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-3xl text-white", __source: { fileName: "", lineNumber: 556, columnNumber: 19 }, __self: this }, goal.name)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGoalDeleteConfirm(true), className: "text-[#e2e8f0] hover:text-[#ef4444] transition-colors duration-200", __source: { fileName: "", lineNumber: 560, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times-circle text-2xl", __source: { fileName: "", lineNumber: 564, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 567, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#0f172a]/50 rounded-xl backdrop-blur-sm", __source: { fileName: "", lineNumber: 568, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8]", __source: { fileName: "", lineNumber: 569, columnNumber: 19 }, __self: this }, "Target Amount"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 570, columnNumber: 19 }, __self: this }, "$", goal.amount.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#0f172a]/50 rounded-xl backdrop-blur-sm", __source: { fileName: "", lineNumber: 574, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8]", __source: { fileName: "", lineNumber: 575, columnNumber: 19 }, __self: this }, "Money Saved"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#34d399]", __source: { fileName: "", lineNumber: 576, columnNumber: 19 }, __self: this }, "$", total.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#0f172a]/50 rounded-xl backdrop-blur-sm", __source: { fileName: "", lineNumber: 580, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] text-left", __source: { fileName: "", lineNumber: 581, columnNumber: 19 }, __self: this }, "Money Saved with Interest"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#60a5fa]", __source: { fileName: "", lineNumber: 584, columnNumber: 19 }, __self: this }, "$", Math.round(calculateFutureValue(1)).toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "w-full h-3 bg-[#0f172a] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 588, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#60a5fa] to-[#34d399] transition-all duration-500", style: { width: `${Math.min(total / goal.amount * 100, 100)}%` }, __source: { fileName: "", lineNumber: 589, columnNumber: 19 }, __self: this })), items.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#0f172a]/50 rounded-xl backdrop-blur-sm", __source: { fileName: "", lineNumber: 598, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8]", __source: { fileName: "", lineNumber: 599, columnNumber: 23 }, __self: this }, "Estimated Completion"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 600, columnNumber: 23 }, __self: this }, getEstimatedGoalDate())), /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] text-sm mt-4", __source: { fileName: "", lineNumber: 604, columnNumber: 21 }, __self: this }, "At your current savings rate of $", getMonthlyAverage().toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 }), "/month"))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8 space-y-6 bg-[#111827] p-6 rounded-2xl border border-[#374151]", __source: { fileName: "", lineNumber: 618, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-2xl mb-4 text-white", __source: { fileName: "", lineNumber: 622, columnNumber: 11 }, __self: this }, "Add New Item"), /*#__PURE__*/ React.createElement("p", { className: "text-[#94a3b8] mb-6", __source: { fileName: "", lineNumber: 623, columnNumber: 11 }, __self: this }, "Track money saved when you choose to skip unnecessary purchases. Turn small decisions into big wins!"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 627, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 628, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 629, columnNumber: 15 }, __self: this }, "Item Description"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemName", value: itemName, onChange: (e)=>setItemName(e.target.value), placeholder: "e.g. Coffee, New Gadget", className: "w-full p-3 bg-white border border-[#374151] rounded-xl text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 632, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3", __source: { fileName: "", lineNumber: 642, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 643, columnNumber: 15 }, __self: this }, "Amount ($)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "amount", value: amount, onChange: (e)=>setAmount(e.target.value.replace(/[^0-9.$,]/g, "")), placeholder: "0.00", className: "w-full p-3 bg-white border border-[#374151] rounded-xl text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-[#60a5fa] outline-none text-lg", required: true, __source: { fileName: "", lineNumber: 646, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-3 bg-[#1f2937] p-4 rounded-xl border border-[#374151]", __source: { fileName: "", lineNumber: 659, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "recurring", checked: isRecurring, onChange: (e)=>setIsRecurring(e.target.checked), className: "w-5 h-5 mt-1 rounded border-gray-300 text-[#3b82f6] focus:ring-[#60a5fa]", __source: { fileName: "", lineNumber: 660, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 667, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "recurring", className: "font-medium text-white", __source: { fileName: "", lineNumber: 668, columnNumber: 15 }, __self: this }, "Monthly Recurring"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 671, columnNumber: 15 }, __self: this }, "For example: $5 coffee every month = $60 saved per year"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#059669] text-white px-6 py-4 rounded-xl hover:bg-[#047857] transition-all duration-200 text-lg font-medium", __source: { fileName: "", lineNumber: 676, columnNumber: 11 }, __self: this }, "Add Savings")), showConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 685, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg max-w-sm mx-4", __source: { fileName: "", lineNumber: 686, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 687, columnNumber: 15 }, __self: this }, "Are you sure?"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 688, columnNumber: 15 }, __self: this }, "This will delete all your saved items and reset your total to zero."), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 692, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearHistory, className: "flex-1 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 693, columnNumber: 17 }, __self: this }, "Yes, Clear History"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfirm(false), className: "flex-1 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 699, columnNumber: 17 }, __self: this }, "Cancel")))), showDeleteConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 711, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f2937] p-6 rounded-xl max-w-sm mx-4 border border-[#374151]", __source: { fileName: "", lineNumber: 712, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 713, columnNumber: 15 }, __self: this }, "Delete Item?"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-300", __source: { fileName: "", lineNumber: 716, columnNumber: 15 }, __self: this }, "Are you sure you want to delete this item?"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 719, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ handleDelete(itemToDelete); setShowDeleteConfirm(false); }, className: "flex-1 bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 720, columnNumber: 17 }, __self: this }, "Delete"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDeleteConfirm(false), className: "flex-1 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600", __source: { fileName: "", lineNumber: 729, columnNumber: 17 }, __self: this }, "Cancel")))), showGoalDeleteConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 741, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f2937] p-6 rounded-xl max-w-sm mx-4 border border-[#374151]", __source: { fileName: "", lineNumber: 742, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 743, columnNumber: 15 }, __self: this }, "Delete Goal?"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-300", __source: { fileName: "", lineNumber: 746, columnNumber: 15 }, __self: this }, "Are you sure you want to delete this goal?"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 749, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ clearGoal(); setShowGoalDeleteConfirm(false); }, className: "flex-1 bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 750, columnNumber: 17 }, __self: this }, "Delete"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGoalDeleteConfirm(false), className: "flex-1 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600", __source: { fileName: "", lineNumber: 759, columnNumber: 17 }, __self: this }, "Cancel")))), items.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8 mb-8", __source: { fileName: "", lineNumber: 771, columnNumber: 11 }, __self: this }, Object.keys(monthlyTotals).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] rounded-3xl shadow-xl border border-[#334155] p-8 hover:border-[#3b82f6] transition-colors duration-300", __source: { fileName: "", lineNumber: 773, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl mb-4 text-white", __source: { fileName: "", lineNumber: 774, columnNumber: 17 }, __self: this }, "Monthly Summary"), /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] mb-6", __source: { fileName: "", lineNumber: 777, columnNumber: 17 }, __self: this }, "Totals including annualized value of recurring payments"), Object.entries(monthlyTotals).map(([month, total])=>/*#__PURE__*/ React.createElement("div", { key: month, className: "flex justify-between items-center p-4 bg-[#0f172a] rounded-2xl mb-3 hover:bg-[#1e3a8a] transition-all duration-300 border border-[#334155]", __source: { fileName: "", lineNumber: 781, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#e2e8f0] whitespace-nowrap", __source: { fileName: "", lineNumber: 785, columnNumber: 21 }, __self: this }, month), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#34d399]", __source: { fileName: "", lineNumber: 788, columnNumber: 21 }, __self: this }, "$", total.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] rounded-3xl shadow-xl border border-[#334155] p-8 hover:border-[#3b82f6] transition-colors duration-300", __source: { fileName: "", lineNumber: 800, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-2xl mb-4 text-white", __source: { fileName: "", lineNumber: 801, columnNumber: 15 }, __self: this }, "Future Value Calculator"), /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] mb-6", __source: { fileName: "", lineNumber: 804, columnNumber: 15 }, __self: this }, "See how your money saved could grow with compound interest"), /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex flex-col gap-2", __source: { fileName: "", lineNumber: 807, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 808, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-[#e2e8f0] font-medium", __source: { fileName: "", lineNumber: 809, columnNumber: 19 }, __self: this }, "Annual Return Rate:"), /*#__PURE__*/ React.createElement("span", { className: "text-[#34d399] font-bold", __source: { fileName: "", lineNumber: 812, columnNumber: 19 }, __self: this }, returnRate, "%")), /*#__PURE__*/ React.createElement("input", { type: "range", value: returnRate, onChange: (e)=>setReturnRate(parseFloat(e.target.value)), className: "w-full h-2 bg-[#334155] rounded-lg appearance-none cursor-pointer accent-[#3b82f6]", min: "0", max: "15", step: "0.5", __source: { fileName: "", lineNumber: 816, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 826, columnNumber: 15 }, __self: this }, [ 1, 5, 10, 20 ].map((years)=>/*#__PURE__*/ React.createElement("div", { key: years, className: "flex justify-between items-center p-4 bg-[#0f172a] rounded-2xl hover:bg-[#1e3a8a] transition-all duration-300 border border-[#334155]", __source: { fileName: "", lineNumber: 828, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#e2e8f0]", __source: { fileName: "", lineNumber: 832, columnNumber: 21 }, __self: this }, years, " Year", years > 1 ? "s" : ""), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#34d399]", __source: { fileName: "", lineNumber: 835, columnNumber: 21 }, __self: this }, "$", calculateFutureValue(years).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-sm text-[#94a3b8] border-t border-[#334155] pt-4", __source: { fileName: "", lineNumber: 845, columnNumber: 15 }, __self: this }, "Over the past decade, the S&P 500 index has delivered an average annual total return of approximately 11.9%, which includes both price appreciation and dividends reinvested. After adjusting for inflation, this equates to an average annual return of about 8.9%."))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 mt-8", __source: { fileName: "", lineNumber: 855, columnNumber: 11 }, __self: this }, "No items saved yet. Add your first saving above!"), items.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] rounded-3xl shadow-xl border border-[#334155] p-8 hover:border-[#3b82f6] transition-colors duration-300", __source: { fileName: "", lineNumber: 861, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl mb-4 text-white", __source: { fileName: "", lineNumber: 862, columnNumber: 13 }, __self: this }, "Saved Items"), /*#__PURE__*/ React.createElement("div", { className: "text-[#94a3b8] mb-6", __source: { fileName: "", lineNumber: 863, columnNumber: 13 }, __self: this }, "List of one-time and recurring money saved from items not purchased"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 867, columnNumber: 13 }, __self: this }, [ ...items ].sort((a, b)=>a.value - b.value).map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col sm:flex-row justify-between p-5 bg-[#0f172a] rounded-2xl hover:bg-[#1e3a8a] transition-all duration-300 border border-[#334155]", __source: { fileName: "", lineNumber: 871, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 875, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#e2e8f0] text-lg block", __source: { fileName: "", lineNumber: 876, columnNumber: 23 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:items-end gap-2 mt-2 sm:mt-0", __source: { fileName: "", lineNumber: 880, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 justify-between w-full", __source: { fileName: "", lineNumber: 881, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 882, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#94a3b8] whitespace-nowrap", __source: { fileName: "", lineNumber: 883, columnNumber: 27 }, __self: this }, item.date), /*#__PURE__*/ React.createElement("span", { className: "text-[#34d399] font-medium whitespace-nowrap", __source: { fileName: "", lineNumber: 886, columnNumber: 27 }, __self: this }, "$", item.value.toLocaleString(), item.recurring ? "/mo" : "")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setItemToDelete(index); setShowDeleteConfirm(true); }, className: "text-[#94a3b8] hover:text-[#ef4444] transition-colors duration-300 ml-[-10px]", __source: { fileName: "", lineNumber: 891, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 898, columnNumber: 27 }, __self: this }))), item.recurring && /*#__PURE__*/ React.createElement("span", { className: "text-[#60a5fa] text-sm", __source: { fileName: "", lineNumber: 902, columnNumber: 25 }, __self: this }, "$", item.annualizedValue.toLocaleString(), " yearly")))))), !user?.isPro && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 mt-6 text-center", __source: { fileName: "", lineNumber: 914, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 915, columnNumber: 13 }, __self: this }, "Advertisement Space")))); }

Money Not Spent 💰$0Money Saved This Year

Add New Item

Money Not Spent 💰
$0
Money Saved This Year