\n ✨ {showForm ? \"Create New Task\" : \"Your Tasks\"}\n

\n setShowForm(!showForm)}\n className={`btn ${showForm ? \"btn-secondary\" : \"btn-primary\"}`}\n >\n {showForm ? \"📋 View Tasks\" : \"➕ Add Task\"}\n \n

\n\n {showForm && (\n \n )}\n

\n\n {/* Task Statistics */}\n {!showForm && (\n

\n 📊\n

Total Tasks

{tasks.length}

\n ⏳\n

Pending

{pendingTasks.length}

\n ✅\n

Completed

{completedTasks.length}

\n )}\n\n {/* Task List */}\n {!showForm && (\n

\n {loading ? (\n

Loading your tasks...

\n ) : tasks.length === 0 ? (\n

📝

No tasks yet!

\n Create your first task to get started with TaskFlow.\n
\n Click the \"Add Task\" button above to begin.\n

\n ) : (\n <>\n {/* Pending Tasks */}\n {pendingTasks.length > 0 && (\n

\n ⏳ Pending Tasks ({pendingTasks.length})\n

\n {pendingTasks.map(task => (\n

{task.title}

\n {task.description && (\n

{task.description}

\n )}\n

\n \n {getPriorityIcon(task.priority)} {task.priority}\n \n \n 📅 {formatDate(task.created_at)}\n \n

\n toggleTaskCompletion(task.id, true)}\n className=\"btn btn-primary btn-sm\"\n title=\"Mark as completed\"\n >\n ✅ Complete\n \n deleteTask(task.id)}\n className=\"btn btn-danger btn-sm\"\n title=\"Delete task\"\n >\n 🗑️ Delete\n \n

\n ))}\n

\n )}\n\n {/* Completed Tasks */}\n {completedTasks.length > 0 && (\n

\n ✅ Completed Tasks ({completedTasks.length})\n

\n {completedTasks.map(task => (\n

{task.title}

\n {task.description && (\n

{task.description}

\n )}\n

\n \n {getPriorityIcon(task.priority)} {task.priority}\n \n \n 📅 {formatDate(task.created_at)}\n \n

\n toggleTaskCompletion(task.id, false)}\n className=\"btn btn-secondary btn-sm\"\n title=\"Mark as pending\"\n >\n ↩️ Undo\n \n deleteTask(task.id)}\n className=\"btn btn-danger btn-sm\"\n title=\"Delete task\"\n >\n 🗑️ Delete\n \n

\n ))}\n

\n )}\n \n )}\n

\n )}\n