feat: Implement task editing functionality with validation and user assignment

src/components/ProjectTasksSection.js

@@ -17,6 +17,15 @@ export default function ProjectTasksSection({ projectId }) {
 	const [showAddTaskModal, setShowAddTaskModal] = useState(false);
 	const [expandedDescriptions, setExpandedDescriptions] = useState({});
 	const [expandedNotes, setExpandedNotes] = useState({});
+	const [editingTask, setEditingTask] = useState(null);
+	const [showEditTaskModal, setShowEditTaskModal] = useState(false);
+	const [editTaskForm, setEditTaskForm] = useState({
+		priority: "",
+		date_started: "",
+		status: "",
+		assigned_to: "",
+	});
+	const [users, setUsers] = useState([]);
 	useEffect(() => {
 		const fetchProjectTasks = async () => {
 			try {
@@ -49,22 +58,38 @@ export default function ProjectTasksSection({ projectId }) {
 			}
 		};
 
+		// Fetch users for assignment dropdown
+		const fetchUsers = async () => {
+			try {
+				const res = await fetch("/api/project-tasks/users");
+				const usersData = await res.json();
+				setUsers(usersData);
+			} catch (error) {
+				console.error("Failed to fetch users:", error);
+			}
+		};
+
 		fetchProjectTasks();
+		fetchUsers();
 	}, [projectId]);
-	// Handle escape key to close modal
+	// Handle escape key to close modals
 	useEffect(() => {
 		const handleEscape = (e) => {
-			if (e.key === "Escape" && showAddTaskModal) {
-				setShowAddTaskModal(false);
+			if (e.key === "Escape") {
+				if (showEditTaskModal) {
+					handleCloseEditModal();
+				} else if (showAddTaskModal) {
+					setShowAddTaskModal(false);
+				}
 			}
 		};
 
 		document.addEventListener("keydown", handleEscape);
 		return () => document.removeEventListener("keydown", handleEscape);
-	}, [showAddTaskModal]);
+	}, [showAddTaskModal, showEditTaskModal]);
 	// Prevent body scroll when modal is open and handle map z-index
 	useEffect(() => {
-		if (showAddTaskModal) {
+		if (showAddTaskModal || showEditTaskModal) {
 			// Prevent body scroll
 			document.body.style.overflow = "hidden";
 
@@ -111,7 +136,7 @@ export default function ProjectTasksSection({ projectId }) {
 				nav.style.zIndex = "";
 			});
 		};
-	}, [showAddTaskModal]);
+	}, [showAddTaskModal, showEditTaskModal]);
 	const refetchTasks = async () => {
 		try {
 			const res = await fetch(`/api/project-tasks?project_id=${projectId}`);
@@ -171,10 +196,11 @@ export default function ProjectTasksSection({ projectId }) {
 			if (res.ok) {
 				refetchTasks(); // Refresh the list
 			} else {
-				alert("Failed to delete task");
+				const errorData = await res.json();
+				alert("Failed to delete task: " + (errorData.error || "Unknown error"));
 			}
 		} catch (error) {
-			alert("Error deleting task");
+			alert("Error deleting task: " + error.message);
 		}
 	};
 
@@ -210,26 +236,66 @@ export default function ProjectTasksSection({ projectId }) {
 		}
 	};
 
-	const handleDeleteNote = async (noteId, taskId) => {
-		if (!confirm("Are you sure you want to delete this note?")) return;
+	const handleEditTask = (task) => {
+		setEditingTask(task);
+
+		// Format date for HTML input (YYYY-MM-DD)
+		let dateStarted = "";
+		if (task.date_started) {
+			const date = new Date(task.date_started);
+			if (!isNaN(date.getTime())) {
+				dateStarted = date.toISOString().split("T")[0];
+			}
+		}
+
+		const formData = {
+			priority: task.priority || "",
+			date_started: dateStarted,
+			status: task.status || "",
+			assigned_to: task.assigned_to || "",
+		};
+
+		setEditTaskForm(formData);
+		setShowEditTaskModal(true);
+	};
+
+	const handleUpdateTask = async () => {
+		if (!editingTask) return;
 
 		try {
-			const res = await fetch(`/api/task-notes?note_id=${noteId}`, {
-				method: "DELETE",
+			const res = await fetch(`/api/project-tasks/${editingTask.id}`, {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					priority: editTaskForm.priority,
+					date_started: editTaskForm.date_started || null,
+					status: editTaskForm.status,
+					assigned_to: editTaskForm.assigned_to || null,
+				}),
 			});
 
 			if (res.ok) {
-				// Refresh notes for this task
-				const notesRes = await fetch(`/api/task-notes?task_id=${taskId}`);
-				const notes = await notesRes.json();
-				setTaskNotes((prev) => ({ ...prev, [taskId]: notes }));
+				refetchTasks();
+				handleCloseEditModal();
 			} else {
-				alert("Failed to delete note");
+				alert("Failed to update task");
 			}
 		} catch (error) {
-			alert("Error deleting note");
+			alert("Error updating task");
 		}
 	};
+
+	const handleCloseEditModal = () => {
+		setShowEditTaskModal(false);
+		setEditingTask(null);
+		setEditTaskForm({
+			priority: "",
+			date_started: "",
+			status: "",
+			assigned_to: "",
+		});
+	};
+
 	const getPriorityVariant = (priority) => {
 		switch (priority) {
 			case "urgent":
@@ -447,7 +513,7 @@ export default function ProjectTasksSection({ projectId }) {
 													{task.date_started
 														? formatDate(task.date_started)
 														: "Not started"}
-												</td>{" "}
+												</td>
 												<td className="px-4 py-4">
 													<TaskStatusDropdownSimple
 														task={task}
@@ -464,6 +530,14 @@ export default function ProjectTasksSection({ projectId }) {
 														>
 															Notes ({taskNotes[task.id]?.length || 0})
 														</button>
+														<Button
+															variant="outline"
+															size="sm"
+															onClick={() => handleEditTask(task)}
+															className="text-xs"
+														>
+															Edit
+														</Button>
 														<Button
 															variant="danger"
 															size="sm"
@@ -594,6 +668,134 @@ export default function ProjectTasksSection({ projectId }) {
 					)}
 				</CardContent>
 			</Card>
+			{/* Edit Task Modal */}
+			{showEditTaskModal && (
+				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]">
+					<div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
+						<div className="flex items-center justify-between mb-4">
+							<h3 className="text-lg font-semibold text-gray-900">
+								Edit Task:{" "}
+								{editingTask?.custom_task_name || editingTask?.task_name}
+							</h3>
+							<button
+								onClick={handleCloseEditModal}
+								className="text-gray-400 hover:text-gray-600"
+							>
+								<svg
+									className="w-5 h-5"
+									fill="currentColor"
+									viewBox="0 0 20 20"
+								>
+									<path
+										fillRule="evenodd"
+										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</button>
+						</div>
+
+						<div className="space-y-4">
+							{/* Assignment */}
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Assigned To
+								</label>
+								<select
+									value={editTaskForm.assigned_to}
+									onChange={(e) =>
+										setEditTaskForm((prev) => ({
+											...prev,
+											assigned_to: e.target.value,
+										}))
+									}
+									className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+								>
+									<option value="">Unassigned</option>
+									{users.map((user) => (
+										<option key={user.id} value={user.id}>
+											{user.name}
+										</option>
+									))}
+								</select>
+							</div>
+
+							{/* Priority */}
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Priority
+								</label>
+								<select
+									value={editTaskForm.priority}
+									onChange={(e) =>
+										setEditTaskForm((prev) => ({
+											...prev,
+											priority: e.target.value,
+										}))
+									}
+									className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+								>
+									<option value="">Select Priority</option>
+									<option value="low">Low</option>
+									<option value="normal">Normal</option>
+									<option value="high">High</option>
+									<option value="urgent">Urgent</option>
+								</select>
+							</div>
+
+							{/* Date Started */}
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Date Started
+								</label>
+								<input
+									type="date"
+									value={editTaskForm.date_started}
+									onChange={(e) =>
+										setEditTaskForm((prev) => ({
+											...prev,
+											date_started: e.target.value,
+										}))
+									}
+									className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+								/>
+							</div>
+
+							{/* Status */}
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Status
+								</label>
+								<select
+									value={editTaskForm.status}
+									onChange={(e) =>
+										setEditTaskForm((prev) => ({
+											...prev,
+											status: e.target.value,
+										}))
+									}
+									className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+								>
+									<option value="">Select Status</option>
+									<option value="pending">Pending</option>
+									<option value="in_progress">In Progress</option>
+									<option value="completed">Completed</option>
+									<option value="cancelled">Cancelled</option>
+								</select>
+							</div>
+						</div>
+
+						<div className="flex items-center justify-end gap-3 mt-6">
+							<Button variant="outline" onClick={handleCloseEditModal}>
+								Cancel
+							</Button>
+							<Button variant="primary" onClick={handleUpdateTask}>
+								Update Task
+							</Button>
+						</div>
+					</div>
+				</div>
+			)}
 		</div>
 	);
 }