working leantime widget 111

components/flow.tsx

@@ -105,56 +105,56 @@ export function Flow() {
         });
       });
 
-      const getValidDate = (task: Task): Date | undefined => {
-        // First check dateToFinish
-        if (task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00') {
-          const date = new Date(task.dateToFinish);
-          if (!isNaN(date.getTime())) {
-            return date;
-          }
-        }
-        
-        // Then check date field
-        if (task.date && task.date !== '0000-00-00 00:00:00') {
-          const date = new Date(task.date);
-          if (!isNaN(date.getTime())) {
-            return date;
-          }
-        }
-        
-        return undefined;
-      };
-
       // Process tasks - exclude completed tasks and get valid dates
       const processedTasks = data.tasks
         .filter((task: Task) => task.status !== 5) // Exclude completed tasks
         .map((task: Task): TaskWithDate => {
-          const validDate = getValidDate(task);
+          let validDate: Date | undefined;
-          console.log(`Task ${task.id} - Processing:`, {
+          
+          // First try dateToFinish
+          if (task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00') {
+            const date = new Date(task.dateToFinish);
+            if (!isNaN(date.getTime())) {
+              validDate = date;
+            }
+          }
+          
+          // If no valid dateToFinish, try date field
+          if (!validDate && task.date && task.date !== '0000-00-00 00:00:00') {
+            const date = new Date(task.date);
+            if (!isNaN(date.getTime())) {
+              validDate = date;
+            }
+          }
+
+          console.log(`Task ${task.id} - Date Processing:`, {
             headline: task.headline,
             dateToFinish: task.dateToFinish,
             date: task.date,
             validDate: validDate?.toISOString(),
             status: task.status
           });
+
           return { ...task, validDate };
         });
 
       // Sort tasks by date
       const sortedTasks = processedTasks
         .sort((a: TaskWithDate, b: TaskWithDate) => {
+          // Tasks with dates come first
+          if (a.validDate && !b.validDate) return -1;
+          if (!a.validDate && b.validDate) return 1;
           if (!a.validDate && !b.validDate) return 0;
-          if (!a.validDate) return 1;
+          
-          if (!b.validDate) return -1;
+          // Sort by date if both have dates
-          return a.validDate.getTime() - b.validDate.getTime();
+          return a.validDate!.getTime() - b.validDate!.getTime();
         })
-        .slice(0, 6); // Take first 6 tasks
+        .slice(0, 12); // Show more tasks
 
       console.log('Final sorted tasks:', sortedTasks.map((t: TaskWithDate) => ({
         id: t.id,
         headline: t.headline,
         dateToFinish: t.dateToFinish,
-        date: t.date,
         validDate: t.validDate?.toISOString(),
         status: t.status
       })));
@@ -172,11 +172,8 @@ export function Flow() {
     fetchTasks();
   }, []);
 
-  // Update the date display component
+  // Update the TaskDate component to handle dates better
   const TaskDate = ({ task }: { task: TaskWithDate }) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    
     if (!task.validDate) {
       return (
         <>
@@ -186,20 +183,33 @@ export function Flow() {
       );
     }
 
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
     const isPastDue = task.validDate < today;
     const textColorClass = isPastDue ? 'text-red-600' : 'text-blue-600';
     const boldColorClass = isPastDue ? 'text-red-700' : 'text-blue-700';
 
-    return (
+    try {
-      <>
+      return (
-        <span className={`text-xs ${textColorClass} font-medium uppercase`}>
+        <>
-          {task.validDate.toLocaleDateString('fr-FR', { month: 'short' })}
+          <span className={`text-xs ${textColorClass} font-medium uppercase`}>
-        </span>
+            {new Intl.DateTimeFormat('fr-FR', { month: 'short' }).format(task.validDate)}
-        <span className={`text-lg ${boldColorClass} font-bold`}>
+          </span>
-          {task.validDate.getDate()}
+          <span className={`text-lg ${boldColorClass} font-bold`}>
-        </span>
+            {task.validDate.getDate()}
-      </>
+          </span>
-    );
+        </>
+      );
+    } catch (error) {
+      console.error('Error formatting date:', error);
+      return (
+        <>
+          <span className="text-xs text-gray-600 font-medium">ERR</span>
+          <span className="text-lg text-gray-700 font-bold">DATE</span>
+        </>
+      );
+    }
   };
 
   return (