feat: Enhance project task management with expandable notes and descriptions, and add date_started column for task tracking

src/components/ProjectTasksSection.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import ProjectTaskForm from "./ProjectTaskForm";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
@@ -13,6 +13,8 @@ export default function ProjectTasksSection({ projectId }) {
 	const [newNote, setNewNote] = useState({});
 	const [loadingNotes, setLoadingNotes] = useState({});
 	const [showAddTaskModal, setShowAddTaskModal] = useState(false);
+	const [expandedDescriptions, setExpandedDescriptions] = useState({});
+	const [expandedNotes, setExpandedNotes] = useState({});
 	useEffect(() => {
 		const fetchProjectTasks = async () => {
 			try {
@@ -241,7 +243,6 @@ export default function ProjectTasksSection({ projectId }) {
 				return "default";
 		}
 	};
-
 	const getStatusVariant = (status) => {
 		switch (status) {
 			case "completed":
@@ -256,6 +257,20 @@ export default function ProjectTasksSection({ projectId }) {
 				return "default";
 		}
 	};
+
+	const toggleDescription = (taskId) => {
+		setExpandedDescriptions((prev) => ({
+			...prev,
+			[taskId]: !prev[taskId],
+		}));
+	};
+
+	const toggleNotes = (taskId) => {
+		setExpandedNotes((prev) => ({
+			...prev,
+			[taskId]: !prev[taskId],
+		}));
+	};
 	return (
 		<div className="space-y-6">
 			<div className="flex items-center justify-between">
@@ -369,57 +384,91 @@ export default function ProjectTasksSection({ projectId }) {
 							</p>
 						</div>
 					) : (
-						<div className="divide-y divide-gray-200">
+						<div className="overflow-x-auto">
+							<table className="w-full">
+								<thead className="bg-gray-50 border-b border-gray-200">
+									<tr>
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Task
+										</th>
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Priority
+										</th>
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Max Wait
+										</th>{" "}
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Date Started
+										</th>
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Status
+										</th>
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+											Actions
+										</th>
+									</tr>
+								</thead>
+								<tbody className="bg-white divide-y divide-gray-200">
 									{projectTasks.map((task) => (
-								<div
-									key={task.id}
-									className="p-6 hover:bg-gray-50 transition-colors"
-								>
-									<div className="flex items-start justify-between">
-										<div className="flex-1 min-w-0">
-											<div className="flex items-center gap-3 mb-3">
-												<h4 className="text-base font-medium text-gray-900 truncate">
+										<React.Fragment key={task.id}>
+											{/* Main task row */}
+											<tr className="hover:bg-gray-50 transition-colors">
+												<td className="px-4 py-4">
+													<div className="flex items-center gap-2">
+														<h4 className="text-sm font-medium text-gray-900">
 															{task.task_name}
 														</h4>
+														{task.description && (
+															<button
+																onClick={() => toggleDescription(task.id)}
+																className="text-gray-400 hover:text-gray-600 transition-colors"
+																title="Toggle description"
+															>
+																<svg
+																	className={`w-4 h-4 transform transition-transform ${
+																		expandedDescriptions[task.id]
+																			? "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>
+															</button>
+														)}
+													</div>
+												</td>
+												<td className="px-4 py-4">
 													<Badge
 														variant={getPriorityVariant(task.priority)}
 														size="sm"
 													>
 														{task.priority}
 													</Badge>
-											</div>{" "}
-											{/* Task Description */}
-											{task.description && (
-												<div className="mb-4">
-													<p className="text-sm text-gray-700 bg-gray-50 p-3 rounded-md">
-														{task.description}
-													</p>
-												</div>
-											)}
-											<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm text-gray-600 mb-4">
-												<div>
-													<span className="font-medium">Max wait days:</span>{" "}
-													{task.max_wait_days}
-												</div>
-												<div>
-													<span className="font-medium">Type:</span>{" "}
-													{task.task_type || "template"}
-												</div>
-												<div>
-													<span className="font-medium">Added:</span>{" "}
-													{new Date(task.date_added).toLocaleDateString()}
-												</div>
-											</div>
-											<div className="flex items-center gap-3 mb-4">
-												<span className="text-sm font-medium text-gray-700">
-													Status:
-												</span>
+												</td>
+												<td className="px-4 py-4 text-sm text-gray-600">
+													{task.max_wait_days} days
+												</td>{" "}
+												<td className="px-4 py-4 text-sm text-gray-600">
+													{task.date_started
+														? new Date(task.date_started).toLocaleDateString()
+														: "Not started"}
+												</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="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+															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>
@@ -433,20 +482,59 @@ export default function ProjectTasksSection({ projectId }) {
 															{task.status.replace("_", " ")}
 														</Badge>
 													</div>
-											{/* Notes Section */}
-											<div className="border-t pt-4">
-												<h5 className="text-sm font-medium text-gray-900 mb-3">
+												</td>
+												<td className="px-4 py-4">
+													<div className="flex items-center gap-2">
+														<button
+															onClick={() => toggleNotes(task.id)}
+															className="text-xs text-blue-600 hover:text-blue-800 font-medium"
+															title={`${taskNotes[task.id]?.length || 0} notes`}
+														>
+															Notes ({taskNotes[task.id]?.length || 0})
+														</button>
+														<Button
+															variant="danger"
+															size="sm"
+															onClick={() => handleDeleteTask(task.id)}
+															className="text-xs"
+														>
+															Delete
+														</Button>
+													</div>
+												</td>
+											</tr>
+
+											{/* Description row (expandable) */}
+											{task.description && expandedDescriptions[task.id] && (
+												<tr className="bg-blue-50">
+													<td colSpan="6" className="px-4 py-3">
+														<div className="text-sm text-gray-700">
+															<span className="font-medium text-gray-900">
+																Description:
+															</span>
+															<p className="mt-1">{task.description}</p>
+														</div>
+													</td>
+												</tr>
+											)}
+
+											{/* Notes row (expandable) */}
+											{expandedNotes[task.id] && (
+												<tr className="bg-gray-50">
+													<td colSpan="6" className="px-4 py-4">
+														<div className="space-y-3">
+															<h5 className="text-sm font-medium text-gray-900">
 																Notes ({taskNotes[task.id]?.length || 0})
 															</h5>
 
 															{/* Existing Notes */}
 															{taskNotes[task.id] &&
 																taskNotes[task.id].length > 0 && (
-														<div className="space-y-2 mb-3">
+																	<div className="space-y-2">
 																		{taskNotes[task.id].map((note) => (
 																			<div
 																				key={note.note_id}
-																	className="bg-blue-50 p-3 rounded-md flex justify-between items-start"
+																				className="bg-white p-3 rounded border flex justify-between items-start"
 																			>
 																				<div className="flex-1">
 																					<p className="text-sm text-gray-800">
@@ -464,7 +552,10 @@ export default function ProjectTasksSection({ projectId }) {
 																				</div>
 																				<button
 																					onClick={() =>
-																			handleDeleteNote(note.note_id, task.id)
+																						handleDeleteNote(
+																							note.note_id,
+																							task.id
+																						)
 																					}
 																					className="ml-2 text-red-500 hover:text-red-700 text-xs font-bold"
 																					title="Delete note"
@@ -500,28 +591,21 @@ export default function ProjectTasksSection({ projectId }) {
 																	variant="primary"
 																	onClick={() => handleAddNote(task.id)}
 																	disabled={
-															loadingNotes[task.id] || !newNote[task.id]?.trim()
+																		loadingNotes[task.id] ||
+																		!newNote[task.id]?.trim()
 																	}
 																>
 																	{loadingNotes[task.id] ? "Adding..." : "Add"}
 																</Button>
 															</div>
 														</div>
-										</div>
-
-										<div className="ml-4 flex-shrink-0">
-											<Button
-												variant="danger"
-												size="sm"
-												onClick={() => handleDeleteTask(task.id)}
-												className="text-xs"
-											>
-												Delete
-											</Button>
-										</div>
-									</div>
-								</div>
+													</td>
+												</tr>
+											)}
+										</React.Fragment>
 									))}
+								</tbody>
+							</table>
 						</div>
 					)}
 				</CardContent>

src/lib/init-db.js

@@ -126,7 +126,6 @@ export default function initializeDatabase() {
 	} catch (e) {
 		// Column already exists, ignore error
 	}
-
 	// Migration: Copy data from geo_info to coordinates and drop geo_info
 	try {
 		db.exec(`
@@ -138,4 +137,13 @@ export default function initializeDatabase() {
 	} catch (e) {
 		// Column migration already done or geo_info doesn't exist, ignore error
 	}
+
+	// Migration: Add date_started column to project_tasks table
+	try {
+		db.exec(`
+      ALTER TABLE project_tasks ADD COLUMN date_started TEXT;
+    `);
+	} catch (e) {
+		// Column already exists, ignore error
+	}
 }

src/lib/queries/tasks.js

@@ -90,13 +90,36 @@ export function createProjectTask(data) {
 
 // Update project task status
 export function updateProjectTaskStatus(taskId, status) {
-	const stmt = db.prepare(`
+	// First get the current status to check if we're transitioning from pending to in_progress
+	const getCurrentStatus = db.prepare(
+		"SELECT status FROM project_tasks WHERE id = ?"
+	);
+	const currentTask = getCurrentStatus.get(taskId);
+
+	let stmt;
+
+	if (
+		currentTask &&
+		currentTask.status === "pending" &&
+		status === "in_progress"
+	) {
+		// Starting a task - set date_started
+		stmt = db.prepare(`
+			UPDATE project_tasks 
+			SET status = ?, date_started = CURRENT_TIMESTAMP
+			WHERE id = ?
+		`);
+		return stmt.run(status, taskId);
+	} else {
+		// Just updating status without changing date_started
+		stmt = db.prepare(`
 			UPDATE project_tasks 
 			SET status = ?
 			WHERE id = ?
 		`);
 		return stmt.run(status, taskId);
 	}
+}
 
 // Delete a project task
 export function deleteProjectTask(taskId) {