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

2025-06-19 22:59:48 +02:00
parent 2f5194bb4e
commit 1dc3fd88f9
7 changed files with 388 additions and 177 deletions
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import Badge from "@/components/ui/Badge";
+import TaskStatusDropdown from "@/components/TaskStatusDropdown";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 import { LoadingState } from "@/components/ui/States";
@@ -906,20 +907,11 @@ export default function Home() {
 													<h4 className="text-sm font-medium text-gray-900 truncate">
 														{task.task_name}
 													</h4>
-													<Badge
-														variant={
-															task.status === "completed"
-																? "success"
-																: task.status === "in_progress"
-																? "primary"
-																: task.status === "pending"
-																? "secondary"
-																: "default"
-														}
+													<TaskStatusDropdown
+														task={task}
 														size="xs"
-													>
-														{task.status?.replace("_", " ")}
-													</Badge>
+														showDropdown={false}
+													/>
 													{task.priority && (
 														<Badge
 															variant={getTaskPriorityVariant(task.priority)}
--- a/src/app/projects/[id]/page.js
+++ b/src/app/projects/[id]/page.js
@@ -50,6 +50,7 @@ export default async function ProjectViewPage({ params }) {
 				description={`${project.city} • ${project.address}`}
 				action={
 					<div className="flex items-center gap-3">
+						<ProjectStatusDropdown project={project} size="sm" />
 						{daysRemaining !== null && (
 							<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
 								{daysRemaining === 0
@@ -103,6 +104,7 @@ export default async function ProjectViewPage({ params }) {
 				<div className="lg:col-span-2 space-y-6">
 					<Card>
 						<CardHeader>
+							{" "}
 							<div className="flex items-center justify-between">
 								<h2 className="text-xl font-semibold text-gray-900">
 									Project Information
@@ -283,37 +285,13 @@ export default async function ProjectViewPage({ params }) {
 							</h2>
 						</CardHeader>
 						<CardContent className="space-y-4">
+							{" "}
 							<div>
 								<span className="text-sm font-medium text-gray-500 block mb-2">
 									Current Status
 								</span>
-								<div className="flex items-center gap-2">
-									<Badge
-										variant={
-											project.project_status === "fulfilled"
-												? "success"
-												: project.project_status === "registered"
-												? "secondary"
-												: "primary"
-										}
-										size="md"
-									>
-										{project.project_status === "registered"
-											? "Registered"
-											: project.project_status === "in_progress_design"
-											? "In Progress (Design)"
-											: project.project_status === "in_progress_construction"
-											? "In Progress (Construction)"
-											: project.project_status === "fulfilled"
-											? "Completed"
-											: "Unknown"}
-									</Badge>
-								</div>
-								<div className="mt-3">
-									<ProjectStatusDropdown project={project} />
-								</div>
+								<ProjectStatusDropdown project={project} size="md" />
 							</div>
-
 							{daysRemaining !== null && (
 								<div className="border-t pt-4">
 									<span className="text-sm font-medium text-gray-500 block mb-2">
--- a/src/app/tasks/page.js
+++ b/src/app/tasks/page.js
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import Badge from "@/components/ui/Badge";
+import TaskStatusDropdown from "@/components/TaskStatusDropdown";
 import { Input } from "@/components/ui/Input";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import PageContainer from "@/components/ui/PageContainer";
@@ -125,32 +126,6 @@ export default function ProjectTasksPage() {
 		}
 	};

-	const getStatusVariant = (status) => {
-		switch (status) {
-			case "completed":
-				return "success";
-			case "in_progress":
-				return "warning";
-			case "pending":
-				return "secondary";
-			default:
-				return "secondary";
-		}
-	};
-
-	const getStatusDisplayName = (status) => {
-		switch (status) {
-			case "in_progress":
-				return "In Progress";
-			case "completed":
-				return "Completed";
-			case "pending":
-				return "Pending";
-			default:
-				return status;
-		}
-	};
-
 	const statusCounts = {
 		all: allTasks.length,
 		pending: allTasks.filter((task) => task.status === "pending").length,
@@ -354,13 +329,16 @@ export default function ProjectTasksPage() {
 							<CardContent className="p-6">
 								<div className="flex items-start justify-between">
 									<div className="flex-1">
+										{" "}
 										<div className="flex items-center gap-3 mb-2">
 											<h3 className="text-lg font-semibold text-gray-900">
 												{task.task_name}
 											</h3>
-											<Badge variant={getStatusVariant(task.status)} size="sm">
-												{getStatusDisplayName(task.status)}
-											</Badge>
+											<TaskStatusDropdown
+												task={task}
+												size="sm"
+												onStatusChange={handleStatusChange}
+											/>
 											<Badge
 												variant={getPriorityVariant(task.priority)}
 												size="sm"
@@ -373,7 +351,6 @@ export default function ProjectTasksPage() {
 												</Badge>
 											)}
 										</div>
-
 										<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 											<div>
 												<p className="text-sm text-gray-600">Project</p>
@@ -396,7 +373,6 @@ export default function ProjectTasksPage() {
 												</div>
 											)}
 										</div>
-
 										<div className="flex items-center gap-4 text-sm text-gray-500">
 											<span>
 												Added{" "}
@@ -408,23 +384,8 @@ export default function ProjectTasksPage() {
 												<span>Max wait: {task.max_wait_days} days</span>
 											)}
 										</div>
-									</div>
-
+									</div>{" "}
 									<div className="flex items-center space-x-2 ml-6">
-										{task.status !== "completed" && (
-											<select
-												className="text-sm px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-												value={task.status}
-												onChange={(e) =>
-													handleStatusChange(task.id, e.target.value)
-												}
-											>
-												<option value="pending">Pending</option>
-												<option value="in_progress">In Progress</option>
-												<option value="completed">Completed</option>
-											</select>
-										)}
-
 										<Link href={`/projects/${task.project_id}`}>
 											<Button variant="outline" size="sm">
 												View Project
--- a/src/components/ProjectStatusDropdown.js
+++ b/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>
 	);
 }
--- a/src/components/ProjectTasksDashboard.js
+++ b/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>
--- a/src/components/ProjectTasksSection.js
+++ b/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">
--- a/src/components/TaskStatusDropdown.js
+++ b/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>
+	);
+}