ROLE: Act as an expert React/TypeScript developer.

GOAL: Create a single-file ToDoList.tsx functional component. The component must handle all state, CRUD logic, and UI rendering. Using JS HTML CSS

SCHEMA:

TypeScript

{
id: string; // Unique ID
text: string;
deadline: string; // ISO date string
status: 'finished' | 'unfinished';
finishedTime: string | null;
}
REQUIREMENTS:

Implement Create, Read, Update (status toggle), and Delete functions.

Use localStorage for data persistence (luu du lieu theo nguoi dung).

Implement a dynamic Search function on the text field.

Implement a Filter control for all, finished, and unfinished status.

Implement Sorting by deadline, ensuring unfinished items are prioritized.

Use simple inline CSS styles for a clean, intuitive UI (extra points: UI).

README.md

@@ -1,10 +1,13 @@
 ---
-title: Taskmaster Turbo
-emoji: 🚀
+title: TaskMaster Turbo 🚀
 colorFrom: gray
-colorTo: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

ToDoList.tsx

@@ -0,0 +1,345 @@
+tsx
+import React, { useState, useEffect } from 'react';
+
+type TodoStatus = 'finished' | 'unfinished';
+interface Todo {
+  id: string;
+  text: string;
+  deadline: string;
+  status: TodoStatus;
+  finishedTime: string | null;
+}
+
+const ToDoList: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [deadline, setDeadline] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filter, setFilter] = useState<'all' | TodoStatus>('all');
+  const [sortBy, setSortBy] = useState<'deadline' | 'status'>('deadline');
+
+  // Load todos from localStorage on component mount
+  useEffect(() => {
+    const savedTodos = localStorage.getItem('todos');
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+  }, []);
+
+  // Save todos to localStorage whenever they change
+  useEffect(() => {
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos]);
+
+  const addTodo = () => {
+    if (!inputText.trim() || !deadline) return;
+
+    const newTodo: Todo = {
+      id: Date.now().toString(),
+      text: inputText,
+      deadline,
+      status: 'unfinished',
+      finishedTime: null,
+    };
+
+    setTodos([...todos, newTodo]);
+    setInputText('');
+    setDeadline('');
+  };
+
+  const toggleTodoStatus = (id: string) => {
+    setTodos(
+      todos.map((todo) =>
+        todo.id === id
+          ? {
+              ...todo,
+              status: todo.status === 'finished' ? 'unfinished' : 'finished',
+              finishedTime: todo.status === 'finished' ? null : new Date().toISOString(),
+            }
+          : todo
+      )
+    );
+  };
+
+  const deleteTodo = (id: string) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
+  const filteredTodos = todos.filter((todo) => {
+    const matchesSearch = todo.text.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesFilter = filter === 'all' || todo.status === filter;
+    return matchesSearch && matchesFilter;
+  });
+
+  const sortedTodos = [...filteredTodos].sort((a, b) => {
+    if (sortBy === 'status') {
+      // Unfinished comes first
+      if (a.status === 'unfinished' && b.status === 'finished') return -1;
+      if (a.status === 'finished' && b.status === 'unfinished') return 1;
+    }
+    
+    // Then sort by deadline
+    return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
+  });
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>TaskMaster Turbo 🚀</h1>
+      
+      <div style={styles.inputContainer}>
+        <input
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          placeholder="What needs to be done?"
+          style={styles.textInput}
+        />
+        <input
+          type="datetime-local"
+          value={deadline}
+          onChange={(e) => setDeadline(e.target.value)}
+          style={styles.dateInput}
+        />
+        <button onClick={addTodo} style={styles.addButton}>
+          Add Task
+        </button>
+      </div>
+
+      <div style={styles.controls}>
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder="Search tasks..."
+          style={styles.searchInput}
+        />
+        
+        <div style={styles.filterGroup}>
+          <label style={styles.filterLabel}>
+            <input
+              type="radio"
+              checked={filter === 'all'}
+              onChange={() => setFilter('all')}
+            />
+            All
+          </label>
+          <label style={styles.filterLabel}>
+            <input
+              type="radio"
+              checked={filter === 'finished'}
+              onChange={() => setFilter('finished')}
+            />
+            Finished
+          </label>
+          <label style={styles.filterLabel}>
+            <input
+              type="radio"
+              checked={filter === 'unfinished'}
+              onChange={() => setFilter('unfinished')}
+            />
+            Unfinished
+          </label>
+        </div>
+
+        <div style={styles.sortGroup}>
+          <label style={styles.sortLabel}>
+            Sort by:
+            <select
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value as 'deadline' | 'status')}
+              style={styles.sortSelect}
+            >
+              <option value="deadline">Deadline</option>
+              <option value="status">Status</option>
+            </select>
+          </label>
+        </div>
+      </div>
+
+      <div style={styles.todoList}>
+        {sortedTodos.length === 0 ? (
+          <p style={styles.emptyMessage}>No tasks found. Add some above!</p>
+        ) : (
+          sortedTodos.map((todo) => (
+            <div
+              key={todo.id}
+              style={{
+                ...styles.todoItem,
+                ...(todo.status === 'finished' ? styles.finishedItem : {}),
+              }}
+            >
+              <div style={styles.todoContent}>
+                <input
+                  type="checkbox"
+                  checked={todo.status === 'finished'}
+                  onChange={() => toggleTodoStatus(todo.id)}
+                  style={styles.checkbox}
+                />
+                <div>
+                  <p style={styles.todoText}>{todo.text}</p>
+                  <p style={styles.todoDeadline}>
+                    Due: {new Date(todo.deadline).toLocaleString()}
+                  </p>
+                  {todo.status === 'finished' && todo.finishedTime && (
+                    <p style={styles.finishedTime}>
+                      Completed: {new Date(todo.finishedTime).toLocaleString()}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <button
+                onClick={() => deleteTodo(todo.id)}
+                style={styles.deleteButton}
+              >
+                🗑️
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    maxWidth: '800px',
+    margin: '0 auto',
+    padding: '20px',
+    fontFamily: 'Arial, sans-serif',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '8px',
+    boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+  },
+  title: {
+    textAlign: 'center',
+    color: '#333',
+    marginBottom: '20px',
+    fontSize: '2rem',
+  },
+  inputContainer: {
+    display: 'flex',
+    gap: '10px',
+    marginBottom: '20px',
+  },
+  textInput: {
+    flex: '1',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '16px',
+  },
+  dateInput: {
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+  },
+  addButton: {
+    padding: '10px 20px',
+    backgroundColor: '#4CAF50',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontWeight: 'bold',
+  },
+  controls: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px',
+    marginBottom: '20px',
+    backgroundColor: '#fff',
+    padding: '15px',
+    borderRadius: '4px',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+  },
+  searchInput: {
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '16px',
+  },
+  filterGroup: {
+    display: 'flex',
+    gap: '15px',
+  },
+  filterLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+  },
+  sortGroup: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+  },
+  sortLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+  },
+  sortSelect: {
+    padding: '5px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+  },
+  todoList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+  },
+  todoItem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '15px',
+    backgroundColor: '#fff',
+    borderRadius: '4px',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+  },
+  finishedItem: {
+    backgroundColor: '#f0f0f0',
+    opacity: '0.8',
+  },
+  todoContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '15px',
+  },
+  checkbox: {
+    transform: 'scale(1.5)',
+    cursor: 'pointer',
+  },
+  todoText: {
+    margin: '0',
+    fontSize: '16px',
+    color: '#333',
+  },
+  todoDeadline: {
+    margin: '5px 0 0',
+    fontSize: '14px',
+    color: '#666',
+  },
+  finishedTime: {
+    margin: '5px 0 0',
+    fontSize: '12px',
+    color: '#4CAF50',
+    fontStyle: 'italic',
+  },
+  deleteButton: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '16px',
+    color: '#ff5252',
+  },
+  emptyMessage: {
+    textAlign: 'center',
+    color: '#666',
+    padding: '20px',
+  },
+};
+
+export default ToDoList;
+
+</html>