function MainComponent() { const [rateExGst, setRateExGst] = React.useState(0); const [additionalDiscount, setAdditionalDiscount] = React.useState(0); const [gstPercent, setGstPercent] = React.useState(0); const [mrp, setMRP] = React.useState(0); const [quantity, setQuantity] = React.useState(0); const [freeQuantity, setFreeQuantity] = React.useState(0); const [results, setResults] = React.useState({ totalRateAfterDiscountExGst: 0, totalPurchaseValueInclGst: 0, totalMRP: 0, totalPurchaseAmount: 0, percentageDiscount: 0 }); const calculateDiscountedValues = ()=>{ const totalRateAfterDiscountExGst = rateExGst - additionalDiscount * rateExGst / 100; const totalPurchaseValueInclGst = totalRateAfterDiscountExGst * (1 + gstPercent / 100); const totalMRP = mrp * (quantity + freeQuantity); const totalPurchaseAmount = totalPurchaseValueInclGst * quantity; const percentageDiscount = (totalMRP - totalPurchaseAmount) / totalMRP * 100; setResults({ totalRateAfterDiscountExGst, totalPurchaseValueInclGst, totalMRP, totalPurchaseAmount, percentageDiscount }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Mobile App Builder"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Rate (Excluding tax)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rateExGst", value: rateExGst, onChange: (e)=>setRateExGst(parseFloat(e.target.value)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Additional Discount from Rate"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "additionalDiscount", value: additionalDiscount, onChange: (e)=>setAdditionalDiscount(parseFloat(e.target.value)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "GST Percentage"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "gstPercent", value: gstPercent, onChange: (e)=>setGstPercent(parseFloat(e.target.value)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "MRP"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "mrp", value: mrp, onChange: (e)=>setMRP(parseFloat(e.target.value)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", value: quantity, onChange: (e)=>setQuantity(parseInt(e.target.value, 10)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Free Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "freeQuantity", value: freeQuantity, onChange: (e)=>setFreeQuantity(parseInt(e.target.value, 10)), className: "w-full px-3 py-2 border border-[#e5e5e5] rounded-md font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: calculateDiscountedValues, className: "w-full bg-[#1a73e8] text-white font-bold py-2 px-4 rounded-md hover:bg-[#1664c1]", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Results:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, Object.entries(results).map(([key, value])=>/*#__PURE__*/ React.createElement("li", { key: key, className: "text-sm text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, `${key}: ${value.toFixed(2)}`)))))); }