From 96da5212d47b7526209d5d03722c290839a4eb27 Mon Sep 17 00:00:00 2001 From: Chop <28534054+RChopin@users.noreply.github.com> Date: Sat, 21 Jun 2025 21:56:20 +0200 Subject: [PATCH] fix: Remove unnecessary whitespace in table headers across multiple components --- src/app/projects/page.js | 4 +- src/app/test-dropdowns/page.js | 3 +- src/components/ProjectTasksList.js | 142 +++++++++++++++++--------- src/components/ProjectTasksSection.js | 4 +- 4 files changed, 100 insertions(+), 53 deletions(-) diff --git a/src/app/projects/page.js b/src/app/projects/page.js index d18030f..e576d1d 100644 --- a/src/app/projects/page.js +++ b/src/app/projects/page.js @@ -195,12 +195,12 @@ export default function ProjectListPage() { Status - + {" "} Actions - {" "} + {filteredProjects.map((project, index) => ( Project Status - + {" "} - {" "} Test Task in Table diff --git a/src/components/ProjectTasksList.js b/src/components/ProjectTasksList.js index d9fa6b3..6a9f56b 100644 --- a/src/components/ProjectTasksList.js +++ b/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) - if (task.status === "in_progress" && task.date_started && task.date_started.trim() !== "") { + 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 { @@ -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 dateB = b.date_started ? new Date(b.date_started) : new Date(b.date_added); + 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) + }); // 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 }) => (
@@ -236,49 +261,58 @@ export default function ProjectTasksList() {
+ {" "} {task.project_name} - {task.city || 'N/A'} - {task.address || 'N/A'} + + {task.city || "N/A"} + + {task.address || "N/A"} + {showTimeLeft && (
{task.statusInfo && task.statusInfo.type === "in_progress" && ( - - {!isNaN(task.statusInfo.daysRemaining) ? ( - task.statusInfo.daysRemaining > 0 + {!isNaN(task.statusInfo.daysRemaining) + ? task.statusInfo.daysRemaining > 0 ? `${task.statusInfo.daysRemaining}d left` : `${Math.abs(task.statusInfo.daysRemaining)}d overdue` - ) : ( - "Calculating..." - )} - - )} - {task.statusInfo && task.statusInfo.type === "overdue" && task.status === "in_progress" && ( - - {!isNaN(task.statusInfo.daysRemaining) ? `${Math.abs(task.statusInfo.daysRemaining)}d overdue` : "Overdue"} + : "Calculating..."} )} + {task.statusInfo && + task.statusInfo.type === "overdue" && + task.status === "in_progress" && ( + + {!isNaN(task.statusInfo.daysRemaining) + ? `${Math.abs(task.statusInfo.daysRemaining)}d overdue` + : "Overdue"} + + )}
- )} + )} + {task.status === "completed" && task.date_completed ? (
- 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 ? (
- Started: {(() => { + Started:{" "} + {(() => { try { const startedDate = new Date(task.date_started); return formatDistanceToNow(startedDate, { addSuffix: true }); @@ -313,7 +348,8 @@ export default function ProjectTasksList() { {task.max_wait_days} days - + + - ); 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() { Task Name - + {" "} Project - + + City Address - + {" "} {showTimeLeft && ( Time Left - )} + )} + Date Info Max Wait - + {" "} Actions @@ -359,7 +398,7 @@ export default function ProjectTasksList() { {Object.entries(groupedTasks).map(([groupName, groupTasks]) => ( - <> + {showGrouped && groupName !== "All Tasks" && ( )} {groupTasks.map((task) => ( - + ))} - + ))} @@ -424,7 +467,9 @@ export default function ProjectTasksList() {
Completed
-
{/* Search and Controls */} {" "} + {/* Search and Controls */}{" "} + setSearchTerm(e.target.value)} placeholder="Search tasks, projects, city, or address..." @@ -437,7 +482,9 @@ export default function ProjectTasksList() { filters={
- +