{/* Header */}

Task Manager

Manage your team's tasks efficiently

{pendingTasks} pending tasks

{/* Notification */} {notification && (

{notification}

)} {/* Stats Cards */}

Total Tasks

{tasks.length}

All tasks in the system

Completed

{completedTasks}

Tasks marked as done

Pending

{pendingTasks}

Tasks to be completed

{/* Add/Edit Task Form */} {editingTaskId ? "Edit Task" : "Add New Task"}

setNewTask({...newTask, title: e.target.value})} />

setNewTask({...newTask, description: e.target.value})}
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Select
                value={newTask.status}
                onValueChange={(value) => setNewTask({...newTask, status: value as "todo" | "in-progress" | "completed"})}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todo">To Do</SelectItem>
                  <SelectItem value="in-progress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                </SelectContent>
              </Select>

<Select
                value={newTask.priority}
                onValueChange={(value) => setNewTask({...newTask, priority: value as "low" | "medium" | "high"})}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select priority" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Low Priority</SelectItem>
                  <SelectItem value="medium">Medium Priority</SelectItem>
                  <SelectItem value="high">High Priority</SelectItem>
                </SelectContent>
              </Select>

<Input
                type="date"
                value={newTask.dueDate}
                onChange={(e) => setNewTask({...newTask, dueDate: e.target.value})}
              />
              <Input
                placeholder="Assignee"
                value={newTask.assignee}
                onChange={(e) => setNewTask({...newTask, assignee: e.target.value})}
              />
            </div>
          </div>
          <div className="flex space-x-2">
            {editingTaskId ? (
              <>
                <Button onClick={handleUpdateTask}>
                  <Check className="h-4 w-4 mr-2" />
                  Update Task
                </Button>
                <Button variant="outline" onClick={() => setEditingTaskId(null)}>
                  <X className="h-4 w-4 mr-2" />
                  Cancel
                </Button>
              </>
            ) : (
              <Button onClick={handleAddTask}>
                <Plus className="h-4 w-4 mr-2" />
                Add Task
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

{/* Tasks List */}
      <div className="grid grid-cols-1 gap-4">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">Tasks</h2>
        {tasks.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center">
              <p className="text-gray-500">No tasks found. Add a new task to get started!</p>
            </CardContent>
          </Card>
        ) : (
          tasks.map((task) => (
            <Card key={task.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-2">
                      <h3 className="text-lg font-semibold">{task.title}</h3>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
                        {task.status.replace("-", " ")}
                      </span>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(task.priority)}`}>
                        {task.priority} priority
                      </span>
                    </div>
                    <p className="text-gray-600 mb-3">{task.description}</p>
                    <div className="flex items-center space-x-4 text-sm text-gray-500">
                      <div className="flex items-center space-x-1">
                        <Calendar className="h-4 w-4" />
                        <span>Due: {task.dueDate}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <User className="h-4 w-4" />
                        <span>{task.assignee}</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex space-x-2 mt-4 md:mt-0">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleEditTask(task.id)}
                    >
                      <Edit className="h-4 w-4 mr-1" />
                      Edit
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="text-red-600 hover:text-red-700"
                      onClick={() => handleDeleteTask(task.id)}
                    >
                      <Trash className="h-4 w-4 mr-1" />
                      Delete
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

{/* Footer */}
      <footer className="mt-12 pt-8 border-t border-gray-200">
        <div className="text-center text-gray-600">
          <p>© 2024 Task Manager App. Built with React and Tailwind CSS.</p>
        </div>
      </footer>
    </div>
  );
};

export default TaskManagerApp;