📝 To-Do List

\n \n

\n {/* Filter buttons */}\n

\n {([\n { key: 'all', label: 'All', count: todos.length },\n { key: 'pending', label: 'Pending', count: todos.filter(t => !t.completed).length },\n { key: 'completed', label: 'Completed', count: todos.filter(t => t.completed).length }\n ] as const).map(({ key, label, count }) => (\n setFilter(key)}\n className={`px-3 py-1 text-sm rounded ${\n filter === key\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n {label} ({count})\n \n ))}\n

\n\n {/* Sort dropdown */}\n setSortBy(e.target.value as any)}\n className=\"px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n

\n\n {/* Todo List */}\n {filteredAndSortedTodos.length === 0 ? (\n

📝

\n {filter === 'pending' ? 'No pending tasks' : \n filter === 'completed' ? 'No completed tasks' : \n 'No tasks yet'}\n

\n {filter === 'all' ? 'Create your first task to get started!' : \n filter === 'pending' ? 'All caught up! 🎉' :\n 'Complete some tasks to see them here.'}\n

\n ) : (\n

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

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

\n {todo.title}\n

\n \n {todo.description && (\n

\n {todo.description}\n

\n )}\n\n {/* Meta information */}\n

\n {/* Priority badge */}\n \n {todo.priority.charAt(0).toUpperCase() + todo.priority.slice(1)}\n \n\n {/* Due date */}\n {todo.due_date && (\n \n Due: {formatDate(todo.due_date)}\n {isOverdue(todo.due_date) && !todo.completed && ' ⚠️'}\n \n )}\n\n {/* Reminder */}\n {todo.reminder_time && (\n \n 🔔 {new Date(todo.reminder_time).toLocaleDateString()}\n \n )}\n\n {/* Created date */}\n {todo.created_at && (\n \n Created {formatDate(todo.created_at)}\n \n )}\n

\n\n {/* Actions */}\n

\n onEditTodo(todo)}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n title=\"Edit task\"\n >\n ✏️\n \n deleteTodo(todo.id!)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n title=\"Delete task\"\n >\n 🗑️\n \n

\n ))}\n

\n )}\n\n {/* Summary stats */}\n {todos.length > 0 && (\n

{todos.length}

Total Tasks

\n {todos.filter(t => t.completed).length}\n

Completed

\n {todos.filter(t => !t.completed).length}\n

Pending

\n {todos.filter(t => t.due_date && isOverdue(t.due_date) && !t.completed).length}\n

Overdue

\n )}\n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Ozy/untitled-1096/code/frontend/components/TodoList.tsx","extension","actionData","errors"]