working leantime widget 11

app/api/leantime/status-labels/route.ts

@@ -2,8 +2,10 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { NextResponse } from "next/server";
 
-// Simple in-memory cache for user IDs
+// Simple in-memory cache for user IDs and status labels
 const userCache = new Map<string, number>();
+const statusLabelsCache = new Map<number, { data: any; timestamp: number }>();
+const CACHE_TTL = 60000; // 1 minute cache TTL
 
 export async function GET() {
   const session = await getServerSession(authOptions);
@@ -41,9 +43,15 @@ export async function GET() {
       console.log('User lookup response:', userData);
 
       if (userData.error === 'Too many requests per minute.') {
+        const retryAfter = userResponse.headers.get('retry-after') || '60';
         return NextResponse.json(
-          { error: "Rate limit exceeded. Please try again in a minute." },
+          { error: "Rate limit exceeded. Please try again later." },
-          { status: 429 }
+          { 
+            status: 429,
+            headers: {
+              'Retry-After': retryAfter
+            }
+          }
         );
       }
 
@@ -59,6 +67,12 @@ export async function GET() {
       }
     }
 
+    // Check status labels cache
+    const cachedLabels = statusLabelsCache.get(leantimeUserId);
+    if (cachedLabels && (Date.now() - cachedLabels.timestamp) < CACHE_TTL) {
+      return NextResponse.json({ projects: cachedLabels.data });
+    }
+
     // Now fetch the status labels
     const response = await fetch('https://agilite.slm-lab.net/api/jsonrpc', {
       method: 'POST',
@@ -82,18 +96,24 @@ export async function GET() {
     console.log('Leantime API Response Body:', responseText);
 
     if (!response.ok) {
+      if (response.status === 429) {
+        const retryAfter = response.headers.get('retry-after') || '60';
+        return NextResponse.json(
+          { error: "Rate limit exceeded. Please try again later." },
+          { 
+            status: 429,
+            headers: {
+              'Retry-After': retryAfter
+            }
+          }
+        );
+      }
       if (response.status === 401) {
         return NextResponse.json({ error: "Unauthorized access to Leantime API" }, { status: 401 });
       }
       if (response.status === 403) {
         return NextResponse.json({ error: "Forbidden access to Leantime API" }, { status: 403 });
       }
-      if (response.status === 429) {
-        return NextResponse.json(
-          { error: "Rate limit exceeded. Please try again in a minute." },
-          { status: 429 }
-        );
-      }
       throw new Error(`Leantime API returned ${response.status}: ${responseText}`);
     }
 
@@ -131,6 +151,12 @@ export async function GET() {
     // Sort projects by ID for consistency
     transformedProjects.sort((a, b) => a.projectId.localeCompare(b.projectId));
 
+    // Cache the transformed data
+    statusLabelsCache.set(leantimeUserId, {
+      data: transformedProjects,
+      timestamp: Date.now()
+    });
+
     return NextResponse.json({ projects: transformedProjects });
   } catch (error) {
     console.error('Detailed error in status labels fetch:', error);

app/api/leantime/tasks/route.ts

@@ -2,15 +2,27 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { NextResponse } from "next/server";
 
-export async function GET() {
+interface Task {
-  const session = await getServerSession(authOptions);
+  id: string;
+  headline: string;
+  projectName: string;
+  projectId: number;
+  status: string;
+  dueDate: string | null;
+  priority: number;
+  details: string | null;
+}
 
-  if (!session) {
+// Cache for user IDs to avoid repeated lookups
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+const userCache = new Map<string, number>();
+
+async function getLeantimeUserId(email: string): Promise<number | null> {
+  // Check cache first
+  if (userCache.has(email)) {
+    return userCache.get(email)!;
   }
 
   try {
-    // Get user's tasks from Leantime
     const response = await fetch('https://agilite.slm-lab.net/api/jsonrpc', {
       method: 'POST',
       headers: {
@@ -18,15 +30,64 @@ export async function GET() {
         'X-API-Key': process.env.LEANTIME_TOKEN || '',
       },
       body: JSON.stringify({
-        method: 'leantime.rpc.Tasks.Tasks.getAll',
         jsonrpc: '2.0',
+        method: 'leantime.rpc.users.getAll',
+        id: 1,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch users from Leantime');
+    }
+
+    const data = await response.json();
+    const user = data.result.find((u: any) => u.email === email);
+
+    if (user) {
+      // Cache the user ID
+      userCache.set(email, user.id);
+      // Clear cache after 5 minutes
+      setTimeout(() => userCache.delete(email), 5 * 60 * 1000);
+      return user.id;
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Error getting Leantime user ID:', error);
+    return null;
+  }
+}
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+
+    if (!session || !session.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    // Get Leantime user ID
+    const leantimeUserId = await getLeantimeUserId(session.user.email);
+    
+    if (!leantimeUserId) {
+      return NextResponse.json({ error: "User not found in Leantime" }, { status: 404 });
+    }
+
+    // Get all tasks assigned to the user
+    const response = await fetch('https://agilite.slm-lab.net/api/jsonrpc', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-Key': process.env.LEANTIME_TOKEN || '',
+      },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        method: 'leantime.rpc.Tickets.Tickets.getAllByUserId',
         id: 1,
         params: {
-          userId: session.user.id,
+          userId: leantimeUserId,
-          status: ['not_started', 'in_progress'],
+          status: "all",
-          limit: 10,
+          limit: 100
-          sort: 'dueDate',
-          order: 'ASC'
         }
       })
     });
@@ -41,15 +102,64 @@ export async function GET() {
       return NextResponse.json({ tasks: [] });
     }
 
-    // Transform the tasks to match our interface
+    // Get project details to include project names
-    const tasks = data.result.map((task: any) => ({
+    const projectsResponse = await fetch('https://agilite.slm-lab.net/api/jsonrpc', {
-      id: task.id,
+      method: 'POST',
-      headline: task.headline,
+      headers: {
-      description: task.description,
+        'Content-Type': 'application/json',
-      status: task.status,
+        'X-API-Key': process.env.LEANTIME_TOKEN || '',
-      dueDate: task.dueDate,
+      },
-      priority: task.priority
+      body: JSON.stringify({
-    }));
+        jsonrpc: '2.0',
+        method: 'leantime.rpc.Projects.getAll',
+        id: 1
+      })
+    });
+
+    if (!projectsResponse.ok) {
+      throw new Error('Failed to fetch projects from Leantime');
+    }
+
+    const projectsData = await projectsResponse.json();
+    const projectsMap = new Map(
+      projectsData.result.map((project: any) => [project.id, project.name])
+    );
+
+    // Transform and categorize the tasks
+    const tasks = data.result.map((task: any) => {
+      const dueDate = task.dateToFinish ? new Date(task.dateToFinish * 1000) : null;
+      const now = new Date();
+      
+      let status = 'upcoming';
+      if (dueDate && dueDate < now) {
+        status = 'overdue';
+      } else if (task.status === 'done' || task.status === 'closed') {
+        status = 'completed';
+      } else if (task.status === 'inprogress') {
+        status = 'in_progress';
+      }
+
+      return {
+        id: task.id,
+        headline: task.headline,
+        projectName: projectsMap.get(task.projectId) || `Project ${task.projectId}`,
+        projectId: task.projectId,
+        status: status,
+        dueDate: dueDate ? dueDate.toISOString() : null,
+        priority: task.priority,
+        details: task.description ? task.description.substring(0, 100) : null
+      };
+    });
+
+    // Sort tasks by due date and status
+    tasks.sort((a: Task, b: Task) => {
+      if (a.status === 'overdue' && b.status !== 'overdue') return -1;
+      if (a.status !== 'overdue' && b.status === 'overdue') return 1;
+      if (!a.dueDate && !b.dueDate) return 0;
+      if (!a.dueDate) return 1;
+      if (!b.dueDate) return -1;
+      return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
+    });
 
     return NextResponse.json({ tasks });
   } catch (error) {

components/flow.tsx

@@ -1,40 +1,48 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, ChevronDown, Filter } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 
-interface StatusLabel {
+interface Task {
   id: string;
-  name: string;
+  headline: string;
-  statusType: string;
+  projectName: string;
-  class: string;
+  dueDate: string;
-  sortKey: number;
+  status: string;
-  kanbanCol: boolean | string;
+  details?: string;
 }
 
-interface Project {
+interface TaskGroup {
-  projectId: string;
+  name: string;
-  labels: StatusLabel[];
+  count: number;
+  tasks: Task[];
 }
 
 export function Flow() {
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [taskGroups, setTaskGroups] = useState<TaskGroup[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
+  const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
   const router = useRouter();
   const { data: session } = useSession();
 
-  const fetchStatusLabels = async (isRefresh = false) => {
+  const fetchTasks = useCallback(async (isRefresh = false, retryCount = 0) => {
     try {
       if (isRefresh) {
         setRefreshing(true);
       }
-      const response = await fetch('/api/leantime/status-labels', {
+
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+        setRetryTimeout(null);
+      }
+
+      const response = await fetch('/api/leantime/tasks', {
         cache: 'no-store',
         next: { revalidate: 0 },
       });
@@ -44,32 +52,63 @@ export function Flow() {
         return;
       }
 
+      if (response.status === 429) {
+        const retryAfter = response.headers.get('Retry-After');
+        const waitTime = retryAfter ? parseInt(retryAfter, 10) * 1000 : Math.min(1000 * Math.pow(2, retryCount), 60000);
+        setError(`Rate limit exceeded. Retrying in ${Math.round(waitTime / 1000)} seconds...`);
+        const timeout = setTimeout(() => {
+          fetchTasks(isRefresh, retryCount + 1);
+        }, waitTime);
+        setRetryTimeout(timeout);
+        return;
+      }
+
       if (!response.ok) {
-        const errorData = await response.json();
+        throw new Error('Failed to fetch tasks');
-        throw new Error(errorData.error || 'Failed to fetch status labels');
       }
 
       const data = await response.json();
-      setProjects(data.projects || []);
+      
+      // Group tasks by status
+      const groups: { [key: string]: Task[] } = {};
+      data.tasks.forEach((task: Task) => {
+        const status = task.status || 'No Status';
+        if (!groups[status]) {
+          groups[status] = [];
+        }
+        groups[status].push(task);
+      });
+
+      // Convert to array format with counts
+      const formattedGroups = Object.entries(groups).map(([name, tasks]) => ({
+        name,
+        count: tasks.length,
+        tasks
+      }));
+
+      setTaskGroups(formattedGroups);
       setError(null);
     } catch (err) {
-      console.error('Error fetching status labels:', err);
+      console.error('Error fetching tasks:', err);
-      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch status labels';
+      setError(err instanceof Error ? err.message : 'Failed to fetch tasks');
-      setError(errorMessage);
     } finally {
       setLoading(false);
       setRefreshing(false);
     }
-  };
+  }, [retryTimeout]);
 
   useEffect(() => {
     if (session) {
-      fetchStatusLabels();
+      fetchTasks();
-      // Set up polling every 5 minutes
+      const interval = setInterval(() => fetchTasks(), 300000);
-      const interval = setInterval(() => fetchStatusLabels(), 300000);
+      return () => {
-      return () => clearInterval(interval);
+        clearInterval(interval);
+        if (retryTimeout) {
+          clearTimeout(retryTimeout);
+        }
+      };
     }
-  }, [session]);
+  }, [session, fetchTasks, retryTimeout]);
 
   return (
     <Card 
@@ -77,57 +116,85 @@ export function Flow() {
       onClick={() => router.push('/flow')}
     >
       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-lg font-semibold">Flow</CardTitle>
+        <CardTitle className="text-lg font-semibold flex items-center gap-2">
-        <Button 
+          📋 My ToDos
-          variant="ghost" 
+        </CardTitle>
-          size="icon"
+        <div className="flex items-center gap-2">
-          onClick={(e) => {
+          <Button 
-            e.stopPropagation();
+            variant="ghost" 
-            fetchStatusLabels(true);
+            size="icon"
-          }}
+            onClick={(e) => {
-          disabled={refreshing}
+              e.stopPropagation();
-          className={refreshing ? 'animate-spin' : ''}
+              fetchTasks(true);
-        >
+            }}
-          <RefreshCw className="h-4 w-4" />
+            disabled={refreshing || !!retryTimeout}
-        </Button>
+            className={refreshing ? 'animate-spin' : ''}
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
       </CardHeader>
       <CardContent className="p-4">
-        {loading && <p className="text-center text-muted-foreground">Loading status labels...</p>}
+        {loading && <p className="text-center text-muted-foreground">Loading tasks...</p>}
         {error && (
           <div className="text-center">
             <p className="text-red-500">Error: {error}</p>
-            <Button 
+            {!retryTimeout && (
-              variant="outline" 
+              <Button 
-              onClick={(e) => {
+                variant="outline" 
-                e.stopPropagation();
+                onClick={(e) => {
-                fetchStatusLabels(true);
+                  e.stopPropagation();
-              }}
+                  fetchTasks(true);
-              className="mt-2"
+                }}
-            >
+                className="mt-2"
-              Try Again
+              >
-            </Button>
+                Try Again
+              </Button>
+            )}
           </div>
         )}
         {!loading && !error && (
-          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+          <div className="space-y-4">
-            {projects.length === 0 ? (
+            <div className="flex items-center justify-between text-sm text-gray-500">
-              <p className="text-center text-muted-foreground">No status labels found</p>
+              <Button variant="ghost" size="sm" className="text-gray-500">
+                <Filter className="h-4 w-4 mr-2" />
+                Group By: Due Date
+              </Button>
+              <Button variant="ghost" size="sm" className="text-gray-500">
+                Filters
+              </Button>
+            </div>
+            {taskGroups.length === 0 ? (
+              <p className="text-center text-muted-foreground">No tasks found</p>
             ) : (
-              projects.map((project) => (
+              taskGroups.map((group) => (
-                <div key={project.projectId} className="space-y-2">
+                <div key={group.name} className="space-y-2">
-                  <h3 className="text-sm font-medium text-gray-500">Project {project.projectId}</h3>
+                  <div className="flex items-center gap-2 text-gray-700">
-                  <div className="space-y-1">
+                    <ChevronDown className="h-4 w-4" />
-                    {project.labels.map((label) => (
+                    {group.name === 'overdue' && <span className="text-red-500">🔥</span>}
+                    <h3 className="font-medium">
+                      {group.name.charAt(0).toUpperCase() + group.name.slice(1)} ({group.count})
+                    </h3>
+                  </div>
+                  <div className="space-y-2 pl-6">
+                    {group.tasks.map((task) => (
                       <div 
-                        key={`${project.projectId}-${label.id}`}
+                        key={task.id}
-                        className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors"
+                        className="relative pl-4 py-2 hover:bg-gray-50 rounded-lg transition-colors"
                       >
-                        <div className="flex-1 min-w-0">
+                        {group.name === 'overdue' && (
-                          <div className="flex items-baseline justify-between">
+                          <div className="absolute left-0 top-0 bottom-0 w-1 bg-red-500 rounded-full" />
-                            <p className="text-sm font-medium truncate">{label.name}</p>
+                        )}
-                            <span className={`text-xs px-2 py-1 rounded ${label.class}`}>
+                        <div className="space-y-1">
-                              {label.statusType}
+                          <div className="font-medium text-gray-700">{task.projectName}</div>
-                            </span>
+                          <div className="text-sm">
+                            {task.headline}
+                            {task.details && (
+                              <span className="text-gray-500"> // {task.details}</span>
+                            )}
+                          </div>
+                          <div className="flex items-center text-sm text-gray-500">
+                            <span>🗓️ {new Date(task.dueDate).toLocaleDateString()}</span>
                           </div>
                         </div>
                       </div>