function MainComponent() { const [todo, setTodo] = React.useState([]); const [inProgress, setInProgress] = React.useState([]); const [done, setDone] = React.useState([]); const [loading, setLoading] = React.useState(false); const dragItem = React.useRef(); React.useEffect(()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "think of the first 3 tasks for my goal" } ], system_prompt: 'Provide three tasks for starting a new project' }) }).then((response)=>response.json()).then((data)=>{ if (data.status) { setTodo((prev)=>[ ...prev, ...data.result.split('\n').filter((task)=>task) ]); } }).finally(()=>setLoading(false)); }, []); function handleDragStart(e, item, from) { dragItem.current = { item, from }; } function handleDragOver(e) { e.preventDefault(); } function handleDrop(e, to) { const { item, from } = dragItem.current; handleMove(item, from, to); dragItem.current = null; } function handleAdd(task, setTask) { const newTask = prompt("Enter your task"); if (newTask) setTask((prev)=>[ ...prev, newTask ]); } function handleMove(task, from, to) { const fromTasks = [ ...from ]; const toTasks = [ ...to, task ]; const taskIndex = fromTasks.indexOf(task); fromTasks.splice(taskIndex, 1); if (from === todo) { setTodo(fromTasks); if (to === inProgress) setInProgress(toTasks); else setDone(toTasks); } else if (from === inProgress) { setInProgress(fromTasks); if (to === todo) setTodo(toTasks); else setDone(toTasks); } else { setDone(fromTasks); if (to === todo) setTodo(toTasks); else setInProgress(toTasks); } } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-full p-4 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "Jocelyn's Kanban Board"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 18 }, __self: this }, "Loading tasks...") : /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 overflow-x-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none w-[300px] bg-[#f0f0f0] p-4 rounded-lg shadow-md", onDragOver: handleDragOver, onDrop: (e)=>handleDrop(e, todo), __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "To Do", /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>handleAdd(todo, setTodo), className: "text-blue-500 ml-2", __source: { fileName: "", lineNumber: 82, columnNumber: 76 }, __self: this }, "➕")), todo.map((item, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "bg-white p-2 rounded shadow cursor-pointer", draggable: true, onDragStart: (e)=>handleDragStart(e, item, todo), __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, item))), /*#__PURE__*/ React.createElement("div", { className: "flex-none w-[300px] bg-[#f0f0f0] p-4 rounded-lg shadow-md", onDragOver: handleDragOver, onDrop: (e)=>handleDrop(e, inProgress), __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "In Progress", /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>handleAdd(inProgress, setInProgress), className: "text-blue-500 ml-2", __source: { fileName: "", lineNumber: 92, columnNumber: 82 }, __self: this }, "➕")), inProgress.map((item, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "bg-white p-2 rounded shadow cursor-pointer", draggable: true, onDragStart: (e)=>handleDragStart(e, item, inProgress), __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, item))), /*#__PURE__*/ React.createElement("div", { className: "flex-none w-[300px] bg-[#f0f0f0] p-4 rounded-lg shadow-md", onDragOver: handleDragOver, onDrop: (e)=>handleDrop(e, done), __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Done", /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>handleAdd(done, setDone), className: "text-blue-500 ml-2", __source: { fileName: "", lineNumber: 102, columnNumber: 75 }, __self: this }, "➕")), done.map((item, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "bg-white p-2 rounded shadow cursor-pointer", draggable: true, onDragStart: (e)=>handleDragStart(e, item, done), __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, item))))); }

Jocelyn's Kanban Board

To Do➕

In Progress➕

Done➕