working leantime widget 35

components/flow.tsx

@@ -5,55 +5,53 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 
-interface StatusLabel {
+interface Task {
   id: string;
-  name: string;
-  statusType: string;
-  class: string;
-}
-
-interface Project {
-  id: string;
-  name: string;
-  labels: StatusLabel[];
+  headline: string;
+  projectName: string;
+  projectId: number;
+  status: string;
+  dueDate: string | null;
+  milestone: string | null;
+  details: string | null;
 }
 
 export function Flow() {
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   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 fetchProjects = async (isRefresh = false) => {
+  const fetchTasks = async (isRefresh = false) => {
     try {
       if (isRefresh) {
         setRefreshing(true);
       }
-      const response = await fetch('/api/leantime/status-labels');
+      const response = await fetch('/api/leantime/tasks');
       
       if (response.status === 429) {
         const retryAfter = parseInt(response.headers.get('retry-after') || '60');
-        const timeout = setTimeout(() => fetchProjects(), retryAfter * 1000);
+        const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
         setRetryTimeout(timeout);
         setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
         return;
       }
 
       if (!response.ok) {
-        throw new Error('Failed to fetch projects');
+        throw new Error('Failed to fetch tasks');
       }
 
       const data = await response.json();
-      if (data.projects && Array.isArray(data.projects)) {
-        setProjects(data.projects);
+      if (data.tasks && Array.isArray(data.tasks)) {
+        setTasks(data.tasks);
       } else {
-        setProjects([]);
+        setTasks([]);
       }
       setError(null);
     } catch (err) {
-      console.error('Error fetching projects:', err);
-      setError('Failed to fetch projects');
+      console.error('Error fetching tasks:', err);
+      setError('Failed to fetch tasks');
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -61,7 +59,7 @@ export function Flow() {
   };
 
   useEffect(() => {
-    fetchProjects();
+    fetchTasks();
     return () => {
       if (retryTimeout) {
         clearTimeout(retryTimeout);
@@ -72,11 +70,11 @@ 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">Flow</CardTitle>
+        <CardTitle className="text-lg font-medium">Tasks</CardTitle>
         <Button
           variant="ghost"
           size="icon"
-          onClick={() => fetchProjects(true)}
+          onClick={() => fetchTasks(true)}
           disabled={refreshing || !!retryTimeout}
           className={refreshing ? 'animate-spin' : ''}
         >
@@ -90,27 +88,26 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : projects.length === 0 ? (
-          <div className="text-center text-sm text-gray-500">No projects found</div>
+        ) : 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.id} className="space-y-2">
-                <h3 className="font-medium text-gray-900">{project.name}</h3>
+            {tasks.map((task) => (
+              <div key={task.id} className="space-y-2">
+                <h3 className="font-medium text-gray-900">{task.projectName}</h3>
                 <div className="space-y-1">
-                  {project.labels.map((label) => (
-                    <div
-                      key={label.id}
-                      className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm"
-                    >
-                      <span className="text-sm font-medium text-gray-700">
-                        {label.name}
-                      </span>
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${label.class}`}>
-                        {label.statusType}
-                      </span>
-                    </div>
-                  ))}
+                  <div className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm">
+                    <span className="text-sm font-medium text-gray-700">
+                      {task.headline}
+                    </span>
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      task.status === 'NEW' ? 'bg-blue-100 text-blue-800' :
+                      task.status === 'INPROGRESS' ? 'bg-yellow-100 text-yellow-800' :
+                      'bg-green-100 text-green-800'
+                    }`}>
+                      {task.status}
+                    </span>
+                  </div>
                 </div>
               </div>
             ))}