\n Welcome back, {user.name}! 👋\n

\n {totalTasks === 0 \n ? \"Ready to plan your day?\" \n : `${completedTasks} of ${totalTasks} tasks completed`\n }\n

\n onNavigate(\"achievements\")}\n className=\"btn-secondary text-white px-4 py-2 rounded-xl font-medium\"\n >\n 🏆 Achievements\n \n \n Logout\n \n

\n \n {/* Progress Bar */}\n {totalTasks > 0 && (\n

\n Progress\n {Math.round((completedTasks / totalTasks) * 100)}%\n

\n )}\n

\n\n {/* Create Task Form */}\n

Add New Task

\n setNewTaskTitle(e.target.value)}\n className=\"form-input w-full px-4 py-3 rounded-xl focus:outline-none\"\n placeholder=\"What do you want to accomplish?\"\n disabled={submitting}\n />\n

\n setNewTaskDescription(e.target.value)}\n className=\"form-input w-full px-4 py-3 rounded-xl focus:outline-none resize-none\"\n placeholder=\"Add a description (optional)\"\n rows={2}\n disabled={submitting}\n />\n

\n \n {submitting ? (\n

\n Adding...\n

\n ) : (\n \"Add Task\"\n )}\n \n \n

\n\n {/* Tasks List */}\n

\n {tasks.length === 0 ? (\n

📝

No tasks yet

Create your first task to get started!

\n ) : (\n tasks.map((task, index) => (\n \n

\n handleCompleteTask(task.id)}\n className={`mt-1 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all ${\n task.completed\n ? 'bg-emerald-500 border-emerald-500 text-white'\n : 'border-gray-300 hover:border-emerald-500'\n }`}\n disabled={completingTasks.has(task.id)}\n >\n {task.completed && (\n \n )}\n \n \n

\n {task.title}\n

\n {task.description && (\n

\n {task.description}\n

\n )}\n

\n Created {new Date(task.created_at).toLocaleDateString()}\n {task.completed_at && (\n • Completed {new Date(task.completed_at).toLocaleDateString()}\n )}\n

\n \n handleDeleteTask(task.id)}\n className=\"text-gray-400 hover:text-red-500 p-1 rounded\"\n >\n \n \n

\n ))\n )}\n

\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/val_vic1/untitled-2610/code/frontend/components/TaskScreen.tsx","extension","actionData","errors"]