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

src/components/ProjectTasksDashboard.js

@@ -4,6 +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 SearchBar from "./ui/SearchBar";
 import { Select } from "./ui/Input";
 import Link from "next/link";
@@ -222,7 +223,6 @@ export default function ProjectTasksDashboard() {
 			alert("Error updating task status");
 		}
 	};
-
 	const getPriorityVariant = (priority) => {
 		switch (priority) {
 			case "urgent":
@@ -238,21 +238,6 @@ export default function ProjectTasksDashboard() {
 		}
 	};
 
-	const getStatusBadgeVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "primary";
-			case "pending":
-				return "warning";
-			case "cancelled":
-				return "danger";
-			default:
-				return "default";
-		}
-	};
-
 	const getOverdueBadgeVariant = (days) => {
 		if (days > 7) return "danger";
 		if (days > 3) return "warning";
@@ -263,6 +248,7 @@ export default function ProjectTasksDashboard() {
 		<div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow bg-white">
 			<div className="flex items-start justify-between mb-3">
 				<div className="flex-1 min-w-0">
+					{" "}
 					<div className="flex items-center gap-2 mb-2">
 						<h4 className="text-sm font-medium text-gray-900 truncate">
 							{task.task_name}
@@ -271,9 +257,11 @@ export default function ProjectTasksDashboard() {
 							{task.priority}
 						</Badge>
 						{showStatusBadge && (
-							<Badge variant={getStatusBadgeVariant(task.status)} size="sm">
-								{task.status.replace("_", " ")}
-							</Badge>
+							<TaskStatusDropdown
+								task={task}
+								size="sm"
+								onStatusChange={handleStatusChange}
+							/>
 						)}
 					</div>
 					<div className="flex items-center gap-4 text-xs text-gray-600 mb-2">
@@ -317,18 +305,13 @@ export default function ProjectTasksDashboard() {
 						<Badge variant="warning" size="sm">
 							Due in {task.statusInfo.days} days
 						</Badge>
-					)}
+					)}{" "}
 					{(task.status === "pending" || task.status === "in_progress") && (
-						<select
-							value={task.status}
-							onChange={(e) => handleStatusChange(task.id, e.target.value)}
-							className="px-2 py-1 text-xs border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
-						>
-							<option value="pending">Pending</option>
-							<option value="in_progress">In Progress</option>
-							<option value="completed">Completed</option>
-							<option value="cancelled">Cancelled</option>
-						</select>
+						<TaskStatusDropdown
+							task={task}
+							size="sm"
+							onStatusChange={handleStatusChange}
+						/>
 					)}
 				</div>
 			</div>

src/components/ProjectTasksSection.js

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import ProjectTaskForm from "./ProjectTaskForm";
+import TaskStatusDropdown from "./TaskStatusDropdown";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
@@ -142,7 +143,6 @@ export default function ProjectTasksSection({ projectId }) {
 		refetchTasks(); // Refresh the list
 		setShowAddTaskModal(false); // Close the modal
 	};
-
 	const handleStatusChange = async (taskId, newStatus) => {
 		try {
 			const res = await fetch(`/api/project-tasks/${taskId}`, {
@@ -243,20 +243,6 @@ export default function ProjectTasksSection({ projectId }) {
 				return "default";
 		}
 	};
-	const getStatusVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "primary";
-			case "pending":
-				return "warning";
-			case "cancelled":
-				return "danger";
-			default:
-				return "default";
-		}
-	};
 
 	const toggleDescription = (taskId) => {
 		setExpandedDescriptions((prev) => ({
@@ -460,28 +446,13 @@ export default function ProjectTasksSection({ projectId }) {
 													{task.date_started
 														? new Date(task.date_started).toLocaleDateString()
 														: "Not started"}
-												</td>
+												</td>{" "}
 												<td className="px-4 py-4">
-													<div className="flex items-center gap-2">
-														<select
-															value={task.status}
-															onChange={(e) =>
-																handleStatusChange(task.id, e.target.value)
-															}
-															className="text-xs px-2 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-														>
-															<option value="pending">Pending</option>
-															<option value="in_progress">In Progress</option>
-															<option value="completed">Completed</option>
-															<option value="cancelled">Cancelled</option>
-														</select>
-														<Badge
-															variant={getStatusVariant(task.status)}
-															size="sm"
-														>
-															{task.status.replace("_", " ")}
-														</Badge>
-													</div>
+													<TaskStatusDropdown
+														task={task}
+														size="sm"
+														onStatusChange={handleStatusChange}
+													/>
 												</td>
 												<td className="px-4 py-4">
 													<div className="flex items-center gap-2">

src/components/TaskStatusDropdown.js

@@ -0,0 +1,188 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+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 [dropdownPosition, setDropdownPosition] = useState({
+		top: 0,
+		left: 0,
+		width: 0,
+	});
+	const buttonRef = useRef(null);
+
+	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 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 (
+		<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, 120),
+							}}
+						>
+							{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>
+	);
+}