function AddButtonDesign({ text }) { return /*#__PURE__*/ React.createElement("button", { className: "p-2 w-[150px] border border-red-500 bg-red-500 text-black font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function AddButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddButtonDesign, { text: "Adicionar", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AddButtonDesign, { text: "Add", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AddButtonDesign, { text: "Ajouter", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function RedButtonWidget({ label, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "p-2 mx-2 w-[150px] border border-red-500 bg-red-500 text-black font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function RedButtonWidgetStory() { const handleClick = (period)=>{ console.log(`Fetching data for ${period}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RedButtonWidget, { label: "Mensal", onClick: ()=>handleClick('mensal'), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [data, setData] = React.useState(null); const fetchData = async (filterType)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Mostrar gráfico ${filterType}` } ] }) }); const result = await response.json(); setData(result.choices[0].message.content); } catch (error) { console.error("Error fetching data:", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-black text-red-500 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Controle de Finanças"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", placeholder: "Descrição", className: "mb-4 p-2 w-[300px] border border-red-500 bg-black text-red-500 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Valor", className: "mb-4 p-2 w-[300px] border border-red-500 bg-black text-red-500 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "type", className: "mb-4 p-2 w-[300px] border border-red-500 bg-black text-red-500 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "entrada", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Entrada"), /*#__PURE__*/ React.createElement("option", { value: "saida", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Saída")), /*#__PURE__*/ React.createElement(AddButtonDesign, { text: "Adicionar", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(RedButtonWidget, { label: "Anual", onClick: ()=>fetchData('anual'), __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(RedButtonWidget, { label: "Mensal", onClick: ()=>fetchData('mensal'), __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-black border border-red-500 flex items-center justify-center text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "loader", __source: { fileName: "", lineNumber: 54, columnNumber: 22 }, __self: this }) : data)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` .loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #FF0000; width: 20px; height: 20px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }