From b30e2a95dda354f7f7ea18408e8d07e65b5187c4 Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Sat, 12 Apr 2025 19:08:36 +0200
Subject: [PATCH] working leantime widget 65

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

diff --git a/components/flow.tsx b/components/flow.tsx
index f7fac7b3..e70cf53c 100644
--- a/components/flow.tsx
+++ b/components/flow.tsx
@@ -15,6 +15,7 @@ interface Task {
   projectName: string;
   type: string;
   status: number;
+  assignedTo: number[];
   editorId: string;
   editorFirstname: string | null;
   editorLastname: string | null;
@@ -40,34 +41,23 @@ export function Flow() {
 
   const getStatusLabel = (status: number): string => {
     switch (status) {
-      case 0:
-        return 'NEW';
-      case 1:
-        return 'INPROGRESS';
-      case 2:
-        return 'DONE';
-      case 3:
-        return 'NEW';
-      case 4:
-        return 'INPROGRESS';
-      case 5:
-        return 'DONE';
-      default:
-        return 'UNKNOWN';
+      case 1: return 'New';
+      case 2: return 'Ready';
+      case 3: return 'In Progress';
+      case 4: return 'Review';
+      case 5: return 'Done';
+      default: return 'Unknown';
     }
   };
 
   const getStatusColor = (status: number): string => {
-    const statusLabel = getStatusLabel(status);
-    switch (statusLabel) {
-      case 'DONE':
-        return 'bg-green-100 text-green-800';
-      case 'INPROGRESS':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'NEW':
-        return 'bg-gray-100 text-gray-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
+    switch (status) {
+      case 1: return 'bg-blue-500';
+      case 2: return 'bg-green-500';
+      case 3: return 'bg-yellow-500';
+      case 4: return 'bg-purple-500';
+      case 5: return 'bg-gray-500';
+      default: return 'bg-gray-300';
     }
   };
 
@@ -113,9 +103,17 @@ export function Flow() {
         .filter((task: Task) => 
           task.headline && 
           typeof task.headline === 'string' &&
-          task.status !== 3 // Only show tasks that are not completed (status 3)
+          task.status !== 5 && // Not done
+          Array.isArray(task.assignedTo) && task.assignedTo.length > 0 // Has assignments
         )
-        .sort((a: Task, b: Task) => getDateToSort(a) - getDateToSort(b));
+        .sort((a: Task, b: Task) => {
+          // First sort by status (new tasks first)
+          if (a.status !== b.status) {
+            return a.status - b.status;
+          }
+          // Then sort by due date
+          return getDateToSort(a) - getDateToSort(b);
+        });
 
       // Limit to 6 tasks
       setTasks(sortedTasks.slice(0, 6));
@@ -136,7 +134,7 @@ export function Flow() {
   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">
-        <CardTitle className="text-lg font-medium">Tasks</CardTitle>
+        <CardTitle className="text-lg font-medium">My ToDos</CardTitle>
         <Button
           variant="ghost"
           size="icon"
@@ -155,32 +153,38 @@ export function Flow() {
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
         ) : tasks.length === 0 ? (
-          <div className="text-center text-sm text-gray-500">No tasks found</div>
+          <div className="text-center text-sm text-gray-500">No tasks assigned to you</div>
         ) : (
           <div className="space-y-2">
             {tasks.map((task) => (
               <div 
                 key={task.id} 
-                className="p-2 rounded-lg bg-white/50 backdrop-blur-sm hover:bg-white/60 transition-colors"
+                className="p-3 rounded-lg bg-white/50 backdrop-blur-sm hover:bg-white/60 transition-colors border border-gray-200"
               >
-                <h3 className="text-sm font-medium truncate" title={task.headline}>
-                  {task.headline}
-                </h3>
-                {task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00' && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    Due: {formatDate(task.dateToFinish)}
-                  </p>
-                )}
-                {task.editorFirstname && task.editorLastname && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    Assigned to: {task.editorFirstname} {task.editorLastname}
-                  </p>
-                )}
-                {task.projectName && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    Project: {task.projectName}
-                  </p>
-                )}
+                <div className="flex items-start gap-3">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-sm font-medium text-blue-600 hover:text-blue-800 truncate" title={task.headline}>
+                        {task.headline}
+                      </h3>
+                      <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusColor(task.status)} text-white`}>
+                        {getStatusLabel(task.status)}
+                      </span>
+                    </div>
+                    <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
+                      {task.projectName && (
+                        <span className="inline-flex items-center">
+                          <span className="mr-1">📁</span> {task.projectName}
+                        </span>
+                      )}
+                      {task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00' && (
+                        <span className="inline-flex items-center">
+                          <span className="mr-1">📅</span> {formatDate(task.dateToFinish)}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
               </div>
             ))}
           </div>