working leantime widget 95

components/flow.tsx

@@ -33,6 +33,10 @@ interface ProjectSummary {
   }[];
 }
 
+interface TaskWithDate extends Task {
+  validDate?: Date;
+}
+
 export function Flow() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [error, setError] = useState<string | null>(null);
@@ -91,29 +95,62 @@ export function Flow() {
         return;
       }
 
-      // Sort tasks by any available date field
+      // Debug log to see all tasks and their dates
-      const sortedTasks = data.tasks
+      data.tasks.forEach((task: Task) => {
-        .sort((a: Task, b: Task) => {
+        console.log(`Task ${task.id} - ${task.headline} dates:`, {
-          const getDate = (task: Task) => {
+          dateToFinish: task.dateToFinish,
+          editFrom: task.editFrom,
+          editTo: task.editTo,
+          date: task.date
+        });
+      });
+
+      const getValidDate = (task: Task): Date | undefined => {
+        // Try dateToFinish first
         if (task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00') {
-              return new Date(task.dateToFinish);
+          const d = new Date(task.dateToFinish);
+          if (!isNaN(d.getTime())) return d;
         }
+        
+        // Try editTo
         if (task.editTo && task.editTo !== '0000-00-00 00:00:00') {
-              return new Date(task.editTo);
+          const d = new Date(task.editTo);
+          if (!isNaN(d.getTime())) return d;
         }
+        
+        // Try editFrom
         if (task.editFrom && task.editFrom !== '0000-00-00 00:00:00') {
-              return new Date(task.editFrom);
+          const d = new Date(task.editFrom);
+          if (!isNaN(d.getTime())) return d;
         }
+        
+        // Try date
         if (task.date && task.date !== '0000-00-00 00:00:00') {
-              return new Date(task.date);
+          const d = new Date(task.date);
+          if (!isNaN(d.getTime())) return d;
         }
-            return new Date(0); // Default to oldest date if no valid date found
+        
+        return undefined;
       };
-          return getDate(a).getTime() - getDate(b).getTime();
+
+      // Sort tasks by date
+      const sortedTasks = data.tasks
+        .map((task: Task): TaskWithDate => ({
+          ...task,
+          validDate: getValidDate(task)
+        }))
+        .filter((task: TaskWithDate) => task.validDate !== undefined)
+        .sort((a: TaskWithDate, b: TaskWithDate) => {
+          return (a.validDate as Date).getTime() - (b.validDate as Date).getTime();
         })
         .slice(0, 6);
 
-      console.log('Sorted tasks:', sortedTasks);
+      console.log('Final sorted tasks:', sortedTasks.map((t: TaskWithDate) => ({
+        id: t.id,
+        headline: t.headline,
+        date: t.validDate?.toISOString()
+      })));
+
       setTasks(sortedTasks);
     } catch (error) {
       console.error('Error fetching tasks:', error);
@@ -127,6 +164,36 @@ export function Flow() {
     fetchTasks();
   }, []);
 
+  // Update the date display component
+  const TaskDate = ({ task }: { task: Task & { validDate?: Date } }) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    if (!task.validDate) {
+      return (
+        <>
+          <span className="text-xs text-gray-600 font-medium">NO</span>
+          <span className="text-lg text-gray-700 font-bold">DATE</span>
+        </>
+      );
+    }
+
+    const isPastDue = task.validDate < today;
+    const textColorClass = isPastDue ? 'text-red-600' : 'text-blue-600';
+    const boldColorClass = isPastDue ? 'text-red-700' : 'text-blue-700';
+
+    return (
+      <>
+        <span className={`text-xs ${textColorClass} font-medium uppercase`}>
+          {task.validDate.toLocaleDateString('fr-FR', { month: 'short' })}
+        </span>
+        <span className={`text-lg ${boldColorClass} font-bold`}>
+          {task.validDate.getDate()}
+        </span>
+      </>
+    );
+  };
+
   return (
     <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
       <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
@@ -158,54 +225,7 @@ export function Flow() {
               >
                 <div className="flex gap-3">
                   <div className="flex-shrink-0 w-14 h-14 rounded-lg bg-blue-50 flex flex-col items-center justify-center border border-blue-100">
-                    {(() => {
+                    <TaskDate task={task} />
-                      const getValidDate = (task: Task) => {
-                        const dates = [
-                          task.dateToFinish,
-                          task.editTo,
-                          task.editFrom,
-                          task.date
-                        ];
-                        
-                        for (const d of dates) {
-                          if (d && d !== '0000-00-00 00:00:00') {
-                            const parsed = new Date(d);
-                            if (!isNaN(parsed.getTime())) {
-                              return parsed;
-                            }
-                          }
-                        }
-                        return null;
-                      };
-
-                      const date = getValidDate(task);
-                      const today = new Date();
-                      today.setHours(0, 0, 0, 0);
-                      
-                      if (!date) {
-                        return (
-                          <>
-                            <span className="text-xs text-gray-600 font-medium">NO</span>
-                            <span className="text-lg text-gray-700 font-bold">DATE</span>
-                          </>
-                        );
-                      }
-
-                      const isPastDue = date < today;
-                      const textColorClass = isPastDue ? 'text-red-600' : 'text-blue-600';
-                      const boldColorClass = isPastDue ? 'text-red-700' : 'text-blue-700';
-
-                      return (
-                        <>
-                          <span className={`text-xs ${textColorClass} font-medium uppercase`}>
-                            {date.toLocaleDateString('fr-FR', { month: 'short' })}
-                          </span>
-                          <span className={`text-lg ${boldColorClass} font-bold`}>
-                            {date.getDate()}
-                          </span>
-                        </>
-                      );
-                    })()}
                   </div>
                   <div className="flex-1 min-w-0 space-y-1.5">
                     <a