function MainComponent() { const [selectedYear, setSelectedYear] = useState("2024"); const [title, setTitle] = useState("Five Stars App Solutions"); const [subtitle, setSubtitle] = useState("Income Statement"); const [display, setDisplay] = useState("0"); const [runningTotal, setRunningTotal] = useState("0"); const [memory, setMemory] = useState(0); const [firstNumber, setFirstNumber] = useState(null); const [operation, setOperation] = useState(null); const [newNumber, setNewNumber] = useState(true); const [hasDecimal, setHasDecimal] = useState(false); const [history, setHistory] = useState([]); const [data, setData] = useState({ revenue: { "App Development Services": 450000, "Government Contracts": 180000, "Consulting Services": 120000, Royalties: 95000 }, expenses: { "Sub-contractor Fees": 320000, "Software Licenses": 45000, "Office Rent": 60000, Marketing: 35000, Utilities: 12000, Insurance: 18000, Equipment: 25000, "Professional Development": 15000 } }); const formatNumber = (num)=>{ if (num === "Error") return num; const number = parseFloat(num); if (isNaN(number)) return "0"; const isNegative = number < 0; const formatted = Math.abs(number).toLocaleString("en-US", { minimumFractionDigits: hasDecimal ? 2 : 0, maximumFractionDigits: 8 }); return isNegative ? `(${formatted})` : formatted; }; const totalRevenue = Object.values(data.revenue).reduce((a, b)=>a + b, 0); const totalExpenses = Object.values(data.expenses).reduce((a, b)=>a + b, 0); const netIncome = totalRevenue - totalExpenses; const handlePrint = ()=>{ window.print(); }; const updateAmount = (category, value, type)=>{ const newValue = parseInt(value.replace(/[^0-9]/g, "")) || 0; setData((prev)=>({ ...prev, [type]: { ...prev[type], [category]: newValue } })); }; const updateCategory = (oldCategory, newCategory, type)=>{ setData((prev)=>{ const newData = { ...prev[type] }; const value = newData[oldCategory]; delete newData[oldCategory]; newData[newCategory] = value; return { ...prev, [type]: newData }; }); }; const calculate = (first, second, op)=>{ const a = parseFloat(first); const b = parseFloat(second); let result; switch(op){ case "+": result = a + b; break; case "-": result = a - b; break; case "×": result = a * b; break; case "÷": result = b !== 0 ? a / b : "Error"; break; default: result = b; } return typeof result === "number" ? Number(result.toFixed(8)) : result; }; const handleMemory = (operation)=>{ const currentValue = parseFloat(display); switch(operation){ case "M+": setMemory((prev)=>prev + currentValue); break; case "M-": setMemory((prev)=>prev - currentValue); break; case "MR": setDisplay(memory.toString()); setNewNumber(true); break; case "MC": setMemory(0); break; } }; const [isAuthenticated, setIsAuthenticated] = useState(false); const [password, setPassword] = useState(""); const [authError, setAuthError] = useState(""); const handleLogin = (e)=>{ e.preventDefault(); if (password === "FiveStarsApp001!") { setIsAuthenticated(true); setAuthError(""); } else { setAuthError("Incorrect password"); } }; if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8fafc] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-xl shadow-md max-w-md w-full", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-bold text-gray-800 mb-6 text-center", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Income Statement Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Enter password", className: "w-full p-2 border rounded focus:outline-none focus:border-[#4f46e5]", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), authError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 136, columnNumber: 27 }, __self: this }, authError), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4f46e5] text-white px-4 py-2 rounded-lg hover:bg-[#4338ca] transition-all duration-200", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Login")))); } const handleCalcButton = (value)=>{ if (value === "C") { setDisplay("0"); setRunningTotal("0"); setFirstNumber(null); setOperation(null); setNewNumber(true); setHasDecimal(false); setHistory([]); return; } if ([ "M+", "M-", "MR", "MC" ].includes(value)) { handleMemory(value); return; } if (value === ".") { if (!hasDecimal) { setDisplay((prev)=>prev + "."); setHasDecimal(true); setNewNumber(false); } return; } if ("0123456789".includes(value)) { setDisplay((prev)=>newNumber ? value : prev === "0" && value === "0" ? "0" : prev + value); setNewNumber(false); return; } if ("+-×÷".includes(value)) { const currentNum = parseFloat(display); if (firstNumber === null) { setFirstNumber(currentNum); setRunningTotal(display); setHistory([ `${formatNumber(currentNum)} ${value}` ]); } else { const result = calculate(firstNumber, currentNum, operation); setFirstNumber(result); setRunningTotal(result.toString()); setHistory((prev)=>[ ...prev, `${formatNumber(currentNum)} ${value}` ]); } setOperation(value); setNewNumber(true); setHasDecimal(false); return; } if (value === "=" && operation) { const currentNum = parseFloat(display); const result = calculate(firstNumber, currentNum, operation); const resultStr = result.toString(); setDisplay(resultStr); setRunningTotal(resultStr); setHistory((prev)=>[ ...prev, `${formatNumber(currentNum)} = ${formatNumber(result)}` ]); setFirstNumber(result); setOperation(null); setNewNumber(true); setHasDecimal(resultStr.includes(".")); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 219, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/svg+xml", href: `data:image/svg+xml,`, __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8fafc] p-2 md:p-8 print:bg-white print:p-0", __source: { fileName: "", lineNumber: 226, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6 print:hidden", __source: { fileName: "", lineNumber: 227, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://fivestarsadmin.created.app/", className: "bg-[#4f46e5] text-white px-6 py-3 rounded-lg hover:bg-[#4338ca] transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }), "Back to Admin")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 md:gap-12", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:max-w-4xl bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-10 print:shadow-none", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8 print:hidden", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrint, className: "bg-[#4f46e5] text-white px-6 py-3 rounded-lg hover:bg-[#4338ca] transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-print mr-2", __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }), "Print Statement")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: title, onChange: (e)=>setTitle(e.target.value), className: "text-4xl font-bold font-roboto text-gray-800 mb-3 text-center w-full focus:outline-none focus:border-b-2 border-[#4f46e5] transition-all duration-200", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: subtitle, onChange: (e)=>setSubtitle(e.target.value), className: "text-2xl font-roboto text-gray-600 text-center w-full focus:outline-none focus:border-b-2 border-[#4f46e5] transition-all duration-200 mb-4", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-4", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, "For the Year", /*#__PURE__*/ React.createElement("input", { type: "text", value: selectedYear, onChange: (e)=>setSelectedYear(e.target.value), className: "ml-2 w-24 text-center border-b-2 border-gray-200 focus:outline-none focus:border-[#4f46e5] transition-all duration-200", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mb-4 text-gray-800", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, "Revenue"), Object.entries(data.revenue).map(([category, amount])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "flex justify-between py-2 border-b", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: category, onChange: (e)=>updateCategory(category, e.target.value, "revenue"), className: "text-gray-600 focus:outline-none focus:border-b border-gray-300", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: `${amount.toLocaleString()}`, onChange: (e)=>updateAmount(category, e.target.value, "revenue"), className: "text-right w-32 focus:outline-none focus:border-b border-blue-500", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between py-3 font-semibold", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "Total Revenue"), /*#__PURE__*/ React.createElement("span", { className: "text-green-600", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, "$", totalRevenue.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mb-4 text-gray-800", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, "Expenses"), Object.entries(data.expenses).map(([category, amount])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "flex justify-between py-2 border-b", __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: category, onChange: (e)=>updateCategory(category, e.target.value, "expenses"), className: "text-gray-600 focus:outline-none focus:border-b border-gray-300", __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: `${amount.toLocaleString()}`, onChange: (e)=>updateAmount(category, e.target.value, "expenses"), className: "text-right w-32 focus:outline-none focus:border-b border-blue-500", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between py-3 font-semibold", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, "Total Expenses"), /*#__PURE__*/ React.createElement("span", { className: "text-red-600", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, "$", totalExpenses.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t-2", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between py-3 text-xl font-bold", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, "Net Income"), /*#__PURE__*/ React.createElement("span", { className: netIncome >= 0 ? "text-green-600" : "text-red-600", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }, "$", netIncome.toLocaleString())))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[320px] bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 p-4 md:p-6 h-fit md:sticky md:top-8 print:hidden", __source: { fileName: "", lineNumber: 349, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-[#f1f5f9] rounded-lg p-4 mb-6 shadow-inner", __source: { fileName: "", lineNumber: 350, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 text-right mb-1 max-h-[60px] overflow-y-auto", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, history.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-1", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, entry))), /*#__PURE__*/ React.createElement("div", { className: "text-lg text-gray-600 text-right mb-1", __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, operation && `${formatNumber(runningTotal)} ${operation}`), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-mono text-right font-semibold", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, formatNumber(display))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 md:gap-3", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, [ "MC", "MR", "M-", "M+", "7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "-", "C", "0", ".", "+", "=" ].map((btn)=>/*#__PURE__*/ React.createElement("button", { key: btn, onClick: ()=>handleCalcButton(btn), className: `p-3 md:p-4 rounded-lg text-base md:text-lg font-semibold transform hover:scale-105 transition-all duration-200 ${[ "÷", "×", "-", "+", "=" ].includes(btn) ? "bg-[#4f46e5] text-white hover:bg-[#4338ca] shadow-md hover:shadow-lg" : [ "MC", "MR", "M+", "M-" ].includes(btn) ? "bg-[#6366f1] text-white hover:bg-[#4f46e5] shadow-md hover:shadow-lg text-xs md:text-sm" : btn === "C" ? "bg-[#ef4444] text-white hover:bg-[#dc2626] shadow-md hover:shadow-lg" : "bg-[#f1f5f9] hover:bg-[#e2e8f0] shadow-sm hover:shadow-md"} ${btn === "=" ? "col-span-4" : ""}`, __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, btn))))), /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 mt-8 print:mt-16", __source: { fileName: "", lineNumber: 408, columnNumber: 9 }, __self: this }, "Powered by Five Stars App Solutions"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 412, columnNumber: 9 }, __self: this }, ` @keyframes fadeNumber { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .number-transition { animation: fadeNumber 0.3s ease-out; } input { transition: all 0.2s ease-out; } input:focus { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } button { transition: all 0.2s ease-out; } @media print { @page { margin: 0.5in; } body { print-color-adjust: exact; -webkit-print-color-adjust: exact; } input { border: none !important; } .print\\:hidden { display: none !important; } } `))); }