working leantime widget 24

components/flow.tsx

@@ -12,7 +12,8 @@ interface Task {
   projectId: number;
   status: string;
   dueDate: string | null;
-  milestone?: string;
+  milestone: string | null;
+  details: string | null;
 }
 
 export function Flow() {
@@ -43,7 +44,27 @@ export function Flow() {
 
       const data = await response.json();
       if (data.tasks && Array.isArray(data.tasks)) {
-        setTasks(data.tasks);
+        // Sort tasks by due date (overdue first)
+        const sortedTasks = data.tasks.sort((a: Task, b: Task) => {
+          // If a task has no due date, put it at the end
+          if (!a.dueDate) return 1;
+          if (!b.dueDate) return -1;
+          
+          const dateA = new Date(a.dueDate);
+          const dateB = new Date(b.dueDate);
+          const now = new Date();
+          
+          // If one task is overdue and the other isn't, put overdue first
+          const aOverdue = dateA < now;
+          const bOverdue = dateB < now;
+          if (aOverdue && !bOverdue) return -1;
+          if (!aOverdue && bOverdue) return 1;
+          
+          // Otherwise sort by due date
+          return dateA.getTime() - dateB.getTime();
+        });
+        
+        setTasks(sortedTasks);
       } else {
         setTasks([]);
       }
@@ -66,15 +87,6 @@ export function Flow() {
     };
   }, []);
 
-  // Group tasks by project
-  const tasksByProject = tasks.reduce((acc, task) => {
-    if (!acc[task.projectName]) {
-      acc[task.projectName] = [];
-    }
-    acc[task.projectName].push(task);
-    return acc;
-  }, {} as Record<string, Task[]>);
-
   const getStatusClass = (status: string): string => {
     switch (status.toLowerCase()) {
       case 'new':
@@ -83,6 +95,8 @@ export function Flow() {
         return 'bg-yellow-100 text-yellow-800';
       case 'completed':
         return 'bg-green-100 text-green-800';
+      case 'overdue':
+        return 'bg-red-100 text-red-800';
       default:
         return 'bg-gray-100 text-gray-800';
     }
@@ -98,6 +112,15 @@ export function Flow() {
     });
   };
 
+  // Group tasks by project, maintaining the sorted order
+  const tasksByProject = tasks.reduce((acc, task) => {
+    if (!acc[task.projectName]) {
+      acc[task.projectName] = [];
+    }
+    acc[task.projectName].push(task);
+    return acc;
+  }, {} as Record<string, Task[]>);
+
   return (
     <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -119,30 +142,37 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : Object.keys(tasksByProject).length === 0 ? (
+        ) : tasks.length === 0 ? (
           <div className="text-center text-sm text-gray-500">No tasks found</div>
         ) : (
-          <div className="space-y-6">
+          <div className="space-y-4">
             {Object.entries(tasksByProject).map(([projectName, projectTasks]) => (
               <div key={projectName} className="space-y-2">
-                <h3 className="font-medium text-sm">{projectName}</h3>
+                <h3 className="font-medium text-sm text-gray-700">{projectName}</h3>
-                <div className="space-y-2">
+                <div className="space-y-3">
-                  {projectTasks.map((task) => (
+                  {projectTasks.map((task) => {
+                    const dueDate = task.dueDate ? new Date(task.dueDate) : null;
+                    const isOverdue = dueDate && dueDate < new Date();
+                    
+                    return (
                       <div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
                         <div className="flex-1">
-                        <div className="font-medium">{task.headline}</div>
+                          <div className="font-medium text-gray-900">{task.headline}</div>
-                        <div className="text-xs text-gray-500 mt-1">
                           {task.milestone && (
-                            <span className="mr-2">{task.milestone}</span>
+                            <div className="text-xs text-gray-500 mt-1">
+                              {task.milestone}
+                            </div>
                           )}
-                          <span>{formatDate(task.dueDate)}</span>
+                          <div className="text-xs text-gray-500 mt-1">
+                            {formatDate(task.dueDate)}
                           </div>
                         </div>
-                      <div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(task.status)}`}>
+                        <div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(isOverdue ? 'overdue' : task.status)}`}>
-                        {task.status.toUpperCase()}
+                          {isOverdue ? 'OVERDUE' : task.status.toUpperCase()}
                         </div>
                       </div>
-                  ))}
+                    );
+                  })}
                 </div>
               </div>
             ))}