function MainComponent() { const [productCost, setProductCost] = React.useState(''); const [profitMargin, setProfitMargin] = React.useState(''); const [discountPercent, setDiscountPercent] = React.useState(''); const [priceWithoutVat, setPriceWithoutVat] = React.useState(''); const [priceWithVat, setPriceWithVat] = React.useState(''); const calculatePrice = ()=>{ const cost = parseFloat(productCost); const margin = parseFloat(profitMargin); const discount = cost * (parseFloat(discountPercent) / 100); let finalPriceWithoutVat = margin >= 100 ? cost * margin / 100 + cost - discount : cost / (1 - margin / 100) - discount; finalPriceWithoutVat = Math.round(finalPriceWithoutVat); const finalPriceWithVat = Math.round(finalPriceWithoutVat * 1.19); setPriceWithoutVat(finalPriceWithoutVat.toString()); setPriceWithVat(finalPriceWithVat.toString()); }; return /*#__PURE__*/ React.createElement("div", { className: "relative bg-gradient-to-r from-green-400 to-blue-500 min-h-screen p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-no-repeat bg-[url('/sales-increase-graph.svg')] bg-right-top max-w-xl mx-auto bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl mb-4 text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Proyecto para calcular precios"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "product-cost", className: "block mb-2 text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Costo del producto"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "productCost", value: productCost, onChange: (e)=>setProductCost(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "profit-margin", className: "block mb-2 text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Margen de utilidad (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "profitMargin", value: profitMargin, onChange: (e)=>setProfitMargin(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "discount", className: "block mb-2 text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Descuento (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "discountPercent", value: discountPercent, onChange: (e)=>setDiscountPercent(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: calculatePrice, className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Calcular Precio")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Precio de venta sin IVA"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-md w-full", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "$", priceWithoutVat))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Precio de venta con IVA"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-md w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "$", priceWithVat))))); }