function TaskList({ tasks = [], onReorder }) { const [draggedTask, setDraggedTask] = useState(null); const [filteredTasks, setFilteredTasks] = useState(tasks); const [filters, setFilters] = useState({ priority: "all", status: "all" }); useEffect(()=>{ let result = [ ...tasks ]; if (filters.priority !== "all") { result = result.filter((task)=>task.priority === filters.priority); } if (filters.status !== "all") { result = result.filter((task)=>task.status === filters.status); } setFilteredTasks(result); }, [ tasks, filters ]); const handleDragStart = (task)=>{ setDraggedTask(task); }; const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (targetTask)=>{ if (!draggedTask || draggedTask.id === targetTask.id) return; const newTasks = [ ...filteredTasks ]; const draggedIndex = newTasks.findIndex((task)=>task.id === draggedTask.id); const targetIndex = newTasks.findIndex((task)=>task.id === targetTask.id); newTasks.splice(draggedIndex, 1); newTasks.splice(targetIndex, 0, draggedTask); onReorder?.(newTasks); setDraggedTask(null); }; const isOverdue = (dueDate)=>{ return new Date(dueDate) < new Date(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "px-3 py-2 border rounded", value: filters.priority, onChange: (e)=>setFilters((prev)=>({ ...prev, priority: e.target.value })), __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "All Priorities"), /*#__PURE__*/ React.createElement("option", { value: "high", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "High"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "low", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Low")), /*#__PURE__*/ React.createElement("select", { className: "px-3 py-2 border rounded", value: filters.status, onChange: (e)=>setFilters((prev)=>({ ...prev, status: e.target.value })), __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "All Statuses"), /*#__PURE__*/ React.createElement("option", { value: "todo", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "To Do"), /*#__PURE__*/ React.createElement("option", { value: "inProgress", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("option", { value: "done", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Done"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, filteredTasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, draggable: true, onDragStart: ()=>handleDragStart(task), onDragOver: handleDragOver, onDrop: ()=>handleDrop(task), className: `${isOverdue(task.dueDate) ? "border-2 border-red-500" : ""}`, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))))); } function TaskListStory() { const [tasks, setTasks] = useState([ { id: 1, title: "Complete project proposal", priority: "high", status: "todo", dueDate: "2024-01-01" }, { id: 2, title: "Review code", priority: "medium", status: "inProgress", dueDate: "2024-03-20" }, { id: 3, title: "Update documentation", priority: "low", status: "done", dueDate: "2024-06-01" } ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TaskList, { tasks: tasks, onReorder: setTasks, __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this })); } function TaskItem({ title, priority, status, onStatusChange, onEdit, onDelete }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-full text-sm ${priority === "high" ? "bg-[#FFE5E5] text-[#FF4D4D]" : priority === "medium" ? "bg-[#FFF4E5] text-[#FFA53D]" : "bg-[#E5F4FF] text-[#3D95FF]"}`, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, priority), /*#__PURE__*/ React.createElement("select", { value: status, onChange: (e)=>onStatusChange(e.target.value), className: `px-2 py-1 rounded border ${status === "in progress" ? "bg-[#FFF4E5] text-[#FFA53D]" : status === "pushed" ? "bg-[#E5E5FF] text-[#4D4DFF]" : "bg-[#E5FFE5] text-[#4DFF4D]"}`, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "in progress", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("option", { value: "pushed", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Pushed"), /*#__PURE__*/ React.createElement("option", { value: "completed", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Completed"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onEdit, className: "p-2 text-[#4D4DFF] hover:bg-[#E5E5FF] rounded-full", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onDelete, className: "p-2 text-[#FF4D4D] hover:bg-[#FFE5E5] rounded-full", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })))); } function TaskItemStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TaskItem, { title: "Complete project documentation", priority: "high", status: "in progress", onStatusChange: (status)=>{}, onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TaskItem, { title: "Review pull requests", priority: "medium", status: "pushed", onStatusChange: (status)=>{}, onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TaskItem, { title: "Update dependencies", priority: "low", status: "completed", onStatusChange: (status)=>{}, onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); } function AddTaskForm({ onSubmit, className }) { const [title, setTitle] = useState(""); const [category, setCategory] = useState("day"); const [priority, setPriority] = useState("medium"); const handleSubmit = useCallback((e)=>{ e.preventDefault(); onSubmit?.({ title, category, priority }); setTitle(""); setCategory("day"); setPriority("medium"); }, [ title, category, priority, onSubmit ]); return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: `w-full max-w-lg mx-auto p-6 space-y-4 ${className}`, __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: title, onChange: (e)=>setTitle(e.target.value), placeholder: "Task Title", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "category", value: category, onChange: (e)=>setCategory(e.target.value), className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "day", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Day"), /*#__PURE__*/ React.createElement("option", { value: "week", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Week")), /*#__PURE__*/ React.createElement("select", { name: "priority", value: priority, onChange: (e)=>setPriority(e.target.value), className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "high", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "High Priority"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Medium Priority"), /*#__PURE__*/ React.createElement("option", { value: "low", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Low Priority"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Add Task")); } function AddTaskFormStory() { const handleSubmit = useCallback((data)=>{ console.log("Form submitted:", data); }, []); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddTaskForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function MainComponent() { const [view, setView] = useState("day"); const [tasks, setTasks] = useState([]); const [priority, setPriority] = useState("all"); const [status, setStatus] = useState("all"); const filteredTasks = useMemo(()=>{ return tasks.filter((task)=>{ const matchesPriority = priority === "all" || task.priority === priority; const matchesStatus = status === "all" || task.status === status; const matchesView = task.category === view; return matchesPriority && matchesStatus && matchesView; }); }, [ tasks, priority, status, view ]); const handleAddTask = (task)=>{ const newTask = { ...task, id: Date.now(), status: "todo", dueDate: new Date().toISOString() }; setTasks([ ...tasks, newTask ]); }; const handleStatusChange = (taskId, newStatus)=>{ setTasks(tasks.map((task)=>task.id === taskId ? { ...task, status: newStatus } : task)); }; const handleDeleteTask = (taskId)=>{ setTasks(tasks.filter((task)=>task.id !== taskId)); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("day"), className: `px-4 py-2 rounded-lg ${view === "day" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Day"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("week"), className: `px-4 py-2 rounded-lg ${view === "week" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Week")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: priority, onChange: (e)=>setPriority(e.target.value), className: "p-2 rounded border", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "All Priorities"), /*#__PURE__*/ React.createElement("option", { value: "high", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "High"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "low", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Low")), /*#__PURE__*/ React.createElement("select", { value: status, onChange: (e)=>setStatus(e.target.value), className: "p-2 rounded border", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "All Status"), /*#__PURE__*/ React.createElement("option", { value: "todo", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Todo"), /*#__PURE__*/ React.createElement("option", { value: "inProgress", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("option", { value: "done", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Done")))), /*#__PURE__*/ React.createElement(AddTaskForm, { onSubmit: handleAddTask, className: "mb-8", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TaskList, { tasks: filteredTasks, onReorder: setTasks, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this })); }