feat: Add simple dropdown components for project and task statuses

- Created ProjectStatusDropdownSimple component for managing project statuses with a simple dropdown interface.
- Updated ProjectTasksDashboard and ProjectTasksSection to use the new ProjectStatusDropdownSimple component.
- Refactored TaskStatusDropdown to simplify its structure and added debugging features.
- Introduced TaskStatusDropdownDebug for testing purposes with enhanced logging and debugging UI.
- Added TaskStatusDropdownSimple for task statuses, mirroring the functionality of the project status dropdown.
- Created comprehensive HTML test files for dropdown functionality validation.
- Added a batch script to clear Next.js cache and start the development server.

src/app/page.js

@@ -5,7 +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 TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 import { LoadingState } from "@/components/ui/States";
@@ -907,7 +907,7 @@ export default function Home() {
 													<h4 className="text-sm font-medium text-gray-900 truncate">
 														{task.task_name}
 													</h4>
-													<TaskStatusDropdown
+													<TaskStatusDropdownSimple
 														task={task}
 														size="xs"
 														showDropdown={false}

src/app/tasks/page.js

@@ -5,7 +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 TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
 import { Input } from "@/components/ui/Input";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import PageContainer from "@/components/ui/PageContainer";
@@ -333,8 +333,8 @@ export default function ProjectTasksPage() {
 										<div className="flex items-center gap-3 mb-2">
 											<h3 className="text-lg font-semibold text-gray-900">
 												{task.task_name}
-											</h3>
-											<TaskStatusDropdown
+											</h3>{" "}
+											<TaskStatusDropdownSimple
 												task={task}
 												size="sm"
 												onStatusChange={handleStatusChange}

src/app/test-dropdowns/page.js

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
+import ProjectStatusDropdownSimple from "@/components/ProjectStatusDropdownSimple";
+import { Card, CardContent } from "@/components/ui/Card";
+
+export default function DropdownTestPage() {
+	// Sample task data
+	const sampleTask = {
+		id: 1,
+		status: "pending",
+		task_name: "Test Task",
+	};
+
+	// Sample project data
+	const sampleProject = {
+		project_id: 1,
+		project_status: "registered",
+		project_name: "Test Project",
+	};
+
+	const handleTaskStatusChange = (taskId, newStatus) => {
+		console.log(`Task ${taskId} status changed to ${newStatus}`);
+	};
+
+	return (
+		<div className="p-8 space-y-8 bg-gray-100 min-h-screen">
+			<h1 className="text-3xl font-bold text-gray-900">
+				Dropdown Component Test
+			</h1>
+			<Card>
+				<CardContent className="p-6">
+					<h2 className="text-xl font-semibold mb-4">
+						Task Status Dropdown Test
+					</h2>
+					<div className="space-y-4">
+						{" "}
+						<div>
+							<p className="text-sm text-gray-600 mb-2">
+								Interactive dropdown (can change status):
+							</p>
+							<TaskStatusDropdownSimple
+								task={sampleTask}
+								size="sm"
+								showDropdown={true}
+								onStatusChange={handleTaskStatusChange}
+							/>
+						</div>
+						<div>
+							<p className="text-sm text-gray-600 mb-2">
+								Read-only badge (showDropdown=false):
+							</p>
+							<TaskStatusDropdownSimple
+								task={sampleTask}
+								size="sm"
+								showDropdown={false}
+							/>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent className="p-6">
+					<h2 className="text-xl font-semibold mb-4">
+						Project Status Dropdown Test
+					</h2>{" "}
+					<div className="space-y-4">
+						<div>
+							<p className="text-sm text-gray-600 mb-2">
+								Interactive dropdown (can change status):
+							</p>
+							<ProjectStatusDropdownSimple
+								project={sampleProject}
+								size="md"
+								showDropdown={true}
+							/>
+						</div>
+						<div>
+							<p className="text-sm text-gray-600 mb-2">
+								Read-only badge (showDropdown=false):
+							</p>
+							<ProjectStatusDropdownSimple
+								project={sampleProject}
+								size="md"
+								showDropdown={false}
+							/>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent className="p-6">
+					<h2 className="text-xl font-semibold mb-4">Test in Table Context</h2>
+					<div className="overflow-x-auto">
+						<table className="min-w-full bg-white border border-gray-200">
+							<thead className="bg-gray-50">
+								<tr>
+									<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+										Task
+									</th>
+									<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+										Status
+									</th>
+									<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+										Project Status
+									</th>
+								</tr>
+							</thead>
+							<tbody className="bg-white divide-y divide-gray-200">
+								{" "}
+								<tr>
+									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+										Test Task in Table
+									</td>
+									<td className="px-6 py-4 whitespace-nowrap">
+										<TaskStatusDropdownSimple
+											task={sampleTask}
+											size="sm"
+											showDropdown={true}
+											onStatusChange={handleTaskStatusChange}
+										/>
+									</td>
+									<td className="px-6 py-4 whitespace-nowrap">
+										<ProjectStatusDropdownSimple
+											project={sampleProject}
+											size="sm"
+											showDropdown={true}
+										/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</CardContent>
+			</Card>{" "}
+			<div className="text-sm text-gray-500">
+				<p>Console instructions:</p>
+				<ul className="list-disc list-inside space-y-1">
+					<li>Open browser developer tools (F12)</li>
+					<li>Go to Console tab</li>
+					<li>Click on any dropdown to see debug messages</li>
+					<li>
+						Look for &quot;DEBUG: [Component] Dropdown is visible&quot; text in
+						dropdowns
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+}

src/components/ProjectStatusDropdown.js

@@ -72,10 +72,11 @@ export default function ProjectStatusDropdown({
 			});
 		}
 	};
-
 	const handleOpen = () => {
+		console.log(
+			"ProjectStatusDropdown handleOpen called, setting isOpen to true"
+		);
 		setIsOpen(true);
-		updateDropdownPosition();
 	};
 
 	useEffect(() => {
@@ -105,13 +106,17 @@ export default function ProjectStatusDropdown({
 			</Badge>
 		);
 	}
-
 	return (
 		<div className="relative">
-			{" "}
 			<button
 				ref={buttonRef}
-				onClick={handleOpen}
+				onClick={() => {
+					console.log(
+						"ProjectStatusDropdown button clicked, current isOpen:",
+						isOpen
+					);
+					setIsOpen(!isOpen);
+				}}
 				disabled={loading}
 				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
 			>
@@ -140,37 +145,38 @@ export default function ProjectStatusDropdown({
 					</svg>
 				</Badge>
 			</button>{" "}
-			{isOpen &&
-				typeof window !== "undefined" &&
-				createPortal(
-					<>
-						<div
-							className="fixed bg-white border border-gray-200 rounded-md shadow-lg z-[9999]"
-							style={{
-								top: dropdownPosition.top,
-								left: dropdownPosition.left,
-								minWidth: Math.max(dropdownPosition.width, 140),
+			{/* Simple dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: ProjectStatus Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("ProjectStatus Option clicked:", statusKey);
+								handleChange(statusKey);
 							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
 						>
-							{Object.entries(statusConfig).map(([statusKey, config]) => (
-								<button
-									key={statusKey}
-									onClick={() => handleChange(statusKey)}
-									className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
-								>
-									<Badge variant={config.variant} size="sm">
-										{config.label}
-									</Badge>
-								</button>
-							))}
-						</div>
-						<div
-							className="fixed inset-0 z-[9998]"
-							onClick={() => setIsOpen(false)}
-						/>
-					</>,
-					document.body
-				)}
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}{" "}
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("ProjectStatus Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
 		</div>
 	);
 }

src/components/ProjectStatusDropdownDebug.js

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+import Badge from "@/components/ui/Badge";
+
+export default function ProjectStatusDropdownDebug({
+	project,
+	size = "md",
+	showDropdown = true,
+}) {
+	const [status, setStatus] = useState(project.project_status);
+	const [loading, setLoading] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const statusConfig = {
+		registered: {
+			label: "Registered",
+			variant: "secondary",
+		},
+		in_progress_design: {
+			label: "In Progress (Design)",
+			variant: "primary",
+		},
+		in_progress_construction: {
+			label: "In Progress (Construction)",
+			variant: "primary",
+		},
+		fulfilled: {
+			label: "Completed",
+			variant: "success",
+		},
+	};
+
+	const handleChange = async (newStatus) => {
+		if (newStatus === status) {
+			setIsOpen(false);
+			return;
+		}
+
+		setStatus(newStatus);
+		setLoading(true);
+		setIsOpen(false);
+
+		try {
+			await fetch(`/api/projects/${project.project_id}`, {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ ...project, project_status: newStatus }),
+			});
+			window.location.reload();
+		} catch (error) {
+			console.error("Failed to update status:", error);
+			setStatus(project.project_status);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const currentConfig = statusConfig[status] || {
+		label: "Unknown",
+		variant: "default",
+	};
+
+	if (!showDropdown) {
+		return (
+			<Badge variant={currentConfig.variant} size={size}>
+				{currentConfig.label}
+			</Badge>
+		);
+	}
+
+	return (
+		<div className="relative">
+			<button
+				onClick={() => {
+					console.log("Project Status Button clicked, current isOpen:", isOpen);
+					setIsOpen(!isOpen);
+				}}
+				disabled={loading}
+				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
+			>
+				<Badge
+					variant={currentConfig.variant}
+					size={size}
+					className={`cursor-pointer hover:opacity-80 transition-opacity ${
+						loading ? "opacity-50" : ""
+					}`}
+				>
+					{loading ? "Updating..." : currentConfig.label}
+					<svg
+						className={`w-3 h-3 ml-1 transition-transform ${
+							isOpen ? "rotate-180" : ""
+						}`}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</Badge>
+			</button>
+
+			{/* Simple visible dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: Project Status Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("Project Status Option clicked:", statusKey);
+								handleChange(statusKey);
+							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
+						>
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("Project Status Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
+		</div>
+	);
+}

src/components/ProjectStatusDropdownSimple.js

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState } from "react";
+import Badge from "@/components/ui/Badge";
+
+export default function ProjectStatusDropdownSimple({
+	project,
+	size = "md",
+	showDropdown = true,
+}) {
+	const [status, setStatus] = useState(project.project_status);
+	const [loading, setLoading] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const statusConfig = {
+		registered: {
+			label: "Registered",
+			variant: "secondary",
+		},
+		in_progress_design: {
+			label: "In Progress (Design)",
+			variant: "primary",
+		},
+		in_progress_construction: {
+			label: "In Progress (Construction)",
+			variant: "primary",
+		},
+		fulfilled: {
+			label: "Completed",
+			variant: "success",
+		},
+	};
+
+	const handleChange = async (newStatus) => {
+		if (newStatus === status) {
+			setIsOpen(false);
+			return;
+		}
+
+		setStatus(newStatus);
+		setLoading(true);
+		setIsOpen(false);
+
+		try {
+			await fetch(`/api/projects/${project.project_id}`, {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ ...project, project_status: newStatus }),
+			});
+			window.location.reload();
+		} catch (error) {
+			console.error("Failed to update status:", error);
+			setStatus(project.project_status);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const currentConfig = statusConfig[status] || {
+		label: "Unknown",
+		variant: "default",
+	};
+
+	if (!showDropdown) {
+		return (
+			<Badge variant={currentConfig.variant} size={size}>
+				{currentConfig.label}
+			</Badge>
+		);
+	}
+
+	return (
+		<div className="relative">
+			<button
+				onClick={() => {
+					console.log(
+						"ProjectStatusDropdown button clicked, current isOpen:",
+						isOpen
+					);
+					setIsOpen(!isOpen);
+				}}
+				disabled={loading}
+				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
+			>
+				<Badge
+					variant={currentConfig.variant}
+					size={size}
+					className={`cursor-pointer hover:opacity-80 transition-opacity ${
+						loading ? "opacity-50" : ""
+					}`}
+				>
+					{loading ? "Updating..." : currentConfig.label}
+					<svg
+						className={`w-3 h-3 ml-1 transition-transform ${
+							isOpen ? "rotate-180" : ""
+						}`}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</Badge>
+			</button>
+
+			{/* Simple dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: ProjectStatus Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("ProjectStatus Option clicked:", statusKey);
+								handleChange(statusKey);
+							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last-rounded-b-md"
+						>
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("ProjectStatus Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
+		</div>
+	);
+}

src/components/ProjectTasksDashboard.js

@@ -4,7 +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 TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
 import SearchBar from "./ui/SearchBar";
 import { Select } from "./ui/Input";
 import Link from "next/link";
@@ -255,9 +255,9 @@ export default function ProjectTasksDashboard() {
 						</h4>
 						<Badge variant={getPriorityVariant(task.priority)} size="sm">
 							{task.priority}
-						</Badge>
+						</Badge>{" "}
 						{showStatusBadge && (
-							<TaskStatusDropdown
+							<TaskStatusDropdownSimple
 								task={task}
 								size="sm"
 								onStatusChange={handleStatusChange}
@@ -307,7 +307,7 @@ export default function ProjectTasksDashboard() {
 						</Badge>
 					)}{" "}
 					{(task.status === "pending" || task.status === "in_progress") && (
-						<TaskStatusDropdown
+						<TaskStatusDropdownSimple
 							task={task}
 							size="sm"
 							onStatusChange={handleStatusChange}

src/components/ProjectTasksSection.js

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import ProjectTaskForm from "./ProjectTaskForm";
-import TaskStatusDropdown from "./TaskStatusDropdown";
+import TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
@@ -448,7 +448,7 @@ export default function ProjectTasksSection({ projectId }) {
 														: "Not started"}
 												</td>{" "}
 												<td className="px-4 py-4">
-													<TaskStatusDropdown
+													<TaskStatusDropdownSimple
 														task={task}
 														size="sm"
 														onStatusChange={handleStatusChange}

src/components/TaskStatusDropdown.js

@@ -13,12 +13,6 @@ export default function TaskStatusDropdown({
 	const [status, setStatus] = useState(task.status);
 	const [loading, setLoading] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
-	const [dropdownPosition, setDropdownPosition] = useState({
-		top: 0,
-		left: 0,
-		width: 0,
-	});
-	const buttonRef = useRef(null);
 
 	const statusConfig = {
 		pending: {
@@ -84,10 +78,9 @@ export default function TaskStatusDropdown({
 			});
 		}
 	};
-
 	const handleOpen = () => {
+		console.log("TaskStatusDropdown handleOpen called, setting isOpen to true");
 		setIsOpen(true);
-		updateDropdownPosition();
 	};
 
 	useEffect(() => {
@@ -117,13 +110,17 @@ export default function TaskStatusDropdown({
 			</Badge>
 		);
 	}
-
 	return (
 		<div className="relative">
-			{" "}
 			<button
 				ref={buttonRef}
-				onClick={handleOpen}
+				onClick={() => {
+					console.log(
+						"TaskStatusDropdown button clicked, current isOpen:",
+						isOpen
+					);
+					setIsOpen(!isOpen);
+				}}
 				disabled={loading}
 				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
 			>
@@ -152,37 +149,38 @@ export default function TaskStatusDropdown({
 					</svg>
 				</Badge>
 			</button>{" "}
-			{isOpen &&
-				typeof window !== "undefined" &&
-				createPortal(
-					<>
-						<div
-							className="fixed bg-white border border-gray-200 rounded-md shadow-lg z-[9999]"
-							style={{
-								top: dropdownPosition.top,
-								left: dropdownPosition.left,
-								minWidth: Math.max(dropdownPosition.width, 120),
+			{/* Simple dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: TaskStatus Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("TaskStatus Option clicked:", statusKey);
+								handleChange(statusKey);
 							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
 						>
-							{Object.entries(statusConfig).map(([statusKey, config]) => (
-								<button
-									key={statusKey}
-									onClick={() => handleChange(statusKey)}
-									className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
-								>
-									<Badge variant={config.variant} size="sm">
-										{config.label}
-									</Badge>
-								</button>
-							))}
-						</div>
-						<div
-							className="fixed inset-0 z-[9998]"
-							onClick={() => setIsOpen(false)}
-						/>
-					</>,
-					document.body
-				)}
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}{" "}
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("TaskStatus Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
 		</div>
 	);
 }

src/components/TaskStatusDropdownDebug.js

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import Badge from "@/components/ui/Badge";
+
+export default function TaskStatusDropdownDebug({
+	task,
+	size = "sm",
+	showDropdown = true,
+	onStatusChange,
+}) {
+	const [status, setStatus] = useState(task.status);
+	const [loading, setLoading] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const statusConfig = {
+		pending: {
+			label: "Pending",
+			variant: "warning",
+		},
+		in_progress: {
+			label: "In Progress",
+			variant: "primary",
+		},
+		completed: {
+			label: "Completed",
+			variant: "success",
+		},
+		cancelled: {
+			label: "Cancelled",
+			variant: "danger",
+		},
+	};
+
+	const handleChange = async (newStatus) => {
+		if (newStatus === status) {
+			setIsOpen(false);
+			return;
+		}
+
+		setStatus(newStatus);
+		setLoading(true);
+		setIsOpen(false);
+
+		try {
+			const res = await fetch(`/api/project-tasks/${task.id}`, {
+				method: "PATCH",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ status: newStatus }),
+			});
+
+			if (res.ok) {
+				if (onStatusChange) {
+					onStatusChange(task.id, newStatus);
+				}
+			} else {
+				setStatus(task.status);
+				alert("Failed to update task status");
+			}
+		} catch (error) {
+			console.error("Failed to update status:", error);
+			setStatus(task.status);
+			alert("Error updating task status");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const currentConfig = statusConfig[status] || {
+		label: "Unknown",
+		variant: "default",
+	};
+
+	if (!showDropdown) {
+		return (
+			<Badge variant={currentConfig.variant} size={size}>
+				{currentConfig.label}
+			</Badge>
+		);
+	}
+
+	return (
+		<div className="relative">
+			<button
+				onClick={() => {
+					console.log("Button clicked, current isOpen:", isOpen);
+					setIsOpen(!isOpen);
+				}}
+				disabled={loading}
+				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
+			>
+				<Badge
+					variant={currentConfig.variant}
+					size={size}
+					className={`cursor-pointer hover:opacity-80 transition-opacity ${
+						loading ? "opacity-50" : ""
+					}`}
+				>
+					{loading ? "Updating..." : currentConfig.label}
+					<svg
+						className={`w-3 h-3 ml-1 transition-transform ${
+							isOpen ? "rotate-180" : ""
+						}`}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</Badge>
+			</button>
+
+			{/* Simple visible dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("Option clicked:", statusKey);
+								handleChange(statusKey);
+							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
+						>
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
+		</div>
+	);
+}

src/components/TaskStatusDropdownSimple.js

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import Badge from "@/components/ui/Badge";
+
+export default function TaskStatusDropdown({
+	task,
+	size = "sm",
+	showDropdown = true,
+	onStatusChange,
+}) {
+	const [status, setStatus] = useState(task.status);
+	const [loading, setLoading] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const statusConfig = {
+		pending: {
+			label: "Pending",
+			variant: "warning",
+		},
+		in_progress: {
+			label: "In Progress",
+			variant: "primary",
+		},
+		completed: {
+			label: "Completed",
+			variant: "success",
+		},
+		cancelled: {
+			label: "Cancelled",
+			variant: "danger",
+		},
+	};
+
+	const handleChange = async (newStatus) => {
+		if (newStatus === status) {
+			setIsOpen(false);
+			return;
+		}
+
+		setStatus(newStatus);
+		setLoading(true);
+		setIsOpen(false);
+
+		try {
+			const res = await fetch(`/api/project-tasks/${task.id}`, {
+				method: "PATCH",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ status: newStatus }),
+			});
+
+			if (res.ok) {
+				// Call the callback if provided (for parent component to refresh)
+				if (onStatusChange) {
+					onStatusChange(task.id, newStatus);
+				}
+			} else {
+				// Revert on error
+				setStatus(task.status);
+				alert("Failed to update task status");
+			}
+		} catch (error) {
+			console.error("Failed to update status:", error);
+			setStatus(task.status); // Revert on error
+			alert("Error updating task status");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const currentConfig = statusConfig[status] || {
+		label: "Unknown",
+		variant: "default",
+	};
+
+	if (!showDropdown) {
+		return (
+			<Badge variant={currentConfig.variant} size={size}>
+				{currentConfig.label}
+			</Badge>
+		);
+	}
+
+	return (
+		<div className="relative">
+			<button
+				onClick={() => {
+					console.log(
+						"TaskStatusDropdown button clicked, current isOpen:",
+						isOpen
+					);
+					setIsOpen(!isOpen);
+				}}
+				disabled={loading}
+				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
+			>
+				<Badge
+					variant={currentConfig.variant}
+					size={size}
+					className={`cursor-pointer hover:opacity-80 transition-opacity ${
+						loading ? "opacity-50" : ""
+					}`}
+				>
+					{loading ? "Updating..." : currentConfig.label}
+					<svg
+						className={`w-3 h-3 ml-1 transition-transform ${
+							isOpen ? "rotate-180" : ""
+						}`}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</Badge>
+			</button>
+
+			{/* Simple dropdown for debugging */}
+			{isOpen && (
+				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
+					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+						DEBUG: TaskStatus Dropdown is visible
+					</div>
+					{Object.entries(statusConfig).map(([statusKey, config]) => (
+						<button
+							key={statusKey}
+							onClick={() => {
+								console.log("TaskStatus Option clicked:", statusKey);
+								handleChange(statusKey);
+							}}
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
+						>
+							<Badge variant={config.variant} size="sm">
+								{config.label}
+							</Badge>
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Backdrop */}
+			{isOpen && (
+				<div
+					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
+					onClick={() => {
+						console.log("TaskStatus Backdrop clicked");
+						setIsOpen(false);
+					}}
+				/>
+			)}
+		</div>
+	);
+}