```TS
import React, { useState } from 'react';

const Dashboard = () => {
  const [userDetails, setUserDetails] = useState({
    name: 'John Doe',
    email: 'john@example.com',
  });

  const [recentActivity, setRecentActivity] = useState(['Logged in', 'Viewed profile']);
  const [favoriteItems, setFavoriteItems] = useState(['Item A', 'Item B']);

  const [tasks, setTasks] = useState([
    { id: 1, title: 'Complete project', completed: false },
    { id: 2, title: 'Write documentation', completed: false },
    // ...more tasks
  ]);

  const toggleTaskCompletion = (taskId) => {
    setTasks((prevTasks) =>
      prevTasks.map((task) =>
        task.id === taskId ? { ...task, completed: !task.completed } : task
      )
    );
  };
  
  return (
    <div>
      <h1>Welcome, {userDetails.name}!</h1>
      <div>
        <h2>Recent Activity:</h2>
        <ul>
          {recentActivity.map((activity, index) => (
            <li key={index}>{activity}</li>
          ))}
        </ul>
      </div>
      <div>
        <h2>Favorite Items:</h2>
        <ul>
          {favoriteItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
      <div>
      <h2>Task List</h2>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTaskCompletion(task.id)}
            />
            {task.title}
          </li>
        ))}
      </ul>
    </div>
    </div>
  );
};

export default Dashboard;
```