highlighting an overdue task(ProjectTracker)

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,3 +1,4 @@
+import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
 import { HexColorPicker } from "react-colorful";
 import { useDispatch, useSelector } from "react-redux";
@@ -63,6 +64,7 @@ export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
 
+  const currentDate = new Date().getFullYear();
   const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
@@ -871,6 +873,14 @@ export const ProjectTracker = () => {
                         )}
                         <div className="tasks-container">
                           {column.tasks.map((task) => {
+                            const dateDeadline = new Date(task.dead_line);
+                            const currentDate = moment().format(
+                              "YYYY-MM-DD HH:mm:ss"
+                            );
+                            const titleColor =
+                              dateDeadline < new Date(currentDate)
+                                ? "red"
+                                : "#1a1919";
                             return (
                               <div
                                 key={task.id}
@@ -899,7 +909,10 @@ export const ProjectTracker = () => {
                                     }
                                   }}
                                 >
-                                  <p className="task__board__item__title">
+                                  <p
+                                    className="task__board__item__title"
+                                    style={{ color: titleColor }}
+                                  >
                                     {task.title}
                                   </p>
                                 </div>