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

src/components/ProjectTasksDashboard.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
+import TaskStatusDropdown from "./TaskStatusDropdown";
 import SearchBar from "./ui/SearchBar";
 import { Select } from "./ui/Input";
 import Link from "next/link";
@@ -222,7 +223,6 @@ export default function ProjectTasksDashboard() {
 			alert("Error updating task status");
 		}
 	};
-
 	const getPriorityVariant = (priority) => {
 		switch (priority) {
 			case "urgent":
@@ -238,21 +238,6 @@ export default function ProjectTasksDashboard() {
 		}
 	};
 
-	const getStatusBadgeVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "primary";
-			case "pending":
-				return "warning";
-			case "cancelled":
-				return "danger";
-			default:
-				return "default";
-		}
-	};
-
 	const getOverdueBadgeVariant = (days) => {
 		if (days > 7) return "danger";
 		if (days > 3) return "warning";
@@ -263,6 +248,7 @@ export default function ProjectTasksDashboard() {
 		<div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow bg-white">
 			<div className="flex items-start justify-between mb-3">
 				<div className="flex-1 min-w-0">
+					{" "}
 					<div className="flex items-center gap-2 mb-2">
 						<h4 className="text-sm font-medium text-gray-900 truncate">
 							{task.task_name}
@@ -271,9 +257,11 @@ export default function ProjectTasksDashboard() {
 							{task.priority}
 						</Badge>
 						{showStatusBadge && (
-							<Badge variant={getStatusBadgeVariant(task.status)} size="sm">
-								{task.status.replace("_", " ")}
-							</Badge>
+							<TaskStatusDropdown
+								task={task}
+								size="sm"
+								onStatusChange={handleStatusChange}
+							/>
 						)}
 					</div>
 					<div className="flex items-center gap-4 text-xs text-gray-600 mb-2">
@@ -317,18 +305,13 @@ export default function ProjectTasksDashboard() {
 						<Badge variant="warning" size="sm">
 							Due in {task.statusInfo.days} days
 						</Badge>
-					)}
+					)}{" "}
 					{(task.status === "pending" || task.status === "in_progress") && (
-						<select
-							value={task.status}
-							onChange={(e) => handleStatusChange(task.id, e.target.value)}
-							className="px-2 py-1 text-xs border border-gray-300 rounded focus:ring-1 focus:ring-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>
+						<TaskStatusDropdown
+							task={task}
+							size="sm"
+							onStatusChange={handleStatusChange}
+						/>
 					)}
 				</div>
 			</div>