feat: implement ProjectTasksList component and update ProjectTasksPage to use it

feat: add date_completed column to project_tasks table in database initialization
feat: update project task status to set date_completed when marking as completed

src/app/project-tasks/page.js

@@ -1,4 +1,4 @@
-import ProjectTasksDashboard from "@/components/ProjectTasksDashboard";
+import ProjectTasksList from "@/components/ProjectTasksList";
 import PageContainer from "@/components/ui/PageContainer";
 import PageHeader from "@/components/ui/PageHeader";
 
@@ -7,9 +7,9 @@ export default function ProjectTasksPage() {
 		<PageContainer>
 			<PageHeader
 				title="Project Tasks"
-				description="Monitor pending tasks, overdue items, and recent activity across all projects"
+				description="View and manage tasks across all projects in a structured list format"
 			/>
-			<ProjectTasksDashboard />
+			<ProjectTasksList />
 		</PageContainer>
 	);
 }

src/components/ProjectTasksList.js

@@ -0,0 +1,518 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardHeader, CardContent } from "./ui/Card";
+import Button from "./ui/Button";
+import Badge from "./ui/Badge";
+import TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
+import SearchBar from "./ui/SearchBar";
+import { Select } from "./ui/Input";
+import Link from "next/link";
+import {
+	differenceInCalendarDays,
+	parseISO,
+	formatDistanceToNow,
+} from "date-fns";
+import { formatDate } from "@/lib/utils";
+
+export default function ProjectTasksList() {
+	const [allTasks, setAllTasks] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [groupBy, setGroupBy] = useState("none");
+
+	useEffect(() => {
+		const fetchAllTasks = async () => {
+			try {
+				const res = await fetch("/api/all-project-tasks");
+				const tasks = await res.json();
+				setAllTasks(tasks);
+			} catch (error) {
+				console.error("Failed to fetch project tasks:", error);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchAllTasks();
+	}, []);	// Calculate task status based on date_added and max_wait_days
+	const getTaskStatus = (task) => {
+		if (task.status === "completed" || task.status === "cancelled") {
+			return { type: "completed", days: 0 };
+		}
+		try {
+			// For in-progress tasks, use date_started if available and valid, otherwise fall back to date_added
+			let referenceDate;
+            console.log(task.date_started)
+			if (task.status === "in_progress" && task.date_started && task.date_started.trim() !== "") {
+				// Handle the format "2025-06-20 08:40:38"
+				referenceDate = new Date(task.date_started);
+			} else {
+				// Handle date_added format
+				referenceDate = task.date_added.includes("T")
+					? parseISO(task.date_added)
+					: new Date(task.date_added);
+			}
+
+			// Check if date is valid
+			if (isNaN(referenceDate.getTime())) {
+				throw new Error("Invalid date");
+			}
+
+			const daysElapsed = differenceInCalendarDays(new Date(), referenceDate);
+			const maxWaitDays = task.max_wait_days || 0;
+			const daysRemaining = maxWaitDays - daysElapsed;
+
+			if (task.status === "in_progress") {
+				if (daysRemaining < 0) {
+					return { type: "overdue", days: Math.abs(daysRemaining), daysRemaining: daysRemaining };
+				} else {
+					return { type: "in_progress", days: daysRemaining, daysRemaining: daysRemaining };
+				}
+			}
+
+			// For pending tasks, use original logic
+			const daysOverdue = daysElapsed - maxWaitDays;
+			if (daysOverdue > 0) {
+				return { type: "overdue", days: daysOverdue };
+			} else if (maxWaitDays - daysElapsed <= 2) {
+				return { type: "due_soon", days: maxWaitDays - daysElapsed };
+			} else {
+				return { type: "pending", days: maxWaitDays - daysElapsed };
+			}
+		} catch (error) {
+			console.error("Error parsing date:", task.date_added, task.date_started, error);
+			return { type: "pending", days: 0 };
+		}
+	};
+	// Group tasks by status
+	const groupTasksByStatus = () => {
+		const groups = {
+			pending: [],
+			in_progress: [],
+			completed: [],
+		};
+
+		allTasks.forEach((task) => {
+			const statusInfo = getTaskStatus(task);
+			const taskWithStatus = { ...task, statusInfo };
+
+			if (task.status === "completed" || task.status === "cancelled") {
+				groups.completed.push(taskWithStatus);
+			} else if (task.status === "in_progress") {
+				groups.in_progress.push(taskWithStatus);
+			} else {
+				groups.pending.push(taskWithStatus);
+			}
+		});
+
+		// Sort pending tasks by date_added (newest first)
+		groups.pending.sort((a, b) => {
+			try {
+				const dateA = new Date(a.date_added);
+				const dateB = new Date(b.date_added);
+				return dateB - dateA; // Newest first
+			} catch (error) {
+				return 0;
+			}
+		});
+
+		// Sort in_progress tasks by time left (urgent first - less time left comes first)
+		groups.in_progress.sort((a, b) => {
+			// If both have valid time remaining, sort by days remaining (ascending - urgent first)
+			if (!isNaN(a.statusInfo.daysRemaining) && !isNaN(b.statusInfo.daysRemaining)) {
+				return a.statusInfo.daysRemaining - b.statusInfo.daysRemaining;
+			}
+			// If one has invalid time, sort by date_started as fallback
+			try {
+				const dateA = a.date_started ? new Date(a.date_started) : new Date(a.date_added);
+				const dateB = b.date_started ? new Date(b.date_started) : new Date(b.date_added);
+				return dateA - dateB; // Oldest started first
+			} catch (error) {
+				return 0;
+			}
+		});		// Sort completed tasks by date_completed if available, otherwise by date_added (most recently completed first)
+		groups.completed.sort((a, b) => {
+			try {
+				// Try to use date_completed first
+				if (a.date_completed && b.date_completed) {
+					const dateA = new Date(a.date_completed);
+					const dateB = new Date(b.date_completed);
+					return dateB - dateA; // Most recently completed first
+				}
+				// If only one has date_completed, prioritize it
+				if (a.date_completed && !b.date_completed) return -1;
+				if (!a.date_completed && b.date_completed) return 1;
+				
+				// Fall back to date_added for both
+				const dateA = new Date(a.date_added);
+				const dateB = new Date(b.date_added);
+				return dateB - dateA; // Newest first
+			} catch (error) {
+				return 0;
+			}
+		});
+
+		return groups;
+	};
+
+	const taskGroups = groupTasksByStatus();
+	// Filter tasks based on search term
+	const filterTasks = (tasks) => {
+		if (!searchTerm) return tasks;
+		return tasks.filter(
+			(task) =>
+				task.task_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				task.project_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				task.city?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				task.address?.toLowerCase().includes(searchTerm.toLowerCase())
+		);
+	};
+
+	// Group tasks by task name when groupBy is set to "task_name"
+	const groupTasksByName = (tasks) => {
+		if (groupBy !== "task_name") return { "All Tasks": tasks };
+
+		const groups = {};
+		tasks.forEach((task) => {
+			const taskName = task.task_name;
+			if (!groups[taskName]) {
+				groups[taskName] = [];
+			}
+			groups[taskName].push(task);
+		});
+
+		return groups;
+	};
+
+	const handleStatusChange = async (taskId, newStatus) => {
+		try {
+			const res = await fetch(`/api/project-tasks/${taskId}`, {
+				method: "PATCH",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ status: newStatus }),
+			});
+
+			if (res.ok) {
+				// Refresh tasks
+				const res2 = await fetch("/api/all-project-tasks");
+				const tasks = await res2.json();
+				setAllTasks(tasks);
+			} else {
+				alert("Failed to update task status");
+			}
+		} catch (error) {
+			alert("Error updating task status");
+		}
+	};
+
+	const getPriorityVariant = (priority) => {
+		switch (priority) {
+			case "urgent":
+				return "urgent";
+			case "high":
+				return "high";
+			case "normal":
+				return "normal";
+			case "low":
+				return "low";
+			default:
+				return "default";
+		}
+	};
+
+	const getOverdueBadgeVariant = (days) => {
+		if (days > 7) return "danger";
+		if (days > 3) return "warning";
+		return "high";
+	};	const TaskRow = ({ task, showTimeLeft = false }) => (
+		<tr className="hover:bg-gray-50 border-b border-gray-200">
+			<td className="px-4 py-3">
+				<div className="flex items-center gap-2">
+					<span className="font-medium text-gray-900">{task.task_name}</span>
+					<Badge variant={getPriorityVariant(task.priority)} size="sm">
+						{task.priority}
+					</Badge>
+				</div>
+			</td>
+			<td className="px-4 py-3">
+				<Link
+					href={`/projects/${task.project_id}`}
+					className="text-blue-600 hover:text-blue-800 font-medium"
+				>
+					{task.project_name}
+				</Link>
+			</td>			<td className="px-4 py-3 text-sm text-gray-600">{task.city || 'N/A'}</td>
+			<td className="px-4 py-3 text-sm text-gray-600">{task.address || 'N/A'}</td>
+			{showTimeLeft && (
+				<td className="px-4 py-3">
+					<div className="flex items-center gap-2">
+						{task.statusInfo && task.statusInfo.type === "in_progress" && (
+							<Badge 
+								variant={task.statusInfo.daysRemaining <= 2 ? "warning" : "secondary"} 
+								size="sm"
+							>
+								{!isNaN(task.statusInfo.daysRemaining) ? (
+									task.statusInfo.daysRemaining > 0 
+										? `${task.statusInfo.daysRemaining}d left`
+										: `${Math.abs(task.statusInfo.daysRemaining)}d overdue`
+								) : (
+									"Calculating..."
+								)}
+							</Badge>
+						)}
+						{task.statusInfo && task.statusInfo.type === "overdue" && task.status === "in_progress" && (
+							<Badge 
+								variant="danger" 
+								size="sm"
+							>
+								{!isNaN(task.statusInfo.daysRemaining) ? `${Math.abs(task.statusInfo.daysRemaining)}d overdue` : "Overdue"}
+							</Badge>
+						)}
+					</div>
+				</td>
+			)}			<td className="px-4 py-3 text-sm text-gray-500">
+				{task.status === "completed" && task.date_completed ? (
+					<div>
+						<div>
+							Completed: {(() => {
+								try {
+									const completedDate = new Date(task.date_completed);
+									return formatDistanceToNow(completedDate, { addSuffix: true });
+								} catch (error) {
+									return task.date_completed;
+								}
+							})()}
+						</div>
+					</div>
+				) : task.status === "in_progress" && task.date_started ? (
+					<div>
+						<div>
+							Started: {(() => {
+								try {
+									const startedDate = new Date(task.date_started);
+									return formatDistanceToNow(startedDate, { addSuffix: true });
+								} catch (error) {
+									return task.date_started;
+								}
+							})()}
+						</div>
+					</div>
+				) : (
+					(() => {
+						try {
+							const addedDate = task.date_added.includes("T")
+								? parseISO(task.date_added)
+								: new Date(task.date_added);
+							return formatDistanceToNow(addedDate, { addSuffix: true });
+						} catch (error) {
+							return task.date_added;
+						}
+					})()
+				)}
+			</td>
+			<td className="px-4 py-3 text-sm text-gray-500">
+				{task.max_wait_days} days
+			</td>
+			<td className="px-4 py-3">
+				<TaskStatusDropdownSimple
+					task={task}
+					size="sm"
+					onStatusChange={handleStatusChange}
+				/>
+			</td>
+		</tr>
+	);
+	const TaskTable = ({ tasks, showGrouped = false, showTimeLeft = false }) => {
+		const filteredTasks = filterTasks(tasks);
+		const groupedTasks = groupTasksByName(filteredTasks);
+		const colSpan = showTimeLeft ? "8" : "7";
+
+		return (
+			<div className="overflow-x-auto">
+				<table className="w-full bg-white rounded-lg shadow-sm">
+					<thead className="bg-gray-50">
+						<tr>
+							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Task Name
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Project
+							</th>							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								City
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Address
+							</th>
+							{showTimeLeft && (
+								<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+									Time Left
+								</th>
+							)}							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Date Info
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Max Wait
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{Object.entries(groupedTasks).map(([groupName, groupTasks]) => (
+							<>
+								{showGrouped && groupName !== "All Tasks" && (
+									<tr key={`group-${groupName}`}>
+										<td
+											colSpan={colSpan}
+											className="px-4 py-2 bg-gray-100 font-medium text-gray-800 text-sm"
+										>
+											{groupName} ({groupTasks.length} tasks)
+										</td>
+									</tr>
+								)}
+								{groupTasks.map((task) => (
+									<TaskRow key={task.id} task={task} showTimeLeft={showTimeLeft} />
+								))}
+							</>
+						))}
+					</tbody>
+				</table>
+				{filteredTasks.length === 0 && (
+					<div className="text-center py-8 text-gray-500">
+						<p>No tasks found</p>
+					</div>
+				)}
+			</div>
+		);
+	};
+	if (loading) {
+		return (
+			<div className="space-y-6">
+				<div className="animate-pulse space-y-4">
+					<div className="h-8 bg-gray-200 rounded w-1/4"></div>
+					<div className="h-64 bg-gray-200 rounded-lg"></div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-6">
+			{/* Summary Stats */}
+			<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+				<Card>
+					<CardContent className="p-4 text-center">
+						<div className="text-2xl font-bold text-blue-600">
+							{taskGroups.pending.length}
+						</div>
+						<div className="text-sm text-gray-600">Pending</div>
+					</CardContent>
+				</Card>
+				<Card>
+					<CardContent className="p-4 text-center">
+						<div className="text-2xl font-bold text-purple-600">
+							{taskGroups.in_progress.length}
+						</div>
+						<div className="text-sm text-gray-600">In Progress</div>
+					</CardContent>
+				</Card>
+				<Card>
+					<CardContent className="p-4 text-center">
+						<div className="text-2xl font-bold text-green-600">
+							{taskGroups.completed.length}
+						</div>
+						<div className="text-sm text-gray-600">Completed</div>
+					</CardContent>
+				</Card>
+			</div>			{/* Search and Controls */}			<SearchBar
+				searchTerm={searchTerm}
+				onSearchChange={(e) => setSearchTerm(e.target.value)}
+				placeholder="Search tasks, projects, city, or address..."
+				resultsCount={
+					filterTasks(taskGroups.pending).length +
+					filterTasks(taskGroups.in_progress).length +
+					filterTasks(taskGroups.completed).length
+				}
+				resultsText="tasks"
+				filters={
+					<div className="flex items-center gap-4">
+						<div className="flex items-center gap-2">
+							<label className="text-sm font-medium text-gray-700">Group by:</label>
+							<Select
+								value={groupBy}
+								onChange={(e) => setGroupBy(e.target.value)}
+								className="min-w-[120px]"
+							>
+								<option value="none">None</option>
+								<option value="task_name">Task Name</option>
+							</Select>
+						</div>
+					</div>
+				}
+			/>			{/* Task Tables */}
+			<div className="space-y-8">
+				{/* Pending Tasks */}
+				<div>
+					<div className="mb-4">
+						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
+							Pending Tasks
+							<Badge variant="primary" size="md">
+								{taskGroups.pending.length}
+							</Badge>
+						</h2>
+						<p className="text-sm text-gray-600 mt-1">
+							Tasks waiting to be started
+						</p>
+					</div>
+					<TaskTable
+						tasks={taskGroups.pending}
+						showGrouped={groupBy === "task_name"}
+						showTimeLeft={false}
+					/>
+				</div>
+
+				{/* In Progress Tasks */}
+				<div>
+					<div className="mb-4">
+						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
+							In Progress Tasks
+							<Badge variant="secondary" size="md">
+								{taskGroups.in_progress.length}
+							</Badge>
+						</h2>
+						<p className="text-sm text-gray-600 mt-1">
+							Tasks currently being worked on - showing time left for completion
+						</p>
+					</div>
+					<TaskTable
+						tasks={taskGroups.in_progress}
+						showGrouped={groupBy === "task_name"}
+						showTimeLeft={true}
+					/>
+				</div>
+
+				{/* Completed Tasks */}
+				<div>
+					<div className="mb-4">
+						<h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
+							Completed Tasks
+							<Badge variant="success" size="md">
+								{taskGroups.completed.length}
+							</Badge>
+						</h2>
+						<p className="text-sm text-gray-600 mt-1">
+							Recently completed and cancelled tasks
+						</p>
+					</div>
+					<TaskTable
+						tasks={taskGroups.completed}
+						showGrouped={groupBy === "task_name"}
+						showTimeLeft={false}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}

src/lib/init-db.js

@@ -145,7 +145,6 @@ export default function initializeDatabase() {
 	} catch (e) {
 		// Column already exists, ignore error
 	}
-
 	// Migration: Add is_system column to notes table
 	try {
 		db.exec(`
@@ -154,4 +153,13 @@ export default function initializeDatabase() {
 	} catch (e) {
 		// Column already exists, ignore error
 	}
+
+	// Migration: Add date_completed column to project_tasks table
+	try {
+		db.exec(`
+      ALTER TABLE project_tasks ADD COLUMN date_completed TEXT;
+    `);
+	} catch (e) {
+		// Column already exists, ignore error
+	}
 }

src/lib/queries/tasks.js

@@ -25,6 +25,8 @@ export function getAllProjectTasks() {
 			p.project_name,
 			p.wp,
 			p.plot,
+			p.city,
+			p.address,
 			p.finish_date
 		FROM project_tasks pt
 		LEFT JOIN tasks t ON pt.task_template_id = t.task_id
@@ -138,8 +140,16 @@ export function updateProjectTaskStatus(taskId, status) {
 			WHERE id = ?
 		`);
 		result = stmt.run(status, taskId);
+	} else if (status === "completed") {
+		// Completing a task - set date_completed
+		stmt = db.prepare(`
+			UPDATE project_tasks 
+			SET status = ?, date_completed = CURRENT_TIMESTAMP
+			WHERE id = ?
+		`);
+		result = stmt.run(status, taskId);
 	} else {
-		// Just updating status without changing date_started
+		// Just updating status without changing timestamps
 		stmt = db.prepare(`
 			UPDATE project_tasks 
 			SET status = ?