working leantime widget 20

components/flow.tsx

@@ -5,25 +5,29 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 
-interface Task {
+interface StatusLabel {
   id: string;
-  headline: string;
-  projectName: string;
-  status: string;
-  dueDate: string | null;
-  details?: string | null;
-  milestone?: string | null;
+  name: string;
   class: string;
+  statusType: string;
+  kanbanCol: boolean | string;
+  sortKey: number | string;
+}
+
+interface Project {
+  id: number;
+  name: string;
+  labels: StatusLabel[];
 }
 
 export function Flow() {
-  const [tasks, setTasks] = useState<Task[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
   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 fetchTasks = async (isRefresh = false) => {
+  const fetchStatusLabels = async (isRefresh = false) => {
     try {
       if (isRefresh) {
         setRefreshing(true);
@@ -32,22 +36,26 @@ export function Flow() {
       
       if (response.status === 429) {
         const retryAfter = parseInt(response.headers.get('retry-after') || '60');
-        const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
+        const timeout = setTimeout(() => fetchStatusLabels(), retryAfter * 1000);
         setRetryTimeout(timeout);
         setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
         return;
       }
 
       if (!response.ok) {
-        throw new Error('Failed to fetch tasks');
+        throw new Error('Failed to fetch status labels');
       }
 
       const data = await response.json();
-      setTasks(data.tasks || []);
+      if (data.projects && Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      } else {
+        setProjects([]);
+      }
       setError(null);
     } catch (err) {
-      console.error('Error fetching tasks:', err);
-      setError('Failed to fetch tasks');
+      console.error('Error fetching status labels:', err);
+      setError('Failed to fetch status labels');
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -55,7 +63,7 @@ export function Flow() {
   };
 
   useEffect(() => {
-    fetchTasks();
+    fetchStatusLabels();
     return () => {
       if (retryTimeout) {
         clearTimeout(retryTimeout);
@@ -63,15 +71,6 @@ export function Flow() {
     };
   }, []);
 
-  // Group tasks by project
-  const groupedTasks = tasks.reduce((acc, task) => {
-    if (!acc[task.projectName]) {
-      acc[task.projectName] = [];
-    }
-    acc[task.projectName].push(task);
-    return acc;
-  }, {} as Record<string, Task[]>);
-
   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">
@@ -79,7 +78,7 @@ export function Flow() {
         <Button
           variant="ghost"
           size="icon"
-          onClick={() => fetchTasks(true)}
+          onClick={() => fetchStatusLabels(true)}
           disabled={refreshing || !!retryTimeout}
           className={refreshing ? 'animate-spin' : ''}
         >
@@ -93,21 +92,21 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : Object.keys(groupedTasks).length === 0 ? (
-          <div className="text-center text-sm text-gray-500">No tasks found</div>
+        ) : projects.length === 0 ? (
+          <div className="text-center text-sm text-gray-500">No status labels found</div>
         ) : (
           <div className="space-y-6">
-            {Object.entries(groupedTasks).map(([projectName, projectTasks]) => (
-              <div key={projectName} className="space-y-2">
-                <h3 className="font-medium text-sm">{projectName}</h3>
+            {projects.map((project) => (
+              <div key={project.id} className="space-y-2">
+                <h3 className="font-medium text-sm">{project.name}</h3>
                 <div className="space-y-2">
-                  {projectTasks.map((task) => (
-                    <div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
+                  {project.labels.map((label) => (
+                    <div key={label.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
                       <div className="flex-1">
-                        <div className="font-medium">{task.headline}</div>
+                        <div className="font-medium">{label.name}</div>
                       </div>
-                      <div className={`ml-4 px-2 py-1 rounded text-xs ${getLabelClass(task.class)}`}>
-                        {task.status.toUpperCase()}
+                      <div className={`ml-4 px-2 py-1 rounded text-xs ${getLabelClass(label.class)}`}>
+                        {label.statusType}
                       </div>
                     </div>
                   ))}
@@ -130,6 +129,7 @@ function getLabelClass(className: string): string {
     'label-blue': 'bg-blue-100 text-blue-800',
     'label-darker-blue': 'bg-indigo-100 text-indigo-800',
     'label-dark-green': 'bg-emerald-100 text-emerald-800',
+    'label-important': 'bg-red-100 text-red-800',
   };
   
   return classMap[className] || 'bg-gray-100 text-gray-800';