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