\n {/* Header with stats */}\n

To-Do List

\n {completedCount} of {totalCount} tasks completed\n

\n setShowForm(true)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-2\"\n >\n ➕\n Add Task\n \n

\n\n {/* Progress bar */}\n {totalCount > 0 && (\n

\n )}\n

\n\n {/* Filters and sorting */}\n

\n Filter:\n setFilter(e.target.value as TodoFilter)}\n className=\"border border-gray-300 rounded px-3 py-1 text-sm\"\n >\n \n \n \n \n

\n Sort by:\n setSort(e.target.value as TodoSort)}\n className=\"border border-gray-300 rounded px-3 py-1 text-sm\"\n >\n \n \n \n \n \n

\n Showing {filteredAndSortedTodos.length} of {totalCount} tasks\n

\n\n {/* Todo form */}\n {(showForm || editingTodo) && (\n

\n {editingTodo ? 'Edit Task' : 'Add New Task'}\n

\n \n Title *\n \n setFormData({ ...formData, title: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Enter task title...\"\n required\n />\n

\n \n Description\n \n setFormData({ ...formData, description: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Enter task description...\"\n rows={3}\n />\n

\n \n Priority\n \n setFormData({ ...formData, priority: e.target.value as Priority })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n \n \n \n

\n \n Due Date\n \n setFormData({ ...formData, due_date: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {loading &&

}\n {editingTodo ? 'Update Task' : 'Add Task'}\n \n {\n setShowForm(false);\n setEditingTodo(null);\n }}\n className=\"bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors\"\n >\n Cancel\n \n

\n )}\n\n {/* Todo list */}\n

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

📝

\n {filter === 'all' ? 'No tasks yet' : `No ${filter} tasks`}\n

\n {filter === 'all' \n ? 'Create your first task to get started!'\n : `You don't have any ${filter} tasks right now.`\n }\n

\n {filter === 'all' && (\n setShowForm(true)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\"\n >\n Add Your First Task\n \n )}\n

\n ) : (\n filteredAndSortedTodos.map((todo) => (\n \n

\n toggleComplete(todo)}\n className={`mt-1 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${\n todo.completed\n ? 'bg-green-500 border-green-500 text-white'\n : 'border-gray-300 hover:border-green-500'\n }`}\n >\n {todo.completed && ✓}\n \n \n

\n {todo.title}\n

\n {todo.description && (\n

\n {todo.description}\n

\n )}\n

\n \n {todo.priority.charAt(0).toUpperCase() + todo.priority.slice(1)}\n \n {todo.due_date && (\n \n Due: {formatDate(todo.due_date)}\n {isOverdue(todo.due_date) && !todo.completed && ' (Overdue)'}\n \n )}\n

\n \n

\n setEditingTodo(todo)}\n className=\"text-gray-400 hover:text-blue-600 transition-colors\"\n title=\"Edit task\"\n >\n ✏️\n \n deleteTodo(todo.id)}\n className=\"text-gray-400 hover:text-red-600 transition-colors\"\n title=\"Delete task\"\n >\n 🗑️\n \n

\n ))\n )}\n \n \n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/nezha/To-do_Tracker/code/frontend/components/TodoList.tsx","extension","actionData","errors"]