function MainComponent() { const [isOpen, setIsOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [metallurgicalBalance, setMetallurgicalBalance] = React.useState({ rougher: 1, cleaner: 1, recleaner: 1, scavenger: 1 }); const [elements, setElements] = React.useState([]); const [balanceSheet, setBalanceSheet] = React.useState([]); const [availableElements, setAvailableElements] = React.useState([]); const toggleMenu = ()=>setIsOpen(!isOpen); const fetchElements = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'List of metallic elements from the periodic table' } ], system_prompt: 'Provide a list of elements', max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status && data.result) { setAvailableElements(data.result.split(', ')); } } catch (error) { console.error(error); } finally{ setIsLoading(false); } }; React.useEffect(()=>{ fetchElements(); }, []); const handleStageChange = (stage, value)=>{ setMetallurgicalBalance({ ...metallurgicalBalance, [stage]: Number(value) }); }; const handleElementSelection = (event, element)=>{ const newElements = event.target.checked ? [ ...elements, element ] : elements.filter((el)=>el !== element); setElements(newElements); createBalanceSheet(newElements, metallurgicalBalance); }; const createBalanceSheet = (selectedElements, stages)=>{ const stagesKeys = Object.keys(stages); const totalFeedMass = 100; // placeholder for total feed mass value const totalFeedGrade = 1; // placeholder for total feed grade value const newBalanceSheet = selectedElements.map((element)=>({ element, stages: stagesKeys.map((stage)=>({ stage, mass: 0, grade: 0, get massProduct () { return this.mass * this.grade; }, get recovery () { return totalFeedMass && totalFeedGrade ? this.mass * this.grade / (totalFeedMass * totalFeedGrade) * 100 : 0; } })) })); setBalanceSheet(newBalanceSheet); }; React.useEffect(()=>{ createBalanceSheet(elements, metallurgicalBalance); }, [ metallurgicalBalance, elements ]); function StageInputs({ stage, label }) { return /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, label), /*#__PURE__*/ React.createElement("input", { type: "number", name: stage, min: "1", max: "10", value: metallurgicalBalance[stage], onChange: (e)=>handleStageChange(stage, e.target.value), className: "w-full px-3 py-1 border text-[#333] rounded-md font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })); } function ElementCheckbox({ element }) { return /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "elements", value: element, checked: elements.includes(element), onChange: (e)=>handleElementSelection(e, element), className: "form-checkbox text-blue-500", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, element)); } function BalanceSheetCell({ stage, elementIndex, field }) { return /*#__PURE__*/ React.createElement("input", { type: "number", name: `${balanceSheet[elementIndex].element}-${stage.stage}-${field}`, value: stage[field], onChange: (e)=>{ const newBalanceSheet = [ ...balanceSheet ]; const stageIndex = newBalanceSheet[elementIndex].stages.findIndex((el)=>el.stage === stage.stage); newBalanceSheet[elementIndex].stages[stageIndex][field] = Number(e.target.value); setBalanceSheet(newBalanceSheet); }, className: "w-full px-3 py-1 border text-[#333] rounded-md font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { "aria-label": "Toggle menu", className: "fixed top-4 left-4 z-30 flex items-center justify-center w-10 h-10 bg-[#333] text-white rounded-full focus:outline-none", onClick: toggleMenu, __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 h-full w-[300px] bg-white shadow-md transform transition-transform ${isOpen ? 'translate-x-0' : '-translate-x-full'} z-20`, __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { "aria-label": "Close menu", className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center text-[#333] rounded-full", onClick: toggleMenu, __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 space-y-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, Object.keys(metallurgicalBalance).map((stage)=>/*#__PURE__*/ React.createElement(StageInputs, { key: stage, stage: stage, label: `Quantas etapas ${stage}?`, __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start overflow-y-auto h-[calc(100%-150px)]", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Carregando elementos...") : availableElements.map((element, index)=>/*#__PURE__*/ React.createElement(ElementCheckbox, { key: index, element: element, __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 top-0 left-300px h-full w-[calc(100%-300px)] bg-white shadow-md overflow-auto`, __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "Elemento"), Object.keys(metallurgicalBalance).map((stage)=>/*#__PURE__*/ React.createElement("th", { key: stage, colSpan: "2", className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, stage)), /*#__PURE__*/ React.createElement("th", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, "Produto Massa"), /*#__PURE__*/ React.createElement("th", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, "Recuperação (%)"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, balanceSheet.map((data, elementIndex)=>/*#__PURE__*/ React.createElement("tr", { key: elementIndex, __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, data.element), data.stages.map((stage)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: stage.stage, __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 199, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement(BalanceSheetCell, { elementIndex: elementIndex, stage: stage, field: "mass", __source: { fileName: "", lineNumber: 200, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement(BalanceSheetCell, { elementIndex: elementIndex, stage: stage, field: "grade", __source: { fileName: "", lineNumber: 203, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("td", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, data.stages.reduce((acc, stage)=>acc + stage.massProduct, 0).toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "px-3 py-2 font-roboto", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, data.stages.length > 0 ? data.stages[0].recovery.toFixed(2) : '0.00')))))), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-black bg-opacity-50 z-10 ${isOpen ? 'block' : 'hidden'}`, onClick: toggleMenu, __source: { fileName: "", lineNumber: 218, columnNumber: 7 }, __self: this })); }