function MainComponent() { const [tasks, setTasks] = React.useState([]); const [activeScreen, setActiveScreen] = React.useState('home'); const taskManager = React.useMemo(()=>new TaskManager(), []); React.useEffect(()=>{ const storedTasks = JSON.parse(localStorage.getItem('tasks') || '[]'); taskManager.tasks = storedTasks.map((task)=>new Task(task.id, task.name, task.description, new Date(task.dueDate), task.priority, task.tags, task.completed)); setTasks(taskManager.getTasks()); }, [ taskManager ]); const saveTasksToLocalStorage = React.useCallback(()=>{ localStorage.setItem('tasks', JSON.stringify(taskManager.tasks)); }, [ taskManager ]); const addTask = React.useCallback((task)=>{ taskManager.addTask(task); setTasks(taskManager.getTasks()); saveTasksToLocalStorage(); }, [ taskManager, saveTasksToLocalStorage ]); const deleteTask = React.useCallback((taskId)=>{ taskManager.deleteTask(taskId); setTasks(taskManager.getTasks()); saveTasksToLocalStorage(); }, [ taskManager, saveTasksToLocalStorage ]); const updateTask = React.useCallback((taskId, updatedTask)=>{ taskManager.updateTask(taskId, updatedTask); setTasks(taskManager.getTasks()); saveTasksToLocalStorage(); }, [ taskManager, saveTasksToLocalStorage ]); const toggleTaskComplete = React.useCallback((taskId)=>{ const task = taskManager.tasks.find((t)=>t.id === taskId); if (task) { task.toggleComplete(); updateTask(taskId, task); } }, [ taskManager, updateTask ]); const getGreeting = ()=>{ const hour = new Date().getHours(); if (hour < 12) return 'Good morning'; if (hour < 18) return 'Good afternoon'; return 'Good evening'; }; const renderScreen = ()=>{ switch(activeScreen){ case 'home': return /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[24px] mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, getGreeting(), ", User"), /*#__PURE__*/ React.createElement("h2", { className: "text-[20px] mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Today's Tasks"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, tasks.filter((task)=>task.dueDate.toDateString() === new Date().toDateString()).map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex-shrink-0 w-64 p-4 mr-4 bg-[#F5F5F5] rounded-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[18px] mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, task.description)))), /*#__PURE__*/ React.createElement("h2", { className: "text-[20px] mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Upcoming Tasks"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, tasks.filter((task)=>task.dueDate > new Date()).slice(0, 5).map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "p-4 bg-[#F5F5F5] rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[18px] mb-1", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, task.description))))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#FFFFFF] text-[16px] h-screen flex flex-col", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, renderScreen(), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center bg-[#F5F5F5] p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#4A90E2]", onClick: ()=>setActiveScreen('home'), __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 96, columnNumber: 84 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveScreen('tasks'), __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tasks", __source: { fileName: "", lineNumber: 97, columnNumber: 58 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveScreen('calendar'), __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar", __source: { fileName: "", lineNumber: 98, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveScreen('profile'), __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 99, columnNumber: 60 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-20 right-4 w-14 h-14 bg-[#4A90E2] text-white rounded-full flex items-center justify-center", onClick: ()=>{ const newTask = new Task(Date.now(), 'New Task', 'Description', new Date(), 'medium', [], false); addTask(newTask); }, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .slide-in { animation: slideIn 0.3s ease-out; } `)); } class Task { constructor(id, name, description, dueDate, priority, tags, completed){ this.id = id; this.name = name; this.description = description; this.dueDate = dueDate; this.priority = priority; this.tags = tags; this.completed = completed; } toggleComplete() { this.completed = !this.completed; } } class TaskManager { constructor(){ this.tasks = []; } addTask(task) { this.tasks.push(task); } deleteTask(taskId) { this.tasks = this.tasks.filter((task)=>task.id !== taskId); } updateTask(taskId, updatedTask) { const index = this.tasks.findIndex((task)=>task.id === taskId); if (index !== -1) { this.tasks[index] = { ...this.tasks[index], ...updatedTask }; } } getTasks(filter = 'all') { switch(filter){ case 'active': return this.tasks.filter((task)=>!task.completed); case 'completed': return this.tasks.filter((task)=>task.completed); default: return this.tasks; } } }

Good morning, User

Today's Tasks

Upcoming Tasks