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

src/app/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 PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 import { LoadingState } from "@/components/ui/States";
@@ -906,20 +907,11 @@ export default function Home() {
 													<h4 className="text-sm font-medium text-gray-900 truncate">
 														{task.task_name}
 													</h4>
-													<Badge
-														variant={
-															task.status === "completed"
-																? "success"
-																: task.status === "in_progress"
-																? "primary"
-																: task.status === "pending"
-																? "secondary"
-																: "default"
-														}
+													<TaskStatusDropdown
+														task={task}
 														size="xs"
-													>
-														{task.status?.replace("_", " ")}
-													</Badge>
+														showDropdown={false}
+													/>
 													{task.priority && (
 														<Badge
 															variant={getTaskPriorityVariant(task.priority)}

src/app/projects/[id]/page.js

@@ -50,6 +50,7 @@ export default async function ProjectViewPage({ params }) {
 				description={`${project.city} • ${project.address}`}
 				action={
 					<div className="flex items-center gap-3">
+						<ProjectStatusDropdown project={project} size="sm" />
 						{daysRemaining !== null && (
 							<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
 								{daysRemaining === 0
@@ -103,6 +104,7 @@ export default async function ProjectViewPage({ params }) {
 				<div className="lg:col-span-2 space-y-6">
 					<Card>
 						<CardHeader>
+							{" "}
 							<div className="flex items-center justify-between">
 								<h2 className="text-xl font-semibold text-gray-900">
 									Project Information
@@ -283,37 +285,13 @@ export default async function ProjectViewPage({ params }) {
 							</h2>
 						</CardHeader>
 						<CardContent className="space-y-4">
+							{" "}
 							<div>
 								<span className="text-sm font-medium text-gray-500 block mb-2">
 									Current Status
 								</span>
-								<div className="flex items-center gap-2">
-									<Badge
-										variant={
-											project.project_status === "fulfilled"
-												? "success"
-												: project.project_status === "registered"
-												? "secondary"
-												: "primary"
-										}
-										size="md"
-									>
-										{project.project_status === "registered"
-											? "Registered"
-											: project.project_status === "in_progress_design"
-											? "In Progress (Design)"
-											: project.project_status === "in_progress_construction"
-											? "In Progress (Construction)"
-											: project.project_status === "fulfilled"
-											? "Completed"
-											: "Unknown"}
-									</Badge>
-								</div>
-								<div className="mt-3">
-									<ProjectStatusDropdown project={project} />
-								</div>
+								<ProjectStatusDropdown project={project} size="md" />
 							</div>
-
 							{daysRemaining !== null && (
 								<div className="border-t pt-4">
 									<span className="text-sm font-medium text-gray-500 block mb-2">

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