working leantime widget 46

components/flow.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { RefreshCw, Calendar, MoreVertical } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 
 interface Task {
   id: string;
@@ -11,74 +11,72 @@ interface Task {
   projectName: string;
   projectId: number;
   status: number;
-  dueDate: string | null;
+  type: string;
-  milestone: string | null;
+  dateToFinish: string | null;
-  details: string | null;
 }
 
-interface ProjectTasks {
+interface ProjectSummary {
-  projectName: string;
+  name: string;
-  tasks: Task[];
+  tasks: {
+    status: number;
+    count: number;
+  }[];
 }
 
 export function Flow() {
-  const [projectTasks, setProjectTasks] = useState<ProjectTasks[]>([]);
+  const [projects, setProjects] = useState<ProjectSummary[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
-  const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const getStatusLabel = (status: number): string => {
+    switch (status) {
+      case 1:
+        return 'NEW';
+      case 2:
+        return 'INPROGRESS';
+      case 3:
+        return 'DONE';
+      default:
+        return 'UNKNOWN';
+    }
+  };
 
   const fetchTasks = async (isRefresh = false) => {
     try {
-      if (isRefresh) {
+      if (isRefresh) setRefreshing(true);
-        setRefreshing(true);
-      }
-      const response = await fetch('/api/leantime/tasks');
       
-      if (response.status === 429) {
+      const response = await fetch('/api/leantime/tasks');
-        const retryAfter = parseInt(response.headers.get('retry-after') || '60');
+      if (!response.ok) throw new Error('Failed to fetch tasks');
-        const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
+
-        setRetryTimeout(timeout);
+      const data = await response.json();
-        setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
+      if (!data.tasks || !Array.isArray(data.tasks)) {
+        setProjects([]);
         return;
       }
 
-      if (!response.ok) {
+      // Group tasks by project and count statuses
-        throw new Error('Failed to fetch tasks');
+      const projectMap = new Map<string, Map<number, number>>();
-      }
       
-      const data = await response.json();
+      data.tasks.forEach((task: Task) => {
-      if (data.tasks && Array.isArray(data.tasks)) {
+        if (!projectMap.has(task.projectName)) {
-        // Group tasks by project
+          projectMap.set(task.projectName, new Map());
-        const groupedTasks = data.tasks.reduce((acc: { [key: string]: Task[] }, task: Task) => {
+        }
-          if (!acc[task.projectName]) {
+        const statusMap = projectMap.get(task.projectName)!;
-            acc[task.projectName] = [];
+        statusMap.set(task.status, (statusMap.get(task.status) || 0) + 1);
-          }
+      });
-          acc[task.projectName].push(task);
-          return acc;
-        }, {});
 
-        // Convert to array and sort tasks by due date within each project
+      // Convert to array format
-        const sortedProjectTasks = Object.entries(groupedTasks as { [key: string]: Task[] }).map(([projectName, tasks]) => ({
+      const projectSummaries: ProjectSummary[] = Array.from(projectMap.entries())
-          projectName,
+        .map(([name, statusMap]) => ({
-          tasks: tasks.sort((a: Task, b: Task) => {
+          name,
-            if (!a.dueDate) return 1;
+          tasks: Array.from(statusMap.entries()).map(([status, count]) => ({
-            if (!b.dueDate) return -1;
+            status,
-            return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
+            count
-          }).slice(0, 6) // Limit to 6 tasks per project
+          }))
         }));
 
-        // Sort projects by earliest due date
+      setProjects(projectSummaries);
-        sortedProjectTasks.sort((a, b) => {
-          const aEarliest = a.tasks[0]?.dueDate ? new Date(a.tasks[0].dueDate).getTime() : Infinity;
-          const bEarliest = b.tasks[0]?.dueDate ? new Date(b.tasks[0].dueDate).getTime() : Infinity;
-          return aEarliest - bEarliest;
-        });
-
-        setProjectTasks(sortedProjectTasks);
-      } else {
-        setProjectTasks([]);
-      }
       setError(null);
     } catch (err) {
       console.error('Error fetching tasks:', err);
@@ -91,90 +89,21 @@ export function Flow() {
 
   useEffect(() => {
     fetchTasks();
-    return () => {
-      if (retryTimeout) {
-        clearTimeout(retryTimeout);
-      }
-    };
   }, []);
 
-  const formatDate = (dateString: string | null) => {
-    if (!dateString) return '';
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      month: '2-digit',
-      day: '2-digit',
-      year: 'numeric'
-    });
-  };
-
-  const getStatusInfo = (status: number): { label: string; className: string } => {
-    switch (status) {
-      case 1:
-        return { label: 'New', className: 'bg-blue-600 text-white' };
-      case 2:
-        return { label: 'In Progress', className: 'bg-orange-400 text-white' };
-      case 3:
-        return { label: 'Done', className: 'bg-green-600 text-white' };
-      case 4:
-        return { label: 'Blocked', className: 'bg-red-600 text-white' };
-      case 5:
-        return { label: 'In Review', className: 'bg-purple-600 text-white' };
-      case 6:
-        return { label: 'To Be Validated', className: 'bg-yellow-600 text-white' };
-      default:
-        return { label: 'No Status', className: 'bg-gray-400 text-white' };
-    }
-  };
-
-  const getMilestoneInfo = (milestone: string | null): { label: string; className: string } => {
-    if (!milestone) return { label: 'No Milestone', className: 'bg-gray-200 text-gray-700' };
-    
-    // Map milestone/type to display names
-    const milestoneMap: { [key: string]: string } = {
-      'Marketing': 'Marketing',
-      'Publication': 'Publication',
-      'Development': 'Development',
-      'Design': 'Design',
-      'Research': 'Research'
-    };
-
-    return { 
-      label: milestoneMap[milestone] || milestone, 
-      className: 'bg-gray-200 text-gray-700' 
-    };
-  };
-
-  const isOverdue = (dueDate: string | null): boolean => {
-    if (!dueDate) return false;
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const taskDate = new Date(dueDate);
-    taskDate.setHours(0, 0, 0, 0);
-    return taskDate < today;
-  };
-
   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">My ToDos</CardTitle>
+        <CardTitle className="text-lg font-medium">Flow</CardTitle>
-        <div className="flex items-center gap-2">
+        <Button
-          <Button variant="outline" size="sm">
+          variant="ghost"
-            Group By: Due Date
+          size="icon"
-          </Button>
+          onClick={() => fetchTasks(true)}
-          <Button variant="outline" size="sm">
+          disabled={refreshing}
-            Filters
+          className={refreshing ? 'animate-spin' : ''}
-          </Button>
+        >
-          <Button
+          <RefreshCw className="h-4 w-4" />
-            variant="ghost"
+        </Button>
-            size="icon"
-            onClick={() => fetchTasks(true)}
-            disabled={refreshing || !!retryTimeout}
-            className={refreshing ? 'animate-spin' : ''}
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-        </div>
       </CardHeader>
       <CardContent>
         {loading ? (
@@ -183,53 +112,29 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : projectTasks.length === 0 ? (
+        ) : projects.length === 0 ? (
           <div className="text-center text-sm text-gray-500">No tasks found</div>
         ) : (
-          <div className="space-y-4">
+          <div className="space-y-6">
-            <div className="flex items-center gap-2 text-red-500 font-medium">
+            {projects.map((project) => (
-              <span>🔥 Overdue</span>
+              <div key={project.name} className="space-y-2">
-              <span className="text-sm">({projectTasks.reduce((count, project) => 
+                <h3 className="text-xl font-medium">{project.name}</h3>
-                count + project.tasks.filter(task => isOverdue(task.dueDate)).length, 0
+                <div className="space-y-2">
-              )})</span>
+                  {project.tasks.map(({ status, count }) => (
-            </div>
+                    <div key={status} className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm">
-            <div className="space-y-2">
+                      <span className="text-lg font-medium">{count}</span>
-              {projectTasks.map((project) => (
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
-                project.tasks.map((task) => {
+                        status === 3 ? 'bg-green-100 text-green-800' :
-                  const statusInfo = getStatusInfo(task.status);
+                        status === 2 ? 'bg-yellow-100 text-yellow-800' :
-                  const milestoneInfo = getMilestoneInfo(task.milestone);
+                        'bg-gray-100 text-gray-800'
-                  if (!isOverdue(task.dueDate)) return null;
+                      }`}>
-                  
+                        {getStatusLabel(status)}
-                  return (
+                      </span>
-                    <div key={task.id} className="p-4 rounded-lg bg-white shadow-sm hover:bg-gray-50 transition-colors border-l-4 border-red-500">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex-1 min-w-0">
-                          <div className="font-medium text-gray-900 mb-1">{project.projectName}</div>
-                          <div className="text-sm text-blue-600">{task.headline}</div>
-                          <div className="flex items-center gap-2 mt-2">
-                            <span className="flex items-center gap-1 text-gray-500">
-                              <Calendar className="h-4 w-4" />
-                              {formatDate(task.dueDate)}
-                            </span>
-                          </div>
-                        </div>
-                        <div className="flex items-start gap-2">
-                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${milestoneInfo.className}`}>
-                            {milestoneInfo.label}
-                          </span>
-                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusInfo.className}`}>
-                            {statusInfo.label}
-                          </span>
-                          <Button variant="ghost" size="icon" className="h-8 w-8">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
                     </div>
-                  );
+                  ))}
-                })
+                </div>
-              ))}
+              </div>
-            </div>
+            ))}
           </div>
         )}
       </CardContent>