fix: Remove unnecessary whitespace in table headers across multiple components

src/app/projects/page.js

@@ -195,12 +195,12 @@ export default function ProjectListPage() {
 								</th>
 								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
 									Status
-								</th>
+								</th>{" "}
 								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
 									Actions
 								</th>
 							</tr>
-						</thead>{" "}
+						</thead>
 						<tbody>
 							{filteredProjects.map((project, index) => (
 								<tr

src/app/test-dropdowns/page.js

@@ -105,10 +105,9 @@ export default function DropdownTestPage() {
 									<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 										Project Status
 									</th>
-								</tr>
+								</tr>{" "}
 							</thead>
 							<tbody className="bg-white divide-y divide-gray-200">
-								{" "}
 								<tr>
 									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
 										Test Task in Table

src/components/ProjectTasksList.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, Fragment } from "react";
 import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
@@ -35,7 +35,7 @@ export default function ProjectTasksList() {
 		};
 
 		fetchAllTasks();
-	}, []);	// Calculate task status based on date_added and max_wait_days
+	}, []); // 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 };
@@ -43,8 +43,12 @@ export default function ProjectTasksList() {
 		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)
+			console.log(task.date_started);
-			if (task.status === "in_progress" && task.date_started && task.date_started.trim() !== "") {
+			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 {
@@ -65,9 +69,17 @@ export default function ProjectTasksList() {
 
 			if (task.status === "in_progress") {
 				if (daysRemaining < 0) {
-					return { type: "overdue", days: Math.abs(daysRemaining), daysRemaining: daysRemaining };
+					return {
+						type: "overdue",
+						days: Math.abs(daysRemaining),
+						daysRemaining: daysRemaining,
+					};
 				} else {
-					return { type: "in_progress", days: daysRemaining, daysRemaining: daysRemaining };
+					return {
+						type: "in_progress",
+						days: daysRemaining,
+						daysRemaining: daysRemaining,
+					};
 				}
 			}
 
@@ -81,7 +93,12 @@ export default function ProjectTasksList() {
 				return { type: "pending", days: maxWaitDays - daysElapsed };
 			}
 		} catch (error) {
-			console.error("Error parsing date:", task.date_added, task.date_started, error);
+			console.error(
+				"Error parsing date:",
+				task.date_added,
+				task.date_started,
+				error
+			);
 			return { type: "pending", days: 0 };
 		}
 	};
@@ -120,18 +137,25 @@ export default function ProjectTasksList() {
 		// 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)) {
+			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 dateA = a.date_started
-				const dateB = b.date_started ? new Date(b.date_started) : new Date(b.date_added);
+					? 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)
+		}); // 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
@@ -143,7 +167,7 @@ export default function ProjectTasksList() {
 				// 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);
@@ -225,7 +249,8 @@ export default function ProjectTasksList() {
 		if (days > 7) return "danger";
 		if (days > 3) return "warning";
 		return "high";
-	};	const TaskRow = ({ task, showTimeLeft = false }) => (
+	};
+	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">
@@ -236,49 +261,58 @@ export default function ProjectTasksList() {
 				</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>
-			<td className="px-4 py-3 text-sm text-gray-600">{task.address || 'N/A'}</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 
+							<Badge
-								variant={task.statusInfo.daysRemaining <= 2 ? "warning" : "secondary"} 
+								variant={
+									task.statusInfo.daysRemaining <= 2 ? "warning" : "secondary"
+								}
 								size="sm"
 							>
-								{!isNaN(task.statusInfo.daysRemaining) ? (
+								{!isNaN(task.statusInfo.daysRemaining)
-									task.statusInfo.daysRemaining > 0 
+									? task.statusInfo.daysRemaining > 0
 										? `${task.statusInfo.daysRemaining}d left`
 										: `${Math.abs(task.statusInfo.daysRemaining)}d overdue`
-								) : (
+									: "Calculating..."}
-									"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>
 						)}
+						{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">
+			)}
+			<td className="px-4 py-3 text-sm text-gray-500">
 				{task.status === "completed" && task.date_completed ? (
 					<div>
 						<div>
-							Completed: {(() => {
+							Completed:{" "}
+							{(() => {
 								try {
 									const completedDate = new Date(task.date_completed);
-									return formatDistanceToNow(completedDate, { addSuffix: true });
+									return formatDistanceToNow(completedDate, {
+										addSuffix: true,
+									});
 								} catch (error) {
 									return task.date_completed;
 								}
@@ -288,7 +322,8 @@ export default function ProjectTasksList() {
 				) : task.status === "in_progress" && task.date_started ? (
 					<div>
 						<div>
-							Started: {(() => {
+							Started:{" "}
+							{(() => {
 								try {
 									const startedDate = new Date(task.date_started);
 									return formatDistanceToNow(startedDate, { addSuffix: true });
@@ -313,7 +348,8 @@ export default function ProjectTasksList() {
 			</td>
 			<td className="px-4 py-3 text-sm text-gray-500">
 				{task.max_wait_days} days
-			</td>			<td className="px-4 py-3">
+			</td>
+			<td className="px-4 py-3">
 				<TaskStatusDropdownSimple
 					task={task}
 					size="sm"
@@ -321,7 +357,8 @@ export default function ProjectTasksList() {
 				/>
 			</td>
 		</tr>
-	);	const TaskTable = ({ tasks, showGrouped = false, showTimeLeft = false }) => {
+	);
+	const TaskTable = ({ tasks, showGrouped = false, showTimeLeft = false }) => {
 		const filteredTasks = filterTasks(tasks);
 		const groupedTasks = groupTasksByName(filteredTasks);
 		const colSpan = showTimeLeft ? "8" : "7";
@@ -333,25 +370,27 @@ export default function ProjectTasksList() {
 						<tr>
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
 								Task Name
-							</th>
+							</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">
+							</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>
+							</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">
+							)}
+							<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>{" "}
 							<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
 								Actions
 							</th>
@@ -359,7 +398,7 @@ export default function ProjectTasksList() {
 					</thead>
 					<tbody>
 						{Object.entries(groupedTasks).map(([groupName, groupTasks]) => (
-							<>
+							<Fragment key={`group-fragment-${groupName}`}>
 								{showGrouped && groupName !== "All Tasks" && (
 									<tr key={`group-${groupName}`}>
 										<td
@@ -371,9 +410,13 @@ export default function ProjectTasksList() {
 									</tr>
 								)}
 								{groupTasks.map((task) => (
-									<TaskRow key={task.id} task={task} showTimeLeft={showTimeLeft} />
+									<TaskRow
+										key={task.id}
+										task={task}
+										showTimeLeft={showTimeLeft}
+									/>
 								))}
-							</>
+							</Fragment>
 						))}
 					</tbody>
 				</table>
@@ -424,7 +467,9 @@ export default function ProjectTasksList() {
 						<div className="text-sm text-gray-600">Completed</div>
 					</CardContent>
 				</Card>
-			</div>			{/* Search and Controls */}			<SearchBar
+			</div>{" "}
+			{/* Search and Controls */}{" "}
+			<SearchBar
 				searchTerm={searchTerm}
 				onSearchChange={(e) => setSearchTerm(e.target.value)}
 				placeholder="Search tasks, projects, city, or address..."
@@ -437,7 +482,9 @@ export default function ProjectTasksList() {
 				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>
+							<label className="text-sm font-medium text-gray-700">
+								Group by:
+							</label>
 							<Select
 								value={groupBy}
 								onChange={(e) => setGroupBy(e.target.value)}
@@ -449,7 +496,8 @@ export default function ProjectTasksList() {
 						</div>
 					</div>
 				}
-			/>			{/* Task Tables */}
+			/>{" "}
+			{/* Task Tables */}
 			<div className="space-y-8">
 				{/* Pending Tasks */}
 				<div>

src/components/ProjectTasksSection.js

@@ -380,10 +380,10 @@ export default function ProjectTasksSection({ projectId }) {
 										</th>
 										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 											Priority
-										</th>
+										</th>{" "}
 										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 											Max Wait
-										</th>{" "}
+										</th>
 										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 											Date Started
 										</th>