working leantime widget 53

components/flow.tsx

@@ -24,24 +24,40 @@ interface ProjectSummary {
 }
 
 export function Flow() {
-  const [projects, setProjects] = useState<ProjectSummary[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
 
   const getStatusLabel = (status: number): string => {
     switch (status) {
-      case 1:
-        return 'NEW';
-      case 2:
-        return 'INPROGRESS';
       case 3:
+        return 'NEW';
+      case 1:
+      case 4:
+        return 'INPROGRESS';
+      case 2:
+      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';
+    }
+  };
+
   const fetchTasks = async (isRefresh = false) => {
     try {
       if (isRefresh) setRefreshing(true);
@@ -51,32 +67,27 @@ export function Flow() {
 
       const data = await response.json();
       if (!data.tasks || !Array.isArray(data.tasks)) {
-        setProjects([]);
+        setTasks([]);
         return;
       }
 
-      // Group tasks by project and count statuses
-      const projectMap = new Map<string, Map<number, number>>();
-      
-      data.tasks.forEach((task: Task) => {
-        if (!projectMap.has(task.projectName)) {
-          projectMap.set(task.projectName, new Map());
-        }
-        const statusMap = projectMap.get(task.projectName)!;
-        statusMap.set(task.status, (statusMap.get(task.status) || 0) + 1);
+      // Sort tasks by status (prioritizing in-progress and new tasks) and date
+      const sortedTasks = data.tasks.sort((a: Task, b: Task) => {
+        const statusA = getStatusLabel(a.status);
+        const statusB = getStatusLabel(b.status);
+        
+        // Prioritize INPROGRESS, then NEW, then DONE
+        const statusPriority: Record<string, number> = {
+          'INPROGRESS': 0,
+          'NEW': 1,
+          'DONE': 2,
+          'UNKNOWN': 3
+        };
+        return (statusPriority[statusA] ?? 3) - (statusPriority[statusB] ?? 3);
       });
 
-      // Convert to array format
-      const projectSummaries: ProjectSummary[] = Array.from(projectMap.entries())
-        .map(([name, statusMap]) => ({
-          name,
-          tasks: Array.from(statusMap.entries()).map(([status, count]) => ({
-            status,
-            count
-          }))
-        }));
-
-      setProjects(projectSummaries);
+      // Limit to 6 tasks
+      setTasks(sortedTasks.slice(0, 6));
       setError(null);
     } catch (err) {
       console.error('Error fetching tasks:', err);
@@ -112,26 +123,24 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : projects.length === 0 ? (
+        ) : tasks.length === 0 ? (
           <div className="text-center text-sm text-gray-500">No tasks found</div>
         ) : (
-          <div className="space-y-6">
-            {projects.map((project) => (
-              <div key={project.name} className="space-y-2">
-                <h3 className="text-xl font-medium">{project.name}</h3>
-                <div className="space-y-2">
-                  {project.tasks.map(({ status, count }) => (
-                    <div key={status} className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm">
-                      <span className="text-lg font-medium">{count}</span>
-                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
-                        status === 3 ? 'bg-green-100 text-green-800' :
-                        status === 2 ? 'bg-yellow-100 text-yellow-800' :
-                        'bg-gray-100 text-gray-800'
-                      }`}>
-                        {getStatusLabel(status)}
-                      </span>
-                    </div>
-                  ))}
+          <div className="space-y-3">
+            {tasks.map((task) => (
+              <div key={task.id} className="flex items-start space-x-2 p-2 rounded-lg bg-white/50 backdrop-blur-sm shadow-sm hover:bg-white/60 transition-colors">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-2">
+                    <h3 className="text-sm font-medium truncate" title={task.headline}>
+                      {task.headline}
+                    </h3>
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap ${getStatusColor(task.status)}`}>
+                      {getStatusLabel(task.status)}
+                    </span>
+                  </div>
+                  <p className="text-xs text-gray-500 mt-1 truncate">
+                    {task.projectName}
+                  </p>
                 </div>
               </div>
             ))}