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

src/components/ProjectStatusDropdown.js

@@ -1,38 +1,176 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import Badge from "@/components/ui/Badge";
 
-export default function ProjectStatusDropdown({ project }) {
+export default function ProjectStatusDropdown({
+	project,
+	size = "md",
+	showDropdown = true,
+}) {
 	const [status, setStatus] = useState(project.project_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 = {
+		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;
+		}
 
-	const handleChange = async (e) => {
-		const newStatus = e.target.value;
 		setStatus(newStatus);
 		setLoading(true);
-		await fetch(`/api/projects/${project.project_id}`, {
-			method: "PUT",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ ...project, project_status: newStatus }),
-		});
-		setLoading(false);
-		window.location.reload();
+		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); // Revert on error
+		} finally {
+			setLoading(false);
+		}
 	};
 
+	const updateDropdownPosition = () => {
+		if (buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect();
+			setDropdownPosition({
+				top: rect.bottom + window.scrollY + 4,
+				left: rect.left + window.scrollX,
+				width: rect.width,
+			});
+		}
+	};
+
+	const handleOpen = () => {
+		setIsOpen(true);
+		updateDropdownPosition();
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			const handleResize = () => updateDropdownPosition();
+			const handleScroll = () => updateDropdownPosition();
+
+			window.addEventListener("resize", handleResize);
+			window.addEventListener("scroll", handleScroll, true);
+
+			return () => {
+				window.removeEventListener("resize", handleResize);
+				window.removeEventListener("scroll", handleScroll, true);
+			};
+		}
+	}, [isOpen]);
+
+	const currentConfig = statusConfig[status] || {
+		label: "Unknown",
+		variant: "default",
+	};
+
+	if (!showDropdown) {
+		return (
+			<Badge variant={currentConfig.variant} size={size}>
+				{currentConfig.label}
+			</Badge>
+		);
+	}
+
 	return (
-		<select
-			name="project_status"
-			value={status}
-			onChange={handleChange}
-			className="ml-2 border p-1 rounded"
-			disabled={loading}
-		>
-			<option value="registered">Zarejestrowany</option>
-			<option value="in_progress_design">W realizacji (projektowanie)</option>
-			<option value="in_progress_construction">
-				W realizacji (realizacja)
-			</option>
-			<option value="fulfilled">Zakończony</option>
-		</select>
+		<div className="relative">
+			{" "}
+			<button
+				ref={buttonRef}
+				onClick={handleOpen}
+				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>{" "}
+			{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),
+							}}
+						>
+							{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
+				)}
+		</div>
 	);
 }