From 4e2fde52cd30bd4255d8bce92237e7f23234191e Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Sat, 12 Apr 2025 22:31:53 +0200
Subject: [PATCH] working leantime widget 111

---
 components/flow.tsx | 92 +++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/components/flow.tsx b/components/flow.tsx
index 7571c070..8eca0611 100644
--- a/components/flow.tsx
+++ b/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);
-          console.log(`Task ${task.id} - Processing:`, {
+          let validDate: Date | undefined;
+          
+          // 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;
-          return a.validDate.getTime() - b.validDate.getTime();
+          
+          // Sort by date if both have dates
+          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 (
-      <>
-        <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>
-      </>
-    );
+    try {
+      return (
+        <>
+          <span className={`text-xs ${textColorClass} font-medium uppercase`}>
+            {new Intl.DateTimeFormat('fr-FR', { month: 'short' }).format(task.validDate)}
+          </span>
+          <span className={`text-lg ${boldColorClass} font-bold`}>
+            {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 (