function MainComponent() { const [currentTab, setCurrentTab] = React.useState('agentes'); const [agentesData, setAgentesData] = React.useState([ { id: 1, nome: 'John Doe', fantasia: 'Acme Corp', documento: '123.456.789-00', ativo: true } ]); const [formData, setFormData] = React.useState({ nomeFantasia: '', razaoSocial: '', cpfOrCnpj: 'cpf', documento: '' }); const [showDeleteModal, setShowDeleteModal] = React.useState(false); const [agentToDelete, setAgentToDelete] = React.useState(null); const [missingFields, setMissingFields] = React.useState([]); const toggleAtivo = (index)=>{ setAgentesData(agentesData.map((agente, i)=>i === index ? { ...agente, ativo: !agente.ativo } : agente)); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); setMissingFields([]); }; const handleRadioChange = (e)=>{ setFormData({ ...formData, cpfOrCnpj: e.target.value, documento: '' }); setMissingFields([]); }; const handleSubmit = ()=>{ const missing = []; if (!formData.nomeFantasia) missing.push("Nome Fantasia"); if (!formData.razaoSocial) missing.push("Razão Social"); if (!formData.documento) missing.push("Documento"); setMissingFields(missing); if (missing.length > 0) { return; } setAgentesData([ ...agentesData, { id: agentesData.length + 1, nome: formData.razaoSocial, fantasia: formData.nomeFantasia, documento: formData.documento, ativo: true } ]); setCurrentTab('agentes'); }; const showModal = (id)=>{ setShowDeleteModal(true); setAgentToDelete(id); }; const handleDelete = ()=>{ setAgentesData(agentesData.filter((agente)=>agente.id !== agentToDelete)); setShowDeleteModal(false); }; const renderAgenteForm = ()=>/*#__PURE__*/ React.createElement("section", { id: "cadastro-agente", className: "my-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Cadastro de Agente"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Nome Fantasia"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "nomeFantasia", maxLength: "100", value: formData.nomeFantasia, onChange: handleInputChange, className: "w-full p-2 border border-gray-300", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Razão Social"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "razaoSocial", maxLength: "100", value: formData.razaoSocial, onChange: handleInputChange, className: "w-full p-2 border border-gray-300", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Tipo de Documento"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "cpf", name: "cpfOrCnpj", value: "cpf", checked: formData.cpfOrCnpj === 'cpf', onChange: handleRadioChange, className: "mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "cpf", className: "mr-4", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "CPF"), /*#__PURE__*/ React.createElement("input", { type: "radio", id: "cnpj", name: "cpfOrCnpj", value: "cnpj", checked: formData.cpfOrCnpj === 'cnpj', onChange: handleRadioChange, className: "mr-2", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "cnpj", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "CNPJ"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "Documento"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "documento", value: formData.documento, onChange: handleInputChange, className: "w-full p-2 border border-gray-300", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "mt-4 px-6 py-2 bg-green-500 text-white font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, "Gravar"), missingFields.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-500 text-white font-roboto", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "Os seguintes campos estão faltando:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, missingFields.map((field, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, field))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMissingFields([]), className: "mt-2 px-4 py-2 bg-white text-red-500 font-roboto", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "Ok"))); const renderContent = ()=>{ if (currentTab === 'agentes') { return /*#__PURE__*/ React.createElement("section", { id: "agentes", className: "my-8", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Agentes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-6 gap-4 mt-4", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "ID"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Nome"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Fantasia"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "Documento"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "Ativo"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "Ações"), agentesData.map((agente, index)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: agente.id, __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, agente.id), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, agente.nome), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, agente.fantasia), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, agente.documento), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: agente.ativo, onChange: ()=>toggleAtivo(index), __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>showModal(agente.id), className: "text-red-500", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-6 py-2 bg-green-500 text-white font-roboto", onClick: ()=>setCurrentTab('cadastro-agente'), __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "CADASTRAR AGENTE")); } if (currentTab === 'cadastro-agente') { return renderAgenteForm(); } if (currentTab === 'produtos') { return /*#__PURE__*/ React.createElement("section", { id: "produtos", className: "my-8", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto", __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, "Produtos"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "Confira nossa variedade de produtos.")); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 212, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-around", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentTab('agentes'), className: "font-roboto", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, "Agentes"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentTab('produtos'), className: "font-roboto", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, "Produtos"))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 219, columnNumber: 7 }, __self: this }, renderContent(), showDeleteModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-4", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, "Tem certeza que deseja excluir esse agente?"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDelete, className: "mr-2 px-4 py-2 bg-red-500 text-white font-roboto", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, "Sim"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDeleteModal(false), className: "px-4 py-2 bg-gray-300 text-black font-roboto", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "Não")))))); }