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