feat: Implement TaskStatusDropdown and integrate it across project and task components

src/components/ProjectTasksSection.js

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import ProjectTaskForm from "./ProjectTaskForm";
+import TaskStatusDropdown from "./TaskStatusDropdown";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
@@ -142,7 +143,6 @@ export default function ProjectTasksSection({ projectId }) {
 		refetchTasks(); // Refresh the list
 		setShowAddTaskModal(false); // Close the modal
 	};
-
 	const handleStatusChange = async (taskId, newStatus) => {
 		try {
 			const res = await fetch(`/api/project-tasks/${taskId}`, {
@@ -243,20 +243,6 @@ export default function ProjectTasksSection({ projectId }) {
 				return "default";
 		}
 	};
-	const getStatusVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "primary";
-			case "pending":
-				return "warning";
-			case "cancelled":
-				return "danger";
-			default:
-				return "default";
-		}
-	};
 
 	const toggleDescription = (taskId) => {
 		setExpandedDescriptions((prev) => ({
@@ -460,28 +446,13 @@ export default function ProjectTasksSection({ projectId }) {
 													{task.date_started
 														? new Date(task.date_started).toLocaleDateString()
 														: "Not started"}
-												</td>
+												</td>{" "}
 												<td className="px-4 py-4">
-													<div className="flex items-center gap-2">
-														<select
-															value={task.status}
-															onChange={(e) =>
-																handleStatusChange(task.id, e.target.value)
-															}
-															className="text-xs px-2 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-														>
-															<option value="pending">Pending</option>
-															<option value="in_progress">In Progress</option>
-															<option value="completed">Completed</option>
-															<option value="cancelled">Cancelled</option>
-														</select>
-														<Badge
-															variant={getStatusVariant(task.status)}
-															size="sm"
-														>
-															{task.status.replace("_", " ")}
-														</Badge>
-													</div>
+													<TaskStatusDropdown
+														task={task}
+														size="sm"
+														onStatusChange={handleStatusChange}
+													/>
 												</td>
 												<td className="px-4 py-4">
 													<div className="flex items-center gap-2">