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

src/app/tasks/page.js

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import Badge from "@/components/ui/Badge";
+import TaskStatusDropdown from "@/components/TaskStatusDropdown";
 import { Input } from "@/components/ui/Input";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import PageContainer from "@/components/ui/PageContainer";
@@ -125,32 +126,6 @@ export default function ProjectTasksPage() {
 		}
 	};
 
-	const getStatusVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "warning";
-			case "pending":
-				return "secondary";
-			default:
-				return "secondary";
-		}
-	};
-
-	const getStatusDisplayName = (status) => {
-		switch (status) {
-			case "in_progress":
-				return "In Progress";
-			case "completed":
-				return "Completed";
-			case "pending":
-				return "Pending";
-			default:
-				return status;
-		}
-	};
-
 	const statusCounts = {
 		all: allTasks.length,
 		pending: allTasks.filter((task) => task.status === "pending").length,
@@ -354,13 +329,16 @@ export default function ProjectTasksPage() {
 							<CardContent className="p-6">
 								<div className="flex items-start justify-between">
 									<div className="flex-1">
+										{" "}
 										<div className="flex items-center gap-3 mb-2">
 											<h3 className="text-lg font-semibold text-gray-900">
 												{task.task_name}
 											</h3>
-											<Badge variant={getStatusVariant(task.status)} size="sm">
-												{getStatusDisplayName(task.status)}
-											</Badge>
+											<TaskStatusDropdown
+												task={task}
+												size="sm"
+												onStatusChange={handleStatusChange}
+											/>
 											<Badge
 												variant={getPriorityVariant(task.priority)}
 												size="sm"
@@ -373,7 +351,6 @@ export default function ProjectTasksPage() {
 												</Badge>
 											)}
 										</div>
-
 										<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 											<div>
 												<p className="text-sm text-gray-600">Project</p>
@@ -396,7 +373,6 @@ export default function ProjectTasksPage() {
 												</div>
 											)}
 										</div>
-
 										<div className="flex items-center gap-4 text-sm text-gray-500">
 											<span>
 												Added{" "}
@@ -408,23 +384,8 @@ export default function ProjectTasksPage() {
 												<span>Max wait: {task.max_wait_days} days</span>
 											)}
 										</div>
-									</div>
-
+									</div>{" "}
 									<div className="flex items-center space-x-2 ml-6">
-										{task.status !== "completed" && (
-											<select
-												className="text-sm px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-												value={task.status}
-												onChange={(e) =>
-													handleStatusChange(task.id, e.target.value)
-												}
-											>
-												<option value="pending">Pending</option>
-												<option value="in_progress">In Progress</option>
-												<option value="completed">Completed</option>
-											</select>
-										)}
-
 										<Link href={`/projects/${task.project_id}`}>
 											<Button variant="outline" size="sm">
 												View Project