\n 📋 Tasks ({filteredAndSortedTasks.length})\n

\n \n

\n {/* Filter */}\n

\n Filter:\n setFilter(e.target.value as TaskStatus | 'All')}\n className=\"px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n

\n \n {/* Sort */}\n

\n Sort by:\n setSortBy(e.target.value as 'dueDate' | 'clientName' | 'status')}\n className=\"px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n\n {/* Task list */}\n

\n {filteredAndSortedTasks.map((task) => (\n

\n {/* Task info */}\n

\n {getStatusIcon(task.status)}\n

\n \n

\n {task.taskName}\n

\n Client: {task.clientName}\n

\n \n

\n {/* Status badge */}\n \n {getStatusIcon(task.status)} {task.status}\n \n \n {/* Due date */}\n \n 📅 {formatDate(task.dueDate)}\n \n

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

\n {/* Quick status change */}\n onStatusChange(task.id, e.target.value as TaskStatus)}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n {/* Edit button */}\n onEdit(task)}\n className=\"px-3 py-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors duration-150 text-sm font-medium\"\n title=\"Edit task\"\n >\n ✏️ Edit\n \n \n {/* Delete button */}\n handleDelete(task.id)}\n disabled={deletingId === task.id}\n className=\"px-3 py-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-colors duration-150 text-sm font-medium disabled:opacity-50\"\n title=\"Delete task\"\n >\n {deletingId === task.id ? (\n

\n ) : (\n '🗑️ Delete'\n )}\n \n

\n ))}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Josphine95/Tracker/code/frontend/components/TaskList.tsx","extension","actionData","errors"]