function EntryForm() { const [formData, setFormData] = useState({ server_name: "", tips: "", base_pay: "", date: "", hours_worked: "" }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-8 rounded-lg shadow-lg w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#ffffff] text-2xl font-roboto mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Server Income Entry"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "server_name", placeholder: "Server Name", value: formData.server_name, onChange: handleChange, className: "w-full bg-[#2d2d2d] text-[#ffffff] border border-[#3d3d3d] rounded px-4 py-2 focus:outline-none focus:border-[#4a90e2]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "tips", placeholder: "Tips ($)", value: formData.tips, onChange: handleChange, className: "w-full bg-[#2d2d2d] text-[#ffffff] border border-[#3d3d3d] rounded px-4 py-2 focus:outline-none focus:border-[#4a90e2]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "base_pay", placeholder: "Base Pay ($)", value: formData.base_pay, onChange: handleChange, className: "w-full bg-[#2d2d2d] text-[#ffffff] border border-[#3d3d3d] rounded px-4 py-2 focus:outline-none focus:border-[#4a90e2]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: formData.date, onChange: handleChange, className: "w-full bg-[#2d2d2d] text-[#ffffff] border border-[#3d3d3d] rounded px-4 py-2 focus:outline-none focus:border-[#4a90e2]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "hours_worked", placeholder: "Hours Worked", value: formData.hours_worked, onChange: handleChange, className: "w-full bg-[#2d2d2d] text-[#ffffff] border border-[#3d3d3d] rounded px-4 py-2 focus:outline-none focus:border-[#4a90e2]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4a90e2] text-white py-2 px-4 rounded hover:bg-[#357abd] transition-colors duration-200", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Submit Income"))); } function EntryFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen p-8", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EntryForm, { __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this })); } function DataCard({ income = 75000, change = "+12.5%", period = "Annual" }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-6 rounded-xl shadow-lg w-[300px]", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("span", { className: "text-green-400 font-roboto text-sm", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, change)), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto text-2xl font-bold", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "$", income.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 font-roboto text-sm", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, period)); } function DataCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#121212] min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DataCard, { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(DataCard, { income: 120000, change: "+15.3%", period: "Yearly", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(DataCard, { income: 8500, change: "+5.2%", period: "Monthly", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [totalIncome, setTotalIncome] = useState(0); const [incomeSources, setIncomeSources] = useState([ { id: 1, source: "Freelance Work", amount: 2500, date: "2024-01-15" }, { id: 2, source: "Consulting", amount: 1800, date: "2024-01-20" }, { id: 3, source: "Side Project", amount: 950, date: "2024-01-25" } ]); useEffect(()=>{ const total = incomeSources.reduce((sum, source)=>sum + source.amount, 0); setTotalIncome(total); }, [ incomeSources ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-6", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white font-inter mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Income Dashboard"), /*#__PURE__*/ React.createElement("p", { className: "text-[#9ca3af] font-inter", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Track your earnings and income sources")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2d2d2d] rounded-xl p-6 mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#9ca3af] font-inter mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Total Earnings"), /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-[#4ade80] font-inter", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "$", totalIncome.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, incomeSources.map((source)=>/*#__PURE__*/ React.createElement("div", { key: source.id, className: "bg-[#2d2d2d] rounded-xl p-6 hover:bg-[#3d3d3d] transition-colors duration-200", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-inter font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, source.source), /*#__PURE__*/ React.createElement("p", { className: "text-[#9ca3af] text-sm font-inter", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, new Date(source.date).toLocaleDateString())), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#4ade80] font-inter", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "$", source.amount.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-[#4ade80] mr-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#9ca3af] text-sm font-inter", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Income Source"))))))); }