function MainComponent() { const [leads, setLeads] = React.useState([]); const [currentLead, setCurrentLead] = React.useState({}); const [editing, setEditing] = React.useState(false); const [viewing, setViewing] = React.useState(false); const handleInputChange = (event)=>{ setCurrentLead({ ...currentLead, [event.target.name]: event.target.value }); }; const submitLead = (event)=>{ event.preventDefault(); if (editing) { setLeads(leads.map((lead)=>lead.id === currentLead.id ? currentLead : lead)); setEditing(false); } else { setLeads([ ...leads, { ...currentLead, id: leads.length + 1 } ]); } setCurrentLead({}); }; const editLead = (id)=>{ const lead = leads.find((lead)=>lead.id === id); setCurrentLead(lead); setViewing(false); setEditing(true); }; const viewLead = (id)=>{ const lead = leads.find((lead)=>lead.id === id); setCurrentLead(lead); setViewing(true); setEditing(false); }; const closeView = ()=>{ setViewing(false); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-between", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-[400px] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: submitLead, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-roboto mb-2", htmlFor: "customerName", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Customer Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "customerName", name: "customerName", type: "text", required: true, value: currentLead.customerName || "", onChange: handleInputChange, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-roboto mb-2", htmlFor: "progressStatus", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Lead Progress Status"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "progressStatus", name: "progressStatus", type: "text", required: true, value: currentLead.progressStatus || "", onChange: handleInputChange, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-roboto mb-2", htmlFor: "details", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Additional Details"), /*#__PURE__*/ React.createElement("textarea", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "details", name: "details", rows: "3", required: true, value: currentLead.details || "", onChange: handleInputChange, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, editing ? "Update Lead" : "Add Lead")))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-[calc(100%-400px)] mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: viewing ? "block" : "hidden", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeView, className: "bg-red-500 hover:bg-red-700 text-white font-roboto py-2 px-4 mb-4 rounded", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Close View"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-700 text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Viewing Lead: ", currentLead.customerName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Status: ", currentLead.progressStatus), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "Details: ", currentLead.details))), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full leading-normal", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "font-roboto text-left py-2 px-4 bg-gray-100", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "font-roboto text-left py-2 px-4 bg-gray-100", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "font-roboto text-left py-2 px-4 bg-gray-100", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, leads.map((lead)=>/*#__PURE__*/ React.createElement("tr", { key: lead.id, __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-roboto text-left py-2 px-4", __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }, lead.customerName), /*#__PURE__*/ React.createElement("td", { className: "font-roboto text-left py-2 px-4", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, lead.progressStatus), /*#__PURE__*/ React.createElement("td", { className: "font-roboto text-left py-2 px-4", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>viewLead(lead.id), className: "text-blue-600 hover:text-blue-900 mx-2", __source: { fileName: "", lineNumber: 135, columnNumber: 23 }, __self: this }, "🔍"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>editLead(lead.id), className: "text-green-600 hover:text-green-900 mx-2", __source: { fileName: "", lineNumber: 141, columnNumber: 23 }, __self: this }, "✏️")))))))))); }