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/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>
+	);
+}