function MainComponent() { const [rfqDetails, setRfqDetails] = React.useState({ rfqTitle: '', rfqDescription: '', breakdowns: [], customParameters: {} }); const handleInputChange = (e)=>{ const { name, value } = e.target; if (name.startsWith("parameter")) { const paramName = name.replace("parameter-", ""); setRfqDetails({ ...rfqDetails, customParameters: { ...rfqDetails.customParameters, [paramName]: parseFloat(value) || 0 } }); } else { setRfqDetails({ ...rfqDetails, [name]: value }); } }; const handleFormSubmit = (e)=>{ e.preventDefault(); const generatedBreakdowns = generateBreakdowns(rfqDetails.rfqDescription, rfqDetails.customParameters); setRfqDetails({ ...rfqDetails, breakdowns: generatedBreakdowns }); }; const generateBreakdowns = (description, customParameters)=>{ // This should be replaced with actual logic to generate cost breakdowns based on custom parameters return description.trim().split(' ').filter(Boolean).map((item, index)=>({ item, cost: Math.random() * 1000 * (customParameters.multiplier || 1), explanation: `Base cost modified by custom parameters.` })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-8 p-4 w-full max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "RFQ Advanced Cost Management Tool"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#555] font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Input RFQ details and customize parameters to generate an expanded cost breakdown."), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-3", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rfqTitle", className: "text-[#444] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "RFQ Title:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "rfqTitle", name: "rfqTitle", placeholder: "Enter title", value: rfqDetails.rfqTitle, onChange: handleInputChange, className: "p-2 border rounded text-[#333] font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "rfqDescription", className: "text-[#444] font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Description:"), /*#__PURE__*/ React.createElement("textarea", { id: "rfqDescription", name: "rfqDescription", rows: "4", placeholder: "Enter description", value: rfqDetails.rfqDescription, onChange: handleInputChange, className: "p-2 border rounded text-[#333] font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-[#444] font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Custom Cost Multiplier:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "parameter-multiplier", placeholder: "Enter multiplier (e.g., 1.2)", step: "0.01", value: rfqDetails.customParameters.multiplier || '', onChange: handleInputChange, className: "p-2 border rounded text-[#333] font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1a73e8] text-white px-6 py-2 rounded font-semibold font-roboto hover:bg-[#166cd1] transition-colors", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Generate Breakdown"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500 border border-gray-200", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 font-bold font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "Item"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 font-bold font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Cost"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 font-bold font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "Explanation"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, rfqDetails.breakdowns.map((breakdown, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "bg-white border-b", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-3 font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, breakdown.item), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-3 font-roboto", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, "$", breakdown.cost.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-3 font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, breakdown.explanation)))))))); }