function MainComponent() { const [steps, setSteps] = React.useState([ { name: '', description: '', time: '', owner: '', decisionPoint: false } ]); const [processName, setProcessName] = React.useState(''); const [processDescription, setProcessDescription] = React.useState(''); const handleAddStep = ()=>{ setSteps([ ...steps, { name: '', description: '', time: '', owner: '', decisionPoint: false } ]); }; const handleRemoveStep = (index)=>{ const newSteps = steps.filter((_, i)=>i !== index); setSteps(newSteps); }; const handleInputChange = (index, field, value)=>{ const newSteps = [ ...steps ]; newSteps[index][field] = value; setSteps(newSteps); }; const handleDecisionPointChange = (index)=>{ const newSteps = [ ...steps ]; newSteps[index].decisionPoint = !newSteps[index].decisionPoint; setSteps(newSteps); }; return /*#__PURE__*/ React.createElement("div", { className: "flex font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Easymap"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Overview")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Processes")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Projects")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Project files")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Support")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-sm text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path-to-user-avatar.jpg", alt: "User avatar", className: "w-[90px] h-[90px] rounded-full mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm mt-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Tuhel Rana"))), /*#__PURE__*/ React.createElement("div", { className: "w-3/4 p-4 bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Editor")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded-lg mr-2 w-[300mm]", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "New Process"), /*#__PURE__*/ React.createElement("button", { className: "bg-black text-white py-2 px-4 rounded-lg w-[300mm]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Edit Existing Process")), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Process Input"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Process Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 mt-2 border rounded", value: processName, onChange: (e)=>setProcessName(e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("table", { className: "w-full mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, "Step #"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, "Step Name"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Owner"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "Decision Point"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "Action"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, steps.map((step, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border p-2", value: step.name, onChange: (e)=>handleInputChange(index, 'name', e.target.value), __source: { fileName: "", lineNumber: 81, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border p-2", value: step.description, onChange: (e)=>handleInputChange(index, 'description', e.target.value), __source: { fileName: "", lineNumber: 82, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border p-2", value: step.time, onChange: (e)=>handleInputChange(index, 'time', e.target.value), __source: { fileName: "", lineNumber: 83, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border p-2", value: step.owner, onChange: (e)=>handleInputChange(index, 'owner', e.target.value), __source: { fileName: "", lineNumber: 84, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "border p-2", checked: step.decisionPoint, onChange: ()=>handleDecisionPointChange(index), __source: { fileName: "", lineNumber: 85, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-green-500 mr-2", onClick: handleAddStep, __source: { fileName: "", lineNumber: 87, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 87, columnNumber: 87 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-500", onClick: ()=>handleRemoveStep(index), __source: { fileName: "", lineNumber: 88, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 88, columnNumber: 96 }, __self: this }))))))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 border-2 border-blue-500 text-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Save Process"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Flow Diagram"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full h-[500px] bg-[#e9ecef] rounded-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Documentation"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, processName && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-md font-bold", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, processName), /*#__PURE__*/ React.createElement("table", { className: "w-full mt-4 border", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 110, columnNumber: 23 }, __self: this }, "Step"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 111, columnNumber: 23 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 112, columnNumber: 23 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 113, columnNumber: 23 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 114, columnNumber: 23 }, __self: this }, "Owner"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, steps.map((step, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 119, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 120, columnNumber: 25 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 121, columnNumber: 25 }, __self: this }, step.name), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 122, columnNumber: 25 }, __self: this }, step.description), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }, step.time), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 124, columnNumber: 25 }, __self: this }, step.owner))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, "Total Steps: ", steps.length))))))); }