\n {/* Description */}\n

\n \n Description\n \n \n {formErrors.description && (\n

\n \n {formErrors.description}\n

\n )}\n

\n\n {/* Importance and Due Date */}\n

\n \n Importance\n \n \n \n \n \n \n

\n\n

\n \n Due Date\n \n \n {formErrors.dueDate && (\n

\n \n {formErrors.dueDate}\n

\n )}\n

\n\n {/* Submit & Cancel */}\n

\n \n {isEditing ? \"Update Task\" : \"Add Task\"}\n \n {onCancel && (\n \n Cancel\n \n )}\n

\n );\n}\n\n/** A table that displays tasks. */\nfunction TaskList({\n tasks,\n onEditClick,\n onDelete,\n onToggleComplete,\n visibleColumns,\n onToggleColumn,\n columnWidths,\n}: {\n tasks: Task[];\n onEditClick: (task: Task) => void;\n onDelete: (id: number) => void;\n onToggleComplete: (id: number) => void;\n visibleColumns: Record;\n onToggleColumn: (column: string) => void;\n columnWidths: Record;\n}) {\n const importanceColors: Record<\"low\" | \"medium\" | \"high\", string> = {\n low: \"bg-green-50\",\n medium: \"bg-yellow-50\",\n high: \"bg-red-50\",\n };\n\n return (\n

\n {Object.keys(visibleColumns).map((col) => (\n onToggleColumn(col)}\n className=\"p-1 bg-gray-200 rounded flex items-center\"\n title={`Toggle ${col} column`}\n >\n {visibleColumns[col] ? : }\n {col}\n \n ))}\n

\n\n \n \n \n {visibleColumns.description && (\n \n )}\n {visibleColumns.isCompleted && (\n \n )}\n {visibleColumns.dueDate && (\n \n )}\n {visibleColumns.importance && (\n \n )}\n {visibleColumns.actions && (\n \n )}\n \n \n \n {tasks.map((task) => (\n \n {/* Description */}\n {visibleColumns.description && (\n \n )}\n {/* Completed Checkbox */}\n {visibleColumns.isCompleted && (\n \n )}\n {/* Due Date */}\n {visibleColumns.dueDate && (\n \n {task.dueDate}\n \n )}\n {/* Importance */}\n {visibleColumns.importance && (\n \n {task.importance}\n \n )}\n {/* Actions */}\n {visibleColumns.actions && (\n \n )}\n \n ))}\n \n

Task	Done	Due Date	Importance	Actions
\n \n {task.description}\n \n	\n \n \n onToggleComplete(task.id)}\n title=\"Mark task as complete\"\n />\n \n	\n \n \n onEditClick(task)}\n title=\"Edit task\"\n >\n \n \n \n onDelete(task.id)}\n title=\"Delete task\"\n >\n \n \n \n

\n );\n}\n\nfunction SettingsOverlay({\n columnWidths,\n onColumnWidthChange,\n onClose,\n}: {\n columnWidths: Record;\n onColumnWidthChange: (column: string, width: number) => void;\n onClose: () => void;\n}) {\n return (\n

\n \n \n \n

Column Settings

\n {Object.entries(columnWidths).map(([column, width]) => (\n

\n \n {column} width (px)\n \n onColumnWidthChange(column, parseInt(e.target.value, 10))}\n className=\"w-full p-2 border rounded\"\n />\n

\n ))}\n

\n );\n}\n\nfunction App() {\n const [tasks, setTasks] = useState([]);\n const [editingTask, setEditingTask] = useState(undefined);\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(\"asc\");\n const [visibleColumns, setVisibleColumns] = useState({\n description: true,\n isCompleted: true,\n dueDate: true,\n importance: true,\n actions: true,\n });\n const [showEditOverlay, setShowEditOverlay] = useState(false);\n const [showAddTaskOverlay, setShowAddTaskOverlay] = useState(false);\n const [showSettingsOverlay, setShowSettingsOverlay] = useState(false);\n const [columnWidths, setColumnWidths] = useState({\n description: 300,\n isCompleted: 80,\n dueDate: 120,\n importance: 100,\n actions: 100,\n });\n\n // Load from localStorage once\n useEffect(() => {\n const storedTasks = localStorage.getItem(\"tasks\");\n if (storedTasks) {\n setTasks(JSON.parse(storedTasks));\n }\n const storedColumnWidths = localStorage.getItem(\"columnWidths\");\n if (storedColumnWidths) {\n setColumnWidths(JSON.parse(storedColumnWidths));\n }\n }, []);\n\n // Save to localStorage whenever `tasks` or `columnWidths` changes\n const saveTasks = useCallback((updatedTasks: Task[]) => {\n setTasks(updatedTasks);\n localStorage.setItem(\"tasks\", JSON.stringify(updatedTasks));\n }, []);\n\n const saveColumnWidths = useCallback((updatedWidths: Record) => {\n setColumnWidths(updatedWidths);\n localStorage.setItem(\"columnWidths\", JSON.stringify(updatedWidths));\n }, []);\n\n const addTask = useCallback(\n (newTask: Task) => {\n const updatedTasks = [...tasks, newTask];\n saveTasks(updatedTasks);\n setShowAddTaskOverlay(false);\n },\n [tasks, saveTasks],\n );\n\n const updateTask = useCallback(\n (updatedTask: Task) => {\n const updatedTasks = tasks.map((t) => t.id === updatedTask.id ? updatedTask : t);\n saveTasks(updatedTasks);\n setEditingTask(undefined);\n setShowEditOverlay(false);\n },\n [tasks, saveTasks],\n );\n\n const deleteTask = useCallback(\n (id: number) => {\n const updatedTasks = tasks.filter((task) => task.id !== id);\n saveTasks(updatedTasks);\n },\n [tasks, saveTasks],\n );\n\n const toggleTaskCompletion = useCallback(\n (id: number) => {\n const updatedTasks = tasks.map((task) => task.id === id ? { ...task, isCompleted: !task.isCompleted } : task);\n saveTasks(updatedTasks);\n },\n [tasks, saveTasks],\n );\n\n const sortTasks = useCallback(() => {\n const sortedTasks = [...tasks].sort((a, b) => {\n const dateA = new Date(a.dueDate).getTime();\n const dateB = new Date(b.dueDate).getTime();\n return sortOrder === \"asc\" ? dateA - dateB : dateB - dateA;\n });\n saveTasks(sortedTasks);\n setSortOrder(sortOrder === \"asc\" ? \"desc\" : \"asc\");\n }, [tasks, saveTasks, sortOrder]);\n\n const toggleColumnVisibility = (column: string) => {\n setVisibleColumns((prev) => ({\n ...prev,\n [column]: !prev[column],\n }));\n };\n\n const handleEditClick = (task: Task) => {\n setEditingTask(task);\n setShowEditOverlay(true);\n };\n\n const handleOverlayCancel = () => {\n setEditingTask(undefined);\n setShowEditOverlay(false);\n };\n\n const handleColumnWidthChange = (column: string, width: number) => {\n saveColumnWidths({ ...columnWidths, [column]: width });\n };\n\n return (\n

📋 Task Manager

\n\n {/* Add Task and Settings buttons */}\n

\n setShowAddTaskOverlay(true)}\n className=\"p-2 bg-blue-500 text-white rounded flex items-center\"\n >\n \n Add Task\n \n setShowSettingsOverlay(true)}\n className=\"p-2 bg-gray-200 rounded flex items-center\"\n >\n \n Settings\n \n

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

\n \n Sort by Due Date\n {sortOrder === \"asc\" ? : }\n \n

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

\n \n

\n\n {/* Add Task Overlay Modal */}\n {showAddTaskOverlay && (\n \n \n

\n )}\n\n {/* Edit Task Overlay Modal */}\n {showEditOverlay && editingTask && (\n \n \n \n )}\n\n {/* Settings Overlay */}\n {showSettingsOverlay && (\n setShowSettingsOverlay(false)}\n />\n )}\n\n {/* Link to source */}\n \n View Source\n \n \n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n }\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Task Manager\n \n \n \n \n \n \n

\n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/arfan/TaskManagerApp/code/main.tsx","extension","actionData","errors"]

Column Settings

📋 Task Manager

Add New Task

Edit Task