added notification

src/components/todolist/TaskItem.jsx

@@ -22,6 +22,28 @@ export default function TaskItem({ task }) {
         ? new Date(task.dueDate).toLocaleDateString()
         : "No due date";
 
+        const getDateTextColor = (task) => {
+            if (task.isCompleted) {
+              return 'text-gray-400';
+            }
+            
+            const now = new Date();
+            const due = new Date(task.dueDate);
+            
+            const diffTime = due - now;
+            const diffDays = diffTime / (1000 * 60 * 60 * 24);
+            
+            if (diffDays >= 0 && diffDays < 1) {
+              return 'text-orange-500';
+            }
+
+            if (now > due) {
+                return 'text-red-500';
+              }
+            
+            return 'text-gray-500';
+          };
+
     return (
         <li>
             <div className="flex items-start p-4 border rounded-lg shadow-sm bg-white my-2 hover:shadow-md transition-shadow">
@@ -39,8 +61,14 @@ export default function TaskItem({ task }) {
                     <h3 className={`text-base font-medium ${task.isCompleted ? 'text-gray-400 line-through' : 'text-gray-900'}`}>
                         {task.name}
                     </h3>
-                    <p className={`text-sm mt-1 ${task.isCompleted ? 'text-gray-400' : 'text-gray-500'}`}>
-                        Due: {formattedDate}
+                    <p className={`text-sm mt-1 flex items-center gap-1 ${getDateTextColor(task)}`}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="16" y1="2" x2="16" y2="6"></line>
+        <line x1="8" y1="2" x2="8" y2="6"></line>
+        <line x1="3" y1="10" x2="21" y2="10"></line>
+    </svg>
+    {formattedDate}
 </p>
                 </div>
                 <button